/* ============================================================
   HEFT — reset + document defaults + type primitives
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
:focus-visible{outline:2px solid var(--brg);outline-offset:3px;border-radius:6px}

h1,h2,h3{font-weight:700;letter-spacing:-.035em;line-height:1.05;margin:0;text-wrap:balance}
h1{font-size:clamp(38px,5.2vw,68px);letter-spacing:-.04em}
h2{font-size:clamp(30px,3.6vw,50px)}
h3{font-size:17px;font-weight:600;letter-spacing:-.015em;line-height:1.3}
p{margin:0}

.lede{color:var(--muted);font-size:clamp(15px,1.1vw,17px);max-width:58ch}
.kicker{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--faint)}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brg);opacity:.75}

/* scroll reveal */
/* The reveal animation hides blocks until the script shows them. If the script
   never runs (bad connection, blocker, browser error) the page must still be
   readable - so the hiding only applies when JS marked the document alive. */
.rise{transition:opacity .7s ease,transform .7s var(--ease)}
.js .rise{opacity:0;transform:translateY(18px)}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none}
  *{animation:none!important;transition-duration:.01ms!important}
}