/* ===========================================================================
   FONT CONFIGURATION  —  this one file controls every typeface on the site.
   ---------------------------------------------------------------------------
   HOW IT WORKS
     Section 2 defines three variables: --font-display, --font-body,
     --font-mono. The rest of the site's CSS only ever uses these. To change
     a font everywhere, change ONE WORD in section 2.

     Section 1 self-hosts the fonts (the production source). Each @font-face
     downloads its file only when a variable in section 2 actually points at
     it, so there is no cost to a face that nothing references.

   THE FAMILIES
     MySerif        — EB Garamond (upright) + Fraunces (italic), combined under
                      one family name so italic emphasis automatically swaps to
                      Fraunces. Display + body serif.
     Hanken Grotesk — sans, all running text and UI.
     JetBrains Mono — mono, hex codes and number fields.
   =========================================================================== */


/* --- SECTION 1 : LOCAL FONTS (self-hosted — the production source) --------- */

@font-face {
  font-family: 'Fraunces + EB Garamond';
  font-style: normal;
  font-display: swap;
  font-weight: 400 800;            /* EB Garamond variable axis: 400–800 */
  src: url('./eb-garamond-latin-wght-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces + EB Garamond';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;            /* Fraunces variable axis: 100–900 (default 900) */
  src: url('./fraunces-italic-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('./hanken-grotesk-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url('./jetbrains-mono-variable.woff2') format('woff2');
}


/* --- SECTION 2 : THE THREE FONTS  (change a name here — one word) ---------- */

:root {

  /* DISPLAY  — wordmark + headings.   now: EB Garamond / Fraunces italic */
  --font-display: 'Fraunces + EB Garamond', serif;

  /* BODY     — all running text + UI. now: Hanken Grotesk */
  --font-body: 'Hanken Grotesk', sans-serif;

  /* MONO     — hex codes, number fields. now: JetBrains Mono */
  --font-mono: 'JetBrains Mono', monospace;

}