/* Line Goes Up. A night platform: ink-blue dark, tungsten windows, signal red. Every picture is a lit window onto somewhere else,
   and the page itself shifts tint as the light of each stop changes. No web fonts: system stacks only (the CSP allows none). */
:root{
 --ink:#0a0f1c;--paper:#f6efdc;--lamp:#ffc76a;--red:#e3502f;--gold:#ffc76a;--focus:#ffc76a;
 --ease-out:cubic-bezier(0.23,1,0.32,1);--ease-in-out:cubic-bezier(0.77,0,0.175,1);
 --bg:#0d1322;--fg:#efe7d4;--muted:#a9b2c2;--card:#141a29;--card-fg:#e9dfc6;--edge:rgba(255,199,106,.34);--halo:rgba(255,199,106,.16);
 --ui:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
 --sign:"Bahnschrift","DIN Alternate","Avenir Next Condensed","DIN Condensed","Arial Narrow",system-ui,-apple-system,"Segoe UI",sans-serif;
 --serif:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua","Noto Serif",serif;
 font-family:var(--ui);color-scheme:dark;-webkit-text-size-adjust:100%;text-size-adjust:100%}
*{box-sizing:border-box}html{scroll-padding-top:76px}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--ui);line-height:1.5;transition:background-color 900ms ease,color 900ms ease}
/* The documentary and its sister pages change light as you move (data-grade). Their colour lives on its own fixed layer, so a change of light fades one
   flat rectangle instead of repainting the page every frame. The text colour only ever changes at the top band, and it swaps once, half way through
   the fade, where the two colours cross anyway. The game (data-era) keeps the plain body fade above. */
html:has(body[data-grade]){background:#0d1322}
body[data-grade]{background:transparent;transition:color 0s linear 450ms}
body[data-grade]::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--bg);transition:background-color 900ms ease}
/* The page tints with the light of the stop or ride you are in. It stays dark everywhere except the top band. */
body[data-grade=lamp]{--bg:#0e1424}body[data-grade=sunrise]{--bg:#1c1428;--halo:rgba(255,200,140,.22)}body[data-grade=dawn]{--bg:#231825;--halo:rgba(255,200,140,.2)}body[data-grade=culture]{--bg:#141b36;--halo:rgba(190,205,255,.22)}
body[data-grade=white]{--bg:#f6f3ea;--fg:#1d2230;--muted:#5d6676;--focus:#1f3a8a;--edge:rgba(20,26,46,.35);--halo:rgba(255,255,255,0)}
body[data-grade=cold]{--bg:#0f1a26;--halo:rgba(200,220,240,.16)}body[data-grade=race]{--bg:#1c0a0a;--halo:rgba(255,120,60,.22)}body[data-grade=skynet]{--bg:#1c0c08;--halo:rgba(255,140,60,.22)}body[data-grade=goo]{--bg:#141715;--halo:rgba(200,205,200,.12)}
body[data-grade=market]{--bg:#0a1a12;--halo:rgba(120,240,150,.18)}body[data-grade=sable]{--bg:#0a140d;--halo:rgba(200,240,120,.18)}body[data-grade=hal]{--bg:#050505;--halo:rgba(255,60,40,.22)}body[data-grade=matrix]{--bg:#030b06;--halo:rgba(125,255,168,.2)}
body[data-grade=office]{--bg:#1b1812;--halo:rgba(255,230,180,.14)}body[data-grade=workshop]{--bg:#1d130a;--halo:rgba(255,190,110,.22)}body[data-grade=colossus]{--bg:#07181b;--halo:rgba(150,230,225,.2)}body[data-grade=chrome]{--bg:#1c1a10;--halo:rgba(255,240,170,.16)}
body[data-grade=owe]{--bg:#1a1521;--halo:rgba(255,190,160,.2)}body[data-grade=overcast]{--bg:#171b20;--halo:rgba(200,210,220,.12)}body[data-grade=screen]{--bg:#060b17;--halo:rgba(140,180,255,.2)}body[data-grade=sleeve]{--bg:#1d1620;--halo:rgba(255,200,190,.16)}
body[data-grade=ward]{--bg:#19171d;--halo:rgba(255,240,250,.14)}body[data-grade=iris]{--bg:#100e22;--halo:rgba(200,170,255,.24)}body[data-grade=coral]{--bg:#261419;--halo:rgba(255,150,130,.22)}body[data-grade=day]{--bg:#10192b;--halo:rgba(255,230,160,.16)}body[data-grade=am]{--bg:#140303;--halo:rgba(255,70,50,.25)}
a{color:inherit;text-underline-offset:4px}a:hover{text-decoration-thickness:2px}
h1,h2,h3,h4{line-height:1.08;text-wrap:balance}
button,select{font:inherit}
button,select{min-height:44px;border:2px solid color-mix(in srgb,var(--fg) 60%,transparent);border-radius:999px;background:transparent;color:inherit;padding:.5rem 1.1rem;cursor:pointer;transition:transform 160ms var(--ease-out),background-color 150ms ease,border-color 150ms ease}
select{background:color-mix(in srgb,var(--bg) 80%,#000)}
button:active{transform:scale(.97)}button.primary,button[aria-pressed=true]{background:var(--lamp);border-color:var(--lamp);color:#1a1205;font-weight:700}button.quiet{border-color:transparent;text-decoration:underline;text-underline-offset:4px}
button:disabled{opacity:.5;cursor:not-allowed}
@media(hover:hover) and (pointer:fine){button:hover:not(.primary):not([aria-pressed=true]){background:color-mix(in srgb,var(--fg) 12%,transparent)}button.primary:hover{filter:brightness(1.08)}}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}button:focus-visible,select:focus-visible{border-radius:999px}
.skip{position:absolute;left:-999px;padding:13px 16px}.skip:focus{left:12px;top:12px;z-index:99;background:var(--paper);color:#141a2e}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.lgu-bar{position:fixed;inset:0 0 auto;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:10px 24px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid color-mix(in srgb,var(--fg) 14%,transparent)}
.wordmark{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding-inline:4px;font-family:var(--sign);font-weight:800;font-size:1.3rem;text-decoration:none;letter-spacing:.06em;text-transform:uppercase}.bar-tools{display:flex;gap:12px;align-items:center}.bar-tools label{display:flex;gap:8px;align-items:center;font-size:.85rem}.bar-tools select,.bar-tools button{min-height:40px;padding:.3rem .9rem;font-size:.88rem;white-space:nowrap}

/* The altitude meter. */
.meter{position:fixed;left:18px;top:84px;bottom:28px;width:88px;z-index:40;pointer-events:none}
.meter-rail{position:absolute;left:14px;top:0;bottom:0;border-left:3px solid color-mix(in srgb,var(--lamp) 50%,transparent)}
.meter-band{position:absolute;left:28px;transform:translateY(50%);font-family:var(--sign);font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.meter-band::before{content:"";position:absolute;left:-28px;top:50%;width:20px;border-top:3px solid color-mix(in srgb,var(--lamp) 50%,transparent)}
.meter-pins{display:flex;gap:3px;margin-top:4px}.meter-pin{font-style:normal;font-size:.62rem;font-weight:800;padding:1px 4px;border-radius:3px;letter-spacing:0;line-height:1.25}.meter-pin.cond{background:#c23a1f;color:#fff}.meter-pin.survey{background:transparent;color:var(--fg);border:1.5px dashed currentColor;padding:0 3px}
.meter-train{position:absolute;left:-19px;bottom:calc(var(--alt,0)*100%);width:40px;height:9px;transform:translateY(50%);filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}.meter-train svg{width:100%;height:100%;display:block}

main{margin-left:150px;padding-top:40px}
.stop{padding:5vh 32px 2vh;position:relative}.stop-c9,.stop-home{min-height:100vh}
/* A stop that is off screen costs nothing: the browser skips its style, layout and paint until it is near the viewport, and remembers its real size after the first visit. */
.stop:where(:not(.stop-c0):not(.stop-home)){content-visibility:auto;contain-intrinsic-block-size:auto 1200px}.stop-c9{contain-intrinsic-block-size:auto 1950px}
/* A link that lands on a stop (a #c9 from the timetable, a ride's address) is laid out with every stop's real size, so the page does not shift as the stops next to it wake up. */
body:has(:target) .stop{content-visibility:visible}
.stop-c0{padding-top:72px;min-height:0}
.title-card{text-align:center;margin:0 auto 3vh;max-width:1100px}.title-card h1{font-size:clamp(3.2rem,8vw,6.4rem);line-height:.92;margin:0;letter-spacing:-.04em;font-weight:900}.title-card p{font-size:clamp(1.05rem,2.2vw,1.5rem);margin:1.1rem 0 0;color:var(--muted)}.title-card .length{font-size:.95rem;margin:.9rem auto 0;max-width:38em}
.stop-head{max-width:1000px;margin:0 auto 22px}.stop-head span{font-family:var(--sign);font-size:.82rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--lamp)}.stop-head h2{font-size:clamp(2.2rem,5vw,4rem);margin:.3rem 0 0;letter-spacing:-.03em}
body[data-grade=white] .stop-head span{color:#8a5a00}
.stage{max-width:min(1000px,calc((100vh - 290px)*1.786));min-width:min(100%,560px);margin:0 auto}

/* Pictures are lit windows: a dark frame, a thin tungsten edge, a halo in the light of the stop, and a little reflection. */
.lgu-panel,.strip-panel{position:relative;margin:0;overflow:hidden;border-radius:16px;background:#05080f;transform:rotate(var(--tilt,0deg));
 box-shadow:0 0 0 3px #05080f,0 0 0 5px var(--edge),0 26px 50px -16px rgba(0,0,0,.7),0 0 90px -26px var(--halo)}
.lgu-panel::after,.strip-panel::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(112deg,rgba(255,255,255,.07) 0,rgba(255,255,255,0) 26%)}
.lgu-panel svg,.strip-panel svg{display:block;width:100%;height:auto}

/* The narrator's card sits under the picture and never on it. */
.dialogue{position:relative;z-index:2;max-width:780px;margin:26px auto 0;background:var(--card);color:var(--card-fg);border:1px solid var(--edge);border-top:3px solid var(--lamp);border-radius:4px 4px 10px 10px;box-shadow:0 14px 34px -14px rgba(0,0,0,.7);padding:22px 28px;font-family:var(--serif);font-size:clamp(1.05rem,1.6vw,1.25rem);line-height:1.55}
.dialogue p{margin:0 0 .75em}.dialogue p:last-child{margin-bottom:0}.narrator{font-style:italic;color:#f7eed8}
.voice b{font-family:var(--sign);letter-spacing:.1em;font-size:.82em;margin-right:6px}.voice i{font-family:var(--ui);font-style:normal;font-size:.7em;opacity:.78;margin-right:4px}
.v-hype b{color:#ff8a3d}.v-dread b{color:#f0584c}.v-hope b{color:#f0c058}.v-forecaster b{color:#8db4f0}.v-sci-fi b{color:#bf9cf5}.v-scale b{color:#7fd6c8}.v-market b{color:#6fd48a}.v-pigeon b{color:#b4bcc8}

.act{max-width:780px;margin:22px auto 0;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}.act-label{font-size:.85rem;font-weight:700;color:var(--muted);margin-right:4px}
/* Controls are filled in by script. Until it runs they keep their space but stay hidden, so the page never jumps. */
.act[hidden]{display:flex!important;visibility:hidden}.picks[hidden]{display:block!important;visibility:hidden}
.act label{display:flex;flex-direction:column;gap:6px;font-size:.8rem;font-weight:700}.act select{border-radius:8px;min-width:90px}
.act-status{max-width:640px;margin:14px auto 0;text-align:center;min-height:3em;font-size:1.02rem}
.tally{display:flex;justify-content:center;gap:clamp(18px,5vw,60px);margin:20px auto 0}.tally div{text-align:center}.tally dt{font-size:.78rem;color:var(--muted)}.tally dd{margin:4px 0 0;font-size:2rem;font-weight:800;font-variant-numeric:tabular-nums}
.pin-cards{max-width:640px;margin:16px auto 0}.pin-card{background:color-mix(in srgb,var(--fg) 8%,transparent);border-left:4px solid var(--red);padding:14px 18px}.pin-card h3{margin:0 0 6px;font-size:1.05rem}.pin-card p{margin:.3rem 0;line-height:1.5}.small{font-size:.86rem;color:var(--muted)}.center{text-align:center}
.fine-print{max-width:780px;margin:22px auto 0;font-size:.9rem;color:var(--muted);line-height:1.55}.fine-print summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}.fine-print ul{padding-left:18px;list-style-position:outside}.fine-print li{margin:0}

/* Summit Junction: the departure board. */
.junction-board{max-width:1000px;margin:28px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;background:#090d18;border:3px solid #05080f;border-radius:10px;padding:18px;box-shadow:0 0 0 2px var(--edge),0 26px 50px -16px rgba(0,0,0,.7)}
.junction-board h3{margin:0 0 10px;color:var(--lamp);font-family:var(--sign);font-size:.82rem;letter-spacing:.16em;text-transform:uppercase}.junction-board ul{list-style:none;margin:0;padding:0}.junction-board li{background:#141b2e;margin:0 0 6px;padding:0;border-radius:3px;display:flex;flex-direction:column}
.junction-board li>span{padding:8px 10px;color:#f4ead3;font-weight:700;font-size:.92rem}.junction-board li small{color:#8f9ab3;font-size:.72rem}
.junction-board li a{display:flex;flex-direction:column;gap:3px;padding:8px 10px;text-decoration:none;min-height:44px}.junction-board li a>span{color:#f4ead3;font-weight:700;font-size:.92rem;line-height:1.2}
.junction-board .teaser{font-family:var(--serif);font-style:italic;font-size:.8rem;line-height:1.3;color:#b9c2d8}
.junction-board .stamp{font-family:var(--sign);text-transform:uppercase;letter-spacing:.12em;font-size:.66rem;font-weight:800;color:#7fd6a8}.junction-board .stamp[hidden]{display:none}
.junction-board .plat{display:inline-grid;place-items:center;min-width:1.6em;height:1.6em;margin-right:6px;border-radius:3px;background:var(--lamp);color:#101a1a;font-family:var(--sign);font-size:.8rem;font-weight:850}
.junction-board li.ridden{background:#14251f}
/* The four lines are colour-coded groups: scenarios gold, fiction red, thought experiments violet, hope green. Each says how many rides it holds and, once you have ridden some, how many you have. */
.junction-board .line{--line-c:var(--lamp);border-top:4px solid var(--line-c);padding-top:8px}.junction-board .line-fiction{--line-c:#f0584c}.junction-board .line-thought-experiment{--line-c:#bf9cf5}.junction-board .line-hope{--line-c:#6fd48a}
.junction-board h3{display:flex;justify-content:space-between;align-items:baseline;gap:8px;color:var(--line-c)}.junction-board .count{font-size:.68rem;letter-spacing:.06em;color:var(--muted);font-weight:700;white-space:nowrap}
.junction-board .plat{background:var(--line-c)}
.junction-board li a.picked{outline:3px solid var(--lamp);outline-offset:-3px;background:#1d2742}.pigeon-pick{justify-content:center;margin-top:20px}.act-status.center{text-align:center}
@media(hover:hover) and (pointer:fine){.junction-board li a:hover{background:#1d2742}}

.home-stage{max-width:1000px;margin:0 auto;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 0 0 3px #05080f,0 0 0 5px var(--edge),0 26px 50px -16px rgba(0,0,0,.7)}.home-stage svg{display:block;width:100%;height:auto}
body[data-motion=full] .home-track{height:340vh}
.head-home,.ride-back{font-weight:700}.head-home a,.door{display:inline-block;margin-top:14px;padding:.7rem 1.4rem;border:2px solid currentColor;border-radius:999px;text-decoration:none}
.credits{max-width:640px;margin:16vh auto 10vh;text-align:center}.credits h2{font-size:clamp(2rem,6vw,3.4rem);margin:0 0 32px}.credits dl{margin:0;display:grid;gap:18px}.credits dt{font-family:var(--sign);font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}.credits dd{margin:4px 0 0;font-family:var(--serif);font-size:1.1rem}
.post-credits{max-width:560px;margin:18vh auto 14vh;text-align:center;font-family:var(--serif)}.post-credits h2{font-family:var(--ui);font-size:clamp(1.8rem,5vw,2.8rem);margin:6px 0 12px}.door{font-family:var(--ui);background:var(--lamp);color:#1a1205;border-color:var(--lamp);font-weight:700}

/* Scene motion. */
.blink{animation:lgu-blink 2.2s ease-in-out infinite}@keyframes lgu-blink{50%{opacity:.25}}
.c3-mini{offset-rotate:auto;animation:lgu-loop 7s linear infinite;animation-play-state:paused}.c3-mini:nth-of-type(2){animation-delay:-3.5s}.running .c3-mini{animation-play-state:running}@keyframes lgu-loop{from{offset-distance:0%}to{offset-distance:100%}}
#c3-key{transition:transform 560ms var(--ease-in-out)}.running #c3-key{transform:translate(-128px,130px)}
.c5-pin{transition:transform 300ms var(--ease-out)}.c5-pin.picked{transform-box:fill-box}.c5-pin.picked path:first-child{stroke-width:7}
.c6-branch{transition:stroke 200ms ease}.c6-branch.chosen{stroke:var(--red);stroke-width:5;stroke-dasharray:none}
.c6-train,#c6-train{offset-rotate:auto}
.pigeon{cursor:pointer}
body[data-motion=reduced],body[data-motion=reduced]::before,body[data-motion=reduced] *,body[data-motion=reduced] *::before,body[data-motion=reduced] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(prefers-reduced-motion:reduce){body[data-motion=auto],body[data-motion=auto]::before,body[data-motion=auto] *{animation:none!important;transition:none!important}}

/* Summit Junction rides. */
/* Rides are closed until you take one. :target makes a deep link open on the first paint, so nothing jumps when the script arrives. */
.timeline{display:none}.timeline:target,.timeline.open{display:block}
.timeline{padding:9vh 32px 8vh;min-height:100vh}
.ride-head{max-width:1000px;margin:0 auto 26px}.ride-head h2{font-size:clamp(2.4rem,6vw,4.6rem);margin:.5rem 0 .3rem;letter-spacing:-.03em;line-height:1}.ride-head p{margin:0;color:var(--muted);font-size:.95rem}
.sign{display:inline-block;font-family:var(--sign);font-size:.78rem;font-weight:850;letter-spacing:.16em;text-transform:uppercase;padding:5px 10px;border-radius:3px;background:#090d18;color:var(--lamp);box-shadow:inset 0 0 0 1px var(--edge)}.sign-fiction{color:#f0584c}.sign-thought-experiment{color:#bf9cf5}.sign-hope{color:#6fd48a}
.plat-link{display:inline-flex;align-items:center;min-height:44px;padding-inline:4px;margin-left:6px;font-size:.82rem;color:var(--muted)}
.strip{max-width:1000px;margin:0 auto}
.strip>*{margin-bottom:34px}.strip>.toy{margin-top:-6px}
/* The narration box rides on top of the picture, never over it. */
.cap{display:block;background:#efe5cb;color:#1a2033;border-bottom:3px solid #05080f;padding:12px 18px 13px;font-family:var(--serif);font-size:clamp(.98rem,1.3vw,1.14rem);line-height:1.45}
.cap b{display:block;font-family:var(--sign);text-transform:uppercase;letter-spacing:.12em;font-size:.76em;color:#9a3a26;margin-bottom:2px}
.timeline:not(.voted-race) [data-variant=race],.timeline:not(.voted-slow) [data-variant=slow]{display:none}
.timeline:not(.voted-race) [data-when=race],.timeline:not(.voted-slow) [data-when=slow]{display:none}
.toy{max-width:780px;margin-left:auto;margin-right:auto;padding:14px 16px 16px;border:1px dashed color-mix(in srgb,var(--fg) 34%,transparent);border-radius:14px;background:color-mix(in srgb,var(--fg) 5%,transparent)}
.toy .act{margin-top:0}.toy .act-status{margin-top:12px}
.toy-tag{display:block;text-align:center;margin:0 0 10px;font-family:var(--sign);font-size:.74rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.act-status.big{font-size:1.4rem;font-weight:800;font-variant-numeric:tabular-nums}
.ride-back{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 10px;margin:22px 0 0}.ride-back a{display:inline-flex;align-items:center;min-height:44px;padding-inline:4px;font-weight:800}
.sweep{transform-box:view-box;transform-origin:700px 200px;animation:lgu-sweep 3s linear infinite}@keyframes lgu-sweep{to{transform:rotate(360deg)}}
.timeline .dialogue,.stop-home .dialogue{margin-top:26px}
#hal-eye{animation:lgu-hal 4s ease-in-out infinite}@keyframes lgu-hal{50%{opacity:.78}}
.content-note{max-width:640px;margin:0 0 24px;padding:10px 14px;border:2px solid currentColor;border-radius:8px;font-size:.95rem}
.speedy{offset-path:var(--orbit);offset-rotate:0deg;animation:lgu-loop 5s linear infinite;transition:transform 900ms var(--ease-in-out)}.speedy.called{offset-path:none;animation:none;transform:translate(260px,420px)}
.hand-token{transition:transform 700ms var(--ease-in-out)}.hand-token.given{transform:translate(var(--dx),var(--dy))}
#arms-attack,#arms-defense,#merge-fill{transition:transform 500ms var(--ease-out)}
.range{display:flex;flex-direction:column;gap:6px;min-width:min(420px,100%)}.range input{width:100%;min-height:44px;accent-color:var(--lamp)}
.range-stops{display:flex;justify-content:space-between;gap:4px;font-size:.7rem;color:var(--muted);font-weight:600;text-align:center}.range-stops span{flex:1}.range-stops span:first-child{text-align:left}.range-stops span:last-child{text-align:right}
#still-key{transition:transform 700ms var(--ease-in-out)}#still-key.pulled{transform:translateX(-120px)}
/* The four toys that used to have none. */
#sky-dark{transition:opacity 600ms ease}#sky-lamp{transition:fill 300ms ease}
#sable-plan .pl{transition:opacity 420ms ease}#sable-plan .pl.wob{stroke-dasharray:3 8}#sable-plan.look-agreeing .pl.wob{stroke-dasharray:10 5}
#am-you{transition:none}

.skip-junction{display:inline-flex;align-items:center;align-self:center;min-height:44px;padding-inline:6px;font-size:.9rem;color:var(--muted)}.stop-c0 .act{justify-content:center;margin:0 auto 26px}
.rode-list{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:760px;margin:10px auto 0;padding:0}.rode-list a{display:inline-block;padding:4px 10px;border:1.5px solid currentColor;border-radius:10px;font-size:.85rem;text-decoration:none;max-width:340px;text-align:left}
.rode-list a>b{display:inline-grid;place-items:center;min-width:1.5em;height:1.5em;margin-right:4px;border-radius:3px;background:var(--lamp);color:#101a1a;font-family:var(--sign);font-size:.78rem}
.rode-list .stub-voice{display:block;font-family:var(--serif);font-size:.85rem;opacity:.85;margin-top:4px}.rode-list .stub-voice b{font-family:var(--sign);font-size:.72rem;letter-spacing:.1em;margin-right:4px}.rode-list .stub-voice i{display:none}
.credits h3{margin:44px 0 12px;font-family:var(--sign);font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}.built-short{text-align:left;margin:0 auto;max-width:560px;font-family:var(--serif);line-height:1.5}.curious{max-width:560px;margin:10px auto 0;text-align:left;font-size:.95rem;color:var(--muted)}.curious summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}.curious .built{margin-top:6px}.built{text-align:left;margin:0 auto;max-width:560px;padding-left:1.2em;font-family:var(--serif);line-height:1.5;display:grid;gap:8px}
.resume{position:fixed;left:50%;bottom:18px;z-index:60;transform:translateX(-50%);display:flex;flex-wrap:wrap;align-items:center;gap:10px;max-width:calc(100% - 32px);background:var(--card);color:var(--card-fg);border:1px solid var(--edge);border-radius:12px;box-shadow:0 14px 34px -10px rgba(0,0,0,.8);padding:10px 14px}.resume p{margin:0}.resume[hidden]{display:none}
.picks{max-width:760px;margin:36px auto 0;background:var(--card);color:var(--card-fg);border:1px solid var(--edge);border-radius:10px;padding:18px 22px}.picks h3{margin:0 0 12px;font-family:var(--sign);font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--lamp)}
.pick-row{display:flex;flex-wrap:wrap;gap:12px}.pick-row label{display:flex;flex-direction:column;gap:6px;flex:1 1 260px;font-size:.9rem}.pick-row select{width:100%}
.pick-line{font-family:var(--serif);font-size:1.15rem;min-height:1.5em;margin:14px 0 6px}
.hover-text{display:none;max-width:1000px;margin:-18px auto 18px;font-family:var(--serif);font-style:italic}.hover-text summary{cursor:pointer;font-family:var(--ui);font-style:normal;font-size:.85rem;color:var(--muted);min-height:44px;display:flex;align-items:center}
@media(hover:none){.hover-text{display:block}}
@media(min-width:1400px){.meter{width:110px}.meter-band{font-size:.8rem}.meter-pin{font-size:.72rem}}

/* Phones: one bar (header and meter together), a picture that is never covered, and a card that sits below it. */
@media(max-width:860px){
 html{scroll-padding-top:92px}
 .lgu-bar{padding:6px 14px}.wordmark{font-size:1.1rem;white-space:nowrap}.bar-tools{gap:8px}
 .meter{top:54px;left:0;right:0;bottom:auto;width:auto;height:26px;background:var(--bg);border-bottom:1px solid color-mix(in srgb,var(--fg) 14%,transparent);transition:background-color 900ms ease}
 .meter-rail{left:14px;right:14px;top:14px;bottom:auto;height:0;border-left:0;border-top:3px solid color-mix(in srgb,var(--lamp) 50%,transparent)}
 .meter-band,.meter-pin{display:none}.meter-train{top:-5px;bottom:auto;left:calc(var(--alt,0)*100%);transform:translateX(-50%)}
 main{margin-left:0;padding-top:84px}.stop{padding:4vh 16px 2vh;min-height:0;contain-intrinsic-block-size:auto 880px}.stop-c9{contain-intrinsic-block-size:auto 1950px}.stop-c9,.stop-home{min-height:0}.stop-c0{padding-top:12px}.stage{max-width:100%;min-width:0}
 .dialogue{margin:20px 0 0;padding:18px 18px}.junction-board{grid-template-columns:repeat(2,1fr)}
 .timeline{padding:5vh 16px 7vh;min-height:0}
 .lgu-panel,.strip-panel{border-radius:12px;box-shadow:0 0 0 2px #05080f,0 0 0 3px var(--edge),0 18px 34px -14px rgba(0,0,0,.7),0 0 60px -26px var(--halo)}
}
@media(max-width:520px){.lgu-panel,.strip-panel{transform:none}}
@media(max-width:480px){.lgu-bar .wordmark{font-size:0}.lgu-bar .wordmark::before{content:'LGU';font-size:1rem}.bar-tools select,.bar-tools button{padding:.3rem .6rem;font-size:.82rem}}
/* Links that sit inside a sentence keep their look. Padding above and below the text makes them 44px to hit without moving a line. */
.center.small a,.built a,.dialogue a,.lede a,.small a{padding-block:14px}
/* Links that stand on their own line are real boxes, not padded text: the source in each fine-print row and the links under the credits are 44px tall,
   and the "source record" link beside a source is 32px (never under 24). Rows do not overlap, so a tap lands on the row it is on. */
.fine-print li a,.credits-links a{display:inline-block;min-height:44px;padding-block:10px;line-height:1.5}
.fine-print li a.rec{min-height:32px;padding-block:4px}
.head-home a,.door{min-height:44px;display:inline-flex;align-items:center}

/* The platform answers before you board, and the horn shows itself: a puff off the roof, three arcs, flared lamps. The runtime moves these; this only sets how they turn. */
.flap,.c0-lamp circle,.c0-doors circle,.c0-puff circle,.c0-toot path{transform-box:fill-box;transform-origin:center}
.c0-doors circle{transition:transform 260ms var(--ease-out),opacity 260ms ease}
.stop-c0.ready .c0-doors circle{opacity:1;transform:scale(1.45)}

/* The ride home says how big each step really is. */
.home-sticky{max-width:1000px;margin:0 auto}
body[data-motion=full] .home-sticky{position:sticky;top:10vh}
.zoom-read{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;margin-top:12px;font-size:.95rem}.zoom-read p{margin:0}.zoom-width b{font-variant-numeric:tabular-nums}
.zoom-note{max-width:680px;margin:16px auto 0}
button small{font-size:.78em;opacity:.78;margin-left:.3em;font-weight:600}
.bar-tools a{display:inline-flex;align-items:center;min-height:44px;padding-inline:6px}

/* On a phone the board is a grid of two compact tiles across, grouped by line. The teaser shows for the tile that has the focus or has been tapped once, and then it spans the row. */
@media(max-width:600px){
 .junction-board{display:block;padding:10px 12px 2px;margin-top:20px}
 .junction-board .line{margin:0 0 14px}
 .junction-board h3{margin:0 0 8px}
 .junction-board ul{display:grid;grid-template-columns:1fr 1fr;gap:6px}
 .junction-board li{margin:0}
 .junction-board li a{min-height:56px;justify-content:center;padding:8px 10px;position:relative}
 .junction-board li a>span{font-size:.86rem}
 .junction-board .teaser{display:none}
 .junction-board li:has(a:focus-visible),.junction-board li.armed{grid-column:1/-1}
 .junction-board li:has(a:focus-visible) .teaser,.junction-board li.armed .teaser{display:block}
 .junction-board li.armed a::after{content:"Tap it again to ride";font-size:.72rem;font-weight:800;color:var(--lamp)}
 .junction-board .stamp{position:absolute;top:6px;right:8px}
}