/* page 02 #faq · "Read across" (js/p02-faq.js). One pair of sheets per question, lying edge to edge on the
   daylight table: the visitor's own plain sheet with the question (left; phone: top), Hypha's paper with the
   answer (right; phone: under it), read across. Each pair lands over the last; the stack is slid off the far edge
   as the daylight leaves for #next's dark. Per pair (shadow + pair share the vars): --top, --l (left), --seam. */
#faq .fq-desk { position: absolute; inset: 0; transform: none; transform-style: flat; perspective: 1900px; perspective-origin: 50% 26%; --pt: calc(13 * var(--sv)); }
#faq .fq-desk > * { position: absolute; left: var(--l); top: var(--top); width: 112vw; transform-origin: 50% 0; pointer-events: none; }
#faq .fq-desk > :nth-child(1), #faq .fq-desk > :nth-child(2) { --top: calc(24 * var(--sv)); --l: -4vw; --seam: 50vw; }
#faq .fq-desk > :nth-child(3), #faq .fq-desk > :nth-child(4) { --top: calc(8 * var(--sv)); --l: -6vw; --seam: 45vw; }
#faq .fq-desk > :nth-child(5), #faq .fq-desk > :nth-child(6) { --top: calc(14 * var(--sv)); --l: 3vw; --seam: 41vw; }

/* the shadow lies on the table under its pair; its opacity and offset follow the lift (never the shadow itself) */
#faq .fq-shd { height: calc(132 * var(--sv)); visibility: hidden; box-shadow: 0 1px 3px rgb(18 26 24 / 0.22), 0 26px 64px -10px rgb(18 26 24 / 0.3); }

#faq .fq-pair { height: calc(132 * var(--sv)); display: flex; visibility: hidden; }
#faq .fq-sheet { position: relative; height: 100%; box-sizing: border-box; }

/* the visitor's own plain sheet: their face, the question large and bold */
#faq .fq-qs { flex: 0 0 calc(var(--seam) - var(--l)); padding: var(--pt) 3vw 0 calc(7.5vw - var(--l)); background: #fff; }
#faq .fq-n { position: absolute; top: calc(var(--pt) - 34px); left: calc(7.5vw - var(--l)); font: 700 13px/1 var(--f-sheet); letter-spacing: 0.12em; color: #80878c; }
#faq .fq-q { margin: 0; font: 400 clamp(34px, 4.4vw, 72px)/1.07 var(--f-sheet); letter-spacing: -0.016em; color: #121619; pointer-events: auto; }
#faq .fq-q strong { font-weight: 700; }

/* Hypha's paper: a cooler stock lying a hair over the visitor's edge, Hypha's dark tick, Hypha's type */
#faq .fq-as { flex: 1 1 auto; padding: calc(var(--pt) + 6px) 0 0 3.4vw; background: #f4f7f6; box-shadow: -1px 0 0 rgb(18 26 24 / 0.1), -12px 0 26px -16px rgb(18 26 24 / 0.42); }
#faq .fq-band { position: absolute; top: calc(var(--pt) - 30px); left: 3.4vw; width: 38px; height: 3px; background: var(--cine); }
#faq .fq-a { margin: 0; max-width: calc(93vw - var(--seam) - 3.4vw); font: 400 clamp(20px, 2.55vw, 40px)/1.4 var(--f-sheet); letter-spacing: -0.008em; color: var(--ink); pointer-events: auto; }
#faq .fq-s { opacity: 0.9; }

/* the headline heads the first pair, on the table above its top edge */
#faq .fq-head { position: absolute; left: 7.5vw; top: calc(8.5 * var(--sv)); right: auto; z-index: 3; }
#faq .fq-h { margin: 0; font-size: clamp(36px, 4.6vw, 76px); line-height: 1.02; text-transform: none; letter-spacing: -0.022em; }

/* the room #next starts in (.next--dark and its haze) */
#faq .g-dark {
  background:
    radial-gradient(50% 60% at 28% 58%, rgb(14 46 42 / 0.55), transparent 72%),
    radial-gradient(40% 50% at 80% 30%, rgb(29 130 82 / 0.1), transparent 70%),
    var(--cine);
}

@media (max-width: 899px) {
  #faq .fq-desk { perspective: 1200px; perspective-origin: 50% 24%; }
  #faq .fq-desk > :nth-child(1), #faq .fq-desk > :nth-child(2) { --top: calc(20 * var(--sv)); --l: -6vw; }
  #faq .fq-desk > :nth-child(3), #faq .fq-desk > :nth-child(4) { --top: calc(6 * var(--sv)); --l: -6vw; }
  #faq .fq-desk > :nth-child(5), #faq .fq-desk > :nth-child(6) { --top: calc(10 * var(--sv)); --l: 3vw; }
  #faq .fq-shd { height: calc(150 * var(--sv)); }
  #faq .fq-pair { height: auto; flex-direction: column; }
  #faq .fq-sheet { height: auto; }
  #faq .fq-qs { flex: 0 0 auto; padding: 46px calc(var(--l) + 18vw) 28px max(20px, calc(6vw - var(--l))); }
  #faq .fq-n { top: 20px; left: max(20px, calc(6vw - var(--l))); font-size: 12px; }
  #faq .fq-q { font-size: clamp(24px, 7vw, 32px); line-height: 1.12; }
  #faq .fq-as { flex: 1 0 auto; min-height: calc(130 * var(--sv)); padding: 44px calc(var(--l) + 18vw) 0 max(20px, calc(6vw - var(--l))); box-shadow: 0 -1px 0 rgb(18 26 24 / 0.1), 0 -12px 24px -16px rgb(18 26 24 / 0.4); }
  #faq .fq-band { top: 22px; left: max(20px, calc(6vw - var(--l))); width: 30px; }
  #faq .fq-a { max-width: none; font-size: clamp(16px, 4.7vw, 20px); line-height: 1.5; }
  #faq .fq-head { left: 6vw; right: 6vw; top: calc(5.5 * var(--sv)); }
  #faq .fq-h { font-size: clamp(32px, 9.4vw, 44px); }
}