/* THE CHARACTER SELECT (inv1, 2026-10-26)
   Five sheets, each standing in its own world's light, each carrying a live miniature of the bridge world it opens
   into. The copy is the star (D14): the name, then THE QUESTION (the loudest line after the name), then the headline.
   Every miniature is CSS keyframes only, and runs only while its sheet is in focus (.mini.is-live).
   No stat bars, levels, meters or HUD furniture anywhere (punch row 7). */

:root {
  --w-hunter: #65dbae;
  --w-architect: #4ddac7;
  --w-rainmaker: #e3be7a;
  --w-commander: #a3b7c3;
}

/* ---------- the section ---------- */
.select {
  position: relative;
  background: var(--void);
  color: var(--white);
  padding: clamp(80px, 13vh, 150px) 0 clamp(40px, 8vh, 90px);
  overflow: hidden;
  overflow: clip; /* clip, not hidden: hidden made this a scroll box, so the braid and its words never stuck and scrolled away under the revelation's fade (eye pass 10-26) */
}
/* inside the select, green belongs only to THE QUESTION's highlight (Port row 5); the other emphasis is white light */
.select .sig { color: var(--core); text-shadow: 0 0 26px rgb(248 253 250 / 0.28); }

/* the arrival's end (fix round 2026-10-26): the select rises over the last half screen of the arrival's night, so the
   arrival's final frame shows the select's first line and never a blank dark screen. Its top is see-through, so the
   night behind it carries on without a seam; the overlap stays in step with the arrival's tail (NIGHT ends at 10.75 of
   --len 11.3 in js/arrival.js: 0.55 screens). */
#recognition {
  margin-top: calc(-0.55 * var(--stage-h));
  background: linear-gradient(to bottom, rgb(2 6 5 / 0) 0, var(--void) 50vh);
}
/* desktop (eye pass inv1fix 10-26): at -55vh the arrival's last frame cut the row of five names in half at the bottom
   edge; rising a little further shows the heading, the line and the whole row */
@media (min-width: 900px) {
  #recognition { margin-top: calc(-0.64 * var(--stage-h)); }
}
.sel-intro { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }
.sel-intro .h2 { max-width: 14ch; }
.sel-job { margin-top: 26px; max-width: 44ch; color: var(--silver); }

/* ---------- the lineup: five names, each with its cord ---------- */
.lineup {
  max-width: 1320px;
  margin: clamp(36px, 6vh, 64px) auto 0;
  padding: 0 var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}
.lu {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 14px;
  border: 1px solid rgb(249 250 250 / 0.16);
  border-radius: 999px;
  color: var(--white);
  text-decoration: none;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.lu-cord { width: 18px; height: 3px; border-radius: 3px; background: var(--rc); box-shadow: 0 0 10px var(--rc); }
.lu:hover, .lu:focus-visible { border-color: var(--rc); background: rgb(249 250 250 / 0.04); box-shadow: 0 0 26px color-mix(in srgb, var(--rc) 30%, transparent); outline: none; }

/* ---------- one sheet ---------- */
.sheet-c {
  position: relative;
  /* three scenes stand inside it now (V 10-27 "two sections or three sections ... give it some breathing room"); the
     scenes carry the air, so the sheet's own padding is small */
  padding: 4vh var(--gutter) 2vh;
}
.sc-light {
  position: absolute;
  inset: -10% -20%;
  pointer-events: none;
  background: radial-gradient(42% 46% at 70% 50%, color-mix(in srgb, var(--rc) 24%, transparent), transparent 70%);
  opacity: 0.35;
  transition: opacity 0.6s ease;
}
.sheet-c.is-in .sc-light { opacity: 1; }

.sc-card {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
  padding-left: clamp(22px, 2.4vw, 40px);
}
.sc-world { grid-column: 2; grid-row: 1; }
.sc-words { grid-column: 1; grid-row: 1; min-width: 0; }
/* (the card no longer turns square, and the words no longer arrive all at once: see THE SCENES at the end of this file) */

/* the name, then THE QUESTION, then the headline (punch row 3) */
.sc-name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(56px, 7vw, 112px);
  line-height: 0.88;
  letter-spacing: -0.045em;
  margin: 0;
  color: var(--white);
  text-shadow: 0 0 60px color-mix(in srgb, var(--rc) 35%, transparent);
}
.sc-wild, .sc-label {
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--steel);
  margin: 22px 0 10px;
}
.sc-label { color: var(--rc); margin: 34px 0 12px; }
.sc-q {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(30px, 3.2vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.028em;
  margin: 0;
  max-width: 19ch;
  text-wrap: balance;
}
/* 2026-10-31: the band is a bottom-anchored 1.08em gradient, not the inline background. An inline background fills the
   font's whole content area (Space Grotesk 600: 0.99em ascent + 0.29em descent = 1.28em) while .sc-q's line-height is
   1.06em, so each band rose ~0.13em into the line above and painted over its g/y/p (founder 2026-10-31: "with highlights the
   letter 'g' is overlapped"). Band top now sits ~0.79em above the baseline: clear of the descenders above (0.86em) and
   above the caps (0.70em). The strip above the band gets the glow's own tint (0.16 = a 34px box-shadow's alpha at the box
   edge), else the outer glow, which is never painted inside the box, leaves a black stripe there. */
.qhl {
  background: linear-gradient(var(--neon), var(--neon)) no-repeat 0 100% / 100% 1.08em, linear-gradient(rgb(57 241 100 / 0.16), rgb(57 241 100 / 0.16));
  color: var(--ink);
  padding: 0 0.12em;
  margin: 0 -0.04em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  box-shadow: 0 0 34px rgb(57 241 100 / 0.32);
}
.sc-head {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(17px, 1.5vw, 23px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--rc);
  margin: 30px 0 8px;
}
.sc-sub { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.5; color: var(--silver); margin: 0; max-width: 46ch; }
.sc-voice {
  margin: 26px 0 0;
  padding: 2px 0 2px 18px;
  border-left: 2px solid var(--rc);
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(19px, 1.6vw, 25px);
  line-height: 1.28;
  letter-spacing: -0.012em;
  color: var(--white);
  max-width: 34ch;
}

/* the pills: a quiet row, far quieter than the name and the big line (punch row 1) */
.pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pills li {
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  padding: 7px 11px;
  border: 1px solid color-mix(in srgb, var(--rc) 45%, transparent);
  border-radius: 999px;
  color: var(--silver);
}
/* the Architect's pills pencil in, then colour once (Port row 4); colour ends it */
.pills--pencil li { border: 1px dashed rgb(145 150 147 / 0.7); color: var(--slate); transition: border-color 0.3s, color 0.3s, background 0.3s; }
.sheet-c.is-in .pills--pencil li { border-style: solid; border-color: var(--rc); color: var(--white); background: color-mix(in srgb, var(--rc) 10%, transparent); }
.sheet-c.is-in .pills--pencil li:nth-child(1) { transition-delay: 0.2s; }
.sheet-c.is-in .pills--pencil li:nth-child(2) { transition-delay: 0.26s; }
.sheet-c.is-in .pills--pencil li:nth-child(3) { transition-delay: 0.32s; }
.sheet-c.is-in .pills--pencil li:nth-child(4) { transition-delay: 0.38s; }

/* the cues */
.cues {
  margin: 30px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 28px;
  max-width: 640px;
}
.cues > div { min-width: 0; }
.cues dt { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.15em; color: var(--rc); margin: 0 0 6px; }
.cues dd { margin: 0; font-size: 15.5px; line-height: 1.48; color: var(--silver); }
.cues .cue-start { grid-column: 1 / -1; padding-top: 16px; border-top: 1px solid rgb(249 250 250 / 0.12); }
.cues .cue-start dd { color: var(--white); font-size: 17px; font-weight: 500; }
/* the Rainmaker's catch is printed soft, grey, whole and readable; never struck through (Port row 6) */
.cues .cue-soft dd { color: var(--steel); }

/* ---------- the cords: one thin edge down each sheet, its type's colour and texture (Port row 9) ---------- */
.sc-cord {
  position: absolute;
  left: 0;
  top: 4%;
  bottom: 4%;
  width: 2px;
  border-radius: 4px;
  opacity: 0.22;
  transition: opacity 0.4s ease, box-shadow 0.4s ease;
}
.sheet-c.is-in .sc-cord { opacity: 1; box-shadow: 0 0 16px color-mix(in srgb, var(--rc) 55%, transparent); }
.sc-cord--thread { width: 2px; background: var(--w-hunter); }
.sc-cord--cable {
  width: 5px;
  background: repeating-linear-gradient(180deg, var(--w-architect) 0 5px, #1f7f74 5px 7px);
}
.sc-cord--gold {
  width: 8px;
  background: repeating-linear-gradient(135deg, var(--gold-2) 0 4px, var(--gold-3) 4px 8px, var(--gold-4) 8px 11px);
}
.sc-cord--steel {
  width: 4px;
  background: repeating-linear-gradient(-55deg, #c9d6de 0 2px, var(--w-commander) 2px 4px, #5e6c74 4px 6px);
}

/* (the Commander's window frame, Port row 8, is gone: V 10-27 "wrapped in a box, like an actual folder box. The others
   aren't". All four sheets share one treatment.) */

/* ======================================================================================================
   THE MINIATURES. Keyframes only; paused unless .mini.is-live; contained so they never repaint the page.
   ====================================================================================================== */
.mini {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-left: auto;
  aspect-ratio: 5 / 4;
  /* un-boxed (V 10-27 "you put it inside a box. It's a static box"): no ring, no corner, no clip; the objects float on
     the dark stage over their faction's light (.sc-world::before) */
  contain: layout;
  isolation: isolate;
}
.mini, .mini * { animation-play-state: paused !important; }
.mini.is-live, .mini.is-live * { animation-play-state: running !important; }
.mini i, .mini b { display: block; }

/* ---- HUNTER: a reply wakes the phone on the desk; its light is the one thing that moves (V 10-26: phone + mug drawn) ---- */
.mini--hunter { background: #030807; }
.mh-pool {
  position: absolute; inset: 0;
  background: radial-gradient(38% 42% at 44% 60%, rgb(101 219 174 / 0.55), rgb(101 219 174 / 0.12) 55%, transparent 75%);
  opacity: 0.08;
  animation: mh-pool 7s ease-in-out infinite;
}
.mh-desk {
  position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
  background: linear-gradient(#0d1513, #070c0b);
  border-top: 1px solid rgb(101 219 174 / 0.08);
}
.mh-grain { position: absolute; inset: 0; background: repeating-linear-gradient(176deg, transparent 0 13px, rgb(255 255 255 / 0.018) 13px 14px); }
.mh-phone {
  position: absolute; left: 36%; top: 12%; /* inside .mh-desk (62% of the mini): 30% ran the tilted phone off the frame bottom */
  width: 18%; aspect-ratio: 9 / 18;
  border-radius: 14px;
  background: #0b0f0e;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), 0 18px 30px rgb(0 0 0 / 0.6);
  transform: rotate(-14deg) skewX(6deg);
  padding: 1.2%; /* % padding reads the MINI's width, not the phone's: 6% pushed the glass thin and the phone off the desk (eye pass 10-26) */
}
.mh-glass {
  position: relative; width: 100%; height: 100%;
  border-radius: 10px;
  background: #020403;
  overflow: hidden;
  animation: mh-glass 7s ease-in-out infinite;
}
.mh-clock { position: absolute; left: 22%; right: 22%; top: 14%; height: 9%; border-radius: 4px; background: rgb(240 255 248 / 0.5); opacity: 0; animation: mh-fade 7s ease-in-out infinite; }
.mh-note {
  position: absolute; left: 8%; right: 8%; top: 40%; height: 15%;
  border-radius: 6px;
  background: rgb(240 255 248 / 0.9);
  box-shadow: inset 4px 0 0 var(--w-hunter);
  opacity: 0; transform: translateY(-30%);
  animation: mh-note 7s ease-in-out infinite;
}
.mh-note--2 { top: 59%; animation-name: mh-note2; background: rgb(240 255 248 / 0.7); }
.mh-pad {
  position: absolute; right: 10%; top: 44%;
  width: 16%; aspect-ratio: 3 / 4;
  background: #e9ece6; border-radius: 3px;
  transform: rotate(7deg);
  padding: 3% 2%; /* % padding and margins read the MINI's width: 18% plus 20% line gaps stretched the pad past the frame (eye pass 10-26) */
  opacity: 0.32;
  animation: mh-lit 7s ease-in-out infinite;
}
.mh-pad i { height: 2px; margin-bottom: 3.2%; background: #7c8580; border-radius: 2px; }
.mh-pad i:nth-child(2) { width: 70%; }
.mh-mug {
  position: absolute; left: 8%; top: 46%;
  width: 15%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #1c120c 0 52%, #c9cfcb 54% 70%, #8d9590 72%);
  opacity: 0.4;
  animation: mh-lit 7s ease-in-out infinite;
}
.mh-rim { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.2); }
.mh-handle { position: absolute; right: -24%; top: 34%; width: 30%; height: 32%; border: 3px solid #a9b1ac; border-left: 0; border-radius: 0 50% 50% 0; }
.mh-steam {
  position: absolute; left: 36%; bottom: 70%;
  width: 3px; height: 55%; border-radius: 3px;
  background: linear-gradient(transparent, rgb(255 255 255 / 0.22), transparent);
  animation: mh-steam 3.4s ease-in-out infinite;
}
.mh-steam--2 { left: 58%; animation-delay: 1.6s; }

@keyframes mh-pool { 0%, 26% { opacity: 0.08; } 36%, 78% { opacity: 1; } 96%, 100% { opacity: 0.08; } }
@keyframes mh-glass { 0%, 26% { background: #020403; box-shadow: none; } 33%, 80% { background: #0e2a22; box-shadow: 0 0 40px rgb(101 219 174 / 0.6); } 95%, 100% { background: #020403; box-shadow: none; } }
@keyframes mh-fade { 0%, 28% { opacity: 0; } 34%, 80% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes mh-note { 0%, 30% { opacity: 0; transform: translateY(-30%); } 36%, 80% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes mh-note2 { 0%, 50% { opacity: 0; transform: translateY(-30%); } 56%, 80% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes mh-lit { 0%, 28% { opacity: 0.32; } 38%, 80% { opacity: 0.85; } 96%, 100% { opacity: 0.32; } }
@keyframes mh-steam { 0% { opacity: 0; transform: translateY(20%) scaleY(0.8); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-40%) scaleY(1.1); } }

/* ---- ARCHITECT: the plan pencils in, inks, then fills with real colour; colour ends it (Port row 4) ---- */
.mini--architect { background: radial-gradient(70% 70% at 50% 40%, #0b2523, #041110); }
.ma-set { position: absolute; inset: 11% 9% 13%; }
.ma-sheet { position: absolute; inset: 0; border-radius: 6px; background: #0d1d1c; box-shadow: 0 0 0 1px rgb(77 218 199 / 0.12); }
.ma-sheet--3 { transform: translate(14px, 14px) rotate(2.5deg); opacity: 0.5; }
.ma-sheet--2 { transform: translate(7px, 7px) rotate(1.2deg); opacity: 0.75; }
.ma-sheet--1 { background: #f2f6f4; padding: 5%; box-shadow: 0 20px 50px rgb(0 0 0 / 0.5); }
.ma-draw { width: 100%; height: 100%; display: block; overflow: visible; }
.ma-draw path { fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linecap: round; }
.ma-pencil path { stroke: #9aa29e; stroke-width: 1.2; animation: ma-draw 9s ease-in-out infinite; }
.ma-ink path { stroke: #0f6f66; stroke-width: 2.2; animation: ma-ink 9s ease-in-out infinite; }
.ma-fill rect { opacity: 0; animation: ma-fill 9s ease-in-out infinite; }
.ma-fill rect:nth-child(1) { fill: #4ddac7; }
.ma-fill rect:nth-child(2) { fill: #07100e; animation-delay: 0.15s; }
.ma-fill rect:nth-child(3) { fill: #c8f1ea; animation-delay: 0.3s; }
.ma-fill rect:nth-child(4) { fill: #65dbae; animation-delay: 0.45s; }
.ma-pen {
  position: absolute; width: 5px; height: 26%; border-radius: 3px;
  background: linear-gradient(#2a3532 0 82%, #4ddac7 82%);
  left: 12%; top: 6%;
  transform: rotate(28deg);
  transform-origin: 50% 100%;
  animation: ma-pen 9s ease-in-out infinite;
}
@keyframes ma-draw { 0% { stroke-dashoffset: 1; opacity: 1; } 28% { stroke-dashoffset: 0; opacity: 1; } 56% { opacity: 1; } 64%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes ma-ink { 0%, 30% { stroke-dashoffset: 1; } 55%, 100% { stroke-dashoffset: 0; } }
@keyframes ma-fill { 0%, 56% { opacity: 0; } 68%, 100% { opacity: 1; } }
@keyframes ma-pen {
  0% { left: 12%; top: 6%; opacity: 1; }
  14% { left: 82%; top: 20%; }
  28% { left: 30%; top: 52%; }
  42% { left: 72%; top: 44%; }
  55% { left: 46%; top: 30%; opacity: 1; }
  62%, 100% { left: 92%; top: 64%; opacity: 0; }
}

/* ---- RAINMAKER: one tungsten lamp on dark wood in a near-black teal room; the call, the deal ---- */
.mini--rainmaker { background: #031110; }
.mr-lamp { position: absolute; left: 50%; top: 0; width: 100%; height: 100%; transform: translateX(-50%); z-index: 2; pointer-events: none; mix-blend-mode: screen; }
.mr-phone, .mr-crm { z-index: 3; }
.mr-shade { position: absolute; left: 41%; top: 0; width: 18%; height: 11%; background: linear-gradient(#2a241b, #14110c); border-radius: 0 0 40% 40% / 0 0 30% 30%; }
.mr-cone {
  position: absolute; left: 6%; right: 6%; top: 10%; bottom: 0;
  background: radial-gradient(60% 70% at 50% 72%, rgb(227 190 122 / 0.5), rgb(227 190 122 / 0.1) 55%, transparent 75%);
  clip-path: polygon(41% 0, 59% 0, 100% 100%, 0 100%);
  animation: mr-breathe 6s ease-in-out infinite;
}
.mr-wood { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(#2a1c10, #120c07); box-shadow: inset 0 1px 0 rgb(227 190 122 / 0.18); }
.mr-phone {
  position: absolute; left: 12%; bottom: 14%;
  width: 22%; aspect-ratio: 9 / 18;
  border-radius: 12px; background: #0b0d0c; padding: 5%;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), 0 14px 26px rgb(0 0 0 / 0.6);
}
.mr-glass { position: relative; width: 100%; height: 100%; border-radius: 9px; background: linear-gradient(#1b1710, #0c0a07); overflow: hidden; }
.mr-face { position: absolute; left: 32%; top: 16%; width: 36%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #e9d8b0 0 26%, #8a7450 28% 60%, transparent 62%); opacity: 0.85; }
.mr-wave { position: absolute; left: 14%; right: 14%; top: 56%; height: 14%; display: flex !important; align-items: center; justify-content: space-between; }
.mr-wave b { width: 8%; height: 100%; border-radius: 3px; background: var(--w-rainmaker); transform: scaleY(0.25); animation: mr-wave 1.1s ease-in-out infinite; }
.mr-wave b:nth-child(2) { animation-delay: 0.12s; } .mr-wave b:nth-child(3) { animation-delay: 0.3s; }
.mr-wave b:nth-child(4) { animation-delay: 0.06s; } .mr-wave b:nth-child(5) { animation-delay: 0.42s; }
.mr-wave b:nth-child(6) { animation-delay: 0.2s; } .mr-wave b:nth-child(7) { animation-delay: 0.36s; }
.mr-end { position: absolute; left: 38%; bottom: 8%; width: 24%; aspect-ratio: 1; border-radius: 50%; background: #9b3a2f; opacity: 0.8; }
.mr-crm {
  position: absolute; right: 9%; bottom: 16%;
  width: 46%;
  border-radius: 8px;
  background: rgb(246 237 207 / 0.95);
  padding: 4% 5% 5%;
  box-shadow: 0 18px 40px rgb(0 0 0 / 0.55);
  transform: rotate(-2deg);
}
.mr-bar { height: 7px; width: 46%; border-radius: 4px; background: #967a4c; margin-bottom: 9%; }
.mr-row { display: flex; align-items: center; gap: 8%; padding: 6% 4%; border-radius: 5px; }
.mr-who { width: 30%; height: 7px; border-radius: 4px; background: #3d3426; }
.mr-dots { display: flex; gap: 6%; flex: 1; }
.mr-dots b { width: 10px; height: 10px; border-radius: 50%; background: #c9b78c; }
.mr-row--live { animation: mr-live 6s ease-in-out infinite; }
.mr-row--live .mr-dots b { animation: mr-dot 6s ease-in-out infinite; }
.mr-row--live .mr-dots b:nth-child(2) { animation-delay: 0.3s; }
.mr-row--live .mr-dots b:nth-child(3) { animation-delay: 0.6s; }
.mr-row--live .mr-dots b:nth-child(4) { animation-delay: 0.9s; }
.mr-row--soft { opacity: 0.45; }
@keyframes mr-breathe { 0%, 100% { opacity: 0.86; } 50% { opacity: 1; } }
@keyframes mr-wave { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }
@keyframes mr-live { 0%, 30% { background: transparent; } 45%, 85% { background: rgb(227 190 122 / 0.45); } 100% { background: transparent; } }
@keyframes mr-dot { 0%, 35% { background: #c9b78c; } 50%, 85% { background: #6b5329; } 100% { background: #c9b78c; } }

/* ---- COMMANDER: their own screen; the board moves, one card needs them ---- */
.mini--commander { background: radial-gradient(80% 80% at 50% 50%, #101a20, #05090b); }
.mc-win {
  position: absolute; inset: 12% 8%;
  border-radius: 9px;
  background: #0b1216;
  box-shadow: 0 0 0 1px rgb(163 183 195 / 0.22), 0 0 60px rgb(163 183 195 / 0.12);
  overflow: hidden;
}
.mc-bar { height: 22px; display: flex !important; align-items: center; gap: 5px; padding: 0 9px; border-bottom: 1px solid rgb(163 183 195 / 0.14); }
.mc-bar b { width: 7px; height: 7px; border-radius: 50%; background: rgb(163 183 195 / 0.4); }
.mc-board { position: absolute; inset: 22px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4%; padding: 5%; }
.mc-col { position: relative; display: flex; flex-direction: column; gap: 7%; }
.mc-h { height: 6px; width: 54%; border-radius: 3px; background: rgb(163 183 195 / 0.45); margin-bottom: 6%; }
.mc-card { height: 18%; border-radius: 5px; background: rgb(163 183 195 / 0.14); box-shadow: inset 0 0 0 1px rgb(163 183 195 / 0.12); }
.mc-card--mover { animation: mc-move 8s ease-in-out infinite; background: rgb(163 183 195 / 0.3); }
.mc-card--you { animation: mc-you 8s ease-in-out infinite; }
@keyframes mc-move {
  0%, 12% { transform: none; }
  30%, 46% { transform: translate(112%, -130%); }
  64%, 86% { transform: translate(224%, -260%); opacity: 1; }
  94% { opacity: 0; transform: translate(224%, -260%); }
  100% { opacity: 0; transform: none; }
}
@keyframes mc-you { 0%, 40% { background: rgb(163 183 195 / 0.14); box-shadow: inset 0 0 0 1px rgb(163 183 195 / 0.12); } 52%, 88% { background: rgb(163 183 195 / 0.5); box-shadow: inset 0 0 0 1px #dfe8ee, 0 0 22px rgb(163 183 195 / 0.55); } 100% { background: rgb(163 183 195 / 0.14); } }

/* ---------- THE OUTRO: four cords twist into one braid on scroll ---------- */
.braid-wrap {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 88px);
  min-height: 170vh;
  align-items: start;
}
.braid { position: sticky; top: 8vh; width: 100%; height: 84vh; display: block; }
.braid path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.braid .bc--0 { stroke: var(--w-hunter); stroke-width: 2.5; }
.braid .bc--1 { stroke: var(--w-architect); stroke-width: 4.5; }
.braid .bc--2 { stroke: var(--w-rainmaker); stroke-width: 6.5; }
.braid .bc--3 { stroke: var(--w-commander); stroke-width: 3.5; }
.braid-glow { opacity: 0; }
.braid-glow path { stroke-width: 12; }
/* V 10-27 09:53 "YOU MIGHT BE MORE THAN ONE ... is too far down": the words stick level with the cords' tops (13vh; was 24vh) */
.braid-words { position: sticky; top: 13vh; padding: 0 0 18vh; display: grid; gap: 22px; max-width: 34em; }
.braid-words .lede { color: var(--silver); }
.braid-h { margin-bottom: 6px; }
.braid-h .sig, .braid-invite .sig {
  background: linear-gradient(90deg, var(--w-hunter), var(--w-architect), var(--w-rainmaker), var(--w-commander));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  text-shadow: none;
}
.braid-invite { color: var(--silver); }

/* ---------- the footer door for clients, capability providers and JV partners (punch row 6) ---------- */
.jv-foot {
  background: var(--paper-2);
  padding: 22px var(--gutter) 28px;
  text-align: center;
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.5;
}
.jv-door-a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(77 87 82 / 0.4); }
.jv-door-a:hover { color: var(--ink); }

/* the other side: its role and the honest note */
.other-world { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--white); }
.ow-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--rc, var(--neon)); box-shadow: 0 0 14px var(--rc, var(--neon)); }
.other-mock { margin: 0; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--steel); }

/* ---------- the next-move cue: one bouncing arrow over the cell or button that is next ---------- */
.has-cue { position: relative; }
.next-cue {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  width: 22px; height: 22px;
  margin-left: -11px;
  pointer-events: none;
  z-index: 5;
  animation: cue-bounce 1.1s ease-in-out infinite;
}
.next-cue svg { width: 100%; height: 100%; display: block; }
.next-cue[hidden] { display: none; }
@keyframes cue-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
/* on an empty quiz chip the arrow sits beside the chip (above it, the cell clips it) and points at it */
.qa-chip .next-cue {
  left: calc(100% + 8px);
  bottom: auto;
  top: 50%;
  margin: -11px 0 0;
  animation-name: cue-bounce-x;
}
.qa-chip .next-cue svg { transform: rotate(90deg); }
@keyframes cue-bounce-x { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-6px); } }

/* ---------- phone ---------- */
@media (max-width: 899px) {
  .sheet-c { padding: 0 var(--gutter) 2vh; }
  .sc-light { background: radial-gradient(60% 34% at 50% 30%, color-mix(in srgb, var(--rc) 24%, transparent), transparent 70%); }
  .sc-card { grid-template-columns: minmax(0, 1fr); gap: 0; padding-left: 18px; }
  /* on a phone the world rides at the top of the screen (sticky, THE SCENES below) and the scenes scroll up under it */
  .sc-world { grid-column: 1; grid-row: 1; }
  .sc-words { grid-column: 1; grid-row: 2; }
  .sheet-c .sc-card > .sc-cord.sc-cord { grid-column: auto; grid-row: auto; }
  .mini { aspect-ratio: auto; height: 240px; max-width: none; margin: 0; }
  .pills li { font-size: 12.5px; padding: 6px 9px; }
  .pills { gap: 5px; }
  .sc-name { font-size: clamp(44px, 13.4vw, 58px); }
  .sc-q { font-size: clamp(28px, 7.6vw, 34px); max-width: none; }
  .cues { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  /* the revelation starts 150vh early (base.css .scene--xfade); without this tail it faded in over the braid's words on a phone (eye pass 10-26) */
  /* (finish 10-29, forward sweep at 390x844: at 1.5 screens the braid's last words left the top ~0.3 screen before the
     revelation began to fade in, five pure black frames; 1.2 starts the fade as the last line leaves) */
  .braid-wrap { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 8px; padding-bottom: calc(1.2 * var(--stage-h)); }
  .braid { position: relative; top: 0; height: 36vh; height: 36svh; } /* was 52vh: the words came in a screen too late (V 10-27) */
  .braid-words { position: relative; top: 0; padding: 0 0 40px; }
  .lu { font-size: 15px; padding: 10px 14px 10px 12px; }
}

/* ---------- reduced motion: the end state, still ---------- */
@media (prefers-reduced-motion: reduce) {
  .sc-card { transform: none !important; transition: none !important; }
  .sc-light, .sc-cord, .pills--pencil li { transition: none !important; opacity: 1 !important; transform: none !important; }
  /* every scene's words readable at once, the device still, no travel between scenes */
  .sc-scene > *, .sc-scene .cues > div {
    transition: none !important; opacity: 1 !important; translate: none !important; filter: none !important;
  }
  /* (the device's travel between scenes lives inside a no-preference query, so here it never starts) */
  .sc-world > .mini, .sc-mark { transition: none !important; }
  .mini *, .next-cue { animation: none !important; }
  .mh-pool, .mh-clock, .mh-note, .mh-note--2 { opacity: 1 !important; transform: none !important; }
  .mh-glass { background: #0e2a22 !important; }
  .mh-pad, .mh-mug { opacity: 0.85 !important; }
  .ma-pencil path { opacity: 0 !important; }
  .ma-ink path { stroke-dashoffset: 0 !important; }
  .ma-fill rect { opacity: 1 !important; }
  .ma-pen { display: none !important; }
  .mr-wave b { transform: scaleY(0.7) !important; }
  .mr-row--live { background: rgb(227 190 122 / 0.45) !important; }
  .mc-card--you { background: rgb(163 183 195 / 0.5) !important; }
}

/* ======================================================================================================
   THE SCENES (inv-vnotes-sections, 2026-10-27). V 10-27: "make each one like maybe two sections or three sections like
   we do normally for the other pages" · "split up the text or load it or scroll it ... doesn't lump the entire thing
   in one go" · "add the phone, it can move around more" · the faction accents "expand on them".
   Each sheet is three scenes (the question · the headline and its voice · the cues). The world stands still beside
   them (sticky) and its device moves from scene to scene; every line arrives as it reaches the reading line and stays
   (js/select.js: .is-shown is never taken off, so nothing re-animates on the way back up; data-scene on the sheet).
   Each sheet flies its faction (docs/brand/HYPHA-FACTIONS-v1.md): its colour as the accent, its sign on every scene's
   flag and, large and faint, behind the device. Faction-coloured text sits only on this dark stage.
   ====================================================================================================== */
.sg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
#sheet-hunter { --sg-turn: 90deg; --ar: 0.909; }
#sheet-architect { --sg-turn: 120deg; --ar: 0.87; }
#sheet-rainmaker { --sg-turn: 0deg; --ar: 0.746; }
#sheet-commander { --sg-turn: 0deg; --ar: 0.707; }

.sc-scene {
  min-height: 72vh;
  min-height: 72svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6vh 0;
}

/* the flag: the faction's sign, its verb, the scene's number */
.sc-flag {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 26px;
  font: 500 11.5px / 1 var(--f-mono);
  letter-spacing: 0.22em;
  color: var(--rc);
}
.sc-sign {
  flex: none;
  width: 26px;
  height: 26px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 9px color-mix(in srgb, var(--rc) 60%, transparent));
}
.sc-flag i { flex: 0 1 72px; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 75%, transparent), transparent); }
.sc-flag b { font-weight: 500; letter-spacing: 0.16em; color: var(--steel); }

/* scene 2 is the headline's own scene: it can be big now that it stands alone */
.sc-scene--2 .sc-head {
  margin: 0 0 22px;
  font-size: clamp(34px, 3.7vw, 62px);
  line-height: 0.98;
  letter-spacing: -0.022em;
  max-width: 13ch;
  text-wrap: balance;
  text-shadow: 0 0 54px color-mix(in srgb, var(--rc) 30%, transparent);
}
.sc-scene--2 .sc-sub { font-size: clamp(18px, 1.45vw, 22px); max-width: 40ch; }
.sc-scene--2 .sc-voice { margin-top: 42px; font-size: clamp(22px, 2vw, 31px); max-width: 30ch; border-left-width: 3px; }
/* scene 3: the cues, one by one, then where you start */
.sc-scene--3 .cues { margin: 0; gap: 26px 36px; }
.sc-scene--3 .cues dd { font-size: clamp(15.5px, 1.15vw, 17px); }
.sc-scene--3 .cues .cue-start { padding-top: 22px; }
.sc-scene--3 .cues .cue-start dd { font-family: var(--f-display); font-size: clamp(20px, 1.7vw, 26px); line-height: 1.25; letter-spacing: -0.01em; max-width: 30ch; }

/* the steps: hidden only once js/select.js runs (no script, every line stands) */
.sc-js .sc-scene > *,
.sc-js .sc-scene .cues > div {
  opacity: 0;
  translate: 0 24px;
  transition: opacity 0.75s cubic-bezier(0.2, 0.7, 0.2, 1), translate 0.85s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sc-js .sc-scene > .cues { opacity: 1; translate: none; }
/* (a cue is a div under the list: the shown rule names it, or the hidden rule's weight wins and the cues never show) */
.sc-js .sc-scene > .is-shown,
.sc-js .sc-scene .cues > .is-shown { opacity: 1; translate: none; }

/* the world: the faction's light, its sign large and faint, the device in front */
.sc-world { position: relative; }
.sc-world::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 118%;
  aspect-ratio: 1.25;
  translate: -50% -50%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--rc) 22%, transparent), color-mix(in srgb, var(--rc) 7%, transparent) 55%, transparent);
}
/* the older miniatures' room plates (.mini--rainmaker, .mini--commander above) stay off: the objects float */
.sheet-c .sc-world > .mini { z-index: 1; background: none; border-radius: 0; box-shadow: none; }
/* the Commander's menu bar floats too: a rounded strip over his windows, not the top edge of a screen */
#sheet-commander .cm2-menu { border-radius: calc(7 * var(--u)); box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgb(0 0 0 / 0.45); }
.sc-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(44vw, 640px);
  aspect-ratio: 1;
  translate: -50% -50%;
  overflow: visible;
  pointer-events: none;
  color: var(--rc);
  fill: none;
  stroke: currentColor;
  stroke-width: 0.42;
  opacity: 0.14;
}
@media (min-width: 900px) {
  .sc-world {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    height: 100svh;
    display: grid;
    place-items: center;
  }
}

/* the travel: the device and its hero object move to each scene; the sign turns (Commander's chevrons rise) */
@media (prefers-reduced-motion: no-preference) {
  .sheet-c { --ez: cubic-bezier(0.22, 0.68, 0.18, 1); }
  .sc-mark { transition: rotate 1.6s var(--ez), scale 1.6s var(--ez), translate 1.6s var(--ez), opacity 1s ease; }
  .sheet-c[data-scene="2"] .sc-mark { rotate: var(--sg-turn); scale: 1.16; opacity: 0.18; }
  .sheet-c[data-scene="3"] .sc-mark { rotate: calc(2 * var(--sg-turn)); scale: 0.88; }
  #sheet-commander[data-scene="2"] .sc-mark { translate: -50% -56%; }
  #sheet-commander[data-scene="3"] .sc-mark { translate: -50% -62%; }

  /* --sf (THE ALTERNATION): 1 = these poses as drawn, -1 = mirrored, for the worlds whose device answers from the left
     first, so on every side the device turns toward its words */
  .sheet-c .sc-world > .mini {
    transform: perspective(1600px) rotateY(calc(-8deg * var(--sf))) rotateX(2deg);
    transition: translate 1.25s var(--ez), scale 1.25s var(--ez), transform 1.25s var(--ez);
  }
  .sheet-c[data-scene="2"] .sc-world > .mini { translate: calc(-4% * var(--sf)) 2%; scale: 0.96; transform: perspective(1600px) rotateY(calc(7deg * var(--sf))) rotateX(3deg); }
  .sheet-c[data-scene="3"] .sc-world > .mini { translate: calc(3% * var(--sf)) -1%; scale: 0.93; transform: perspective(1600px) rotateY(calc(-3deg * var(--sf))) rotateX(8deg); }

  #sheet-hunter .hx-phone, #sheet-hunter .hx-sheet, #sheet-hunter .hx-mail,
  #sheet-architect .ax-term, #sheet-architect .ax-paper, #sheet-architect .ax-sk, #sheet-architect .ax-pencil,
  #sheet-rainmaker .rm2-phone, #sheet-rainmaker .rm2-laptop,
  #sheet-commander .cm2-note, #sheet-commander .cm2-chat, #sheet-commander .cm2-board {
    transition: translate 1.25s var(--ez), scale 1.25s var(--ez), rotate 1.25s var(--ez), filter 0.9s ease;
  }
  /* HUNTER: the reply lands, so the phone comes up into the middle; then it goes back down and the list comes forward */
  #sheet-hunter[data-scene="2"] .hx-phone { translate: -14.6em -15.4em; scale: 1.3; rotate: 3deg; }
  #sheet-hunter[data-scene="2"] .hx-sheet, #sheet-hunter[data-scene="2"] .hx-mail { filter: brightness(0.5) saturate(0.6); }
  #sheet-hunter[data-scene="3"] .hx-phone { translate: 4em 5em; scale: 0.82; rotate: -15deg; }
  #sheet-hunter[data-scene="3"] .hx-sheet { translate: -8em 8em; scale: 1.1; z-index: 3; }
  #sheet-hunter[data-scene="3"] .hx-mail { translate: -2em 3em; filter: brightness(0.55) saturate(0.6); }
  /* ARCHITECT: the agent's terminal steps forward over the sketch; then it steps back and the sorted folders read */
  #sheet-architect[data-scene="2"] .ax-term { translate: -13em 3em; scale: 1.1; rotate: -1.5deg; }
  #sheet-architect[data-scene="2"] .ax-paper, #sheet-architect[data-scene="2"] .ax-sk, #sheet-architect[data-scene="2"] .ax-pencil { filter: brightness(0.45); }
  #sheet-architect[data-scene="3"] .ax-term { translate: 8em 12em; scale: 0.7; rotate: 5deg; }
  /* RAINMAKER: the phone crosses in front of the deal for the yes; then the deal's laptop comes forward */
  #sheet-rainmaker[data-scene="2"] .rm2-phone { translate: calc(-190 * var(--u)) 0; scale: 1.08; rotate: -4deg; }
  #sheet-rainmaker[data-scene="2"] .rm2-laptop { filter: brightness(0.45) saturate(0.7); }
  #sheet-rainmaker[data-scene="3"] .rm2-phone { translate: calc(14 * var(--u)) calc(70 * var(--u)); scale: 0.8; rotate: 8deg; }
  #sheet-rainmaker[data-scene="3"] .rm2-laptop { translate: calc(40 * var(--u)) calc(16 * var(--u)); scale: 1.12; }
  /* COMMANDER: the client's mail drops into the middle while the team waits; then the board comes forward */
  /* (the mail banner no longer drops into the middle in scene 2: the Commander's phone carries it there now, THE FACTION PHONE) */
  #sheet-commander[data-scene="2"] .cm2-chat, #sheet-commander[data-scene="2"] .cm2-board { filter: brightness(0.5) saturate(0.7); }
  #sheet-commander[data-scene="3"] .cm2-board { translate: calc(-36 * var(--u)) calc(-24 * var(--u)); scale: 1.14; z-index: 4; }
  #sheet-commander[data-scene="3"] .cm2-chat { translate: calc(-6 * var(--u)) calc(8 * var(--u)); scale: 0.96; filter: brightness(0.5) saturate(0.7); }
}

/* on a phone the world rides the top of the screen and the scenes scroll up under its fade */
@media (max-width: 899px) {
  .sc-world {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 46svh;
    display: grid;
    place-items: center;
    margin: 0;
  }
  .sc-world::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 -120px -9svh;
    pointer-events: none;
    background: linear-gradient(var(--void) 0 82%, transparent);
  }
  .sheet-c .sc-world > .mini { width: min(100%, calc((46svh - 28px) * var(--ar))); height: auto; margin: 0 auto; }
  /* the rooms were drawn for a clipped frame and reach past it on a phone; here they dissolve at their foot instead of
     spilling over the words (a soft edge, no frame) */
  .sheet-c .sc-world > .mini { -webkit-mask-image: linear-gradient(#000 76%, transparent); mask-image: linear-gradient(#000 76%, transparent); }
  .sc-mark { width: 82vw; opacity: 0.1; }
  .sc-scene { min-height: 54svh; justify-content: flex-start; padding: 7svh 0 3svh; }
  .sc-flag { margin-bottom: 18px; }
  .sc-scene--2 .sc-head { font-size: clamp(32px, 9.4vw, 40px); }
  .sc-scene--2 .sc-voice { margin-top: 28px; }
  .sc-scene--3 .cues { gap: 20px; }
}

/* ======================================================================================================
   THE ALTERNATION (inv-alternate, 2026-10-29). V 10-27 19:50 GMT: "and can we alternate? i.e. first text on left+ image
   right... then switch then again... so it's not a monotone scroll of text on left and random phone stuck on the
   side... like it's an afterthought". The words take turns: the Hunter left right left, the Architect right left
   right, the Rainmaker left right left, the Commander right left right, so no two scenes in a row stand on the same
   side. The world's one device answers from the other half: about half the row, level with its words, reaching half
   the gap toward them, and it crosses over as the scene changes (--sv: 1 on the right, -1 on the left; the sheet's
   light follows it; --sf turns its poses to face the words). The words stand over the device (z-index), so nothing
   prints over a word. Keyed on [data-scene], which js/select.js sets on every sheet, reduced motion too: with no
   script the older column stands. On a phone the device is not pinned: it stands in the flow, the full width of the
   column, above or below the words by turns, in one of two places held open for it (.sc-card::after keeps the other
   place's height, so nothing jumps when it moves; js/select.js changes the scene while both places are off screen).
   ====================================================================================================== */
.sheet-c { --sv: 1; --sf: 1; }
#sheet-hunter { --dar: 1.12; --sc-ar: 40 / 44; }
#sheet-architect { --dar: 1.12; --sc-ar: 40 / 46; }
#sheet-rainmaker { --dar: 1.25; --sc-ar: 400 / 536; }
#sheet-commander { --dar: 1.25; --sc-ar: 400 / 566; }
@media (min-width: 900px) {
  .sheet-c:nth-of-type(odd)[data-scene="2"], .sheet-c:nth-of-type(even)[data-scene="1"], .sheet-c:nth-of-type(even)[data-scene="3"] { --sv: -1; }
  .sheet-c:nth-of-type(even)[data-scene] { --sf: -1; }
  .sheet-c[data-scene] { --sc-gap: clamp(32px, 5vw, 88px); }
  .sheet-c[data-scene] .sc-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--sc-gap); }
  .sheet-c[data-scene] .sc-words { grid-column: 1 / -1; position: relative; z-index: 2; pointer-events: none; }
  .sheet-c[data-scene] .sc-scene { width: calc((100% - var(--sc-gap)) / 2); min-height: 100vh; min-height: 100svh; pointer-events: auto; }
  .sheet-c:nth-of-type(odd)[data-scene] .sc-scene--2,
  .sheet-c:nth-of-type(even)[data-scene] .sc-scene--1,
  .sheet-c:nth-of-type(even)[data-scene] .sc-scene--3 { margin-left: auto; }
  /* the device: half the gap toward its words, as wide as its half allows, never taller than 70% of the screen (finish
     10-29: at 66% a short laptop, 1280x720, held the Hunter's and the Architect's device to 0.44 of the row) */
  .sheet-c[data-scene] .sc-world {
    grid-column: 2;
    justify-self: start;
    z-index: 1;
    width: min(100% + var(--sc-gap) / 2, 70vh * var(--dar));
    width: min(100% + var(--sc-gap) / 2, 70svh * var(--dar));
    margin-left: calc(var(--sc-gap) / -2);
    translate: calc((var(--sv) - 1) * 50%) 0;
  }
  .sheet-c[data-scene] .sc-world > .mini { width: 100%; max-width: none; margin: 0; }
  .sheet-c[data-scene] .sc-light { translate: calc((var(--sv) - 1) * 20%) 0; }
  /* (finish 10-29) the name stays inside its half: COMMANDER is 5.84em wide, so at most 0.165 of the half (it ran 14 px
     past it at 1512x860); 100cqi is the words' full width, both halves and the gap */
  .sheet-c[data-scene] .sc-words { container-type: inline-size; }
  .sheet-c[data-scene] .sc-name { font-size: min(clamp(56px, 7vw, 112px), (100cqi - var(--sc-gap)) * 0.0825); }
  /* (finish 10-29) while a scene changes, the scene before or after stands on the device's half and its lines pass over
     the lit screens; js/select.js sets .sc-under while they cross it, and the device steps back into the dark so the
     words read on a dark ground */
  .sheet-c.sc-under[data-scene] .sc-world { opacity: 0.22; }
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .sheet-c[data-scene] .sc-world { transition: translate 1.25s var(--ez), opacity 0.45s ease; }
  .sheet-c[data-scene] .sc-light { transition: opacity 0.6s ease, translate 1.25s var(--ez); }
  /* THE FLIP, scrubbed (amp3, 2026-10-29; V 22:30 "it's just jumpy. It switches very, very quickly"): js/select.js
     sets --svx (the side, every value between 1 and -1), --sx-turn and --sx-mid from the scroll, so the device crosses
     with the visitor's own scroll over half a screen: no timer on its travel. Mid-crossing it steps back into the
     dark and turns its face away from where it is going, then comes forward on the other side. */
  .sheet-c.sc-scrub[data-scene] .sc-world {
    translate: calc((var(--svx, var(--sv)) - 1) * 50%) 0;
    transform: perspective(1800px) translateZ(calc(var(--sx-mid, 0) * -240px)) rotateY(calc(var(--sx-turn, 0) * 22deg));
    filter: brightness(calc(1 - var(--sx-mid, 0) * 0.35));
    transition: opacity 0.45s ease;
  }
  .sheet-c.sc-scrub[data-scene] .sc-light { translate: calc((var(--svx, var(--sv)) - 1) * 20%) 0; opacity: calc(1 - var(--sx-mid, 0) * 0.5); transition: none; }
  /* (handover 4, 2026-10-29) mid-crossing the device passes the middle of the row, where both scenes' words reach: the
     Hunter's "FIND 02 / 03" flag rode over the bottom of his phone, the Commander's last question line over his chat
     window. While it crosses, the words of the scene leaving and the scene arriving step back with the same scroll
     (nothing timed): gone by --sx-mid 0.18, back as it falls below it (measured at 1512x982: the device's box first
     meets a line at 0.197, the Commander's question, and last leaves one at 0.282, the Hunter's flag). With the words
     stepped back the device need not dim for them (.sc-under): it comes back up to full as it crosses the empty row. */
  .sheet-c.sc-scrub[data-scene] .sc-scene { opacity: clamp(0, 1 - var(--sx-mid, 0) / 0.18, 1); }
  .sheet-c.sc-scrub.sc-under[data-scene] .sc-world { opacity: clamp(0.22, (var(--sx-mid, 0) - 0.18) / 0.22, 1); }
}
/* reduced motion: no travel, a plain crossfade; the device fades out on its side and in on the other */
@media (min-width: 900px) and (prefers-reduced-motion: reduce) {
  .sheet-c.sc-scrub:not(.sc-under)[data-scene] .sc-world { opacity: calc(1 - var(--sx-mid, 0)); }
}
@media (max-width: 899px) {
  .sheet-c[data-scene] .sc-words { display: contents; }
  .sheet-c[data-scene] .sc-world { position: relative; top: auto; z-index: 0; height: auto; display: block; margin: 0; }
  .sheet-c[data-scene] .sc-world::after { content: none; }
  .sheet-c[data-scene] .sc-world > .mini { width: 100%; margin: 0; }
  .sheet-c[data-scene] .sc-card::after { content: ""; grid-column: 1; aspect-ratio: var(--sc-ar); pointer-events: none; }
  .sheet-c[data-scene] .sc-scene { grid-column: 1; position: relative; z-index: 1; min-height: 0; padding: 5svh 0 6svh; }
  /* the Hunter, the Rainmaker: place, 1, 2, place, 3 (the device above 1, below 2, above 3) */
  .sheet-c:nth-of-type(odd)[data-scene] .sc-scene--1 { grid-row: 2; }
  .sheet-c:nth-of-type(odd)[data-scene] .sc-scene--2 { grid-row: 3; }
  .sheet-c:nth-of-type(odd)[data-scene] .sc-scene--3 { grid-row: 5; }
  .sheet-c:nth-of-type(odd)[data-scene="1"] .sc-world,
  .sheet-c:nth-of-type(odd)[data-scene="2"] .sc-card::after,
  .sheet-c:nth-of-type(odd)[data-scene="3"] .sc-card::after { grid-row: 1; }
  .sheet-c:nth-of-type(odd)[data-scene="1"] .sc-card::after,
  .sheet-c:nth-of-type(odd)[data-scene="2"] .sc-world,
  .sheet-c:nth-of-type(odd)[data-scene="3"] .sc-world { grid-row: 4; }
  /* the Architect, the Commander: 1, place, 2, 3, place (the device below 1, above 2, below 3) */
  .sheet-c:nth-of-type(even)[data-scene] .sc-scene--1 { grid-row: 1; }
  .sheet-c:nth-of-type(even)[data-scene] .sc-scene--2 { grid-row: 3; }
  .sheet-c:nth-of-type(even)[data-scene] .sc-scene--3 { grid-row: 4; }
  .sheet-c:nth-of-type(even)[data-scene="1"] .sc-world,
  .sheet-c:nth-of-type(even)[data-scene="2"] .sc-world,
  .sheet-c:nth-of-type(even)[data-scene="3"] .sc-card::after { grid-row: 2; }
  .sheet-c:nth-of-type(even)[data-scene="1"] .sc-card::after,
  .sheet-c:nth-of-type(even)[data-scene="2"] .sc-card::after,
  .sheet-c:nth-of-type(even)[data-scene="3"] .sc-world { grid-row: 5; }
}

/* ======================================================================================================
   THE FACTION PHONE (inv-vnotes-merge, 2026-10-27). V 10-27: "we can add the phone, it can move around more" · the
   faction accents "expand on them". Hunter and Rainmaker had their own phone; the Architect and the Commander get one
   here, drawn like theirs (black glass round a lit lock screen) but lit in their own faction colour (--rc on the sheet:
   the wallpaper, the faint sign behind the clock, the rim light, the pool under it, the ring on the note that matters).
   Sizes inside are in cqw of the phone itself (100cqw = its width); where it stands is set per card
   (card-architect.css, card-commander.css), how it travels between the scenes at the end of this block. */
.sheet-c .fp { position: absolute; z-index: 6; aspect-ratio: 9 / 19.5; container-type: inline-size; }
.sheet-c .fp::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -30%; right: -30%; bottom: -9%;
  height: 22%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--rc) 42%, transparent), transparent);
  filter: blur(6cqw);
  pointer-events: none;
}
.sheet-c .fp-glass {
  position: absolute;
  inset: 0;
  padding: 3.7cqw;
  border-radius: 15cqw;
  background: #050607;
  box-shadow:
    0 0 0 0.9cqw #3b4148,
    0 0 0 1.6cqw #0a0b0c,
    -3cqw 17cqw 26cqw rgb(0 0 0 / 0.66),
    0 4.5cqw 8cqw rgb(0 0 0 / 0.5),
    0 0 34cqw color-mix(in srgb, var(--rc) 26%, transparent);
}
.sheet-c .fp-sheen { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(128deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0) 22%, rgb(255 255 255 / 0) 72%, rgb(255 255 255 / 0.05)); }
.sheet-c .fp-scr {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 11.6cqw;
  color: #fff;
  font-family: var(--f-app);
  background:
    radial-gradient(95% 48% at 72% 96%, color-mix(in srgb, var(--rc) 58%, transparent), transparent 72%),
    radial-gradient(120% 62% at 22% 10%, color-mix(in srgb, var(--rc) 30%, #10171c), #0b1115 58%, #05080a);
}
.sheet-c .fp-sign { position: absolute; left: 50%; top: 61%; width: 70cqw; height: 70cqw; translate: -50% -50%; fill: none; stroke: var(--rc); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.2; overflow: visible; }
.sheet-c .fp-st { position: absolute; left: 0; right: 0; top: 0; height: 10cqw; margin: 0; display: flex; align-items: center; justify-content: space-between; padding: 1.6cqw 8cqw 0 9.5cqw; font: 600 4.4cqw / 1 var(--f-app); }
.sheet-c .fp-island { position: absolute; left: 50%; top: 3cqw; width: 28cqw; height: 7.6cqw; margin-left: -14cqw; border-radius: 5cqw; background: #000; }
.sheet-c .fp-bat { position: relative; width: 7.8cqw; height: 3.9cqw; border-radius: 1.2cqw; box-shadow: inset 0 0 0 0.45cqw rgb(255 255 255 / 0.55); }
.sheet-c .fp-bat::before { content: ""; position: absolute; left: 0.8cqw; top: 0.8cqw; bottom: 0.8cqw; width: 62%; border-radius: 0.5cqw; background: #fff; }
.sheet-c .fp-date { position: absolute; left: 0; right: 0; top: 17cqw; margin: 0; text-align: center; font: 500 5.6cqw / 1.2 var(--f-app); color: rgb(255 255 255 / 0.86); }
.sheet-c .fp-time { position: absolute; left: 0; right: 0; top: 24.5cqw; margin: 0; text-align: center; font: 600 25cqw / 1 var(--f-app); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; text-shadow: 0 1.2cqw 10cqw rgb(0 0 0 / 0.25); }
.sheet-c .fp-notes { position: absolute; left: 3.8cqw; right: 3.8cqw; top: 63cqw; display: flex; flex-direction: column; gap: 2.6cqw; }
.sheet-c .fp-n {
  display: grid;
  grid-template-columns: 10.6cqw minmax(0, 1fr);
  gap: 3.6cqw;
  align-items: center;
  padding: 4cqw 4.4cqw;
  border-radius: 6.4cqw;
  background: rgb(232 240 246 / 0.2);
  box-shadow: inset 0 0 0 0.35cqw rgb(255 255 255 / 0.1), 0 2cqw 6cqw rgb(0 0 0 / 0.16);
  transition: box-shadow 0.9s ease, background 0.9s ease;
}
.sheet-c .fp-app { width: 10.6cqw; height: 10.6cqw; border-radius: 2.8cqw; display: grid; place-items: center; background: var(--g); color: #fff; font: 700 4.4cqw / 1 var(--f-app); }
.sheet-c .fp-app svg { width: 62%; height: 62%; }
.sheet-c .fp-nt { min-width: 0; }
.sheet-c .fp-nh { display: flex; justify-content: space-between; gap: 2cqw; font-size: 4.9cqw; line-height: 1.25; }
.sheet-c .fp-nh strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-c .fp-nh time { flex: none; font-size: 4.1cqw; color: rgb(255 255 255 / 0.62); }
.sheet-c .fp-nb { display: block; margin-top: 0.6cqw; font: 400 4.6cqw / 1.3 var(--f-app); color: rgb(255 255 255 / 0.86); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sheet-c .fp-home { position: absolute; left: 50%; bottom: 2.8cqw; width: 34cqw; height: 1.3cqw; margin-left: -17cqw; border-radius: 1cqw; background: rgb(255 255 255 / 0.72); }

@media (prefers-reduced-motion: no-preference) {
  .sheet-c .fp { transition: translate 1.25s var(--ez), scale 1.25s var(--ez), rotate 1.25s var(--ez), filter 0.9s ease; }
  /* the note that matters takes the faction's ring while the phone is up */
  .sheet-c[data-scene="2"] .fp-n--lead { background: rgb(232 240 246 / 0.3); box-shadow: inset 0 0 0 0.6cqw var(--rc), 0 0 9cqw color-mix(in srgb, var(--rc) 45%, transparent); }
  /* ARCHITECT: it rests by the terminal; in scene 2 the build lands and the phone comes up in front of it; in scene 3 it
     is set down on the desk beside the sheets while the sorted folders read */
  #sheet-architect[data-scene="2"] .fp { translate: -9.6em -12.5em; scale: 1.25; rotate: -3deg; }
  #sheet-architect[data-scene="3"] .fp { translate: -36em 6.5em; scale: 0.7; rotate: -16deg; }
  /* COMMANDER: it rests on the desk by the board; in scene 2 (everybody's asleep) it comes up into the middle over the
     dimmed chat and board, with the mail banner; in scene 3 it is put down by the chat while the board comes forward */
  #sheet-commander[data-scene="2"] .fp { translate: calc(-194 * var(--u)) calc(-143 * var(--u)); scale: 1.3; rotate: -3deg; }
  #sheet-commander[data-scene="2"] .cm2-note { filter: brightness(0.5) saturate(0.7); }
  #sheet-commander[data-scene="3"] .fp { translate: calc(-396 * var(--u)) calc(17 * var(--u)); scale: 0.8; rotate: -11deg; }
}
/* (finish 10-29: the desktop set-down of the Commander's scene-3 group, 21% of the device, is gone. THE ALTERNATION puts
   the device level with its words; with the set-down the group centred ~106 px below them at 1512x860) */
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  #sheet-architect[data-scene="2"] .fp { translate: -9em 6em; scale: 1.35; rotate: -3deg; }
  #sheet-architect[data-scene="3"] .fp { translate: -1.5em 15em; scale: 0.8; rotate: 12deg; }
  #sheet-commander[data-scene="2"] .fp { translate: calc(-120 * var(--u)) calc(-170 * var(--u)); scale: 1.45; rotate: -3deg; }
  #sheet-commander[data-scene="3"] .fp { translate: calc(-260 * var(--u)) calc(-16 * var(--u)); scale: 0.92; rotate: -10deg; }
  /* scene 3 on a phone: what comes forward stays inside the screen (the desktop moves pushed the Leads sheet, the
     Rainmaker's laptop and the Architect's terminal past the right edge at 390, inv-vnotes-merge look 10-27) */
  /* (phone look 10-27: the world's fade mask clips at the .mini's own box, 59-368 px at 390, so the Leads sheet and the
     phone both stay inside it: at -11em / 1.02 the sheet lost "Com" of Company on the left and the phone its right edge) */
  #sheet-hunter[data-scene="3"] .hx-sheet { translate: -7.3em 8em; scale: 0.94; }
  #sheet-hunter[data-scene="3"] .hx-phone { translate: -1.3em 5em; }
  #sheet-hunter[data-scene="3"] .hx-mail { translate: 0 3em; }
  #sheet-architect[data-scene="2"] .ax-term { translate: calc(-13em + 20px) 3em; }
  #sheet-rainmaker[data-scene="2"] .rm2-phone { translate: calc(-190 * var(--u) + 8px) 0; }
  #sheet-rainmaker[data-scene="3"] .rm2-laptop { translate: 0 calc(16 * var(--u)); scale: 1.03; }
  #sheet-architect[data-scene="3"] .ax-term { translate: 2.6em 9em; scale: 0.7; }
  /* (finish 10-29, phone look at 390x844 and 375x667) the board came forward 3 px past the device's left edge, where the
     fade mask cut its frame; 6 units less travel keeps it whole */
  #sheet-commander[data-scene="3"] .cm2-board { translate: calc(-30 * var(--u)) calc(-24 * var(--u)); }
}
/* phone, at rest (scene 1, and the dimmed scene 2): the Leads sheet was 344 px wide in a 326 px world and lost its Status
   column to the world's fade mask (95-439 against 43-369 at 390); it now rests whole, the phone 4 px further in */
@media (max-width: 899px) {
  #sheet-hunter .hx-sheet { translate: -7.1em 0; scale: 0.92; }
  #sheet-hunter .hx-phone { translate: -0.6em 0; }
  /* (finish 10-29) the laptop's base reached 4 units past the device on each side (8 px past its right edge in scene 3,
     where the laptop comes forward) and the fade mask cut its corner square; it reaches 6 units now */
  #sheet-rainmaker .rm2-laptop .rm2-deck { left: calc(-6 * var(--u)); right: calc(-6 * var(--u)); }
}

/* ---------- THE DEVICES IN 3D (js/sheet-devices.js, the shared device kit): the kit's real iPhone and MacBook are drawn
   in a layer canvas inside each device (.sd-layer, under its live screen); once a device's first frame is in, the kit
   puts .dk-on on it and its drawn body (the still) goes, the live screen, its words and its glare stay. Reduced motion
   or no WebGL: no .dk-on, the drawn body stays. The founder, 2026-10-29 22:30: "they're not actually 3D". ---------- */
.sheet-c .sd-host { isolation: isolate; }
.sheet-c .sd-host > .sd-layer { z-index: 0; }
.sheet-c .hx-phone.dk-on .hx-body { background: none; box-shadow: 0 2.6em 4.6em -1.4em rgb(5 12 10 / 0.5), 0 0 4.4em -0.6em rgb(120 200 160 / 0.45); }
.sheet-c .fp.dk-on .fp-glass { background: none; box-shadow: -3cqw 17cqw 26cqw rgb(0 0 0 / 0.5), 0 0 34cqw color-mix(in srgb, var(--rc) 26%, transparent); }
.sheet-c .fp.dk-on .fp-sheen, #sheet-rainmaker .rm2-phone.dk-on .rm2-sheen { display: none; }
#sheet-rainmaker .rm2-phone.dk-on { background: none; box-shadow: calc(-6 * var(--u)) calc(30 * var(--u)) calc(46 * var(--u)) rgb(0 0 0 / 0.5), 0 0 calc(60 * var(--u)) rgb(90 150 200 / 0.22); }
#sheet-rainmaker .rm2-laptop.dk-on .rm2-lid { background: none; box-shadow: 0 calc(34 * var(--u)) calc(60 * var(--u)) rgb(0 0 0 / 0.45); }
#sheet-rainmaker .rm2-laptop.dk-on .rm2-deck { visibility: hidden; }