/* Hypha · JV partner · page 01 #message (WORLD.md §4.1): the first message. One pinned scene (js/p01-message.js):
   the headline drops into the empty subject line of one real message and you are reading it; the same message riffles
   back through the years; three more offers land on it; your name, your own papers; the selection; the reply you
   don't send. Everything placed here at scroll 0 is where the script puts it (first paint = script). */

#message { --fw: 300px; --pw: min(1080px, 78vw); --bh: 64px; --px: 72px; --pt: 40px; --x0: 30vw; --y0: calc(40 * var(--sv)); --s0: 0.7; }
/* Hypha's dark as the scene scrolls away (12.65..13.5, on #other's own keys): no floor glow, so the seam is plain carbon */
#message .g-dark { background: radial-gradient(circle at 60% 48%, 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); }
/* P3: the dark room is flat (the shared g-room lifts toward its top): no pool, no lift, no glow round Your name */
#message .g-room { background: var(--room); }
#message .desk > * { left: 0; top: 0; transform-origin: 0 0; }
/* the papers here are laid out full size and drawn scaled (the doorway window at 0.7). Where the browser snaps each glyph
   to a whole pixel (Chrome on Linux and Windows at 1x with full hinting) the scaled body read "We s hould work toge ther."
   (rig 1512x982, 2026-10-22; the Mac drew it clean). Unhinted, unsnapped glyph positions keep every word whole at any scale;
   on the Mac nothing changes (checked pixel for pixel at 1512x982). No word moves, fades, is cut or changes. */
#message .desk { text-rendering: geometricPrecision; }
#message .is-hid { visibility: hidden; }

/* ---------- the window: folders + the reading pane (toolbar, the message, the reply) ---------- */
#message .p1-win { width: calc(var(--fw) + var(--pw)); display: flex; align-items: stretch; color: #202124; --f-app: var(--f-google); font-family: var(--f-app, var(--f-sheet));
  transform: translate3d(var(--x0), var(--y0), 0) scale(var(--s0)); }
#message .p1-bks, #message .p1-wsh, #message .p1-psh { position: absolute; top: 0; bottom: 0; }
#message .p1-bks { left: var(--fw); width: var(--pw); }
#message .p1-bks i { position: absolute; inset: 0; border-radius: 14px; background: #fbfbf9; border: 1px solid #d9d9d4; opacity: 0;
  transform: translate(calc(var(--k) * 1.6px), calc(var(--k) * 2.2px)); }
#message .p1-wsh { left: 0; right: 0; border-radius: 14px; box-shadow: 0 46px 90px -24px rgb(20 24 30 / 0.3), 0 8px 22px rgb(20 24 30 / 0.1), 0 0 0 1px rgb(20 24 30 / 0.06); }
#message .p1-psh { left: var(--fw); width: var(--pw); border-radius: 0 14px 14px 0; opacity: 0; box-shadow: 0 34px 80px -20px rgb(20 24 30 / 0.26), 0 4px 14px rgb(20 24 30 / 0.08); }
#message .p1-fold { position: relative; flex: none; width: var(--fw); padding: 22px 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; }
#message .p1-dots { display: flex; gap: 8px; height: 44px; }   /* a web app shows no window lights: the row only keeps the rail's top */
#message .p1-f { margin-left: -22px; padding: 11px 16px 11px 40px; border-radius: 0 22px 22px 0; }
#message .p1-f.is-on { background: #e1e5ea; font-weight: 700; color: #1f1f1f; }
#message .p1-pane { position: relative; flex: none; width: var(--pw); background: #fff; border-radius: 0 14px 14px 0; }
#message .p1-bar { height: var(--bh); display: flex; align-items: center; gap: 26px; padding: 0 var(--px); border-bottom: 1px solid #eceef0; color: #5f6368; }
#message .p1-gap { flex: 1; }
#message .p1-read { position: relative; padding: var(--pt) var(--px) 56px; min-height: calc(calc(78 * var(--sv)) + 60px); perspective: 1600px; perspective-origin: 40% 20%; }
#message .p1-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 30px; }
#message .p1-subj { margin: 0; font-size: 40px; line-height: 1.2; font-weight: 500; letter-spacing: -0.014em; color: #1f1f1f; }
#message .p1-msg .p1-subj { opacity: 0; visibility: hidden; }          /* empty until the headline lands in it */
#message .p1-chip { font-size: 15px; line-height: 1; padding: 7px 12px; border-radius: 6px; background: #e6e9ec; color: #3c4043; font-weight: 600;
  opacity: 0; visibility: hidden; }
#message .p1-from { display: flex; align-items: center; gap: 14px; margin-bottom: 40px; }
#message .p1-from .av { width: 46px; height: 46px; flex: none; }
#message .p1-who { margin: 0; display: flex; flex-direction: column; gap: 3px; font-size: 19px; line-height: 1.2; }
#message .p1-who span { font-size: 15px; color: #5f6368; }
#message .p1-time { margin-left: auto; font-size: 16px; color: #5f6368; white-space: nowrap; }
#message .p1-body { font-size: 24px; line-height: 1.55; }
#message .p1-l { margin: 0 0 16px; }
#message .p1-opp { position: relative; display: inline-block; isolation: isolate; }
#message .p1-sel { position: absolute; inset: 0.06em -0.16em; z-index: -1; border-radius: 3px; background: #d3d7dc; transform: scaleX(0); transform-origin: 0 50%; }
/* the second look (WORLD.md §7): page 03's three questions under the body, flat grey rows */
#message .p1-sl { display: none; }
html.is-second-look #message .p1-sl { display: block; margin-top: 16px; padding-top: 4px; border-top: 1px solid #e6e8eb; }
#message .p1-sl p { margin: 12px 0 7px; font-size: 15px; font-weight: 600; line-height: 1.35; color: #1f1f1f; }
#message .p1-sl .fld { display: block; width: 100%; }
/* the reply: opens empty under the body; the thought is typed in it and never sent */
#message .p1-rp { margin-top: 76px; }
#message .p1-box { position: relative; padding: 22px 28px 24px 74px; border: 1px solid #d6d9dd; border-radius: 14px; background: #fff; opacity: 0; visibility: hidden; }
#message .p1-box .ico-reply { position: absolute; left: 28px; top: 28px; color: #5f6368; }
#message .p1-tw { margin: 0; min-height: 1.5em; font-size: 24px; line-height: 1.5; color: #1f1f1f; }
#message .p1-typed { font-style: normal; }   /* their own words, upright; the curly marks make them a quote */
#message .p1-sig { margin-top: 18px; display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 1.3; color: #5f6368; }
#message .p1-sig b { font-size: 17px; color: #1f1f1f; }
/* the flick sheet: the same message, lifted off the top of the pile one copy at a time */
#message .p1-fl { position: absolute; inset: 0; transform-origin: 0 0; visibility: hidden; }
#message .p1-flsh { position: absolute; inset: 0; box-shadow: 0 40px 70px -16px rgb(20 24 30 / 0.36), 0 6px 18px rgb(20 24 30 / 0.12); opacity: 0; }
#message .p1-flp { position: relative; height: 100%; padding: var(--pt) var(--px) 56px; background: #fff; }
#message .p1-fl.is-blank .p1-flp > * { visibility: hidden; }

/* ---------- your name, big; the offers; your own papers ---------- */
#message .p1-giant { --f-app: var(--f-google); font-family: var(--f-app, var(--f-sheet)); color: #1f1f1f; white-space: nowrap; opacity: 0; visibility: hidden; }
#message .p1-giant b { display: block; font-size: 120px; line-height: 1; font-weight: 700; letter-spacing: -0.04em; }
#message .p1-giant span { display: block; margin-top: 18px; font-size: 54px; line-height: 1.05; font-weight: 500; letter-spacing: -0.02em; color: #5f6368; }
#message .stage.is-dark .p1-giant { color: #f2f0ea; }
#message .stage.is-dark .p1-giant span { color: #a6aaa5; }
#message .p1-pp { opacity: 0; visibility: hidden; }
#message .p1-ppsh { position: absolute; inset: 0; border-radius: 10px; box-shadow: 0 34px 64px -14px rgb(20 24 30 / 0.32), 0 5px 14px rgb(20 24 30 / 0.12); }
#message .p1-pp > .doc { position: relative; margin: 0; }
#message .p1-pp1 .doc { --w: 38vw; width: 38vw; }
#message .p1-pp2 .doc { width: 30vw; }
#message .p1-pp3 .doc { width: 38vw; }
#message .p1-or .doc { width: 31vw; }
#message .p1-cal .doc { --w: 38vw; width: 38vw; --rh: 30px; }
#message .p1-ct .doc { width: 26vw; }
#message .contacts { padding: 22px 26px 16px; }
#message .ct-top { display: flex; justify-content: space-between; align-items: center; font-size: 19px; margin-bottom: 12px; }
#message .ct-list { list-style: none; margin: 0; padding: 0; }
#message .ct-list li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid #eceef0; }
#message .ct-list .fld { flex: 1; height: 10px; }
#message .ct-role { font-size: 14px; line-height: 1; color: #3c4043; background: #eef0f2; border-radius: 999px; padding: 6px 11px; }

/* ---------- Hypha's voice, placed shot by shot (the script moves the ones that sit by the message) ---------- */
#message .cap { position: absolute; left: 0; top: 0; }
#message .cap[data-k="title"] { left: 5vw; top: calc(13 * var(--sv)); width: 58vw; transform-origin: 0 0; }
#message .cap[data-k="title"] .h1 { margin: 0; font-size: min(5.6vw, calc(11.5 * var(--sv))); line-height: 0.94; }
#message .cap[data-k="heard"] { width: 60vw; }
#message .cap[data-k="another"] { width: 30vw; }
#message .cap[data-k="somebody"] { left: 4vw; width: 32vw; }
#message .p1-som [data-line] { position: absolute; left: 0; width: 32vw; }
#message .p1-som [data-line="0"] { top: calc(12.6 * var(--sv)); }
#message .p1-som [data-line="1"] { top: calc(30.6 * var(--sv)); }
#message .p1-som [data-line="2"] { top: calc(50.6 * var(--sv)); }
#message .cap[data-k="maybe"] { width: 60vw; }
#message .cap[data-k="years"] { width: 36vw; }
#message .cap[data-k="yours"] { left: 5vw; top: calc(7 * var(--sv)); width: 88vw; }
#message .p1-cus [data-line] { position: absolute; }
#message .p1-cus [data-line="0"] { left: 36vw; top: calc(64 * var(--sv)); width: 22vw; }
#message .p1-cus [data-line="1"] { left: 62vw; top: calc(44 * var(--sv)); width: 33vw; }
#message .p1-cus [data-line="2"] { left: 31vw; top: calc(8 * var(--sv)); width: 34vw; }
#message .cap[data-k="when"] { width: calc(var(--pw) * 0.42); }
#message .cap[data-k="sometimes"] { width: 40vw; }
#message .stage.is-near .p1-fl, #message .stage.is-near .p1-pp { will-change: transform; }

/* ---------- the phone: the pane edge to edge (its margins just off), the voice above and below the paper ---------- */
@media (max-width: 899px) {
  #message { --fw: 0px; --pw: calc(100vw + 24px); --bh: 52px; --px: 28px; --pt: 20px; --x0: -12px; --y0: calc(40px + 37.6vw); --s0: 1; }
  #message .p1-fold { display: none; }
  #message .p1-pane, #message .p1-psh, #message .p1-bks i, #message .p1-wsh { border-radius: 0; }
  #message .p1-bks i { transform: translate(calc(var(--k) * 0.9px), calc(var(--k) * 1.6px)); }
  #message .p1-bar { gap: 20px; }
  #message .p1-read { min-height: calc(calc(100 * var(--sv)) - 40px); }
  #message .p1-head { gap: 10px 12px; margin-bottom: 22px; }
  #message .p1-subj { font-size: 26px; line-height: 1.25; }
  #message .p1-chip { font-size: 13px; padding: 6px 10px; }
  #message .p1-from { gap: 12px; margin-bottom: 26px; }
  #message .p1-from .av { width: 38px; height: 38px; }
  #message .p1-who { font-size: 16px; }
  #message .p1-who span, #message .p1-time { font-size: 14px; }
  #message .p1-body { font-size: 18px; }
  #message .p1-l { margin-bottom: 12px; }
  #message .p1-rp { margin-top: 64px; }
  #message .p1-box { padding: 16px 18px 18px 52px; }
  #message .p1-box .ico-reply { left: 18px; top: 20px; }
  #message .p1-tw { font-size: 18px; }
  #message .p1-sig b { font-size: 15px; }
  #message .p1-sig { font-size: 14px; margin-top: 12px; }
  #message .p1-giant b { font-size: 60px; }
  #message .p1-giant span { font-size: 27px; margin-top: 8px; }
  #message .p1-pp .doc { width: calc(100vw + 24px); padding-left: 28px; padding-right: 28px; }
  #message .p1-pp3 .doc { aspect-ratio: auto; min-height: 180px; }
  #message .p1-cal .doc { --w: calc(100vw + 24px); --rh: 18px; }
  #message .cap[data-k="title"] { left: 16px; top: 22px; width: calc(100vw - 32px); }
  #message .cap[data-k="title"] .h1 { font-size: 12.4vw; }
  #message .cap[data-k="heard"], #message .cap[data-k="another"], #message .cap[data-k="maybe"], #message .cap[data-k="years"],
  #message .cap[data-k="when"], #message .cap[data-k="sometimes"] { width: calc(100vw - 32px); }
  #message .cap[data-k="somebody"] { left: 16px; top: max(calc(54 * var(--sv)), 440px); width: calc(100vw - 32px); }
  #message .p1-som { font-size: 22px; }
  #message .p1-som [data-line], #message .p1-cus [data-line] { position: static; display: block; width: auto; margin-bottom: 10px; }
  #message .cap[data-k="yours"] { left: 16px; top: calc(4 * var(--sv)); width: calc(100vw - 32px); }
  #message .cap[data-k="customer"] { left: 16px; top: auto; bottom: 14px; width: calc(100vw - 32px); }
}
@media (max-width: 899px) and (max-height: 720px) { html.is-second-look #message .p1-sl { display: none; } }
/* a phone turned on its side: the offer captions sit at the stage's top, on their own surface over the paper (r1, 03) */
@media (max-width: 899px) and (max-height: 500px) { #message .cap[data-k="somebody"] { top: 16px; } }