/* Canonical shell header scope for article pages (library guides and blog
   articles).

   The mock-site family ("/", "/about/", "/articles/", "/sports-injuries/",
   "/book-audit/") runs on shared/mock-site/tokens.css + shell.css. Article
   pages run on the magazine reading chain (shared/tokens.css + site.css +
   library/article.css + shared/magazine.css), whose display and body faces are
   Fraunces and Archivo.

   Loading tokens.css whole would rewrite the article's headings to Anton and
   uppercase them, so this file mirrors the :root block of
   shared/mock-site/tokens.css under .site-header instead. Custom properties
   inherit, so every element inside the header resolves the same values it
   would on the mock pages, while the reading surface keeps its own tokens.

   .site-header also takes font-family explicitly: the header chrome inherits
   the mock body face (Instrument Sans), but the article body would otherwise
   hand the nav and the booking button the reading face instead.

   Mirror of shared/mock-site/tokens.css :root plus its 480px --gutter
   override. Regenerate those values when the mock tokens change; keep the two
   in step.

   Loaded by article pages after shared/mock-site/shell.css. */

.site-header {
  --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);

  /* ---------- Work With Me light system ----------

     Owner direction (2026-10-06): the Work With Me page's light treatment is
     the theme for the whole mock-site family. Every page that links this file
     renders on light surfaces now, so the light palette is defined here once
     and the shell, the home bands, and the interior bands all read from it.

     --wm-blue is the display accent, safe at heading size on white; it is the
     same #0061fd the Work With Me page uses. --wm-blue-ink is the readable
     blue for small text and mirrors --blue-ink. --wm-wash is the white film
     that keeps a photograph light enough to carry ink type over it, and
     --wm-panel is the pale tint the muted bands sit on. */
  --wm-blue: #0061fd;
  --wm-blue-deep: #0049d6;
  --wm-blue-ink: #0056e2;
  --wm-ink: #0b1220;
  --wm-navy: #00132c;
  --wm-gray: #4c5567;
  --wm-gray-soft: #6d7480;
  --wm-line: oklch(0.9 0.008 245);
  --wm-wash: oklch(1 0 0 / 0.9);
  --wm-panel: oklch(0.965 0.012 248);

  --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.

     Density revision (2026-10-06): the top of each clamp came down so a
     desktop h2 is 62px instead of 76px and the page h1 tops out at 84px. A
     76px section heading and a 104px h1 pushed a band past a full screen and
     read as "zoomed in". Minimums moved with the tops so phones gain width
     too. Reading sizes (body/lead/small) are unchanged. */
  --fs-display-sm: clamp(24px, 2.5vw, 30px);  /* card and list labels */
  --fs-display-md: clamp(30px, 3.6vw, 44px);  /* sub-section headings */
  --fs-display-lg: clamp(38px, 4.6vw, 62px);  /* section h2 */
  --fs-display-xl: clamp(44px, 5.8vw, 84px);  /* 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(48px, 5vw, 72px);
  --band-tight: clamp(34px, 3.8vw, 52px);

  --max-width: 1280px;
  --gutter: clamp(20px, 5vw, 72px);
  /* The header carries the mock body face, size, and leading; article pages do
     not. Without the explicit font-size the header would inherit the reading
     surface's base size (e.g. /start-here/ runs at 17px, the mock shell at
     16px), which shifts the inherited line box even though child labels set
     their own sizes. */
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* Page-reset containment for the header subtree. Article pages carry legacy
   element resets from their own inline style blocks (an
   "a { color: var(--navy); text-decoration: underline }" or a
   "body { line-height: 1.75 }"). Without these, the nav would pick up the
   page link colour and underlines, and the header would measure taller than
   the same header on "/". */
.site-header .wordmark { color: var(--wm-ink); }

/* Anchors only. .menu-toggle is a button and must keep shell.css's mono face. */
.site-header a {
  font-family: inherit;
  text-decoration: none;
}

/* tokens.css resets the UA button border; the article chain does not, so the
   menu button would otherwise draw the browser's default outset box. */
.site-header button { border: 0; }

/* Mirror of the tokens.css 480px override, scoped to the header. */
@media (max-width: 480px) {
  .site-header { --gutter: 18px; }
}