/* Hypha · JV partner · page 03 #faq · "Schedule of questions" (round 2, the amp).
   On the dark meeting table a serif schedule to the heads of terms comes up the table and is picked up to reading
   distance (the sheet bigger than the window: its top, foot and right edge run off). One row at a time at display
   size: its number, the question as the term, the answer as the clause under it, the clause's sentences settling from
   near-full ink to ink with the scroll (opacity on whole sentences only). The finished row folds: its clause folds back
   under the term, the term shrinks into a one-line row above, the sheet slides up one line; the next row opens in its
   place. Agreed and Initials stay empty, flat and unlit: these are answers, not agreed terms. Nothing lit here (P1/P5).
   Every row part is placed by js/p03-faq.js with transforms from the body's top; the columns live here. */
/* the ground's foot meets #again's top 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 the two grounds meet in one tone, no line */
#faq .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%);
}
#faq {
  --fq-ink: #141414; --fq-lab: #6f7378; --fq-rule: #cfd3d8; --fq-cell: #e6e8eb;
  --fq-serif: Georgia, "Times New Roman", serif;
  --fq-sans: var(--f-sheet, "Helvetica Neue", Arial, sans-serif);
  /* columns, in the sheet (desktop): number, term, Agreed, Initials */
  --fq-x0: 5vw; --fq-xt: 11.6vw; --fq-xa: 71.6vw; --fq-xi: 80.8vw; --fq-cw: 7.4vw;
  --fq-tw: 57vw;                        /* the clause's measure */
  --fq-top: calc(18 * var(--sv));                       /* the schedule's head, from the window's top once picked up */
  --fq-D: clamp(30px, 3.5vw, 58px);     /* the open row's number and term (layout() fits it to the widest term) */
  --fq-A: clamp(20px, 2.75vw, 44px);   /* the clause (layout() fits it to the window's height) */
}
#faq .fq-sheet { position: absolute; left: 7vw; top: calc(-40 * var(--sv)); width: 100vw; height: calc(180 * var(--sv)); transform-origin: 44% 36%; }
#faq .fq-doc {
  position: absolute; inset: 0; width: auto; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: #fff; color: var(--fq-ink); font-family: var(--fq-serif); font-size: 16px; line-height: 1.4;
}
#faq .fq-flow { position: absolute; left: 0; right: 0; top: calc(calc(40 * var(--sv)) + var(--fq-top)); }

/* the schedule's head: Schedule · Draft · Subject to contract, the title, the column heads */
#faq .fq-head { position: relative; margin: 0 0 0 var(--fq-x0); width: calc(var(--fq-xi) + var(--fq-cw) - var(--fq-x0)); opacity: 0; }
#faq .fq-t, #faq .fq-meta, #faq .fq-colh { opacity: 0; }
#faq .fq-meta { display: flex; align-items: center; gap: 16px; height: 26px; font-family: var(--fq-sans); font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fq-lab); }
#faq .fq-sch { margin-right: auto; font-weight: 700; color: var(--fq-ink); }
#faq .fq-stc { padding: 3px 9px; border: 1.5px solid var(--fq-ink); color: var(--fq-ink); font-weight: 700; white-space: nowrap; }
#faq .fq-t {
  margin: calc(1.3 * var(--sv)) 0 0; padding: 0 0 calc(1.5 * var(--sv)); border-bottom: 2px solid var(--fq-ink);
  font: 400 clamp(28px, 2.75vw, 46px)/1.12 var(--fq-serif); letter-spacing: -0.005em; color: var(--fq-ink); text-transform: none;
}
#faq .fq-colh { position: relative; height: 36px; border-bottom: 1px solid var(--fq-rule); font-family: var(--fq-sans); font-size: 12.5px; line-height: 36px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fq-lab); }
#faq .fq-colh span { position: absolute; top: 0; }
#faq .fq-ch-t { left: calc(var(--fq-xt) - var(--fq-x0)); }
#faq .fq-ch-a { left: calc(var(--fq-xa) - var(--fq-x0)); }
#faq .fq-ch-i { left: calc(var(--fq-xi) - var(--fq-x0)); }

/* the rows: every part sits at the body's top; the script moves it (open slot, folded line) */
#faq .fq-body { position: relative; height: 1px; margin: 0; padding: 0; list-style: none; }
#faq .fq-row { position: absolute; left: 0; top: 0; width: 100%; margin: 0; padding: 0; }
#faq .fq-row > * { position: absolute; top: 0; margin: 0; padding: 0; transform-origin: 0 0; opacity: 0; }
#faq .fq-n { left: var(--fq-x0); font: 700 var(--fq-D)/1.15 var(--fq-serif); font-variant-numeric: lining-nums; color: var(--fq-ink); }
#faq .fq-q { left: var(--fq-xt); font: 700 var(--fq-D)/1.15 var(--fq-serif); letter-spacing: -0.012em; white-space: nowrap; color: var(--fq-ink); }
#faq .fq-q strong { font-weight: 700; }
#faq .fq-a { left: var(--fq-xt); width: var(--fq-tw); font: 400 var(--fq-A)/1.45 var(--fq-serif); color: var(--fq-ink); transform-origin: 50% 0; }
#faq .fq-s { opacity: 0.9; }
#faq .fq-cells { left: var(--fq-xa); width: calc(var(--fq-xi) + var(--fq-cw) - var(--fq-xa)); height: calc(var(--fq-A) * 1.2); }
#faq .fq-ag, #faq .fq-in { position: absolute; top: 0; height: 100%; width: var(--fq-cw); }
#faq .fq-ag { left: 0; background: var(--fq-cell); }
#faq .fq-in { left: calc(var(--fq-xi) - var(--fq-xa)); display: flex; gap: 8px; }
#faq .fq-in b { flex: 1; background: var(--fq-cell); }
#faq .fq-ln { left: var(--fq-x0); width: calc(var(--fq-xi) + var(--fq-cw) - var(--fq-x0)); height: 1px; background: var(--fq-rule); }

/* phone: the sheet edge to edge (its margins off the screen), one row per screen, the clause in serif at 18 px */
@media (max-width: 899px) {
  #faq {
    --fq-x0: 34px; --fq-xt: 64px; --fq-cw: 54px; --fq-xi: calc(100vw - 60px); --fq-xa: calc(100vw - 124px);
    --fq-top: calc(11 * var(--sv)); --fq-D: 24px; --fq-A: 18px;
  }
  #faq .fq-sheet { left: -14px; top: calc(-30 * var(--sv)); width: calc(100vw + 28px); height: calc(170 * var(--sv)); }
  #faq .fq-flow { top: calc(calc(30 * var(--sv)) + var(--fq-top)); }
  #faq .fq-meta { gap: 10px; font-size: 12px; letter-spacing: 0.1em; }
  #faq .fq-stc { padding: 2px 6px; }
  #faq .fq-t { font-size: 25px; margin-top: 10px; padding-bottom: 10px; }
  #faq .fq-colh { height: 30px; font-size: 12px; line-height: 30px; letter-spacing: 0.06em; }
  #faq .fq-n { line-height: 1.2; }
  #faq .fq-q { left: var(--fq-x0); width: min(280px, calc(100vw - 110px)); line-height: 1.2; white-space: normal; }
  #faq .fq-a { left: var(--fq-x0); width: calc(100vw - 40px); line-height: 1.55; }
  #faq .fq-cells { height: 24px; }
}