/* Fit the full scene between the hero and cards, keeping the footer in view. */
.page{height:100dvh}
main{min-height:0}
.site-header,.site-footer{flex:none}
.venue{flex:1 1 0;min-height:0;max-height:calc(100cqi * 802 / 1961);height:auto;aspect-ratio:auto}
.venue .venue-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%}
/* Raise the cards over the sidewalk and retain crisp edges while they scroll. */
.venue + heyoh-stream{margin-top:calc(-1 * clamp(3rem,6cqi,6rem))}
heyoh-stream .st-viewport{-webkit-mask-image:none;mask-image:none}
/* Shift only the desktop artwork; the card strip keeps its existing position. */
@media (min-width:43.701rem) and (min-height:70.001rem){
  .venue .venue-poster{transform:translateY(clamp(3rem,6.5dvh,6rem))}
}
/* A compact stream leaves room for the scene on phones and landscape tablets. */
@media (max-width:43.7rem), (orientation:landscape) and (max-height:70rem){
  heyoh-stream .sm{padding:.65rem .8rem .7rem;gap:.4rem}
  heyoh-stream .sl-msg{grid-template-columns:1.9rem minmax(0,1fr);column-gap:.5rem}
  heyoh-stream .sl-av{width:1.9rem;height:1.9rem;font-size:.7rem}
  heyoh-stream .sl-h b{font-size:.84rem}
  heyoh-stream .sl-time{font-size:.68rem}
  heyoh-stream .sl-t{font-size:.88rem;line-height:1.3}
  heyoh-stream .sl-rl{margin-left:2.4rem;font-size:.7rem}
  heyoh-stream .sl-work p,heyoh-stream .sl-done p{font-size:.82rem;line-height:1.3}
  heyoh-stream .sl-done ul{font-size:.8rem;line-height:1.3;gap:.05rem}
  heyoh-stream .sl-done .sl-foot{font-size:.76rem;line-height:1.3}
}
@media (max-width:43.7rem){
  .site-header{padding-top:max(.75rem,env(safe-area-inset-top))}
  .hero{padding-top:.8rem}
  .sub{margin-bottom:1rem}
  .venue{min-height:min(40cqi,23dvh);max-height:36dvh}
  .venue .venue-poster{object-fit:cover;object-position:50% 100%}
  .venue + heyoh-stream{--sm-w:min(20rem,82cqi);margin-top:-2.5rem}
  /* Mobile cards show the reply summary and first example without internal scrolling. */
  heyoh-stream .sl-done .sl-foot,heyoh-stream .sl-done li:nth-child(n+2){display:none}
}
@media (max-width:43.7rem) and (max-height:44rem){
  heyoh-stream .sl-done ul{display:none}
}
@media (min-width:43.701rem) and (orientation:landscape) and (max-height:70rem){
  .hero h1{font-size:clamp(2.2rem,6.5dvh,4rem)}
  .sub{font-size:clamp(.95rem,2dvh,1.15rem);margin-bottom:.65rem}
  .venue{overflow:visible}
  .venue .venue-poster{height:auto;object-fit:contain;object-position:50% 0}
  .venue + heyoh-stream{--sm-w:clamp(22rem,38cqi,30rem)}
  .site-footer{position:relative;z-index:3;background:var(--bg);padding-top:.6rem}
}