/* =========================================================
   AMALGAVERSE · mission-01.css (Builder M)
   The episode page. Every selector starts with a section id (#log #contacts #theme #previously #tag
   #lattice #debrief), #tear, or a mission-01-only class (.m-*, .ctag, .bracket, .rdo, .opstag, .shiptag).
   Moved from v0.2 home/index.html: #tear [53–57] · log [232–240] · contacts [242–266] · act breaks [273–275] ·
   previously [306–339] · legend [370–376] · wind-down [413–415] · fx tags [446–463] + their responsive lines.
   ========================================================= */

/* ---------- "On screen" tear band (mission-01 only) ---------- */
#tear{position:fixed;left:0;right:0;top:0;height:24vh;z-index:1;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,transparent,rgba(5,7,11,.6) 35%,rgba(92,242,214,.08) 50%,rgba(5,7,11,.6) 65%,transparent),
  repeating-linear-gradient(180deg,rgba(255,255,255,.035) 0 1px,transparent 1px 4px)}
#tear.run{animation:m01tear .32s linear}
@keyframes m01tear{0%{opacity:1;transform:translateY(-30vh)}100%{opacity:1;transform:translateY(110vh)}}

/* shared text shadows: every section's copy sits over live 3D */
#log .slug,#log .dek,#log .meta-line,#contacts .slug,#contacts .hint,#contacts .quote,#contacts h2,#contacts .small,
#previously > .wrap .slug,#previously h2,#theme .slug,#theme .big,#theme .cite{text-shadow:0 1px 12px rgba(5,7,11,.95),0 0 3px rgba(5,7,11,.9)}

/* ---------- 1 · title card + Captain's Log ---------- */
#log{padding:calc(var(--hud-h) + 5vh) 0 3vh}   /* :root already pads the top safe-area inset */
#log .m-head{margin:0 0 24px;max-width:720px}
#log h1{font-size:clamp(40px,4.9vw,72px);margin-bottom:14px}
#log .dek{margin:0 0 14px}
#log .meta-line{margin:0 0 4px}
/* in-page contents: the shared .toc (site.css) */
#log .logwrap{display:grid;gap:14px}
#log .logwrap .slug{margin-bottom:0}
#log .logwrap h2{font-size:clamp(28px,3.2vw,44px);margin-bottom:0}
#log .logtext p:not(.cite){font:400 17px/1.6 var(--f-script);margin:0 0 14px}
#log .logtext .cite{margin:0}
#log .logtext .key{color:var(--phosphor);background:linear-gradient(transparent 62%,rgba(92,242,214,.12) 62%)}
#log .logside{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
#log .logside .tx{width:100%;max-width:264px;margin:0}
#log .logread{display:grid;gap:10px}
#log .voice{display:flex;gap:2px;align-items:center;height:28px}
#log .voice i{display:block;width:3px;height:30%;background:var(--phosphor);opacity:.7}

/* ---------- 2 · four contacts ---------- */
#contacts{padding:7vh 0 3vh}
#contacts .quote{margin-bottom:8px}
#contacts .hint{font:500 12px/1.4 var(--f-mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;color:#b4c0ca;margin:0 0 14px}
#contacts .cgrid{display:grid;gap:12px}
#contacts .ccard{padding:16px 20px 14px}
#contacts .ccard .top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap}
#contacts .ccard .lab{font:600 11.5px/1 var(--f-mono);font-stretch:87.5%;letter-spacing:.12em;text-transform:uppercase;color:var(--dust)}
#contacts .ccard h3{margin-bottom:4px}
#contacts .ccard .readout{margin-bottom:8px;color:var(--phosphor);font-size:12px;line-height:1.5}
#contacts .ccard p{font-size:16px;line-height:1.55;margin-bottom:10px}
#contacts .ccard .body{display:grid;grid-template-columns:1fr;gap:14px}
#contacts .ccard.c1 .body{grid-template-columns:1fr 112px}
#contacts .ccard .thumb{width:112px}
#contacts .ccard .thumb .tx{margin:0;aspect-ratio:3/4}
#contacts .ccard .thumb .tx figcaption{padding:16px 8px 8px;font-size:11px}
#contacts .ccard[data-active="true"]{box-shadow:inset 0 0 0 1px var(--phosphor)}
#contacts .cfoot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
#contacts .ccard .novis{display:inline-flex;aspect-ratio:auto;margin:0;padding:8px 10px;font-size:11px;letter-spacing:.1em}
#contacts .hail{margin:10px 0 0;font:400 16px/1.5 var(--f-script)}
#contacts .hail:empty{margin:0}
#contacts .c-note{margin:14px 0 0}
/* the three contacts not chosen: compact rows (title, readout, On screen); the transmission text sits behind a disclosure */
#contacts .ccard.mini{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 14px;align-items:center;padding:12px 18px 10px}
#contacts .ccard.mini .top{grid-column:1/-1;margin-bottom:2px}
#contacts .ccard.mini h3{grid-column:1;font-size:clamp(18px,1.5vw,21px);margin:0 0 2px}
#contacts .ccard.mini .readout{grid-column:1;margin:0;font-size:11.5px}
#contacts .ccard.mini > .row{grid-column:2;grid-row:2/4;align-self:center}
#contacts .ccard.mini .cmore{grid-column:1/-1;margin-top:6px}
#contacts .cmore summary{display:block;padding:12px 0 10px 28px;text-indent:-28px;min-height:44px;cursor:pointer;list-style:none;font:500 12px/1.45 var(--f-mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;color:var(--phosphor)}
#contacts .cmore summary::-webkit-details-marker{display:none}
#contacts .cmore summary .nv{color:var(--dust)}
#contacts .cmore summary::before,#previously .decs summary::before{content:"+";display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-right:10px;vertical-align:-3px;text-indent:0;border:1px solid currentColor;font:600 13px/1 var(--f-mono)}
#contacts .cmore[open] summary::before,#previously .decs[open] summary::before{content:"−"}
#contacts .cmore p{margin:2px 0 6px}
#contacts .cside{display:none}

/* ---------- 3 · opening theme + title card ---------- */
#theme{padding:4vh 0 0}
#theme .theme{min-height:0;padding:3vh 0 0;background:none}
#theme .titlecard{height:clamp(240px,32vh,320px)}

/* ---------- 4 · previously on ---------- */
#previously{padding:6vh 0 1vh}
#previously h2{margin-bottom:12px}
.m-acts{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.m-acts a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border:1px solid var(--line-2);background:rgba(5,7,11,.62);
  font:500 11px/1 var(--f-mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;color:var(--starlight);text-decoration:none}
.m-acts a:hover{border-color:var(--phosphor)}
#previously .suplog{margin:0 0 6px}
#previously .act{padding:18px 22px 10px;margin-top:12px}
#previously .act h3{margin:0 0 4px}
#previously .act .top{display:flex;align-items:center;gap:10px;margin:0 0 12px;flex-wrap:wrap}
#previously .act .lab{font:600 12px/1 var(--f-mono);font-stretch:87.5%;letter-spacing:.12em;text-transform:uppercase;color:var(--dust)}
#previously .abody{display:grid;gap:14px;margin:0 0 8px}
#previously .stills{position:relative;margin:0 8px 0 0;max-width:440px}
#previously .stills .tx{margin:0}
#previously .stills .inset{position:absolute;right:-8px;top:-8px;width:28%;z-index:2;box-shadow:0 0 0 2px var(--void),0 6px 18px rgba(0,0,0,.6)}
#previously .stills .inset.wide{width:42%}
#previously .stills .inset figcaption{padding:14px 6px 6px;font-size:11px}
#previously .sum,#previously .sum p{font-size:16.5px;line-height:1.6;margin:0}
#previously .sum p{margin-bottom:8px}
#previously .a0 .sum{margin-bottom:6px}
#previously .pull{margin:10px 0 4px;padding-left:16px;border-left:2px solid var(--atemporal)}
/* each act's decisions sit behind one disclosure (the act summary and stills stay visible) */
#previously .decs{margin:10px 0 0;border-top:1px solid rgba(154,169,181,.14)}
#previously .decs summary{display:block;padding:13px 0 11px 28px;text-indent:-28px;min-height:48px;cursor:pointer;list-style:none;font:500 12.5px/1.5 var(--f-mono);font-stretch:87.5%;letter-spacing:.07em;text-transform:uppercase;color:var(--dust)}
#previously .decs summary::-webkit-details-marker{display:none}
#previously .decs summary::before{color:var(--phosphor)}
#previously .decs summary .sn{color:var(--phosphor)}
#previously .decs summary .fl{color:var(--lunch)}
#previously .decs summary:hover{color:var(--starlight)}
#previously .dec{list-style:none;margin:0 0 6px;padding:0;border-top:1px solid rgba(154,169,181,.14)}
#previously .dec li{display:grid;grid-template-columns:58px 1fr auto;gap:2px 10px;align-items:center;padding:8px 0;min-height:48px;border-bottom:1px solid rgba(154,169,181,.1);font-size:15px;line-height:1.4;break-inside:avoid}
#previously .dec .d{font:500 11.5px/1.4 var(--f-mono);font-stretch:87.5%;letter-spacing:.05em;text-transform:uppercase;color:var(--dust)}
#previously .dec .qa .c{color:var(--starlight)}
#previously .dec .qa .qq{display:block;color:var(--dust)}   /* question on its own line, answer below: every row has the same rhythm */
#previously .dec .qa .arr{color:var(--lunch);padding:0 6px 0 0}
#previously .dec .st{display:inline-block;font:600 12px/1 var(--f-mono);font-stretch:87.5%;letter-spacing:.06em;text-transform:uppercase;padding:4px 6px;border:1px solid var(--line-2);color:var(--dust);white-space:nowrap}
#previously .dec .st.nr{border-style:dashed}
#previously .dec .st.inf{border-color:rgba(255,184,107,.5);border-style:dashed;color:var(--lunch)}
#previously .dec .links{grid-column:3;display:inline-flex;align-items:center;gap:2px;white-space:nowrap}
#previously .dec .links .sep{color:var(--dust)}
#previously .dec a.post{padding:0 6px;font:500 14px/1 var(--f-mono);text-decoration:none;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
#previously .dec a.post:hover{text-decoration:underline;background:rgba(92,242,214,.06)}

/* act breaks: a cut to black on wide screens; a window into the 3D on stacked layouts */
#previously .actbreak,#tag .actbreak{position:relative;min-height:7vh;display:flex;align-items:center;justify-content:center;padding:2vh 0;margin:8px 0}
#previously .actbreak span,#tag .actbreak span{position:relative;font:600 clamp(13px,1.2vw,16px)/1.3 var(--f-mono);font-stretch:100%;letter-spacing:.24em;text-transform:uppercase;color:var(--starlight);padding:0 18px;background:var(--void);text-align:center}
#previously .actbreak::before,#tag .actbreak::before{content:"";position:absolute;left:var(--gl);right:var(--gr);top:50%;height:1px;background:linear-gradient(90deg,transparent,var(--line) 30%,var(--line) 70%,transparent)}

/* ---------- 5 · tag scene: the wind-down ---------- */
#tag{padding:5vh 0 0}
#tag .windown h2{font-size:clamp(26px,2.6vw,36px);margin-bottom:6px}
#tag .nr-note{margin:0 0 8px}
#tag .windown .quote{margin:0}
#tag .windown ol{list-style:none;margin:10px 0 12px;padding:0}
#tag .windown li{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:6px 0;border-top:1px solid rgba(154,169,181,.1);font:400 16px/1.5 var(--f-script)}
#tag .windown li b{font:600 13px/1.5 var(--f-mono);color:var(--phosphor)}
#tag .windown .cite{margin:0}
#tag .actbreak.end{margin:3vh 0 0}

/* ---------- 6 · the lattice ---------- */
#lattice{padding:4vh 0 1vh}
#lattice h2{font-size:clamp(28px,3.2vw,44px);margin-bottom:12px}
#lattice .lat-note{margin:14px 0 4px}
#lattice .legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin:6px 0 12px;font:500 11.5px/1.4 var(--f-mono);font-stretch:87.5%;letter-spacing:.06em;text-transform:uppercase;color:var(--dust)}
#lattice .legend span{display:inline-flex;align-items:center;gap:8px}
#lattice .legend i{display:inline-block;width:12px;height:12px;border-radius:50%}
#lattice .lg-path{background:var(--lunch);box-shadow:0 0 8px var(--lunch)}
#lattice .lg-nr{border:1.5px solid #e9eef2}
#lattice .lg-inf{border:1.5px dashed var(--lunch)}
#lattice .lg-ghost{background:#5E7A99}
#lattice .kirklog{margin:12px 0 0}
#lattice .lside{display:none}

/* ---------- 7 · debrief, end card, closing theme ---------- */
#debrief{padding:4vh 0 0}
#debrief h2{font-size:clamp(28px,3.2vw,44px);margin-bottom:12px}
#debrief .opener{margin:0 0 12px}
#debrief .paths ul{margin:0 0 16px;padding:0;list-style:none}
#debrief .paths li{position:relative;padding:8px 0 8px 22px;border-bottom:1px solid rgba(154,169,181,.1);font-size:16px}
#debrief .paths li::before{content:"";position:absolute;left:2px;top:19px;width:10px;height:1px;background:#5E7A99}
#debrief .paths li .d{font:500 11.5px/1 var(--f-mono);color:var(--dust);letter-spacing:.06em;text-transform:uppercase;margin-right:8px}
#debrief .ctx{margin:10px 0 0}
#debrief .m-end{max-width:none;margin:18px 0 0;text-align:left}
#debrief .m-end .slug{margin-bottom:10px;justify-content:flex-start}
#debrief .m-end .m02go{justify-items:start}
#debrief .m-end .lbl{justify-content:flex-start}
#debrief .m-end .m02d{margin:8px 0 4px}
#debrief .m-end .tnr{margin:6px 0 10px}
#debrief .m-end .notif{font-size:15.5px;margin:0}
#debrief .m-end .row{justify-content:flex-start}
#debrief .closing{padding:6vh 0 0}
#debrief .closing .cite{margin:10px 0 0}

/* ---------- #fx tags (mission-01) [SRC 446–463] ---------- */
.ctag{margin:-6px 0 0 14px}
.ctag::before{content:"";position:absolute;left:-14px;top:5px;width:10px;height:1px;background:var(--phosphor)}
.ctag.c1{color:#ffb19f}
.ctag.flip{margin-left:0;translate:calc(-100% - 14px) 0}
.ctag.flip::before{left:auto;right:-14px}
.bracket{width:120px;height:120px;margin:-60px 0 0 -60px;--c:var(--phosphor);transition:opacity .3s,transform .3s}
.bracket i{position:absolute;inset:0;transform:scale(1.4);transition:transform .3s cubic-bezier(.2,.8,.2,1);
  background:
   linear-gradient(var(--c),var(--c)) 0 0/18px 2px no-repeat,linear-gradient(var(--c),var(--c)) 0 0/2px 18px no-repeat,
   linear-gradient(var(--c),var(--c)) 100% 0/18px 2px no-repeat,linear-gradient(var(--c),var(--c)) 100% 0/2px 18px no-repeat,
   linear-gradient(var(--c),var(--c)) 0 100%/18px 2px no-repeat,linear-gradient(var(--c),var(--c)) 0 100%/2px 18px no-repeat,
   linear-gradient(var(--c),var(--c)) 100% 100%/18px 2px no-repeat,linear-gradient(var(--c),var(--c)) 100% 100%/2px 18px no-repeat}
.bracket.locked i{transform:scale(1)}
.rdo{position:absolute;left:134px;top:6px;display:grid;gap:3px}
.rdo span{opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .2s}
.rdo.on span{opacity:1;transform:none}
.opstag{margin:-8px 0 0 16px;color:var(--phosphor)}
.opstag .k{color:var(--dust)}
.shiptag{display:grid;gap:3px;margin:-34px 0 0 22px;padding-left:12px;border-left:1px solid rgba(255,90,54,.6);color:var(--starlight)}
.shiptag .k{color:var(--dust)}

/* ---------- responsive ---------- */
@media (min-width:761px){
  #contacts .cgrid{max-width:600px}
  #log .logwrap{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:1024px){
  #contacts .layout,#lattice .layout{display:grid;grid-template-columns:minmax(0,600px) minmax(0,1fr);gap:32px;margin-left:clamp(0px,4.2vw,72px)}
  #contacts .layout .col,#lattice .layout .col{margin-left:0}
  #lattice .layout{grid-template-columns:minmax(0,640px) minmax(0,1fr)}
  #lattice .layout .col{max-width:640px}
  #contacts .cside,#lattice .lside{display:block;position:relative}
  #contacts .cside .gl-fallback{position:sticky;top:120px}
  #contacts .cside svg{width:100%;height:auto;max-width:520px}
  #lattice .lside .gl-fallback{position:sticky;top:16vh;display:flex;justify-content:center}
  #lattice .lside svg{width:100%;height:auto;max-width:440px}
}
@media (min-width:1200px){
  #previously .col{max-width:min(800px,calc(100vw - 580px))}
  #previously .abody{grid-template-columns:minmax(0,300px) minmax(0,1fr);align-items:start;gap:22px}
  #previously .a0 .sum{max-width:680px}
}
/* stacked: 3D only in viewer windows. The act-break bands become windows into the orbiting freighter. */
@media (max-width:1023px){
  #log .viewer-win{margin:16px 0 14px}
  #contacts .viewer-win{margin-top:18px}
  #theme .titlecard{height:auto;min-height:34vh;min-height:34svh}
  #previously .actbreak{min-height:32vh;min-height:32svh;align-items:flex-start;padding:2.4vh 0 0;margin:6px 0}
  #previously .actbreak::before{top:calc(2.4vh + .7em)}
  .rdo{left:-30px;top:132px}
}
@media (max-width:760px){
  #log{padding-top:calc(var(--hud-h) + 4vh)}
  #log h1{font-size:clamp(34px,10vw,44px)}
  #log .logside .tx{max-width:none}
  .ctag .lt,.opstag .lt{display:none}
  #contacts .ccard{padding:16px 14px 12px}
  #contacts .ccard.c1 .body{grid-template-columns:1fr 92px}
  #contacts .ccard .thumb{width:92px}
  #contacts .ccard .thumb .tx figcaption{font-size:11px}
  #contacts .ccard.mini{padding:12px 14px 8px}
  #previously .act{padding:16px 14px 10px}
  #previously .stills{margin-right:6px}
  #previously .dec li{grid-template-columns:48px 1fr;gap:2px 8px;font-size:14.5px}
  #previously .dec .links{grid-column:2;justify-self:start;margin-left:-6px}   /* phones: links under the answer, so the text keeps the full width */
  #theme .titlecard{padding:3vh 0}
  .m-acts a{padding:0 10px}
  .shiptag{display:none}
}

/* v0.3 review: decision dates and act tags at 12 px on phones */
@media (max-width:760px){
  #previously .dec .d,#previously .act .lab{font-size:12px}
  #contacts .ccard.mini .readout{font-size:12px}
}

/* v0.3 review: a shorter episode page on phones without dropping content. The viewer windows and act-break windows
   get a little shorter, the Captain's Log still sits beside its readout, and each act's still floats beside its summary. */
@media (max-width:760px){
  #log .viewer-win,#previously .viewer-win,#lattice .viewer-win,#debrief .viewer-win{height:34vh;height:34svh}   /* #contacts keeps 44svh: the On screen readouts sit above the bracket */
  #previously .actbreak{min-height:24vh;min-height:24svh}
  #log .logside{display:grid;grid-template-columns:minmax(0,58%) minmax(0,1fr);gap:12px;align-items:center}
  #log .logside .tx{max-width:none}
  #previously .abody{display:block}
  #previously .abody::after{content:"";display:block;clear:both}
  #previously .stills{float:left;width:46%;max-width:none;margin:4px 12px 4px 0}
  #previously .stills .inset{display:none}
  #previously .stills .tx figcaption{padding:14px 6px 6px;font-size:10px}
  #previously .stills .tx figcaption .meter{display:none}
  #previously .sum,#previously .sum p{font-size:16px;line-height:1.55}
  #previously .pull{clear:both}
}