main { position: fixed; inset: 0; z-index: 1; }

/* Every station occupies the same single viewport and they are stacked, not
   laid out in sequence. js/stage.js raises exactly one of them at a time. */
.section {
  position: absolute;
  inset: 0;
  height: 100%;
  opacity: 0;
}

.pin {
  position: relative;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.copy {
  position: relative;
  z-index: 2;
  width: min(100%, 62rem);
  padding-inline: var(--pad-x);
  text-align: center;
}

.kicker {
  font-family: var(--f-air);
  font-size: var(--t-kicker);
  letter-spacing: var(--track-kicker);
  color: var(--gold);
  margin: 0 0 1.4rem;
  text-transform: none;
}

.h {
  font-family: var(--f-display);
  font-size: var(--t-h);
  line-height: 0.98;
  letter-spacing: var(--track-h);
  font-weight: 800;
  margin: 0;
  color: var(--bone);
  text-wrap: balance;
}

.lede {
  font-family: var(--f-air);
  font-size: var(--t-lede);
  line-height: 1.6;
  color: var(--bone-dim);
  margin: 1.6rem auto 0;
  max-width: 40ch;
}

/* section 06 loses the gold entirely - the palette carries the story */
.section--dark .kicker { color: var(--bone-dim); }

.section--close .cta {
  display: inline-block;
  margin-top: 2.5rem;
  padding: 0.9rem 2.2rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--gold);
  font-family: var(--f-air);
  font-size: var(--t-lede);
  letter-spacing: 0.12em;
  text-decoration: none;
  transition: background-color 300ms var(--ease-veil), color 300ms var(--ease-veil);
}
.section--close .cta:hover { background: var(--gold); color: var(--ink); }
.section--close .credit {
  font-family: var(--f-air);
  font-size: var(--t-kicker);
  letter-spacing: 0.18em;
  color: var(--bone-dim);
  margin-top: 3rem;
}

.scroll-hint {
  position: absolute;
  bottom: 2.5rem;
  font-family: var(--f-air);
  font-size: var(--t-kicker);
  letter-spacing: var(--track-kicker);
  color: var(--bone-dim);
  margin: 0;
}

/* chrome */
.rail {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  inset-inline-start: clamp(0.9rem, 2vw, 2rem);
  z-index: var(--chrome-z);
}
.rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.15rem; }
.rail li {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--bone-dim); opacity: 0.35;
  transition: opacity 400ms var(--ease-veil), box-shadow 400ms var(--ease-veil);
}
.rail li.is-active {
  opacity: 1;
  background: var(--gold);
  box-shadow: 0 0 12px 2px rgba(201, 169, 97, 0.5);
}
/* section 06 is the one stage with no gold anywhere - the rail dot must not
   be the exception. Neutral while it is active, gold again from 07. */
.rail.is-muted li.is-active {
  background: var(--bone);
  box-shadow: none;
}

.counter {
  position: fixed;
  bottom: clamp(1rem, 3vh, 2.5rem);
  inset-inline-start: clamp(1rem, 3vw, 3rem);
  margin: 0;
  z-index: var(--chrome-z);
  font-family: var(--f-air);
  color: var(--bone);
  font-size: var(--t-counter);
  letter-spacing: 0.06em;
  direction: ltr;
  pointer-events: none;
}
.counter .counter-total { font-size: 0.32em; color: var(--bone-dim); vertical-align: 0.9em; }

.chrome-toggles {
  position: fixed;
  top: clamp(1rem, 3vh, 2rem);
  inset-inline-end: clamp(1rem, 3vw, 2.5rem);
  z-index: var(--chrome-z);
  display: flex;
  gap: 0.6rem;
}
.chrome-toggles button {
  min-width: 3rem; height: 3rem;
  padding: 0 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(237, 231, 218, 0.22);
  background: rgba(8, 8, 10, 0.45);
  backdrop-filter: blur(6px);
  color: var(--bone);
  font-family: var(--f-air);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: border-color 300ms var(--ease-veil);
}
.chrome-toggles button:hover { border-color: var(--gold); }
.chrome-toggles button[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); }

@media (max-width: 600px) {
  .rail { display: none; }
  .lede { max-width: 28ch; }
}

.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--ink);
}
.backdrop .veil {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-size: cover;
  background-position: center;
  will-change: opacity;
}
/* The clip sits over its own first frame. Until it has loaded and started,
   what shows through is the still - the page never presents a black hole
   where a video is meant to be. */
.backdrop .veil video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
/* A vignette keeps type legible over any image. */
.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      ellipse at center,
      rgba(8, 8, 10, 0.15) 0%,
      rgba(8, 8, 10, 0.72) 78%
    );
}

/* Generated art direction (Task 10). One locked prompt paragraph across all
   eight so the set reads as a single shoot: same lens, same grain, same
   low-key palette. Section 05 is the only warm frame; 06 carries no gold.
   Task 11: the default tier is 1600 (not 2560) - all eight veils exist in
   the DOM and load eagerly (test 06/10 depend on that), so the tier picked
   here is the whole first-screen budget. 2560 is reserved for genuinely
   wide viewports via the min-width block below; 960 for narrow ones. */
.veil[data-for="s01"] {
  background-image: image-set(
    url("../assets/img/01-opening-1600.webp") type("image/webp") 1x);
}
.veil[data-for="s02"] {
  background-image: image-set(
    url("../assets/img/02-form-1600.webp") type("image/webp") 1x);
}
.veil[data-for="s03"] {
  background-image: image-set(
    url("../assets/img/03-loop-1600.webp") type("image/webp") 1x);
}
.veil[data-for="s04"] {
  background-image: image-set(
    url("../assets/img/04-button-1600.webp") type("image/webp") 1x);
}
.veil[data-for="s05"] {
  background-image: image-set(
    url("../assets/img/05-spout-1600.webp") type("image/webp") 1x);
}
.veil[data-for="s06"] {
  background-image: image-set(
    url("../assets/img/06-everyday-1600.webp") type("image/webp") 1x);
}
.veil[data-for="s07"] {
  background-image: image-set(
    url("../assets/img/07-family-1600.webp") type("image/webp") 1x);
}
.veil[data-for="s08"] {
  background-image: image-set(
    url("../assets/img/08-close-1600.webp") type("image/webp") 1x);
}

@media (min-width: 1600px) {
  .veil[data-for="s01"] { background-image: image-set(url("../assets/img/01-opening-2560.webp") type("image/webp") 1x); }
  .veil[data-for="s02"] { background-image: image-set(url("../assets/img/02-form-2560.webp") type("image/webp") 1x); }
  .veil[data-for="s03"] { background-image: image-set(url("../assets/img/03-loop-2560.webp") type("image/webp") 1x); }
  .veil[data-for="s04"] { background-image: image-set(url("../assets/img/04-button-2560.webp") type("image/webp") 1x); }
  .veil[data-for="s05"] { background-image: image-set(url("../assets/img/05-spout-2560.webp") type("image/webp") 1x); }
  .veil[data-for="s06"] { background-image: image-set(url("../assets/img/06-everyday-2560.webp") type("image/webp") 1x); }
  .veil[data-for="s07"] { background-image: image-set(url("../assets/img/07-family-2560.webp") type("image/webp") 1x); }
  .veil[data-for="s08"] { background-image: image-set(url("../assets/img/08-close-2560.webp") type("image/webp") 1x); }
}

@media (max-width: 900px) {
  .veil[data-for="s01"] { background-image: image-set(url("../assets/img/01-opening-960.webp") type("image/webp") 1x); }
  .veil[data-for="s02"] { background-image: image-set(url("../assets/img/02-form-960.webp") type("image/webp") 1x); }
  .veil[data-for="s03"] { background-image: image-set(url("../assets/img/03-loop-960.webp") type("image/webp") 1x); }
  .veil[data-for="s04"] { background-image: image-set(url("../assets/img/04-button-960.webp") type("image/webp") 1x); }
  .veil[data-for="s05"] { background-image: image-set(url("../assets/img/05-spout-960.webp") type("image/webp") 1x); }
  .veil[data-for="s06"] { background-image: image-set(url("../assets/img/06-everyday-960.webp") type("image/webp") 1x); }
  .veil[data-for="s07"] { background-image: image-set(url("../assets/img/07-family-960.webp") type("image/webp") 1x); }
  .veil[data-for="s08"] { background-image: image-set(url("../assets/img/08-close-960.webp") type("image/webp") 1x); }
}

/* The eyelid, used only for the wrap from the closing station back to the
   opening one. Above the chrome on purpose: a blink closes on the whole
   view, not on the picture with the counter still floating over it. */
.lid {
  position: fixed;
  inset: 0;
  background: var(--ink);
  opacity: 0;
  pointer-events: none;
  z-index: calc(var(--chrome-z) + 10);
}

/* The way back, offered only where it means something: under the closing
   station's credit. Quiet on purpose - it is an exit from the piece, not a
   second call to action competing with the one above it. */
.restart {
  display: block;
  margin: 1.6rem auto 0;
  padding: 0.5rem 0;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(237, 231, 218, 0.22);
  color: var(--bone-dim);
  font-family: var(--f-air);
  font-size: var(--t-kicker);
  letter-spacing: var(--track-kicker);
  cursor: pointer;
  transition: color 300ms var(--ease-veil), border-color 300ms var(--ease-veil);
}
.restart:hover { color: var(--bone); border-color: var(--gold); }

/* Focal point per station, for tall viewports only.
   A 16:9 frame in a portrait window loses most of its width to object-fit:
   cover, and a centred crop throws away whatever the station is actually
   about. Station 05's lampstand sits at about 30% across and vanished
   completely on a phone - the copy promised a burning lamp and the screen
   showed a wall and a fire. Station 04's sanctuary block sits right of
   centre and was cut at the edge, leaving stairs that read as no building
   at all.
   The value has to drive the still and the clip together, or the fallback
   image and the video disagree about what the frame is of. */
@media (max-aspect-ratio: 1/1) {
  .backdrop .veil { background-position: var(--focus, 50%) center; }
  .backdrop .veil video { object-position: var(--focus, 50%) center; }
  .veil[data-for="s03"] { --focus: 42%; }
  .veil[data-for="s06"] { --focus: 45%; }
}