/* The home hero has a viewport-sized stage; the existing feature cards follow it. */
body.home #hero.hero { display: block; }
body.home #hero.hero .tugan-hero-stage .hero__content {
  min-height: 100vh;
  min-height: 100svh;
  padding-bottom: calc(var(--tugan-header-height) + 20px);
}
body.home #hero.hero .tugan-hero-stage .hero__content--inner { align-self: center; translate: 0 24px; }
/* Keep the artwork at its existing top anchor; center only the copy and CTA. */
body.home #hero.hero .tugan-hero-stage .hero__info { align-self: flex-start; translate: 0 24px; }
@media (max-width: 767px) {
  body.home #hero.hero .tugan-hero-stage .hero__content {
    min-height: 100vh;
    min-height: 100svh;
    padding-block: 0;
  }
  body.home #hero.hero .tugan-hero-stage .hero__content--inner {
    min-height: calc(100vh - 120px);
    min-height: calc(100svh - 120px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: flex-start;
    padding-top: calc(var(--tugan-header-height) + 20px);
    padding-bottom: 24px;
  }
}

/* Bring the feature row a little closer to the first screen. */
body.home #hero.hero .hero__list {
  padding-top: max(0px, calc(32px + (135 - 64) * (calc(100vw / var(--zoom)) - 1023px) / (1920 - 1023)));
}
@media (max-width: 767px) {
  body.home #hero.hero .tugan-hero-stage .hero__content--inner,
  body.home #hero.hero .tugan-hero-stage .hero__info { translate: 0 16px; }
}
@media (max-width: 767px) {
  /* Leave room for the existing floating artwork below its normal flow box. */
  body.home #hero.hero .tugan-hero-stage .hero__info { margin-bottom: calc(50% + 32px); }
}
@media (min-width: 1024px) {
  body.home #hero.hero .hero__list { padding-top: 0; }
}