/* Evolving Brokers — cinematic scroll site.
 * Palette lifted from the art: office navy, phosphor green, brass, alarm red.
 */
:root {
  --bg: #06080f;
  --panel: #10141f;
  --line: #1f2438;
  --ink: #d4d8e6;
  --dim: #7d849c;
  --green: #4fd67a;
  --amber: #f0b24a;
  --red: #d9564f;
  /* the content column grows with the display instead of sitting in a
     1180 px lane on every screen from a laptop to an ultrawide */
  --max: clamp(1180px, 76vw, 1760px);
  --pad: max(24px, calc((100vw - var(--max)) / 2));
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.7 "IBM Plex Mono", ui-monospace, Consolas, monospace;
  overflow-x: hidden;
}
img { image-rendering: pixelated; }
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: "Space Grotesk", sans-serif; font-weight: 700; letter-spacing: -.01em; }
.green { color: var(--green); }
.amber { color: var(--amber); }
.kicker {
  margin: 0 0 16px; color: var(--green); font-size: 12px;
  letter-spacing: .28em; text-transform: uppercase;
}
.note { color: var(--dim); font-size: 12.5px; }

/* ------------------------------------------------------------- loader -- */
#loader {
  position: fixed; inset: 0; z-index: 100; background: var(--bg);
  display: grid; place-items: center;
  transition: opacity .6s ease, visibility .6s;
}
#loader.done { opacity: 0; visibility: hidden; }
.boot { width: min(420px, 80vw); font-size: 13px; letter-spacing: .12em; }
.boot-line { margin-bottom: 14px; }
.boot-bar { height: 4px; background: var(--line); overflow: hidden; }
.boot-bar i { display: block; height: 100%; width: 0; background: var(--green); transition: width .2s; }
.boot-pct { margin-top: 10px; color: var(--dim); text-align: right; }

/* ---------------------------------------------------------- atmosphere -- */
#fx-grain {
  position: fixed; inset: -100px; z-index: 90; pointer-events: none;
  opacity: .07; mix-blend-mode: overlay;
}
/* scanlines belong to the pixel half of the story: over the live-action
   footage they just read as a damaged tape, so they stay off until the CRT
   powers up and the world turns into a screen */
#fx-scan {
  position: fixed; inset: 0; z-index: 89; pointer-events: none; opacity: 0;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #00000026 3px 4px);
  transition: opacity .9s ease;
}
body.crt #fx-scan { opacity: .5; }
body::after { /* vignette */
  content: ""; position: fixed; inset: 0; z-index: 88; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 55%, #000000aa 100%);
}

/* ---------------------------------------------------------------- nav -- */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: flex; align-items: center; gap: 26px;
  padding: 14px var(--pad);
  background: linear-gradient(#06080fe6, #06080f00);
  transform: translateY(-110%); transition: transform .5s ease;
  font-size: 13px; letter-spacing: .06em;
}
#nav.on { transform: none; }
#nav .brand { color: var(--ink); font-weight: 600; letter-spacing: .14em; }
#nav nav { display: flex; gap: 22px; margin-left: auto; }
#nav nav a { color: var(--dim); }
#nav nav a:hover { color: var(--ink); text-decoration: none; }
.btn {
  display: inline-block; padding: 8px 16px;
  border: 1px solid var(--line); color: var(--ink); white-space: nowrap;
}
.btn:hover { border-color: var(--green); color: var(--green); text-decoration: none; }

/* ----------------------------------------------------- pinned sections -- */
.pinwrap { position: relative; height: 100vh; height: 100dvh; overflow: hidden; }
.pinwrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ═══ act I · tower ═══ */
#act-tower { background: #04050b; }
html.no-scroll, html.no-scroll body { overflow: hidden; }

/* Rules the smooth-scroll library keeps in its own stylesheet, which this page
 * does not load. They only bite when it is actually running. */
html.lenis, html.lenis body { height: auto; }
html.lenis-smooth { scroll-behavior: auto !important; }
html.lenis-scrolling iframe { pointer-events: none; }

#intro-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: none; z-index: 5;
}
#intro-skip {
  position: absolute; right: 28px; bottom: 26px; z-index: 6;
  padding: 8px 16px; background: #04050b99; border: 1px solid var(--line);
  color: var(--dim); font: 11px "IBM Plex Mono", monospace;
  letter-spacing: .22em; cursor: pointer; display: none;
}
#intro-skip:hover { color: var(--green); border-color: var(--green); }
.intro-cue {
  position: absolute; left: 50%; bottom: 5vh; transform: translateX(-50%);
  z-index: 6; flex-direction: column; opacity: 0; visibility: hidden;
}
.tower-copy {
  position: absolute; left: var(--pad); top: 50%; transform: translateY(-50%);
  z-index: 3; max-width: 560px;
}
/* The flight passes through bright daylight — pale sky, glass, sunlit stone —
 * and pale text on top of it simply disappears. Rather than darken the whole
 * shot, each block of copy carries its own shadow: a soft ellipse of night
 * that sits under the words, wide enough to cover them and blurred enough
 * that nobody reads it as a box. The tower keeps its light. */
.tower-copy::before {
  content: ""; position: absolute; z-index: -1;
  /* the box is far larger than the words so the ellipse has room to reach
     nothing before it meets an edge — clipped, it draws a visible seam */
  left: -60%; right: -80%; top: -90%; bottom: -90%;
  background: radial-gradient(closest-side ellipse at 40% 50%,
    rgba(3, 5, 11, .92) 0%, rgba(3, 5, 11, .82) 34%,
    rgba(3, 5, 11, .46) 58%, rgba(3, 5, 11, .16) 76%, rgba(3, 5, 11, 0) 92%);
  pointer-events: none;
}
.tower-copy.right::before { left: -80%; right: -60%;
  background: radial-gradient(closest-side ellipse at 60% 50%,
    rgba(3, 5, 11, .92) 0%, rgba(3, 5, 11, .82) 34%,
    rgba(3, 5, 11, .46) 58%, rgba(3, 5, 11, .16) 76%, rgba(3, 5, 11, 0) 92%); }
/* and a little weight in the letters themselves, for the brightest frames */
.tower-copy h1, .tower-copy h2 { text-shadow: 0 2px 26px rgba(0, 0, 0, .7); }
.tower-copy .kicker, .tower-copy .lede,
.tower-copy .scroll-cue { text-shadow: 0 1px 14px rgba(0, 0, 0, .85); }
.tower-copy .lede { color: #b9c0d2; }
.tower-copy.right { left: auto; right: var(--pad); text-align: right; }
.tower-copy h1 { margin: 0 0 22px; font-size: clamp(42px, 6vw, 84px); line-height: 1.02; }
.tower-copy h1 em { color: var(--amber); font-style: normal; }
.tower-copy h2 { margin: 0; font-size: clamp(30px, 4vw, 54px); }
.lede { color: var(--dim); font-size: 16px; margin: 0; }
.scroll-cue {
  margin-top: 44px; display: flex; align-items: center; gap: 14px;
  color: var(--dim); font-size: 11px; letter-spacing: .34em;
}
.scroll-cue span {
  display: block; width: 1px; height: 46px; background: var(--dim);
  animation: cue 1.6s ease-in-out infinite; transform-origin: top;
}
@keyframes cue { 0%,100% { transform: scaleY(.3); opacity:.4 } 50% { transform: scaleY(1); opacity:1 } }

/* ═══ act II · office rig ═══ */
#act-office { background: #04050b; }
#rig-perspective {
  position: absolute; inset: 0; perspective: 900px; perspective-origin: 50% 50%;
}
#rig { position: absolute; inset: 0; transform-style: preserve-3d; }
.rig-layer {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.rig-layer img { display: block; width: 100%; height: 100%; object-fit: cover; }
.office-copy {
  position: absolute; left: var(--pad); bottom: 12vh; z-index: 5; max-width: 520px;
  text-shadow: 0 2px 30px #000;
}
.office-copy h2 { margin: 0 0 18px; font-size: clamp(32px, 4.6vw, 62px); line-height: 1.04; }

/* ═══ act III · morph ═══ */
#act-morph { background: #04050b; }
#morph-canvas { z-index: 1; }
#morph-stage {
  position: absolute; inset: 0; z-index: 3;
  transform-style: preserve-3d; will-change: transform;
}
.morph-hud {
  position: absolute; bottom: 30px; left: var(--pad); z-index: 6;
  font-size: 12px; letter-spacing: .18em; line-height: 2;
}
.hud-row b { color: var(--amber); }
.hud-row.dim { color: var(--dim); }
.morph-copy {
  position: absolute; right: var(--pad); top: 50%; transform: translateY(-50%);
  z-index: 6; text-align: left; max-width: 470px; text-shadow: 0 2px 30px #000;
}
.morph-copy h2 { margin: 0 0 18px; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.06; }
.morph-copy .lede { margin-bottom: 26px; }
.morph-tag {
  position: absolute; left: 50%; bottom: 8vh; transform: translateX(-50%);
  z-index: 4; padding: 10px 18px; background: #04050bd9; border: 1px solid var(--line);
  font-size: 12px; letter-spacing: .16em; white-space: nowrap; opacity: 0;
}

/* ═══ act IV · the office — building cross-section ═══ */
#act-stages { background: var(--bg); }
.phase-bar {
  display: flex; gap: 10px; flex-wrap: wrap; margin: 26px 0 30px;
}
.phase-bar button {
  padding: 10px 18px; background: var(--panel); border: 1px solid var(--line);
  color: var(--dim); font: 12px "IBM Plex Mono", monospace;
  letter-spacing: .14em; cursor: pointer; transition: all .25s;
}
.phase-bar button b { display: block; color: var(--ink); font-size: 14px; letter-spacing: .06em; }
.phase-bar button:hover { border-color: var(--dim); }
.phase-bar button.on {
  border-color: var(--green); background: #4fd67a12; color: var(--green);
}
.phase-bar button.on b { color: var(--green); }

#building-wrap { perspective: 1400px; }
#building {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 12px;
  padding: 26px 20px 20px;
  background:
    repeating-linear-gradient(0deg, #1c2136 0 3px, #12162a 3px 6px),
    #12162a;
  border: 12px solid #1a1f33; border-top-width: 26px; border-radius: 4px;
  box-shadow: 0 40px 120px #000d, inset 0 0 60px #00000088;
  transform-style: preserve-3d; will-change: transform;
  position: relative;
}
#building::before { /* roof antenna light */
  content: ""; position: absolute; top: -34px; left: 50%; width: 6px; height: 6px;
  border-radius: 50%; background: var(--red);
  box-shadow: 0 0 12px var(--red); animation: blink 2.4s infinite;
}
@keyframes blink { 0%,100% { opacity: 1 } 50% { opacity: .2 } }
#building .room {
  position: relative; aspect-ratio: 1; background: #05070d; overflow: hidden;
  border: 1px solid #262c48; cursor: pointer;
  box-shadow: inset 0 0 34px #000c;
  transition: box-shadow .35s;
}
#building .room img {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  transition: opacity .45s;
}
#building .room.empty img { opacity: 0; }
/* dimming is a flat overlay, not a CSS filter — a filter over an animated
   image forces a full recomposite on every frame and eats the frame rate */
#building .room .dim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: #05070d; opacity: .42; transition: opacity .45s;
}
#building .room.live .dim { opacity: 0; }
#building .room.live { box-shadow: inset 0 0 18px #0008, 0 0 30px #4fd67a26; }

/* venetian blinds: half-tilted by default so the room still shows through,
   swinging open from the slat the cursor points at */
#building .room .blinds {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
}
#building .room .blinds i {
  position: absolute; left: -2%; width: 104%;
  height: calc(100% / 10 + 1px);
  transform-origin: 50% 0%;
  /* tilting is faked with scaleY: at the near-orthographic lens this
     screen used, a real rotateX looks the same and costs a 3D context
     per room plus a composited layer per slat */
  /* the drop shadow and the highlight are painted into the gradient: a real
     box-shadow on 90 slats costs more than everything else on this screen,
     and will-change would promote every one of them to its own GPU layer */
  background:
    linear-gradient(180deg, #46527d 0 1px, #333c5c 1px, #212843 40%,
                    #151b2e 76%, #0b0f1a 96%, #00000066 100%);
}
#building .room .rail {
  position: absolute; left: 0; right: 0; top: 0; height: 7px; z-index: 3;
  background: linear-gradient(180deg, #38416a, #1a2033);
  border-bottom: 1px solid #0a0e18; pointer-events: none;
}
#building .room .rlabel {
  position: absolute; left: 6px; bottom: 5px; z-index: 2;
  padding: 1px 7px; background: #000c; font-size: 10px;
  letter-spacing: .1em; color: var(--dim); pointer-events: none;
}
#building .room.live .rlabel { color: var(--green); }
#dock-flier {
  position: fixed; left: 0; top: 0; z-index: 40; display: none;
  pointer-events: none; image-rendering: pixelated;
  transform-origin: 0 0; will-change: transform;
  filter: drop-shadow(0 0 22px #4fd67a55);
}
#building .room .roomfx {
  position: absolute; inset: 0; z-index: 3; opacity: 0;
  mix-blend-mode: screen; pointer-events: none;
}
/* deals keep closing behind drawn blinds, so the pop has to sit above
   every slat — it is the one thing you must see from the outside */
.deal-pop {
  position: absolute; left: 50%; top: 46%; transform: translateX(-50%);
  z-index: 8; padding: 4px 12px; background: #04140aee;
  border: 1px solid var(--green); color: var(--green);
  font-size: 12px; font-weight: 600; letter-spacing: .16em; white-space: nowrap;
  pointer-events: none; box-shadow: 0 0 22px #4fd67a55, 0 4px 14px #000a;
  text-shadow: 0 0 10px #4fd67a99;
}
#building-wrap { position: relative; }
#market-banner {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  z-index: 10; padding: 14px 34px; opacity: 0; pointer-events: none;
  font: 700 clamp(22px, 2.6vw, 34px) "Space Grotesk", sans-serif;
  letter-spacing: .1em; border: 2px solid; background: #04050bee;
}


.building-base {
  display: flex; justify-content: space-between; align-items: center;
  margin: 0 6px; padding: 12px 20px;
  background: #1a1f33; border-radius: 0 0 6px 6px;
  font-size: 11px; letter-spacing: .22em; color: var(--dim);
}
.deal-count-inline b { color: var(--green); font-size: 14px; }
.stage-flash { display: none; }
.deal-count {
  display: inline-block; margin-bottom: 22px; padding: 8px 16px;
  border: 1px solid var(--line); background: var(--panel);
  font-size: 12px; letter-spacing: .2em;
}
.deal-count b { color: var(--green); font-size: 16px; margin-left: 10px; }
#ladder { list-style: none; margin: 0 0 24px; padding: 0; }
#ladder li {
  display: flex; align-items: baseline; gap: 14px;
  padding: 11px 14px; border-left: 2px solid var(--line);
  color: var(--dim); font-size: 14px; transition: all .3s;
}
#ladder li .st-num { font-size: 11px; letter-spacing: .2em; }
#ladder li .st-name { font-family: "Space Grotesk", sans-serif; font-weight: 500; font-size: 17px; }
#ladder li .st-req { margin-left: auto; font-size: 11.5px; letter-spacing: .1em; }
#ladder li.past { color: var(--ink); border-color: #2c4436; }
#ladder li.now {
  color: var(--ink); border-color: var(--green); background: #4fd67a0d;
}
#ladder li.now .st-name { color: var(--green); }

/* ═══ act V · floor + bands ═══ */
.band { position: relative; z-index: 2; padding: 110px var(--pad); background: var(--bg); }
.band.narrow > * { max-width: 76ch; }
.band h2 { margin: 0 0 10px; font-size: 26px; }
.band h2.xl { font-size: clamp(34px, 4.4vw, 58px); margin-bottom: 16px; }
.sub { margin: 0 0 40px; color: var(--dim); max-width: 66ch; }

.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px; perspective: 1200px;
}
.card {
  background: var(--panel); border: 1px solid var(--line); padding: 10px;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.card:hover {
  transform: translateY(-6px); border-color: var(--green);
  box-shadow: 0 14px 50px #000a, 0 0 30px #4fd67a1c;
}
.card img { width: 100%; display: block; background: #000; }
.card .id { margin-top: 9px; color: var(--amber); font-size: 12px; letter-spacing: .1em; }
.card .tr { color: var(--dim); font-size: 11px; line-height: 1.5; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
.step { padding: 26px; background: var(--panel); border: 1px solid var(--line); }
.step .num { color: var(--green); font-size: 13px; letter-spacing: .2em; }
.step h3 { margin: 12px 0 10px; font-size: 18px; }
.step p { margin: 0; color: var(--dim); font-size: 14px; }

.hash {
  margin: 22px 0 0; padding: 16px 18px; overflow-x: auto;
  background: var(--panel); border: 1px solid var(--line);
  color: var(--green); font-size: 13px;
}
details { border-top: 1px solid var(--line); padding: 4px 0; }
details:last-child { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; padding: 16px 0; font-weight: 500; }
summary:hover { color: var(--green); }
details p { margin: 0 0 18px; color: var(--dim); }

footer {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 40px var(--pad); border-top: 1px solid var(--line);
  color: var(--dim); font-size: 12.5px; letter-spacing: .1em;
  position: relative; z-index: 2; background: var(--bg);
}
footer p { margin: 0; margin-left: auto; }

/* ------------------------------------------------------------- mobile -- */
@media (max-width: 940px) {
  #nav nav { display: none; }
  .tower-copy { max-width: 86vw; }
  /* On a phone the words run nearly the full width, so a soft ellipse behind
     them cannot cover the line — it leaves the ends sitting on bright glass.
     Here the shade spans the screen instead, a band of night the copy lies
     on, still fading top and bottom so the flight is not boxed in. */
  .tower-copy::before, .tower-copy.right::before {
    left: -50vw; right: -50vw; top: -34%; bottom: -34%;
    /* A phone screen is already dim and close to the eye — the copy reads
       here without much help, and a heavy shade only hides the flight. Just
       enough to lift the letters off the glass. */
    background: linear-gradient(to bottom,
      rgba(3, 5, 11, 0) 0%, rgba(3, 5, 11, .30) 14%, rgba(3, 5, 11, .52) 34%,
      rgba(3, 5, 11, .55) 50%, rgba(3, 5, 11, .52) 66%, rgba(3, 5, 11, .30) 86%,
      rgba(3, 5, 11, 0) 100%);
  }
  .tower-copy h1, .tower-copy h2 { text-shadow: 0 2px 18px rgba(0, 0, 0, .92); }
  .tower-copy .kicker, .tower-copy .lede,
  .tower-copy .scroll-cue { text-shadow: 0 1px 10px rgba(0, 0, 0, .95); }
  #building { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .morph-copy { right: var(--pad); left: var(--pad); max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue span { animation: none; }
}

#leanin-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 4;
}

.rig-layer .eyes {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none; image-rendering: auto;
}

#leanin-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; z-index: 4;
}

/* the rotoscoped broker: a live layer, so the office can peel around him */
.rig-layer .matte-canvas,
#act-office .matte-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none;
}

/* ── the office is a real building ─────────────────────────────────────── */
#building.facade {
  display: block; position: relative;
  padding: 0; border: 0; border-radius: 0;
  background: #0a0d16 center/100% 100% no-repeat;
  box-shadow: 0 50px 140px #000e;
}
#building.facade::before { display: none; }
#building.facade .room {
  position: absolute; aspect-ratio: auto;
  border: 0; box-shadow: inset 0 0 30px #000, inset 0 2px 10px #000;
}
/* the openings are twice as wide as they are tall while the artwork is
   square, so the crop is biased upward to keep the broker's head and his
   desk inside the glass */
#building.facade .room img { object-fit: cover; object-position: 50% 42%; }
#building.facade .room.live {
  box-shadow: inset 0 0 24px #0009, 0 0 34px #4fd67a26;
}
#building.facade .room .rlabel { bottom: 3px; left: 3px; font-size: 9px; }

/* ── the tape: the rules, printed forever ───────────────────── */
#loop { background: #04050b; }
.tape-wrap { position: relative; height: 100vh; height: 100dvh; overflow: hidden; }
#tape-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tape-copy {
  position: absolute; right: var(--pad); top: 50%; transform: translateY(-50%);
  z-index: 3; max-width: 40ch; text-align: right;
  text-shadow: 0 2px 40px #000;
}
.tape-copy h2 { margin: 0 0 18px; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.06; }
.tape-copy .lede { margin-left: auto; }

@media (max-width: 940px) {
  .tape-copy { right: var(--pad); left: var(--pad); top: 6%; transform: none;
    text-align: left; max-width: none; }
  .tape-copy .lede { display: none; }
}

.rules { margin: 26px 0 0; }
.rules dt {
  margin-top: 18px; color: var(--green); font-size: 12px; letter-spacing: .2em;
}
.rules dd { margin: 4px 0 0; color: var(--dim); }

#tape-pause {
  position: absolute; left: var(--pad); bottom: 34px; z-index: 4;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px; cursor: pointer;
  background: #0a0f1ccc; border: 1px solid var(--line); color: var(--dim);
  font: 11px "IBM Plex Mono", monospace; letter-spacing: .22em;
  backdrop-filter: blur(6px); transition: color .2s, border-color .2s;
}
#tape-pause:hover { color: var(--ink); border-color: var(--dim); }
#tape-pause.paused { color: var(--green); border-color: var(--green); }
#tape-pause .ic {
  width: 10px; height: 12px; display: block;
  border-left: 3px solid currentColor; border-right: 3px solid currentColor;
}
#tape-pause.paused .ic {
  border: 0; width: 0; height: 0;
  border-left: 10px solid currentColor;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}

footer a { color: var(--dim); letter-spacing: .14em; }
footer a:hover { color: var(--green); }

/* ── mint: the hiring register ─────────────────────────────────────────── */
.hire {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: 3vw; align-items: start; margin-top: 34px;
}
.hire-board { border: 1px solid var(--line); background: var(--panel); }
.board-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px; border-bottom: 1px solid var(--line);
  font-size: 11px; letter-spacing: .22em; color: var(--dim);
}
.board-head b { margin-left: auto; color: var(--amber); }
.board-rows { margin: 0; padding: 6px 20px 14px; }
.board-rows > div {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.board-rows > div:last-child { border-bottom: 0; }
.board-rows dt { color: var(--dim); font-size: 12px; letter-spacing: .16em; }
.board-rows dd { margin: 0; color: var(--ink); font-size: 15px; }
.board-bar {
  position: relative; margin: 0 20px 20px; height: 34px;
  background: #0a0e18; border: 1px solid var(--line); overflow: hidden;
}
.board-bar i {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: repeating-linear-gradient(90deg, #4fd67a 0 6px, #43c06c 6px 10px);
}
.board-bar span {
  position: relative; display: block; line-height: 34px; padding-left: 14px;
  font-size: 11px; letter-spacing: .18em; color: var(--dim);
}
.board-bar b { color: var(--ink); }

.hire-act { display: flex; flex-direction: column; gap: 16px; }
.qty { display: flex; align-items: stretch; border: 1px solid var(--line); }
.qty button {
  width: 56px; background: var(--panel); border: 0; color: var(--ink);
  font-size: 20px; cursor: pointer;
}
.qty button:hover { background: #182034; }
.qty b {
  flex: 1; display: grid; place-items: center;
  background: #0a0e18; font-size: 20px; letter-spacing: .1em;
}
.claim-btn.wide { justify-content: space-between; width: 100%; }
.claim-btn[disabled] { background: var(--panel); color: var(--dim); cursor: not-allowed; }
.claim-btn[disabled] b { color: var(--dim); }

/* ── your desk ─────────────────────────────────────────────────────────── */
.desk-panel { margin-top: 34px; border: 1px solid var(--line); background: var(--panel); }
.desk-top {
  display: grid; grid-template-columns: auto 1fr auto; gap: 26px;
  align-items: center; padding: 20px; border-bottom: 1px solid var(--line);
}
.plate {
  padding: 12px 22px; background: linear-gradient(#3a2c18, #22190d);
  border: 1px solid #5a4526; color: #e6c98d;
  font-size: 13px; letter-spacing: .22em; white-space: nowrap;
}
.desk-stats { display: flex; gap: 34px; flex-wrap: wrap; }
.desk-stats div { display: flex; flex-direction: column; }
.desk-stats span { color: var(--dim); font-size: 11px; letter-spacing: .16em; }
.desk-stats b { font-size: 19px; }
.desk-empty { margin: 0; padding: 34px 20px; color: var(--dim); max-width: 64ch; }
.desk-list { list-style: none; margin: 0; padding: 0; }
.desk-row {
  display: grid; grid-template-columns: 64px 96px 1fr 130px 132px;
  gap: 18px; align-items: center;
  padding: 12px 20px; border-bottom: 1px solid var(--line);
}
.desk-row img { width: 64px; height: 64px; display: block; background: #000; border: 1px solid var(--line); }
.desk-row .id { color: var(--amber); font-size: 13px; letter-spacing: .1em; }
.desk-row .st { font-size: 13px; }
.desk-row .st i { display: block; font-style: normal; color: var(--dim); font-size: 11px; letter-spacing: .14em; }
.desk-row .cd { text-align: right; font-size: 12px; color: var(--dim); letter-spacing: .12em; }
.desk-row .cd.ready { color: var(--green); }
.desk-row button {
  padding: 11px 0; width: 100%; cursor: pointer;
  background: var(--green); border: 0; color: #071409;
  font: 600 11px "IBM Plex Mono", monospace; letter-spacing: .2em;
}
.desk-row button:hover { background: #6ae493; }
.desk-row button[disabled] { background: #141a28; color: var(--dim); cursor: not-allowed; }
.desk-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 18px 20px;
}
.desk-foot .claim-btn { padding: 12px 22px; }

@media (max-width: 940px) {
  .hire, .desk-top { grid-template-columns: 1fr; }
  .desk-row { grid-template-columns: 48px 1fr 110px; }
  .desk-row img { width: 48px; height: 48px; }
  .desk-row .st, .desk-row .cd { display: none; }
}

/* the primary action across mint and the desk */
.claim-btn {
  display: flex; align-items: baseline; gap: 18px;
  padding: 15px 26px; cursor: pointer;
  background: var(--green); border: 0; color: #071409;
  font: 600 11px "IBM Plex Mono", monospace; letter-spacing: .2em;
  transition: background .2s, transform .1s;
}
.claim-btn b { font-size: 17px; letter-spacing: .24em; }
.claim-btn:hover { background: #6ae493; }
.claim-btn:active { transform: translateY(1px); }
.claim-btn.cooling,
.claim-btn[disabled] {
  background: var(--panel); color: var(--dim); cursor: default;
  box-shadow: inset 0 0 0 1px var(--line);
}
.claim-btn.cooling b, .claim-btn[disabled] b { color: var(--dim); }

/* nav on the sub-pages */
#nav nav a.here { color: var(--green); }

.band.page-top { padding-top: 56px; }

/* ═══ responsive ═══════════════════════════════════════════════════════ */
/* The cinematic acts are 16:9. On a tall phone a straight "cover" blows the
   frame up nearly fourfold and crops him to a nose, so portrait gets a
   gentler scale and the composition survives. */
:root { --scene-w: max(100vw, 177.8vh); --scene-h: max(56.25vw, 100vh); }
@media (max-aspect-ratio: 4/5) {
  :root { --scene-w: 168vw; --scene-h: 94.5vw; }
}
@media (max-aspect-ratio: 4/5) and (min-width: 700px) {
  :root { --scene-w: 132vw; --scene-h: 74.25vw; }
}

/* the tape section on a phone: copy first, then the roll */
@media (max-width: 940px) {
  /* the roll gets the screen; the heading sits above it in normal flow so it
     cannot end up under the nav or printed over the paper */
  .tape-wrap {
    height: auto; min-height: 88vh; min-height: 88dvh;
    display: flex; flex-direction: column;
  }
  .tape-copy {
    position: static; transform: none; text-align: left; max-width: none;
    padding: 26px var(--pad) 14px; z-index: 5; order: -1;
  }
  .tape-copy h2 { font-size: clamp(22px, 6.4vw, 34px); margin-bottom: 0; }
  .tape-copy .kicker { margin-bottom: 8px; }
  .tape-copy .lede { display: none; }
  #tape-cv { position: relative; inset: auto; flex: 1 1 auto; min-height: 62vh; }
  #tape-pause { position: sticky; left: auto; bottom: 16px;
    align-self: center; transform: none; margin: -58px 0 14px; }
}

/* the collection reads better two-up than as one endless column */
@media (max-width: 720px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .card { padding: 6px; }
  .card .tr { display: none; }
  .band { padding: 72px var(--pad); }
  .band h2.xl { font-size: clamp(28px, 8vw, 42px); }
  .sub { margin-bottom: 26px; }
}

/* nav: the links become a scrollable strip instead of vanishing */
@media (max-width: 940px) {
  #nav { gap: 12px; padding: 10px var(--pad); flex-wrap: nowrap; }
  #nav .brand { font-size: 11px; letter-spacing: .1em; }
  #nav nav {
    display: flex; gap: 16px; margin-left: auto; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    mask-image: linear-gradient(90deg, transparent, #000 12px, #000 88%, transparent);
  }
  #nav nav::-webkit-scrollbar { display: none; }
  #nav nav a { font-size: 11.5px; white-space: nowrap; }
  #nav .btn.ghost { display: none; }
}
@media (max-width: 520px) {
  #nav .brand span { display: none; }
}

/* the reveal HUD sat on top of the scroll cue on short screens */
@media (max-width: 940px) {
  .morph-hud { bottom: 64px; font-size: 10.5px; letter-spacing: .14em; }
  /* The plate under him is one long line of type. Held on a single line it
     runs off both edges of a phone, so here it is allowed to wrap and is
     bounded by the screen rather than by its own contents. */
  .morph-tag {
    bottom: 12vh; font-size: 10px; letter-spacing: .1em; padding: 8px 12px;
    white-space: normal; text-align: center; line-height: 1.7;
    max-width: min(90vw, 460px);
  }
  .office-copy { bottom: 16vh; }
  .office-copy h2 { font-size: clamp(24px, 7vw, 40px); }
}

/* phase bar and building on small screens */
@media (max-width: 720px) {
  .phase-bar { gap: 6px; margin: 20px 0 22px; overflow-x: auto; flex-wrap: nowrap;
    scrollbar-width: none; }
  .phase-bar::-webkit-scrollbar { display: none; }
  .phase-bar button { padding: 8px 12px; font-size: 10px; letter-spacing: .1em; white-space: nowrap; }
  .phase-bar button b { font-size: 12px; }
  #building.facade .room .rlabel { display: none; }
  .building-base { font-size: 9px; letter-spacing: .12em; padding: 9px 12px; }
  #market-banner { font-size: clamp(16px, 5.2vw, 26px); padding: 10px 20px; }
}

/* ── screens that are wide but short ───────────────────────────────────── */
/* A 1280x600 laptop has to fit the same building as a 1440p monitor, so the
   facade is capped by the height it actually has rather than by the column. */
#building.facade {
  max-width: min(100%, calc((100vh - 210px) * 1.78));
  margin: 0 auto;
}
@media (min-height: 900px) {
  #building.facade { max-width: 100%; }
}

/* big type is driven by both dimensions: 8vw on a short laptop is a headline
   that eats the screen */
.band h2.xl { font-size: clamp(30px, min(4.4vw, 7.2vh), 62px); }
.tower-copy h1 { font-size: clamp(34px, min(6vw, 10vh), 88px); }
.office-copy h2, .morph-copy h2, .tape-copy h2 {
  font-size: clamp(24px, min(3.6vw, 6vh), 50px);
}

/* on a very wide screen the reading column should not become a paragraph
   stretched across a metre of glass */
.band.narrow > *, .sub, .lede { max-width: 74ch; }
.rules dd { max-width: 70ch; }

@media (min-width: 2200px) {
  body { font-size: 16px; }
  .desk-stats b, .board-rows dd { font-size: 17px; }
}

/* short viewports: give the pinned copy room and pull the HUD in */
@media (max-height: 700px) {
  .office-copy { bottom: 9vh; }
  .office-copy .lede { display: none; }
  .morph-hud { bottom: 18px; }
  .morph-tag { bottom: 6vh; }
  .band { padding: 74px var(--pad); }
}

/* short laptops: less air around the headings so the building still gets room */
@media (max-height: 760px) and (min-width: 940px) {
  .band { padding: 62px var(--pad); }
  .band .sub { margin-bottom: 22px; }
  .phase-bar { margin: 18px 0 20px; }
  .band h2.xl { margin-bottom: 10px; }
  .kicker { margin-bottom: 10px; }
}