/* ==========================================================================
   Dome and Domer — core stylesheet
   Sections: 1 tokens · 2 reset · 3 layout · 4 masthead · 5 gamebar
             6 lede · 7 rail · 8 recent · 9 footer · 10 responsive · 11 a11y
   ========================================================================== */

/* 1. TOKENS ================================================================ */
:root {
  --navy:      #0C2340;
  --navy-2:    #132F52;
  --navy-3:    #24456F;
  --gold:      #C99700;
  --gold-lit:  #E5B93C;
  --gold-deep: #3D2B00;

  --page:      #FFFFFF;
  --surface:   #F4F5F7;
  /* Rail tints. Derived from --navy and --gold by eye against white; kept as
     literal hex rather than color-mix() so they render identically on the
     older mobile browsers this audience actually uses. */
  --navy-tint: #EEF2F8;
  --gold-tint: #FBF4E0;

  --line:      #E2E5EA;
  --line-2:    #CBD1D9;

  --type:      #16181C;
  --type-2:    #545A63;
  --type-3:    #858B94;
  --on-dark:   #FFFFFF;
  --on-dark-2: #9FB2CC;

  --font-display: "Bitter", Georgia, "Times New Roman", serif;
  --font-util:    "Oswald", "Arial Narrow", Impact, sans-serif;
  --font-body:    "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --wrap: 1120px;
  --gut: 24px;
  --r: 6px;

  --step--1: 0.8125rem;
  --step-0:  1rem;
  --step-1:  1.125rem;
  --step-2:  1.5rem;
  --step-3:  1.875rem;

  --ease: cubic-bezier(0.2, 0.6, 0.3, 1);
}

/* 2. RESET ================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--type);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }

/* 3. LAYOUT =============================================================== */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.eyebrow {
  font-family: var(--font-util);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--type-3);
  margin-bottom: 0.75rem;
}

/* 4. MASTHEAD ============================================================= */
.masthead { background: var(--navy); }

.masthead__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding-block: 1.05rem;
}

.wordmark {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--on-dark);
  line-height: 1;
  white-space: nowrap;
}

.wordmark em {
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--gold-lit);
}

.nav { display: flex; align-items: center; gap: 1.5rem; }

.nav__list { display: flex; align-items: center; gap: 1.5rem; }

.nav__link {
  font-family: var(--font-util);
  font-size: 0.8125rem;
  font-weight: 300;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--on-dark);
  padding-block: 0.3rem;
  border-bottom: 2px solid transparent;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}

.nav__link:hover,
.nav__link:focus-visible { border-bottom-color: var(--gold-lit); color: var(--gold-lit); }

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

.nav__search {
  display: inline-grid;
  place-items: center;
  width: 32px; height: 32px;
  color: var(--on-dark-2);
  border-radius: var(--r);
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
}

.nav__search:hover,
.nav__search:focus-visible { color: var(--gold-lit); background: var(--navy-2); }

.nav__toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--navy-3);
  border-radius: var(--r);
  color: var(--on-dark);
  padding: 0.45rem 0.6rem;
  line-height: 1;
}

/* 5. GAME BAR ============================================================= */
.gamebar {
  background: var(--navy-2);
  border-bottom: 3px solid var(--gold);
  color: var(--on-dark);
}

.gamebar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.95rem;
  flex-wrap: wrap;
}

.gamebar__left { display: flex; align-items: center; gap: 0.95rem; }

.gamebar__state {
  flex-shrink: 0;
  font-family: var(--font-util);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--gold);
  color: var(--gold-deep);
  padding: 0.28rem 0.65rem;
  border-radius: var(--r);
}

.gamebar__match {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}

.gamebar__meta {
  font-family: var(--font-util);
  font-size: 0.6875rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  color: var(--on-dark-2);
  margin-top: 0.15rem;
}

.gamebar__clock { text-align: right; }

.gamebar__count {
  font-family: var(--font-util);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--gold-lit);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.gamebar__countLabel {
  font-family: var(--font-util);
  font-size: 0.6875rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: var(--on-dark-2);
  margin-top: 0.25rem;
}

/* 6. LEDE ================================================================= */
.lede { padding-block: 2rem 1.5rem; }

.lede__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 1.75rem;
}

.player {
  position: relative;
  background: var(--navy);
  border-radius: var(--r);
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* The lede is an anchor to the watch page rather than an inline embed. The
   watch page is the indexable unit and owns the VideoObject markup; putting a
   second player here would duplicate that and cost the homepage its LCP. */
.player__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease);
}

.player:hover .player__img,
.player:focus-visible .player__img { transform: scale(1.02); }

/* Scrim so the gold button holds contrast over an arbitrary thumbnail. */
.player::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(12, 35, 64, 0.55) 0%, rgba(12, 35, 64, 0.15) 70%);
}

.player__btn {
  position: relative;   /* above the image and the scrim */
  z-index: 1;
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: rgba(12, 35, 64, 0.5);
  color: var(--gold-lit);
  display: grid;
  place-items: center;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}

.player:hover .player__btn,
.player:focus-visible .player__btn { transform: scale(1.07); background: var(--navy-2); }

.player__btn:hover,
.player__btn:focus-visible { transform: scale(1.07); background: var(--navy-2); }

.player__btn svg { width: 20px; height: 20px; margin-left: 3px; }

.lede__title {
  font-size: var(--step-2);
  margin: 1rem 0 0.5rem;
  max-width: 24ch;
}

.lede__dek {
  font-size: var(--step-0);
  color: var(--type-2);
  line-height: 1.55;
  max-width: 56ch;
}

.lede__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 1.1rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-util);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.55rem 1.25rem;
  border-radius: var(--r);
  border: 1px solid var(--navy);
  background: var(--navy);
  color: var(--on-dark);
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}

.btn:hover, .btn:focus-visible { background: var(--navy-3); border-color: var(--navy-3); }

.btn--ghost { background: transparent; color: var(--navy); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--navy); color: var(--on-dark); }

.lede__stamp {
  font-family: var(--font-util);
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  color: var(--type-3);
  margin-left: 0.35rem;
}

/* 7. RAIL — stat cards ==================================================== */
.rail { display: flex; flex-direction: column; gap: 0.75rem; }

.stat {
  background: var(--surface);
  border-radius: var(--r);
  padding: 0.85rem 1rem 0.95rem;
  border-left: 3px solid transparent;
}

/* ALTERNATING RAIL BOXES
   Driven by :nth-of-type rather than a class on each box, so the pattern is a
   property of the rail rather than of any one box. Add a fifth stat later and
   it keeps alternating; reorder them and it re-stripes itself. Hardcoding
   .stat--navy / .stat--gold would have to be re-checked by hand every time the
   rail changes, which is exactly when nobody re-checks it. */
.rail .stat:nth-of-type(odd) {
  background: var(--navy-tint);
  border-left-color: var(--navy);
}

.rail .stat:nth-of-type(even) {
  background: var(--gold-tint);
  border-left-color: var(--gold);
}

/* Tints only, never the full-strength colour as a background. A solid navy or
   gold panel would need its own inverted type colours for label, value and
   note, and the rail would stop matching the rest of the page. The saturation
   lives in the 3px edge, where it costs nothing to read past. */

/* ── Next game countdown ─────────────────────────────────────────────────── */

.cd__match {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.2;
  color: var(--navy);
  margin-bottom: 0.15rem;
}

.cd__when {
  font-size: var(--step--1);
  color: var(--type-2);
  line-height: 1.4;
  margin-bottom: 0.6rem;
}

.cd__clock { display: block; }

.cd__digits {
  display: block;
  font-family: var(--font-util);
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--navy);
  /* Tabular figures are not optional on a clock that reprints every second —
     proportional digits make the whole line shuffle sideways on every tick. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.cd__lab {
  display: block;
  font-family: var(--font-util);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--type-3);
  margin-top: 0.25rem;
}

.cd__clock--live .cd__digits { color: var(--gold); }

.cd__tbd {
  font-size: var(--step--1);
  color: var(--type-3);
  font-style: italic;
}

.stat__label {
  font-family: var(--font-util);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--type-3);
  margin-bottom: 0.4rem;
}

.stat__value {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1;
  color: var(--navy);
}

.stat__value--sm { font-size: 1.125rem; font-weight: 600; }

.stat__note {
  font-size: var(--step--1);
  color: var(--type-2);
  margin-top: 0.3rem;
}

.stat__listen { display: flex; gap: 0.5rem; margin-top: 0.15rem; }

.stat__listen a {
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  color: var(--type-2);
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}

.stat__listen a:hover,
.stat__listen a:focus-visible { border-color: var(--navy); color: var(--navy); }

.stat__listen svg { width: 16px; height: 16px; }

/* 8. RECENT EPISODES ====================================================== */
.recent { padding-block: 0.5rem 2.75rem; }

.recent__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.card { display: block; }

.card__thumb {
  position: relative;
  display: block;
  background: var(--surface);
  border-radius: var(--r);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.card__img {
  position: relative;   /* stacks above the fallback plate */
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s var(--ease);
}

.card:hover .card__img,
.card:focus-visible .card__img { transform: scale(1.035); }

/* Matches the index plate. The catalog reuses one stadium image across many
   uploads, so the date is what actually distinguishes these cards. */
.card__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-2) 60%, var(--navy-3) 100%);
  color: var(--on-dark);
  font-family: var(--font-util);
  line-height: 1;
}

.card__fallbackDate { font-size: 1.05rem; letter-spacing: 0.06em; }
.card__fallbackYear { font-size: 0.7rem; letter-spacing: 0.18em; color: var(--gold-lit); }

.card__dur {
  position: absolute;
  z-index: 2;
  right: 0.5rem;
  bottom: 0.5rem;
  background: rgba(12, 35, 64, 0.88);
  color: var(--on-dark);
  font-family: var(--font-util);
  font-size: 0.6875rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  padding: 0.16rem 0.44rem;
  border-radius: 3px;
}

.card__title {
  display: block;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  margin-top: 0.65rem;
  transition: color 0.18s var(--ease);
}

.card:hover .card__title { color: var(--navy-3); }

.card__meta {
  display: block;
  font-family: var(--font-util);
  font-size: 0.6875rem;
  font-weight: 300;
  letter-spacing: 0.07em;
  color: var(--type-3);
  margin-top: 0.3rem;
}

.recent__more {
  display: inline-block;
  margin-top: 1.5rem;
  font-family: var(--font-util);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 2px;
}

.recent__more:hover,
.recent__more:focus-visible { border-bottom-color: var(--navy); }

/* 9. FOOTER =============================================================== */
.foot {
  background: var(--navy);
  color: var(--on-dark-2);
  padding-block: 2.5rem 1.75rem;
  font-size: var(--step--1);
}

.foot__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 2rem;
}

.foot h3 {
  font-family: var(--font-util);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-lit);
  margin-bottom: 0.85rem;
}

.foot li { margin-bottom: 0.45rem; }

.foot a { transition: color 0.18s var(--ease); }
.foot a:hover, .foot a:focus-visible { color: var(--gold-lit); }

.foot__blurb { max-width: 34ch; line-height: 1.7; }

.foot__base {
  margin-top: 2rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--navy-3);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  color: #7C8CA3;
}

/* 10. RESPONSIVE ========================================================== */
@media (max-width: 900px) {
  .lede__grid { grid-template-columns: 1fr; }
  .rail { flex-direction: row; flex-wrap: wrap; }
  .stat { flex: 1 1 30%; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  :root { --gut: 18px; --step-2: 1.375rem; }

  .nav__toggle { display: block; }

  .nav {
    position: absolute;
    left: 0; right: 0; top: 100%;
    z-index: 40;
    background: var(--navy-2);
    border-top: 1px solid var(--navy-3);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--gut) 1rem;
    display: none;
  }

  .nav[data-open="true"] { display: flex; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }

  .nav__link {
    display: block;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--navy-3);
  }

  .nav__search { margin-top: 0.8rem; width: auto; justify-self: start; }

  .gamebar__inner { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .gamebar__left { align-items: flex-start; }
  .gamebar__clock { text-align: left; }

  .recent__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .rail { flex-direction: column; }
  .foot__grid { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* 11. ACCESSIBILITY ======================================================= */
.skip {
  position: absolute;
  left: -9999px; top: 0;
  background: var(--gold);
  color: var(--navy);
  font-family: var(--font-util);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.75rem 1.25rem;
  z-index: 100;
}

.skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.masthead :focus-visible,
.gamebar :focus-visible,
.foot :focus-visible { outline-color: var(--gold-lit); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}