/* scrollstage base — tokens + act mechanics. Theme by overriding :root only. */
:root {
  /* six colour roles, one accent */
  --canvas: #0d0c0b;
  --surface: #181614;
  --ink: #f2ede6;
  --ink-soft: #a79f95;
  --accent: #e8572e;
  --accent-ink: #140f0c;
  /* two families */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-text: "Geist", system-ui, sans-serif;

  /* 4px spacing scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --gutter: clamp(20px, 5vw, 72px);
  --section: clamp(64px, 12vh, 160px);
  --measure: 62ch;

  /* type ramp (fluid) */
  --t-sm: clamp(0.84rem, 0.8rem + 0.2vw, 0.95rem);
  --t-base: clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
  --t-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  --t-xl: clamp(1.8rem, 1.4rem + 1.8vw, 3rem);
  --t-2xl: clamp(2.4rem, 1.6rem + 3.4vw, 4.6rem);
  --t-3xl: clamp(3rem, 1.8rem + 5.4vw, 6.4rem);
  --track-tight: -0.035em;
  --track-normal: 0.005em;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--canvas); color: var(--ink); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font-text); font-size: var(--t-base);
  line-height: 1.6; letter-spacing: var(--track-normal);
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
h1, h2, h3 {
  font-family: var(--font-display); letter-spacing: var(--track-tight);
  line-height: 1.02; text-wrap: balance; margin: 0;
}
p { max-width: var(--measure); text-wrap: pretty; margin: 0; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── acts ───────────────────────────────────────────────────────────── */
[data-act] { position: relative; }
/* Held acts: the act is --span viewports tall; its stage sticks for the hold. */
[data-act]:not([data-act="flow"]) { height: calc(var(--span, 2) * 100svh); }
[data-act]:not([data-act="flow"]) > .stage {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
}
[data-act="flow"] { padding: var(--section) var(--gutter); }

/* layers: every plane fills the stage; the page positions subjects within */
.stage > .plane { position: absolute; inset: -8% 0; will-change: transform; }
.stage > .plane img, .stage > .plane video { width: 100%; height: 100%; object-fit: cover; }
.stage video[data-video] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); }
[data-lines] > * { display: block; }

/* a subject plane is a positioned cutout, not a full-bleed cover */
.stage > .plane.subject { inset: auto; }
.stage > .plane.subject img { width: 100%; height: auto; object-fit: contain; }

/* pan */
[data-rail] { display: flex; gap: var(--s6); height: 100%; align-items: center; padding: 0 var(--gutter); will-change: transform; }

/* reveal: a wipe driven by --pin */
.wipe { position: absolute; inset: 0; clip-path: inset(0 calc((1 - var(--pin, 0)) * 100%) 0 0); }

/* cues start hidden only when the engine runs; no-JS readers see everything */
.ss-ready [data-cue], .ss-ready [data-lines] > * { opacity: 0; will-change: opacity, transform; }

/* scrim: sits behind copy only, never a full-frame overlay */
.scrim { position: absolute; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--canvas) 72%, transparent), transparent); }
.copy { position: relative; z-index: 2; }

/* reduced motion: a static, complete composition */
.ss-reduced [data-act]:not([data-act="flow"]) { height: auto; }
.ss-reduced [data-act]:not([data-act="flow"]) > .stage { position: relative; height: 100svh; }
.ss-reduced [data-cue], .ss-reduced [data-lines] > * { opacity: 1 !important; transform: none !important; }
.ss-reduced .plane { transform: none !important; }
.ss-reduced [data-rail] { overflow-x: auto; transform: none !important; }

@media (max-width: 700px) {
  :root { --t-3xl: clamp(2.3rem, 1.4rem + 5vw, 3.2rem); }
}