/* Tokens, reset, and base typography — the single source of truth for color,
   type, and layout across every page.

   Font note: this replaces OS-only stacks. The previous values were
   Impact / Avenir Next / SF Mono, none of which exist on Windows or Android,
   so headlines and body copy silently fell back to Arial or Helvetica
   depending on the device. Anton is the closest webfont to Impact's heavy
   condensed mass; Instrument Sans stands in for Avenir Next and is already
   used across the Dr. Sean Reid site family.

   Anton ships a single weight (400), so --font-display-weight is a token
   rather than a hardcoded 900. Asking a browser for 900 on a one-weight font
   gets you synthesized faux bold, which muddies the heaviest letters.

   ---------------------------------------------------------------------------
   TYPE AND SPACE SCALE

   The pages previously carried 17-22 distinct font sizes each, roughly half of
   them below 12px (floor was 8px), with no relationship between them. This
   replaces that with two short scales.

   Text steps are fixed px because they track reading size, not viewport.
   11px is the hard floor and is reserved for tracked uppercase labels, which
   are read as texture, not prose. Anything a visitor actually reads sits at
   14px or above.

   Display steps are fluid clamps because they track viewport. Note the two
   display line-heights: Anton is uppercase and condensed, so it holds a tight
   0.92; a mixed-case serif needs more room and uses 1.04. Never give a
   mixed-case face the Anton value — descenders will collide across lines.

   editorial.css mirrors these exact numbers under the same names, because the
   two stylesheets cannot share a file. Change one, change the other. */

:root {
  --bg: oklch(0.97 0.008 240);
  --surface: oklch(0.18 0.055 255);
  --fg: oklch(0.18 0.05 255);
  --muted: oklch(0.48 0.035 250);
  --border: oklch(0.78 0.02 245);
  --accent: oklch(0.64 0.205 255);
  --navy: var(--surface);
  --navy-deep: oklch(0.13 0.05 255);
  --paper: var(--bg);
  --paper-muted: oklch(0.93 0.014 240);
  --ink: var(--fg);
  --ink-muted: var(--muted);
  --white: oklch(0.99 0.004 240);
  --blue: var(--accent);

  /* The electric accent is a signal on dark navy, where it is safe as text. On the
     light surfaces it measures ~3.2:1 on paper and ~2.8:1 on the muted band, both
     under the 4.5:1 AA threshold for small text. Light surfaces use this deeper
     blue instead: 5.2:1 on paper, 4.6:1 on the muted band. */
  --blue-ink: oklch(0.52 0.2 258);
  --line: var(--border);
  --line-dark: oklch(0.39 0.05 255);

  /* The one warm signal in the palette.

     This formalises the amber that was already in use on .site-footer__todo
     rather than inventing a new colour, because the Sports page needs a mark
     that means "this line is the problem" against the blue that means "this is
     the fix". Used for the demand stroke on the capacity chart and nothing
     else. It is a signal, not a second accent: never use it for text, never
     for a button. */
  --warn: oklch(0.68 0.15 58);

  --font-display: "Anton", Impact, "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-display-weight: 400;
  --font-body: "Instrument Sans", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  /* The accent layer.

     The editorial system carried a handwritten voice — "Same Trails, Stronger
     Days.", "The problem comes first. The tool comes second." — set in Caveat.
     Those are content, not ornament, so they came across with the pages rather
     than being dropped. Caveat is the one face in this system that is neither
     Anton nor Instrument Sans, and it is used for asides only, never for a
     heading, a label, or anything a visitor has to read to act. See .hand-note
     in shell.css. */
  --font-hand: "Caveat", "Bradley Hand", cursive;

  /* Text scale — fixed, reading-size steps. */
  --fs-micro: 11px;   /* tracked uppercase labels ONLY. Hard floor. */
  --fs-label: 12px;   /* nav, buttons, footer column titles, eyebrows */
  --fs-meta: 13px;    /* cites, captions, footnotes, helper text */
  --fs-small: 14px;   /* secondary body, list item bodies */
  --fs-body: 16px;    /* body copy */
  --fs-lead: 17px;    /* deks, hero descriptions, lead paragraphs */
  --fs-h4: 19px;
  --fs-h3: 22px;
  /* List index numerals (01/02/03). Decorates a label, so it must stay well
     clear of the label size without doubling it. */
  --fs-numeral: 28px;

  /* Display scale — fluid, viewport-tracking steps. */
  --fs-display-sm: clamp(26px, 2.8vw, 34px);  /* card and list labels */
  --fs-display-md: clamp(34px, 4.2vw, 52px);  /* sub-section headings */
  --fs-display-lg: clamp(44px, 5.4vw, 76px);  /* section h2 */
  --fs-display-xl: clamp(50px, 6.8vw, 104px); /* page h1 */

  /* Line heights. */
  --lh-display-sans: 0.92;  /* Anton — uppercase, condensed */
  --lh-display-serif: 1.04; /* any mixed-case display face */
  --lh-tight: 1.18;         /* h3 / h4 */
  --lh-snug: 1.35;          /* labels that may wrap */
  --lh-body: 1.6;
  --lh-loose: 1.7;

  /* Letter spacing. */
  --ls-display: -0.01em;    /* was -0.025em; that crushed Anton's counters */
  --ls-label: 0.12em;

  /* Measure caps, in ch so they track the local font size. */
  --measure-tight: 34ch;  /* pull quotes, card copy */
  --measure-body: 62ch;   /* running prose */
  --measure-wide: 72ch;   /* legal small print */

  /* Spacing scale — 4px base. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 40px;
  --sp-8: 56px;
  --sp-9: 72px;
  --sp-10: 96px;

  /* One vertical rhythm for every page band. Replaces the old per-section
     hand-tuning (55/58, 16, 17/18) that made the lower half of the homepage
     read as a cramped slab. */
  --band: clamp(56px, 6.5vw, 96px);
  --band-tight: clamp(40px, 4.5vw, 64px);

  --max-width: 1280px;
  --gutter: clamp(20px, 5vw, 72px);
}

* { box-sizing: border-box; }

html {
  background: var(--paper);
  color: var(--ink);
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

body, a, button { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { border: 0; font: inherit; }
img { display: block; max-width: 100%; }
::selection { background: var(--blue); color: var(--white); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 5px; }

h1, h2, h3, p { margin-top: 0; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  text-transform: uppercase;
}

/* h3 is grouped with the display faces but NOT given their leading. Anton is
   uppercase and condensed and holds 0.92; h3 is used for card and step labels
   that run to two or three lines, so it takes the tight body-adjacent value.
   Leaving h3 out of a line-height rule entirely is the bug this file is fixing
   elsewhere — it would inherit body's 1.6 and read as loose paragraphs. */
h1, h2 { letter-spacing: var(--ls-display); line-height: var(--lh-display-sans); }
h3 { line-height: var(--lh-tight); }

@media (max-width: 480px) {
  :root { --gutter: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}