/* Hypha · JV partner · page 02 · #thing (WORLD.md 5.4, "Compress"), on the daylight table after the film.
   A capability statement at reading distance under the headline; Supply and Maintenance step out of its list and grow
   in ink to display size while the eight claims they do not really deliver are pressed, row by row, into a tight
   flat-grey band (never under 13 px, never struck); the sheet comes up visibly shorter; its "What we don't touch"
   comes up with a big flat grey answer; the statement moves to the left third headed by the supplier's line, beside the
   buyer's requirement sheet and the JV proposal (each question once, as its own document's header, over its empty
   answer blocks); two glossy decks land on top, are turned face down and slid off. Every layer is placed by
   js/p02-thing.js with transforms and opacity: the statement's paper, band and blocks are flat layers the scroll
   presses, its words ride on them. Nothing is lit: nothing here has been agreed. */
#thing .stage { --pad: 56px; --rf: 28px; --df: 76px; --sw: clamp(860px, 70vw, 1060px); --dw: 33.3334vw; --qp: 34px; --qf: clamp(18px, 1.5vw, 23px); }
/* the film's own table and its last dark (as the film paints them), over the ground while the stage rises under it */
#thing .x-flat, #thing .x-dk { position: absolute; inset: 0; }
#thing .x-flat { background: rgb(230, 233, 230); }
#thing .x-dk { opacity: 0; background: radial-gradient(circle at 50% 52%, rgba(8, 132, 85, 0.3) 0%, rgba(1, 58, 33, 0.3) 25%, rgba(1, 19, 13, 0.38) 45%, rgba(0, 0, 0, 0) 66%), linear-gradient(#020605 0%, #04100c 55%, #020605 100%); }
#thing .art { overflow: hidden; }
#thing .th-l { position: absolute; left: 0; top: 0; margin: 0; transform-origin: 0 0; opacity: 0; }
#thing .stage.is-near :is(.th-paper, .th-cs-band, .th-blk, .th-doc, .th-dk) { will-change: transform, opacity; }

/* the statement: paper and band are pressed layers (scaled), never carrying words */
#thing .th-paper { width: var(--sw); height: 1000px; background: #fff; border-radius: 3px; box-shadow: 0 1px 1px rgb(20 28 38 / 0.1), 0 14px 34px -12px rgb(20 28 38 / 0.3); }
#thing .th-cs-band { width: var(--sw); height: 100px; background: #22345a; border-radius: 3px 3px 0 0; }
#thing .th-cs-logo { width: 44px; height: 44px; border-radius: 6px; background: rgb(255 255 255 / 0.18); }
#thing .th-cs-k { font: 700 13px/1 var(--f-sheet); letter-spacing: 0.18em; text-transform: uppercase; color: #fff; white-space: nowrap; }
#thing .th-cs-h { width: calc(var(--sw) - 2 * var(--pad)); padding-bottom: 9px; border-bottom: 2px solid #9fb3d1; font: 700 13px/1 var(--f-sheet); letter-spacing: 0.14em; text-transform: uppercase; color: #22345a; white-space: nowrap; }
#thing .th-rows { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
/* ten rows at reading size; the two they deliver are set at display size and start pressed to the same reading size,
   so they grow crisp (never scaled up past their own size) */
#thing .th-row { font: 700 var(--rf)/1.15 var(--f-sheet); letter-spacing: -0.015em; color: #142039; white-space: nowrap; }
#thing .th-row.th-real { font-size: var(--df); color: #0e1a31; }
#thing .th-blk { width: 100px; height: 100px; background: #e2e5e9; }
#thing .th-q-sup { width: calc(var(--dw) - 2 * var(--qp)); font: 600 var(--qf)/1.32 var(--f-sheet); color: #fff; }

/* the buyer's requirement sheet (a form tool's face) and the JV proposal (a legal serif) */
#thing .th-doc { width: var(--dw); height: calc(130 * var(--sv)); background: #fff; border-radius: 3px; box-shadow: 0 1px 1px rgb(20 28 38 / 0.1), 0 14px 34px -12px rgb(20 28 38 / 0.3); }
#thing .th-dh { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 var(--qp); border-bottom: 1px solid #e1e4e8; font: 600 14px/1 var(--f-app, var(--f-sheet)); color: #3c4043; }
#thing .th-rq .th-dh { background: #f4f5f7; border-radius: 3px 3px 0 0; }
#thing .th-ico { flex: none; width: 20px; height: 24px; border-radius: 3px; background: #c6ced8; }
#thing .th-dn { flex: 1; }
#thing .th-st { padding: 5px 8px; border-radius: 3px; background: #e8eaed; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #5f6368; }
#thing .th-doc .th-q { margin: 0; padding: 24px var(--qp) 0; font: 600 var(--qf)/1.32 var(--f-sheet); color: #15202b; }
#thing .th-jv .th-dh { border-bottom: 0; }
#thing .th-jv .th-dn { font: 700 12px/1 var(--f-sheet); letter-spacing: 0.2em; text-transform: uppercase; color: #6b5a3a; }
#thing .th-rule { display: block; height: 0; margin: 0 var(--qp); border-top: 1px solid #cfc7b8; }
#thing .th-jv .th-q { padding-top: 18px; font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: calc(var(--qf) * 1.1); line-height: 1.3; color: #1d1a16; }
#thing .th-f { display: block; height: calc(12 * var(--sv)); margin: 16px var(--qp) 0; background: #e2e5e9; border-radius: 2px; }
#thing .th-f:first-child { margin-top: 26px; }
#thing .th-jv .th-f { height: calc(64 * var(--sv)); }

/* the two glossy decks: turned face down with a real 3D turn (the .face inside), their lift a shadow layer */
#thing .th-dk { transform-origin: 50% 50%; perspective: 1800px; }
#thing .th-dk .deck { --w: 38vw; }
#thing .th-dk .dk-h { font-size: clamp(30px, 2.8vw, 44px); }
#thing .th-dk .dk-k { font-size: 13px; }
#thing .th-lift { position: absolute; inset: 0; border-radius: 8px; box-shadow: 0 34px 60px -22px rgb(10 16 24 / 0.55), 0 8px 18px -6px rgb(10 16 24 / 0.32); opacity: 0; }

/* Hypha's voice: each cap placed by the scene (translate), never a column */
#thing .caps .cap { position: absolute; left: 0; top: 0; right: auto; bottom: auto; margin: 0; }
#thing .cap[data-k="title"] { width: min(78vw, 1080px); }
#thing .cap[data-k="nover"] { width: 26vw; }
#thing .cap[data-k="sayno"], #thing .cap[data-k^="b"] { width: 88vw; }
#thing .cap .vo-l { font-size: clamp(24px, 2.25vw, 34px); line-height: 1.22; }
#thing .cap .vo-xl { font-size: clamp(32px, 3.6vw, 56px); line-height: 1.08; }

@media (max-width: 899px) {
  #thing .stage { --pad: 22px; --rf: 21px; --df: 44px; --sw: calc(100vw + 2px); --dw: calc(100vw + 2px); --qp: 22px; --qf: 17px; }
  #thing .th-cs-logo { width: 36px; height: 36px; }
  #thing .th-dh { height: 46px; font-size: 13px; }
  #thing .th-doc .th-q { padding-top: 18px; }
  #thing .th-jv .th-q { padding-top: 14px; }
  #thing .th-f { height: calc(11 * var(--sv)); margin-top: 14px; }
  #thing .th-f:first-child { margin-top: 20px; }
  #thing .th-jv .th-f { height: calc(50 * var(--sv)); }
  #thing .th-dk .deck { --w: min(300px, calc(35.5 * var(--sv))); padding: 14px 16px; }
  #thing .th-dk .dk-h { font-size: 20px; }
  #thing .th-dk .dk-k { font-size: 12px; }
  #thing .cap[data-k="title"], #thing .cap[data-k="sayno"], #thing .cap[data-k^="b"] { width: calc(100vw - 44px); }
  #thing .cap[data-k="nover"] { width: calc(100vw - 196px); }
  #thing .cap .vo-l { font-size: 18px; line-height: 1.28; }
  #thing .cap .vo-xl { font-size: clamp(21px, calc(3.4 * var(--sv)), 28px); line-height: 1.12; }
}