/* Lostwell website (D-268, Q-604): the game's pixel look. Colours from art/palette/palette.json (docs/design/art.md).
   Fusion Pixel is a 12 px font: sizes are whole multiples of 12 px on desktop so every font pixel lands on a screen
   pixel; phones (high density screens) use 18 px. No blur, no rounded corners. */

:root {
  --ink: #0d0a12; --n1: #16121e; --n2: #211b2c; --n3: #2e2640; --n4: #40365a; --n5: #5a4e76; --n6: #7d7196;
  --n7: #a69cb8; --n8: #d2cbdb; --n9: #f3eff5;
  --o0: #3a2410; --o1: #6e461a; --o2: #a8702a; --o3: #d7a03a; --o4: #f4d06a; --o5: #fff0b0;
  --p0: #24123a; --p1: #46216a; --x3: #ac2c18; --x4: #d8461e; --t3: #4cc2a8;
  --r0: #3a0d1a; --r1: #741a2b; --r2: #b8303a; /* the museum's red gallery */
  --w0: #1e120e; --w1: #3a2219; --w2: #5e3824; --w3: #8a5532; --w4: #b87d45; --w5: #e0b06a; /* wood */
  --legend: #ffd67a;
  --px: 3px; /* one "art pixel" of frames and bevels */
  --text: 24px; --line: 36px; --small: 18px; --h1: 48px; --h2: 36px;
  --font: "Fusion Pixel", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--ink); color: var(--n8); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font: var(--text) / var(--line) var(--font);
  -webkit-font-smoothing: none; font-smooth: never; text-rendering: optimizeSpeed;
  /* the well wall, pressed down so text reads over it */
  background:
    linear-gradient(rgba(13, 10, 18, 0.80), rgba(13, 10, 18, 0.93) 60%, rgba(13, 10, 18, 0.97)),
    url("img/bg.webp") center top / 1438px auto repeat-y fixed var(--ink);
  image-rendering: pixelated;
}
img, video { display: block; max-width: 100%; height: auto; image-rendering: pixelated; }
a { color: var(--o4); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
a:hover { color: var(--o5); }
:focus-visible { outline: var(--px) solid var(--o4); outline-offset: var(--px); }
p { margin: 0 0 var(--line); }
ul { margin: 0 0 var(--line); padding-left: 1.2em; }
li { margin: 0 0 6px; }
li::marker { color: var(--o3); }
code { font: inherit; color: var(--o5); background: var(--n2); padding: 0 6px; }
strong { color: var(--n9); font-weight: normal; text-shadow: 1px 0 0 currentColor; }
h1, h2, h3 { font-weight: normal; margin: 0 0 24px; line-height: 1.25; }
h1 { font-size: var(--h1); color: var(--o3); text-shadow: var(--px) var(--px) 0 var(--o0); }
h2 { font-size: var(--h2); color: var(--o3); text-shadow: var(--px) var(--px) 0 var(--o0); }
h3 { font-size: var(--text); color: var(--n9); margin-bottom: 12px; }
.small { font-size: var(--small); line-height: 30px; color: var(--n6); }
.muted { color: var(--n7); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 10; background: var(--ink); padding: 6px 12px; }

/* ------------------------------------------------------------------------------------------- header */
.top { position: sticky; top: 0; z-index: 5; background: rgba(13, 10, 18, 0.94); box-shadow: 0 var(--px) 0 var(--n3); }
.top .in { display: flex; align-items: center; gap: 24px; max-width: 1200px; margin: 0 auto; padding: 0 24px; min-height: 60px; }
.brand { font-size: var(--h2); line-height: 48px; color: var(--o3); text-decoration: none; text-shadow: var(--px) var(--px) 0 var(--o0); white-space: nowrap; }
.brand:hover { color: var(--o4); }
.nav { display: flex; gap: 24px; margin-left: auto; flex-wrap: wrap; }
.nav a { color: var(--n8); text-decoration: none; padding: 6px 0; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--o4); box-shadow: 0 var(--px) 0 var(--o3); }
.langs { position: relative; }
.langs summary { list-style: none; cursor: pointer; color: var(--n7); padding: 6px 12px; box-shadow: inset 0 0 0 var(--px) var(--n4); user-select: none; }
.langs summary::-webkit-details-marker { display: none; }
.langs summary::after { content: " ▾"; }
.langs[open] summary { color: var(--o4); box-shadow: inset 0 0 0 var(--px) var(--o3); }
.langs ul { position: absolute; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px 0; list-style: none; background: var(--n1);
  box-shadow: inset 0 0 0 var(--px) var(--n4), 6px 6px 0 rgba(5, 3, 7, 0.9); min-width: 100%; z-index: 6; }
.langs li { margin: 0; }
.langs li a { display: block; padding: 0 18px; color: var(--n8); text-decoration: none; white-space: nowrap; }
.langs li a:hover, .langs li a[aria-current="true"] { color: var(--o4); background: var(--n2); }

/* --------------------------------------------------------------------------------------------- page */
main { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 24px 24px 48px; }
.narrow { max-width: 864px; margin-left: auto; margin-right: auto; }
section { margin: 0 0 72px; }
.panel { background: rgba(22, 18, 30, 0.92); padding: 24px 36px;
  box-shadow: inset 0 0 0 var(--px) var(--n3), var(--px) var(--px) 0 var(--px) rgba(5, 3, 7, 0.85); }

/* ------------------------------------------------------------------------------------------- hero */
.hero { display: flex; flex-direction: column; align-items: center; margin-bottom: 72px; }
.tagline { font-size: var(--text); color: var(--n7); margin: 0 0 12px; text-align: center; text-shadow: none; }
.screen { width: 100%; max-width: 800px; aspect-ratio: 1232 / 706; background: var(--ink); position: relative;
  box-shadow: 0 0 0 var(--px) var(--n4), 0 0 0 calc(var(--px) * 2) var(--ink), 12px 12px 0 calc(var(--px) * 2) rgba(5, 3, 7, 0.8); }
.screen video, .screen img { width: 100%; height: 100%; object-fit: cover; }
.ctas { display: flex; gap: 36px; justify-content: center; align-items: flex-start; flex-wrap: wrap; margin-top: 30px; }
.cta { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.cta .note { font-size: var(--small); line-height: 24px; color: var(--n7); text-align: center; }
.cta .note a { color: var(--n7); }

/* the wishlist button (D-275): gold, glowing, with the Steam mark, the same as in the game (ui/wishlist.ts).
   A soft halo breathes around it and a gleam runs across now and then */
.legend { --w: 312px; position: relative; display: flex; align-items: center; justify-content: center; gap: 15px; min-width: var(--w); max-width: 100%; box-sizing: border-box; padding: 15px 18px 12px;
  text-decoration: none; overflow: hidden; color: #1e120e; background: var(--o3);
  box-shadow: inset 0 calc(var(--px) * 2) 0 var(--o4), inset 0 calc(var(--px) * -2) 0 var(--o2), 0 0 0 var(--px) #0d0a12;
  animation: wish-glow 2.8s ease-in-out infinite; }
.legend::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 18%; transform: skewX(-25deg);
  background: rgba(255, 255, 255, 0.45); animation: wish-gleam 3.6s linear infinite; pointer-events: none; }
.legend .mark { flex: none; width: 42px; height: 42px; image-rendering: pixelated; }
.legend > span { display: block; text-align: left; }
.legend b { display: block; font-weight: normal; font-size: var(--h2); line-height: 48px; }
/* longer languages (ja, ru, de…) widen the button rather than break the label, where there is room */
@media (min-width: 700px) { .legend b { white-space: nowrap; } }
.legend i { display: block; font-style: normal; font-size: var(--small); line-height: 24px; color: #4c2a12; }
a.legend:hover { background: var(--o4); color: #1e120e; }
.legend[aria-disabled="true"] { cursor: default; }
@keyframes wish-glow { 0%, 100% { filter: drop-shadow(0 0 8px rgba(244, 208, 106, 0.45)); } 50% { filter: drop-shadow(0 0 22px rgba(255, 214, 122, 0.8)); } }
@keyframes wish-gleam { 0% { left: -40%; } 20%, 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .legend, .legend::after { animation: none; } .legend::after { display: none; } }

/* the play button: the velvet button with a gold frame of the game's menus (the gold one is the wishlist's) */
.gold { display: block; min-width: 312px; padding: 18px 24px 15px; text-align: center; text-decoration: none; color: var(--o4); background: #3a0e1b; border: 0; cursor: pointer;
  font: inherit; box-shadow: inset 0 0 0 var(--px) var(--o3), inset 0 calc(var(--px) * 2) 0 #6d2236, 9px 9px 0 rgba(5, 3, 7, 0.85); }
.gold b { display: block; font-weight: normal; font-size: var(--h2); line-height: 48px; }
.gold i { display: block; font-style: normal; font-size: var(--small); line-height: 24px; color: #dcaaa4; }
.gold:hover { background: #741a2b; color: var(--o5); }
.gold:active { transform: translate(3px, 3px); box-shadow: inset 0 0 0 var(--px) var(--o3); }
.gold:disabled, .gold[aria-disabled="true"] { color: var(--n5); background: var(--n2); box-shadow: inset 0 0 0 var(--px) var(--n3); cursor: default; }
.plain { display: inline-block; padding: 6px 18px; color: var(--n8); background: var(--n2); text-decoration: none; border: 0; font: inherit; cursor: pointer;
  box-shadow: inset 0 0 0 var(--px) var(--n5); }
.plain:hover { color: var(--o4); box-shadow: inset 0 0 0 var(--px) var(--o3); }
.plain[aria-disabled="true"], .plain:disabled { color: var(--n5); box-shadow: inset 0 0 0 var(--px) var(--n3); cursor: default; }

/* phones: no "play" (the game needs a keyboard or a gamepad, D-260); copy the link instead */
.phone-only { display: none; }
.copybox { max-width: 360px; }
.copybox .gold b { font-size: var(--text); line-height: 36px; }
.copybox .url { display: none; font-size: var(--small); line-height: 18px; word-break: break-all; color: var(--n8); margin-top: 6px; user-select: all; }
.copybox.show-url .url { display: block; }

/* ---------------------------------------------------------------------------------- press: screenshots */
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 24px; }
.shots a { display: block; box-shadow: 0 0 0 var(--px) var(--n4); line-height: 0; }
.shots a:hover { box-shadow: 0 0 0 var(--px) var(--o3); }
.narrow .shots { grid-template-columns: 1fr 1fr; }
.shots img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
/* pictures at game pixels: every game pixel stays a square */
img.px { image-rendering: pixelated; }

.community { display: flex; gap: 18px; flex-wrap: wrap; }
.community .plain small { font-size: var(--small); margin-left: 9px; }

.signup form { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 18px; }
.signup input[type=email] { flex: 1 1 280px; min-width: 0; padding: 9px 12px; font: inherit; color: var(--n9); background: var(--ink); border: 0; border-radius: 0;
  box-shadow: inset 0 0 0 var(--px) var(--n5); }
.signup input[type=email]:focus { outline: 0; box-shadow: inset 0 0 0 var(--px) var(--o3); }
.signup input:disabled { color: var(--n5); box-shadow: inset 0 0 0 var(--px) var(--n3); }
.signup .gold { min-width: 0; padding: 9px 24px; font-size: var(--text); }
.signup .gold:disabled { background: var(--n3); color: var(--n6); box-shadow: none; cursor: default; transform: none; }
.signup p { margin-bottom: 12px; }
/* D-289: the first screen's small signup, under the two buttons (smaller than both) */
.signup-top { margin-top: 24px; width: 480px; max-width: 100%; text-align: center; }
.signup-top p { margin: 0 0 6px; color: var(--n8); text-shadow: 0 var(--px) 0 var(--ink); }
.signup-top form { margin: 0; gap: 8px; flex-wrap: nowrap; }
.signup-top input[type=email] { flex: 1 1 auto; padding: 6px 10px; }
.signup-top .gold { padding: 6px 18px; }
.soon { display: inline-block; font-size: var(--small); line-height: 18px; padding: 3px 9px; color: var(--ink); background: var(--n6); vertical-align: middle; }

/* ---------------------------------------------------------------------------------- devlog */
.entry { margin-bottom: 48px; }
.entry h2 { margin-bottom: 6px; }
.entry .meta { font-size: var(--small); line-height: 24px; color: var(--n7); margin-bottom: 18px; }
.entry .meta .soon { background: var(--o3); }

/* ---------------------------------------------------------------------------------- press / faq */
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 36px; margin: 0; }
.facts dt { color: var(--n6); }
.facts dd { margin: 0; }
.dl { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; margin: 0 0 var(--line); }
.logos { display: flex; gap: 36px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 24px; }
.logos img { max-height: 180px; width: auto; }
.faq h2 { font-size: var(--text); color: var(--o4); text-shadow: none; margin: 0 0 12px; }
.faq article { margin-bottom: 48px; }
.toc { columns: 2; column-gap: 48px; margin-bottom: 48px; }
.toc li { break-inside: avoid; }

/* ---------------------------------------------------------------------------------- footer */
.foot { background: rgba(13, 10, 18, 0.96); box-shadow: 0 calc(var(--px) * -1) 0 var(--n3); padding: 24px; text-align: center; }
.foot nav { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
.foot nav a { color: var(--n7); text-decoration: none; font-size: var(--small); line-height: 30px; }
.foot nav a:hover { color: var(--o4); }
.foot p { margin: 0; font-size: var(--small); line-height: 30px; color: var(--n6); }
.foot .by { color: var(--n8); }

.lost { text-align: center; padding-top: 96px; }

/* ================================================================================ the home page (D-281)
   Scrolling down is going down the well: the street (the picture from the game, at the visitor's time of
   day; site.js fits it at a whole-number scale and draws the falling things), the shaft's floors, the museum,
   the street at night. */
.page-home main { max-width: none; padding: 0; }
.page-home section { margin: 0; scroll-margin-top: 66px; }
.page-home .top { position: fixed; left: 0; right: 0; background: transparent; box-shadow: none; transition: background 0.2s; }
.page-home .top.solid { background: rgba(13, 10, 18, 0.94); box-shadow: 0 var(--px) 0 var(--n2); }
.page-home .top .in { max-width: none; padding: 0 36px; }
.page-home .top a:not(.legend), .page-home .langs summary { text-shadow: var(--px) var(--px) 0 var(--ink); }
/* the small wishlist button in the header, once the big one has gone by */
.legend.small { --w: auto; padding: 6px 15px 3px 12px; gap: 9px; box-shadow: inset 0 var(--px) 0 var(--o4), inset 0 calc(var(--px) * -1) 0 var(--o2), 0 0 0 var(--px) var(--ink); }
.legend.small .mark { width: 28px; height: 28px; }
.legend.small b { font-size: var(--text); line-height: 36px; }
[data-topwish] { visibility: hidden; opacity: 0; transition: opacity 0.2s; }
.top.past [data-topwish] { visibility: visible; opacity: 1; }
.outline { text-shadow: var(--px) var(--px) 0 var(--ink), calc(var(--px) * -1) 0 0 var(--ink), 0 calc(var(--px) * -1) 0 var(--ink), var(--px) 0 0 var(--ink), 0 var(--px) 0 var(--ink); }

/* ---- the street */
.ground { position: relative; height: 100vh; min-height: 640px; overflow: hidden; background: var(--ink); }
.ground .scene, .join .scene { position: absolute; inset: 0; overflow: hidden; }
.scene img, .scene canvas { position: absolute; max-width: none; image-rendering: pixelated; }
/* before site.js fits it (or without it): cover the box, the well in view */
.scene img { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 80% 90%; }
.scene canvas { display: none; }
.scene.fit canvas { display: block; }
.hero-copy { position: absolute; z-index: 2; left: 42%; top: 96px; width: 1000px; margin-left: -500px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-copy h1 { margin: 0 0 -6px; line-height: 0; }
.hero-copy .logo { height: 270px; width: auto; max-width: none; }
.hero-copy .tagline { font-size: var(--h2); line-height: 48px; color: var(--n9); margin: 0 0 30px;
  text-shadow: var(--px) var(--px) 0 var(--ink), calc(var(--px) * -1) 0 0 var(--ink), 0 calc(var(--px) * -1) 0 var(--ink), var(--px) 0 0 var(--ink), 0 var(--px) 0 var(--ink); }
/* "现在可玩" hung beside the logo and as loud as it: a red sign with a gold edge (the play button's colours), lit,
   swinging now and then; a click plays. site.js keeps it on screen */
.hero-copy .head { position: relative; }
.now { position: absolute; z-index: 1; left: 100%; top: 48px; margin-left: 6px; display: flex; flex-direction: column; align-items: center; padding: 18px 30px 12px;
  white-space: nowrap; text-decoration: none; color: var(--o5); background: var(--r2);
  box-shadow: inset 0 0 0 6px var(--o4), inset 0 0 0 9px var(--r1), 0 0 0 var(--px) var(--ink), 12px 12px 0 var(--px) rgba(5, 3, 7, 0.8);
  transform: rotate(-6deg); transform-origin: 50% -30px; animation: sign-swing 3s steps(1) infinite, sign-glow 2.4s ease-in-out infinite; }
.now b { font-weight: normal; font-size: 60px; line-height: 66px; text-shadow: 4px 4px 0 var(--r0); }
.now i { font-style: normal; font-size: var(--h2); line-height: 42px; margin-top: 6px; color: var(--legend); text-shadow: var(--px) var(--px) 0 var(--r0); }
a.now:hover { color: var(--o5); background: #c83a44; }
/* a screen too narrow for the full size beside the logo (site.js) */
.now.tight { top: 60px; padding: 12px 24px 9px; }
.now.tight b { font-size: var(--h1); line-height: 54px; }
.now.tight i { font-size: var(--text); line-height: 30px; }
@keyframes sign-swing { 0%, 76%, 100% { transform: rotate(-6deg); } 80% { transform: rotate(-12deg) scale(1.06); } 84% { transform: rotate(-1deg) scale(1.03); }
  88% { transform: rotate(-9deg) scale(1.05); } 92% { transform: rotate(-6deg); } }
@keyframes sign-glow { 0%, 100% { filter: drop-shadow(0 0 8px rgba(255, 214, 122, 0.4)); } 50% { filter: drop-shadow(0 0 26px rgba(255, 214, 122, 0.85)); } }
/* the play button louder on the first screen and at the end (a brighter velvet, a thick gold frame, the » nudging on) */
.ctas .gold { color: var(--o5); background: var(--r1);
  box-shadow: inset 0 0 0 6px var(--o4), inset 0 9px 0 #a8303f, 0 0 0 var(--px) var(--ink), 9px 9px 0 var(--px) rgba(5, 3, 7, 0.85); }
.ctas .gold i { color: #f3d9c9; }
.ctas .gold:hover { background: #8e2236; color: var(--o5); }
.ctas .gold .go { display: inline-block; animation: nudge 1s steps(2) infinite; }
@keyframes nudge { 50% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .now, .ctas .gold .go { animation: none; } }
.ground .ctas, .join .ctas { margin-top: 0; }
.ground .cta .note, .join .cta .note { color: var(--n8); text-shadow: var(--px) var(--px) 0 var(--ink); }
/* the game's interaction prompt over the well */
.prompt { position: absolute; z-index: 2; left: 80%; top: 62%; display: flex; align-items: center; gap: 9px; padding: 3px 12px 0 6px; white-space: nowrap; color: var(--n8);
  text-decoration: none; background: rgba(13, 10, 18, 0.85); box-shadow: inset 0 0 0 var(--px) var(--n4); transform: translateX(-50%); animation: bob 1.2s steps(2) infinite; }
.prompt kbd { font: inherit; color: var(--ink); background: var(--o4); padding: 0 9px; box-shadow: inset 0 calc(var(--px) * -1) 0 var(--o2); }
.prompt:hover { color: var(--n9); box-shadow: inset 0 0 0 var(--px) var(--o3); }
@keyframes bob { 50% { margin-top: -6px; } }
/* "picked up": a note like the game's */
.toast { position: absolute; z-index: 3; left: 50%; top: 96px; transform: translateX(-50%); width: max-content; max-width: min(720px, 94vw); padding: 12px 24px; text-align: center; color: var(--n7);
  background: rgba(13, 10, 18, 0.92); box-shadow: inset 0 0 0 var(--px) var(--o2), 6px 6px 0 rgba(5, 3, 7, 0.7); opacity: 0; transition: opacity 0.25s; pointer-events: none; }
.toast.on { opacity: 1; }
.toast b { font-weight: normal; color: var(--o4); }

/* ---- the player: "play" turns the first screen into the game in a frame (site.js sizes it), the street dimmed behind */
.player { position: absolute; z-index: 2; left: 0; right: 0; top: 60px; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.player[hidden] { display: none; }
.player iframe { display: block; border: 0; background: var(--ink);
  box-shadow: 0 0 0 var(--px) var(--n4), 0 0 0 calc(var(--px) * 2) var(--ink), 12px 12px 0 calc(var(--px) * 2) rgba(5, 3, 7, 0.8); }
.player .bar { display: flex; gap: 18px; align-items: center; justify-content: center; flex-wrap: wrap; }
.player .bar .plain { background: rgba(13, 10, 18, 0.85); }
.ground.playing .hero-copy, .ground.playing .prompt, .ground.playing .toast, .ground.playing .falling { display: none; }
.ground.playing .scene::after { content: ""; position: absolute; inset: 0; background: rgba(13, 10, 18, 0.85); }

/* ---- the shaft: the well's bricks down both sides, darker the deeper */
.shaft { position: relative; padding: 48px 0 144px; overflow: hidden;
  background: radial-gradient(ellipse 900px 1100px at 50% -200px, rgba(247, 181, 69, 0.13), rgba(247, 181, 69, 0) 70%), linear-gradient(#1a1520, var(--ink) 70%); }
.shaft::before, .shaft::after { content: ""; position: absolute; top: 0; bottom: 0; width: max(72px, calc((100vw - 1560px) / 2));
  background: url("img/bricks.png") 0 0 / 384px 1536px repeat; image-rendering: pixelated; filter: brightness(0.7); }
.shaft::before { left: 0; -webkit-mask: linear-gradient(to right, #000 30%, transparent); mask: linear-gradient(to right, #000 30%, transparent); }
.shaft::after { right: 0; background-position: 192px 0; -webkit-mask: linear-gradient(to left, #000 30%, transparent); mask: linear-gradient(to left, #000 30%, transparent); }
.shaft > section { position: relative; z-index: 1; }
.shaft .rim { position: absolute; left: 0; right: 0; top: 0; height: 9px; z-index: 2; background: var(--n2); box-shadow: 0 var(--px) 0 var(--ink), inset 0 var(--px) 0 var(--n4); }
/* lost things still falling past, behind the text */
.drift { position: absolute; inset: 0; pointer-events: none; }
.drift img { position: absolute; top: -120px; opacity: 0.45; image-rendering: pixelated; animation: drift 34s linear infinite; }
.drift img:nth-child(odd) { left: 3%; } .drift img:nth-child(even) { right: 3%; }
.drift img:nth-child(1) { animation-duration: 31s; animation-delay: -4s; }  .drift img:nth-child(2) { animation-duration: 38s; animation-delay: -21s; }
.drift img:nth-child(3) { animation-duration: 27s; animation-delay: -13s; left: 6%; } .drift img:nth-child(4) { animation-duration: 42s; animation-delay: -30s; right: 6%; }
.drift img:nth-child(5) { animation-duration: 35s; animation-delay: -8s; }  .drift img:nth-child(6) { animation-duration: 29s; animation-delay: -17s; }
.drift img:nth-child(7) { animation-duration: 40s; animation-delay: -36s; left: 5%; } .drift img:nth-child(8) { animation-duration: 33s; animation-delay: -2s; right: 5%; }
.drift img:nth-child(9) { animation-duration: 37s; animation-delay: -25s; } .drift img:nth-child(10) { animation-duration: 30s; animation-delay: -11s; }
@keyframes drift { to { transform: translateY(calc(var(--shaft, 6000px) + 240px)); } }
/* the depth gauge: the floor you're looking at (site.js) */
.depth { position: fixed; z-index: 4; left: 30px; top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.depth.on { opacity: 1; pointer-events: auto; }
.depth ol { list-style: none; margin: 0; padding: 0 0 0 21px; box-shadow: inset var(--px) 0 0 var(--n3); }
.depth li { position: relative; margin: 0 0 18px; }
.depth li:last-child { margin: 0; }
.depth li::marker { content: none; }
.depth a { color: var(--n5); text-decoration: none; }
.depth a:hover { color: var(--n8); }
.depth li::before { content: ""; position: absolute; left: -24px; top: 15px; width: 9px; height: var(--px); background: var(--n3); }
.depth li.here a { color: var(--o4); }
.depth li.here::before { left: -27px; top: 12px; height: 9px; background: var(--o4); box-shadow: 0 0 12px var(--o3); }
.depth li.up a { font-size: var(--small); }

.mouth { text-align: center; padding: 144px 24px 192px; }
.kicker { display: inline-flex; gap: 18px; align-items: center; color: var(--o3); margin: 0 0 24px; }
.kicker::before, .kicker::after { content: ""; width: 72px; height: var(--px); background: var(--o2); }
.mouth h2, .museum h2, .join h2 { font-size: var(--h1); line-height: 72px; color: var(--o4); text-shadow: var(--px) var(--px) 0 var(--o0); margin-bottom: 36px; }
.mouth .lead { color: var(--n7); margin: 0; }
.mouth .screen { margin: 72px auto 0; }

.floor { display: grid; grid-template-columns: 960px 480px; gap: 60px; justify-content: center; align-items: center; padding: 0 24px; margin: 0 auto 192px !important; }
.floor.flip { grid-template-columns: 480px 960px; }
.floor.flip .shot { order: 2; }
.floor .shot { margin: 0; line-height: 0; box-shadow: 0 0 0 var(--px) var(--n3), 0 0 0 6px var(--ink), 18px 18px 0 6px rgba(5, 3, 7, 0.6); }
.floor .shot a { display: block; }
.floor .shot img { width: 960px; height: 540px; max-width: none; }
.say { position: relative; }
.say::before { content: attr(data-n); position: absolute; z-index: -1; right: 0; top: -132px; font-size: 240px; line-height: 240px; color: rgba(90, 78, 118, 0.18); }
.plate { display: inline-block; color: var(--o4); background: var(--w1); padding: 3px 15px 0; margin: 0 0 18px;
  box-shadow: inset 0 0 0 var(--px) var(--o2), 6px 6px 0 rgba(5, 3, 7, 0.6); }
.say h3 { font-size: var(--h1); line-height: 60px; color: var(--n9); text-shadow: var(--px) var(--px) 0 var(--ink); margin-bottom: 18px; }
.say p:not(.plate) { color: var(--n6); margin: 0; }
.say strong { color: var(--o4); text-shadow: none; }

/* ---- back up: the museum's red gallery */
.museum { position: relative; padding: 144px 24px 0; text-align: center;
  background: linear-gradient(rgba(13, 10, 18, 0.6), rgba(13, 10, 18, 0) 240px), url("img/damask.svg") 0 0 / 72px 72px repeat var(--r1); image-rendering: pixelated; }
.museum::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: var(--o3); box-shadow: 0 var(--px) 0 var(--o1), inset 0 calc(var(--px) * -1) 0 var(--o5); }
.museum .kicker { color: var(--o4); }
.museum .kicker::before, .museum .kicker::after { background: var(--o3); }
.museum h2 { text-shadow: var(--px) var(--px) 0 var(--r0); }
.museum .lead { color: #f3d9c9; margin: 0 0 48px; }
.cases { display: grid; grid-template-columns: repeat(6, 180px); gap: 36px 24px; justify-content: center; align-items: end; }
.case { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.case .glass { width: 180px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 21px; position: relative;
  background: linear-gradient(#2a1d2c, #120c16); box-shadow: inset 0 0 0 var(--px) var(--w4), inset 0 0 0 6px var(--w1), 6px 6px 0 rgba(20, 4, 10, 0.6); }
.case .glass::before { content: ""; position: absolute; left: 6px; right: 6px; bottom: 6px; height: 15px; background: var(--w2); box-shadow: inset 0 var(--px) 0 var(--w4); }
.case .glass::after { content: ""; position: absolute; left: 18px; top: 12px; width: 6px; height: 54px; background: rgba(255, 255, 255, 0.16); box-shadow: 12px 0 0 rgba(255, 255, 255, 0.08); }
.case img { position: relative; image-rendering: pixelated; }
.case .name { margin-top: 12px; font-size: 12px; line-height: 24px; padding: 0 9px; color: var(--w0); background: var(--o3); box-shadow: inset 0 calc(var(--px) * -1) 0 var(--o2); }
.case:hover .glass, .case[aria-pressed="true"] .glass { box-shadow: inset 0 0 0 var(--px) var(--o4), inset 0 0 0 6px var(--w1), 0 0 24px rgba(255, 214, 122, 0.5), 6px 6px 0 rgba(20, 4, 10, 0.6); }
.case[aria-pressed="true"] .name { background: var(--o4); }
.placard { margin: 48px auto 0; max-width: 840px; padding: 24px 36px; text-align: left; color: var(--n1); background: #efe3c8;
  box-shadow: inset 0 0 0 var(--px) var(--o2), inset 0 0 0 6px #efe3c8, inset 0 0 0 9px var(--o1), 9px 9px 0 rgba(20, 4, 10, 0.6); }
.placard b { display: block; font-weight: normal; font-size: var(--h2); line-height: 48px; color: var(--r1); margin-bottom: 6px; }
.placard p { margin: 0; }
/* the wainscot */
.museum::after { content: ""; display: block; height: 168px; margin: 96px -24px 0;
  background: linear-gradient(var(--o2) 0 6px, var(--w1) 6px 12px, var(--w3) 12px 18px, var(--w2) 18px); box-shadow: inset 0 -24px 0 var(--w1); }

/* ---- tonight: the street again, the buttons, the newsletter, the community */
.join { position: relative; min-height: 1020px; overflow: hidden; background: var(--ink); }
.join::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(13, 10, 18, 0.6), rgba(13, 10, 18, 0) 60%); pointer-events: none; }
.join-in { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; padding: 108px 24px 360px; text-align: center; }
.join h2 { text-shadow: var(--px) var(--px) 0 var(--ink); }
.join .signup { margin: 48px 0 24px !important; text-align: left; }
.join .community { justify-content: center; }
.join .community .plain { background: rgba(13, 10, 18, 0.85); }

@media (prefers-reduced-motion: reduce) { .prompt, .drift img { animation: none; } .drift { display: none; } }
@media (max-width: 1640px) {
  .floor, .floor.flip { grid-template-columns: minmax(0, 960px); gap: 30px; margin-bottom: 144px !important; }
  .floor.flip .shot { order: 0; }
  .floor .shot img { width: 100%; height: auto; }
  .say { max-width: 960px; }
}
@media (max-width: 1280px) { .depth { display: none; } .cases { grid-template-columns: repeat(4, 180px); } }

/* ----------------------------------------------------------------------------- narrow screens */
@media (max-width: 1000px) {
  .shots { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  :root { --px: 3px; --text: 18px; --line: 30px; --small: 15px; --h1: 36px; --h2: 27px; }
  .top { position: static; }
  .top .in { flex-wrap: wrap; gap: 6px 18px; padding: 6px 12px; }
  .brand { font-size: var(--h2); line-height: 42px; }
  .nav { order: 3; width: 100%; margin: 0; gap: 6px 18px; }
  .langs { margin-left: auto; }
  main { padding: 24px 12px 36px; }
  .panel { padding: 18px; }
  .about { grid-template-columns: 1fr; gap: 24px; }
  .shots { grid-template-columns: 1fr; gap: 12px; }
  .ctas { gap: 24px; margin-top: 24px; }
  .legend { --w: min(100%, 336px); }
  .cta { width: 100%; }
  .legend b, .gold b { font-size: var(--h2); line-height: 42px; }
  .facts { grid-template-columns: 1fr; gap: 0; }
  .facts dd { margin-bottom: 12px; }
  .toc { columns: 1; }
  section { margin-bottom: 48px; }
  .small, .foot p, .cta .note { line-height: 24px; }
}
/* touch-only devices (phones, tablets without a keyboard): no play button, copy the link (D-260) */
@media (hover: none) and (pointer: coarse) {
  .desk-only { display: none !important; }
  .phone-only { display: flex; }
  /* the sign still says so; the way to play from a phone is the copy button under it */
  .now { pointer-events: none; }
}
/* the signup's honeypot: people never see it, bots fill it in (site/functions/api/subscribe.js) */
.signup .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* the home page on a phone: the words first, then the street as a band under them */
@media (max-width: 720px) {
  .page-home .top { position: absolute; }
  .page-home .top .in { padding: 6px 12px; }
  .legend.small { display: none; }
  .ground { height: auto; min-height: 0; display: flex; flex-direction: column; }
  .hero-copy { position: static; width: auto; margin: 0; padding: 132px 12px 24px; }
  .hero-copy .logo { height: 180px; }
  .hero-copy .head { display: flex; flex-direction: column; align-items: center; }
  .now { position: static; margin: 12px 0 24px; padding: 12px 24px 9px; }
  .now b { font-size: var(--h1); line-height: 48px; }
  .now i { font-size: var(--text); line-height: 30px; }
  .hero-copy .tagline { font-size: var(--text); line-height: 30px; margin-bottom: 18px; }
  .ground .scene { position: relative; inset: auto; height: 300px; order: 2; }
  .prompt { display: none; }
  .mouth { padding: 96px 12px 120px; }
  .mouth h2, .museum h2, .join h2, .say h3 { font-size: var(--h2); line-height: 42px; }
  .floor { padding: 0 12px; margin-bottom: 96px !important; }
  .say::before { font-size: 144px; line-height: 144px; top: -84px; }
  .museum { padding: 96px 12px 0; }
  .cases { grid-template-columns: repeat(2, 150px); gap: 24px 18px; }
  .case .glass { width: 150px; }
  .placard { padding: 18px; }
  .join { min-height: 0; }
  .join-in { padding: 72px 12px 240px; }
}