/* Shared tokens + reset for every page. Values come from DESIGN.md; change them there first. */
:root {
  --paper: #f4ece4;
  --paper-shade: #e7dccf;
  --ink: #2a1d18;
  --ink-soft: #5e4a40;
  --thread: #c83e4d;
  --on-ground: #f4ece4;

  /* the live theme: tweened by ScrollTrigger on /m/, fixed on public pages */
  --bg: #1c1210;
  --accent: #d4a857;

  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-hand: "Caveat", "Segoe Print", cursive;

  --step-small: 15px;
  --step-body: clamp(18px, 1.1vw + 14px, 21px);
  --step-hand: clamp(22px, 2.4vw, 32px);
  --step-head: clamp(40px, 6vw, 88px);
  --step-display: clamp(56px, 11vw, 168px);

  --margin: clamp(16px, 3vw, 40px);
  --section: clamp(120px, 16vw, 240px);
  --stack: clamp(16px, 2vw, 28px);

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

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); color-scheme: dark; }
body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--on-ground);
  font-family: var(--font-display);
  font-size: var(--step-body);
  font-weight: 500;
  line-height: 1.5;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, figure, blockquote { margin: 0; }
h1, h2, h3 { font-weight: 500; font-style: italic; text-wrap: balance; letter-spacing: -0.02em; line-height: 0.98; }
img, svg, canvas { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
::selection { background: var(--thread); color: var(--paper); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }

.hand { font-family: var(--font-hand); font-size: var(--step-hand); font-weight: 600; line-height: 1.15; font-style: normal; letter-spacing: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- memory texture: grain, vignette, light leaks (shared/grain.js) ---------- */
.texture { position: fixed; inset: 0; pointer-events: none; z-index: 50; }
.texture .grain { position: absolute; inset: -64px; opacity: 0.06; mix-blend-mode: overlay; background-size: 128px 128px; }
.texture .vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgb(0 0 0 / 0.55) 100%); } /* taste-skill-ignore: vignette, DESIGN.md overrides */
.texture .leak { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; opacity: 0.16; mix-blend-mode: screen; filter: blur(60px); }
.texture .leak.a { background: radial-gradient(circle, #ffb36b 0%, transparent 65%); /* taste-skill-ignore: light leak */ top: -25vmax; left: -20vmax; }
.texture .leak.b { background: radial-gradient(circle, #e2566a 0%, transparent 65%); /* taste-skill-ignore: light leak */ bottom: -30vmax; right: -25vmax; }

@media (prefers-reduced-motion: reduce) {
  .texture .leak { display: none; }
}