/* Self-hosted webfonts.
 *
 * Build this file by hand — it is not Tailwind output. Copy it to
 * assets/css/fonts.css and put the woff2 files in assets/fonts/.
 *
 * Subset to latin: the site is Dutch-only, so latin-ext, cyrillic and greek are
 * dead weight. font-display: swap means text paints in the fallback immediately
 * and reflows once — with the metric-adjusted fallbacks below, that reflow is
 * small enough not to register as layout shift.
 *
 * Only the two above-fold faces are preloaded (see inc/performance.php):
 * Space Grotesk 600 for the hero heading, Inter 300 for the lead.
 */

@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Metric-adjusted fallbacks. These keep the pre-swap paint close enough in
   size that the swap does not shift layout — the cheapest CLS win available. */
@font-face {
  font-family: "Space Grotesk Fallback";
  src: local("Arial");
  size-adjust: 97%;
  ascent-override: 96%;
  descent-override: 24%;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 100%;
  ascent-override: 90%;
  descent-override: 22%;
}