/* The story over the flight (?story, js/story.js; a mockup, the user, 2026-11-03). html.st: the story is on the page;
   .st-show: its panel is up (over #story, then over the flight); .st-on: its room is open (js/journey-room.js
   storyRoom); .st-end: the last flight has landed. .story[data-phase]: off | wait | rest | fly | cruise; .has-media:
   the shown beat has pictures (the dark behind words and pictures only then).
   Wide screens: three layouts, .st-beat[data-lay] a, b and c (below); narrow or upright screens: the words at the top, the
   pictures along the foot. Everything is flat and still (the float was distracting, the user, 2026-11-03). */
html:not(.st) #story, html:not(.st) .story { display: none; }
html.st #the-journey { display: none !important; }   /* the story is the way into the flight now (the user: "toss the enter the aqueduct page") */

/* the way in: a page that looks like the flight's first stop at rest */
/* No dark of its own: the loop is cut to the slab, its clouds and arrows (a mask from the loop's frames,
   aqueduct-door-mask.png, 1280 × 800 as the loop, sized and placed as it is), so the site's map shows round it as round
   the flight in its room (the user, 2026-11-04: "we should still be able to see through to the map background"). */
.story-door { position: relative; height: 100vh; min-height: 100vh; overflow: hidden; background: transparent; }
.sd-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask: url('../assets/images/intro/aqueduct-door-mask.png') center / cover no-repeat;
          mask: url('../assets/images/intro/aqueduct-door-mask.png') center / cover no-repeat; }

/* in the story's room: the flight's own key, Tour / Explore and Close make way (the place labels stay) */
.st-on :is(.journey-key, .flight-start, .jr-close) { display: none !important; }

.story {
  --st-ink: #f0ece4; --st-dim: rgba(240, 236, 228, 0.6); --st-bg: 10, 13, 20;
  --st-side: clamp(24px, 5vw, 88px);
  position: fixed; inset: 0; z-index: 45; pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0s linear 0.5s;
  color: var(--st-ink);
}
.st-show .story { opacity: 1; visibility: visible; transition: opacity 0.5s ease; }

.st-scrim { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease; }
.story.has-media .st-scrim { opacity: 1; }
/* the dark behind the pictures: bottom right (a), or the left column and the bottom right corner (b) */
.story[data-lay="a"] .st-scrim { background: radial-gradient(ellipse 52% 78% at 100% 100%, rgba(var(--st-bg), 0.82), rgba(var(--st-bg), 0.5) 45%, rgba(var(--st-bg), 0) 100%); }
.story[data-lay="b"] .st-scrim { background:
  radial-gradient(ellipse 44% 90% at 0% 55%, rgba(var(--st-bg), 0.78), rgba(var(--st-bg), 0.45) 50%, rgba(var(--st-bg), 0) 100%),
  radial-gradient(ellipse 34% 70% at 100% 100%, rgba(var(--st-bg), 0.78), rgba(var(--st-bg), 0.4) 50%, rgba(var(--st-bg), 0) 100%); }
.story[data-lay="c"] .st-scrim { background:
  radial-gradient(ellipse 42% 85% at 0% 100%, rgba(var(--st-bg), 0.8), rgba(var(--st-bg), 0.45) 50%, rgba(var(--st-bg), 0) 100%),
  radial-gradient(ellipse 36% 46% at 100% 100%, rgba(var(--st-bg), 0.6), rgba(var(--st-bg), 0) 100%); }

.st-beat { position: absolute; inset: 0; opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.st-beat.is-on { opacity: 1; transform: none; transition: opacity 0.7s ease 0.1s, transform 0.7s ease 0.1s; }
.st-beat.is-on :is(.st-text, figure) { pointer-events: auto; }

/* Wide screens. The room's bar is at the top; the foot (--st-foot) leaves room for "Scroll" between the corners.
   a (the first beat): the words top left (the user, 2026-11-04; they were bottom left); bottom right the two wide
   pictures side by side, the tall one above them at the right edge (the user, 2026-11-03: "two landscape images
   bottom right, portrait above that right side justified").
   b (the others): the words with the two wide pictures stacked under them on the left; the tall one (the flyer, the
   phone) in the bottom right corner, ~35% larger than before (the user: "30-40% larger").
   c (Mammoth): the phone with the two wide pictures side by side under it, in the bottom left corner (the user,
   2026-11-04: "images in the bottom left, same arrangement"); the words bottom right in a box a little wider than
   tall (the user, the same day: "a little more landscape", then "the text box needs to be bottom right"; on the way
   it was an upright box bottom right, then the wide box bottom centre, and before that a wide strip along the foot
   with the pictures top left). */
.story { --st-foot: clamp(26px, 5.5vh, 60px); --st-top: clamp(64px, 9vh, 92px); }
.st-text { position: relative; isolation: isolate; padding: 22px 26px 24px; }
.st-beat[data-lay="a"] .st-text { position: absolute; left: var(--st-side); top: var(--st-top); width: clamp(280px, 29vw, 450px); }
.st-pics { position: absolute; right: var(--st-side); bottom: var(--st-foot); display: flex; flex-direction: column; align-items: flex-end; gap: clamp(12px, 2vh, 20px); }
.st-pics .st-wides { display: flex; gap: clamp(12px, 1.2vw, 18px); width: clamp(340px, min(38vw, 66vh), 640px); }
.st-pics .st-wide { flex: 1 1 0; }
.st-pics .st-tall img { max-height: min(46vh, 460px, calc(100vh - var(--st-top) - var(--st-foot) - 20px - clamp(340px, min(38vw, 66vh), 640px) * 0.29)); }
.st-col { position: absolute; left: var(--st-side); top: calc(var(--st-top) + (100vh - var(--st-top) - var(--st-foot)) / 2); translate: 0 -50%;
  width: clamp(260px, min(27vw, 42vh), 420px); display: flex; flex-direction: column; gap: clamp(14px, 2.4vh, 24px); }
.st-col .st-wides { display: flex; flex-direction: column; gap: clamp(10px, 1.6vh, 16px); }
.st-beat[data-lay="b"] > .st-tall { position: absolute; right: var(--st-side); bottom: var(--st-foot); }
.st-beat[data-lay="b"] > .st-tall:not(.st-phone) img { max-height: min(49vh, 460px); }   /* ~35% over the old min(36vh, 340px) */
.st-beat[data-cruise] .st-col { width: clamp(280px, 30vw, 460px); }
.st-beat[data-lay="c"] .st-col { top: auto; bottom: var(--st-foot); translate: none; width: auto; align-items: flex-start; gap: clamp(12px, 2vh, 20px); }
.st-beat[data-lay="c"] .st-wides { flex-direction: row; gap: clamp(12px, 1.2vw, 18px); width: var(--c-wides); }
.st-beat[data-lay="c"] .st-wide { flex: 1 1 0; }
.st-beat[data-lay="c"] .st-phone { --w: min(204px, 13.5vw, calc((100vh - var(--st-top) - var(--st-foot)) * 0.62 / 2.17)); }
.st-beat[data-lay="c"] { --c-wides: clamp(340px, min(34vw, 50vh), 600px); --c-text: clamp(360px, 29vw, 440px); }
.st-beat[data-lay="c"] > .st-text { position: absolute; right: var(--st-side); bottom: var(--st-foot);
  width: min(var(--c-text), calc(100vw - 2 * var(--st-side) - var(--c-wides) - 28px)); }   /* clear of the pictures */

/* the words in a box: a near-black fill inside a rounded outline whose edges are sine waves, flowing slowly round it
   clockwise and easing flat into the corners (the user, 2026-11-03: "a sinewavey square around it that moves / flows
   very slowly ... a pretty opaque black fill behind it ... smooth out the corners"). Drawn by js/story.js (waveBoxes). */
.st-box { position: absolute; z-index: -1; pointer-events: none; overflow: visible; }
.st-box path { fill: rgba(var(--st-bg), 0.9); stroke: rgba(144, 181, 239, 0.9); stroke-width: 1.2; }   /* the sea waves' blue, as the pages' boxes (css/site.css .wbox-svg) */
.st-where { font: 500 13px/1 'Alegreya Sans SC', var(--mono); letter-spacing: 0.16em; color: var(--st-dim); margin: 0 0 12px; }
.st-text p:not(.st-where) { font: clamp(16px, 1.25vw, 19px)/1.55 'Alegreya Sans', var(--mono); margin: 0; }
.st-beat[data-cruise] .st-text p:not(.st-where) { font-size: clamp(18px, 1.55vw, 24px); line-height: 1.5; }

/* the pictures, all flat now (the user: "no more 3d") */
.story figure { margin: 0; min-width: 0; }
.st-wide :is(img, video) { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 2px; box-shadow: 0 18px 36px -18px #000; background: #000; }
.st-tall:not(.st-phone) img { display: block; width: auto; height: auto; max-width: 100%; border-radius: 2px; box-shadow: 0 30px 60px -26px #000, 0 0 0 1px rgba(240, 236, 228, 0.08); }

/* In and out (the user, 2026-11-04: "the way we get in and out ... a little clunky"; js/story.js arrive / leave). In:
   the door page stays over the room, fixed, while the flight draws its first frames at the first stop (its loop is that
   stop at rest), then fades. Out: the screen dips to the page's dark and comes up on the next page. */
html.st-opening #story.page { display: block !important; position: fixed; inset: 0; z-index: 44; transition: opacity 1.4s cubic-bezier(0.45, 0, 0.35, 1); }
html.st-opened #story.page { opacity: 0; }
html.st-opening #story.page { pointer-events: none; }
html.st-hurry #story.page { transition-duration: 0.35s; }   /* a step before it's done (js/story.js doorAway) */
/* Softer (the user, 2026-11-04: "switching from the video version of the aqueduct to the animated version ... fade so
   it's not jarring"; "the removal of the default header and transition to the header for the aqueduct intro is
   jarring"). The terrain is the same in both, but the loop's clouds and wind arrows are at another point of their
   drift than the flight's, so a quick fade read as a jump: the loop now dissolves over 1.4 s (js/story.js
   DOOR_FADE_MS), the clouds and arrows melting from one place to the other. The site's menu stays as the room opens
   (css/journey-room.css) and fades out, and the room's bar (the steps, Exit, the sound switch) fades in after it. */
html.st-opening .site-menu { opacity: 0; pointer-events: none; transition: opacity 0.5s ease; }
html.st-on .jr-bar { animation: st-bar-in 0.7s ease 0.35s both; }
@keyframes st-bar-in { from { opacity: 0; } to { opacity: 1; } }
.st-veil { position: fixed; inset: 0; z-index: 60; background: var(--bg, #0d1117); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.36s ease, visibility 0s linear 0.36s; }
.st-veil.is-on { opacity: 1; visibility: visible; transition: opacity 0.36s ease; }

/* After the first visit (html.st-seen, js/story.js): the page no longer holds the scroll or starts the story; it
   offers two buttons over the loop: Replay intro (the story again) and Explore the aqueduct (the Aqueduct's own room:
   the flight stop by stop, its key, Tour and Explore). The user, 2026-11-04. The loop under them stays at full strength
   (it was greyed out at first; the user: "don't make the aqueduct thing faded out ... it can still be full opacity"). */
.sd-choice { position: absolute; inset: 0; z-index: 2; display: none; align-items: center; justify-content: center; gap: clamp(14px, 2.4vw, 28px); flex-wrap: wrap;
  padding: 16px; opacity: 0; transition: opacity 0.4s ease; }
html.st-seen .sd-choice { display: flex; opacity: 1; }
html.st-replay .sd-choice, html.st-opening .sd-choice { opacity: 0; pointer-events: none; }
.sd-btn { min-width: 220px; padding: 15px 26px; border: 1px solid rgba(240, 236, 228, 0.6); border-radius: 2px; background: rgba(10, 13, 20, 0.8);
  color: #f0ece4; font: 500 14px/1 'Alegreya Sans SC', var(--mono); letter-spacing: 0.16em; cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease; }
.sd-btn:hover, .sd-btn:focus-visible { background: rgba(240, 236, 228, 0.12); border-color: #f0ece4; }
/* the Aqueduct's room, opened from here: its Close reads Exit, as the story's (the user: "in both cases I want the exit
   button to be available") */
html.st .jr-x { display: none; }

/* the soundwalk's map in a phone, drawn as on the Soundwalk page (css/phones.css), flat */
.st-phone {
  --w: min(204px, 13.5vw, 23vh); --u: calc(var(--w) / 100);
  position: relative; width: var(--w); padding: calc(3.6 * var(--u)); border-radius: calc(15 * var(--u));
  background: linear-gradient(150deg, #44484f 0%, #1a1c20 22%, #0d0e11 60%, #23262b 100%);
  box-shadow: inset 0 0 0 calc(0.6 * var(--u)) #5a5e66, inset 0 0 0 calc(1.4 * var(--u)) #0b0c0e, 0 40px 70px -30px rgba(0, 0, 0, 0.85);
}
.st-phone img { display: block; width: 100%; height: auto; aspect-ratio: 780 / 1691; border-radius: calc(11.5 * var(--u)); }
.st-phone::after { content: ''; position: absolute; z-index: 1; top: calc(6.2 * var(--u)); left: 50%; width: calc(29 * var(--u)); height: calc(8.4 * var(--u)); translate: -50% 0; border-radius: calc(5 * var(--u)); background: #000; }

/* where you are, in the room's top bar (js/story.js moves it there): 1–4, each over a flowing wave like the masthead's
   current chapter (css/menu.css sm-flow), the current one bright; then Exit */
.st-nav { display: none; align-items: center; gap: 22px; }
.st-on .st-nav { display: flex; }
.st-steps { display: flex; gap: 12px; list-style: none; margin: 0; padding: 0; }
.st-steps button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 2px !important; color: rgba(240, 236, 228, 0.42); transition: color 0.3s ease; }
.st-steps button:hover, .st-steps button:focus-visible, .st-steps button.is-on { color: #f0ece4; }
.st-num { font-size: 11px; letter-spacing: 0.06em; line-height: 1; }
.st-wave {
  display: block; width: 24px; height: 5px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='5'%3E%3Cpath d='M0 2.5 Q3 0.2 6 2.5 T12 2.5' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E") 0 0 / 12px 5px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='5'%3E%3Cpath d='M0 2.5 Q3 0.2 6 2.5 T12 2.5' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E") 0 0 / 12px 5px repeat-x;
  animation: sm-flow 1.4s linear infinite;
}
/* "Scroll", which also goes on when clicked (the user, 2026-11-03) */
.st-hint { position: absolute; left: 50%; bottom: clamp(14px, 3.4vh, 36px); translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 5px;
  margin: 0; padding: 8px 14px; border: 0; background: none; cursor: pointer; pointer-events: none;
  font: 500 11px/1 'Alegreya Sans SC', var(--mono); letter-spacing: 0.2em; color: var(--st-dim); text-shadow: 0 0 10px rgb(var(--st-bg));
  opacity: 0; transition: opacity 0.6s ease, color 0.3s ease; }
.story:is([data-phase="rest"], [data-phase="wait"]) .st-hint { opacity: 1; transition-delay: 0.8s, 0s; pointer-events: auto; }
.st-hint:hover, .st-hint:focus-visible { color: var(--st-ink); }
.st-chev { width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: 45deg; margin-top: 1px;
  animation: st-bob 1.8s ease-in-out infinite; }
@keyframes st-bob { 50% { translate: 0 4px; } }
.st-exit:hover, .st-exit:focus-visible { text-decoration: underline; text-underline-offset: 4px; }

/* narrow or upright screens: the words at the top; along the foot the tall picture (left) and the wide ones stacked
   (right); the flight between */
@media (max-width: 899px), (max-aspect-ratio: 1/1) {
  .story[data-lay] .st-scrim { background: linear-gradient(to top, rgba(var(--st-bg), 0.9), rgba(var(--st-bg), 0.6) 28%, rgba(var(--st-bg), 0) 46%); }
  .st-beat[data-lay] :is(.st-col, .st-pics) { display: contents; }
  .st-beat[data-lay] .st-text { position: absolute; top: 60px; bottom: auto; left: 16px; right: 16px; translate: none; width: auto; max-width: 560px; padding: 16px 18px 18px; }
  .st-beat[data-lay] .st-tall { position: absolute; left: 16px; right: auto; bottom: 34px; margin-left: 2%; }
  .st-beat[data-lay] .st-wides { position: absolute; bottom: 34px; right: 16px; width: min(56%, 340px); display: flex; flex-direction: column; gap: 8px; }
  .st-hint { bottom: 6px; font-size: 10px; flex-direction: row; gap: 10px; }
  .st-chev { width: 7px; height: 7px; margin-top: -4px; }
  .st-text p:not(.st-where) { font-size: 15.5px; line-height: 1.5; }
  .st-beat[data-cruise] .st-text p:not(.st-where) { font-size: 18px; }
  .st-beat[data-lay] .st-tall:not(.st-phone) img { max-height: min(30vh, 280px); max-width: 32vw; }
  .st-beat[data-lay] .st-phone { --w: min(110px, 26vw, 15vh); }
  /* Each beat its own (the user, 2026-11-09). 1: the flight on top, the words at the bottom, no pictures. */
  .st-beat[data-lay][data-k="0"] .st-pics { display: none; }
  .st-beat[data-lay][data-k="0"] .st-text { top: auto; bottom: 34px; }
  /* 2: the rocks video bottom left, the flyer bottom right; the piano photo goes */
  .st-beat[data-lay][data-k="4"] .st-wide:nth-child(2) { display: none; }
  .st-beat[data-lay][data-k="4"] .st-wides { left: 16px; right: auto; width: min(52%, 340px); }
  .st-beat[data-lay][data-k="4"] > .st-tall { left: auto; right: 16px; margin-left: 0; }
  /* 3: the words up top; the phone and the two wide pictures small, side by side along the bottom, all one height
     (--h: what fits the width; the phone's frame is ~2.08 times as tall as wide, the wides 16:9) */
  .st-beat[data-lay][data-k="3"] .st-col { --h: min(110px, calc((100vw - 48px) / 4.04)); display: flex; flex-direction: row; position: absolute; left: 16px; right: 16px; top: auto; bottom: 34px; width: auto; translate: none; align-items: flex-end; justify-content: center; gap: 8px; }
  .st-beat[data-lay][data-k="3"] .st-phone { position: relative; left: auto; right: auto; bottom: auto; margin: 0; flex: none; --w: calc(var(--h) * 0.48); }
  .st-beat[data-lay][data-k="3"] .st-wides { position: static; width: auto; flex-direction: row; gap: 8px; }
  .st-beat[data-lay][data-k="3"] .st-wide { flex: none; width: calc(var(--h) * 16 / 9); }
}
@media (max-width: 640px) { .st-steps { gap: 8px; } .st-nav { gap: 14px; } .st-wave { width: 20px; } }
@media (prefers-reduced-motion: reduce) { .st-beat, .st-beat.is-on, .story { transition: none; } .st-wave, .st-chev { animation: none; } }

/* Phones: the flight as films (js/story-film.js, FLIGHT_VIDEO in js/config.js; the user, 2026-11-10). Over the room
   (the live flight isn't loaded), under the door as it fades (44) and the words (45). A clip shows at once (it starts on
   the still under it) and fades off when it's done or another step takes over; .st-film-fade is the old still over the
   new one, fading out. */
.st-film { position: fixed; inset: 0; z-index: 43; display: none; background: var(--bg, #0d1117); pointer-events: none; }
.st-film.is-on { display: block; }
.st-film > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.st-film-clip, .st-film-fade { opacity: 0; transition: opacity 0.45s ease; }
.st-film-clip.is-on, .st-film-fade.is-on { opacity: 1; transition: none; }
.st-film-on.st-on .flight { visibility: hidden; }   /* the room's empty flight under the film */
/* the page held still while the films play (they don't follow the scroll): the swipe that brought the page to the door
   carried on scrolling the room for 2-3 s on the iPhone, and the scroll switch chased it (the user, 2026-11-11: "scrolling
   from the start to section 2 not working reliably") */
html.st-film-on.st-on { overflow: hidden; }