/* ============================================================
   layout.css — reset, base type, container, grid, sections
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--t-base);
  line-height:var(--lh-normal);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background var(--slow), color var(--slow);
}
h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  line-height:var(--lh-tight);
  letter-spacing:-.02em;
  font-weight:var(--fw-semibold);
  margin:0;
  text-wrap:balance;
}
p{margin:0;text-wrap:pretty}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
img,svg{display:block;max-width:100%}
ul,ol{margin:0}
button{font-family:inherit}
code,kbd,pre,samp{font-family:var(--font-mono)}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:2px}

/* ---- Skip link ---- */
.skip-link{
  position:absolute;left:var(--s4);top:-60px;z-index:200;
  background:var(--primary);color:var(--on-primary);
  padding:10px 18px;border-radius:var(--r-md);font-weight:var(--fw-semibold);
  transition:top var(--fast);
}
.skip-link:focus{top:var(--s4);text-decoration:none}

/* ---- Container ---- */
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--s5)}
.container--prose{max-width:var(--maxw-prose)}
@media (max-width:560px){.container{padding-inline:var(--s4)}}

/* ---- Sections ---- */
.section{padding-block:var(--s9)}
.section--tight{padding-block:var(--s8)}
.section--alt{background:var(--bg-subtle)}
.section--sunken{background:var(--bg-sunken)}
@media (max-width:760px){.section{padding-block:var(--s8)}.section--tight{padding-block:var(--s7)}}

/* ---- Section heading ---- */
.section-head{max-width:640px;margin-bottom:var(--s7)}
.section-head--center{margin-inline:auto;text-align:center}
.eyebrow{
  font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-subtle);margin-bottom:var(--s3);display:block;
}
.section-head h2{font-size:var(--t-3xl);margin-bottom:var(--s3)}
.section-head p{color:var(--text-muted);font-size:var(--t-lg)}
@media (max-width:560px){.section-head h2{font-size:var(--t-2xl)}}

/* ---- Grid helpers ---- */
.grid{display:grid;gap:var(--s5)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* ---- Utilities ---- */
.muted{color:var(--text-muted)}
.subtle{color:var(--text-subtle)}
.mono{font-family:var(--font-mono)}
.center{text-align:center}
.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}
.stack{display:flex;flex-direction:column}
.flow > * + *{margin-top:var(--s4)}