/* Self-hosted variable fonts — 2026 design system.
   One file per family per style. Variable axis covers 100..900 weight
   so we ship 4 woff2 instead of ~14 static cuts. Latin subset only —
   our content is en-US + en-GB; Arabic loads from Google when dir=rtl.
   font-display: swap — the editorial serif is brand-load-bearing, so
   we accept the brief FOUT to guarantee Fraunces eventually paints.   */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/fraunces-latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/fraunces-latin-wght-italic.woff2") format("woff2-variations");
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/instrument-sans-latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/instrument-sans-latin-wght-italic.woff2") format("woff2-variations");
}

/* Metric-matched fallbacks — fixes the CLS from font swap (measured 2026-07-13:
   real-user CrUX CLS 0.16, "needs improvement"; root cause traced to text
   reflow when Fraunces/Instrument Sans swap in over the system fallback).
   size-adjust scales the fallback's glyph widths to match the real font's
   average character width (measured via canvas.measureText: Georgia renders
   ~4.9% narrower than Fraunces; Arial ~1.5% narrower than Instrument Sans),
   so the page occupies the same footprint before AND after the swap — no
   reflow. Reference these names, not the raw system fonts, in the
   --font-display / --font-body stacks in global.css. */
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 105.1%;
}
@font-face {
  font-family: "Instrument Sans Fallback";
  src: local("Arial"), local("Helvetica");
  size-adjust: 101.5%;
}