/* Viewfinder: the whole page is black and monochrome. Red is only the camera's
   REC light: the logo dot, REC dots, multiplier chips, the primary button, the
   nav progress bar and scrubber, and at most one key number per section. */
/* Fonts, served from this site (assets/fonts/): the exact files and rules Google Fonts serves Chrome on Windows and
   Linux for the families the site used to load from fonts.googleapis.com, so no page waits on another origin and
   the two fonts every page uses are preloaded in the head (src/partials/head.html). Those files carry one extra
   table (prep: dropout control) over the ones Google sends Apple and Android devices, which ignore it; outlines,
   metrics and variation data are identical, so text renders the same everywhere. Bricolage Grotesque v9, DM Sans
   v17, Caveat v23, all SIL Open Font License. */
/* vietnamese */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url(/assets/fonts/bricolage-grotesque-v9-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 }
/* latin-ext */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url(/assets/fonts/bricolage-grotesque-v9-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF }
/* latin */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url(/assets/fonts/bricolage-grotesque-v9-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 }
/* vietnamese */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap; src: url(/assets/fonts/bricolage-grotesque-v9-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 }
/* latin-ext */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap; src: url(/assets/fonts/bricolage-grotesque-v9-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF }
/* latin */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap; src: url(/assets/fonts/bricolage-grotesque-v9-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 }
/* cyrillic-ext */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/caveat-v23-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F }
/* cyrillic */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/caveat-v23-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116 }
/* latin-ext */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/caveat-v23-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF }
/* latin */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/caveat-v23-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 }
/* latin-ext */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/dm-sans-v17-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF }
/* latin */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/dm-sans-v17-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 }
/* latin-ext */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/dm-sans-v17-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF }
/* latin */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/dm-sans-v17-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 }
/* latin-ext */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/dm-sans-v17-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF }
/* latin */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/dm-sans-v17-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 }

:root {
  /* Ground and lines */
  --bg: #0B0B0B;
  --surface: #141414;
  --raised: #1C1C1C;
  --line: #232323;
  --line-strong: #333333;

  /* Text */
  --ink: #F1F1F1;
  --ink-muted: #AAAAAA;  /* 8.4:1 on --bg */
  --ink-faint: #5E5E5E;  /* large or non-essential text only */
  --paper: #FFFFFF;
  --on-paper: #0B0B0B;   /* text on white chips and filled icons */

  /* The REC light */
  --rec: #FF0000;
  --btn: #E60000;        /* white text on it: 4.8:1 */
  --btn-hover: #CC0000;
  --on-btn: #FFFFFF;

  --focus-ring: #FFFFFF;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-cut: cubic-bezier(.7, 0, .2, 1);

  /* Viewfinder */
  --vf-corner: #FFFFFFB3;  /* white at 70% */
  --vf-grid: #FFFFFF0D;    /* white at 5% */
  --hud: #FFFFFF99;        /* white at 60%: 7:1 on --bg */
  --leader: #FFFFFF80;     /* white at 50% */
  --frame-pop: #FFFFFF66;  /* white at 40%: the Creator card's border */
  --wordmark: #161616;

  /* Glass, shadows, overlays */
  --nav-pill: #0B0B0BCC;
  --progress-track: #FFFFFF1A;
  --scrim: #000000CC;
  --shadow-nav: 0 12px 32px -16px #000000B3;
  --shadow-lift: 0 24px 48px -20px #000000B3;

  /* Type */
  --font-display: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
  --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hand: "Caveat", cursive; /* Henry's receipts, and his signature on /about */

  /* Display sizes for H1s (Bricolage). A page whose H1 must carry a long keyword steps down one size with
     .h1--long rather than breaking onto more lines: max 2 lines at 1440 wide, 3 at 375 (9 Nov 2026). */
  --display-1: 108px; --display-2: 84px; --display-3: 68px; --display-4: 52px;

  /* Space and shape */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px; --space-32: 128px;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px;

  /* Vertical rhythm: one scale for every section */
  --section-y: clamp(40px, 4.5vw, 64px);      /* normal sections, top and bottom */
  --section-y-tight: clamp(32px, 3.5vw, 48px); /* where two sections flow into each other */
  --stack-lg: 48px;  /* a section's headline block to its main visual */
  --stack-md: 24px;  /* headline to sentence, sentence to buttons */
  --stack-sm: 12px;  /* label to headline */

  /* Anchor jumps land this far below the top of the screen: clear of the floating nav (76px) */
  --anchor-y: 96px;
}