/* hyperpeg — the site. sonar room: slow, liquid, quiet. */

:root {
  --void:      #060a09;
  --void-2:    #0b1512;
  --teal-deep: #143138;
  --teal:      #1d4a44;
  --mint:      #b7e4c7;
  --mint-hi:   #e4f6ec;
  --mint-dim:  #7fa892;
  --mute:      #3f5a50;
  --alert:     #e8a0a0;
  --ease: cubic-bezier(.22,.61,.36,1);
  --checker: none;
  --checker-deep: none;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--void);
  color: var(--mint);
  font: 400 16px/1.6 "DM Sans", system-ui, sans-serif;
  overflow-x: hidden;
}
::selection { background: var(--teal); color: var(--mint-hi); }

.mono { font-family: "IBM Plex Mono", monospace; }
.dim { color: var(--mint-dim); }
em { color: var(--mint-hi); }
a { color: var(--mint); }

h1, h2, h3 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.04; text-transform: lowercase; }
h1 { font-size: clamp(2.6rem, 7vw, 5rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.2rem); margin-bottom: .6em; }
p { max-width: 62ch; }
.lede, .panel p, .articles p { color: var(--mint-dim); }

.dead { color: var(--mute); }

/* labels */
.eyebrow, dt, .label, .sim-note, .rarity-line, .foot-note {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--mint-dim);
}

/* ── buttons ─────────────────────────────────────────────────────── */
.btn {
  display: inline-block; padding: .72em 1.6em;
  font: 500 15px/1 "DM Sans", sans-serif; text-transform: lowercase;
  color: var(--mint); background: transparent;
  border: 1px solid var(--mint); border-radius: 999px;
  text-decoration: none; cursor: pointer;
  transition: box-shadow .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
.btn:hover {
  color: var(--mint-hi); border-color: var(--mint-hi);
  box-shadow: 0 0 18px rgba(183,228,199,.25), 0 0 4px rgba(228,246,236,.4);
}
.btn.ghost { border-color: var(--mute); color: var(--mint-dim); }
.btn.ghost:hover { border-color: var(--mint); color: var(--mint); }

/* ── glow: glow marks alive ──────────────────────────────────────── */
.glow { filter: drop-shadow(0 0 6px rgba(228,246,236,.55)) drop-shadow(0 0 22px rgba(183,228,199,.30)); }
.breath { animation: breath 4s ease-in-out infinite; }
@keyframes breath {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(183,228,199,.18)); }
  50%      { filter: drop-shadow(0 0 16px rgba(183,228,199,.4)); }
}

/* ── splash ──────────────────────────────────────────────────────── */
#splash {
  position: fixed; inset: 0; z-index: 50;
  background: var(--void) var(--checker) center/640px;
  display: grid; place-items: center;
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
#splash::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 55% at 50% 46%, transparent 20%, var(--void) 78%); }
#splash.gone { opacity: 0; transform: translateY(-6%); pointer-events: none; }
.splash-inner { position: relative; z-index: 1; text-align: center; display: grid; gap: 1.4rem; justify-items: center; padding: 1rem; }
.splash-line { font-size: clamp(1.3rem, 3.4vw, 2rem); font-weight: 500; text-transform: lowercase; }
.splash-line em { font-style: italic; }
.splash-meta { font-size: 11.5px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--mint-dim); }

/* ── header ──────────────────────────────────────────────────────── */
.site-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 22px; pointer-events: none;
  opacity: 0; transition: opacity 1.2s var(--ease);
}
body.entered .site-head { opacity: 1; }
.brand { pointer-events: auto; display: flex; align-items: center; gap: 10px; text-decoration: none; }
.wordmark { font-weight: 700; font-size: 18px; text-transform: lowercase; letter-spacing: -0.01em; }
.head-clock { font-size: 12px; color: var(--mint-dim); }
.sigil { display: inline-flex; }

/* ── rooms / parallax ────────────────────────────────────────────── */
.room { position: relative; height: 260vh; }
.room.tall { height: 300vh; }
.stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.plane { position: absolute; inset: -6% 0; will-change: transform; }
.plane.front { display: grid; place-items: center; inset: 0; }
.checker { background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(29,74,68,.35), transparent 70%), var(--checker) center/640px, linear-gradient(180deg, #0a1411, var(--void)); }
.checker-deep { background: var(--checker-deep) center/640px, var(--void); }
.void { background: var(--void); }

.arcs { position: absolute; top: 50%; translate: 0 -50%; height: 120vh; width: auto; opacity: .8; }
.arcs.left { left: -2vw; }
.arcs.right { right: -2vw; }

/* ── #surface ────────────────────────────────────────────────────── */
.hero-figure { position: absolute; left: 50%; top: 8%; translate: -50% 0; opacity: .95; }
.hero-figure .ambient { position: absolute; inset: -80px; width: 400px; height: 400px; overflow: visible; }
.hero { position: relative; text-align: center; display: grid; gap: 1.3rem; justify-items: center; padding: 13vh 1.4rem 0; z-index: 1; }
.hero .lede { font-size: 1.05rem; }
.cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.stats { display: flex; gap: clamp(16px, 4vw, 54px); flex-wrap: wrap; justify-content: center; margin-top: 1.6rem; }
.stats div { display: grid; gap: 4px; justify-items: center; }
.stats dd { font-size: clamp(1.2rem, 2.6vw, 1.7rem); font-weight: 500; color: var(--mint-hi); }
.stats dd.dead { color: var(--mute); font-weight: 400; }
.stats .note { letter-spacing: 1.5px; font-size: 10px; color: var(--mute); text-transform: lowercase; }

.ticker { position: absolute; bottom: 18px; left: 0; right: 0; overflow: hidden;
  font-size: 12px; color: var(--mint-dim); opacity: .8;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker-track { display: inline-flex; white-space: nowrap; animation: tick 70s linear infinite; }
.ticker-track span { padding-right: .5em; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ── #feed machine ───────────────────────────────────────────────── */
.machine { position: absolute; inset: 0; }
.readout-wall {
  position: absolute; inset: 8% 6% auto; display: grid;
  grid-template-columns: repeat(6, 1fr); gap: 10px 18px;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--mute); opacity: .8;
}
.wr { transition: color .8s var(--ease), text-shadow .8s var(--ease); }
.wr.lit { color: var(--mint); text-shadow: 0 0 10px rgba(183,228,199,.5); }

.intake { position: absolute; top: 0; bottom: 0; left: 61%; width: min(420px, 86vw); translate: -50% 0; }
.intake::before { content: ""; position: absolute; top: 10%; bottom: 14%; left: 50%;
  border-left: 1px dashed var(--mute); opacity: .5; }
.scan { position: absolute; left: 0; right: 0; top: 58%; height: 0; }
.scan::before { content: ""; position: absolute; left: 6%; right: 6%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--mint) 30%, var(--mint-hi) 50%, var(--mint) 70%, transparent);
  box-shadow: 0 0 12px rgba(183,228,199,.5); }
.scan-svg { position: absolute; left: 0; right: 0; top: -80px; width: 100%; height: 160px; overflow: visible; }
.intake-counter { position: absolute; bottom: 8%; left: 50%; translate: -50% 0;
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--mint-dim); white-space: nowrap; }
.intake-counter b { color: var(--mint-hi); font-weight: 500; padding: 0 .4em; }

.chip {
  position: absolute; top: 6%; translate: 0 0;
  padding: 5px 12px; font-size: 12px; border-radius: 8px;
  color: var(--mint-dim); background: var(--void-2);
  border: 1px solid var(--teal);
  transition: transform 2.2s var(--ease), opacity .7s var(--ease);
  will-change: transform;
}
.chip.travel { transform: translateY(46vh); }
.chip.fade { opacity: 0; }
.chip.special { color: var(--void); background: var(--mint); border-color: var(--mint-hi);
  box-shadow: 0 0 16px rgba(183,228,199,.5); }
.chip.alert { color: var(--void); background: var(--alert); border-color: var(--alert); }
.chip.sink { transform: translateY(105vh) scale(.92); transition: transform 1.8s cubic-bezier(.5,0,.8,.4); }

.panel {
  position: relative; z-index: 1; background: color-mix(in srgb, var(--void-2) 82%, transparent);
  border: 1px solid rgba(63,90,80,.35); border-radius: 14px;
  padding: clamp(1.4rem, 3vw, 2.4rem); margin: 0 1.2rem; max-width: 560px;
  backdrop-filter: blur(3px);
}
#feed .plane.front { justify-items: start; padding-left: clamp(0px, 4vw, 60px); }
.feed-list { list-style: none; padding: 0; margin: 1.1rem 0 0; font-size: 12px; display: grid; gap: 6px; }
.feed-list li { color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-list li:first-child { color: var(--mint-dim); }
.feed-list li.special { color: var(--mint); }
.feed-list li.alert { color: var(--alert); }
.sim-note { margin-top: 1rem; font-size: 10px; color: var(--mute); }
.sim-tag { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--mute); padding-left: .8em; }

/* ── #descent ────────────────────────────────────────────────────── */
.descent-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.descent-hud { position: absolute; top: 50%; left: clamp(14px, 5vw, 70px); translate: 0 -50%;
  display: grid; gap: 1.2rem; font-size: 12px; z-index: 2; }

.stops { list-style: none; padding: 0 0 0 18px; display: grid; gap: 12px; position: relative; }
.stops::before { content: ""; position: absolute; left: 3.5px; top: 6px; bottom: 6px; width: 1px;
  background: linear-gradient(180deg, transparent, var(--mute) 14%, var(--mute) 86%, transparent); }
.stop { position: relative; color: var(--mute); letter-spacing: 2.5px; text-transform: uppercase; font-size: 11px;
  transition: color .6s var(--ease), text-shadow .6s var(--ease); }
.stop::before { content: ""; position: absolute; left: -18px; top: 50%; width: 8px; height: 8px;
  border-radius: 50%; background: var(--void); border: 1px solid var(--mute);
  transform: translateY(-50%);
  transition: background .6s var(--ease), border-color .6s var(--ease), box-shadow .6s var(--ease); }
.stop.here { color: var(--mint-hi); text-shadow: 0 0 10px rgba(183,228,199,.5); }
.stop.here::before { background: var(--mint-hi); border-color: var(--mint-hi);
  box-shadow: 0 0 12px rgba(183,228,199,.8); }
.descent-glow { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 62%, rgba(183,228,199,.16), transparent 70%);
  transition: opacity 1.4s var(--ease); }
.descent-glow.on { opacity: 1; }
.descent-line { position: absolute; left: 50%; top: 55%; translate: -50% 0; z-index: 2;
  font-size: clamp(1.3rem, 3.2vw, 2rem); font-weight: 500; font-style: italic;
  color: var(--mint-hi); text-shadow: 0 0 26px rgba(183,228,199,.5);
  opacity: 0; transform: translateY(14px); text-transform: lowercase;
  transition: opacity 1.6s var(--ease), transform 1.6s var(--ease); }
.descent-line.on { opacity: 1; transform: translateY(0); }

/* the depth gauge — the brand's glowing ruler, driven by scroll */
.depth-gauge-wrap { position: absolute; bottom: 8%; left: 50%; translate: -50% 0; z-index: 2;
  width: min(560px, 76vw); display: grid; gap: 12px; justify-items: center; }
.depth-label { font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--mint-hi); text-shadow: 0 0 12px rgba(183,228,199,.4); }
.depth-gauge { position: relative; width: 100%; height: 20px;
  border: 1px solid var(--teal); border-radius: 10px; background: rgba(11,21,18,.7);
  box-shadow: 0 0 calc(8px + var(--depth, 0) * 30px) rgba(183,228,199, calc(0.08 + var(--depth, 0) * 0.3)); }
.depth-fill { position: absolute; inset: 3px auto 3px 3px; width: 0%;
  max-width: calc(100% - 6px); border-radius: 7px;
  background: linear-gradient(180deg, #dff3e8, var(--mint) 60%, #96d4b6);
  box-shadow: 0 0 14px rgba(183,228,199,.6); }
.depth-ticks { position: absolute; inset: 0; border-radius: 10px;
  background: repeating-linear-gradient(90deg, transparent 0 calc(2% - 1px), rgba(6,10,9,.35) calc(2% - 1px) 2%),
              repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(6,10,9,.7) calc(10% - 1px) 10%); }

/* ── #origin ─────────────────────────────────────────────────────── */
.origin-rings { left: 50% !important; translate: -50% -50%; height: 160vh; opacity: .5;
  transition: scale .2s linear; }
.origin-figure { position: absolute; left: 50%; top: 47%; translate: -50% -50%; }
.origin-figure::before { content: ""; position: absolute; inset: -70px;
  background: radial-gradient(circle, rgba(183,228,199,.16), transparent 62%); border-radius: 50%; }
.acc { position: absolute; left: 50%; top: 47%; translate: -50% -50%; width: 420px; height: 420px; overflow: visible; }
.acc-dot { opacity: 0; }
.acc-dot.in { opacity: .85; animation: dotIn 2s var(--ease); }
@keyframes dotIn {
  0%   { opacity: 0; r: 0.5px; }
  35%  { opacity: 1; r: 3.4px; }
  100% { opacity: .85; r: 2px; }
}
/* the orbit: title top, figure dead centre, HUD notes at the corners
   with hairline leaders reaching toward the origin */
.origin-title { position: absolute; top: 11%; left: 50%; translate: -50% 0;
  text-align: center; display: grid; gap: .8rem; justify-items: center; width: min(92vw, 640px); }
.origin-title h2 { margin: 0; }
.origin-lede { color: var(--mint-dim); font-size: .95rem; max-width: 52ch; }
.hud-note { position: absolute; max-width: 240px; font-size: 11.5px; line-height: 1.55;
  color: var(--mint-dim); letter-spacing: .4px; }
.hud-label { display: block; font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--mint-hi); margin-bottom: 4px; text-shadow: 0 0 10px rgba(183,228,199,.35); }
.hud-note::after { content: ""; position: absolute; width: clamp(60px, 9vw, 130px); height: 1px;
  background: linear-gradient(90deg, var(--mute), transparent); transform-origin: left center; }
.hud-in { top: 26%; left: clamp(16px, 7vw, 110px); }
.hud-in::after { right: -20px; bottom: -14px; transform: translateX(100%) rotate(24deg); }
.hud-out { top: 26%; right: clamp(16px, 7vw, 110px); text-align: right; }
.hud-out::after { left: -20px; bottom: -14px; transform: translateX(-100%) rotate(156deg); }
.hud-oneway { bottom: 18%; left: clamp(16px, 7vw, 110px); }
.hud-oneway::after { right: -20px; top: -14px; transform: translateX(100%) rotate(-24deg); }
.origin-plaque { position: absolute; left: 50%; top: 66%; translate: -50% 0; }
.plaque { display: flex; align-items: baseline; gap: 12px;
  border: 1px solid var(--teal); border-radius: 10px; padding: 12px 16px;
  background: color-mix(in srgb, var(--void) 80%, transparent); }
.plaque .label { font-size: 11px; }
.plaque b { font-size: 1.5rem; color: var(--mint-hi); font-weight: 500; display: inline-block; }
.plaque b.pop { animation: plaquePop 1s var(--ease); }
@keyframes plaquePop { 25% { transform: translateY(-2px); text-shadow: 0 0 16px rgba(228,246,236,.9); } }


/* ── flat rooms (#pegs, #charter) ────────────────────────────────── */
.flat-room { position: relative; padding: 16vh 1.4rem; background: var(--void); overflow: hidden; }
.flat-inner { position: relative; z-index: 1; }
.arcs.charter-arcs { top: auto; bottom: -34vh; left: 50%; right: auto; translate: -50% 0;
  height: 120vh; opacity: .25; pointer-events: none; }
#pegs { background: var(--checker-deep) center/640px, var(--void); }
.flat-inner { max-width: 1060px; margin: 0 auto; display: grid; gap: 1.6rem; }

/* the crowd: rows of dim hoods, scaled and faded with distance. Their
   fills reference --mint / --teal-deep, so recoloring is one override. */
.pegs-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: 3rem; align-items: center; margin-top: 1.4rem; }
.crowd { display: grid; gap: 0; padding: 1rem 0; }
.crowd-row { display: flex; justify-content: center; gap: 13px;
  transform: scale(var(--rs, 1)); margin-top: -6px; }
.crowd-row.shift { translate: 16px 0; }
.crowd-fig { background: none; border: 0; padding: 0; cursor: pointer; line-height: 0;
  --mint: #223c35; --teal-deep: #0b1714; }
.crowd-fig svg { display: block; }
.crowd-fig svg path { transition: fill .6s var(--ease); }
.crowd-fig.lit { --mint: #57776a; --teal-deep: #122822; }
.crowd-fig:hover, .crowd-fig:focus-visible { --mint: var(--mint-hi); --teal-deep: var(--teal-deep);
  --teal-deep: #143138; filter: drop-shadow(0 0 8px rgba(183,228,199,.45)); outline: none; }
.crowd-fig.sel { --mint: #e4f6ec; --teal-deep: #1d4a44;
  filter: drop-shadow(0 0 10px rgba(183,228,199,.6)); }

/* the inspection plate */
.inspect { background: var(--void-2); border: 1px solid rgba(63,90,80,.4);
  border-radius: 14px; padding: 16px; display: grid; gap: 12px; }
.inspect-mount { aspect-ratio: 1; }
.inspect-mount svg { width: 100%; height: 100%; display: block; }
.inspect-mount.pop svg { animation: pop .7s var(--ease); }
@keyframes pop { from { opacity: .2; transform: scale(.97); } }
.inspect-cap { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; }
.inspect-cap b { color: var(--mint-hi); font-weight: 500; font-size: 1.1rem; }
.inspect-cap .dim { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; }
.inspect-slots { display: grid; border-top: 1px solid rgba(63,90,80,.35); }
.inspect-row { display: flex; align-items: baseline; gap: 10px;
  padding: 8px 2px; border-bottom: 1px solid rgba(63,90,80,.25); }
.inspect-row .eyebrow { width: 90px; flex-shrink: 0; margin: 0; }
.inspect-var { font-size: 13px; }
.inspect-row .dim { margin-left: auto; font-size: 11px; }
.inspect-reroll { justify-self: start; }
.rarity-line { font-size: 10.5px; letter-spacing: 1.5px; margin-top: 1.6rem; }

/* charter */
/* the charter reads as a manifesto: one narrow column, numerals in the
   margin, hairline rules — no cards, nothing raised */
#charter .flat-inner { max-width: 780px; }
#charter h2 { text-align: center; }
.articles { list-style: none; padding: 0; display: grid; margin-top: 1.5rem; }
.articles li { display: grid; grid-template-columns: 84px minmax(0, 1fr);
  column-gap: 28px; padding: 2.1rem 0; border-top: 1px solid rgba(63,90,80,.35); }
.articles li:first-child { border-top: 0; }
.articles .num { grid-row: 1 / span 2; grid-column: 1; align-self: start;
  font-family: "IBM Plex Mono", monospace; font-size: 2rem; line-height: 1.1;
  font-weight: 500; text-transform: uppercase; letter-spacing: .06em;
  color: var(--mute); text-align: right; padding-right: 28px;
  border-right: 1px solid rgba(63,90,80,.35);
  transition: color .6s var(--ease), text-shadow .6s var(--ease); }
.articles h3 { grid-column: 2; font-size: 1.2rem; margin-bottom: .5rem; }
.articles p { grid-column: 2; font-size: .95rem; }
.articles li:hover .num { color: var(--mint); text-shadow: 0 0 10px rgba(183,228,199,.5); }
.articles b { color: var(--mint); font-weight: 500; }
.signoff { font-size: 1.15rem; color: var(--mint-dim); display: flex; align-items: center;
  justify-content: center; gap: 12px; margin-top: 2.2rem; }
.signoff .sigil { display: inline-flex; opacity: .85; }

/* ── footer ──────────────────────────────────────────────────────── */
.site-foot { border-top: 1px solid rgba(63,90,80,.35); padding: 3rem 1.4rem 3.4rem;
  display: grid; gap: 1.2rem; justify-items: center; text-align: center; background: var(--void); }
.foot-brand { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.foot-brand .dim { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; font-size: 12px; }
.foot-links a { color: var(--mint-dim); text-decoration: none; transition: color .4s var(--ease); }
.foot-links a:hover { color: var(--mint-hi); }
.foot-note { font-size: 10px; color: var(--mute); }

/* ── toast + event card ──────────────────────────────────────────── */
.toast { position: fixed; bottom: 26px; left: 50%; translate: -50% 0; z-index: 40;
  background: var(--void-2); border: 1px solid var(--teal); color: var(--mint-dim);
  padding: 10px 18px; border-radius: 999px; font-size: 12px;
  opacity: 0; pointer-events: none; transition: opacity .5s var(--ease), transform .5s var(--ease);
  transform: translateY(8px); }
.toast.show { opacity: 1; transform: translateY(0); }

.event-card { position: fixed; top: 20px; right: 20px; z-index: 40;
  background: var(--void-2); border: 1px solid var(--mint-dim); border-radius: 12px;
  padding: 12px 16px; font-size: 12px; color: var(--mint-dim); max-width: 240px;
  box-shadow: 0 0 24px rgba(183,228,199,.12);
  transform: translateX(120%); transition: transform .8s var(--ease); }
.event-card b { display: block; color: var(--mint-hi); font-weight: 500; margin-bottom: 2px; }
.event-card.show { transform: translateX(0); }

/* ── ripple ──────────────────────────────────────────────────────── */
.ripple { animation: ripple 2s var(--ease) forwards; pointer-events: none; }
@keyframes ripple {
  from { r: 6px; opacity: .9; }
  to   { r: var(--rmax, 90px); opacity: 0; }
}

/* ── reduced motion: a fully readable static site ───────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .breath, .ticker-track, .peg-card.pop .peg-svg { animation: none; }
  .plane { transform: none !important; }
  .chip, .event-card, .descent-glow, .descent-line, .acc-dot { transition: none; }
  .descent-line, .descent-glow { opacity: 1; }
  .room, .room.tall { height: auto; min-height: 100vh; }
  .stage { position: relative; height: 100vh; }
}

/* ── mobile ──────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .intake { left: 50%; }
  .room { height: 220vh; }
  .room.tall { height: 260vh; }
  .readout-wall { grid-template-columns: repeat(3, 1fr); }
  .arcs { opacity: .3; }
  .arcs.left { left: -26vw; }
  .arcs.right { right: -26vw; }
  .hero-figure svg { width: 160px; height: 160px; }
  #feed .plane.front, #origin .plane.front { justify-items: center; padding: 0; }
  .origin-panel { margin-bottom: 4vh; }
  .stats { gap: 18px; }
  .descent-hud { top: auto; bottom: 24%; translate: 0 0; }
  .hud-note { max-width: 150px; font-size: 10px; }
  .hud-note::after { display: none; }
  .hud-in, .hud-oneway { left: 5%; }
  .hud-out { right: 5%; }
  .hud-in, .hud-out { top: 21%; }
  .hud-oneway { bottom: 10%; }
  .origin-plaque { top: 63%; }
  .origin-lede { font-size: .85rem; }
  .depth-gauge-wrap { width: 86vw; bottom: 6%; }
}

/* ── reveals: things hand themselves in softly ───────────────────── */
[data-reveal] { opacity: 0; transform: translateY(20px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
[data-reveal].in { opacity: 1; transform: translateY(0); }


@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
  .acc-dot.in, .plaque b.pop { animation: none; }
  .depth-gauge { box-shadow: none; }
}

/* ══ app pages: /forge and /market ═══════════════════════════════── */
.app-body { background: var(--checker) center/640px, var(--void); }
.app-head { position: sticky; opacity: 1; pointer-events: auto; background:
  linear-gradient(180deg, rgba(6,10,9,.92), rgba(6,10,9,.75) 70%, transparent);
  backdrop-filter: blur(4px); gap: 16px; flex-wrap: wrap; }
.page-nav { display: flex; gap: 18px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; pointer-events: auto; }
.page-nav a { color: var(--mint-dim); text-decoration: none; transition: color .4s var(--ease); }
.page-nav a:hover { color: var(--mint); }
.page-nav a.here { color: var(--mint-hi); text-shadow: 0 0 10px rgba(183,228,199,.4); }
.head-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.wallet-btn { padding: .45em 1.1em; font-size: 13px; }
.wallet-info { font-size: 12px; color: var(--mint-dim); }
.wallet-info b { color: var(--mint-hi); font-weight: 500; }
.wallet-real { display: inline-flex; align-items: center; gap: 10px; }
.sim-bal { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--mint-dim); margin-bottom: 1.6rem; }
.sim-bal b { color: var(--mint-hi); font-weight: 500; }

.app-page { max-width: 1100px; margin: 0 auto; padding: 120px 1.4rem 16vh; min-height: 80vh; }
.page-head { display: grid; gap: 1rem; margin-bottom: 3rem; }
.page-head .lede { color: var(--mint-dim); }
.sim-note { font-size: 10.5px; color: var(--mute); letter-spacing: 1.5px; }
.ulink { color: var(--mint-dim); text-decoration: underline; text-underline-offset: 3px; }
.ulink:hover { color: var(--mint); }
.empty-note { border: 1px dashed rgba(63,90,80,.5); border-radius: 12px;
  padding: 2.2rem; color: var(--mint-dim); max-width: 560px; }

/* plates */
.plate-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  max-height: 560px; overflow-y: auto; padding-right: 4px; margin-top: 1rem; }
.plate-sm { background: var(--void-2); border: 1px solid rgba(63,90,80,.4);
  border-radius: 10px; padding: 8px; cursor: pointer; margin: 0;
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease); }
.plate-sm:hover, .plate-sm:focus-visible { border-color: var(--mint-dim); outline: none; }
.plate-sm.selected { border-color: var(--mint); box-shadow: 0 0 14px rgba(183,228,199,.18); }
.plate-mount { aspect-ratio: 1; }
.plate-mount svg { width: 100%; height: 100%; display: block; }
.plate-sm figcaption { padding-top: 6px; font-size: 11px; color: var(--mint-dim);
  display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.plate-sm figcaption b { color: var(--mint-hi); font-weight: 500; }

/* forge layout */
.forge-grid { display: grid; gap: 2.5rem; grid-template-columns: 220px minmax(0, 1fr); }
.bench { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: start; }
.specimen-plate { background: var(--void-2); border: 1px solid rgba(63,90,80,.4);
  border-radius: 14px; padding: 10px; }
.specimen-plate svg { width: 100%; height: auto; display: block; }
.specimen-cap { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; }
.specimen-id { font-size: 1.5rem; font-weight: 700; }
.stage-tag { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--mint-hi); }
.slot-list { margin-top: 14px; border-top: 1px solid rgba(63,90,80,.4); }
.slot-row { display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left;
  background: none; border: 0; border-bottom: 1px solid rgba(63,90,80,.35);
  padding: 10px 6px; color: var(--mint); cursor: pointer; font: inherit;
  transition: background .4s var(--ease); }
.slot-row:hover { background: rgba(29,74,68,.25); }
.slot-row.active { background: rgba(29,74,68,.4); }
.slot-name { width: 86px; flex-shrink: 0; margin: 0; }
.slot-var { font-size: 13px; }
.slot-tag { margin-left: auto; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; }
.slot-tag.is-sealed { color: var(--mint-hi); }
.slot-tag.is-rolling { color: var(--alert); animation: blink 1.2s step-end infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* action panels */
.actions { display: grid; gap: 1.1rem; align-content: start; }
.panel-box { background: color-mix(in srgb, var(--void-2) 85%, transparent);
  border: 1px solid rgba(63,90,80,.4); border-radius: 12px; padding: 1.1rem 1.2rem; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.panel-head h3 { font-size: .95rem; }
.panel-aside { font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--mint-dim); }
.panel-copy { font-size: .84rem; color: var(--mint-dim); margin-top: .5rem; }
.panel-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: .9rem; }
.seal-box { border-color: rgba(232,160,160,.4); }
.alert-btn { border-color: var(--alert); color: var(--alert); }
.alert-btn:hover { color: #f4c9c9; border-color: #f4c9c9;
  box-shadow: 0 0 18px rgba(232,160,160,.25); }
.alert-btn.armed { background: rgba(232,160,160,.12); }
.sealed-note { border: 1px solid rgba(183,228,199,.4); border-radius: 10px;
  padding: 12px 16px; font-size: .84rem; color: var(--mint); }
.field { background: var(--void); border: 1px solid rgba(63,90,80,.6); border-radius: 8px;
  color: var(--mint); font: 400 13px "IBM Plex Mono", monospace; padding: 8px 12px; min-width: 0; }
.field:focus { outline: none; border-color: var(--mint-dim); }
.field.bad { border-color: var(--alert); }
select.field { appearance: none; }
.commons-rows { margin-top: .8rem; display: grid; gap: 0; }
.commons-row { display: flex; justify-content: space-between; gap: 10px;
  border-bottom: 1px solid rgba(63,90,80,.25); padding: 6px 2px; font-size: 12px; }
.commons-row .gone { text-decoration: line-through; color: var(--mute); }
.sim-log { list-style: none; padding: 0; margin-top: .4rem; display: grid; gap: 4px;
  font-size: 10.5px; color: var(--mute); }
.sim-log li:first-child { color: var(--mint-dim); }

/* market */
.book-tabs { display: flex; gap: 8px; border-bottom: 1px solid rgba(63,90,80,.4); padding-bottom: 14px; }
.tab { background: none; border: 1px solid transparent; border-radius: 999px;
  color: var(--mint-dim); font: 500 14px "DM Sans", sans-serif; text-transform: lowercase;
  padding: .5em 1.2em; cursor: pointer; transition: color .4s var(--ease), border-color .4s var(--ease); }
.tab:hover { color: var(--mint); }
.tab.active { color: var(--mint-hi); border-color: var(--mint-dim); }
.book { margin-top: 2rem; }
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
.book-card { cursor: default; display: flex; flex-direction: column; }
.book-btn { padding: .5em 1em; font-size: 12.5px; margin-top: 8px; width: 100%; }
.seller { font-size: 10px; color: var(--mute); margin-top: 6px; letter-spacing: 1px; }
.trait-grid { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
.table-scroll { overflow-x: auto; margin-top: 1rem; }
.trait-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 12px; }
.trait-table th { font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--mint-dim); font-weight: 400; text-align: left; padding: 8px 6px;
  border-top: 1px solid rgba(63,90,80,.4); border-bottom: 1px solid rgba(63,90,80,.4); }
.trait-table td { padding: 9px 6px; border-bottom: 1px solid rgba(63,90,80,.25); }
.trait-table .r { text-align: right; }
.trait-table tbody tr { transition: background .4s var(--ease); }
.trait-table tbody tr:hover { background: rgba(29,74,68,.2); }
.sell-aside { background: color-mix(in srgb, var(--void-2) 85%, transparent);
  border: 1px solid rgba(63,90,80,.4); border-radius: 12px; padding: 1.2rem; }
.sell-form { display: grid; gap: 10px; margin-top: 1rem; }

@media (max-width: 960px) {
  .forge-grid { grid-template-columns: 1fr; }
  .plate-list { grid-template-columns: repeat(4, 1fr); max-height: none; }
  .bench { grid-template-columns: 1fr; }
  .specimen-plate { max-width: 320px; }
  .trait-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .app-page { padding-top: 150px; }
  .articles li { grid-template-columns: 46px minmax(0, 1fr); column-gap: 16px; }
  .pegs-wrap { grid-template-columns: 1fr; gap: 1.6rem; }
  .crowd-row { gap: 8px; }
  .crowd-fig svg { width: 26px; height: 26px; }
  .inspect { max-width: 340px; }
  .articles .num { font-size: 1.2rem; padding-right: 14px; }
  .plate-list { grid-template-columns: repeat(3, 1fr); }
}

/* ── pixel field: cells of the checker come unstuck and drift up ───
   transform + opacity only, so the layer composites on the GPU. */
.pixels { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.px { position: absolute; display: block; background: var(--mint); opacity: 0;
  animation: pxdrift var(--d, 24s) linear var(--dl, 0s) infinite,
             pxflicker var(--flk, 4s) ease-in-out var(--dl, 0s) infinite; }
@keyframes pxdrift {
  0%   { transform: translate(0, 40vh); }
  100% { transform: translate(var(--sway, 0px), -70vh); }
}
@keyframes pxflicker {
  0%, 100% { opacity: calc(var(--a, .3) * .25); }
  50%      { opacity: var(--a, .3); }
}
@media (prefers-reduced-motion: reduce) {
  .px { animation: none; opacity: calc(var(--a, .3) * .5); }
}