/* ==========================================================================
   Sky Suites · the tower
   One scroll = one elevator ride: lobby at street level, penthouse at night.
   Every value comes from tokens.css.
   ========================================================================== */

/* ---- ground rules ---------------------------------------------------------- */
html { box-sizing: border-box; background: var(--sky-day); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
*, ::before, ::after { box-sizing: inherit; }
html:focus-within { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font: var(--w-regular) var(--fs-md) / var(--lh-body) var(--font-body);
  color: var(--c-text);
  background: transparent;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
img { max-width: none; }
button { font: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-2); }

.sr {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: fixed; left: var(--s-4); top: calc(var(--header-h) + var(--s-2)); z-index: var(--z-modal);
  padding: var(--s-2) var(--s-4); background: var(--ink); color: var(--paper-cream);
  font: var(--w-medium) var(--fs-xs) / 1 var(--font-mono); text-transform: uppercase; letter-spacing: var(--track-caps);
  transform: translateY(calc(-100% - var(--header-h) - 24px));
}
.skip:focus-visible { transform: none; }

/* Pixel art: whole art pixels only, never smoothed. --px comes from story.js. */
.art {
  display: block;
  width: calc(128 * var(--px));
  height: calc(128 * var(--px));
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  -webkit-user-drag: none;
  user-select: none;
}
.pixfit { --px: 3px; position: relative; display: flex; align-items: center; justify-content: center; }
.pixfit > .art + .art { position: absolute; left: 50%; top: 50%; margin: calc(-64 * var(--px)) 0 0 calc(-64 * var(--px)); }

/* ---- the world outside the glass ---------------------------------------- */
.outside {
  position: fixed; inset: 0; z-index: var(--z-sky);
  overflow: hidden; pointer-events: none;
  --t: 0;
}
.wash { position: absolute; inset: 0; will-change: opacity; }
.wash--day { background: linear-gradient(180deg, #6fb6ec 0%, #97cbf2 42%, #cfe4f4 78%, #eef2ec 100%); }
.wash--gold { opacity: clamp(0, var(--t), 1); background: linear-gradient(180deg, #86acd8 0%, #b5c6e0 36%, #efd2c7 74%, var(--paper-peach) 100%); }
.wash--sunset { opacity: clamp(0, calc(var(--t) - 1), 1); background: linear-gradient(180deg, #6f4f86 0%, var(--sky-mauve) 30%, var(--sky-rose) 58%, var(--sky-apricot) 86%, #fbc98a 100%); }
.wash--dusk { opacity: clamp(0, calc(var(--t) - 2), 1); background: linear-gradient(180deg, #1f2350 0%, #3a3566 40%, var(--sky-plum) 76%, #9a5a7c 100%); }
.wash--night { opacity: clamp(0, calc(var(--t) - 3), 1); background: linear-gradient(180deg, #1a2150 0%, #222a5c 44%, #333a70 82%, #463f7a 100%); }

.outside canvas { position: absolute; display: block; image-rendering: pixelated; }
.outside__stars { inset: 0; width: 100%; height: 100%; opacity: clamp(0, calc((var(--t) - 2.7) * 1.4), 1); }
.outside__sun, .outside__moon { left: 0; top: 0; will-change: transform; }
.outside__moon { opacity: clamp(0, calc((var(--t) - 3.05) * 2), 1); }
.outside__clouds { position: absolute; inset: 0; opacity: clamp(0, calc(3.3 - var(--t)), 1); will-change: transform; }
.cloud { left: 0; animation: cloud-drift var(--drift, 140s) linear infinite; animation-delay: var(--drift-at, 0s); transition: opacity 600ms var(--ease-out); }
/* no cloud ever drifts behind the lobby copy: gone at once while it is on screen, back after */
.outside.is-hero .cloud { opacity: 0; transition-duration: 0ms; }
.outside__sun { transition: opacity 500ms var(--ease-out); }
.cloud--1 { top: 14%; --drift: 160s; --drift-at: -40s; }
.cloud--2 { top: 29%; --drift: 120s; --drift-at: -95s; }
.cloud--3 { top: 8%; --drift: 210s; --drift-at: -150s; }
@keyframes cloud-drift {
  from { transform: translateX(-40vw); }
  to { transform: translateX(120vw); }
}
.skyline { left: 0; right: 0; bottom: 0; width: 100%; will-change: transform; }
.skyline--far { height: 46vh; }
.skyline--mid { height: 34vh; }
.skyline--near { height: 23vh; }

/* ---- header: nameplate, floor dial, mint --------------------------------- */
.topbar {
  position: fixed; inset: 0 0 auto; z-index: var(--z-header);
  height: var(--header-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-4);
  padding: 0 var(--gutter);
  border-bottom: var(--bw-2) solid transparent;
  pointer-events: none;
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.topbar > * { pointer-events: auto; }
/* past the first few pixels the header is a real surface: paper, brass rule, soft shadow */
.is-scrolled .topbar {
  background: var(--paper-cream);
  border-bottom-color: var(--brass);
  box-shadow: 0 1px 0 rgb(40 34 48 / 0.4), 0 8px 18px -14px rgb(24 30 66 / 0.4);
  pointer-events: auto;
}
.is-scrolled .nameplate { box-shadow: none; }
.nameplate {
  justify-self: start;
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4) var(--s-2) var(--s-3);
  background: var(--paper-cream); color: var(--ink);
  border: var(--bw-2) solid var(--ink); border-radius: var(--r-2);
  box-shadow: 0 3px 0 var(--ink);
  font: var(--w-strong) 1.25rem / 1 var(--font-display); letter-spacing: -0.01em;
  text-decoration: none; white-space: nowrap;
}
.nameplate__mark {
  width: 12px; height: 18px; flex: none;
  background:
    linear-gradient(var(--brass), var(--brass)) 4px 0 / 4px 4px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 2px 4px / 8px 6px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 10px / 12px 8px no-repeat;
}

.dial {
  position: relative; justify-self: center; align-self: start;
  width: 148px; height: 72px; margin-top: 3px;
  background: var(--ink);
  border: var(--bw-2) solid var(--brass);
  border-radius: 74px 74px var(--r-2) var(--r-2);
  box-shadow: 0 0 0 2px var(--ink), 0 4px 0 2px rgb(24 30 66 / 0.28);
  --needle: -78deg;
}
.dial__face { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dial__rim, .dial__inner, .dial__base { fill: none; stroke-linecap: square; }
.dial__rim { stroke: var(--brass); stroke-width: 2; }
.dial__inner { stroke: var(--brass-lo); stroke-width: 1; stroke-dasharray: 2 5; }
.dial__base { stroke: var(--brass-lo); stroke-width: 2; }
.dial__needle {
  position: absolute; left: calc(50% - 1px); bottom: 6px;
  width: 2px; height: 44px;
  background: linear-gradient(var(--brass-hi) 0 70%, var(--brass) 70%);
  transform-origin: 50% 100%;
  transform: rotate(var(--needle));
}
.dial__hub {
  position: absolute; left: calc(50% - 6px); bottom: 0; width: 12px; height: 12px;
  border-radius: 50%; background: var(--brass); box-shadow: inset 0 0 0 3px var(--brass-lo);
}
.dial__stops { position: absolute; inset: 0; }
.dial__stops a {
  --a: 0deg;
  position: absolute; left: calc(50% - 11px); bottom: -1px;
  display: grid; place-items: center;
  width: 22px; height: 14px;
  font: var(--w-medium) 10px / 1 var(--font-mono);
  color: var(--stone-2); text-decoration: none;
  transform: rotate(var(--a)) translateY(-53px) rotate(calc(var(--a) * -1));
  transition: color var(--dur) var(--ease-out);
}
.dial__stops a[data-stop="0"] { --a: -78deg; }
.dial__stops a[data-stop="1"] { --a: -52deg; }
.dial__stops a[data-stop="2"] { --a: -26deg; }
.dial__stops a[data-stop="3"] { --a: 0deg; }
.dial__stops a[data-stop="4"] { --a: 26deg; }
.dial__stops a[data-stop="5"] { --a: 52deg; }
.dial__stops a[data-stop="6"] { --a: 78deg; }
.dial__stops a:hover { color: var(--paper-cream); }
.dial__stops a[aria-current="true"] { color: var(--brass-hi); text-shadow: 0 0 0 var(--brass-hi); }
.dial__stops a:focus-visible { box-shadow: 0 0 0 2px var(--brass-hi); }
.dial__readout { display: none; }

.topbar__mint { justify-self: end; }
.topbar__mint-short { display: none; }

/* ---- buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 44px; padding: 0 var(--s-5);
  font: var(--w-medium) var(--fs-xs) / 1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  border: 0; border-radius: var(--r-2); cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn--ink {
  background: var(--ink); color: var(--paper-cream);
  box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 4px var(--brass), 0 3px 0 var(--brass-lo);
}
.btn--ink:hover { background: var(--night-3); box-shadow: inset 0 0 0 3px var(--night-3), inset 0 0 0 4px var(--brass-hi), 0 3px 0 var(--brass-lo); }
.btn--brass {
  background: var(--brass); color: var(--ink);
  box-shadow: inset 0 0 0 3px var(--brass), inset 0 0 0 4px var(--ink), 0 3px 0 var(--ink);
}
.btn--brass:hover { background: var(--brass-hi); box-shadow: inset 0 0 0 3px var(--brass-hi), inset 0 0 0 4px var(--ink), 0 3px 0 var(--ink); }
.btn:active { transform: translateY(2px); }
.btn--big { min-height: 56px; padding: 0 var(--s-7); font-size: var(--fs-sm); }

.call { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; }
.call__button {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, var(--brass-hi), var(--brass) 58%, var(--brass-lo));
  box-shadow: inset 0 0 0 2px var(--brass-lo), 0 0 0 4px var(--ink), 0 4px 0 4px rgb(40 34 48 / 0.28);
  transition: transform var(--dur-fast) var(--ease-out);
}
.call__button svg { width: 18px; height: 18px; fill: var(--ink); transition: fill var(--dur) var(--ease-out); }
.call:hover .call__button svg { fill: var(--paper-white); }
.call:active .call__button { transform: translateY(2px); }
.call__label { padding: 7px 10px; background: var(--paper-white); color: var(--ink); border-radius: var(--r-1); font: var(--w-medium) var(--fs-xs) / 1 var(--font-mono); letter-spacing: var(--track-caps); text-transform: uppercase; }

/* ---- floors ------------------------------------------------------------------ */
main { position: relative; z-index: var(--z-page); }
.floor {
  position: relative;
  display: grid;
  grid-template-columns: [full-start] minmax(var(--gutter), 1fr) [main-start] minmax(0, var(--page-max)) [main-end] minmax(var(--gutter), 1fr) [full-end];
  padding-block: var(--s-section);
  overflow-x: clip;
  color: var(--c-text);
}
.floor > * { grid-column: main; min-width: 0; }
.floor[data-mark]::before {
  content: "";
  position: absolute; top: 0; left: var(--gutter); right: var(--gutter);
  border-top: var(--bw-1) dashed rgb(252 249 241 / 0.7);
}
.floor[data-mark]::after {
  content: attr(data-mark);
  position: absolute; top: -12px; left: var(--gutter);
  padding: 5px 10px;
  background: var(--paper-white); color: var(--ink-2);
  border: var(--bw-1) solid var(--ink); border-radius: var(--r-round);
  font: var(--w-medium) var(--fs-micro) / 1 var(--font-mono); letter-spacing: var(--track-caps); text-transform: uppercase;
}

.kicker {
  display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-6);
  font: var(--w-medium) var(--fs-micro) / 1.2 var(--font-mono); letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--c-text-soft);
}
.kicker__floor {
  display: grid; place-items: center; flex: none;
  min-width: 32px; height: 32px; padding: 0 6px; border-radius: var(--r-round);
  border: var(--bw-2) solid currentColor; color: var(--c-text);
  font-size: 11px; letter-spacing: 0.04em;
  box-shadow: inset 0 0 0 2px var(--brass);
}
.plate {
  position: relative;
  padding: clamp(24px, 2.6vw, 40px);
  background: var(--c-surface); color: var(--c-text);
  border: var(--bw-2) solid var(--c-edge); border-radius: var(--r-3);
  box-shadow: inset 0 6px 0 var(--brass), 0 6px 0 rgb(24 30 66 / 0.3);
}
.floor__head { max-width: 640px; }
.floor__head.plate { width: 100%; max-width: 760px; padding-top: clamp(30px, 3vw, 46px); }
.floor__head--right { justify-self: end; }
.floor__title {
  font: var(--w-strong) var(--fs-h2) / var(--lh-tight) var(--font-display);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}
.line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.line > span { display: inline-block; text-wrap: balance; }
.floor__lede { margin-top: var(--s-6); max-width: 34em; font-size: var(--fs-lead); color: var(--c-text-soft); text-wrap: pretty; }
.floor__caption, .floor__footnote {
  justify-self: start; width: fit-content; max-width: 100%;
  margin-top: var(--s-6); padding: 8px 12px;
  background: var(--paper-white); color: var(--ink-2);
  border: var(--bw-2) solid var(--ink); border-radius: var(--r-3);
  font: var(--w-medium) var(--fs-micro) / 1.5 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
}
.floor--burn .floor__footnote { justify-self: end; }
.panel-label {
  display: inline-block;
  margin: calc(var(--s-6) * -1 - 13px) 0 var(--s-5);
  padding: 6px 10px;
  background: var(--brass); color: var(--ink);
  border: var(--bw-2) solid var(--ink); border-radius: var(--r-1);
  font: var(--w-bold) var(--fs-micro) / 1 var(--font-mono); letter-spacing: var(--track-caps); text-transform: uppercase;
}
.card, .pot__live, .folio, .board-card, .keys__mine, .keys__claim, .burn-action {
  position: relative;
  padding: var(--s-6);
  background: var(--c-surface); color: var(--c-text);
  border: var(--bw-2) solid var(--c-edge); border-radius: var(--r-3);
  box-shadow: 0 6px 0 rgb(24 30 66 / 0.32);
}

/* ---- L · lobby ------------------------------------------------------------ */
.floor--lobby {
  min-height: 100svh;
  padding-block: calc(var(--header-h) + var(--s-7)) var(--s-7);
  align-content: space-between;
}
.lobby {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 34vw, 500px); gap: var(--s-9);
  align-items: center;
}
.lobby__title {
  font: var(--w-strong) var(--fs-h1) / 0.98 var(--font-display);
  letter-spacing: -0.03em;
}
.lobby__hook {
  margin-top: var(--s-5);
  font: var(--w-strong) var(--fs-h3) / var(--lh-snug) var(--font-display);
  color: var(--wine);
}
.floor--lobby .kicker { margin-bottom: var(--s-4); }
/* the four rules of the house, on paper so they read over any sky or skyline */
.lobby__rules { margin-top: var(--s-5); max-width: 720px; }
.lobby__rules.plate { padding: 22px 24px 14px; }
.rules li { position: relative; padding: 7px 0 7px 18px; font-size: var(--fs-md); line-height: 1.45; color: var(--c-text); text-wrap: pretty; }
.rules li + li { border-top: var(--bw-1) solid var(--c-line); }
.rules li::before { content: ""; position: absolute; left: 0; top: 16px; width: 6px; height: 6px; background: var(--brass); box-shadow: 0 0 0 1px var(--brass-lo); }
.rules strong { font-weight: var(--w-bold); }
.rules__note { margin-top: 6px; padding-top: 10px; border-top: var(--bw-2) solid var(--c-text); font-size: var(--fs-sm); color: var(--c-text-soft); }
.floor--lobby .kicker { color: var(--ink); }
.lobby__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-7); margin-top: var(--s-6); }

.lift { position: relative; justify-self: end; width: min(100%, 500px); }
.lift__transom {
  display: flex; justify-content: center; gap: 6px;
  padding: 10px 12px;
  background: var(--ink);
  border: var(--bw-3) solid var(--brass); border-bottom: 0;
  border-radius: 250px 250px 0 0 / 40px 40px 0 0;
}
.lift__lamp {
  display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 4px;
  border-radius: var(--r-round);
  font: var(--w-medium) 10px / 1 var(--font-mono); color: var(--stone-2);
  border: 1px solid #3c3648;
}
.lift__lamp.is-lit { color: var(--ink); background: var(--brass-hi); border-color: var(--brass-hi); }
.lift__car {
  position: relative;
  height: clamp(340px, 62svh, 560px);
  overflow: hidden;
  border: var(--bw-3) solid var(--brass);
  box-shadow: inset 0 0 0 6px var(--ink), inset 0 0 0 8px var(--brass-lo);
  background:
    linear-gradient(transparent 82%, rgb(40 34 48 / 0.07) 82%),
    repeating-linear-gradient(90deg, transparent 0 46px, rgb(206 164 74 / 0.22) 46px 48px),
    var(--paper-cream);
}
.lift__room { position: absolute; inset: 8px; }
.lift__room .art { animation: bob 3.2s steps(2, jump-none) infinite; }
@keyframes bob { 50% { transform: translateY(calc(var(--px) * -1)); } }
.lift__door {
  position: absolute; top: 0; bottom: 0; width: 50%;
  background:
    linear-gradient(90deg, transparent 0 14%, rgb(206 164 74 / 0.5) 14% calc(14% + 2px), transparent calc(14% + 2px) 86%, rgb(206 164 74 / 0.5) 86% calc(86% + 2px), transparent calc(86% + 2px)),
    linear-gradient(180deg, transparent 0 18%, rgb(206 164 74 / 0.5) 18% calc(18% + 2px), transparent calc(18% + 2px) 82%, rgb(206 164 74 / 0.5) 82% calc(82% + 2px), transparent calc(82% + 2px)),
    linear-gradient(180deg, var(--night-3), var(--night-1));
  animation: var(--doors, none) var(--dur-doors) var(--ease-lift) 450ms backwards;
}
.lift__door--left { left: 0; border-right: 2px solid var(--brass); transform: translateX(-101%); --doors: doors-left; }
.lift__door--right { right: 0; border-left: 2px solid var(--brass); transform: translateX(101%); --doors: doors-right; }
@keyframes doors-left { from { transform: translateX(0); } }
@keyframes doors-right { from { transform: translateX(0); } }
.lift__plate {
  width: max-content; margin: -2px auto 0; padding: 8px 16px;
  background: var(--brass); color: var(--ink);
  border: var(--bw-2) solid var(--ink); border-top: 0; border-radius: 0 0 var(--r-2) var(--r-2);
  font: var(--w-bold) var(--fs-micro) / 1 var(--font-mono); letter-spacing: var(--track-caps); text-transform: uppercase;
}

.facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: var(--s-10);
  background: var(--paper-white); color: var(--ink);
  border: var(--bw-2) solid var(--ink); border-top: 6px solid var(--brass);
  border-radius: var(--r-2);
  box-shadow: 0 6px 0 rgb(24 30 66 / 0.3);
}
.facts__item { display: flex; flex-direction: column-reverse; gap: var(--s-1); padding: var(--s-4) var(--s-6); }
.facts__item + .facts__item { border-left: var(--bw-1) solid rgb(40 34 48 / 0.18); }
.facts dd { font: var(--w-strong) clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem) / 1 var(--font-display); letter-spacing: -0.02em; }
.facts dt { font: var(--w-medium) var(--fs-micro) / 1.35 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-soft); }

/* ---- 2 · residences ---------------------------------------------------------- */
.suites {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.5vw, 24px);
  margin-top: var(--s-10);
}
/* a card per suite, inside the page grid; the card is the room's own ground colour,
   so the art (whole device pixels) can sit in it at any card size without a seam */
.suite {
  aspect-ratio: 100 / 112;
  overflow: hidden;
  background: var(--ground, var(--paper-cream));
  border: var(--bw-2) solid var(--ink); border-radius: var(--r-3);
  box-shadow: 0 6px 0 rgb(24 30 66 / 0.3);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.suite:hover { transform: translateY(-4px); box-shadow: 0 10px 0 rgb(24 30 66 / 0.3); }
.suite--cream { --ground: var(--paper-cream); }
.suite--sage { --ground: var(--paper-sage); }
.suite--peach { --ground: var(--paper-peach); }
.suite--sky { --ground: var(--paper-sky); }
.suite--lilac { --ground: var(--paper-lilac); }
/* each row arrives as a left-to-right wave */
.suites > :nth-child(5n + 2) { --wave: 1; }
.suites > :nth-child(5n + 3) { --wave: 2; }
.suites > :nth-child(5n + 4) { --wave: 3; }
.suites > :nth-child(5n + 5) { --wave: 4; }
@keyframes suite-in { from { opacity: 0; transform: translateY(26px); } }
.is-armed .suite:not(.is-in) { opacity: 0; }
.is-armed .suite.is-in { animation: suite-in 720ms var(--ease-out) calc(var(--wave, 0) * 80ms) backwards; }
.floor--residences .floor__caption { margin-top: var(--s-6); }

/* ---- 3 · the view ------------------------------------------------------------ */
.hours {
  display: flex; justify-content: center; margin-top: var(--s-10);
  --v: 0.5;
}
.hours__pane { --art-scale: 3; position: relative; }
.hours__pane + .hours__pane { margin-left: calc(var(--s-9) * -1); }
.hours__pane .pixfit { border: var(--bw-2) solid var(--ink); border-radius: var(--r-2); overflow: hidden; box-shadow: 0 6px 0 rgb(40 34 48 / 0.3); background: var(--paper-cream); }
.hours__pane--day { z-index: 1; transform: translateY(calc((1 - var(--v)) * 40px)); }
.hours__pane--sunset { z-index: 2; margin-top: var(--s-10); transform: translateY(calc((1 - var(--v)) * 90px)); }
.hours__pane--night { z-index: 3; margin-top: var(--s-13); transform: translateY(calc((1 - var(--v)) * 140px)); }
.hours__label {
  position: absolute; left: var(--s-3); top: var(--s-3);
  padding: 6px 8px; background: var(--paper-white); color: var(--ink);
  border: var(--bw-2) solid var(--ink); border-radius: var(--r-1);
  display: flex; align-items: center; gap: var(--s-2);
  font: var(--w-medium) var(--fs-xs) / 1 var(--font-mono); letter-spacing: var(--track-caps); text-transform: uppercase;
}
.hours__dot { width: 10px; height: 10px; border: var(--bw-2) solid var(--ink); }
.hours__pane--day .hours__dot { background: var(--sky-day); }
.hours__pane--sunset .hours__dot { background: var(--sky-rose); }
.hours__pane--night .hours__dot { background: var(--night-1); }

/* ---- scenes (sticky, scrubbed by --p) ------------------------------------- */
.scene { position: relative; height: 240vh; margin-top: var(--s-9); --p: 1; }
.scene__stage {
  position: sticky; top: var(--header-h);
  height: calc(100vh - var(--header-h));
  height: calc(100svh - var(--header-h));
  display: grid; grid-template-rows: auto minmax(0, 1fr); align-items: center;
  padding-block: var(--s-6) var(--s-5);
}
.scene__cue {
  align-self: start; justify-self: start;
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 8px 12px; border-radius: var(--r-round);
  background: var(--paper-white); color: var(--ink); border: var(--bw-2) solid var(--ink);
  font: var(--w-medium) var(--fs-micro) / 1.35 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
}
.scene__cue-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wine); animation: cue-pulse 1.6s steps(2, jump-none) infinite; }
@keyframes cue-pulse { 50% { opacity: 0.25; } }

/* ---- 4 · hold streak --------------------------------------------------------- */
.streak { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-11); align-items: center; }
.streak__art { --art-scale: 4; position: relative; box-shadow: 0 0 0 2px var(--ink), 0 8px 0 2px rgb(24 30 66 / 0.3); }
.streak__count { display: flex; align-items: baseline; gap: var(--s-4); }
.streak__num {
  font: 300 clamp(4rem, 2.4rem + 6vw, 8.5rem) / 0.9 var(--font-mono); letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.streak__unit { font: var(--w-medium) var(--fs-xs) / 1 var(--font-mono); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--c-text-soft); }
/* thirty day pips: ink for the days held, pale for the days still to come */
.streak__track {
  --fill: 1;
  height: 16px; margin-top: var(--s-7);
  background: linear-gradient(var(--ink), var(--ink)) 0 0 / calc(var(--fill) * 100%) 100% no-repeat, rgb(40 34 48 / 0.16);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(100% / 30 - 3px), transparent calc(100% / 30 - 3px) calc(100% / 30));
  mask: repeating-linear-gradient(90deg, #000 0 calc(100% / 30 - 3px), transparent calc(100% / 30 - 3px) calc(100% / 30));
}
.streak__ticks { position: relative; height: 16px; margin-top: var(--s-2); font: var(--w-medium) var(--fs-micro) / 1 var(--font-mono); color: var(--c-text-faint); }
.streak__ticks li { position: absolute; top: 0; }
.streak__ticks li:nth-child(2) { left: calc(100% * 7 / 30); transform: translateX(-50%); }
.streak__ticks li:nth-child(3) { right: 0; }
.streak__stops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-5); }
.streak__stop {
  display: flex; align-items: center; gap: var(--s-3);
  font: var(--w-regular) var(--fs-sm) / 1.3 var(--font-body); color: var(--c-text-faint);
  transition: color var(--dur) var(--ease-out);
}
.streak__chip {
  flex: none; display: inline-grid; place-items: center;
  min-width: 48px; height: 34px; padding: 0 10px;
  background: var(--paper-white); color: var(--ink);
  border: var(--bw-2) solid var(--ink); border-radius: var(--r-round);
  font: var(--w-bold) var(--fs-md) / 1 var(--font-mono);
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.streak__stop.is-reached { color: var(--c-text-soft); }
.streak__stop.is-current { color: var(--c-text); font-weight: var(--w-strong); }
.streak__stop.is-current .streak__chip { background: var(--ink); color: var(--brass-hi); }
.streak__weight { margin-top: var(--s-6); font: var(--w-strong) var(--fs-h3) / 1.2 var(--font-display); }
.streak__weight strong { display: inline-block; min-width: 2ch; padding: 3px 8px; line-height: 1.25; background: var(--ink); color: var(--paper-cream); font-family: var(--font-mono); font-weight: 500; }
.streak__weight strong.is-bumped { animation: bump 420ms var(--ease-out); }
@keyframes bump { 40% { transform: scale(1.22); } }

.notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); max-width: 1000px; margin-top: var(--s-9); }
.note + .note { padding-left: var(--s-8); border-left: var(--bw-1) solid var(--c-line-strong); }
.note__title { margin-bottom: var(--s-2); font: var(--w-strong) var(--fs-h3) / 1.2 var(--font-display); }
.note p { color: var(--c-text-soft); }

/* the burn action sits right beside its heading: an ember-banded plaque with live flames on top */
.burnhall {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7);
  align-items: start;
}
.burn-action {
  margin-top: var(--s-10); min-height: 220px;
  box-shadow: inset 0 6px 0 var(--sky-apricot), 0 6px 0 rgb(24 30 66 / 0.32);
}
.burn-action::before {
  content: ""; position: absolute; right: 18px; top: -14px; width: min(52%, 224px); height: 12px;
  background: url("../art/flame-strip.png") 0 0 / 64px 12px repeat-x;
  image-rendering: pixelated;
  animation: flame-row 360ms steps(1, end) infinite;
}
@keyframes flame-row { 50% { background-position: 32px 0; } }
/* ---- 5 · burn ------------------------------------------------------------------ */
.burn { display: grid; gap: var(--s-9); justify-items: center; }
.wallet { display: flex; justify-content: center; gap: var(--s-3); }
.wallet__slot {
  --art-scale: 2; --burn: 0;
  position: relative;
  margin-inline: calc(var(--px) * -14);
}
.wallet__slot .art { clip-path: inset(calc((10 + var(--burn) * 108) * var(--px)) 0 0 0); }
.wallet__slot--burn::before {
  content: ""; position: absolute; inset: calc(var(--px) * 10) calc(var(--px) * 17) calc(var(--px) * 11);
  border: var(--bw-2) dashed rgb(40 34 48 / 0.45); border-radius: var(--r-2);
  opacity: clamp(0, calc(var(--burn) * 3 - 2), 1);
}
.wallet__ember {
  position: absolute; left: calc(var(--px) * 18); right: calc(var(--px) * 18);
  top: calc((10 + var(--burn) * 108 - 5) * var(--px));
  height: calc(var(--px) * 6);
  background: url("../art/flame-strip.png") 0 0 / calc(32 * var(--px)) 100% repeat-x;
  image-rendering: pixelated;
  opacity: 0;
  animation: flicker 360ms steps(1, end) infinite;
}
@keyframes flicker { 50% { background-position: calc(16 * var(--px)) 0; } }
.wallet__slot.is-burning .wallet__ember { opacity: 1; }
.wallet__plus {
  position: absolute; left: 50%; top: 50%;
  padding: 6px 10px; background: var(--ink); color: var(--brass-hi);
  font: var(--w-bold) var(--fs-lg) / 1 var(--font-mono);
  transform: translate(-50%, -50%);
  visibility: hidden;
}
/* the +2 appears whole, never half-faded: it pops in once the suite has fully burned */
.wallet__slot--burn.is-burned { --burn: 1; }
.wallet__slot.is-burned .wallet__plus { visibility: visible; animation: plus-pop 360ms var(--ease-out); }
@keyframes plus-pop { from { transform: translate(-50%, -50%) scale(0.55); } }
.ledger { display: grid; grid-template-columns: repeat(5, auto); gap: 0; border: var(--bw-2) solid var(--ink); border-radius: var(--r-2); background: var(--paper-white); color: var(--ink); box-shadow: 0 6px 0 rgb(24 30 66 / 0.3); }
.ledger__row { display: flex; flex-direction: column-reverse; gap: var(--s-1); padding: var(--s-4) var(--s-6); }
.ledger__row + .ledger__row { border-left: var(--bw-1) solid var(--c-line-strong); }
.ledger dt { font: var(--w-medium) var(--fs-micro) / 1.3 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-soft); }
.ledger dd { font: var(--w-strong) var(--fs-h3) / 1 var(--font-display); font-variant-numeric: tabular-nums; }
.ledger__row--key { background: var(--ink); color: var(--paper-cream); }
.ledger__row--key dt { color: var(--brass-hi); }

/* ---- 6 · the pot ------------------------------------------------------------------ */
.counting {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7);
  align-items: start;
}
.pot__promise {
  margin-top: var(--s-6); max-width: 28em; padding-left: var(--s-5);
  border-left: var(--bw-3) solid var(--brass);
  font: var(--w-strong) var(--fs-h3) / 1.3 var(--font-display);
}
.pot__live { margin-top: var(--s-10); min-height: 220px; }
.folio {
  width: 100%; max-width: 560px; margin-top: var(--s-11);
  padding-top: var(--s-7);
  -webkit-mask: radial-gradient(circle 6px at 12px 0, transparent 5.5px, #000 6px) -6px 0 / 24px 100% repeat-x;
  mask: radial-gradient(circle 6px at 12px 0, transparent 5.5px, #000 6px) -6px 0 / 24px 100% repeat-x;
}
.folio__head { margin-bottom: var(--s-4); }
.folio .panel-label { margin-top: 0; }
.folio__title { font: var(--w-strong) var(--fs-h3) / 1.2 var(--font-display); }
.folio__lines { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.folio__lines th, .folio__lines td { padding: 10px 0; text-align: left; font-weight: var(--w-regular); border-bottom: var(--bw-1) dashed var(--c-line-strong); vertical-align: middle; }
.folio__lines td { color: var(--c-text-soft); }
.folio__lines td:last-child { text-align: right; font: var(--w-medium) var(--fs-md) / 1 var(--font-mono); color: var(--c-text); }
.folio__lines tfoot th, .folio__lines tfoot td { border-bottom: 0; border-top: var(--bw-3) double var(--c-text); padding-top: 14px; font-weight: var(--w-bold); color: var(--c-text); }
.folio__lines tfoot td:last-child { font-size: var(--fs-h3); }
.mult {
  display: inline-grid; place-items: center; min-width: 38px; height: 24px; padding: 0 6px;
  background: var(--paper-white); color: var(--ink);
  border: var(--bw-2) solid var(--ink); border-radius: var(--r-round);
  font: var(--w-bold) var(--fs-xs) / 1 var(--font-mono);
}
.folio__verdict { display: flex; gap: var(--s-3); margin-top: var(--s-5); padding: var(--s-4); background: var(--c-good-bg); border-radius: var(--r-2); font-size: var(--fs-sm); }
.folio__check { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--leaf-lo); position: relative; }
.folio__check::after { content: ""; position: absolute; left: 7px; top: 4px; width: 6px; height: 11px; border: solid var(--paper-white); border-width: 0 2px 2px 0; transform: rotate(45deg); }

.cycle { margin-top: var(--s-12); }
.cycle__title { font: var(--w-strong) var(--fs-h3) / 1.2 var(--font-display); }
.shift { margin-top: var(--s-7); --now: 0.9; }
.shift__rail { position: relative; height: 44px; border-bottom: var(--bw-2) solid var(--c-text); }
.shift__day, .shift__freeze, .shift__claims { position: absolute; bottom: 0; height: 28px; }
.shift__day { left: 0; width: 50%; background: repeating-linear-gradient(90deg, rgb(40 34 48 / 0.14) 0 2px, transparent 2px 8px); }
.shift__freeze { left: 50%; width: 25%; background: var(--pool); }
.shift__claims { left: 75%; right: 0; background: #7fc07a; }
.shift__tag {
  position: absolute; left: 4px; top: 50%; z-index: 2; transform: translateY(-50%);
  padding: 3px 4px; border-radius: var(--r-1);
  font: var(--w-bold) 10px / 1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);
}
/* the tags ride on a pill of their own colour, above the moving now-line */
.shift__freeze .shift__tag { background: var(--pool); }
.shift__claims .shift__tag { background: #7fc07a; }
.shift__now { position: absolute; top: -10px; bottom: -8px; z-index: 1; left: calc(var(--now) * 100%); width: 2px; background: var(--c-text); }
.shift__clock {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  padding: 4px 6px; background: var(--c-text); color: var(--c-page);
  font: var(--w-bold) var(--fs-micro) / 1 var(--font-mono); font-variant-numeric: tabular-nums;
}
.shift__hours { display: flex; justify-content: space-between; margin-top: var(--s-2); font: var(--w-medium) var(--fs-micro) / 1 var(--font-mono); color: var(--c-text-faint); }
.shift__hours li:first-child { transform: translateX(0); }
.cycle__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-8); }
.cycle__step { padding-top: var(--s-3); border-top: var(--bw-2) solid var(--c-line-strong); color: var(--c-text-soft); font-size: var(--fs-sm); transition: border-color var(--dur) var(--ease-out); }
.cycle__time { font: var(--w-medium) var(--fs-micro) / 1.3 var(--font-mono); letter-spacing: 0.08em; color: var(--c-text-faint); }
.cycle__name { margin: var(--s-1) 0 var(--s-2); font: var(--w-strong) var(--fs-h3) / 1.1 var(--font-display); color: var(--c-text); }
.cycle[data-phase="snap"] .cycle__step--snap,
.cycle[data-phase="freeze"] .cycle__step--freeze,
.cycle[data-phase="claim"] .cycle__step--claim { border-top-color: var(--brass); }
.cycle__auto { margin-top: var(--s-6); font: var(--w-medium) var(--fs-micro) / 1.5 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-faint); }

/* ---- 7 · the board -------------------------------------------------------------- */
.board-card { margin-top: var(--s-10); min-height: 280px; }

/* ---- PH · the penthouse ---------------------------------------------------------- */
.summit { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-9); align-items: center; }
.summit__promise { margin-top: var(--s-6); max-width: 30em; font: var(--w-strong) var(--fs-h3) / 1.3 var(--font-display); color: var(--wine); }
.summit__art { --art-scale: 3; position: relative; justify-self: end; box-shadow: 0 0 0 2px var(--ink), 0 8px 0 2px rgb(10 12 36 / 0.45); }
.keys { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7); margin-top: var(--s-12); align-items: start; }
.keys__mine, .keys__claim { min-height: 240px; }
.arrival { display: grid; justify-items: center; gap: var(--s-4); width: 100%; max-width: 760px; margin: var(--s-13) auto 0; text-align: center; }
.arrival__ask { font: var(--w-strong) var(--fs-h2) / 1 var(--font-display); letter-spacing: var(--track-display); }
.arrival__note { font: var(--w-medium) var(--fs-micro) / 1.4 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-faint); }

.faq { width: 100%; max-width: 860px; margin: var(--s-13) auto 0; }
.floor--faq .faq { margin-top: 0; }
.faq__title { margin-bottom: var(--s-6); font: var(--w-strong) var(--fs-h2) / 1 var(--font-display); letter-spacing: var(--track-display); }
.faq.plate { padding-bottom: clamp(16px, 2vw, 28px); }
.faq__item { border-top: var(--bw-1) solid var(--c-line-strong); }
.faq__item:last-of-type { border-bottom: 0; }
.faq__item summary {
  position: relative; padding: var(--s-5) var(--s-9) var(--s-5) 0; cursor: pointer; list-style: none;
  font: var(--w-strong) var(--fs-lg) / 1.35 var(--font-body);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  background: linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
  transition: transform var(--dur) var(--ease-out);
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { max-width: 42em; padding-bottom: var(--s-6); color: var(--c-text-soft); }
.faq__item a { color: var(--c-link); }

.foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-5);
  margin-top: var(--s-13);
  font: var(--w-medium) var(--fs-micro) / 1.4 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
}
.foot.plate { padding-block: var(--s-6) var(--s-5); }
.foot__name { font: var(--w-strong) 1.25rem / 1 var(--font-display); letter-spacing: -0.01em; text-transform: none; }
.foot__chain { margin-left: var(--s-2); font: var(--w-medium) var(--fs-micro) / 1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-faint); }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--s-6); }
.foot__links a { text-decoration: none; border-bottom: var(--bw-1) solid var(--c-line-strong); padding-bottom: 2px; }
.foot__links a:hover { border-color: currentColor; }

/* ---- entrances (only once story.js has armed them; no JS = all visible) ---- */
.is-armed .floor:not(.floor--lobby) [data-rise] { transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); }
.is-armed .floor:not(.floor--lobby) [data-rise]:not(.is-in) { opacity: 0; transform: translateY(28px); }
.is-armed .floor:not(.floor--lobby) .line > span { transition: transform 1000ms var(--ease-lift); transition-delay: calc(var(--i, 0) * 110ms); }
.is-armed .floor:not(.floor--lobby) :is(h2, p):not(.is-in) > .line > span { transform: translateY(108%); }

/* the lobby needs no script: its lines ride up while the doors part */
@keyframes line-up { from { transform: translateY(108%); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(24px); } }
.floor--lobby .line > span { animation: line-up 1100ms var(--ease-lift) 700ms backwards; }
.lobby__title .line + .line > span { animation-delay: 830ms; }
.lobby__hook .line > span { animation-delay: 1000ms; }
.floor--lobby [data-rise] { animation: rise-in 900ms var(--ease-out) 1150ms backwards; }
.floor--lobby .lobby__actions { animation-delay: 1300ms; }
.floor--lobby .facts { animation-delay: 1450ms; }

/* ---- smaller screens --------------------------------------------------------------- */
@media (max-width: 1100px) {
  .lobby { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7); }
  .lift { width: 100%; }
  .counting, .burnhall { grid-template-columns: minmax(0, 1fr); }
  .burn-action { margin-top: 0; }
  .pot__live { margin-top: 0; max-width: 560px; }
  .streak { gap: var(--s-8); }
}

@media (max-width: 720px) {
  .nameplate { font-size: 1.0625rem; padding: 6px 10px; }
  .skyline--far { height: 34vh; }
  .skyline--mid { height: 24vh; }
  .skyline--near { height: 15vh; }
  .dial { width: auto; height: auto; margin: 0; align-self: center; border-radius: var(--r-2); background: var(--ink); box-shadow: 0 3px 0 rgb(24 30 66 / 0.35); }
  .dial__face, .dial__needle, .dial__hub, .dial__stops { display: none; }
  .dial__readout {
    display: flex; align-items: center; gap: 6px; padding: 7px 10px;
    font: var(--w-bold) var(--fs-sm) / 1 var(--font-mono); color: var(--brass-hi); letter-spacing: 0.06em;
  }
  .dial__arrow { width: 0; height: 0; border: 5px solid transparent; border-bottom: 7px solid var(--brass-hi); border-top: 0; }
  .topbar { grid-template-columns: 1fr auto auto; gap: var(--s-2); }
  .topbar__mint { min-height: 36px; padding: 0 var(--s-4); }
  .topbar__mint-long { display: none; }
  .topbar__mint-short { display: inline; }

  .floor--lobby { padding-top: calc(var(--header-h) + var(--s-5)); }
  .lobby { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .lift { justify-self: stretch; width: 100%; }
  .lift__car { height: 340px; }
  .lift__lamp { min-width: 20px; height: 20px; font-size: 9px; }
  .lobby__actions { gap: var(--s-6); margin-top: var(--s-7); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--s-9); }
  .facts__item { padding: var(--s-3) var(--s-4); }
  .facts__item + .facts__item { border-left: 0; }
  .facts__item:nth-child(even) { border-left: var(--bw-1) solid rgb(40 34 48 / 0.18); }
  .facts__item:nth-child(n + 3) { border-top: var(--bw-1) solid rgb(40 34 48 / 0.18); }

  .suites { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-8); }
  .suites > :nth-child(odd) { --wave: 0; }
  .suites > :nth-child(even) { --wave: 1; }

  .hours { display: grid; justify-content: stretch; margin-top: var(--s-9); }
  .hours__pane { --art-scale: 2; }
  .hours__pane + .hours__pane { margin-left: 0; }
  .hours__pane--day { justify-self: start; transform: none; }
  .hours__pane--sunset { justify-self: center; margin-top: -72px; transform: none; }
  .hours__pane--night { justify-self: end; margin-top: -72px; transform: none; }

  .scene { height: 220vh; margin-top: var(--s-7); }
  .streak { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); justify-items: center; }
  .streak__art { --art-scale: 2; }
  .streak__meter { width: 100%; }
  .streak__num { font-size: 4.25rem; }
  .streak__track { margin-top: var(--s-4); }
  .streak__stops { gap: var(--s-2); }
  .streak__stop { flex-direction: column; align-items: flex-start; gap: var(--s-1); font-size: var(--fs-xs); }
  .streak__chip { min-width: 44px; height: 30px; }
  .streak__weight { margin-top: var(--s-3); font-size: 1.125rem; }
  .notes { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .note + .note { padding: var(--s-5) 0 0; border-left: 0; border-top: var(--bw-1) solid var(--c-line-strong); }

  .wallet { flex-wrap: wrap; max-width: 330px; row-gap: var(--s-4); }
  .wallet__slot { --art-scale: 1; }
  .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .ledger__row { padding: var(--s-3) var(--s-4); }
  .ledger__row + .ledger__row { border-left: 0; }
  .ledger__row:nth-child(even) { border-left: var(--bw-1) solid var(--c-line-strong); }
  .ledger__row:nth-child(n + 3) { border-top: var(--bw-1) solid var(--c-line-strong); }
  .ledger__row--key { grid-column: 1 / -1; order: 5; border-left: 0 !important; }
  .burn { gap: var(--s-6); }

  .counting { gap: var(--s-9); }
  .folio, .pot__live { max-width: none; }
  .cycle { margin-top: var(--s-10); }
  .card, .pot__live, .folio, .board-card, .keys__mine, .keys__claim, .burn-action { padding: var(--s-5); }
  .panel-label { margin-top: calc(var(--s-5) * -1 - 13px); }
  .folio .panel-label { margin-top: 0; }
  .cycle__steps { grid-template-columns: minmax(0, 1fr); }
  .shift__tag { left: 4px; font-size: 9px; letter-spacing: 0.04em; white-space: nowrap; }

  .summit { grid-template-columns: minmax(0, 1fr); }
  .summit__art { --art-scale: 2; justify-self: center; order: -1; }
  .keys { grid-template-columns: minmax(0, 1fr); margin-top: var(--s-10); }
  .arrival { margin-top: var(--s-11); }
  .faq { margin-top: var(--s-11); }
  .foot { flex-direction: column; align-items: flex-start; }
}

/* ---- people who asked for less motion get the finished states ---------------- */
@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  .lift__door, .floor--lobby .line > span, .floor--lobby [data-rise] { animation: none; }
  .lift__room .art, .cloud { animation: none; }
  .cloud { transform: translateX(var(--park, 10vw)); }
  .cloud--2 { --park: 58vw; }
  .cloud--3 { --park: 30vw; }
  .hours__pane--day, .hours__pane--sunset, .hours__pane--night { transform: none; }
  .is-armed .floor:not(.floor--lobby) [data-rise]:not(.is-in) { opacity: 1; transform: none; }
  .is-armed .floor:not(.floor--lobby) :is(h2, p):not(.is-in) > .line > span { transform: none; }
  .suite, .topbar, .streak__chip, .streak__stop { transition: none; }
  .suite:hover { transform: none; }
  .is-armed .suite:not(.is-in) { opacity: 1; }
  .is-armed .suite.is-in, .streak__weight strong.is-bumped { animation: none; }
  .wallet__ember, .scene__cue-dot, .wallet__slot.is-burned .wallet__plus, .burn-action::before { animation: none; }
}