/* phones / portrait (scrolling page) */
@media (max-width:820px){
  html{font-size:min(3.65vw,17px)}
  #deck{height:auto;min-height:100vh;padding:.9rem .8rem 1rem;gap:.6rem}
  .top{flex-wrap:wrap;gap:.4rem}
  .hook{white-space:normal;font-size:2.3rem;line-height:1.02}
  .hero,.lower{grid-template-columns:1fr}
  .goal .goalbody{flex-direction:column;align-items:flex-start;gap:.3rem}
  .goal .bignum{font-size:4.2rem}
  .goalside{padding:0}
  .crew{grid-template-columns:1fr 1fr}
  .lower{height:auto;min-height:0}
  .feed{overflow:visible;flex:none;justify-content:flex-start;max-height:none}
  .feed li{grid-template-columns:2.9rem 4.6rem 1fr;font-size:.68rem}
  .foot{flex-direction:column;gap:.3rem}
  .hookBig{font-size:3.6rem;padding:0 1.2rem}
  #talk{flex-direction:column;gap:1.6rem;padding:0 1.4rem;text-align:left}
  .talkFace{width:11rem}
  .talkBody{width:100%}
  .talkName b{font-size:3.4rem}
  .bubble{font-size:1.5rem}
  .bubble::before{left:2rem;top:-.75rem;border-bottom:0;border-top:2px solid var(--acc)}
  .closerBig{font-size:3rem;padding:0 1rem}
  .closerSub{padding:0 1.2rem}
}
@media (max-width:520px){.crew{grid-template-columns:1fr}.card .role{white-space:normal}}

/* fixed-frame poster (4:5 still, 9:16 vertical capture): everything in one screen, no log */
html.poster{font-size:min(1.85vw,1.48vh)}
html.poster #deck{height:100vh;overflow:hidden;gap:.5rem}
html.poster .hook{white-space:normal;font-size:2.75rem;line-height:1.02}
html.poster .hero{grid-template-columns:1.25fr 1fr}
html.poster .goal{grid-column:1/-1}
html.poster .goal .bignum{font-size:3.9rem}
html.poster .goal .meter{margin-top:1.3rem}
html.poster .crew{grid-template-columns:1fr 1fr}
html.poster .card .role{display:none}
html.poster .say{font-size:.84rem}
html.poster .wl{justify-content:flex-start}
html.poster .foot{font-size:.5rem}
html.poster .lower{grid-template-columns:1fr;flex:1;min-height:0}
html.poster .feedp{display:none}
html.poster .call .txt{font-size:.98rem}
html.poster .wl{gap:.35rem;padding-top:.5rem;padding-bottom:.5rem}
html.poster .foot{display:flex;justify-content:space-between;gap:1rem}
html.poster .goal .goalbody{flex-direction:row;align-items:flex-end;gap:1.4rem}
html.poster .goalside{padding-bottom:.4rem}
/* 9:16 vertical capture (540x960 css px at 2x): poster layout plus the live log, bigger video stages */
html.poster.tall{font-size:1.95vw}
html.tall .hook{font-size:3.5rem}
html.tall .goal .bignum{font-size:5rem}
html.tall .say{font-size:.95rem}
html.tall .lower{display:grid;grid-template-rows:auto minmax(0,1fr);gap:.5rem}
html.tall .feedp{display:flex}
html.tall .feed{overflow:hidden;justify-content:flex-end}
html.tall .hookBig{font-size:6.6rem;padding:0 2rem}
html.tall .stageSub{font-size:1.6rem;text-align:center;padding:0 2rem}
html.tall .talkFace{width:22rem}
html.tall .talkName b{font-size:6.5rem}
html.tall .talkName span{font-size:1.4rem}
html.tall .talkName{flex-direction:column;gap:.4rem}
html.tall .bubble{font-size:2.9rem}
html.tall #talk .proof{font-size:1.3rem}
html.tall .closerMark svg{width:9rem}
html.tall .closerBig{font-size:5.6rem}
html.tall .closerSub{font-size:1.9rem}
html.tall #talk{padding:0 3.5rem}