/* The Stones Remember. One stylesheet, one rule set per component (v4, 27 Sept 2026).
   Warm basalt chrome that takes the colour of the stone behind it; lamp gold is the only
   interface accent; Egyptian blue lives in the map's river; red ochre and malachite mark
   only the Then / Today dots. Contrast on --night #14110d: limestone 15.9:1, stone 11.7:1,
   muted 6.6:1, gold 8.6:1, ink #1a1409 on gold 8.4:1. */

:root {
  /* Dark-theme channels for the translucent chrome (the light theme overrides them). */
  --bg-rgb: 20 17 13;
  --bg2-rgb: 28 24 19;
  --fg-rgb: 237 230 214;
  --gold-rgb: 210 170 87;
  --text-body: #e6ddcb;
  --text-dialog: #ebe3d3;
  --caption-ink: #f6f1e7;
  --night: #14110d;
  --night-2: #1c1813;
  --night-3: #26211a;
  --panel: rgb(var(--bg-rgb) / 0.9);
  --chrome: rgb(var(--bg-rgb) / 0.66);
  --limestone: #f2ebdd;
  --stone: #d6cbb6;
  --muted: #a39883;
  --gold: #d2aa57;
  --gold-hi: #e3c27a;
  --gold-tint: rgb(var(--gold-rgb) / 0.16);
  --gold-ring: rgb(var(--gold-rgb) / 0.55);
  --ink: #1a1409;
  --then: #b4523a;
  --now: #4e8c68;
  --river: #1f4e8c;
  --line: rgb(var(--fg-rgb) / 0.12);
  --line-strong: rgb(var(--fg-rgb) / 0.24);
  --serif: 'Cormorant Garamond', 'Cormorant', 'Iowan Old Style', Georgia, serif;
  --sans: 'Source Sans 3', 'Gill Sans', 'Segoe UI', system-ui, sans-serif;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  /* type scale, 1.25 */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 17px;
  --fs-lg: 21px;
  --fs-xl: 26px;
  --fs-2xl: 33px;
  --fs-3xl: 41px;
  --measure: 62ch;
  --radius: 14px;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.28);
  --blur: blur(18px) saturate(1.1);
  --z-stage: 1;
  --z-anchor: 5;
  --z-chrome: 10;
  --z-panel: 20;
  --z-loading: 30;
  --z-header: 40;
  --z-sheet: 45;
  --z-start: 60;
  --z-film: 65;
  --z-halt: 70;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--night); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--night);
  color: var(--limestone);
  font: 400 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
a { color: inherit; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
/* One focus ring everywhere: a gold line with a dark halo, visible on stone and on sky. */
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; box-shadow: 0 0 0 5px rgba(20, 17, 13, 0.55); border-radius: inherit; }
.btn-primary:focus-visible, .create-yours:focus-visible { outline-color: var(--limestone); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 12px 16px; background: var(--limestone); color: var(--night); border-radius: 6px; }
.skip-link:focus { top: 12px; }
.is-visit .skip-link { display: none; }
.eyebrow { margin: 0 0 12px; font: 600 var(--fs-xs)/1.35 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); text-wrap: balance; }
.muted { color: var(--muted); }
.date { font-family: var(--serif); font-style: italic; font-variant-numeric: oldstyle-nums; text-transform: none; letter-spacing: 0.01em; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 26px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: rgb(var(--bg-rgb) / 0.45); color: var(--limestone);
  font: 600 var(--fs-sm)/1 var(--sans); letter-spacing: 0.06em;
  cursor: pointer; text-decoration: none;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.12s var(--ease);
}
.btn:hover { border-color: var(--gold-ring); background: rgb(var(--fg-rgb) / 0.06); }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn-primary:hover { background: var(--gold-hi); border-color: var(--gold-hi); }
.btn-quiet { border-color: transparent; background: transparent; color: var(--stone); }
.btn-quiet:hover { background: rgb(var(--fg-rgb) / 0.06); border-color: transparent; }
.round-btn {
  display: inline-grid; place-items: center; flex: none;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%;
  background: rgb(var(--bg-rgb) / 0.55); color: var(--limestone); cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.round-btn:hover { background: rgb(var(--fg-rgb) / 0.1); border-color: var(--line-strong); }
.round-btn:disabled { opacity: 0.35; cursor: default; }
.round-btn svg { display: block; }
.text-btn { min-height: 44px; padding: 0; border: 0; border-bottom: 1px solid var(--gold-ring); background: none; color: var(--limestone); font: 600 var(--fs-sm)/1.2 var(--sans); letter-spacing: 0.03em; cursor: pointer; }
.text-btn:hover { border-color: var(--gold); }
.text-btn span { color: var(--muted); font-weight: 400; }

/* ---------------------------------------------------------------- header */
.site-header {
  position: absolute; inset: 0 0 auto 0; z-index: var(--z-header);
  display: flex; align-items: center; gap: 12px;
  padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  pointer-events: none;
  background: linear-gradient(180deg, rgb(var(--bg-rgb) / 0.72), rgb(var(--bg-rgb) / 0));
}
.site-header > * { pointer-events: auto; }
.back-link, .create-yours, .quiet-link, .hbtn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 16px; border-radius: 999px;
  font: 600 13.5px/1 var(--sans); letter-spacing: 0.03em; text-decoration: none; white-space: nowrap;
}
.back-link { color: var(--limestone); border: 1px solid var(--line-strong); background: rgb(var(--bg-rgb) / 0.6); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.back-link:hover { border-color: var(--gold-ring); }
.wordmark { display: none; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.quiet-link { border: 0; background: none; color: var(--stone); cursor: pointer; }
.quiet-link:hover { color: var(--limestone); }
.create-yours { color: var(--ink); background: var(--gold); border: 1px solid var(--gold); }
/* secondary header buttons: same height and shape as Create yours, outlined */
.hbtn { color: var(--limestone); border: 1px solid var(--line-strong); background: rgb(var(--bg-rgb) / 0.6); cursor: pointer; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); transition: border-color 0.2s var(--ease), background 0.2s var(--ease); }
.hbtn:hover { border-color: var(--limestone); background: rgb(var(--fg-rgb) / 0.08); }
.hbtn-sm { min-height: 40px; padding: 0 14px; font-size: 13px; }
.is-visit .hbtn-dl { display: none; }
.made-with { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; font: 600 12px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.made-with img { height: 20px; width: auto; opacity: 0.92; }
.made-with a:hover img { opacity: 1; }
.create-yours:hover { background: var(--gold-hi); }
@media (max-width: 1100px) { .hbtn-dl { display: none; } }

/* ---------------------------------------------------------------- shell */
.app { position: relative; flex: 1 0 auto; min-height: 420px; outline: none; }
.is-visit .app { overflow: hidden; min-height: 100dvh; }
.is-visit .exploration-bar { display: none; }

/* ---------------------------------------------------------------- hub */
.hub { position: relative; min-height: 100%; isolation: isolate; overflow: hidden; }
.hub-bg { position: absolute; inset: 0; z-index: -1; background: var(--night); }
.hub-bg-layer { position: absolute; inset: -2%; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.2s var(--ease-io); transform: scale(1.03); }
/* slow push-in over each slide (7 s shown + the crossfades) */
.hub-bg-layer.is-kb { animation: kenburns 9.6s linear forwards; }
@keyframes kenburns { from { transform: scale(1.03) translate3d(0, 0, 0); } to { transform: scale(1.1) translate3d(-1%, -0.6%, 0); } }
.hub-bg-layer.is-on { opacity: 0.66; }
.hub-bg-video { width: 104%; height: 104%; object-fit: cover; }
.hub-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgb(var(--bg-rgb) / 0.96) 0%, rgb(var(--bg-rgb) / 0.86) 36%, rgb(var(--bg-rgb) / 0.25) 62%, rgb(var(--bg-rgb) / 0.55) 100%),
    linear-gradient(0deg, rgb(var(--bg-rgb) / 0.92) 0%, rgb(var(--bg-rgb) / 0) 32%);
}
@keyframes drift { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.1) translate3d(-1.2%, -0.8%, 0); } }
.hub-inner {
  display: grid; grid-template-columns: minmax(0, 560px) minmax(24px, 1fr) minmax(0, 540px);
  gap: 32px; align-items: center;
  min-height: calc(100dvh - 52px);
  padding: 92px clamp(16px, 4.5vw, 72px) 32px;
}
.hub-intro { grid-column: 1; max-width: 580px; }
.hub-title { margin: 0 0 16px; font: 500 clamp(44px, 5.4vw, 86px)/0.94 var(--serif); letter-spacing: -0.012em; text-wrap: balance; }
.hub-title em, .start-title em { font-style: italic; color: var(--gold); font-weight: 500; }
.hub-lede { margin: 0 0 24px; max-width: 52ch; font-size: 17.5px; line-height: 1.6; color: var(--stone); text-wrap: pretty; }
.site-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.site-list > li { border-bottom: 1px solid var(--line); }
.site-row { display: grid; grid-template-columns: 30px 104px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 9px 10px 9px 2px; text-decoration: none; color: inherit; border-radius: 8px; transition: background 0.25s var(--ease); }
.site-list .site-row.is-pending { grid-template-columns: 30px minmax(0, 1fr); }
a.site-row:hover, a.site-row:focus-visible, a.site-row.is-active { background: rgb(var(--fg-rgb) / 0.06); }
.site-num { font: italic 500 24px/1 var(--serif); color: var(--gold); text-align: center; }
.site-thumb { width: 104px; aspect-ratio: 16 / 9; border-radius: 4px; object-fit: cover; background: var(--night-3); box-shadow: 0 0 0 1px var(--line); }
.site-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.site-name { font: 500 24px/1.1 var(--serif); color: var(--limestone); text-wrap: balance; }
.site-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font: 600 12px/1.3 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.site-where { white-space: nowrap; }
.site-date { font: italic 500 16px/1 var(--serif); letter-spacing: 0.02em; text-transform: none; color: var(--gold-hi); font-variant-numeric: oldstyle-nums; }
.site-mode { color: var(--stone); opacity: 0.8; }
.site-progress { color: var(--gold-hi); letter-spacing: 0.08em; }
.site-go { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font: 600 12px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); transition: transform 0.25s var(--ease), color 0.25s var(--ease); }
a.site-row:hover .site-go, a.site-row:focus-visible .site-go, a.site-row.is-active .site-go { color: var(--gold); transform: translateX(3px); }
.site-row.is-soon { opacity: 0.55; cursor: default; }
.soon { color: var(--gold-hi); }
.hub-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 14px 0 0; }
.hub-hint { font: italic 400 16px/1.3 var(--serif); color: var(--muted); }
.noscript { color: var(--stone); font-style: italic; }

/* map and downloads column */
.hub-side { grid-column: 3; justify-self: end; display: flex; flex-direction: column; gap: 20px; width: min(540px, 100%); }
.nile { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.nile-frame { position: relative; height: min(58vh, 640px); aspect-ratio: var(--map-aspect, 0.729); margin: 0 auto; }
.nile-frame > img, .nile-frame > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.nile-frame.is-image { border-radius: 3px; box-shadow: 0 0 0 1px var(--gold-ring), 0 0 0 7px var(--night), 0 0 0 8px rgb(var(--gold-rgb) / 0.22), 0 30px 80px rgba(0, 0, 0, 0.6); }
.nile-frame.is-image > img { border-radius: 3px; object-fit: cover; }
.nile-frame.is-image::after { content: ''; position: absolute; inset: 0; border-radius: 3px; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(40, 26, 10, 0.3) 100%); }
.nile-caption { font: italic 400 16px/1.3 var(--serif); color: var(--stone); }
.pin { position: absolute; z-index: 3; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); display: flex; align-items: center; gap: 8px; min-height: 44px; transform: translate(-8px, -50%); text-decoration: none; color: #14110d; white-space: nowrap; }
.pin.is-left { flex-direction: row-reverse; transform: translate(calc(-100% + 8px), -50%); text-align: right; }
.pin.is-active { z-index: 4; }
.pin-dot { position: relative; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--then); box-shadow: 0 0 0 2px var(--limestone), 0 2px 6px rgba(0, 0, 0, 0.45); }
.pin.is-active .pin-dot, .pin:hover .pin-dot, .pin:focus-visible .pin-dot { background: var(--gold); }
.pin-dot::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 1.5px solid var(--then); opacity: 0; transform: scale(0.6); transition: opacity 0.3s var(--ease), transform 0.4s var(--ease); }
.pin:hover .pin-dot::after, .pin:focus-visible .pin-dot::after, .pin.is-active .pin-dot::after { opacity: 1; transform: scale(1); }
.pin-text { display: flex; flex-direction: column; line-height: 1.1; padding: 4px 9px 5px; border-radius: 3px; background: rgba(242, 235, 221, 0.93); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); }
.pin-name { font: 600 16px/1.1 var(--serif); color: #14110d; }
.pin-date { font: italic 600 13.5px/1.2 var(--serif); color: #6e4414; font-variant-numeric: oldstyle-nums; }
.pin-check { font: 700 11px/1 var(--sans); color: var(--now); }
.pin.is-soon { opacity: 0.6; }
.nile-svg text { font-family: var(--serif); fill: #cfc5b0; }
.nile-svg .m-sea { font-style: italic; font-size: 17px; fill: #8fb1dc; text-anchor: middle; }
.nile-svg .m-town { font-size: 14px; fill: #a89c86; }
.nile-svg .m-region { font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.32em; fill: rgb(var(--fg-rgb) / 0.34); text-anchor: middle; }
.nile-svg .m-note { font-style: italic; font-size: 12px; fill: rgb(var(--gold-rgb) / 0.55); }
.downloads-title { margin: 0 0 12px; font: 600 var(--fs-xs)/1.3 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.dl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dl { display: flex; align-items: flex-start; gap: 14px; min-height: 64px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--limestone); text-decoration: none; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.15s var(--ease); }
.dl:hover, .dl:focus-visible { border-color: var(--gold-ring); background: rgb(var(--bg2-rgb) / 0.92); }
.dl:active { transform: scale(0.985); }
.dl-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: rgb(var(--fg-rgb) / 0.08); color: var(--limestone); }
.dl-skill .dl-icon { background: var(--gold); color: var(--ink); }
.dl-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dl-kind { font: 600 12px/1.2 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.dl strong { font: 500 20px/1.15 var(--serif); color: var(--limestone); }
.dl-desc { font-size: 13.5px; line-height: 1.45; color: var(--stone); }

/* ---------------------------------------------------------------- start and film */
.start { position: fixed; inset: 0; z-index: var(--z-start); display: grid; place-items: center; padding: 24px; background: var(--night); transition: opacity 0.9s var(--ease-io); overflow-y: auto; }
.start.is-leaving { opacity: 0; pointer-events: none; }
.start-bg { position: absolute; inset: -3%; background-size: cover; background-position: center 40%; opacity: 0; transition: opacity 1.6s var(--ease-io); animation: push 30s ease-out forwards; }
.start-bg.is-on { opacity: 0.82; }
@keyframes push { from { transform: scale(1.02); } to { transform: scale(1.12); } }
.start::before { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 70% 60% at 50% 52%, rgb(var(--bg-rgb) / 0.62) 0%, rgb(var(--bg-rgb) / 0.28) 55%, rgb(var(--bg-rgb) / 0.72) 100%), linear-gradient(0deg, rgb(var(--bg-rgb) / 0.7), rgb(var(--bg-rgb) / 0) 40%); }
.start-inner { position: relative; z-index: 2; max-width: 680px; text-align: center; display: flex; flex-direction: column; align-items: center; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55); }
.start-title { margin: 0; font: 500 clamp(52px, 8.8vw, 112px)/0.95 var(--serif); letter-spacing: -0.012em; text-wrap: balance; }
.rule { display: flex; align-items: center; gap: 14px; width: 220px; margin: 24px 0 20px; }
.rule::before, .rule::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-ring)); }
.rule::after { transform: scaleX(-1); }
.rule span { width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid var(--gold); }
.start-lede { margin: 0 0 32px; max-width: 36ch; font: 400 22px/1.5 var(--serif); color: var(--limestone); text-wrap: balance; }
.start-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; text-shadow: none; }
.start-all { margin-top: 16px; min-height: 44px; display: inline-flex; align-items: center; color: var(--stone); font-size: var(--fs-sm); }
.start-hint { margin: 18px 0 0; font-size: 13px; letter-spacing: 0.06em; color: var(--stone); }
.film { position: fixed; inset: 0; z-index: var(--z-film); background: #060504; display: grid; place-items: center; transition: opacity 0.9s var(--ease-io); }
.film.is-leaving { opacity: 0; pointer-events: none; }
.film video { width: 100%; height: 100%; object-fit: contain; }
.film-caption { position: absolute; left: 50%; bottom: max(40px, 5vh); transform: translateX(-50%); max-width: min(760px, calc(100vw - 32px)); margin: 0; padding: 7px 16px; border-radius: 6px; background: rgba(20, 17, 13, 0.72); font: 500 19px/1.4 var(--sans); text-align: center; }
.film-caption:empty { display: none; }
.film-controls { position: absolute; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px; }
.film-skip { background: rgba(20, 17, 13, 0.6); border: 1px solid rgba(242, 235, 221, 0.24); color: #f2ebdd; }
.film-sound { width: 48px; height: 48px; background: rgba(20, 17, 13, 0.6); border-color: rgba(242, 235, 221, 0.24); color: #f2ebdd; }
.film-sound:hover { background: rgba(20, 17, 13, 0.8); }
.film-title { position: absolute; left: max(24px, env(safe-area-inset-left)); top: max(24px, env(safe-area-inset-top)); margin: 0; font: 500 var(--fs-lg)/1.2 var(--serif); color: var(--limestone); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); }

/* ---------------------------------------------------------------- visit: stage */
.visit { position: absolute; inset: 0; overflow: hidden; background: #0e0c09; }
.stage { position: absolute; inset: 0; z-index: var(--z-stage); }
.stage-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: none; cursor: grab; }
.stage-canvas.is-grabbing { cursor: grabbing; }
.stage-canvas:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; box-shadow: inset 0 0 0 6px rgba(20, 17, 13, 0.5); }
.stage-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(var(--bg-rgb) / 0.5) 0%, rgb(var(--bg-rgb) / 0) 16%, rgb(var(--bg-rgb) / 0) 58%, rgb(var(--bg-rgb) / 0.78) 100%), radial-gradient(ellipse 60% 40% at 0% 100%, rgb(var(--bg-rgb) / 0.6), transparent 70%); }
.dissolve-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }

/* hotspots */
.anchors { position: absolute; inset: 0; z-index: var(--z-anchor); pointer-events: none; overflow: hidden; }
.hs { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; transition: opacity 0.2s var(--ease); }
.hs.is-off { visibility: hidden; }
.hs.is-under-chrome { opacity: 0; visibility: hidden; }
.hs-btn { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; pointer-events: auto; color: var(--limestone); }
.hs-ring { position: absolute; inset: 9px; border-radius: 50%; border: 1.5px solid rgba(242, 235, 221, 0.92); background: rgba(20, 17, 13, 0.4); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); transition: transform 0.25s var(--ease), border-color 0.25s var(--ease); }
.hs-core { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px rgb(var(--gold-rgb) / 0.8); }
.hs-btn::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; border: 1px solid var(--gold-ring); animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.55); opacity: 0; } }
.hs-btn:hover .hs-ring, .hs-btn:focus-visible .hs-ring { transform: scale(1.12); border-color: var(--gold); }
.hs.is-seen .hs-core { background: var(--stone); box-shadow: none; }
.hs-label { position: absolute; left: 50%; top: 26px; transform: translate(calc(-50% + var(--label-shift, 0px)), 4px); width: max-content; max-width: 200px; padding: 5px 10px; border-radius: 4px; background: rgb(var(--bg-rgb) / 0.84); font: 600 12.5px/1.3 var(--sans); text-align: center; text-wrap: balance; color: var(--limestone); opacity: 0; pointer-events: none; transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); }
.hs-btn:hover + .hs-label, .hs-btn:focus-visible + .hs-label, .hs.is-guided .hs-label, .is-touch .hs-label { opacity: 1; transform: translate(calc(-50% + var(--label-shift, 0px)), 0); }
.hs--goto .hs-btn { width: 56px; height: 56px; left: -28px; top: -28px; }
.hs--goto .hs-ring { inset: 6px; background: rgba(20, 17, 13, 0.55); }
.hs--goto .hs-btn::before { display: none; }
.hs--goto .hs-icon { position: relative; }
.hs--goto .hs-label { top: 32px; opacity: 1; transform: translate(calc(-50% + var(--label-shift, 0px)), 0); color: var(--limestone); }
.hs--npc .hs-icon { position: relative; color: var(--gold); }
.hs--npc.is-speaking .hs-ring, .hs.is-guided .hs-ring { border-color: var(--limestone); border-width: 2px; transform: scale(1.1); }
.is-comparing .hs--goto .hs-label { opacity: 0; }
.edge { position: absolute; top: 50%; z-index: calc(var(--z-anchor) + 1); display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--chrome); color: var(--limestone); font: 600 12.5px/1 var(--sans); cursor: pointer; opacity: 0.88; transform: translateY(-50%); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); transition: opacity 0.8s var(--ease-io); }
.edge-arrow { font-size: 16px; color: var(--stone); }
.edge:hover { border-color: var(--gold-ring); }
.edge-left { left: max(12px, env(safe-area-inset-left)); }
.edge-right { right: calc(max(12px, env(safe-area-inset-right)) + 92px); }

/* label: site, era and stop, top left beside the back button */
.plaque { position: absolute; left: var(--label-left, 150px); top: max(10px, env(safe-area-inset-top)); z-index: calc(var(--z-header) + 1); max-width: min(440px, calc(100% - var(--label-left, 150px) - 360px)); min-height: 44px; display: flex; flex-direction: column; justify-content: center; pointer-events: none; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.75); }
.plaque-title { margin: 0; font: 500 21px/1.12 var(--serif); letter-spacing: 0.005em; color: var(--limestone); text-wrap: balance; }
.plaque-title:focus { outline: none; box-shadow: none; }
.pt-short { display: none; }
.plaque-line { margin: 2px 0 0; font: 600 12.5px/1.35 var(--sans); letter-spacing: 0.03em; color: var(--stone); text-wrap: pretty; }
.plaque-line .date { font-size: 15px; font-weight: 500; color: var(--limestone); }
.stop-count { letter-spacing: 0.06em; }
.plaque-stop-title { font: italic 500 15px/1.2 var(--serif); letter-spacing: 0.01em; color: var(--limestone); }
.pl-sep { color: var(--muted); }

/* one bottom zone: a slim control bar, centred (stop arrows, Then / Today, Compare, things) */
.controlbar { position: absolute; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); z-index: var(--z-chrome); display: flex; flex-direction: column; align-items: center; gap: 8px; transform: translateX(-50%); max-width: calc(100% - 32px); }
.cb-row { position: relative; display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--chrome); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); }
.cb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; min-width: 44px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--limestone); font: 600 13px/1 var(--sans); letter-spacing: 0.02em; white-space: nowrap; cursor: pointer; transition: background 0.2s var(--ease), color 0.2s var(--ease); }
@media (hover: hover) { .cb-btn:hover { background: rgb(var(--fg-rgb) / 0.08); } }
.cb-btn:disabled { opacity: 0.3; cursor: default; background: transparent; }
.cb-arrow { width: 44px; padding: 0; color: var(--stone); }
.cb-arrow svg { display: block; }
.seg { display: inline-flex; gap: 2px; padding: 0 2px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.seg-btn { display: inline-flex; align-items: center; gap: 8px; min-width: 132px; min-height: 44px; justify-content: center; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--stone); font: 600 14px/1 var(--sans); letter-spacing: 0.02em; white-space: nowrap; cursor: pointer; transition: background 0.25s var(--ease), color 0.25s var(--ease); }
.seg-btn:hover { color: var(--limestone); }
/* the one gold "active" signal in the frame: the era on screen */
.seg-btn[aria-pressed='true'] { background: var(--gold-tint); color: var(--limestone); box-shadow: inset 0 0 0 1px var(--gold-ring); }
.seg-btn[aria-disabled='true'] { opacity: 0.45; cursor: help; }
.seg-btn .seg-label .date { font-size: 16px; }
.seg-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.seg-dot-then { background: var(--then); }
.seg-dot-now { background: var(--now); }
.compare-btn[aria-pressed='true'] { background: rgb(var(--fg-rgb) / 0.14); box-shadow: inset 0 0 0 1px var(--line-strong); }
.things-chip { color: var(--stone); padding: 0 12px 0 10px; }
.things-chip .tc-icon svg { display: block; width: 18px; height: 18px; }
.things-chip .tc-count { color: var(--limestone); font-variant-numeric: tabular-nums; }
.things-chip.is-done { color: var(--muted); }
.painted-btn { border-left: 1px solid var(--line); border-radius: 0 999px 999px 0; }
.pb-short { display: none; }
.plaque-mode { font-weight: 600; letter-spacing: 0.06em; color: var(--limestone); }
.film:focus { outline: none; box-shadow: none; }
.tour-progress { display: flex; gap: 3px; width: min(180px, 40%); margin: 0; padding: 0; list-style: none; order: 2; }
.tour-progress li { flex: 1; height: 2px; border-radius: 2px; background: rgb(var(--fg-rgb) / 0.2); }
.tour-progress li.is-done { background: rgb(var(--fg-rgb) / 0.5); }
.tour-progress li.is-current { background: var(--limestone); }
.cb-row { order: 1; }
.timebar-note { order: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; max-width: min(520px, calc(100vw - 32px)); padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--night-2); box-shadow: var(--shadow); font-size: 14px; line-height: 1.4; color: var(--limestone); text-align: center; }
.note-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.note-links button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--limestone); font: 600 13.5px/1.2 var(--sans); cursor: pointer; }
.note-links button:hover { border-color: var(--limestone); }
.note-links .n { font: italic 500 17px/1 var(--serif); color: var(--stone); }
.visit.has-note .captions { opacity: 0 !important; }

/* captions: the bottom zone, above the control bar, clear of the dock on both sides */
.hud-top { display: contents; }
.captions { position: absolute; left: 50%; bottom: calc(max(20px, env(safe-area-inset-bottom)) + 76px); z-index: var(--z-chrome); width: max-content; max-width: min(34em, calc(100% - 2 * 150px)); transform: translate(-50%, 6px); text-align: center; text-wrap: balance; opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.captions.is-visible { opacity: 1; transform: translate(-50%, 0); }
.caption-line { display: inline; margin: 0; padding: 4px 12px; border-radius: 6px; background: rgb(var(--bg-rgb) / 0.76); -webkit-box-decoration-break: clone; box-decoration-break: clone; font: 500 19px/2 var(--sans); color: var(--caption-ink); }
.is-comparing .captions { bottom: calc(max(20px, env(safe-area-inset-bottom)) + 76px); }

/* dock: five labelled controls plus More (desktop: right edge; phones: bottom bar) */
.dock { position: absolute; right: max(14px, env(safe-area-inset-right)); top: 50%; z-index: var(--z-chrome); display: flex; flex-direction: column; gap: 2px; padding: 6px; border: 1px solid var(--line); border-radius: 18px; background: var(--chrome); transform: translateY(-50%); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); }
.dock-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 68px; min-height: 60px; padding: 6px 4px; border: 0; border-radius: 12px; background: transparent; color: var(--stone); cursor: pointer; transition: background 0.2s var(--ease), color 0.2s var(--ease); }
.dock-btn svg { display: block; }
.dock-label { font: 600 11px/1.1 var(--sans); letter-spacing: 0.06em; }
@media (hover: hover) { .dock-btn:hover { color: var(--limestone); background: rgb(var(--fg-rgb) / 0.08); } }
.dock-btn { position: relative; }
/* Secondary states use limestone weight, never gold: default-on toggles show state by the icon. */
.dock-btn[aria-pressed='true'] { color: var(--limestone); }
.dock-btn[aria-pressed='false'] .dock-icon { opacity: 0.7; }
#rail-captions[aria-pressed='false'] .dock-icon { opacity: 0.45; }
.dock-btn[aria-expanded='true'] { color: var(--limestone); background: rgb(var(--fg-rgb) / 0.1); }
#rail-guide[data-state='playing'] { background: rgb(var(--fg-rgb) / 0.12); box-shadow: inset 0 0 0 1px var(--line-strong); }
.dock-badge { position: absolute; top: 4px; right: 10px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--limestone); color: var(--ink); font: 700 11px/18px var(--sans); text-align: center; font-variant-numeric: tabular-nums; }
.more-menu { position: absolute; right: 100px; top: 50%; z-index: var(--z-panel); display: grid; gap: 2px; width: 250px; max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; padding: 8px; transform: translateY(-50%); }
.menu-item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--limestone); font: 500 15px/1.2 var(--sans); text-align: left; cursor: pointer; }
.menu-item:hover { background: rgb(var(--fg-rgb) / 0.08); }
.menu-item[aria-pressed='true'] { color: var(--limestone); font-weight: 600; }
.menu-item svg { flex: none; color: var(--stone); }

/* panels */
.panel { position: absolute; z-index: var(--z-panel); border: 1px solid var(--line); border-radius: 18px; background: var(--panel); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--shadow); overflow: auto; overscroll-behavior: contain; animation: panel-in 0.28s var(--ease); }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.panel-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 10px 22px; background: linear-gradient(180deg, rgb(var(--bg2-rgb) / 0.98) 70%, rgb(var(--bg2-rgb) / 0)); }
.panel h3 { margin: 0; font: 500 var(--fs-xl)/1.1 var(--serif); }
.panel-kicker { margin: 0 0 10px; font: 600 var(--fs-xs)/1.35 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.drawer { left: max(16px, env(safe-area-inset-left)); top: 76px; width: 380px; max-height: calc(100% - 180px); padding: 0 0 16px; }
.stop-list { list-style: none; margin: 0; padding: 0 12px; }
.stop-list button { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; text-align: left; cursor: pointer; }
.stop-list button:hover { background: rgb(var(--fg-rgb) / 0.06); }
.stop-list .n { font: italic 500 18px/1 var(--serif); color: var(--gold); }
.stop-list .t { font: 500 20px/1.2 var(--serif); }
.stop-list .marks { display: inline-flex; gap: 6px; align-items: center; font: 600 11px/1 var(--sans); color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
.stop-list .mark-now { width: 7px; height: 7px; border-radius: 50%; background: var(--now); }
.stop-list .mark-seen { color: var(--stone); }
.stop-list button[aria-current='true'] { background: rgb(var(--fg-rgb) / 0.08); box-shadow: inset 3px 0 0 var(--limestone); }
.stop-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 22px 8px; font: italic 400 14px/1.4 var(--serif); color: var(--muted); }
.stop-legend .mark-now { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--now); }

.stop-about, .stop-transcript { margin: 12px 22px 0; border-top: 1px solid var(--line); }
.stop-about summary, .stop-transcript summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font: 600 13px/1.2 var(--sans); letter-spacing: 0.06em; color: var(--stone); }
.panel-summary, #transcript-text { margin: 0 0 8px; font-size: 15px; line-height: 1.6; color: var(--stone); }

/* hotspot card: image-led */
.info-card { right: 120px; top: 76px; width: min(420px, calc(100% - 160px)); max-height: calc(100% - 180px); padding: 0; }
.info-figure { margin: 0; position: relative; }
.info-img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 18px 18px 0 0; }
.info-figure::after { content: ''; position: absolute; inset: auto 0 0 0; height: 34%; background: linear-gradient(0deg, rgb(var(--bg-rgb) / 1), rgb(var(--bg-rgb) / 0)); pointer-events: none; }
.info-card.is-diagram .info-img { object-fit: contain; aspect-ratio: auto; width: 100%; height: auto; max-height: 340px; background: #efe6d2; padding: 14px; }
.info-card.is-diagram .info-figure::after { display: none; }
.info-body { padding: 20px 30px 28px; }
.info-card:not(.has-image) .info-body { padding-top: 28px; padding-right: 72px; }
.info-card h3:focus { outline: none; box-shadow: none; }
.info-card h3 { margin: 0 0 14px; font: 500 var(--fs-2xl)/1.08 var(--serif); letter-spacing: 0.005em; text-wrap: balance; }
.info-text { margin: 0; max-width: var(--measure); font-size: var(--fs-md); line-height: 1.68; color: var(--text-body); text-wrap: pretty; }
.info-source { display: flex; flex-direction: column; gap: 4px; margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); }
.info-source-label { font: 600 11px/1.2 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone); }
.info-close { position: absolute; top: 14px; right: 14px; z-index: 2; background: rgb(var(--bg-rgb) / 0.72); border-color: var(--line-strong); }
.sheet-scrim { display: none; }

/* sound popover */
.popover { position: absolute; z-index: var(--z-panel); border: 1px solid var(--line); border-radius: 14px; background: var(--panel); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--shadow); }
#sound-pop { right: 100px; top: 50%; width: 250px; padding: 14px; transform: translateY(-50%); display: grid; gap: 10px; }
.pop-row { display: grid; gap: 8px; font: 600 12px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.pop-row input { width: 100%; min-height: 32px; accent-color: var(--gold); }
.pop-toggle { min-height: 44px; border: 1px solid var(--line); border-radius: 10px; background: transparent; cursor: pointer; font-weight: 600; }
.pop-toggle[aria-pressed='true'] { border-color: var(--line-strong); color: var(--limestone); background: rgb(var(--fg-rgb) / 0.1); }

/* compare window (360) */
.time-window { position: absolute; inset: 0; z-index: calc(var(--z-anchor) + 1); pointer-events: none; }
.tw-handle { position: absolute; left: calc(var(--x, 0.5) * 100%); top: calc(var(--y, 0.5) * 100%); display: flex; align-items: center; gap: 12px; transform: translate(-50%, -50%); pointer-events: auto; cursor: ew-resize; touch-action: none; outline: none; }
.tw-knob { position: relative; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--gold); background: rgb(var(--bg-rgb) / 0.72); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5); }
.tw-knob::before, .tw-knob::after { content: ''; position: absolute; top: 50%; width: 7px; height: 7px; border-top: 1.5px solid var(--limestone); border-left: 1.5px solid var(--limestone); }
.tw-knob::before { left: 12px; transform: translateY(-50%) rotate(-45deg); }
.tw-knob::after { right: 12px; transform: translateY(-50%) rotate(135deg); }
.tw-handle:focus-visible .tw-knob { box-shadow: 0 0 0 3px var(--gold-hi), 0 0 0 6px rgb(var(--bg-rgb) / 0.55); }
.tw-label { padding: 6px 10px; border-radius: 4px; background: rgb(var(--bg-rgb) / 0.8); font: 600 12px/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; color: var(--limestone); }
.tw-label-b { color: var(--limestone); }
.time-window.is-lens .tw-handle { cursor: move; flex-direction: column; gap: 0; }
.time-window.is-lens .tw-knob { width: calc(var(--r) * 2); height: calc(var(--r) * 2); border: 0; background: transparent; box-shadow: none; }
.time-window.is-lens .tw-knob::before, .time-window.is-lens .tw-knob::after, .time-window.is-lens .tw-label-a { display: none; }
.time-window.is-lens .tw-label-b { position: absolute; top: calc(50% - var(--r) - 30px); left: 50%; transform: translateX(-50%); }
.tw-shapes { position: absolute; left: 50%; top: 76px; z-index: 2; transform: translateX(-50%); display: flex; gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--chrome); pointer-events: auto; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.tw-shapes button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; font: 600 12.5px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone); cursor: pointer; }
.tw-shapes button[aria-pressed='true'] { background: rgb(var(--fg-rgb) / 0.14); color: var(--limestone); }
.tw-shapes .tw-done { color: var(--limestone); }

/* 3D: joystick and coach card */
.joystick { position: absolute; left: max(22px, env(safe-area-inset-left)); bottom: max(26px, env(safe-area-inset-bottom)); z-index: var(--z-chrome); width: 104px; height: 104px; border-radius: 50%; border: 1px solid var(--line-strong); background: rgb(var(--bg-rgb) / 0.4); touch-action: none; }
.joy-knob { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px; border-radius: 50%; background: rgb(var(--fg-rgb) / 0.22); border: 1px solid rgb(var(--fg-rgb) / 0.5); }
.joy-label { position: absolute; left: 0; right: 0; top: -24px; text-align: center; font: 700 12px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--limestone); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75), 0 0 2px rgba(0, 0, 0, 0.6); transition: opacity 0.6s; }
.joystick { opacity: 0; pointer-events: none; transition: opacity 0.35s var(--ease); }
.joystick.is-home, .joystick.is-live { opacity: 1; }
.joystick.is-home { pointer-events: auto; }
.joystick.is-live .joy-label { opacity: 0; }
.coach { position: absolute; left: 50%; top: auto; bottom: calc(max(20px, env(safe-area-inset-bottom)) + 150px); z-index: var(--z-panel); max-width: min(520px, calc(100% - 32px)); padding: 16px 22px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--panel); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); transform: translateX(-50%); text-align: center; font-size: 15.5px; line-height: 1.55; color: var(--limestone); box-shadow: var(--shadow); animation: panel-in 0.3s var(--ease); }
.coach strong { display: block; margin-bottom: 4px; font: 500 var(--fs-lg)/1.2 var(--serif); }
.coach kbd { font-size: 12px; }

/* loading, finale, toast, halt */
.loading { position: absolute; inset: 0; z-index: var(--z-loading); display: grid; place-items: center; background: var(--night); transition: opacity 0.8s var(--ease-io); }
.loading.is-leaving { opacity: 0; pointer-events: none; }
.loading-bg { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(22px) saturate(0.95); opacity: 0.45; transform: scale(1.06); }
.loading-inner { position: relative; text-align: center; padding: 24px; max-width: 560px; }
.loading-title { margin: 0 0 8px; font: 500 clamp(32px, 5vw, 56px)/1 var(--serif); text-wrap: balance; }
.loading-then { margin: 0 0 30px; font: italic 400 20px/1.3 var(--serif); color: var(--stone); }
.loading-bar { width: min(260px, 70vw); height: 2px; margin: 0 auto; background: rgb(var(--fg-rgb) / 0.16); overflow: hidden; border-radius: 2px; }
.loading-bar span { display: block; height: 100%; width: 0; background: var(--gold); transition: width 0.3s var(--ease); }
.loading-bar.is-indeterminate span { width: 30%; animation: indeterminate 1.4s var(--ease-io) infinite; }
@keyframes indeterminate { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
.loading-status { margin: 14px 0 0; font-size: 13px; letter-spacing: 0.06em; color: var(--stone); font-variant-numeric: tabular-nums; }
.finale { position: absolute; left: 50%; top: 50%; z-index: var(--z-panel); width: min(560px, calc(100% - 32px)); max-height: calc(100% - 40px); overflow: auto; transform: translate(-50%, -50%); border: 1px solid var(--line); border-radius: 18px; background: var(--night-2); box-shadow: var(--shadow); animation: panel-in 0.3s var(--ease); }
.finale-figure { margin: 0; position: relative; }
.finale-figure img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: 18px 18px 0 0; }
.finale-body { padding: 24px 30px 28px; text-align: center; }
.finale-title { margin: 0 0 8px; font: 500 30px/1.15 var(--serif); text-wrap: balance; }
.finale-title:focus { outline: none; box-shadow: none; }
.finale-sites { list-style: none; margin: -4px 0 20px; padding: 0; display: grid; gap: 8px; text-align: left; }
.finale-site { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 60px; padding: 6px 14px 6px 6px; border: 1px solid var(--line); border-radius: 12px; color: var(--limestone); text-decoration: none; transition: border-color 0.2s var(--ease), background 0.2s var(--ease); }
.finale-site:hover, .finale-site:focus-visible { border-color: var(--line-strong); background: rgb(var(--fg-rgb) / 0.05); }
.finale-site img { width: 88px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 7px; }
.fs-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fs-text strong { font: 500 19px/1.15 var(--serif); }
.fs-text > span { font-size: 13px; color: var(--stone); }
.fs-go { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; font: 600 13px/1 var(--sans); }
.finale-text { margin: 0 0 20px; color: var(--stone); }
.finale-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.finale-downloads { margin-top: 20px; text-align: left; }
.toast { position: absolute; left: auto; right: max(16px, env(safe-area-inset-right)); top: calc(64px + env(safe-area-inset-top)); min-height: 44px; z-index: var(--z-panel); display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); transform: translateY(-6px); padding: 6px 8px 6px 16px; border-radius: 999px; background: rgb(var(--bg-rgb) / 0.88); border: 1px solid var(--line); font: 600 13.5px/1.3 var(--sans); opacity: 0; pointer-events: none; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); }
.toast.is-on { opacity: 1; transform: none; pointer-events: auto; }
.is-idle .toast { opacity: 0; pointer-events: none; }
/* Under the header row at every width: its buttons vary with the page and the theme, and a
   toast placed beside them covered the sound and theme buttons in visits. */
.toast:not(:has(button)) { padding-right: 16px; }
.toast button { min-height: 36px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--limestone); font: 600 13px/1 var(--sans); white-space: nowrap; cursor: pointer; }
.toast button:hover { border-color: var(--limestone); }
.toast-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.halt { position: absolute; inset: 0; z-index: var(--z-halt); display: grid; place-items: center; padding: 24px; background: radial-gradient(ellipse at center, #2a241b 0%, var(--night) 70%); }
.halt-inner { max-width: 520px; text-align: center; }
.halt-title { margin: 0 0 12px; font: 500 38px/1.1 var(--serif); }
.halt-text { margin: 0 0 26px; color: var(--stone); font-size: 17px; }
.halt-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.intro { position: absolute; inset: 0; z-index: 2; background: #060504; transition: opacity 0.7s var(--ease-io); }

/* ---------------------------------------------------------------- dialogs */
.dialog { width: min(780px, calc(100vw - 32px)); max-height: min(88vh, 960px); padding: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--night-2); color: var(--limestone); box-shadow: var(--shadow); }
.dialog.dialog-narrow { width: min(520px, calc(100vw - 32px)); }
.dialog[open] { animation: panel-in 0.3s var(--ease); }
.dialog::backdrop { background: rgba(10, 8, 6, 0.74); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.dialog-head { position: sticky; top: 0; z-index: 2; padding: 32px 88px 18px 44px; background: var(--night-2); border-bottom: 1px solid var(--line); }
.dialog-head h2 { margin: 0; font: 500 var(--fs-3xl)/1.04 var(--serif); letter-spacing: 0.005em; text-wrap: balance; }
.dialog-head .eyebrow { margin-bottom: 10px; }
.dialog-close { position: absolute; top: 24px; right: 24px; }
.learn-tabs { position: sticky; top: 0; display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 40px; border-bottom: 1px solid var(--line); background: var(--night-2); }
.learn-tabs a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 999px; color: var(--stone); font: 600 13px/1 var(--sans); text-decoration: none; }
.learn-tabs a:hover { background: rgb(var(--fg-rgb) / 0.06); color: var(--limestone); }
.dialog-body { padding: 24px 44px 44px; font-size: var(--fs-md); line-height: 1.7; color: var(--text-dialog); }
.dialog-body section { scroll-margin-top: 20px; }
.dialog-body p { margin: 0 0 14px; max-width: var(--measure); text-wrap: pretty; }
.dialog-body .lead { font: 400 var(--fs-lg)/1.55 var(--serif); color: var(--limestone); }
.dialog-body h3 { margin: 36px 0 14px; font: 600 var(--fs-xs)/1.3 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.dialog-body a { color: var(--limestone); text-decoration-color: var(--gold-ring); text-underline-offset: 3px; }
.dialog-body a:hover { text-decoration-color: var(--gold); }
.era-notes { display: grid; grid-template-columns: auto 1fr; gap: 10px 22px; margin: 0; padding: 18px 20px; border-radius: 12px; background: rgb(var(--fg-rgb) / 0.04); }
.era-notes dt { font: italic 500 17px/1.5 var(--serif); color: var(--gold-hi); font-variant-numeric: oldstyle-nums; }
.era-notes dd { margin: 0; color: var(--stone); }
.source-list { counter-reset: src; list-style: none; padding: 0; margin: 0; }
.source-list li { counter-increment: src; position: relative; padding: 12px 0 12px 44px; border-top: 1px solid rgb(var(--fg-rgb) / 0.08); font-size: 16px; line-height: 1.5; }
.source-list li::before { content: counter(src, decimal-leading-zero); position: absolute; left: 0; top: 13px; font: italic 500 17px/1.3 var(--serif); color: var(--gold); }
.source-list a { text-decoration: none; background-image: linear-gradient(var(--gold-ring), var(--gold-ring)); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; }
.model-list { list-style: none; margin: 0; padding: 0; columns: 2 260px; column-gap: 12px; }
.model-list li { break-inside: avoid; margin-bottom: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgb(var(--fg-rgb) / 0.03); line-height: 1.4; }
.model-list a { font: 500 19px/1.2 var(--serif); text-decoration: none; }
.model-list a:hover { color: var(--gold-hi); }
.model-list .use { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; font-size: 13.5px; color: var(--muted); }
.model-list .sites { display: block; margin-top: 4px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.making-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 0 0 24px; }
.making-strip img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; }
.dl-row-dialog { margin: 0 0 28px; }
.fineprint { font-size: 13px; color: var(--muted); }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; margin: 0; align-items: center; }
.keys dt { white-space: nowrap; }
.keys dd { margin: 0; }
kbd { display: inline-block; min-width: 26px; padding: 3px 6px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px; font: 600 12px/1.2 var(--sans); text-align: center; color: var(--limestone); }

/* ---------------------------------------------------------------- footer (hub only) */
.exploration-bar {
  --exploration-footer-bg: #14110d;
  --exploration-footer-ink: #d6cbb6;
  --exploration-footer-border: rgb(var(--gold-rgb) / 0.16);
  position: relative; z-index: 2; flex: none;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 22px;
  padding: 8px max(20px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  background: #14110d; color: #d6cbb6; border-top: 1px solid rgb(var(--gold-rgb) / 0.16); font: 13px/1.4 var(--sans);
}
.exploration-credit { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.exploration-credit strong { font: 500 17px/1.2 var(--serif); letter-spacing: 0.02em; color: var(--limestone); }
.exploration-credit span { color: var(--muted); }
.exploration-bar a { color: var(--limestone); }
.making-of-link { min-height: 44px; padding: 0 2px; border: 0; border-bottom: 1px solid var(--gold-ring); background: none; color: var(--limestone); font: 600 13px/1 var(--sans); letter-spacing: 0.05em; cursor: pointer; }
[data-exploration-controls].exploration-bar #scenario-exploration-analytics .scenario-exploration-controls { background: transparent; color: #d6cbb6; border: 0; padding: 0; gap: 18px; }

/* ---------------------------------------------------------------- tablets and small laptops */
/* messages drop below the label row when the label could reach the centre */
@media (max-width: 1279px) { .toast { top: 64px; right: max(16px, env(safe-area-inset-right)); } }
@media (max-width: 1180px) {
  .hub-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
  .hub-side { grid-column: 2; }
  .captions { max-width: min(32em, calc(100% - 2 * 112px)); }
  .seg-btn { min-width: 112px; }
}

/* ---------------------------------------------------------------- phones (portrait) and tablets */
@media (max-width: 820px) {
  .hub-inner { grid-template-columns: minmax(0, 1fr); padding-top: 80px; gap: 36px; min-height: 0; }
  .hub-side { grid-column: 1; justify-self: stretch; width: 100%; }
  .nile-frame { height: auto; width: 100%; max-width: 520px; }
  .dl-row { grid-template-columns: 1fr; }
  .hub-bg::after { background: linear-gradient(180deg, rgb(var(--bg-rgb) / 0.5) 0%, rgb(var(--bg-rgb) / 0.92) 42%, rgb(var(--bg-rgb) / 0.98) 100%); }
  .site-row { grid-template-columns: 26px 84px minmax(0, 1fr) auto; gap: 12px; }
  .site-thumb { width: 84px; }
  .site-name { font-size: 22px; }
  .quiet-link { display: none; }
  .hub-actions { flex-direction: column; align-items: flex-start; }
}

/* Visit layout on phones (portrait): one header row (back arrow + label), captions and
   messages under it, then the image, then one slim bar above the dock. Persistent chrome
   stays under 20 % of the height. */
@media (max-width: 700px) {
  .dock { top: auto; bottom: 0; left: 0; right: 0; transform: none; flex-direction: row; justify-content: space-around; gap: 0; padding: 3px max(6px, env(safe-area-inset-right)) max(3px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); border: 0; border-top: 1px solid var(--line); border-radius: 0; }
  .dock-btn { width: auto; flex: 1; min-height: 48px; padding: 3px 2px; gap: 2px; border-radius: 10px; }
  .dock-label { font-size: 11px; }
  .dock-badge { top: 2px; right: calc(50% - 22px); }
  .more-menu, #sound-pop { right: 8px; left: 8px; top: auto; bottom: calc(62px + env(safe-area-inset-bottom)); width: auto; transform: none; max-height: calc(100dvh - 62px - env(safe-area-inset-bottom) - max(64px, calc(env(safe-area-inset-top) + 56px))); overflow-y: auto; }
  .is-visit .back-link { width: 44px; padding: 0; justify-content: center; }
  .is-visit #back-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .is-visit .create-yours, .is-visit #making-open { display: none; }
  .is-visit .site-header { background: linear-gradient(180deg, rgb(var(--bg-rgb) / 0.7), rgb(var(--bg-rgb) / 0)); }
  .plaque { left: var(--label-left, 74px); right: max(14px, env(safe-area-inset-right)); max-width: none; }
  .plaque-title { font-size: 18px; }
  .plaque-line { font-size: 12px; }
  .plaque-line .date { font-size: 14px; }
  .plaque-stop-title { font-size: 14.5px; }
  .controlbar { bottom: calc(60px + env(safe-area-inset-bottom)); gap: 6px; max-width: calc(100% - 20px); }
  .cb-row { gap: 2px; padding: 2px; }
  .seg-btn { min-width: 0; padding: 0 14px; font-size: 13.5px; }
  .seg-date { display: none; }
  .compare-btn { padding: 0 12px; }
  .things-chip { display: none; }
  /* the progress hairline sits in the gap between the bar and the dock (no extra height) */
  .tour-progress { position: absolute; left: 22px; right: 22px; bottom: -5px; width: auto; }
  .timebar-note { max-width: calc(100vw - 20px); }
  .hud-top { display: flex; position: absolute; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); top: max(calc(max(10px, env(safe-area-inset-top)) + 54px), calc(var(--label-bottom, 0px) + 8px)); z-index: var(--z-panel); flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
  .captions, .is-comparing .captions { position: static; width: auto; max-width: 100%; transform: none; text-align: left; align-self: stretch; }
  .captions.is-visible { transform: none; }
  .caption-line { display: inline-block; font-size: 16.5px; line-height: 1.42; padding: 7px 12px; border-radius: 8px; }
  .captions:not(.is-visible) { display: none; }
  /* messages dock just above the bar, where the eye already goes */
  .toast { left: 50%; right: auto; top: auto; bottom: calc(130px + env(safe-area-inset-bottom)); width: max-content; max-width: calc(100% - 24px); padding: 4px 6px 4px 14px; font-size: 13px; transform: translate(-50%, 6px); }
  .toast.is-on { transform: translate(-50%, 0); }
  .toast button { min-height: 36px; }
  .edge { top: 46%; min-width: 44px; padding: 0 10px; }
  .edge-label { display: none; }
  .edge-right { right: max(10px, env(safe-area-inset-right)); }
  .edge-left { left: max(10px, env(safe-area-inset-left)); }
  .joystick { left: max(14px, env(safe-area-inset-left)); bottom: calc(124px + env(safe-area-inset-bottom)); width: 88px; height: 88px; }
  .joy-knob { width: 40px; height: 40px; margin: -20px; }
  .tw-shapes { top: auto; bottom: calc(122px + env(safe-area-inset-bottom)); }
  .tw-shapes .tw-done { display: none; }
  .is-comparing .tour-progress { display: none; }
  .is-comparing .toast { bottom: calc(184px + env(safe-area-inset-bottom)); }
  .back-link, .create-yours { padding: 0 13px; font-size: 13px; }
}

/* Bottom sheets on phones and short landscape screens. */
@media (max-width: 820px), (max-height: 560px) {
  .sheet-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: var(--z-sheet); background: rgba(10, 8, 6, 0.55); }
  .info-card, .drawer { position: fixed; left: 0; right: 0; top: auto; bottom: 0; z-index: calc(var(--z-sheet) + 1); width: 100%; max-height: 86dvh; border-radius: 22px 22px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); animation: sheet-in 0.32s var(--ease); }
  .info-card::before, .drawer::before { content: ''; position: sticky; top: 0; display: block; width: 44px; height: 4px; margin: 10px auto -14px; border-radius: 4px; background: rgb(var(--fg-rgb) / 0.35); z-index: 3; }
  .info-img { border-radius: 22px 22px 0 0; aspect-ratio: 16 / 10; }
  .info-body { padding: 18px 22px 28px; }
  .info-card h3 { font-size: 28px; }
  .dialog { width: 100vw; max-width: 100vw; max-height: 92dvh; margin: auto 0 0; border-radius: 22px 22px 0 0; }
  .dialog.dialog-narrow { width: 100vw; }
  .dialog-head { padding: 24px 76px 16px 22px; }
  .dialog-head h2 { font-size: 32px; }
  .dialog-close { top: 18px; right: 16px; }
  .learn-tabs { padding: 8px 14px; }
  .dialog-body { padding: 18px 22px 36px; }
  .making-strip { grid-template-columns: repeat(5, 1fr); gap: 4px; }
}
@keyframes sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Short landscape (phones on their side): the scene keeps the whole height. One label line
   top left (site · stop), the control bar bottom left, the dock bottom right. */
@media (max-height: 560px) and (min-width: 560px) {
  .is-visit .site-header { padding-top: max(6px, env(safe-area-inset-top)); background: none; }
  .is-visit .create-yours, .is-visit #making-open { display: none; }
  .is-visit .back-link { width: 44px; padding: 0; justify-content: center; }
  .is-visit #back-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .plaque { top: max(6px, env(safe-area-inset-top)); max-width: calc(100% - var(--label-left, 74px) - 24px); flex-direction: row; align-items: center; flex-wrap: wrap; gap: 0 8px; }
  .pt-full { display: none; }
  .pt-short { display: inline; }
  .plaque-title { font-size: 18px; }
  .plaque-title::after { content: '·'; margin-left: 8px; color: var(--muted); }
  .plaque-line { margin: 0; font-size: 12.5px; }
  .plaque-line .date, .plaque-line .date + .pl-sep { display: none; }
  .dock { top: auto; bottom: max(8px, env(safe-area-inset-bottom)); left: auto; right: max(12px, env(safe-area-inset-right)); transform: none; flex-direction: row; gap: 0; padding: 3px; border-radius: 16px; }
  .dock-btn { width: 56px; min-height: 48px; padding: 2px; gap: 1px; }
  .dock-label { font-size: 12px; letter-spacing: 0.02em; }
  .dock-badge { top: 1px; right: 6px; }
  .more-menu, #sound-pop { right: max(12px, env(safe-area-inset-right)); top: auto; bottom: 66px; transform: none; max-height: calc(100dvh - 66px - max(60px, calc(env(safe-area-inset-top) + 56px))); overflow-y: auto; overscroll-behavior: contain; }
  .controlbar { left: max(12px, env(safe-area-inset-left)); bottom: max(8px, env(safe-area-inset-bottom)); transform: none; align-items: flex-start; max-width: calc(100% - 400px); }
  .cb-row { padding: 2px; gap: 2px; }
  .seg-btn { min-width: 0; padding: 0 12px; font-size: 13px; }
  .seg-date, .things-chip, .tour-progress { display: none; }
  .timebar-note { max-width: 420px; }
  .captions, .is-comparing .captions { left: 50%; bottom: 72px; max-width: min(34em, calc(100% - 240px)); }
  .caption-line { font-size: 15px; line-height: 1.75; }
  /* beside the header's sound button, not over it */
  .toast { top: max(8px, env(safe-area-inset-top)); right: calc(max(12px, env(safe-area-inset-right)) + 52px); }
  .joystick { bottom: 70px; width: 84px; height: 84px; }
  .joy-knob { width: 38px; height: 38px; margin: -19px; }
  .edge-label { display: none; }
  .edge-right { right: max(12px, env(safe-area-inset-right)); }
  .tw-shapes { top: 54px; }
  .info-card.has-image { display: grid; grid-template-columns: 40% 1fr; max-height: calc(100dvh - 24px); }
  .info-card.has-image .info-figure { grid-row: 1 / span 2; }
  .info-card.has-image .info-img { height: 100%; aspect-ratio: auto; border-radius: 22px 0 0 0; }
  .info-card.has-image::before { display: none; }
  .hub-inner { padding-top: 64px; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; }
  .hub-side { grid-column: 2; }
  .nile-frame { height: min(72vh, 300px); }
  .hub-title { font-size: 40px; }
  .hub-lede { display: none; }
  .pin-date { display: none; }
  /* hub rows: number and thumbnail on the left, name, meta and Resume stacked on the right */
  .site-row { grid-template-columns: 26px 96px minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 14px; }
  .site-num, .site-thumb { grid-row: 1 / span 2; }
  .site-thumb { width: 96px; }
  .site-main { grid-column: 3; }
  .site-go { grid-column: 3; justify-self: start; min-height: 32px; }
  .site-name { font-size: 21px; }
}

/* 320 px phones: the control bar (two arrows, Then, Today, Compare) must fit without clipping */
@media (max-width: 360px) {
  .seg-dot { display: none; }
  .seg-btn { padding: 0 12px; }
  .compare-btn { padding: 0 10px; }
}

@media (max-width: 420px) {
  .hub-title { font-size: 44px; }
  .site-row { grid-template-columns: 22px 72px minmax(0, 1fr); }
  .site-go { display: none; }
  .site-thumb { width: 72px; }
  .site-name { font-size: 20.5px; }
  .eyebrow { letter-spacing: 0.14em; }
  .pin-name { font-size: 14.5px; }
  .seg-btn .seg-label .date { font-size: 14px; }
  .plaque-title { font-size: 17px; }
}
/* Portrait phones: the film fills the screen (a centred crop, weighted to the pyramid on the
   left of frame) instead of a strip in black; captions sit over the lower image. */
.film-card { position: absolute; left: max(24px, env(safe-area-inset-left)); right: 24px; bottom: calc(236px + env(safe-area-inset-bottom)); margin: 0; opacity: 0; transform: translateY(8px); transition: opacity 0.8s var(--ease-io), transform 1.2s var(--ease); text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7); pointer-events: none; }
.film-card.is-on { opacity: 1; transform: none; }
.fc-name { margin: 0 0 6px; font: 500 38px/1 var(--serif); letter-spacing: 0.14em; text-transform: uppercase; color: var(--limestone); text-wrap: balance; }
.fc-line { margin: 0; font: 600 12px/1.5 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-hi); }
.fc-line .date { font-size: 15px; letter-spacing: 0.02em; }
.film-card.is-main { top: 50%; bottom: auto; text-align: center; transform: translateY(-50%); }
.film-card.is-main .fc-name { font-size: 44px; letter-spacing: 0; text-transform: none; }
.film-card.is-main .fc-line { color: var(--limestone); font-size: 11px; letter-spacing: 0.24em; }
.film:not(.is-portrait) .film-card { display: none; }
/* Portrait phones: the film fills the screen (the clean picture, panned per shot) instead of a
   strip in black; captions sit over the lower image. */
@media (orientation: portrait) and (max-width: 820px) {
  .film.is-portrait video { object-fit: cover; object-position: 36% 50%; transition: object-position 1.6s var(--ease-io); }
  .film.is-portrait .film-caption { left: 16px; right: 16px; bottom: calc(92px + env(safe-area-inset-bottom)); width: fit-content; max-width: none; margin-inline: auto; transform: none; font-size: 17px; text-wrap: balance; }
  .film:not(.is-portrait) { align-content: center; }
  .film:not(.is-portrait) .film-caption { position: static; transform: none; margin: 16px auto 0; }
}
@media (min-width: 821px) and (max-height: 960px) {
  .hub-inner { padding-top: 84px; padding-bottom: 22px; }
  .hub-title { font-size: clamp(42px, 5vw, 78px); margin-bottom: 12px; }
  .hub-lede { margin-bottom: 18px; }
  .site-row { padding-top: 7px; padding-bottom: 7px; }
  .nile-frame { height: min(52vh, 600px); }
  .hub-side { gap: 14px; }
  .dl { padding: 12px 14px; }
  .dl-desc { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.12s !important; }
  .hub-bg-layer, .hub-bg-layer.is-kb, .start-bg { animation: none; }
  .hs-btn::before { display: none; }
}

@media (hover: none) {
  .hs-label { opacity: 1; transform: translate(-50%, 0); }
}
.stop-arrival { margin: 8px 22px 0; }
.stop-arrival:has(> [hidden]) { display: none; }
.dissolve-ring { position: absolute; left: 50%; top: 50%; z-index: 3; border-radius: 50%; border: 2px solid rgba(226, 190, 110, 0.85); box-shadow: 0 0 24px rgba(210, 170, 87, 0.45), inset 0 0 24px rgba(210, 170, 87, 0.25); transform: translate(-50%, -50%); pointer-events: none; }

/* targets: 44 px minimum everywhere a finger can land */
.toast button, .tw-shapes button, .learn-tabs a { min-height: 44px; }
.toast { padding-top: 4px; padding-bottom: 4px; }
/* compact screens: captions step aside while a sheet is open */
@media (max-width: 820px), (max-height: 560px) {
  .visit:has(.panel:not([hidden])) .captions { opacity: 0; }
}

/* Guided tour on desktop: after 4 s without the pointer, the secondary chrome steps back.
   Label, captions and the control bar stay; any movement brings the rest back. */
.dock { transition: opacity 0.8s var(--ease-io); }
.is-idle .dock, .is-idle .edge { opacity: 0.35; }
.is-idle .dock:focus-within { opacity: 1; }

/* phones: the painted-view control is short; the coach card sits above the bar; messages go
   to the top while the walking pad is under the thumb */
@media (max-width: 700px) {
  .pb-long { display: none; }
  .pb-short { display: inline; }
  .coach { bottom: calc(236px + env(safe-area-inset-bottom)); width: calc(100% - 32px); font-size: 14.5px; padding: 12px 16px; }
  .visit:has(.joystick.is-live) .toast, .visit:has(.joystick.is-home) .toast { left: auto; right: 12px; max-width: 58%; border-radius: 18px; transform: translateY(6px); }
  .visit:has(.joystick.is-live) .toast.is-on, .visit:has(.joystick.is-home) .toast.is-on { transform: none; }
  .visit:has(.joystick.is-live) .toast-text, .visit:has(.joystick.is-home) .toast-text { white-space: normal; }
}
@media (max-height: 560px) and (min-width: 560px) {
  .coach { bottom: 72px; }
  .pb-long { display: none; }
  .pb-short { display: inline; }
}

/* hub on narrow screens: the header keeps Explorations and Create yours; How it was made and
   both downloads sit as a row of buttons under the lede */
.hub-buttons { display: none; flex-wrap: wrap; gap: 8px; margin: -8px 0 22px; }
@media (max-width: 820px) {
  .hub-buttons { display: flex; }
  .is-hub .site-header #making-open { display: none; }
}


/* ---------------------------------------------------------------- how it was made: a catalogue spread */
.dialog.dialog-making { width: min(1320px, 94vw); height: 92vh; max-height: 92vh; }
.making-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px 16px; padding: 24px 88px 16px 44px; }
.making-head .eyebrow, .making-head h2 { grid-column: 1; margin-bottom: 0; }
.making-head h2 { font-size: var(--fs-2xl); }
.making-head-actions { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 8px; align-self: end; }
.making-body { padding: 0 0 56px; color: var(--text-dialog); }
.mk-hero { margin: 0; }
.mk-hero img { width: 100%; height: min(58vh, 620px); object-fit: cover; display: block; }
.mk-hero figcaption { max-width: 1180px; margin: 10px auto 0; padding: 0 44px; }
.mk-hero figcaption, .making-body figcaption, .mk-cap { font: italic 400 15px/1.45 var(--serif); color: var(--muted); }
.making-body figcaption { margin-top: 8px; }
.mk-intro { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 40px; align-items: center; max-width: 1180px; margin: 36px auto 0; padding: 0 44px; }
.mk-intro .lead { margin: 0; max-width: 60ch; }
.mk-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; margin: 0; }
.mk-facts div { border-top: 1px solid var(--line-strong); padding-top: 10px; }
.mk-facts dt { font: 600 var(--fs-xs)/1.3 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.mk-facts dd { margin: 4px 0 0; font: 500 38px/1 var(--serif); color: var(--limestone); font-variant-numeric: lining-nums; }
.mk-spread, .mk-band { max-width: 1180px; margin: 64px auto 0; padding: 48px 44px 0; border-top: 1px solid var(--line); }
.mk-spread { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr); gap: 48px; align-items: start; }
.mk-spread.mk-flip .mk-text { order: 2; }
.mk-spread.mk-flip .mk-media { order: 1; }
.mk-text p, .mk-text li { max-width: 62ch; }
.mk-text-wide { max-width: 760px; }
.mk-num { margin: 0 0 10px; font: 600 var(--fs-xs)/1.3 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.dialog-body .making-body h3, .making-body h3 { margin: 0 0 18px; font: 500 var(--fs-2xl)/1.08 var(--serif); letter-spacing: 0.005em; text-transform: none; color: var(--limestone); text-wrap: balance; }
.making-body h4 { margin: 24px 0 8px; font: 500 var(--fs-lg)/1.2 var(--serif); color: var(--limestone); }
.making-body figure { margin: 0; }
.making-body img { display: block; width: 100%; border-radius: 10px; background: var(--night-3); }
.mk-map img { max-width: 440px; margin: 0 auto; box-shadow: 0 0 0 1px var(--gold-ring), 0 24px 60px rgba(0, 0, 0, 0.35); border-radius: 4px; }
.mk-plate img { background: #efe6d2; }
.mk-ba { display: grid; grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr); align-items: center; gap: 10px; margin: 28px 0; }
.mk-ba img { aspect-ratio: 16 / 10; object-fit: cover; }
.mk-arrow { font: 400 28px/1 var(--serif); color: var(--gold); text-align: center; }
.mk-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mk-duo img { aspect-ratio: 4 / 5; object-fit: cover; }
.mk-wide img { max-height: 560px; object-fit: cover; }
.mk-films { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.mk-films img { aspect-ratio: 9 / 13; object-fit: cover; border-radius: 6px; }
.mk-list { margin: 16px 0; padding-left: 1.1em; }
.mk-list li { margin-bottom: 8px; }
.mk-limits { columns: 2 340px; column-gap: 40px; padding-left: 1.1em; }
.mk-limits li { break-inside: avoid; }
.mk-note { font-size: 15px; color: var(--muted); }
.mk-cards { list-style: none; margin: 24px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.mk-card a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 0 0 12px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: rgb(var(--fg-rgb) / 0.03); text-decoration: none; color: var(--limestone); transition: border-color 0.2s var(--ease), transform 0.2s var(--ease); }
.mk-card a:hover, .mk-card a:focus-visible { border-color: var(--gold-ring); transform: translateY(-2px); }
.mk-card img { aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0; margin-bottom: 6px; }
.mk-card-name { padding: 0 12px; font: 500 18px/1.2 var(--serif); }
.mk-card-use { padding: 0 12px; font-size: 13px; line-height: 1.35; color: var(--muted); }
.mk-table { border-collapse: collapse; width: min(460px, 100%); font-variant-numeric: tabular-nums; }
.mk-table th, .mk-table td { padding: 10px 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; }
.mk-table td { text-align: right; color: var(--limestone); }
.mk-table tfoot th, .mk-table tfoot td { font-weight: 600; border-bottom: 0; color: var(--gold-hi); }
.mk-dl .dl-row { max-width: 760px; margin-top: 18px; }
@media (max-width: 980px) {
  .mk-spread, .mk-intro { grid-template-columns: 1fr; gap: 24px; }
  .mk-spread.mk-flip .mk-text, .mk-spread.mk-flip .mk-media { order: 0; }
}
@media (max-width: 820px), (max-height: 560px) {
  .dialog.dialog-making { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0; }
  .making-head { grid-template-columns: 1fr; padding: 16px 70px 12px 18px; }
  .making-head-actions { grid-column: 1; grid-row: auto; }
  .making-head h2 { font-size: 26px; }
  .mk-hero img { height: 46vh; }
  .mk-hero figcaption, .mk-intro, .mk-spread, .mk-band { padding-left: 18px; padding-right: 18px; }
  .mk-spread, .mk-band { margin-top: 40px; padding-top: 32px; }
  .mk-ba { grid-template-columns: 1fr; gap: 6px; }
  .mk-arrow { transform: rotate(90deg); }
  .mk-facts dd { font-size: 30px; }
  .mk-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .mk-films { grid-template-columns: repeat(5, 1fr); gap: 3px; }
  .making-body h3 { font-size: 26px; }
}

/* ---------------------------------------------------------------- light theme (papyrus) */
:root[data-theme='light'] {
  --night: #f6f1e7;
  --night-2: #fffdf8;
  --night-3: #ece4d4;
  --panel: rgba(255, 253, 248, 0.95);
  --chrome: rgba(255, 253, 248, 0.84);
  --limestone: #1c1813;
  --stone: #3b3329;
  --muted: #655a49;
  --gold: #85601a;
  --gold-hi: #735110;
  --gold-tint: rgba(133, 96, 26, 0.14);
  --gold-ring: rgba(133, 96, 26, 0.5);
  --ink: #fffdf8;
  --line: #e4dccb;
  --line-strong: #cfc3ab;
  --bg-rgb: 255 253 248;
  --bg2-rgb: 246 241 231;
  --fg-rgb: 28 24 19;
  --gold-rgb: 133 96 26;
  --text-body: #2a241c;
  --text-dialog: #2e281f;
  --caption-ink: #1c1813;
  --shadow: 0 24px 70px rgba(60, 45, 20, 0.18), 0 2px 8px rgba(60, 45, 20, 0.1);
  color-scheme: light;
}
:root[data-theme='light'] :focus-visible { box-shadow: 0 0 0 5px rgba(255, 253, 248, 0.8); }
:root[data-theme='light'] .visit { background: #e9e1d2; }
:root[data-theme='light'] .plaque, :root[data-theme='light'] .joy-label, :root[data-theme='light'] .start-inner, :root[data-theme='light'] .film-card { text-shadow: 0 0 14px rgba(255, 253, 248, 0.95), 0 0 3px rgba(255, 253, 248, 0.9); }
:root[data-theme='light'] .joy-label { color: var(--limestone); }
:root[data-theme='light'] .caption-line { background: rgba(255, 253, 248, 0.88); }
:root[data-theme='light'] .create-yours, :root[data-theme='light'] .btn-primary { color: #fffdf8; }
:root[data-theme='light'] .btn-primary:hover, :root[data-theme='light'] .create-yours:hover { background: #735110; border-color: #735110; }
:root[data-theme='light'] .dl-skill .dl-icon { color: #fffdf8; }
:root[data-theme='light'] .dialog::backdrop { background: rgba(60, 50, 35, 0.45); }
:root[data-theme='light'] .sheet-scrim:not([hidden]) { background: rgba(60, 50, 35, 0.35); }
:root[data-theme='light'] .hs-label { color: var(--limestone); }
:root[data-theme='light'] .dock-badge { background: var(--limestone); color: #fffdf8; }
:root[data-theme='light'] .made-with img { filter: invert(1) brightness(0.2); }
:root[data-theme='light'] .exploration-bar { background: #f6f1e7; color: #3b3329; border-top-color: #e4dccb; }
:root[data-theme='light'] .exploration-credit strong { color: #1c1813; }
:root[data-theme='light'] .exploration-credit span { color: #655a49; }
:root[data-theme='light'] .exploration-bar a, :root[data-theme='light'] .making-of-link { color: #1c1813; }
:root[data-theme='light'] [data-exploration-controls].exploration-bar #scenario-exploration-analytics .scenario-exploration-controls { color: #3b3329; }
:root[data-theme='light'] .halt { background: radial-gradient(ellipse at center, #fffdf8 0%, #efe7d8 70%); }
:root[data-theme='light'] .loading-bg { opacity: 0.3; }
:root[data-theme='light'] .hub-bg-layer.is-on { opacity: 0.5; }
:root[data-theme='light'] .mk-map img { box-shadow: 0 0 0 1px var(--gold-ring), 0 18px 40px rgba(60, 45, 20, 0.18); }
:root[data-theme='light'] .seg-dot-then { background: #a3452f; }
:root[data-theme='light'] .seg-dot-now { background: #3f7a57; }

/* theme toggle */
.theme-btn { width: 44px; padding: 0; justify-content: center; }
.theme-btn svg { display: block; }
@media (max-width: 700px) { .is-visit .theme-btn:not(.sound-btn) { display: none; } }
@media (max-height: 560px) and (min-width: 560px) { .is-visit .theme-btn:not(.sound-btn) { display: none; } }
/* light theme over imagery: only a soft lift behind the label, the picture keeps its colour */
:root[data-theme='light'] .stage-shade { background: linear-gradient(180deg, rgba(255, 253, 248, 0.62) 0%, rgba(255, 253, 248, 0) 13%); }
:root[data-theme='light'] .site-header { background: none; }
:root[data-theme='light'] .is-visit .site-header { background: none; }

:root[data-theme='light'] [tabindex='-1']:focus, :root[data-theme='light'] .plaque-title:focus { box-shadow: none; outline: none; }
/* modal images: space reserved, a soft fade when they arrive */
.making-body img { opacity: 0; transition: opacity 0.45s var(--ease); }
.making-body img.is-loaded { opacity: 1; }
.mk-hero img { aspect-ratio: auto; }
.mk-map img, .mk-plate img { aspect-ratio: auto; }
.mk-text-wide { margin-left: auto; margin-right: auto; }
.mk-band > .mk-text-wide:first-child { margin-left: 0; }
.hub-lede { max-width: 58ch; }
@media (max-width: 820px) { .hub-buttons .hbtn-sm { font-size: 12.5px; padding: 0 12px; } }
/* modal contents row: sticky with the header, current chapter underlined */
.mk-toc { grid-column: 1 / -1; display: flex; gap: 2px 14px; overflow-x: auto; margin: 10px -4px -6px; padding: 2px 4px 8px; scrollbar-width: none; }
.mk-toc::-webkit-scrollbar { display: none; }
.mk-toc a { flex: none; display: inline-flex; align-items: baseline; gap: 5px; min-height: 32px; padding: 6px 0 4px; border-bottom: 2px solid transparent; color: var(--stone); font: 600 12.5px/1.2 var(--sans); letter-spacing: 0.03em; text-decoration: none; white-space: nowrap; }
.mk-toc a:hover { color: var(--limestone); }
.mk-toc a[aria-current='true'] { color: var(--limestone); border-bottom-color: var(--gold); }
.mk-toc-n { font: italic 500 13px/1 var(--serif); color: var(--gold); }
.making-body section, .making-body [id^='mk-'] { scroll-margin-top: 150px; }
@media (max-width: 820px), (max-height: 560px) { .mk-toc a { min-height: 40px; } .making-body [id^='mk-'] { scroll-margin-top: 170px; } }

/* sound on / off: always visible, hub and visits, phones included */
.sound-btn.is-off { border-color: var(--gold-ring); color: var(--gold-hi); }
@media (max-width: 700px) {
  .is-visit .plaque { right: max(66px, calc(env(safe-area-inset-right) + 66px)); }
  .is-visit .header-actions { margin-left: auto; }
}
@media (max-height: 560px) and (min-width: 560px) {
  .is-visit .plaque { max-width: calc(100% - var(--label-left, 74px) - 80px); }
}
@media (max-width: 420px) {
  .back-link { width: 44px; padding: 0; justify-content: center; }
  #back-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .header-actions { gap: 6px; }
  .create-yours { padding: 0 12px; }
}