/* Hypha · JV partner · page 03 · #again (WORLD.md 6.5, the eyes move 3 of 3): the match-cut home. The dark meeting
   table with a few of the journey's papers lying on it, the first message among them, unlit. The first message is
   picked up and brought to exactly page 01's reading framing (the window min(1080px, 78vw) wide, its subject at calc(22 * var(--sv));
   phone: the pane edge to edge, the subject 96 px from the top), now on the dark. The visitor's grey selection runs
   over the subject; the reply opens under the message, empty; the three questions go into it one by one, whole, and
   it is never sent. The message is put down into the dark; LOOK AGAIN. and the button that starts Recall end the page.
   Script: js/p03-again.js (every pose is computed there from the measured window). */

#again { --g: max(var(--gutter, 24px), 5vw); }
#again .stage { overflow: hidden; }
#again .art { position: absolute; inset: 0; }
#again .ag-cam { position: absolute; inset: 0; perspective: 1500px; perspective-origin: 50% 10%; }

/* ---------- the table: a few of the journey's papers lying on the dark, unlit ---------- */
#again .ag-tbl { position: absolute; inset: 0; perspective: 1500px; perspective-origin: 50% 10%; }
#again .ag-p { position: absolute; left: 0; top: 0; transform-origin: 50% 0; }
#again .ag-p > .doc { box-shadow: 0 1px 0 rgb(0 0 0 / 0.35), 0 28px 56px -18px rgb(0 0 0 / 0.8); }
#again .ag-tm .terms { --w: 640px; width: 640px; }
#again .ag-pr .press { --w: 600px; width: 600px; min-height: 640px; }

/* ---------- the first message: page 01's window (folders + the reading pane), the reply under it ---------- */
#again .ag-win { --fw: min(236px, 17vw); --ww: min(1080px, 78vw); --pw: calc(var(--ww) - var(--fw)); --bh: 62px; --px: clamp(28px, 3.4vw, 52px); --pt: 40px;
  position: absolute; left: 0; top: 0; z-index: 2; width: var(--ww); display: flex; align-items: stretch; transform-origin: 50% 0;
  color: #202124; --f-app: var(--f-google); font-family: var(--f-app, var(--f-sheet)); }
#again .ag-wsh { position: absolute; inset: 0; border-radius: 14px; box-shadow: 0 54px 110px -30px rgb(0 0 0 / 0.8), 0 10px 28px rgb(0 0 0 / 0.38); }
#again .ag-fold { position: relative; flex: none; width: var(--fw); padding: 22px; border-radius: 14px 0 0 14px; background: #f1f3f4;
  display: flex; flex-direction: column; gap: 4px; font-size: 18px; line-height: 1.2; color: #3c4043; }
#again .ag-dots { display: flex; gap: 8px; height: 44px; }   /* a web app shows no window lights: the row only keeps the rail's top */
#again .ag-f { margin-left: -22px; padding: 11px 16px 11px 40px; border-radius: 0 22px 22px 0; }
#again .ag-f.is-on { background: #e1e5ea; font-weight: 700; color: #1f1f1f; }
#again .ag-pane { position: relative; flex: none; width: var(--pw); background: #fff; border-radius: 0 14px 14px 0; }
#again .ag-bar { height: var(--bh); display: flex; align-items: center; gap: 26px; padding: 0 var(--px); border-bottom: 1px solid #eceef0; color: #5f6368; }
#again .ag-bar .ico { width: 20px; height: 20px; }
#again .ag-gap { flex: 1; }
#again .ag-read { position: relative; padding: var(--pt) var(--px) 48px; min-height: calc(calc(78 * var(--sv)) + 60px); display: flex; flex-direction: column; }
#again .ag-head { margin-bottom: 30px; }
#again .ag-subj { position: relative; display: inline-block; isolation: isolate; margin: 0; font-size: 40px; line-height: 1.2; font-weight: 500;
  letter-spacing: -0.014em; color: #1f1f1f; }
#again .ag-sel { position: absolute; inset: 0.04em -0.14em; z-index: -1; border-radius: 3px; background: #d3d7dc; transform: scaleX(0); transform-origin: 0 50%; }
#again .ag-from { display: flex; align-items: center; gap: 14px; margin-bottom: 36px; }
#again .ag-from .av { width: 46px; height: 46px; flex: none; }
#again .ag-who { margin: 0; display: flex; flex-direction: column; gap: 3px; font-size: 19px; line-height: 1.2; }
#again .ag-who span { font-size: 15px; color: #5f6368; }
#again .ag-time { margin-left: auto; font-size: 16px; color: #5f6368; white-space: nowrap; }
#again .ag-body { font-size: 24px; line-height: 1.55; color: #1f1f1f; }
#again .ag-body p { margin: 0 0 14px; }
/* the reply: opens empty under the message; their three questions go into it, numbered, whole; it is never sent */
#again .ag-rp { flex: 1; display: flex; flex-direction: column; margin-top: 34px; opacity: 0; }
#again .ag-box { flex: 1; position: relative; padding: 24px 30px 28px 74px; border: 1px solid #d6d9dd; border-radius: 14px; background: #fff; }
#again .ag-box .ico-reply { position: absolute; left: 28px; top: 29px; width: 20px; height: 20px; color: #5f6368; }
#again .ag-qs { margin: 0; padding: 0; list-style: none; counter-reset: agq; }
#again .ag-q { counter-increment: agq; position: relative; padding-left: 1.6em; font-size: 24px; line-height: 1.45; color: #1f1f1f; }
#again .ag-q + .ag-q { margin-top: 14px; }
#again .ag-q::before { content: counter(agq) "."; position: absolute; left: 0; top: 0; font-weight: 500; color: #80868b; }
#again .ag-q strong { font-weight: 700; }

/* ---------- Hypha's voice, placed beat by beat on the dark (the script writes the measured places) ---------- */
#again .caps { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
#again .cap { position: absolute; margin: 0; right: auto; bottom: auto; }
#again .cap[data-k="title"] { left: var(--g); top: calc(9 * var(--sv)); width: min(1120px, 80vw); }
#again .cap[data-k="rem"] { left: var(--g); right: var(--g); top: calc(9 * var(--sv)); text-align: center; }
#again .cap[data-k="quote"] { left: var(--wx, 10vw); width: var(--wq, 80vw); top: var(--qt, calc(20 * var(--sv))); }
#again .cap[data-k="maybe"] { left: var(--vx, 10vw); width: var(--vw, 70vw); top: var(--mt, calc(60 * var(--sv))); }
#again .cap[data-k="before"] { left: var(--vx, 10vw); width: var(--vw, 70vw); top: var(--bt, calc(70 * var(--sv))); }
#again .cap[data-k="worth"] { left: var(--g); right: var(--g); top: calc(38 * var(--sv)); text-align: center; }
#again .cap[data-k="look"] { left: var(--g); right: var(--g); top: calc(33 * var(--sv)); text-align: center; pointer-events: auto; }
#again .ag-xl { font-size: clamp(40px, 5.6vw, 86px); line-height: 1.06; font-weight: 400; letter-spacing: -0.02em; }
#again .cap[data-k="before"] .vo { max-width: 30em; }
#again .cap .cta { margin-top: clamp(24px, calc(4 * var(--sv)), 40px); }

#again .stage.is-near .ag-win, #again .stage.is-near .ag-tbl, #again .stage.is-near .ag-p,
#again .stage.is-near .ag-rp, #again .stage.is-near .ag-sel { will-change: transform, opacity; }
#again .stage.is-near .ag-head, #again .stage.is-near .ag-from, #again .stage.is-near .ag-body { will-change: opacity; }

/* ---------- the phone: the pane edge to edge (its own margins just off the screen), no folders ---------- */
@media (max-width: 899px) {
  #again { --g: 20px; }
  #again .ag-cam, #again .ag-tbl { perspective: 1100px; }
  #again .ag-tm .terms { --w: 360px; width: 360px; }
  #again .ag-pr .press { --w: 340px; width: 340px; min-height: 420px; }
  #again .ag-win { --fw: 0px; --ww: calc(100vw + 24px); --bh: 46px; --px: 30px; --pt: 22px; }
  #again .ag-fold { display: none; }
  #again .ag-pane { border-radius: 12px; }
  #again .ag-wsh { border-radius: 12px; }
  #again .ag-bar { gap: 20px; }
  #again .ag-bar .ico { width: 17px; height: 17px; }
  #again .ag-read { padding-bottom: 26px; min-height: calc(calc(100 * var(--sv)) - 60px); }
  #again .ag-head { margin-bottom: 18px; }
  #again .ag-subj { font-size: 26px; }
  #again .ag-from { gap: 10px; margin-bottom: 18px; }
  #again .ag-from .av { width: 36px; height: 36px; }
  #again .ag-who { font-size: 16px; }
  #again .ag-who span { font-size: 13px; }
  #again .ag-time { font-size: 13px; }
  #again .ag-body { font-size: 17px; line-height: 1.5; }
  #again .ag-body p { margin-bottom: 8px; }
  #again .ag-rp { margin-top: 18px; }
  #again .ag-box { padding: 15px 16px 17px 46px; border-radius: 12px; }
  #again .ag-box .ico-reply { left: 16px; top: 18px; width: 16px; height: 16px; }
  #again .ag-q { font-size: 17px; line-height: 1.4; }
  #again .ag-q + .ag-q { margin-top: 10px; }
  #again .cap[data-k="title"] { top: calc(11 * var(--sv)); width: auto; right: var(--g); }
  #again .cap[data-k="rem"] { top: calc(8 * var(--sv)); }
  #again .cap[data-k="worth"] { top: calc(34 * var(--sv)); }
  #again .cap[data-k="look"] { top: calc(30 * var(--sv)); }
  #again .ag-xl { font-size: clamp(38px, 11vw, 48px); }
}