/* ============================================================================
   STAGE 3 — BASE: reset, typography, layout primitives
   ========================================================================= */

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + var(--space-5));
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  letter-spacing:var(--ls-body);
  font-feature-settings:"cv05" 1,"cv08" 1,"ss03" 1,"tnum" 0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }

h1,h2,h3,h4,h5{
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--fw-semi);
  line-height:var(--lh-heading);
  letter-spacing:var(--ls-heading);
  text-wrap:balance;
}
h1{ font-size:var(--fs-h1); line-height:var(--lh-tight); letter-spacing:var(--ls-display); }
h2{ font-size:var(--fs-h2); line-height:var(--lh-tight); }
h3{ font-size:var(--fs-h3); }
h4{ font-size:var(--fs-h4); }

p{ margin:0; text-wrap:pretty; }
ul,ol{ margin:0; padding:0; list-style:none; }

a{ color:inherit; text-decoration:none; }

button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; padding:0; cursor:pointer; }

hr{ border:0; border-top:var(--border) solid var(--line); margin:0; }

::selection{ background:var(--burgundy); color:#fff; }

/* --- Focus: always visible for keyboard, never for mouse ----------------- */
:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
  border-radius:var(--radius);
}

.skip{
  position:absolute; left:var(--space-4); top:-100px;
  z-index:var(--z-modal);
  padding:var(--space-3) var(--space-5);
  background:var(--ink); color:#fff;
  font-size:var(--fs-sm); font-weight:var(--fw-semi);
  transition:top var(--dur-2) var(--ease);
}
.skip:focus{ top:var(--space-4); }

/* --- Layout primitives --------------------------------------------------- */

.shell{
  width:100%;
  max-width:calc(var(--page-max) + var(--page-pad) * 2);
  margin-inline:auto;
  padding-inline:var(--page-pad);
}
.shell--narrow{ max-width:calc(var(--page-narrow) + var(--page-pad) * 2); }

.section{
  padding-block:var(--section-y);
  background:var(--bg);
  color:var(--text);
  position:relative;
}
.section--lg{ padding-block:var(--section-y-lg); }
.section--flush-top{ padding-top:0; }

/* 12 / 8 / 4 column grid */
.grid{
  display:grid;
  grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr));
  gap:var(--grid-gap);
}
@media (max-width:1024px){ :root{ --grid-cols:8; } }
@media (max-width:640px){  :root{ --grid-cols:4; } }

.col-span-3 { grid-column:span 3; }
.col-span-4 { grid-column:span 4; }
.col-span-5 { grid-column:span 5; }
.col-span-6 { grid-column:span 6; }
.col-span-7 { grid-column:span 7; }
.col-span-8 { grid-column:span 8; }
.col-span-12{ grid-column:span 12; }
@media (max-width:1024px){
  .col-span-3,.col-span-4{ grid-column:span 4; }
  .col-span-5,.col-span-6,.col-span-7,.col-span-8,.col-span-12{ grid-column:span 8; }
}
@media (max-width:640px){
  [class*="col-span-"]{ grid-column:span 4; }
}

.stack > * + *{ margin-top:var(--flow,var(--space-4)); }

/* --- Type utilities ------------------------------------------------------ */

.eyebrow{
  display:inline-flex; align-items:center; gap:var(--space-3);
  margin:0;
  font-family:var(--font-mono);
  font-size:var(--fs-eyebrow);
  font-weight:var(--fw-medium);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--text-muted);
}
.eyebrow::before{
  content:"";
  width:24px; height:1px;
  background:var(--accent);
  flex:none;
}
.eyebrow--plain::before{ display:none; }

.display{
  font-family:var(--font-display);
  font-size:var(--fs-display);
  font-weight:var(--fw-semi);
  line-height:var(--lh-display);
  letter-spacing:var(--ls-display);
  margin:0;
}

.lead{
  font-size:var(--fs-lead);
  line-height:1.52;
  color:var(--text-muted);
  max-width:62ch;
}

.muted{ color:var(--text-muted); }
.faint{ color:var(--text-faint); }
.accent{ color:var(--accent); }
.is-dark .accent{ color:var(--focus-on-dark); }

.measure{ max-width:62ch; }
.measure-sm{ max-width:46ch; }

.mono{
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  letter-spacing:var(--ls-mono);
  font-variant-numeric:tabular-nums;
}

/* Section index numerals — 01 / 02 / 03 */
.numeral{
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  letter-spacing:var(--ls-mono);
  color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.is-dark .numeral{ color:var(--focus-on-dark); }

/* --- Reveal on scroll ---------------------------------------------------- */
.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity var(--dur-3) var(--ease-out),
             transform var(--dur-3) var(--ease-out);
  transition-delay:var(--reveal-delay,0ms);
}
.reveal.is-in{ opacity:1; transform:none; }

/* No JS: never leave content invisible */
.no-js .reveal{ opacity:1; transform:none; }

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