/* ============================================================
   Base — reset, typography defaults, shared primitives.
   ============================================================ */

/* Metric-matched fallback faces for the Google-hosted web fonts.
   Sized/positioned (via size-adjust + the override descriptors) to match
   Manrope / IBM Plex Mono's own metrics as closely as possible, so the FOUT
   -> web-font swap doesn't reflow the page (fixes measured CLS on index.html).
   Values derived from each font's OS/2 + hhea tables vs. the local fallback. */
@font-face{
  font-family:'Manrope Fallback';
  src:local('Arial');
  ascent-override:105.48%;
  descent-override:29.69%;
  line-gap-override:0%;
  size-adjust:101.06%;
}
@font-face{
  font-family:'IBM Plex Mono Fallback';
  src:local('Courier New');
  ascent-override:102.52%;
  descent-override:27.5%;
  line-gap-override:0%;
  size-adjust:99.98%;
}

:root{
  /* local: reveal-on-scroll stagger step (not a global design token) */
  --reveal-stagger: 70ms;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:no-preference){
  html{ scroll-behavior:smooth; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--sans);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.6;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{ margin:0; font-weight:300; line-height:1.06; letter-spacing:-.018em; }
h1 b,h2 b,h3 b{ font-weight:600; }
p{ margin:0; text-wrap:pretty; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
ul{ margin:0; padding:0; list-style:none; }
strong{ font-weight:600; }
em{ font-style:normal; color:var(--peri-ink); }

::selection{ background:var(--peri-deep); color:#fff; }

/* ---- Reusable type primitives ---- */
.eyebrow{
  font-family:var(--mono);
  font-size:var(--fs-label);
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--slate);
}
.eyebrow--accent{ color:var(--peri-ink); }
.eyebrow--on-dark{ color:var(--peri-deep); }

.mono{ font-family:var(--mono); letter-spacing:.02em; }
.lead{ font-size:var(--fs-lead); font-weight:300; line-height:1.5; color:var(--text-soft); }

/* ---- Layout helpers ---- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.container--tight{ max-width:var(--maxw-tight); }

.section{ padding-block:var(--sp-7); }
.section--tight{ padding-block:var(--sp-6); }

.divider{ height:1px; background:var(--rule); border:0; margin:0; }

/* numbered section kicker:  "01 — LABEL" */
.kicker{ display:inline-flex; align-items:baseline; gap:10px; }
.kicker .num{ font-family:var(--mono); font-size:var(--fs-label); color:var(--sage); letter-spacing:.1em; }

/* ---- Scroll reveal (progressive enhancement) ----
   Scoped to `.js` (set by the inline head script) so the hiding rules never
   apply when JS doesn't run — without it, [data-reveal] content must render
   as normal, settled layout, not permanently opacity:0. */
@media (prefers-reduced-motion:no-preference){
  .js [data-reveal]{
    opacity:0; transform:translateY(var(--move-md));
    transition:opacity var(--dur-slow) var(--ease-emphasized), transform var(--dur-slow) var(--ease-emphasized);
  }
  /* Transform-only variant for LCP-candidate content: opacity never leaves 1
     (opacity:0 defers the element's paint, pushing back LCP), only the
     translate offset animates. Same duration/ease/stagger semantics.
     Extra specificity ([data-reveal][data-reveal="slide"]) beats the bare
     `.js [data-reveal]` rule above regardless of source order. */
  .js [data-reveal][data-reveal="slide"]{
    opacity:1;
    transition:transform var(--dur-slow) var(--ease-emphasized);
  }
  .js [data-reveal].is-visible{ opacity:1; transform:none; }
  .js [data-reveal-delay="1"]{ transition-delay:calc(var(--reveal-stagger) * 1); }
  .js [data-reveal-delay="2"]{ transition-delay:calc(var(--reveal-stagger) * 2); }
  .js [data-reveal-delay="3"]{ transition-delay:calc(var(--reveal-stagger) * 3); }
}

/* accessible focus */
a:focus-visible,button:focus-visible{ outline:2px solid var(--peri-ink); outline-offset:3px; border-radius:2px; }