* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--ink);
  font-family: "Cormorant Garamond",Georgia,serif;
  overflow-x: hidden;
  color: var(--x-body-color, var(--paper));
}

::selection {
  background: var(--x-selection-bg, var(--sodium, var(--accent, #c98a4b)));
  color: var(--x-selection-color, #1a1109);
}

.mono {
  font-family: "Space Mono",monospace;
}

.chrome {
  position: fixed;
  z-index: 40;
  font-family: "Space Mono",monospace;
  mix-blend-mode: difference;
  color: #fff;
}

.chrome.top {
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 22px 34px;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  align-items: var(--x-chrome-top-align, initial);
}

.spine {
  position: fixed;
  left: 34px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 13px;
  mix-blend-mode: difference;
}

.spine b {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.5);
  transition: all .5s;
}

.spine b.on {
  background: #fff;
  transform: scale(1.5);
}

.mute {
  position: fixed;
  left: 28px;
  bottom: 26px;
  z-index: 40;
  font: 400 10px/1 "Space Mono",monospace;
  letter-spacing: .2em;
  color: #fff;
  background: none;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 99px;
  padding: 9px 14px 9px 12px;
  cursor: pointer;
  text-transform: uppercase;
  mix-blend-mode: difference;
  display: flex;
  align-items: center;
}

.mute .led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(255,255,255,.5);
  margin-right: 8px;
  transition: background .3s;
}

.mute.live .led {
  background: #fff;
  animation: pulse 1.7s ease-in-out infinite;
}

/*
 * Play borrows the Sound button wholesale and sits to its right — same pill,
 * same blend mode, same LED, because they are the same class of control and
 * inventing a second visual language for the second one would say otherwise.
 */
.mute.play { left: 122px; }

.mute.play.live .led {
  background: #fff;
  animation: none;               /* Sound pulses; playing is a steady state */
}

.prog {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  z-index: 41;
  background: var(--x-prog-bg, var(--sodium, var(--accent, #e6b072)));
  box-shadow: var(--x-prog-shadow, 0 0 12px var(--sodium, var(--accent, #c98a4b)));
}

#leader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: var(--x-leader-bg, #070504);
  gap: var(--x-leader-gap, 30px);
  animation: var(--x-leader-animation, none);
}

#leader .cap {
  font: 700 11px/1 "Space Mono",monospace;
  text-transform: uppercase;
  letter-spacing: var(--x-leader-cap-ls, .55em);
  color: var(--x-leader-cap-color, #6f6558);
  padding-left: var(--x-leader-cap-pl, .55em);
}

#leader .hint {
  position: absolute;
  bottom: 34px;
  font: 400 10px/1 "Space Mono",monospace;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--x-leader-hint-color, #4a4238);
}

/* ── the kit leader's loading moment ──────────────────────────────────────
   One shared structure (see parts/chrome.php): a per-trail .motif glyph, the
   trail's title typing in, and a route line drawing itself. All of it pure
   CSS so it plays even before kit.js boots; liftLeader kills whatever is
   still running. Every keyframe sets only the START state — the natural,
   un-animated state is the finished, lit one, which is exactly what
   prefers-reduced-motion renders. Everything settles well inside the 3.2s
   auto-lift window. Motifs wear their trail's palette via currentColor
   (themed to --sodium/--accent) and --paper/--ink. */
#leader .motif {
  position: relative;
  width: 124px;
  height: 92px;
  color: var(--sodium, var(--accent, #e6b072));
}

#leader .motif i {
  display: none;
  position: absolute;
}

#leader .leadtitle {
  font: 600 clamp(26px, 4.4vw, 40px)/1.15 "Cormorant Garamond",Georgia,serif;
  color: var(--paper, #f4ede1);
  letter-spacing: .03em;
  white-space: nowrap;
  animation: kitlead-type 1.3s steps(16, end) .45s both;
}

#leader .routeline {
  position: relative;
  width: min(340px, 62vw);
  height: 1px;
  background: rgba(255,255,255,.14);
}

#leader .routeline::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sodium, var(--accent, #e6b072));
  transform-origin: left center;
  animation: kitlead-line 1.6s cubic-bezier(.3,.6,.3,1) .3s both;
}

#leader .routeline::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sodium, var(--accent, #e6b072));
  box-shadow: 0 0 8px var(--sodium, var(--accent, #e6b072));
  opacity: 0;
  animation: kitlead-dot 1.6s cubic-bezier(.3,.6,.3,1) .3s both;
}

@keyframes kitlead-type {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 -3% 0 0); }
}

@keyframes kitlead-line {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes kitlead-dot {
  0% { left: 0; opacity: 0; }
  6% { opacity: 1; }
  88% { opacity: 1; }
  100% { left: calc(100% - 5px); opacity: 0; }
}

/* dead-malls — the directory's lightbox strips flicker on; one stays dead. */
#leader .motif-dead-malls {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 9px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.03);
  box-shadow: 0 6px 24px rgba(0,0,0,.4);
}

#leader .motif-dead-malls i {
  display: block;
  position: static;
  height: 8px;
  border-radius: 1px;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
  animation: dm-strip .9s linear both;
}

#leader .motif-dead-malls i:nth-child(1) { width: 88%; animation-delay: .35s; }
#leader .motif-dead-malls i:nth-child(2) { width: 72%; animation-delay: .55s; }
#leader .motif-dead-malls i:nth-child(3) { width: 81%; animation-delay: .75s; }

/* The fourth strip flickers like the rest, then fails — its resting state
   (and what reduced-motion shows) is the dark one. */
#leader .motif-dead-malls i:nth-child(4) {
  width: 65%;
  opacity: .1;
  box-shadow: none;
  animation: dm-strip-dead 1.1s linear 1s both;
}

@keyframes dm-strip {
  0% { opacity: 0; }
  18% { opacity: 1; }
  30% { opacity: .12; }
  44% { opacity: .9; }
  58% { opacity: .25; }
  100% { opacity: 1; }
}

@keyframes dm-strip-dead {
  0% { opacity: 0; }
  20% { opacity: .95; }
  34% { opacity: .15; }
  52% { opacity: .8; }
  70% { opacity: .2; }
  100% { opacity: .1; }
}

/* sacred-ruins — a rose window: ring, then spokes, then the core lights. */
#leader .motif-sacred-ruins {
  width: 92px;
  height: 92px;
}

#leader .motif-sacred-ruins::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .55;
  animation: sr-ring 1s ease-out .15s both;
}

#leader .motif-sacred-ruins::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 14px currentColor;
  animation: sr-core .8s ease-out 1.5s both;
}

#leader .motif-sacred-ruins i {
  display: block;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 24px;
  margin-left: -.5px;
  background: linear-gradient(to top, currentColor, transparent);
  transform-origin: 50% 0;
  transform: rotate(var(--r));
  animation: sr-spoke .7s ease-out both;
}

#leader .motif-sacred-ruins i:nth-child(1) { --r: 0deg; animation-delay: .45s; }
#leader .motif-sacred-ruins i:nth-child(2) { --r: 45deg; animation-delay: .54s; }
#leader .motif-sacred-ruins i:nth-child(3) { --r: 90deg; animation-delay: .63s; }
#leader .motif-sacred-ruins i:nth-child(4) { --r: 135deg; animation-delay: .72s; }
#leader .motif-sacred-ruins i:nth-child(5) { --r: 180deg; animation-delay: .81s; }
#leader .motif-sacred-ruins i:nth-child(6) { --r: 225deg; animation-delay: .9s; }
#leader .motif-sacred-ruins i:nth-child(7) { --r: 270deg; animation-delay: .99s; }
#leader .motif-sacred-ruins i:nth-child(8) { --r: 315deg; animation-delay: 1.08s; }

@keyframes sr-ring {
  from { opacity: 0; transform: scale(.7); }
  to { opacity: .55; transform: scale(1); }
}

@keyframes sr-core {
  from { opacity: 0; transform: scale(.3); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes sr-spoke {
  from { opacity: 0; transform: rotate(var(--r)) scaleY(.1); }
  to { opacity: 1; transform: rotate(var(--r)) scaleY(1); }
}

/* artful-stops — a flat-file drawer slides open on its lit contents. */
#leader .motif-artful-stops {
  width: 96px;
  height: 68px;
  margin-top: 12px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.35);
}

#leader .motif-artful-stops::after {
  content: "";
  position: absolute;
  inset: 8px 10px;
  background: radial-gradient(80% 90% at 50% 60%, currentColor, transparent 75%);
  opacity: .8;
  animation: as-glow 1.4s ease .9s both;
}

#leader .motif-artful-stops::before {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  top: 8px;
  height: 30px;
  background: var(--ink, #1c1410);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 4px 10px rgba(0,0,0,.5);
  transform: translateY(34px);
  animation: as-drawer 1s cubic-bezier(.25,.9,.3,1) .55s both;
}

#leader .motif-artful-stops i:nth-child(1) {
  display: block;
  left: 50%;
  top: 20px;
  width: 10px;
  height: 3px;
  margin-left: -5px;
  border-radius: 2px;
  background: rgba(255,255,255,.5);
  transform: translateY(34px);
  animation: as-drawer 1s cubic-bezier(.25,.9,.3,1) .55s both;
}

@keyframes as-glow {
  from { opacity: 0; }
  to { opacity: .8; }
}

@keyframes as-drawer {
  from { transform: translateY(0); }
  to { transform: translateY(34px); }
}

/* the-keys-crossing — the mile-marker sign flips MM 113 down to MM 0. */
#leader .motif-the-keys-crossing {
  width: 76px;
  height: 88px;
  border-radius: 8px;
  background: linear-gradient(180deg, #1a5c38, #0e3f24);
  border: 1px solid rgba(255,255,255,.35);
  color: var(--paper, #f3ede0);
  box-shadow: 0 8px 22px rgba(0,0,0,.5);
  perspective: 300px;
  animation: kc-sign .5s ease-out .2s both;
}

#leader .motif-the-keys-crossing i:nth-child(1) {
  display: block;
  top: 10px;
  left: 0;
  right: 0;
  text-align: center;
  font: 700 9px/1 "Space Mono",monospace;
  letter-spacing: .3em;
  padding-left: .3em;
  opacity: .75;
}

#leader .motif-the-keys-crossing i:nth-child(1)::before { content: "MILE"; }

#leader .motif-the-keys-crossing::before,
#leader .motif-the-keys-crossing::after {
  position: absolute;
  left: 0;
  right: 0;
  top: 28px;
  font: 700 32px/1 "Space Mono",monospace;
  text-align: center;
  backface-visibility: hidden;
}

#leader .motif-the-keys-crossing::before {
  content: "113";
  transform: rotateX(-90deg);
  opacity: 0;
  animation: kc-flip-off .5s cubic-bezier(.4,0,.7,.4) 1.1s both;
}

#leader .motif-the-keys-crossing::after {
  content: "0";
  animation: kc-flip-on .5s cubic-bezier(.3,.6,.3,1) 1.35s both;
}

@keyframes kc-sign {
  from { opacity: 0; transform: scale(.6); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes kc-flip-off {
  from { transform: rotateX(0); opacity: 1; }
  to { transform: rotateX(-90deg); opacity: 0; }
}

@keyframes kc-flip-on {
  from { transform: rotateX(90deg); opacity: 0; }
  to { transform: rotateX(0); opacity: 1; }
}

/* flagler-coast — the lighthouse lamp wakes and its beam sweeps once. */
#leader .motif-flagler-coast::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 22px;
  height: 58px;
  margin-left: -11px;
  clip-path: polygon(32% 0, 68% 0, 88% 100%, 12% 100%);
  background: var(--paper, #f2ecdf);
  opacity: .92;
}

#leader .motif-flagler-coast::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 18px;
  width: 76px;
  height: 16px;
  clip-path: polygon(0 35%, 100% 0, 100% 100%, 0 65%);
  background: linear-gradient(90deg, currentColor, transparent 85%);
  transform-origin: 0 50%;
  transform: rotate(24deg);
  opacity: .55;
  animation: fc-beam 1.7s ease-in-out .5s both;
}

#leader .motif-flagler-coast i:nth-child(1) {
  display: block;
  left: 50%;
  top: 16px;
  width: 10px;
  height: 9px;
  margin-left: -5px;
  background: currentColor;
  box-shadow: 0 0 14px 3px currentColor;
  animation: fc-lamp .8s ease-out .3s both;
}

@keyframes fc-lamp {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fc-beam {
  0% { transform: rotate(-38deg); opacity: 0; }
  25% { opacity: .55; }
  100% { transform: rotate(24deg); opacity: .55; }
}

/* monuments-memory — a letter chisels into the stone, strike by strike. */
#leader .motif-monuments-memory {
  width: 92px;
  height: 92px;
}

#leader .motif-monuments-memory::before {
  content: "M";
  position: absolute;
  inset: 0;
  font: 600 74px/92px "Cormorant Garamond",Georgia,serif;
  text-align: center;
  color: var(--paper, #e9e6de);
  text-shadow: 0 1px 0 rgba(0,0,0,.6), 0 -1px 0 rgba(255,255,255,.08);
  animation: mm-chisel 1.15s steps(6, end) .4s both;
}

#leader .motif-monuments-memory i:nth-child(1) {
  display: block;
  left: 50%;
  bottom: 4px;
  width: 34px;
  height: 12px;
  margin-left: -17px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(233,230,222,.5), transparent 70%);
  opacity: 0;
  animation: mm-dust .9s ease-out 1.35s both;
}

@keyframes mm-chisel {
  from { clip-path: inset(0 0 100% 0); opacity: .4; }
  to { clip-path: inset(0 0 0 0); opacity: 1; }
}

@keyframes mm-dust {
  0% { opacity: 0; transform: scale(.3) translateY(2px); }
  35% { opacity: .9; }
  100% { opacity: 0; transform: scale(1.5) translateY(-4px); }
}

/* lobsters-farmstands — the stand's chalkboard: OPEN written in one stroke. */
#leader .motif-lobsters-farmstands {
  width: 118px;
  height: 62px;
  margin-top: 15px;
}

#leader .motif-lobsters-farmstands::before {
  content: "OPEN";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  font: 700 30px/1 "Space Mono",monospace;
  letter-spacing: .22em;
  color: var(--paper, #f2ecdd);
  text-shadow: 0 0 2px rgba(255,255,255,.35);
  transform: rotate(-2deg);
  animation: lf-chalk 1.1s steps(8, end) .4s both;
}

#leader .motif-lobsters-farmstands i:nth-child(1) {
  display: block;
  left: 4px;
  right: 10px;
  bottom: 8px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: rotate(-1deg);
  transform-origin: left center;
  animation: lf-line .5s ease-out 1.55s both;
}

@keyframes lf-chalk {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes lf-line {
  from { transform: rotate(-1deg) scaleX(0); }
  to { transform: rotate(-1deg) scaleX(1); }
}

/* beach-dogs-tiki-bars — the festoon string blinks on, bulb by bulb. */
#leader .motif-beach-dogs-tiki-bars {
  width: 130px;
  height: 56px;
  margin-top: 18px;
}

#leader .motif-beach-dogs-tiki-bars::before {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 2px;
  height: 30px;
  border-bottom: 1px solid rgba(255,255,255,.4);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}

#leader .motif-beach-dogs-tiki-bars i {
  display: block;
  width: 6px;
  height: 9px;
  border-radius: 50% 50% 45% 45%;
  background: currentColor;
  box-shadow: 0 0 10px 2px currentColor;
  animation: bd-bulb .55s linear both, bd-hum 2.4s ease-in-out infinite;
  animation-delay: var(--d, .3s), calc(var(--d, .3s) + 1s);
}

#leader .motif-beach-dogs-tiki-bars i:nth-child(1) { left: 6px; top: 6px; --d: .3s; }
#leader .motif-beach-dogs-tiki-bars i:nth-child(2) { left: 33px; top: 20px; --d: .5s; }
#leader .motif-beach-dogs-tiki-bars i:nth-child(3) { left: 62px; top: 27px; --d: .7s; }
#leader .motif-beach-dogs-tiki-bars i:nth-child(4) { left: 91px; top: 20px; --d: .9s; }
#leader .motif-beach-dogs-tiki-bars i:nth-child(5) { left: 118px; top: 6px; --d: 1.1s; }

@keyframes bd-bulb {
  0% { opacity: 0; }
  30% { opacity: 1; }
  45% { opacity: .2; }
  100% { opacity: 1; }
}

@keyframes bd-hum {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}

/* hard-roads — a roadside marker rises out of the ground and settles. */
#leader .motif-hard-roads {
  width: 76px;
  height: 92px;
}

#leader .motif-hard-roads::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 14px;
  height: 1px;
  background: rgba(255,255,255,.35);
}

#leader .motif-hard-roads::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 15px;
  width: 4px;
  height: 44px;
  margin-left: -2px;
  background: var(--paper, #f0ead8);
  transform-origin: bottom center;
  animation: hr-rise .9s cubic-bezier(.2,1.3,.4,1) .45s both;
}

#leader .motif-hard-roads i:nth-child(1) {
  display: block;
  left: 50%;
  bottom: 42px;
  width: 22px;
  height: 4px;
  margin-left: -11px;
  background: var(--paper, #f0ead8);
  animation: hr-cross .9s cubic-bezier(.2,1.3,.4,1) .45s both;
}

@keyframes hr-rise {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes hr-cross {
  from { transform: translateY(44px); }
  to { transform: translateY(0); }
}

/* roadtrip-soundtrack — the jukebox's twin tubes flicker up to full glow. */
#leader .motif-roadtrip-soundtrack {
  width: 92px;
  height: 92px;
}

#leader .motif-roadtrip-soundtrack::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 4px;
  bottom: 20px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 44px 44px 6px 6px;
}

#leader .motif-roadtrip-soundtrack::before,
#leader .motif-roadtrip-soundtrack i:nth-child(1) {
  width: 12px;
  height: 40px;
  top: 26px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 7px 7px 3px 3px;
  animation: rs-tube 1.5s ease-out .35s both;
}

#leader .motif-roadtrip-soundtrack::before {
  content: "";
  position: absolute;
  left: 26px;
  background: var(--accent, #5ec8c0);
  box-shadow: 0 0 16px var(--accent, #5ec8c0), inset 0 0 6px rgba(255,255,255,.5);
}

#leader .motif-roadtrip-soundtrack i:nth-child(1) {
  display: block;
  left: 54px;
  background: currentColor;
  box-shadow: 0 0 16px currentColor, inset 0 0 6px rgba(255,255,255,.5);
}

@keyframes rs-tube {
  0% { opacity: 0; }
  20% { opacity: .25; }
  30% { opacity: .05; }
  45% { opacity: .5; }
  55% { opacity: .2; }
  100% { opacity: 1; }
}

/* Reduced motion: every motif keyframe only sets its start state, so cutting
   the animations leaves each glyph in its finished, lit state. */
@media (prefers-reduced-motion: reduce) {
  #leader .motif,
  #leader .motif i,
  #leader .motif::before,
  #leader .motif::after,
  #leader .leadtitle,
  #leader .routeline::before,
  #leader .routeline::after {
    animation: none !important;
  }
}

.vig {
  position: fixed;
  inset: 0;
  z-index: 89;
  pointer-events: none;
  background: var(--x-vig-bg, radial-gradient(115% 92% at 50% 45%, transparent 56%, rgba(0,0,0,.44) 100%));
}

.beam {
  position: fixed;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .7s ease;
  /* The gradient is built HERE, not in a token: a custom property is
     substituted on the element that declares it, so a body-level --x-beam-bg
     would bake the --mx/--my fallbacks before reaching .beam and the cursor
     tracking would silently die. Only the tint is per-trail. */
  background: radial-gradient(380px circle at var(--mx,50%) var(--my,40%), var(--x-beam-tint, rgba(255,214,160,.1)), transparent 62%);
}

.ring {
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: difference;
  transition: width .25s,height .25s,margin .25s,border-color .25s;
}

.ring.big {
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  border-color: rgba(255,255,255,.85);
}

#cold {
  position: relative;
  z-index: 5;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: var(--x-cold-bg, #000);
}

.coldveil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--x-coldveil-bg, linear-gradient(rgba(10,8,7,.5),rgba(10,8,7,.72)));
}

#cold p {
  position: relative;
  z-index: 2;
  font-size: clamp(1.5rem,2.8vw,2.5rem);
  font-weight: 300;
  font-style: italic;
  max-width: 26ch;
  line-height: 1.4;
  opacity: 0;
  letter-spacing: .01em;
  text-shadow: 0 3px 30px rgba(0,0,0,.85);
  color: var(--x-cold-p-color, #f4ede1);
}

#cold .en {
  position: relative;
  z-index: 2;
  margin-top: 3rem;
  font: 400 11px/1 "Space Mono",monospace;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
  transition: opacity 1s ease 2.6s;
}

#cold p.show {
  opacity: 1;
  transition: opacity 2.4s ease;
}

#cold.ready .en {
  opacity: .8;
  animation: bob 2.4s ease-in-out 3s infinite;
}

.scene {
  position: relative;
  z-index: 5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /*
   * The vertical inset is a variable because a held scene moves it off the
   * scene and onto the pinned block inside it, and the mobile breakpoint
   * changes it. Hardcoded in both places they drifted apart, and held scenes
   * sat 34px lower than every other scene on a phone.
   */
  --pad-y: 14vh;
  padding: var(--pad-y) 8vw;

  /*
   * `clip`, not `hidden`. Both clip the parallax layers and the oversized
   * chapter numeral, but `hidden` makes the scene a scroll container, and a
   * scroll container is what position:sticky sticks to — so a held copy block
   * inside one simply does not stick. `clip` does no such thing.
   */
  overflow: clip;
}

/*
 * A held scene: the prose stays put while the scene passes behind it.
 *
 * Text that slides upward for the whole time it is on screen is not how
 * anybody reads — you finish a line and it has moved. So a scene can ask for
 * a hold: it grows taller by `--hold` screens, and its copy pins to the
 * middle for the extra distance. The reader gets a still block to read; the
 * imagery behind it keeps moving, which is the effect the pages were after in
 * the first place.
 *
 * It also gives autoplay its pacing for free. The film these pages were cut
 * into holds ~3.4s on each scene; a 1.5-screen hold at 190px/sec is about
 * seven seconds of stillness, with no timeline to keep in step.
 */
.scene.held {
  min-height: calc(100vh + (var(--hold, 1) * 100vh));
  display: block;
  padding-top: 0;
  padding-bottom: 0;
}

.scene.held .hold {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--pad-y) 0;
}

/*
 * A stacked scene's copy pins inside its OWN box rather than the scene's, so
 * the pin ends where the figures start. Sticky to the whole scene, the words
 * would still be pinned while the pictures climbed over them.
 */
.scene.held .holdwrap {
  min-height: calc(100vh + (var(--hold, 1) * 100vh));
}

/*
 * A split's two halves stop being equal partners once one of them pins: the
 * copy has to be able to travel the whole scene, so the row is stretched to
 * the scene's full height and the picture is left to scroll through it.
 */
/*
 * The row carries the scene's own height rather than `100%` — a percentage
 * resolves against a parent's HEIGHT, and the scene only sets a min-height, so
 * the row collapsed to its content and the pinned column had no distance to
 * travel. It looked exactly like sticky silently not working.
 */
.scene.held .split {
  align-items: stretch;
  min-height: calc(100vh + (var(--hold, 1) * 100vh));
}

/*
 * A sticky element has to be SHORTER than the box it sticks inside — stretched
 * to the full row it has nowhere to travel and behaves as if the property were
 * never set, which is precisely how this failed the first two times. One
 * screen tall, anchored to the top of the row, free to pin for the rest.
 */
.scene.held .split .txt.hold {
  align-self: start;

  /*
   * `min-height`, not `height`. A screen's worth is enough to centre the copy
   * and still leave it shorter than the row it pins inside, but a long lede on
   * a narrow phone is taller than the viewport — fixed at 100vh it would be
   * clipped by the scene, which clips. Growing costs only some travel.
   */
  min-height: 100vh;
}

.scene.held .split .pic {
  align-self: center;
  min-height: 62vh;
}

.layer {
  position: absolute;
  inset: -8% 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  will-change: transform;
}

.veil {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.veil.grad {
  background: var(--x-veil-grad-bg, linear-gradient(180deg,rgba(10,8,7,.84),rgba(10,8,7,.6) 42%,rgba(10,8,7,.95)), radial-gradient(72% 62% at 50% 52%, rgba(10,8,7,.5), transparent 76%));
}

.kicker {
  font: 700 12px/1 "Space Mono",monospace;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}

h2.chapter {
  font-weight: 500;
  font-size: clamp(2.6rem,8.5vw,7.5rem);
  line-height: .92;
  text-shadow: 0 6px 50px rgba(0,0,0,.7);
}

.lede {
  font-size: clamp(1.15rem,1.7vw,1.65rem);
  line-height: 1.5;
  font-weight: 300;
  margin-top: 1.5rem;
  text-shadow: 0 2px 24px rgba(0,0,0,.8);
  max-width: var(--x-lede-maxw, 42ch);
  color: var(--x-lede-color, #e4dccf);
}

.bignum {
  position: absolute;
  z-index: -1;
  font-weight: 300;
  font-size: 44vh;
  line-height: .7;
  color: transparent;
  pointer-events: none;
  top: 2vh;
  right: 4vw;
  will-change: transform;
  -webkit-text-stroke: var(--x-bignum-stroke, 1px rgba(255,255,255,.1));
}

[data-in] {
  opacity: 0;
  transition: opacity 1s ease, transform 1.2s cubic-bezier(.2,.75,.2,1);
}

[data-in="left"] {
  transform: translateX(-70px);
}

[data-in="right"] {
  transform: translateX(70px);
}

[data-in="up"] {
  transform: translateY(60px);
}

[data-in="scale"] {
  transform: scale(.82);
}

.on [data-in] {
  opacity: 1;
  transform: none;
}

.on [data-d1] {
  transition-delay: .12s;
}

.on [data-d2] {
  transition-delay: .3s;
}

.on [data-d3] {
  transition-delay: .5s;
}

.on [data-d4] {
  transition-delay: .7s;
}

#title {
  align-items: center;
  text-align: center;
}

.titleword {
  display: block;
  padding-bottom: .04em;
  font-weight: var(--x-titleword-weight, 500);
  font-size: var(--x-titleword-size, clamp(3.4rem,13vw,13rem));
  line-height: var(--x-titleword-lh, .86);
  letter-spacing: var(--x-titleword-ls, -.015em);
  text-shadow: var(--x-titleword-shadow, 0 8px 60px rgba(0,0,0,.7));
  background: var(--x-titleword-bg, none);
  -webkit-background-clip: var(--x-titleword-bg-clip, border-box);
  background-clip: var(--x-titleword-bg-clip, border-box);
  color: var(--x-titleword-color, inherit);
  filter: var(--x-titleword-filter, none);
}

.titleword .ch {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.titleword .ch i {
  display: inline-block;
  font-style: normal;
  transform: translateY(114%);
  transition: transform 1.05s cubic-bezier(.19,.72,.22,1);
  background: var(--x-titleword-ch-bg, none);
  -webkit-background-clip: var(--x-titleword-ch-bg-clip, border-box);
  background-clip: var(--x-titleword-ch-bg-clip, border-box);
  color: var(--x-titleword-ch-color, inherit);
}

.on .titleword .ch i {
  transform: none;
}

.stops {
  display: flex;
  gap: 16px;
  margin-top: 2.6rem;
  flex-wrap: wrap;
}

.stop {
  width: 170px;
}

.stop .ph {
  height: 108px;
  border-radius: 6px;
  box-shadow: 0 12px 34px rgba(0,0,0,.55);
  transition: filter .5s ease;
  background-size: var(--x-stop-ph-size, cover);
  background-position: var(--x-stop-ph-pos, center);
}

.stop:hover .ph {
  filter: var(--x-stop-ph-hover-filter, brightness(1.14) saturate(1.18));
}

.stop small {
  display: block;
  font: 400 10px/1.3 "Space Mono",monospace;
  letter-spacing: .06em;
  color: var(--muted);
  margin-top: 9px;
}

/* ── chapter layouts: split and pair ───────────────────────────────────────
   These two were shipped in parts/chapter.php with NO styling in the kit at
   all — `.split`, `.pic`, `.pair` and a bare `.ph` had no rules, so a `.pic`
   carrying a background-image collapsed to 0x0 and the picture simply never
   appeared. The bespoke per-trail stylesheets happened to define their own
   versions, which hid the gap; any trail built purely on the kit lost the
   image silently. dead-malls' Chapter III (`layout: 'split'`) has been missing
   its picture in production because of this. Found 2026-08-04. */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--x-split-gap, 3rem);
  align-items: center;
}

.split .txt {
  min-width: 0;
}

.split .pic {
  min-height: var(--x-split-pic-h, 58vh);
  border-radius: 6px;
  box-shadow: 0 18px 48px rgba(0,0,0,.55);
  background-size: var(--x-split-pic-size, cover);
  background-position: var(--x-split-pic-pos, center);
  background-repeat: no-repeat;
}

.pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--x-pair-gap, 22px);
  margin-top: 2.6rem;
}

.pair figure {
  margin: 0;
  min-width: 0;
}

.pair .ph {
  height: var(--x-pair-ph-h, 34vh);
  border-radius: 6px;
  box-shadow: 0 12px 34px rgba(0,0,0,.55);
  background-size: var(--x-pair-ph-size, cover);
  background-position: var(--x-pair-ph-pos, center);
  background-repeat: no-repeat;
}

.pair figcaption {
  font: 400 10px/1.4 "Space Mono",monospace;
  letter-spacing: .06em;
  color: var(--muted);
  margin-top: 9px;
}

.pin-wrap {
  position: relative;
  z-index: 5;
  height: var(--x-pin-wrap-h, 320vh);
}

.pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.pin .veil.grad {
  z-index: 1;
}

.htrack {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 5vw;
  padding-left: 8vw;
  will-change: transform;
}

.hlabel {
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  will-change: transform;
  font-weight: var(--x-hlabel-weight, 500);
  font-size: var(--x-hlabel-size, clamp(4rem,13vw,12rem));
  -webkit-text-stroke: var(--x-hlabel-stroke, 1.2px rgba(244,237,225,.5));
}

.hcard {
  flex: 0 0 auto;
  width: min(46vw,620px);
}

.hcard .ph {
  height: 60vh;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
}

.hcard .cap {
  font: 400 12px/1.4 "Space Mono",monospace;
  letter-spacing: .1em;
  color: var(--muted);
  margin-top: 14px;
  text-transform: uppercase;
}

.pin .fixedtitle {
  position: absolute;
  z-index: 3;
  left: 8vw;
  max-width: 30ch;
  top: var(--x-fixedtitle-top, 16vh);
}

#tally {
  min-height: 82vh;
  align-items: center;
  text-align: center;
}

.stats {
  display: flex;
  gap: clamp(2rem,8vw,8rem);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 3rem;
}

.stat b {
  display: block;
  font-weight: 300;
  font-size: clamp(4.2rem,9vw,8.4rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat span {
  display: block;
  margin-top: 14px;
  font: 400 11px/1 "Space Mono",monospace;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted);
}

#wall {
  min-height: 100vh;
  padding: 12vh 4vw;
  justify-content: center;
}

.wallgrid {
  display: grid;
  grid-template-columns: repeat(6,1fr);
  gap: 10px;
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .5;
}

.wallgrid i {
  background-size: cover;
  opacity: 0;
  transform: scale(1.15);
  transition: opacity .9s ease, transform 1.2s cubic-bezier(.2,.7,.2,1);
  background-position: var(--x-wallgrid-pos, center);
}

#wall.on .wallgrid i {
  opacity: 1;
  transform: none;
}

.wall-copy {
  position: relative;
  z-index: 2;
  text-align: center;
}

#end {
  align-items: center;
  text-align: center;
}

.btns {
  display: flex;
  gap: 16px;
  margin-top: 2.8rem;
  flex-wrap: wrap;
  justify-content: center;
}

.btn {
  font: 400 12px/1 "Space Mono",monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 16px 32px;
  border-radius: 99px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
}

.btn.p {
  background: var(--x-btn-p-bg, var(--sodium, var(--accent, #c98a4b)));
  color: var(--x-btn-p-color, #1a1109);
}

.btn.s {
  border: var(--x-btn-s-border, 1px solid rgba(244,237,225,.55));
  color: var(--x-btn-s-color, var(--paper));
}

.btn.p:hover {
  box-shadow: var(--x-btn-p-hover-shadow, 0 8px 34px rgba(201,138,75,.45));
}

/* Palette: vanishing-theaters */
.exp[data-trail="vanishing-theaters"] {
  --ink: #0a0807;
  --paper: #f4ede1;
  --ember: #c98a4b;
  --ember2: #e6b072;
  --muted: #9a8f82;
  --accent: #7fa6c9;
  --x-body-color: var(--paper);
  --x-selection-bg: var(--ember);
  --x-selection-color: #1a1109;
  --x-chrome-top-align: initial;
  --x-prog-bg: var(--ember2);
  --x-prog-shadow: 0 0 12px var(--ember);
  --x-leader-bg: #070504;
  --x-leader-gap: 30px;
  --x-leader-animation: flick .14s steps(2) infinite;
  --x-leader-cap-ls: .55em;
  --x-leader-cap-color: #6f6558;
  --x-leader-cap-pl: .55em;
  --x-leader-hint-color: #4a4238;
  --x-vig-bg: radial-gradient(115% 92% at 50% 45%, transparent 56%, rgba(0,0,0,.44) 100%);
  --x-beam-tint: rgba(255,214,160,.1);
  --x-cold-bg: #000;
  --x-coldveil-bg: linear-gradient(rgba(10,8,7,.5),rgba(10,8,7,.72));
  --x-cold-p-color: #f4ede1;
  --x-veil-grad-bg: linear-gradient(180deg,rgba(10,8,7,.84),rgba(10,8,7,.6) 42%,rgba(10,8,7,.95)), radial-gradient(72% 62% at 50% 52%, rgba(10,8,7,.5), transparent 76%);
  --x-lede-maxw: 42ch;
  --x-lede-color: #e4dccf;
  --x-bignum-stroke: 1px rgba(255,255,255,.1);
  --x-titleword-weight: 500;
  --x-titleword-size: clamp(3.4rem,13vw,13rem);
  --x-titleword-lh: .86;
  --x-titleword-ls: -.015em;
  --x-titleword-shadow: 0 8px 60px rgba(0,0,0,.7);
  --x-titleword-bg: none;
  --x-titleword-bg-clip: border-box;
  --x-titleword-color: inherit;
  --x-titleword-filter: none;
  --x-titleword-ch-bg: none;
  --x-titleword-ch-bg-clip: border-box;
  --x-titleword-ch-color: inherit;
  --x-stop-ph-size: cover;
  --x-stop-ph-pos: center;
  --x-stop-ph-hover-filter: brightness(1.14) saturate(1.18);
  --x-pin-wrap-h: 320vh;
  --x-hlabel-weight: 500;
  --x-hlabel-size: clamp(4rem,13vw,12rem);
  --x-hlabel-stroke: 1.2px rgba(244,237,225,.5);
  --x-fixedtitle-top: 16vh;
  --x-wallgrid-pos: center;
  --x-btn-p-bg: var(--ember);
  --x-btn-p-color: #1a1109;
  --x-btn-s-border: 1px solid rgba(244,237,225,.55);
  --x-btn-s-color: var(--paper);
  --x-btn-p-hover-shadow: 0 8px 34px rgba(201,138,75,.45);
}

/* Palette: the-maine-coast */
.exp[data-trail="the-maine-coast"] {
  --ink: #07131a;
  --paper: #e9efea;
  --foam: #93bcae;
  --buoy: #d05a3c;
  --brass: #c2a05e;
  --muted: #8ba39e;
  --accent: #93bcae;
  --x-body-color: var(--paper);
  --x-selection-bg: var(--buoy);
  --x-selection-color: #fff;
  --x-chrome-top-align: center;
  --x-prog-bg: var(--foam);
  --x-prog-shadow: 0 0 12px rgba(147,188,174,.8);
  --x-leader-bg: #060e13;
  --x-leader-gap: 30px;
  --x-leader-animation: none;
  --x-leader-cap-ls: .55em;
  --x-leader-cap-color: #5f7a72;
  --x-leader-cap-pl: .55em;
  --x-leader-hint-color: #3d4f4b;
  --x-vig-bg: radial-gradient(115% 92% at 50% 45%, transparent 56%, rgba(2,8,11,.5) 100%);
  --x-beam-tint: rgba(190,225,210,.08);
  --x-cold-bg: linear-gradient(180deg,#04090e 0%,#071420 46%,#0a2432 55%,#050e14 62%,#04090d 100%);
  --x-coldveil-bg: radial-gradient(90% 70% at 50% 55%, transparent 40%, rgba(4,9,13,.6) 100%);
  --x-cold-p-color: var(--paper);
  --x-veil-grad-bg: linear-gradient(180deg,rgba(7,19,26,.86),rgba(7,19,26,.62) 42%,rgba(7,19,26,.96)), radial-gradient(72% 62% at 50% 52%, rgba(7,19,26,.5), transparent 76%);
  --x-lede-maxw: 44ch;
  --x-lede-color: #dfe8e2;
  --x-bignum-stroke: 1px rgba(255,255,255,.09);
  --x-titleword-weight: 500;
  --x-titleword-size: clamp(3.2rem,11vw,11rem);
  --x-titleword-lh: .9;
  --x-titleword-ls: -.015em;
  --x-titleword-shadow: 0 8px 60px rgba(0,0,0,.75);
  --x-titleword-bg: none;
  --x-titleword-bg-clip: border-box;
  --x-titleword-color: inherit;
  --x-titleword-filter: none;
  --x-titleword-ch-bg: none;
  --x-titleword-ch-bg-clip: border-box;
  --x-titleword-ch-color: inherit;
  --x-stop-ph-size: 145% auto;
  --x-stop-ph-pos: center 18%;
  --x-stop-ph-hover-filter: brightness(1.14) saturate(1.15);
  --x-pin-wrap-h: 340vh;
  --x-hlabel-weight: 500;
  --x-hlabel-size: clamp(3.4rem,10vw,9.5rem);
  --x-hlabel-stroke: 1.2px rgba(233,239,234,.45);
  --x-fixedtitle-top: 14vh;
  --x-wallgrid-pos: center 30%;
  --x-btn-p-bg: var(--foam);
  --x-btn-p-color: #0d2126;
  --x-btn-s-border: 1px solid rgba(233,239,234,.55);
  --x-btn-s-color: var(--paper);
  --x-btn-p-hover-shadow: 0 8px 34px rgba(147,188,174,.4);
}

/* Palette: classic-diners */
.exp[data-trail="classic-diners"] {
  --ink: #0b0710;
  --cream: #f3e7d3;
  --neonr: #ff2d55;
  --neonc: #38e1ff;
  --amber: #ffb347;
  --muted: #a39388;
  --accent: #ff2d55;
  --x-body-color: var(--cream);
  --x-selection-bg: var(--neonr);
  --x-selection-color: #fff;
  --x-chrome-top-align: initial;
  --x-prog-bg: var(--neonc);
  --x-prog-shadow: 0 0 12px var(--neonc);
  --x-leader-bg: #070409;
  --x-leader-gap: 24px;
  --x-leader-animation: none;
  --x-leader-cap-ls: .5em;
  --x-leader-cap-color: #6b5a52;
  --x-leader-cap-pl: .5em;
  --x-leader-hint-color: #453a35;
  --x-vig-bg: radial-gradient(115% 92% at 50% 45%, transparent 56%, rgba(6,2,9,.52) 100%);
  --x-beam-tint: rgba(255,190,150,.09);
  --x-cold-bg: #050308;
  --x-coldveil-bg: linear-gradient(rgba(11,7,16,.62),rgba(11,7,16,.78)), radial-gradient(80% 60% at 50% 60%, transparent 30%, rgba(11,7,16,.7) 100%);
  --x-cold-p-color: var(--cream);
  --x-veil-grad-bg: linear-gradient(180deg,rgba(11,7,16,.87),rgba(11,7,16,.64) 42%,rgba(11,7,16,.96)), radial-gradient(72% 62% at 50% 52%, rgba(11,7,16,.5), transparent 76%);
  --x-lede-maxw: 44ch;
  --x-lede-color: #e8dccb;
  --x-bignum-stroke: 1px rgba(255,255,255,.09);
  --x-titleword-weight: 600;
  --x-titleword-size: clamp(3.2rem,11vw,10.5rem);
  --x-titleword-lh: .92;
  --x-titleword-ls: -.01em;
  --x-titleword-shadow: none;
  --x-titleword-bg: linear-gradient(180deg,#fdfefe 0%,#d3d8de 34%,#767c85 49%,#e9edf2 52%,#a2a9b1 66%,#f4f7fa 100%);
  --x-titleword-bg-clip: text;
  --x-titleword-color: transparent;
  --x-titleword-filter: drop-shadow(0 8px 34px rgba(0,0,0,.75));
  --x-titleword-ch-bg: linear-gradient(180deg,#fdfefe 0%,#d3d8de 34%,#767c85 49%,#e9edf2 52%,#a2a9b1 66%,#f4f7fa 100%);
  --x-titleword-ch-bg-clip: text;
  --x-titleword-ch-color: transparent;
  --x-stop-ph-size: cover;
  --x-stop-ph-pos: center;
  --x-stop-ph-hover-filter: brightness(1.14) saturate(1.15);
  --x-pin-wrap-h: 340vh;
  --x-hlabel-weight: 600;
  --x-hlabel-size: clamp(3.4rem,10vw,9.5rem);
  --x-hlabel-stroke: 1.2px rgba(243,231,211,.45);
  --x-fixedtitle-top: 14vh;
  --x-wallgrid-pos: center;
  --x-btn-p-bg: var(--amber);
  --x-btn-p-color: #1c0b12;
  --x-btn-s-border: 1px solid rgba(243,231,211,.55);
  --x-btn-s-color: var(--cream);
  --x-btn-p-hover-shadow: 0 8px 34px rgba(255,179,71,.4);
}
/* ── Mobile ───────────────────────────────────────────────────────────────
   One block, inherited by every trail. Adding a trail should never mean
   writing responsive CSS again: keep phone fixes here, not in a trail file.

   The desktop layout assumes a wide viewport in four places — the three-column
   fixed chrome, the left spine rail, the horizontal pinned track, and the
   display type's vw-based clamps. Each is corrected below rather than being
   reflowed, because these scenes are choreographed and a reflow would break
   the scroll timings the JS depends on.                                     */
@media (max-width: 768px) {

  /* Chrome: three columns will not fit. Drop the middle (chapter name — the
     spine already reports position) and tighten the rail. */
  .chrome.top { padding: 14px 18px; font-size: 9px; letter-spacing: .18em; gap: 12px; }
  .chrome.top > :nth-child(2) { display: none; }

  /* The chrome is mix-blend-mode:difference, so scrolling copy reads straight
     through it. On a narrow screen that collision is constant rather than
     occasional, and the blend also traps any scrim in its own stacking
     context — so drop the blend here and carry a real gradient instead. */
  .chrome.top {
    mix-blend-mode: normal;
    background: linear-gradient(180deg, rgba(0,0,0,.62) 35%, transparent);
    padding-bottom: 34px;
  }

  /* The spine is a desktop scrubber sitting over the copy at this width, and
     it is not a touch target. The progress bar carries the same information. */
  .spine { display: none; }
  .prog { height: 3px; }

  /* Scenes: the 8vw gutter collapses to something readable, and the vertical
     rhythm tightens so a phone screen holds one idea at a time. */
  .scene { --pad-y: 10vh; padding: var(--pad-y) 22px; }
  #wall { padding: 9vh 18px; }

  /* Display type: the vw-clamps are tuned for a 1440 stage. Re-anchor the
     lower bound so headings stop clipping their descenders on a 390 screen. */
  .titleword { font-size: clamp(2.6rem, 15vw, 4.4rem); }
  h2.chapter { font-size: clamp(2rem, 11vw, 3.2rem); }
  .hlabel    { font-size: clamp(2.6rem, 16vw, 4.6rem); }
  .lede      { font-size: 1.05rem; max-width: 34ch; }
  #cold p    { font-size: clamp(1.15rem, 6vw, 1.6rem); max-width: 20ch; }
  .stat b    { font-size: clamp(2.8rem, 14vw, 4rem); }

  /* The oversized chapter numeral is decorative; at this width it lands on
     top of the copy it is meant to sit behind. */
  .bignum { font-size: 26vh; top: 1vh; right: 2vw; opacity: .5; }

  /* Stops become a single readable column instead of 170px chips. */
  .stops { flex-direction: column; gap: 20px; width: 100%; }
  .stop { width: 100%; }
  .stop .ph { height: 200px; }

  /* Split and pair stack: two columns at this width leaves the copy in a
     30-character gutter and the picture too small to read. */
  .split { grid-template-columns: 1fr; gap: 1.8rem; }
  .split .pic { min-height: 40vh; }

  /*
   * No holding once the split stacks. The hold exists so the words can sit
   * still while the picture beside them travels — and there is no beside on a
   * phone. All it buys here is a screen of empty scrolling between the
   * paragraph and the image it belongs to.
   */
  .scene.held { min-height: 100vh; display: flex; padding: var(--pad-y) 22px; }
  .scene.held .split { min-height: 0; }
  .scene.held .holdwrap { min-height: 0; }
  .scene.held .hold,
  .scene.held .split .txt.hold { position: static; min-height: 0; padding: 0; }
  .pair { grid-template-columns: 1fr; gap: 20px; }
  .pair .ph { height: 30vh; }

  /* Horizontal track: one card per screen, and the fixed title clears it. */
  .pin-wrap { height: var(--x-pin-wrap-h-mobile, 300vh); }
  .htrack { gap: 18px; padding-left: 22px; }
  .hcard { width: 78vw; }
  .hcard .ph { height: 44vh; }
  .pin .fixedtitle { left: 22px; right: 22px; max-width: none; top: 9vh; }

  /* Stats and buttons stack rather than wrapping raggedly. */
  .stats { flex-direction: column; gap: 2.2rem; }
  .btns { flex-direction: column; align-items: stretch; gap: 12px; }
  .btn { padding: 15px 22px; text-align: center; }

  /* Six columns of thumbnails is a grid of postage stamps on a phone. */
  .wallgrid { grid-template-columns: repeat(3, 1fr); gap: 6px; }

  /* Keep the sound toggle clear of iOS home-indicator gestures. */
  .mute { left: 18px; bottom: max(18px, env(safe-area-inset-bottom)); }
  .mute.play { left: 108px; }
}

/* Coarse pointers never get the cursor-tracking beam or hover reveals. */
@media (hover: none) {
  .beam, .ring { display: none; }
}

/* ── Dead Malls of the East Coast ─────────────────────────────────────────
   A trail's whole visual identity: base palette plus the kit's --x- tokens it
   wants to move. Everything else falls back to the token default. This block
   is the entire cost of a new trail's styling.                              */
.exp[data-trail="dead-malls"] {
  --ink: #0d0b12;
  --paper: #ece7f0;
  --muted: #8d8798;
  --accent: #6fb3c9;
  --sodium: #e0a458;

  --x-selection-bg: var(--sodium);
  --x-selection-color: #14100a;

  /* Mall photography is bright, flat daylight — the kit's default veil was
     tuned for dark interiors and lets the copy fight the backdrop. */
  --x-veil-grad-bg:
    linear-gradient(180deg, rgba(13,11,18,.92), rgba(13,11,18,.74) 42%, rgba(13,11,18,.97)),
    radial-gradient(72% 62% at 50% 52%, rgba(13,11,18,.66), transparent 76%);
  --x-coldveil-bg: linear-gradient(rgba(13,11,18,.55), rgba(13,11,18,.78));
  --x-prog-bg: var(--sodium);
  --x-kicker-color: var(--accent);
  --x-titleword-color: var(--paper);
  --x-titleword-bg: none;
  --x-titleword-bg-clip: border-box;
  --x-titleword-filter: drop-shadow(0 8px 34px rgba(0,0,0,.6));
  --x-btn-p-bg: var(--sodium);
  --x-btn-p-color: #14100a;
  --x-btn-s-color: var(--paper);
}

/* ── Artful Stops ──────────────────────────────────────────────────────────
   The one trail that isn't about loss: museums, galleries and gardens kept
   alive on purpose. Brass and gallery-green pulled from the photography
   itself rather than the set's default cool/dark palette. */
.exp[data-trail="artful-stops"] {
  --ink: #1c1410;
  --paper: #f3ead9;
  --muted: #a99a86;
  --accent: #3f7568;
  --sodium: #c98a3c;

  --x-selection-bg: var(--sodium);
  --x-selection-color: #1c1410;

  /* Museum interiors run bright and warm-lit, not dark and empty — tint the
     veil to the trail's own ink instead of the kit's cooler default. */
  --x-veil-grad-bg:
    linear-gradient(180deg, rgba(28,20,16,.9), rgba(28,20,16,.7) 42%, rgba(28,20,16,.96)),
    radial-gradient(72% 62% at 50% 52%, rgba(28,20,16,.62), transparent 76%);
  --x-coldveil-bg: linear-gradient(rgba(28,20,16,.52), rgba(28,20,16,.76));
  --x-prog-bg: var(--sodium);
  --x-kicker-color: var(--accent);
  --x-titleword-color: var(--paper);
  --x-titleword-bg: none;
  --x-titleword-bg-clip: border-box;
  --x-titleword-filter: drop-shadow(0 8px 34px rgba(0,0,0,.55));
  --x-btn-p-bg: var(--sodium);
  --x-btn-p-color: #1c1410;
  --x-btn-s-color: var(--paper);
}

/* ── Sacred Ruins ──────────────────────────────────────────────────────────
   Granite, weathered brick and mossy patina — pulled from the trail's own
   derelict interiors and cemetery stone, not reused from another trail. */
.exp[data-trail="sacred-ruins"] {
  --ink: #100e14;
  --paper: #ece6de;
  --muted: #948a7d;
  --accent: #7fa08c;
  --sodium: #c08a4c;

  --x-selection-bg: var(--sodium);
  --x-selection-color: #1a1006;

  --x-prog-bg: var(--sodium);
  --x-kicker-color: var(--accent);
  --x-titleword-color: var(--paper);
  --x-titleword-bg: none;
  --x-titleword-bg-clip: border-box;
  --x-titleword-filter: drop-shadow(0 8px 34px rgba(0,0,0,.6));
  --x-btn-p-bg: var(--sodium);
  --x-btn-p-color: #1a1006;
  --x-btn-s-color: var(--paper);
}