:root {
  /* Typography compliance tokens: Space Mono** and IBM Plex Mono** */
  --cyan: #6FD3CF;
  --harbor: #1E4E6A;
  --cream: #FFF0D6;
  --coral: #FF7F6E;
  --yellow: #F6C85F;
  --kelp: #3E8F78;
  --lavender: #A8A0C8;
  --basalt: #172026;
  --mist: #D8F2EC;
  --path-fill: 0;
  --drift-x: 0px;
  --drift-y: 0px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-snap-type: y mandatory; }

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--basalt);
  background: var(--cream);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: .42;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle at 15% 18%, rgba(111, 211, 207, .24), transparent 20%),
    radial-gradient(circle at 82% 9%, rgba(246, 200, 95, .18), transparent 17%),
    radial-gradient(circle at 74% 81%, rgba(168, 160, 200, .24), transparent 23%),
    linear-gradient(rgba(23, 32, 38, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 32, 38, .025) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 56px 56px, 56px 56px;
}

.promenade { min-height: 100vh; background: var(--cream); isolation: isolate; }

.map-index {
  position: fixed;
  top: -2vh;
  left: 50%;
  width: 120px;
  height: 104vh;
  transform: translateX(-50%);
  z-index: 20;
  pointer-events: none;
}

.shoreline { position: absolute; inset: 0; filter: drop-shadow(0 12px 18px rgba(30, 78, 106, .18)); }
.shoreline path {
  fill: none;
  stroke: var(--harbor);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 2 18;
  opacity: .34;
}

.shoreline::after { content: ""; }

.trail-markers { position: absolute; inset: 6vh 0; display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
.marker {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--harbor);
  text-decoration: none;
  font: 700 .85rem/1 "Space Mono", ui-monospace, monospace;
  background: var(--cream);
  border: 2px solid var(--harbor);
  box-shadow: 6px 6px 0 rgba(255, 127, 110, .65), -5px -4px 0 rgba(111, 211, 207, .42);
  pointer-events: auto;
  transition: transform 520ms cubic-bezier(.2, 1.7, .32, 1), background 420ms ease, color 420ms ease, border-radius 520ms ease;
}
.marker:nth-child(1) { border-radius: 50% 50% 50% 8px; transform: translateX(-22px) rotate(-8deg); }
.marker:nth-child(2) { border-radius: 7px; transform: translateX(23px) rotate(7deg); }
.marker:nth-child(3) { border-radius: 50% 50% 8px 50%; transform: translateX(-16px) rotate(12deg); }
.marker:nth-child(4) { border-radius: 50%; transform: translateX(19px) rotate(-4deg); }
.marker:nth-child(5) { border-radius: 6px 50% 6px 50%; transform: translateX(-21px) rotate(6deg); }
.marker:nth-child(6) { border-radius: 50% 8px 50% 8px; transform: translateX(10px) rotate(-10deg); }
.marker.is-active { color: var(--basalt); background: var(--yellow); border-color: var(--coral); transform: translateX(var(--active-x, 0)) scale(1.24) rotate(0deg); }

.stop {
  position: relative;
  min-height: 100vh;
  padding: clamp(4rem, 7vw, 7rem) clamp(1.3rem, 5vw, 5rem);
  display: grid;
  place-items: center;
  overflow: hidden;
  scroll-snap-align: start;
  background:
    radial-gradient(circle at 20% 30%, rgba(111, 211, 207, .18), transparent 28%),
    radial-gradient(circle at 80% 72%, rgba(246, 200, 95, .16), transparent 24%),
    linear-gradient(135deg, var(--cream), var(--mist));
}
.stop:nth-of-type(even) { background: linear-gradient(145deg, var(--mist), var(--cream) 55%, rgba(168,160,200,.28)); }
.dusk-lite { background: linear-gradient(135deg, var(--mist), #FFF0D6 45%, rgba(111,211,207,.32)); }
.evening-stop { color: var(--cream); background: radial-gradient(circle at 56% 44%, rgba(255,127,110,.42), transparent 21%), linear-gradient(135deg, var(--harbor), var(--lavender)); }

.ambient { position: absolute; inset: -12%; opacity: .52; pointer-events: none; animation: marbleDrift 24s ease-in-out infinite alternate; }
.ambient::before, .ambient::after { content: ""; position: absolute; border-radius: 50%; filter: blur(2px); }
.ambient::before { width: 34vw; height: 34vw; left: 6%; top: 18%; background: radial-gradient(circle, rgba(255,255,255,.45), transparent 60%); }
.ambient::after { width: 24vw; height: 18vw; right: 7%; bottom: 15%; background: radial-gradient(circle, rgba(168,160,200,.34), transparent 68%); }
.ambient-b { animation-duration: 28s; transform: rotate(8deg); }
.ambient-c { animation-duration: 31s; }
.ambient-d { animation-duration: 26s; }
.ambient-e { animation-duration: 29s; }
.ambient-f { opacity: .34; }

@keyframes marbleDrift { from { transform: translate3d(-1.2%, -1%, 0) rotate(-1deg); } to { transform: translate3d(1.4%, 1.2%, 0) rotate(1.4deg); } }

.scene { position: relative; z-index: 2; width: min(1160px, 100%); min-height: 72vh; display: grid; align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.scene-hero { grid-template-columns: 1.08fr .92fr; }
.asym { grid-template-columns: 1fr 1fr; }
.left-dense { grid-template-columns: 1.05fr .95fr; }
.tide-scene, .evening-scene { grid-template-columns: .88fr 1.12fr; }
.evening-scene { text-align: center; justify-items: center; grid-template-columns: 1fr; max-width: 920px; }

.coordinate {
  margin: 0 0 1.2rem;
  color: var(--kelp);
  font: 500 clamp(.72rem, 1vw, .92rem)/1.35 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.evening-stop .coordinate { color: var(--yellow); }

.wordmark {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .02em;
  font: 700 clamp(4.4rem, 12vw, 12.5rem)/.78 "Space Mono", ui-monospace, monospace;
  letter-spacing: -.12em;
  color: var(--harbor);
  max-width: 8ch;
}
.letter { position: relative; display: inline-block; text-shadow: 8px 8px 0 var(--coral), -5px -4px 0 var(--cyan), 12px -7px 0 rgba(168,160,200,.75); transition: transform 650ms cubic-bezier(.19, 1.35, .28, 1); }
.letter::after { content: ""; position: absolute; width: .12em; height: .12em; right: .12em; top: .18em; border-radius: 50%; background: var(--yellow); box-shadow: .18em .16em 0 var(--yellow), -.22em .25em 0 var(--yellow); opacity: .86; }
.p-two { transform: translateY(.18em); }
.z-one { transform: translateY(-.07em); }
.z-two { transform: translateY(.11em); }
.dot { margin-left: .08em; color: var(--coral); text-shadow: -5px 5px 0 var(--yellow); }
.e-one, .e-two { font-size: .54em; letter-spacing: -.08em; }
.is-active .letter:nth-child(odd) { animation: letterTide 4.6s ease-in-out infinite alternate; }
.is-active .letter:nth-child(even) { animation: letterTide 5.2s ease-in-out infinite alternate-reverse; }
@keyframes letterTide { to { transform: translate3d(0, -.06em, 0) rotate(-1deg); } }

h2 {
  margin: 0;
  max-width: 10ch;
  color: var(--harbor);
  font: 700 clamp(3rem, 7vw, 7.2rem)/.88 "Space Mono", ui-monospace, monospace;
  letter-spacing: -.08em;
}
h2 em { color: var(--coral); font-family: "DM Serif Display", Georgia, serif; font-weight: 400; letter-spacing: -.03em; }
.evening-stop h2 { color: var(--cream); max-width: 13ch; }

.fragment {
  max-width: 38rem;
  margin: 1.5rem 0 0;
  font: 400 clamp(1rem, 1.45vw, 1.32rem)/1.65 "IBM Plex Mono", ui-monospace, monospace;
  color: rgba(23, 32, 38, .78);
}
.evening-stop .fragment { color: rgba(255,240,214,.83); }

.collage { position: relative; min-height: 430px; transform: translate3d(var(--drift-x), var(--drift-y), 0); transition: transform 650ms cubic-bezier(.18, 1.45, .28, 1), filter 650ms ease; }
.liftable:hover { transform: translate3d(var(--drift-x), var(--drift-y), 0) scale(1.045) rotate(-1.4deg); filter: drop-shadow(0 28px 34px rgba(23, 32, 38, .18)); }

.paper, .marble-chip, .pebble-shell, .postcard, .stamp, .checker-ribbon, .pressed-flower, .column-ring, .fluted-slab, .triangle-chip, .sundial-face, .giant-z, .terrazzo-field, .shell, .crest-marble {
  position: absolute;
  box-shadow: 0 18px 30px rgba(23,32,38,.14);
}
.cyan-paper { width: 62%; height: 46%; right: 10%; top: 23%; background: var(--cyan); transform: rotate(8deg); border-radius: 9px 44px 10px 30px; }
.coral-shadow { width: 54%; height: 38%; right: 20%; top: 35%; background: var(--coral); transform: rotate(-9deg); clip-path: polygon(0 10%, 92% 0, 100% 88%, 12% 100%); }
.lavender-chip { width: 46%; height: 34%; left: 7%; top: 14%; border-radius: 50% 44% 48% 40%; background: linear-gradient(130deg, var(--cream), var(--lavender)); }
.lavender-chip::after, .crest-marble::after, .fluted-slab::after { content: ""; position: absolute; inset: 12%; background: repeating-linear-gradient(128deg, transparent 0 17px, rgba(30,78,106,.18) 18px 20px, transparent 21px 38px); opacity: .58; }
.memphis-dots { position: absolute; width: 160px; height: 110px; right: 4%; top: 9%; background-image: radial-gradient(circle, var(--yellow) 0 5px, transparent 6px); background-size: 28px 28px; transform: rotate(12deg); }
.pebble-shell { left: 27%; top: 28%; width: 180px; height: 210px; display: grid; place-items: center; color: var(--harbor); font: 700 9rem/.8 "Space Mono"; border-radius: 52% 48% 55% 45%; background: var(--cream); border: 4px solid var(--harbor); transform: rotate(-7deg); }

.postcard-stack { min-height: 520px; }
.base-card { width: min(440px, 82%); height: 300px; left: 8%; top: 18%; padding: 1.2rem; background: var(--cream); border: 3px solid var(--harbor); transform: rotate(-6deg); }
.base-card::before { content: ""; position: absolute; inset: 18px; border: 2px dashed rgba(30,78,106,.3); }
.base-card span { font: 700 1rem "Space Mono"; color: var(--coral); }
.route-line { position: absolute; left: 10%; top: 28%; width: 62%; height: 45%; border: 5px solid var(--cyan); border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; transform: rotate(18deg); }
.stamp { right: 9%; top: 15%; width: 92px; height: 112px; display: grid; place-items: center; color: var(--harbor); font: 4rem "DM Serif Display"; background: var(--lavender); border: 4px dotted var(--cream); transform: rotate(9deg); }
.checker-ribbon { left: 0; bottom: 15%; width: 310px; height: 56px; background: conic-gradient(var(--harbor) 25%, var(--cream) 0 50%, var(--harbor) 0 75%, var(--cream) 0) 0/38px 38px; transform: rotate(8deg); }
.pressed-flower { right: 18%; bottom: 16%; width: 86px; height: 86px; background: radial-gradient(circle at 50% 50%, var(--yellow) 0 10px, transparent 11px), radial-gradient(ellipse at 50% 15%, var(--coral) 0 18px, transparent 19px), radial-gradient(ellipse at 50% 85%, var(--coral) 0 18px, transparent 19px), radial-gradient(ellipse at 15% 50%, var(--coral) 0 18px, transparent 19px), radial-gradient(ellipse at 85% 50%, var(--coral) 0 18px, transparent 19px); box-shadow: none; }

.column-tableau { min-height: 560px; }
.column-ring { border: 24px solid var(--cream); border-radius: 50%; background: transparent; }
.ring-one { width: 330px; height: 330px; left: 10%; top: 8%; box-shadow: inset 0 0 0 3px var(--lavender), 0 22px 40px rgba(23,32,38,.16); }
.ring-two { width: 230px; height: 230px; left: 35%; top: 27%; border-color: var(--mist); box-shadow: inset 0 0 0 3px var(--coral), 0 22px 40px rgba(23,32,38,.13); }
.fluted-slab { left: 18%; bottom: 6%; width: 330px; height: 210px; background: linear-gradient(135deg, var(--cream), var(--lavender)); border-radius: 28px; overflow: hidden; transform: rotate(-3deg); }
.fluted-slab span { position: relative; display: inline-block; height: 100%; width: 27%; margin-left: 4%; border-left: 5px solid rgba(30,78,106,.22); border-right: 5px solid rgba(30,78,106,.12); border-radius: 50%; }
.triangle-chip { right: 13%; top: 17%; width: 0; height: 0; border-left: 75px solid transparent; border-right: 75px solid transparent; border-bottom: 130px solid var(--yellow); box-shadow: none; transform: rotate(15deg); }
.shell-trail { position: absolute; right: 9%; bottom: 18%; display: grid; gap: 18px; transform: rotate(18deg); }
.shell-trail i, .shell { display: block; width: 34px; height: 28px; border-radius: 50% 50% 10px 10px; background: var(--cream); border: 2px solid var(--coral); box-shadow: 0 8px 12px rgba(23,32,38,.13); }

.zig-squiggle, .checker-foam, .marble-post, .fragment-column, .sundial { position: absolute; pointer-events: none; }
.zig-squiggle { right: 6%; top: 12%; width: 190px; height: 90px; border-top: 18px solid var(--coral); border-right: 18px solid var(--coral); transform: skewX(-24deg) rotate(10deg); opacity: .72; }
.fragment-column { width: 125px; height: 70vh; left: -35px; bottom: -9vh; background: repeating-linear-gradient(90deg, var(--cream) 0 15px, rgba(168,160,200,.55) 16px 26px, var(--cream) 27px 42px); border-radius: 70px 70px 0 0; opacity: .72; transform: rotate(5deg); }
.sundial { width: 260px; height: 260px; right: -85px; bottom: 9%; border-radius: 50%; border: 22px solid var(--cream); background: repeating-conic-gradient(from 0deg, rgba(255,127,110,.8) 0 5deg, transparent 6deg 18deg); opacity: .82; }
.marble-post { left: -45px; top: 14%; width: 140px; height: 58vh; border-radius: 80px; background: linear-gradient(120deg, var(--cream), var(--lavender)); opacity: .78; transform: rotate(-7deg); }

.tide-orbit { min-height: 520px; }
.sundial-face { left: 20%; top: 12%; width: min(420px, 78vw); height: min(420px, 78vw); border-radius: 50%; background: repeating-conic-gradient(from 8deg, var(--coral) 0 4deg, var(--cream) 5deg 15deg), radial-gradient(circle, var(--cream) 0 56%, var(--lavender) 57%); border: 8px solid var(--harbor); }
.ferry-loop { position: absolute; left: 13%; top: 25%; width: 64%; height: 42%; border: 6px solid var(--cyan); border-top-color: transparent; border-radius: 50%; transform: rotate(-14deg); }
.buoy { position: absolute; width: 36px; height: 36px; border-radius: 50%; background: var(--yellow); border: 4px solid var(--coral); animation: buoyBob 3.8s ease-in-out infinite; }
.buoy-one { left: 18%; top: 37%; }
.buoy-two { right: 18%; top: 48%; animation-delay: 1.2s; }
@keyframes buoyBob { 50% { transform: translateY(-12px) scale(1.12); } }
.wave-grooves { position: absolute; right: 5%; bottom: 16%; display: grid; gap: 12px; }
.wave-grooves span { display: block; width: 230px; height: 28px; border-top: 5px solid var(--harbor); border-radius: 50%; opacity: .55; }
.checker-foam { left: 5%; bottom: 7%; width: 280px; height: 70px; background: conic-gradient(var(--cyan) 25%, transparent 0 50%, var(--cyan) 0 75%, transparent 0) 0/32px 32px; opacity: .5; }

.zigzag-clue { min-height: 540px; }
.giant-z { font: 700 16rem/.8 "Space Mono"; color: var(--harbor); background: transparent; box-shadow: none; }
.z-back { left: 8%; top: 12%; color: var(--lavender); transform: rotate(-8deg); }
.z-front { left: 22%; top: 20%; color: var(--coral); text-shadow: 12px 12px 0 var(--yellow); transform: rotate(5deg); }
.terrazzo-field { right: 8%; bottom: 13%; width: 250px; height: 170px; border-radius: 35px; background: radial-gradient(circle at 20% 20%, var(--cyan) 0 8px, transparent 9px), radial-gradient(circle at 72% 35%, var(--yellow) 0 10px, transparent 11px), radial-gradient(circle at 44% 72%, var(--coral) 0 7px, transparent 8px), linear-gradient(135deg, var(--cream), var(--lavender)); transform: rotate(-10deg); }
.shell { position: absolute; }
.zz-a { left: 11%; bottom: 14%; }
.zz-b { left: 27%; bottom: 23%; transform: rotate(19deg); }
.zz-c { right: 30%; bottom: 25%; transform: rotate(-12deg); }
.zz-d { right: 16%; bottom: 15%; transform: rotate(11deg); }

.crest { position: relative; width: min(600px, 90vw); height: 330px; margin: 0 auto 1.6rem; transition: transform 700ms cubic-bezier(.18, 1.45, .28, 1); }
.crest span { position: absolute; font: 700 11rem/.8 "Space Mono"; text-shadow: 7px 7px 0 var(--coral); }
.crest-p { left: 13%; top: 18%; color: var(--cream); }
.crest-p.ghost { left: 23%; top: 26%; color: var(--cyan); opacity: .82; }
.crest-z { right: 25%; top: 20%; color: var(--yellow); }
.crest-z.ghost { right: 12%; top: 28%; color: var(--lavender); opacity: .9; }
.crest-marble { left: 50%; top: 50%; width: 270px; height: 180px; border-radius: 50%; background: linear-gradient(135deg, var(--cream), var(--lavender)); transform: translate(-50%, -50%) rotate(-6deg); z-index: -1; }
.crest:hover { transform: scale(1.05) rotate(1deg); }

.text-panel, .scene-hero > .coordinate, .wordmark, .hero-fragment, .collage, .crest, .evening-scene h2, .evening-scene .fragment { opacity: 0; transform: translateY(28px); transition: opacity 900ms ease, transform 900ms cubic-bezier(.2, .86, .25, 1); }
.is-active .text-panel, .is-active.scene-hero, .stop.is-active .scene-hero > .coordinate, .stop.is-active .wordmark, .stop.is-active .hero-fragment, .stop.is-active .collage, .stop.is-active .crest, .stop.is-active .evening-scene h2, .stop.is-active .evening-scene .fragment { opacity: 1; transform: translateY(0); }
.stop.is-active .collage { transition-delay: 180ms; }
.stop.is-active h2 { transition-delay: 120ms; }

.caption-bubble {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 40;
  padding: .62rem .8rem;
  color: var(--basalt);
  background: rgba(255,240,214,.86);
  border: 2px solid var(--harbor);
  box-shadow: 5px 5px 0 rgba(246,200,95,.7);
  font: 500 .72rem/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -150%) rotate(-2deg);
  transition: opacity 220ms ease;
}
.caption-bubble.visible { opacity: 1; }

@media (max-width: 860px) {
  html { scroll-snap-type: y proximity; }
  .map-index { left: auto; right: .2rem; width: 74px; opacity: .82; }
  .marker { width: 34px; height: 34px; font-size: .72rem; }
  .stop { padding: 5.5rem 1.2rem 3rem; }
  .scene, .scene-hero, .asym, .left-dense, .tide-scene { grid-template-columns: 1fr; min-height: auto; }
  .collage { min-height: 370px; }
  .wordmark { font-size: clamp(4rem, 22vw, 7rem); }
  h2 { font-size: clamp(2.5rem, 15vw, 4.5rem); }
  .fragment-column, .sundial, .marble-post { opacity: .35; }
}