/* ============================================================
   base.css · resets, typography defaults, grain, layout helpers
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* Lenis smooth-scroll requirement */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* film grain overlay · warmth without weight */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("../assets/grain.svg");
  background-size: 180px;
  mix-blend-mode: multiply;
}
:root[data-theme="dark"] body::after { mix-blend-mode: screen; }

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

a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
ul { list-style: none; }

/* ---- headings ---- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 460;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  font-optical-sizing: auto;
}
h1 { font-size: var(--t-display-1); }
h2 { font-size: var(--t-display-2); }
h3 { font-size: var(--t-heading); }

p { max-width: 62ch; }
strong { font-weight: 600; }
em { font-style: italic; }

/* ---- layout helpers ---- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
}
.wrap--narrow { max-width: 760px; }

main { position: relative; z-index: 2; }

/* small mono label · sentence content stays sentence-case,
   only these utility labels are uppercased */
.label {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}

/* accent text */
.accent { color: var(--accent); }

/* numbered section header pattern */
.section {
  padding-block: clamp(64px, 9vw, 128px);
  position: relative;
}
.section__num {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  letter-spacing: var(--tracking-label);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
.section__num::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--accent);
  display: inline-block;
}

/* visually hidden but available to screen readers */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* visible focus for keyboard users */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* skip link */
.skip {
  position: absolute; left: 12px; top: -60px;
  background: var(--ink); color: var(--paper);
  padding: 10px 16px; border-radius: 8px; z-index: 999;
  transition: top var(--dur-fast) var(--ease);
}
.skip:focus { top: 12px; }

hr.rule { border: 0; height: 1px; background: var(--hairline); }