/* Hypha · JV partner · the round-2 rig, shared by all three pages (WORLD.md §1): full-frame art, the desk seen in
   perspective, and Hypha's voice set in the world instead of a caption column. Loaded after trail.css and paper.css.

   .stage.is-free            the art covers the whole stage and the captions are placed by the scene, shot by shot
   .art .cam                 a perspective box (the eyes); .desk inside it is a plane the paper lies on (preserve-3d)
   J.pose(el, x, y, z, rx, ry, rz, s, lift)   js/trail.js: one transform for a sheet in 3D (see there)
   .vo .vo-xl/.vo-l/.vo-m/.vo-s   Hypha's voice: display lines huge across the frame, spoken lines, longer lines
   .vo-q                     the quiet surface: the ground's own colour behind the words, so they read over paper
   A.capsUpdate owns a cap's transform, opacity and visibility: a scene places a cap with CSS (left, top, width,
   per shot), or moves it with the `translate` property (A.css(cap, "translate", "Xpx Ypx")), never `transform`. */

/* ---------- a free stage: the whole window is the picture ---------- */
.stage.is-free .art { left: 0; right: 0; top: 0; bottom: 0; }
.stage.is-free .caps { left: 0; right: 0; top: 0; bottom: 0; width: auto; }
.stage.is-free .cap { top: auto; left: auto; translate: none; width: auto; max-width: none; }

/* ---------- the eyes and the desk ---------- */
.cam {
  position: absolute;
  inset: 0;
  perspective: 1500px;
  perspective-origin: 50% 38%;
  overflow: hidden;
}
.desk {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.desk > * { position: absolute; transform-origin: 50% 50%; }
.desk .sheet, .cam .sheet { backface-visibility: hidden; }
@media (max-width: 899px) { .cam { perspective: 1100px; perspective-origin: 50% 34%; } }

/* ---------- Hypha's voice, in the world ---------- */
.vo {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(28px, 2.9vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: balance;
}
.vo-xl { font-weight: 700; font-size: clamp(40px, 4.8vw, 82px); line-height: 1; letter-spacing: -0.032em; }
.vo-l { font-size: clamp(28px, 2.9vw, 48px); }
.vo-m { font-family: var(--f-body); font-weight: 500; font-size: clamp(21px, 1.75vw, 29px); line-height: 1.36; letter-spacing: -0.01em; text-wrap: pretty; }
.vo-s { font-family: var(--f-body); font-weight: 400; font-size: clamp(18px, 1.3vw, 21px); line-height: 1.46; letter-spacing: 0; color: var(--ink-2); text-wrap: pretty; }
.vo strong { font-weight: 700; }
/* emphasis stands upright (shared/type.css): a quote reads as a quote by its own curly marks, and a word the copy
   stresses reads by weight, a step off its line's (bolder in a spoken line, lighter in a bold display line) */
.vo-l em, .vo-m em, .vo-s em { font-weight: 700; }
.vo-xl em { font-weight: 400; }
.vo [data-line] { display: block; }
.vo [data-line] + [data-line] { margin-top: 0.36em; }
.vo .vo-in { display: inline; }   /* a span laid out inline (no line break) inside one copy line */
.stage.is-dark .vo { color: var(--white); }
.stage.is-dark .vo-s { color: var(--silver); }
@media (max-width: 899px) {
  .vo { font-size: clamp(24px, 6.6vw, 29px); }
  .vo-xl { font-size: clamp(31px, 8.6vw, 40px); }
  .vo-l { font-size: clamp(24px, 6.6vw, 29px); }
  .vo-m { font-size: clamp(19px, 5vw, 21px); line-height: 1.38; }
  .vo-s { font-size: 17px; }
}

/* the quiet surface: the ground's own colour behind the words (opaque, so the words read over any paper), feathered
   past the box so it never looks like a card */
.vo-q {
  --q: var(--paper-in);
  background: var(--q);
  border-radius: 0.18em;
  box-shadow: 0 0 0 0.3em var(--q), 0 0 1.1em 0.55em color-mix(in srgb, var(--q) 78%, transparent);
}
html[data-page="02"] .vo-q { --q: var(--table); }
.stage.is-dark .vo-q, .vo-q.vo-q--dark { --q: var(--carbon); }
.vo-q.vo-q--room { --q: var(--room); }