/* ============================================================
   Base : reset, typography, layout primitives, utilities.
   Depends on tokens.css.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{margin:0;padding:0}
/* header is non-sticky (position:relative), so anchors only need a small breathing gap */
section[id]{scroll-margin-top:24px}
::placeholder{color:var(--muted);opacity:1}
body{
  font-family:var(--body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
a{color:var(--accent-ink);text-decoration:none;transition:color var(--dur-1) var(--ease)}
a:hover{color:var(--accent)}
ul,ol{margin:0;padding:0;list-style:none}

/* ---- Headings ---- */
h1,h2,h3,h4{font-family:var(--display);font-weight:500;line-height:var(--lh-tight);
  margin:0;color:var(--ink);letter-spacing:-.01em}
p{margin:0}

/* ---- Focus (keyboard) ---- */
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
:where(.on-dark) :focus-visible{outline-color:var(--ember)}

/* ---- Skip link (a11y) ---- */
.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}
.skip-link{position:absolute;inset-inline-start:12px;top:-60px;z-index:1000;
  background:var(--ink);color:var(--on-dark);padding:10px 18px;border-radius:var(--r-sm);
  transition:top var(--dur-1) var(--ease)}
.skip-link:focus{top:12px;color:var(--on-dark)}

/* ---- Layout primitives ---- */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container.narrow{max-width:var(--container-narrow)}
.section{padding-block:var(--section-y)}
.section.tight{padding-block:clamp(40px,6vw,72px)}

/* Full-bleed dark band */
.band-dark{background:var(--espresso);color:var(--on-dark)}
/* any dark context (hero, dark bands, footer) flips heading + link color */
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4,
.band-dark h1,.band-dark h2,.band-dark h3,.band-dark h4{color:var(--on-dark)}
.on-dark{color:var(--on-dark)}
.on-dark a:not(.btn){color:var(--ember)}
.band-cream{background:var(--paper-2)}

/* ---- Section header block ---- */
.eyebrow{font-family:var(--body);font-weight:800;letter-spacing:.22em;
  text-transform:uppercase;font-size:var(--fs-xs);color:var(--accent-ink);margin:0 0 var(--s-3)}
.band-dark .eyebrow,.hero .eyebrow{color:var(--ember)}
.section-head{max-width:56ch}
.section-head .title{font-size:var(--fs-h1);margin:0 0 var(--s-3)}
.section-head .lead{font-size:var(--fs-lead);color:var(--muted);margin:0}
.band-dark .section-head .lead{color:var(--on-dark-muted)}

/* ---- Grid helpers ---- */
.grid{display:grid;gap:var(--s-5)}
@media(min-width:680px){.grid.cols-2{grid-template-columns:repeat(2,1fr)}
  .grid.cols-3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.grid.cols-4{grid-template-columns:repeat(4,1fr)}}

/* ---- Utilities ---- */
.text-center{text-align:center}
.mx-auto{margin-inline:auto}
.muted{color:var(--muted)}
.band-dark .muted{color:var(--on-dark-muted)}
.stack>*+*{margin-top:var(--s-4)}
.nowrap{white-space:nowrap}
.tnum{font-variant-numeric:tabular-nums}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- Scroll reveal (JS adds .reveal, IntersectionObserver adds .in) ---- */
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.06s}
.reveal.d2{transition-delay:.14s}
.reveal.d3{transition-delay:.22s}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}