/* Digital Candle. Black room, one warm light. */

:root {
  --bg: #000;
  --ink: #f4eee4;
  --ink-2: rgba(244, 238, 228, 0.64);
  --ink-3: rgba(244, 238, 228, 0.4);
  --line: rgba(244, 238, 228, 0.12);
  --line-2: rgba(244, 238, 228, 0.22);
  --amber: #ff8a2a;
  --amber-hot: #ffc27a;
  --ember: #ff5a1f;
  --card: rgba(255, 255, 255, 0.028);

  /* Driven every frame by the live flame (0..1). */
  --flame: 0.6;

  --serif: 'Instrument Serif', 'Iowan Old Style', 'Times New Roman', serif;
  --sans: 'Inter Tight', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --dot: 'Doto', var(--mono);

  --gutter: clamp(16px, 4.2vw, 72px);
  --nav-h: 68px;
  --radius: 28px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  color-scheme: dark;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(17px, 1.05vw + 8px, 21px);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-loading { overflow: hidden; }

::selection { background: var(--amber); color: #000; }

a { color: inherit; }
img, video, canvas { display: block; max-width: 100%; }
h1, h2, h3, p, dl, dd, ol, figure { margin: 0; }
ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
em { font-style: italic; }
cite { font-style: italic; }

.mono { font-family: var(--mono); font-size: 0.72em; letter-spacing: 0.02em; }
.doto { font-family: var(--dot); font-weight: 800; }

.kicker {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 22px;
}

.display {
  font-family: var(--sans);
  font-weight: 650;
  font-size: clamp(40px, 6.2vw, 112px);
  line-height: 0.95;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.lede {
  font-size: clamp(20px, 1.5vw + 8px, 30px);
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: pretty;
}

/* ---------- Layers ---------- */

.layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.layer-stage { z-index: 0; }

/* Without WebGL: rendered stills stand in for the board (js/ui/stills.js). */
.stills { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.stills img { position: absolute; left: 0; top: 0; opacity: 0; max-width: none; will-change: transform, opacity; }
/* The close-ups are cut from a larger board: their edges fade into the dark. */
.stills .still-close {
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
}
.layer-film { z-index: 1; opacity: 0; }

.layer-veil {
  z-index: 2;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.9s steps(4) infinite;
}

@keyframes grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-3%, 2%); }
  50% { transform: translate(2%, -3%); }
  75% { transform: translate(-1%, -1%); }
  100% { transform: translate(0, 0); }
}

.layer-flash {
  z-index: 55;
  opacity: 0;
  background: radial-gradient(60% 60% at 50% 45%, rgba(255, 214, 160, 0.9), rgba(255, 138, 42, 0.25) 45%, transparent 75%);
  mix-blend-mode: screen;
}

main { position: relative; z-index: 3; }

/* ---------- Loader ---------- */

.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: #000;
  transition: opacity 0.9s var(--ease-out), visibility 0.9s;
}

.loader-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff3e0;
  box-shadow: 0 0 18px 6px rgba(255, 138, 42, 0.75), 0 0 80px 30px rgba(255, 90, 31, 0.25);
  animation: loaderPulse 1.6s var(--ease-io) infinite;
}

.loader-count,
.loader-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.loader-count { bottom: calc(50% - 60px); color: var(--ink-2); font-family: var(--dot); font-size: 22px; letter-spacing: 0.12em; }
.loader-label { bottom: calc(50% - 84px); }

@keyframes loaderPulse {
  0%, 100% { transform: scale(0.85); opacity: 0.75; }
  50% { transform: scale(1.15); opacity: 1; }
}

body:not(.is-loading) .loader { opacity: 0; visibility: hidden; pointer-events: none; }

/* ---------- Nav ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--nav-h);
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 17px;
}

.brand-flame,
.footer-flame {
  width: 13px;
  height: 23px;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 6px rgba(255, 138, 42, 0.8));
}

.nav-links {
  display: flex;
  gap: clamp(16px, 2.4vw, 40px);
  font-size: 14px;
  color: var(--ink-2);
}

.nav-links a { text-decoration: none; transition: color 0.3s; }
.nav-links a:hover,
.nav-links a.is-active { color: var(--ink); }

.buy-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 18px 0 14px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  color: #160800;
  background: linear-gradient(180deg, #ffd3a0, var(--amber) 70%);
  box-shadow:
    0 0 calc(10px + 26px * var(--flame)) calc(1px + 4px * var(--flame)) rgba(255, 138, 42, calc(0.25 + 0.35 * var(--flame))),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: transform 0.4s var(--ease-out);
}

.buy-pill:hover { transform: translateY(-1px) scale(1.03); }

.buy-ember {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff6ea;
  box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.9);
  opacity: calc(0.55 + 0.45 * var(--flame));
}

.buy-price { font-family: var(--mono); font-size: 13px; font-weight: 500; opacity: 0.8; }

/* ---------- Chapter rail ---------- */

.rail {
  position: fixed;
  /* Padded out over the labels, the gaps between them and the screen edge, so once open
     (from the ticks) the whole panel stays open while the pointer is anywhere over it.
     Closed, only the ticks catch the pointer. The ticks stay where they were. */
  pointer-events: none;
  right: 0;
  padding: 14px calc(var(--gutter) * 0.45) 14px 110px;
  top: 50%;
  z-index: 58;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rail a {
  position: relative;
  display: block;
  width: 18px;
  height: 14px;
  text-decoration: none;
  pointer-events: auto;
}
.rail.is-open { pointer-events: auto; }
.rail:not(.is-open) a span { pointer-events: none; }

.rail a::before {
  content: '';
  position: absolute;
  right: 0;
  top: 6px;
  width: 10px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink-3);
  transition: width 0.4s var(--ease-out), background 0.4s;
}

.rail a span {
  position: absolute;
  right: 26px;
  top: -2px;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.3s, transform 0.4s var(--ease-out), color 0.2s;
}

.rail a.is-active::before { width: 18px; background: var(--amber); box-shadow: 0 0 10px rgba(255, 138, 42, 0.8); }
.rail.is-open a span { opacity: 1; transform: none; }
.rail a:hover span { color: var(--ink); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 0 28px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: transparent;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.45s var(--ease-out), background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.btn:hover { transform: translateY(-2px); border-color: var(--ink-2); }

.btn-primary {
  border: 0;
  color: #170900;
  background: linear-gradient(180deg, #ffe0b8 0%, #ffab5c 40%, var(--amber) 100%);
  box-shadow:
    0 0 calc(16px + 40px * var(--flame)) calc(2px + 6px * var(--flame)) rgba(255, 128, 32, calc(0.22 + 0.3 * var(--flame))),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.btn-primary [data-price] { font-family: var(--mono); font-weight: 500; font-size: 0.86em; opacity: 0.75; }
.btn-ghost { background: rgba(255, 255, 255, 0.03); }
.btn-small { height: 40px; padding: 0 16px; font-size: 14px; }
.btn-large { height: 64px; padding: 0 34px; font-size: 19px; }
.btn[aria-pressed='true'] { border-color: var(--amber); color: var(--amber-hot); }

/* ---------- Sections ---------- */

.plate { position: relative; }

.section-head {
  padding: 0 var(--gutter);
  max-width: 1500px;
  margin: 0 auto clamp(40px, 6vw, 96px);
}

.section-head .display { max-width: 14ch; }
.section-head .lede { max-width: 34ch; margin-top: 28px; color: var(--ink-2); }

.pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

[data-focus] { will-change: filter, opacity; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--nav-h) + 3vh) var(--gutter) 0;
  display: flex;
  flex-direction: column;
}

.hero-copy {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: min(860px, 58vw);
  padding: 1vh 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: clamp(14px, 2.4vh, 30px);
}

.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 10px 2px rgba(255, 138, 42, 0.8);
  opacity: calc(0.45 + 0.55 * var(--flame));
  margin-right: 8px;
}

.hero-title {
  font-weight: 650;
  font-size: min(8vw, 13.5vh, 164px);
  line-height: 0.9;
  letter-spacing: -0.055em;
}

.hl { display: block; overflow: hidden; padding: 0.04em 0.2em 0.16em; margin: 0 -0.2em -0.18em; }
.hl > span { display: inline-block; }

.hero-title em {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.12em;
  letter-spacing: -0.02em;
  /* Room for the italic's overhang on both sides, given back by the margins. */
  padding: 0 0.16em 0.06em 0.14em;
  margin: 0 -0.1em -0.06em -0.14em;
}

.shine {
  /* Amber at both ends with the highlight in the middle, three times the word's width, so
     the sweep starts and ends on plain amber and never shows the gradient's edge. */
  background: linear-gradient(100deg, var(--amber) 0%, var(--amber) 40%, #fff4e2 50%, var(--amber) 60%, var(--amber) 100%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shine 5.5s var(--ease-io) infinite;
  filter: drop-shadow(0 0 calc(18px * var(--flame)) rgba(255, 120, 30, 0.45));
}

@keyframes shine {
  0%, 30% { background-position: 100% 0; }
  70%, 100% { background-position: 0% 0; }
}

.hero-sub {
  max-width: 30ch;
  margin-top: clamp(16px, 2.8vh, 36px);
  font-size: clamp(19px, min(1.4vw, 2.6vh) + 8px, 30px);
  line-height: 1.3;
  color: var(--ink-2);
  letter-spacing: -0.01em;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(20px, 3.4vh, 40px); }

.hero-foot {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 24px;
  padding: 18px calc(30px) clamp(20px, 3.5vh, 40px) 0;
}

.wall-label {
  max-width: 340px;
  padding-left: 14px;
  border-left: 1px solid var(--line-2);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-3);
}

.wall-label dt { color: var(--ink); font-weight: 600; }
.wall-label dd { margin: 0; }
.wall-label dd:nth-of-type(1) { color: var(--ink-2); }

.live-readout {
  justify-self: end;
  text-align: right;
  font-size: 12.5px;
  color: var(--ink-3);
}

.live-readout p:first-child { color: var(--ink-2); margin-bottom: 4px; }
.live-readout .mono { font-size: 11px; }

.hero-hint {
  font-size: 12.5px;
  color: var(--ink-3);
  white-space: nowrap;
  padding-bottom: 2px;
}

.hint-key {
  display: inline-block;
  padding: 1px 7px;
  margin: 0 2px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ---------- Film plates ---------- */

.plate-film { height: 210vh; }

.beats { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 var(--gutter); }

.beat {
  position: absolute;
  max-width: 22ch;
  text-align: center;
  opacity: 0;
  /* Hidden beats let the pointer through; director.js turns it on for the one showing. */
  pointer-events: none;
  text-wrap: balance;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 2px 40px rgba(0, 0, 0, 0.85);
}

.beat::before {
  content: '';
  position: absolute;
  inset: -35% -18%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}

.beat-serif {
  font-family: var(--serif);
  font-size: clamp(34px, 4.6vw, 84px);
  line-height: 1.04;
  letter-spacing: -0.01em;
}

.beat-serif em { color: var(--amber-hot); }

.beat-huge {
  max-width: none;
  font-weight: 700;
  font-size: clamp(44px, 13vw, 250px);
  letter-spacing: -0.06em;
  line-height: 0.9;
}

.hud {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: clamp(20px, 4vh, 40px);
  display: flex;
  gap: 28px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}


/* ---------- Timecode ---------- */

/* Always in the corner; the footer is the only thing that covers it. */
.timecode {
  position: fixed;
  right: var(--gutter);
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 76px);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  transition: opacity 0.6s;
}
body.is-loading .timecode { opacity: 0; }

.tc-play {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--amber);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color 0.3s;
}
.tc-play:hover, .timecode:hover .tc-play { color: var(--amber-hot); }
/* The icon stays small, but the whole timecode and a generous margin round it press the
   button: the button's hit area is stretched over all of it. */
.tc-play::after { content: ''; position: absolute; inset: -16px -18px; }
.tc-time { pointer-events: none; }
.timecode:hover .tc-time { color: var(--ink-2); }
.tc-icon { width: 0; height: 0; margin-left: 2px; border-left: 6px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.timecode.is-playing .tc-icon { width: 6px; height: 7px; margin: 0; border: 0; background: linear-gradient(90deg, currentColor 0 2px, transparent 2px 4px, currentColor 4px 6px); }
.timecode.is-playing .tc-time { color: var(--ink-2); }

/* ---------- Object ---------- */

.plate-object { height: 270vh; }

.object-head {
  position: absolute;
  left: var(--gutter);
  top: calc(var(--nav-h) + 4vh);
  max-width: min(46vw, 760px);
  z-index: 2;
}

.object-title {
  font-weight: 650;
  font-size: clamp(36px, 4.6vw, 86px);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.ot { display: block; --lit: 0; color: rgba(244, 238, 228, calc(0.4 + 0.6 * var(--lit))); }

.callouts {
  position: absolute;
  right: calc(var(--gutter) + 40px);
  top: 50%;
  width: min(380px, 34vw);
  transform: translateY(-50%);
  z-index: 2;
}

.callout {
  position: absolute;
  inset: 0 0 auto 0;
  opacity: 0;
  /* As the beats: only the callout showing takes the pointer (director.js). */
  pointer-events: none;
  transform: translateY(24px);
  filter: blur(10px);
}

.callout-n {
  display: block;
  font-family: var(--dot);
  font-weight: 800;
  font-size: 54px;
  line-height: 1;
  color: var(--amber);
  text-shadow: 0 0 22px rgba(255, 138, 42, 0.6);
  margin-bottom: 12px;
}

.callout h3 { font-size: clamp(26px, 2.4vw, 40px); letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 10px; }
.callout p { color: var(--ink-2); font-size: 18px; line-height: 1.45; }

.object-tron-label {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(20px, 4vh, 40px);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- Absence (bento) ---------- */

.plate-without { padding: max(clamp(40px, 6vh, 80px), calc(100vh - var(--step) + 24px)) 0 clamp(40px, 6vh, 90px); }

.bento {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(205px, auto);
  gap: clamp(12px, 1.2vw, 20px);
}

.card {
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 2.2vw, 36px);
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
}

/* The pointer-following glow, on the cards and the other panels that share it. */
.mind-panel, .tile, .edition, .demo { position: relative; overflow: hidden; isolation: isolate; }

.card::after, .mind-panel::after, .tile::after, .edition::after, .demo::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 120%), rgba(255, 138, 42, 0.12), transparent 60%);
  opacity: 0;
  transition: opacity 0.5s;
  z-index: -1;
}

.card:hover::after, .mind-panel:hover::after, .tile:hover::after, .edition:hover::after, .demo:hover::after { opacity: 1; }
.card p { color: var(--ink-2); font-size: clamp(16px, 0.6vw + 11px, 20px); line-height: 1.4; max-width: 34ch; }

.card-big {
  font-size: clamp(36px, 3.6vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.045em;
  font-weight: 650;
  margin-bottom: 14px;
}

.card-xl { grid-column: span 2; grid-row: span 2; min-height: 430px; }
.card-wide { grid-column: span 2; }
.card-smoke, .card-wax { grid-row: span 1; }

.mini-flame { image-rendering: auto; }

.card-flame .mini-flame {
  position: absolute;
  top: 8%;
  left: 50%;
  width: min(42%, 220px);
  aspect-ratio: 9 / 16;
  transform: translateX(-50%);
  z-index: -1;
}

.stamp {
  position: absolute;
  top: 26px;
  right: 26px;
  padding: 10px 12px;
  border: 1.5px solid rgba(255, 138, 42, 0.6);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.35;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--amber);
  transform: rotate(8deg);
}

.card-smoke .smoke {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.9;
}

.card-wax { background: radial-gradient(120% 90% at 50% 0%, rgba(255, 138, 42, 0.07), transparent 60%), var(--card); }

.card-twins { justify-content: space-between; flex-direction: row; align-items: flex-end; gap: 28px; }
.twins { display: flex; gap: 14px; align-self: stretch; align-items: center; }
.twins .mini-flame { width: clamp(48px, 5vw, 80px); aspect-ratio: 9 / 16; height: auto; }
.card-twins .card-body { max-width: 56%; }
.card-twins .card-big { font-size: clamp(30px, 2.7vw, 50px); }

.card-num { justify-content: space-between; }

.card .num {
  font-size: clamp(48px, 4.6vw, 80px);
  line-height: 0.9;
  white-space: nowrap;
  color: var(--amber);
  text-shadow: 0 0 calc(10px + 24px * var(--flame)) rgba(255, 128, 32, 0.55);
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}

/* ---------- Mind ---------- */

.plate-mind { padding: clamp(40px, 5vh, 70px) var(--gutter); display: flex; flex-direction: column; justify-content: center; }

.mind-grid {
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: center;
}

.mind-copy .display { margin-bottom: 30px; max-width: 10ch; }
.mind-copy p + p { margin-top: 18px; }
.mind-copy p:not(.lede):not(.kicker) { color: var(--ink-2); max-width: 40ch; }
.mind-note { font-size: 15px; padding-top: 18px; border-top: 1px solid var(--line); margin-top: 28px !important; }

.mind-panel {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  padding: clamp(18px, 2vw, 32px);
}

.mind-stage { display: grid; grid-template-columns: 1.1fr 1.3fr 0.8fr; gap: clamp(12px, 1.4vw, 24px); }

.mind-col { display: flex; flex-direction: column; min-width: 0; }

.mind-col figcaption {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.mind-col figcaption .mono { color: var(--amber); }

.mind-col canvas {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  background: #050403;
  border: 1px solid var(--line);
}

.mind-cap { font-size: 12.5px; color: var(--ink-3); margin-top: 10px; line-height: 1.35; }

.mind-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.ctl { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); }

.ctl input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 120px;
  height: 2px;
  background: var(--line-2);
  border-radius: 2px;
}

.ctl input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 12px rgba(255, 138, 42, 0.8);
  cursor: pointer;
}

.ctl input[type='range']::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 12px rgba(255, 138, 42, 0.8);
  cursor: pointer;
}

/* ---------- Provenance ---------- */

.plate-story {
  padding: clamp(70px, 9vh, 120px) var(--gutter) clamp(70px, 9vh, 120px);
  overflow: hidden;
}


.story { position: relative; max-width: 1000px; margin: 0 auto; }
/* The same soft shadow as the opening's lines, so the story reads over the city lights. */
.story p { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 0, 0, 0.85), 0 2px 28px rgba(0, 0, 0, 0.9), 0 4px 70px rgba(0, 0, 0, 0.9); }

.dateline {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(24px, 2vw, 34px);
  color: var(--amber-hot);
  margin-bottom: 36px;
}

.story-p {
  font-family: var(--serif);
  font-size: clamp(22px, 2.5vw + 6px, 50px);
  line-height: 1.22;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-wrap: pretty;
}

.story-p + .story-p { margin-top: 0.9em; }
.story-p cite { color: inherit; }
.cite-link { color: inherit; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.35); text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: text-decoration-color 0.3s; }
.cite-link:hover { text-decoration-color: var(--amber); }
.story-lead { font-size: clamp(30px, 2.8vw + 6px, 56px); line-height: 1.05; }

.signature {
  margin-top: 56px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(30px, 3vw, 52px);
  color: var(--ink);
}

.signature::before {
  content: '';
  display: block;
  width: 48px;
  height: 1px;
  background: var(--amber);
  margin-bottom: 20px;
  box-shadow: 0 0 10px rgba(255, 138, 42, 0.8);
}

/* ---------- After hours ---------- */

.plate-dev { padding: clamp(70px, 11vh, 150px) 0; }

.demos {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 20px);
}

.demo {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--card);
  overflow: hidden;
}

.demo-screen { position: relative; aspect-ratio: 1 / 1; background: #030302; }
.demo-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.demo-text { padding: 22px 26px 28px; }
.demo-text .mono { color: var(--amber); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.demo-text h3 { font-size: clamp(28px, 2.4vw, 42px); letter-spacing: -0.035em; margin: 6px 0 8px; line-height: 1; }
.demo-text p { color: var(--ink-2); font-size: 17px; line-height: 1.4; }

.demo-strip {
  max-width: 1500px;
  margin: 0 auto clamp(12px, 1.2vw, 20px);
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 20px);
}

.tile {
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--card);
  padding: 14px;
  display: flex;
  gap: 16px;
  align-items: center;
}

.tile canvas { width: 54px; aspect-ratio: 9 / 16; flex: none; border-radius: 8px; background: #050403; }
.tile figcaption { font-weight: 600; font-size: 17px; letter-spacing: -0.02em; }
.tile figcaption span { display: block; font-weight: 400; font-size: 13.5px; color: var(--ink-3); letter-spacing: 0; margin-top: 2px; }

.dev-foot {
  max-width: 1500px;
  margin: clamp(40px, 6vw, 80px) auto 0;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: clamp(24px, 3vw, 56px);
  align-items: start;
}

.code-card {
  border-radius: 20px;
  border: 1px solid var(--line);
  background: #070605;
  padding: 18px 22px 22px;
}

.code-card figcaption { color: var(--ink-3); margin-bottom: 12px; display: block; }
.code-card pre { margin: 0; font-family: var(--mono); font-size: 14.5px; line-height: 1.65; overflow-x: auto; color: var(--ink); }
.code-card .c { color: var(--ink-3); }
.code-card .n { color: var(--amber); }

.spec-list { display: grid; gap: 14px; }
.spec-list div, .spec-table div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.spec-list dt, .spec-table dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); padding-top: 4px; }
.spec-list dd, .spec-table dd { margin: 0; font-size: 16px; color: var(--ink-2); }

/* ---------- The question ---------- */

.plate-question {
  min-height: 88vh;
  padding: clamp(50px, 7vh, 90px) var(--gutter);
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
}

.question-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  /* The same size as "AI-powered" in the hero: its title size, times the italic's 1.12. */
  font-size: calc(min(8vw, 13.5vh, 164px) * 1.12);
  line-height: 0.88;
  letter-spacing: -0.03em;
  /* The story's dark halo, sized up for the large type, under the title's warm glow. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 18px rgba(0, 0, 0, 0.85), 0 2px 40px rgba(0, 0, 0, 0.9), 0 4px 90px rgba(0, 0, 0, 0.9), 0 0 80px rgba(255, 138, 42, 0.25);
}

.question-body { max-width: 760px; margin-top: clamp(30px, 5vh, 60px); }
.question-body p { font-size: clamp(20px, 1.4vw + 9px, 30px); line-height: 1.35; color: var(--ink-2); text-wrap: balance; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 0, 0, 0.85), 0 2px 28px rgba(0, 0, 0, 0.9), 0 4px 70px rgba(0, 0, 0, 0.9); }
.question-body p + p { margin-top: 1em; }
.question-body .question-small { font-size: clamp(16px, 0.6vw + 12px, 20px); color: var(--amber-hot); margin-top: 2em; }

/* ---------- Acquisition ---------- */

.plate-acquire {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}

.acquire-media { position: relative; overflow: hidden; min-height: 100vh; }

.pair-frame {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
}

.pair-canvas,
.pair-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.pair-video { opacity: 0; transition: opacity 0.6s; }
.pair-video.is-on { opacity: 1; }

.acquire-media::after {
  display: none;
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(34% 70% at var(--spot-x, 38%) 50%, transparent 40%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(to right, transparent 70%, #000 100%);
  transition: background 0.8s var(--ease-out);
}

.acquire-panel {
  padding: calc(var(--nav-h) + 8vh) var(--gutter) 12vh clamp(24px, 4vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.acquire-panel .display { font-size: clamp(40px, 4.8vw, 92px); max-width: 11ch; margin-bottom: 36px; }

.editions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 30px; }

.edition {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: center;
  text-align: left;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--card);
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s;
}

.edition.is-active { border-color: var(--amber); background: rgba(255, 138, 42, 0.06); }
/* The board to scale: 27.94 x 251.46 mm, with the 22.9 x 40.6 mm matrix near its top. */
.swatch {
  --board: #121212;
  grid-row: span 2;
  width: 8px;
  height: 72px;
  border-radius: 1.5px;
  background: linear-gradient(#ff9a3c, #ff9a3c) 50% 1.2% / 82% 16.2% no-repeat, var(--board);
}
.swatch-black { box-shadow: 0 0 0 1px #333; }
.swatch-white { --board: #e8e6e1; }
.edition-name { font-weight: 650; font-size: 20px; letter-spacing: -0.02em; }
.edition-note { font-size: 13px; color: var(--ink-3); line-height: 1.3; }

.acquire-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.acquire-price { font-family: var(--dot); font-weight: 800; font-size: clamp(48px, 4vw, 72px); color: var(--ink); line-height: 1; }
.fine { margin-top: 16px; font-size: 14px; color: var(--ink-3); }

.spec-table { margin-top: 44px; display: grid; gap: 12px; }

.faq { margin-top: 36px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 0;
  font-weight: 600;
  font-size: 18px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--mono); color: var(--amber); transition: transform 0.3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 20px; color: var(--ink-2); font-size: 17px; max-width: 52ch; }
.faq details p.faq-note { color: var(--amber); }

/* ---------- Footer ---------- */

.footer {
  position: relative;
  /* Above the page and the timecode: the footer is the one thing that covers the clock. */
  z-index: 5;
  padding: clamp(80px, 12vh, 140px) var(--gutter) 40px;
  border-top: 1px solid var(--line);
  background: #000;
}

.footer-mark { display: flex; align-items: center; gap: 20px; }
.footer-flame { width: 36px; height: 64px; }
.footer-word { font-size: clamp(48px, 8.6vw, 170px); font-weight: 700; letter-spacing: -0.06em; line-height: 0.9; }
.tld { color: var(--amber); letter-spacing: -0.02em; }

.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-top: 56px;
  font-size: 15px;
  color: var(--ink-2);
}

.footer-cols a:not(.cite-link) { color: var(--ink); text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.footer-small { margin-top: 64px; color: var(--ink-3); font-size: 11px; letter-spacing: 0.1em; }
.footer-copy { text-align: center; }

/* The map credit sits in the very corner while the Singapore flight is on screen. */
.map-credit {
  position: fixed;
  left: 2px;
  bottom: 2px;
  z-index: 4;
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  opacity: 0;
  pointer-events: none;
}
.map-credit a { color: inherit; text-underline-offset: 2px; }

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-xl { min-height: 480px; }
  .mind-grid { grid-template-columns: 1fr; }
  .dev-foot { grid-template-columns: 1fr; }
  .demo-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  :root { --nav-h: 60px; }
  .nav-links, .rail { display: none; }
  .hero-copy { max-width: none; justify-content: flex-end; padding-top: 26vh; padding-right: 84px; }
  .hero-title { font-size: min(14vw, 9vh); }
  .question-title { font-size: calc(min(14vw, 9vh) * 1.12); }
  .hero-foot { grid-template-columns: 1fr; padding-right: 0; gap: 10px; padding-bottom: 96px; }
  .wall-label { display: none; }
  .live-readout { justify-self: start; text-align: left; }
  .hero-hint { white-space: normal; }
  .object-head { max-width: none; right: var(--gutter); }
  .callouts { left: var(--gutter); right: var(--gutter); width: auto; top: auto; bottom: calc(92px + 2vh); transform: none; }
  .callout { inset: auto 0 0 0; background: rgba(0, 0, 0, 0.55); padding: 16px; border-radius: 16px; backdrop-filter: blur(8px); }
  .object-tron-label { display: none; }
  .callout-n { font-size: 36px; }
  .bento { grid-template-columns: 1fr; }
  .card-xl, .card-wide { grid-column: auto; }
  .card-twins { flex-direction: column; align-items: flex-start; }
  .card-twins .card-body { max-width: none; }
  .mind-stage { grid-template-columns: 1fr 1fr 1fr; }
  .mind-cap { display: none; }
  .demos { grid-template-columns: 1fr; }
  .demo-screen { aspect-ratio: 5 / 4; }
  .demo-strip { grid-template-columns: 1fr; }
  .plate-acquire { grid-template-columns: 1fr; }
  .acquire-media { min-height: 70vh; }
  .pair-frame { position: relative; height: 70vh; }
  .acquire-media::after { background: radial-gradient(40% 70% at var(--spot-x, 38%) 50%, transparent 40%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(to bottom, transparent 70%, #000 100%); }
  .acquire-panel { padding-top: 40px; }
  .editions { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr; }
  .spec-list div, .spec-table div { grid-template-columns: 96px 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .layer-veil, .shine, .loader-dot { animation: none; }
}

/* ---------- Asterisk, footnote ---------- */

.ast {
  font-family: var(--mono);
  font-size: 0.32em;
  font-weight: 500;
  color: var(--amber);
  vertical-align: super;
  margin-left: 0.04em;
  letter-spacing: 0;
}

.footnote {
  margin-top: clamp(18px, 3vh, 30px);
  max-width: 44ch;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}

.footnote span { color: var(--amber); margin-right: 4px; }

/* ---------- Buy dock ---------- */

.dock {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 62;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 8px 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(12, 10, 9, 0.62);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 calc(30px * var(--flame)) rgba(255, 120, 30, 0.12);
  transform: translate(-50%, calc(100% + 40px));
  transition: transform 0.8s var(--ease-out);
}

body.dock-on .dock { transform: translate(-50%, 0); }
body.dock-on .buy-pill { opacity: 0; pointer-events: none; transform: translateY(-8px); }
.buy-pill { transition: transform 0.4s var(--ease-out), opacity 0.4s; }

.dock-flame { width: 14px; height: 25px; image-rendering: pixelated; filter: drop-shadow(0 0 6px rgba(255, 138, 42, 0.9)); }
.dock-name { display: flex; flex-direction: column; line-height: 1.2; font-size: 14px; }
.dock-name strong { font-weight: 650; letter-spacing: -0.01em; }
.dock-name span { font-size: 12px; color: var(--ink-3); }
.dock-chips { display: flex; gap: 4px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px 0 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
}

.chip.is-active { border-color: var(--line-2); color: var(--ink); background: rgba(255, 255, 255, 0.05); }
.chip-sw { width: 14px; height: 14px; border-radius: 50%; border: 1px solid #444; }
.chip-black { background: #111; }
.chip-white { background: #e9e6e0; }

.dock-buy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 650;
  font-size: 15px;
  color: #170900;
  background: linear-gradient(180deg, #ffd9ad, var(--amber) 75%);
  box-shadow: 0 0 calc(10px + 24px * var(--flame)) rgba(255, 128, 32, calc(0.25 + 0.3 * var(--flame))), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.dock-buy [data-price] { font-family: var(--mono); font-weight: 500; font-size: 13px; opacity: 0.75; }

/* ---------- Weights card ---------- */

.card-weights .weights {
  width: 100%;
  max-width: 180px;
  aspect-ratio: 1;
  image-rendering: pixelated;
  margin-bottom: 18px;
  border-radius: 4px;
}

.card-weights .num { margin-bottom: 10px; }

/* ---------- Model card sheet ---------- */

.mind-card-btn { margin-top: 26px; }

.sheet {
  width: min(720px, 100vw);
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--line-2);
  background: #0a0908;
  color: var(--ink);
  overflow-y: auto;
}

.sheet::backdrop { background: rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sheet[open] { animation: sheetIn 0.6s var(--ease-out); }

@keyframes sheetIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }

.sheet-inner { position: relative; padding: clamp(32px, 5vw, 64px); }

.sheet-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.sheet-title { font-family: var(--dot); font-weight: 800; font-size: clamp(54px, 7vw, 96px); line-height: 1; color: var(--amber); text-shadow: 0 0 30px rgba(255, 138, 42, 0.5); }
.sheet-lede { font-family: var(--serif); font-style: italic; font-size: 26px; margin: 14px 0 36px; color: var(--ink-2); }
.mc { display: grid; gap: 0; border-top: 1px solid var(--line); }
.mc div { display: grid; grid-template-columns: 140px 1fr; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.mc dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); padding-top: 3px; }
.mc dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); }

/* ---------- Messages ---------- */

/* Read out to screen readers; the visible message is the .pop that floats up. */
.toast { position: fixed; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* A message rising from the pointer and fading, like points in a game. */
.pop {
  position: fixed;
  z-index: 2147483001;
  transform: translate(-50%, 0);
  font-family: var(--dot);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--amber);
  white-space: nowrap;
  pointer-events: none;
  animation: pop-rise 0.75s linear forwards;
}

/* Appears at once and drifts up in one steady motion, fading out toward the end. */
@keyframes pop-rise {
  0% { opacity: 1; transform: translate(-50%, 0); }
  65% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -54px); }
}

@media (prefers-reduced-motion: reduce) {
  .pop { animation: pop-fade 0.75s ease forwards; }
  @keyframes pop-fade { 0%, 100% { opacity: 0; } 15%, 70% { opacity: 1; } }
}

@media (max-width: 860px) {
  .dock { left: 12px; right: 12px; transform: translateY(calc(100% + 40px)); justify-content: space-between; gap: 8px; }
  body.dock-on .dock { transform: none; }
  .dock-name span, .dock-chips { display: none; }
  .mc div { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- Focus ---------- */

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 6px;
}

.btn:focus-visible,
.buy-pill:focus-visible,
.dock-buy:focus-visible,
.chip:focus-visible { border-radius: 999px; }

/* Bottom-anchored labels sit above the buy dock. */
.hud,
.object-tron-label { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 76px); }

/* ---------- Card subheadings ---------- */

.card .card-sub {
  font-size: clamp(22px, 1.6vw + 6px, 32px);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--ink);
  max-width: none;
}

/* The No flame card's grid fades in as the board's own lights land in it. */
[data-landing] { opacity: 0; }

/* ---------- Spacebar pauses ---------- */

/* Absence: the whole grid on one page, cards a size smaller. */
.plate-without { padding-bottom: 24px; }
.plate-without .section-head { margin-bottom: clamp(18px, 2.6vh, 32px); }
.plate-without .section-head .display { max-width: 22ch; font-size: clamp(36px, 4.2vw, 78px); }
.plate-without .bento { grid-auto-rows: minmax(clamp(128px, 16vh, 184px), auto); }
.plate-without .card { padding: clamp(18px, 1.5vw, 28px); }
.plate-without .card-big { font-size: clamp(28px, 2.4vw, 46px); margin-bottom: 10px; }
.plate-without .card p { font-size: clamp(14px, 0.4vw + 10px, 17px); }
.plate-without .card .num { font-size: clamp(38px, 3.3vw, 62px); margin-bottom: 10px; }
.plate-without .card .card-sub { font-size: clamp(18px, 1.1vw + 5px, 26px); }
.plate-without .card-xl { min-height: 0; }
.plate-without .card-flame .card-body { max-width: 54%; }
.plate-without .card-flame .mini-flame { top: 9%; left: auto; right: 9%; height: 82%; width: auto; transform: none; }
.plate-without .card-twins .card-big { font-size: clamp(24px, 2vw, 38px); }
.plate-without .twins .mini-flame { width: clamp(46px, 4.8vw, 86px); }
.plate-without .card-twins .card-body { max-width: 50%; }

/* Mind: a short caption, then the live panel across the full width. */
.mind-grid { width: 100%; grid-template-columns: minmax(0, 1fr); gap: clamp(18px, 3vh, 34px); align-items: stretch; }
.mind-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px clamp(24px, 4vw, 72px); align-items: end; align-items: last baseline; }
.mind-copy .kicker { grid-column: 1 / -1; }
.mind-copy .display { margin-bottom: 0; max-width: 12ch; font-size: clamp(36px, 4.4vw, 84px); }
.mind-lede { max-width: 40ch; }
.mind-foot { display: flex; justify-content: flex-end; margin-top: calc(clamp(18px, 3vh, 34px) * -0.5); }
.mind-col canvas { aspect-ratio: auto; height: clamp(200px, 36vh, 480px); }
.plate-mind .lede { font-size: clamp(18px, 0.9vw + 10px, 26px); }

/* After hours: the three demos, the smaller ones beneath, one page. */
.plate-dev .section-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 10px clamp(24px, 4vw, 72px); align-items: end; margin-bottom: clamp(18px, 3vh, 40px); }
.plate-dev .section-head .kicker { grid-column: 1 / -1; }
.plate-dev .section-head .display { max-width: 16ch; font-size: clamp(36px, 4.2vw, 78px); }
.plate-dev { padding-bottom: 24px; }
.plate-dev .section-head .lede { margin-top: 0; max-width: 44ch; font-size: clamp(17px, 0.8vw + 9px, 24px); }
.plate-dev .demo-screen { aspect-ratio: 16 / 9; }
.plate-dev .demo-text { padding: 14px 22px 18px; }
.plate-dev .demo-text h3 { font-size: clamp(22px, 1.7vw, 32px); }
.plate-dev .demo-text p { font-size: 15px; }
.demo-strip { margin: clamp(12px, 1.2vw, 20px) auto 0; }

/* Sections start below the band the previous pause overlaps. */
.object-head { top: max(calc(var(--nav-h) + 4vh), calc(100vh - var(--step) + 16px)); }
.plate-dev { padding-top: max(clamp(70px, 11vh, 150px), calc(100vh - var(--step) + 24px)); }
.plate-mind { padding-top: calc(var(--nav-h) + 24px); }

/* The landing grid is drawn straight onto the card, without its own backdrop. */
.card-flame .mini-flame { top: 6%; }

@media (max-width: 1100px) {
  .plate-without .card-xl { min-height: 380px; }
}

@media (max-width: 860px) {
  .plate-without .card-xl { min-height: 420px; }
  .plate-without .card-flame .card-body { max-width: 60%; }
  .mind-copy, .plate-dev .section-head { grid-template-columns: 1fr; }
  .mind-col canvas { height: clamp(150px, 28vh, 240px); }
  .plate-dev .demo-screen { aspect-ratio: 5 / 4; }

  /* Acquisition on phones: board on top, panel tight below it. */
  .plate-acquire { align-content: start; }
  .acquire-media { min-height: 56vh; }
  .acquire-panel { padding-top: 0; }
  .acquire-panel .display { font-size: 36px; margin-bottom: 16px; }
  .editions { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 22px; }
  .edition { padding: 12px 14px; }
  .swatch { width: 6px; height: 54px; }
  .edition-note { display: none; }

  /* Nav and dock together cover more than a pause overlaps; the dock wins. */
  .nav { transition: opacity 0.4s, transform 0.4s; }
  body.dock-on .nav { opacity: 0 !important; pointer-events: none; transform: translateY(-10px); }
}

/* ---------- Phones: dense, no long black stretches ---------- */

.acquire-window { display: none; }

@media (max-width: 860px) {
  .section-head { margin-bottom: 20px; }
  .section-head .lede { margin-top: 14px; }

  /* Absence: two columns of small cards. */
  .plate-without { padding-bottom: 32px; }
  .plate-without .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 10px; }
  .plate-without .card-xl,
  .plate-without .card-wide { grid-column: 1 / -1; grid-row: auto; }
  .plate-without .card-xl { min-height: 250px; }
  .plate-without .card { padding: 16px; }
  .plate-without .card-big { font-size: 24px; margin-bottom: 6px; }
  .plate-without .card p { font-size: 13.5px; line-height: 1.35; }
  .plate-without .card .num { font-size: 30px; margin-bottom: 4px; }
  .plate-without .card .card-sub { font-size: 15px; }
  .plate-without .card-num { aspect-ratio: 4 / 3; }
  .plate-without .card-flame .card-body { max-width: 58%; }
  .plate-without .card-flame .mini-flame { height: 84%; top: 8%; right: 7%; }
  .plate-without .card-twins { flex-direction: row; align-items: center; gap: 14px; }
  .plate-without .card-twins .card-body { max-width: 58%; }
  .plate-without .twins { gap: 8px; }
  .plate-without .twins .mini-flame { width: 30px; }

  /* The mind: the three views dealt like cards, light on top, springs at the bottom of the deck. */
  .plate-mind { padding-bottom: 32px; }
  .mind-panel { padding: 14px; }
  .mind-stage { display: block; position: relative; height: calc(46vw + 62px + 36vw); }
  .mind-col {
    position: absolute;
    width: 56%;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid var(--line-2);
    background: #0a0807;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
  }
  .mind-col canvas { height: 46vw; }
  .mind-col figcaption { margin-bottom: 8px; font-size: 12.5px; }
  .mind-col:nth-child(3) { left: 0; top: 0; z-index: 3; }
  .mind-col:nth-child(2) { left: 22%; top: 18vw; z-index: 2; }
  .mind-col:nth-child(1) { left: 44%; top: 36vw; z-index: 1; }
  .mind-foot { margin-top: 14px; }

  /* The story and the question don't need whole screens of black around them. */
  .plate-story { padding-top: 56px; padding-bottom: 40px; }
  .plate-question { min-height: 0; padding-top: 72px; padding-bottom: 72px; }

  /* After hours: one wide demo, two small ones, then the tiles two by two. */
  .plate-dev { padding-bottom: 32px; }
  .demos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .demo:first-child { grid-column: 1 / -1; }
  .plate-dev .demo-screen { aspect-ratio: 16 / 10; }
  .plate-dev .demo:not(:first-child) .demo-screen { aspect-ratio: 1 / 1; }
  .plate-dev .demo-text { padding: 10px 14px 14px; }
  .plate-dev .demo-text h3 { font-size: 20px; margin: 4px 0; }
  .plate-dev .demo-text p { font-size: 13px; }
  .demo-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
  .tile { padding: 10px; gap: 10px; border-radius: 16px; }
  .tile canvas { width: 30px; }
  .tile figcaption { font-size: 14px; }
  .tile figcaption span { font-size: 11.5px; }

  /* Acquisition: a window between the button and the details, about 60% of the board tall. */
  .acquire-window { display: block; height: 24vh; }
  .plate-acquire { min-height: 0; }
}

/* Dip to black for long in-page jumps, so the scenes in between are not replayed. */
.cut {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.38s ease;
}
.cut.is-down { opacity: 1; }

/* No text selection anywhere: with a mouse the page is dragged like a touch screen. */
html { -webkit-user-select: none; user-select: none; }
html.is-dragging, html.is-dragging * { cursor: grabbing; }

/* ---------- Right-click spark (js/ui/spark.js) ---------- */

.spark, .burn {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2147482999;
  pointer-events: none;
  /* It is a popover (to show over an open dialog): none of the popover's own box. */
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

/* ---------- 3D cursor (js/ui/cursor3d.js), mouse and trackpad only ---------- */

html.has-cursor3d, html.has-cursor3d * { cursor: none !important; }
.cursor3d {
  position: fixed;
  left: 0;
  top: 0;
  width: 104px;
  height: 104px;
  z-index: 2147483000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  will-change: transform;
  /* A soft shadow under it, so it stays distinct over light and amber surfaces too. */
  filter: drop-shadow(1px 3px 3px rgba(0, 0, 0, 0.65));
  /* It is a popover (so it can sit over an open dialog): none of the popover's own box. */
  right: auto;
  bottom: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.cursor3d.is-on { opacity: 1; }
/* Where popovers aren't supported the arrow can't rise over a dialog's top layer, so the
   system pointer comes back while one is open. */
html.has-cursor3d:not(.cursor3d-top):has(dialog[open]) * { cursor: auto !important; }
html.has-cursor3d:not(.cursor3d-top):has(dialog[open]) :is(a, button, summary, [data-close]) { cursor: pointer !important; }
html:not(.cursor3d-top):has(dialog[open]) .cursor3d { display: none; }