/* Local review: Home hero only. Shared typography and other pages are unchanged. */
.home-hero {
  height: auto;
  min-height: 580px;
  overflow: hidden;
}
.home-hero .hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 650px) minmax(0, 1fr);
  align-items: center;
  min-height: 580px;
  height: auto;
}
.home-hero .hero-copy {
  max-width: none;
  padding-block: 48px;
  gap: 24px;
}
.home-hero .hero-copy h1 {
  max-width: 650px;
  font-size: 64px;
  line-height: 72px;
  text-wrap: balance;
}
.home-hero .hero-copy p {
  max-width: 610px;
  font-size: 20px;
  line-height: 30px;
}
.home-hero .hero-rule { width: 502px; max-width: 100%; }
.home-hero .hero-actions { max-width: 100%; flex-wrap: wrap; gap: 16px; }
.home-hero-media { align-self: end; justify-self: end; }
.home-hero .hero-portrait {
  position: relative;
  right: auto;
  bottom: auto;
  align-self: end;
  justify-self: end;
  width: 400px;
  max-width: none;
  height: auto;
  max-height: none;
  object-fit: contain;
  /* Reuse Figma's background-removal layer as the alpha mask for its full-resolution original. */
  mask-image: url('assets/home-hero-amber-mask.png');
  mask-mode: alpha;
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  margin-right: -32px;
}
@media (min-width: 1001px) and (max-width: 1199px) {
  .home-hero .hero-inner { grid-template-columns: minmax(0, 62%) minmax(0, 38%); }
  .home-hero .hero-copy h1 { font-size: 56px; line-height: 64px; }
  .home-hero .hero-copy p { max-width: 100%; font-size: 18px; line-height: 28px; }
  .home-hero-media { position: absolute; inset: 0 -24px 0 auto; width: calc(38% + 24px); height: 100%; align-self: stretch; overflow: hidden; }
  .home-hero .hero-portrait { position: absolute; width: auto; height: 100%; margin: 0; right: 0; bottom: 0; }
}
@media (max-width: 1000px) {
  .home-hero { min-height: 0; background: var(--cream); }
  .home-hero .hero-inner { min-height: 0; width: 100%; display: flex; flex-direction: column; }
  .home-hero .hero-inner::after { display: none; }
  .home-hero .hero-copy { padding: 32px var(--gutter) 24px; gap: 24px; width: 100%; }
  .home-hero .hero-copy h1 { max-width: 650px; font-size: 48px; line-height: 54px; }
  .home-hero .hero-copy p { max-width: 610px; font-size: 18px; line-height: 28px; }
  .home-hero-media { align-self: center; }
  .home-hero .hero-portrait {
    align-self: center;
    width: 280px;
    max-width: 100%;
    margin: 0;
  }
}
@media (max-width: 600px) {
  .home-hero .hero-copy h1 { font-size: 44px; line-height: 50px; }
  .home-hero .hero-actions { width: 100%; flex-direction: column; }
  .home-hero .hero-portrait { width: 220px; }
}