/* ============================================================
   INTERLOCK — base: reset, document, typography, layout shells
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--green);color:var(--bg)}

/* fixed background grid, drifts with scroll (see reveals.js) */
#grid-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:72px 72px;
  opacity:.35;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,black 0%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,black 0%,transparent 100%);
}

.wrap{max-width:1200px;margin:0 auto;padding:0 32px;position:relative;z-index:1}

section{position:relative;z-index:1;padding:120px 0;border-top:1px solid var(--line)}
.sec-head{margin-bottom:64px}

h2{
  font-family:var(--disp);font-weight:700;
  font-size:clamp(1.8rem,3.4vw,2.8rem);
  line-height:1.12;letter-spacing:-.015em;
  max-width:24ch;
}

/* scroll-reveal hook (animated by reveals.js) */
.reveal{opacity:0}
.no-anim .reveal{opacity:1}

@media (max-width:768px){
  section{padding:88px 0}
  .wrap{padding:0 22px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}