/* Design: "The Burgundy Wire" handoff — colors, type, spacing, and markup
   are final per design_handoff_burgundy_wire/README.md. Keep class names in
   sync with src/site/templates.js if you restructure the markup. */

:root{
  --burgundy: #5A1414;
  --burgundy-600: #7a1c1c;
  --burgundy-800: #3c0d0d;
  --gold: #FFB612;
  --gold-dim: #c99312;
  --bg: #14100f;
  --bg-alt: #1a1414;
  --surface: #1f1817;
  --surface-2: #241c1b;
  --border: rgba(255,182,18,0.12);
  --border-soft: rgba(255,255,255,0.07);
  --text: #efe9e4;
  --text-muted: #a89f9b;
  --text-faint: #7c7370;
  --radius: 10px;
  /* Wide on purpose. The river is the point of the page, so it gets the room;
     .card-excerpt keeps its own max-width so body text never runs to a
     comically long line on a big monitor. */
  --max: 1920px;
  font-size: 16px;
}

*{ box-sizing: border-box; }

html, body{ margin:0; padding:0; }

body{
  background: radial-gradient(1200px 600px at 15% -10%, rgba(90,20,20,0.35), transparent 60%), var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.45;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

a{ color: inherit; text-decoration: none; }
a:hover{ color: var(--gold); }
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

img, svg{ display:block; max-width:100%; }

.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Hero (header + ticker backdrop) ----------
   Photo: "Atlanta Falcons at Washington Commanders 2024 16.jpg" by Dissident93,
   Wikimedia Commons, CC0 (public domain — no attribution required, credited
   here anyway). Hotlinked from Wikimedia's own CDN, never copied to our own
   origin — the same policy the video rail follows for thumbnails, and for the
   same reason: serving it from the source's CDN is defensible, copying it to
   our origin is not. .site-header and .ticker keep their own burgundy washes,
   which layer on top of the dark scrim below for a bit of color instead of
   flat black. */
.hero{
  position: relative;
  background:
    url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/Atlanta_Falcons_at_Washington_Commanders_2024_16.jpg/1920px-Atlanta_Falcons_at_Washington_Commanders_2024_16.jpg')
    center 35% / cover no-repeat,
    var(--bg);
}

.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,8,7,0.72) 0%, rgba(10,8,7,0.82) 60%, var(--bg) 100%);
  pointer-events: none;
}

.hero > *{
  position: relative;
  z-index: 1;
}

/* ---------- Header ---------- */
.site-header{
  border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(180deg, rgba(90,20,20,0.18), transparent);
  padding: 36px 0 0;
}

.header-inner{
  display:flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-bottom: 6px;
}

.brand{ display:flex; flex-direction: column; align-items:center; gap:10px; }

.brand-logo{
  height: clamp(140px, 20vw, 260px);
  width: auto;
  filter: drop-shadow(3px 3px 0 rgba(0,0,0,1));
}

/* Real text instead of baked into the logo art — legible at any size and
   unaffected by the logo's drop-shadow filter. */
.brand-kicker{
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.brand-mark{
  width:36px; height:36px;
  border-radius: 7px;
  background: linear-gradient(160deg, var(--burgundy) 0%, var(--burgundy-800) 100%);
  border: 1px solid rgba(255,182,18,0.35);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size: 15px; color: var(--gold);
  letter-spacing: 0.02em;
  flex-shrink:0;
}

/* Nav and tagline share one row, bottom-aligned, sitting just above the
   ticker — the logo alone occupies the top of the hero photo, sized to push
   this row down to that spot rather than the row having its own margin do
   the work. See header() in templates.js. */
.header-bottom-row{
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 10px;
}

/* Deliberately lighter and smaller than the logo — the logo is meant to read
   as the dominant element, not compete with this. */
.tagline-big{
  margin: 0;
  font-size: clamp(16px, 1.8vw, 24px);
  line-height: 1.15;
  color: var(--gold);
  font-weight: 600;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
}

/* ---------- Filter tabs ---------- */
.filter-tabs{
  display:flex;
  gap: 4px;
  border-bottom: 1px solid var(--border-soft);
}

.filter-tabs a{
  display:inline-block;
  padding: 9px 4px;
  margin-right: 18px;
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
}

.filter-tabs a:hover{
  color: var(--text);
}

/* Jumps to an on-page widget rather than filtering the river, so it sits
   apart from the other tabs instead of reading as one of the choices. */
.filter-tabs a.nav-jump{
  margin-left: auto;
  margin-right: 0;
  padding-left: 18px;
  border-left: 1px solid var(--border-soft);
}

/* Only the first nav-jump pushes the group right — a second auto margin
   here would split the two apart instead of keeping them together. */
.filter-tabs a.nav-jump + a.nav-jump{
  margin-left: 0;
}

/* Pulses gently rather than sitting static — meant to read as "something is
   happening right now", not just a static label. Respects reduced-motion
   like every other animation on the site (see .ticker-track). */
.live-badge{
  display: inline-block;
  margin-left: 5px;
  padding: 1px 6px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #14100f;
  background: var(--gold);
  border-radius: 999px;
  vertical-align: 2px;
  animation: live-pulse 1.8s ease-in-out infinite;
}

@keyframes live-pulse{
  0%, 100%{ opacity: 1; }
  50%{ opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce){
  .live-badge{ animation: none; }
}

.filter-tabs a[aria-current="page"]{
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* ---------- Social ticker ----------
   A deliberately slim strip between the filter tabs and the river. Two
   identical copies of the post list sit side by side inside .ticker-track and
   the track slides exactly -50%, so the loop is seamless with no JS. */
.ticker{
  border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(90deg, rgba(90,20,20,0.45), rgba(90,20,20,0.18));
  overflow: hidden;
}

.ticker-rail{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.ticker-label{
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold);
}

.ticker-label::before{
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 6px var(--gold);
  animation: ticker-pulse 2s ease-in-out infinite;
}

@keyframes ticker-pulse{
  0%, 100%{ opacity: 1; }
  50%{ opacity: 0.35; }
}

.ticker-viewport{
  flex: 1;
  min-width: 0;
  overflow: hidden;
  /* Soften both ends so posts enter and leave rather than being chopped off. */
  mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}

.ticker-track{
  display: flex;
  width: max-content;
  /* Duration is set inline per build from the total text length, so the scroll
     speed stays constant no matter how wordy the day's posts are. This value is
     only a fallback. */
  animation: ticker-scroll 600s linear infinite;
}

.ticker-group{
  display: flex;
  align-items: center;
  width: max-content;
}

@keyframes ticker-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* Let people actually read and click a post that catches their eye. */
.ticker:hover .ticker-track,
.ticker:focus-within .ticker-track{
  animation-play-state: paused;
}

.ticker-post{
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 9px 0;
  margin-right: 30px;
  white-space: nowrap;
  font-size: 12.5px;
  line-height: 1.2;
}

.ticker-post::before{
  content: "";
  align-self: center;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold-dim);
  margin-right: 4px;
  opacity: 0.7;
}

.ticker-handle{
  font-weight: 700;
  color: var(--gold);
}

.ticker-text{
  color: var(--text);
}

.ticker-time{
  color: var(--text-faint);
  font-size: 11.5px;
}

.ticker-post:hover .ticker-text{ color: var(--gold); }

/* Motion here is decorative; without it the strip is just a scrollable row. */
@media (prefers-reduced-motion: reduce){
  .ticker-track{ animation: none; }
  .ticker-label::before{ animation: none; }
  .ticker-viewport{
    overflow-x: auto;
    mask-image: none;
    -webkit-mask-image: none;
  }
  .ticker-group[aria-hidden="true"]{ display: none; }
}

/* ---------- Layout ---------- */
main.layout{
  max-width: var(--max);
  margin: 0 auto;
  padding: 22px 24px 44px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

.river{
  display:flex;
  flex-direction:column;
  gap: 2px;
}

.river-heading-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}

.river-heading{
  font-size: 22px;
  color: var(--gold);
  font-weight: 800;
  margin: 0;
}

.river-updated{
  font-size: 12.5px;
  color: var(--text-faint);
  white-space: nowrap;
}

.river-updated strong{
  color: var(--text-muted);
  font-weight: 600;
}

.river-updated .dot{
  display:inline-block;
  width:6px; height:6px;
  border-radius:50%;
  background: var(--gold);
  margin-right:6px;
  box-shadow: 0 0 6px var(--gold);
}

.river-empty{
  color: var(--text-muted);
  font-size: 14px;
  padding: 24px 0;
}

/* ---------- Progressive reveal ----------
   Every headline is in the HTML; these rules only decide what's on screen.
   templates.js ships a <noscript> override that undoes both, so the river is
   never collapsed without the script that expands it. */
.river.is-collapsed .card-extra{ display: none; }
.river.is-collapsed .card-extra.is-revealed{ display: flex; }

.river-more{
  display: none;
  align-items: center;
  gap: 6px;
  align-self: center;
  margin: 20px 0 4px;
  padding: 9px 20px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.river.is-collapsed .river-more{ display: inline-flex; }

.river-more:hover{
  background: var(--burgundy);
  border-color: var(--gold);
  color: var(--gold);
}

.river-more-chevron{ fill: var(--gold); flex-shrink: 0; }

/* ---------- Back to top ---------- */
.to-top{
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 20;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--burgundy);
  border: 1px solid rgba(255,182,18,0.45);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  /* Hidden until site.js decides the page is scrolled far enough to want it. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease,
    background 120ms ease, border-color 120ms ease;
}

.to-top.is-visible{
  opacity: 1;
  visibility: visible;
  transform: none;
}

.to-top:hover{
  background: var(--burgundy-600);
  border-color: var(--gold);
}

.to-top svg{ fill: var(--gold); }

@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior: smooth; }
}

/* ---------- Card ---------- */
.card{
  position:relative;
  border-bottom: 1px solid var(--border-soft);
  padding: 7px 0;
  display:flex;
  flex-direction:column;
  gap: 4px;
}

/* :last-of-type, not :last-child — the "show more" button is the river's last
   child, so :last-child would never match a card once it's present. */
.river .card:last-of-type{
  border-bottom: none;
}

.card-top{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap: wrap;
}

.badge{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.badge-team{
  background: rgba(90,20,20,0.35);
  border-color: rgba(255,182,18,0.3);
  color: var(--gold);
}

.badge-national{
  background: rgba(255,255,255,0.04);
  border-color: var(--border-soft);
  color: var(--text-muted);
}


.card-source{
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.card-time{
  margin-left:auto;
  font-size: 12.5px;
  color: var(--text-faint);
}

.card-headline{
  font-size: clamp(15.5px, 1.4vw, 17px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin: 0;
}

.card-headline a{
  color: var(--text);
}

.card-headline a:hover{
  color: var(--gold);
}

.card-excerpt{
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 105ch;
  margin: 0;
}

/* ---------- Video rail ----------
   Thumbnails are hotlinked from YouTube's own image CDN and each card is a plain
   link until clicked; site.js swaps in the embedded player on demand. Do not
   render the iframes up front — see src/site/assets/site.js. */
.video-column{
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.video-link{
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.video-thumb{
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 7px;
  border: 1px solid var(--border-soft);
  background: var(--surface);
}

.video-thumb img{
  width: 100%;
  height: 100%;
  /* hqdefault.jpg is 480x360 — YouTube letterboxes 16:9 uploads into it, so
     crop the bars off rather than showing them. */
  object-fit: cover;
}

.video-frame{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-play{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20,16,15,0.7);
  border: 1px solid rgba(255,182,18,0.45);
  transition: background 120ms ease, border-color 120ms ease;
}

.video-play svg{
  fill: var(--gold);
  margin-left: 2px;
}

.video-link:hover .video-play{
  background: var(--burgundy);
  border-color: var(--gold);
}

.video-meta{ display: block; }

.video-title{
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}

.video-link:hover .video-title{ color: var(--gold); }

.video-time{
  display: block;
  font-size: 11.5px;
  color: var(--text-faint);
  margin-top: 3px;
}

/* Once a player is in place the card is no longer a link. */
.video-link.is-playing{ cursor: default; }
.video-link.is-playing .video-play{ display: none; }
.video-link.is-playing .video-title{ color: var(--text); }

.videos-note{
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-faint);
}

.videos-note a{
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
}

.videos-note a:hover{ color: var(--gold); }

/* ---------- Weekly digest ----------
   AI-generated, and disclosed as such on every page that shows one — see
   digestDisclosure() in templates.js. <details>/<summary> is native HTML, so
   the per-source citation lists work with no JavaScript. */
/* Closing note, not a lead-in — content comes first, disclosure comes after
   it rather than gatekeeping it. Still on every page that shows a recap (see
   digestDisclosure() below), just at the end of it instead of the top. */
.digest-disclosure{
  font-size: 12.5px;
  color: var(--text-faint);
  background: var(--bg-alt);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 10px 16px;
  margin: 28px 0 0;
  line-height: 1.6;
}

.digest-disclosure a{ color: var(--text-muted); font-weight: 600; }
.digest-disclosure a:hover{ color: var(--gold); }

.digest-post h1{
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.25;
  margin: 0 0 6px;
}

.digest-week{
  font-size: 12.5px;
  color: var(--text-faint);
  margin: 0 0 18px;
}

/* ---------- Live game post ---------- */
.live-entry{
  border-top: 1px solid var(--border-soft);
  padding: 14px 0;
}

.live-entry:first-of-type{
  border-top: 0;
  padding-top: 0;
}

.live-entry-meta{
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--gold);
}

.live-final-thoughts{
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-soft);
}

.live-final-thoughts h3{
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-faint);
  margin: 0 0 10px;
}

.live-score-subtitle{
  margin: -4px 0 14px;
  font-size: 13px;
  color: var(--text-faint);
}

.live-award-row{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 14px;
}

@media (max-width: 640px){
  .live-award-row{ grid-template-columns: 1fr; }
}

.live-award{
  padding: 14px 18px;
  border-radius: var(--radius);
}

.live-award--hero{
  background: linear-gradient(180deg, var(--burgundy) 0%, var(--burgundy-800) 100%);
  border: 1px solid rgba(255,182,18,0.35);
}

.live-award--goat{
  background: linear-gradient(180deg, #2a2422 0%, #1a1615 100%);
  border: 1px solid var(--border-soft);
}

.live-award--goat .live-award-name,
.live-award--goat .live-award-icon{
  color: var(--text-muted);
  fill: var(--text-muted);
}

.live-award-name{
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gold);
}

.live-award-icon{
  fill: var(--gold);
  flex-shrink: 0;
}

.live-award-tagline{
  margin: 0 0 10px;
  font-size: 12px;
  font-style: italic;
  color: var(--text-faint);
}

.live-award-recipient{
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.live-award-reason{
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #e2d9d5;
}

.digest-lede{
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 20px;
}

/* One continuous column, not boxed sections — see digestThread() in
   templates.js. Ordinary paragraph spacing, no dividers between them. */
.digest-para{
  font-size: 14.5px;
  color: var(--text);
  line-height: 1.65;
  margin: 0 0 18px;
}

/* Player-name links (see linkPlayers() in src/lib/roster-links.js) inherit
   plain text color by default — without this they're indistinguishable from
   the surrounding prose, since the base `a{ color: inherit }` rule gives no
   visual sign a name is clickable until hovered. */
.digest-para a,
.card-excerpt a{
  text-decoration: underline;
  text-decoration-color: rgba(255,182,18,0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.digest-para a:hover,
.card-excerpt a:hover{
  text-decoration-color: var(--gold);
}

/* Still used for the "Also noted" postscript, which is deliberately set off
   from the column above it with a divider, unlike the flowing paragraphs. */
.digest-thread{
  border-top: 1px solid var(--border-soft);
  padding: 20px 0;
}

.digest-thread h3{
  font-size: 16px;
  margin: 0 0 8px;
}

/* One consolidated reference list at the end of the post, not a box under
   every paragraph — a professional recap attributes reporting once, not
   after every sentence (see collectCites()/digestSourceFooter() in
   templates.js). */
.digest-source-footer{
  border-top: 1px solid var(--border-soft);
  margin-top: 26px;
  padding-top: 22px;
}

.digest-source-toggle summary{
  cursor: pointer;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-faint);
  font-weight: 700;
}

.digest-source-toggle summary:hover{ color: var(--gold); }

.digest-source-note{
  font-size: 12.5px;
  color: var(--text-faint);
  margin: 14px 0 14px;
}

.digest-source-list{
  list-style: decimal;
  margin: 0;
  padding: 0 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.digest-source-list li{
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
}

.digest-source-list a{ color: var(--text); font-weight: 600; }
.digest-source-list a:hover{ color: var(--gold); }

.weekly-index-heading{
  font-size: clamp(20px, 2.6vw, 26px);
  margin: 4px 0 6px;
}

/* Between two full recaps stacked on the index page — .digest-post already
   carries its own bottom spacing, so this only needs to draw the line. */
.digest-divider{
  border: 0;
  border-top: 1px solid var(--border-soft);
  margin: 8px 0 32px;
}

/* ---------- Sidebar ---------- */
.sidebar{
  display:flex;
  flex-direction: column;
  gap: 14px;
}

.widget{
  background: var(--bg-alt);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 14px 18px;
}

/* Team burgundy, matching the footer treatment — same reason: --text-faint
   and --border-soft are tuned against the near-black page background and
   fall under AA contrast on burgundy, so both get re-declared in this scope
   rather than inherited. See .site-footer for the same pattern. */
.widget-videos{
  background: linear-gradient(180deg, var(--burgundy) 0%, var(--burgundy-800) 100%);
  border-color: rgba(255,182,18,0.35);
  --text-faint: #cbbfba;
  --border-soft: rgba(255,182,18,0.18);
}

/* ---------- Schedule widget ----------
   Deliberately not a `.widget` card like the video rail — a season's worth
   of rows reads better as a plain list than a boxed panel, and the contrast
   with the video widget beside it is the point, not an oversight. Opponent
   logos are hotlinked from static.www.nfl.com — the same CDN commanders.com's
   own schedule page uses — never downloaded or rehosted. See scheduleRow()
   in templates.js for the reasoning. */
.widget-schedule h2{
  margin: 0 0 10px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-faint);
  font-weight: 700;
}

/* ---------- Betting line (inline on the matching schedule row) ----------
   Next-game line only, from data/betting.json (see src/lib/betting.js) —
   attached to whichever schedule row is the actual next meeting, not shown
   as its own widget. The disclaimer comes straight from ESPN's own payload
   for whichever sportsbook is the provider, not written here, and appears
   once for the whole widget rather than repeated per row. */
.schedule-odds{
  font-size: 11.5px;
  font-weight: 600;
  color: var(--gold);
}

.betting-disclaimer{
  margin: 10px 0 0;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--text-faint);
  border-top: 1px solid var(--border-soft);
  padding-top: 8px;
}

/* ---------- Podcasts page ----------
   Spotify's own public embed iframes — no API key, no scraping. Each embed
   ships its own dark player chrome, so this page only needs to handle
   spacing and the rounded corners; Spotify handles the rest. */
.podcasts-heading{
  font-size: clamp(20px, 2.6vw, 26px);
  margin: 4px 0 6px;
}

.page-intro{
  color: var(--text-muted);
  max-width: 60ch;
  margin: 0 0 20px;
}

.podcast-page-list{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 24px;
  align-items: start;
}

.podcast-description{
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted);
}

/* ---------- How It Works ---------- */
.how-it-works{ max-width: 76ch; }

.how-section{
  margin: 0 0 26px;
}

.how-section h2{
  font-size: 17px;
  margin: 0 0 8px;
  color: var(--gold);
}

.podcast-embed{
  border-radius: 12px;
  overflow: hidden;
}

.podcast-embed iframe{
  display: block;
  border-radius: 12px;
}

.schedule-list{
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.schedule-row{
  display: flex;
  align-items: center;
  gap: 10px;
}

.schedule-row--bye{ opacity: 0.7; }

.schedule-logo{
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex-shrink: 0;
}

.schedule-logo--empty{
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.schedule-info{
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.schedule-matchup{
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}

.schedule-date{
  font-size: 11.5px;
  color: var(--text-faint);
}

.schedule-date.is-win{ color: var(--gold); font-weight: 600; }

.widget h2{
  margin: 0 0 8px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-faint);
  font-weight: 700;
}

.widget p{
  margin: 0 0 10px;
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.6;
}

.widget p:last-child{ margin-bottom:0; }

.legend-row{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 8px;
}

.legend-row:last-child{ margin-bottom:0; }

.legend-row span.desc{
  font-size: 13px;
  color: var(--text-muted);
}

/* ---------- Footer ----------
   Team burgundy (#5A1414, the official colour) rather than the page's near-black,
   with a gold hairline to seat it. The palette variables are re-declared inside
   this scope because the muted greys were tuned against #14100f: --text-faint on
   burgundy drops to about 3:1, which is under the 4.5:1 needed for body text, so
   the footer gets lighter tones and a visible border instead of inheriting ones
   that only work on the darker background. */
.site-footer{
  --text-faint: #cbbfba;
  --border-soft: rgba(255,182,18,0.18);
  border-top: 1px solid rgba(255,182,18,0.35);
  background: linear-gradient(180deg, var(--burgundy) 0%, var(--burgundy-800) 100%);
  padding: 28px 0 20px;
}

/* On burgundy the team badge's own burgundy tint disappears — darken instead. */
.site-footer .badge-team{
  background: rgba(0,0,0,0.3);
  border-color: rgba(255,182,18,0.45);
}

.site-footer .badge-national{
  background: rgba(0,0,0,0.22);
}

.site-footer .source-list a,
.site-footer .footer-col p,
.site-footer .legend-row span.desc{
  color: #e2d9d5;
}

.site-footer .source-list a:hover{ color: var(--gold); }

.site-footer .rss-link{
  border-color: rgba(255,182,18,0.45);
}

.site-footer .rss-link:hover{
  background: rgba(0,0,0,0.25);
}

.footer-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 18px;
}

.footer-col h3{
  margin: 0 0 14px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  font-weight: 700;
}

/* "About this page" and "Reading the badges" live here rather than in a
   sidebar widget — the right-hand column is the video rail now. */
.footer-col p{
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Shown only below the mobile breakpoint — see that media query. */
.footer-about-short{ display: none; }

.footer-col p:last-child{ margin-bottom: 0; }

.source-list{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-direction: column;
  gap: 9px;
}

.source-list a{
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
}

.source-list a:hover{ color: var(--gold); }

.rss-link{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
}

.rss-link:hover{
  color: var(--gold);
  border-color: var(--gold);
}

.rss-link svg{ fill: var(--gold); }

.footer-bottom{
  border-top: 1px solid var(--border-soft);
  padding-top: 20px;
  display:flex;
  flex-wrap:wrap;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  color: var(--text-faint);
}

/* ---------- Desktop ---------- */
@media (min-width: 900px){
  main.layout{
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
  }
  /* No videos to show — don't leave a dead column beside the river. */
  main.layout.layout-wide{
    grid-template-columns: minmax(0, 1fr);
  }
  .footer-grid{
    grid-template-columns: 1.7fr 1.3fr 1fr 1fr auto;
    gap: 32px;
    align-items: start;
  }
  .card-top{ gap: 12px; }
}

/* Between tablet and desktop, five footer columns are too many. */
@media (min-width: 640px) and (max-width: 899px){
  .footer-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* Above ~1400px, .card-excerpt's own 105ch cap (deliberate — see that rule)
   left a growing dead gap between the river and a sidebar that was still
   only 320px wide, worse the wider the screen got. Rather than let the river
   column alone absorb reclaimed width it can't use, the sidebar widens and
   the video widget sits beside a new schedule widget instead of above it. */
@media (min-width: 1400px){
  main.layout{
    grid-template-columns: minmax(0, 1fr) 640px;
  }
  .sidebar{
    flex-direction: row;
    align-items: flex-start;
  }
  .widget-videos{ flex: 0 0 320px; }
  .widget-schedule{ flex: 1 1 0; min-width: 0; }
}

@media (max-width: 480px){
  .card-time{ margin-left:0; width:100%; order:3; }
}

/* Below tablet, the logo-alone-on-top / nav-and-tagline-sharing-a-row layout
   (see header() in templates.js) doesn't have room to breathe — the row
   wrapped but stayed left/right-aligned, and .filter-tabs itself had no
   wrap at all, so a narrow phone clipped the last tab off-screen instead of
   wrapping it. Centering everything here is a deliberate phone-only
   departure from the desktop layout, not a scaled-down version of it. */
@media (max-width: 640px){
  .header-inner{ justify-content: center; }
  .brand-logo{ height: 160px; }
  .header-bottom-row{ flex-direction: column; align-items: center; }
  .podcast-page-list{ grid-template-columns: 1fr; }
  .filter-tabs{ justify-content: center; flex-wrap: wrap; width: 100%; }
  /* The auto margin that separates it from the filter tabs on desktop only
     makes sense in a single unwrapped row — on a wrapped, centered mobile
     row it would just shove it to a line of its own. */
  .filter-tabs a.nav-jump{ margin-left: 0; border-left: none; padding-left: 4px; }
  /* min-width:0 is the actual fix — a flex item's default min-width:auto
     refuses to shrink below its content's width even with width:100% set,
     which is what was pushing this past the edge instead of wrapping. */
  .tagline-big{ text-align: center; width: 100%; min-width: 0; }

  /* Two full paragraphs of "About this page" pushed every other footer
     column down a full screen's worth on a phone — one line covers it. */
  .footer-about-full{ display: none; }
  .footer-about-short{ display: block; }
}