*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;font-family:var(--font-ui);color:var(--ink);background:#fff;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--blue-hi);outline-offset:3px;border-radius:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:#fff;color:var(--ink);padding:10px 16px;border-radius:var(--r-pill);box-shadow:var(--shadow-soft)}
.skip:focus{top:12px}

/* Layout */
.wrap{width:min(var(--page),100% - 40px);margin-inline:auto}
.wrap-wide{width:min(var(--page-wide),100% - 40px);margin-inline:auto}
.section{position:relative;padding-block:clamp(56px,9vw,120px)}

/* Type. The serif italic word is the accent inside a bold heading. */
.h-hero{font-size:clamp(40px,5vw,72px);line-height:1.04;font-weight:700;letter-spacing:-.035em}
.h-sec{font-size:clamp(34px,4.2vw,60px);line-height:1.12;font-weight:700;letter-spacing:-.03em}
.h-sec-m{font-size:clamp(32px,3.4vw,46px);line-height:1.1;font-weight:700;letter-spacing:-.035em}
.accent{font-family:var(--font-accent);font-style:italic;font-weight:300;letter-spacing:-.02em}
.lead{font-size:clamp(16px,1.3vw,18px);line-height:1.5;color:var(--text-3)}
.body-m{font-size:17px;line-height:1.5;color:var(--text-2)}
.small{font-size:14px;line-height:1.45;color:var(--text-3)}

/* Section head: heading left, short descriptor right-aligned on desktop */
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px;margin-bottom:clamp(28px,4vw,48px)}
.sec-head p{max-width:300px;font-size:15px;line-height:1.45;color:var(--text-4)}

/* Reveal on scroll. js/reveal.js adds .is-in; without JS everything stays visible. */
.js .reveal{opacity:0;transform:translate3d(0,28px,0);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease);transition-delay:calc(var(--i,0) * 80ms)}
.js .reveal.is-in{opacity:1;transform:none}
.js .reveal-fade{opacity:0;transition:opacity var(--t-slow) var(--ease);transition-delay:calc(var(--i,0) * 80ms)}
.js .reveal-fade.is-in{opacity:1}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0ms!important}
  .js .reveal{transform:none}
}

/* Cross-document view transitions: short fade, header stays put. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s;animation-timing-function:var(--ease)}
.site-header{view-transition-name:site-header}

/* One very subtle paper grain over every page (static tile, no animation, no blend mode). Sits under the header and dialogs. */
body::after{content:"";position:fixed;inset:0;z-index:80;pointer-events:none;background:url(../assets/art/grain.png) 0 0/160px 160px}