*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{background:var(--ink);color:var(--paper);font-family:var(--font-body);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--font-head);font-weight:800;text-transform:uppercase;line-height:.9;letter-spacing:-.01em}
h1{font-size:clamp(44px,9vw,120px)}
h2{font-size:clamp(30px,5vw,64px)}
p{font-size:clamp(15px,1.4vw,17px)}
.container{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.section{padding-block:clamp(56px,9vw,120px)}
.eyebrow{font-family:var(--font-head);font-weight:700;letter-spacing:.3em;text-transform:uppercase;font-size:12px;color:var(--blood)}
.lead{color:var(--muted);max-width:60ch}

/* film grain overlay */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.05;
  background-image:repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 3px);mix-blend-mode:overlay}

/* scroll reveal: content is always visible (CSP-safe, no-JS-safe).
   JS adds .in for a one-time, transform-only entrance that never hides content. */
@media (prefers-reduced-motion:no-preference){
  .reveal{transition:transform .6s ease}
  .case-tile.in,.section.in{}
}