/* ==========================================================================
   Self-hosted Roboto — two files.
   Google Fonts now ships Roboto's upright styles as a single variable font
   (one file spans weights 100-900); we download it once at build time into
   src/fonts/ and serve it from our own origin. No requests to
   fonts.googleapis.com or fonts.gstatic.com happen at runtime — this is the
   whole point of self-hosting (see spec §1.5): no third-party origin, no
   CDN round-trip, no consent/tracking surface, and we control
   font-display ourselves.

   The "normal" (upright) file IS variable: font-weight: 300 700 on that
   @font-face rule is a *range*, not a single number — it tells the browser
   "this one file can render any weight in this range," and the browser
   picks the exact instance (300/400/500/700) our CSS asks for per element,
   same as if these were 4 separate static files.

   The "italic" file is different: Google serves italic Roboto as a plain
   static weight-400 file (used only for the case-study throughline, which
   is always Roboto 400 italic — see spec §1.5), so its @font-face declares
   a single font-weight: 400, not a range, and skips the
   "woff2-variations" format hint that only applies to true variable fonts.
   ========================================================================== */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/roboto-variable-normal.woff2") format("woff2-variations"),
       url("/fonts/roboto-variable-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/roboto-variable-italic.woff2") format("woff2");
}

/* ------------------------------------------------------------------------
   Metric-matched fallback face (zero-CLS strategy, spec §1.5 / AC#4).
   "Roboto-fallback" is not a real font file — it's `local()`-only, pointing
   at a system font already installed on the visitor's machine (Arial on
   nearly every platform), with size-adjust/metric overrides tuned so its
   line boxes match Roboto closely. Because --font-sans lists
   "Roboto-fallback" right after "Roboto", the browser paints text in this
   fallback the instant CSS loads, then swaps to real Roboto when the woff2
   arrives (font-display: swap) — and because the two faces occupy almost
   the same vertical space, that swap causes no visible reflow.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: "Roboto-fallback";
  src: local("Arial");
  ascent-override: 92.5%;
  descent-override: 24.3%;
  line-gap-override: 0%;
  size-adjust: 100.06%;
}