/* ==========================================================================
   assets/en/fonts.css — optional self-hosted display face.
                                            (EraNorth Design System v2.0)

   ---------------------------------------------------------------------------
   THIS FILE WORKS WHETHER OR NOT THE FONT FILE EXISTS
   ---------------------------------------------------------------------------
   You asked for a self-hosted variable serif. I cannot generate a .woff2
   binary, so this file is the complete plumbing and you supply one file.

   If `eranorth-serif.woff2` is NOT present:
     - the @font-face simply fails to load
     - `--font-display` in tokens.css falls through to Georgia
     - the site renders exactly as it does today
     - NOTHING breaks and nothing shifts

   So it is safe to deploy this file before you have chosen a font.

   ---------------------------------------------------------------------------
   TO INSTALL A FONT
   ---------------------------------------------------------------------------
   1. Pick a variable serif with a licence that permits self-hosting.
      Open-source options that suit a professional/editorial tone:

        Source Serif 4    github.com/adobe-fonts/source-serif      (OFL)
        Literata          github.com/googlefonts/literata          (OFL)
        Newsreader        github.com/productiontype/Newsreader     (OFL)
        Fraunces          github.com/undercasetype/Fraunces        (OFL)

      Source Serif 4 is the closest match to the current Georgia-based look
      and is the safest swap.

   2. Subset it to Latin and convert to woff2. The subset matters — a full
      variable font is 300 KB+, a Latin subset is typically 30-45 KB:

        pip install fonttools brotli
        pyftsubset SourceSerif4-Variable.ttf \
          --output-file=eranorth-serif.woff2 \
          --flavor=woff2 \
          --layout-features='*' \
          --unicodes=U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,\
U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215

   3. Drop the result at:  assets/en/eranorth-serif.woff2

   4. Confirm the weight range on line 76 matches your font's actual axis
      range. Source Serif 4 is 200-900; Literata is 200-900; Newsreader is
      200-800. A wrong range makes the browser synthesise weights badly.

   5. Add the preload to includes/layout/head.php — the line is already
      there, commented, with instructions.

   ---------------------------------------------------------------------------
   WHY font-display: swap
   ---------------------------------------------------------------------------
   Text renders immediately in Georgia and swaps when the font arrives. The
   alternative, `block`, hides text for up to 3 seconds — an invisible-text
   flash on every first visit. `swap` costs one reflow; `block` costs the
   reader the first three seconds of the page.

   The `size-adjust`/`ascent-override` values below reduce how much that
   reflow moves things, by making the Georgia fallback occupy closer to the
   same space as the real font. Retune them for the font you choose:
   github.com/khempenius/capsize or the Fallback Font Generator.
   ========================================================================== */

@font-face {
  font-family: "EraNorth Serif";
  src: url("eranorth-serif.woff2") format("woff2-variations"),
       url("eranorth-serif.woff2") format("woff2");
  font-weight: 200 900;   /* CHECK against your font's real axis range */
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215;
}

/* Metric-matched fallback. Georgia is wider than most variable serifs, so
   without this the headline visibly reflows when the real font lands.
   Tuned for Source Serif 4 — retune if you choose differently. */
@font-face {
  font-family: "EraNorth Serif Fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 96%;
  ascent-override: 92%;
  descent-override: 26%;
  line-gap-override: 0%;
}