/* ══════════════════════════════════════════════════════════════════════════
   CAPITAL CULTURES · TOKENS
   The only place a raw colour, size or duration is allowed to be written.
   Direction «СПЕКТР / Spice Spectrum», locked in DESIGN.md rev 3.
   Never add a colour here. Never write a hex value anywhere else.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  /* ── the six spice inks ── */
  --turmeric:#FFB300;
  --chilli:#E8322A;
  --sumac:#A8256E;
  --matcha:#3FAE29;
  --saffron:#FF6B00;
  --indigo:#2B3FD9;

  /* ── the only two neutrals. #000 and #FFF are forbidden. ── */
  --ink:#17120F;
  --paper:#FFF7EA;

  /* ── lit variants: chilli, sumac and indigo are too dark to be read ON the
        ink ground at text sizes. Used for type sitting on ink (the parade,
        links in the footer, the section accents on a quiet ink band).
        Measured on #17120F: chilli-lit 5.22:1 · sumac-lit 4.72 · indigo-lit
        4.94, against chilli's own 4.39 which misses the body-copy bar.
        Never used as a band ground. ── */
  --chilli-lit:#F5473A;
  --sumac-lit:#D9469B;
  --indigo-lit:#5B78FF;

  /* ── per-band ground + type colour. Set by .band--<ink>; every component
        reads these two instead of naming a colour. ── */
  --ground:var(--ink);
  --type:var(--paper);

  /* ── THE SECTION INK ────────────────────────────────────────────────────
     Under the dosage law of 28.08.2026 the page is mostly quiet and the spice
     works as punctuation. Which spice is a property of the SECTION, not of the
     band, so it is named once — here — and read everywhere as --section-ink.
     The table is set on .sec--<slug>, which blocks.mjs stamps on every band
     and every seam. Four values, because a spice behaves differently on the
     two quiet grounds:
       --section-ink       the section's saturated ground
       --section-type      type that sits ON that ground (measured, WCAG)
       --section-lit       the same spice made legible against the ink ground
       --section-lit-type  type that sits ON --section-lit
     Canon for the slug→spice mapping: SECTION_INK in lib/blocks.mjs.       */
  --section-ink:var(--ink);
  --section-type:var(--paper);
  --section-lit:var(--paper);
  --section-lit-type:var(--ink);

  /* ── type. The stand-in sits between the real face and the system stack:
        it IS the system stack, with the real face's line box.  ── */
  --face-display:"Anton","Anton stand-in",Impact,"Arial Black",sans-serif;
  --face-body:"Figtree","Figtree stand-in",-apple-system,"Segoe UI",Roboto,sans-serif;
  --face-mono:"Martian Mono","Martian stand-in",ui-monospace,"SF Mono",monospace;
  --face-parade:"Anton","Noto Sans KR","Noto Sans Armenian","Noto Sans Georgian","Noto Sans","Anton stand-in",sans-serif;

  --fs-d1:clamp(40px,6.5vw,104px);   /* h1 / pageHero */
  --fs-d2:clamp(32px,4.8vw,72px);    /* h2 / band heads */
  --fs-d3:clamp(26px,3.2vw,44px);    /* h3 / row names */
  --fs-d4:clamp(20px,2.4vw,30px);    /* h4 / small display */
  --fs-big:clamp(120px,26vw,340px);  /* the one enormous number */
  --fs-fact:clamp(44px,6vw,88px);    /* facts() values */
  --fs-quote:clamp(26px,3.6vw,54px); /* quoteBand */
  --fs-lede:clamp(17px,1.55vw,22px);
  --fs-body:clamp(15.5px,1.2vw,17.5px);
  --fs-small:14px;
  --fs-mono:11px;
  --fs-mono-lg:13px;

  --lh-display:.9;
  --lh-tight:.86;
  --ls-display:-.02em;
  --ls-mono:.06em;

  /* ── grid & rhythm ── */
  --gut:clamp(20px,4vw,56px);        /* page side padding */
  --max:1320px;                      /* content measure */
  --cols:12;
  --gap:clamp(20px,3vw,48px);        /* 12-col gutter */
  --sec-y:clamp(56px,7.5vw,120px);   /* band vertical padding */
  --sec-y-tight:clamp(34px,4.4vw,64px);
  --stack:clamp(18px,2.2vw,32px);    /* gap inside a block */
  --mast-h:clamp(45px,4.4vw,62px);   /* the sticky masthead, measured: 45 at
                                        390, 62 at 1440. Anchors clear it. */
  --rule:2px;                        /* every divider on the site */
  --rule-thick:3px;

  /* ── motion ── */
  --snap:cubic-bezier(.2,.9,.25,1);
  --t-flood:460ms;                   /* ink flood, the only entrance */
  --t-wipe:620ms;                    /* headline line-mask */
  --t-micro:200ms;                   /* hover / focus, never above 300ms */

  /* ── layers ── */
  --z-seam:1;
  --z-flood:5;
  --z-mast:60;
  --z-curtain:70;
  --z-cursor:80;
}


/* ══ THE THREE FACES, SERVED FROM THIS DOMAIN ══════════════════════════════
   Anton · Figtree · Martian Mono, cut by Google and hosted here. Four things
   were wrong with loading them from fonts.googleapis.com:

     · two round trips before a glyph moves — the stylesheet, then the file.
       The headline is the first thing on every page and the last thing to
       arrive, and the hero measured CLS 0.19 with the fonts on and 0.0009
       with them blocked. The whole shift was the headline growing 84px when
       Anton landed in two files and collapsing back
     · sixty-two of sixty-eight pages paid three blocking requests to a third
       party for Cyrillic, Armenian and Georgian glyphs they do not contain.
       Those three are cut to the exact letters the roll-call uses — 1.2 to
       1.8 KB each — and the unicode-range keeps them off every other page
     · a third party saw a request from every reader of this site
     · Figtree and Martian Mono are variable, so one file each covers every
       weight the site sets

   Total, latin: 63 KB for the three faces, plus 32 KB of latin-ext that only
   a page carrying Ł, ș or Ț ever fetches.

   The <link rel="preload"> for Anton and Figtree belongs in the document head
   (lib/layout.mjs → lib/head.mjs), together with dropping the four Google
   stylesheets. Files are in place; the head is W4's.                       */
@font-face{
  font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/anton-400-latin.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:"Anton";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/anton-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/anton-400-vietnamese.woff2") format("woff2");
  unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face{
  font-family:"Figtree";font-style:normal;font-weight:400 700;font-display:swap;font-stretch:100%;
  src:url("/assets/fonts/figtree-400-latin.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:"Figtree";font-style:normal;font-weight:400 700;font-display:swap;font-stretch:100%;
  src:url("/assets/fonts/figtree-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Martian Mono";font-style:normal;font-weight:400 600;font-display:swap;font-stretch:100%;
  src:url("/assets/fonts/martian-mono-400-latin.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:"Martian Mono";font-style:normal;font-weight:400 600;font-display:swap;font-stretch:100%;
  src:url("/assets/fonts/martian-mono-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* the roll-call's four scripts. Anton carries none of them; each file is the
   handful of letters the names on this site actually spell. */
@font-face{
  font-family:"Noto Sans";font-style:normal;font-weight:700;font-display:swap;font-stretch:100%;
  src:url("/assets/fonts/noto-sans-700-parade.woff2") format("woff2");
  unicode-range:U+411, U+421, U+430-431, U+433, U+438, U+43B, U+440, U+44A, U+44F, U+458;
}
@font-face{
  font-family:"Noto Sans Armenian";font-style:normal;font-weight:700;font-display:swap;font-stretch:100%;
  src:url("/assets/fonts/noto-sans-armenian-700-parade.woff2") format("woff2");
  unicode-range:U+540, U+561, U+575-576, U+57D, U+57F;
}
@font-face{
  font-family:"Noto Sans Georgian";font-style:normal;font-weight:700;font-display:swap;font-stretch:100%;
  src:url("/assets/fonts/noto-sans-georgian-700-parade.woff2") format("woff2");
  unicode-range:U+10D0, U+10D4-10D5, U+10D7, U+10DA, U+10DD, U+10E0-10E1, U+10E5;
}

/* ── the metric-matched stand-ins ──────────────────────────────────────────
   A fallback face draws a line box of its own height, so the swap moves every
   line under it. These three carry the real faces' vertical metrics — read out
   of the files above with fontTools, not guessed — so the stand-in reserves
   exactly the box the real face will take and the swap moves nothing
   vertically. Anton: 2409/-674 on 2048 units. Figtree: 950/-250 on 1000.
   Martian Mono: 1000/-200 on 1000. Width is left alone: size-adjust without a
   measured pair of faces trades a vertical shift for a horizontal one.     */
@font-face{
  font-family:"Anton stand-in";
  src:local("Impact"),local("Haettenschweiler"),local("Arial Narrow Bold"),local("Arial Black"),local("DejaVu Sans Condensed"),local("Liberation Sans Narrow");
  ascent-override:117.63%;descent-override:32.91%;line-gap-override:0%;
}
@font-face{
  font-family:"Figtree stand-in";
  src:local("Segoe UI"),local("Roboto"),local("Helvetica Neue"),local("Arial"),local("Liberation Sans"),local("DejaVu Sans");
  ascent-override:95%;descent-override:25%;line-gap-override:0%;
}
@font-face{
  font-family:"Martian stand-in";
  src:local("SFMono-Regular"),local("Menlo"),local("Consolas"),local("DejaVu Sans Mono");
  ascent-override:100%;descent-override:20%;line-gap-override:0%;
}

/* ── the seven sections. Festival chilli · Cultures sumac · Join turmeric ·
      Market matcha · Partners indigo · Journal saffron · About ink.
      A section's colour is constant inside it; the difference between two of
      its pages is made by composition, never by a change of ink.
      About is the achromatic section: its punctuation is paper on ink and ink
      on paper, and its pages never carry a saturated band at all. ── */
.sec--home    {--section-ink:var(--chilli);   --section-type:var(--paper);
               --section-lit:var(--chilli-lit);--section-lit-type:var(--ink)}
.sec--festival{--section-ink:var(--chilli);   --section-type:var(--paper);
               --section-lit:var(--chilli-lit);--section-lit-type:var(--ink)}
.sec--cultures{--section-ink:var(--sumac);    --section-type:var(--paper);
               --section-lit:var(--sumac-lit);--section-lit-type:var(--ink)}
.sec--join    {--section-ink:var(--turmeric); --section-type:var(--ink);
               --section-lit:var(--turmeric); --section-lit-type:var(--ink)}
.sec--market  {--section-ink:var(--matcha);   --section-type:var(--ink);
               --section-lit:var(--matcha);   --section-lit-type:var(--ink)}
.sec--partners{--section-ink:var(--indigo);   --section-type:var(--paper);
               --section-lit:var(--indigo-lit);--section-lit-type:var(--ink)}
.sec--journal {--section-ink:var(--saffron);  --section-type:var(--ink);
               --section-lit:var(--saffron);  --section-lit-type:var(--ink)}
.sec--about   {--section-ink:var(--ink);      --section-type:var(--paper);
               --section-lit:var(--paper);    --section-lit-type:var(--ink)}

/* No radius. No shadow on any surface. Separation is colour. */