/* ==========================================================================
   base — reset, type primitives, shared atoms
   ========================================================================== */

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

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.6;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

body.is-loading { overflow: hidden; }

@media (hover: hover) and (pointer: fine) {
  body.has-cursor, body.has-cursor * { cursor: none !important; }
}

img, video, svg { display: block; max-width: 100%; }
video { object-fit: cover; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }

::selection { background: var(--clay); color: var(--paper); }

:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ── type primitives ───────────────────────────────────────────────────── */

.eyebrow,
.sectionmark {
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.eyebrow { display: inline-flex; align-items: center; gap: 0.8em; }

/* A surveyor's tick rather than a dot — the mark this practice would use. */
.eyebrow__tick {
  width: 9px; height: 9px;
  border-left: 1px solid var(--clay);
  border-bottom: 1px solid var(--clay);
}

.sectionmark {
  display: flex;
  align-items: center;
  gap: 1em;
}

.sectionmark span { color: var(--clay); font-variant-numeric: tabular-nums; }

.sectionmark::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.sectionmark--light { color: var(--on-dark-2); }
.sectionmark--light::after { background: rgba(244, 241, 234, 0.2); }

.line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

.line__in { display: inline-block; will-change: transform; }

.ch { display: inline-block; white-space: pre; transform-origin: 50% 100%; }

/* ── grain ─────────────────────────────────────────────────────────────── */

/* Lighter than a dark build needs — on paper, grain reads as tooth, and too
   much of it turns the whole page grey. */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 300;
  pointer-events: none;
  background-image: var(--grain-src);
  opacity: 0.035;
  mix-blend-mode: multiply;
}

/* ── reduced motion ────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.08s !important;
  }
}