/* base.css — shared tokens + reset. No deps. */

:root {
  --neutral-ink:    oklch(0.20 0.01 60);
  --neutral-paper:  oklch(0.97 0.005 80);
  --neutral-mute:   oklch(0.55 0.01 60);
  --neutral-faint:  oklch(0.88 0.005 80);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6.5rem;
  --space-7: 10.5rem;

  --font-body:    system-ui, -apple-system, "Segoe UI", Inter, sans-serif;
  --font-display: ui-serif, Cambria, "Times New Roman", Georgia, serif;
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;

  --type-1: 0.78rem;
  --type-2: 0.875rem;
  --type-3: 1rem;
  --type-4: 1.25rem;
  --type-5: 1.563rem;
  --type-6: 1.953rem;
  --type-7: 2.441rem;
  --type-8: 3.052rem;
  --type-9: 3.815rem;
  --type-10: 4.768rem;
  --type-11: 5.96rem;

  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--type-3);
  line-height: 1.55;
  color: var(--neutral-ink);
  background: var(--neutral-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 0.18em; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 2px; }
button { font: inherit; cursor: pointer; }

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

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  canvas.live { display: none; }
}

.crumb {
  position: fixed; top: var(--space-3); left: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--type-1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 50;
  mix-blend-mode: difference;
  color: oklch(0.96 0.005 80);
}
.crumb a { text-decoration: none; opacity: 0.7; transition: opacity 200ms var(--ease-out-quart); }
.crumb a:hover { opacity: 1; }
.crumb .sep { opacity: 0.4; margin: 0 0.5em; }