/* #question · "Start with a question worth answering" (WORLD.md 4.6), from the film's paper to the flat paper #faq lies
   on. Nothing typed, nothing lit; the eyes stay still, the paper moves.
   S0 the headline; S1/S2 two glossy deck slides at full frame, each behind a wrong first question (white on Hypha's
   dark quiet surface), out the way they came; S3 one plain page lands square at reading distance, the right question
   its printed title, two big empty answers open under it; S4 it lies down on the desk, big, in perspective, the line
   huge across the desk above its far edge; S5 picked up near, the empty answers fill the frame, the line on the page
   under them; S6 its foot comes up (two empty signature lines with their dates), the last line on the desk under it. */
#question .gnd .g-flat { background: var(--paper-in); }
#question .cam { position: absolute; inset: 0; perspective: 1500px; perspective-origin: 50% 40%; }
#question .desk { position: absolute; inset: 0; transform-style: preserve-3d; }
#question .desk > * { position: absolute; left: 0; top: 0; opacity: 0; visibility: hidden; }
#question .stage.is-near .desk > * { will-change: transform, opacity; }
#question .cap { position: absolute; }

/* the glossy slides: 16:9, wider than the window; their words in the part of them the window shows */
#question .p1q-dk { width: 118vw; height: calc(118vw * 9 / 16); }
#question .p1q-dk .deck { --w: 100%; position: relative; width: 100%; height: 100%; aspect-ratio: auto; padding: 0; border-radius: 16px; overflow: hidden; color: #fff;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14), inset 0 -60px 120px rgb(0 0 0 / 0.28); }
#question .p1q-d1 .deck { background: radial-gradient(60% 50% at 24% 0%, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0) 70%), linear-gradient(135deg, #0f172a 0%, #1e3a5f 55%, #2563eb 100%); }
#question .p1q-d2 .deck { background: radial-gradient(60% 50% at 80% 0%, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0) 70%), radial-gradient(120% 130% at 0% 100%, #ff8a3d 0%, #d6461f 30%, #3b1308 92%); }
/* the sheen: held by the room while the slide passes (the script moves it against the slide) */
#question .p1q-gl { position: absolute; top: -30%; bottom: -30%; left: 40%; width: 44%; pointer-events: none;
  background: linear-gradient(104deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 0.05) 30%, rgb(255 255 255 / 0.2) 47%, rgb(255 255 255 / 0.07) 56%, rgb(255 255 255 / 0) 100%); }
#question .p1q-dw { position: absolute; left: calc(50% - 50vw + 8vw); top: 13%; width: min(60vw, 940px); }
#question .p1q-d2 .p1q-dw { left: auto; right: calc(50% - 50vw + 8vw); top: auto; bottom: 15%; text-align: right; }
#question .p1q-dk .dk-k { margin: 0; font-size: 15px; }
#question .p1q-dk .dk-h { margin: 14px 0 0; font-size: clamp(40px, 4.4vw, 70px); line-height: 1.04; }
#question .p1q-dk .dk-rule { width: 88px; height: 6px; margin-top: 24px; border-radius: 3px; }
#question .p1q-d2 .dk-rule { margin-left: auto; }

/* the plain page: a flat grey box its letterhead, the right question its title, two empty answers, the room for a
   line, the foot: two empty signature lines, each with its date */
#question .p1q-pg { width: min(1240px, 86vw); }
#question .p1q-doc { --w: 100%; width: 100%; box-sizing: border-box; padding: 64px 88px 72px; border-radius: 6px; background: #fff; color: #1f1f1f; }
#question .p1q-logo { display: block; width: 136px; height: 40px; margin: 0; border-radius: 6px; }
#question .p1q-ttl { margin: 40px 0 0; max-width: 21em; font-size: clamp(34px, 3.4vw, 52px); font-weight: 400; line-height: 1.14; letter-spacing: -0.016em; text-wrap: balance; }
#question .p1q-ttl strong { font-weight: 700; }
#question .p1q-ans { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 40px; }
#question .p1q-a { display: block; width: auto; height: calc(34 * var(--sv)); margin: 0; border-radius: 12px; transform-origin: 50% 0; opacity: 0; }
#question .p1q-room { height: calc(16 * var(--sv)); }
#question .p1q-ft { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
#question .p1q-sc { display: grid; grid-template-columns: 1fr 32%; column-gap: 24px; row-gap: 10px; }
#question .p1q-sg { display: block; height: 60px; border-bottom: 2px solid #9aa1a9; }
#question .p1q-lb { font-size: 15px; line-height: 1.2; color: #6b7178; letter-spacing: 0.01em; }

/* Hypha's lines: white on Hypha's dark in front of the slides; huge across the desk; on the page's white; on the
   flat desk under the page's foot */
#question .p1q-c0 { left: 6vw; right: 6vw; top: calc(30 * var(--sv)); }
@media (min-width: 900px) { #question .p1q-c0 .display { font-size: clamp(56px, 7.2vw, 116px); } }
#question .p1q-c1 { left: 8vw; width: min(80vw, 1160px); top: calc(55 * var(--sv)); }
#question .p1q-c2 { right: 8vw; width: min(80vw, 1160px); top: calc(11 * var(--sv)); text-align: right; }
#question .p1q-c1 .vo, #question .p1q-c2 .vo { color: #f6f7f5; }
@media (min-width: 900px) { #question .p1q-c1 .vo, #question .p1q-c2 .vo { font-size: clamp(54px, 5.4vw, 92px); line-height: 1.06; } }
#question .p1q-c3 { left: 7vw; right: 7vw; top: calc(9 * var(--sv)); text-align: center; }
#question .p1q-c3 .vo { font-size: clamp(46px, 5vw, 84px); line-height: 1.08; }
#question .p1q-c4 { left: calc(50% - 1.3 * (min(1240px, 86vw) / 2 - 88px)); right: calc(50% - 1.3 * (min(1240px, 86vw) / 2 - 88px)); top: calc(56 * var(--sv)); }
#question .p1q-c4 .vo { font-size: clamp(34px, 3.5vw, 56px); line-height: 1.16; }
#question .p1q-w { background: #fff; box-shadow: 0 0 0 10px #fff; }
#question .p1q-c5 { left: 10vw; right: 10vw; top: calc(68 * var(--sv)); text-align: center; }
#question .p1q-c5 .vo { font-size: clamp(36px, 3.6vw, 58px); line-height: 1.16; }

@media (max-width: 899px) {
  #question .cam { perspective: 1100px; perspective-origin: 50% 36%; }
  #question .p1q-dk { width: calc(calc(104 * var(--sv)) * 16 / 9); height: calc(104 * var(--sv)); }
  #question .p1q-dw { left: calc(50% - 50vw + 22px); top: 12%; width: calc(100vw - 44px); }
  #question .p1q-d2 .p1q-dw { left: auto; right: calc(50% - 50vw + 22px); top: auto; bottom: 13%; }
  #question .p1q-dk .dk-k { font-size: 12px; }
  #question .p1q-dk .dk-h { margin-top: 8px; font-size: 30px; line-height: 1.08; }
  #question .p1q-dk .dk-rule { width: 48px; height: 4px; margin-top: 12px; }
  #question .p1q-pg { width: calc(100vw + 32px); }
  #question .p1q-doc { padding: 26px 44px 44px; border-radius: 4px; }
  #question .p1q-logo { width: 96px; height: 30px; border-radius: 5px; }
  #question .p1q-ttl { margin-top: 20px; font-size: 25px; line-height: 1.2; letter-spacing: -0.01em; }
  #question .p1q-ans { gap: 12px; margin-top: 20px; }
  #question .p1q-a { height: calc(34 * var(--sv)); border-radius: 10px; }
  #question .p1q-room { height: calc(36 * var(--sv)); }
  #question .p1q-ft { gap: 16px; }
  #question .p1q-sc { grid-template-columns: 1fr 38%; column-gap: 10px; row-gap: 6px; }
  #question .p1q-sg { height: 44px; }
  #question .p1q-lb { font-size: 13px; }
  #question .p1q-c0 { left: 18px; right: 18px; top: calc(26 * var(--sv)); }
  #question .p1q-c1, #question .p1q-c2 { left: 18px; right: 18px; width: auto; }
  #question .p1q-c1 { top: calc(57 * var(--sv)); }
  #question .p1q-c2 { top: calc(17 * var(--sv)); text-align: left; }
  #question .p1q-c3 { left: 18px; right: 18px; top: calc(8 * var(--sv)); text-align: left; }
  #question .p1q-c3 .vo { font-size: 28px; line-height: 1.16; }
  #question .p1q-c4 { left: 22px; right: 22px; top: calc(48 * var(--sv)); }
  #question .p1q-c4 .vo { font-size: 22px; line-height: 1.25; }
  #question .p1q-c5 { left: 18px; right: 18px; top: calc(66 * var(--sv)); text-align: left; }
  #question .p1q-c5 .vo { font-size: 24px; line-height: 1.22; }
}