/* ---------------------------------------------------------------------------
   BEFORE-only "broken" web-font strategy — the CLS/FOIT anti-pattern.

   This stylesheet is pulled in by /before via a plain, render-blocking
   <link rel="stylesheet" href="/legacy/fonts.css">. Everything in here is
   deliberately WRONG and exists only to reproduce the classic font problems
   that /after fixes (see site/lib/fonts.ts + docs/07 Phase 1/3):

     1. @font-face WITHOUT `font-display` → the browser blocks text painting
        while the font downloads (Flash Of Invisible Text) and, when the font
        finally swaps in at a different metric, reflows the paragraphs (CLS).
     2. The font URL is remote/uncached and heavy, so on a throttled 4G profile
        it arrives late — maximising both the invisible-text window and the
        swap-induced shift.
     3. It is loaded as a render-blocking <link> instead of being self-hosted
        and inlined by next/font — so it also delays first paint (LCP).

   The /after route ships NO web font at all: it uses the system-font stack
   (.font-system in globals.css), which is zero bytes, zero FOIT and zero
   font-driven CLS. To ship a real brand font the RIGHT way, self-host it with
   next/font (font-display: swap + preload + size-adjusted fallback).
--------------------------------------------------------------------------- */

@font-face {
  font-family: 'LegacySlabDisplay';
  /* Intentionally no `font-display: swap;` here — that omission IS the bug. */
  src:
    url('/legacy/legacy-slab-display.woff2') format('woff2'),
    url('/legacy/legacy-slab-display.woff') format('woff');
  font-weight: 100 900;
  font-style: normal;
}

/* /before opts every element into the blocking font by wrapping its tree in
   .legacy-font. The metric mismatch vs the serif fallback is what shifts. */
.legacy-font,
.legacy-font h1,
.legacy-font h2,
.legacy-font h3,
.legacy-font p,
.legacy-font a,
.legacy-font button {
  font-family: 'LegacySlabDisplay', 'Times New Roman', Georgia, serif;
}