/* Reset and accessibility */
* { box-sizing: border-box; margin: 0; }
img { max-width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
:focus-visible {
  outline: 2px solid var(--graphite);
  outline-offset: 4px;
  border-radius: var(--r-sheet);
}
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.skip {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--sheet);
  color: var(--graphite);
  padding: 8px 16px;
  text-decoration: none;
  border-radius: var(--r-sheet);
  z-index: 1000;
  transform: translateY(-120%);
}
.skip:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--graphite);
  outline-offset: 4px;
}
.frame {
  max-width: var(--frame);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.measure {
  max-width: var(--measure);
}

/* fiv4.com — light-table tokens. Do not add colours, radii, easings, or durations. */
:root {
  /* colour — light table on */
  --vellum:     #E8EBF0;   /* canvas */
  --sheet:      #F3F5F8;   /* raised surface */
  --graphite:   #23262B;   /* ink: text, CTAs, hairlines @ alpha */
  --pencil:     #5B636E;   /* secondary text */
  --nonrepro:   #7FB6D9;   /* accent: earlier takes ONLY */
  --table-off:  #1B1F26;   /* footer ground */
  --hairline:   color-mix(in srgb, var(--graphite) 10%, transparent);
  --ghost-fill: color-mix(in srgb, var(--nonrepro) 12%, transparent);
  --btn-hover:  #31353B;

  /* type */
  --font-display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --font-body:    "Instrument Sans", system-ui, sans-serif;
  --font-mono:    "Martian Mono", ui-monospace, SFMono-Regular, monospace;

  --fs-2xs: 11px;  --fs-xs: 13px;  --fs-sm: 16px;  --fs-md: 19px;
  --fs-lg: 23px;   --fs-xl: 28px;  --fs-2xl: 33px;
  --fs-display-s: 56px;
  --fs-display-m: 96px;
  --fs-display-l: clamp(112px, 15vw, 224px);
  --display-threshold: 36px;

  --lh-utility: 1.4;  --lh-body: 1.55;  --lh-lead: 1.5;  --lh-tight: 1.25;
  --lh-display-s: 0.98; --lh-display-m: 0.92; --lh-display-l: 0.86;

  --tr-utility: 0.14em; --tr-caption: 0.06em; --tr-body: 0;
  --tr-display-s: -0.03em; --tr-display-m: -0.03em; --tr-display-l: -0.04em;

  --wght-body: 400; --wght-body-strong: 500; --wght-display: 560; --wdth-display: 84;
  /* ghost take axes: v1..v5 */
  --take1-wght: 200; --take1-wdth: 100;
  --take2-wght: 290; --take2-wdth: 96;
  --take3-wght: 380; --take3-wdth: 92;
  --take4-wght: 470; --take4-wdth: 88;
  --take5-wght: 560; --take5-wdth: 84;

  /* layout */
  --frame: 1280px;
  --measure: 680px;
  --gutter: clamp(20px, 4vw, 56px);
  --nav-h: 80px;
  --gap-section: clamp(96px, 12vw, 176px);
  --gap-block: 40px;
  --gap-el: 16px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-16: 64px; --space-24: 96px;

  /* radius */
  --r-sheet: 2px;
  --r-pill: 999px;
  --r-tab: 6px 6px 0 0;

  /* signature geometry */
  --ghost-dx: -0.09em;   /* mark: 4 under 5 */
  --ghost-dy:  0.07em;
  --scrub-step-x: -8px;  /* per superseded take */
  --scrub-step-y: -14px;
  --stop-size: 10px;
  --scrub-vh: 500vh;

  /* motion */
  --ease-take: cubic-bezier(.65, .05, 0, 1);
  --dur-hover: 140ms;
  --dur-hover-out: 320ms;
  --dur-enter: 560ms;
  --dur-set: 1200ms;
  --dur-swap: 220ms;
  --enter-shift: 24px;   /* becomes 0 under reduced motion */
  --load-t0: 0ms; --load-t1: 120ms; --load-t2: 240ms; --load-t3: 320ms;
  --load-t4: 640ms; --load-t5: 1000ms;

  color-scheme: light dark;
}

/* light table off — system dark, unless the viewer chose light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --vellum: #1B1F26; --sheet: #242931; --graphite: #E8EBF0;
    --pencil: #9AA3AE; --nonrepro: #6FA9CF; --table-off: #111418;
    --btn-hover: #D3D8DF;
    --hairline: color-mix(in srgb, var(--graphite) 14%, transparent);
    --ghost-fill: color-mix(in srgb, var(--nonrepro) 16%, transparent);
  }
}
:root[data-theme="dark"] {
  --vellum: #1B1F26; --sheet: #242931; --graphite: #E8EBF0;
  --pencil: #9AA3AE; --nonrepro: #6FA9CF; --table-off: #111418;
  --btn-hover: #D3D8DF;
  --hairline: color-mix(in srgb, var(--graphite) 14%, transparent);
  --ghost-fill: color-mix(in srgb, var(--nonrepro) 16%, transparent);
}

/* reduced motion: swap properties, keep the design */
@media (prefers-reduced-motion: reduce) {
  :root {
    --enter-shift: 0px;
    --dur-enter: 150ms;
    --dur-set: 0ms;
    --dur-swap: 150ms;
    --load-t0: 0ms; --load-t1: 0ms; --load-t2: 0ms; --load-t3: 0ms; --load-t4: 0ms; --load-t5: 0ms;
  }
}

body { background: var(--vellum); color: var(--graphite); font-family: var(--font-body);
       font-size: var(--fs-sm); line-height: var(--lh-body); box-shadow: none; font-variant-ligatures: no-common-ligatures; }

/* section 01: nav */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--dur-hover) var(--ease-take),
              border-color var(--dur-hover) var(--ease-take);
}
.site-header.is-stuck {
  background: color-mix(in srgb, var(--sheet) 92%, transparent);
  border-bottom-color: var(--hairline);
}
/* Prefer CSS scroll-driven timeline where supported; JS (01-nav.js) is the fallback */
@supports (animation-timeline: scroll()) {
  .site-header {
    animation: nav-stick linear both;
    animation-timeline: scroll(root block);
    animation-range: 0px 1px;
  }
}
@keyframes nav-stick {
  from { background: transparent; border-bottom-color: transparent; }
  to   { background: color-mix(in srgb, var(--sheet) 92%, transparent); border-bottom-color: var(--hairline); }
}

.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-el);
  padding-block: var(--space-4);
}

/* zone 1: mark */
.nav__mark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--graphite);
  font-family: var(--font-display);
  font-variation-settings: "wght" var(--wght-display), "wdth" var(--wdth-display);
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.04em;
  flex: 0 0 auto;
}
.nav__mark-text { line-height: 1; }
.nav__mark-lockup {
  position: relative;
  display: inline-block;
  line-height: 1;
}
.mark__ghost {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--nonrepro);
  transform: translate(var(--ghost-dx), var(--ghost-dy));
  transition: transform var(--dur-hover-out) var(--ease-take);
}
.mark__ink {
  position: relative;
  color: var(--graphite);
}
.nav__mark:hover .mark__ghost,
.nav__mark:focus-visible .mark__ghost {
  transform: translate(0, 0);
  transition-duration: var(--dur-hover);
}
.nav__mark:active .mark__ghost { opacity: .6; }

/* zone 2: links */
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav__link {
  color: var(--graphite);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--tr-caption);
  border-bottom: 1px solid color-mix(in srgb, var(--graphite) 40%, transparent);
  padding-bottom: 2px;
  transition: border-color var(--dur-hover) var(--ease-take);
}
.nav__link:hover,
.nav__link:focus-visible {
  border-color: var(--graphite);
}

/* zone 3: CTA */
.nav__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--graphite);
  color: var(--vellum);
  font-family: var(--font-body);
  font-weight: var(--wght-body-strong);
  font-size: var(--fs-xs);
  padding: var(--space-3) var(--space-6);
  text-decoration: none;
  flex: 0 0 auto;
  transition: background var(--dur-hover) var(--ease-take);
}
.nav__cta:hover,
.nav__cta:focus-visible {
  background: var(--btn-hover);
}

/* mobile menu toggle */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
}
.nav__toggle-bar {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--graphite);
  transition: transform var(--dur-hover) var(--ease-take),
              opacity var(--dur-hover) var(--ease-take);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.nav-sentinel {
  position: relative;
  height: 1px;
}

@media (max-width: 767px) {
  .nav__toggle { display: flex; order: 2; }
  .nav__cta { order: 1; }
  .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    background: var(--sheet);
    border-bottom: 1px solid var(--hairline);
    padding: var(--space-6) var(--gutter);
  }
  .nav.is-open .nav__links { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .mark__ghost {
    transition: none;
    transform: translate(var(--ghost-dx), var(--ghost-dy)) !important;
  }
  .nav__mark:hover .mark__ghost,
  .nav__mark:focus-visible .mark__ghost {
    color: var(--pencil);
  }
  .nav__toggle-bar {
    transition: none;
  }
}

/* section 02: hero (poster) — scoped under .hero
   one bleed: the ghost sheet clips the right viewport edge */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow-x: clip;
}

.hero__frame {
  position: relative;
  width: 100%;
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: var(--gap-el);
}

/* eyebrow */
.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  line-height: var(--lh-utility);
  letter-spacing: var(--tr-utility);
  text-transform: uppercase;
  color: var(--pencil);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity var(--dur-enter) var(--ease-take) var(--load-t1);
}

/* headline: masked line reveal */
.hero__headline {
  font-family: var(--font-display);
  font-size: var(--fs-display-l);
  line-height: 0.86;
  letter-spacing: var(--tr-display-l);
  font-weight: var(--wght-display);
  font-variation-settings: 'wght' var(--wght-display), 'wdth' var(--wdth-display);
  font-optical-sizing: auto;
  text-wrap: balance;
  color: var(--graphite);
}

.hero__line-wrap {
  display: block;
  overflow: hidden;
}

.hero__line {
  display: block;
  transform: translateY(100%);
  transition: transform var(--dur-enter) var(--ease-take);
}

.hero__line-wrap:nth-of-type(1) .hero__line { transition-delay: var(--load-t2); }
.hero__line-wrap:nth-of-type(2) .hero__line { transition-delay: var(--load-t3); }

/* sub + ctas */
.hero__sub {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-lead);
  color: var(--pencil);
  max-width: var(--measure);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 400ms var(--ease-take) var(--load-t5),
              transform 400ms var(--ease-take) var(--load-t5);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-2);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 400ms var(--ease-take) var(--load-t5),
              transform 400ms var(--ease-take) var(--load-t5);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  padding: var(--space-3) var(--space-8);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--wght-body-strong);
  text-decoration: none;
  border: 1px solid var(--graphite);
  transition: background-color var(--dur-hover) var(--ease-take),
              color var(--dur-hover) var(--ease-take);
}

.btn--filled {
  background: var(--graphite);
  color: var(--vellum);
}
.btn--filled:hover {
  background: var(--btn-hover);
}

.btn--outlined {
  background: transparent;
  color: var(--graphite);
}
.btn--outlined:hover {
  background: var(--sheet);
}

/* ghost sheet — bleed element: four earlier takes, decorative, clips right viewport edge */
.hero__ghost-sheet {
  position: absolute;
  z-index: 0;
  top: 16%;
  right: -60px;
  width: min(46vw, 640px);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: left;
  pointer-events: none;
}

.hero__ghost-line {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(36px, 3.6vw, 52px);
  line-height: 0.95;
  letter-spacing: var(--tr-display-s);
  color: var(--nonrepro);
  font-optical-sizing: auto;
  white-space: nowrap;
  opacity: 0;
  transform: translate(var(--ghost-dx), var(--ghost-dy)) translateY(8px);
  transition: opacity 400ms var(--ease-take), transform 400ms var(--ease-take);
  transition-delay: calc(var(--load-t4) + var(--gd, 0ms));
}

.hero__ghost-line[data-take="1"] { font-variation-settings: 'wght' var(--take1-wght), 'wdth' var(--take1-wdth); }
.hero__ghost-line[data-take="2"] { font-variation-settings: 'wght' var(--take2-wght), 'wdth' var(--take2-wdth); }
.hero__ghost-line[data-take="3"] { font-variation-settings: 'wght' var(--take3-wght), 'wdth' var(--take3-wdth); }
.hero__ghost-line[data-take="4"] { font-variation-settings: 'wght' var(--take4-wght), 'wdth' var(--take4-wdth); }

/* load reveal: fonts-ready gates every reveal */
.hero.fonts-ready .hero__eyebrow {
  opacity: 1;
}
.hero.fonts-ready .hero__line {
  transform: translateY(0);
}
.hero.fonts-ready .hero__sub,
.hero.fonts-ready .hero__ctas {
  opacity: 1;
  transform: translateY(0);
}
.hero.fonts-ready .hero__ghost-line {
  transform: translate(var(--ghost-dx), var(--ghost-dy)) translateY(0);
}

/* onion-skin ladder: older takes fade further back, --nonrepro throughout */
.hero.fonts-ready .hero__ghost-line[data-take="1"] { opacity: .18; }
.hero.fonts-ready .hero__ghost-line[data-take="2"] { opacity: .28; }
.hero.fonts-ready .hero__ghost-line[data-take="3"] { opacity: .42; }
.hero.fonts-ready .hero__ghost-line[data-take="4"] { opacity: .60; }

/* reduced motion: single 150ms opacity fade, no masks, no offsets */
@media (prefers-reduced-motion: reduce) {
  .hero__line-wrap {
    overflow: visible;
  }
  .hero__line {
    transform: none;
    opacity: 0;
    transition: opacity var(--dur-enter) var(--ease-take);
  }
  .hero.fonts-ready .hero__line {
    opacity: 1;
  }
  .hero__sub,
  .hero__ctas {
    transform: none;
    transition: opacity var(--dur-enter) var(--ease-take);
  }
  .hero__ghost-line {
    --gd: 0ms;
    transform: translate(var(--ghost-dx), var(--ghost-dy));
    transition: opacity var(--dur-enter) var(--ease-take);
  }
  .hero.fonts-ready .hero__ghost-line {
    transform: translate(var(--ghost-dx), var(--ghost-dy));
  }
}

/* desktop (≥768px): headline no-wrap */
@media (min-width: 768px) {
  .hero__line {
    white-space: nowrap;
  }
}

/* mobile (<768px): ghost sheet becomes a 3-line strip below the headline,
   still clipping the right edge; headline uses the clamp */
@media (max-width: 767px) {
  .hero {
    align-items: flex-start;
    padding-block: var(--space-16) var(--space-10);
  }

  .hero__frame {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }

  .hero__headline {
    font-size: clamp(112px, 15vw, 224px);
  }

  .hero__ghost-sheet {
    position: relative;
    top: auto;
    right: -60px;
    width: calc(100% + 60px);
    margin-top: var(--space-4);
  }

  .hero__ghost-line {
    font-size: clamp(28px, 8vw, 36px);
  }

  /* strip to three lines on mobile */
  .hero__ghost-line[data-take="1"] {
    display: none;
  }
}

/* section 03: scrub — the take-scrub set-piece (design-system.md §6, §7) */

@property --p {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

.scrub {
  position: relative;
  background: var(--vellum);
}

/* ============================= PIN WRAPPER ============================= */
/* the tall scroller; the sticky stage lives inside it. --p is driven either
   by the native CSS scroll-timeline (progressive enhancement) on this
   wrapper, or by src/js/03-scrub.js reading scroll position as a fallback. */
.scrub__pin {
  position: relative;
  height: var(--scrub-vh);
}

@supports (animation-timeline: view()) {
  .scrub__pin {
    animation: scrub-progress linear;
    animation-timeline: view();
    /* "contain", not "cover": for a subject taller than the scrollport (this
       500vh pin), contain 0% is the point where the subject's top edge
       reaches the scrollport's top edge — i.e. exactly when the sticky
       stage engages — and contain 100% is where the subject's bottom edge
       reaches the scrollport's bottom edge — exactly when it releases.
       "cover" instead spans the whole enter→exit travel, so p was already
       nonzero before the stage was even pinned and never reached 1 while
       still pinned. */
    animation-range: contain 0% contain 100%;
  }
}

@keyframes scrub-progress {
  from { --p: 0; }
  to   { --p: 1; }
}

/* ============================== STAGE ==================================== */
.scrub__stage {
  position: sticky;
  /* clear the fixed nav (~77px) plus a hairline of breathing room, so the
     rail and registration tab are never pinned under the header. */
  top: calc(var(--nav-h, 80px) + 12px);
  height: 78vh;
  min-height: 480px;
  display: grid;
  /* rail top, headline stack vertically centered in the remaining space,
     annotation pinned to the bottom — see .scrub__layers / .scrub__annotation. */
  grid-template-rows: auto 1fr auto;
  background: var(--sheet);
  border-radius: var(--r-sheet);
  overflow: hidden;
  /* the one bleed: the sheet runs 24px past the frame on the left */
  margin-left: calc(var(--gutter) - 24px);
  margin-right: var(--gutter);
  padding: var(--space-8) 8% var(--space-10);
}

/* ============================ REGISTRATION TAB ========================== */
.scrub__tab {
  position: absolute;
  top: 0;
  left: var(--space-8);
  transform: translateY(-100%);
  background: var(--sheet);
  color: var(--graphite);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tr-utility);
  text-transform: uppercase;
  line-height: var(--lh-utility);
  padding: var(--space-2) var(--space-3) 0;
  border-radius: var(--r-tab);
  font-variant-numeric: tabular-nums;
}

/* =============================== RAIL ==================================== */
.scrub__rail {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: var(--space-2) 0 0;
  border-radius: var(--r-sheet);
}

.scrub__rail-track {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 32px;
}

/* the actual role="slider" control: a dedicated, focusable, non-visual
   element covering the track. It has no descendants — the five stop
   <button>s are its siblings, not its children — so assistive tech doesn't
   treat the buttons as presentational/hidden the way a slider's children
   would be. pointer-events:none so it never blocks clicks on the buttons
   underneath; keyboard focus is unaffected by pointer-events. */
.scrub__rail-slider {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: var(--r-sheet);
}
.scrub__rail-slider:focus-visible {
  outline: 2px solid var(--graphite);
  outline-offset: 6px;
}

.scrub__rail-fill {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: var(--graphite);
  transform-origin: left center;
  transform: scaleX(var(--p, 0)) translateY(-50%);
}
.scrub__rail-track::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: var(--hairline);
  transform: translateY(-50%);
}

.scrub__stop {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: 0;
  padding: var(--space-2);
  cursor: default;
  font-family: var(--font-mono);
}
.scrub__stop-dot {
  width: var(--stop-size);
  height: var(--stop-size);
  border-radius: var(--r-pill);
  background: var(--nonrepro);
  transition: transform var(--dur-hover) var(--ease-take), background-color var(--dur-hover) var(--ease-take);
}
.scrub__stop[data-stop="5"] .scrub__stop-dot {
  background: var(--graphite);
}
.scrub__stop.is-active .scrub__stop-dot {
  transform: scale(1.6);
  background: var(--graphite);
}
.scrub__stop-label {
  font-size: var(--fs-2xs);
  letter-spacing: var(--tr-utility);
  text-transform: uppercase;
  color: var(--pencil);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-hover) var(--ease-take);
}
.scrub__stop.is-active .scrub__stop-label { color: var(--graphite); }
.scrub__stop.is-passed .scrub__stop-label { color: var(--pencil); }

/* ============================= HEADLINE LAYERS =========================== */
.scrub__layers {
  position: relative;
  list-style: none;
  padding: 0;
  margin: var(--space-8) 0 0;
  /* the layer stack's own box is only as tall as one headline line (its
     children are position:absolute so they don't otherwise contribute
     height); centering that box in the stage's 1fr row is what centers
     the headline stack vertically, per the design's "rail top / stack
     centered / annotation bottom" grid. */
  align-self: center;
  min-height: calc(var(--fs-display-m) * var(--lh-display-m));
}

.scrub__layer {
  --k: 1;
  --d: calc(var(--p, 0) * 4 + 1 - var(--k));
  /* arrive: director amendment to §6 (ink-gap fix) — instead of a hard 0/1
     step at d=0 (which left a dead band where the outgoing take had already
     started fading blue but the incoming take was still fully invisible),
     ramp linearly from 0 at d=-0.35 to 1 at d=0, then hold at 1 for d>=0.
     So a take fades IN (opacity, translateY) as the previous one is still
     departing, and at every p some layer is at or approaching full ink.
     NB: CSS clamp() is clamp(MIN, VAL, MAX) — not (VAL, MIN, MAX). */
  --arrive: clamp(0, calc((var(--d) + 0.35) / 0.35), 1);
  --fall: clamp(0, var(--d), 4);
  --opacity:
    calc(
      var(--arrive) *
      (1
        - 0.45 * clamp(0, var(--d), 1)
        - 0.25 * clamp(0, calc(var(--d) - 1), 1)
        - 0.12 * clamp(0, calc(var(--d) - 2), 1)
        - 0.08 * clamp(0, calc(var(--d) - 3), 1))
    );
  /* mix already resolves to 0% (pure graphite) for any d<=0 — clamp()'s min
     of 0 means the pre-arrival/arriving phase is never tinted blue, only
     faded in as ink, exactly as the amendment specifies. */
  --mix: calc(clamp(0, calc(var(--d) / 0.35), 1) * 100%);

  position: absolute;
  inset-inline-start: 0;
  top: 0;
  max-width: 84%;
  margin: 0;

  opacity: var(--opacity);
  color: color-mix(in srgb, var(--nonrepro) var(--mix), var(--graphite));
  /* offsets: -8px X / -14px Y per unit of "fall" (d clamped 0..4, already 0
     for d<=0 so no extra gating needed here); future/arriving takes sit at
     translateY(--enter-shift) fading to 0 as --arrive ramps 0→1 (24px,
     becomes 0 under reduced motion). */
  transform:
    translateX(calc(var(--fall) * -8px))
    translateY(calc((1 - var(--arrive)) * var(--enter-shift) + var(--fall) * -14px));
  transition: color 140ms var(--ease-take);
}

.scrub__layer[data-layer="1"] { --k: 1; }
.scrub__layer[data-layer="2"] { --k: 2; }
.scrub__layer[data-layer="3"] { --k: 3; }
.scrub__layer[data-layer="4"] { --k: 4; }
.scrub__layer[data-layer="5"] { --k: 5; }

/* Display rules live on .scrub__headline ONLY — not on .scrub__layer — so
   they never leak onto .scrub__meta's mono stamp/note text, which is also a
   child of .scrub__layer (and is a real, rendered element in the mobile
   strip). Negative display tracking / sub-1 line-height / display
   font-variation-settings on the shared <li> would otherwise inherit into
   that mono text and collapse it. */
.scrub__headline {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-display-m);
  line-height: var(--lh-display-m);
  letter-spacing: var(--tr-display-m);
  text-wrap: balance;
  font-optical-sizing: auto;
  transition: font-variation-settings 140ms var(--ease-take);
}

/* Per-take axes (§7/§9: v1 200/100 … v5 560/84). `calc()` inside a
   font-variation-settings axis value isn't broadly supported (unlike
   color-mix()'s calc'd percentage above, which is), so this can't be tweened
   continuously off --gate the way opacity/transform/color are. Since a
   layer's axis value is only ever visible once opacity > 0 (i.e. gate = 1),
   the pre-arrival "wght 200 / wdth 100" value is invisible anyway — setting
   each layer to its own fixed take axes here is visually equivalent to the
   gated version, and the transition above still eases the pop the instant
   the layer's opacity turns on. */
.scrub__layer[data-layer="1"] .scrub__headline { font-variation-settings: 'wght' var(--take1-wght), 'wdth' var(--take1-wdth); }
.scrub__layer[data-layer="2"] .scrub__headline { font-variation-settings: 'wght' var(--take2-wght), 'wdth' var(--take2-wdth); }
.scrub__layer[data-layer="3"] .scrub__headline { font-variation-settings: 'wght' var(--take3-wght), 'wdth' var(--take3-wdth); }
.scrub__layer[data-layer="4"] .scrub__headline { font-variation-settings: 'wght' var(--take4-wght), 'wdth' var(--take4-wdth); }
.scrub__layer[data-layer="5"] .scrub__headline { font-variation-settings: 'wght' var(--take5-wght), 'wdth' var(--take5-wdth); }

.scrub__meta { display: none; }

/* desktop width (pin AND stack) — at --fs-display-m (96px) the longer takes
   (e.g. v4 "The version that ships is never the first.") wrap to two lines
   inside the fixed 78vh overflow:hidden stage and can clip. Stack mode
   shows the same 78vh stage (unpinned) as pin mode, so it needs the same
   one-line sizing; strip (<768px) keeps its own clamp below. */
@media (min-width: 768px) {
  .scrub__headline {
    font-size: clamp(40px, 5.4vw, 80px);
    white-space: nowrap;
  }
}

/* =========================== ANNOTATION LINE ============================= */
.scrub__annotation {
  position: relative;
  z-index: 2;
  margin-top: var(--space-8);
  min-height: calc(var(--fs-xs) * var(--lh-body) + var(--space-2));
}
.scrub__note {
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  margin: 0;
  max-width: var(--measure);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--pencil);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-swap) var(--ease-take), transform var(--dur-swap) var(--ease-take);
}
.scrub__note .scrub__stamp {
  font-family: var(--font-mono);
  color: var(--graphite);
  margin-right: var(--space-2);
}
.scrub__note em { font-style: italic; }

.scrub__stage[data-take="1"] .scrub__note[data-note="1"],
.scrub__stage[data-take="2"] .scrub__note[data-note="2"],
.scrub__stage[data-take="3"] .scrub__note[data-note="3"],
.scrub__stage[data-take="4"] .scrub__note[data-note="4"],
.scrub__stage[data-take="5"] .scrub__note[data-note="5"] {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================================
   MODE: reduced-motion (any width) — "stack".
   Un-pin, show the final fanned frame, plus an ordinary <ol> of takes below.
   Only opacity crossfades (150ms via --dur-swap token); no transforms tween,
   no axis tween — font-variation-settings applies instantly.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .scrub__pin {
    height: auto;
    animation: none;
  }
  .scrub__stage {
    position: static;
    height: 78vh;
    min-height: 420px;
  }
  .scrub__headline {
    transition: none;
  }
  .scrub__layer,
  .scrub__stop-dot,
  .scrub__stop-label,
  .scrub__note {
    transition-property: opacity, color;
    transition-duration: var(--dur-swap);
    /* only --ease-take is a permitted timing function sitewide */
    transition-timing-function: var(--ease-take);
  }
  .scrub__stop { cursor: pointer; }

  /* JS never drives --p in stack mode (see 03-scrub.js) — the stage stays
     baked at the final p=1 frame (all four ghosts fanned, offsets set) for
     the whole mode. Clicking/keying a stop only changes which layer is ink:
     override opacity/colour for the chosen layer while its p=1 fan geometry
     (position/transform) is left completely alone. */
  .scrub__stage[data-take="1"] .scrub__layer[data-layer="1"],
  .scrub__stage[data-take="2"] .scrub__layer[data-layer="2"],
  .scrub__stage[data-take="3"] .scrub__layer[data-layer="3"],
  .scrub__stage[data-take="4"] .scrub__layer[data-layer="4"],
  .scrub__stage[data-take="5"] .scrub__layer[data-layer="5"] {
    opacity: 1;
    color: var(--graphite);
  }

  .scrub__fallback-list {
    display: block;
  }
}

/* ============================================================================
   MODE: mobile (<768px), motion allowed — "strip".
   Per §4: un-pin into a horizontally scroll-snapped 5-panel take-strip with
   the rail above it; the finger is the playhead instead of the wheel.
   See docs/deviations/03-scrub.md for how this was reconciled with the
   reduced-motion "stack" instruction, which also names <768px as a default.
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
  .scrub__pin {
    height: auto;
    animation: none;
  }
  .scrub__stage {
    /* the base rule is now display:grid (desktop pin layout); strip mode
       needs the rail/strip stacked vertically in normal flow instead. */
    display: flex;
    flex-direction: column;
    position: static;
    height: auto;
    min-height: 0;
    padding: var(--space-6) 0 var(--space-8);
    margin-left: 0;
    margin-right: 0;
    overflow: visible;
    border-radius: 0;
    background: transparent;
  }
  .scrub__tab { display: none; }
  /* rail stays above the strip */
  .scrub__rail { padding-inline: var(--gutter); }
  .scrub__annotation { display: none; }

  .scrub__layers {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-top: var(--space-6);
    padding: 0 var(--gutter);
    gap: var(--gutter);
    min-height: 0;
    align-self: auto;
  }
  .scrub__layer {
    position: static;
    flex: 0 0 100%;
    max-width: 100%;
    scroll-snap-align: start;
    opacity: 1 !important;
    color: var(--graphite) !important;
    transform: none !important;
    transition: none !important;
    /* each panel is a sheet card: --sheet surface, --r-sheet radius, its own padding */
    background: var(--sheet);
    border-radius: var(--r-sheet);
    padding: var(--space-8) var(--space-6);
  }
  .scrub__headline {
    /* --fs-display-m (96px) overflows a 390px screen; clamp to display-s */
    font-size: clamp(40px, 12vw, var(--fs-display-s));
    line-height: var(--lh-display-s);
    letter-spacing: var(--tr-display-s);
  }
  .scrub__meta {
    display: block;
    margin-top: var(--space-4);
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    line-height: var(--lh-body);
    letter-spacing: var(--tr-body);
    color: var(--pencil);
  }
  .scrub__meta .scrub__stamp {
    display: block;
    font-family: var(--font-mono);
    color: var(--graphite);
    margin-bottom: var(--space-1);
  }
  .scrub__fallback-list { display: none; }
}

/* ============================================================================
   Fallback ordinary list (hidden by default; shown by the reduced-motion rule)
   ========================================================================= */
.scrub__fallback-list {
  display: none;
  list-style: none;
  padding: var(--space-8) var(--gutter) 0;
  margin: 0;
  max-width: var(--frame);
  margin-inline: auto;
}
.scrub__fallback-list li {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-xs);
  color: var(--pencil);
}
.scrub__fallback-list .scrub__stamp {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  color: var(--graphite);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
  .scrub__stage { padding-inline-end: 12%; }
}

/* section 04: receipts */

.receipts {
  padding-block: var(--gap-section);
}

.receipts__inner {
  display: flex;
  flex-direction: column;
  gap: var(--gap-block);
}

/* two-row skeleton: headline-left / meta-right header row, then full-width content */
.receipts__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-el);
  flex-wrap: wrap;
}

.receipts__headline {
  font-family: var(--font-display);
  font-size: var(--fs-display-s);
  line-height: var(--lh-display-s);
  letter-spacing: var(--tr-display-s);
  font-weight: var(--wght-display);
  font-variation-settings: 'wght' var(--wght-display), 'wdth' var(--wdth-display), 'opsz' 56;
  font-optical-sizing: auto;
  text-wrap: balance;
  color: var(--graphite);
  margin: 0;
}

.receipts__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  line-height: var(--lh-utility);
  letter-spacing: var(--tr-utility);
  text-transform: uppercase;
  color: var(--pencil);
  font-variant-numeric: tabular-nums;
  margin: 0;
  white-space: nowrap;
}

.receipts__content {
  display: flex;
  flex-direction: column;
  gap: var(--gap-block);
}

.receipts__lead {
  font-size: var(--fs-md);
  line-height: var(--lh-lead);
  color: var(--graphite);
}

/* v1 said / v5 says mini-diff */
.receipts__diff {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-block);
  border-top: 1px solid var(--hairline);
  padding-top: var(--gap-block);
}

.receipts__diff-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.receipts__diff-label {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tr-utility);
  text-transform: uppercase;
  color: var(--pencil);
  margin: 0;
}

.receipts__diff-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.receipts__diff-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.receipts__diff-stamp {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tr-utility);
  text-transform: uppercase;
  color: var(--pencil);
  font-variant-numeric: tabular-nums;
}

.receipts__diff-stamp--ink {
  color: var(--graphite);
}

/* superseded copy: non-repro blue, struck through */
.receipts__diff-col--was .receipts__diff-text {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--pencil);
  text-decoration: line-through;
  text-decoration-color: var(--nonrepro);
  text-decoration-thickness: 2px;
}

/* shipped copy: full ink */
.receipts__diff-col--is .receipts__diff-final {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0;
}

.receipts__diff-col--is .receipts__diff-text {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  font-weight: var(--wght-display);
  font-variation-settings: 'wght' var(--wght-display), 'wdth' var(--wdth-display);
  color: var(--graphite);
}

@media (max-width: 767px) {
  .receipts__diff {
    grid-template-columns: 1fr;
  }
}

/* scroll-entry reveal: opacity + translateY, once, per §6 "Below-fold enters" */
.receipts [data-reveal] {
  opacity: 0;
  transform: translateY(var(--enter-shift));
  transition: opacity var(--dur-enter) var(--ease-take), transform var(--dur-enter) var(--ease-take);
  transition-delay: var(--reveal-delay, 0ms);
}

.receipts [data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}

/* section 05: method */
.method {
  padding-block: var(--gap-section);
}

.method__frame {
  display: flex;
  flex-direction: column;
  gap: var(--gap-block);
}

/* two-row skeleton: head row, body row */
.method__row {
  width: 100%;
}

.method__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-s);
  line-height: var(--lh-display-s);
  letter-spacing: var(--tr-display-s);
  font-weight: var(--wght-display);
  font-variation-settings: "wght" var(--wght-display), "wdth" var(--wdth-display);
  font-optical-sizing: auto;
  text-wrap: balance;
  color: var(--graphite);
  margin: 0;
}

.method__ledger {
  list-style: none;
  margin: 0;
  padding: 0;
}

.method__item {
  display: grid;
  grid-template-columns: var(--stop-size) auto 1fr;
  align-items: baseline;
  column-gap: var(--gap-el);
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--hairline);
  opacity: 0;
  transform: translateY(var(--enter-shift));
  transition: opacity var(--dur-enter) var(--ease-take), transform var(--dur-enter) var(--ease-take);
}

.method__item:first-child {
  border-top: 1px solid var(--hairline);
}

.method__item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.method__stop {
  align-self: center;
  width: var(--stop-size);
  height: var(--stop-size);
  border-radius: var(--r-pill);
  background: var(--nonrepro);
}

/* v5 — the shipped take — is ink, not a ghost */
.method__item:last-child .method__stop {
  background: var(--graphite);
}

.method__num {
  font-family: var(--font-display);
  font-size: var(--fs-display-s);
  line-height: 1;
  letter-spacing: var(--tr-display-s);
  font-variation-settings: "wght" var(--wght-display), "wdth" var(--wdth-display);
  font-variant-numeric: tabular-nums;
  color: var(--graphite);
}

.method__copy {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-lead);
  color: var(--graphite);
}

.method__name {
  font-weight: var(--wght-body-strong);
}

.method__footnote {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: var(--lh-utility);
  color: var(--pencil);
  margin: 0;
  opacity: 0;
  transform: translateY(var(--enter-shift));
  transition: opacity var(--dur-enter) var(--ease-take), transform var(--dur-enter) var(--ease-take);
}

.method__footnote.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.method__row--head[data-reveal] {
  opacity: 0;
  transform: translateY(var(--enter-shift));
  transition: opacity var(--dur-enter) var(--ease-take), transform var(--dur-enter) var(--ease-take);
}

.method__row--head[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 768px) {
  .method__item {
    grid-template-columns: var(--stop-size) auto;
    grid-template-rows: auto auto;
    row-gap: var(--space-2);
  }

  .method__num {
    font-size: var(--fs-xl);
  }

  .method__copy {
    grid-column: 1 / -1;
  }
}

/* section 06: own-takes — this section's one bleed: the strip runs to both viewport edges */

.own-takes {
  padding-block: var(--gap-section);
  overflow-x: clip;
}

.own-takes__head {
  margin-bottom: var(--gap-block);
}

.own-takes__title {
  font-family: var(--font-display);
  font-weight: var(--wght-display);
  font-variation-settings: "wdth" var(--wdth-display);
  font-size: var(--fs-display-s);
  line-height: var(--lh-display-s);
  letter-spacing: var(--tr-display-s);
  text-wrap: balance;
  font-optical-sizing: auto;
  margin: 0 0 var(--space-4);
}

.own-takes__lead {
  max-width: var(--measure);
  font-size: var(--fs-md);
  line-height: var(--lh-lead);
  color: var(--pencil);
  margin: 0;
}

/* the bleed: full viewport width, no side padding, native scroll-snap.
   With no end padding the row is wider than the viewport, so whichever
   card sits at the far end from the current scroll position is cut by
   the viewport edge — cropped at rest, both directions, no JS needed. */
.own-takes__strip {
  list-style: none;
  display: flex;
  gap: var(--space-6);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-block: var(--space-2) var(--space-4);
  padding-inline: var(--gutter);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  -webkit-overflow-scrolling: touch;
}

.own-takes__card {
  flex: 0 0 auto;
  width: min(78vw, 300px);
  scroll-snap-align: start;
  background: var(--sheet);
  border-radius: var(--r-sheet);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.own-takes__card:focus-visible {
  outline: 2px solid var(--graphite);
  outline-offset: 4px;
  border-radius: var(--r-sheet);
}

.own-takes__stamp {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-2xs);
  line-height: var(--lh-utility);
  letter-spacing: var(--tr-utility);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--graphite);
  margin: 0;
}

.own-takes__thumb {
  display: block;
  width: 100%;
  height: auto;
}

.own-takes__block {
  fill: var(--ghost-fill);
  stroke: var(--nonrepro);
  stroke-width: 1;
}

.own-takes__note {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  color: var(--pencil);
  margin: 0;
  flex-grow: 1;
}

.own-takes__stops {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.own-takes__stop {
  display: block;
  width: var(--stop-size);
  height: var(--stop-size);
  border-radius: var(--r-pill);
  border: 1px solid var(--nonrepro);
  background: var(--ghost-fill);
  padding: 0;
  transition: background-color var(--dur-hover) var(--ease-take);
}

a.own-takes__stop--ink {
  border-color: var(--graphite);
  background: var(--graphite);
}

/* hover / focus: stops fill left-to-right, colour only, 60ms stagger */
.own-takes__card:hover .own-takes__stop,
.own-takes__card:focus-within .own-takes__stop {
  background: var(--nonrepro);
}

.own-takes__card:hover .own-takes__stop--ink,
.own-takes__card:focus-within .own-takes__stop--ink {
  background: var(--graphite);
}

.own-takes__stops .own-takes__stop:nth-child(1) { transition-delay: 0ms; }
.own-takes__stops .own-takes__stop:nth-child(2) { transition-delay: 60ms; }
.own-takes__stops .own-takes__stop:nth-child(3) { transition-delay: 120ms; }
.own-takes__stops .own-takes__stop:nth-child(4) { transition-delay: 180ms; }
.own-takes__stops .own-takes__stop:nth-child(5) { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  .own-takes__strip {
    scroll-behavior: auto;
  }
}

@media (min-width: 768px) {
  .own-takes__card {
    width: 300px;
  }
}

/* section 07: engagement */
.engagement {
  padding-block: var(--gap-section);
}

.engagement__frame {
  display: flex;
  flex-direction: column;
  gap: var(--gap-block);
}

/* scroll-entry reveal — matches the sitewide below-fold enter rule (§6):
   opacity 0->1 + translateY(24px->0), --dur-enter, --ease-take, once */
.engagement [data-reveal] {
  opacity: 0;
  transform: translateY(var(--enter-shift));
  transition: opacity var(--dur-enter) var(--ease-take),
              transform var(--dur-enter) var(--ease-take);
}
.engagement [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.engagement__row--head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.engagement__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-s);
  line-height: var(--lh-display-s);
  letter-spacing: var(--tr-display-s);
  font-weight: var(--wght-display);
  font-variation-settings: 'wght' var(--wght-display), 'wdth' var(--wdth-display);
  color: var(--graphite);
  text-wrap: balance;
}

.engagement__lead {
  font-size: var(--fs-md);
  line-height: var(--lh-lead);
  color: var(--pencil);
}

.engagement__row--body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-block);
}

.engagement__table {
  width: 100%;
  border-collapse: collapse;
}

.engagement__line {
  border-top: 1px solid var(--hairline);
  transition: opacity var(--dur-enter) var(--ease-take),
              transform var(--dur-enter) var(--ease-take);
}
.engagement__line:last-child {
  border-bottom: 1px solid var(--hairline);
}

/* child stagger, 70ms per row, gated on the row's own reveal state */
.engagement__row--body[data-reveal]:not(.is-visible) .engagement__line {
  opacity: 0;
  transform: translateY(var(--enter-shift));
}
.engagement__line:nth-child(1) { transition-delay: 0ms; }
.engagement__line:nth-child(2) { transition-delay: 70ms; }
.engagement__line:nth-child(3) { transition-delay: 140ms; }

.engagement__name,
.engagement__detail {
  padding-block: var(--space-6);
  font-weight: var(--wght-body);
  text-align: left;
}

.engagement__name {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--wght-display);
  font-variation-settings: 'wght' var(--wght-display), 'wdth' var(--wdth-display);
  letter-spacing: var(--tr-body);
  color: var(--graphite);
  width: 40%;
}

.engagement__detail {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--pencil);
}

.engagement__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-8);
  border: 1px solid var(--graphite);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--graphite);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--wght-body-strong);
  text-decoration: none;
  transition: background-color var(--dur-hover-out) var(--ease-take);
}
.engagement__cta:hover {
  background: var(--sheet);
  transition-duration: var(--dur-hover);
}

@media (max-width: 767px) {
  .engagement__name {
    width: auto;
  }
  .engagement__line {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-block: var(--space-4) 0;
  }
  .engagement__detail {
    padding-block: 0 var(--space-4);
  }
}

/* section 08: cta — scoped under .cta */

.cta {
  padding-block: var(--gap-section);
}

.cta .frame {
  display: flex;
  justify-content: center;
}

.cta__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-block);
  max-width: var(--measure);
  margin-inline: auto;
  text-align: center;
}

.cta__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-display-m);
  line-height: var(--lh-display-m);
  letter-spacing: var(--tr-display-m);
  font-variation-settings: "wght" var(--wght-display), "wdth" var(--wdth-display);
  font-optical-sizing: auto;
  text-wrap: balance;
  color: var(--graphite);
}

@media (max-width: 767px) {
  .cta__heading {
    font-size: var(--fs-display-s);
    line-height: var(--lh-display-s);
    letter-spacing: var(--tr-display-s);
  }
}

.cta__sub {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-lead);
  color: var(--pencil);
}

.cta__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-el);
}

.cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--r-pill);
  background: var(--graphite);
  color: var(--vellum);
  font-family: var(--font-body);
  font-weight: var(--wght-body-strong);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: background var(--dur-hover) var(--ease-take);
}

.cta__btn:hover,
.cta__btn:focus-visible {
  background: var(--btn-hover);
  transition-duration: var(--dur-hover);
}

.cta__email {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--graphite);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--graphite) 40%, transparent);
  transition: border-color var(--dur-hover) var(--ease-take);
}

.cta__email:hover,
.cta__email:focus-visible {
  border-bottom-color: var(--graphite);
  transition-duration: var(--dur-hover);
}

.cta__stop {
  width: var(--stop-size);
  height: var(--stop-size);
  flex-shrink: 0;
  border-radius: var(--r-pill);
  background: var(--graphite);
}

/* scroll-entry reveal — §6 "below-fold enters" */
.cta [data-reveal] {
  opacity: 0;
  transform: translateY(var(--enter-shift));
  transition: opacity var(--dur-enter) var(--ease-take),
              transform var(--dur-enter) var(--ease-take);
}

.cta [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.cta [data-reveal]:nth-of-type(2) { transition-delay: 70ms; }
.cta [data-reveal]:nth-of-type(3) { transition-delay: 140ms; }

/* section 09: footer */
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--table-off);
  color: var(--vellum);
  padding-top: clamp(100px, 10vw, 120px);
  padding-bottom: 0;
}

.site-footer :focus-visible {
  outline-color: var(--vellum);
}

.site-footer__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap-block);
}

.site-footer__statement {
  margin: 0;
  max-width: 14ch;
  font-family: var(--font-display);
  font-size: clamp(40px, 8.5vw, var(--fs-display-m));
  line-height: var(--lh-display-m);
  letter-spacing: var(--tr-display-m);
  font-variation-settings: "wght" var(--wght-display), "wdth" var(--wdth-display);
  font-optical-sizing: auto;
  text-wrap: balance;
  color: var(--vellum);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-8);
  row-gap: var(--space-3);
}

.site-footer__links a {
  color: var(--vellum);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--vellum) 40%, transparent);
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--dur-hover) var(--ease-take);
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
  text-decoration-color: currentColor;
  transition-duration: var(--dur-hover-out);
}

.site-footer__meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4) var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  line-height: var(--lh-utility);
  letter-spacing: var(--tr-utility);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--vellum) 70%, transparent);
  font-variant-numeric: tabular-nums;
}

.site-footer__meta a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--vellum) 40%, transparent);
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--dur-hover) var(--ease-take);
}

.site-footer__meta a:hover,
.site-footer__meta a:focus-visible {
  text-decoration-color: currentColor;
  transition-duration: var(--dur-hover-out);
}

/* ghost wordmark — this section's one bleed: starts below the meta row,
   then a local overflow-hidden crop reveals only its top half (roughly
   half the lockup's cap-height), which reads as "cropped by the footer's
   bottom edge" since there's no padding-bottom left to show past it. */
.site-footer__wordmark {
  position: relative;
  z-index: 0;
  margin: 0;
  margin-top: clamp(48px, 8vw, 96px);
  padding-left: var(--gutter);
  height: 12.8vw;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 32vw;
  line-height: 0.8;
  font-variation-settings: "wght" var(--wght-display), "wdth" var(--wdth-display);
  font-optical-sizing: auto;
  color: color-mix(in srgb, var(--nonrepro) 6%, transparent);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.site-footer__lockup {
  position: relative;
  display: inline-block;
  color: color-mix(in srgb, var(--nonrepro) 20%, transparent);
}

.site-footer__ghost4 {
  position: absolute;
  inset: 0;
  transform: translate(var(--ghost-dx), var(--ghost-dy));
}

.site-footer__five {
  position: relative;
}

@media (max-width: 767px) {
  .site-footer__wordmark {
    font-size: 60vw;
    height: 24vw;
    margin-top: clamp(32px, 10vw, 56px);
  }

  .site-footer__meta {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer__links a,
  .site-footer__meta a {
    transition-duration: var(--dur-swap);
  }
}