/* ==========================================================================
   base.css — reset, typography, layout primitives, motion primitives
   ========================================================================== */

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:var(--nav-h);
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit }
summary{ list-style:none; cursor:pointer }
summary::-webkit-details-marker{ display:none }
summary::marker{ content:"" }

:focus-visible{
  outline:2.5px solid var(--signal);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--white); padding:.8rem 1.2rem;
}
.skip:focus{ left:12px; top:12px }

/* --- type ---------------------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  line-height:1.06;
  letter-spacing:-.02em;
  margin:0;
}
h1{ font-size:clamp(2.5rem, 5.4vw, 4rem) }
h2{ font-size:clamp(2rem, 4.1vw, 3.1rem) }
h3{ font-size:clamp(1.16rem, 1.9vw, 1.4rem); line-height:1.2; letter-spacing:-.012em }
h4{ font-size:1.02rem }
p{ margin:0 0 1em }
figure,blockquote{ margin:0 }

h2 + .lede,
h2 + .checklist,
h3 + .lede{ margin-top:1.05rem }

.lede{
  font-size:clamp(1.02rem, 1.35vw, 1.15rem);
  line-height:1.72;
  color:var(--muted);
  max-width:62ch;
}
.on-ink .lede{ color:var(--muted-on-ink) }

.kicker{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.1em;
  color:var(--field);
  display:flex;
  align-items:center;
  gap:.6rem;
  margin:0 0 1.1rem;
}
.kicker::before{ content:""; width:26px; height:1px; background:currentColor; opacity:.55 }
.on-ink .kicker{ color:var(--signal) }

/* --- layout -------------------------------------------------------------- */
.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut) }
.sec{ padding-block:var(--sec-y); position:relative }
.sec--paper{ background:var(--paper) }
.sec--paper2{ background:var(--paper-2) }
.sec--ink{ background:var(--ink); color:var(--white) }
.sec--ink h2,.sec--ink h3,.sec--ink h4{ color:var(--white) }

.sec-head{
  display:grid;
  grid-template-columns:1fr auto;
  gap:2rem;
  align-items:end;
  margin-bottom:clamp(2.2rem, 4vw, 3.4rem);
}
.sec-head .lede{ margin:0; max-width:38ch }

/* --- motion primitives ---------------------------------------------------- */
[data-reveal]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay:var(--d, 0s);
}
[data-reveal].seen{ opacity:1; transform:none }

/* Wipe: a curtain slides off the element. Deliberately NOT clip-path on the
   element itself — clipping it to zero width makes its IntersectionObserver
   ratio zero, so the reveal would never trigger. */
[data-reveal="wipe"]{
  --wipe-bg:var(--paper-2);
  opacity:1;
  transform:none;
  position:relative;
  overflow:hidden;
}
[data-reveal="wipe"]::after{
  content:"";
  position:absolute; inset:0; z-index:2;
  background:var(--wipe-bg);
  transform-origin:right center;
  transition:transform 1s var(--ease-out);
  transition-delay:var(--d, 0s);
}
[data-reveal="wipe"].seen::after{ transform:scaleX(0) }
.sec--ink [data-reveal="wipe"],
.split [data-reveal="wipe"]{ --wipe-bg:var(--ink) }
.split__a [data-reveal="wipe"]{ --wipe-bg:var(--ink-2) }

@keyframes fadeUp{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }
@keyframes riseIn{ to{ transform:translateY(0) } }
@keyframes ping{
  0%{   box-shadow:0 0 0 0 rgba(77,134,238,.55) }
  70%{  box-shadow:0 0 0 9px rgba(77,134,238,0) }
  100%{ box-shadow:0 0 0 0 rgba(77,134,238,0) }
}
@keyframes pulse{
  0%{   transform:scale(.4); opacity:.85 }
  70%{  transform:scale(2.4); opacity:0 }
  100%{ opacity:0 }
}
@keyframes slide{ to{ transform:translateX(-50%) } }