/* ============================================================================
   BOARD 1 — SELF-HOSTED FONTS  (Bricolage Grotesque + Newsreader)
   Real-build font layer. Replaces the Fontshare/Google-Fonts <link> entirely
   (third-party request + CLS violation per the font-swap/self-host lesson).
   Variable woff2 (latin subset, wght 200..800) + metric-matched fallback faces
   so the swap is size-invisible (0.000 CLS target). All woff2 preloaded in HEAD.
   ============================================================================ */

/* ---- Bricolage Grotesque (display) — variable, one file covers 400..700 ---- */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('./assets/fonts/bricolage-grotesque-var.woff2') format('woff2');
}

/* ---- Newsreader (body serif) — variable upright + a static italic ---- */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('./assets/fonts/newsreader-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('./assets/fonts/newsreader-italic.woff2') format('woff2');
}

/* ---- Metric-matched fallbacks: hold the exact line box until the webfont
        loads, so text does not reflow (CLS). Derived from intrinsic metrics. ---- */
@font-face {
  font-family: 'Bricolage Grotesque Fallback';
  src: local('Arial'), local('Helvetica Neue');
  size-adjust: 101.73%;
  ascent-override: 91.41%;
  descent-override: 26.54%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Newsreader Fallback';
  src: local('Georgia'), local('Times New Roman');
  size-adjust: 88.57%;
  ascent-override: 82.99%;
  descent-override: 29.92%;
  line-gap-override: 0%;
}