.hero-party .hero-party-composite {
  display: block;
  width: 100%;
  max-height: 300px;
  margin: 0;
  object-fit: contain;
}

@media (max-width: 800px) {
  .landing-hero {
    display: block;
    min-height: auto;
    padding: 46px 20px 122px;
  }

  .hero-copy {
    max-width: none;
  }

  .hero-copy h1 {
    font-size: clamp(38px, 12vw, 52px);
    line-height: 1.05;
    letter-spacing: 0.06em;
  }

  .hero-copy h1 span {
    letter-spacing: 0.1em;
  }

  .hero-lead {
    margin: 20px 0;
    font-size: 13px;
    line-height: 1.75;
    overflow-wrap: anywhere;
  }

  .hero-tags {
    gap: 6px;
  }

  .hero-tags span {
    padding: 6px 9px;
    font-size: 10px;
  }

  .hero-art {
    position: relative;
    inset: auto;
    min-height: 0;
    height: 360px;
    margin: 12px -58px -82px 8%;
    opacity: 0.72;
  }

  .hero-guardian {
    top: 0;
    right: -4%;
    width: 92%;
    height: 360px;
  }

  .hero-party {
    right: 7%;
    bottom: 0;
    z-index: 2;
    width: 88%;
  }

  .hero-party .hero-party-composite {
    max-height: 190px;
  }

  .login-panel {
    margin-top: -68px;
  }

}

@media (max-width: 480px) {
  .landing-hero {
    min-height: auto;
    padding: 38px 18px 112px;
  }

  .hero-kicker {
    margin-top: 14px;
    font-size: 12px;
    letter-spacing: 0.08em;
  }

  .hero-art {
    height: 320px;
    margin: 12px -64px -72px 3%;
  }

  .hero-guardian {
    height: 320px;
  }

  .hero-party {
    right: 8%;
    width: 90%;
  }

  .hero-party .hero-party-composite {
    max-height: 168px;
  }

  .login-panel {
    width: calc(100% - 24px);
    margin-top: -58px;
    padding: 22px 18px;
  }

  .login-panel h2 {
    font-size: 24px;
  }

}