/* Self-hosted fonts (SIL OFL 1.1; licence texts in fonts/). No request leaves the site for type. */
@font-face { font-family: "Cinzel Decorative"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/CinzelDecorative-Bold.woff2") format("woff2"); }
@font-face { font-family: "Cinzel Decorative"; font-style: normal; font-weight: 900; font-display: swap; src: url("fonts/CinzelDecorative-Black.woff2") format("woff2"); }
@font-face { font-family: "Press Start 2P"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/PressStart2P-Regular.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("fonts/SpaceGrotesk-Variable.woff2") format("woff2"); }

:root {
  --bg: #120c1f;
  --ink: #f4ecdc;
  --ink-dim: #c7bba6;
  --brass: #e2b955;
  --brass-deep: #9c7224;
  --sign-red: #c8233a;
  --teal: #1fb8ad;
  --neon-cyan: #4ff3ff;
  --neon-pink: #ff4fa8;
  --card-bg: rgba(16, 10, 28, 0.78);
  --card-edge: rgba(79, 243, 255, 0.35);
  --stop-h: 160vh;
  --display: "Cinzel Decorative", Georgia, serif;
  --pixel: "Press Start 2P", ui-monospace, monospace;
  --body: "Space Grotesk", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--neon-cyan); }

#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}
body:not(.js) #scene { display: none; }
body:not(.js) {
  background:
    repeating-linear-gradient(90deg, #1b3c3a 0 22px, #e9e4d6 22px 44px) top / 100% 10px no-repeat,
    linear-gradient(#2a1240, var(--bg) 40%);
}

.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(5, 2, 12, 0.55) 100%);
}

/* ---------- HUD ---------- */
.hud {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(16px, 3vw, 32px);
  background: linear-gradient(rgba(10, 6, 18, 0.7), transparent);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font: 900 20px/1 var(--display);
  letter-spacing: 0.02em;
  text-shadow: 0 0 12px rgba(255, 196, 92, 0.55);
  font-variant-ligatures: none;
}
.brand img { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6)); }
.hud-links { display: flex; gap: 8px; }
.hud-links a {
  font: 10px/1 var(--pixel);
  color: var(--ink);
  text-decoration: none;
  padding: 10px 12px;
  border: 1px solid rgba(244, 236, 220, 0.25);
  border-radius: 6px;
  background: rgba(16, 10, 28, 0.55);
}
.hud-links a:hover, .hud-links a:focus-visible {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 12px rgba(79, 243, 255, 0.4);
}

/* ---------- stop nav ---------- */
.stops {
  position: fixed;
  right: clamp(12px, 2vw, 28px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}
.stops ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.stops a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  text-decoration: none;
  color: var(--ink-dim);
  font: 10px/1 var(--pixel);
}
.stops a::after {
  content: "";
  width: 12px; height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f7dc8a, var(--brass-deep));
  opacity: 0.45;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
  transition: opacity .2s, transform .2s, box-shadow .2s;
}
.stops a span { opacity: 0; transform: translateX(6px); transition: opacity .2s, transform .2s; }
.stops a:hover span, .stops a:focus-visible span, .stops a.active span { opacity: 1; transform: none; }
.stops a.active { color: var(--brass); }
.stops a.active::after, .stops a:hover::after {
  opacity: 1;
  transform: scale(1.25);
  box-shadow: 0 0 10px rgba(226, 185, 85, 0.8);
}

/* ---------- credit meter ---------- */
.credit {
  position: fixed;
  left: clamp(16px, 3vw, 32px);
  bottom: 18px;
  z-index: 2;  /* under the panels, over the scene */
  display: flex;
  align-items: center;
  gap: 10px;
  font: 9px/1 var(--pixel);
  color: var(--brass);
  text-shadow: 0 0 8px rgba(226, 185, 85, 0.6);
}
.credit-bar {
  width: 120px; height: 8px;
  border: 1px solid rgba(226, 185, 85, 0.6);
  border-radius: 2px;
  overflow: hidden;
}
.credit-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--neon-pink), var(--brass));
}
body:not(.js) .credit { display: none; }

/* ---------- walk + panels: the arcade is the backdrop, the panels carry the page ---------- */
.scrim {
  /* dims the arcade behind the panels; JS lightens it in the mall so the sign reads */
  --dim: 0.5;
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  /* a soft spotlight follows the section's exhibit (--sx, --sy set by arcade.js) */
  background:
    radial-gradient(circle at var(--sx, 50%) var(--sy, 45%), rgba(10, 6, 18, calc(var(--dim) * 0.15)) 0, rgba(10, 6, 18, calc(var(--dim) * 0.35)) 16vw, rgba(10, 6, 18, var(--dim)) 46vw);
  transition: background 0.3s;
}
body:not(.js) .scrim { display: none; }

#walk { position: relative; z-index: 3; }

.stop {
  position: relative;
  min-height: 130vh;
  padding: 18vh 0 22vh;
  display: flex; align-items: center;
}
.stop-hero { min-height: 120vh; padding-top: 52vh; align-items: flex-start; }
.stop-last { min-height: 100vh; padding-bottom: 12vh; }
body:not(.js) .stop { min-height: 0; padding: 72px 0 24px; }

.wrap {
  /* room on the right for the section dots */
  width: min(1120px, calc(100vw - 2 * clamp(16px, 4vw, 56px) - 120px));
  margin: 0 auto;
  display: grid; gap: 16px;
}
.section-head { max-width: 760px; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.grid-2 { --cols: 2; }
.grid-4 { --cols: 4; }
.span-2 { grid-column: span 2; }

/* each section takes two thirds of the page, alternating sides, and leaves the other third open
   for its exhibit in the scene. Widths are fractions of the page, so browser zoom keeps the split. */
@media (min-width: 900px) {
  .stop { --gut-l: clamp(24px, 3vw, 72px); --gut-r: clamp(110px, 9vw, 150px); }  /* right: room for the section dots */
  .stop-hero .wrap { width: calc(200% / 3); }
  .stop[data-side="right"] .wrap { width: calc(200% / 3 - var(--gut-r)); margin: 0 var(--gut-r) 0 auto; }
  .stop[data-side="left"] .wrap { width: calc(200% / 3 - var(--gut-l)); margin: 0 auto 0 var(--gut-l); }
  .stop[data-side] .grid { --cols: 2; }
  .stop[data-side] .section-head { max-width: none; }
}
/* panels follow their own width, not the window's: one column when a side panel gets narrow */
.wrap { container-type: inline-size; }
@container (max-width: 640px) { .grid-4 { --cols: 2; } }
@container (max-width: 560px) {
  .grid:not(.stats) { --cols: 1 !important; }
  .span-2 { grid-column: auto; }
  .bench { grid-template-columns: 1fr; }
}

.panel {
  padding: 22px 22px 20px;
  background: var(--card-bg);
  border: 1px solid var(--card-edge);
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 0 28px rgba(79, 243, 255, 0.10), 0 18px 50px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.panel > :last-child { margin-bottom: 0; }
.panel p { margin: 0 0 12px; color: var(--ink); }
.panel strong, .panel b { color: #fff; }
.panel h3 { margin: 0 0 8px; font: 700 18px/1.25 var(--body); color: #fff; }
.panel-hero {
  max-width: 620px;
  border-color: rgba(255, 196, 92, 0.4);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 0 36px rgba(255, 170, 60, 0.16), 0 18px 50px rgba(0, 0, 0, 0.5);
}
.panel .icon { display: block; width: 32px; height: 32px; margin-bottom: 10px; }
.panel .icon svg { width: 100%; height: 100%; display: block; }

/* panels slide up as they arrive; without JS they are simply there */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s, transform 0.5s; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

.stat { padding: 16px 18px; }
.stat b { display: block; font: 400 26px/1 var(--pixel); color: var(--brass); text-shadow: 2px 2px 0 var(--sign-red); margin-bottom: 8px; }
.stat span { font-size: 14px; color: var(--ink-dim); }

.state {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px;
  font: 700 11px/1 var(--body); letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: 999px; border: 1px solid currentColor; white-space: nowrap;
}
.state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.state.ok { color: #9bdc3c; }
.state.wip { color: #f6c744; }
.state.no { color: #9a95b0; }
.sys { display: flex; flex-direction: column; gap: 8px; }
.sys h3 { margin: 0; }
.sys .route { font-size: 13px; color: var(--neon-cyan); }
.sys p { font-size: 14.5px; flex: 1; }
.sys .state { align-self: flex-start; }

/* model bench */
.bench { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.bench-view { position: relative; min-height: 320px; border-radius: 10px; background: radial-gradient(circle at 50% 40%, rgba(79, 243, 255, 0.10), rgba(0, 0, 0, 0.25) 70%); }
.bench-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
.bench-view canvas:active { cursor: grabbing; }
.bench-side { display: flex; flex-direction: column; gap: 12px; }
.bench-info h3 { margin-bottom: 4px; }
.bench-meta { font-size: 13px; color: var(--neon-cyan) !important; }
.bench-info p { font-size: 14.5px; }
.bench-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bench-chips button {
  padding: 6px 10px; font: 500 13px/1 var(--body); color: var(--ink);
  background: rgba(16, 10, 28, 0.7); border: 1px solid rgba(244, 236, 220, 0.2); border-radius: 999px; cursor: pointer;
}
.bench-chips button.on, .bench-chips button:hover, .bench-chips button:focus-visible { border-color: var(--neon-cyan); color: #fff; }
.bench-fire { align-self: flex-start; cursor: pointer; border: 0; }
.bench-fire[hidden] { display: none; }
.bench-hint { font-size: 13px; color: var(--ink-dim) !important; }
.bench-off .bench-view { display: none; }
body:not(.js) .bench-view, body:not(.js) .bench-fire { display: none; }

.eyebrow {
  margin: 0 0 12px;
  font: 10px/1.6 var(--pixel);
  color: var(--brass);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
h1, h2 { margin: 0 0 12px; line-height: 1.1; }
h1 {
  font: 900 clamp(32px, 4.6vw, 52px)/1.05 var(--display);
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "dlig" 0;
  color: #fff3d0;
  text-shadow: 0 0 22px rgba(255, 170, 60, 0.45);
}
h2 {
  font: 700 clamp(24px, 2.6vw, 30px)/1.12 var(--body);
  letter-spacing: -0.01em;
}
.lede { font-size: 18px; }
.fine { font-size: 14px; color: var(--ink-dim) !important; }

/* scoreboard: dated workshop log */
.log { margin-top: 16px; }
.log-list { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 10px; }
.log-list li { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: baseline; padding-top: 10px; border-top: 1px solid var(--card-edge); }
.log-list time { font-family: var(--pixel); font-size: 10px; line-height: 1.6; color: var(--brass); white-space: nowrap; }
.log-list b { color: #fff; }
.ticks { margin: 0 0 14px; padding: 0; list-style: none; }
.ticks li { position: relative; padding-left: 22px; margin: 4px 0; }
.ticks li::before {
  content: "";
  position: absolute;
  left: 2px; top: 0.5em;
  width: 9px; height: 9px;
  border: 2px solid var(--neon-cyan);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--neon-cyan);
}

.scroll-hint {
  margin-top: 18px !important;
  font: 10px/1 var(--pixel);
  color: var(--neon-cyan) !important;
}
.blink { animation: blink 1.1s steps(2, start) infinite; display: inline-block; margin-right: 6px; }
@keyframes blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .blink { animation: none; } }

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 !important; }
.btn {
  display: inline-block;
  padding: 12px 16px;
  font: 10px/1 var(--pixel);
  color: #1a1004;
  text-decoration: none;
  background: linear-gradient(#f7dc8a, var(--brass));
  border-radius: 6px;
  box-shadow: 0 3px 0 var(--brass-deep), 0 0 18px rgba(226, 185, 85, 0.35);
}
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--brass-deep); }
.btn-ghost {
  color: var(--ink);
  background: transparent;
  border: 1px solid rgba(244, 236, 220, 0.4);
  box-shadow: none;
}

a:focus-visible, .btn:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: 3px; }

.noscript {
  position: fixed; bottom: 0; left: 0; right: 0;
  margin: 0; padding: 12px 16px;
  background: #000; color: var(--ink); text-align: center; z-index: 9;
}

.loading {
  position: fixed;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  background: var(--bg);
  font: 11px/1 var(--pixel);
  color: var(--brass);
  transition: opacity .6s;
}
.loading.done { opacity: 0; pointer-events: none; }

/* ---------- phones ---------- */
@media (max-width: 720px) {
  body { font-size: 15px; }
  .brand { font-size: 16px; }
  .brand img { width: 28px; height: 28px; }
  .brand span { display: none; }  /* the token stays; the links need the room */
  .hud-links a { white-space: nowrap; }
  .hud-links a { padding: 9px 9px; font-size: 10px; }
  .hud-links a:nth-child(n+3) { display: none; }
  .stops { right: 8px; }
  .stops ol { gap: 12px; }
  .stops a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wrap { width: calc(100vw - 32px - 28px); margin: 0 28px 0 16px; }
  .grid, .grid-2, .grid-4 { --cols: 1; }
  .grid-4.stats { --cols: 2; }
  .span-2 { grid-column: auto; }
  .stop { padding: 14vh 0 18vh; min-height: 110vh; }
  .stop-hero { padding-top: 46vh; }
  .panel { padding: 18px; }
  .bench { grid-template-columns: 1fr; }
  .bench-view { min-height: 260px; }
  .lede { font-size: 16px; }
  h2 { font-size: 22px; }
  .credit { display: none; }
}

.skip { position: absolute; left: 12px; top: -48px; z-index: 20; padding: 10px 14px; background: var(--brass); color: #1a1004; border-radius: 6px; font: 700 14px/1 var(--body); }
.skip:focus { top: 12px; }

/* portrait windows aim the camera so the exhibit sits above the first panel; leave it room */
@media (max-width: 899px) and (orientation: portrait) {
  .stop[data-side] { padding-top: 42vh; }
}

/* ---------- background music bar ---------- */
.music {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: 14px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 8px;
  border: 1px solid rgba(226, 185, 85, 0.35);
  border-radius: 999px;
  background: rgba(18, 12, 31, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  color: var(--brass);
  font: 9px/1 var(--pixel);
}
.music-btn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid rgba(226, 185, 85, 0.6);
  border-radius: 50%;
  background: rgba(226, 185, 85, 0.08);
  color: var(--brass);
  cursor: pointer;
}
.music-btn:hover { background: rgba(226, 185, 85, 0.2); }
.music-btn:focus-visible, .music-knob:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: 2px; }
.music-btn svg { width: 13px; height: 13px; fill: currentColor; }
.music .i-pause, .music.is-playing .i-play { display: none; }
.music.is-playing .i-pause { display: inline; }
.music-title { color: var(--ink-dim, #b9b0cc); font: 500 12px/1.2 var(--body); white-space: nowrap; }
.music.is-failed .music-title { color: var(--brass); }
.music-time { font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: 0.02em; }
.music-time b { font-weight: 400; color: var(--ink, #f3ecff); }
.music-knob {
  width: 30px; height: 30px;
  border-radius: 50%;
  cursor: ns-resize;
  touch-action: none;
  background: conic-gradient(from 225deg, rgba(226, 185, 85, 0.55) 0 270deg, transparent 270deg);
  padding: 3px;
}
.music-dial {
  display: block; position: relative;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a3d66, #1b1330 70%);
  box-shadow: inset 0 0 0 1px rgba(226, 185, 85, 0.5);
}
.music-dial i { position: absolute; left: calc(50% - 1px); top: 3px; width: 2px; height: 8px; border-radius: 1px; background: var(--brass); }
.music-db { min-width: 5.5ch; text-align: right; font-variant-numeric: tabular-nums; }
.has-music .flow-main { padding-bottom: 96px; }
@media (max-width: 720px) {
  .music { left: 12px; right: 12px; bottom: 10px; justify-content: space-between; gap: 8px; }
}
.music[hidden] { display: none; }

/* the title turns into a seek bar on hover or focus */
.music-track { display: grid; align-items: center; width: 240px; }
.music-track > * { grid-area: 1 / 1; }
.music-title { overflow: hidden; text-overflow: ellipsis; transition: opacity 0.15s; }
.music-seek {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 22px; margin: 0;
  background: transparent; cursor: pointer;
  opacity: 0; transition: opacity 0.15s;
  --fill: 0%;
}
.music-track:hover .music-seek, .music-seek:focus-visible { opacity: 1; }
.music-track:hover .music-title, .music-track:focus-within .music-title { opacity: 0; }
.music-seek::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--brass) var(--fill), rgba(226, 185, 85, 0.25) var(--fill));
}
.music-seek::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(226, 185, 85, 0.25); }
.music-seek::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--brass); }
.music-seek::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px; margin-top: -4px; border-radius: 50%;
  background: var(--ink); box-shadow: 0 0 0 2px var(--brass);
}
.music-seek::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--brass); }
.music-seek:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 720px) {
  /* no hover on phones: the seek bar takes the title's place */
  .music-track { flex: 1; width: auto; min-width: 0; }
  .music-title { visibility: hidden; }
  .music-seek { opacity: 1; }
  .music { gap: 6px; }
  .music-db { display: none; }  /* the knob's angle shows the level; screen readers get it from the knob */
}

.music-eq { font: 15px/1 Menlo, Consolas, "DejaVu Sans Mono", monospace; letter-spacing: 1px; color: var(--neon-cyan); text-shadow: 0 0 6px rgba(79, 243, 255, 0.5); white-space: pre; }
@media (max-width: 720px) { .music-eq { display: none; } }