/* ==========================================================================
   Cut the Nets — cutthenets.io
   "Championship control room": a futuristic tournament archive you can change.

   One stylesheet, no build step, no external requests. Every colour comes
   from resources/brand/06-Guidelines/BRAND-GUIDE.md. Decisions, contrast
   ratios, motion inventory and asset sources: /DESIGN.md

   The page is complete and readable with this file alone; /assets/js/site.js
   only adds pointer response, scroll choreography and the net-cut flourish.

    1. Font face
    2. Tokens
    3. Reset and base
    4. Accessibility (skip link, focus, reduced motion hooks)
    5. Layout primitives
    6. Type
    7. Surfaces: glass, keylines, machined corners, grain, scan
    8. Buttons
    9. Header and navigation
   10. Hero: the control room
   11. Bracket geometry and the travelling pulse
   12. Three-part demonstration
   13. The run story
   14. The archive
   15. Come back
   16. Proof and FAQ
   17. Championship close and the net cut
   18. Page headers, prose, legal
   19. Support, press, article pages
   20. Footer
   21. Motion: ambient, responsive, narrative
   22. Reduced motion, forced colours, print
   ========================================================================== */


/* 1. FONT FACE ------------------------------------------------------------
   Archivo variable, latin subset: wght 100–900, wdth 62–125. The same file
   the app bundles; SIL OFL 1.1, licence at /assets/fonts/Archivo-OFL.txt. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-variable-latin.woff2") format("woff2-variations"),
       url("../fonts/archivo-variable-latin.woff2") format("woff2");
}


/* 2. TOKENS -------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* Brand palette — BRAND-GUIDE.md "Palette tokens", verbatim hex */
  --brand-ink: #07090f;
  --brand-navy: #07162d;
  --brand-gold: #f4b51c;
  --brand-gold-light: #ffd968;
  --brand-orange: #f26a1b;
  --brand-cream: #fff4dc;
  --brand-electric-blue: #168cff;
  --brand-violet: #49308e;
  --brand-locked: #343744;

  /* Web-only derivatives (contrast notes in DESIGN.md) */
  --ink-2: #0a0e18;        /* a half-step off the ground, for banding */
  --navy-2: #0d2240;       /* raised card on navy or ink */
  --navy-3: #15304f;       /* hover / pressed surface */
  --line: #1f3552;         /* hairline borders (decorative) */
  --line-strong: #3a5475;  /* stronger decorative borders */
  --line-control: #5a7699; /* outline of a control: 4.25 ink, 3.86 navy */
  --gold-dim: #8a6a1c;     /* unlit bracket geometry (>= 3:1 on ink and navy) */
  --cream-2: #d8ceb9;      /* body copy */
  --cream-3: #aba290;      /* meta, captions, legal small print */
  --blue-light: #6cb8ff;   /* link hover text */
  --blue-deep: #072a52;    /* deep water behind a lit panel */

  /* Semantic roles — components read these, never raw hex */
  --bg: var(--brand-ink);
  --surface: var(--brand-navy);
  --surface-raised: var(--navy-2);
  --surface-hover: var(--navy-3);
  --text-strong: var(--brand-cream);
  --text: var(--cream-2);
  --text-muted: var(--cream-3);
  --accent: var(--brand-gold);
  --accent-strong: var(--brand-gold-light);
  --bracket: var(--gold-dim);
  --bracket-lit: var(--brand-gold);
  --interactive: var(--brand-electric-blue);
  --interactive-text: var(--blue-light);
  --focus: var(--brand-electric-blue);

  /* Per-section lighting identity. Sections override these three. */
  --scene-key: var(--brand-electric-blue);   /* the light in the room */
  --scene-fill: var(--brand-violet);         /* the shadow's colour */
  --scene-rim: var(--brand-gold);            /* the edge that catches light */
  --scene-haze: 0.16;                        /* how much the key light spills */

  /* Pointer, written by site.js. Defaults are centre, so the CSS is
     complete and stable when the script never runs. */
  --px: 0.5;
  --py: 0.5;
  --pdx: 0;   /* -0.5 .. 0.5, distance from centre */
  --pdy: 0;

  /* Type */
  --font-sans: "Archivo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* Fluid type scale */
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
  --step-2: clamp(1.4375rem, 1.25rem + 0.9vw, 1.875rem);
  --step-3: clamp(1.75rem, 1.4rem + 1.75vw, 2.75rem);
  --step-4: clamp(2rem, 1.5rem + 2.4vw, 3.25rem);
  --step-5: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);      /* the display voice */
  --step-hero: clamp(2.75rem, 1.5rem + 5vw, 5.75rem);   /* the hero only */
  --label-size: 0.75rem;
  --label-track: 0.14em;
  --display-stretch: 118%;
  --data-stretch: 76%;

  /* Space */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-section: clamp(4rem, 2.5rem + 6vw, 8rem);
  --gutter: clamp(1rem, 0.6rem + 2.2vw, 2.5rem);

  /* Measure */
  --width-max: 78rem;
  --width-mid: 62rem;
  --width-narrow: 46rem;
  --width-prose: 68ch;

  /* Shape */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-pill: 999px;
  --line-weight: 2px;
  --notch: 14px;           /* machined corner cut */

  /* Controlled grain: one inline SVG turbulence, no request, no image file. */
  --grain-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");

  /* Motion — one family of timings, used everywhere.
     quick = a control answering you; scene = a panel changing;
     travel = something crossing the screen. */
  --ease-out: cubic-bezier(0.16, 0.84, 0.44, 1);
  --ease-in-out: cubic-bezier(0.62, 0.02, 0.24, 1);
  --ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1);
  --t-quick: 140ms;
  --t-control: 220ms;
  --t-scene: 520ms;
  --t-travel: 900ms;
  --t-ambient: 9s;
}

/* Animatable custom properties, where the browser supports registering them.
   Everything below degrades to a non-animated value without these. */
@supports (background: paint(x)) {
  @property --sweep { syntax: "<percentage>"; initial-value: 0%; inherits: false; }
  @property --glow { syntax: "<number>"; initial-value: 0; inherits: false; }
}


/* 3. RESET AND BASE ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The room's ambient ground: two soft lights that never move, so the page
   has depth before a single script runs. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 80% at 12% -10%, color-mix(in oklab, var(--brand-electric-blue) 14%, transparent) 0%, transparent 60%),
    radial-gradient(100% 70% at 92% 8%, color-mix(in oklab, var(--brand-violet) 22%, transparent) 0%, transparent 62%),
    var(--bg);
  pointer-events: none;
}

img, picture, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
svg { fill: none; }

a { color: var(--interactive-text); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--accent-strong); }

ul, ol { padding: 0; list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: color-mix(in oklab, var(--brand-gold) 40%, transparent); color: var(--brand-cream); }


/* 4. ACCESSIBILITY -------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--space-s);
  top: var(--space-s);
  z-index: 200;
  transform: translateY(-160%);
  padding: var(--space-xs) var(--space-m);
  background: var(--brand-gold);
  color: #241a00;
  font-weight: 700;
  border-radius: var(--radius);
  text-decoration: none;
  transition: transform var(--t-control) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

:where(a, button, [tabindex], summary, input, select, video):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
/* the crisp focus treatment: a doubled ring, so it reads on gold and on ink */
.btn:focus-visible,
.site-nav__link:focus-visible,
.stage-tab:focus-visible,
.era-chip:focus-visible {
  outline: 2px solid var(--brand-cream);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--focus) 75%, transparent);
}

.visually-hidden, .sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

main:focus { outline: none; }


/* 5. LAYOUT PRIMITIVES ---------------------------------------------------- */
.container {
  width: min(100% - (var(--gutter) * 2), var(--width-max));
  margin-inline: auto;
}
.container--mid { max-width: var(--width-mid); }
.container--narrow { width: min(100% - (var(--gutter) * 2), var(--width-narrow)); }

.section {
  position: relative;
  padding-block: var(--space-section);
  isolation: isolate;
}
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem); }

/* Each scene gets its own light. The tint sits behind the content and is
   masked at both edges so sections bleed into one another. */
.section--scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(90% 60% at var(--scene-x, 50%) 0%,
      color-mix(in oklab, var(--scene-key) calc(var(--scene-haze) * 100%), transparent) 0%,
      transparent 70%),
    linear-gradient(180deg,
      color-mix(in oklab, var(--scene-fill) 10%, transparent) 0%,
      transparent 40%, transparent 60%,
      color-mix(in oklab, var(--scene-fill) 12%, transparent) 100%);
  pointer-events: none;
}
.section--navy { background: linear-gradient(180deg, var(--ink-2), var(--brand-navy) 45%, var(--ink-2)); }

.stack { display: grid; gap: var(--space-s); align-content: start; }
.stack--s { gap: var(--space-2xs); }
.stack--l { gap: var(--space-l); }
.stack--xl { gap: var(--space-xl); }

.cluster { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; }

.split {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}
@media (min-width: 56rem) {
  .split { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); }
  .split--top { align-items: start; }
  .split--wide-right { grid-template-columns: 5fr 7fr; }
  .split--wide-left { grid-template-columns: 7fr 5fr; }
  .split__sticky { position: sticky; top: 6.5rem; }
  .split--media-first > :last-child { order: -1; }
}

.section__header { max-width: var(--width-narrow); margin-bottom: var(--space-xl); display: grid; gap: var(--space-s); }
.center { text-align: center; }
.center .section__header { margin-inline: auto; }


/* 6. TYPE ----------------------------------------------------------------- */
h1, h2, h3, h4 { font-weight: 800; line-height: 1.05; color: var(--text-strong); text-wrap: balance; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); line-height: 1.2; }

/* the broadcast voice: oversized, wide, tight */
.display {
  font-size: var(--step-5);
  font-stretch: var(--display-stretch);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
.display--hero { text-wrap: pretty; }

/* the condensed data voice: scoreboard numerals */
.num, .stat__value, .scorebug__value {
  font-stretch: var(--data-stretch);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1;
}

.eyebrow, .label {
  font-family: var(--font-mono);
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
}
.eyebrow--key { color: color-mix(in oklab, var(--scene-key) 70%, var(--brand-cream)); }
.eyebrow--gold { color: var(--accent); }

.lede { font-size: var(--step-1); color: var(--text); text-wrap: pretty; }
.text-muted { color: var(--text-muted); }
.small { font-size: var(--step--1); }

p { text-wrap: pretty; max-width: var(--width-prose); }

.link-target, .link-inline {
  color: var(--interactive-text);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--interactive) 55%, transparent);
  transition: color var(--t-quick) var(--ease-out), text-decoration-color var(--t-quick) var(--ease-out);
}
.link-target:hover, .link-inline:hover { color: var(--accent-strong); text-decoration-color: currentColor; }
.cluster > .link-target { display: inline-flex; align-items: center; min-height: 2.75rem; }


/* 7. SURFACES ------------------------------------------------------------- */
/* Smoked glass with a fine metallic keyline and a machined corner. */
.glass {
  position: relative;
  background:
    linear-gradient(160deg,
      color-mix(in oklab, var(--navy-2) 82%, transparent) 0%,
      color-mix(in oklab, var(--brand-ink) 86%, transparent) 100%);
  border: 1px solid color-mix(in oklab, var(--line-strong) 70%, transparent);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow:
    0 1px 0 0 color-mix(in oklab, var(--brand-cream) 9%, transparent) inset,
    0 24px 60px -30px rgba(0, 0, 0, 0.9);
}
/* the luminous edge that catches the scene's key light */
.glass::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg,
    color-mix(in oklab, var(--scene-rim) 55%, transparent) 0%,
    transparent 35%, transparent 65%,
    color-mix(in oklab, var(--scene-key) 45%, transparent) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.75;
}
.glass--notch {
  border-radius: var(--radius-lg);
  clip-path: polygon(
    var(--notch) 0, 100% 0, 100% calc(100% - var(--notch)),
    calc(100% - var(--notch)) 100%, 0 100%, 0 var(--notch));
}
.glass--notch::after { display: none; }

/* controlled grain, one element, never animated */
.grain { position: relative; }
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: var(--grain-url);
  background-size: 180px 180px;
}

/* coordinate ticks and archive labels */
.ticks-rail {
  display: flex;
  gap: var(--space-2xs);
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: color-mix(in oklab, var(--text-muted) 80%, transparent);
  text-transform: uppercase;
}
.ticks-rail::before,
.ticks-rail::after {
  content: "";
  height: 1px;
  flex: 1;
  background: repeating-linear-gradient(90deg,
    color-mix(in oklab, var(--line-strong) 90%, transparent) 0 6px,
    transparent 6px 12px);
}

/* a thin scan accent used on stage edges */
.scan {
  background-image: repeating-linear-gradient(180deg,
    color-mix(in oklab, var(--brand-cream) 4%, transparent) 0 1px,
    transparent 1px 4px);
}


/* 8. BUTTONS -------------------------------------------------------------- */
.btn {
  --btn-lift: 0px;
  --btn-mx: 0px;
  --btn-my: 0px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 3rem;
  padding: 0.85rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: var(--step-0);
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
  transform: translate3d(var(--btn-mx), calc(var(--btn-my) + var(--btn-lift)), 0);
  transition:
    transform var(--t-control) var(--ease-spring),
    box-shadow var(--t-control) var(--ease-out),
    background-color var(--t-quick) var(--ease-out),
    color var(--t-quick) var(--ease-out);
}
.btn:hover { --btn-lift: -2px; }
.btn:active { --btn-lift: 1px; transition-duration: var(--t-quick); }

.btn--gold {
  background: linear-gradient(180deg, var(--brand-gold-light), var(--brand-gold));
  color: #241a00;
  box-shadow: 0 10px 30px -14px color-mix(in oklab, var(--brand-gold) 80%, transparent);
}
.btn--gold:hover {
  color: #241a00;
  box-shadow: 0 16px 38px -14px color-mix(in oklab, var(--brand-gold) 92%, transparent);
}

.btn--blue {
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--brand-electric-blue) 92%, white 8%),
    var(--brand-electric-blue));
  color: #01121f;
  box-shadow: 0 10px 30px -14px color-mix(in oklab, var(--brand-electric-blue) 85%, transparent);
}
.btn--blue:hover {
  color: #01121f;
  box-shadow: 0 16px 38px -14px color-mix(in oklab, var(--brand-electric-blue) 95%, transparent);
}

.btn--ghost {
  background: color-mix(in oklab, var(--navy-2) 55%, transparent);
  border-color: var(--line-control);
  color: var(--text-strong);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn--ghost:hover { background: var(--surface-hover); color: var(--text-strong); border-color: var(--brand-electric-blue); }

.btn--email { background: var(--brand-gold); color: #241a00; }

.btn--lg { min-height: 3.5rem; padding: 1rem 2rem; font-size: var(--step-1); }
.btn--block { width: 100%; }

/* the App Store / browser buttons carry a small mark */
.btn--store .btn__mark { width: 1.15em; height: 1.15em; flex: 0 0 auto; }
.btn__sub {
  display: block;
  font-size: 0.6875rem;
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.72;
  font-weight: 600;
}
.btn__label { display: block; }

/* a light that crosses the button as the pointer enters */
.btn--gold::before, .btn--blue::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 35%,
    color-mix(in oklab, white 55%, transparent) 50%, transparent 65%);
  transform: translateX(-120%);
  opacity: 0;
  transition: transform 620ms var(--ease-out), opacity 200ms linear;
}
.btn--gold:hover::before, .btn--blue:hover::before { transform: translateX(120%); opacity: 0.5; }


/* 9. HEADER AND NAVIGATION ------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in oklab, var(--brand-ink) 72%, transparent);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
  transition: background var(--t-scene) var(--ease-out), border-color var(--t-scene) var(--ease-out);
}
.site-header::after {
  /* the gold rail under the bar, lit from the left */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, color-mix(in oklab, var(--brand-gold) 70%, transparent) 20%,
    color-mix(in oklab, var(--brand-electric-blue) 60%, transparent) 60%, transparent);
  opacity: 0.5;
}
.site-header[data-scrolled="true"] { background: color-mix(in oklab, var(--brand-ink) 92%, transparent); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: 4.25rem;
}

.site-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.site-logo img { width: clamp(7rem, 16vw, 9.5rem); height: auto; }

.site-nav { display: flex; }
.site-nav__list { display: flex; align-items: center; gap: clamp(0.25rem, 1.2vw, 1.25rem); }
.site-nav__link {
  position: relative;
  display: inline-block;
  padding: 0.6rem 0.35rem;
  color: var(--text);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t-quick) var(--ease-out);
}
.site-nav__link:hover, .site-nav__link[aria-current="page"] { color: var(--text-strong); }
/* the bracket tick that grows under the active link */
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0.35rem; right: 0.35rem; bottom: 0.25rem;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-gold), var(--brand-electric-blue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-control) var(--ease-out);
}
.site-nav__link:hover::after, .site-nav__link[aria-current="page"]::after { transform: scaleX(1); }

.site-nav__cta { min-height: 2.5rem; padding: 0.5rem 1.1rem; font-size: var(--step--1); }

/* On a phone the bar stays one line: the logo and the call to action are
   fixed, and the links between them scroll sideways. Nothing is hidden, so
   every page is still reachable from the header, and the hero is never
   covered by a dropped-down menu. */
@media (max-width: 52rem) {
  .site-header__inner { gap: var(--space-2xs); }
  .site-logo img { width: 6.5rem; }
  .site-nav {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* the fade tells you there is more to the right */
    -webkit-mask-image: linear-gradient(90deg, #000 0 82%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0 82%, transparent 100%);
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav__list { flex-wrap: nowrap; gap: 0.1rem; padding-right: 2.5rem; }
  .site-nav__link { font-size: 0.8125rem; padding: 0.7rem 0.45rem; white-space: nowrap; }
  .site-nav__cta { flex: 0 0 auto; padding: 0.5rem 0.9rem; font-size: 0.8125rem; white-space: nowrap; }
}
@media (max-width: 26rem) {
  .site-logo img { width: 5.5rem; }
  .site-nav__link { padding: 0.7rem 0.38rem; }
  .site-nav__cta { padding: 0.5rem 0.75rem; }
}


/* 10. HERO: THE CONTROL ROOM ---------------------------------------------- */
.hero {
  --scene-key: var(--brand-electric-blue);
  --scene-fill: var(--brand-violet);
  --scene-rim: var(--brand-gold);
  position: relative;
  overflow: clip;
  padding-block: clamp(1.75rem, 1.2rem + 2.5vw, 3.25rem) clamp(2.5rem, 1.8rem + 4vw, 4.5rem);
  isolation: isolate;
}

/* the court spotlight follows the pointer; centred and still without JS */
.hero::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -2;
  background: radial-gradient(38% 38% at calc(var(--px) * 100%) calc(var(--py) * 100%),
    color-mix(in oklab, var(--brand-electric-blue) 26%, transparent) 0%,
    color-mix(in oklab, var(--brand-violet) 14%, transparent) 38%,
    transparent 70%);
  transition: background 220ms linear;
  pointer-events: none;
}

.hero__inner {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 60rem) {
  .hero__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

.hero__copy { display: grid; gap: var(--space-m); align-content: start; position: relative; z-index: 2; }

.hero__title {
  font-size: var(--step-hero);
  font-stretch: var(--display-stretch);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--brand-cream);
  margin: 0;
}
.hero__title .l1 { display: block; }
.hero__title .l2 {
  display: block;
  color: transparent;
  background: linear-gradient(96deg, var(--brand-gold-light) 0%, var(--brand-gold) 42%, var(--brand-orange) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.hero__lede { font-size: var(--step-1); color: var(--text); max-width: 32ch; }

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-top: var(--space-2xs); }
.hero__actions .btn { flex: 1 1 15rem; }
@media (min-width: 30rem) { .hero__actions .btn { flex: 0 1 auto; } }

/* CTA hierarchy by platform. Both destinations are always present and always
   work; this only changes which one leads. The HTML order is the desktop and
   Android order (browser first); on an iPhone or iPad site.js sets
   data-platform="ios" and the App Store button moves in front. Purely a hint,
   never a redirect — and if the script never runs, both still show. */
html[data-platform="ios"] .hero__actions,
html[data-platform="ios"] .close__inner .cluster { flex-direction: row-reverse; justify-content: flex-end; }
html[data-platform="ios"] .close__inner .cluster { justify-content: center; }

.hero__note {
  font-size: var(--step--1);
  color: var(--text-muted);
  max-width: 44ch;
  border-left: 2px solid color-mix(in oklab, var(--brand-gold) 45%, transparent);
  padding-left: var(--space-s);
}

/* the QR block, desktop only, next to the store button */
.hero__qr {
  display: none;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-s);
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in oklab, var(--line) 80%, transparent);
  background: color-mix(in oklab, var(--navy-2) 40%, transparent);
  max-width: 22rem;
}
.hero__qr svg { width: 5rem; height: 5rem; flex: 0 0 auto; border-radius: var(--radius-sm); background: var(--brand-cream); padding: 4px; }
.hero__qr p { font-size: var(--step--1); color: var(--text-muted); margin: 0; }
@media (min-width: 64rem) and (hover: hover) and (pointer: fine) { .hero__qr { display: flex; } }

/* ---- the stage: the product, framed ---- */
.stage {
  position: relative;
  z-index: 1;
  padding: clamp(0.75rem, 1.6vw, 1.25rem);
  border-radius: calc(var(--radius-xl) + 6px);
  transform-style: preserve-3d;
  perspective: 1400px;
}
.stage__frame {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  transform: rotateY(calc(var(--pdx) * -4deg)) rotateX(calc(var(--pdy) * 3deg));
  transition: transform 360ms var(--ease-out);
  will-change: transform;
}
.stage__media {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
  background: var(--brand-ink);
}
/* the phone-shaped demo sits in a wide stage: cap it and centre it */
.stage__media { max-height: min(62svh, 34rem); width: auto; margin-inline: auto; }

.stage__glowline {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--brand-gold) 35%, transparent) inset,
    0 0 70px -10px color-mix(in oklab, var(--brand-electric-blue) 55%, transparent) inset;
}

/* the console chrome around the stage */
.stage__head, .stage__foot {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding-inline: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.stage__head { margin-bottom: var(--space-2xs); }
.stage__foot { margin-top: var(--space-xs); flex-wrap: wrap; row-gap: var(--space-2xs); }
.stage__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand-orange);
  box-shadow: 0 0 10px 1px color-mix(in oklab, var(--brand-orange) 75%, transparent);
  flex: 0 0 auto;
}
.stage__rule { flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in oklab, var(--line-strong) 90%, transparent), transparent); }

/* media controls: always reachable, never hover-only */
.stage__controls { display: flex; gap: var(--space-2xs); align-items: center; }
.media-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 2.75rem;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-control);
  background: color-mix(in oklab, var(--brand-ink) 70%, transparent);
  color: var(--text-strong);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--t-quick) var(--ease-out), border-color var(--t-quick) var(--ease-out);
}
.media-btn:hover { background: var(--surface-hover); border-color: var(--brand-electric-blue); }
.media-btn svg { width: 0.9em; height: 0.9em; }

/* the scorebug rail beside the stage */
.scorebug {
  display: grid;
  grid-auto-flow: column;
  gap: clamp(0.75rem, 3vw, 2rem);
  justify-content: start;
  padding: var(--space-s) var(--space-m);
  margin-top: var(--space-m);
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in oklab, var(--line) 85%, transparent);
  background: linear-gradient(180deg, color-mix(in oklab, var(--navy-2) 55%, transparent), transparent);
}
.scorebug__item { display: grid; gap: 2px; }
.scorebug__value {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  font-weight: 800;
  line-height: 1;
  color: var(--brand-cream);
}
.scorebug__label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
@media (max-width: 30rem) {
  .scorebug { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); gap: var(--space-s); }
}


/* 11. BRACKET GEOMETRY ---------------------------------------------------- */
/* Orthogonal gold paths, one weight, converging on a championship node —
   BRAND-GUIDE "Bracket and lightning language". */
.bracket-art { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.bracket-art svg { width: 100%; height: 100%; }
/* On a phone the geometry is cropped hard by preserveAspectRatio and a stray
   vertical run can land behind a paragraph. Keep it as atmosphere, not as
   something that reads like a rule through the text. */
@media (max-width: 52rem) {
  .bracket-art { opacity: 0.4; }
  .bracket-art .bk-line { opacity: 0.18; }
  .bracket-art .bk-line--faint { opacity: 0.09; }
}

.bk-line {
  fill: none;
  stroke: var(--bracket);
  stroke-width: var(--line-weight);
  stroke-linecap: square;
  opacity: 0.45;
}
.bk-line--faint { opacity: 0.22; }
.bk-node {
  fill: none;
  stroke: color-mix(in oklab, var(--brand-gold) 70%, transparent);
  stroke-width: var(--line-weight);
}
.bk-node--lit { stroke: var(--brand-gold); filter: drop-shadow(0 0 8px color-mix(in oklab, var(--brand-gold) 70%, transparent)); }

/* the pulse that travels a route */
.bk-pulse {
  fill: none;
  stroke: var(--brand-electric-blue);
  stroke-width: 3;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px color-mix(in oklab, var(--brand-electric-blue) 90%, transparent));
  stroke-dasharray: 14 1000;
  stroke-dashoffset: 1000;
}

/* the legacy trace used on 404 and the hero underlay */
.bracket-trace { width: 100%; height: auto; }
.bracket-trace__line { stroke: var(--bracket); stroke-width: var(--line-weight); opacity: 0.4; }
.bracket-trace__node { stroke: var(--brand-gold); stroke-width: var(--line-weight); fill: none; }
.bracket-trace__glint {
  stroke: var(--brand-electric-blue);
  stroke-width: 3;
  stroke-dasharray: 8 92;
  filter: drop-shadow(0 0 6px color-mix(in oklab, var(--brand-electric-blue) 80%, transparent));
}
.hero__bracket { position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; opacity: 0.5; pointer-events: none; }


/* 12. THREE-PART DEMONSTRATION -------------------------------------------- */
.demo { --scene-key: var(--brand-gold); --scene-fill: var(--brand-navy); --scene-rim: var(--brand-electric-blue); --scene-haze: 0.1; }

.stages { display: grid; gap: var(--space-l); margin-top: var(--space-xl); }
@media (min-width: 58rem) { .stages { grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 2rem); } }

.stage-card {
  position: relative;
  display: grid;
  gap: var(--space-s);
  padding: var(--space-m);
  align-content: start;
}
.stage-card__index {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  color: var(--accent);
  text-transform: uppercase;
}
.stage-card__title { font-size: var(--step-2); font-stretch: 105%; text-transform: uppercase; letter-spacing: -0.01em; }
.stage-card__body { color: var(--text); font-size: var(--step-0); }
.stage-card__shot {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--line) 80%, transparent);
  background: var(--brand-ink);
}
.stage-card__shot img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top center;
}
.stage-card__shot--tall img { aspect-ratio: 3 / 4; }
.stage-card__cap {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* the route that connects the three panels on wide screens */
.stages__route { display: none; }
@media (min-width: 58rem) {
  .stages__route {
    display: block;
    position: absolute;
    left: 0; right: 0;
    top: -1.75rem;
    height: 2.5rem;
    pointer-events: none;
  }
}

/* mobile: tap to switch, all content still present */
.stage-tabs { display: flex; gap: var(--space-2xs); flex-wrap: wrap; margin-bottom: var(--space-m); }
.stage-tab {
  min-height: 2.75rem;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-control);
  background: transparent;
  color: var(--text);
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-quick) var(--ease-out), color var(--t-quick) var(--ease-out), border-color var(--t-quick) var(--ease-out);
}
.stage-tab[aria-selected="true"] {
  background: var(--brand-gold);
  border-color: var(--brand-gold);
  color: #241a00;
}
@media (min-width: 58rem) { .stage-tabs { display: none; } }


/* 13. THE RUN STORY ------------------------------------------------------- */
.story { --scene-key: var(--brand-violet); --scene-fill: var(--brand-ink); --scene-rim: var(--brand-gold); --scene-haze: 0.2; }

.story__grid { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 58rem) { .story__grid { grid-template-columns: 6fr 5fr; } }

.beats { display: grid; gap: var(--space-m); counter-reset: beat; }
.beat {
  position: relative;
  padding-left: var(--space-xl);
  counter-increment: beat;
}
.beat::before {
  content: counter(beat, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0.15em;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.beat::after {
  content: "";
  position: absolute;
  left: 0.55rem; top: 1.8em; bottom: -1.2em;
  width: 1px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--brand-gold) 50%, transparent), transparent);
}
.beat:last-child::after { display: none; }
.beat__title { font-size: var(--step-1); margin-bottom: 0.15em; }
.beat__body { color: var(--text); }

.story__shot { position: relative; }
.story__shot img {
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in oklab, var(--line) 80%, transparent);
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
}

.verdict {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-m);
  margin-top: var(--space-m);
}
.verdict__line { display: flex; justify-content: space-between; gap: var(--space-s); font-size: var(--step--1); }
.verdict__line dt { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; }
.verdict__line dd { margin: 0; color: var(--text-strong); font-weight: 700; }


/* 14. THE ARCHIVE --------------------------------------------------------- */
.archive { --scene-key: var(--brand-electric-blue); --scene-fill: var(--brand-violet); --scene-rim: var(--brand-electric-blue); --scene-haze: 0.14; }

/* the history rail: an editorial browsing element, clearly a site demo */
.rail {
  position: relative;
  margin-top: var(--space-l);
  padding-block: var(--space-s);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.rail__track { display: flex; gap: var(--space-s); padding-inline: 2px; }
.era-chip {
  flex: 0 0 auto;
  scroll-snap-align: center;
  min-width: 8.5rem;
  min-height: 5.5rem;
  padding: var(--space-s);
  display: grid;
  gap: 2px;
  align-content: start;
  text-align: left;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in oklab, var(--line) 85%, transparent);
  background: linear-gradient(170deg, color-mix(in oklab, var(--navy-2) 60%, transparent), transparent);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--t-control) var(--ease-out), background var(--t-control) var(--ease-out), transform var(--t-control) var(--ease-out);
}
.era-chip:hover { border-color: color-mix(in oklab, var(--brand-electric-blue) 65%, transparent); transform: translateY(-2px); }
.era-chip[aria-selected="true"] {
  border-color: var(--brand-gold);
  background: linear-gradient(170deg, color-mix(in oklab, var(--brand-gold) 16%, transparent), transparent);
}
.era-chip__year { font-size: var(--step-2); font-weight: 800; color: var(--brand-cream); line-height: 1; }
.era-chip__note { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }

.era-panel {
  margin-top: var(--space-l);
  padding: var(--space-l);
  display: grid;
  gap: var(--space-m);
}
@media (min-width: 52rem) { .era-panel { grid-template-columns: 1fr 1fr; align-items: center; } }
.era-panel__title { font-size: var(--step-2); }
.era-panel__facts { display: grid; gap: var(--space-2xs); }
.era-panel__fact { display: flex; gap: var(--space-s); justify-content: space-between; border-bottom: 1px dashed color-mix(in oklab, var(--line-strong) 60%, transparent); padding-bottom: 0.35rem; }
.era-panel__fact dt { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.era-panel__fact dd { margin: 0; color: var(--text-strong); font-weight: 700; text-align: right; }

.stats { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.stat { display: grid; gap: var(--space-3xs); padding: var(--space-m); }
.stat__value { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); font-weight: 800; line-height: 1; color: var(--brand-cream); }
.stat__label { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }


/* 15. COME BACK ----------------------------------------------------------- */
.comeback { --scene-key: var(--brand-gold); --scene-fill: var(--brand-navy); --scene-rim: var(--brand-gold); --scene-haze: 0.12; }

.ticks { display: grid; gap: var(--space-m); }
.ticks__item { position: relative; padding-left: var(--space-l); }
.ticks__item::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 10px; height: 10px;
  border: 2px solid var(--brand-gold);
  border-radius: 2px;
  transform: rotate(45deg);
}
.ticks__title { font-size: var(--step-0); font-weight: 700; color: var(--text-strong); }
.ticks__body { color: var(--text); font-size: var(--step-0); }

.features { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.feature { display: grid; gap: var(--space-2xs); padding: var(--space-m); align-content: start; }
.feature__icon { width: 2.25rem; height: 2.25rem; stroke: var(--brand-gold); stroke-width: 2; fill: none; margin-bottom: var(--space-2xs); }
.feature__title { font-size: var(--step-1); }
.feature__body { color: var(--text); }


/* 16. PROOF AND FAQ ------------------------------------------------------- */
.proof { --scene-key: var(--brand-navy); --scene-fill: var(--brand-ink); --scene-rim: var(--line-strong); --scene-haze: 0.08; }

.faq { display: grid; gap: var(--space-2xs); }
.faq__item {
  border: 1px solid color-mix(in oklab, var(--line) 85%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--navy-2) 35%, transparent);
  overflow: hidden;
}
.faq__item[open] { border-color: color-mix(in oklab, var(--brand-gold) 45%, transparent); }
.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  min-height: 3.25rem;
  padding: var(--space-s) var(--space-m);
  font-weight: 700;
  color: var(--text-strong);
  cursor: pointer;
  list-style: none;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after {
  content: "";
  flex: 0 0 auto;
  width: 10px; height: 10px;
  border-right: 2px solid var(--brand-gold);
  border-bottom: 2px solid var(--brand-gold);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t-control) var(--ease-out);
}
.faq__item[open] .faq__question::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq__answer { padding: 0 var(--space-m) var(--space-m); color: var(--text); }
.faq__answer > * + * { margin-top: var(--space-s); }

.callout {
  padding: var(--space-l);
  border-radius: var(--radius-xl);
  border: 1px solid color-mix(in oklab, var(--line-strong) 70%, transparent);
  background: linear-gradient(160deg, color-mix(in oklab, var(--navy-2) 70%, transparent), transparent);
  display: grid;
  gap: var(--space-s);
}
.card {
  padding: var(--space-m);
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in oklab, var(--line) 85%, transparent);
  background: color-mix(in oklab, var(--navy-2) 40%, transparent);
}


/* 17. CHAMPIONSHIP CLOSE AND THE NET CUT ---------------------------------- */
.close {
  --scene-key: var(--brand-gold);
  --scene-fill: var(--brand-violet);
  --scene-rim: var(--brand-gold);
  --scene-haze: 0.22;
  position: relative;
  overflow: clip;
  text-align: center;
}
.close__inner { display: grid; gap: var(--space-m); justify-items: center; position: relative; z-index: 2; }
.close__title { font-size: var(--step-4); font-stretch: var(--display-stretch); text-transform: uppercase; }

/* the net: original SVG, cut by the visitor, never a claim about the app */
.netcut { position: relative; width: min(100%, 26rem); margin-inline: auto; }
.netcut svg { width: 100%; height: auto; overflow: visible; }
.net-rim { stroke: var(--brand-orange); stroke-width: 5; fill: none; filter: drop-shadow(0 0 12px color-mix(in oklab, var(--brand-orange) 65%, transparent)); }
.net-strand {
  stroke: var(--brand-cream);
  stroke-width: 1.6;
  fill: none;
  opacity: 0.82;
  transition: opacity 420ms var(--ease-out), transform 700ms var(--ease-in-out);
  transform-box: fill-box;
  transform-origin: top center;
}
.net-strand.is-cut { opacity: 0; transform: translateY(38px) rotate(6deg); }
/* the weave is decoration: it reads as part of the net but is not one of the
   twelve strands the counter tracks, and it fades once the net is down */
.net-weave { stroke: var(--brand-cream); stroke-width: 1.4; fill: none; opacity: 0.8; transition: opacity 500ms var(--ease-out); }
.netcut.is-done .net-weave { opacity: 0; }
.netcut__scissors {
  position: absolute;
  width: 2.25rem; height: 2.25rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms linear;
  filter: drop-shadow(0 0 8px color-mix(in oklab, var(--brand-gold) 80%, transparent));
}
.netcut.is-active .netcut__scissors { opacity: 1; }
.netcut__count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: var(--space-s);
}
.netcut__done { color: var(--accent-strong); font-weight: 700; }

.close__flash {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(50% 45% at 50% 42%,
    color-mix(in oklab, var(--brand-gold) 55%, transparent), transparent 70%);
}
.close.is-won .close__flash { animation: flash 1400ms var(--ease-out) forwards; }
@keyframes flash { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }

/* the converging lines behind the final call to action */
.converge { position: relative; display: inline-grid; justify-items: center; gap: var(--space-s); padding-block: var(--space-m); }
.converge__lines { position: absolute; inset: auto 0 0; width: 100%; height: 4rem; z-index: -1; opacity: 0.5; }
.converge__lines path { stroke: var(--bracket); stroke-width: var(--line-weight); fill: none; }


/* 18. PAGE HEADERS, PROSE, LEGAL ------------------------------------------ */
.page-header {
  position: relative;
  padding-block: clamp(2.5rem, 2rem + 4vw, 5rem) var(--space-l);
  border-bottom: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
  --scene-key: var(--brand-electric-blue);
  --scene-fill: var(--brand-violet);
  --scene-rim: var(--brand-gold);
}
.page-header__title { font-size: var(--step-3); font-stretch: 110%; text-transform: uppercase; letter-spacing: -0.015em; }
.page-header__meta { color: var(--text-muted); font-size: var(--step--1); font-family: var(--font-mono); letter-spacing: 0.08em; }

.prose { max-width: var(--width-prose); }
.prose > * + * { margin-top: var(--space-m); }
.prose h2 { font-size: var(--step-2); margin-top: var(--space-xl); }
.prose h3 { font-size: var(--step-1); margin-top: var(--space-l); }
.prose ul, .prose ol { padding-left: 1.25rem; display: grid; gap: var(--space-2xs); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li::marker { color: var(--accent); }
.prose a { color: var(--interactive-text); }
.prose strong { color: var(--text-strong); }
.prose hr { border: none; border-top: 1px solid var(--line); margin-block: var(--space-xl); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.prose th, .prose td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid color-mix(in oklab, var(--line) 80%, transparent); }
.prose th { color: var(--text-strong); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; }
.prose code { font-family: var(--font-mono); font-size: 0.9em; background: color-mix(in oklab, var(--navy-2) 70%, transparent); padding: 0.1em 0.35em; border-radius: var(--radius-sm); }

.back-link { display: inline-flex; align-items: center; gap: 0.4em; font-size: var(--step--1); color: var(--interactive-text); text-decoration: none; }
.back-link::before { content: "←"; }
.back-link:hover { text-decoration: underline; }

.toc { padding: var(--space-m); border-radius: var(--radius-lg); border: 1px solid color-mix(in oklab, var(--line) 85%, transparent); background: color-mix(in oklab, var(--navy-2) 35%, transparent); }
.toc__list { display: grid; gap: var(--space-2xs); }
.toc__list a { font-size: var(--step--1); }


/* 19. SUPPORT, PRESS, ARTICLES -------------------------------------------- */
.support-contact { display: grid; gap: var(--space-s); justify-items: start; }

.fact-sheet { display: grid; gap: 0; }
.fact-sheet__row {
  display: grid;
  gap: var(--space-2xs);
  padding-block: var(--space-s);
  border-bottom: 1px solid color-mix(in oklab, var(--line) 80%, transparent);
}
@media (min-width: 40rem) { .fact-sheet__row { grid-template-columns: 14rem 1fr; gap: var(--space-m); } }
.fact-sheet__row dt { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.fact-sheet__row dd { margin: 0; color: var(--text); }

.art-previews { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.art-preview { padding: var(--space-m); border-radius: var(--radius-lg); border: 1px solid color-mix(in oklab, var(--line) 85%, transparent); background: color-mix(in oklab, var(--navy-2) 35%, transparent); display: grid; gap: var(--space-2xs); }
.art-preview--logo img { margin-inline: auto; }
.art { border-radius: var(--radius-lg); overflow: hidden; }
.art--round { border-radius: 50%; overflow: hidden; }

/* long-form article pages */
.article-hero { --scene-haze: 0.18; }
.article-meta { display: flex; flex-wrap: wrap; gap: var(--space-s); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.article-meta > * { display: inline-flex; align-items: center; gap: 0.4em; }

.datatable { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.datatable caption { text-align: left; color: var(--text-muted); font-size: var(--step--1); padding-bottom: var(--space-s); }
.datatable th, .datatable td { padding: 0.45rem 0.6rem; border-bottom: 1px solid color-mix(in oklab, var(--line) 75%, transparent); text-align: left; }
.datatable thead th {
  position: sticky; top: 4.25rem;
  background: color-mix(in oklab, var(--brand-ink) 94%, transparent);
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);
  z-index: 1;
}
.datatable td.num, .datatable th.num { text-align: right; font-variant-numeric: tabular-nums; }
.datatable tbody tr:hover { background: color-mix(in oklab, var(--navy-2) 45%, transparent); }
.datatable .is-ot { color: var(--accent); font-weight: 700; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.pullquote {
  border-left: 3px solid var(--brand-gold);
  padding-left: var(--space-m);
  font-size: var(--step-2);
  font-stretch: 105%;
  color: var(--text-strong);
  line-height: 1.25;
}

.readnext { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: var(--space-2xl); }
.readnext__card { padding: var(--space-m); border-radius: var(--radius-lg); border: 1px solid color-mix(in oklab, var(--line) 85%, transparent); background: color-mix(in oklab, var(--navy-2) 35%, transparent); display: grid; gap: var(--space-2xs); text-decoration: none; transition: border-color var(--t-control) var(--ease-out), transform var(--t-control) var(--ease-out); }
.readnext__card:hover { border-color: color-mix(in oklab, var(--brand-gold) 55%, transparent); transform: translateY(-2px); }
.readnext__title { font-size: var(--step-1); color: var(--text-strong); font-weight: 800; }
.readnext__body { color: var(--text); font-size: var(--step--1); }


/* 20. FOOTER -------------------------------------------------------------- */
.site-footer {
  position: relative;
  margin-top: var(--space-2xl);
  padding-block: var(--space-2xl) var(--space-xl);
  border-top: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
  background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--brand-navy) 45%, transparent));
  font-size: var(--step--1);
}
.site-footer__grid { display: grid; gap: var(--space-xl); }
@media (min-width: 48rem) { .site-footer__grid { grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: var(--space-l); } }
.site-footer__brand { display: grid; gap: var(--space-s); }
.site-footer__brand p { color: var(--text-muted); font-size: 0.8125rem; line-height: 1.55; }
.site-footer__logo { width: 8.5rem; height: auto; }
.site-footer__heading { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-strong); margin-bottom: var(--space-s); }
.footer-nav { display: grid; gap: var(--space-2xs); }
/* discrete targets, not flowing text: keep them thumb-sized */
.footer-nav a { color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: 0.5em; min-height: 2.75rem; }
.footer-nav a:hover { color: var(--accent-strong); text-decoration: underline; }
.footer-nav__icon { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }
.site-footer__legal { margin-top: var(--space-xl); padding-top: var(--space-m); border-top: 1px solid color-mix(in oklab, var(--line) 60%, transparent); display: grid; gap: var(--space-2xs); }
.site-footer__legal p { color: var(--text-muted); font-size: 0.75rem; max-width: none; }


/* 21. MOTION -------------------------------------------------------------- */

/* --- ambient: the room is alive while you read --- */
@keyframes pulse-travel { 0% { stroke-dashoffset: 1000; } 100% { stroke-dashoffset: 0; } }
@keyframes edge-breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.95; } }
@keyframes drift { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(0, -140px, 0); } }
@keyframes court-sweep { 0% { transform: translateX(-30%); } 100% { transform: translateX(130%); } }
@keyframes rim-glow { 0%, 100% { filter: drop-shadow(0 0 8px color-mix(in oklab, var(--brand-orange) 45%, transparent)); } 50% { filter: drop-shadow(0 0 20px color-mix(in oklab, var(--brand-orange) 85%, transparent)); } }

/* Decorative loops only run while the scene is on screen and the tab is
   visible: site.js sets data-live="true" via IntersectionObserver. */
[data-live="true"] .bk-pulse { animation: pulse-travel var(--pulse-dur, 5.5s) var(--ease-in-out) var(--pulse-delay, 0s) infinite; }
[data-live="true"] .glass::after { animation: edge-breathe 7s var(--ease-in-out) infinite; }
[data-live="true"] .net-rim { animation: rim-glow 6s var(--ease-in-out) infinite; }
[data-live="true"] .court-sweep { animation: court-sweep 11s var(--ease-in-out) infinite; }

.court-sweep {
  position: absolute;
  top: 0; bottom: 0;
  width: 24%;
  background: linear-gradient(90deg, transparent,
    color-mix(in oklab, var(--brand-electric-blue) 16%, transparent), transparent);
  pointer-events: none;
  transform: translateX(-30%);
}

/* particles: a handful, drifting through depth */
.motes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.mote {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--brand-gold) 70%, transparent);
  opacity: 0.35;
}
[data-live="true"] .mote { animation: drift var(--mote-dur, 18s) linear var(--mote-delay, 0s) infinite; }

/* --- narrative: sections arrive as the story advances --- */
.reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity var(--t-travel) var(--ease-out), transform var(--t-travel) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }
/* without the script, nothing is ever hidden */
.no-js .reveal, html:not(.js) .reveal { opacity: 1; transform: none; }

/* the count-up on verified static facts */
.counting { font-variant-numeric: tabular-nums; }


/* 22. REDUCED MOTION, FORCED COLOURS, PRINT ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .motes, .court-sweep { display: none; }
  .bk-pulse { stroke-dasharray: none; stroke-dashoffset: 0; opacity: 0.5; }
  .stage__frame { transform: none; }
  .hero::before { background: radial-gradient(38% 38% at 50% 40%,
    color-mix(in oklab, var(--brand-electric-blue) 22%, transparent) 0%,
    color-mix(in oklab, var(--brand-violet) 12%, transparent) 40%, transparent 70%); }
  .net-strand.is-cut { opacity: 0; transform: none; }
}

@media (forced-colors: active) {
  .glass, .card, .callout, .faq__item, .era-chip, .stage-card__shot { border: 1px solid CanvasText; }
  .btn { border: 1px solid ButtonText; }
  .bk-line, .bk-node, .net-strand, .net-rim { stroke: CanvasText; }
  .glass::after, .close__flash, .motes { display: none; }
}

@media print {
  body::before, .motes, .bracket-art, .hero__bracket, .close__flash { display: none; }
  body { background: #fff; color: #111; }
  .site-header, .site-footer, .stage__controls, .rail { display: none; }
  a { color: #111; }
}