/* THE FACES THEMSELVES, loaded by every page.
 *
 * Until 2026-09-07 the ONLY @font-face declarations on this site lived inside
 * vitrine.html.j2's inline <style>. Every other page named "Cinzel" and
 * "Gentium Book Plus" in its tokens and loaded neither, so it quietly fell
 * back to Georgia -- the exact failure this repo has already recorded once
 * ("the site drew Georgia for two eras while every check said Cinzel"), and
 * confirmed again by the impeccable critique, whose measurement found
 * document.fonts empty on a product page.
 *
 * woff2, subset by scripts/site/fonts.py to the characters this site actually
 * sets: 1525 KB of TTF became 62 KB. Gentium alone went 799 KB -> 16 KB,
 * because it ships Greek, Cyrillic and IPA that no page here types. No Arabic
 * is ever typed on this site, so none is subset in -- every Arabic glyph
 * arrives inside a rendered image from the licensed source.
 */
@font-face{font-family:"Cinzel";src:url("fonts/Cinzel-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Cinzel";src:url("fonts/Cinzel-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Gentium Book Plus";src:url("fonts/GentiumBookPlus-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/Inter-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/Inter-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}

/* Type, space and radius tokens. Hand-written -- unlike the colour tokens,
 * these are not derived from the print product: a book has no 14px UI.
 * Colour never appears here as a literal: any colour a rule below needs is
 * built from a generated custom property (--gold, --gold-text, ...) via
 * color-mix(), never a hex or rgba literal. See web/context.py:tokens().
 *
 * THREE FACES, EACH WITH ONE JOB.
 *   Cinzel            display only. Inscriptional capitals: no usable small
 *                     sizes, no tabular figures. A price set in it misaligns.
 *   Gentium Book Plus reading. Body copy, description, about.
 *   Inter             every piece of commerce chrome -- nav, buttons, price,
 *                     forms, cart, badges, tables. Chosen for tabular
 *                     numerals, which is what keeps a column of prices from
 *                     wobbling.
 *
 * TWO SIZE SCALES, NOT ONE (spec 4A.6). Award-winning systems run a tight
 * ratio for chrome and a wide one for display; one ratio stretched across
 * both is what makes a page feel templated. The UI scale is --t-ui-*
 * (never bare --t-ui -- that name already holds the Inter font STACK above,
 * and redeclaring it as a size would silently break every
 * `font-family: var(--t-ui)` rule in this system). The display scale is
 * --t-d-heading / --t-d-title (retone 2026-08-31 -- see the comment on
 * those two below; the scale used to be five steps, --t-d-1..5, and is now
 * exactly the two sizes spec 4A.3 measures and names).
 */
:root {
  --t-display: "Cinzel", Georgia, serif;
  --t-body: "Gentium Book Plus", Georgia, serif;
  --t-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Reading copy's own base size -- deliberately not part of either scale
   * below: it sets Gentium Book Plus, which neither the tight UI scale nor
   * the wide display scale is tuned for. */
  --t-body-size: 1rem;

  /* RETONE 2026-08-31 (spec 4A.3): the measured Inter scale is
   * 11/12/14/16/18px. 11px is dropped outright -- 4A.7 names it explicitly
   * as the one thing NOT taken from Aesop, and 4A.5 reserves 12px itself
   * for legal/fine-print copy only (an older gift-buying audience, on a
   * product sold partly on legibility). So the scale actually IN USE is
   * four steps: 12 (legal text only -- see the components that still
   * reach for --t-ui-xs on copyright/fine-print lines), 14, 16, 18. */
  --t-ui-xs: 0.75rem;   --t-ui-sm: 0.875rem;
  --t-ui-md: 1rem;      --t-ui-lg: 1.125rem;

  /* RETONE 2026-08-31 (spec 4A.3): Cinzel collapses to exactly the two
   * sizes the spec measures and names -- 31px for section headings
   * (`.display`, unmodified -- the home and series page mastheads) and
   * 24px for a volume title (`.display--sm`, and every other place this
   * system already reached for the old --t-d-1/--t-d-2 duo: the buybox
   * title, the price beside it at the SAME size per 4A.3 ("Price same
   * size and weight as the title"), the header wordmark, the cart-drawer
   * and notify-panel headings). The old 43px/57px/76px steps
   * (--t-d-3/4/5) are gone outright -- they were the near-landing-page
   * hero scale Bilal rejected ("everything ... doesn't look professionally
   * done"), and 4A.2's own reading of Aesop is that Cinzel is "never hero
   * copy" there either. */
  --t-d-heading: 1.9375rem; /* 31px */
  --t-d-title: 1.5rem;      /* 24px */

  /* Large glyphs carry excess counter-space, so display type is TIGHTENED;
   * small caps/overlines need opening up to stay legible. (4A.6) */
  --track-display: -0.015em;
  --track-overline: 0.14em;

  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-6: 1.5rem;  --s-8: 2rem;    --s-12: 3rem;   --s-16: 4rem;

  --r-sm: 2px; --r-md: 4px;

  /* Container: max-width 1200px with a FIXED 15px inner padding (spec
   * 4A.3) -- 1170px of content. The 15px never changes with viewport width,
   * which is what makes the "page margin" fall out for free: at >=1230px
   * the 1200px box's own auto side-margins plus the 15px padding gives
   * 135px at exactly 1440px (the spec's own number); below that, the auto
   * margins collapse to 0 and only the 15px padding remains, giving 15px
   * at 390px. Two numbers, one rule, no breakpoint needed for either. */
  --w-page: 1200px;
  --page-pad: 15px;

  /* Section gap: CONSTANT, section padding stays 0 (spec 4A.3). Rhythm
   * comes from this one invariant number, not from section height -- a
   * section's own height is free to vary (Aesop's run 164px-1085px, a 6.6x
   * spread) against this fixed gap, which is what makes the page read as
   * composed rather than uniformly stacked. 100px desktop, 80px mobile --
   * see the max-width:640px block below for the mobile value. */
  --gap-section: 100px;

  /* 45-52 characters at 16px Gentium Book Plus in a 420-450px column (spec
   * 4A.3's own "--measure" number) -- a fixed pixel width, not a ch unit,
   * because the spec measured pixels off the live sites. This IS the
   * "--measure" spec 4A brief names -- kept as the pre-existing --w-text
   * rather than adding a second token for the same column, which is
   * exactly the duplicate-name rot CLAUDE.md warns against. */
  --w-text: 440px;
  --leading-body: 1.55;
  /* Spec 4A.3/4A.5: "line-height 1.5" for Inter, flatly -- NOMOS's 1.40 is
   * explicitly named in 4A.7 as NOT taken, because Inter here explains what
   * a juz is over ~50 characters, not a 45-character product spec. */
  --leading-ui: 1.5;

  /* RETONE 2026-08-31 (spec 4A.3/4A.8): exactly two motion values, not one
   * ease stretched across three durations. Colour (background-color,
   * border-color, color, opacity) gets 250ms ease-out; transform gets
   * 150ms ease. Nothing in this system currently animates a transform, but
   * the token exists so the next author reaches for it instead of
   * inventing a third value. Both are well under the 400ms ceiling, and
   * neither is the overshoot curve 4A.8 bans (see
   * tests/test_art_direction.py for its exact banned value). */
  --ease-color: ease-out;
  --dur-color: 250ms;
  --ease-transform: ease;
  --dur-transform: 150ms;

  /* Separation is a hairline, never a shadow (4A.4). Built from --ink via
   * color-mix rather than a hex/rgba literal -- this file hand-writes
   * structure, never colour.
   *
   * FIX ROUND 2 (2026-08-31): rebuilt from --gold-text. Every rule in this
   * system sits on a LIGHT ground now (page/band/band_deep, and as of
   * CRITICAL 3 the header and sticky buy bar too) -- --board keeps only
   * the footer. A gold-based hairline read correctly on the near-black
   * ground this token was built for, but reads faint on cream (--gold-text
   * itself fails AA there outright, ~1.65:1) and was flagged as a concern
   * in the prior retone report. --ink is this site's own darkest colour on
   * every light ground it needs to separate (~13:1, test_ink_clears_aa_on_
   * every_light_surface) and gives a hairline that actually reads as a
   * seam against cream, not just against black. */
  --rule: color-mix(in srgb, var(--ink) 16%, transparent);
  --rule-strong: color-mix(in srgb, var(--ink) 30%, transparent);
}

/* Prices, quantities and totals line up in a column. Without this a cart
 * subtotal jitters as the digits change. */
.num { font-family: var(--t-ui); font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  :root { --gap-section: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  /* A real fallback, not a blanket kill: transitions collapse to instant,
   * and anything that would have ANIMATED INTO a finished state must
   * render in that finished state -- including the future signature
   * grey-to-gold resolve, which must appear already gold rather than
   * disappearing. (4A.8) */
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  [data-resolve] { --resolve: 1; }
}