/* ════════════════════════════════════════════════════════════
   CBA Watch — precision dark
   Geist Sans / Geist Mono · near-black · hairlines · one accent
   ════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("fonts/Geist-300-800.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/GeistMono-400-600.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  --bg: #0a0b0d;
  --bg-raise: #101216;
  --t1: #f5f6f7;
  --t2: #9ca1a8;
  --t3: #62666d;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.16);
  --wash: rgba(255, 255, 255, 0.035);
  --red: #ff4d42;
  --red-dim: rgba(255, 77, 66, 0.14);
  --bar: #40444b;

  --sans: "Geist", system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", monospace;

  --pad: clamp(20px, 4vw, 48px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--t1);
  line-height: 1.6;
  font-size: 16px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--red); color: #fff; }

.shell { max-width: 1160px; margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

.accent { color: var(--red); }
.dim { color: var(--t3); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--t1); color: var(--bg); padding: 8px 16px; font-size: 0.85rem;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ── nav ─────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.nav.is-stuck {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: var(--line);
}
.nav-inner {
  max-width: 1160px; margin: 0 auto; padding: 0 var(--pad);
  height: 60px; display: flex; align-items: center; gap: 32px;
}
.nav-mark {
  font-weight: 600; font-size: 0.9rem; letter-spacing: -0.01em;
  color: var(--t1); text-decoration: none; white-space: nowrap;
}
.nav-links { display: flex; gap: 4px; margin: 0 auto; }
.nav-links a {
  font-size: 0.82rem; color: var(--t2); text-decoration: none;
  padding: 6px 12px; border-radius: 6px;
  transition: color 0.18s ease, background 0.18s ease;
}
.nav-links a:hover { color: var(--t1); background: var(--wash); }
.nav-clock {
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: var(--mono); font-size: 0.78rem; color: var(--t2);
  font-variant-numeric: tabular-nums;
}
.live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--red);
  box-shadow: 0 0 0 0 var(--red-dim);
  animation: ping 2.4s var(--ease) infinite;
  flex: none;
}
@keyframes ping {
  0% { box-shadow: 0 0 0 0 rgba(255, 77, 66, 0.5); }
  70%, 100% { box-shadow: 0 0 0 8px rgba(255, 77, 66, 0); }
}
@media (max-width: 860px) { .nav-links { display: none; } .nav-inner { justify-content: space-between; } }
@media (max-width: 420px) { .nav-clock { display: none; } }

/* ── hero ────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: clamp(140px, 22vh, 220px) 0 clamp(70px, 10vh, 120px);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: -40% -20% auto;  height: 90%;
  background: radial-gradient(ellipse 55% 45% at 68% 18%, rgba(255, 77, 66, 0.07), transparent 65%);
  pointer-events: none;
}
.hero-h {
  font-size: clamp(2.7rem, 7.6vw, 6.4rem);
  font-weight: 640;
  letter-spacing: -0.045em;
  line-height: 1.02;
  margin-bottom: clamp(24px, 4vh, 36px);
  text-wrap: balance;
}
.hero-figure { color: var(--red); font-variant-numeric: tabular-nums; }
.hero-p {
  max-width: 34em; font-size: clamp(1rem, 1.5vw, 1.18rem);
  color: var(--t2); margin-bottom: clamp(36px, 6vh, 60px);
  letter-spacing: -0.01em;
}

.clock {
  display: grid; grid-template-columns: repeat(4, minmax(112px, 150px));
  width: fit-content;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line);
  margin-bottom: 26px;
}
.clock-cell {
  padding: 18px 20px 16px 0;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 2px;
}
.clock-cell:last-child { border-right: none; }
.clock-cell + .clock-cell { padding-left: 20px; }
.clock-num {
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em; line-height: 1.1;
}
.clock-label { font-size: 0.78rem; color: var(--t3); }
.hero-note { max-width: 40em; font-size: 0.92rem; color: var(--t3); }
@media (max-width: 640px) {
  .clock { grid-template-columns: repeat(4, 1fr); width: 100%; }
  .clock-cell { padding-right: 10px; }
  .clock-cell + .clock-cell { padding-left: 12px; }
}

/* hero entrance */
.a-in { opacity: 0; transform: translateY(14px); animation: a-in 0.9s var(--ease) forwards; animation-delay: calc(var(--d) * 90ms + 80ms); }
@keyframes a-in { to { opacity: 1; transform: none; } }

/* ── sections ────────────────────────────────────────── */
.sec { border-bottom: 1px solid var(--line); padding: clamp(64px, 11vh, 120px) 0; }
.sec-main { max-width: 880px; }

.sec-h {
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  font-weight: 600; letter-spacing: -0.03em; line-height: 1.12;
  margin-bottom: clamp(32px, 5vh, 52px);
  text-wrap: balance;
}
.lede { max-width: 40em; font-size: 1.08rem; color: var(--t2); margin-bottom: clamp(28px, 5vh, 44px); letter-spacing: -0.005em; }
.lede strong { color: var(--t1); font-weight: 600; }
.body { max-width: 40em; font-size: 1rem; color: var(--t2); margin-top: clamp(28px, 5vh, 44px); }
.body em { font-style: italic; color: var(--t1); }

/* ── claims ──────────────────────────────────────────── */
.claims { display: flex; flex-direction: column; }
.claim {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px;
  padding: clamp(22px, 3.5vh, 34px) 0;
  border-top: 1px solid var(--line);
}
.claim-i {
  font-family: var(--mono); font-size: 0.82rem; color: var(--t3);
  padding-top: 0.42em;
}
.claim h3 {
  font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 600;
  letter-spacing: -0.02em; margin-bottom: 8px; line-height: 1.25;
}
.claim p { max-width: 44em; color: var(--t2); font-size: 0.98rem; }

/* ── KPIs ────────────────────────────────────────────── */
.kpis {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line);
  margin-bottom: clamp(28px, 5vh, 44px);
}
.kpi { padding: 20px 24px 18px 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.kpi:last-child { border-right: none; }
.kpi + .kpi { padding-left: 24px; }
.kpi-num {
  font-size: clamp(1.7rem, 3.6vw, 2.7rem); font-weight: 620;
  letter-spacing: -0.03em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.kpi-label { font-size: 0.78rem; color: var(--t3); letter-spacing: 0.01em; }
@media (max-width: 640px) {
  .kpis { grid-template-columns: 1fr; border-right: none; }
  .kpi { border-right: none; border-bottom: 1px solid var(--line); padding: 14px 0; }
  .kpi:last-child { border-bottom: none; }
  .kpi + .kpi { padding-left: 0; }
}

/* ── chart panel ─────────────────────────────────────── */
.panel {
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg-raise);
  padding: clamp(18px, 2.6vw, 28px);
}
.panel-cap {
  font-size: 0.85rem; font-weight: 500; color: var(--t1);
  margin-bottom: 18px; letter-spacing: -0.005em;
}
.chart { display: flex; flex-direction: column; gap: 2px; }
.chart-row {
  display: grid; grid-template-columns: minmax(92px, 132px) minmax(0, 1fr) 58px;
  gap: clamp(10px, 2vw, 20px); align-items: center;
  padding: 6px 8px; margin: 0 -8px;
  border-radius: 7px; outline: none;
  transition: background 0.15s ease;
}
.chart-row:hover, .chart-row:focus-visible { background: var(--wash); }
.chart-row:focus-visible { box-shadow: inset 0 0 0 1px var(--line-2); }
.chart-name {
  font-size: 0.82rem; color: var(--t2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chart-track { position: relative; height: 20px; display: flex; align-items: center; }
.chart-fill {
  height: 8px; width: 0; border-radius: 0 4px 4px 0;
  background: var(--bar);
  transition: width 1s var(--ease);
}
.chart-row.is-hero .chart-fill { background: var(--red); }
.chart-row.is-hero .chart-name { color: var(--t1); font-weight: 550; }
.chart-ghost {
  position: absolute; left: var(--x); top: 6px; bottom: 6px; width: 0;
  background: repeating-linear-gradient(-45deg,
    rgba(255, 77, 66, 0.45) 0 3px, transparent 3px 6px);
  border-radius: 0 4px 4px 0;
  transition: width 1s var(--ease) 0.35s;
}
.chart.animated .chart-ghost { width: var(--w); }
.chart-value {
  font-family: var(--mono); font-size: 0.78rem; color: var(--t2);
  font-variant-numeric: tabular-nums; text-align: right;
  opacity: 0; transition: opacity 0.4s ease 0.7s;
}
.chart-row.is-hero .chart-value { color: var(--t1); }
.chart.animated .chart-fill { width: var(--w); }
.chart.animated .chart-value { opacity: 1; }

.chart-foot { margin-top: 14px; font-size: 0.82rem; color: var(--t3); max-width: 46em; }

.data-table { margin-top: 14px; }
.data-table summary {
  cursor: pointer; font-size: 0.78rem; color: var(--t3); width: fit-content;
  transition: color 0.15s ease;
}
.data-table summary:hover { color: var(--t1); }
.data-table table { margin-top: 10px; border-collapse: collapse; width: 100%; max-width: 400px; font-size: 0.85rem; }
.data-table th, .data-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.data-table th { font-size: 0.78rem; color: var(--t3); font-weight: 500; }
.data-table td:last-child, .data-table th:last-child { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 0.8rem; }

.tip {
  position: fixed; z-index: 150; pointer-events: none;
  background: #1b1d22; color: var(--t1);
  border: 1px solid var(--line-2); border-radius: 8px;
  font-family: var(--mono); font-size: 0.74rem;
  padding: 6px 10px;
  transform: translate(-50%, calc(-100% - 10px));
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* ── callout & leagues ───────────────────────────────── */
.callout {
  max-width: 30em;
  font-size: clamp(1.25rem, 2.5vw, 1.7rem);
  font-weight: 550; letter-spacing: -0.025em; line-height: 1.35;
  margin: clamp(40px, 7vh, 64px) 0;
  padding-left: 22px;
  border-left: 2px solid var(--red);
  text-wrap: balance;
}
.callout em { font-style: normal; color: var(--red); }

.leagues { border-top: 1px solid var(--line-2); }
.league-row {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: 14px 2px; border-bottom: 1px solid var(--line);
}
.lg { font-weight: 620; font-size: 1rem; letter-spacing: -0.01em; }
.lg-status { font-size: 0.85rem; color: var(--t2); }
.lg-mark { width: 8px; height: 8px; border-radius: 50%; }
.lg-mark.ok { background: var(--t3); }
.lg-mark.bad { background: var(--red); box-shadow: 0 0 12px rgba(255, 77, 66, 0.6); }
.league-row.is-mlb .lg, .league-row.is-mlb .lg-status { color: var(--red); }

/* ── total ───────────────────────────────────────────── */
.total {
  display: flex; align-items: baseline; gap: clamp(16px, 3vw, 32px); flex-wrap: wrap;
  margin-top: clamp(32px, 6vh, 52px);
  padding-top: clamp(24px, 4vh, 36px);
  border-top: 1px solid var(--line-2);
}
.total-num {
  font-size: clamp(3.4rem, 9vw, 6.6rem); font-weight: 640;
  letter-spacing: -0.05em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.total-note { max-width: 26em; font-size: 0.92rem; color: var(--t2); }

/* ── fixes ───────────────────────────────────────────── */
.fixes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
}
.fix { border-top: 1px solid var(--line-2); padding-top: 20px; }
.fix h3 { font-size: 1.12rem; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 8px; }
.fix p { font-size: 0.92rem; color: var(--t2); }
@media (max-width: 760px) { .fixes { grid-template-columns: 1fr; } }

/* ── timeline ────────────────────────────────────────── */
.tl { display: flex; flex-direction: column; }
.tl-row {
  display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: clamp(16px, 3vw, 40px);
  padding: clamp(20px, 3.4vh, 30px) 0;
  border-top: 1px solid var(--line);
}
.tl-date {
  font-family: var(--mono); font-size: 0.78rem; color: var(--t3);
  padding-top: 0.35em; white-space: nowrap;
}
.tl-row h3 { font-size: 1.08rem; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 6px; }
.tl-row p { max-width: 46em; font-size: 0.94rem; color: var(--t2); }
.tl-row.is-now { border-top-color: rgba(255, 77, 66, 0.5); }
.tl-row.is-now .tl-date { color: var(--red); font-weight: 600; }
.tl-row.is-now h3::after {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--red); margin-left: 10px; vertical-align: 2px;
  animation: ping 2.4s var(--ease) infinite;
}
.tl-row.is-future { opacity: 0.55; }

/* ── closer ──────────────────────────────────────────── */
.closer {
  padding: clamp(90px, 16vh, 170px) 0;
  position: relative; overflow: hidden;
}
.closer::before {
  content: "";
  position: absolute; inset: auto -20% -60%; height: 100%;
  background: radial-gradient(ellipse 50% 50% at 50% 100%, rgba(255, 77, 66, 0.08), transparent 70%);
  pointer-events: none;
}
.closer-h {
  font-size: clamp(2.6rem, 7vw, 5.6rem); font-weight: 640;
  letter-spacing: -0.045em; line-height: 1.03;
  margin-bottom: 22px;
}
.closer-p { max-width: 34em; color: var(--t2); font-size: clamp(1rem, 1.5vw, 1.15rem); }

/* ── FAQ ─────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--line-2); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 16px 2px; font-size: 1.02rem; font-weight: 550; letter-spacing: -0.01em;
  color: var(--t1);
  transition: color 0.15s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; flex: none;
  font-family: var(--mono); font-size: 1rem; color: var(--t3);
  transition: transform 0.25s var(--ease), color 0.15s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); color: var(--red); }
.faq-item summary:hover::after { color: var(--red); }
.faq-item p {
  padding: 0 2px 18px; max-width: 44em;
  font-size: 0.95rem; color: var(--t2);
}

/* ── citations, sources, resources ───────────────────── */
sup.cite { line-height: 0; font-size: 0.62em; margin-left: 1px; }
sup.cite a {
  color: var(--t3); text-decoration: none;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  transition: color 0.15s ease;
}
sup.cite a:hover { color: var(--red); }

.sources {
  columns: 2; column-gap: clamp(24px, 4vw, 56px);
  list-style-position: inside; padding: 0;
  font-size: 0.85rem; color: var(--t3);
  counter-reset: src;
}
.sources li {
  break-inside: avoid; padding: 7px 0; border-bottom: 1px solid var(--line);
  list-style: none; counter-increment: src;
}
.sources li::before {
  content: counter(src); font-family: var(--mono); font-size: 0.72rem;
  color: var(--t3); margin-right: 10px;
}
.sources a { color: var(--t2); text-decoration: none; transition: color 0.15s ease; }
.sources a:hover { color: var(--t1); }
.sources li:target { background: var(--wash); }
.sources li:target a { color: var(--t1); }
@media (max-width: 720px) { .sources { columns: 1; } }

.sec-h-2 { margin-top: clamp(48px, 8vh, 72px); }
.resources { list-style: none; padding: 0; }
.resources li { border-top: 1px solid var(--line); }
.resources li:last-child { border-bottom: 1px solid var(--line); }
.resources a {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 2px; font-size: 0.92rem;
  color: var(--t2); text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}
.resources a:hover { color: var(--t1); background: var(--wash); }
.res-logo {
  width: 18px; height: 18px; flex: none;
  background: #f5f6f7; border-radius: 4px; padding: 2px;
}

/* ── footer ──────────────────────────────────────────── */
.foot { border-top: 1px solid var(--line); padding: 28px 0 40px; }
.foot-credit {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 18px; text-decoration: none;
  font-size: 0.85rem; color: var(--t2);
  transition: color 0.15s ease;
}
.foot-credit:hover { color: var(--t1); }
.foot-credit strong { color: var(--t1); font-weight: 600; }
.foot-logo {
  display: grid; place-items: center;
  width: 30px; height: 30px; flex: none;
  background: #f5f6f7; border-radius: 7px;
}
.foot-logo img { width: 22px; height: 22px; display: block; }
.foot-inner {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 0.78rem; color: var(--t3);
}

/* ── reveals ─────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s var(--ease); }
.reveal.in-view { opacity: 1; transform: none; }
.claims .reveal:nth-child(2), .fixes .reveal:nth-child(2) { transition-delay: 80ms; }
.claims .reveal:nth-child(3), .fixes .reveal:nth-child(3) { transition-delay: 160ms; }

/* ── reduced motion ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .a-in { animation: none; opacity: 1; transform: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .live-dot, .tl-row.is-now h3::after { animation: none; }
  .chart-fill, .chart-ghost, .chart-value { transition: none; }
}