/* One continuous hero; the transparent navigation has clear space above the portrait. */
body:not(.collection-page) > .header {
  position: absolute;
  inset: 0 0 auto;
  height: 96px;
  background: transparent;
}
.hero {
  height: auto;
  min-height: clamp(700px, 93svh, 820px);
}
.hero .portrait {
  top: 88px;
  height: calc(100% - 88px);
  mask-image: linear-gradient(to right, transparent, #000 19%), linear-gradient(to bottom, transparent, #000 40px);
  mask-composite: intersect;
}
.hero-content {
  padding-top: clamp(200px, 16vw, 260px);
  padding-bottom: 72px;
}
/* Keep the icons in document flow so buttons can never collide with them. */
.hero-content .socials {
  margin-top: 44px;
}
.socials, .about .socials {
  gap: 12px;
}
.hero-bottom {
  left: auto;
  right: 4vw;
  bottom: 44px;
}
@media (max-width: 950px) {
  .hero { min-height: 700px; }
  .hero-content { padding-top: 210px; }
}
@media (max-width: 650px) {
  body:not(.collection-page) > .header { height: 80px; }
  .hero { min-height: 0; }
  .hero .portrait {
    top: 64px;
    height: 520px;
    mask-image: linear-gradient(to bottom, #000 55%, transparent 100%), linear-gradient(to bottom, transparent, #000 32px);
  }
  .hero-content {
    padding-top: 500px;
    padding-bottom: 56px;
  }
  .hero-content .socials { margin-top: 36px; }
  .hero-bottom { display: none; }
}