/*
  HOW ARCADIA CITY WORKS: the look every stop shares (05-17, LV-09). Written by hand; build.py adds version codes.
  The hero and the city's seven parts (the overview page), a chapter's opening, the five beats, the Martian world's
  storm, the visor, Spot it, the blueprint, Mission check, Living with it and the home screen. A stop's own drawings
  are styled in its own file, living/stops/<id>.css.
*/
:root {
  --ink: #1D1B19; --muted: #6A635C; --paper: #F5F1EB; --card: #FFFDF9; --rule: #E3DCD2;
  --rust: #B4502B; --rust-hi: #E0825E; --ice: #2A6FA8; --ice-hi: #8DC6EE; --leaf: #3F7D3A; --gold: #E9B45C;
  --g: max(16px, calc((100vw - 1180px) / 2));
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--wum-stage-bg); color: var(--wum-stage-ink); font-family: var(--wum-body); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
.wrap { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
header.top { position: fixed; inset: 0 0 auto 0; z-index: 60; pointer-events: none; padding-top: env(safe-area-inset-top, 0px); }   /* the bar stays at the top as you scroll */
header.top .wum-nav, header.top button, header.top a { pointer-events: auto; }
header.top::before { content: ""; position: absolute; inset: 0 0 -24px 0; z-index: -1; background: linear-gradient(180deg, rgba(10,8,14,0.55), rgba(10,8,14,0)); opacity: 0; transition: opacity 0.4s; }
body.scrolled header.top::before { opacity: 1; }
.chap { scroll-margin-top: 72px; }
.top .wrap { display: flex; align-items: center; height: 72px; }
.ico { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s cubic-bezier(.2,.8,.2,1), transform 0.9s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* Part 1. The hero: a dusk sky over a drawn cut-through of the city, the title in the sky, a label on each part. */
.hero { position: relative; height: max(100svh, 640px); min-height: 640px; overflow: hidden; isolation: isolate; background: #120F1C; }
/* The picture is a painted cut-through of the city (Art, 05-17 LV-09). It sits at the bottom, sized to fill the width or
   82% of the height, whichever is larger, and slips a little below the bottom edge where the rock is plain. Its top fades
   into the sky colour above it, where the title sits. The labels sit on the picture in shares of its size, so they stay on
   their parts at any size. */
.hero { background: linear-gradient(180deg, #070912 0%, #0D1222 40%, #141A2E 100%); }
.hero-pic { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 10%); width: max(100%, calc(max(640px, 100svh) * 0.82 * 1.787)); aspect-ratio: 2688 / 1504; }
.hero-pic picture { display: contents; }
.hero-pic img { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%); mask-image: linear-gradient(180deg, transparent 0%, #000 16%); animation: settle 2.6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes settle { from { transform: scale(1.05); opacity: 0; } to { transform: none; opacity: 1; } }
.hero-in::before { content: ""; position: absolute; left: 50%; top: -60px; width: min(1100px, 100vw); height: calc(100% + 120px); transform: translateX(-50%); z-index: -1; background: radial-gradient(closest-side, rgba(7,9,18,0.72), rgba(7,9,18,0) 100%); pointer-events: none; }
@media (max-width: 700px) { .hero-pic { transform: translate(-42%, 6%); } }
.hero-in { position: absolute; left: 0; right: 0; top: clamp(88px, 11vh, 130px); isolation: isolate; z-index: 2; text-align: center; pointer-events: none; }
.hero-in > * { pointer-events: auto; }
.kick { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 500 12px/1 var(--wum-mono); letter-spacing: 0.22em; text-transform: uppercase; color: #F2C9A6; }
.kick::before, .kick::after { content: ""; width: 34px; height: 1px; background: currentColor; opacity: 0.6; }
.hero h1 { margin: 0 auto; max-width: 22ch; font: 700 clamp(44px, 6.4vw, 96px)/0.9 var(--wum-display); text-transform: uppercase; letter-spacing: 0.005em; color: #FFF4EA; text-shadow: 0 6px 40px rgba(0,0,0,0.55); text-wrap: balance; }
.hero .lede { margin: 18px auto 0; max-width: 44ch; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.5; color: #EAD9CB; text-wrap: balance; text-shadow: 0 2px 18px rgba(0,0,0,0.6); }
.spot { position: absolute; z-index: 3; margin: 0; display: flex; align-items: center; gap: 8px; transform: translate(-50%, -50%); padding: 0; border: 0; background: none; cursor: pointer; color: #FFF4EA; font: 600 12.5px/1 var(--wum-body); white-space: nowrap; }
.spot i { position: relative; width: 14px; height: 14px; border-radius: 50%; background: #FFE7C2; box-shadow: 0 0 0 4px rgba(255,231,194,0.25), 0 0 18px rgba(255,200,140,0.9); }
.spot i::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1.5px solid rgba(255,231,194,0.7); animation: ping 2.4s ease-out infinite; }
.spot span { padding: 7px 11px; border-radius: 999px; background: rgba(14,10,14,0.62); border: 1px solid rgba(255,236,220,0.22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background 0.25s, color 0.25s; }
.spot.left { flex-direction: row-reverse; }
.spot:hover span, .spot:focus-visible span { background: #FFF4EA; color: var(--ink); }
.spot.open span::after { content: "Open"; margin-left: 8px; padding: 2px 6px; border-radius: 999px; background: var(--rust-hi); color: #1D1210; font: 600 9.5px/1 var(--wum-mono); letter-spacing: 0.1em; text-transform: uppercase; vertical-align: 1px; }
@keyframes ping { from { transform: scale(0.6); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
.ab { position: absolute; left: 16px; z-index: 3; display: grid; gap: 22px; transform: translateY(-50%); pointer-events: none; }
.ab b { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 5px 9px; border-radius: 999px; background: rgba(14,10,14,0.55); font: 500 10px/1 var(--wum-mono); letter-spacing: 0.16em; text-transform: uppercase; color: #FFE2C8; }
.ab b .ico { font-size: 12px; transform: rotate(-90deg); }
.ab b + b .ico { transform: rotate(90deg); }
.hero-foot { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 3; display: flex; justify-content: center; gap: 18px; font: 500 10.5px/1 var(--wum-mono); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,240,228,0.75); pointer-events: none; }
.hero-foot b { font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
.hero-foot b::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.scrollcue { position: absolute; left: 50%; bottom: 46px; z-index: 3; width: 24px; height: 38px; margin-left: -12px; border-radius: 14px; border: 1.5px solid rgba(255,240,228,0.55); }
.scrollcue::after { content: ""; position: absolute; left: 50%; top: 8px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: #FFF4EA; animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }
/* moving parts of the drawing */
.wr { animation: shimmer 6s linear infinite; }
@keyframes shimmer { to { stroke-dashoffset: -240; } }
.flow { animation: flow 2.2s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -40; } }
.pulse { animation: pulse 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pulse { 50% { opacity: 0.45; } }
.rover { animation: rove 26s ease-in-out infinite alternate; }
@keyframes rove { from { transform: translateX(0); } to { transform: translateX(560px); } }
.mote { animation: drift linear infinite; }
@keyframes drift { from { transform: translate(0, 0); opacity: 0; } 15% { opacity: 0.8; } to { transform: translate(260px, -40px); opacity: 0; } }
.pool { animation: pool 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pool { 50% { transform: scale(1.08, 1.12); } }
.drum { animation: spin 5s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Part 2. The city in seven parts */
.parts { padding: 90px 0 70px; background: radial-gradient(80% 60% at 50% 0%, #1A1220, var(--wum-stage-bg) 70%); }
.sec-h { text-align: center; margin: 0 auto 34px; max-width: 760px; }
.sec-h h2 { margin: 0; font: 700 clamp(34px, 4.6vw, 60px)/0.95 var(--wum-display); text-transform: uppercase; color: #FFF4EA; }
.sec-h p { margin: 12px auto 0; max-width: 52ch; color: var(--wum-stage-muted); font-size: 16px; line-height: 1.5; }
.grid7 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.legend { display: flex; justify-content: center; gap: 18px; margin-top: 14px !important; font: 500 11px/1 var(--wum-mono) !important; letter-spacing: 0.14em; text-transform: uppercase; }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid rgba(243,236,228,0.5); }
.legend i.on { background: #F2C9A6; border-color: #F2C9A6; box-shadow: 0 0 10px rgba(242,201,166,0.7); }
.gpic, .gcard.walk { --pic: none; }             /* the picture is set when it comes near the screen (explain.js Step 3c) */
.gcard { overflow: hidden; border-radius: 20px; background: rgba(255,240,228,0.04); border: 1px solid var(--wum-stage-glass-line); }
.gcard.has { border-color: rgba(242,201,166,0.5); box-shadow: 0 20px 50px -30px rgba(224,130,94,0.6); }
.gpic { position: relative; display: flex; align-items: flex-end; gap: 10px; height: 116px; padding: 12px 14px; background: linear-gradient(180deg, rgba(7,6,10,0) 30%, rgba(7,6,10,0.85)), var(--pic) center / cover; }
.gpic .gn { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #F2C9A6; color: #1D1210; font: 700 15px/1 var(--wum-display); flex: none; }
.gpic h3 { margin: 0; font: 700 23px/1 var(--wum-display); text-transform: uppercase; color: #FFF4EA; text-shadow: 0 2px 12px rgba(0,0,0,0.6); }
.stops { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; padding: 12px; }
.stop { display: grid; justify-items: center; align-content: start; gap: 7px; padding: 12px 6px 10px; border-radius: 14px; text-align: center; font-size: 12px; line-height: 1.25; color: rgba(243,236,228,0.45); background: rgba(255,240,228,0.03); text-decoration: none; cursor: help; }
.stop .ico { font-size: 24px; opacity: 0.6; }
.stop.on { cursor: pointer; color: #1D1210; font-weight: 600; background: #F2C9A6; box-shadow: 0 10px 26px -12px rgba(242,201,166,0.9); }
.stop.on .ico { opacity: 1; color: #B4502B; }
.stop.on:hover { background: #FFE2C8; transform: translateY(-2px); }
.stop { transition: transform 0.25s, background 0.25s; }

/* Part 3. A chapter: a dark opening over its picture, then a light panel of pictures that explain. */
.chap { position: relative; isolation: isolate; min-height: 86svh; display: flex; align-items: flex-end; padding: 120px 0 64px; overflow: hidden; }
.chap > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 2.4s cubic-bezier(.2,.8,.2,1); }
.chap.in > img { transform: none; }
.chap::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--wum-stage-bg) 0%, rgba(7,6,10,0.25) 22%, rgba(7,6,10,0.15) 45%, rgba(7,6,10,0.85) 82%, var(--wum-stage-bg) 100%), linear-gradient(90deg, rgba(7,6,10,0.75), transparent 65%); }
.chap .grp { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 500 12px/1 var(--wum-mono); letter-spacing: 0.2em; text-transform: uppercase; color: #F2C9A6; }
.chap .grp .cnt { padding-left: 12px; margin-left: 2px; border-left: 1px solid rgba(242,201,166,0.4); color: rgba(255,240,228,0.7); }
.chap .grp b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #F2C9A6; color: #1D1210; font: 700 14px/1 var(--wum-display); letter-spacing: 0; }
.chap h2 { margin: 0; font: 700 clamp(56px, 10vw, 150px)/0.84 var(--wum-display); text-transform: uppercase; color: #FFF4EA; text-shadow: 0 8px 50px rgba(0,0,0,0.5); }
.chap .q { margin: 22px 0 0; max-width: 22ch; font: 600 clamp(24px, 2.6vw, 34px)/1.12 var(--wum-display); color: #FFE2C8; }
.chap .a { margin: 12px 0 0; max-width: 46ch; font-size: 17px; line-height: 1.55; color: #EAD9CB; }
.chap .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 26px; }
.playbtn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px 13px 16px; border-radius: 999px; background: var(--rust-hi); color: #1D1210; font: 700 15px/1 var(--wum-body); text-decoration: none; box-shadow: 0 14px 40px -14px rgba(224,130,94,0.9); transition: transform 0.25s, background 0.25s; }
.playbtn:hover { transform: translateY(-2px); background: #F09A74; }
.playbtn.quiet { background: transparent; color: #F4E6D8; box-shadow: inset 0 0 0 1.5px rgba(244,230,216,.55); }
.playbtn.quiet:hover { background: rgba(255,255,255,.08); }
.plays { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.playbtn .ico { font-size: 20px; }
.inplay { font: 500 11px/1.4 var(--wum-mono); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(243,236,228,0.7); }
.bench { background: var(--paper); color: var(--ink); padding: 0 0 84px; }
.bench .paper { padding-top: 34px; }
/* The Martian world (beat 1, the same on every stop): a dark band that carries on from the chapter's opening. Behind it,
   a soft glow made from the stop's own Mars picture (blurred until only its colours are left), dust drifting east, and
   at the bottom the curved edge of a planet, its thin air glowing, where the light beats begin. */
.mw { position: relative; isolation: isolate; overflow: hidden; background: var(--wum-stage-bg); color: #FFF4EA; padding: clamp(18px, 3vw, 40px) 0 clamp(150px, 15vw, 230px); }
.mw-glow { position: absolute; inset: -80px; z-index: -4; background: var(--mw) 50% 70% / cover no-repeat; filter: blur(50px) saturate(1.5) brightness(1.15); opacity: 0.75; }
.mw::before { content: ""; position: absolute; inset: 0; z-index: -3; background:
  radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,0.8), transparent), radial-gradient(1px 1px at 27% 9%, rgba(255,255,255,0.6), transparent),
  radial-gradient(1.5px 1.5px at 44% 15%, rgba(255,240,220,0.8), transparent), radial-gradient(1px 1px at 63% 6%, rgba(255,255,255,0.7), transparent),
  radial-gradient(1px 1px at 78% 21%, rgba(255,255,255,0.55), transparent), radial-gradient(1.5px 1.5px at 91% 11%, rgba(220,235,255,0.8), transparent),
  radial-gradient(1px 1px at 6% 34%, rgba(255,255,255,0.4), transparent), radial-gradient(1px 1px at 96% 38%, rgba(255,255,255,0.45), transparent),
  radial-gradient(60% 40% at 50% 100%, rgba(240,140,96,0.35), rgba(240,140,96,0) 70%),
  radial-gradient(80% 60% at 50% 45%, rgba(7,6,10,0) 30%, rgba(7,6,10,0.7) 100%),
  linear-gradient(180deg, var(--wum-stage-bg) 0%, rgba(7,6,10,0.55) 14%, rgba(7,6,10,0.1) 45%, rgba(7,6,10,0.15) 78%, rgba(7,6,10,0.5) 100%); }
.mw-sun { position: absolute; z-index: -3; right: 24%; top: -14px; width: clamp(100px, 10vw, 150px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,248,236,1) 0 14%, rgba(255,220,180,0.7) 24%, rgba(245,160,110,0.28) 48%, rgba(240,150,100,0) 72%); opacity: 0.7; }
.mw-veil { position: absolute; z-index: -3; left: 0; width: calc(100% + 1400px); background: var(--veil) 0 0 / 1400px 100% repeat-x; pointer-events: none; will-change: transform;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); }
.mw-veil.v1 { top: 4%; height: 62%; opacity: 0.85; }
.mw-veil.v2 { top: 34%; height: 70%; opacity: 0.6; transform: scaleY(-1); background-size: 1100px 100%; width: calc(100% + 1100px); }
.mw.blowing .mw-veil.v1 { animation: veil1 46s linear infinite; }
.mw.blowing .mw-veil.v2 { animation: veil2 29s linear infinite; }
.mw.blowing .mw-sun { animation: sunDim 13s ease-in-out infinite; }
@keyframes veil1 { from { transform: translateX(-1400px); } to { transform: translateX(0); } }
@keyframes veil2 { from { transform: translateX(-1100px) scaleY(-1); } to { transform: translateX(0) scaleY(-1); } }
@keyframes sunDim { 0%, 100% { opacity: 0.6; } 35% { opacity: 0.22; } 55% { opacity: 0.45; } 75% { opacity: 0.15; } }
.mw-dust { position: absolute; left: 0; top: 0; z-index: -2; pointer-events: none; }
.mw-edge { position: absolute; z-index: -1; left: 50%; width: max(200%, 2000px); transform: translateX(-50%); height: 900px; bottom: calc(-900px + clamp(70px, 7vw, 110px)); border-radius: 50%; background: var(--paper);
  box-shadow: 0 -1px 0 1px rgba(255,214,182,0.9), 0 -10px 30px rgba(240,150,110,0.55), 0 -40px 90px rgba(224,130,94,0.4), 0 -110px 180px rgba(150,190,255,0.12); }
.mw .beat { margin-bottom: 0; }
.mw .beat-h h3 { color: #FFF4EA; text-shadow: 0 6px 40px rgba(224,130,94,0.35); }
.mw .beat-h .bn { -webkit-text-stroke: 2px #F0A07C; background-image: linear-gradient(180deg, rgba(255,196,160,0.55), rgba(224,130,94,0)); filter: drop-shadow(0 0 18px rgba(224,130,94,0.55)); }
.mw .beat-h .rule { height: 1px; background: linear-gradient(90deg, rgba(255,214,182,0.9), rgba(255,214,182,0)); box-shadow: 0 0 10px rgba(240,160,124,0.8); }
.mw .beat-h .bi { background: rgba(255,240,228,0.08); border: 1px solid rgba(255,214,182,0.35); color: #FFD9BE; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 0 30px -4px rgba(224,130,94,0.6); }
.mw .fig { color: var(--ink); box-shadow: 0 40px 90px -40px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,214,182,0.08); }
.mw .fig.diffig { box-shadow: 0 50px 110px -40px rgba(0,0,0,0.95); }
.bgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.fig { grid-column: span 12; position: relative; padding: 26px 26px 24px; border-radius: 22px; background: var(--card); border: 1px solid var(--rule); box-shadow: 0 18px 40px -32px rgba(60,30,10,0.35); }
.fig.s7 { grid-column: span 7; } .fig.s5 { grid-column: span 5; } .fig.s6 { grid-column: span 6; } .fig.s4 { grid-column: span 4; } .fig.s8 { grid-column: span 8; }
.fig h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font: 700 clamp(24px, 2.2vw, 30px)/1 var(--wum-display); text-transform: uppercase; color: var(--ink); }
.fig h3 .ico { font-size: 26px; color: var(--rust); padding: 5px; border-radius: 10px; background: #F6E3D6; box-sizing: content-box; }
.fig .line { margin: 0 0 18px; max-width: 60ch; font-size: 15px; line-height: 1.5; color: var(--muted); }
.big { font: 700 clamp(40px, 4.4vw, 58px)/0.9 var(--wum-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.unit { font: 500 11px/1.3 var(--wum-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.note { font-size: 14px; line-height: 1.5; color: var(--muted); }

/* Round switch buttons any stop can use for a small choice (.tabs > .tab[aria-pressed]). */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tab { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--rule); background: #FBF8F3; font: 600 13.5px/1 var(--wum-body); color: var(--ink); cursor: pointer; transition: background 0.25s, color 0.25s, border-color 0.25s; }
.tab[aria-pressed="true"] { background: var(--ink); color: #FFF4EA; border-color: var(--ink); }
/* Part 4. The tiles every stop's How Arcadia does it card can use (Spot it joins pin n to tile n), and the keys and switches. */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: st; }
.step { position: relative; padding: 18px 16px 16px; border-radius: 16px; background: #FBF8F3; border: 1px solid var(--rule); }
.step:not(:last-child)::after { content: ""; position: absolute; right: -13px; top: 46px; width: 12px; height: 12px; border-top: 2px solid var(--rust); border-right: 2px solid var(--rust); transform: rotate(45deg); z-index: 1; }
.step svg.pic { width: 100%; height: 92px; margin-bottom: 10px; border-radius: 12px; background: #1A1418; }
.step b { display: flex; align-items: center; gap: 8px; font: 700 20px/1 var(--wum-display); text-transform: uppercase; }
.step b::before { counter-increment: st; content: counter(st); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--rust); color: #fff; font-size: 13px; }
.step p { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.type { overflow: hidden; border-radius: 18px; background: #FBF8F3; border: 1px solid var(--rule); }
.type svg { display: block; width: 100%; height: auto; background: linear-gradient(180deg, #F3C795, #E7A574 52%, #8A4B2E 52.2%, #6E3A24); }
.type div { padding: 16px 18px 18px; }
.type b { font: 700 20px/1 var(--wum-display); text-transform: uppercase; }
.type p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: #EFE8DE; margin-bottom: 16px; }
.seg button { border: 0; padding: 9px 14px; border-radius: 999px; background: transparent; font: 600 13.5px/1 var(--wum-body); color: var(--muted); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--ink); color: #FFF4EA; }
.keys { display: grid; gap: 8px; margin-top: 14px; }
.keys span { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.keys i { width: 16px; height: 16px; border-radius: 3px; flex: none; }

/* Part 6b. The four beats every stop shares */
.beatnav { position: sticky; top: 12px; z-index: 5; display: flex; justify-content: center; gap: 6px; width: fit-content; margin: 0 auto 30px; padding: 6px; border-radius: 999px; background: rgba(255,253,249,0.88); border: 1px solid var(--rule); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 30px -20px rgba(60,30,10,0.5); }
.beatnav a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; color: var(--ink); text-decoration: none; font: 600 13px/1 var(--wum-body); white-space: nowrap; }
.beatnav a:hover { background: #F2E7DC; }
.beatnav a.on { background: var(--ink); color: #FFF4EA; }
.gcard.walk { display: grid; align-content: end; gap: 6px; min-height: 240px; padding: 22px; text-decoration: none; color: #FFF4EA; background: linear-gradient(180deg, rgba(7,6,10,0.1), rgba(7,6,10,0.9)), var(--pic) center / cover; border-color: rgba(242,201,166,0.5); transition: transform 0.3s; }
.gcard.walk:hover { transform: translateY(-3px); }
.gcard.walk span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #E0825E; color: #1D1210; font-size: 24px; margin-bottom: 6px; }
.gcard.walk b { font: 700 26px/1 var(--wum-display); text-transform: uppercase; }
.gcard.walk small { font-size: 14px; color: #EAD9CB; }
.beatnav b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--rust); color: #fff; font: 700 12px/1 var(--wum-display); }
.beat { margin-bottom: 46px; scroll-margin-top: 70px; }
/* How Arcadia does it, opening on its place: under the beat's heading the scene runs edge to edge, the whole picture in
   view, fading into the page at its top and bottom, and the card rises out of its lower edge in frosted glass. */
.beat.has-scene { position: relative; isolation: isolate; --sh: min(calc(100vw / var(--ar, 2.334)), 900px); }
.scene { position: absolute; z-index: -1; top: 120px; left: calc(50% - 50vw); width: 100vw; height: var(--sh); overflow: hidden; }
.scene-pic { position: absolute; inset: 0; transform: scale(1.06); will-change: transform; }
.scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); filter: brightness(0.5) saturate(0.75); transition: filter 2.6s cubic-bezier(.3,.6,.2,1); }
.scene.lit img { filter: brightness(1) saturate(1.05); }
.scene::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, var(--paper) 0%, rgba(245,241,235,0) 9%, rgba(245,241,235,0) 70%, rgba(245,241,235,0.8) 90%, var(--paper) 100%); }
.scene-warm { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(60% 55% at 70% 40%, rgba(255,196,130,0.22), rgba(255,196,130,0) 70%); opacity: 0; transition: opacity 3s ease 0.6s; }
.scene.lit .scene-warm { opacity: 1; }
.has-scene > .bgrid { margin-top: calc(var(--sh) - var(--lap, 170px)); }
.has-scene > .bgrid > .fig { background: rgba(255,252,247,0.93); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-color: rgba(255,255,255,0.9); box-shadow: 0 50px 100px -40px rgba(60,30,10,0.65); }
/* Spot it: a numbered glowing pin on the scene for each part the card explains (05-17 sections.<id>.scene.spots). The
   pins pop in one after another once the scene lights; pointing at a pin or at its tile lights both. Each of the card's
   tiles opens on a close-up cut from the same picture, so the card and the place are one. */
.spin { position: absolute; z-index: 2; width: 34px; height: 34px; margin: -17px 0 0 -17px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  font: 700 15px/1 var(--wum-display); color: #fff; background: #E0825E; box-shadow: 0 0 0 3px rgba(255,255,255,0.85), 0 0 0 9px rgba(224,130,94,0.35), 0 0 30px 8px rgba(255,180,120,0.5);
  opacity: 0; transform: scale(0.4); transition: opacity 0.5s ease, transform 0.6s cubic-bezier(.3,1.6,.5,1), box-shadow 0.3s ease; transition-delay: calc(1.4s + var(--i) * 0.35s), calc(1.4s + var(--i) * 0.35s), 0s; }
.scene.lit .spin { opacity: 1; transform: scale(1); }
.spin::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid rgba(255,220,190,0.8); opacity: 0; animation: spinRing 2.8s ease-out infinite; animation-delay: calc(var(--i) * 0.7s); }
@keyframes spinRing { 0% { transform: scale(0.7); opacity: 0.9; } 70%, 100% { transform: scale(1.7); opacity: 0; } }
.scene.lit .spin.on { transform: scale(1.22); transition-delay: 0s; box-shadow: 0 0 0 3px #fff, 0 0 0 14px rgba(224,130,94,0.45), 0 0 50px 16px rgba(255,190,130,0.8); }
.spin span { position: absolute; left: 44px; top: 50%; transform: translateY(-50%); white-space: nowrap; padding: 6px 11px; border-radius: 999px; background: rgba(20,12,8,0.62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font: 600 12px/1 var(--wum-mono); letter-spacing: 0.12em; text-transform: uppercase; color: #fff; pointer-events: none; }
.spin.left span { left: auto; right: 44px; }
.spin:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.fig .spot-crop { position: relative; border-radius: 12px; background-repeat: no-repeat; background-color: #3A2418; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); }
.fig .spot-crop i { position: absolute; left: 10px; top: 10px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #E0825E; color: #fff; font: 700 14px/1 var(--wum-display); font-style: normal; box-shadow: 0 0 0 2px rgba(255,255,255,0.85); }
.step .spot-crop { height: 120px; margin: -6px -4px 12px; }
.type .spot-crop { height: 230px; border-radius: 0; }
.has-crops .step svg.pic, .has-crops .type > svg { display: none; }
.has-crops .step, .has-crops .type { transition: border-color 0.3s ease, box-shadow 0.3s ease; cursor: default; }
.has-crops .step.on, .has-crops .type.on { border-color: #E0825E; box-shadow: 0 0 0 2px #E0825E inset; }
/* The thread: while a pin and its tile are lit, one thin glowing line joins them, dropping from the pin and curving
   towards its tile. Only one shows at a time so lines never cross; phones, where the tiles stack far below the
   picture, go without. The line stops on the card's top edge, above its tile, so it never crosses the card's words. */
.spot-line { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.spot-line path { fill: none; stroke: #E0825E; stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 1.5px rgba(255,255,255,0.95)) drop-shadow(0 0 6px rgba(255,170,120,0.8));
  stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 0.35s ease, opacity 0.25s ease; }
.spot-line path.on { stroke-dashoffset: 0; opacity: 1; }
.spot-line circle { fill: #E0825E; stroke: #fff; stroke-width: 2; opacity: 0; transition: opacity 0.2s ease 0.3s; filter: drop-shadow(0 0 4px rgba(224,130,94,0.9)); }
.spot-line circle.on { opacity: 1; }
@media (max-width: 700px) { .spot-line { display: none; } }
@media (max-width: 700px) {
  .scene { top: 150px; height: 320px; }
  .has-scene > .bgrid { margin-top: 270px; }
  .spin { width: 28px; height: 28px; margin: -14px 0 0 -14px; font-size: 13px; }
  .spin span { display: none; }
  .spin.show span { display: block; }                   /* a pin that names itself shows its name when tapped */
}
/* How it works as a blueprint (05-17 beats[].look): a cobalt drafting sheet running edge to edge behind the beat, with a
   fine and a coarse grid, a glow where the light falls, plates with corner marks and figure numbers, and a title block. */
.look-blueprint { position: relative; isolation: isolate; padding: 80px 0 120px; margin-bottom: 64px;
  --ink: #EAF2FF; --muted: #A9C2E4; --rule: rgba(190,220,255,0.24); color: var(--ink); }
.look-blueprint::before { content: ""; position: absolute; z-index: -2; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw;
  background: radial-gradient(55% 45% at 50% 30%, rgba(120,180,255,0.16), transparent 70%),
    linear-gradient(rgba(255,255,255,0.12) 1px, transparent 1px) 0 0 / 120px 120px, linear-gradient(90deg, rgba(255,255,255,0.12) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(180deg, #173A6B, #10294F); }
.look-blueprint::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; pointer-events: none;
  background:
    linear-gradient(90deg, transparent calc(50% - 14px), rgba(0,0,0,0.12) calc(50% - 1px), rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.02) calc(50% + 10px), transparent calc(50% + 24px)),
    linear-gradient(180deg, transparent calc(50% - 10px), rgba(0,0,0,0.06) calc(50% - 1px), rgba(255,255,255,0.045) 50%, transparent calc(50% + 14px)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(8,20,40,0.45), transparent 90px, transparent calc(100% - 90px), rgba(8,20,40,0.45)); }
.look-blueprint .beat-h h3 { color: #fff; }
.look-blueprint .beat-h .bn { -webkit-text-stroke-color: #9CC3F0; color: transparent; }
.look-blueprint .beat-h .rule { background: linear-gradient(90deg, #9CC3F0, rgba(156,195,240,0)); }
.look-blueprint .fig { border-radius: 3px; background: rgba(10,28,58,0.42); border: 1px solid rgba(190,220,255,0.5); box-shadow: inset 0 0 0 6px rgba(16,41,79,0.55), inset 0 0 0 7px rgba(190,220,255,0.18), 0 30px 60px -40px rgba(0,0,0,0.7); padding-bottom: 92px; }
.look-blueprint .fig::before { content: ""; position: absolute; inset: -7px; pointer-events: none; --c: #CFE3FF;
  background: linear-gradient(var(--c), var(--c)) 0 0 / 16px 1px, linear-gradient(var(--c), var(--c)) 0 0 / 1px 16px,
    linear-gradient(var(--c), var(--c)) 100% 0 / 16px 1px, linear-gradient(var(--c), var(--c)) 100% 0 / 1px 16px,
    linear-gradient(var(--c), var(--c)) 0 100% / 16px 1px, linear-gradient(var(--c), var(--c)) 0 100% / 1px 16px,
    linear-gradient(var(--c), var(--c)) 100% 100% / 16px 1px, linear-gradient(var(--c), var(--c)) 100% 100% / 1px 16px; background-repeat: no-repeat; opacity: 0.8; }
.look-blueprint .fig { margin-top: 30px; overflow: visible; }
.look-blueprint .fig > * { position: relative; z-index: 1; }
/* The tab: the beat's name as a coral tab rising from the card's top edge, like a revision flag on a drawing. */
.look-blueprint .fig > .bp-tab { position: absolute; z-index: 2; left: 22px; top: 0; transform: translateY(-100%); display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px 8px 12px;
  border-radius: 7px 7px 0 0; background: linear-gradient(180deg, #F0936C, #D9714B); color: #1A0D07; font: 700 15px/1 var(--wum-display); letter-spacing: 0.16em; text-transform: uppercase;
  box-shadow: 0 -6px 22px -6px rgba(255,148,107,0.55), inset 0 1px 0 rgba(255,255,255,0.35); }
.look-blueprint .fig > .bp-tab::before { content: ""; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid #1A0D07; opacity: 0.85; }
/* The detail callout bubble: figure number over the stop's name, as real drawings mark each detail. */
.look-blueprint .fig > h3 { position: relative; padding-left: 74px; min-height: 58px; }
.bp-bubble { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 58px; height: 58px; border-radius: 50%; border: 1.5px solid #CFE3FF; display: grid; grid-template-rows: 1fr 1fr; overflow: hidden;
  box-shadow: 0 0 14px rgba(140,200,255,0.35), inset 0 0 0 4px rgba(16,41,79,0.9), inset 0 0 0 5px rgba(207,227,255,0.35); background: rgba(10,28,58,0.6); }
.bp-bubble b { display: grid; place-items: end center; padding-bottom: 3px; font: 700 18px/1 var(--wum-display); color: #fff; border-bottom: 1.5px solid #CFE3FF; }
.bp-bubble small { display: grid; place-items: start center; padding-top: 4px; font: 600 8.5px/1 var(--wum-mono); letter-spacing: 0.12em; text-transform: uppercase; color: #9CC3F0; }
/* The Checked stamp: coral ink, a little crooked, dated with today's Mars date at the city. */
.look-blueprint .fig > .bp-stamp { position: absolute; z-index: 2; right: 22px; bottom: 18px; display: grid; justify-items: center; gap: 3px; padding: 7px 12px 6px; transform: rotate(var(--r, -6deg));
  border: 2px solid rgba(255,148,107,0.85); border-radius: 5px; box-shadow: inset 0 0 0 2px rgba(10,28,58,0.6), inset 0 0 0 3.5px rgba(255,148,107,0.5); color: rgba(255,160,120,0.95);
  font: 700 9px/1.1 var(--wum-mono); letter-spacing: 0.12em; text-transform: uppercase; text-align: center; pointer-events: none; opacity: 0.92;
  -webkit-mask: linear-gradient(105deg, #000 40%, rgba(0,0,0,0.7) 55%, #000 70%); mask: linear-gradient(105deg, #000 40%, rgba(0,0,0,0.7) 55%, #000 70%); }
.bp-stamp b { font: 700 16px/1 var(--wum-display); letter-spacing: 0.22em; padding: 1px 0 3px; border-bottom: 1px solid rgba(255,148,107,0.6); }
/* Pointing at a plate lets the place itself show faintly through the drawing. */
.bp-photo { position: absolute !important; z-index: 0 !important; inset: 7px; background-size: cover; opacity: 0; filter: grayscale(1) contrast(1.1); mix-blend-mode: screen; transition: opacity 0.7s ease; pointer-events: none; }
.look-blueprint .fig:hover .bp-photo { opacity: 0.22; }
/* The drafting pen: a bright point that leads each line as it draws itself in. */
.bp-pen { position: absolute !important; z-index: 3 !important; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #fff; opacity: 0; pointer-events: none;
  box-shadow: 0 0 6px 2px rgba(255,255,255,0.9), 0 0 18px 6px rgba(140,200,255,0.7); transition: opacity 0.2s; }
/* Words drawn on: the dots' two labels, and the soil drawings' scale bar. */
.look-blueprint .edots { position: relative; padding-top: 30px; }
.etag { position: absolute; top: 0; font: 600 11px/1 var(--wum-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.etag::after { content: ""; position: absolute; top: 15px; height: 13px; width: 1px; background: currentColor; }
.etag.lift { left: 0; color: #7CC8FF; } .etag.lift::after { left: 4px; }
.etag.melt { right: 0; color: #FF946B; } .etag.melt::after { right: 24px; }
.bp-scale { display: grid; gap: 4px; align-content: start; }
.bp-scale svg { width: 100%; height: auto; overflow: visible; }
.bp-scale span { font: 600 10px/1.3 var(--wum-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #9CC3F0; }
.look-blueprint .fig svg { filter: drop-shadow(0 0 2.5px rgba(140,200,255,0.5)); }
.look-blueprint .rung .d { color: #FFB48F; }
.look-blueprint .push .fix { background: rgba(207,227,255,0.07); border-left-color: #FFB48F; }
.look-blueprint .sun { background: transparent; border: 1px solid rgba(190,220,255,0.35); border-radius: 4px; }
.look-blueprint .kettles svg { color: #CFE3FF; }
.look-blueprint .kettles svg :is(path, rect) { fill: none; stroke: currentColor; stroke-width: 2; }
.look-blueprint .kettles svg .steam { stroke: #9CC3F0; }
.look-blueprint .crop .tr { background: rgba(207,227,255,0.1); }
.look-blueprint .crop .tr i { background: linear-gradient(90deg, #3FB27A, #74E3A6); box-shadow: 0 0 10px rgba(116,227,166,0.45); }
.look-blueprint .crop .tr i.lo { background: rgba(116,227,166,0.25); box-shadow: none; }
.bp-block { position: absolute; right: 0; bottom: 34px; display: grid; grid-template-columns: auto auto auto; border: 1px solid rgba(190,220,255,0.55); font: 600 11px/1 var(--wum-mono); letter-spacing: 0.18em; text-transform: uppercase; color: #BFD8F5; }
.bp-block > * { padding: 8px 12px; border-left: 1px solid rgba(190,220,255,0.35); }
.bp-block b { border-left: 0; color: #fff; }
@media (max-width: 700px) { .look-blueprint .fig { padding-bottom: 96px; } .look-blueprint .fig > .bp-stamp { right: 14px; bottom: 16px; font-size: 8px; } .look-blueprint .fig > .bp-tab { font-size: 13px; left: 14px; } .look-blueprint { padding: 60px 0 100px; } .bp-block { left: 0; right: auto; bottom: 30px; } .bp-block span:nth-child(3) { display: none; } }
/* Mission check (05-17 beats[].look "gallery", explore.check): beat 5 hangs on a warm gallery wall under a soft spot
   of light. The proof is a framed photograph with a museum label; the quick check is three cream cards that turn over. */
.look-gallery { position: relative; isolation: isolate; padding: 70px 0 90px; margin-bottom: 0; }
.look-gallery::before { content: ""; position: absolute; z-index: -2; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw;   /* the gallery after hours: a dark panelled wall, warm pools of light */
  background: radial-gradient(30% 34% at 32% 18%, rgba(255,214,160,0.22), rgba(255,214,160,0) 70%), radial-gradient(60% 30% at 50% 100%, rgba(224,130,94,0.16), rgba(224,130,94,0) 75%),
    linear-gradient(180deg, rgba(20,12,14,0.55) 0%, rgba(20,12,14,0.35) 25%, rgba(15,10,13,0.72) 55%, rgba(15,10,13,0.94) 80%, #0F0A0D 100%),
    var(--wall, none) 50% 30% / cover no-repeat, linear-gradient(180deg, #1A1213 0%, #140D0F 60%, #0F0A0D 100%); }   /* the Arcadia museum after hours (05-17 check.wall), dimmed so the exhibit leads */
.look-gallery { --wall: none; }
.look-gallery::after { content: ""; position: absolute; z-index: -1; left: calc(50% - 50vw); width: 100vw; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,201,166,0.4), transparent); box-shadow: 0 0 18px rgba(224,130,94,0.5); }
.look-gallery .beat-h h3 { color: #FFF4EA; text-shadow: 0 6px 40px rgba(224,130,94,0.3); }
.look-gallery .beat-h .bn { -webkit-text-stroke-color: #F0A07C; filter: drop-shadow(0 0 16px rgba(224,130,94,0.5)); }
.look-gallery .beat-h .rule { height: 1px; background: linear-gradient(90deg, rgba(255,214,182,0.9), rgba(255,214,182,0)); box-shadow: 0 0 10px rgba(240,160,124,0.8); }
.look-gallery .beat-h .bi { background: rgba(255,240,228,0.08); border: 1px solid rgba(255,214,182,0.35); color: #FFD9BE; box-shadow: 0 0 30px -4px rgba(224,130,94,0.6); }
.exhibit { grid-column: span 12; margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 54px); align-items: center; }
.ex-frame { position: relative; }
.ex-frame::before { content: ""; position: absolute; z-index: 2; left: 50%; top: -30px; width: 46%; height: 12px; transform: translateX(-50%); border-radius: 6px 6px 10px 10px;   /* a brass picture light */
  background: linear-gradient(180deg, #F3D49A, #B98A45 55%, #6E4E22); box-shadow: 0 4px 10px rgba(0,0,0,0.6), 0 10px 26px rgba(255,220,160,0.55); }
.ex-frame::after { content: ""; position: absolute; z-index: 1; left: 50%; top: -20px; width: 100%; height: 70%; transform: translateX(-50%); pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(50% 60% at 50% 0%, rgba(255,226,180,0.32), rgba(255,226,180,0) 72%); }
.ex-frame { margin: 0; padding: 14px; background: linear-gradient(145deg, #3A2A1E, #120D0A); box-shadow: 0 0 0 1px #000, inset 0 0 0 2px rgba(233,190,120,0.35), inset 0 0 0 5px rgba(0,0,0,0.5), 0 60px 90px -30px rgba(0,0,0,0.9), 0 0 80px -20px rgba(255,200,140,0.25); }
.ex-mat { display: block; padding: clamp(14px, 2.2vw, 26px); background: #F6F1E8; box-shadow: inset 0 2px 6px rgba(0,0,0,0.18); }
.ex-mat img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,0.25); }
.ex-label { position: relative; padding: 28px 30px 24px; background: #FCF9F3; border-left: 4px solid var(--rust-hi); box-shadow: 0 30px 60px -24px rgba(0,0,0,0.85), 0 0 60px -20px rgba(255,214,160,0.35); }
.ex-label .ex-k { position: absolute; top: -13px; left: 22px; padding: 6px 12px; background: var(--rust-hi); color: #1A0D07; font: 700 13px/1 var(--wum-display); letter-spacing: 0.16em; text-transform: uppercase; }
.ex-label small { display: block; margin: 4px 0 12px; font: 600 11px/1.45 var(--wum-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #9A6B4F; }
.ex-label h4 { margin: 0 0 12px; font: 700 clamp(26px, 2.6vw, 34px)/1.02 var(--wum-display); text-transform: uppercase; color: #1D1410; }
.ex-label p { margin: 0; font-size: 17px; line-height: 1.55; color: #3A2C22; }
.exhibit.stand-in .ex-label em { display: none; }   /* the stop's own scene stands in until the real photo is fetched, so its credit hides */
.ex-label em { display: block; margin-top: 16px; font: 500 11px/1.45 var(--wum-mono); font-style: normal; color: #8A7A6C; }
.quiz { grid-column: span 12; margin-top: 64px; }
.q-head { display: grid; justify-items: center; gap: 10px; margin: 0 0 30px; text-align: center; }
.q-badge { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; color: #FFD9BE; font-size: 26px; background: radial-gradient(circle at 50% 35%, rgba(224,130,94,0.4), rgba(224,130,94,0.08));
  border: 1px solid rgba(255,214,182,0.45); box-shadow: 0 0 0 8px rgba(224,130,94,0.08), 0 0 40px -4px rgba(224,130,94,0.7); }
.q-head p { display: inline-flex; align-items: center; gap: 12px; margin: 6px 0 0; font: 500 12px/1 var(--wum-mono); letter-spacing: 0.24em; text-transform: uppercase; color: #F2C9A6; }
.q-head p::before, .q-head p::after { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, #E0825E); }
.q-head p::after { transform: scaleX(-1); }
.q-head h4 { margin: 0; font: 700 clamp(40px, 5vw, 72px)/0.9 var(--wum-display); text-transform: uppercase; color: #FFF4EA; text-shadow: 0 8px 50px rgba(224,130,94,0.4); }
.qs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; perspective: 1400px; }
.qc { display: grid; border-radius: 18px; transition: transform 0.7s cubic-bezier(.3,.7,.2,1); transform-style: preserve-3d; }
.qc > div { grid-area: 1 / 1; display: grid; align-content: start; gap: 12px; padding: 22px 22px 22px; border-radius: 18px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.qc-front { background: #2A1D18; }
.qc-back { transform: rotateY(180deg); background: #1F1A20; color: #FFF4EA; }
.qc.done { transform: rotateY(180deg); }
/* The cards dress as the beat their answer comes from. Every face keeps its picture; words sit on a dark wash. */
.qc { position: relative; }
.qc > div { position: relative; overflow: hidden; min-height: 470px; align-content: end; color: #fff; isolation: isolate; }
.qc-art { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: 50% 50%; }
.qc > div::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14,10,10,0.02) 0%, rgba(14,10,10,0.3) 34%, rgba(14,10,10,0.9) 72%); }
.qc-back::after { background: linear-gradient(180deg, rgba(14,10,10,0.35), rgba(14,10,10,0.9) 45%) !important; }
.qc-back { align-content: end; }
.qc .qq { color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,0.55); }
.qc .qn { color: #FFD7BF; }
.qsrc { width: fit-content; padding: 6px 10px; border-radius: 999px; background: rgba(0,0,0,0.38); border: 1px solid rgba(255,255,255,0.35); color: #fff; font: 600 10.5px/1 var(--wum-mono); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.qsrc:hover { background: rgba(224,130,94,0.6); }
.qc .qa button { background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.42); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.qc .qa button:hover, .qc .qa button:focus-visible { background: rgba(224,130,94,0.55); border-color: #FFB48F; }
.qc .qa button.ok { background: #2F9E63; border-color: #74E3A6; box-shadow: 0 0 0 3px rgba(116,227,166,0.35), 0 0 30px rgba(116,227,166,0.6); }
.qc .qa button.no { background: #C9563A; border-color: #FF946B; }
.qc.picked:has(.no) { animation: qshake 0.45s ease; }
@keyframes qshake { 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
.qspark { position: absolute; z-index: 5; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; pointer-events: none; box-shadow: 0 0 8px currentColor; animation: qspark 0.9s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes qspark { to { transform: translate(var(--dx), var(--dy)) scale(0.3); opacity: 0; } }
/* How it works: a small blueprint carrying the drawing you saw. */
.from-why > div { background: linear-gradient(180deg, #1B4479, #10294F); }
.from-why .qc-art { background: linear-gradient(rgba(255,255,255,0.11) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgba(255,255,255,0.11) 1px, transparent 1px) 0 0 / 22px 22px;
  display: flex; align-items: flex-start; justify-content: center; gap: 6px; padding: 26px 18px 0; filter: drop-shadow(0 0 3px rgba(140,200,255,0.55)); }
.from-why .qc-art svg { flex: 1 1 0; min-width: 0; max-height: 40%; width: auto; height: auto; }
.from-why .qc-art .qc-icon { flex: none; width: 46%; height: auto; max-height: none; margin-top: 6%; fill: none; stroke: #CFE3FF; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.from-why > div::after { background: linear-gradient(180deg, rgba(16,41,79,0) 30%, rgba(16,41,79,0.75) 52%, rgba(12,30,60,0.97) 74%); }
.from-why > div { box-shadow: 0 26px 50px -26px rgba(10,20,40,0.8); }
.from-why > div::after { box-shadow: inset 0 0 0 1px rgba(190,220,255,0.5), inset 0 0 0 6px rgba(16,41,79,0.55), inset 0 0 0 7px rgba(190,220,255,0.2); }
/* The Martian world: the visor's white shell and coral piping over the Mars picture. */
.from-problem > div { border: 7px solid #F2EFEA; box-shadow: 0 26px 50px -26px rgba(40,20,10,0.8); }
.from-problem > div::after { box-shadow: inset 0 0 0 3px #3A3F47, inset 0 0 0 5px #E0825E; }
.from-problem .qc-art { filter: saturate(1.1); }
.from-problem .qc-front::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(243,199,149,0.55), rgba(243,199,149,0) 35%); }
/* How Arcadia does it and Living with it: the place itself. */
.from-fix > div, .from-living > div { box-shadow: 0 26px 50px -26px rgba(40,20,10,0.8); }
.qn { font: 600 11px/1 var(--wum-mono); letter-spacing: 0.18em; text-transform: uppercase; color: #9A6B4F; }
.qq { margin: 0; font: 700 clamp(21px, 1.8vw, 24px)/1.15 var(--wum-display); }
.qa { display: grid; gap: 8px; margin-top: 4px; }
.qa button { text-align: left; padding: 12px 14px; border-radius: 12px; border: 1.5px solid rgba(150,110,80,0.3); background: #fff; color: #2A1D14; font: 500 15px/1.3 var(--wum-body); cursor: pointer; transition: border-color 0.2s, background 0.2s, transform 0.2s; }
.qa button:hover, .qa button:focus-visible { border-color: var(--rust-hi); background: #FFF6EE; transform: translateX(3px); }
.qv { width: fit-content; padding: 6px 12px; border-radius: 999px; font: 700 12px/1 var(--wum-display); letter-spacing: 0.16em; text-transform: uppercase; }
.qc.ok .qv { background: #3FA36B; color: #fff; } .qc.no .qv { background: #E0825E; color: #1A0D07; }
.qr { font: 700 22px/1.1 var(--wum-display); text-transform: uppercase; }
.qw { margin: 0; font-size: 14.5px; line-height: 1.5; color: #EAD9CB; }
.qm { margin: 2px 0 0; padding-top: 12px; border-top: 1px dashed rgba(242,201,166,0.35); font-size: 14px; line-height: 1.5; color: #FFF4EA; }
.qm i { display: block; margin-bottom: 4px; font: 600 10.5px/1 var(--wum-mono); font-style: normal; letter-spacing: 0.16em; text-transform: uppercase; color: #F2C9A6; }
.q-end { grid-column: span 12; position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 22px; padding: 18px 22px 18px 18px; border-radius: 22px;
  background: linear-gradient(100deg, rgba(255,240,228,0.06), rgba(255,240,228,0.02)); border: 1px solid rgba(255,214,175,0.18); color: #FFF4EA; transition: border-color 0.6s, box-shadow 0.6s; }
.q-end::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(40% 140% at 0% 50%, rgba(224,130,94,0.18), transparent 70%); opacity: 0.5; transition: opacity 0.6s; }
.quiz.all .q-end { border-color: rgba(255,201,166,0.55); box-shadow: 0 0 60px -20px rgba(224,130,94,0.7); } .quiz.all .q-end::before { opacity: 1; }
.q-score { display: flex; align-items: center; gap: 16px; }
.q-ring { flex: none; width: 66px; height: 66px; overflow: visible; }
.q-ring .q-arc { fill: none; stroke: rgba(255,240,228,0.16); stroke-width: 4.5; stroke-linecap: round; transition: stroke 0.5s, filter 0.5s; }
.q-ring .q-arc.ok { stroke: #74E3A6; filter: drop-shadow(0 0 4px rgba(116,227,166,0.9)); } .q-ring .q-arc.no { stroke: #FF946B; }
.q-ring text { fill: #FFF4EA; font: 700 15px var(--wum-display); }
.q-score b { display: block; font: 700 clamp(22px, 2vw, 28px)/1 var(--wum-display); text-transform: uppercase; }
.q-score span { display: block; margin-top: 7px; font: 600 12px/1 var(--wum-mono); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,240,228,0.6); }
.quiz.all .q-score span { display: inline-block; margin-top: 9px; padding: 7px 12px; border: 1.5px solid #F2C9A6; border-radius: 6px; color: #FFE2C8; font-size: 13px; transform: rotate(-3deg);
  box-shadow: 0 0 20px -4px rgba(242,201,166,0.6); animation: q-stamp 0.5s cubic-bezier(.3,1.6,.5,1); }
@keyframes q-stamp { 0% { transform: rotate(-3deg) scale(1.8); opacity: 0; } 100% { transform: rotate(-3deg) scale(1); opacity: 1; } }
/* Field notes: a cream slip with a strip of tape, pinned over the top edge of a card. */
.fnote { position: absolute; z-index: 4; top: 0; right: 26px; width: min(270px, 44%); transform: translateY(-62%) rotate(2deg); padding: 16px 18px 14px; background: #FFF8E6; color: #2A1D14;
  box-shadow: 0 16px 30px -16px rgba(40,25,10,0.55); }
.fnote::before { content: ""; position: absolute; top: -10px; left: 50%; width: 86px; height: 22px; margin-left: -43px; background: rgba(255,214,150,0.8); transform: rotate(-4deg); box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.fnote b { display: block; margin-bottom: 6px; font: 700 11px/1 var(--wum-mono); letter-spacing: 0.18em; text-transform: uppercase; color: #B4502B; }
.fnote p { margin: 0; font-size: 14px; line-height: 1.45; }
@media (max-width: 960px) {
  .exhibit, .qs { grid-template-columns: minmax(0, 1fr); }
  .qc > div { min-height: 400px; }
  .fnote { position: relative; right: auto; width: auto; transform: rotate(-1deg); margin: 20px 4px 4px; }
}
@media (prefers-reduced-motion: reduce) { .qc { transition: none; } }
@media (prefers-reduced-motion: reduce) { .scene img { transition: none; filter: none; } .scene-pic { transform: none; } .scene-warm, .spin { transition: none; opacity: 1; transform: none; } .spin::before { animation: none; } }

/* A beat's heading: a big outlined step number, the title, a line of light and the beat's icon. */
.beat-h { display: flex; align-items: center; gap: clamp(14px, 2vw, 24px); margin: 0 0 22px; }
.beat-h .bn { font: 700 clamp(64px, 7.4vw, 108px)/0.78 var(--wum-display); letter-spacing: -0.02em; color: transparent; -webkit-text-stroke: 2px #C9623A; background: linear-gradient(180deg, rgba(224,130,94,0.35), rgba(224,130,94,0)); -webkit-background-clip: text; background-clip: text; flex: none; }
.beat-h h3 { margin: 0; font: 700 clamp(40px, 5.4vw, 76px)/0.88 var(--wum-display); text-transform: uppercase; letter-spacing: 0.005em; color: var(--ink); white-space: nowrap; }
.beat-h .rule { flex: 1; min-width: 20px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #C9623A, rgba(201,98,58,0)); }
.beat-h .bi { display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: 50%; background: var(--ink); color: #F2C9A6; font-size: 26px; box-shadow: 0 0 0 6px rgba(201,98,58,0.12), 0 12px 30px -12px rgba(201,98,58,0.8); }
/* Each card's beat label starts its title, in the title's own size, in coral. */
.fig h3 { flex-wrap: wrap; column-gap: 10px; }
.ck { color: #C9623A; }
.diffig { padding: 0; overflow: hidden; border: 0; background: #0B090C; }
/* Earth and Mars side by side: both pictures fill the card; Mars sits on top and fades in across the middle 20%. */
.duo { position: relative; aspect-ratio: 21 / 9; min-height: 460px; overflow: hidden; isolation: isolate; }
.world { position: absolute; inset: 0; overflow: hidden; }
.world.mars { -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000 60%); mask-image: linear-gradient(90deg, transparent 40%, #000 60%); }
.world img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: drift 24s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1.04) translateX(-0.6%); } to { transform: scale(1.1) translateX(0.6%); } }
.duo::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(5,6,12,0.35) 0%, rgba(5,6,12,0) 24%, rgba(5,6,12,0) 36%, rgba(5,6,12,0.9) 100%); }
/* Both sides share one grid, so the badge, the headline and each pair of points sit on the same line. */
/* The two planets behind the card, and the storm on its Mars side */
.duo-stage { grid-column: span 12; position: relative; }
.duo-stage > .fig { position: relative; z-index: 1; }
.orb { position: absolute; z-index: 0; width: clamp(340px, 40vw, 600px); aspect-ratio: 1; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity 2.4s ease, transform 3s cubic-bezier(.2,.8,.2,1); }
.orb canvas { width: 100%; height: 100%; display: block; border-radius: 50%; }
.orb::after { content: ""; position: absolute; inset: -9%; border-radius: 50%; pointer-events: none; }
.orb.earth { left: calc(-0.42 * clamp(340px, 40vw, 600px)); top: 46%; transform: translate(-30px, 40px); }
.orb.earth::after { background: radial-gradient(closest-side, rgba(120,175,255,0) 72%, rgba(120,175,255,0.32) 85%, rgba(120,175,255,0) 100%); }
.orb.mars { right: calc(-0.4 * clamp(340px, 40vw, 600px)); top: 6%; transform: translate(30px, -40px); }
.orb.mars::after { background: radial-gradient(closest-side, rgba(255,150,100,0) 72%, rgba(255,150,100,0.3) 85%, rgba(255,150,100,0) 100%); }
.orb.in { opacity: 1; transform: none; }
.duo-veil, .duo-dust { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 44%, #000 66%); mask-image: linear-gradient(90deg, transparent 42%, #000 62%); }
.duo-dust { width: 100%; height: 100%; }
.duo-veil { overflow: hidden; }
.duo-veil > i { position: absolute; top: 0; bottom: 0; left: 0; width: calc(100% + 1400px); background: var(--veil) 0 0 / 1400px 100% repeat-x; opacity: 0.8; will-change: transform; }
.duo.blowing .duo-veil > i { animation: veil1 34s linear infinite; }
/* The two-world rim: blue down Earth's side, rust down Mars's, a soft glow of each colour behind, and a glint that
   runs round the edge every nine seconds. The pin marks the spot the visor below looks at closely. */
@property --ga { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.duo-stage > .rim { position: absolute; inset: 0; z-index: 2; border-radius: 22px; pointer-events: none; padding: 1.5px;
  background: linear-gradient(90deg, #7DB4FF 0%, #A9CCFF 38%, #F4A47A 62%, #E8784A 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.duo-stage > .rim.glint { padding: 2px; background: conic-gradient(from var(--ga), transparent 0deg 336deg, rgba(255,255,255,0.95) 352deg, transparent 360deg); opacity: 0; filter: drop-shadow(0 0 6px #fff); }
.mw.blowing .duo-stage > .rim.glint { animation: glint 9s linear infinite 1.5s; }
@keyframes glint { 0% { --ga: 0deg; opacity: 0; } 3% { opacity: 1; } 42% { --ga: 360deg; opacity: 1; } 45%, 100% { --ga: 360deg; opacity: 0; } }
.rim-glow { position: absolute; inset: -4px; z-index: 0; border-radius: 26px; pointer-events: none; background: linear-gradient(90deg, #5E9BFF, #8DB8FF 38%, #F08A58 62%, #E06A3A); filter: blur(22px); opacity: 0.5; }
.sill { position: absolute; z-index: 3; left: 0; top: -30px; pointer-events: none; }
.pin { position: absolute; z-index: 1; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #FFE4CC;
  box-shadow: 0 0 0 3px rgba(255,190,150,0.45), 0 0 24px 8px rgba(255,140,90,0.75); }
.pin::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid rgba(255,214,182,0.9); animation: pinPulse 2.4s ease-out infinite; }
@keyframes pinPulse { from { transform: scale(0.6); opacity: 1; } to { transform: scale(3.2); opacity: 0; } }
.pin-line { position: absolute; z-index: 1; left: calc(var(--x) * 100%); top: calc(var(--y) * 100% + 10px); bottom: 0; width: 2px; margin-left: -1px; pointer-events: none; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,214,182,0.9), rgba(255,214,182,0) 70px, rgba(255,214,182,0) calc(100% - 60px), rgba(255,214,182,0.85)); }
.pin-line::after { content: ""; position: absolute; left: 0; right: 0; height: 40px; top: -40px; background: linear-gradient(180deg, transparent, #fff, transparent); animation: travel 3s linear infinite; }
@keyframes travel { to { top: 100%; } }
.drop { position: absolute; z-index: 2; left: calc(var(--x) * 100%); top: 100%; width: 2px; height: 22px; margin-left: -1px; pointer-events: none; overflow: visible; background: rgba(255,214,182,0.85); box-shadow: 0 0 10px rgba(255,170,120,0.9); }
.drop::before { content: ""; position: absolute; left: -4px; bottom: -6px; width: 10px; height: 10px; border-radius: 50%; background: #FFE4CC; box-shadow: 0 0 14px 4px rgba(255,150,100,0.8); }
/* Your suit's visor: the suit's own white helmet shell (03-08: crisp white, graphite, thin coral piping), four readouts
   round the visor's display, opening out from the pin above. */
.mw .fig.visor { padding: 50px 22px; border-radius: 46px; border: 0; color: var(--ink); overflow: hidden; isolation: isolate;
  background: linear-gradient(165deg, #FFFFFF, #EEEBE6 55%, #DAD5CE);
  box-shadow: 0 50px 110px -40px rgba(0,0,0,0.9), inset 0 1px 0 #fff, inset 0 -14px 30px rgba(60,40,30,0.12); }
/* The visor's display is a Martian afternoon: the butterscotch sky high up, a pale Sun, and the stop's own landscape
   rising from the bottom to a fifth of the way down. The close-up sits on it in frosted white glass. The page's ink,
   muted and rule colours are set here, so any stop's close-up takes this look without changes of its own. */
.vis-screen { position: relative; z-index: 1; isolation: isolate; overflow: hidden; border-radius: 24px; padding: 26px 26px 24px; min-height: 380px;
  background: linear-gradient(180deg, #C98F6A 0%, #E2B08A 22%, #F0CDAE 40%, #F6DEC6 100%);
  --ink: #1D1B19; --muted: #4E433C; --rule: rgba(60,40,30,0.14); --card: transparent; color: var(--ink);
  box-shadow: 0 0 0 3px #2E2C31, 0 0 0 4px rgba(255,255,255,0.6), inset 0 0 30px rgba(60,40,30,0.12); }
.vis-screen > *:not(i) { position: relative; z-index: 2; }
.vis-view { position: absolute; inset: -20px; z-index: 0; pointer-events: none; background: var(--view) 50% 62% / cover no-repeat; filter: saturate(1.15) brightness(1.02);
  -webkit-mask-image: linear-gradient(180deg, transparent 8%, rgba(0,0,0,0.55) 26%, #000 46%); mask-image: linear-gradient(180deg, transparent 8%, rgba(0,0,0,0.55) 26%, #000 46%); }
.vis-view::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 84% 12%, rgba(255,255,255,0.9) 0 1.6%, rgba(200,225,255,0.35) 4.5%, rgba(255,255,255,0) 16%), linear-gradient(180deg, rgba(246,222,198,0) 50%, rgba(40,20,12,0.18)); }
.vis-scan { position: absolute; left: 0; right: 0; top: -20%; height: 18%; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.22) 90%, rgba(255,255,255,0)); }
.mw.blowing .vis-scan { animation: scan 7s cubic-bezier(.5,0,.5,1) infinite 1s; }
@keyframes scan { 0% { top: -20%; } 60%, 100% { top: 110%; } }
.vis-corners { position: absolute; inset: 10px; z-index: 1; pointer-events: none; --c: rgba(46,44,49,0.55);
  background: linear-gradient(var(--c), var(--c)) 0 0 / 22px 1.5px, linear-gradient(var(--c), var(--c)) 0 0 / 1.5px 22px,
    linear-gradient(var(--c), var(--c)) 100% 0 / 22px 1.5px, linear-gradient(var(--c), var(--c)) 100% 0 / 1.5px 22px,
    linear-gradient(var(--c), var(--c)) 0 100% / 22px 1.5px, linear-gradient(var(--c), var(--c)) 0 100% / 1.5px 22px,
    linear-gradient(var(--c), var(--c)) 100% 100% / 22px 1.5px, linear-gradient(var(--c), var(--c)) 100% 100% / 1.5px 22px; background-repeat: no-repeat; }
/* The title: "Mars up close" on a coral sample tag, the kind tied to a rock sample, with a punched eyelet and a
   stitched edge, tilted as if just tied on; the title beside it in dark ink. */
.vis-screen h3 { align-items: center; gap: 16px; font-size: clamp(30px, 3.2vw, 44px); color: #1D1210; filter: drop-shadow(0 6px 10px rgba(90,40,20,0.22)); }
.vis-screen h3 > .ico { display: none; }
.vis-screen h3 .ck { position: relative; color: #FFF6EE; text-shadow: 0 1px 0 rgba(0,0,0,0.18); padding: 11px 30px 11px 40px; font-size: 0.58em; letter-spacing: 0.06em;
  background: linear-gradient(180deg, #D8734A, #BE5631); clip-path: polygon(14px 0, 100% 0, calc(100% - 16px) 100%, 14px 100%, 0 50%); transform: rotate(-2.5deg);
  outline: 1.5px dashed rgba(255,236,220,0.55); outline-offset: -6px; }
.vis-screen h3 .ck::before { content: ""; position: absolute; left: 17px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; background: #F3DAC4;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5), 0 0 0 2.5px #8E3A1E; }
.vis-screen .line { color: #3E2F27; }
.vis-screen .note { width: fit-content; max-width: 100%; padding: 12px 16px; border-radius: 14px; background: rgba(255,252,247,0.86); color: #3E2F27; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 8px 24px -16px rgba(60,30,10,0.5); }
/* the close-ups' own panels, as frosted white glass over the view */
.vis-screen .layer, .vis-screen .dread, .vis-screen .soilfig > div { background: rgba(255,252,247,0.84); border-color: rgba(60,40,30,0.12); box-shadow: 0 8px 24px -16px rgba(60,30,10,0.5);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.vis-screen .layer.on { background: #fff; border-color: #1D1B19; box-shadow: 0 10px 30px -14px rgba(60,30,10,0.6); }
.vis-screen .wellnote { background: rgba(231,240,248,0.92); color: #18344F; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0.6; }
.vis-screen .wellnote.on { opacity: 1; }
.vis-screen .tab { background: rgba(255,255,255,0.78); color: #1D1B19; border-color: rgba(60,40,30,0.15); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.vis-screen .tab[aria-pressed="true"] { background: #1D1B19; color: #FFF4EA; border-color: #1D1B19; }
.vis-screen .dread .shield, .vis-screen .dread .meter { background: #EFE8DE; }
.vis-screen .dig > svg, .vis-screen .dose canvas { box-shadow: 0 14px 34px -16px rgba(60,30,10,0.7); }
/* the helmet: coral piping inside the shell, a bright reflection on its top edge, away from the title */
.vis-tint { position: absolute; inset: 10px; z-index: 2; pointer-events: none; border: 1.5px solid rgba(224,110,70,0.75); border-radius: 38px; }
.vis-glare { position: absolute; z-index: 0; pointer-events: none; inset: 0; border-radius: inherit;
  background: radial-gradient(ellipse 60% 22% at 25% 0%, rgba(255,255,255,0.95), rgba(255,255,255,0) 70%); }
.hud { position: absolute; z-index: 4; left: 34px; right: 34px; display: flex; justify-content: space-between; gap: 12px; pointer-events: none;
  font: 500 11.5px/1 var(--wum-mono); letter-spacing: 0.16em; text-transform: uppercase; color: #7A6A60; }
.hud.top { top: 18px; } .hud.bot { bottom: 18px; }
.hud span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.hud .ico { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.hud b { color: #1D1B19; font-weight: 600; letter-spacing: 0.06em; }
.hud span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #E0825E; animation: hudBlink 2s steps(2) infinite; }
.hud span:nth-child(2)::before { animation-delay: 1s; }
@keyframes hudBlink { 50% { opacity: 0.25; } }
.mw .fig.visor.reveal { opacity: 1; transform: none; clip-path: circle(3% at var(--px, 50%) 0%); }
.mw .fig.visor.reveal.in { clip-path: circle(160% at var(--px, 50%) 0%); transition: clip-path 1.3s cubic-bezier(.6,0,.2,1) 0.15s; }
@media (prefers-reduced-motion: reduce) { .mw .fig.visor.reveal { clip-path: none; } .pin::before, .pin-line::after, .drop::after, .hud span::before { animation: none; } }
.duo-txt { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 8%; padding: 30px 34px; }
.duo .side { display: grid; grid-template-rows: subgrid; grid-row: span var(--n); row-gap: 10px; align-content: end; color: #fff; }
.duo .side ul { display: contents; }
.duo .side h4 { align-self: end; }
.side .who { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 7px 12px; border-radius: 999px; font: 600 11px/1 var(--wum-mono); letter-spacing: 0.18em; text-transform: uppercase; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.side.earth .who { background: rgba(42,111,168,0.78); box-shadow: 0 0 24px rgba(95,183,234,0.55); }
.side.mars .who { background: rgba(180,80,43,0.82); box-shadow: 0 0 24px rgba(224,130,94,0.55); }
.side .who .ico { font-size: 18px; }
.side h4 { margin: 0; font: 700 clamp(30px, 3.2vw, 46px)/0.92 var(--wum-display); text-transform: uppercase; text-shadow: 0 4px 24px rgba(0,0,0,0.6); }
.side ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.side li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14.5px; line-height: 1.4; color: rgba(255,255,255,0.92); text-shadow: 0 2px 12px rgba(0,0,0,0.7); }
.side li i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 16px; }
.side.earth li i { background: rgba(95,183,234,0.28); color: #CFEAFF; box-shadow: inset 0 0 0 1px rgba(160,215,255,0.45); }
.side.mars li i { background: rgba(240,140,90,0.28); color: #FFD8C2; box-shadow: inset 0 0 0 1px rgba(255,180,140,0.45); }
.side li b { display: block; font: 600 10.5px/1.3 var(--wum-mono); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 2px; }
.side.earth li b { color: #A9D8FF; } .side.mars li b { color: #FFC3A3; }
.diff-txt { display: none; }
@media (max-width: 700px) {
  .fig.diffig { padding: 0; }
  .duo { aspect-ratio: 4 / 3; min-height: 0; }
  .orb { display: none; }
  .pin-line, .drop, .sill { display: none; }
  .mw .fig.visor { padding: 40px 10px; border-radius: 34px; }
  .vis-tint { border-radius: 26px; inset: 7px; }
  .vis-screen { min-height: 300px; }
  .vis-screen h3 { font-size: 28px; row-gap: 10px; }
  .vis-screen { padding: 18px 14px; border-radius: 18px; }
  .hud { left: 18px; right: 18px; font-size: 9px; letter-spacing: 0.1em; }
  .hud small { display: none; } .hud.top { top: 14px; } .hud.bot { bottom: 14px; }
  .duo-txt { padding: 14px; }
  .duo .side h4, .duo .side ul { display: none; }
  .duo .side.mars { justify-items: end; }
  .duo::after { background: linear-gradient(180deg, rgba(5,6,12,0.2), rgba(5,6,12,0) 40%, rgba(5,6,12,0.5)); }
  /* On a phone the comparison is laid out as pairs: the two headlines side by side, then each label once with its
     Earth answer and its Mars answer next to each other. */
  .diff-txt { display: grid; gap: 1px; background: #0B090C; }
  .dt-heads, .dt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; }
  .dt-heads > div { display: grid; gap: 6px; padding: 16px 12px; color: #fff; }
  .diff-txt .earth { background: linear-gradient(160deg, #2A6FA8, #173F66); }
  .diff-txt .mars { background: linear-gradient(160deg, #C0603A, #7A2E1A); }
  .dt-heads .who { display: inline-flex; align-items: center; gap: 6px; font: 600 9.5px/1 var(--wum-mono); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.85; }
  .dt-heads h4 { margin: 0; font: 700 21px/0.95 var(--wum-display); text-transform: uppercase; }
  .dt-l { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px 8px; background: #17121A; color: #F2C9A6; font: 600 10.5px/1 var(--wum-mono); letter-spacing: 0.14em; text-transform: uppercase; }
  .dt-l .ico { font-size: 16px; }
  .dt-row > .earth, .dt-row > .mars { padding: 10px 12px 12px; font-size: 13.5px; line-height: 1.4; color: #fff; }
}
@media (prefers-reduced-motion: reduce) { .world img { animation: none; } }
/* Living with it: the daily-life line, then Arcadia City against Self-sustaining Mars over the era's own picture. */
.live { grid-column: span 12; position: relative; left: 50%; width: 100vw; margin-left: -50vw; height: clamp(560px, 46vw, 760px); overflow: hidden; isolation: isolate; color: #FFF4EA; background: #0B090C; }
.lv-stage { position: absolute; inset: 0; isolation: isolate; touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.lv-pic { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.lv-pic.far { clip-path: inset(0 0 0 var(--cut)); }
.lv-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(10,7,9,0.45), rgba(10,7,9,0) 22%, rgba(10,7,9,0) 58%, rgba(10,7,9,0.75)); }
.lv-handle { position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--cut); width: 2px; margin-left: -1px; padding: 0; border: 0; background: #fff; box-shadow: 0 0 18px rgba(255,220,180,0.9); cursor: ew-resize; }
.lv-handle i { position: absolute; top: 50%; left: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.5); transition: transform 0.2s; }
.lv-handle i::before, .lv-handle i::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -7px; border: 7px solid transparent; }
.lv-handle i::before { left: 11px; border-right: 10px solid #1D1210; border-left: 0; } .lv-handle i::after { right: 11px; border-left: 10px solid #1D1210; border-right: 0; }
.live.dragging .lv-hint, .live.touched .lv-hint { opacity: 0; }
.live.dragging .lv-handle i, .lv-handle:focus-visible i { transform: scale(1.12); }
.lv-handle:focus-visible { outline: none; box-shadow: 0 0 0 3px #E0825E, 0 0 18px rgba(255,220,180,0.9); }
.lv-era { position: absolute; z-index: 2; top: 26px; padding: 10px 16px; border-radius: 999px; background: rgba(14,10,10,0.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 700 15px/1 var(--wum-display); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; transition: opacity 0.3s; }
.lv-era small { display: block; margin-top: 4px; font: 600 10.5px/1 var(--wum-mono); letter-spacing: 0.14em; color: #F2C9A6; }
.lv-era.city, .lv-txt.city { right: calc(100% - var(--cut) + 18px); } .lv-era.far, .lv-txt.far { left: calc(var(--cut) + 18px); }
.lv-txt { position: absolute; z-index: 2; bottom: 30px; width: min(340px, calc(50vw - 40px)); padding: 16px 18px; border-radius: 14px; background: rgba(14,10,10,0.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: opacity 0.3s; }
.lv-txt b { display: block; margin-bottom: 6px; font: 700 22px/1 var(--wum-display); text-transform: uppercase; color: #F2C9A6; }
.lv-txt p { margin: 0; font-size: 14.5px; line-height: 1.45; color: #FFF4EA; }
.live.left-small .city, .live.right-small .far { opacity: 0; }
.lv-hint { position: absolute; z-index: 4; left: var(--cut); top: calc(50% + 40px); transform: translateX(-50%); padding: 6px 10px; border-radius: 999px; background: rgba(14,10,10,0.6); white-space: nowrap; transition: opacity 0.4s; font: 600 10px/1 var(--wum-mono); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,244,234,0.7); pointer-events: none; }
/* The note home: a cream postcard pinned over the picture, postmarked from Arcadia City. */
.note-home { position: absolute; z-index: 4; left: max(18px, calc(50% - 590px)); top: 96px; width: min(380px, 40vw); transform: rotate(-2.5deg); padding: 22px 24px 18px; border-radius: 4px; background: #FBF6EC; color: #2A1D14; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.65); cursor: default; }
.note-home::before { content: ""; position: absolute; inset: 8px; border: 1.5px dashed rgba(180,80,43,0.35); pointer-events: none; }
.note-home h5 { margin: 0; font: 600 10.5px/1 var(--wum-mono); letter-spacing: 0.18em; text-transform: uppercase; color: #B4502B; }
.nh-post { position: absolute; right: 74px; top: 22px; width: 96px; height: 96px; border-radius: 50%; border: 1.5px solid rgba(60,60,80,0.45); display: grid; place-items: center; text-align: center; font: 600 8.5px/1.35 var(--wum-mono); letter-spacing: 0.04em; text-transform: uppercase; color: rgba(60,60,80,0.75); transform: rotate(-12deg); }
.nh-post:empty { display: none; }
.nh-stamp { position: absolute; right: 18px; top: 16px; width: 58px; height: 70px; display: grid; place-items: center; border: 2px solid #C9563A; background: repeating-linear-gradient(45deg, #FBF6EC 0 4px, #F3E5D2 4px 8px); color: #C9563A; transform: rotate(4deg); }
.nh-stamp .ico { width: 30px; height: 30px; }
.note-home p { margin: 76px 0 12px; font: 500 20px/1.4 "Segoe Print", "Bradley Hand", "Caveat", cursive; color: #2C2440; }
.note-home em { display: flex; flex-wrap: wrap; gap: 4px 12px; font: 600 11px/1.4 var(--wum-mono); font-style: normal; color: #8A7A6C; }
/* The home panel: the screen on your wall. */
.fig.home-panel { background: linear-gradient(180deg, #1C2128, #12161C); color: #E8F1FA; border: 10px solid #2A2F37; border-radius: 26px; box-shadow: 0 0 0 1px #000, 0 30px 60px -30px rgba(0,0,0,0.7), inset 0 0 40px rgba(120,200,255,0.06); --ink: #E8F1FA; --muted: #A9BCD0; --rule: rgba(124,200,255,0.25); }
.home-panel h3 { color: #fff; } .home-panel h3 .ck { color: #7CC8FF; } .home-panel h3 .ico { background: rgba(124,200,255,0.15); color: #7CC8FF; }
.hp-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin: 0 0 14px; font: 600 11px/1 var(--wum-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #7FA3C4; }
.hp-bar i { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #74E3A6; box-shadow: 0 0 8px #74E3A6; animation: hpPulse 2.4s ease-in-out infinite; }
@keyframes hpPulse { 50% { opacity: 0.45; } }
@media (max-width: 700px) {
  .live { height: auto; overflow: visible; background: none; }
  .note-home { position: relative; left: auto; top: auto; width: auto; margin: 0 6px 22px; transform: rotate(-1deg); }
  .note-home p { font-size: 17px; margin-top: 84px; }
  .lv-stage { position: relative; height: 440px; border-radius: 18px; overflow: hidden; margin: 0 14px; }
  .lv-txt { width: calc(50vw - 40px); padding: 10px 12px; bottom: 16px; } .lv-txt b { font-size: 16px; } .lv-txt p { font-size: 12.5px; }
  .lv-era { top: 14px; padding: 8px 12px; font-size: 12px; }
  .lv-hint { display: none; }
}
/* The home screen (Everyday life on every stop). */
.home-panel .hs { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.hs-screen { position: relative; min-height: 440px; border-radius: 16px; overflow: hidden; background-size: cover; background-position: 50% 45%; isolation: isolate; }
.hs-screen::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,12,18,0.35), rgba(10,12,18,0.05) 40%, rgba(10,12,18,0.7)); }
.hs-clock { position: absolute; left: 22px; top: 18px; color: #fff; text-shadow: 0 4px 20px rgba(0,0,0,0.5); }
.hs-time { display: block; font: 700 clamp(52px, 5vw, 72px)/1 var(--wum-display); font-variant-numeric: tabular-nums; }
.hs-date { display: block; margin-top: 6px; font: 600 12px/1.3 var(--wum-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #F2C9A6; }
.hs-info { position: absolute; right: 18px; top: 22px; display: grid; gap: 6px; justify-items: end; }
.hs-info span { padding: 6px 10px; border-radius: 999px; background: rgba(10,12,18,0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font: 600 11px/1 var(--wum-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.hs-info span:empty { display: none; }
.hs-sky { position: absolute; left: 16px; right: 16px; bottom: 16px; height: 42px; border-radius: 10px; overflow: hidden;
  background: linear-gradient(90deg, #1B1830 0%, #2A2244 22%, #C98A5C 27%, #E9C08F 38%, #E8C08A 50%, #E9C08F 62%, #D98A5A 73%, #2A2244 78%, #1B1830 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2); }
.hs-now { position: absolute; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: #FFF3D6; box-shadow: 0 0 22px 8px rgba(255,230,180,0.75); }
.hs-sky em { position: absolute; top: 4px; bottom: 4px; width: 2px; margin-left: -1px; background: rgba(255,255,255,0.75); }
.hs-list { display: grid; gap: 12px; align-content: center; }
.hs-note { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 3px 14px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 14px 30px -18px rgba(0,0,0,0.8); }
.hs-pic { grid-row: span 4; width: 76px; height: 76px; border-radius: 12px; background-size: cover; }
.hs-t { font: 600 10.5px/1 var(--wum-mono); letter-spacing: 0.12em; color: #7FA3C4; }
.hs-note b { font: 700 20px/1.05 var(--wum-display); text-transform: uppercase; color: #fff; }
.hs-note p { margin: 0; font-size: 14px; line-height: 1.4; color: #C9D7E6; }
.hs-tag { width: fit-content; margin-top: 2px; padding: 4px 9px; border-radius: 999px; background: rgba(124,200,255,0.12); color: #7CC8FF; font: 600 10px/1 var(--wum-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.hs .hs-note { opacity: 0; transform: translateX(26px) scale(0.97); }
.hs.go .hs-note { animation: hsIn 0.6s cubic-bezier(.2,.9,.3,1.2) forwards; animation-delay: calc(0.3s + var(--k) * 0.9s); }
@keyframes hsIn { to { opacity: 1; transform: none; } }
@media (max-width: 860px) { .home-panel .hs { grid-template-columns: minmax(0, 1fr); } .hs-screen { min-height: 340px; } .hs-info { right: auto; left: 22px; top: 118px; justify-items: start; } }
@media (prefers-reduced-motion: reduce) { .hs .hs-note { opacity: 1; transform: none; animation: none; } }
/* The bar of beats: at the bottom of the screen on most screens; on a wide screen a slim rail of numbered dots in the
   left margin, shown only for the chapter you are in, with each beat's name on hover. */
@media (max-width: 1399px) { .beatnav { top: auto; bottom: 14px; margin: 18px auto 0; } }
@media (min-width: 1400px) {
  .beatnav { position: fixed; left: 22px; top: 50%; transform: translateY(-50%); flex-direction: column; align-items: flex-start; gap: 4px; margin: 0; padding: 6px; border-radius: 30px; opacity: 0; pointer-events: none; transition: opacity 0.4s; }
  .bench.here .beatnav { opacity: 1; pointer-events: auto; }
  .beatnav { background: rgba(22,16,14,0.72); border-color: rgba(255,214,182,0.22); box-shadow: 0 14px 40px -18px rgba(0,0,0,0.7); }
  .beatnav a b { background: rgba(224,130,94,0.85); }
  .beatnav a { position: relative; padding: 6px; font-size: 0; gap: 0; }
  .beatnav a b { width: 26px; height: 26px; font-size: 13px; }
  .beatnav a::after { content: attr(data-t); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); padding: 7px 12px; border-radius: 999px; background: var(--ink); color: #FFF4EA; font: 600 13px/1 var(--wum-body); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
  .beatnav a:hover::after { opacity: 1; }
  .beatnav a.on { background: transparent; }
  .beatnav a.on b { background: #FFF4EA; color: #1D1210; box-shadow: 0 0 0 3px rgba(224,130,94,0.5), 0 0 16px rgba(224,130,94,0.8); }
}
@media (max-width: 960px) { .beatnav a { padding: 8px; font-size: 0; gap: 0; } .beatnav a b { font-size: 12px; } }
@media (max-width: 700px) { .beat-h h3 { white-space: normal; } .beat-h .bi { width: 42px; height: 42px; font-size: 20px; } }

/* Part 7. Coming next, what's real, and the way home */
.home { display: inline-flex; align-items: center; gap: 10px; margin: 40px 0 60px; padding: 13px 20px; border-radius: 999px; border: 1px solid var(--wum-stage-glass-line); color: var(--wum-stage-ink); text-decoration: none; font-weight: 600; }
.home:hover { background: rgba(255,240,228,0.06); }

@media (max-width: 1100px) { .grid7 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) {
  .fig.s7, .fig.s5, .fig.s6, .fig.s4, .fig.s8 { grid-column: span 12; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step:nth-child(2)::after { display: none; }
}
@media (max-width: 700px) {
  .spot span { font-size: 11.5px; padding: 6px 9px; }
  .spot.open span::after { display: none; }
  .hero h1 { font-size: clamp(44px, 13vw, 64px); }
  .hero .lede { font-size: 15px; padding: 0 12px; }
  .grid7 { grid-template-columns: minmax(0, 1fr); }
  .chap { min-height: 78svh; padding-bottom: 44px; }
  .chap .a { font-size: 15.5px; }
  .bench { padding: 0 0 56px; }
  .mw { padding-bottom: 110px; }
  .mw-glow { filter: blur(30px) saturate(1.35); }
  .fig { padding: 20px 16px 18px; border-radius: 18px; }
  .types { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .step::after { display: none; }
  .hero-foot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .wr, .flow, .pulse, .pool, .drum, .spot i::after, .scrollcue::after { animation: none; }
  .chap > img { transform: none; transition: none; }
}


/* The ending of every page (05-17 explore.finale): it rises over the page above with a curved, glowing edge, like the
   planet's rim. Then the walk through the city, the next stop as a doorway, the ways back as picture cards, and a
   picture of the plain at dawn as the page's foot, the site's mark in the sky above the rising Sun (the logo is the
   same Sun rising over Mars). */
body[data-stop] .bench { padding-bottom: 0; }
body:not([data-stop]) .finale { margin-top: 0; }
.beatnav { transition: opacity 0.3s; } body.fin-in .beatnav { opacity: 0; pointer-events: none; }   /* the beats' bar steps aside once the ending is in view */
.finale { position: relative; z-index: 2; isolation: isolate; overflow: hidden; margin-top: -72px; padding: clamp(72px, 7vw, 96px) 0 0; text-align: center; background: #0A0710;
  border-radius: 50% 50% 0 0 / 72px 72px 0 0; box-shadow: 0 -1.5px 0 rgba(255,214,175,0.55), 0 -22px 50px -14px rgba(224,130,94,0.45); }
.fin-stars { position: absolute; inset: 0 0 auto; height: 900px; z-index: -1; pointer-events: none; opacity: 0.7; -webkit-mask-image: linear-gradient(180deg, #000 10%, transparent 90%); mask-image: linear-gradient(180deg, #000 10%, transparent 90%);
  background-image: radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 33% 8%, #ffe9d6 50%, transparent 51%), radial-gradient(1.5px 1.5px at 58% 22%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 77% 12%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 91% 30%, #ffd9c0 50%, transparent 51%), radial-gradient(1px 1px at 4% 40%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 46% 36%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 68% 44%, #ffe9d6 50%, transparent 51%), radial-gradient(1px 1px at 24% 52%, #fff 50%, transparent 51%);
  background-size: 520px 420px; }
.fin-glow { position: absolute; z-index: -1; left: 50%; top: 40px; width: min(1400px, 140vw); height: 420px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(ellipse 50% 45% at 50% 50%, rgba(224,130,94,0.16), rgba(120,80,160,0.06) 55%, transparent 75%); }

/* 1. The walk through the city: a big title, how many stops are open, and the route. */
.fin-h { display: grid; justify-items: center; gap: 12px; }
.fin-k { margin: 0; font: 700 clamp(34px, 4.6vw, 62px)/0.92 var(--wum-display); text-transform: uppercase; color: #FFF4EA; text-shadow: 0 6px 40px rgba(224,130,94,0.35); }
.fin-p { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 500 11.5px/1 var(--wum-mono); letter-spacing: 0.2em; text-transform: uppercase; color: #F2C9A6; }
.fin-p::before, .fin-p::after { content: ""; width: 28px; height: 1px; background: linear-gradient(90deg, transparent, #E0825E); }
.fin-p::after { transform: scaleX(-1); }
.route { --p: 0px; --rt: 74px; position: relative; display: flex; gap: 10px; margin: 26px 0 54px; padding: var(--rt) 0 0; list-style: none; }
.route.no-here { --rt: 34px; }
.route::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--rt) + 7px); height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(255,240,228,0.16) 6%, rgba(255,240,228,0.16) 94%, transparent); }
.rl { position: absolute; left: 0; top: calc(var(--rt) + 6px); width: var(--p); height: 4px; border-radius: 4px; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, rgba(224,130,94,0), #E0825E 18%, #FFC9A6); box-shadow: 0 0 16px rgba(224,130,94,0.9), 0 0 40px rgba(224,130,94,0.45); transition: transform 1.8s cubic-bezier(.6,0,.2,1) 0.2s; }
.route.in .rl { transform: none; }
.rl-spark { position: absolute; top: 50%; left: 0; width: 70px; height: 10px; margin-top: -5px; border-radius: 50%; opacity: 0;
  background: radial-gradient(ellipse at 80% 50%, #fff, rgba(255,226,180,0.8) 30%, rgba(224,130,94,0) 70%); filter: blur(1px); }
.route.in .rl-spark { animation: rl-run 3.2s cubic-bezier(.45,0,.25,1) 2.1s infinite; }
@keyframes rl-run { 0% { left: -70px; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 20px); opacity: 0; } }
.rg { position: relative; z-index: 1; flex: 1; min-width: 0; display: grid; justify-items: center; gap: 14px; }
.rg-dots { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 9px; min-height: 18px; }
.rd { position: relative; display: block; width: 12px; height: 12px; border-radius: 50%; background: #0D0A10; border: 1.5px solid rgba(255,240,228,0.3);
  transform: scale(0); transition: transform 0.45s cubic-bezier(.3,1.6,.5,1) calc(0.6s + var(--i) * 0.045s), box-shadow 0.25s; }
.route.in .rd { transform: none; }
.rd.on { background: #E0825E; border-color: #FFC9A6; box-shadow: 0 0 12px rgba(224,130,94,0.85); }
.route.in a.rd:hover, .route.in a.rd:focus-visible { transform: scale(1.6); box-shadow: 0 0 20px rgba(255,201,166,1); outline: none; z-index: 3; }
.rd.here { width: 20px; height: 20px; background: #FFE7C2; border-color: #fff; box-shadow: 0 0 0 5px rgba(255,231,194,0.18), 0 0 26px 8px rgba(255,201,166,0.75); }
.rd.here::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1.5px solid rgba(255,231,194,0.7); animation: fin-ping 2.4s ease-out infinite; }
@keyframes fin-ping { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }
.rd.here em { position: absolute; left: 50%; bottom: calc(100% + 14px); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px;
  background: #E0825E; color: #1D1210; white-space: nowrap; font: 600 10px/1 var(--wum-mono); font-style: normal; letter-spacing: 0.14em; text-transform: uppercase; box-shadow: 0 8px 24px -8px rgba(224,130,94,0.95); }
.rd.here em::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 14px; margin-left: -1px; background: linear-gradient(#E0825E, transparent); }
.rd-me { width: 30px; height: 30px; border-radius: 50%; background: #2A1A14 center / cover; box-shadow: 0 0 0 2px #FFE7C2; }
.rd[data-t]:hover::after { content: attr(data-t); position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); padding: 6px 10px; border-radius: 8px;
  background: rgba(20,16,22,0.95); border: 1px solid var(--wum-stage-glass-line); color: var(--wum-stage-muted); white-space: nowrap; font: 600 12px/1 var(--wum-body); pointer-events: none; }
.rd-card { --shift: 0px; position: absolute; left: 50%; bottom: calc(100% + 16px); width: 230px; padding: 0 0 12px; border-radius: 16px; overflow: hidden; text-align: left;
  background: rgba(18,13,20,0.97); border: 1px solid rgba(255,214,175,0.3); box-shadow: 0 24px 60px -20px rgba(0,0,0,0.9), 0 0 30px -8px rgba(224,130,94,0.5);
  transform-origin: 50% 100%; transform: translateX(calc(-50% + var(--shift))) translateY(8px) scale(0.85); opacity: 0; z-index: 5; pointer-events: none; transition: opacity 0.2s, transform 0.3s cubic-bezier(.2,.8,.2,1); }
a.rd:hover .rd-card, a.rd:focus-visible .rd-card { opacity: 1; transform: translateX(calc(-50% + var(--shift))) translateY(0) scale(1); }
.rd-pic { display: block; height: 120px; background: #2A1A14 center / cover; }
.rd-card b { display: block; margin: 12px 14px 4px; font: 700 22px/1 var(--wum-display); text-transform: uppercase; color: #FFF4EA; }
.rg .rd-card small { display: block; margin: 0 14px; font: 500 13px/1.35 var(--wum-body); letter-spacing: 0; text-transform: none; color: var(--wum-stage-muted); }
.rg small { display: flex; align-items: center; gap: 7px; font: 500 10.5px/1.25 var(--wum-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--wum-stage-muted); }
.rg small b { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(255,240,228,0.3); font: 700 11px/1 var(--wum-display); letter-spacing: 0; }
.rg.mine small { color: #FFE2C8; } .rg.mine small b { background: #F2C9A6; color: #1D1210; border-color: #F2C9A6; }

/* 2. The doorway: the next stop's picture drawing slowly closer, its question, and the way in. */
.door { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(380px, 44vw, 540px); border-radius: 28px; overflow: hidden; text-align: left; text-decoration: none; color: #FFF4EA;
  border: 1px solid rgba(255,214,175,0.28); box-shadow: 0 50px 120px -50px rgba(224,110,70,0.75), 0 0 0 1px rgba(0,0,0,0.6); }
.door img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); transition: transform 9s cubic-bezier(.2,.7,.2,1); }
.door.in img { transform: scale(1.02); }
.door:hover img { transform: scale(1.06); transition-duration: 1.4s; }
.door::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7,6,10,0.9) 0%, rgba(7,6,10,0.55) 42%, rgba(7,6,10,0) 75%), linear-gradient(0deg, rgba(7,6,10,0.75), rgba(7,6,10,0) 55%); }
.door-txt { display: grid; justify-items: start; gap: 14px; max-width: 680px; padding: clamp(28px, 5vw, 64px); }
.door-txt small { display: flex; align-items: center; gap: 12px; font: 500 12px/1 var(--wum-mono); letter-spacing: 0.22em; text-transform: uppercase; color: #F2C9A6; }
.door-txt small::before { content: ""; width: 34px; height: 1.5px; background: #E0825E; box-shadow: 0 0 10px #E0825E; }
.door-txt b { font: 700 clamp(52px, 8.4vw, 120px)/0.84 var(--wum-display); text-transform: uppercase; text-shadow: 0 8px 40px rgba(0,0,0,0.55); }
.door-txt p { margin: 0; max-width: 24ch; font: 600 clamp(21px, 2.3vw, 30px)/1.12 var(--wum-display); color: #FFE2C8; }
.door .playbtn { margin-top: 10px; }
.door .playbtn .ico { transition: transform 0.3s; }
.door:hover .playbtn { background: #F09A74; } .door:hover .playbtn .ico { transform: translateX(4px); }

/* 3. The ways back: picture cards, each lifting and glowing when pointed at. */
.fin-cards { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 14px; margin: 18px 0 0; }
.fc { position: relative; isolation: isolate; display: grid; align-content: end; justify-items: start; gap: 6px; min-height: 230px; padding: 20px 20px 18px; border-radius: 22px; overflow: hidden; text-align: left; text-decoration: none; color: #FFF4EA;
  border: 1px solid rgba(255,214,175,0.18); background: #140E12; box-shadow: 0 30px 60px -36px rgba(0,0,0,0.9); transition: transform 0.35s cubic-bezier(.2,.8,.2,1), border-color 0.35s, box-shadow 0.35s; }
.fc-pic { position: absolute; inset: 0; z-index: -2; background: #2A1A14 center / cover; transform: scale(1.04); transition: transform 1.2s cubic-bezier(.2,.8,.2,1), filter 0.4s; filter: saturate(0.9) brightness(0.85); }
.fc::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,7,16,0.1) 0%, rgba(10,7,16,0.55) 45%, rgba(10,7,16,0.95) 100%); }
.fc::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,214,175,0); transition: box-shadow 0.35s; }
.fc:hover, .fc:focus-visible { transform: translateY(-6px); border-color: rgba(255,201,166,0.6); box-shadow: 0 40px 70px -30px rgba(224,110,70,0.65); outline: none; }
.fc:hover .fc-pic, .fc:focus-visible .fc-pic { transform: scale(1.12); filter: saturate(1.1) brightness(1); }
.fc:hover::after { box-shadow: inset 0 0 0 1px rgba(255,214,175,0.35), inset 0 -60px 80px -40px rgba(224,130,94,0.35); }
.fc-ico { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(10,7,16,0.55); border: 1px solid rgba(255,214,175,0.35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #FFC9A6; font-size: 18px; transition: background 0.3s, transform 0.3s, color 0.3s; }
.fc:hover .fc-ico { background: #E0825E; color: #1D1210; transform: rotate(-8deg) scale(1.08); }
.fc.back .fc-ico .ico { transform: rotate(180deg); }
.fc small { font: 500 10.5px/1 var(--wum-mono); letter-spacing: 0.18em; text-transform: uppercase; color: #F2C9A6; }
.fc b { font: 700 clamp(24px, 2.2vw, 30px)/0.95 var(--wum-display); text-transform: uppercase; text-shadow: 0 4px 20px rgba(0,0,0,0.6); }
.fc p { margin: 0; font-size: 13.5px; line-height: 1.4; color: rgba(255,240,228,0.75); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 4. The plain at dawn, with the site's mark above the rising Sun. */
.fin-dawn { --dawn: none; position: relative; margin-top: clamp(-30px, -2vw, -10px); height: max(360px, min(46vw, 640px)); background: var(--dawn) 50% 100% / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%); mask-image: linear-gradient(180deg, transparent 0%, #000 34%); }
.fin-dawn::after { content: ""; position: absolute; inset: auto 0 0; height: 18%; background: linear-gradient(180deg, transparent, rgba(10,7,16,0.55)); }
.fin-sign { position: absolute; left: 50%; top: 28%; z-index: 1; display: grid; justify-items: center; gap: 10px; margin: 0; transform: translateX(-50%); }
.fin-sign .wum-logo { width: 44px; height: 44px; filter: drop-shadow(0 0 18px rgba(140,190,255,0.5)); }
.fin-sign span { font: 500 11px/1 var(--wum-mono); letter-spacing: 0.32em; text-transform: uppercase; color: rgba(255,240,228,0.82); white-space: nowrap; text-shadow: 0 2px 12px rgba(0,0,0,0.8); }

@media (max-width: 960px) { .fin-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .finale { margin-top: -40px; border-radius: 50% 50% 0 0 / 40px 40px 0 0; padding-top: 64px; }
  .route { gap: 4px; margin-bottom: 40px; --rt: 64px; } .route.no-here { --rt: 24px; } .route::before { top: calc(var(--rt) + 3px); } .rl { top: calc(var(--rt) + 2px); }
  .rg-dots { flex-wrap: nowrap; gap: 3px; } .rd { width: 7px; height: 7px; border-width: 1px; } .rd.here { width: 13px; height: 13px; }
  .fin-p { letter-spacing: 0.12em; font-size: 10.5px; } .fin-p::before, .fin-p::after { display: none; }
  .rd.here em { padding: 3px 9px 3px 3px; } .rd-me { width: 24px; height: 24px; } .rd-card { display: none; }
  .rg small { font-size: 0; gap: 0; } .rg small b { font-size: 11px; }
  .door { min-height: 440px; } .door::before { background: linear-gradient(0deg, rgba(7,6,10,0.94) 10%, rgba(7,6,10,0.35) 70%, rgba(7,6,10,0.1)); }
  .door-txt small { letter-spacing: 0.14em; font-size: 11px; }
  .fin-cards { gap: 10px; } .fc { min-height: 170px; padding: 14px 14px 13px; border-radius: 18px; } .fc p { display: none; } .fc-ico { width: 34px; height: 34px; top: 12px; right: 12px; }
  .fin-dawn { height: 440px; background-position: 50% 100%; } .fin-sign { top: 16%; }
}
@media (prefers-reduced-motion: reduce) { .rd.here::before, .route.in .rl-spark { animation: none; } .rd, .rl { transform: none; transition: none; } .door img { transition: none; transform: none; } }