/* ============================================================
   IDEAS BY LEO — Base / reset / typographic roles
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto; /* Lenis owns scroll */
  background: var(--paper);
}

body {
  background: var(--paper);
  color: var(--fg-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-weight: var(--w-reg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  min-height: 100vh;
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

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

::selection { background: var(--select-bg); color: var(--select-fg); }

:focus-visible {
  outline: 3px solid var(--fg);
  outline-offset: 3px;
}
/* fixed chrome sits over the coloured 3D worlds — follow the region tint so the ring stays visible */
#nav :focus-visible,
#next-dest:focus-visible,
.skip-link:focus-visible {
  outline: 3px solid var(--chrome-fg, #0a0a0a);
  outline-offset: 3px;
}

/* ---------- TYPE ROLES ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--fg);
  text-wrap: balance;
}
.script {
  font-family: var(--font-script);
  font-weight: 400;
  line-height: 1;
  text-transform: none;
  color: var(--fg);
}
.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--w-semi);
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--fg-body);
  max-width: 52ch;
  text-wrap: pretty;
}
.body-copy {
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--fg-body);
  max-width: var(--measure);
  text-wrap: pretty;
}
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
}

/* ---------- LAYOUT HELPERS ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section {
  position: relative;
  padding-block: var(--section-y);
  background: var(--bg);
  color: var(--fg-body);
  z-index: var(--z-content);
}
.section--tight { padding-block: clamp(64px, 9vh, 140px); }
.section--flush { padding-block: 0; }

/* ---------- THE BLOCK / DOMINO PRIMITIVES ---------- */
.block-card {
  background: var(--bg-raise);
  border: var(--b-heavy) solid var(--line-strong);
  border-radius: var(--r-0);
  box-shadow: var(--shadow-block);
  transition: transform var(--dur-base) var(--ease-domino),
              box-shadow var(--dur-base) var(--ease-domino);
}
.block-card:hover {
  transform: translate(-4px, -4px);
  box-shadow: 16px 16px 0 var(--line-strong);
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .marquee__track { animation: none !important; }
}

/* ---------- ACCESSIBILITY UTILITIES ---------- */
.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;
}
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: var(--z-loader);
  background: var(--ink); color: #fff; padding: 10px 16px;
  border-radius: 4px; transform: translateY(-200%);
  transition: transform var(--dur-base) var(--ease-standard);
  font-family: var(--font-body); font-weight: 600; font-size: 14px;
}
.skip-link:focus { transform: translateY(0); }

/* Hide native cursor only when the custom cursor is live */
body.cursor-live { cursor: none; }
body.cursor-live a, body.cursor-live button { cursor: none; }
@media (hover: none) { body.cursor-live { cursor: auto; } }
@media (prefers-reduced-motion: reduce) { body.cursor-live { cursor: auto; } }