/* =============================================================
   DESIGN TOKENS

   Restyled after do-as-i-do.com (Malik group), measured rather than
   eyeballed: its stylesheet was fetched and its computed styles read.
   What that page actually does, and what is copied here:

     type      Computer Modern Serif for headings ONLY, weight 400 —
               headings are NOT bold (font-weight: normal overrides the
               UA's 700). A very light neo-grotesque for all body copy at
               weight 200, with bold set to 500, never 700.
     colour    ENTIRELY ACHROMATIC chrome. Eight greys, no accent hue
               anywhere in the stylesheet. Their rule, worth stating:
               colour appears only on content, never on chrome. Our
               figures are colour voxel renders, so the page frame goes
               grey and the only saturated pixels are the results.
     figures   NARROWER than the column and centred (95%), with captions
               narrower again. The width ladder is media > caption.
     detail    Zero letter-spacing declarations. Zero text-transform.
               No fluid type: sizes are identical at every viewport.

   Two deliberate departures, both because our content differs from theirs:

   1. PROSE IS NARROWER THAN THEIR 960px COLUMN. Their body text runs the
      full 960px, which at 16px is ~120 characters a line — well past the
      65–75 that reads comfortably. They get away with it because the page
      is almost wordless (zero tables, zero charts, zero numbers). We carry
      a 200-word abstract, so prose is capped at 720px while media keeps
      the 960px column.
   2. ONE ACCENT SURVIVES, used only inside the generated results chart.
      Their page has no quantitative content at all; ours needs to show
      which bars are ours.

   TWK Lausanne, their body face, is a licensed commercial font. Hanken
   Grotesk is the substitute: a neo-grotesque with a genuine 200 weight,
   from Google Fonts (the one font host an Artifact CSP admits).
   ============================================================= */

@font-face {
  font-family: 'CMU Serif';
  src: url('../assets/fonts/cmu-serif-roman.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Ground. One surface, no tinted bands. */
  --ground:        #FFFFFF;
  --ground-sunk:   #F8F8F8;   /* BibTeX block only */

  /* An achromatic ramp, as measured on the reference page. */
  --text:          #333333;   /* 12.63:1 on white */
  /* Secondary text. The reference page uses #888888 here and we did too, until it was
     measured: #888888 is 3.54:1 on white, which FAILS WCAG AA for 16px text, and it was
     carrying every figure caption, the viewer legend and the footer. Copying a value
     from a reference page does not import its accessibility -- that page is nearly
     wordless, so its grey carries almost no reading load, while ours carries all the
     explanatory prose. #737373 is 4.74:1, the same achromatic ramp, still plainly
     secondary against the #333 body. tools/check_page.py now measures this on the
     rendered page, because this is the third restyle to regress it. */
  --muted:         #737373;   /* captions, authors, affiliations: 4.74:1 on white */
  --faint:         #737373;   /* disabled labels: same ramp, same 4.74:1 */
  --rule:          #EEEEEE;   /* section hairlines, table borders */
  --rule-strong:   #CCCCCC;   /* button borders, superscripts */

  /* Links are body-coloured with a hairline underline, not a hue. */
  --accent:        #333333;
  /* 4.74:1. This was #888888 = 3.54:1, which failed AA on hover AND on focus -- the
     skip link is the first tab stop, so a keyboard user met the failure immediately.
     The fade now lives in the UNDERLINE, which is decoration and only owes 3:1. */
  --accent-hover:  #737373;
  --underline:     #888888;

  /* The only chromatic values on the page, and only inside content. */
  --chart-ours:    #B3261E;   /* red, per request; was #B85C00 = hue 30, orange */
  --pos:           #1F7A4D;
  --neg:           #A33A3A;

  /* Type: a serif for headings, a light grotesque for everything else. */
  --ff-display: 'CMU Serif', 'Latin Modern Roman', Georgia, 'Times New Roman', serif;
  --ff-body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI',
             Helvetica, Arial, sans-serif;
  --ff-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Fixed sizes. The reference page has no fluid type at all: 48px stays
     48px at 390px wide. We keep one h1 step-down, since our title is long. */
  --fs-micro:   0.875rem;   /* 14px   footer, bibtex */
  --fs-small:   1rem;       /* 16px   captions and notes are FULL SIZE there */
  --fs-body:    1rem;       /* 16px */
  --fs-affil:   1rem;       /* 16px */
  --fs-venue:   1rem;       /* 16px */
  --fs-author:  1rem;       /* 16px */
  --fs-h3:      1.25rem;    /* 20px */
  --fs-h2:      1.7rem;     /* 27.2px */
  --fs-h1:      3rem;       /* 48px */

  /* Measure. Media takes the column; prose stays readable inside it. */
  --w-prose:   720px;
  --w-media:   960px;
  --w-page:   1008px;
  --fig-width:  95%;        /* hero figures sit inset from the column */

  /* Spacing, on the reference page's 8px scale. */
  --s-1:  4px;  --s-2:  8px;  --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
}