/* ============================================================
   base.css — reset, fluid typography, layout primitives, a11y
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;text-rendering:optimizeLegibility;overflow-x:hidden;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.7;
  color:var(--ink);
  background:
    radial-gradient(80% 55% at 12% -5%, rgba(244,207,163,.20), transparent 60%),
    radial-gradient(72% 55% at 105% 32%, rgba(227,167,161,.16), transparent 55%),
    var(--cream);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}

/* ---- Typography ---- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;line-height:1.05;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
h1{font-size:var(--step-5)}
h2{font-size:var(--step-4)}
h3{font-size:var(--step-2)}
p{text-wrap:pretty}
em{font-style:italic}
strong{font-weight:700}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
::selection{background:var(--sun-3);color:var(--ink)}

/* ---- Layout primitives ---- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}
.measure{max-width:var(--measure)}
.stack>*+*{margin-top:1rem}
.center{text-align:center;margin-inline:auto}

.eyebrow{
  display:inline-flex;align-items:center;gap:.65rem;
  font-family:var(--font-body);font-weight:700;font-size:var(--step--1);
  letter-spacing:.2em;text-transform:uppercase;color:var(--clay)
}
.eyebrow::before{content:"";width:26px;height:1.5px;background:currentColor;opacity:.7}

.lead{font-size:var(--step-1);color:var(--ink-soft);line-height:1.55}

/* ---- Accessibility ---- */
:focus-visible{outline:3px solid var(--clay);outline-offset:3px;border-radius:6px}
.skip-link{
  position:absolute;left:1rem;top:-100px;z-index:200;
  background:var(--surface);color:var(--clay-deep);font-weight:700;
  padding:.7rem 1.1rem;border-radius:var(--r-sm);box-shadow:var(--shadow-1);
  transition:top .25s var(--ease)
}
.skip-link:focus{top:1rem}
.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}

/* ---- Reveal: content is VISIBLE by default. Hidden state is added
   only when JS confirms motion is allowed (html.has-motion). This
   keeps no-JS and reduced-motion users fully served, and protects LCP. */
.has-motion [data-reveal] > *,
.has-motion [data-reveal-self]{opacity:0;transform:translateY(32px);filter:blur(12px);transition:opacity .9s var(--ease-out),transform 1s var(--ease-out),filter .9s var(--ease-out)}
.has-motion [data-reveal] > *.in,
.has-motion [data-reveal-self].in{opacity:1;transform:none;filter:blur(0)}
/* hero headline line-mask reveal (pure CSS, runs once on load) */
.has-motion .hero h1 .line > *{animation:lineUp 1.05s var(--ease) both}
.has-motion .hero h1 .line:nth-child(2) > *{animation-delay:.12s}
.has-motion .hero h1 .line:nth-child(3) > *{animation-delay:.24s}
@keyframes lineUp{from{transform:translateY(115%)}to{transform:translateY(0)}}

/* subtle film grain over the whole page (adds depth, never busy) */
body::after{content:"";position:fixed;inset:0;z-index:30;pointer-events:none;opacity:.03;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion:reduce){body::after{opacity:.02}}