/* The two faces, self-hosted.
 *
 * They were declared for three phases and never loaded — the page had been
 * judged this whole time against Iowan Old Style standing in for Instrument
 * Serif, which is a different typeface with a different colour on the page.
 * Self-hosted rather than from Google's CDN because verify.mjs forbids any
 * off-origin request at runtime, and that rule is worth more than the
 * convenience: a landing page that phones a third party on load is a landing
 * page with a dependency and a privacy note.
 *
 * SIL Open Font License 1.1, both. Copies are in vendor/fonts/.
 * `swap` on purpose: the fallback stack below is metrically close enough that
 * the swap is not a jolt, and blocking the hero on a font is worse. */
@font-face {
  font-family: 'Instrument Serif';
  src: url('../../vendor/fonts/instrument-serif-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../../vendor/fonts/geist-sans-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../../vendor/fonts/geist-sans-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* The type scale. One source of truth.
 *
 * Nothing in this project sets a font-size outside this file. If a responsive
 * rule needs different type, it changes which token an element uses — it never
 * writes a pixel value. Without that discipline "make the hero bigger" has
 * nowhere to land, and it becomes a patch to one selector fighting three
 * overrides that touch the same element.
 *
 * Every step is a clamp, so there are no breakpoint jumps to maintain. */
:root {
  /* The minimums came down at round 6. They were set against the desktop end of
   * the ramp and never checked at 375, where a 43 px hero ran four lines deep
   * and a 17 px lede ran six — the phone was reading two paragraphs of display
   * type before it reached anything it could act on. The maximums are unchanged,
   * so nothing above 900 px moved a pixel. */
  --fs-display-xl: clamp(2.15rem, 6vw, 5.75rem);  /* the hero, and nothing else */
  --fs-display-lg: clamp(2rem, 4.7vw, 4.5rem);
  --fs-display-md: clamp(1.65rem, 3.4vw, 3.3rem);
  --fs-display-sm: clamp(1.5rem, 2.7vw, 2.6rem);
  --fs-h-sub:      clamp(1.05rem, 1.5vw, 1.5rem);
  --fs-lead:       clamp(0.98rem, 1.2vw, 1.25rem);
  --fs-body-lg:    clamp(.95rem, 1.06vw, 1.1rem);
  --fs-body-sm:    clamp(.82rem, .9vw, .95rem);
  --fs-micro:      clamp(.7rem, .78vw, .8rem);

  /* Two faces, two jobs. The display face does display work and nothing else.
   * The webfonts themselves arrive when the scene moves onto the page; the
   * scale, the hierarchy and the grid are what this phase is gating on. */
  --font-display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --font-text: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Contrast is carried by the text's own luminance, weight and tracking.
   * Nothing is ever placed behind it — no scrim, no blur, no plate. Final
   * values are tuned after Phase 4's lighting and grade, not against grey. */
  --ink: #f4f6f8;
  --ink-soft: #ced5dd;
  --ink-quiet: #9aa5b1;

  /* The accent is the sun, at one remove — the same warm yellow the star puts
   * on the station's lit faces. It is used on figures, indices, meters and the
   * active state, and nowhere in running text. */
  --accent: #e8b884;
  --accent-dim: #a8814f;
  --rule: rgba(206, 213, 221, 0.22);
  --rule-soft: rgba(206, 213, 221, 0.12);

  /* --- the instrument layer ------------------------------------------------
   * The page is read off the inside of a station, so its panels are drawn the
   * way a station's panels would be: chamfered corners, a hairline frame with
   * corner brackets, tick rulers, segmented meters, tabular figures.
   *
   * THIS REVISES THE "NO PLATE" RULE, DELIBERATELY AND ON THE DESIGNER'S CALL.
   * Panels now carry tinted glass with a blur behind them. The rule it replaces
   * existed to stop a grey rectangle being dropped behind a paragraph to paper
   * over a contrast failure, and that is still forbidden — a panel is a drawn
   * object with a frame, a header and a reason to exist, not a scrim. Running
   * text outside a panel still gets no backdrop of any kind. */
  --glass: rgba(6, 9, 14, 0.72);
  --glass-quiet: rgba(6, 9, 14, 0.52);
  /* The phone's surface is heavier than the desktop panel's, because what it has
   * to sit over is heavier: 0.72 over a full-frame Saturn measured 4.6:1 and
   * 0.86 left beat 03's lede at 4.24:1 with a ceiling lamp behind it — both AA
   * by a hair or under. 0.92 puts every block on the phone past 6:1. */
  --glass-solid: rgba(5, 8, 12, 0.92);
  /* The phone surface. Only the two beats whose frame measured unsafe carry
     one, and it is deliberately readable-through — nadir's range for the
     same problem, not the 0.92 wall this replaced. */
  /* Two phone surfaces, because two different things sit behind them.
     --glass-phone is for type that can be brightened: the bento tiles and beat
     03's header, all near-white, with headroom to spare at 0.55.
     --glass-phone-lit is for the two places where the type is --accent and the
     accent CANNOT be brightened — it is the sun, and its luminance is the
     palette. Beat 03's record timestamps and beat 04's section head both set
     figures in it, so their surface carries the contrast instead. */
  --glass-phone: rgba(5, 8, 12, 0.55);
  --glass-phone-lit: rgba(5, 8, 12, 0.64);
  --hud-line: rgba(206, 213, 221, 0.30);
  --hud-line-soft: rgba(206, 213, 221, 0.14);
  --hud-glow: rgba(232, 184, 132, 0.55);
  --notch: clamp(9px, 1vw, 15px);

  /* The grid. Declared once; every element lands on it. */
  --grid-columns: 12;
  --grid-gap: clamp(1rem, 1.6vw, 1.75rem);
  --grid-margin: clamp(1.25rem, 5vw, 5.5rem);
  --measure: 34ch;
}