/* ===========================================================================
   FONT CONFIGURATION  —  this one file controls every typeface on the site.
   ---------------------------------------------------------------------------
   HOW IT WORKS
     Section 3 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 3.

     Section 2 self-hosts the current fonts (the production source).
     Section 1 is a commented-out Google loader, for fast exploration.

   TO EXPLORE A NEW FONT
     1. Switch on the Google loader: in section 1, delete the line that is
        just "/*" and the line that is just "*​/" around the @import.
     2. Make sure the family is listed in that @import URL. If not, add
        &family=Its+Name:wght@400..700  to the URL (one-time edit).
     3. In section 3, change the relevant --font-* value to that family name.
     That's the loop: after step 1, every new try is one word in section 3.

   You do NOT need to touch section 2 while exploring. An @font-face rule
   only downloads its file when something actually uses that family, so the
   local fonts sit dormant at zero cost until a variable points back at them.

   WHY THE GOOGLE LOADER IS AT THE TOP, not in a block beside each font:
   CSS requires every @import to come before all other rules in the file, so
   the loader cannot be split per-font. The per-font choice lives in section
   3 instead, which is just as quick to edit.
   =========================================================================== */


/* --- SECTION 1 : GOOGLE LOADER (exploration only — OFF by default) ----------
   To switch ON, delete the two lone comment-marker lines wrapping the @import.
   To audition another family, add &family=Name:wght@400..700 to the URL.   */


/* @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400..700;1,400..700&family=Hanken+Grotesk:wght@400..900&family=JetBrains+Mono:wght@400..700&family=Newsreader:ital,wght@0,400..700;1,400..700&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Fraunces:ital,wght@0,400..700;1,400..700&family=Hanken+Grotesk:wght@400..900&family=JetBrains+Mono:wght@400..700&family=Newsreader:ital,wght@0,400..700;1,400..700&display=swap'); */


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

@font-face {
  font-family: 'MySerif';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('./EBGaramond-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'MySerif';
  font-style: italic;
  font-display: swap;
  font-weight: 100 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 3 : THE THREE FONTS  (change a name here — one word) ---------- */

:root {

  /* DISPLAY  — wordmark + headings.   now: Fraunces */
  --font-display: 'MySerif', 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;

}