/* ============================================================
   BASE, reset + typography + layout primitives
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--body);color:var(--ink);background:var(--porcelain);
  font-size:1rem;line-height:1.62;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul,ol{list-style:none}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.08;letter-spacing:-.015em;color:var(--slate)}
h1{font-size:var(--h1);font-weight:600}
h2{font-size:var(--h2)}
h3{font-size:var(--h3)}
strong,b{font-weight:700}

.wrap{width:min(100% - 2.4rem,var(--wrap));margin-inline:auto}
.narrow{width:min(100% - 2.4rem,var(--wrap-narrow));margin-inline:auto}
.mx-auto{margin-inline:auto}
.mt-1{margin-top:.6rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.6rem}.mt-4{margin-top:2.4rem}

.section{padding-block:clamp(3rem,5vw,5.5rem)}
.section.tight{padding-block:clamp(2rem,3.5vw,3.5rem)}
.on-paper{background:var(--paper)}
.on-tint{background:var(--mint-soft)}
.on-slate{background:var(--slate);color:#DCE9E7}
.on-slate h1,.on-slate h2,.on-slate h3{color:#fff}

/* skip link + a11y */
.skip{position:absolute;left:-999px;top:0;background:var(--slate);color:#fff;padding:.7rem 1rem;z-index:200;border-radius:0 0 var(--radius-sm) 0}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--mint);outline-offset:2px;border-radius:3px}

/* eyebrow / heads */
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mint-2)}
.head{max-width:60ch;margin-bottom:2.4rem}
.head.center{margin-inline:auto;text-align:center}
.head .lead{margin-top:.9rem}
.lead{font-size:var(--lead);color:var(--ink-soft);line-height:1.55}

/* prose */
.prose{max-width:68ch}
.prose p{margin-bottom:1.05rem;color:var(--ink-soft)}
.prose p:last-child{margin-bottom:0}
.prose h2{margin:2rem 0 .8rem}
.prose h3{margin:1.5rem 0 .6rem}
.prose ul{margin:0 0 1.1rem}
.prose ul li{position:relative;padding-left:1.7rem;margin-bottom:.55rem;color:var(--ink-soft)}
.prose ul li::before{content:"";position:absolute;left:.15rem;top:.62em;width:.5rem;height:.5rem;border-radius:2px;background:var(--mint);transform:rotate(45deg)}

/* reveal on scroll (enhanced: stagger + directional variants) */
[data-r]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-r].in{opacity:1;transform:none}
[data-r][data-from="left"]{transform:translateX(-26px)}
[data-r][data-from="right"]{transform:translateX(26px)}
[data-r][data-from="scale"]{transform:scale(.94)}
[data-d="1"]{transition-delay:.06s}[data-d="2"]{transition-delay:.12s}
[data-d="3"]{transition-delay:.18s}[data-d="4"]{transition-delay:.24s}
[data-d="5"]{transition-delay:.3s}[data-d="6"]{transition-delay:.36s}
/* stagger: children of a [data-stagger] get an incrementing delay set in JS */
[data-stagger]>*{opacity:0;transform:translateY(24px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
[data-stagger].in>*{opacity:1;transform:none}

/* count-up numbers hold layout while animating */
[data-count]{font-variant-numeric:tabular-nums}

/* scroll progress bar */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--mint),var(--slate));z-index:300;transition:width .1s linear}

/* dev note (localhost only) */
.devnote{border:1.5px dashed var(--coral);background:#FBEDE8;color:var(--coral-2);padding:.7rem 1rem;border-radius:var(--radius-sm);font-size:.85rem;font-family:var(--mono);margin:1rem 0}
.devnote.center{text-align:center;margin-inline:auto;max-width:60ch}