:root {
  /* ============================================================
     JAI ALAI · FRONTON AFTER DARK
     Nike-tier palette. Obsidian primary. Brass century. Ignition red.
     Bone reserved for archival/heritage moments only.
     ============================================================ */

  /* Surfaces — near-black warm neutrals */
  --bg:        #0a0b0d;      /* obsidian page */
  --bg-2:      #101115;      /* elevated section */
  --bg-3:      #16181d;      /* card / row */
  --bg-4:      #1c1f25;      /* hover / active */
  --bg-hero:   #06070a;      /* deepest — hero letterbox */
  --bg-bone:   #e8e2d1;      /* heritage/archival reversal */
  --bg-bone-2: #d9d1bd;

  /* Ink — bone-white and warm greys */
  --ink:       #f4efe1;      /* primary reversed text */
  --ink-2:     #d6cfba;
  --ink-dim:   #8a8578;
  --ink-mute:  #55524a;
  --ink-dark:  #0a0b0d;      /* when we reverse to bone sections */
  --ink-dark-2: #1f1e1a;

  /* Lines — brass hairlines */
  --line:       rgba(244, 239, 225, 0.09);
  --line-2:     rgba(244, 239, 225, 0.16);
  --line-3:     rgba(244, 239, 225, 0.28);
  --line-dark:  rgba(10, 11, 13, 0.10);
  --line-dark-2: rgba(10, 11, 13, 0.20);

  /* Accents */
  --brass:      #c9a24a;     /* century, trophies, hairline accents */
  --brass-2:    #a88134;
  --brass-glow: rgba(201, 162, 74, 0.22);
  --brass-soft: rgba(201, 162, 74, 0.10);

  --red:        #D8202A;     /* ignition — live, ball, primary CTA */
  --red-2:      #b8241b;
  --red-glow:   rgba(230, 51, 41, 0.30);
  --red-soft:   rgba(230, 51, 41, 0.10);

  --court:      #3d5a3f;     /* deep fronton green — tertiary heritage */

  /* Legacy tokens kept for old class names (mapped to new system) */
  --paper:      var(--bg-bone);
  --paper-2:    var(--bg-bone-2);
  --ink-cream:  var(--ink);
  --ink-cream-dim: var(--ink-2);
  --bg-dark:    var(--bg);
  --bg-dark-2:  var(--bg-hero);
  --line-cream: var(--line);
  --line-cream-2: var(--line-2);
  --rule:       var(--line);

  /* Typography — athletic display + editorial serif for heritage */
  --font-body:    "Inter", "General Sans", -apple-system, system-ui, sans-serif;
  --font-display: "Anton", "Oswald", "Bebas Neue", "Satoshi", sans-serif;
  --font-athletic: "Barlow Condensed", "Oswald", "Anton", sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, monospace;
  --font-serif:   "Fraunces", "DM Serif Display", Georgia, serif;

  --radius:    2px;
  --radius-lg: 4px;

  --pad-x: clamp(20px, 5vw, 96px);
  --pad-y: clamp(72px, 10vw, 160px);

  /* Grain overlay data-uri (subtle film noise) */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.93  0 0 0 0 0.88  0 0 0 0.055 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

@keyframes grainShift {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-2%, 1%); }
  40% { transform: translate(1%, -2%); }
  60% { transform: translate(-1%, 2%); }
  80% { transform: translate(2%, 1%); }
}

.grain::before {
  content:"";
  position: absolute; inset: 0;
  background-image: var(--grain);
  opacity: 0.5;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 3;
  animation: grainShift 6s steps(6) infinite;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ---------- Centennial bar — dark chrome ---------- */
.announce {
  background: #000;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.announce__inner {
  display: flex; align-items: center; justify-content: center;
  gap: 22px;
  padding: 9px var(--pad-x);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  flex-wrap: wrap;
  color: var(--ink-dim);
}
.announce__mark {
  padding: 3px 12px;
  border: 1px solid var(--brass);
  color: var(--brass);
  background: transparent;
  font-weight: 700;
  border-radius: 0;
  letter-spacing: 0.24em;
}
.announce em {
  color: var(--ink);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.18em;
}
.announce strong {
  color: var(--brass);
  font-weight: 700;
  letter-spacing: 0.18em;
}
.announce a {
  color: var(--ink);
  border-bottom: 1px solid var(--brass);
  padding-bottom: 2px;
  transition: color .2s;
}
.announce a:hover { color: var(--brass); }

/* ---------- Score ticker — F1 timing tower ---------- */
.scoreticker {
  background: linear-gradient(180deg, #0d0e12 0%, #08090c 100%);
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  overflow: hidden;
  position: relative;
}
.scoreticker::before {
  content:"";
  position:absolute; left:0; right:0; top:0; height:1px;
  background: linear-gradient(90deg, transparent, var(--brass-glow), transparent);
}
.scoreticker__inner {
  display: flex;
  gap: 40px;
  padding: 14px var(--pad-x);
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-dim);
  letter-spacing: 0.08em;
}
.scoreticker__inner::-webkit-scrollbar { display: none; }
.tick { display: inline-flex; align-items: center; gap: 14px; padding-right: 40px; border-right: 1px solid var(--line); }
.tick:last-child { border-right: none; }
.tick__status {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 3px 8px;
  border: 1px solid var(--line-2);
  border-radius: 0;
  font-weight: 600;
}
.tick__status--live {
  color: var(--red);
  border-color: var(--red);
  background: var(--red-soft);
  font-weight: 700;
  position: relative;
  padding-left: 20px;
}
.tick__status--live::before {
  content:"";
  position:absolute; left:8px; top:50%; transform:translateY(-50%);
  width:6px; height:6px; border-radius:50%;
  background: var(--red);
  box-shadow: 0 0 8px var(--red-glow);
  animation: pulseDot 1.4s infinite;
}
.tick__status--final { color: var(--brass); border-color: var(--brass); }
.tick__match {
  color: var(--ink);
  font-weight: 500;
  font-family: var(--font-athletic);
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.tick__match b { font-weight: 700; color: var(--brass); font-family: var(--font-mono); font-size: 14px; }
.tick__match em {
  color: var(--ink-dim);
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  padding: 0 6px;
  font-weight: 500;
}
.tick__meta {
  color: var(--ink-mute);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

@keyframes pulse {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.35; }
}
@keyframes pulseDot {
  0%,100% { opacity: 1; transform: translateY(-50%) scale(1); }
  50%     { opacity: 0.4; transform: translateY(-50%) scale(0.85); }
}

/* ---------- Header — dark chrome, brass hairline ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 18px var(--pad-x);
  background: rgba(10, 11, 13, 0.82);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
/* ------------------------------------------------------------
   BRAND LOCKUP — WORLD / JAI ALAI / LEAGUE with athlete icon
   ------------------------------------------------------------ */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
}
.brand__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  flex-shrink: 0;
}
.brand__icon svg {
  /* Pelotari icon aspect ratio is ~0.41 (tall + narrow) */
  width: 20px;
  height: 48px;
  display: block;
}
.brand__lockup {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  gap: 3px;
}
.brand__frame {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.brand__frame-line {
  flex: 1;
  height: 1.5px;
  background: var(--red);
  min-width: 8px;
}
.brand__frame-word {
  font-family: 'Oswald', 'Barlow Condensed', 'Anton', sans-serif;
  font-weight: 700;
  font-style: italic;
  color: var(--red);
  font-size: 9px;
  letter-spacing: 0.14em;
  transform: skewX(-6deg);
  white-space: nowrap;
  padding: 0 1px;
}
.brand__wordmark {
  font-family: 'Oswald', 'Barlow Condensed', 'Anton', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 26px;
  letter-spacing: 0.02em;
  color: var(--ink);
  transform: skewX(-6deg);
  line-height: 0.95;
  padding: 1px 0;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .brand { gap: 8px; }
  .brand__icon svg { width: 16px; height: 40px; }
  .brand__wordmark { font-size: 22px; }
  .brand__frame-word { font-size: 8px; }
}
.site-nav {
  display: flex; gap: 30px; justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.20em; text-transform: uppercase;
  font-weight: 500;
}
.site-nav a {
  color: var(--ink-dim);
  transition: color .2s;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover {
  color: var(--brass);
  border-bottom-color: var(--brass);
}
.site-cta { display: flex; gap: 10px; align-items: center; }

/* ---------- Buttons — sharp, mono, ranged ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: 0;
  border: 1px solid transparent;
  transition: transform .2s ease, background .25s ease, color .2s ease, border-color .25s ease, box-shadow .25s ease;
  cursor: pointer;
  position: relative;
}
.btn--primary {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
  box-shadow: 0 0 0 rgba(230, 51, 41, 0);
}
.btn--primary:hover {
  background: var(--red-2);
  border-color: var(--red-2);
  box-shadow: 0 0 32px var(--red-glow);
  transform: translateY(-1px);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-3);
}
.btn--ghost:hover {
  border-color: var(--brass);
  color: var(--brass);
}
.btn--brass {
  background: transparent;
  color: var(--brass);
  border-color: var(--brass);
}
.btn--brass:hover {
  background: var(--brass);
  color: var(--ink-dark);
}
.btn--light { background: var(--ink); color: var(--ink-dark); border-color: var(--ink); }
.btn--light:hover { background: var(--brass); border-color: var(--brass); color: var(--ink-dark); }
.btn--lg { padding: 18px 30px; font-size: 12px; letter-spacing: 0.24em; }

/* ---------- Hero — cinematic letterbox ---------- */
.hero {
  padding: 0;
  background: var(--bg-hero);
  position: relative;
  overflow: hidden;
  min-height: min(88vh, 900px);
  display: flex;
  align-items: stretch;
}
.hero::after {
  /* film grain */
  content:"";
  position: absolute; inset: 0;
  background-image: var(--grain);
  opacity: 0.32;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 5;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: end;
  width: 100%;
  position: relative;
  z-index: 2;
}
.hero__image {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
}
.hero__image::before {
  /* Left-weighted scrim over ball-spattered wall. Not opaque — we WANT
     the ball-spatter texture to bleed through as narrative background
     under the headline. The scrim is heaviest along the type column,
     softens through the mid, then vanishes over the athlete on the
     right. Bottom stays deep so the caption bar reads as ink. */
  content:"";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(6,7,10,0.86) 0%, rgba(6,7,10,0.70) 24%, rgba(6,7,10,0.30) 48%, rgba(6,7,10,0.05) 65%, rgba(6,7,10,0) 100%),
    linear-gradient(180deg, rgba(6,7,10,0.30) 0%, rgba(6,7,10,0.05) 32%, rgba(6,7,10,0.55) 76%, rgba(6,7,10,0.96) 100%);
  z-index: 2;
}
.hero__image::after {
  /* Cinematic vignette anchored on the athlete's core — pulls the eye
     toward the subject and deepens the corners without touching the
     wall texture that flanks him. */
  content:"";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 85% at 72% 55%, rgba(6,7,10,0) 25%, rgba(6,7,10,0.12) 58%, rgba(6,7,10,0.55) 95%);
  z-index: 2;
  pointer-events: none;
}
.hero__content {
  position: relative;
  z-index: 4;
  max-width: min(760px, 62vw);
  padding: clamp(48px, 8vw, 120px) var(--pad-x) clamp(56px, 7vw, 100px);
  align-self: end;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--brass);
  padding: 0;
  border: none;
  background: transparent;
  margin-bottom: 28px;
}
.eyebrow::before {
  content:"";
  width: 36px; height: 1px;
  background: var(--brass);
}
.eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--brass);
  opacity: 0.7;
  margin-left: 4px;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(56px, 10vw, 168px);
  line-height: 0.86;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
  color: var(--ink);
  text-transform: uppercase;
  text-shadow: 0 2px 40px rgba(0,0,0,0.35);
}
.hero__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  color: var(--brass);
  text-transform: none;
  letter-spacing: -0.01em;
}
.hero__lede {
  font-size: clamp(16px, 1.35vw, 20px);
  color: var(--ink-2);
  max-width: 520px;
  margin: 0 0 40px;
  line-height: 1.55;
  font-weight: 400;
}
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 44px; }
.hero__caption {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding-top: 22px;
  border-top: 1px solid var(--line-2);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.hero__caption-num {
  color: var(--brass);
  font-weight: 700;
  font-size: 12px;
}
.hero__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Anchor on the athlete's torso/helmet zone. The image places him
     at 70% horizontally in the source, and this object-position keeps
     him there across responsive crops. */
  object-position: 70% 45%;
  animation: heroPan 28s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes heroPan {
  /* Slow diagonal drift. The subtle motion makes the ball-spatter
     texture feel alive without being distracting. */
  from { transform: scale(1.06) translate3d(0.5%, 0.3%, 0); }
  to   { transform: scale(1.06) translate3d(-0.5%, -0.7%, 0); }
}

/* ==============================================================
   NIKE-TIER OVERRIDES
   Layered on top of the base component styles to elevate the
   entire system without ripping out every class.
   ============================================================== */

/* Body inherits obsidian; force reversed defaults */
body { color: var(--ink); background: var(--bg); }

/* Section num — brass */
.section-num {
  color: var(--brass);
  border-color: var(--brass) !important;
}

/* Section titles — Anton compressed athletic */
.section-title,
.centennial .section-title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  color: var(--ink);
  font-size: clamp(40px, 5vw, 80px);
}
.section-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  color: var(--brass);
  text-transform: lowercase;
  letter-spacing: -0.01em;
  font-size: 0.9em;
}
.hero__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  color: var(--brass);
  text-transform: lowercase;
  letter-spacing: -0.015em;
  font-size: 0.82em;
  line-height: 0.86;
  padding: 0 0.02em;
}

/* Editorial serif titles for heritage moments */
.heritage-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: italic;
  color: var(--brass);
  letter-spacing: -0.005em;
}

/* Force stat numerals to feel like a scoreboard */
.stat__num {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink);
  font-feature-settings: "tnum";
  letter-spacing: -0.01em;
}
.stat__unit { color: var(--brass); font-weight: 700; }

/* Stats section on obsidian */
.stats { background: var(--bg-2); border-color: var(--line); }
.stats__grid { border-top-color: var(--line); }
.stat { border-color: var(--line); }

/* Watch feature cards */
.side-card {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 0;
}
.side-card:hover { border-color: var(--brass); }
.side-card--alt { background: var(--bg-hero); border: 1px solid var(--brass); }
.side-card--alt .side-card__label { color: var(--brass); }
.side-card__label { color: var(--brass); }
.side-card__title { color: var(--ink); font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; font-size: 24px; }
.side-card__cta { color: var(--brass); font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.20em; }

/* Live badge — keep red but sharpen */
.live-badge { border-radius: 0; font-weight: 700; letter-spacing: 0.22em; }

/* Teams grid — elevated cards on obsidian */
.teams { background: var(--bg); }
.teams__grid {
  background: transparent;
  border: none;
  gap: 1px;
  border-radius: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.team {
  background: var(--bg-2);
  padding: 44px 36px;
  min-height: 260px;
  border-right: 1px solid var(--line);
}
.teams__grid > .team:nth-child(3n) { border-right: none; }
.team::before {
  background: linear-gradient(150deg, var(--team-color, var(--brass)) 0%, transparent 65%);
  opacity: 0.10;
}
.team:hover::before { opacity: 0.30; }
.team__mono { color: var(--brass); font-weight: 600; letter-spacing: 0.24em; }
.team__city { color: var(--ink-dim); }
.team__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 42px;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-transform: uppercase;
  transition: transform .35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.team__record { color: var(--ink-dim); font-family: var(--font-mono); }
.team__record::before { color: var(--brass); }

/* Rankings table — dark scoreboard */
.players-home { background: var(--bg); }
.rankings { background: var(--bg-2); border: 1px solid var(--line); border-radius: 0; }
.rankings__head { border-bottom: 1px solid var(--line); }
.rankings__head h3 { color: var(--ink); font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; }
.rankings__table th { color: var(--brass); border-color: var(--line-2); }
.rankings__table td { color: var(--ink-2); border-color: var(--line); }
.rankings__table tbody tr:hover { background: var(--brass-soft); }
.rankings__table .rank { color: var(--brass); font-family: var(--font-mono); }
.rankings__table .player { color: var(--ink); }
.rankings__table .mono { color: var(--ink-dim); }
.rankings__table .mono em { color: var(--brass); }

/* Rising star card */
.rising-star { background: var(--bg-2); border: 1px solid var(--line); border-radius: 0; }
.rising-star__label h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; color: var(--ink); letter-spacing: 0.02em; }
.rising-star__badge { color: var(--brass); border-color: var(--brass); background: var(--brass-soft); border-radius: 0; }
.rising-star__body p { color: var(--ink-2); }
.rising-star__attribution { border-color: var(--line); }
.rising-star__attribution strong { color: var(--ink); }
.rising-star__attribution span { color: var(--ink-dim); }
.rising-star .link-arrow { color: var(--brass); border-bottom-color: var(--brass); }
.link-arrow { color: var(--brass); border-bottom-color: var(--brass); }

/* Sport section, tabs */
.sport { background: var(--bg); }
.tabs { border-bottom: 1px solid var(--line); }
.tab { color: var(--ink-dim); }
.tab:hover { color: var(--ink); }
.tab--active { color: var(--brass); border-bottom-color: var(--brass); }
.how-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 0; }
.how-card:hover { border-color: var(--brass); }
.how-num { color: var(--brass); font-family: var(--font-mono); }
.how-card h3 { color: var(--ink); font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; }
.how-card p { color: var(--ink-2); }
.how-card em { color: var(--brass); font-style: italic; }

/* Terms/glossary */
.terms-grid dt { color: var(--ink); font-family: var(--font-display); font-weight: 400; text-transform: uppercase; }
.pronounce { color: var(--brass); font-family: var(--font-mono); }
.terms-grid dd { color: var(--ink-2); }
.terms-grid em { color: var(--brass); }

/* History image + copy */
.history-photo { background: var(--bg-2); border: 1px solid var(--line); }
.history-photo__cap { color: var(--ink-dim); border-color: var(--line); }
.history-lead { color: var(--ink); font-family: var(--font-serif); font-style: italic; font-weight: 300; }
.history-copy p { color: var(--ink-2); }
.history-copy em { color: var(--brass); }
.history-copy strong { color: var(--ink); font-weight: 600; }

/* Centennial timeline on hero-black */
.centennial { background: var(--bg-hero); }
.centennial .section-title { color: var(--ink); }
.centennial .section-sub { color: var(--ink-dim); }
.timeline li { border-color: var(--line); }
.timeline__year { color: var(--brass); font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.14em; }
.timeline__body h4 { color: var(--ink); font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; }
.timeline__body p { color: var(--ink-2); }

/* Quotes */
.quotes { background: var(--bg-2); border-color: var(--line); }
.quotes blockquote { border-color: var(--line); }
.quotes p { color: var(--ink); font-family: var(--font-serif); font-style: italic; font-weight: 300; }
.quotes cite { color: var(--brass); font-family: var(--font-mono); }

/* Press */
.press { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.press__label { color: var(--brass); font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.24em; }
.press__row span { color: var(--ink-dim); font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: 22px; }

/* Footer */
.site-footer { background: #000; color: var(--ink); border-top: 1px solid var(--line); }
.footer-cta h2 { color: var(--ink); font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.005em; }
.footer-cta p { color: var(--ink-dim); }
.footer-cta__form input { background: var(--bg-3); border-color: var(--line-2); color: var(--ink); border-radius: 0; }
.footer-cta__form input::placeholder { color: var(--ink-dim); }
.footer-cta__form input:focus { border-color: var(--brass); }
.footer-grid h4 { color: var(--brass); font-family: var(--font-mono); letter-spacing: 0.22em; font-weight: 700; }

/* Section head original wired below — keeping legacy */
/* ---------- Section head (legacy) ---------- */
.section-head {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 32px;
  align-items: baseline;
  padding: 0 var(--pad-x);
  margin-bottom: 56px;
}
.section-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--red);
  letter-spacing: 0.2em;
}
.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}

/* ---------- Player: Career highlights ---------- */
.player-highlights {
  padding: 40px 0 64px;
}
.player-highlights .achievement-list {
  padding: 0 var(--pad-x);
  max-width: 900px;
  margin: 0;
}
.achievement {
  display: grid;
  grid-template-columns: 80px 1fr;
  column-gap: 32px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid rgba(244, 239, 225, 0.08);
}
.achievement:last-child {
  border-bottom: none;
}
.achievement__year {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--brass);
  font-weight: 600;
}
.achievement__body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-cream, var(--ink));
}
@media (max-width: 640px) {
  .achievement {
    grid-template-columns: 64px 1fr;
    column-gap: 20px;
    padding: 12px 0;
  }
  .achievement__body {
    font-size: 15px;
  }
}
.section-sub {
  grid-column: 2;
  color: var(--ink-dim);
  margin: 16px 0 0;
  max-width: 620px;
  font-size: 16px;
  line-height: 1.55;
}

/* ---------- Stats ---------- */
.stats {
  padding: var(--pad-y) 0;
  background: var(--bg-3);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0 var(--pad-x);
  border-top: 1px solid var(--line);
}
.stat {
  padding: 40px 24px 40px 0;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.stat:nth-child(3n) { border-right: none; }
.stat:nth-last-child(-n+3) { border-bottom: none; }
.stat__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(44px, 5.5vw, 80px);
  line-height: 1;
  letter-spacing: -0.03em;
  display: flex; align-items: baseline; gap: 8px;
  color: var(--ink);
}
.stat__unit {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--red);
  letter-spacing: 0.14em;
  font-weight: 500;
}
.stat__label {
  margin-top: 12px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* ---------- Watch feature ---------- */
.watch-feature { padding: var(--pad-y) var(--pad-x); background: var(--bg); }
.watch-feature__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 20px;
}
.watch-feature__hero {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 500px;
  box-shadow: 0 30px 80px -30px rgba(14, 26, 43, 0.3);
}
.watch-feature__hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.watch-feature__hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(14, 26, 43, 0.92) 100%);
}
.live-badge {
  position: absolute; top: 20px; left: 20px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--red);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  border-radius: 4px;
  z-index: 2;
}
.live-badge__dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: pulse 1.5s infinite; }
.watch-feature__overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px; z-index: 2; color: var(--ink-cream); }
.watch-feature__meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-cream-dim);
  margin-bottom: 12px;
}
.watch-feature__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  color: var(--ink-cream);
}
.watch-feature__title span {
  color: var(--red);
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: 0.6em;
  padding: 0 6px;
}
.watch-feature__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.watch-feature__side { display: grid; gap: 20px; grid-template-rows: 1fr 1fr 1fr; }
.side-card {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 140px;
  transition: border-color .2s, transform .2s;
}
.side-card:hover { border-color: var(--red); transform: translateY(-2px); }
.side-card--alt { background: var(--bg-dark); border-color: transparent; color: var(--ink-cream); }
.side-card--alt .side-card__label { color: var(--red); }
.side-card--alt .side-card__title { color: var(--ink-cream); }
.side-card--alt .side-card__cta { color: var(--ink-cream); }
.side-card__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
}
.side-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.side-card__cta {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--red);
}
.side-card__list {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Venue block (JAM Arena details on homepage) ---------- */
.venue-block {
  margin: 48px var(--pad-x) 0;
  border: 1px solid var(--line-2);
  border-top: 3px solid var(--red);
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
  padding: 40px 44px;
  border-radius: var(--radius-lg);
}
.venue-block__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.4fr);
  gap: 48px;
  align-items: start;
}
.venue-block__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}
.venue-block__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 3.4vw, 46px);
  letter-spacing: -0.01em;
  line-height: 1.02;
  color: var(--ink);
  margin: 0 0 18px;
}
.venue-block__name span {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass, #c9a24a);
  margin-top: 8px;
}
.venue-block__lede {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-dim);
  max-width: 44ch;
}
.venue-block__lede b {
  color: var(--ink);
  font-weight: 600;
}
.venue-block__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 40px;
  margin: 0;
}
.venue-block__fact dt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 8px;
}
.venue-block__fact dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.venue-block__fact dd a {
  color: var(--brass, #c9a24a);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.venue-block__fact dd a:hover { border-bottom-color: var(--brass, #c9a24a); }
@media (max-width: 900px) {
  .venue-block { padding: 32px 24px; margin: 32px 20px 0; }
  .venue-block__grid { grid-template-columns: 1fr; gap: 28px; }
  .venue-block__facts { grid-template-columns: 1fr 1fr; gap: 22px 24px; }
}
@media (max-width: 520px) {
  .venue-block__facts { grid-template-columns: 1fr; }
}

/* ---------- Teams — tribe + city ---------- */
.teams { padding: var(--pad-y) 0; background: var(--bg-2); }
.teams__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  margin: 0 var(--pad-x);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.team {
  background: var(--bg-3);
  padding: 36px 32px;
  min-height: 220px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background .3s;
}
.team::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(160deg, var(--team-color, var(--red)) 0%, transparent 62%);
  opacity: 0.08;
  transition: opacity .3s;
}
.team:hover::before { opacity: 0.22; }
.team:hover .team__name { transform: translateX(6px); }

/* Team accent colors — matched to official WJAL crests */
.team--chargers    { --team-color: #7c3aed; --team-accent: #c084fc; }  /* electric purple */
.team--cyclones    { --team-color: #14b8a6; --team-accent: #5eead4; }  /* teal storm */
.team--fireballs   { --team-color: #2563eb; --team-accent: #60a5fa; }  /* royal blue */
.team--renegades   { --team-color: #f97316; --team-accent: #fdba74; }  /* renegade orange */
.team--devils      { --team-color: #ef4444; --team-accent: #f87171; }  /* devil red */
.team--warriors    { --team-color: #eab308; --team-accent: #facc15; }  /* warrior gold */

.team__mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.team__city {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 6px;
}
.team__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 42px);
  letter-spacing: -0.02em;
  line-height: 1;
  transition: transform .3s;
  color: var(--team-color);
}
.team__record {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  letter-spacing: 0.16em;
  font-weight: 500;
}
.team__record::before { content: 'RECORD '; color: var(--ink-mute); }

/* ---------- Players section ---------- */
.players-home {
  padding: var(--pad-y) 0;
  background: var(--bg);
}

/* Ranking table */
.rankings {
  padding: 0 var(--pad-x);
  margin-bottom: 80px;
}
.rankings__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 20px;
  flex-wrap: wrap;
}
.rankings__head h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}
.rankings__table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-3);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 60px -30px rgba(14, 26, 43, 0.2);
}
.rankings__table thead {
  background: var(--bg-dark);
  color: var(--ink-cream-dim);
}
.rankings__table th {
  padding: 14px 20px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}
.rankings__table td {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  vertical-align: middle;
}
.rankings__table tbody tr:last-child td { border-bottom: none; }
.rankings__table tbody tr:hover { background: rgba(200, 52, 42, 0.03); }
.rankings__table .rank {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--red);
  width: 60px;
}
.rankings__table .player {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.player__dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--red);
  margin-right: 10px;
  vertical-align: middle;
}
.rankings__table .mono {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.rankings__table .mono em {
  font-style: normal;
  color: var(--red);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-left: 2px;
}
.row-link {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--red);
  white-space: nowrap;
}
.row-link:hover { text-decoration: underline; }

/* Rising star */
.rising-star {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(32px, 5vw, 80px);
  padding: 60px var(--pad-x);
  background: var(--bg-dark);
  color: var(--ink-cream);
  margin: 0 var(--pad-x);
  border-radius: var(--radius-lg);
  align-items: center;
}
.rising-star__badge {
  display: inline-block;
  padding: 6px 12px;
  background: var(--red);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  border-radius: 4px;
  margin-bottom: 16px;
}
.rising-star__label h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
  color: var(--ink-cream);
}
.rising-star__body p {
  font-family: var(--font-serif);
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.35;
  color: var(--ink-cream);
  margin: 0 0 24px;
  padding-left: 20px;
  border-left: 2px solid var(--red);
  font-style: italic;
}
.rising-star__attribution {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rising-star__attribution strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink-cream);
  letter-spacing: -0.01em;
}
.rising-star__attribution span {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-cream-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.rising-star .link-arrow { color: var(--red); border-bottom-color: var(--red); }

.link-arrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--red);
  border-bottom: 1px solid var(--red);
  padding-bottom: 4px;
  transition: transform .2s;
}
.link-arrow:hover { transform: translateX(4px); }

/* ---------- The Sport section ---------- */
.sport {
  background: var(--bg-3);
  padding: var(--pad-y) 0;
}

.tabs {
  display: flex;
  gap: 0;
  padding: 0 var(--pad-x);
  border-bottom: 1px solid var(--line);
  margin-bottom: 48px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  background: transparent;
  border: none;
  padding: 16px 28px 20px;
  margin-bottom: -1px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s, border-color .2s;
}
.tab:hover { color: var(--ink); }
.tab--active { color: var(--red); border-bottom-color: var(--red); }

.tab-panel { display: none; padding: 0 var(--pad-x); }
.tab-panel--active { display: block; }

.how-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.how-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: transform .2s, border-color .2s;
}
.how-card:hover { transform: translateY(-4px); border-color: var(--red); }
.how-num {
  font-family: var(--font-serif);
  font-size: 44px;
  color: var(--red);
  line-height: 1;
  margin-bottom: 20px;
}
.how-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.how-card p { color: var(--ink-dim); font-size: 15px; line-height: 1.55; margin: 0; }
.how-card em { color: var(--red); font-style: italic; font-weight: 500; }

.terms-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 48px;
  margin-bottom: 40px;
}
.terms-grid dl {
  margin: 0;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.terms-grid dt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  color: var(--ink);
}
.pronounce {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mute);
  font-weight: 400;
  letter-spacing: 0.04em;
}
.terms-grid dd { margin: 0; color: var(--ink-dim); font-size: 15px; line-height: 1.55; }
.terms-grid em { color: var(--red); font-style: italic; }

.history-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.history-photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 40px 100px -40px rgba(14,26,43, 0.35);
}
.history-photo img {
  width: 100%; height: auto;
  filter: sepia(0.22) contrast(1.02);
}
.history-photo__cap {
  display: block;
  padding: 14px 20px;
  background: var(--bg-dark);
  color: var(--ink-cream);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.history-lead {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.3;
  margin: 0 0 24px;
  color: var(--ink);
}
.history-copy p { color: var(--ink-dim); font-size: 16px; line-height: 1.65; margin: 0 0 18px; }
.history-copy em { color: var(--red); font-style: italic; font-weight: 500; }
.history-copy strong { color: var(--ink); font-weight: 600; }

/* ---------- Centennial timeline ---------- */
.centennial {
  background: var(--bg-dark);
  color: var(--ink-cream);
  padding: var(--pad-y) 0;
  position: relative;
  overflow: hidden;
}
.centennial .section-title { color: var(--ink-cream); }
.centennial .section-sub { color: var(--ink-cream-dim); }
.centennial::before {
  content: "1926 · 2026";
  position: absolute;
  top: 20%;
  right: -3vw;
  transform: rotate(-90deg);
  transform-origin: right center;
  font-family: var(--font-serif);
  font-size: clamp(80px, 12vw, 200px);
  color: var(--red);
  opacity: 0.08;
  letter-spacing: -0.02em;
  pointer-events: none;
  white-space: nowrap;
}
.centennial__inner { position: relative; z-index: 2; }
.centennial__head { padding: 0 var(--pad-x); margin-bottom: 64px; }
.centennial__head .section-num { display: inline-block; margin-bottom: 20px; }
.centennial__head .section-sub { grid-column: unset; margin-top: 16px; max-width: 620px; }

.timeline {
  list-style: none;
  margin: 0 auto;
  padding: 0 var(--pad-x);
  max-width: 900px;
  padding-left: max(var(--pad-x), 8vw);
  padding-right: var(--pad-x);
}
.timeline li {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 40px;
  padding: 32px 0;
  border-bottom: 1px solid var(--line-cream);
  align-items: baseline;
}
.timeline li:last-child { border-bottom: none; }
.timeline__year {
  font-family: var(--font-serif);
  font-size: clamp(40px, 5vw, 64px);
  color: var(--red);
  line-height: 1;
  letter-spacing: -0.02em;
}
.timeline__body h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  color: var(--ink-cream);
}
.timeline__body p {
  color: var(--ink-cream-dim);
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}

/* ---------- Quotes ---------- */
.quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: var(--pad-y) var(--pad-x);
  background: var(--bg-2);
}
.quotes blockquote { margin: 0; padding: 0 32px; border-right: 1px solid var(--line); }
.quotes blockquote:last-child { border-right: none; }
.quotes blockquote:first-child { padding-left: 0; }
.quotes p {
  font-family: var(--font-serif);
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  color: var(--ink);
}
.quotes cite {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
}

/* ---------- Press ---------- */
.press { padding: 48px var(--pad-x); display: flex; align-items: center; gap: 48px; flex-wrap: wrap; background: var(--bg-2); border-top: 1px solid var(--line); }
.press__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.press__row { display: flex; gap: 48px; flex-wrap: wrap; }
.press__row span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
  opacity: 0.6;
}

/* ---------- Footer ---------- */
.site-footer { background: var(--bg-dark); color: var(--ink-cream); }
.footer-cta {
  padding: clamp(64px, 8vw, 128px) var(--pad-x);
  text-align: center;
  border-bottom: 1px solid var(--line-cream);
  background: radial-gradient(ellipse at center top, rgba(200, 52, 42, 0.18) 0%, transparent 60%);
}
.footer-cta h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 72px);
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0 0 16px;
  color: var(--ink-cream);
}
.footer-cta p { color: var(--ink-cream-dim); margin: 0 0 32px; }
.footer-cta__form { display: flex; gap: 8px; max-width: 480px; margin: 0 auto; }
.footer-cta__form input {
  flex: 1;
  padding: 14px 20px;
  background: rgba(245, 239, 225, 0.08);
  border: 1px solid var(--line-cream-2);
  border-radius: 999px;
  color: var(--ink-cream);
  font-family: var(--font-body);
  font-size: 15px;
  outline: none;
  transition: border-color .2s;
}
.footer-cta__form input::placeholder { color: var(--ink-cream-dim); }
.footer-cta__form input:focus { border-color: var(--red); }
.footer-cta__status {
  min-height: 22px;
  margin: 14px auto 0;
  max-width: 480px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-cream-dim);
}
#newsletter-form[data-state="success"] ~ .footer-cta__status { color: var(--ink-cream); }
#newsletter-form[data-state="error"] ~ .footer-cta__status { color: var(--red); }
#newsletter-form[data-state="loading"] ~ .footer-cta__status { color: var(--brass); }

/* Generic signup states — matches any form (footer, tickets, teams, press) */
form[data-signup-form][data-state="success"] ~ .footer-cta__status,
form[data-signup-form][data-state="success"] + .footer-cta__status { color: var(--ink-cream); }
form[data-signup-form][data-state="error"] ~ .footer-cta__status,
form[data-signup-form][data-state="error"] + .footer-cta__status { color: var(--red); }
form[data-signup-form][data-state="loading"] ~ .footer-cta__status,
form[data-signup-form][data-state="loading"] + .footer-cta__status { color: var(--brass); }

/* Reusable page-level alert / signup CTA (tickets, schedule, press, teams) */
.tp-alert {
  padding: 96px 24px;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.tp-alert__inner { max-width: 640px; margin: 0 auto; }
.tp-alert__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--red);
  text-transform: uppercase;
  margin: 0 0 20px;
}
.tp-alert__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 4.5vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 20px;
}
.tp-alert__lede {
  font-size: 17px;
  color: var(--ink-dim);
  max-width: 520px;
  line-height: 1.5;
  margin: 0 auto 32px;
}
.tp-alert .footer-cta__form { max-width: 480px; margin: 0 auto; }
.tp-alert__fine {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-dim);
  text-transform: uppercase;
  margin: 16px 0 0;
}

/* Team page signup inside team-cta — inherits --team-color background */
.team-cta__signup {
  max-width: 480px;
  margin: 40px auto 0;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.22);
}
.team-cta[data-ink="dark"] .team-cta__signup { border-top-color: rgba(0,0,0,0.18); }
.team-cta__signup-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.75;
  margin: 0 0 14px;
}
.team-cta__signup-form {
  max-width: 460px;
  margin: 0 auto;
}
.team-cta__signup-form input {
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
}
.team-cta__signup-form input::placeholder { color: rgba(255,255,255,0.6); }
.team-cta__signup-form input:focus { border-color: #fff; }
.team-cta[data-ink="dark"] .team-cta__signup-form input {
  background: rgba(255,255,255,0.6);
  border-color: rgba(0,0,0,0.35);
  color: #0e1a2b;
}
.team-cta[data-ink="dark"] .team-cta__signup-form input::placeholder { color: rgba(0,0,0,0.5); }
.team-cta__signup-status {
  margin-top: 12px !important;
  color: rgba(255,255,255,0.9);
}
.team-cta[data-ink="dark"] .team-cta__signup-status { color: rgba(0,0,0,0.8); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  padding: 64px var(--pad-x);
}
.footer-grid h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-cream-dim);
  margin: 0 0 20px;
  font-weight: 500;
}
.footer-grid a {
  display: block;
  padding: 6px 0;
  color: var(--ink-cream-dim);
  font-size: 14px;
  transition: color .2s;
}
.footer-grid a:hover { color: var(--red); }
/* Footer brand lockup — mirrors header .brand exactly, scaled down */
.footer-brand-lockup {
  display: inline-flex; align-items: flex-start;
  text-decoration: none;
  margin-bottom: 18px;
}
.footer-brand-lockup__text {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  line-height: 1;
}
.footer-brand-lockup__frame {
  display: flex; align-items: center; gap: 6px;
  width: 100%;
}
.footer-brand-lockup__line {
  flex: 1;
  height: 1.5px;
  background: var(--red);
  min-width: 8px;
}
.footer-brand-lockup__word {
  font-family: 'Oswald', 'Barlow Condensed', 'Anton', sans-serif;
  font-weight: 700;
  font-style: italic;
  color: var(--red);
  font-size: 9px;
  letter-spacing: 0.14em;
  transform: skewX(-6deg);
  white-space: nowrap;
  padding: 0 1px;
}
.footer-brand-lockup__wordmark {
  font-family: 'Oswald', 'Barlow Condensed', 'Anton', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 26px;
  letter-spacing: 0.02em;
  color: var(--ink-cream);
  transform: skewX(-6deg);
  line-height: 0.95;
  padding: 1px 0;
  white-space: nowrap;
}
.footer-brand-lockup__text {
  gap: 3px;
}
.footer-tag { color: var(--ink-cream-dim); font-size: 14px; max-width: 280px; }
.footer-legal {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  padding: 24px var(--pad-x);
  border-top: 1px solid var(--line-cream);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-cream-dim);
}

/* ---------- Nav Toggle (Hamburger) ---------- */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(212, 207, 186, 0.28);
  border-radius: 2px;
  width: 44px;
  height: 44px;
  padding: 0;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  transition: border-color 0.2s ease, background 0.2s ease;
  flex-shrink: 0;
}
.nav-toggle:hover, .nav-toggle:focus-visible {
  border-color: var(--brass);
  background: rgba(201, 162, 74, 0.06);
  outline: none;
}
.nav-toggle__line {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.28s ease, opacity 0.2s ease;
  transform-origin: center;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ---------- Mobile Drawer ---------- */
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  visibility: hidden;
  pointer-events: none;
}
.mobile-drawer[aria-hidden="false"] {
  visibility: visible;
  pointer-events: auto;
}
.mobile-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 7, 10, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.28s ease;
  z-index: 0;
}
.mobile-drawer[aria-hidden="false"] .mobile-drawer__backdrop {
  opacity: 1;
}
.mobile-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(360px, 88vw);
  background: #0a0b0d;
  border-left: 1px solid var(--line);
  padding: 24px 26px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  z-index: 1;
}
.mobile-drawer[aria-hidden="false"] .mobile-drawer__panel {
  transform: translateX(0);
}
.mobile-drawer__close {
  align-self: flex-end;
  background: transparent;
  border: none;
  color: var(--ink-2);
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 10px;
  margin: -6px -8px 0 0;
  transition: color 0.2s ease;
}
.mobile-drawer__close:hover { color: var(--ink); }
.mobile-drawer__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}
.mobile-drawer__nav a {
  font-family: 'Oswald', 'Barlow Condensed', sans-serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid rgba(212, 207, 186, 0.08);
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.mobile-drawer__nav a:hover, .mobile-drawer__nav a:focus-visible {
  color: var(--brass);
  padding-left: 8px;
  outline: none;
}
.mobile-drawer__cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.mobile-drawer__cta .btn { justify-content: center; text-align: center; }
.mobile-drawer__foot {
  margin: auto 0 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* Lock scroll when drawer open */
body.drawer-open {
  overflow: hidden;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .site-nav { display: none; }
  .site-header { grid-template-columns: 1fr auto; }
  .nav-toggle { display: inline-flex; }
  .site-cta { display: none; }
  .hero__grid { grid-template-columns: 1fr; }
  /* Tablet: keep the wide cinematic frame, athlete anchored right */
  .hero__image { aspect-ratio: 16/9; }
  .hero__image img { object-position: 72% 42%; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3n) { border-right: 1px solid var(--line); }
  .stat:nth-child(2n) { border-right: none; }
  .stat:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
  .stat:nth-last-child(-n+2) { border-bottom: none; }
  .watch-feature__grid { grid-template-columns: 1fr; }
  .teams__grid { grid-template-columns: repeat(2, 1fr); }
  .rising-star { grid-template-columns: 1fr; }
  .quotes { grid-template-columns: 1fr; gap: 32px; }
  .quotes blockquote { padding: 0; border-right: none; border-bottom: 1px solid var(--line); padding-bottom: 32px; }
  .quotes blockquote:last-child { border-bottom: none; padding-bottom: 0; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .how-grid { grid-template-columns: repeat(2, 1fr); }
  .terms-grid { grid-template-columns: 1fr; }
  .history-grid { grid-template-columns: 1fr; }
  .timeline li { grid-template-columns: 100px 1fr; gap: 24px; }
  .rankings__table { font-size: 13px; }
  .rankings__table th, .rankings__table td { padding: 12px 12px; }
}
@media (max-width: 640px) {
  .announce__inner { font-size: 10px; gap: 10px; }
  .site-cta .btn--ghost { display: none; }
  /* Mobile: portrait 4/5 crop — hold the athlete's helmet and cesta
     in the upper half. Strengthen the bottom scrim so headline + CTAs
     stay legible over his white pants + the floor reflection. */
  .hero__image { aspect-ratio: 4/5; }
  .hero__image img { object-position: 74% 38%; }
  .hero__image::before {
    background:
      linear-gradient(180deg, rgba(6,7,10,0.20) 0%, rgba(6,7,10,0.02) 22%, rgba(6,7,10,0.55) 58%, rgba(6,7,10,0.92) 82%, rgba(6,7,10,0.98) 100%);
  }
  .hero__image::after {
    background: radial-gradient(ellipse 100% 70% at 55% 32%, rgba(6,7,10,0) 40%, rgba(6,7,10,0.35) 90%);
  }
  .stats__grid { grid-template-columns: 1fr; }
  .stat { border-right: none !important; }
  .teams__grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-cta__form { flex-direction: column; }
  .footer-cta__form input, .footer-cta__form .btn { width: 100%; }
  .how-grid { grid-template-columns: 1fr; }
  .timeline li { grid-template-columns: 1fr; gap: 8px; }
  .timeline__year { font-size: 40px; }
  .rankings__table thead { display: none; }
  .rankings__table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 16px; border-bottom: 1px solid var(--line); }
  .rankings__table tbody tr:last-child { border-bottom: none; }
  .rankings__table td { padding: 4px 0; border: none; font-size: 13px; }
  .rankings__table .rank { grid-column: 1 / -1; font-size: 14px; }
  .rankings__table .player { grid-column: 1 / -1; }
}

/* ==============================================================
   NIKE-TIER OVERRIDES — FINAL LAYER
   Loaded last so cascade wins over legacy component rules.
   ============================================================== */

/* Rankings table — kill red-italic player names */
.rankings__table .player {
  font-family: var(--font-athletic);
  font-weight: 500;
  font-style: normal;
  font-size: 16px;
  color: var(--ink) !important;
  letter-spacing: 0.01em;
}
.rankings__table .rank {
  font-family: var(--font-mono);
  color: var(--brass) !important;
  font-weight: 700;
}
.rankings__table th {
  color: var(--brass) !important;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.20em;
  font-size: 10px;
  text-transform: uppercase;
}
.rankings__table .mono { color: var(--ink-dim) !important; font-family: var(--font-mono); }
.rankings__table .mono em, .rankings__table .mono strong { color: var(--brass) !important; }
.rankings__table td { color: var(--ink-2) !important; border-color: var(--line); }
.rankings__table .arrow { color: var(--brass) !important; }

/* Rising Star — dark cinematic card */
.rising-star {
  background: linear-gradient(140deg, var(--bg-2) 0%, var(--bg-hero) 100%) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  border-left: 2px solid var(--brass) !important;
}
.rising-star__badge {
  color: var(--brass) !important;
  border: 1px solid var(--brass) !important;
  background: transparent !important;
  border-radius: 0 !important;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 10px;
  padding: 6px 10px;
}
.rising-star__label h3 {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  letter-spacing: 0.01em !important;
}
.rising-star__body p, .rising-star blockquote p {
  color: var(--ink) !important;
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-weight: 300 !important;
}
.rising-star__attribution { border-color: var(--line) !important; }
.rising-star__attribution strong { color: var(--ink) !important; }
.rising-star__attribution span, .rising-star__attribution p { color: var(--ink-dim) !important; }
.rising-star .link-arrow,
.rising-star a { color: var(--brass) !important; border-bottom-color: var(--brass) !important; }

/* "How it's played" numerals — brass, not red */
.how-num {
  color: var(--brass) !important;
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
}
.how-card h3 { color: var(--ink) !important; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; }
.how-card p { color: var(--ink-2) !important; }
.how-card em { color: var(--brass) !important; font-style: italic; }
.how-card {
  background: var(--bg-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  transition: border-color .3s;
}
.how-card:hover { border-color: var(--brass) !important; }

/* Team card — accent color name */
.team__name { color: var(--team-color, var(--ink)) !important; }
.team--warriors .team__name { color: #eab308 !important; }
.team--devils .team__name { color: #ef4444 !important; }
.team--cyclones .team__name { color: #14b8a6 !important; }
.team--fireballs .team__name { color: #2563eb !important; }
.team--renegades .team__name { color: #f97316 !important; }
.team--chargers .team__name { color: #7c3aed !important; }
.team__mono, .team__city { color: var(--brass) !important; }

/* Watch feature card refinements */
.watch-feature__hero::after {
  background: linear-gradient(180deg, transparent 30%, rgba(6,7,10,0.94) 100%);
}
.watch-feature__title { color: var(--ink); font-family: var(--font-display); font-weight: 400; letter-spacing: 0.005em; text-transform: uppercase; }
.watch-feature__title span {
  color: var(--brass) !important;
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: 0.7em !important;
  text-transform: lowercase;
}
.watch-feature__meta { color: var(--ink-2); font-family: var(--font-mono); letter-spacing: 0.20em; }

/* Terminology grid */
.terms-grid dt { color: var(--ink) !important; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 22px; letter-spacing: 0.01em; }
.pronounce { color: var(--brass) !important; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; }
.terms-grid dd { color: var(--ink-2) !important; }
.terms-grid em { color: var(--brass) !important; }

/* Timeline in centennial */
.timeline__year { color: var(--brass) !important; font-family: var(--font-mono); }
.timeline__body h4 { color: var(--ink) !important; font-family: var(--font-display); font-weight: 400; }
.timeline__body p { color: var(--ink-2) !important; }
.timeline li::before { background: var(--brass) !important; }

/* Quotes */
.quotes blockquote p { color: var(--ink) !important; font-family: var(--font-serif); font-style: italic; font-weight: 300; }
.quotes cite { color: var(--brass) !important; font-family: var(--font-mono); font-style: normal; }

/* Press strip */
.press__label { color: var(--brass) !important; font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.24em; }
.press__row a, .press__row span { color: var(--ink-dim) !important; }

/* Footer */
.site-footer { background: #000 !important; border-top: 1px solid var(--line); }
.footer-cta { color: var(--ink); }
.footer-cta h2 { color: var(--ink) !important; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; }
.footer-cta p { color: var(--ink-dim) !important; }
.footer-cta__form input { background: var(--bg-3) !important; border: 1px solid var(--line-2) !important; color: var(--ink) !important; border-radius: 0 !important; }
.footer-cta__form input::placeholder { color: var(--ink-dim) !important; }
.footer-cta__form input:focus { border-color: var(--brass) !important; }
.footer-grid h4 { color: var(--brass) !important; font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.22em; }
.footer-grid a, .footer-grid p { color: var(--ink-dim) !important; }
.footer-grid a:hover { color: var(--brass) !important; }
.footer-legal { color: var(--ink-mute) !important; border-color: var(--line) !important; }

/* Tabs */
.tab { color: var(--ink-dim) !important; font-family: var(--font-mono) !important; letter-spacing: 0.18em; }
.tab:hover { color: var(--ink) !important; }
.tab--active { color: var(--brass) !important; border-bottom-color: var(--brass) !important; }

/* History sections */
.history-photo { background: var(--bg-2) !important; border: 1px solid var(--line) !important; }
.history-photo__cap { color: var(--ink-dim) !important; border-color: var(--line) !important; font-family: var(--font-mono); letter-spacing: 0.14em; }
.history-lead { color: var(--ink) !important; font-family: var(--font-serif) !important; font-style: italic !important; font-weight: 300 !important; }
.history-copy p { color: var(--ink-2) !important; }
.history-copy em { color: var(--brass) !important; font-style: italic; }
.history-copy strong { color: var(--ink) !important; font-weight: 600; }

/* Read the story link */
.read-story, .link-arrow { color: var(--brass) !important; border-bottom-color: var(--brass) !important; }
.read-story:hover { color: var(--red) !important; }

/* Section head num */
.section-num { color: var(--brass) !important; border-color: var(--brass) !important; font-family: var(--font-mono); font-weight: 700; }

/* Stat units — brass override */
.stat__unit { color: var(--brass) !important; font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.14em; }

/* Newsletter subscribe — sharp rectangle */
.footer-cta__form button, .footer-cta__form .btn { border-radius: 0 !important; }

/* Footer heading labels — brass, not red */
.footer-grid h4, .footer h4, .footer__label { color: var(--brass) !important; }

/* Kill any red section labels (LEAGUE/FANS/THE SPORT) */
.site-footer h4, .site-footer .label { color: var(--brass) !important; }

/* Athlete watermark — subtle mark in the footer background */
.site-footer { position: relative; overflow: hidden; }
.site-footer::before {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -60px;
  width: 620px;
  height: 480px;
  background-image: url('../img/logos/athlete-watermark.svg');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  opacity: 0.065;
  pointer-events: none;
  z-index: 0;
  filter: grayscale(1) contrast(1.15);
}
.site-footer > * { position: relative; z-index: 1; }
@media (max-width: 720px) {
  .site-footer::before {
    width: 380px;
    height: 300px;
    right: -60px;
    bottom: -40px;
    opacity: 0.055;
  }
}

/* ─────────── Standings section (homepage) ─────────── */
.standings-home {
  padding: 96px 6vw 96px;
  background: var(--bg);
  border-top: 1px solid rgba(201, 162, 74, 0.14);
}
.standings-wrap {
  max-width: 1160px;
  margin: 48px auto 0;
  overflow-x: auto;
}
.standings-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  color: var(--ink-cream);
  font-size: 15px;
}
.standings-table thead th {
  text-align: left;
  padding: 14px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--red);
  border-bottom: 1.5px solid var(--red);
  text-transform: uppercase;
}
.standings-table th.st-num,
.standings-table td.st-num { text-align: center; }
.standings-table th.st-rank,
.standings-table td.st-rank { width: 56px; text-align: center; }
.standings-table th.st-streak,
.standings-table td.st-streak { text-align: center; width: 80px; }
.st-row td {
  padding: 18px 12px;
  border-bottom: 1px solid rgba(201, 162, 74, 0.12);
  vertical-align: middle;
}
.st-row:last-child td { border-bottom: none; }
.st-row a {
  color: var(--ink-cream);
  text-decoration: none;
  transition: color .18s ease;
}
.st-row a:hover { color: var(--red); }
.st-row a b {
  font-family: 'Oswald', 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 21px;
  letter-spacing: 0.02em;
  margin-right: 12px;
}
.st-city {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-cream-dim);
  text-transform: uppercase;
}
.st-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border: 1.5px solid var(--brass);
  color: var(--brass);
  font-weight: 700;
  font-size: 14px;
  border-radius: 2px;
}
.st-badge--champ {
  background: var(--red);
  border-color: var(--red);
  color: var(--ink);
}
.st-num--w { color: var(--ink); font-weight: 700; }
.st-num--pts { color: var(--brass); font-weight: 700; font-size: 17px; }
.st-streak--w { color: #7fd18a; font-weight: 700; }
.st-streak--l { color: var(--red); font-weight: 700; }

.standings-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 24px 4px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-cream-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.standings-legend b {
  color: var(--brass);
  font-weight: 700;
  margin-right: 6px;
}
@media (max-width: 720px) {
  .standings-home { padding: 64px 5vw 64px; }
  .standings-table { font-size: 13px; }
  .standings-table thead th { padding: 12px 8px; font-size: 10px; }
  .st-row td { padding: 14px 8px; }
  .st-row a b { font-size: 17px; margin-right: 6px; }
  .st-city { display: none; }
  .st-badge { width: 26px; height: 26px; font-size: 12px; }
}

/* ─────────── Promo bands (Wager, Shop) ─────────── */
.promo-band {
  padding: 100px 6vw;
  background: var(--bg);
  border-top: 1px solid rgba(201, 162, 74, 0.14);
}
.promo-band--shop {
  background: linear-gradient(180deg, var(--bg) 0%, #14100c 100%);
}
.promo-band__inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}
.promo-band__title {
  font-family: var(--font-display);
  font-size: clamp(38px, 6vw, 72px);
  line-height: 0.98;
  font-weight: 800;
  color: var(--ink-cream);
  margin: 20px 0 24px;
  letter-spacing: -0.01em;
}
.promo-band__body {
  color: var(--ink-cream-dim);
  font-size: 18px;
  line-height: 1.6;
  max-width: 620px;
  margin-bottom: 20px;
}
.promo-band__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-cream-dim);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-top: 20px;
  border-top: 1px solid rgba(201, 162, 74, 0.14);
  max-width: 620px;
  margin-top: 24px;
}
.promo-band__ctas {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}
@media (max-width: 720px) {
  .promo-band { padding: 64px 5vw; }
}


/* ─── Skip-to-content link (a11y) ─── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--red);
  color: var(--ink);
  padding: 12px 20px;
  z-index: 9999;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
}
.skip-link:focus {
  left: 8px;
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

/* ─── Footer socials (main 3-column footer) ─── */
.footer-social {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer-social h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 4px;
}
.footer-social__row {
  display: flex;
  gap: 14px;
  align-items: center;
}
.footer-social__row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--ink-cream);
  border: 1px solid rgba(201, 162, 74, 0.24);
  border-radius: 2px;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.footer-social__row a:hover {
  color: var(--red);
  border-color: var(--red);
  background: rgba(216, 32, 42, 0.08);
}

/* ─── Compact footer socials (About, Teams, etc) ─── */
.site-footer__social {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 8px;
}
.site-footer__social a {
  color: var(--ink-cream);
  opacity: 0.72;
  transition: opacity .16s ease, color .16s ease;
  display: inline-flex;
  align-items: center;
}
.site-footer__social a:hover {
  color: var(--red);
  opacity: 1;
}
@media (min-width: 720px) {
  .site-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
  }
}

/* ─── Mobile drawer socials ─── */
.mobile-drawer__social {
  display: flex;
  gap: 20px;
  padding: 24px 0 8px;
  border-top: 1px solid rgba(201, 162, 74, 0.14);
  margin-top: 20px;
}
.mobile-drawer__social a {
  color: var(--ink-cream);
  opacity: 0.85;
  transition: color .16s ease, opacity .16s ease;
  display: inline-flex;
}
.mobile-drawer__social a:hover,
.mobile-drawer__social a:active {
  color: var(--red);
  opacity: 1;
}

/* ─── Roster live badge (players/index.html) ─── */
.roster-live-badge {
  max-width: 1160px;
  margin: 0 auto 32px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: rgba(0,0,0,0.02);
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
@media (min-width: 720px) {
  .roster-live-badge {
    margin-left: 32px;
    margin-right: 32px;
    max-width: calc(1160px - 0px);
  }
}
.roster-live-badge__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9ca3af;
  flex-shrink: 0;
  position: relative;
}
.roster-live-badge[data-state="connecting"] .roster-live-badge__dot {
  background: #eab308;
  animation: roster-live-pulse 1.4s ease-in-out infinite;
}
.roster-live-badge[data-state="live"] .roster-live-badge__dot {
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
  animation: roster-live-pulse-green 2.4s ease-in-out infinite;
}
.roster-live-badge[data-state="offline"] .roster-live-badge__dot {
  background: #dc2626;
}
.roster-live-badge__label {
  color: inherit;
}
@keyframes roster-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@keyframes roster-live-pulse-green {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Live-appended stats line under each player row */
.row-meta.row-meta--live {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--ink-mute);
  opacity: 0.75;
  margin-top: 2px;
}