/* ─────────────────────────────────────────────────────────────
   Dark theme — the only theme.
   Palette per SPEC.md §1. #383d3c is the only accent and must
   appear sparingly: hover under-lines, active-card border,
   CTA hover line, scroll tracker, reticle brackets.
   ───────────────────────────────────────────────────────────── */

:root {
  --bg:        #191c1c;
  /* ~4% lift over --bg, applied to alternating sections so the page
     reads as a sequence of pages rather than one continuous slab. */
  --bg-soft:   #1d2120;
  --panel:     #333333;
  --accent:    #383d3c;
  --accent-hi: #5a615f;
  --muted:     #7d8180;
  --text:      #ffffff;
  --text-dim:  #c9cccb;

  --serif: 'Newsreader', 'GT Sectra', Georgia, serif;
  --mono:  'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  --max-w:  1200px;
  --gutter: clamp(24px, 5vw, 64px);
  /* Hero kw-panel offset from the centred .hero-inner edge.
     Keeps the panel glued to the text column rather than drifting
     out to the viewport gutter on wide monitors. */
  --kw-gap: clamp(32px, 3vw, 56px);

  /* Catalogue pillar-panel offset from the active pillar's column
     edge. Mirrors --kw-gap in role: keeps the panel hugging its
     anchor rather than drifting into the next column's whitespace. */
  --pillar-gap: clamp(20px, 2vw, 36px);

  /* Shared swap rhythm for any deliberate-reveal panel (hero
     kw-panel, catalogue pillar-panel). One token set so the two
     surfaces feel like the same gesture. */
  --panel-curve:   cubic-bezier(0.4, 0, 0.2, 1);
  --panel-swap-ms: 300ms;
  --panel-hide-ms: 320ms;
}