:root {
  --cream: #FAF5EA;  --ink: #1E1A14;  --butter: #F3C44F;
  --ochre: #8C5E0C;  --night: #16130E; --white: #FFFFFF;
  --border: #E6DCC4; --border-dark: #3A3325; --butter-hover: #E2A93A;
  --shadow: 0 12px 32px rgba(30, 26, 20, 0.10);
  --r-1: 8px; --r-2: 16px; --r-3: 24px;
  --t-fast: 200ms; --t-move: 500ms; --t-page: 300ms; --t-draw: 900ms; --t-hello: 700ms; --t-hold: 2100ms; --ease: cubic-bezier(0.2, 0, 0, 1);
  --max: 1280px; --gutter: 24px; --margin: 32px; --section: 112px;
  --display: "Fredoka", "Fredoka Fallback", system-ui, sans-serif;
  --text: "Space Grotesk", "Space Grotesk Fallback", system-ui, sans-serif;
  --fs-display: 64px; --fs-h1: 44px; --fs-h2: 28px; --fs-lead: 20px; --fs-body: 17px; --fs-small: 14px; --fs-ui: 15px;
  --lh-tight: 1.15; --lh-body: 1.55;
  --header: 64px; --control: 44px; --tag: 28px; --pill: 34px; --menu: 42px; --stage-max: 1120px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --grain: 0.04; --stagger: 60ms; --rise: 16px;
  --lockup: 32px;
}
@media (max-width: 768px) {
  :root { --margin: 20px; --section: 72px; --fs-display: 40px; --fs-h1: 32px; --fs-h2: 22px; --fs-lead: 18px; --fs-body: 16px; }
}