/* Cascade layers, declared here because fonts.css is the first stylesheet every
   page loads. Order is lowest priority first.

     base          site.css - tokens, element defaults, chrome
     proto-scoped  the prototype's own page <style> block, ported verbatim
     proto-inline  the prototype's inline style="" attributes, ported to classes
     proto-state   the prototype's style-hover / style-focus
     overrides     deliberate deviations we own

   This exists because inline styles beat every stylesheet rule, but the classes
   we generate from them do not. Without layers a scoped rule like
   `.product p{color:var(--warm-gray)}` (0,1,1) silently overrides the ported
   class (0,1,0) that came from an inline style, and the page changes colour.
   Layers restore the prototype's real precedence regardless of specificity. */
@layer base, proto-scoped, proto-inline, proto-state, overrides;

/* ===========================================================================
   Alexandra Marie Studio — font layer
   ---------------------------------------------------------------------------
   THIS IS THE ONLY FILE THAT DEFINES TYPEFACES. Nothing else in the codebase
   may declare a font-family with a real family name — everything references
   var(--serif) or var(--sans).

   HEADINGS  STIX Two Text            — self-hosted, Latin subset, OFL licensed
   BODY      Neue Haas Grotesk Text Pro — served by Adobe Fonts (Typekit kit
             ors7mkt). NOT self-hosted: the Creative Cloud licence permits CDN
             delivery only.

   TO SWAP NEUE HAAS TO SELF-HOSTED once a Monotype web licence is in hand:
     1. drop the .woff2 files into /fonts/
     2. add @font-face blocks below, next to the STIX ones
     3. delete the four Typekit <link> lines from the <head> of every page
        (they are emitted by one function — HEAD_FONTS in build/build.py)
   No other file needs to change.
   =========================================================================== */

/* --- STIX Two Text — self-hosted, Latin only, variable weight 400-700 ------ */
@font-face {
  font-family: "STIX Two Text";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/stix-two-text-latin-roman.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "STIX Two Text";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/stix-two-text-latin-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Neue Haas Grotesk Text Pro — Adobe Fonts, loaded via <head> ----------- */
/* Kit ors7mkt registers the CSS family name "neue-haas-grotesk-text" (NOT
   "Neue Haas Grotesk Text Pro"). Faces served: weight 400 + 700, normal +
   italic — four @font-face blocks, and nothing else in the kit.

   Verified against the live kit on 2026-08-20, after the client corrected it:
       neue-haas-grotesk-text      swap   <- ALL body copy
       neue-haas-grotesk-display   removed from the kit; was never referenced
   font-display can only be set in the Adobe Fonts web-project settings; it
   cannot be overridden from here.

   Note, unrelated to the above and unchanged by it: the ported export asks for
   weight 300 and 500 in a few places. The kit carries 400 and 700 only, so the
   browser renders those at 400. Adding 300/500 to the kit would change how
   those runs render, so it is left alone.

   The token below names the licensed face first so a future self-hosted
   @font-face drops in ahead of the Typekit name without touching consumers. */

/* --- the only two type tokens ------------------------------------------- */
:root{
  --serif:"STIX Two Text", serif;
  /* The kit family name MUST come first, exactly as the export orders it.
     "Neue Haas Grotesk Text Pro" is the DESKTOP font name - the kit does not
     register it, so on a machine without that font installed the name is
     skipped and the kit face is used, but on a machine WITH it installed (any
     designer's Mac, including this studio's) the browser picks the local
     desktop family instead. The two are not interchangeable: the kit ships
     weight 400 and 700 only, while the desktop family has real Light and
     Medium faces, so every `font-weight:300` and `font-weight:500` in the
     ported CSS rendered at a different weight locally than it does for a
     visitor - and than it does in the export. Listing the kit name first makes
     the resolution identical everywhere and identical to the export. */
  --sans:"neue-haas-grotesk-text", sans-serif;
}
