/* Designer lane: palette, type scale, motion tokens.
   Palette: warm flour cream + deep espresso neutrals, ONE accent (baked-crust terracotta).
   Contrast (WCAG): ink/bg 16.5:1, muted/bg 5.8:1, accent/bg 4.6:1, accent-strong/surface 5.4:1,
   on-dark/dark 16.1:1, accent-on-dark/dark 7.2:1, white/accent 5.0:1. */
:root{
  /* colour */
  --bg:#faf6ef; --surface:#f3e9d8; --ink:#1d1712; --muted:#6b5f53;
  --accent:#b4531f; --accent-strong:#9a4416; --accent-soft:#e8c9b0;
  --dark:#17110c; --dark-2:#241a12; --on-dark:#f5ede0; --muted-on-dark:#a8a093; --accent-on-dark:#e8894f;
  --line:rgba(29,23,18,.14); --line-on-dark:rgba(245,237,224,.16);
  --focus:#b4531f;

  /* type: system fonts only */
  --font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:ui-serif,Georgia,"Iowan Old Style","Palatino Linotype",serif;
  --display:clamp(3rem,9vw,7rem);
  --h1:clamp(3rem,9vw,7rem);
  --h2:clamp(2.2rem,5.5vw,4.5rem);
  --h3:clamp(1.4rem,2.6vw,2rem);
  --step:clamp(1.5rem,3vw,2.5rem);      /* scrollytelling step text */
  --giant:clamp(5rem,18vw,16rem);       /* changing word / marquee */
  --body:clamp(1rem,.4vw + .95rem,1.2rem);
  --small:.875rem;
  --track-tight:-.04em; --track-display:-.025em; --track-caps:.14em;
  --lh-tight:.98; --lh-head:1.08; --lh-body:1.6;
  --measure:65ch;

  /* space, shape, depth */
  --section:clamp(5rem,12vw,10rem);
  --gutter:clamp(1.25rem,5vw,4rem);
  --max:78rem;
  --space-1:.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2.5rem; --space-5:4rem;
  --radius-s:.5rem; --radius:1rem; --radius-l:1.75rem; --radius-pill:999px;
  --shadow-s:0 1px 2px rgba(60,35,15,.08),0 2px 8px rgba(60,35,15,.06);
  --shadow:0 10px 30px -8px rgba(60,35,15,.18),0 2px 6px rgba(60,35,15,.06);
  --shadow-l:0 30px 60px -20px rgba(60,35,15,.3);

  /* CSS-only accents */
  --grad-text:linear-gradient(100deg,var(--accent) 0%,#e8894f 50%,var(--accent) 100%);
  --glow:radial-gradient(60% 60% at 50% 40%,rgba(232,137,79,.35),rgba(232,137,79,0) 70%);
  --grad-dark:linear-gradient(160deg,var(--dark-2),var(--dark));

  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur-fast:400ms; --dur:700ms; --dur-slow:900ms;
  --stagger:60ms;
  --rise:1.1em;          /* reveal travel distance */
  --blur:6px;            /* reveal start blur */
  --marquee:60s;         /* slow giant marquee loop */
}

/* Reusable accents (opt-in classes) */
.grad-text{background:var(--grad-text);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.grad-sweep{animation:grad-sweep 6s var(--ease) infinite alternate}
@keyframes grad-sweep{to{background-position:100% 0}}
.display{font-family:var(--font-display);font-size:var(--display);line-height:var(--lh-tight);letter-spacing:var(--track-tight);font-weight:800}
.eyebrow{font-size:var(--small);letter-spacing:var(--track-caps);text-transform:uppercase;font-weight:600;color:var(--accent-strong)}

:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){
  :root{--dur-fast:0ms;--dur:0ms;--dur-slow:0ms;--stagger:0ms;--rise:0;--blur:0px}
  .grad-sweep{animation:none}
}