/* ============================================================
   Base — reset, typography, motion primitives
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: var(--t-body);
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -0.005em;
  overflow-x: hidden;
}

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

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

/* ---------- Type ---------- */
.t-display-xl, .t-display, .t-h1, .t-h2, .t-h3, .t-h4 {
  font-family: var(--f-display);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.92;
  margin: 0;
  text-wrap: balance;
}
.t-display-xl { font-size: var(--t-display-xl); letter-spacing: -0.052em; line-height: 0.84; }
.t-display    { font-size: var(--t-display); }
.t-h1         { font-size: var(--t-h1); }
.t-h2         { font-size: var(--t-h2); letter-spacing: -0.032em; line-height: 0.96; }
.t-h3         { font-size: var(--t-h3); letter-spacing: -0.025em; line-height: 1.05; font-weight: 500; }
.t-h4         { font-size: var(--t-h4); letter-spacing: -0.015em; line-height: 1.2; font-weight: 500; }

.serif { font-family: var(--f-serif); font-weight: 400; letter-spacing: -0.015em; color: var(--accent); }

.t-lead {
  font-size: var(--t-lead);
  line-height: 1.42;
  color: var(--ink-2);
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: pretty;
}

.t-body { font-size: var(--t-body); line-height: 1.55; color: var(--ink-2); }

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

.t-mono { font-family: var(--f-mono); font-size: var(--t-small); letter-spacing: 0.02em; }

.muted  { color: var(--ink-3); }
.accent { color: var(--accent); }

/* ---------- Layout ---------- */
.container       { width: 100%; max-width: var(--container);       margin-inline: auto; padding-inline: var(--gutter); }
.container-tight { width: 100%; max-width: var(--container-tight); margin-inline: auto; padding-inline: var(--gutter); }

.section {
  position: relative;
  padding-block: var(--section-pad);
}
.section-tight { padding-block: clamp(64px, 8vw, 132px); }

/* Background block — paints behind a section (used to layer mesh + theme) */
.section > .bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.section > .container,
.section > .container-tight {
  position: relative;
  z-index: 1;
}

.row { display: flex; }
.col { display: flex; flex-direction: column; }

/* Hairline divider — editorial, full-width */
.rule {
  height: 1px;
  background: currentColor;
  opacity: 0.14;
  border: 0;
  margin: 0;
}
.rule-strong { opacity: 0.28; }

/* ---------- Motion primitives ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur-slow) var(--ease-apple),
    transform var(--dur-slow) var(--ease-apple);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

/* No-JS fallback: when JavaScript is off (most AI crawlers, and the pre-rendered
   no-JS view), the IntersectionObserver never runs to add .is-in — so reveal
   content would stay invisible. Show it fully. The inline head script swaps
   html.no-js → html.js before paint, so JS users still get the animations. */
html.no-js .reveal,
html.no-js .reveal.r-stagger > * { opacity: 1; transform: none; transition: none; }

.reveal.r-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur-slow) var(--ease-apple),
    transform var(--dur-slow) var(--ease-apple);
}
.reveal.r-stagger.is-in > * { opacity: 1; transform: none; }
.reveal.r-stagger.is-in > *:nth-child(2) { transition-delay: 0.08s; }
.reveal.r-stagger.is-in > *:nth-child(3) { transition-delay: 0.16s; }
.reveal.r-stagger.is-in > *:nth-child(4) { transition-delay: 0.24s; }
.reveal.r-stagger.is-in > *:nth-child(5) { transition-delay: 0.32s; }
.reveal.r-stagger.is-in > *:nth-child(6) { transition-delay: 0.4s; }
.reveal.r-stagger.is-in > *:nth-child(7) { transition-delay: 0.48s; }
.reveal.r-stagger.is-in > *:nth-child(8) { transition-delay: 0.56s; }
.reveal.r-stagger.is-in > *:nth-child(9) { transition-delay: 0.64s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.r-stagger > * { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Underline link, editorial ---------- */
.link-underline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
  padding-bottom: 4px;
  color: currentColor;
}
.link-underline::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform-origin: right center;
  transform: scaleX(1);
  opacity: 0.35;
  transition: transform var(--dur-med) var(--ease-apple), opacity var(--dur-fast);
}
.link-underline:hover::after {
  transform-origin: left center;
  transform: scaleX(1);
  opacity: 1;
}
.link-underline:hover { color: var(--accent); }
.theme-dark .link-underline:hover,
.theme-accent .link-underline:hover { color: var(--bg-pure); opacity: 0.85; }

.link-underline .arr {
  transition: transform var(--dur-med) var(--ease-apple);
}
.link-underline:hover .arr { transform: translateX(6px); }

/* ---------- Helpers ---------- */
.flex-end   { display: flex; justify-content: flex-end; }
.flex-between { display: flex; justify-content: space-between; }
.gap-1 { gap: 8px; } .gap-2 { gap: 16px; } .gap-3 { gap: 24px; } .gap-4 { gap: 32px; } .gap-5 { gap: 48px; } .gap-6 { gap: 72px; }
.mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; } .mb-4 { margin-bottom: 32px; } .mb-5 { margin-bottom: 48px; }
.text-balance { text-wrap: balance; }
.full-w { width: 100%; }