html,body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto;scroll-snap-type:y proximity;background:#e9e3d8}
.relay{--mobile-reveal:100%;width:100%;height:300svh;min-height:2100px;overflow:hidden;background:linear-gradient(180deg,#e9e3d8 0 33.333%,#a8bac7 33.333% 66.666%,#14232d 66.666% 100%)}
.city-stage{inset:auto 0;top:100svh;width:100%;height:100svh;z-index:1;scroll-snap-align:start}
.city-stage>img,.future-window img{inset:0;width:100%;height:100%;object-fit:contain;object-position:center 50%}
.future-window{clip-path:inset(var(--mobile-reveal) 0 0 0)}
.reveal-line{left:0;right:0;top:var(--mobile-reveal);bottom:auto;width:100%;height:1px;background:linear-gradient(90deg,transparent,#fff 22%,#fff 78%,transparent)}
.reveal-line:before{width:70px;height:16px}
.city-stage:after{background:linear-gradient(180deg,#07151e33,transparent 24% 72%,#07151e8f)}
.logo{left:50%;top:3svh;width:clamp(280px,26vw,430px);transform:translateX(-50%)}
.event-date{left:50%;top:calc(100svh + 3svh);font-size:clamp(11px,.9vw,15px);z-index:20}
.jupiter{left:0;top:11svh;width:100vw;height:82svh;z-index:5;scroll-snap-align:start}
.moon{left:0;right:auto;top:calc(200svh + 9svh);bottom:auto;width:100vw;height:84svh;z-index:5;scroll-snap-align:start}
.message{left:34%;top:19%;width:32%;text-align:left}
.message small{font-size:clamp(12px,1vw,16px)}
.message h1{font-size:clamp(92px,9vw,148px)}
.message p{font-size:clamp(13px,1vw,17px)}
.era{z-index:8;font-size:9px}.era.now{left:3vw;top:4svh;bottom:auto}.era.future-label{right:3vw;bottom:4svh}
.reveal-readout{top:calc(100svh + 50svh);bottom:auto;transform:translate(-50%,-50%);writing-mode:vertical-rl}
.moon-instruction{bottom:3%;font-size:8px}
.sound-hint{font-size:8px}
.credit{right:3vw;bottom:2svh;font-size:8px}
.sheet{position:fixed}
@media(max-width:700px){
 .relay{min-height:1800px}
 .city-stage>img,.future-window img{object-fit:cover}
 .logo{width:min(280px,70vw)}
 .event-date{font-size:10px}
 .jupiter{top:15svh;height:min(100vw,72svh)}
 .moon{top:calc(200svh + 12svh);height:min(100vw,72svh)}
 .message{left:16%;top:21%;width:68%}
 .message small{font-size:clamp(10px,2.8vw,13px)}
 .message h1{font-size:clamp(62px,18vw,84px)}
 .message p{font-size:clamp(10px,2.7vw,13px)}
 .reveal-readout{display:none}
}
/* Scroll-led transition and restrained wayfinding */
.relay{--scroll-progress:0}
.city-stage>img,.future-window img{transform:scale(calc(.96 + var(--scroll-progress)*.05));transition:filter .15s linear;will-change:transform}
.city-stage .present{filter:saturate(calc(.84 - var(--scroll-progress)*.2)) brightness(calc(1.04 - var(--scroll-progress)*.08))}
.future-window img{filter:saturate(calc(.9 + var(--scroll-progress)*.1)) contrast(calc(1 + var(--scroll-progress)*.08))}
.scroll-cue{position:absolute;z-index:25;left:50%;display:grid;justify-items:center;gap:8px;transform:translateX(-50%);color:#172a33;font:700 7px DMMono;letter-spacing:.18em;pointer-events:none;transition:opacity .5s ease,transform .5s ease}
.scroll-cue i{position:relative;width:1px;height:36px;background:linear-gradient(transparent,#172a3399)}
.scroll-cue i:after{content:'';position:absolute;left:50%;bottom:0;width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translate(-50%,-1px) rotate(45deg)}
.cue-intro{top:calc(100svh - 62px);opacity:calc(1 - var(--scroll-progress)*3)}
.cue-city{top:calc(200svh - 68px);color:#f4eee5;opacity:calc(.72 - var(--scroll-progress)*.55);text-shadow:0 2px 10px #07131a}
@media(max-width:700px){
 .city-stage{height:115svh}
 .future-window{clip-path:inset(var(--mobile-reveal) 0 0 0)}
 .scroll-cue{font-size:6px;gap:7px}
 .scroll-cue i{height:31px}
}
@media(prefers-reduced-motion:reduce){.city-stage>img,.future-window img{transform:none}.scroll-cue i:after{animation:none}}
/* Refined Jupiter typography */
.message{left:50%;width:min(520px,42vw);transform:translateX(-50%);text-align:center}
.message h1 em{margin-left:0}
.message p,.message p+p{margin-left:auto;margin-right:auto}
.message strong{font-size:1.18em;font-weight:800;letter-spacing:.015em}
@media(max-width:700px){
 .message{left:50%;width:72vw;transform:translateX(-50%);text-align:center}
 .message p,.message p+p{margin-left:auto;margin-right:auto}
 .message strong{font-size:1.2em;font-weight:800}
}
/* Future follows the visitor's downward reading direction */
.future-window{clip-path:inset(0 0 var(--mobile-reveal) 0)}
.reveal-line{top:calc(100% - var(--mobile-reveal))}
@media(max-width:700px){.future-window{clip-path:inset(0 0 var(--mobile-reveal) 0)}}
/* A real, restrained space field for the opening and lunar chapters */
.relay{background:
 linear-gradient(180deg,#eef0ede0 0 33.333%,transparent 33.333% 66.666%,#13212c9c 66.666% 100%),
 url('/assets/hubble-skymap.jpg') center top/auto 100svh repeat-y,
 #243641}
.relay:before{content:'';position:absolute;z-index:0;inset:0 0 auto;height:100svh;background:radial-gradient(ellipse at 50% 44%,#f2f2e2b5 0 23%,#d8e0df8a 44%,#aab9bd59 66%,#72878e47 100%);pointer-events:none}
.logo{top:2.5svh}
.jupiter{top:16svh;height:77svh}
.message{color:#10242c;text-shadow:0 1px 22px #f4f4e7,0 0 44px #edf0e5}
@media(max-width:700px){.jupiter{top:18svh;height:min(100vw,68svh)}}
/* One uninterrupted spatial canvas across all three chapters */
html,body{background:#5f7680}
.relay{background:transparent}
.relay:before{content:'';position:fixed;z-index:0;inset:0;height:auto;background:
 linear-gradient(180deg,#eaf0e5aa,#c5d1cc8c 38%,#768d9280 67%,#3047518f),
 url('/assets/hubble-skymap.jpg') center center/cover no-repeat;
 pointer-events:none}
.city-stage{background:transparent}
.city-stage>img,.future-window img{object-fit:contain}
.city-stage:after{background:linear-gradient(180deg,#d6e0dc35,transparent 20% 78%,#13263059)}
.jupiter .sound-wave{z-index:2;width:min(68%,680px)}
.jupiter-sound-hint{position:absolute;z-index:12;left:50%;bottom:7%;transform:translateX(-50%) translateY(4px);padding:9px 13px;border:1px solid #172a3352;border-radius:99px;color:#172a33;background:#edf0e3b8;backdrop-filter:blur(10px);font:700 7px DMMono;letter-spacing:.11em;text-transform:uppercase;white-space:nowrap;opacity:.82;pointer-events:none;transition:opacity .25s,transform .25s}
.jupiter:hover .jupiter-sound-hint,.jupiter:focus-visible .jupiter-sound-hint{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:700px){
 .city-stage>img,.future-window img{object-fit:contain}
 .jupiter-sound-hint{bottom:2%;font-size:6px}
 .jupiter .sound-wave{width:70%}
}
/* The transition line is also a quiet manual scrubber */
.reveal-line{pointer-events:auto;cursor:ns-resize;touch-action:none}
.reveal-line:after{content:'';position:absolute;left:0;right:0;top:50%;height:34px;transform:translateY(-50%);background:transparent}
.reveal-line:active:before{background:#f4eee5cc;box-shadow:0 0 24px #fff}
/* Dissolve the photographic chapter into the single fixed star field */
.city-stage{background:transparent;isolation:isolate}
.city-stage>.present,.city-stage>.future-window{
 -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 10%,#000 90%,transparent 100%);
 mask-image:linear-gradient(to bottom,transparent 0%,#000 10%,#000 90%,transparent 100%);
}
.city-stage:after{
 background:radial-gradient(ellipse at center,transparent 52%,#263b4630 86%,transparent 100%);
 -webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent);
 mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent);
}
@media(max-width:700px){
 .city-stage>.present,.city-stage>.future-window{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 8%,#000 92%,transparent 100%);
 }
}
/* Higher-contrast but restrained scroll wayfinding */
.scroll-cue{gap:9px;padding:10px 14px;border:1px solid #fff7;border-radius:99px;color:#f7f3ea;background:#10242ca8;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:9px;font-weight:800;letter-spacing:.2em;text-shadow:0 1px 9px #07131a;box-shadow:0 8px 28px #07131a4f,0 0 24px #fff2}
.scroll-cue i{height:40px;width:2px;background:linear-gradient(transparent,#fff)}
.scroll-cue i:after{width:8px;height:8px;border-width:0 2px 2px 0}
.cue-intro{color:#f7f3ea}
.cue-city{color:#f7f3ea;opacity:calc(.9 - var(--scroll-progress)*.55)}
@media(max-width:700px){.scroll-cue{padding:9px 13px;font-size:8px}.scroll-cue i{height:34px}}
/* Playback attribution stays anchored to the viewport */
.credit{position:fixed;z-index:35;right:18px;bottom:16px;top:auto;left:auto}
@media(max-width:700px){.credit{right:12px;bottom:12px;font-size:7px}}
/* Planetary sound countdown */
.audio-countdown{position:absolute;z-index:30;left:50%;top:50%;display:grid;place-items:center;min-width:74px;min-height:74px;transform:translate(-50%,-50%) scale(.88);border:1px solid #f6f3e8a8;border-radius:50%;color:#f9f5e9;background:#10242ca8;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font:400 34px/1 Instrument;text-align:center;text-shadow:0 2px 12px #07131a;box-shadow:0 0 34px #b9edff4a;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.audio-countdown.visible{opacity:1;transform:translate(-50%,-50%) scale(1)}
.audio-countdown:not(:empty){padding:12px}
.audio-countdown[data-kind=label]{font-family:DMMono;font-size:8px;font-weight:800;letter-spacing:.12em}
@media(max-width:700px){.audio-countdown{min-width:66px;min-height:66px;font-size:30px}}
/* Identical lower-orbit sound instructions on both planets */
.jupiter-sound-hint,.sound-hint{
 position:absolute;z-index:12;left:50%;top:auto;bottom:7%;
 min-height:32px;padding:9px 13px;
 transform:translateX(-50%) translateY(4px);
 border:1px solid #f6f3e88a;border-radius:99px;
 color:#f7f3ea;background:#10242ca8;
 backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
 font:700 7px DMMono;letter-spacing:.11em;text-transform:uppercase;
 text-shadow:0 1px 8px #07131a;box-shadow:0 8px 24px #07131a42;
 white-space:nowrap;opacity:.86;pointer-events:none;
 transition:opacity .25s,transform .25s;
}
.jupiter:hover .jupiter-sound-hint,.jupiter:focus-visible .jupiter-sound-hint,.moon:hover .sound-hint,.moon:focus-visible .sound-hint,.sound-locked .sound-hint{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:700px){.jupiter-sound-hint,.sound-hint{bottom:3%;min-height:30px;padding:8px 11px;font-size:6px}}
/* Countdown reuses both shared lower-orbit instruction pills */
.jupiter-sound-hint.counting,.sound-hint.counting{font-family:Instrument;font-size:24px;font-weight:400;letter-spacing:0;opacity:1;transform:translateX(-50%) translateY(0);box-shadow:0 0 32px #b9edff4a,0 8px 24px #07131a42}
/* Keep the NOW/FUTURE scrubber within the portrait artwork, not the viewport */
.city-stage .reveal-line{
 left:50%;right:auto;width:min(100%,75vh);
 transform:translateX(-50%);
 background:linear-gradient(90deg,transparent,#eef4ef38 12%,#eef4ef78 50%,#eef4ef38 88%,transparent);
 box-shadow:0 0 8px #e8f2ed24;
 opacity:.62;
}
.city-stage .reveal-line:before{
 width:54px;height:12px;
 border-color:#eef4ef78;
 background:#2138426b;
 box-shadow:0 5px 14px #07131a38;
}
.city-stage .reveal-line:hover,.city-stage .reveal-line:active{opacity:.86}
@media(max-width:700px){.city-stage .reveal-line{width:min(100%,86.25vh);opacity:.55}}
/* Quiet first-visit invitation, with no autoplay */
.sound-guide{position:absolute;z-index:32;right:5vw;top:44svh;display:flex;align-items:center;gap:12px;color:#f7f3ea;font:800 8px DMMono;letter-spacing:.16em;text-shadow:0 2px 12px #07131a;opacity:0;transform:translateX(10px);pointer-events:none;transition:opacity .7s ease,transform .7s ease}
.sound-guide i{position:relative;width:68px;height:1px;background:linear-gradient(90deg,#f7f3ea,transparent)}
.sound-guide i:before{content:'';position:absolute;left:0;top:50%;width:8px;height:8px;border-left:1px solid #f7f3ea;border-bottom:1px solid #f7f3ea;transform:translateY(-50%) rotate(45deg)}
.sound-guide.visible{opacity:.84;transform:translateX(0)}.sound-guide.dismissed{opacity:0;transform:translateX(8px)}
/* Smaller, borderless scroll guidance */
.scroll-cue{gap:6px;padding:5px 7px;border:0;border-radius:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;font-size:7px;box-shadow:none;text-shadow:0 2px 10px #07131a}
.scroll-cue i{height:28px;width:1px}.scroll-cue i:after{width:6px;height:6px;border-width:0 1px 1px 0}
@media(max-width:700px){.sound-guide{right:4vw;top:43svh;font-size:7px}.sound-guide i{width:45px}.scroll-cue{padding:4px;font-size:6px}.scroll-cue i{height:24px}}
@media(max-width:700px){
 /* Mobile music invitation sits below the globe and points upward */
 .sound-guide{left:50%;right:auto;top:calc(100svh - 84px);display:grid;justify-items:center;gap:7px;transform:translate(-50%,8px);text-align:center;white-space:nowrap}
 .sound-guide b{grid-row:2}
 .sound-guide i{grid-row:1;width:1px;height:34px;background:linear-gradient(transparent,#f7f3ea)}
 .sound-guide i:before{left:50%;top:0;width:7px;height:7px;border:1px solid #f7f3ea;border-width:1px 0 0 1px;transform:translate(-50%,1px) rotate(45deg)}
 .sound-guide.visible{transform:translate(-50%,0)}
 .sound-guide.dismissed{transform:translate(-50%,8px)}
 /* The second cue is revealed by intersection, not page-load position. */
 .cue-city{opacity:0!important;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
 .cue-city.in-view{opacity:.72!important;visibility:visible;transition-delay:0s}
}
/* Event date belongs to the Jupiter chapter */
.jupiter-date{position:absolute;z-index:12;left:50%;bottom:14%;transform:translateX(-50%);color:#10242c;font:800 clamp(11px,1vw,17px)/1.4 DMMono;letter-spacing:.08em;white-space:nowrap;text-shadow:0 1px 18px #eef1e5,0 0 28px #eef1e5}
@media(max-width:700px){.jupiter-date{bottom:12%;font-size:9px}.jupiter-sound-hint{bottom:3%}}
/* Countdown removed: sound labels remain compact and immediate */
.jupiter-sound-hint.counting,.sound-hint.counting{font:700 7px DMMono;letter-spacing:.11em;box-shadow:0 8px 24px #07131a42}
/* Optical logo alignment with Jupiter's projected centre */
.logo{left:49.2%;transform:translateX(-50%)}
@media(max-width:700px){.logo{left:49.2%;transform:translateX(-50%)}}
/* The opening cue doubles as a quiet cinematic-scroll control */
button.scroll-cue{-webkit-appearance:none;appearance:none;margin:0;color:#f7f3ea;cursor:pointer;pointer-events:auto}
button.scroll-cue:focus-visible{outline:1px solid #f7f3eab8;outline-offset:5px}
button.scroll-cue.auto-scrolling{opacity:.9}
button.scroll-cue.auto-scrolling i{animation:auto-scroll-pulse 1.4s ease-in-out infinite}
@keyframes auto-scroll-pulse{50%{opacity:.35;transform:translateY(4px)}}

/* Middle chapter editorial note */
.city-story{position:absolute;z-index:16;top:calc(100svh + 50svh);right:clamp(18px,3vw,54px);width:min(300px,calc((100vw - min(100vw,75vh))/2 - 38px));transform:translateY(-50%);color:#f4f2e9;text-shadow:0 2px 12px #07131a}
.city-story ul{display:grid;gap:18px;margin:0;padding:0;list-style:none}
.city-story li{position:relative;margin:0;padding-left:14px;font:600 clamp(9px,.72vw,12px)/1.55 DMMono}
.city-story li:before{content:'—';position:absolute;left:0;color:#f3aa94}
.city-story a{color:#fff;text-decoration:none;border-bottom:1px solid #ffffff6b}
.city-story strong{color:#fff;font-weight:800}
@media(max-width:900px){
 .city-story{right:16px;width:180px;padding:14px;background:#071821b8;border:1px solid #dbe8e22b;border-radius:10px;backdrop-filter:blur(12px)}
 .city-story ul{gap:10px}.city-story li{font-size:8px;line-height:1.45}
}
@media(max-width:700px){
 .city-story{top:calc(100svh + 77svh);left:50%;right:auto;width:min(88vw,430px);transform:translate(-50%,-50%);padding:16px 18px}
 .city-story ul{grid-template-columns:1fr 1fr;gap:12px 15px}.city-story li{font-size:9px}
}
@media(max-width:420px){.city-story{top:calc(100svh + 79svh)}.city-story li{font-size:8px}}

/* Keep the middle-chapter copy visibly beside the portrait artwork. */
@media(min-width:701px){
 .city-story{
  left:calc(50% + min(50vw,37.5vh) + clamp(18px,2.2vw,38px));
  right:clamp(18px,2.4vw,44px);
  width:auto;
  top:calc(100svh + 50svh);
  padding:clamp(16px,1.6vw,24px);
  border:1px solid #dbe8e238;
  border-radius:12px;
  background:#071821a8;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
 }
 .city-story li{font-size:clamp(10px,.74vw,13px);line-height:1.6}
}
@media(min-width:701px) and (max-width:1050px){
 .city-story{left:auto;right:20px;width:clamp(210px,25vw,270px)}
}
@media(max-width:700px){
 .city-story{top:calc(100svh + 76svh);z-index:22}
}

/* Unframed middle-chapter statements */
.city-story,.city-story ul,.city-story li{
 background:transparent;
 border:0;
 border-radius:0;
 box-shadow:none;
 backdrop-filter:none;
 -webkit-backdrop-filter:none;
}
.city-story{padding:0}
.city-story ul{gap:clamp(22px,3.2vh,38px)}
.city-story li{padding-left:0;text-wrap:balance}
.city-story li:before{content:none}
@media(max-width:900px){
 .city-story{padding:0;background:transparent;border:0;backdrop-filter:none;-webkit-backdrop-filter:none}
 .city-story ul{gap:20px}
}
@media(max-width:700px){
 .city-story{padding:0 22px}
 .city-story ul{gap:18px}
}

/* More breathing room between the four middle-chapter statements. */
.city-story ul{gap:clamp(38px,5.4vh,64px)}
@media(max-width:900px){.city-story ul{gap:34px}}
@media(max-width:700px){.city-story ul{gap:30px}}

/* Opening registration and update actions */
.opening-actions{position:absolute;z-index:18;left:calc(50% + min(38vw,390px));top:48%;display:grid;gap:14px;transform:translateY(-50%)}
.opening-actions a{display:flex;align-items:center;justify-content:center;min-width:170px;min-height:48px;padding:13px 18px;border:1px solid #f7f3eaa1;border-radius:3px;color:#fffaf0;font:800 10px/1 DMMono;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;white-space:nowrap;text-shadow:0 1px 8px #07131a;box-shadow:0 14px 34px #07131a66;transition:transform .2s,box-shadow .2s,background .2s}
.opening-register{border-color:#ffd2a6d9!important;background:linear-gradient(110deg,#a94f42f2,#d77a62ee 58%,#df9b6aee)}
.opening-register span:before{content:'◈';margin-right:9px;color:#fff4d9;font-size:1.2em}
.opening-waitlist{background:#10242cc7;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.opening-waitlist span:before{content:'✦';margin-right:9px;color:#91dbc1}
.opening-actions a:hover,.opening-actions a:focus-visible{transform:translateY(-2px);box-shadow:0 18px 42px #07131a80,0 0 28px #f3aa9440}
@media(max-width:1100px) and (min-width:701px){.opening-actions{left:auto;right:3vw}.opening-actions a{min-width:150px}}
@media(max-width:700px){
 .opening-actions{left:50%;top:calc(100svh - 142px);grid-template-columns:1fr 1fr;width:min(88vw,430px);gap:9px;transform:translateX(-50%)}
 .opening-actions a{min-width:0;min-height:44px;padding:11px 8px;font-size:8px}
}

/* Institutional collaboration action within the middle narrative */
.city-story li.story-action{margin-top:-10px}
.collaborate-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 17px!important;border:1px solid #91dbc195!important;border-radius:3px;color:#fff!important;background:#10242ca8;font:800 9px/1 DMMono!important;letter-spacing:.12em;text-transform:uppercase;text-decoration:none!important;box-shadow:0 12px 28px #07131a54;transition:background .2s,border-color .2s,transform .2s}
.collaborate-button:before{content:'✦';margin-right:9px;color:#91dbc1}
.collaborate-button:hover,.collaborate-button:focus-visible{background:#183440d6;border-color:#91dbc1!important;transform:translateY(-2px)}
@media(max-width:700px){.city-story ul{gap:22px}.collaborate-button{min-height:40px;padding:10px 13px!important;font-size:8px!important}}

/* Keep the opening controls balanced around the planet. */
@media(min-width:701px){
 .sound-guide{
  left:5vw;
  right:auto;
  flex-direction:row-reverse;
  transform:translateX(-10px);
 }
 .sound-guide i{background:linear-gradient(90deg,transparent,#f7f3ea)}
 .sound-guide i:before{
  left:auto;
  right:0;
  border:1px solid #f7f3ea;
  border-width:1px 1px 0 0;
  transform:translateY(-50%) rotate(45deg);
 }
 .sound-guide.visible{transform:translateX(0)}
 .sound-guide.dismissed{transform:translateX(-8px)}
}

@media(max-width:700px){
 /* Keep the music and scroll prompts separate around the opening planet. */
 .sound-guide{
  left:7vw;
  top:42svh;
  justify-items:start;
  transform:translateY(8px);
 }
 .sound-guide.visible{transform:translateY(0)}
 .sound-guide.dismissed{transform:translateY(8px)}
 .cue-intro{left:auto;right:7vw;top:72svh;transform:none}

 /* Position the actions in the viewport; they are relative to the Jupiter stage. */
 .opening-actions{top:calc(82svh - 142px)}

 /* Introduce the city story before the tower instead of beside it. */
 .city-story{
  top:calc(100svh - 74px);
  transform:translateX(-50%);
 }
 .city-stage>img,.future-window img{object-position:center calc(50% + 12svh)}
}

/* Mobile gets a deliberately slower, roomier three-chapter journey. */
@media(max-width:700px){
 .relay{height:385svh;min-height:3200px}
 /* Opening chapter holds its own breathing room after the actions. */
 .city-stage{top:130svh;height:120svh}
 .city-story{top:calc(130svh - 128px)}
 /* Keep the lunar chapter clearly separate from the image transition. */
 .moon{top:calc(300svh + 14svh)}
 .cue-city{top:calc(250svh - 72px)}
}

/* Mobile rhythm: remove visual collisions and keep the first chapter breathable. */
@media(max-width:700px){
 .sound-guide{left:50%;right:auto;top:calc(82svh + 70px);justify-items:center;transform:translate(-50%,8px);text-align:center}
 .sound-guide.visible{transform:translate(-50%,0)}
 .sound-guide.dismissed{transform:translate(-50%,8px)}
 .cue-intro{top:72svh}
 .jupiter-date{bottom:15%}
}

/* Final mobile pass: one calm, continuous field with an editorial reading rhythm. */
@media(max-width:700px){
  .relay{height:430svh;min-height:3500px}
  .city-stage{top:160svh;height:118svh}
  .city-story{top:calc(135svh - 24px);width:min(86vw,430px);color:#122b35;text-shadow:0 1px 11px #eef1e8d1}
  .city-story ul{grid-template-columns:1fr;gap:clamp(26px,4vh,38px)}
  .city-story li{font-size:clamp(10px,2.65vw,12px);line-height:1.58;color:#122b35}
  .city-story a,.city-story strong{color:#092631;border-color:#09263170}
  .moon{top:calc(325svh + 14svh)}
  .cue-city{top:calc(278svh - 72px)}
}

/* A quiet qualifier for NASA's yet-to-be-revealed global brief. */
.city-story li.global-note{font-size:.88em;line-height:1.55;opacity:.78}
@media(max-width:700px){.city-story li.global-note{font-size:clamp(9px,2.4vw,11px);opacity:.8}}

/* Event date: a primary piece of Jupiter’s invitation. */
.jupiter-date{font-size:clamp(13px,1.18vw,20px);font-weight:800;letter-spacing:.115em;text-shadow:0 1px 16px #f5f1e8,0 0 30px #f5f1e8}
@media(max-width:700px){.jupiter-date{font-size:clamp(10px,2.75vw,12px);font-weight:800;letter-spacing:.1em}}

/* Mobile's final lunar chapter gets a complete, unbroken viewport of its own. */
@media(max-width:700px){
  /* End the page just after the Moon chapter: no pale Android-coloured tail below it. */
  html,body{background:#14232d}
  .relay{height:calc(349svh + min(100vw,72svh));min-height:0}
  .moon{top:calc(325svh + 14svh);height:min(100vw,72svh)}
}

/* The Moon uses the same compact planetary-control material as Jupiter. */
.moon .sound-hint{
  min-height:27px;
  padding:5px 9px;
  border-color:#f7f3ea86;
  color:#f7f3ea;
  background:linear-gradient(135deg,#182e37c9,#0b1c25d9 72%);
  box-shadow:inset 0 1px #ffffff30,0 7px 18px #06131a48;
  font:800 6px/1 DMMono;
  letter-spacing:.1em;
  text-shadow:none;
}
.moon:hover .sound-hint,.moon:focus-visible .sound-hint,.sound-locked .sound-hint{transform:translateX(-50%) translateY(0)}
@media(max-width:700px){.moon .sound-hint{min-height:24px;padding:4px 7px;font-size:5px;letter-spacing:.08em}}

/* Neutralize Android's tap treatment on every bespoke planetary control. */
.planet-switcher button,.scroll-cue,.surface-point{
  appearance:none;
  -webkit-appearance:none;
  -webkit-tap-highlight-color:transparent;
  tap-highlight-color:transparent;
}
.planet-switcher button:active,.scroll-cue:active,.surface-point:active{outline:0;background-color:transparent}

/* Keep the sound prompt optically stable beside the planet selector, including hover states. */
.jupiter .planet-tools{isolation:isolate;overflow:visible}
.jupiter .planet-switcher{z-index:1;flex:0 0 auto}
.jupiter .jupiter-sound-hint{z-index:2;flex:0 0 auto;visibility:visible;transform:none!important}
.jupiter:hover .jupiter-sound-hint,.jupiter:focus-visible .jupiter-sound-hint{visibility:visible;transform:none!important}

/* Calendar stays visually identical to the opening actions; only its small glyph changes. */
.opening-calendar span:before{content:'▣'!important;color:#91dbc1}
@media(max-width:700px){.opening-actions .opening-calendar{grid-column:1/-1;justify-self:center;width:calc(50% - 5px)}}

/* A restrained mission dock keeps the four editorial routes reachable without competing with the Moon. */
.mission-dock{
  position:fixed;
  z-index:24;
  left:18px;
  bottom:16px;
  display:grid;
  gap:5px;
  width:max-content;
}
.mission-dock-button{
  min-height:25px;
  padding:6px 9px;
  border:1px solid #fff1dc69;
  border-radius:3px;
  color:#fff5e8;
  background:#2f1a1bc7;
  box-shadow:inset 0 1px #fff3e229,0 7px 16px #08060748;
  backdrop-filter:blur(11px) saturate(1.14);
  -webkit-backdrop-filter:blur(11px) saturate(1.14);
  font:800 6px/1 DMMono;
  letter-spacing:.11em;
  text-align:left;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.mission-dock-button.local-route{border-color:#ffd4b3ab;background:linear-gradient(135deg,#d66652dd,#8d3735d9)}
.mission-dock-button:hover,.mission-dock-button:focus-visible{border-color:#fff4e0be;background:#56302cde;transform:translateX(2px);outline:0}
.mission-dock-button.local-route:hover,.mission-dock-button.local-route:focus-visible{background:linear-gradient(135deg,#ec8065e9,#a9433edc)}
@media(max-width:700px){
  .mission-dock{left:10px;bottom:10px;gap:4px}
  .mission-dock-button{min-height:23px;padding:5px 7px;font-size:5px;letter-spacing:.09em}
}
@media(prefers-reduced-motion:reduce){.mission-dock-button{transition:none}}

/* Coherence pass: a single typographic rhythm and readable controls, without adding new visual noise. */
.message small,.message p,.jupiter-date,.opening-actions a,.planet-switcher,.jupiter-sound-hint,.sound-hint,.mission-dock-button,.sound-guide,.scroll-cue{font-family:DMMono,monospace}
.message{width:min(500px,38vw);top:20%;color:#112a34;text-shadow:0 1px 20px #f5f2e7,0 0 34px #f5f2e7}
.message small{font-size:clamp(11px,.9vw,14px);letter-spacing:.16em}
.message p{max-width:340px;margin-top:22px;font-size:clamp(13px,.98vw,16px);line-height:1.48;letter-spacing:.01em}
.message p+p{margin-top:11px}
.message strong{font-weight:800}
.jupiter .planet-tools{bottom:3.8%;gap:7px}
.jupiter .planet-switcher,.jupiter .jupiter-sound-hint{min-height:31px;border-color:#f7f3eaae;background:linear-gradient(135deg,#19313bdb,#0b1c25e8 72%);box-shadow:inset 0 1px #ffffff38,0 9px 20px #06131a52}
.jupiter .planet-switcher{padding:4px 7px;gap:3px}
.jupiter .planet-switcher button{width:20px;height:20px;font-size:12px}
.jupiter .planet-switcher b{min-width:58px;font-size:8px;letter-spacing:.1em}
.jupiter .jupiter-sound-hint{padding:6px 11px;font-size:7px;letter-spacing:.08em}
.sound-guide{font-size:9px;letter-spacing:.12em}
.mission-dock{left:16px;bottom:16px;gap:6px}
.mission-dock-button{min-height:29px;padding:7px 10px;font-size:7px;letter-spacing:.09em}
@media(max-width:700px){
 .message{width:72vw;top:21%}
 .message small{font-size:10px;letter-spacing:.13em}
 .message p{max-width:250px;margin-top:15px;font-size:11px;line-height:1.45}
 .message p+p{margin-top:9px}
 .jupiter .planet-tools{bottom:3.5%;gap:5px}
 .jupiter .planet-switcher,.jupiter .jupiter-sound-hint{min-height:28px}
 .jupiter .planet-switcher{padding:4px 6px}
 .jupiter .planet-switcher button{width:18px;height:18px;font-size:11px}
 .jupiter .planet-switcher b{min-width:50px;font-size:7px}
 .jupiter .jupiter-sound-hint{padding:5px 8px;font-size:6px;letter-spacing:.065em}
 .sound-guide{font-size:8px;letter-spacing:.1em}
 .mission-dock{position:absolute;left:10px;top:calc(113svh);bottom:auto;gap:5px}
 .mission-dock-button{min-height:27px;padding:6px 8px;font-size:6px;letter-spacing:.075em}
}

/* Mobile readability and spacing pass: make every action decisive, with a quiet final navigation chapter. */
@media(max-width:700px){
  .relay{height:calc(409svh + min(100vw,72svh));min-height:0}
  .message{width:78vw;top:20%;text-shadow:0 1px 16px #f5f2e9,0 0 28px #f5f2e9}
  .message small{font-size:11px;letter-spacing:.12em}
  .message p{max-width:280px;margin-top:17px;font-size:12px;line-height:1.52;font-weight:800}
  .message p+p{margin-top:11px}
  .jupiter-date{bottom:16%;font-size:13px;letter-spacing:.08em}
  .city-story li{font-size:13px;line-height:1.65;font-weight:700}
  .city-story li.global-note{font-size:12px;line-height:1.62}
  .scroll-cue{font-size:8px;letter-spacing:.14em}
  .moon-instruction{font-size:8px;letter-spacing:.16em}
  .sound-guide{font-size:9px;letter-spacing:.1em}

  /* Event actions read as one deliberate stack rather than three unrelated controls. */
  .opening-actions{top:calc(82svh - 142px);grid-template-columns:1fr;width:min(84vw,360px);gap:12px}
  .opening-actions a,.opening-actions .opening-calendar{grid-column:auto;justify-self:stretch;width:100%;min-height:46px;padding:12px 14px;font-size:9px;letter-spacing:.1em}

  /* Keep the compact planet instrument readable too. */
  .jupiter .planet-switcher b{font-size:8px}
  .jupiter .jupiter-sound-hint,.moon .sound-hint{font-size:8px;letter-spacing:.055em}
  .jupiter .jupiter-sound-hint{padding:5px 8px}

  /* The four secondary routes become a final full-width chapter after the Moon. */
  .mission-dock{position:absolute;left:14px;top:calc(367svh + min(100vw,72svh));bottom:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:calc(100vw - 28px)}
  .mission-dock-button{display:flex;align-items:center;justify-content:center;min-height:46px;padding:10px;font-size:9px;letter-spacing:.075em;text-align:center}
}

/* Mobile is intentionally editorial rather than miniature: one clear reading size,
   one consistent action scale, and a final navigation landing after the Moon. */
@media(max-width:700px){
  .relay{height:calc(465svh + min(100vw,72svh));}

  .message{top:16%}
  .message small{font-size:12px;letter-spacing:.13em}
  .message p{max-width:300px;font-size:14px;line-height:1.55;font-weight:800}
  .message p+p{margin-top:13px}
  .jupiter-date{bottom:12%;font-size:14px;font-weight:800;letter-spacing:.09em}

  .city-story{width:min(88vw,430px);padding:0 18px}
  .city-story ul{gap:clamp(30px,4.7vh,42px)}
  .city-story li{font-size:14px;line-height:1.66;font-weight:700}
  .city-story li.global-note{font-size:13px;line-height:1.64;opacity:.92}

  /* Primary actions deliberately share one mobile component specification. */
  .opening-actions{width:min(86vw,380px);gap:16px}
  .opening-actions a,.opening-actions .opening-calendar,
  .collaborate-button,.mission-dock-button{
    min-height:48px!important;
    padding:12px 14px!important;
    font-size:10px!important;
    line-height:1!important;
    letter-spacing:.09em!important;
  }
  .collaborate-button{width:100%;}

  .jupiter .planet-switcher b{font-size:9px}
  .jupiter .jupiter-sound-hint,.moon .sound-hint{font-size:9px;letter-spacing:.055em}
  .scroll-cue,.sound-guide,.moon-instruction{font-size:9px}

  /* Keep the Moon entirely legible, then give its four routes a quiet landing zone. */
  .mission-dock{top:calc(396svh + min(100vw,72svh));gap:12px}
}

/* Final typographic system: Instrument is reserved for the single editorial title;
   every informational and interactive element speaks in the same DM Mono scale. */
.message strong{font-size:inherit}
.message small{font-size:14px;font-weight:800;letter-spacing:.14em}
.message p{font-size:16px;line-height:1.5;font-weight:800}
.jupiter-date{font-size:16px;font-weight:800}
.opening-actions a{font-size:11px;font-weight:800}
.city-story li{font-size:14px;line-height:1.65;font-weight:700}
.city-story li.global-note{font-size:13px;line-height:1.62}
.planet-switcher b,.jupiter .jupiter-sound-hint,.moon .sound-hint{font-size:9px;font-weight:800}
.mission-dock-button{font-size:9px;font-weight:800}
.scroll-cue,.sound-guide,.moon-instruction{font-size:9px;font-weight:800}

/* Attribution stays present only while the soundtrack is actually playing. */
.credit{visibility:hidden;opacity:0;pointer-events:none;transition:opacity .25s ease}
.relay.playing .credit{visibility:visible;opacity:.76;pointer-events:auto}

@media(max-width:700px){
  /* Keep the complete Jupiter message inside its planet without competing with its controls. */
  .message p{font-size:13px;line-height:1.5}
  .jupiter-date{font-size:13px}

  /* Jupiter's own compact control is the mobile sound invitation. The duplicate
     floating guide is removed so it can never cross the action stack. */
  .sound-guide{display:none!important}

  .city-story li{font-size:14px;line-height:1.66}
  .city-story li.global-note{font-size:13px;line-height:1.64}
  .opening-actions{top:calc(82svh - 172px)}
  .opening-actions a,.opening-actions .opening-calendar,
  .collaborate-button,.mission-dock-button{font-size:10px!important}
}

/* Readability lift: increase the informational type one measured step without
   changing the artwork's hierarchy or turning the controls into visual noise. */
.message small{font-size:15px}
.message p{font-size:17px}
.jupiter-date{font-size:17px}
.opening-actions a{font-size:12px}
.city-story li{font-size:15px;line-height:1.68}
.city-story li.global-note{font-size:14px;line-height:1.66}
.planet-switcher b,
.jupiter .jupiter-sound-hint,
.moon .sound-hint,
.mission-dock-button,
.scroll-cue,
.sound-guide,
.moon-instruction{font-size:10px}
.surface-point{font-size:10px}
.surface-point.local{font-size:11px}
.credit{font-size:8px}

/* Popup copy follows the same larger, consistent DM Mono scale. */
.sheet>small,
.person em,
.roles h3,
.people-section>h3,
.about-contacts small{font-size:10px}
.sheet p{font-size:14px;line-height:1.72}
.about-contacts span,
.team-sheet .contributions li{font-size:12px;line-height:1.55}
.challenge-archive,
.popup-collaborate{font-size:11px}
.site-loader .loader-copy span{font-size:10px}

@media(max-width:700px){
  /* A single dependable reading scale on phones. The planet copy remains
     compact enough to stay within Jupiter while no longer feeling miniature. */
  .message small{font-size:14px}
  .message p{font-size:14px;line-height:1.54}
  .jupiter-date{font-size:14px}
  .city-story li{font-size:15px;line-height:1.72}
  .city-story li.global-note{font-size:14px;line-height:1.68}

  .opening-actions a,.opening-actions .opening-calendar,
  .collaborate-button,.mission-dock-button{font-size:11px!important}
  .jupiter .planet-switcher b,
  .jupiter .jupiter-sound-hint,
  .moon .sound-hint,
  .scroll-cue,.moon-instruction{font-size:10px}
  .surface-point,.surface-point.local{font-size:10px}

  .sheet>small,.person em,.roles h3,
  .people-section>h3,.about-contacts small{font-size:10px}
  .sheet p{font-size:14px;line-height:1.72}
  .about-contacts span,
  .team-sheet .contributions li{font-size:12px;line-height:1.58}
  .challenge-archive,.popup-collaborate{font-size:11px}
}

/* The three primary event actions form one compact, fixed launch dock. */
@media(min-width:701px){
  .opening-actions{
    position:fixed;
    left:16px;
    right:auto;
    top:auto;
    bottom:16px;
    width:192px;
    gap:6px;
    transform:none;
  }
  .opening-actions a{
    width:192px;
    min-width:192px;
    min-height:36px;
    padding:9px 12px;
    font-size:10px;
  }
  /* Keep the editorial routes beside, rather than beneath, the launch dock. */
  .mission-dock{left:220px}
}

/* The arrow is the only sound instruction. The old pills beside the planets
   are deliberately removed for every selectable planet and for the Moon. */
.jupiter-sound-hint,.moon .sound-hint{display:none!important}
.jupiter .planet-tools{gap:0}

@media(max-width:700px){
  /* Preserve the established spacious mobile chapter instead of pinning a
     large stack over the artwork. */
  .opening-actions{
    position:absolute;
    left:50%;
    right:auto;
    top:calc(82svh - 172px);
    bottom:auto;
    width:min(86vw,380px);
    gap:16px;
    transform:translateX(-50%);
  }
  .opening-actions a,.opening-actions .opening-calendar{
    width:100%;
    min-width:0;
    min-height:48px;
    padding:12px 14px;
    font-size:11px!important;
  }
}

/* Unified bottom-left mission dock: every destination uses the same geometry
   and dark planetary material. Register remains the single highlighted action;
   restrained accent rails distinguish the supporting routes. */
@media(min-width:701px){
  .opening-actions,.mission-dock{width:196px;gap:7px}
  .opening-actions{left:16px;bottom:16px}
  .mission-dock{left:220px;bottom:16px}
  .opening-actions a,.mission-dock-button{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:196px;
    min-width:196px;
    min-height:38px;
    padding:10px 13px;
    overflow:hidden;
    border:1px solid #ffe6d078;
    border-radius:3px;
    color:#fff7ed;
    background:linear-gradient(135deg,#3b2022e8,#21161be8 72%);
    box-shadow:inset 0 1px #fff3e22e,0 9px 22px #08060752;
    backdrop-filter:blur(13px) saturate(1.12);
    -webkit-backdrop-filter:blur(13px) saturate(1.12);
    font:800 11px/1 DMMono;
    letter-spacing:.085em;
    text-align:center;
    text-transform:uppercase;
  }
  .opening-actions a:after,.mission-dock-button:after{
    content:'';
    position:absolute;
    left:0;
    top:8px;
    bottom:8px;
    width:2px;
    background:var(--dock-accent,#f0b196);
    opacity:.78;
  }
  .opening-waitlist{--dock-accent:#91dbc1}
  .opening-calendar{--dock-accent:#b8d8ee}
  .mission-dock-button:nth-child(1){--dock-accent:#f0a486}
  .mission-dock-button:nth-child(2){--dock-accent:#9ccbe6}
  .mission-dock-button:nth-child(3){--dock-accent:#e6cf9c}
  .mission-dock-button:nth-child(4){--dock-accent:#a6d8bd}
  .mission-dock-button.local-route{
    border-color:#ffe6d078;
    background:linear-gradient(135deg,#3b2022e8,#21161be8 72%);
  }
  .opening-register{
    --dock-accent:#fff1dc;
    border-color:#ffd9b8d9!important;
    background:linear-gradient(110deg,#aa4f43f2,#d57660ee 58%,#dc9366ee)!important;
    box-shadow:inset 0 1px #fff4e67a,0 10px 26px #16090966!important;
  }
  .opening-actions a:hover,.opening-actions a:focus-visible,
  .mission-dock-button:hover,.mission-dock-button:focus-visible{
    border-color:#fff0dfb8;
    background:linear-gradient(135deg,#543033ef,#2b1b21ef 72%);
    transform:translateY(-1px);
  }
  .mission-dock-button.local-route:hover,.mission-dock-button.local-route:focus-visible{
    background:linear-gradient(135deg,#543033ef,#2b1b21ef 72%);
  }
}

/* The switcher is a primary control, so its label matches the surrounding
   event statement rather than reading like metadata. */
.jupiter .planet-switcher{
  min-height:44px;
  padding:5px 8px;
  gap:4px;
}
.jupiter .planet-switcher b{
  min-width:104px;
  font-size:17px;
  letter-spacing:.045em;
}
.jupiter .planet-switcher button{
  width:30px;
  height:30px;
  font-size:18px;
}

@media(max-width:700px){
  /* Both mobile action groups use the same full-width component scale while
     remaining in their non-obstructive chapters. */
  .opening-actions,.mission-dock{width:min(86vw,380px)}
  .mission-dock{
    left:50%;
    grid-template-columns:1fr;
    transform:translateX(-50%);
  }
  .opening-actions a,.opening-actions .opening-calendar,
  .mission-dock-button{
    width:100%;
    min-width:0;
    min-height:48px!important;
    font-size:11px!important;
  }
  .mission-dock-button.local-route{
    border-color:#fff1dc69;
    background:#2f1a1bc7;
  }
  .jupiter .planet-switcher{
    min-height:40px;
    padding:5px 7px;
    gap:3px;
  }
  .jupiter .planet-switcher b{min-width:88px;font-size:14px}
  .jupiter .planet-switcher button{width:28px;height:28px;font-size:17px}
}

/* Planet selector: it belongs to the world currently in view instead of to a
   generic UI layer. Its type stays in the same DM Mono voice as the planet copy. */
.jupiter .planet-switcher{
  color:#fff4df;
  border-color:#f5c07fbc;
  background:linear-gradient(135deg,#a25b35ee 0%,#6d3528ed 55%,#351b20f0 100%);
  box-shadow:inset 0 1px #ffe9c276,inset 0 -1px #3413159a,0 10px 26px #18090860;
}
.jupiter .planet-switcher b{
  color:inherit;
  font-family:DMMono,monospace;
  font-weight:800;
}
.jupiter .planet-switcher button{color:inherit}
.jupiter .planet-switcher button:hover,.jupiter .planet-switcher button:focus-visible{
  color:#3a1a18;
  background:#ffe0ac;
}
.jupiter .planet-switcher[data-planet="saturn"]{
  color:#fff4dc;
  border-color:#e9d0a1c2;
  background:linear-gradient(135deg,#aa8c69ee 0%,#71604eea 52%,#39353af0 100%);
  box-shadow:inset 0 1px #fff7db78,inset 0 -1px #26242a9a,0 10px 26px #100f1560;
}
.jupiter .planet-switcher[data-planet="saturn"] b{color:#fff4dc}
.jupiter .planet-switcher[data-planet="saturn"] button:hover,
.jupiter .planet-switcher[data-planet="saturn"] button:focus-visible{
  color:#3d3129;
  background:#fff0cf;
}

/* The tower chapter is written in the exact same voice as Jupiter's invitation. */
.city-story,.city-story li,.city-story a,.city-story strong{
  font-family:DMMono,monospace;
}
.city-story li{font-weight:700;letter-spacing:.012em}
.city-story a{font-weight:800}

/* One ink across the experience. Surfaces become lighter where necessary so
   the text can remain consistently readable rather than changing colour by section. */
.relay{--app-ink:#152b32;color:var(--app-ink)}
.message,.message small,.message p,.message strong,
.jupiter-date,.city-story,.city-story li,.city-story a,.city-story strong,
.planet-switcher,.planet-switcher b,.planet-switcher button,
.opening-actions a,.mission-dock-button,
.scroll-cue,.sound-guide,.moon-instruction,.credit,
.surface-point,.surface-point>span,
.sheet,.sheet>small,.sheet h2,.sheet p,
.person,.person b,.person em,.people-section>h3,.roles h3,.roles p,
.about-contacts small,.about-contacts span,.contributions li,
.challenge-archive,.popup-collaborate{color:var(--app-ink)!important}

.message{color:var(--app-ink);text-shadow:0 1px 20px #f5f2e7,0 0 34px #f5f2e7}
.city-story a{border-color:#152b3270!important}

.opening-actions a,.mission-dock-button{
  border-color:#152b3273!important;
  background:linear-gradient(135deg,#f7eee2e8,#dfd1c2e5 72%)!important;
  box-shadow:inset 0 1px #fff9,0 9px 22px #08060736!important;
}
.opening-register{
  border-color:#9a4c42a8!important;
  background:linear-gradient(135deg,#f6b28fef,#de816ae9 68%,#c86459e8)!important;
}
.opening-actions a:hover,.opening-actions a:focus-visible,
.mission-dock-button:hover,.mission-dock-button:focus-visible,
.mission-dock-button.local-route:hover,.mission-dock-button.local-route:focus-visible{
  background:linear-gradient(135deg,#fff8eeeF,#e9d9c8ec 72%)!important;
  border-color:#152b32ad!important;
}

.jupiter .planet-switcher{
  color:var(--app-ink)!important;
  border-color:#152b3292;
  background:linear-gradient(135deg,#efc19eeF,#d28265ea 54%,#b95e55e7)!important;
  box-shadow:inset 0 1px #fff3df92,inset 0 -1px #79352e74,0 10px 26px #18090845;
}
.jupiter .planet-switcher[data-planet="saturn"]{
  background:linear-gradient(135deg,#f0d7a8ef,#c9a875e9 54%,#95826fe8)!important;
}
.jupiter .planet-switcher button:hover,.jupiter .planet-switcher button:focus-visible,
.jupiter .planet-switcher[data-planet="saturn"] button:hover,
.jupiter .planet-switcher[data-planet="saturn"] button:focus-visible{
  color:var(--app-ink)!important;
  background:#fff8e9!important;
}

.surface-point>span{
  border-color:#152b3273!important;
  background:linear-gradient(135deg,#f5ede2ef,#ddd0c2eb 70%)!important;
  box-shadow:inset 0 1px #fff9,inset 0 -1px #71625747,0 12px 28px #02090d42!important;
}
.surface-point.local>span{
  background:linear-gradient(135deg,#f6b493ef,#df816ae9 58%,#c6655be7)!important;
  border-color:#9a4c42a8!important;
}
.surface-point.register>span{
  color:var(--app-ink)!important;
  background:linear-gradient(135deg,#f6b493ef,#df816ae9 58%,#c6655be7)!important;
}
.moon-instruction,.scroll-cue,.sound-guide{color:var(--app-ink)!important;text-shadow:0 1px 12px #f5f2e7}
.sound-guide i,.scroll-cue i{background:linear-gradient(90deg,transparent,#152b32,transparent)!important}
.sound-guide i:before{border-color:var(--app-ink)!important}

.credit{background:#f4ecdfd9;color:var(--app-ink)!important}
.sheet{
  color:var(--app-ink)!important;
  background:linear-gradient(145deg,#f5e7d7f5,#ddbda7ec 55%,#c97766e8)!important;
  border-color:#152b3263!important;
  box-shadow:0 38px 110px #02090d85,inset 0 1px #fff8!important;
}
.sheet>button{color:var(--app-ink)!important;background:#fff3e5d9!important;border-color:#152b3273!important}
.person,.about-contacts a,.roles div{
  color:var(--app-ink)!important;
  border-color:#152b3245!important;
  background:#fff5e699!important;
}
.person:hover,.about-contacts a:hover{background:#fffaf0d9!important;border-color:#152b3270!important}
.challenge-archive,.popup-collaborate,.collaborate-button{
  color:var(--app-ink)!important;
  border-color:#152b3286!important;
  background:linear-gradient(135deg,#f8c3a5ee,#e58b73e9 60%,#d16c60e8)!important;
}

/* Official NASA Space Apps typography: Overpass is the one brand family that
   is approved for both headings and body copy, so the complete interface now
   speaks with one consistent voice. The supplied logo remains untouched artwork. */
@font-face{font-family:SpaceApps;src:url('/assets/fonts/overpass-regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:SpaceApps;src:url('/assets/fonts/overpass-italic.ttf') format('truetype');font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:SpaceApps;src:url('/assets/fonts/overpass-bold.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:SpaceApps;src:url('/assets/fonts/overpass-extrabold.ttf') format('truetype');font-style:normal;font-weight:800 900;font-display:swap}

html,body,button,input,textarea,select,
.site-loader,.site-loader *,
.relay,.relay *{font-family:SpaceApps,Arial,sans-serif!important}

/* Overpass has a more compact natural x-height than the former display serif. */
.message h1{font-weight:800!important;line-height:.82;letter-spacing:-.055em}
.message h1 em{font-family:SpaceApps,Arial,sans-serif!important;font-weight:400!important}
.sheet h2,.person b,.roles p,.sponsor-copy strong{font-family:SpaceApps,Arial,sans-serif!important}

/* The selected planet is the colour source for every interactive surface. */
.relay{
  --planet-surface:linear-gradient(135deg,#efc19eef 0%,#d28265ea 54%,#b95e55e7 100%);
  --planet-surface-highlight:linear-gradient(135deg,#ffd2a8f2 0%,#ec9674ed 56%,#cf665be9 100%);
  --planet-surface-hover:linear-gradient(135deg,#f8d2adef 0%,#e29a79ed 56%,#c9655ee9 100%);
  --planet-border:#713c36b8;
  --planet-inset:#fff3df92;
  --planet-popup:linear-gradient(145deg,#f6dfcbf5,#e3aa88ed 55%,#c87568e9);
  --planet-popup-card:#fff1e3ae;
  --planet-popup-line:#bd6657;
}
body.planet-saturn .relay{
  --planet-surface:linear-gradient(135deg,#f0d7a8ef 0%,#c9a875e9 54%,#95826fe8 100%);
  --planet-surface-highlight:linear-gradient(135deg,#fff0c9f2 0%,#dec28ced 56%,#aa9477e9 100%);
  --planet-surface-hover:linear-gradient(135deg,#f9e5bbef 0%,#d6b57de9 56%,#9c8873e9 100%);
  --planet-border:#64594eb8;
  --planet-inset:#fff7db8c;
  --planet-popup:linear-gradient(145deg,#f7e8c9f5,#d5bd90ed 55%,#a99479e9);
  --planet-popup-card:#fff7e4b5;
  --planet-popup-line:#9a856b;
}

/* Supporting actions carry the active planet colour, but stay matte so only
   the Register action reads as illuminated. */
.relay{--planet-surface-muted:#cd7d6b}
body.planet-saturn .relay{--planet-surface-muted:#aa9578}
.opening-actions a:not(.opening-register){background:var(--planet-surface-muted)!important}

.jupiter .planet-switcher,
.jupiter .planet-switcher[data-planet="saturn"],
.opening-actions a,.mission-dock-button,
.surface-point>span,
.challenge-archive,.popup-collaborate,.collaborate-button{
  border-color:var(--planet-border)!important;
  background:var(--planet-surface)!important;
  box-shadow:inset 0 1px var(--planet-inset),inset 0 -1px #3d1e1c42,0 10px 26px #18090842!important;
}
.opening-register,.surface-point.local>span,.surface-point.register>span{
  background:var(--planet-surface-highlight)!important;
}
.opening-actions a:hover,.opening-actions a:focus-visible,
.mission-dock-button:hover,.mission-dock-button:focus-visible,
.mission-dock-button.local-route:hover,.mission-dock-button.local-route:focus-visible,
.challenge-archive:hover,.popup-collaborate:hover,.collaborate-button:hover{
  border-color:var(--planet-border)!important;
  background:var(--planet-surface-hover)!important;
}

/* The opening actions are now pure type: no decorative squares or symbols. */
.opening-actions a span:before{content:none!important;display:none!important}

/* Register is the only primary action with an animated light pass. The pass is
   contained by the button itself (rather than its section), so it can never
   escape into adjacent mobile actions. */
.opening-register{
  position:relative!important;
  isolation:isolate;
  overflow:hidden;
  overflow:clip;
  contain:paint;
}
.opening-register::before{
  content:'';
  position:absolute;
  z-index:0;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(112deg,transparent 39%,#fff6cab0 47%,#ffd46bd4 51%,#fff8d4a6 55%,transparent 63%);
  background-size:260% 100%;
  background-position:155% 0;
  animation:register-gold-sheen 1s ease-in-out infinite;
  pointer-events:none;
}
.opening-register span{position:relative;z-index:1}
@keyframes register-gold-sheen{
  0%,18%{background-position:155% 0;opacity:0}
  28%{opacity:.78}
  62%{background-position:-55% 0;opacity:.78}
  76%,100%{background-position:-55% 0;opacity:0}
}

/* The tower narrative and first three actions sit directly on the artwork—no
   floating shade or drop-shadow treatment. */
.city-story,.city-story li,.city-story a,.city-story strong{ text-shadow:none!important }
.opening-actions a,.opening-actions a:hover,.opening-actions a:focus-visible{
  text-shadow:none!important;
  box-shadow:none!important;
}

/* The full tower narrative is one unified editorial voice. */
.city-story,.city-story li,.city-story li *,
.city-story a,.city-story strong{color:var(--app-ink)!important}
.city-story li{font-size:16px;line-height:1.7}
.city-story li.global-note{font-size:15px;line-height:1.68}
.collaborate-button:before{content:none!important;display:none!important}
@media(max-width:700px){
  .city-story li{font-size:16px;line-height:1.74}
  .city-story li.global-note{font-size:15px;line-height:1.7}
}

/* Popups participate in the same selected-planet palette. */
.sheet{
  border-color:var(--planet-border)!important;
  background:var(--planet-popup)!important;
}
.sheet h2:after{background:linear-gradient(90deg,var(--planet-popup-line),#fff3df 68%,transparent)!important}
.sheet>button{
  border-color:var(--planet-border)!important;
  background:var(--planet-surface-highlight)!important;
}
.person,.about-contacts a,.roles div{
  border-color:var(--planet-border)!important;
  background:var(--planet-popup-card)!important;
}
.person:hover,.about-contacts a:hover{background:#fff9efcf!important}

/* No decorative diamonds, stars, or square glyphs inside calls to action. */
.surface-point.register>span:before,
.popup-collaborate:before{content:none!important;display:none!important}

/* The Local Lead contact route is compact and exactly label-height. */
.about-contacts{grid-template-columns:1fr!important}
.team-sheet .person .person-role{
  display:flex!important;
  align-items:center;
  gap:7px;
  height:14px;
  margin-top:7px;
}
.team-sheet .person .person-role em,
.team-sheet .person .person-contact{
  display:inline-flex!important;
  align-items:center;
  height:14px;
  margin:0;
  padding:0;
  font:800 10px/14px SpaceApps,Arial,sans-serif!important;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.team-sheet .person .person-contact{
  padding:0 5px;
  border:1px solid var(--planet-border);
  border-radius:2px;
  color:var(--app-ink)!important;
  background:#fff7e1a8;
  text-decoration:none;
}
.team-sheet .person .person-contact:hover,.team-sheet .person .person-contact:focus-visible{
  background:var(--planet-surface-highlight);
  outline:0;
}

/* Phone layout is deliberately spacious: each chapter gets its own vertical
   field, so longer event copy can never drift into the tower or Moon artwork. */
@media(max-width:700px){
  .relay{height:calc(540svh + min(100vw,72svh));min-height:0}
  .city-story{top:calc(130svh - 24px)}
  .city-stage{top:255svh;height:118svh}
  .cue-city{top:calc(255svh - 72px)}
  .moon{top:calc(405svh + 14svh)}
  .mission-dock{top:calc(475svh + min(100vw,72svh))}
}

/* Short phones keep the planet control, action stack, and scroll cue in
   distinct bands rather than compressing them into the lower edge of Jupiter. */
@media(max-width:700px) and (max-height:650px){
  .opening-actions{top:calc(82svh - 150px)}
  .cue-intro{top:calc(82svh + 150px)}
}

/* Golden light is reserved exclusively for the primary Register action. */
.opening-actions a:not(.opening-register)::before,
.mission-dock-button::before,
.surface-point::before,
.challenge-archive::before,
.popup-collaborate::before,
.collaborate-button::before{content:none!important;display:none!important;animation:none!important}
.opening-register::before{animation:register-gold-sheen 1s ease-in-out infinite!important}

/* Planets are tactile artwork, not selectable text. Avoid browser selection
   paint and the default blue focus rectangle after a planet is pressed. */
.jupiter,.moon,.jupiter *,.moon *{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}
.jupiter:focus,.jupiter:focus-visible,.moon:focus,.moon:focus-visible{
  outline:none!important;
  box-shadow:none!important;
}
.jupiter::selection,.moon::selection,
.jupiter *::selection,.moon *::selection{
  color:inherit;
  background:transparent;
}

/* On phones every route follows Jupiter in one continuous action column. */
@media(max-width:700px){
  .jupiter .mission-dock{
    position:absolute;
    z-index:18;
    top:calc(82svh + 56px);
    left:50%;
    bottom:auto;
    width:min(86vw,380px);
    grid-template-columns:1fr;
    gap:12px;
    transform:translateX(-50%);
  }
  .jupiter .cue-actions{
    position:absolute;
    z-index:19;
    top:calc(82svh + 310px);
    left:50%;
    display:flex;
    align-items:center;
    transform:translateX(-50%);
  }
  .city-story{top:calc(150svh - 24px)}
}
@media(max-width:700px) and (max-height:650px){
  .city-story{top:calc(170svh - 24px)}
  .city-stage{top:335svh}
  .cue-city{top:calc(335svh - 72px)}
  .moon{top:calc(470svh + 14svh)}
}

/* Compact/portrait desktop windows (including 4:3 tablets) use the same
   three-chapter reading path as phones. Width alone is not enough: a tall
   viewport leaves too little lateral room for the desktop side-by-side story. */
@media (min-width:701px) and (max-aspect-ratio:7/5){
  .relay{height:calc(540svh + min(100vw,72svh));min-height:0}

  .logo{left:49.2%;top:2.5svh;width:clamp(280px,24vw,430px);transform:translateX(-50%)}
  .jupiter{left:0;top:18svh;width:100vw;height:min(100vw,68svh)}
  .moon{left:0;right:auto;top:calc(405svh + 14svh);width:100vw;height:min(100vw,72svh)}

  .message{left:50%;top:21%;width:min(72vw,620px);transform:translateX(-50%);text-align:center}
  .message p,.message p+p{margin-left:auto;margin-right:auto}
  .message small{font-size:clamp(14px,1.15vw,18px)}
  .message h1{font-size:clamp(88px,8.6vw,142px)}
  .message p{font-size:clamp(15px,1.12vw,19px)}
  .jupiter-date{bottom:15%;font-size:clamp(14px,1.1vw,18px)}

  .opening-actions{
    position:absolute;left:50%;right:auto;top:calc(92svh + 48px);bottom:auto;
    width:min(86vw,400px);grid-template-columns:1fr;gap:16px;transform:translateX(-50%);
  }
  .opening-actions a,.opening-actions .opening-calendar{
    width:100%;min-width:0;min-height:48px;padding:12px 14px;font-size:12px!important;
  }
  .jupiter .mission-dock{
    position:absolute;z-index:18;left:50%;right:auto;top:calc(92svh + 308px);bottom:auto;
    width:min(86vw,400px);grid-template-columns:1fr;gap:12px;transform:translateX(-50%);
  }
  .jupiter .cue-actions{position:absolute;z-index:19;left:50%;top:calc(92svh + 560px);display:flex;transform:translateX(-50%)}
  .mission-dock-button{width:100%;min-height:48px;padding:12px 14px;font-size:12px!important}

  .sound-guide{left:7vw;right:auto;top:42svh;transform:translateY(8px)}
  .sound-guide.visible{transform:translateY(0)}
  .sound-guide.dismissed{transform:translateY(8px)}
  .cue-intro{left:auto;right:7vw;top:72svh;transform:none}

  .city-stage{top:255svh;height:118svh;width:100%}
  .city-stage>img,.future-window img{object-fit:contain;object-position:center calc(50% + 12svh)}
  .city-stage .reveal-line{width:min(100%,86.25vh);opacity:.55}
  .city-story{
    left:50%;right:auto;top:calc(165svh - 24px);width:min(84vw,620px);padding:0;
    transform:translateX(-50%);background:none!important;border:0!important;
    border-radius:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  }
  .city-story ul{grid-template-columns:1fr;gap:clamp(30px,4.7vh,48px)}
  .city-story li{padding-left:0;font-size:clamp(16px,1.18vw,20px);line-height:1.72}
  .city-story li:before{content:none}
  .city-story li.global-note{font-size:clamp(15px,1.05vw,18px);line-height:1.68}
  .cue-city{top:calc(255svh - 72px)}
}

/* Wide desktop already exposes the whole opening composition at once; the
   introductory scroll cue is redundant there. The vertical journey retains it. */
@media (min-width:701px) and (min-aspect-ratio:7/5){
  .cue-intro{display:none!important}
}

/* Performance pass: the sheets retain their Mars-glass colour treatment via
   layered gradients, but avoid re-blurring animated WebGL canvases underneath. */
.sheet,.sheet>button,.team-sheet .person,.team-sheet .about-contacts a{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.sheet{contain:layout paint;overscroll-behavior:contain}
.team-sheet .people-section{content-visibility:auto;contain-intrinsic-size:auto 340px}
@media(prefers-reduced-motion:reduce){
  .planet-shader{display:none!important}
}

/* Keep the mobile selector below the event date without changing the date
   placement. The instrument can float just beyond Jupiter's lower edge. */
@media(max-width:700px){
  .jupiter .planet-tools{bottom:-22px}
}


/* Local challenges are a short, readable sequence rather than one dense block. */
.local-details{display:grid;gap:18px;margin:20px 0 28px}
.local-details p{margin:0}

/* Lunar destinations are navigation, not decoration. Keep the active station
   controls above the scrolling city chapter for the entire Moon scene. */
.moon .surface-points{z-index:30;isolation:isolate}
.moon .surface-point[data-hidden="false"]{z-index:1;pointer-events:auto;touch-action:manipulation}
.moon .surface-point>span{pointer-events:none}
.moon .surface-point>i{pointer-events:none}

/* The Jupiter-level scroll cue below the planet selector is the sole opening
   wayfinding cue. Never duplicate it above the planet on compact screens. */
.cue-intro{display:none!important}

/* Place the only opening scroll control after the planet selector—never in the
   logo field. This applies to all desktop/tablet aspect ratios. */
@media(min-width:701px){
  .jupiter .cue-actions{
    position:absolute;z-index:19;left:50%;top:auto;bottom:-50px;
    display:grid;transform:translateX(-50%);
  }
}

/* The persistent desktop dock belongs above every scroll chapter. Its parent
   previously formed a lower stacking context, so Moon's WebGL layer swallowed
   clicks after users reached the final chapter. Keep the opening scene itself
   untouched while lifting only that desktop stacking context. */
@media(min-width:701px){
  .jupiter{z-index:50}
  .opening-actions,.mission-dock{z-index:80}
}

/* Dialogs are the foremost interaction layer. They must eclipse the persistent
   navigation dock and every WebGL planet while a page is open. */
.sheet{z-index:200}

/* Keep the Local Lead contact action legible as a distinct companion control. */
.team-sheet .person .person-role{gap:14px}

/* The manifesto is authored content, rendered directly in the site rather than
   an embedded Google document, so it remains crisp, fast, and on-palette. */
.document-sheet .manifesto-content{
  display:grid;
  gap:clamp(18px,2.6vh,30px);
  height:calc(100% - 54px);
  overflow:auto;
  margin-top:0;
  padding:clamp(18px,3vw,34px);
  border:1px solid var(--planet-border);
  border-radius:12px;
  color:var(--app-ink);
  background:linear-gradient(145deg,#fff5e9d4,#e7b9a6b8);
  box-shadow:inset 0 1px #fff9;
  scrollbar-color:#a65c4f transparent;
  scrollbar-width:thin;
}
.document-sheet .manifesto-content p{
  max-width:78ch;
  margin:0;
  white-space:pre-line;
  font:600 clamp(13px,1vw,16px)/1.7 SpaceApps,DMMono,monospace;
  letter-spacing:.01em;
}
.document-sheet .manifesto-content p:last-child{padding-top:8px;font-weight:800}
@media(max-width:700px){
  .team-sheet .person .person-role{gap:12px}
  .document-sheet .manifesto-content{height:calc(100% - 48px);padding:20px 18px;gap:22px}
  .document-sheet .manifesto-content p{font-size:14px;line-height:1.68}
}