/* Keep the copy width independent from the wide-screen alignment gutter. */
body[data-page="home"] .hero {
  --hero-gutter: max(7%, calc((100% - 1400px) / 2));
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: max(660px, min(56.28vw, 1440px));
  max-height: none;
}
body[data-page="home"] .hero-content {
  width: min(52rem, calc(100% - 2 * var(--hero-gutter)));
  max-width: none;
  margin-inline-start: var(--hero-gutter);
  padding: clamp(70px, 8vw, 120px) 0 48px;
}
body[data-page="home"] .hero h1 {
  max-width: none;
  font-size: clamp(2.5rem, 6.6vw, 7rem);
  line-height: 1.08;
}
.hero-line { display: block; }
.hero-phrase { display: inline-block; }
body.lang-zh[data-page="home"] .hero h1 {
  font-size: clamp(3rem, 5.8vw, 5.4rem);
  line-height: 1.28;
  letter-spacing: 0;
}
body[data-page="home"] .hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  animation: none;
  transform: none;
}
body[data-page="home"] .hero-bottom {
  position: relative;
  inset: auto;
  margin-top: auto;
  padding: 0 var(--hero-gutter) 26px;
  align-items: flex-start;
}
/* A complete photograph above the copy avoids a narrow crop of the building. */
@media (max-width: 700px) {
  body[data-page="home"] .hero {
    --hero-gutter: 6%;
    min-height: 0;
    background: var(--ink);
  }
  body[data-page="home"] .hero-image {
    position: relative;
    inset: auto;
    z-index: auto;
    height: auto;
    aspect-ratio: 1672 / 941;
    object-fit: contain;
    flex: none;
  }
  body[data-page="home"] .hero-shade { display: none; }
  body[data-page="home"] .hero-content { padding: 32px 0 24px; }
  body[data-page="home"] .hero .eyebrow { max-width: none; margin-bottom: 20px; }
  body[data-page="home"] .hero h1 { font-size: clamp(2.5rem, 8.8vw, 4rem); }
  body.lang-es[data-page="home"] .hero h1 { font-size: clamp(2.2rem, 8vw, 3.5rem); }
  body.lang-zh[data-page="home"] .hero h1 { font-size: clamp(2.3rem, 8vw, 3.6rem); }
  body[data-page="home"] .hero-description { margin-top: 20px; margin-bottom: 24px; }
  body[data-page="home"] .hero-bottom { gap: 8px; padding-bottom: 24px; }
}