/* Compact header with an unobstructed portrait. */
header.hero {
  min-height: 0;
  padding: 24px;
  display: grid;
  gap: 18px;
}
.hero .hero-summary { margin: 0; padding: 7px 10px; border-radius: 14px; }
.hero-intro {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 184px;
  grid-template-rows: auto auto;
  column-gap: 30px;
  align-items: center;
}
.hero-heading { min-width: 0; grid-column: 1; grid-row: 1; align-self: end; }
.hero .hero-kicker { width: auto; max-width: none; margin: 0 0 10px; text-align: left; font-size: .6rem; line-height: 1.5; }
.hero .name-row { width: auto; max-width: none; justify-content: flex-start; text-align: left; }
.hero .hero-name { font-size: clamp(3.3rem, 6vw, 5rem); line-height: .98; text-align: left; }
.hero .hero-copy {
  width: auto;
  max-width: 38ch;
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  margin: 14px 0 0;
  font-size: .98rem;
  line-height: 1.5;
  text-align: left;
  color: #e5dfe8;
}
.hero .hero-photo {
  position: relative;
  inset: auto;
  z-index: 2;
  grid-column: 2;
  grid-row: 1 / 3;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  opacity: 1;
  border: 1px solid #e5b6cb4a;
  border-radius: 20px;
  background: #1a1720;
  box-shadow: 0 12px 28px #0003;
}
.hero .hero-photo img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 12%; filter: saturate(.95) contrast(1.02); transform: none; will-change: auto; }
.hero .hero-photo::after { background: linear-gradient(0deg, #100b1529, transparent 45%); }
.hero .quick-nav { width: 100%; max-width: none; margin: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hero .quick-nav a { min-height: 42px; line-height: 1.35; text-align: center; }
.hero .quick-nav-unblock { font-size: .69rem; }
.hero::before { opacity: .28; }
@media (min-width: 1100px) {
  header.hero { width: min(1020px, calc(100vw - 72px)); padding: 26px 30px; }
}
@media (max-width: 720px) {
  header.hero { min-height: 0; padding: 16px; gap: 14px; border-radius: 24px; }
  .hero .hero-summary { padding: 6px 7px; border-radius: 13px; }
  .hero-intro { grid-template-columns: minmax(0, 1fr) minmax(105px, 39%); column-gap: 16px; row-gap: 14px; }
  .hero-heading { align-self: center; }
  .hero .hero-kicker { font-size: .54rem; letter-spacing: .09em; margin-bottom: 10px; }
  .hero .hero-name { max-width: 6.7ch; font-size: clamp(2.65rem, 8.4vw, 4rem); line-height: .99; }
  .hero .hero-photo { grid-row: 1; border-radius: 16px; }
  .hero .hero-copy { grid-column: 1 / -1; grid-row: 2; max-width: none; margin: 0; font-size: .88rem; line-height: 1.5; }
  .hero .quick-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .hero .quick-nav a { min-height: 42px; padding: 8px; font-size: .7rem; }
  .hero .quick-nav .quick-nav-unblock { min-height: 44px; font-size: .64rem; }
}

/* The photograph is part of the banner sky, with soft edges. */
.hero-intro { display: grid; grid-template-columns: 1fr; width: 59%; min-height: 210px; align-content: center; }
.hero-heading { align-self: auto; position: relative; z-index: 2; }
.hero .hero-copy { grid-column: 1; max-width: 37ch; position: relative; z-index: 2; }
.hero .hero-weather-half--right { border-left: 0; }
.hero .hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; z-index: 1; border: 0; border-radius: 0; background: transparent; box-shadow: none; opacity: .94; mask-image: linear-gradient(90deg, transparent, #000 24%), linear-gradient(0deg, transparent, #000 34%); mask-composite: intersect; }
.hero .hero-photo img { aspect-ratio: auto; object-position: 50% 21%; filter: saturate(.9) contrast(1.04) brightness(.91); }
.hero .hero-photo::after { background: linear-gradient(90deg, #11131a66, transparent 45%); }
@media (max-width: 720px) {
  .hero-intro { width: 100%; min-height: 210px; grid-template-columns: 1fr; row-gap: 15px; }
  .hero-heading { width: 52%; align-self: center; padding-top: 5px; }
  .hero .hero-copy { grid-column: 1; max-width: none; align-self: end; padding-top: 9px; text-shadow: 0 1px 10px #000; }
  .hero .hero-photo { inset: 15px 0 0 -10%; width: 110%; height: calc(100% - 15px); opacity: .91; mask-image: linear-gradient(90deg, transparent, #000 30%), linear-gradient(0deg, transparent 12%, #000 51%); }
  .hero .hero-photo img { object-position: 48% 17%; }
}

/* Use one continuous sky behind both the text and the photograph. */
.hero .hero-weather-stage { display: block; }
.hero .hero-weather-half--left { position: absolute; inset: 0; }
.hero .hero-weather-half--right { position: absolute; inset: 0 0 0 50%; background: transparent; }
.hero .hero-weather-half--right::before, .hero .hero-weather-half--right::after { display: none; }

.hero .hero-weather-half--right { mask-image: linear-gradient(90deg, transparent, #000 30%); }