/* Design tokens — palette, spacing, motion.
   Sourced from tech spec §4.2 (map colors) and §6 (design system).
   Nothing else. */

:root {
  --c-navy: #1C2E4A;
  --c-cream: #F5EFE4;
  --c-rust: #C14D2E;
  --c-near-black: #0E1826;
  /* One added sea-glass tone sampled from harbor footage, per spec */
  --c-seaglass: #7FA9A0;

  --c-ink: #1A1A1A;
  --c-ink-muted: #4E4E4E;
  --c-on-navy: #F5EFE4;
  --c-on-navy-muted: #B8C1D0;

  /* Motion: 600–1200ms, ease-in-out, per spec §6 */
  --motion-fast: 600ms;
  --motion-med: 900ms;
  --motion-slow: 1200ms;
  --easing: cubic-bezier(0.4, 0.0, 0.2, 1.0);

  --measure: 34rem;              /* ~60-70 characters at body size */
  --scene-min-height: 100vh;
  --gutter: clamp(1rem, 4vw, 2rem);

  /* v2 documentary layout — three-width grid tokens (DESIGN-SYSTEM-v2 §1).
     Prose is capped in pixels because ch varies significantly across the
     brand fonts (Fraunces has a wide `0`); 680px hits ~65 characters at
     body size, the readable measure the spec targets. */
  --measure-prose: min(680px, 100% - 2 * var(--gutter));
  --measure-wide: 1040px;
  --measure-full: 100%;

  /* Vertical rhythm — section gap ≥ 2.5× paragraph gap (§1) */
  --space-paragraph: 1rem;
  --space-block: 2rem;              /* between figure and next paragraph */
  --space-section: 6rem;            /* between scenes / sections */

  --z-header: 10;
  --z-scene-media: 1;
  --z-scene-overlay: 2;
  --z-map-labels: 3;
  --z-skip-link: 100;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--c-cream);
  color: var(--c-ink);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  min-height: 100vh;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a { color: var(--c-rust); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--c-navy); }

:focus-visible {
  outline: 2px solid var(--c-rust);
  outline-offset: 4px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: 0;
  top: -40px;
  padding: 0.5rem 1rem;
  background: var(--c-near-black);
  color: var(--c-on-navy);
  z-index: var(--z-skip-link);
  text-decoration: none;
}
.skip-link:focus {
  top: 0;
}