/* =========================================================
   AMALGAVERSE · crew.css (Builder C; crew.html only)
   Main titles · credit roll (SRC 287–304, + Mission 01 notes) · ship and craft · Maia 3352 · seat #20 · #fx tags
   Every selector is scoped to a #section id, a cr- class or #fx (page-specific tags). Shared chrome is untouched.
   ========================================================= */

/* reality colours: they match the five glows of the 3D constellation (and the you-star) */
#starring .r0,#fx .r0{--rc:#8FD9FF}
#starring .r1,#fx .r1{--rc:#5CF2D6}
#starring .r2,#fx .r2{--rc:#80EB9E}
#starring .r3,#fx .r3{--rc:#CCD9EB}
#starring .r4,#fx .r4{--rc:#A3C2FF}
#starring .ry{--rc:#FFB86B}

/* ---------- 1 · main titles (first screen) ---------- */
.cr-open{padding:calc(var(--hud-h) + 5vh) 0 0;text-align:center}
#starring .cr-title{height:auto;padding:0 0 6px}
#starring .cr-title::before{height:120%}
.cr-kicker{display:inline-flex;align-items:center;gap:12px;margin:0 0 14px;font:500 12px/1.4 var(--f-mono);font-stretch:87.5%;letter-spacing:.14em;text-transform:uppercase;color:var(--dust);
  text-shadow:0 1px 10px rgba(5,7,11,1)}
.cr-kicker::before,.cr-kicker::after{content:"";width:22px;height:2px;background:var(--tally);flex:none}
.cr-title .gl-fallback{display:none}
.cr-block{max-width:780px;margin:0 auto;position:relative}
#starring h1{font-size:clamp(30px,3.3vw,48px);font-stretch:125%;letter-spacing:.34em;text-transform:uppercase;margin:22px 0 14px;padding-left:.34em;
  display:flex;align-items:center;justify-content:center;gap:.6em}
#starring h1::before,#starring h1::after{content:"";height:1px;width:clamp(28px,5vw,80px);background:linear-gradient(90deg,transparent,var(--line));flex:none}
#starring h1::after{background:linear-gradient(90deg,var(--line),transparent)}
.cr-block .dek{margin:0 auto 16px;max-width:620px}
.cr-realms{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin:0 auto 18px;max-width:700px;
  font:500 11.5px/1.5 var(--f-mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;color:var(--starlight);text-shadow:0 1px 10px rgba(5,7,11,1)}
.cr-realms > span:not(.vh){display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.cr-realms i{width:8px;height:8px;border-radius:50%;background:var(--rc);box-shadow:0 0 10px var(--rc);flex:none}
.cr-realms .ry{color:var(--lunch)}
.cr-toc{margin:4px auto 0}   /* in-page contents: the shared .toc (site.css) */

/* ---------- 1 · the credit roll [SRC 287–304] + Mission 01 notes ---------- */
.cr-rollgrid{display:grid;grid-template-columns:minmax(0,1fr);margin:6vh 0 0}
#starring .credits{padding:24px 26px 22px}
#starring .credits > .slug:focus{outline:none}
#starring .credits > .slug{margin-bottom:10px;text-wrap:wrap}
#starring .roll{list-style:none;margin:0;padding:0}
#starring .roll li{display:grid;grid-template-columns:max-content minmax(0,1fr) minmax(0,55%);grid-template-areas:"nm nm note" "role show note";
  column-gap:8px;row-gap:3px;align-items:start;padding:9px 6px;border-top:1px solid rgba(154,169,181,.1);transition:background .2s}
#starring .roll li:first-child{border-top:0}
#starring .roll .nm{grid-area:nm;font:700 18px/1.25 var(--f-display);font-stretch:100%}
#starring .roll .role{grid-area:role;font:600 11px/1.6 var(--f-mono);font-stretch:87.5%;letter-spacing:.1em;text-transform:uppercase;color:var(--dust);white-space:nowrap}
#starring .roll .show{grid-area:show;display:flex;align-items:center;gap:7px;min-width:0;font:400 13px/1.45 var(--f-display);color:var(--dust)}
#starring .roll .show::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--rc,var(--dust));box-shadow:0 0 6px var(--rc,transparent);flex:none}
#starring .roll li:hover,#starring .roll li.hi{background:rgba(92,242,214,.06)}
#starring .roll li.hi .show::before{box-shadow:0 0 12px 2px var(--rc,transparent)}
#starring .roll .m01{grid-area:note;padding-left:18px;border-left:1px solid rgba(154,169,181,.12)}
.cr-starring .m01{display:block;font:400 14px/1.45 var(--f-display);color:#C5CFD7}
.cr-starring .m01 .v{font-size:14px;line-height:1.45;color:var(--starlight)}
.cr-starring .m01 .src{display:inline-flex;align-items:center;gap:2px;margin-left:2px;font:500 11px/1.4 var(--f-mono);font-stretch:87.5%;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dust);text-decoration:none;border-bottom:1px solid var(--line-2);white-space:nowrap}
.cr-starring .m01 .src:hover{color:var(--phosphor);border-color:var(--phosphor)}
#starring .roll li.youcred{margin-top:10px;padding:14px 6px;border-top:1px solid rgba(255,184,107,.35);border-bottom:1px solid rgba(255,184,107,.35);transition:background .4s}
#starring .roll li.youcred.lit{background:linear-gradient(90deg,rgba(255,184,107,.14),rgba(255,184,107,0))}
#starring .youcred .role{color:var(--lunch)}
#starring .youcred .nm{font-size:clamp(21px,1.9vw,27px);font-stretch:118%;color:var(--lunch);line-height:1.15}
#starring .youcred .show{color:var(--lunch)}
#starring .youcred .show::before{background:var(--lunch);box-shadow:0 0 8px var(--lunch)}
#starring .youcred .m01{border-left-color:rgba(255,184,107,.3)}
#starring .intro-line{text-align:center;margin:20px 0 6px;font:500 15px/1.5 var(--f-display)}
#starring .intro-line a{color:var(--starlight)}
#starring .intro-line b{font-weight:700}
#starring .shipline{text-align:center;color:var(--dust);font:500 12px/1.6 var(--f-mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;margin:4px 0 12px}
#starring .cap{text-align:center;color:var(--dust);font-size:14px;line-height:1.5;max-width:560px;margin:0 auto}
.cr-slot{display:none}

/* ---------- 2 · ship and craft ---------- */
.cr-craft{padding:10vh 0 0}
.cr-head{max-width:640px;margin-left:clamp(0px,4.2vw,72px)}
.cr-head .dek{margin-bottom:0}
.cr-craft-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:1200px;margin:30px 0 0 clamp(0px,4.2vw,72px)}
.cr-card{display:flex;flex-direction:column;padding:16px 16px 18px}
.cr-card .tx,.cr-card .cr-novis{margin:0 0 14px}
.cr-meta{margin:0 0 6px;font:500 11.5px/1.4 var(--f-mono);font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;color:var(--dust)}
.cr-card h3{margin:0 0 10px}
.cr-q{font-size:14.5px;line-height:1.5}
.cr-note{margin:12px 0 0;padding-top:10px;border-top:1px solid rgba(154,169,181,.12);font-size:14px;line-height:1.5;color:#C5CFD7}
.cr-note .v{color:var(--starlight)}
.cr-novis{line-height:1.9}

/* ---------- shared column for Maia + You ---------- */
.cr-col{max-width:640px;margin-left:clamp(0px,4.2vw,72px)}
.cr-script{margin:18px 0 16px;padding:20px 22px 18px}
.cr-script .sl{margin:0 0 10px;font:500 12px/1.4 var(--f-mono);font-stretch:87.5%;letter-spacing:.12em;text-transform:uppercase;color:var(--dust)}
.cr-script blockquote{margin:0}
.cr-script .ac{margin:0 0 10px;font:400 16px/1.55 var(--f-script);color:var(--starlight)}
.cr-script blockquote.ac,.cr-script .ac:last-child{margin-bottom:0}
.cr-script .cite{margin-top:12px}

/* ---------- 3 · Maia 3352 ---------- */
.cr-maia{padding:10vh 0 0}
.cr-maia .dek{margin-bottom:0}
.cr-stills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cr-stills .tx{margin:0}
.cr-quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px;margin:20px 0 14px}
.cr-quotes .quote{padding-left:14px;border-left:2px solid rgba(127,196,255,.55);font-size:16px}
.cr-quotes .quote + .quote{border-left-color:var(--tally)}
.cr-post{margin:0;padding:12px 14px;background:rgba(9,14,20,.7);border:1px solid var(--line-2);font-size:15px;line-height:1.5}
.cr-post .k{display:block;margin-bottom:4px;font:500 11.5px/1.4 var(--f-mono);font-stretch:87.5%;letter-spacing:.1em;text-transform:uppercase;color:#7FC4FF}
.cr-post .cite{display:inline;margin:0 0 0 6px}

/* ---------- 4 · seat #20 ---------- */
.cr-you{padding:10vh 0 5vh}
.cr-you .cr-script .amber{color:var(--lunch)}
.cr-why{margin:0 0 4px;padding:10px 12px 10px 14px;border-left:2px solid var(--lunch);background:linear-gradient(90deg,rgba(255,184,107,.08),rgba(255,184,107,0));font:500 16px/1.5 var(--f-display);color:var(--starlight)}
.cr-next{display:flex;flex-wrap:wrap;gap:4px 24px;margin:4px 0 0}
.cr-next a{display:inline-flex;align-items:center;min-height:44px}

/* ---------- #fx tags (page-specific) ---------- */
#fx .cr-ftag{display:flex;align-items:center;gap:8px;color:var(--starlight)}
#fx .cr-ftag i{width:14px;height:1px;background:var(--rc,var(--line));opacity:.8;flex:none}
#fx .cr-ftag.flip{flex-direction:row-reverse}
#fx .cr-maiatag{--rc:#9FD4FF;display:grid;grid-template-columns:auto auto;column-gap:10px;row-gap:4px;align-items:start}
#fx .cr-maiatag i{width:34px;margin-top:7px;grid-row:span 2}
#fx .cr-maiatag > span:first-of-type{color:#CFE8FF}

/* ---------- desktop: the roll beside its sticky fallback slot ---------- */
@media (min-width:1024px){
  .cr-rollgrid{grid-template-columns:minmax(0,800px) minmax(0,1fr);gap:40px;margin-left:clamp(0px,4.2vw,72px)}
  .cr-slot{display:block;position:sticky;top:calc(var(--hud-h) + 14vh);height:56vh;align-self:start}
  .cr-slot .gl-fallback svg{width:min(78%,340px);height:auto}
}

/* ---------- stacked layouts: the 3D lives in viewer windows ---------- */
@media (max-width:1023px){
  #starring .cr-title{min-height:40vh;min-height:40svh;justify-content:center;padding:2vh 0}
  #starring .cr-title::before{opacity:.42}                      /* the constellation forms a halo around the show title here */
  #starring .cr-title .tc-name{text-shadow:0 0 24px rgba(5,7,11,.95),0 2px 10px rgba(5,7,11,1)}
  .cr-title .gl-fallback{display:flex;position:absolute;inset:0;z-index:-1;align-items:center;justify-content:center;opacity:.28;pointer-events:none}
  .cr-title .gl-fallback svg{height:96%;width:auto}
  .cr-open{padding-top:calc(var(--hud-h) + 2vh)}
  #starring .roll li{grid-template-columns:max-content minmax(0,1fr);grid-template-areas:"role show" "nm nm" "note note";row-gap:2px;padding:12px 4px}
  #starring .roll .m01{padding:6px 0 0;border-left:0}
  .cr-craft-grid{grid-template-columns:minmax(0,1fr);max-width:560px;margin-left:0}
  .cr-head,.cr-col{margin-left:0}
  #craft .cr-vw{height:30vh;height:30svh}
  #maia .cr-vw{height:42vh;height:42svh}
  #you .cr-vw{height:28vh;height:28svh}
  .cr-craft,.cr-maia{padding-top:10vh}
  .cr-you{padding:10vh 0 6vh}
}
@media (max-width:760px){
  .cr-open{padding-top:var(--hud-h)}
  #starring .cr-title{min-height:36vh;min-height:36svh}
  .cr-kicker{font-size:11px;letter-spacing:.1em;margin-bottom:10px}
  .cr-kicker::before,.cr-kicker::after{width:14px}
  #starring h1{font-size:clamp(26px,7.6vw,32px);letter-spacing:.24em;padding-left:.24em;margin:14px 0 10px}
  #starring h1::before,#starring h1::after{width:22px}
  .cr-block .dek{font-size:15.5px}
  .cr-realms{gap:4px 14px;font-size:11px}
  .cr-rollgrid{margin-top:5vh}
  #starring .credits{padding:18px 14px}
  #starring .roll li{padding:12px 2px}
  #starring .roll .nm{font-size:17px}
  .cr-starring .m01{font-size:14px}
  .cr-script{padding:16px 14px}
  .cr-script .ac{font-size:15.5px}
  .cr-stills{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
  .cr-stills .tx figcaption{padding:16px 8px 8px;font-size:10px}
  .cr-stills .tx figcaption .meter{display:none}
  .cr-quotes{grid-template-columns:minmax(0,1fr)}
  .cr-post .cite{display:block;margin:6px 0 0}
}
@media (pointer:coarse){
  .cr-note a,.cr-post .cite a{display:inline-flex;align-items:center;min-height:44px}
  /* the roll's date links sit inside running text: a 44 px tap area that does not stretch the line box */
  .cr-starring .m01 .src{position:relative}
  .cr-starring .m01 .src::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}
}

/* v0.3 review: phones read the seat roles and source dates at 12 px (11 px stays only for decorative slugs) */
@media (max-width:760px){
  #starring .roll .role,.cr-starring .m01 .src{font-size:12px}
}

/* the roll is two panels: on phones a viewer window into the constellation sits between seat 10 and seat 11
   (a visual anchor half way down the credits); on wide screens the two panels read as one */
.cr-rollcol{min-width:0}
#starring .credits.cont{padding-top:14px}
#starring .credits.cont .roll li:first-child{border-top:1px solid rgba(154,169,181,.1)}
@media (min-width:1024px){
  #starring #roll{clip-path:polygon(var(--cham) 0,100% 0,100% 100%,0 100%,0 var(--cham));box-shadow:inset 1px 0 0 var(--line),inset -1px 0 0 var(--line),inset 0 1px 0 var(--line);padding-bottom:0}
  #starring #roll2{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cham)),calc(100% - var(--cham)) 100%,0 100%);box-shadow:inset 1px 0 0 var(--line),inset -1px 0 0 var(--line),inset 0 -1px 0 var(--line);padding-top:0}
  #roll2::before{display:none}
}
@media (max-width:1023px){
  #starring .cr-rollwin{height:30vh;height:30svh;margin:12px 0}
  #starring .cr-rollwin .gl-fallback svg{height:80%}
}
/* no-WebGL on phones: the 20-dot ring lives in the roll window (between seats 10 and 11), not behind the show title */
@media (max-width:760px){ .cr-title .gl-fallback{display:none} }