/* ─────────────────────────────────────────────────────────────────────────────
   Traceway · self-hosted type
   ─────────────────────────────────────────────────────────────────────────────
   Replaces the remote Google Fonts <link> that every page carried (TRW-594).

   WHY, per the design system ("Type is self-hosted"):
   a remote @import serialises CSS → CSS → font, so type is three round-trips
   deep before a glyph paints — and print and email surfaces silently fall back
   to system type, which is invisible until someone prints the page. One local
   request per family covers every weight, because these are VARIABLE files.

   Three families, five files, 408KB total:
     Inter          — UI and body           400–900 via `font-variation-settings`
     JetBrains Mono — eyebrows, labels, code, upright + italic
     Newsreader     — the serif italic `.tw-clause`, which is how a headline
                      carries emphasis now that the gradient clause is retired
                      (2026-08-07). Italic is a real cut, not a synthesised slant.

   `font-display: swap` is deliberate: text paints immediately in the fallback
   and reflows once. The alternative hides the headline until the font lands.

   ⚠️ LICENCE — all three are SIL Open Font License 1.1, which permits hosting
   them ourselves. See fonts/OFL.txt. Do not swap in a font without checking its
   licence allows redistribution; that is the one way this file becomes a legal
   problem rather than a performance win.
   ───────────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-var.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-var.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: italic;
  font-weight: 100 800;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-var-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/newsreader-var.woff2') format('woff2');
}

@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/newsreader-var-italic.woff2') format('woff2');
}

/* The serif italic clause — how a headline carries emphasis. One per page, on
   the words that carry the argument ("lose the thread"), never on a phrase that
   is doing no work. Typographic rather than chromatic, so it survives
   greyscale, print and email; the retired text gradient did not. */
.tw-clause {
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.005em;
}