/* ============================================================
   SELF-HOSTED FONTS — replaces the Google Fonts <link>.
   Same-origin, so CSP stays 'self' and no request goes to Google.

   Two jobs here:
   1. @font-face for the real fonts (Space Grotesk, IBM Plex Mono).
   2. A metric-matched *fallback* face per family, so the text that
      paints before the woff2 arrives occupies the exact same space
      as the real font — making the swap shift ~0 (kills the CLS).

   The fallback only helps if it's in the font stack. In style.css,
   change your stacks to insert the fallback BEFORE the generic:
     font-family: "Space Grotesk", "Space Grotesk Fallback", sans-serif;
     font-family: "IBM Plex Mono", "IBM Plex Mono Fallback", monospace;

   FILES: drop the two variable woff2s so they serve at the paths below
   (project /fonts/ dir). Easiest source is fontsource:
     @fontsource-variable/space-grotesk  → files/…-wght-normal.woff2
     @fontsource-variable/ibm-plex-mono  (or static weights if no variable)
   Rename to match, or edit the url()/preload paths to match your names.

   METRICS: the size-adjust / *-override values below are NEUTRAL
   placeholders — safe to ship (fallback behaves like a normal system
   font, no harm, but also no CLS benefit yet). Generate the real numbers
   with `fontaine` or https://screenspan.net/fallback (compare each real
   font against the local fallback named below) and paste them in. THAT
   is the step that removes the residual shift.
   ============================================================ */

/* ---- real fonts (variable) ---- */
@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
/* If you grabbed STATIC weights instead of a variable file, delete the
   block above for that family and declare one @font-face per weight:
   @font-face { font-family:"IBM Plex Mono"; font-weight:400;
     src:url("/fonts/ibm-plex-mono-400.woff2") format("woff2");
     font-display:swap; }  … repeat for 500, 600. */

/* ---- metric-matched fallbacks (fill in generated numbers) ---- */
@font-face {
  font-family: "Space Grotesk Fallback";
  src: local("Arial");
  size-adjust: 100%;          /* TODO generate — placeholder no-op */
  ascent-override: normal;    /* TODO generate */
  descent-override: normal;   /* TODO generate */
  line-gap-override: normal;  /* TODO generate */
}

@font-face {
  font-family: "IBM Plex Mono Fallback";
  src: local("Courier New");
  size-adjust: 100%;          /* TODO generate — placeholder no-op */
  ascent-override: normal;    /* TODO generate */
  descent-override: normal;   /* TODO generate */
  line-gap-override: normal;  /* TODO generate */
}