/* apps.v-sag.com/eleven.html, the eleven:eleven page (2026-11-06, stage SITE-APPLE): ONE DAY ON THE LITTLE PLANET.
   The scroll is the hour. The page begins in the night, the planet comes up out of the dark, first light finds the places, the afternoon goes gold while you sit,
   the blue hour breathes, the sea darkens, the night glides, and the day breaks again. The page's own sky changes with the scroll (five fixed skies that cross into each
   other, opacity only), a small sun and later a moon travel along a thin arc in the bar, a line comes in the way a breath does and the next one follows. Few words, big pictures.
   All the shared things (tokens, type, the house bar, the footer, the reveal) live in /vsag.css; the page is locked to the night theme (<html data-theme-lock>) like the
   Synth room: its colour is the app's own pictures and the sky of the day.

   HOW IT MOVES. /scrollscene.js reads each pinned section's progress 0 to 1 in one requestAnimationFrame per scroll and writes it as --p; this file turns --p into transform and
   opacity only. `position: sticky` does the pinning. THE STORY MOVES FOR EVERYONE, whatever the system's Reduce Motion says (the keeper's decision, 2026-11-06: everything here moves
   only when the visitor scrolls, apart from the slow breath, and a Mac with Reduce Motion on saw a still page and no globe): <html data-motion="story"> tells /vsag.css not to
   freeze the page. Under Reduce Motion it moves GENTLER: the globe's zoom, the sky, the arc, the strip and the pinned chapters stay, but lines arrive by fading (no rise), pictures
   do not drift or grow, the name does not fall, the stars do not twinkle. Without script: nothing is pinned, the sky is the night, the planet stands whole, the three breath words
   stand in a quiet list under a still circle, the strip is a row to swipe inside its own box.                                                 */

:root { --el-ink: #f6f6f6; --el-ink-2: rgba(255, 255, 255, .88); --el-line: rgba(255, 255, 255, .14); --pbar: 3.25rem; --topgap: calc(var(--pbar) + 1rem);
  --slow: cubic-bezier(.33, 0, .2, 1); }
html { scroll-padding-top: calc(var(--pbar) + .5rem); }
body.el { background: #000; color: var(--el-ink); overflow-x: clip; }
body.el main { display: block; overflow-x: clip; }   /* blocks that arrive from a side start beyond the edge; nothing of them may widen the page (clip, unlike hidden, keeps `sticky` working) */
.el h1, .el h2, .el p { margin: 0; }
.el b { font-weight: 600; }

/* ---------- the sky of the day: five skies fixed behind the page; the scroll crosses one into the next (opacity only).
   Every one is kept dark enough for white words (about 5:1 at its brightest). ---------- */
.daysky { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; z-index: -1; background: #040406; overflow: hidden; pointer-events: none; }   /* the whole screen, toolbars out or in, with no box of its own inside it */
.daysky__l { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; }
.daysky__l--night { opacity: 1; background: linear-gradient(#040406 0%, #040407 11.2%, #04060a 22.5%, #05070c 33.8%, #05070d 45%, #05080f 58.8%, #060a13 72.5%, #080b17 86.2%, #080c19 100%); }
.daysky__l--first { background: linear-gradient(#10132f 0%, #18183a 10.7%, #27234d 21.3%, #2f2858 32%, #3d305e 43.3%, #573e69 54.7%, #65466f 66%, #6c496d 77.3%, #784f68 88.7%, #7f5266 100%); }
.daysky__l--morning { background: linear-gradient(#12315a 0%, #153863 17.3%, #1c4575 34.7%, #1f4c7e 52%, #235183 68%, #2b5c8c 84%, #2f6191 100%); }
.daysky__l--golden { background: linear-gradient(#1f1735 0%, #2f1d38 12.7%, #4d2a3d 25.3%, #5d3040 38%, #66363c 49.3%, #764134 60.7%, #7f4730 72%, #824a30 81.3%, #875130 90.7%, #8a5430 100%); }
.daysky__l--blue { background: linear-gradient(#070b24 0%, #0a102f 16.7%, #111842 33.3%, #141d4d 50%, #1a2456 66.7%, #243067 83.3%, #2a3770 100%); }
.daysky__noise { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url(data:image/png;base64,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) 0 0 / 64px 64px repeat; }
/* the stars belong to the night */
.daysky__l--night::before, .daysky__l--night::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 1px; border-radius: 50%; }
.daysky__l--night::before { box-shadow: 22.3vw 34.7vh 0 0 rgba(255,255,255,0.6), 36.7vw 9.2vh 0 0 rgba(255,255,255,0.53), 19.4vw 87.7vh 0 0 rgba(255,255,255,0.44), 68.0vw 44.0vh 0 0 rgba(255,255,255,0.6), 95.2vw 18.4vh 0 0 rgba(255,255,255,0.4), 5.1vw 47.9vh 0 0 rgba(255,255,255,0.44), 31.5vw 13.3vh 0 0 rgba(255,255,255,0.6), 58.4vw 95.8vh 0 0 rgba(255,255,255,0.74), 12.7vw 59.4vh 0 0 rgba(255,255,255,0.26), 29.6vw 77.8vh 0 0 rgba(255,255,255,0.79), 24.8vw 4.4vh 0 0 rgba(255,255,255,0.27), 17.2vw 59.3vh 0 0 rgba(255,255,255,0.64), 97.5vw 90.7vh 0 0 rgba(255,255,255,0.34), 61.8vw 67.6vh 0 0 rgba(255,255,255,0.56), 23.5vw 18.9vh 0 0 rgba(255,255,255,0.62), 30.9vw 48.5vh 0 0 rgba(255,255,255,0.5), 41.5vw 45.9vh 0 0 rgba(255,255,255,0.4), 93.8vw 69.9vh 0 0 rgba(255,255,255,0.32), 60.6vw 75.9vh 0 0 rgba(255,255,255,0.67), 38.1vw 61.0vh 0 0 rgba(255,255,255,0.33), 77.3vw 96.7vh 0 0 rgba(255,255,255,0.6), 9.0vw 52.6vh 0 0 rgba(255,255,255,0.58), 63.6vw 52.1vh 0 0 rgba(255,255,255,0.48), 32.1vw 87.5vh 0 0 rgba(255,255,255,0.53), 66.8vw 57.5vh 0 0 rgba(255,255,255,0.3), 17.3vw 28.1vh 0 0 rgba(255,255,255,0.35), 22.1vw 56.9vh 0 0 rgba(255,255,255,0.64), 20.7vw 29.2vh 0 0 rgba(255,255,255,0.55), 24.3vw 37.3vh 0 0 rgba(255,255,255,0.41), 32.0vw 17.8vh 0 0 rgba(255,255,255,0.41), 24.4vw 14.6vh 0 0 rgba(255,255,255,0.49), 28.4vw 36.5vh 0 0 rgba(255,255,255,0.46), 20.3vw 57.4vh 0 0 rgba(255,255,255,0.75), 80.6vw 7.4vh 0 0 rgba(255,255,255,0.6), 30.2vw 61.2vh 0 0 rgba(255,255,255,0.49), 27.8vw 81.7vh 0 0 rgba(255,255,255,0.39), 55.7vw 55.6vh 0 0 rgba(255,255,255,0.77), 72.2vw 9.4vh 0 0 rgba(255,255,255,0.4), 69.0vw 96.5vh 0 0 rgba(255,255,255,0.8), 37.0vw 55.2vh 0 0 rgba(255,255,255,0.61), 10.6vw 47.4vh 0 0 rgba(255,255,255,0.31), 89.0vw 66.3vh 0 0 rgba(255,255,255,0.27), 64.1vw 91.4vh 0 0 rgba(255,255,255,0.33), 53.0vw 47.2vh 0 0 rgba(255,255,255,0.44), 39.4vw 11.4vh 0 0 rgba(255,255,255,0.67), 39.6vw 29.0vh 0 0 rgba(255,255,255,0.26), 26.2vw 33.9vh 0 0 rgba(255,255,255,0.48), 93.1vw 22.3vh 0 0 rgba(255,255,255,0.56), 71.8vw 62.9vh 0 0 rgba(255,255,255,0.61), 32.9vw 16.2vh 0 0 rgba(255,255,255,0.36), 29.4vw 18.4vh 0 0 rgba(255,255,255,0.26), 82.9vw 55.6vh 0 0 rgba(255,255,255,0.26), 55.4vw 82.7vh 0 0 rgba(255,255,255,0.71), 67.6vw 87.1vh 0 0 rgba(255,255,255,0.57), 11.4vw 77.1vh 0 0 rgba(255,255,255,0.63), 29.1vw 20.0vh 0 0 rgba(255,255,255,0.58), 24.7vw 79.3vh 0 0 rgba(255,255,255,0.56), 8.7vw 87.7vh 0 0 rgba(255,255,255,0.25), 25.8vw 43.7vh 0 0 rgba(255,255,255,0.25), 39.8vw 19.2vh 0 0 rgba(255,255,255,0.56), 78.8vw 13.8vh 0 0 rgba(255,255,255,0.54), 31.9vw 25.4vh 0 0 rgba(255,255,255,0.68), 2.8vw 58.8vh 0 0 rgba(255,255,255,0.75), 75.2vw 35.8vh 0 0 rgba(255,255,255,0.69), 82.0vw 80.8vh 0 0 rgba(255,255,255,0.78), 10.5vw 37.8vh 0 0 rgba(255,255,255,0.34), 30.6vw 93.8vh 0 0 rgba(255,255,255,0.27), 25.4vw 95.4vh 0 0 rgba(255,255,255,0.56), 81.5vw 66.2vh 0 0 rgba(255,255,255,0.37), 15.8vw 37.7vh 0 0 rgba(255,255,255,0.66); }
.daysky__l--night::after { width: 2px; height: 2px; box-shadow: 16.0vw 40.2vh 0 0 rgba(255,255,255,0.91), 23.4vw 85.5vh 0 0 rgba(255,255,255,0.75), 1.7vw 6.6vh 0 0 rgba(255,255,255,0.91), 81.8vw 65.3vh 0 0 rgba(255,255,255,0.77), 58.3vw 54.9vh 0 0 rgba(255,255,255,0.66), 29.0vw 95.1vh 0 0 rgba(255,255,255,0.57), 42.7vw 8.2vh 0 0 rgba(255,255,255,0.86), 12.7vw 43.7vh 0 0 rgba(255,255,255,0.8), 55.5vw 91.6vh 0 0 rgba(255,255,255,0.89), 82.0vw 70.7vh 0 0 rgba(255,255,255,0.9), 23.1vw 29.1vh 0 0 rgba(255,255,255,0.63), 96.8vw 73.1vh 0 0 rgba(255,255,255,0.94), 42.1vw 20.9vh 0 0 rgba(255,255,255,0.59), 4.2vw 2.2vh 0 0 rgba(255,255,255,0.63); }
@media (prefers-reduced-motion: no-preference) { .daysky__l--night::after { animation: twinkle 9s ease-in-out infinite; } }   /* the one thing that is only decoration, and stops under Reduce Motion */
@keyframes twinkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ---------- the product bar: Apple's local bar. It sticks to the top once the house bar has scrolled away. ---------- */
.pbar { position: sticky; top: 0; z-index: 35; height: var(--pbar); background: rgba(0, 0, 0, .66); border-bottom: 1px solid var(--el-line); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .pbar { background: rgba(0, 0, 0, .34); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); }
}
.pbar__in { position: relative; display: flex; align-items: center; gap: 1.25rem; height: 100%; max-width: calc(var(--frame) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.pbar__name { margin-right: auto; font-size: 1.0625rem; font-weight: 400; letter-spacing: -.025em; color: var(--el-ink); text-decoration: none; white-space: nowrap; }
.pbar__name b { font-weight: 600; }
.pbar__links { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 1.75rem); list-style: none; margin: 0; padding: 0; }
.pbar__links a { display: block; padding: .5rem 0; font-size: .8125rem; line-height: 1.4; color: var(--el-ink-2); text-decoration: none; transition: color .3s ease; }
.pbar__links a:hover, .pbar__links a[aria-current="true"] { color: #fff; }
.pbar__soon { display: inline-block; padding: .32rem .85rem; border-radius: 999px; background: rgba(255, 255, 255, .16); color: #fff; font-size: .75rem; font-weight: 500; line-height: 1.3; white-space: nowrap; }
.pbar__chev { display: none; flex: none; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin: 0 -.5rem 0 0; padding: 0; background: none; border: 0; color: var(--el-ink-2); cursor: pointer; }
.pbar__chev svg { transition: transform .4s var(--ease); }
.pbar__chev[aria-expanded="true"] svg { transform: rotate(180deg); }
.pbar__chev[aria-expanded="true"] { color: #fff; }

/* the hour of the story: a sun, later a moon, along a thin arc (positions are written by scrollscene.js as a transform) */
.pbar__arc { display: none; position: absolute; left: 50%; top: 50%; width: 9rem; height: 1.25rem; margin: -.625rem 0 0 -4.5rem; color: rgba(255, 255, 255, .3); pointer-events: none; }
.pbar__arc svg { display: block; width: 100%; height: 100%; overflow: visible; }
.orb { position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 50%; opacity: 0; will-change: transform, opacity; }
.orb--sun { background: #ffe9b8; box-shadow: 0 0 9px 2px rgba(255, 214, 140, .6); }
.orb--moon { background: #dfe4f0; box-shadow: inset -2px -1px 0 0 rgba(20, 28, 60, .5), 0 0 7px 1px rgba(205, 215, 245, .35); }
.js .pbar__arc { display: block; }
@media (max-width: 47.99rem) { .pbar__arc { position: relative; left: auto; top: auto; flex: none; width: 3.75rem; margin: 0; } }   /* a phone: the arc takes its place in the row, between the name and the chevron */
@media (max-width: 23rem) { .js .pbar__arc { display: none; } }
/* under 70rem the chapters fold into a small chevron menu (with script; without it they stay as a row under the name) */
@media (max-width: 69.99rem) {
  .pbar__links { overflow-x: auto; scrollbar-width: none; gap: 1.1rem; max-width: 50vw; }
  .pbar__links::-webkit-scrollbar { display: none; }
  .js .pbar__chev { display: inline-flex; }
  .js .pbar__links { position: absolute; top: 100%; left: 0; right: 0; display: block; max-width: none; overflow: visible; padding: .25rem var(--gutter) 1rem;
    background: rgba(0, 0, 0, .8); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid var(--el-line); visibility: hidden; opacity: 0; transform: translate3d(0, -.5rem, 0);
    transition: opacity .4s var(--ease), transform .45s var(--ease), visibility 0s linear .45s; }
  .js .pbar.is-open .pbar__links { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .js .pbar__links a { padding: .7rem 0; font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; color: #fff; }
}

/* ---------- 0 · night: the name falls into place from above, softly; the line comes in as a breath ---------- */
.open { position: relative; display: grid; align-content: center; justify-items: center; gap: clamp(.9rem, 2.4vw, 1.6rem); min-height: calc(100vh - var(--bar) - var(--pbar)); min-height: calc(100svh - var(--bar) - var(--pbar));
  padding: 6vh var(--gutter) 10vh; text-align: center; }
.open__title { font-size: clamp(2.6rem, 12.4vw, 10rem); font-weight: 400; line-height: 1; letter-spacing: -.055em; white-space: nowrap; }
.open__title b { font-weight: 600; }
.open__line { font-size: clamp(1.5rem, 1rem + 2.4vw, 3rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; color: var(--el-ink-2); }
.open::after { content: ""; position: absolute; left: 50%; bottom: 3.5vh; width: 1px; height: 3.25rem; background: linear-gradient(rgba(255, 255, 255, .55), transparent); transform-origin: top; }
@keyframes fall { from { opacity: 0; transform: translate3d(0, -16vh, 0); } 70% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cue { 0%, 100% { opacity: 0; transform: scaleY(.3); } 45%, 60% { opacity: .9; transform: scaleY(1); } }
.open__title { animation: fall 2.6s var(--slow) both; }
@media (prefers-reduced-motion: no-preference) { .open::after { animation: cue 5.5s ease-in-out 3.5s infinite both; } }
@media (prefers-reduced-motion: reduce) { .open__title { animation: fade-in 2.2s var(--slow) both; } .open::after { display: none; } }

/* ---------- a scene: a tall section whose stage stays while you scroll through it ---------- */
.scene { position: relative; }
.stage { position: relative; overflow: hidden; }
.el h2 { font-size: clamp(1.875rem, 1.1rem + 3.3vw, 3.75rem); font-weight: 600; line-height: 1.04; letter-spacing: -.04em; text-wrap: balance; }
.el .scene p, .el .chap p, .el .epi p { font-size: clamp(1.0625rem, 1rem + .6vw, 1.5rem); line-height: 1.4; letter-spacing: -.012em; color: var(--el-ink-2); text-wrap: balance; }
.js .scene--globe { height: 360vh; height: 360svh; }
.js .scene--light { height: 560vh; height: 560svh; }     /* the light moves on (190 of it), the hour stands while the weather turns (160), the light moves on to the night (90) */
.js .scene--breath { height: 320vh; height: 320svh; }   /* ONE breath played by the scroll: in about 28 %, a long hold about 34 %, out about 32 % of the 220 that stand pinned */
.js .scene--voyage { height: 720vh; height: 720svh; }   /* LISTEN (110), the turn and the walk (150), the glide (140), the rise (170), the planet settles and the words come (110) */
.js .scene .stage { position: sticky; top: 0; height: 100vh; height: 100lvh; }
/* A PICTURE NEVER STARTS OR ENDS IN A STRAIGHT LINE. Each picture stage melts into the sky at whichever of its edges is on the screen: scrollscene.js writes, on the scene, --ft = how far the stage's top
   edge is below the top of the window (at most 22 % of the window) and --fb = how far its bottom edge is above the bottom of it; the mask feathers the stage by exactly that much, eased. A stage that stands
   pinned (both 0) is the whole window, edge to edge. Without script the stages sit one under another in the page, and each melts over 9vh at both its edges. */
.scene--globe .stage, .scene--light .stage, .scene--voyage .stage {
  --ft: 9vh; --fb: 9vh;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .06) calc(var(--ft) * .2), rgba(0, 0, 0, .32) calc(var(--ft) * .45), rgba(0, 0, 0, .78) calc(var(--ft) * .78), #000 var(--ft), #000 calc(100% - var(--fb)), rgba(0, 0, 0, .78) calc(100% - var(--fb) * .78), rgba(0, 0, 0, .32) calc(100% - var(--fb) * .45), rgba(0, 0, 0, .06) calc(100% - var(--fb) * .2), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .06) calc(var(--ft) * .2), rgba(0, 0, 0, .32) calc(var(--ft) * .45), rgba(0, 0, 0, .78) calc(var(--ft) * .78), #000 var(--ft), #000 calc(100% - var(--fb)), rgba(0, 0, 0, .78) calc(100% - var(--fb) * .78), rgba(0, 0, 0, .32) calc(100% - var(--fb) * .45), rgba(0, 0, 0, .06) calc(100% - var(--fb) * .2), transparent 100%); }
.js .scene--globe .stage, .js .scene--light .stage, .js .scene--voyage .stage { --ft: var(--sft, 0px); --fb: var(--sfb, 0px); }

/* a line comes in as a breath: it rises a little, slowly, holds, and the next one follows (--p is the scene's progress; each ramp is its own stretch of it) */
.js .scene--globe .globe__words h2 { opacity: clamp(0, calc((var(--p, 0) - 0.6) * 6), 1); transform: translate3d(0, calc((1 - clamp(0, (var(--p, 0) - 0.6) * 6, 1)) * 1.1rem), 0); }
.js .scene--globe .globe__words p { opacity: clamp(0, calc((var(--p, 0) - 0.74) * 6), 1); transform: translate3d(0, calc((1 - clamp(0, (var(--p, 0) - 0.74) * 6, 1)) * 1.1rem), 0); }
/* the lines of the SIT and of the voyage: each block comes in with its own stretch of the scene's progress and goes out before the next (ramp = clamp(0, (p - from) * speed, 1)); the block carries its own soft shade under it,
   so the picture needs none (a canvas lies over the pictures) */
.js .words--sit { opacity: calc(clamp(0, (var(--p, 0) - .03) * 9, 1) * (1 - clamp(0, (var(--p, 0) - .35) * 11, 1))); }
.js .words--sit p { opacity: clamp(0, calc((var(--p, 0) - .12) * 10), 1); }
.js .words--wx { opacity: calc(clamp(0, (var(--p, 0) - .46) * 11, 1) * (1 - clamp(0, (var(--p, 0) - .67) * 11, 1))); }
.js .words--listen { opacity: calc(clamp(0, (var(--p, 0) - .03) * 10, 1) * (1 - clamp(0, (var(--p, 0) - .15) * 16, 1))); }
.js .words--listen p { opacity: clamp(0, calc((var(--p, 0) - .08) * 12), 1); }
.js .words--turn { opacity: calc(clamp(0, (var(--p, 0) - .20) * 14, 1) * (1 - clamp(0, (var(--p, 0) - .35) * 14, 1))); }
.js .words--glide { opacity: calc(clamp(0, (var(--p, 0) - .40) * 14, 1) * (1 - clamp(0, (var(--p, 0) - .55) * 14, 1))); }
.js .words--wx h2, .js .words--turn h2, .js .words--glide h2 { transform: translate3d(0, calc((1 - clamp(0, (var(--p, 0) - var(--in, .5)) * 12, 1)) * 1rem), 0); }
.js .words--wx h2 { --in: .46; } .js .words--turn h2 { --in: .20; } .js .words--glide h2 { --in: .40; }
/* the same breath for a block that is not pinned (vsag.css makes it arrive once; here it takes longer, and moves less) */
.js .el [data-reveal] { transition: opacity 1.8s var(--slow) var(--d, 0ms), transform 2.2s var(--ease) var(--d, 0ms); }
.js .el [data-reveal="breath"] { transform: translate3d(0, .9rem, 0); }
.js .el [data-reveal="left"] { transform: translate3d(-2rem, 0, 0); }
.js .el [data-reveal="right"] { transform: translate3d(2rem, 0, 0); }
.js .el [data-reveal].is-in { opacity: 1; transform: none; }
/* gentler under Reduce Motion: everything still arrives, but by fading, never by moving */
@media (prefers-reduced-motion: reduce) {
  .js .el [data-reveal], .js .el [data-reveal="breath"], .js .el [data-reveal="left"], .js .el [data-reveal="right"], .js .el [data-reveal="down"] { transform: none; transition: opacity 1.6s var(--slow) var(--d, 0ms); }
  .js .el .scene .words h2, .js .el .scene .words p, .js .el .globe__words h2, .js .el .globe__words p { transform: none; }
  .js .epi h2 { transform: none; }
}

/* ---------- 1 · ARRIVE: the canvas draws the frame the scroll is at ---------- */
.scene--globe .stage { min-height: 70vh; min-height: 70svh; background: #040406; }   /* the colour of the frames' own space (about rgb 5,5,6) */
.globe__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; background: #040406; }
.js .globe__canvas { display: block; }
.js .globe__still { visibility: hidden; }
.globe__still, .globe__still img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.globe__words { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: .6rem; justify-items: center; padding: 22vh var(--gutter) clamp(2.5rem, 9vh, 5rem); text-align: center;
  background: linear-gradient(to top, rgba(0, 0, 0, .7), transparent); }
.globe__words h2 { max-width: 13ch; }
.globe__words p { max-width: 22rem; }
@media (min-width: 60rem) and (min-aspect-ratio: 101/100) {
  .globe__words { top: 0; right: auto; width: min(34rem, 38vw); left: clamp(1.5rem, 5vw, 5rem); align-content: center; justify-items: start; text-align: left; background: none; padding: 0; }
  .globe__words h2 { max-width: 11ch; }
}

/* ---------- 2 · CHOOSE: the places, sideways ---------- */
.scene--strip .stage { display: flex; flex-direction: column; justify-content: center; gap: clamp(1.5rem, 5vh, 3rem); padding-top: var(--topgap); min-height: 70vh; min-height: 70svh; }
.strip__head { padding-inline: var(--gutter); max-width: calc(var(--frame) + 2 * var(--gutter)); width: 100%; margin-inline: auto; }
.strip__track { --cw: 72vw; --gap: 1rem; display: flex; gap: var(--gap); margin: 0; padding: 0 var(--gutter); list-style: none; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.strip__track::-webkit-scrollbar { display: none; }
.card { flex: 0 0 var(--cw); scroll-snap-align: center; }
.card figure { margin: 0; }
.card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 1.25rem; background: #111; pointer-events: none; -webkit-user-drag: none; }
.card figcaption { padding: .9rem .25rem 0; font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); font-weight: 500; letter-spacing: -.02em; color: var(--el-ink); }
@media (min-width: 48rem) { .strip__track { --cw: 44vw; --gap: 1.25rem; } }
@media (min-width: 70rem) { .strip__track { --cw: min(28vw, 30rem); --gap: 1.5rem; } }
.js .strip__track { overflow: visible; scroll-snap-type: none; will-change: transform; transform: translate3d(calc(var(--p, 0) * var(--travel, 0) * -1px), 0, 0); }
.js .scene--strip .stage { cursor: grab; }

/* ---------- 3 and 5 · SIT and LISTEN: a stack of pictures of one place, one crossing into the next under the scroll ---------- */
.scene--light .stage, .scene--voyage .stage { min-height: 80vh; min-height: 80svh; }
.stack { position: absolute; inset: 0; }
.stack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.stack img[data-hold] { opacity: 1; }
.words { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: grid; align-content: end; gap: .6rem; max-width: none; margin: 0; padding: 22vh max(var(--gutter), calc((100% - var(--frame)) / 2)) clamp(2.5rem, 9vh, 5rem);
  background: linear-gradient(to top, rgba(0, 0, 0, .64), rgba(0, 0, 0, .3) 55%, transparent); pointer-events: none; }
.words h2 { max-width: 14ch; color: #fff; }
.words p { color: rgba(255, 255, 255, .86); }
@media (prefers-reduced-motion: no-preference) {
  .js .scene--light .stack, .js .scene--voyage .stack { transform: none; }
}

/* ---------- the weather of the SIT, and 5 · the VOYAGE: a canvas draws the frame of the app's own take that the scroll is at, over the stack's pictures (the first frame is the picture it lies on) ---------- */
.wx__canvas, .voyage__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; opacity: 0; }
.js .wx__canvas, .js .voyage__canvas { display: block; }
.js .scene--voyage .stack { opacity: var(--sv, 1); }
.voyage__planet { position: relative; display: block; width: clamp(11rem, 36vh, 24rem); margin: 2.5rem auto 1rem; }
.voyage__planet img { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.js .voyage__planet { position: absolute; left: 0; top: 0; margin: 0; width: var(--pw, 1px); transform-origin: 50% 50%; opacity: 0; will-change: transform, opacity; pointer-events: none; }
.scene--voyage .anchor { position: absolute; left: 0; top: 0; width: 1px; height: 1px; pointer-events: none; }
.js .scene--voyage .anchor { top: calc((100% - 100lvh) * .18); }
html:not(.js) .words--wx { display: none; }
/* without script nothing is pinned and nothing overlaps: the picture, then the lines one under another, then the planet and the words */
html:not(.js) .scene--voyage .stage { min-height: 0; }
html:not(.js) .scene--voyage .stack { position: relative; inset: auto; height: min(70vh, 56vw); }
html:not(.js) .scene--voyage .words { position: static; padding: 1.25rem var(--gutter) 0; background: none; text-align: center; justify-items: center; }
html:not(.js) .scene--voyage .words h2 { max-width: none; }

/* ---------- 4 · BREATHE: a circle that breathes by itself, 4 s in, 4 s held, 4 s out; the words cross into each other with it, one at a time.
   Without script it stands still, half grown, with the three words in a quiet list under it: nothing on top of anything. ---------- */
.chap { position: relative; max-width: calc(var(--frame) + 2 * var(--gutter)); margin-inline: auto; padding: clamp(5rem, 14vw, 10rem) var(--gutter); }
.scene--breath .stage { display: grid; place-items: center; }
.scene--breath .chap--breath { min-height: 0; width: 100%; padding-top: calc(var(--pbar) + 1rem); padding-bottom: 1.25rem; }
.chap--breath { --ph: min(46vh, calc((100vw - 3.25rem) / 2 / .46)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: center; gap: clamp(1.5rem, 5vw, 2.5rem) .75rem; align-content: center; min-height: 100vh; min-height: 100svh; }
.breath { grid-column: 1 / -1; display: grid; justify-items: center; gap: 1.25rem; width: 100%; }
.breath__art { position: relative; width: min(60vw, 18rem, 30vh); aspect-ratio: 1; }
.breath__disc, .breath__ring { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; transform: scale(.8); opacity: .9; }
.breath__disc { background: radial-gradient(circle, rgba(255, 255, 255, .40) 0%, rgba(255, 255, 255, .26) 50%, rgba(255, 255, 255, .10) 69%, transparent 70%); box-shadow: 0 0 4rem rgba(255, 255, 255, .10); }
.breath__ring { border: 1.5px solid rgba(255, 255, 255, .6); top: -4%; left: -4%; right: -4%; bottom: -4%; }
.el .breath__words { display: flex; flex-direction: column; align-items: center; gap: .15rem; margin: 0; font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.3; text-align: center; }
.el .breath__words .w { white-space: nowrap; }
.breath__line { grid-column: 1 / -1; max-width: 22rem; text-align: center; }
/* the phones are supporting pictures: never taller than half the screen */
.phone { position: relative; flex: none; height: var(--ph); width: calc(var(--ph) * 1320 / 2868); padding: calc(var(--ph) * .012); border-radius: calc(var(--ph) * .062); background: #0e0e10; opacity: .94;
  box-shadow: 0 0 0 1.5px #3b3b40 inset, 0 0 0 1px #000, 0 1.5rem 4rem rgba(0, 0, 0, .5); }
.phone::before { content: ""; position: absolute; z-index: 2; top: 1.6%; left: 50%; width: 27%; height: 2.3%; transform: translateX(-50%); border-radius: 999px; background: #000; }
.phone img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--ph) * .052); background: #111; }
.phone--en { grid-column: 1; grid-row: 2; justify-self: end; }
.phone--el { grid-column: 2; grid-row: 2; justify-self: start; }
@media (min-width: 48rem) {
  .chap--breath { --ph: min(52vh, 26rem); grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 1.5rem clamp(1.5rem, 5vw, 4rem); align-items: center; }
  .breath { grid-column: 2; grid-row: 1; width: auto; }
  .breath__art { width: min(32vw, 24rem, 46vh); }
  .breath__line { grid-column: 2; grid-row: 2; }
  .phone--en { grid-column: 1; grid-row: 1; } .phone--el { grid-column: 3; grid-row: 1; margin-top: calc(var(--ph) * .12); }
}
/* with script the circle breathes and the words stand INSIDE it, one at a time (for everyone: it is the page's slow pulse, not a scroll effect) */
.js .breath { position: relative; width: min(60vw, 18rem, 30vh); aspect-ratio: 1; display: grid; place-items: center; }
.js .breath__art { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: auto; }
.js .el .breath__words { position: relative; display: grid; place-items: center; gap: 0; }
.js .el .breath__words .w { grid-area: 1 / 1; opacity: 0; }
@media (min-width: 48rem) { .js .breath { width: min(32vw, 24rem, 46vh); } }
/* THE BREATH IS PLAYED BY THE SCROLL (scrollscene.js writes, from the pinned scene's progress: --b the circle's fullness 0 to 1, eased like a breath, --b2 the ring's, a little behind it, and --w1 --w2 --w3 the three words'
   opacities, one at a time): in, a long hold with everything standing, out. The circle has no clock of its own. Only transform and opacity. */
.js .breath__disc { transform: scale(calc(.58 + .42 * var(--b, 0))); opacity: calc(.85 + .15 * var(--b, 0)); }
.js .breath__ring { transform: scale(calc(.58 + .42 * var(--b2, 0))); opacity: calc(.85 + .15 * var(--b2, 0)); }
.js .el .breath__words .w.w--in { opacity: var(--w1, 0); }
.js .el .breath__words .w.w--hold { opacity: var(--w2, 0); }
.js .el .breath__words .w.w--out { opacity: var(--w3, 0); }

/* ---------- 7 · first light again, inside the voyage: the planet, cut out of the dark (a picture with its own alpha: no frame, no box, nothing to blend) settles small, and the words stand under it ---------- */
.epi { position: relative; display: grid; align-content: center; justify-items: center; padding: 1rem var(--gutter) 3rem; text-align: center; }
.js .epi { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; align-content: end; padding: 0 var(--gutter) clamp(1.75rem, 6.5vh, 4rem); }
.epi__words { display: grid; justify-items: center; gap: 1.25rem; }
.epi__soon { margin: 0; }
.epi .pbar__soon { font-size: .9375rem; padding: .6rem 1.4rem; }
.epi__by { font-size: .875rem !important; }
.epi__by a { color: inherit; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.epi__by a:hover { color: #fff; }
@media (max-height: 30rem) { .js .epi { padding-bottom: .9rem; } .epi__words { gap: .6rem; } .epi h2 { font-size: 1.75rem; } .epi .pbar__soon { font-size: .8125rem; padding: .35rem 1rem; } }   /* a window as low as a phone on its side */
.js .epi h2 { opacity: clamp(0, calc((var(--p, 0) - .87) * 16), 1); transform: translate3d(0, calc((1 - clamp(0, (var(--p, 0) - .87) * 16, 1)) * 1rem), 0); }
.js .epi__soon { opacity: clamp(0, calc((var(--p, 0) - .9) * 16), 1); }
.js .epi__by { opacity: clamp(0, calc((var(--p, 0) - .92) * 16), 1); }
body.el .site-foot { margin-top: 0; background: transparent; }
body.el .site-foot__in { border-top: 0; color: rgba(255, 255, 255, .78); }
body.el .site-foot a:hover { color: #fff; }

/* ---------- chapters that arrive by the scroll, not by a clock (data-enter): --e is 0 when the chapter's top is at the bottom of the window and 1 when it has come 35 % up, so that however fast or slow
   the visitor scrolls, and however they stop, a chapter that is on the screen is all there (the end of the page above all). Without script --e does not exist and everything stands. ---------- */
.js .chap--breath .breath { opacity: clamp(0, calc((var(--e, 1) - .03) * 3.2), 1); }
.js .chap--breath .phone--en { opacity: calc(clamp(0, (var(--e, 1) - .03) * 3, 1) * .94); transform: translate3d(calc((1 - clamp(0, (var(--e, 1) - .03) * 3, 1)) * -2rem), 0, 0); }
.js .chap--breath .phone--el { opacity: calc(clamp(0, (var(--e, 1) - .08) * 3, 1) * .94); transform: translate3d(calc((1 - clamp(0, (var(--e, 1) - .08) * 3, 1)) * 2rem), 0, 0); }
.js .chap--breath .breath__line { opacity: clamp(0, calc((var(--e, 1) - .22) * 3.2), 1); transform: translate3d(0, calc((1 - clamp(0, (var(--e, 1) - .22) * 3.2, 1)) * .9rem), 0); }
@media (prefers-reduced-motion: reduce) {
  .js .chap--breath .phone--en, .js .chap--breath .phone--el, .js .chap--breath .breath__line { transform: none; }
}