/* Keep functional hero content in normal flow; only decorative lights are absolute.
   Width-only scaling plus overflow:hidden previously made the stage internally scroll. */
.hero-stage{
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:16px;
  padding:22px 28px;
  overflow:clip;
}
.hero-stage .stage-index{
  position:relative;
  inset:auto;
  min-width:0;
  flex-wrap:wrap;
  gap:8px 16px;
}
.hero-stage .art-frame{
  position:relative;
  inset:auto;
  display:block;
  min-width:0;
  min-height:0;
}
.hero-stage .art-frame[data-kind] #hero-art{
  display:block;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center;
}
/* WOLT's square source has large black top/bottom margins. The 2.8:1 display
   window removes only that margin, not the logo or its glow. Width is still
   capped by the frame and height remains bounded. Other projects stay contain. */
.hero-stage .art-frame[data-kind="logo"] #hero-art[src="assets/wolt-logo.png"]{
  width:auto;
  height:100%;
  aspect-ratio:2.8;
  max-width:100%;
  margin-inline:auto;
  object-fit:cover;
}
.hero-stage .hero-caption{
  position:relative;
  inset:auto;
  min-width:0;
}
.hero-caption>div:first-child{min-width:0}
.hero-actions{flex-wrap:wrap;flex-shrink:0}
.hero-description{overflow-wrap:anywhere}
@media(max-width:1000px){
  .hero-stage .hero-caption{align-items:flex-start}
  .hero-actions{flex-shrink:1}
}
@media(max-width:620px){
  .hero-stage{padding:14px 16px 18px;gap:12px}
  .hero-stage .stage-index{gap:6px 9px}
  .hero-actions{flex-wrap:nowrap;align-items:center}
  .hero-description{max-width:100%}
}