/* Responsive hero sculpture; mobile retains its original eight rows. */
.hero { min-height: 600px; }
.hero-art {
  --capsule-stage-height: 510px;
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  height: var(--capsule-stage-height);
  align-self: center;
}
.paint-world.capsule-world {
  --capsule-aspect: 1.125;
  position: relative;
  width: min(100%, calc(var(--capsule-stage-height) * var(--capsule-aspect, .5625)));
  aspect-ratio: var(--capsule-aspect, 9 / 16);
  height: auto;
  transform: none;
  filter: none;
  overflow: visible;
}
.capsule-canvas, .capsule-fallback { display: block; width: 100%; height: 100%; }
.capsule-canvas { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.capsule-world.is-rendered .capsule-canvas { opacity: 1; }
.capsule-world.is-rendered .capsule-fallback { visibility: hidden; }
.hero-art .art-caption { display: none; }
@media (min-width: 681px) {
  .hero { min-height:0; }
  .hero-art {
    --capsule-stage-height:calc((clamp(58px, 6.25vw, 112px) * 1.98 + 145px) / .84);
    /* Match title, description and arrow; exclude the scene's empty lower margin. */
    align-self:end;
    margin-bottom:calc(var(--capsule-stage-height) * -.08);
    height:auto;
  }
  .paint-world.capsule-world { --capsule-aspect:1.8; }
  .capsule-fallback { object-fit:cover;object-position:top; }
}
@media (max-width: 680px) {
  .hero { min-height: 0; }
  .hero-art { --capsule-stage-height: 510px; align-self: stretch; margin-top: 24px; }
  .paint-world.capsule-world { --capsule-aspect: .5625; margin-inline: auto; }
}