/* Reset, elements, shared primitives */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  color:var(--black);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
body.is-locked{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .js-reveal{opacity:1 !important;transform:none !important}
}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
.section{padding-block:var(--sec)}
.section--dark{background:var(--black);color:var(--white)}

h1,h2,h3{margin:0;font-family:var(--sans);font-weight:600;letter-spacing:-.025em;line-height:1.04;text-wrap:balance}
h1{font-size:clamp(2.6rem,6.4vw,4.6rem)}
h2{font-size:clamp(2rem,4.4vw,3.2rem);max-width:17ch}
h3{font-size:clamp(1.18rem,1.9vw,1.5rem);line-height:1.15}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}

.eyebrow{
  display:block;margin:0 0 1.2rem;
  font-family:var(--mono);font-size:.7rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--grey);
}
.section--dark .eyebrow{color:var(--accent)}

.lede{font-size:clamp(1.02rem,1.35vw,1.16rem);line-height:1.62;color:var(--grey);max-width:60ch}
.section--dark .lede{color:var(--grey-dk)}

.head{max-width:60ch;margin-bottom:clamp(2.2rem,4.5vw,3.8rem)}
.head .lede{margin-top:1.4rem}

.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:1rem 1.8rem;border:1px solid transparent;
  font-family:var(--mono);font-size:.75rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.btn::after{content:"\2192";font-family:var(--sans);font-size:.95rem;transition:transform .2s ease}
.btn:hover::after{transform:translateX(4px)}
.btn--solid{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn--solid:hover{background:var(--accent-dk);border-color:var(--accent-dk)}
.btn--line{background:transparent;border-color:currentColor}
.btn--line:hover{background:var(--black);color:var(--white);border-color:var(--black)}
.section--dark .btn--line:hover{background:var(--white);color:var(--black);border-color:var(--white)}

.note{
  border-left:2px solid var(--accent);
  padding:1rem 0 1rem 1.3rem;margin-top:1.6rem;
  font-size:.91rem;line-height:1.6;color:var(--grey);
}
.section--dark .note{color:var(--grey-dk)}
.note strong{display:block;margin-bottom:.3rem;font-weight:600;color:var(--black)}
.section--dark .note strong{color:var(--white)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:.5rem;top:.5rem;z-index:100;background:var(--accent);color:var(--on-accent);padding:.6rem 1rem}

.js-reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.js-reveal.is-in{opacity:1;transform:none}