/* Hero refinements requested after visual review. */
.display-name {
  line-height: .82;
}

.display-name .serif-line {
  margin-top: .12em;
}

.hero-layout {
  grid-template-columns: minmax(0, 1.38fr) minmax(420px, .78fr);
  gap: 0;
}

.hero-portrait-wrap {
  margin-left: -5vw;
  transform: translateX(-1.5vw);
}

.hero-portrait {
  height: min(79vh, 860px);
  overflow: visible;
  background: transparent;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.hero-portrait img {
  width: auto;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 28px 28px rgba(24, 24, 24, .14)) saturate(.96) contrast(1.02);
}

@media (max-width: 1199.98px) and (min-width: 992px) {
  .hero-layout { grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr); }
  .hero-portrait-wrap { margin-left: -3vw; }
  .hero-portrait img { height: 98%; }
}

@media (max-width: 991.98px) {
  .hero-layout { grid-template-columns: 1fr; gap: 2vw; }
  .display-name { line-height: .86; }
  .display-name .serif-line { margin-top: .16em; }
  .hero-portrait-wrap { margin-left: auto; transform: none; }
  .hero-portrait { background: transparent; }
  .hero-portrait img { height: 105%; max-width: none; object-fit: contain; object-position: center bottom; }
}

@media (max-width: 767.98px) {
  .display-name { line-height: .88; }
  .display-name .serif-line { margin-top: .18em; }
  .hero-portrait-wrap { width: 96vw; margin-right: -1.25rem; }
  .hero-portrait img { height: 102%; }
}
