/* ==========================================================================
   Base — reset, typography, utilities
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 12px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-display);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

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

h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }

::selection { background: var(--marker); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--marker);
}
.on-dark :focus-visible { outline-color: var(--on-dark); box-shadow: 0 0 0 5px var(--moss); }

/* ---- Headings ---------------------------------------------------------- */
h1, h2, h3 {
  font-weight: 600;
  font-stretch: 108%;
  letter-spacing: -0.022em;
  line-height: 1.04;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 5.4vw, 4.9rem); letter-spacing: -0.03em; line-height: 0.98; }
h2 { font-size: clamp(1.95rem, 3.5vw, 3.1rem); }
h3 { font-size: clamp(1.15rem, 1.5vw, 1.4rem); line-height: 1.15; letter-spacing: -0.012em; }
p { text-wrap: pretty; }

/* ---- Mono labels ------------------------------------------------------- */
.label {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.35;
}
.label--soft { color: var(--ink-soft); }
.on-dark .label--soft { color: var(--on-dark-soft); }

/* ---- Layout helpers ---------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: var(--pad);
}
@media (min-width: 1100px) {
  .wrap { padding-left: calc(var(--pad) + var(--rail)); }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: fixed; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 0.8em 1.1em;
  font-family: var(--f-mono); font-size: 0.78rem; text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip:focus { top: 12px; }

/* ---- Section chrome ----------------------------------------------------- */
.section { position: relative; padding-block: var(--section); }
.section--deep { background: var(--paper-deep); }
.section--ink  { background: var(--ink); color: var(--on-dark); }
.section--moss { background: var(--moss); color: var(--on-dark); }

/* Resin-bound aggregate on dark ground, porcelain fleck on light */
.section--ink::before, .section--moss::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--speckle); opacity: 0.06; mix-blend-mode: screen;
}
.section--deep::before, .hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--speckle-paper); opacity: 0.045; mix-blend-mode: multiply;
}
.section > *, .hero > * { position: relative; }

.section__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 18px;
  align-items: end;
  margin-bottom: clamp(36px, 5vw, 72px);
}
.section__head .label { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.7em; }
.section__head .label::before {
  content: ""; width: 9px; height: 9px; background: var(--marker);
  outline: 1px solid var(--ink); outline-offset: 0;
}
.on-dark .section__head .label::before, .section--ink .section__head .label::before,
.section--moss .section__head .label::before { outline-color: transparent; }
.section__title { grid-column: 1 / span 7; }
.section__intro { grid-column: 9 / span 4; color: var(--ink-soft); font-size: 1rem; }
.section--ink .section__intro, .section--moss .section__intro { color: var(--on-dark-soft); }

@media (max-width: 899px) {
  .section__title, .section__intro { grid-column: 1 / -1; }
}

/* ---- Reveal (progressive) --------------------------------------------- */
.js .reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: var(--d, 0s);
}
.js .reveal.is-in { opacity: 1; transform: none; }

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