/* Brand as mosaic: one stylesheet. Tokens, base, poster art,
   section plates, prose, figures, navigation. */

@layer tokens, base, art, components, motion;

/* ---------- tokens ---------- */
@layer tokens {
  :root {
    color-scheme: light dark;

    --paper: oklch(0.955 0.011 95);
    --paper-2: oklch(0.925 0.013 95);
    --ink: oklch(0.2 0.008 95);
    --ink-2: oklch(0.42 0.01 95);
    --ink-3: oklch(0.6 0.008 95);
    --rule: oklch(0.2 0.008 95 / 0.16);
    --signal: oklch(0.6 0.2 35);          /* #E0401C, validated with --chart-2 */
    --chart-2: oklch(0.56 0.17 258);      /* #2F6FDB */
    --heat-lo: oklch(0.95 0.025 40);
    --heat-hi: oklch(0.4 0.15 30);

    /* print inks, constant in both themes */
    --k-night: oklch(0.17 0.004 95);
    --k-chalk: oklch(0.94 0.008 95);
    --k-sheet: oklch(0.975 0.004 95);
    --k-ink: oklch(0.17 0.006 95);
    --k-red: oklch(0.62 0.22 33);
    --k-volt: oklch(0.92 0.19 106);
    --k-lime: oklch(0.86 0.2 148);
    --k-cyan: oklch(0.76 0.13 225);
    --k-green: oklch(0.64 0.19 146);
    --k-pink: oklch(0.77 0.16 352);
    --k-beige: oklch(0.86 0.06 95);

    --f-sans: 'Archivo', ui-sans-serif, system-ui, sans-serif;
    --f-mono: 'IBM Plex Mono', ui-monospace, monospace;
    --f-dot: 'Doto', 'IBM Plex Mono', monospace;
    --f-serif: 'Fraunces', Georgia, serif;

    --step--1: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
    --step-0: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
    --step-1: clamp(1.25rem, 1.12rem + 0.6vw, 1.5rem);
    --step-2: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
    --step-3: clamp(2.2rem, 1.4rem + 3.6vw, 4.75rem);

    --gutter: clamp(16px, 4vw, 48px);
    --measure: 66ch;
    --section-space: clamp(64px, 10vw, 140px);

    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --paper: oklch(0.17 0.004 95);
      --paper-2: oklch(0.215 0.005 95);
      --ink: oklch(0.93 0.008 95);
      --ink-2: oklch(0.74 0.008 95);
      --ink-3: oklch(0.55 0.006 95);
      --rule: oklch(0.93 0.008 95 / 0.16);
      --signal: oklch(0.66 0.2 35);        /* #F0532F */
      --chart-2: oklch(0.66 0.15 258);     /* #5B8EF0 */
      --heat-lo: oklch(0.25 0.02 35);
      --heat-hi: oklch(0.68 0.19 35);
    }
  }
}

/* ---------- base ---------- */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: none; text-size-adjust: none; scroll-padding-block-start: 24px; }
  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 400 var(--step-0) / 1.6 var(--f-sans);
    font-variation-settings: 'wdth' 100;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
  }
  img, svg { display: block; max-inline-size: 100%; block-size: auto; }
  h1, h2, h3 { margin: 0; text-wrap: balance; }
  p { margin: 0; text-wrap: pretty; }
  a { color: inherit; }
  :focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
  ::selection { background: var(--k-volt); color: var(--k-ink); }

  .skip {
    position: fixed; inset-block-start: 12px; inset-inline-start: 12px; z-index: 100;
    padding: 10px 14px; background: var(--k-volt); color: var(--k-ink);
    font: 500 var(--step--1) var(--f-mono); text-decoration: none;
    translate: 0 -200%;
  }
  .skip:focus-visible { translate: 0 0; }
}

/* ---------- poster art for the plates ---------- */
@layer art {
  .art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
  .art-svg { position: absolute; }

  /* Overprint: the title poster. Yellow, cyan and green blocks multiply over each other on a pink band. */
  .art-overprint { --g: var(--k-sheet); --fg: var(--k-ink); background: linear-gradient(to bottom, transparent 60%, var(--k-pink) 60%) , var(--g); }
  .art-overprint .art i { position: absolute; mix-blend-mode: multiply; }
  .art-overprint .art i:nth-child(1) { inset-block-start: 9%; inset-inline: 22% 6%; block-size: 56%; background: var(--k-volt); }
  .art-overprint .art i:nth-child(2) { inset-block-start: 22%; inset-inline-start: 4%; inline-size: 34%; block-size: 34%; background: var(--k-cyan); }
  .art-overprint .art i:nth-child(3) { inset-block-start: 26%; inset-inline-start: 18%; inline-size: 16%; block-size: 26%; background: var(--k-green); }
  .art-overprint .art::after { content: ''; position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: 2.4%; background: var(--k-red); }

  /* CMD: dark grain, two scanned circles. */
  .art-cmd { --g: oklch(0.21 0.004 95); --fg: var(--k-chalk); --acc: var(--k-chalk); }
  .art-cmd .art {
    background:
      repeating-linear-gradient(0deg, oklch(0 0 0 / 0.38) 0 1px, transparent 1px 3px),
      radial-gradient(circle at 44% 64%, oklch(0.6 0.16 30 / 0.9) 0 18cqi, transparent calc(18cqi + 1px)),
      radial-gradient(circle at 60% 64%, oklch(0.62 0.09 200 / 0.85) 0 18cqi, transparent calc(18cqi + 1px));
    background-blend-mode: normal, screen, normal;
  }

  /* Stripes: red bars, black ground. */
  .art-stripes { --g: oklch(0.15 0 none); --fg: var(--k-chalk); --acc: var(--k-chalk); }
  .art-stripes .art {
    background:
      repeating-linear-gradient(to bottom, var(--k-red) 0 3.4cqi, transparent 3.4cqi 5.2cqi) left 0 bottom 0 / 42% 46% no-repeat,
      repeating-linear-gradient(to bottom, var(--k-red) 0 3.4cqi, transparent 3.4cqi 5.2cqi) right 0 top 14% / 30% 22% no-repeat;
  }

  /* Dots: a ring of yellow dots around a heavy wordmark. */
  .art-dots { --g: oklch(0.93 0.003 95); --fg: var(--k-ink); --acc: var(--k-ink); }
  .art-dots .art {
    --d: var(--k-volt);
    background:
      radial-gradient(circle at 22% 34%, var(--d) 0 3cqi, transparent calc(3cqi + 1px)),
      radial-gradient(circle at 50% 26%, var(--d) 0 3cqi, transparent calc(3cqi + 1px)),
      radial-gradient(circle at 80% 33%, var(--d) 0 3cqi, transparent calc(3cqi + 1px)),
      radial-gradient(circle at 86% 56%, var(--d) 0 3cqi, transparent calc(3cqi + 1px)),
      radial-gradient(circle at 70% 72%, var(--d) 0 3cqi, transparent calc(3cqi + 1px)),
      radial-gradient(circle at 40% 74%, var(--d) 0 3cqi, transparent calc(3cqi + 1px)),
      radial-gradient(circle at 14% 58%, var(--d) 0 3cqi, transparent calc(3cqi + 1px));
  }

  /* Cyclops: a red crosshair eye with green registration lines. */
  .art-cyclops { --g: oklch(0.17 0 none); --fg: var(--k-beige); --acc: var(--k-beige); }
  .art-cyclops .art {
    background:
      linear-gradient(var(--k-green), var(--k-green)) 50% 0 / 1px 100% no-repeat,
      linear-gradient(var(--k-green), var(--k-green)) 0 46% / 100% 1px no-repeat;
    opacity: 1;
  }
  .art-cyclops .art::before { content: ''; position: absolute; inset: 0; background: inherit; opacity: 0.35; }
  .art-cyclops .art { background-blend-mode: normal; }
  .art-cyclops .art-svg { inset-block-start: 46%; inset-inline-start: 50%; inline-size: 56%; translate: -50% -50%; color: var(--k-red); }
  .art-cyclops .art { background-color: transparent; }
  .art-cyclops .art > svg { opacity: 1; }

  /* Heat: a halftone heat map, dots masked out of a hot gradient. */
  .art-heat { --g: oklch(0.12 0 none); --fg: var(--k-chalk); --acc: var(--k-red); }
  .art-heat .art {
    background: radial-gradient(ellipse 60% 70% at 32% 46%, var(--k-red) 0 18%, var(--k-volt) 34%, var(--k-lime) 52%, oklch(0.6 0.15 160) 64%, transparent 74%);
    mask: radial-gradient(circle, #000 0 42%, transparent 46%) 0 0 / 2.6cqi 2.6cqi;
  }

  /* Paper: a spec sheet. Red block, ruled circle diagram, barcode foot, highlighter mark. */
  .art-paper { --g: var(--k-sheet); --fg: var(--k-ink); --acc: var(--k-ink); }
  .art-paper .art {
    background:
      linear-gradient(var(--k-red), var(--k-red)) 0 22% / 16% 9% no-repeat,
      repeating-linear-gradient(90deg, var(--k-ink) 0 5%, transparent 5% 7%, var(--k-ink) 7% 8%, transparent 8% 12%, var(--k-ink) 12% 15%, transparent 15% 17%) 0 100% / 100% 13% no-repeat;
  }
  .art-paper .art-svg { inline-size: 34%; inset-block-start: 40%; inset-inline-end: 6%; color: var(--k-ink); fill: var(--k-ink); }
  .art-paper .art-svg circle[fill='none'] { fill: none; }

  /* Orbit: olive grain, lime type, a yellow double rule and a pink tag. */
  .art-orbit { --g: oklch(0.31 0.014 115); --fg: var(--k-chalk); --acc: var(--k-lime); }
  .art-orbit .art {
    background:
      linear-gradient(var(--k-pink), var(--k-pink)) 8% 30% / 22% 6% no-repeat,
      linear-gradient(var(--k-volt), var(--k-volt)) 0 60% / 100% 0.7cqi no-repeat,
      linear-gradient(var(--k-volt), var(--k-volt)) 0 62.4% / 100% 0.7cqi no-repeat;
  }

  /* Photo: a print of a real object, inked pink. */
  .art-photo { --g: var(--k-pink); --fg: var(--k-ink); --acc: var(--k-ink); }
  .art-photo .art::before {
    content: ''; position: absolute; inset: 0;
    background: url('img/grimace.webp') 50% 35% / cover no-repeat;
    filter: grayscale(1) contrast(1.25) brightness(1.1);
    mix-blend-mode: multiply;
  }
  .art-photo .art::before { opacity: 0.6; }

  /* Grain on every dark print. */
  :is(.art-cmd, .art-stripes, .art-cyclops, .art-heat, .art-orbit) .art::after {
    content: ''; position: absolute; inset: 0;
    background: var(--grain); opacity: 0.16; mix-blend-mode: overlay;
  }
}

/* ---------- components ---------- */
@layer components {
  /* Rating meter */
  .meter { display: inline-flex; align-items: center; gap: 0.7em; font: 500 0.75rem / 1.2 var(--f-mono); text-transform: uppercase; letter-spacing: 0.04em; }
  .meter-cells { display: inline-flex; gap: 2px; flex: none; }
  .meter-cells i { inline-size: 1.4em; block-size: 0.6em; background: color-mix(in oklch, currentColor 22%, transparent); }
  .meter-cells i.on { background: currentColor; }

  /* Lede */
  .lede {
    display: grid; gap: 1.1em;
    max-inline-size: calc(var(--measure) + 2 * var(--gutter));
    margin-inline: auto;
    padding: var(--section-space) var(--gutter) calc(var(--section-space) * 0.6);
  }
  .lede p:first-child { font: 500 var(--step-2) / 1.25 var(--f-sans); font-variation-settings: 'wdth' 92; letter-spacing: -0.01em; }
  .lede p:first-child::first-line { color: var(--signal); }

  /* Section plates */
  .section { padding-block-end: var(--section-space); }
  .plate {
    position: relative; isolation: isolate;
    container-type: inline-size;
    min-block-size: min(78svh, 720px);
    display: grid; align-items: end;
    padding: clamp(20px, 4vw, 56px);
    background: var(--g, var(--paper)); color: var(--fg, var(--ink));
    overflow: clip;
    margin-block-end: clamp(40px, 6vw, 80px);
  }
  .plate:not([class*='art-']) {
    min-block-size: 0;
    padding-block: clamp(64px, 8vw, 112px) 0;
    margin-block-end: clamp(24px, 3vw, 40px);
    max-inline-size: calc(var(--measure) + 360px + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .plate:not([class*='art-']) .plate-inner { border-block-start: 2px solid var(--ink); padding-block-start: 20px; }
  /* Title plate: the overprint poster, a full first screen. */
  .plate.hero { min-block-size: 92svh; margin-block-end: 0; background: linear-gradient(to bottom, transparent 60%, var(--k-pink) 60%), var(--k-sheet); color: var(--k-ink); }
  .plate.hero .art { inset-inline-start: 34%; }
  .plate .hero-title {
    font: 900 clamp(2.8rem, 1.4rem + 6.4vw, 8rem) / 0.92 var(--f-serif);
    font-variation-settings: 'opsz' 144;
    letter-spacing: -0.025em;
    color: var(--k-red);
    max-inline-size: 13ch;
  }
  @media (max-width: 640px) {
    .plate.hero { background: linear-gradient(to bottom, transparent 52%, var(--k-pink) 52%), var(--k-sheet); }
    .plate.hero .art { inset-inline-start: 8%; }
    .plate.hero .art i:nth-child(1) { inset-block-start: 5%; block-size: 34%; }
    .plate.hero .art i:nth-child(2) { inset-block-start: 12%; block-size: 20%; }
    .plate.hero .art i:nth-child(3) { inset-block-start: 14%; block-size: 15%; }
  }
  .plate-inner { position: relative; z-index: 1; display: grid; gap: clamp(16px, 2vw, 24px); max-inline-size: 1200px; inline-size: 100%; margin-inline: auto; }
  .plate-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font: 500 var(--step--1) / 1.2 var(--f-mono); text-transform: uppercase; letter-spacing: 0.05em; }
  .chip {
    display: inline-grid; place-items: center;
    inline-size: 40px; block-size: 40px;
    background: var(--k-sheet); color: var(--k-red);
    border-radius: 10px;
    box-shadow: 0 0 0 1px oklch(0 0 0 / 0.08), 0 1px 2px oklch(0 0 0 / 0.14);
  }
  .plate-title {
    font: 800 var(--step-3) / 0.98 var(--f-sans);
    font-variation-settings: 'wdth' 108;
    letter-spacing: -0.025em;
    max-inline-size: 17ch;
  }
  .plate:not([class*='art-']) .plate-title { font-size: var(--step-2); max-inline-size: 24ch; }
  .plate-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
  .plate-rating-k { font: 500 var(--step--1) var(--f-mono); text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.75; }
  .plate-rating .meter { font-size: var(--step--1); }
  .plate-mark {
    position: absolute; inset-block-end: 100%; inset-inline-end: 0;
    font: 900 clamp(5rem, 16cqi, 15rem) / 0.85 var(--f-dot);
    color: var(--acc, currentColor);
    letter-spacing: -0.04em;
    margin-block-end: 0.15em;
  }
  .plate.art-stripes .plate-mark, .plate.art-dots .plate-mark, .plate.art-paper .plate-mark, .plate.art-photo .plate-mark { font-family: var(--f-sans); }
  .plate.art-paper .plate-mark { font-variation-settings: 'wdth' 62; background: linear-gradient(var(--k-volt), var(--k-volt)) 0 55% / 100% 50% no-repeat; }
  .plate.art-dots .plate-mark { font-variation-settings: 'wdth' 125; }
  /* On wide plates the art keeps to the side the text leaves free. */
  .plate .art { inset-inline-start: 38%; }
  .plate.art-cmd .art { inset-inline-start: 0; }
  .plate.art-heat .art { inset-inline-start: 54%; }
  .plate.art-photo .art { inset-inline-start: 48%; }
  .plate.art-photo .art::before { background-position: 50% 30%; opacity: 0.5; }
  .plate.art-paper .art {
    background:
      linear-gradient(var(--k-red), var(--k-red)) 0 30% / 12% 12% no-repeat,
      repeating-linear-gradient(90deg, var(--k-ink) 0 5%, transparent 5% 7%, var(--k-ink) 7% 8%, transparent 8% 12%, var(--k-ink) 12% 15%, transparent 15% 17%) 0 0 / 100% 10% no-repeat;
  }
  .plate.art-cyclops .art-svg { inline-size: min(40%, 320px); inset-inline-start: 60%; }
  .plate.art-paper .art-svg { inline-size: min(26%, 260px); }

  /* Prose: a reading column with room for wide figures. */
  .prose {
    display: grid;
    grid-template-columns:
      [full-start] minmax(var(--gutter), 1fr)
      [wide-start] minmax(0, 180px)
      [content-start] min(var(--measure), 100% - 2 * var(--gutter)) [content-end]
      minmax(0, 180px) [wide-end]
      minmax(var(--gutter), 1fr) [full-end];
    row-gap: 1.15em;
  }
  .prose > * { grid-column: content; }
  .prose > :is(.chart, .photo, .table-wrap) { grid-column: wide; margin-block: clamp(20px, 3vw, 40px); }
  .prose a { text-decoration-color: color-mix(in oklch, var(--signal) 70%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: 0.18em; color: var(--ink-2); }
  @media (hover: hover) and (pointer: fine) {
    .prose a:hover { color: var(--signal); }
  }
  .prose p > a { color: var(--ink-2); font-size: 0.92em; }

  .prose blockquote {
    grid-column: wide;
    margin: clamp(16px, 3vw, 40px) 0;
    padding: clamp(24px, 5vw, 64px);
    background: var(--k-volt); color: var(--k-ink);
    display: grid; gap: 1em;
    position: relative;
  }
  .prose blockquote::before {
    content: '\201C';
    font: 900 clamp(5rem, 12vw, 9rem) / 0.6 var(--f-serif);
    color: var(--k-red);
    block-size: 0.45em;
  }
  .prose blockquote p { font: 500 var(--step-1) / 1.45 var(--f-sans); max-inline-size: 60ch; }
  .prose blockquote p:first-child { font: 900 var(--step-2) / 1.1 var(--f-serif); color: var(--k-red); }

  /* Tables */
  .table-wrap { overflow-x: auto; overscroll-behavior-x: contain; border-block-start: 2px solid var(--ink); }
  .table-wrap:focus-visible { outline-offset: 4px; }
  table { inline-size: 100%; min-inline-size: 640px; border-collapse: collapse; font-size: var(--step--1); line-height: 1.45; }
  thead th { font: 500 0.75rem / 1.2 var(--f-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); text-align: start; padding: 14px 16px 10px 0; }
  tbody th, tbody td { text-align: start; vertical-align: top; padding: 14px 16px 14px 0; border-block-start: 1px solid var(--rule); }
  tbody th { font-weight: 600; inline-size: 24%; }
  tbody td:has(.meter) { inline-size: 15rem; }
  td .meter { white-space: normal; inline-size: 13rem; align-items: flex-start; }
  td .meter .meter-cells { margin-block-start: 0.2em; }

  /* Charts */
  .chart { margin: 0; border-block-start: 2px solid var(--ink); padding-block-start: 14px; display: grid; gap: 20px; }
  .ch-head { display: grid; gap: 6px; }
  .ch-num { font: 500 0.75rem var(--f-mono); color: var(--signal); text-transform: uppercase; letter-spacing: 0.06em; }
  .ch-title { font: 700 var(--step-1) / 1.2 var(--f-sans); font-variation-settings: 'wdth' 96; }
  .ch-plot { display: grid; gap: 16px; }
  .ch-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; font: 400 var(--step--1) var(--f-mono); color: var(--ink-2); }
  .ch-key { display: inline-flex; align-items: center; gap: 8px; }
  .ch-key::before { content: ''; inline-size: 12px; block-size: 12px; border-radius: 50%; flex: none; }
  .ch-key.is-before::before { border: 2px solid var(--ink-3); background: var(--paper); }
  .ch-key.is-after::before { background: var(--signal); }
  .ch-key.is-marker::before { border-radius: 0; inline-size: 0; block-size: 14px; border-inline-start: 2px dashed var(--ink); }

  .ch-bars { display: grid; gap: 4px; }
  .ch-row { display: grid; grid-template-columns: minmax(9rem, 17rem) 1fr 6.5rem; align-items: center; gap: 4px 16px; min-block-size: 40px; }
  .ch-label { font-size: var(--step--1); line-height: 1.3; }
  .ch-track { position: relative; block-size: 22px; background: linear-gradient(var(--rule), var(--rule)) 0 50% / 100% 1px no-repeat; }
  .ch-bar { position: absolute; inset-block: 2px; inset-inline-start: 0; inline-size: var(--w); background: var(--ink-3); border-radius: 0 4px 4px 0; }
  .is-focus .ch-bar { background: var(--signal); }
  .has-marker .ch-track::after { content: ''; position: absolute; inset-block: -6px; inset-inline-start: var(--mx); border-inline-start: 2px dashed var(--ink); }
  .ch-value { font: 500 var(--step--1) var(--f-mono); font-variant-numeric: tabular-nums; text-align: end; white-space: nowrap; }
  .is-focus .ch-value { color: var(--signal); }
  .ch-value b { color: var(--signal); font-weight: 500; }

  .ch-span { position: absolute; inset-block-start: calc(50% - 1px); block-size: 2px; inset-inline-start: var(--a); inline-size: calc(var(--b) - var(--a)); background: var(--ink-3); }
  .ch-dot { position: absolute; inset-block-start: 50%; inset-inline-start: var(--x); inline-size: 14px; block-size: 14px; translate: -50% -50%; border-radius: 50%; }
  .ch-dot.is-before { background: var(--paper); border: 2px solid var(--ink-3); }
  .ch-dot.is-after { background: var(--signal); box-shadow: 0 0 0 2px var(--paper); }

  .ch-split { display: flex; gap: 2px; block-size: 48px; }
  .ch-seg { flex: 0 1 var(--w); background: color-mix(in oklch, var(--ink) calc(70% - var(--i) * 24%), var(--paper)); }
  .ch-seg:first-child { border-radius: 4px 0 0 4px; }
  .ch-seg:last-child { border-radius: 0 4px 4px 0; }
  .ch-seg.is-focus { background: var(--signal); }
  .ch-splitkeys { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: var(--step--1); }
  .ch-skey { display: inline-flex; align-items: baseline; gap: 8px; }
  .ch-skey::before { content: ''; inline-size: 12px; block-size: 12px; flex: none; translate: 0 1px; background: color-mix(in oklch, var(--ink) calc(70% - var(--i) * 24%), var(--paper)); }
  .ch-skey.is-focus::before { background: var(--signal); }
  .ch-skey b { font: 500 1em var(--f-mono); font-variant-numeric: tabular-nums; }

  .ch-heat { display: grid; grid-template-columns: minmax(6.5rem, 9rem) repeat(var(--cols), minmax(3.5rem, 1fr)); gap: 2px; font-size: var(--step--1); }
  .ch-hcol { font: 500 0.75rem / 1.2 var(--f-mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-2); padding-block-end: 6px; align-self: end; }
  .ch-hrow { align-self: center; font-weight: 600; }
  .ch-cell { display: grid; place-items: center; min-block-size: 44px; background: color-mix(in oklch, var(--heat-hi) calc(var(--v) * 100%), var(--heat-lo)); color: var(--k-ink); font: 500 var(--step--1) var(--f-mono); font-variant-numeric: tabular-nums; }
  .ch-cell.is-deep { color: var(--k-chalk); }
  @media (prefers-color-scheme: dark) {
    .ch-cell { color: var(--k-chalk); }
    .ch-cell.is-deep { color: var(--k-ink); }
  }
  .ch-cell b { font-weight: 500; }
  .ch-ramp { display: flex; align-items: center; gap: 10px; font: 400 0.75rem var(--f-mono); color: var(--ink-2); }
  .ch-ramp i { flex: 0 1 200px; block-size: 8px; background: linear-gradient(90deg, var(--heat-lo), var(--heat-hi)); }

  .ch-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 40%), 1fr)); gap: 2px; background: var(--rule); border: 2px solid var(--rule); }
  .ch-stat { display: grid; align-content: space-between; gap: 18px; padding: clamp(14px, 3vw, 20px); background: var(--paper); min-block-size: clamp(132px, 20vw, 168px); }
  .ch-stat b { font: 900 clamp(2.4rem, 1.6rem + 3vw, 3.75rem) / 0.95 var(--f-dot); letter-spacing: -0.03em; }
  .ch-stat.is-focus b { color: var(--signal); }
  .ch-stat span { font-size: var(--step--1); line-height: 1.35; color: var(--ink-2); }

  .ch-foot { display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: space-between; font: 400 0.75rem / 1.5 var(--f-mono); color: var(--ink-2); }
  .ch-foot a { color: inherit; }
  .ch-flag { display: inline-flex; gap: 8px; align-items: baseline; }
  .ch-flag::before { content: '!'; display: inline-grid; place-items: center; inline-size: 16px; block-size: 16px; flex: none; background: var(--k-volt); color: var(--k-ink); font-weight: 500; translate: 0 2px; }
  .ch-table summary { cursor: pointer; inline-size: fit-content; font: 500 0.75rem var(--f-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); text-decoration: underline; text-underline-offset: 0.25em; padding-block: 10px; }
  .ch-table table { min-inline-size: 0; margin-block-start: 8px; }

  @media (max-width: 640px) {
    .ch-row { grid-template-columns: 1fr auto; }
    .ch-label { grid-column: 1 / -1; }
    .ch-track { grid-column: 1; }
  }

  /* Photographs: printed in one ink, full colour when you point at them. */
  .photo { margin: 0; }
  .photo-frame { position: relative; overflow: clip; background: var(--ink-c); aspect-ratio: 16 / 9; }
  .photo--tall .photo-frame { aspect-ratio: 3 / 2; }
  .photo[data-ink='cyan'] { --ink-c: var(--k-cyan); }
  .photo[data-ink='volt'] { --ink-c: var(--k-volt); }
  .photo[data-ink='pink'] { --ink-c: var(--k-pink); }
  .photo[data-ink='lime'] { --ink-c: var(--k-lime); }
  .photo img {
    inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 42%;
    filter: grayscale(1) contrast(1.2) brightness(1.06);
    mix-blend-mode: multiply;
    outline: 1px solid oklch(0 0 0 / 0.1); outline-offset: -1px;
  }
  @media (prefers-reduced-motion: no-preference) {
    .photo img { transition: filter 500ms var(--ease-out), scale 600ms var(--ease-out); }
  }
  @media (hover: hover) and (pointer: fine) {
    .photo:hover img { filter: none; mix-blend-mode: normal; scale: 1.02; }
  }

  /* Footer */
  .footer { background: var(--k-night); color: var(--k-chalk); padding: var(--section-space) var(--gutter) 120px; }
  .footer-inner { max-inline-size: 1200px; margin-inline: auto; display: grid; gap: clamp(40px, 6vw, 80px); }
  .footer-big { font: 900 var(--step-3) / 0.95 var(--f-serif); color: var(--k-red); max-inline-size: 14ch; }
  .footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 32px; font-size: var(--step--1); line-height: 1.5; }
  .footer-cols h2 { font: 500 0.75rem var(--f-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--k-volt); margin-block-end: 12px; }
  .footer-cols ul { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 6px; }
  .footer a { text-underline-offset: 0.2em; }

  /* Section map: fixed bottom-right, opens the index. */
  .map {
    position: fixed; inset-block-end: max(16px, env(safe-area-inset-bottom)); inset-inline-end: 16px; z-index: 50;
    display: grid; gap: 8px;
    min-block-size: 48px; max-inline-size: min(320px, 100vw - 32px);
    padding: 10px 14px;
    background: var(--k-night); color: var(--k-chalk);
    border: 1px solid oklch(1 0 none / 0.12);
    border-radius: 12px;
    box-shadow: 0 6px 8px -4px oklch(0 0 0 / 0.35), 0 1px 2px oklch(0 0 0 / 0.4);
    font: 500 0.75rem / 1.2 var(--f-mono); text-transform: uppercase; letter-spacing: 0.04em;
    cursor: pointer;
    opacity: 0; translate: 0 12px; pointer-events: none;
  }
  .map[data-shown] { opacity: 1; translate: 0 0; pointer-events: auto; }
  .map:active { scale: 0.97; }
  .map-label { display: flex; gap: 8px; min-inline-size: 0; }
  .map-n { color: var(--k-volt); }
  .map-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .map-bar { block-size: 2px; background: oklch(1 0 none / 0.15); }
  .map-bar i { display: block; block-size: 100%; inline-size: 100%; background: var(--k-volt); transform-origin: left; scale: var(--p, 0) 1; }

  .index {
    position: fixed; inset: 0 0 0 auto; margin: 0;
    inline-size: min(440px, 100vw); block-size: 100dvh; max-block-size: none;
    padding: 20px; border: 0;
    background: var(--k-night); color: var(--k-chalk);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .index::backdrop { background: oklch(0 0 0 / 0.4); }
  .index-head { display: flex; justify-content: space-between; align-items: center; margin-block-end: 16px; font: 500 0.75rem var(--f-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--k-volt); }
  .index-head button {
    min-block-size: 44px; padding-inline: 14px; border: 1px solid oklch(1 0 none / 0.2); border-radius: 8px;
    background: transparent; color: var(--k-chalk); font: inherit; cursor: pointer;
  }
  .index-head button:active { scale: 0.97; }
  .index ol { list-style: none; margin: 0; padding: 0; display: grid; }
  .index a {
    display: grid; grid-template-columns: 2.2em 28px 1fr; grid-template-areas: 'n i t' '. . r'; align-items: center; gap: 4px 12px;
    padding: 12px 8px; min-block-size: 44px;
    text-decoration: none; border-block-start: 1px solid oklch(1 0 none / 0.1);
    font-size: var(--step--1); line-height: 1.3;
  }
  .index a[aria-current] { background: oklch(1 0 none / 0.06); }
  .index a[aria-current] .idx-n { color: var(--k-red); }
  @media (hover: hover) and (pointer: fine) {
    .index a:hover { background: oklch(1 0 none / 0.08); }
  }
  .idx-n { grid-area: n; font: 500 0.75rem var(--f-mono); color: var(--k-volt); }
  .idx-i { grid-area: i; color: var(--k-red); }
  .idx-t { grid-area: t; font-weight: 600; }
  .idx-r { grid-area: r; color: oklch(1 0 none / 0.7); }
  .idx-r .meter { font-size: 0.6875rem; }

  @media (max-width: 640px) {
    .map-t { display: none; }
    .index { inset: auto 0 0 0; inline-size: 100vw; block-size: auto; max-block-size: 85dvh; border-radius: 14px 14px 0 0; }
  }

  /* Hover tip for chart marks */
  .tip {
    position: fixed; z-index: 60; pointer-events: none;
    padding: 6px 10px; border-radius: 6px;
    background: var(--k-night); color: var(--k-chalk);
    font: 500 0.75rem / 1.3 var(--f-mono);
    box-shadow: 0 4px 8px -4px oklch(0 0 0 / 0.4);
    translate: -50% calc(-100% - 10px);
    max-inline-size: 240px;
  }
  [data-tip] { cursor: default; }
  @media (hover: hover) and (pointer: fine) {
    .ch-bar[data-tip]:hover, .ch-seg[data-tip]:hover { filter: brightness(1.1); }
    .ch-cell[data-tip]:hover { outline: 2px solid var(--ink); outline-offset: -2px; }
  }
}

/* ---------- motion ---------- */
@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    .map { transition: opacity 240ms var(--ease-out), translate 240ms var(--ease-out), scale 150ms var(--ease-out); }
    .index { transition: translate 280ms var(--ease-out), display 280ms allow-discrete, overlay 280ms allow-discrete; translate: 100% 0; }
    .index:popover-open { translate: 0 0; }
    @starting-style { .index:popover-open { translate: 100% 0; } }
    @media (max-width: 640px) {
      .index { translate: 0 100%; }
      .index:popover-open { translate: 0 0; }
      @starting-style { .index:popover-open { translate: 0 100%; } }
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .map { transition: opacity 180ms linear; translate: 0 0; }
  }
}