/*  TYPE SCALE — one set of text styles for the whole site
 *  ------------------------------------------------------------------
 *  Ernest, 2026-10-13: "make some guidelines and variables regarding
 *  typography and apply it across the website." Ten styles, each a `font`
 *  shorthand, so a rule uses one line: `font: var(--heading-m);`.
 *
 *    Body*     Newsreader, what you read
 *    Heading*  Instrument Sans 600, sentence case, tracked -.02em
 *              (headings set letter-spacing themselves: `font` can't)
 *
 *  Every size runs from its phone value at 390px to its desktop value at
 *  1440px and holds outside that range, so there are no per-breakpoint
 *  overrides. --fs-* are the bare sizes, for the few places that keep
 *  their own face (captions in Instrument Sans, the pull quote in italic).
 *
 *  Line heights sit on the 8px grid at every width (Ernest, 2026-10-13:
 *  font sizes needn't, line heights absolutely must): each is the size
 *  times a ratio, rounded to the nearest 8px by CSS round(). --lh-* are
 *  the bare line heights, for rules that set their own face.
 *
 *    style        size phone → desktop   line height phone → desktop
 *    body-xs        14                     24
 *    body-s         17 → 18                24
 *    body-m         19 → 20                32
 *    body-l         21 → 26                32 → 40
 *    heading-xs     15 → 17                24
 *    heading-s      20 → 24                24 → 32
 *    heading-m      26 → 32                32 → 40
 *    heading-l      30 → 40                32 → 48
 *    heading-xl     36 → 56                40 → 64
 *    heading-xxl    40 → 80                40 → 88
 *
 *  Body sizes went up a step on phones (Ernest, 2026-10-14: body text read
 *  too small in Newsreader at 18px); the line heights stayed on the grid.
 *
 *  Use: body-xs captions and the facts card; body-s summaries; body-m case
 *  text; body-l lede and homepage intro; heading-xs eyebrows, meta lines,
 *  nav, fact labels; heading-s small tiles; heading-m h2 in a case, Work
 *  rows; heading-l homepage case titles, pull quote; heading-xl next case;
 *  heading-xxl case and page titles.
 */

:root {
  --serif: 'Newsreader', Georgia, serif;
  --head:  'Instrument Sans', system-ui, sans-serif;

  /* min + (max - min) * (100vw - 390px) / 1050 */
  --fs-body-xs:     14px;
  --fs-body-s:      clamp(17px, calc(17px +  1 * (100vw - 390px) / 1050), 18px);
  --fs-body-m:      clamp(19px, calc(19px +  1 * (100vw - 390px) / 1050), 20px);
  --fs-body-l:      clamp(21px, calc(21px +  5 * (100vw - 390px) / 1050), 26px);
  --fs-heading-xs:  clamp(15px, calc(15px +  2 * (100vw - 390px) / 1050), 17px);
  --fs-heading-s:   clamp(20px, calc(20px +  4 * (100vw - 390px) / 1050), 24px);
  --fs-heading-m:   clamp(26px, calc(26px +  6 * (100vw - 390px) / 1050), 32px);
  --fs-heading-l:   clamp(30px, calc(30px + 10 * (100vw - 390px) / 1050), 40px);
  --fs-heading-xl:  clamp(36px, calc(36px + 20 * (100vw - 390px) / 1050), 56px);
  --fs-heading-xxl: clamp(40px, calc(40px + 40 * (100vw - 390px) / 1050), 80px);

  --lh-body-xs:     round(calc(var(--fs-body-xs) * 1.5), 8px);
  --lh-body-s:      round(calc(var(--fs-body-s) * 1.45), 8px);
  --lh-body-m:      round(calc(var(--fs-body-m) * 1.6), 8px);
  --lh-body-l:      round(calc(var(--fs-body-l) * 1.45), 8px);
  --lh-heading-xs:  round(calc(var(--fs-heading-xs) * 1.4), 8px);
  --lh-heading-s:   round(calc(var(--fs-heading-s) * 1.2), 8px);
  --lh-heading-m:   round(calc(var(--fs-heading-m) * 1.15), 8px);
  --lh-heading-l:   round(calc(var(--fs-heading-l) * 1.1), 8px);
  --lh-heading-xl:  round(calc(var(--fs-heading-xl) * 1.1), 8px);
  --lh-heading-xxl: round(calc(var(--fs-heading-xxl) * 1.05), 8px);

  --body-xs:     400 var(--fs-body-xs)/var(--lh-body-xs) var(--serif);
  --body-s:      400 var(--fs-body-s)/var(--lh-body-s) var(--serif);
  --body-m:      400 var(--fs-body-m)/var(--lh-body-m) var(--serif);
  --body-l:      400 var(--fs-body-l)/var(--lh-body-l) var(--serif);
  --heading-xs:  600 var(--fs-heading-xs)/var(--lh-heading-xs) var(--head);
  --heading-s:   600 var(--fs-heading-s)/var(--lh-heading-s) var(--head);
  --heading-m:   600 var(--fs-heading-m)/var(--lh-heading-m) var(--head);
  --heading-l:   600 var(--fs-heading-l)/var(--lh-heading-l) var(--head);
  --heading-xl:  600 var(--fs-heading-xl)/var(--lh-heading-xl) var(--head);
  --heading-xxl: 600 var(--fs-heading-xxl)/var(--lh-heading-xxl) var(--head);


  --tracking-head: -.02em;
}