@import url('./tokens.css');
@import url('../fonts/fonts.css');

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

/* Native scroll, uncorrected — matched to the reference page, which never moves
   the reader against their own gesture. The page's "held" quality comes from the
   fixed film and its scrubbed frames, not from snapping. scroll-snap.js carries
   the snap engine and the measurements behind switching it off. */
html {
  scroll-behavior: auto;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }

/* ==========================================================================
   The film stage — fixed, full-bleed, anchored top-right, behind everything
   but the footer. No centring transform, so no bars at any viewport.
   ========================================================================== */

.film-stage {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--vw, 100vw);
  height: var(--vh, 100vh);
  z-index: 0;
  overflow: hidden;
  background: var(--surface);
}

/* cover + center: no edge is pinned. Surplus width is split evenly left/right
   and surplus height evenly top/bottom, so the middle of the frame — where the
   subject sits — is what survives at every viewport. Note this trades away the
   right-edge guarantee: at narrow aspects the right edge is now cropped too,
   by half the surplus instead of none. */
.film-stage__video,
.film-stage__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* The poster is held until the clip paints a real seeked frame. Dropping it on
   loadedmetadata yields a black stage on iOS, where a muted video that has
   never played refuses to paint a seek. */
.film-stage__poster { z-index: 1; transition: opacity 320ms var(--ease-out); }
.film-stage.is-ready .film-stage__poster { opacity: 0; }

/* Measured wash. See --wash-alpha in tokens.css for the contrast evidence. */
.film-stage__wash {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--surface);
  opacity: var(--wash-alpha);
  pointer-events: none;
}

/* ==========================================================================
   Scrubbed flow — hero band, six auto-height blocks, one rhythm
   ========================================================================== */

/* No letterbox. Node 57:265 is not a stack of equal bands, so there is nothing
   to centre a band inside: blocks sit in normal flow at their natural height
   and film-scrub.js measures where each one lands. */
.film-flow {
  position: relative;
  z-index: 1;
}

/* The nav is fixed and 80px tall, so an anchor jump would otherwise park the
   target's first 80px underneath it. scroll-margin is layout-inert — it moves
   where a jump lands, not where the block sits, so the measured scrub anchors
   are untouched. */
.scene,
.site-footer { scroll-margin-top: calc(80 * var(--u)); }

.scene {
  position: relative;
  /* Apple's gutter rule: hold the frame's 48px inset until the content column
     reaches its cap, then let the gutters take everything else. Keeps the
     column centred at --measure-full instead of stretching to the display. */
  padding-inline: max(var(--inset), calc((100% - var(--measure-full)) / 2));
}

/* The frame's rhythm, measured: 360 design px between every consecutive pair of
   blocks. The hero->works gap is the single exception at 180. Equal specificity,
   so the hero rule must stay below the general one. */
.scene + .scene { margin-top: var(--rhythm); }
.scene--hero + .scene { margin-top: var(--rhythm-hero); }

/* The footer closes the same rhythm: section 6 ends at 5844, footer opens at
   6204. */
.site-footer { margin-top: var(--rhythm); }

/* ---- eyebrow: an 8px accent square, then a bracketed mono label ---- */
/* margin:0 is load-bearing now. The eyebrow is a <p>, and its default 1em
   margins used to vanish inside a fixed-height centred band; against an
   auto-height block they add 28px to every section. */
.eyebrow {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  font-family: var(--font-mono);
  font-size: var(--step-label);
  line-height: var(--leading-mono);
  font-weight: 500;
  text-transform: uppercase;
}

.eyebrow::before {
  content: '';
  width: calc(8 * var(--u));
  height: calc(8 * var(--u));
  background: var(--accent);
  flex: none;
}

.eyebrow--numbered::before { content: none; }

.eyebrow__num {
  display: grid;
  place-items: center;
  padding: calc(4 * var(--u)) calc(6 * var(--u));
  background: var(--chip);
  border-radius: var(--radius-chip);
}

/* ==========================================================================
   Hero — the one block that is still a full 16:9 band
   ========================================================================== */

/* 1512 x 851 in the frame: an 80px nav pinned to the top edge, and a text block
   off the bottom edge.

   The frame's inset is 80; this halves it to 40, dropping the block 40px. It
   stays inside the band, so it needs no transform — and unlike a larger drop it
   cannot push the taglines below the fold on a laptop-height viewport. */
.scene--hero {
  height: var(--band-h);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: calc(40 * var(--u));
}

/* Fixed to the viewport, not to the hero band, so it survives the scroll.
   Internal geometry is still the frame's: the buttons keep their 39px drop
   inside the 80px nav band, and it opens flush with the document top, so at
   rest it sits exactly where the Figma component draws it.

   z-index 10 clears the whole stack (film 0, flow 1, footer 1) — the nav is the
   one element that must never be scrolled over.

   No background and no backdrop blur: Figma's TOP NAV (node 57:267) carries an
   invisible fill and no effects, so the bar is transparent and the film reads
   straight through it. The labels are the only thing that paints here. */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  height: calc(80 * var(--u));
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-inline: max(var(--inset), calc((100% - var(--measure-full)) / 2));
  font-family: var(--font-mono);
  font-size: var(--step-body);
  line-height: var(--leading-mono);
  text-transform: uppercase;
}

.nav__brand { padding: calc(10 * var(--u)); }
.nav__links { display: flex; gap: calc(48 * var(--u)); }
.nav__link { padding: calc(10 * var(--u)) calc(24 * var(--u)); }
/* Figma component set 'nav button', variant Property 1=hover (node 10:207):
   a --chip pill behind unchanged ink — not a colour swap. */
.nav__link { border-radius: 9999px; }
.nav__link:hover, .nav__link:focus-visible { background: var(--chip); }

/* Frame "text": 1416 x 285, the title over the taglines at the frame's 40 gap. */
.hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--gap-block);
}

.hero__title {
  margin: 0;
  font-size: var(--step-hero);
  line-height: var(--leading-hero);
  letter-spacing: -0.06em;
  font-weight: 500;
  max-width: var(--measure-full);
}

/* Two mono lines, placed rather than auto-laid-out in the frame: the second
   opens at x=626 against a first that ends at 480. */
.hero__taglines {
  display: flex;
  gap: calc(146 * var(--u));
}

/* Decorative only — no link wrapper, no pointer target. --ink-muted IS #7f5342,
   the frame's muted ink, so this stays a token reference rather than a literal. */
.hero__tagline {
  margin: 0;
  color: var(--ink-muted);
  pointer-events: none;
  padding-block: calc(10 * var(--u));
  font-family: var(--font-mono);
  font-size: var(--step-body);
  line-height: var(--leading-mono);
  font-weight: 500;
  text-transform: uppercase;
}

/* ==========================================================================
   Statement scenes 1–6
   ========================================================================== */

.statement {
  display: flex;
  flex-direction: column;
  gap: var(--gap-block);
  max-width: var(--measure-title);
}

.statement__title {
  margin: 0;
  font-size: var(--step-title);
  line-height: var(--leading-title);
  font-weight: 500;
}