@font-face{font-family:"Geist Mono";src:url("assets/GeistMono-Regular.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
:root {
  --black: #000;
  --white: #f3f3ef;
  --dim: rgba(243, 243, 239, .5);
  --down: rgba(243, 243, 239, .32);
  --ghost: rgba(243, 243, 239, .12);
  --pad: clamp(1.25rem, 3vw, 3.5rem);
  --mono:"SF Mono","SFMono-Regular","Geist Mono",monospace;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--black); color: var(--white); }
body { min-width: 320px; margin: 0; overflow-x: hidden; background: var(--black); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
::selection { background: var(--white); color: var(--black); }
a { color: inherit; }
:focus-visible { outline: 1px solid var(--white); outline-offset: 5px; }

.site-meta {
  position: fixed;
  z-index: 10;
  inset: 0;
  pointer-events: none;
  color: var(--dim);
  font-family: var(--mono);
  font-size: .58rem;
  text-transform: uppercase;
}
.site-meta a { pointer-events: auto; text-decoration: none; }
.corner { position: absolute; }
.top-left { top: var(--pad); left: var(--pad); }
.top-right { top: var(--pad); right: var(--pad); }
.bottom-left { bottom: var(--pad); left: var(--pad); }
.bottom-right { right: var(--pad); bottom: var(--pad); }
.scroll-hint { transition: opacity 160ms linear; }

.story-play {
  position: fixed;
  z-index: 20;
  top: 50%;
  left: 50%;
  display: grid;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--white);
  font-family: var(--mono);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transform: translate(-50%, -50%);
  place-items: center;
}
.story-play span { display: block; transform: translateX(.08em); }
.play-scroll-hint { position: fixed; z-index: 20; top: calc(50% + 2rem); left: 50%; margin: 0; transform: translateX(-50%); color: var(--dim); font: .625rem/1.5 var(--mono); white-space: nowrap; pointer-events: none; }
body:not(.is-intro) .play-scroll-hint { display: none; }
.is-intro .moments,
.is-intro .mark-stage { visibility: hidden; opacity: 0 !important; }
.has-started .story-play {
  top: auto;
  right: calc(var(--pad) - 1.2rem);
  bottom: calc(var(--pad) - 1.2rem);
  left: auto;
  width: 3rem;
  height: 3rem;
  color: var(--dim);
  font-size: .7rem;
  transform: none;
}
.has-started .story-play span { transform: none; }
.has-started .scroll-hint { opacity: 0; }

.scroll-story { height: 2463svh; }
.story-stage { position: sticky; top: 0; min-height: 100svh; overflow: hidden; }
.moments { position: absolute; inset: 0; }
.moment,
.statement-anchor {
  --entry-y: 12px;
  position: absolute;
  z-index: 2;
  top: 36%;
  left: 50%;
  width: min(28rem, calc(100% - (var(--pad) * 3)));
  opacity: 0;
  text-align: center;
  pointer-events: none;
  will-change: opacity, transform;
}
.flow-top-down { --entry-y: -12px; transform: translate(-50%, calc(-50% + var(--entry-y))); }
.flow-bottom-up { --entry-y: 12px; transform: translate(-50%, calc(-50% + var(--entry-y))); }
.moment.flow-bottom-up,
.statement-anchor.flow-bottom-up { top: 72%; }
.moment.is-active { transform: translate(-50%, -50%); }
.moment.is-departing { animation: none; }
h1,
h2 {
  max-width: 21ch;
  margin: 0;
  font-weight: 400;
  letter-spacing: 0;
  text-wrap: balance;
}
.moment h1,
.moment h2,
.statement-anchor h2 { margin-right: auto; margin-left: auto; font-family: var(--mono); font-size: clamp(1.2rem, 5.7vw, 1.5rem); line-height: 1.02; text-transform: uppercase; }
.statement-anchor { transform: translate(-50%, -50%); }
.shared-word,
.anchor-placeholder { visibility: hidden; }
.anchor-word,
.anchor-placeholder { display: inline-block; }

.mark-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(48vw, 240px);
  aspect-ratio: 418 / 163;
  transform: translate3d(-50%, calc(-50% + 22svh), 0);
  will-change: transform;
}
.timeline-window { position: absolute; inset: 0; }
.timeline-mark { position: absolute; top: 50%; left: 50%; display: block; width: 100%; height: auto; transform: translate(-50%, -50%) rotate(90deg); transform-origin: 50% 50%; will-change: opacity, transform; }
.timeline-ghost { display: none; }
.timeline-down { fill: var(--down); clip-path: inset(0 100% 0 0); }
.timeline-up { fill: var(--white); clip-path: inset(0 0 0 100%); }
.resolved-wordmark { position: absolute; top: 50%; left: 50%; display: block; width: 100%; aspect-ratio: 418 / 54.7; overflow: hidden; opacity: 0; clip-path: inset(0 100% 0 0); transform: translate(-50%, -50%); pointer-events: none; }
.resolved-wordmark-object { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; opacity: 0; }
.resolved-wordmark-fallback { position: absolute; top: 0; left: 0; display: block; width: 100%; height: auto; opacity: 1; transform: translateY(-66.217%); }
.resolved-wordmark.is-prepared .resolved-wordmark-object { opacity: 1; }
.resolved-wordmark.is-prepared .resolved-wordmark-fallback { opacity: 0; }

.ending-story { height: 715svh; }
.ending-stage { position: sticky; top: 0; min-height: 100svh; overflow: hidden; }
.ending-moments { position: absolute; inset: 0; }
.ending-moment {
  --entry-y: 12px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(28rem, calc(100% - (var(--pad) * 3)));
  opacity: 0;
  text-align: center;
  transform: translate(-50%, calc(-50% + 12px));
  pointer-events: none;
  will-change: opacity, transform;
}
.ending-moment.is-active { transform: translate(-50%, -50%); }
.ending-moment h2 { margin: 0 auto; font-family: var(--mono); font-size: clamp(1.2rem, 5.7vw, 1.5rem); line-height: 1.02; text-transform: uppercase; }
.ending-cta.is-active { pointer-events: auto; }
.ending-cta a {
  display: inline-block;
  max-width: 21ch;
  margin: 0 auto;
  font-family: var(--mono);
  font-size: clamp(1.2rem, 5.7vw, 1.5rem);
  line-height: 1.02;
  text-decoration: none;
  text-transform: uppercase;
  text-wrap: balance;
}
.cta-destination {
  position: absolute;
  top: calc(100% + 1.2rem);
  left: 0;
  width: 100%;
  color: var(--dim);
  font-family: var(--mono);
  font-size: .58rem;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 240ms linear;
}
.ending-cta.is-active .cta-destination { opacity: 1; transition-delay: 700ms; }

.terms-page { display: grid; min-height: 100svh; padding: calc(var(--pad) * 3) var(--pad); place-items: center; }
.terms-copy { width: min(100%, 34rem); }
.terms-copy h1 { margin-bottom: 2rem; font-family: var(--mono); font-size: 1.2rem; text-transform: uppercase; }
.terms-copy p { margin: 0; color: var(--dim); font-size: 1rem; line-height: 1.6; }

.word {
  display: inline-block;
  opacity: 0;
  transform: translateY(.28em);
  transition: opacity 120ms linear, transform 180ms cubic-bezier(.16, 1, .3, 1);
}
.word-pair { display: inline-block; white-space: nowrap; }
.no-wrap { white-space: nowrap; }
.is-active .word {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--word-index) * 40ms);
}
.is-settled .word {
  opacity: 1;
  transform: translateY(0);
  transition: none;
}
.terminal-period { width: 0; overflow: visible; }

@media (min-width: 621px) {
  .mark-stage { width: 180px; }
}

@media (max-width: 620px) {
  .scroll-story { height: 2178svh; }
  .moment,
  .statement-anchor { width: calc(100% - (var(--pad) * 3)); }
}

@media (prefers-reduced-motion: reduce) {
  .word,
  .cta-destination { transition: none; }
}

/* V3-only fork; all original V1 motion and layout rules remain intact. */
.ending-fork { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.ending-fork a[data-track="strategy"] { font-size: .75rem; color: var(--dim); line-height: 1.4; max-width: none; }
.ending-fork a:focus-visible { outline: 1px solid currentColor; outline-offset: 8px; }