/* Hypha · JV partner · page 03 #intro (WORLD.md 6.1): "The questions nobody wanted", on the dark meeting table: flat,
   no pool, no lamp, no glow, nothing lit (P5). Loads as a normal stylesheet: the first screen (the headline, the
   introduction square at reading distance) is placed here exactly where js/p03-intro.js holds it at scroll 0
   (desktop x 34vw, y calc(62 * var(--sv)); phone x -12px, y max(calc(58 * var(--sv)), calc(7 * var(--sv)) + 300px)). Every other sheet and caption waits hidden. */

#intro .g-meet { background: rgb(7 16 14); } /* the room's own colour: the .vo-q--room surfaces vanish into it */
/* the dark's foot meets #film's top (the same layers) as the two scroll past each other: the dark's own top edge,
   mirrored, comes in over the lowest 30% (the bottom glow fades out above the edge), so they meet in one tone */
#intro .g-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 60% 52%, rgb(8 132 85 / 0.13) 0%, rgb(1 58 33 / 0.2) 26%, rgb(1 19 13 / 0.38) 48%, transparent 70%), var(--carbon);
  -webkit-mask-image: linear-gradient(to top, #000, transparent 30%);
  mask-image: linear-gradient(to top, #000, transparent 30%);
}
#intro .stage.is-near :is(.sheet, .tm-q) { will-change: transform, opacity; }

/* ---------- captions: Hypha's voice on the table, placed per shot (above every desk) ---------- */
#intro .cap { position: absolute; z-index: 3; margin: 0; }
#intro .cap:not([data-k="title"]):not(.sg-l):not(.rk-q) { opacity: 0; visibility: hidden; }
#intro .sg-l, #intro .rk-q { opacity: 0; visibility: hidden; }
#intro .cap[data-k="title"] { left: 6vw; top: calc(11 * var(--sv)); width: min(88vw, 1260px); }
#intro .cap[data-k="title"] .h1 { font-size: clamp(56px, 6.6vw, 112px); line-height: 0.96; }
#intro .cap[data-k="one"] { left: 6vw; top: calc(63 * var(--sv)); width: 25vw; }
#intro .cap[data-k="two"] { left: 6vw; top: calc(calc(63 * var(--sv)) + 2.5 * 2.9vw); width: 25vw; }
#intro .cap[data-k="three"] { left: 6vw; top: calc(6 * var(--sv)); width: 60vw; }
#intro .cap[data-k="three"] [data-line] { display: block; }
#intro .cap[data-k="four"] { left: 6vw; top: calc(7 * var(--sv)); width: 66vw; }
#intro .cap[data-k="five"] { left: 5vw; top: calc(6 * var(--sv)); width: 88vw; }
#intro .cap[data-k="head"] { left: 6vw; top: calc(8 * var(--sv)); width: 88vw; }
#intro .cap[data-k="up"] { left: 5vw; top: calc(6 * var(--sv)); width: 88vw; }

/* ---------- the paper ---------- */
#intro .sheet { left: 0; top: 0; }
#intro :is(.p3-iv, .p3-tm, .p3-sg, .p3-dk, .p3-rk) { opacity: 0; visibility: hidden; }

/* the introduction, square at reading distance: its toolbar, subject and who it went to; the body runs off the window */
#intro .p3-em { transform: translate3d(34vw, calc(62 * var(--sv)), 0); }
#intro .p3-em .email { --w: min(1100px, 80vw); width: var(--w); height: 760px; overflow: hidden; }
#intro .p3-em .em-tools { height: 60px; padding: 0 32px; gap: 30px; }
#intro .p3-em .em-tools .ico { width: 22px; height: 22px; }
#intro .p3-em .em-head { padding: 28px 38px 6px; }
#intro .p3-em .em-subj { font-size: 38px; }
#intro .p3-em .em-from { gap: 18px; padding: 18px 38px 6px; }
#intro .p3-em .av { width: 54px; height: 54px; }
#intro .p3-em .em-who { font-size: 23px; line-height: 1.3; }
#intro .p3-em .em-to { margin-top: 2px; font-size: 19px; }
#intro .p3-em .em-time { font-size: 18px; }

/* the meeting both accept, and the follow-ups that pile on it */
#intro .p3-iv .inv { width: 400px; padding: 20px 24px 22px; border-radius: 12px; }
#intro .p3-iv .iv-top { gap: 14px; }
#intro .p3-iv .iv-top .ico { width: 24px; height: 24px; }
#intro .p3-iv .iv-top b { font-size: 24px; }
#intro .p3-iv .iv-when { margin: 8px 0 0 38px; font-size: 18px; }
#intro .p3-iv .iv-who { margin: 12px 0 0 38px; }
#intro .p3-iv .iv-who li { gap: 10px; padding: 4px 0; font-size: 19px; color: #3c4043; }
#intro .p3-tk, #intro .p3-tk0 { flex: none; width: 20px; height: 20px; }
#intro .p3-tk { fill: none; stroke: var(--pen-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#intro .p3-tk path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--tk, 0)); }

/* the heads of terms at reading distance: a legal page in a serif, its terms the six questions; every Agreed cell flat
   grey, every initials box empty. Its words follow --tx (hidden while another sheet lies over them); each row's cells
   follow --rv; the question itself is timed by the script (lifted to display size, then settled into its row). */
#intro .p3-tm .terms { --w: min(1180px, 84vw); position: relative; min-height: calc(118 * var(--sv)); padding: 36px 46px; }
#intro .p3-tm .tm-draft, #intro .p3-tm .tm-stc { font-size: 15px; }
#intro .p3-tm .tm-stc { padding: 5px 12px; border-width: 2px; }
#intro .p3-tm .tm-h { margin: 22px 0; font-size: 30px; }
#intro .p3-tm :is(.tm-colh, .tm-row) { grid-template-columns: 44px 1fr 170px 130px; gap: 0 14px; }
#intro .p3-tm .tm-colh { padding: 10px 0; font-size: 14px; }
#intro .p3-tm .tm-row { position: relative; min-height: 66px; padding: 15px 0; border-bottom-color: transparent; }
#intro .p3-tm .tm-row::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: #d6d6d6; opacity: calc(var(--rv, 0) * var(--tx, 1) * var(--rk, 1)); }
#intro .p3-tm .tm-n { font-size: 22px; }
#intro .p3-tm .tm-q { max-width: 23em; font-size: 25px; line-height: 1.36; font-weight: 400; transform-origin: 0 50%; opacity: 0; visibility: hidden; }
#intro .p3-tm .tm-a { height: 30px; }
#intro .p3-tm .tm-a .fld { top: 7px; height: 16px; }
#intro .p3-tm .tm-ini { gap: 10px; }
#intro .p3-tm .tm-ini .ini { width: 54px; height: 40px; }
#intro .p3-tm .tm-row > :not(.tm-q) { opacity: calc(var(--rv, 0) * var(--tx, 1) * var(--rk, 1)); }
#intro .p3-tm :is(.tm-meta, .tm-h, .tm-colh) { opacity: calc(var(--tx, 0) * var(--rk, 1)); } /* --rk: js, 0 under the lifted card */
/* row 7 lifted out of it (js --sink 0..1): the terms stays the terms, its print faint, and sinks into the table's dark,
   far below the card's white: deepest toward its far edge and in the card's shadow under its foot (js --rkT, --rkB:
   where the lifted card's top and foot fall on it) */
#intro .p3-tm.is-sunk .terms::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom, rgb(7 16 14 / 0.86), rgb(7 16 14 / 0.56) var(--rkT, 30%), rgb(7 16 14 / 0.88) var(--rkB, 62%), rgb(7 16 14 / 0.74));
  opacity: var(--sink, 0); }

/* its signature page: three blank blocks, Buyer, Provider, JV partner; a party's line is printed in its own block (the
   flat grey goes first), the other two stay flat grey */
#intro .p3-sg .terms { --w: min(1300px, 92vw); position: relative; min-height: calc(112 * var(--sv)); padding: 34px 48px; }
#intro .p3-sg .tm-draft, #intro .p3-sg .tm-stc { font-size: 15px; }
#intro .p3-sg .tm-stc { padding: 5px 12px; border-width: 2px; }
#intro .sg-bs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; margin-top: 28px; padding-top: 24px; border-top: 2px solid #141414; }
#intro .sg-k { margin: 0 0 16px; font: 700 15px/1.2 var(--f-sheet); letter-spacing: 0.14em; text-transform: uppercase; color: #555; }
#intro .sg-tx { position: relative; height: calc(6 * 21px * 1.45); }
/* until its line is written, a party's block is the form's own ruled lines (print), never a grey skeleton bar */
#intro .sg-g { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: auto; height: auto; border-radius: 0;
  background: repeating-linear-gradient(to bottom, transparent 0 calc(1.45em - 1px), #b3b9c0 calc(1.45em - 1px) 1.45em); font-size: 21px; }
#intro .sg-l { position: relative; font-size: 21px; line-height: 1.45; color: #141414; }
/* the execution page's own print under the parties: a witness to each signature, and the page's footer */
#intro .sg-wit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 44px; } /* spaced so at 1440x900 no word rests on the window's edge */
#intro .sg-wit b { font: 700 13px/1 var(--f-sheet); letter-spacing: 0.14em; text-transform: uppercase; color: #6b7075; }
#intro .sg-wit i { display: block; height: 1px; margin-top: 30px; background: #9aa1a9; }
#intro .sg-wit span { display: block; margin-top: 7px; font: 400 12.5px/1 var(--f-sheet); color: #6b7075; }
#intro .sg-pg { margin: 64px 0 0; padding-top: 12px; border-top: 1px solid #c9cdd2; font: 400 12.5px/1 var(--f-sheet); letter-spacing: 0.12em; text-transform: uppercase; color: #6b7075; }
@media (max-width: 760px) { #intro .sg-wit, #intro .sg-pg { display: none; } }
#intro .sg-sl { margin-top: 46px; }
#intro .sg-sl i { display: block; height: 1px; background: #555; }
#intro .sg-sl span, #intro .sg-nd span { display: block; margin-top: 8px; font: 600 13px/1.2 var(--f-sheet); letter-spacing: 0.1em; text-transform: uppercase; color: #777; }
#intro .sg-nd { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 22px; }
#intro .sg-nd span { margin-top: 0; padding-top: 30px; border-top: 1px solid #c9c9c9; }
#intro .p3-sg .tm-meta { opacity: var(--sx, 1); }
#intro .p3-sg :is(.sg-sl span, .sg-nd span) { opacity: calc(var(--sx, 1) * max(0.5, var(--kx, 1))); }   /* out of the frame, half strength: print, not a blank */
#intro .p3-sg .sg-k { opacity: calc(var(--sx, 1) * max(0.5, var(--kx, 1)) * var(--kl, 1)); } /* --kl: phone, the label goes as its line leaves up over it */

/* the upside: a glossy deck page, a rising line and no numbers */
#intro .p3-dk .deck { --w: min(900px, 62vw); width: var(--w); }

/* the Risk row: row 7 of the terms, blank under every party; the question printed in it at display size */
#intro .p3-rk .terms { --w: min(1180px, 84vw); padding: 20px 46px 28px; border-top: 2px solid #141414; }
#intro .rk-h { display: flex; align-items: baseline; gap: 18px; }
#intro .rk-h .tm-n { font-size: 22px; }
#intro .rk-t { font: 700 15px/1.2 var(--f-sheet); letter-spacing: 0.14em; text-transform: uppercase; color: #555; }
#intro .rk-q { position: relative; margin: 14px 0 22px; font-size: 48px; line-height: 1.1; font-weight: 700; color: #141414; }
#intro .rk-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
#intro .rk-cols em { display: block; margin-bottom: 9px; font: 600 13px/1.2 var(--f-sheet); letter-spacing: 0.1em; text-transform: uppercase; color: #777; }
#intro .rk-cols .fld { display: block; width: 100%; height: 46px; }

/* ---------- phone: every document full width, its own margins just off the screen ---------- */
@media (max-width: 899px) {
  #intro .cap[data-k="title"] { left: 18px; top: calc(7 * var(--sv)); width: calc(100vw - 36px); }
  #intro .cap[data-k="title"] .h1 { font-size: clamp(34px, 10.4vw, 46px); }
  #intro .cap[data-k="one"] { left: 18px; top: calc(calc(7 * var(--sv)) + 186px); width: calc(100vw - 36px); }
  #intro .cap[data-k="two"] { left: 18px; top: calc(calc(7 * var(--sv)) + 240px); width: calc(100vw - 36px); }
  #intro .cap[data-k="three"], #intro .cap[data-k="four"], #intro .cap[data-k="five"], #intro .cap[data-k="head"], #intro .cap[data-k="up"] { left: 18px; top: calc(5 * var(--sv)); width: calc(100vw - 36px); }

  #intro .p3-em { transform: translate3d(-12px, max(calc(58 * var(--sv)), calc(calc(7 * var(--sv)) + 300px)), 0); }
  #intro .p3-em .email { --w: calc(100vw + 24px); height: 600px; }
  #intro .p3-em .em-tools { height: 50px; padding: 0 30px; gap: 22px; }
  #intro .p3-em .em-tools .ico { width: 19px; height: 19px; }
  #intro .p3-em .em-head { padding: 18px 30px 4px; }
  #intro .p3-em .em-subj { font-size: 26px; }
  #intro .p3-em .em-from { gap: 12px; padding: 12px 30px 4px; }
  #intro .p3-em .av { width: 40px; height: 40px; }
  #intro .p3-em .em-who { font-size: 18px; }
  #intro .p3-em .em-to { font-size: 15px; }
  #intro .p3-em .em-time { font-size: 15px; }

  #intro .p3-iv .inv { width: 290px; padding: 15px 17px 16px; }
  #intro .p3-iv .iv-top { gap: 10px; }
  #intro .p3-iv .iv-top .ico { width: 19px; height: 19px; }
  #intro .p3-iv .iv-top b { font-size: 19px; }
  #intro .p3-iv .iv-when { margin: 6px 0 0 29px; font-size: 15px; }
  #intro .p3-iv .iv-who { margin: 8px 0 0 29px; }
  #intro .p3-iv .iv-who li { gap: 8px; padding: 2px 0; font-size: 15px; }
  #intro .p3-tk, #intro .p3-tk0 { width: 16px; height: 16px; }

  #intro .p3-tm .terms { --w: calc(100vw + 20px); min-height: calc(110 * var(--sv)); padding: 18px 28px; }
  #intro .p3-tm .tm-draft, #intro .p3-tm .tm-stc, #intro .p3-sg .tm-draft, #intro .p3-sg .tm-stc { font-size: 12px; }
  #intro .p3-tm .tm-stc, #intro .p3-sg .tm-stc { padding: 3px 7px; border-width: 1.5px; }
  #intro .p3-tm .tm-h { margin: 12px 0; font-size: 18px; }
  #intro .p3-tm :is(.tm-colh, .tm-row) { grid-template-columns: 20px 1fr 70px; gap: 0 9px; }
  #intro .p3-tm .tm-colh span:last-child, #intro .p3-tm .tm-ini { display: none; }
  #intro .p3-tm .tm-colh { padding: 7px 0; font-size: 12px; }
  #intro .p3-tm .tm-row { min-height: 46px; padding: 10px 0; }
  #intro .p3-tm .tm-n { font-size: 15px; }
  #intro .p3-tm .tm-q { max-width: none; font-size: 17px; line-height: 1.34; }
  #intro .p3-tm .tm-a { height: 22px; }
  #intro .p3-tm .tm-a .fld { top: 5px; height: 12px; }

  #intro .p3-sg .terms { --w: calc(100vw + 20px); min-height: 0; padding: 18px 28px 30px; }
  #intro .sg-bs { grid-template-columns: 1fr; gap: 28px; margin-top: 16px; padding-top: 16px; }
  #intro .sg-k { margin-bottom: 8px; font-size: 12px; }
  #intro .sg-tx { height: calc(6 * 16px * 1.45); }
  #intro .sg-l { font-size: 16px; }
  #intro .sg-sl { margin-top: 30px; }
  #intro .sg-sl span, #intro .sg-nd span { font-size: 12px; }
  #intro .sg-nd { margin-top: 14px; }
  #intro .sg-nd span { padding-top: 22px; }

  #intro .p3-dk .deck { --w: 92vw; }

  #intro .p3-rk .terms { --w: calc(100vw + 20px); padding: 16px 28px 22px; }
  #intro .rk-h .tm-n { font-size: 15px; }
  #intro .rk-t { font-size: 12px; }
  #intro .rk-q { margin: 10px 0 16px; font-size: 31px; }
  #intro .rk-cols { gap: 10px; }
  #intro .rk-cols em { font-size: 12px; letter-spacing: 0.04em; }
  #intro .rk-cols .fld { height: 34px; }
}