/* ==========================================================================
   Base / Reset / Typography
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}
}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  /* clip, not hidden — overflow-x:hidden on an ancestor breaks position:sticky
     for any element inside it (forces overflow-y to a new scroll context);
     clip prevents horizontal scroll from full-bleed elements without that
     side effect. */
  overflow-x:clip;
  line-height:1.6;
  font-size:var(--fs-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
ul,ol{list-style:none}
button{font:inherit;cursor:pointer;background:none;border:none;color:inherit}
input,textarea,select{font:inherit;color:inherit}
:target{scroll-margin-top:calc(var(--nav-h) + 24px)}

::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:var(--ink)}
::selection{background:var(--orange);color:var(--white)}

/* Typography — Big Shoulders (condensed industrial display) carries the
   hierarchy through weight/size; Archivo is the body workhorse. Newsreader
   italic is reserved for pull-quotes only. Big Shoulders is already narrow,
   so tracking stays close to 0 rather than stacking on extra negative tracking. */
.display{font-family:var(--font-display);font-size:var(--fs-display);line-height:0.88;font-weight:800;letter-spacing:-0.01em;text-transform:uppercase}
.h1{font-family:var(--font-display);font-size:var(--fs-h1);line-height:0.96;font-weight:800;letter-spacing:-0.005em;text-transform:uppercase}
.h2{font-family:var(--font-display);font-size:var(--fs-h2);line-height:1;font-weight:700;letter-spacing:0;text-transform:uppercase}
.h3{font-family:var(--font-body);font-size:var(--fs-h3);line-height:1.25;font-weight:700;letter-spacing:-0.005em}
.lead{font-size:var(--fs-lead);line-height:1.7;color:var(--ink-soft);font-weight:400}
.small{font-size:var(--fs-small);color:var(--slate)}
.mono{font-family:var(--font-mono)}
em{font-style:italic;font-family:var(--font-serif);color:var(--ink)}

.label{
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  font-weight:500;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--ink);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.label::before{content:'';display:block;width:24px;height:2px;background:var(--orange)}
.label.center{justify-content:center}

.blockquote{
  position:relative;
  font-family:var(--font-serif);
  font-size:clamp(22px,2.6vw,32px);
  font-style:italic;
  color:var(--ink);
  line-height:1.4;
  max-width:34ch;
}
.blockquote::before{
  content:'"';
  display:block;
  font-family:var(--font-serif);
  font-style:normal;
  font-size:3.2em;
  line-height:0.5;
  color:var(--orange);
  margin-bottom:0.15em;
}

/* Layout helpers */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container-narrow{max-width:var(--container-narrow);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(64px,9vw,120px);position:relative}
.section-tight{padding-block:clamp(44px,6vw,76px);position:relative}
.grid{display:grid}
.flex{display:flex}

/* Inverted full-bleed band — the one deliberate contrast break per page,
   used sparingly (stats strip, footer) rather than a dark theme throughout */
.band-dark{background:var(--dark);color:var(--on-dark)}
.band-dark .label{color:var(--on-dark)}
.band-dark .label::before{background:var(--orange)}
.band-dark .lead{color:#C9C8C0}

/* Rule dividers instead of soft textured backgrounds */
.rule-top{border-top:1px solid var(--border)}
.rule-bottom{border-bottom:1px solid var(--border)}
.hairline{height:1px;background:var(--border);border:none}

/* Dimension-line annotation — a small technical-drawing flourish */
.dim-line{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;color:var(--slate);
}
.dim-line::before,.dim-line::after{content:'';flex:1;height:1px;background:var(--border)}

/* Reveal-on-scroll — visible by default; JS adds .in and removes the initial offset as a progressive enhancement */
[data-reveal]{
  opacity:0;
  transform:translateY(16px);
  transition:opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
[data-reveal].in{opacity:1;transform:translateY(0)}
.no-js [data-reveal],
[data-reveal].reveal-fallback{opacity:1;transform:none}

[data-reveal-stagger] > *{
  opacity:0;transform:translateY(14px);
  transition:opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
[data-reveal-stagger].in > *{opacity:1;transform:translateY(0)}