@font-face {
  font-family: "Archivo";
  src: url("assets/fonts-v1/archivo-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Abril Fatface";
  src: url("assets/fonts-v1/abril-fatface.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --carbon: #090806;
  --carbon-soft: #12100c;
  --ivory: #eae4d8;
  --ivory-72: rgba(234, 228, 216, 0.72);
  --ivory-48: rgba(234, 228, 216, 0.48);
  --ivory-22: rgba(234, 228, 216, 0.22);
  --ivory-10: rgba(234, 228, 216, 0.1);
  --champagne: #c7a265;
  --champagne-bright: #e2c48e;
  --blue: #2d7183;
  --titanium: #aaa59d;
  --font-ui: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Abril Fatface", Georgia, "Times New Roman", serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --page-pad: clamp(1.5rem, 5vw, 6rem);
  --header-height: 4.5rem;
}

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

html {
  background: var(--carbon);
  scroll-behavior: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

body {
  margin: 0;
  min-width: 20rem;
  overflow-x: clip;
  background: var(--carbon);
  color: var(--ivory);
  font-family: var(--font-ui);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
canvas {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
[role="slider"] {
  font: inherit;
}

::selection {
  background: var(--champagne);
  color: var(--carbon);
}

:focus-visible {
  outline: 2px solid var(--champagne-bright);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  top: max(0.75rem, env(safe-area-inset-top));
  left: max(0.75rem, env(safe-area-inset-left));
  z-index: 100;
  min-height: 2.75rem;
  padding: 0.75rem 1rem;
  transform: translateY(-180%);
  background: var(--ivory);
  color: var(--carbon);
  font-size: 0.8rem;
  font-weight: 700;
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* Persistent product stage */
.stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--carbon);
}

.stage__poster,
.stage__film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.stage__poster {
  object-fit: cover;
  object-position: center;
  opacity: 1;
  transition: opacity 500ms var(--ease-out);
}

.stage__film {
  opacity: 0;
  transition: opacity 500ms var(--ease-out);
}

.stage.is-ready .stage__film,
.stage.is-film-ready .stage__film {
  opacity: 1;
}

.stage.is-ready .stage__poster,
.stage.is-film-ready .stage__poster {
  opacity: 0;
}

.stage__shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(9, 8, 6, 0.5) 0%, transparent 20%, transparent 70%, rgba(9, 8, 6, 0.4) 100%),
    linear-gradient(90deg, rgba(9, 8, 6, 0.28) 0%, transparent 34%, transparent 66%, rgba(9, 8, 6, 0.26) 100%);
}

.iris-mask {
  --iris-size: 0%;
  --iris-x: 50%;
  --iris-y: 50%;
  --iris-opacity: 0;
  position: absolute;
  inset: -1px;
  z-index: 5;
  opacity: var(--iris-opacity);
  clip-path: circle(var(--iris-size) at var(--iris-x) var(--iris-y));
  background: var(--carbon);
  will-change: clip-path, opacity;
}

/* clip-path is not compositor-accelerated, so the hint only pins a layer for an
   element that is idle outside the one interlude. */
@media (max-width: 767px) {
  .iris-mask { will-change: auto; }
  /* Animating box-shadow repaints every frame, and this runs for six seconds
     right where the first scroll happens. */
  .assembly-cue::before { animation: none; }
}

/* Quiet, useful navigation chrome */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  min-height: calc(var(--header-height) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  padding-right: max(var(--page-pad), env(safe-area-inset-right));
  padding-left: max(var(--page-pad), env(safe-area-inset-left));
  background: linear-gradient(180deg, rgba(9, 8, 6, 0.86), rgba(9, 8, 6, 0));
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.17em;
}

.site-header__chapter {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 0.65rem;
  min-height: 2.75rem;
  color: var(--ivory-72);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

#chapter-current {
  color: var(--champagne);
}

.site-header__divider {
  width: 1.75rem;
  height: 1px;
  background: var(--ivory-22);
}

.site-header__progress {
  --progress: 0;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  overflow: hidden;
  background: var(--ivory-10);
}

.site-header__progress::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: scaleX(var(--progress));
  transform-origin: left center;
  background: linear-gradient(90deg, var(--blue), var(--champagne));
  will-change: transform;
}

/* Scroll narrative */
.story {
  position: relative;
  z-index: 2;
}

.scene {
  position: relative;
  display: flex;
  align-items: flex-start;
  width: 100%;
  padding-top: clamp(7rem, 20vh, 13rem);
  padding-right: max(var(--page-pad), env(safe-area-inset-right));
  padding-bottom: clamp(5rem, 16vh, 10rem);
  padding-left: max(var(--page-pad), env(safe-area-inset-left));
}

.scene--assembly {
  height: 240svh;
  padding-top: clamp(9rem, 27vh, 17rem);
}

.scene--set-moment {
  /* 196svh leaves 96svh of scroll travel: 60% less than the previous 240svh. */
  height: 196svh;
}

.scene--doctrine,
.scene--object {
  height: 180svh;
}

.scene--dial {
  height: 200svh;
}

.scene--resolve {
  height: 220svh;
}

.scene__copy {
  position: sticky;
  top: clamp(7rem, 20vh, 13rem);
  isolation: isolate;
  width: min(38rem, 100%);
  max-width: calc(100vw - (2 * var(--page-pad)));
  padding: clamp(1.25rem, 2.5vw, 2rem);
  text-align: left;
  will-change: opacity, transform;
}

.scene--assembly .scene__copy {
  top: clamp(8rem, 26vh, 17rem);
}

.scene__copy::before {
  content: "";
  position: absolute;
  inset: -12% -10%;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 50%, rgba(9, 8, 6, 0.92) 0%, rgba(9, 8, 6, 0.72) 48%, transparent 76%);
}

.scene--right .scene__copy {
  margin-left: auto;
}

.scene--center {
  justify-content: center;
}

.scene--center .scene__copy {
  width: min(32rem, 100%);
  margin-inline: auto;
  text-align: center;
}

.scene--set-moment .scene__copy::before {
  inset: -14% -18%;
  background: radial-gradient(ellipse at 50% 50%, rgba(9, 8, 6, 0.97) 0%, rgba(9, 8, 6, 0.84) 56%, transparent 80%);
}

@media (min-width: 768px) and (max-width: 900px) {
  .scene__copy::before {
    inset-inline: 0;
  }

  .scene--set-moment .scene__copy::before {
    inset-inline: -8%;
  }
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1rem;
  color: var(--champagne);
  font-size: clamp(0.62rem, 0.7vw, 0.72rem);
  font-weight: 600;
  letter-spacing: 0.19em;
  line-height: 1.5;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  flex: 0 0 2rem;
  width: 2rem;
  height: 1px;
  background: currentColor;
}

.scene--center .eyebrow {
  justify-content: center;
}

.scene__title {
  max-width: 12ch;
  margin: 0;
  color: var(--ivory);
  font-size: clamp(3rem, 5.6vw, 6.5rem);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 0.96;
  text-wrap: balance;
}

.scene__title--hero {
  max-width: 11ch;
  font-size: clamp(3.4rem, 6.4vw, 7.2rem);
}

.scene__title em,
.creator-reveal h2 em {
  color: var(--champagne-bright);
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.035em;
}

.scene__body {
  max-width: 38ch;
  margin: clamp(1.25rem, 2.7vh, 2rem) 0 0;
  color: var(--ivory-72);
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  font-weight: 400;
  line-height: 1.62;
}

.scene__note {
  max-width: 38ch;
  margin: clamp(1.25rem, 2.7vh, 2rem) 0 0;
  color: var(--titanium);
  font-size: clamp(0.68rem, 0.85vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.7;
  text-transform: uppercase;
}

.assembly-cue {
  position: relative;
  width: fit-content;
  margin-top: clamp(1.8rem, 4vh, 3.5rem);
  padding: 0.9rem 0 0 1.2rem;
  border-top: 1px solid var(--ivory-22);
}

.assembly-cue::before {
  content: "";
  position: absolute;
  top: 1.12rem;
  left: 0;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 0 rgba(45, 113, 131, 0.54);
  animation: cue-pulse 2s ease-out 3;
}

.assembly-cue__status {
  margin: 0;
  color: var(--ivory);
  font-size: clamp(0.68rem, 0.8vw, 0.78rem);
  font-weight: 700;
  letter-spacing: 0.15em;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

#assembly-count {
  color: var(--champagne-bright);
}

.scene__hint,
.scene__instruction {
  margin: 0.45rem 0 0;
  color: var(--ivory-48);
  font-size: 0.78rem;
  line-height: 1.55;
}

.scene__instruction {
  margin-top: 1.15rem;
  color: var(--ivory-72);
  font-weight: 500;
  letter-spacing: 0.04em;
}

@keyframes cue-pulse {
  0% { box-shadow: 0 0 0 0 rgba(45, 113, 131, 0.54); }
  68%, 100% { box-shadow: 0 0 0 0.7rem rgba(45, 113, 131, 0); }
}

/* The transition interlude doubles as a keyboard-accessible control. */
.reserve-control {
  display: grid;
  justify-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.reserve-dial {
  --reserve-size: clamp(10.5rem, 18vw, 14rem);
  position: relative;
  display: grid;
  place-items: center;
  width: var(--reserve-size);
  height: var(--reserve-size);
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: 1px solid var(--ivory-22);
  border-radius: 50%;
  cursor: grab;
  touch-action: none;
  user-select: none;
  box-shadow: inset 0 0 0 0.55rem rgba(234, 228, 216, 0.025), 0 1.5rem 5rem rgba(0, 0, 0, 0.35);
}

.reserve-dial:active {
  cursor: grabbing;
}

.reserve-dial::before {
  content: "";
  position: absolute;
  inset: 0.7rem;
  border-radius: 50%;
  background: repeating-conic-gradient(from 225deg, var(--ivory-48) 0 1deg, transparent 1deg 15deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.45rem), #000 calc(100% - 0.42rem));
  mask: radial-gradient(farthest-side, transparent calc(100% - 0.45rem), #000 calc(100% - 0.42rem));
  opacity: 0.65;
}

.reserve-dial__progress {
  --reserve: 0;
  --rotation: -135deg;
  position: absolute;
  inset: 0.42rem;
  border-radius: 50%;
  background: conic-gradient(
    from 225deg,
    var(--champagne-bright) 0deg calc(var(--reserve) * 270deg),
    var(--ivory-10) calc(var(--reserve) * 270deg) 270deg,
    transparent 270deg 360deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.42rem), #000 calc(100% - 0.38rem));
  mask: radial-gradient(farthest-side, transparent calc(100% - 0.42rem), #000 calc(100% - 0.38rem));
}

.reserve-dial__needle {
  position: absolute;
  inset: 0;
  transform: rotate(var(--rotation));
  will-change: transform;
}

.reserve-dial__needle::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0.72rem;
  height: 0.72rem;
  transform: translate(-50%, -0.08rem);
  border: 2px solid var(--carbon);
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 1rem rgba(45, 113, 131, 0.8);
}

.reserve-dial__readout {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  color: var(--ivory);
  font-variant-numeric: tabular-nums;
}

#reserve-value {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.06em;
}

.reserve-dial__readout small {
  color: var(--champagne);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
}

.reserve-control__label {
  display: flex;
  gap: 0.6rem;
  margin: 0;
  color: var(--ivory-48);
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
}

.reserve-control__label span {
  color: var(--champagne);
}

/* Final product information remains part of the immersive layer. */
.specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  width: min(38rem, 100%);
  margin: clamp(1.75rem, 4vh, 3rem) 0 0;
  border-top: 1px solid var(--ivory-22);
  border-left: 1px solid var(--ivory-22);
}

.specs div {
  min-width: 0;
  padding: 1rem;
  border-right: 1px solid var(--ivory-22);
  border-bottom: 1px solid var(--ivory-22);
  background: rgba(9, 8, 6, 0.58);
}

.specs dt {
  margin: 0 0 0.38rem;
  color: var(--champagne);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.specs dd {
  margin: 0;
  color: var(--ivory);
  font-size: clamp(0.82rem, 1vw, 0.96rem);
  font-weight: 500;
  line-height: 1.45;
}

/* Authorship appears only after the product story resolves. */
.creator-reveal {
  position: relative;
  z-index: 40;
  overflow: hidden;
  padding: clamp(5rem, 12vw, 11rem) max(var(--page-pad), env(safe-area-inset-right)) max(clamp(5rem, 10vw, 9rem), env(safe-area-inset-bottom)) max(var(--page-pad), env(safe-area-inset-left));
  border-top: 1px solid rgba(199, 162, 101, 0.5);
  background: var(--ivory);
  color: var(--carbon);
}

.creator-reveal::before {
  content: "K";
  position: absolute;
  top: -0.23em;
  right: -0.03em;
  color: rgba(9, 8, 6, 0.035);
  font-family: var(--font-display);
  font-size: min(70vw, 52rem);
  line-height: 1;
  pointer-events: none;
}

.creator-reveal__inner {
  position: relative;
  width: min(72rem, 100%);
  margin-inline: auto;
}

.eyebrow--dark {
  color: #72592f;
}

.creator-reveal h2 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(3rem, 7.2vw, 8rem);
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 0.95;
  text-wrap: balance;
}

.creator-reveal h2 em {
  color: #72592f;
}

.creator-reveal__disclosure {
  max-width: 58ch;
  margin: clamp(1.75rem, 4vw, 3rem) 0 0;
  color: rgba(9, 8, 6, 0.72);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.7;
}

.creator-reveal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(2rem, 4vw, 3.25rem);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 3.25rem;
  padding: 0.9rem 1.2rem;
  border: 1px solid var(--carbon);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.3;
  transition: color 220ms ease, background-color 220ms ease, border-color 220ms ease;
}

.button--primary {
  background: var(--carbon);
  color: var(--ivory);
}

.button--secondary {
  background: transparent;
  color: var(--carbon);
}

.button:hover,
.button:focus-visible {
  border-color: #72592f;
  background: #72592f;
  color: var(--ivory);
}

@supports not (height: 100svh) {
  .scene--assembly { height: 240vh; }
  .scene--set-moment { height: 196vh; }
  .scene--doctrine,
  .scene--object { height: 180vh; }
  .scene--dial { height: 200vh; }
  .scene--resolve { height: 220vh; }
}

/* Mobile gives the film and copy two persistent, non-competing viewports. */
@media (max-width: 767px) {
  :root {
    --page-pad: 1rem;
    --header-height: 4rem;
    --mobile-stage-height: 66svh;
  }

  .site-header {
    grid-template-columns: auto 1fr;
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-left: max(1rem, env(safe-area-inset-left));
    background: linear-gradient(180deg, rgba(9, 8, 6, 0.94), rgba(9, 8, 6, 0.1));
  }

  .site-header__brand {
    font-size: 0.78rem;
  }

  .site-header__chapter {
    gap: 0.4rem;
    font-size: 0.58rem;
    letter-spacing: 0.1em;
  }

  .site-header__divider {
    width: 0.9rem;
  }

  /* A scrub position readout, pinned to the bottom edge where the thumb already
     is. Costs nothing: --progress is a custom property app.js already writes
     every frame for the header bar, and the fill is a scaleX transform, so this
     is compositor-only — no new JS, no layout, no paint.

     It earns its place during "Set the moment", where the film deliberately
     holds on a single frame while the reserve winds. That hold is correct, but
     with nothing else moving the scroll reads as dead. This keeps confirming
     the input is landing. */
  .site-header__progress {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: rgba(234, 228, 216, 0.14);
  }

  .site-header__progress::after {
    box-shadow: 0 0 10px rgba(199, 162, 101, 0.55);
  }

  .stage {
    inset: 0 0 auto;
    height: var(--mobile-stage-height);
    border-bottom: 1px solid var(--ivory-10);
  }

  .stage__poster {
    object-fit: cover;
    object-position: 28% 50%;
  }

  .stage__shade {
    background: linear-gradient(180deg, rgba(9, 8, 6, 0.32), transparent 22%, transparent 80%, rgba(9, 8, 6, 0.42));
  }

  .scene {
    display: block;
    padding: 0;
  }

  .scene--assembly {
    padding-top: 0;
  }

  .scene__copy,
  .scene--assembly .scene__copy {
    position: fixed;
    inset: var(--mobile-stage-height) 0 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: calc(100svh - var(--mobile-stage-height));
    max-width: none;
    max-height: none;
    margin-inline: 0;
    padding-top: 1rem;
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
    padding-left: max(1rem, env(safe-area-inset-left));
    overflow-y: auto;
    /* Must stay `auto`. The thumb usually lands on this panel, and when its copy
       fits it has nothing to scroll — the gesture has to chain to #scroller or
       the film only responds to drags on the stage. Chaining is safe now that
       the document itself cannot scroll. */
    overscroll-behavior-y: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    visibility: hidden;
    pointer-events: none;
    border-top: 1px solid var(--ivory-22);
    background:
      radial-gradient(ellipse at 82% 0%, rgba(211, 168, 92, 0.07), transparent 46%),
      linear-gradient(145deg, rgba(18, 16, 12, 0.99), rgba(9, 8, 6, 0.985));
    /* No box-shadow here. A 3.5rem blur across a full-width fixed panel is an
       expensive paint on a phone GPU and the gradient above already separates
       the copy from the film. */
    transform: translate3d(0, 0.6rem, 0);
    /* All six panels are fixed and full-width on mobile, so promoting every one
       of them held six composited layers alive for the single visible panel. */
    will-change: auto;
    transition:
      opacity 280ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 280ms;
  }

  /* The interlude blacks the stage out on purpose while the reserve winds. On
     desktop the film is full-bleed, so the dial travels up across that black as
     you scroll and the circle frames something. On a phone the stage is a strip
     at the top and the dial sits below it, so the circle had nothing in it and
     the pause read as the film ending.

     The layout is not changed. The dial alone rides up out of the copy area,
     through the iris, and off the top — driven by scroll position, so it is the
     same gesture desktop gets from its geometry. The panel has to stop clipping
     for the dial to leave it. */
  /* Shorter on a phone. The chapter holds one frame, so its length is scroll
     spent against a still picture; 196svh was 1756px of that. At 130svh, with
     the iris covering from local 0.15 to 0.90, only about 290px of the chapter
     shows a frozen frame instead of 965px. */
  .scene--set-moment {
    height: 130svh;
  }

  .scene--set-moment .scene__copy {
    overflow: visible;
  }

  /* The dial sits above the title on a phone. It leaves upward, so anywhere
     below the heading means it drags across the type on its way out. The panel
     is a flex column, so this is ordering, not repositioning. */
  .scene--set-moment .reserve-control { order: 1; }
  .scene--set-moment .eyebrow { order: 2; }
  .scene--set-moment .scene__title { order: 3; }
  .scene--set-moment .scene__instruction { order: 4; }

  /* The copy has 30svh to live in now, and the dial takes the largest share of
     it, so this chapter's heading runs a little tighter than the others to keep
     the instruction on screen. */
  .scene--set-moment .scene__title {
    font-size: clamp(1.95rem, 8.8vw, 2.75rem);
  }

  .scene--set-moment .reserve-control {
    margin-top: 0;
    margin-bottom: 0.55rem;
    transform: translateY(calc(var(--interlude-rise, 0) * -62svh));
    opacity: var(--interlude-fade, 1);
    will-change: transform, opacity;
  }

  /* The copy panels are pure text and cover the lower half of the screen, so
     taking pointer events meant only the stage area scrubbed the film. They let
     the drag straight through to .scroller instead; app.js hands interactivity
     back to any panel whose copy genuinely overflows, so that text stays
     reachable. */
  .scene__copy.is-copy-active {
    visibility: visible;
    pointer-events: none;
    transform: translate3d(0, 0, 0);
    transition-delay: 0s;
  }

  /* The crown is the one thing in the copy that is a control rather than text,
     so it takes its touches back. It already declares touch-action: none, so
     winding it does not fight the scroll underneath. */
  .scene__copy.is-copy-active .reserve-dial {
    pointer-events: auto;
  }

  .scene__copy::-webkit-scrollbar {
    display: none;
  }

  .scene__copy::before {
    display: none;
  }

  /* Every other chapter is a caption beside the film, so it reads left. This one
     is a control: it asks you to wind a crown, and the crown sits on the centre
     axis. Aligning the copy to it puts the instruction over the thing it names. */
  .scene--center .scene__copy {
    text-align: center;
  }

  .scene--center .eyebrow {
    justify-content: center;
  }

  /* The title is capped at 12ch and the instruction is a block, so both need
     centring as boxes, not just as text. */
  .scene--center .scene__title,
  .scene--center .scene__instruction {
    margin-inline: auto;
  }


  .scene__title,
  .scene__title--hero {
    max-width: 12ch;
    font-size: clamp(2.2rem, 10.5vw, 3.55rem);
    line-height: 0.98;
  }

  .scene__body {
    font-size: 1rem;
  }

  .assembly-cue {
    width: 100%;
    margin-top: 1.1rem;
    padding-top: 0.7rem;
  }

  .assembly-cue__status {
    font-size: 0.66rem;
    letter-spacing: 0.11em;
  }

  .reserve-control {
    justify-items: center;
    gap: 0.55rem;
    margin-top: 0.8rem;
  }

  .reserve-dial {
    --reserve-size: min(7rem, 28vw);
  }

  .reserve-control__label {
    flex-direction: column;
    /* Column flex, so horizontal centring is align-items — justify-content here
       would only redistribute the two lines vertically. */
    align-items: center;
    gap: 0.15rem;
  }

  .specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .specs div {
    padding: 0.62rem;
  }

  .specs dd {
    font-size: 0.78rem;
  }

  .creator-reveal {
    padding-top: 5rem;
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-bottom: max(4rem, env(safe-area-inset-bottom));
    padding-left: max(1rem, env(safe-area-inset-left));
  }

  .creator-reveal h2 {
    font-size: clamp(2.8rem, 13vw, 4.5rem);
  }

  .creator-reveal__actions {
    display: grid;
  }

  .button {
    width: 100%;
    min-height: 3.5rem;
  }
}

@media (max-width: 360px) {
  .eyebrow {
    display: block;
    font-size: 0.58rem;
    letter-spacing: 0.12em;
    overflow-wrap: anywhere;
  }

  .eyebrow::before {
    display: block;
    width: 1.5rem;
    margin-bottom: 0.55rem;
  }

  .assembly-cue__status {
    font-size: 0.6rem;
    letter-spacing: 0.09em;
  }
}

@media (max-width: 767px) and (max-height: 700px) {
  :root {
    --mobile-stage-height: 62svh;
  }

  .scene__title,
  .scene__title--hero {
    font-size: clamp(2.05rem, 9.5vw, 3rem);
  }

  .reserve-dial {
    --reserve-size: min(6rem, 25vw);
  }

  .scene__copy,
  .scene--assembly .scene__copy {
    padding-top: 0.7rem;
    padding-bottom: max(0.7rem, env(safe-area-inset-bottom));
  }

  .scene__instruction {
    margin-top: 0.6rem;
  }

  .reserve-control {
    gap: 0.35rem;
    margin-top: 0.45rem;
  }

  .specs {
    margin-top: 1rem;
  }

}

@supports not (height: 100svh) {
  @media (max-width: 767px) {
    :root {
      --mobile-stage-height: 66vh;
    }

    .scene__copy,
    .scene--assembly .scene__copy {
      height: calc(100vh - var(--mobile-stage-height));
    }
  }

  @media (max-width: 767px) and (max-height: 700px) {
    :root {
      --mobile-stage-height: 62vh;
    }
  }
}

/* Motion is enhancement, never the only way to receive the story. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .stage {
    display: none;
  }

  .site-header {
    position: sticky;
    background: var(--carbon);
  }

  .site-header__progress {
    display: none;
  }

  .scene,
  .scene--assembly,
  .scene--set-moment,
  .scene--doctrine,
  .scene--object,
  .scene--dial,
  .scene--resolve {
    display: flex;
    align-items: center;
    height: auto;
    min-height: 100svh;
    padding: clamp(6rem, 14vh, 10rem) max(var(--page-pad), env(safe-area-inset-right)) clamp(4rem, 10vh, 7rem) max(var(--page-pad), env(safe-area-inset-left));
    background-position: center, center;
    background-repeat: no-repeat;
    background-size: cover, cover;
  }

  .scene--assembly {
    background-image: linear-gradient(90deg, rgba(9, 8, 6, 0.25), rgba(9, 8, 6, 0.82)), url("assets/seq-desktop-v1/0001.webp");
  }

  .scene--set-moment {
    background-image: linear-gradient(90deg, rgba(9, 8, 6, 0.78), rgba(9, 8, 6, 0.42)), url("assets/seq-desktop-v1/0194.webp");
  }

  .scene--doctrine {
    background-image: linear-gradient(90deg, rgba(9, 8, 6, 0.32), rgba(9, 8, 6, 0.84)), url("assets/seq-desktop-v1/0242.webp");
  }

  .scene--object {
    background-image: linear-gradient(90deg, rgba(9, 8, 6, 0.84), rgba(9, 8, 6, 0.3)), url("assets/seq-desktop-v1/0413.webp");
  }

  .scene--dial {
    background-image: linear-gradient(90deg, rgba(9, 8, 6, 0.8), rgba(9, 8, 6, 0.34)), url("assets/seq-desktop-v1/0584.webp");
  }

  .scene--resolve {
    background-image: linear-gradient(90deg, rgba(9, 8, 6, 0.82), rgba(9, 8, 6, 0.26)), url("assets/seq-desktop-v1/0777.webp");
  }

  .scene__copy,
  .scene--assembly .scene__copy {
    position: relative;
    inset: auto;
    display: block;
    width: min(38rem, 100%);
    height: auto;
    max-height: none;
    overflow: visible;
    visibility: visible !important;
    pointer-events: auto;
    opacity: 1 !important;
    transform: none !important;
  }

  .reserve-dial {
    cursor: default;
  }

  .iris-mask {
    display: none;
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .scene,
  .scene--assembly,
  .scene--set-moment,
  .scene--doctrine,
  .scene--object,
  .scene--dial,
  .scene--resolve {
    display: block;
    min-height: auto;
    padding-top: 60vw;
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-bottom: 2rem;
    padding-left: max(1rem, env(safe-area-inset-left));
    background-position: center, top center;
    background-size: 100% 100%, 100% auto;
  }

  .scene__copy,
  .scene--assembly .scene__copy {
    background: var(--carbon-soft);
  }
}