/* HHH.Editor tokens. Colours and faces live here and nowhere else (Hallmark Floor 1). */
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin.woff2") format("woff2"); font-weight: 400 900; font-stretch: 62% 100%; 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+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: "Archivo"; src: url("../fonts/archivo-latin-ext.woff2") format("woff2"); font-weight: 400 900; font-stretch: 62% 100%; font-style: normal; font-display: swap;
  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: "Archivo"; src: url("../fonts/archivo-vietnamese.woff2") format("woff2"); font-weight: 400 900; font-stretch: 62% 100%; font-style: normal; font-display: swap;
  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: "Instrument Serif"; src: url("../fonts/instrument-serif-italic-latin.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap;
  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: "Instrument Serif"; src: url("../fonts/instrument-serif-italic-latin-ext.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap;
  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: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-500-latin.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; }
/* metric-matched fallbacks (scripts/fonts.py), so the swap does not move the fold */
@font-face { font-family: "Archivo Display Fallback"; src: local("Arial Narrow Bold"), local("ArialNarrow-Bold"), local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 85.7%; ascent-override: 102.5%; descent-override: 24.5%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Body Fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 98.6%; ascent-override: 89%; descent-override: 21.3%; line-gap-override: 0%; }
@font-face { font-family: "Instrument Serif Fallback"; src: local("Georgia Italic"), local("Georgia-Italic"); size-adjust: 80%; ascent-override: 123.8%; descent-override: 38.8%; line-gap-override: 0%; font-style: italic; }

:root {
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-2xs: 0.75rem; --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.1875rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.75rem); --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --text-hero: clamp(3.4rem, 9.2vw, 8.75rem); --text-hero-serif: clamp(3.6rem, 9.6vw, 9.25rem);
  --text-section: clamp(2rem, 2.5vw + 1rem, 3.5rem); --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem); --text-lead: clamp(1.0625rem, 0.35vw + 0.95rem, 1.25rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms; --dur-deal: 640ms;
  --color-error: oklch(68% 0.17 27); --color-success: oklch(78% 0.139 176);
  --container: 1440px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; --z-grain: 650; --z-preloader: 700;

  /* the cutting room: warm near-black, film-white ink, one teal for the playhead and the key line (editor, 03/11) */
  --color-paper: oklch(15.9% 0.005 95);
  --color-paper-2: oklch(19.5% 0.006 95);
  --color-paper-3: oklch(23.5% 0.006 92);
  --color-ink: oklch(95.3% 0.009 85);
  --color-ink-2: oklch(84% 0.009 85);
  --color-muted: oklch(66% 0.01 85);
  --color-rule: oklch(31% 0.007 90);
  --color-rule-strong: oklch(46% 0.008 88);
  --color-accent: oklch(78.1% 0.139 176);
  --color-accent-ink: oklch(15.9% 0.005 95);
  --color-focus: oklch(80% 0.15 176);
  --color-scrim: oklch(15.9% 0.005 95 / 0.82);
  --mask-solid: oklch(15.9% 0.005 95);
  --mask-half: oklch(15.9% 0.005 95 / 0.5);
  --color-lightbox: oklch(12.5% 0.005 95 / 0.97);
  --color-paper-deep: oklch(12.5% 0.005 95);
  --grain-opacity: 0.06;
  /* the cream flip ("How it works"): same ink as the page text turned into a surface; muted text and the deep teal are tuned for cream */
  --color-cream: oklch(95.3% 0.009 85);
  --color-cream-ink: oklch(15.9% 0.005 95);
  --color-cream-muted: oklch(40% 0.012 90);
  --color-cream-rule: oklch(80% 0.01 88);
  --color-accent-deep: oklch(46% 0.09 176);

  --font-display: "Archivo", "Archivo Display Fallback", "Arial Narrow", sans-serif;
  --font-body: "Archivo", "Archivo Body Fallback", Arial, sans-serif;
  --font-outlier: "Instrument Serif", "Instrument Serif Fallback", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --radius-card: 6px; --radius-pill: 999px; --rule-hair: 1px; --shadow-card: 0 26px 44px -26px oklch(3% 0.004 95 / 0.95), 0 0 0 1px oklch(95% 0.009 85 / 0.07);
  --tracking-display: -0.005em;
  --nav-h: 64px;
}