/* ============================================================
   BASE — reset, typography, primitives, reveal
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Jost:wght@300;400;500;600&family=Saira+Condensed:wght@500;600;700;800&family=Oswald:wght@400;500;600;700&display=swap');

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--font-body);
  background:var(--ink);
  color:var(--white);
  font-size:var(--fs-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:none; }
::selection{ background:var(--red); color:#fff; }

/* ---- type ---- */
.display{
  font-family:var(--font-display);
  font-weight:var(--display-weight);
  letter-spacing:var(--display-tracking);
  line-height:.96;
  text-wrap:balance;
}
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:var(--display-weight); line-height:1.0; letter-spacing:var(--display-tracking); }

.eyebrow{
  font-family:var(--font-body);
  font-weight:600;
  font-size:var(--fs-eyebrow);
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--mut);
  display:inline-flex; align-items:center; gap:.85em;
}
.eyebrow::before{
  content:""; width:26px; height:2px; background:var(--red); display:inline-block;
}
.eyebrow.center{ justify-content:center; }
.lead{ font-size:var(--fs-lead); line-height:1.5; color:var(--white); font-weight:300; }
.muted{ color:var(--mut); }
.red{ color:var(--red); }

p{ text-wrap:pretty; }
p + p{ margin-top:1.1em; }

/* ---- layout primitives ---- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wrap-narrow{ max-width:var(--maxw-narrow); }
.section{ padding-block:var(--sec-y); position:relative; }
.section.tight{ padding-block:clamp(56px,7vw,108px); }

.grid{ display:grid; gap:clamp(20px,2.4vw,40px); }
.cols-2{ grid-template-columns:repeat(2,1fr); }
.cols-3{ grid-template-columns:repeat(3,1fr); }
.cols-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:980px){ .cols-3,.cols-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px){ .cols-2,.cols-3,.cols-4{ grid-template-columns:1fr; } }

.stack-sm > * + *{ margin-top:1rem; }
.stack > * + *{ margin-top:1.6rem; }
.stack-lg > * + *{ margin-top:2.6rem; }

/* light section */
.on-paper{ background:var(--paper); color:var(--ink-on-paper); }
.on-paper .eyebrow{ color:var(--mut-on-paper); }
.on-paper .lead{ color:var(--ink-on-paper); }
.on-paper .muted{ color:var(--mut-on-paper); }

/* ---- scroll reveal ---- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); will-change:opacity,transform; }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }
.reveal[data-d="5"]{ transition-delay:.40s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* clip-reveal for big headlines */
.line-mask{ overflow:hidden; display:block; }
.line-mask > span{ display:block; transform:translateY(105%); transition:transform .9s var(--ease-out); }
.line-mask > span[style]{ }
.reveal.in .line-mask > span,
.line-mask.in > span{ transform:none; }

/* grain overlay util */
.grain::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}