/* TOM V5.3 — clean photo cutout with a crisp base and enlarged portrait.
   This stylesheet affects the HERO only. Other galleries and MacBook logic remain unchanged. */
.hero-grid { position: relative; }
.hero-portrait {
  position: absolute; z-index: 2; pointer-events: none; margin: 0;
  height: calc(100% + 29px); width: auto; aspect-ratio: 447 / 600;
  right: -1%; bottom: 0;
  overflow: hidden;
}
.hero-portrait .portrait-frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: hidden; background: transparent;
}
.hero-portrait .portrait-frame::after { display: none !important; }
.hero-portrait .portrait-frame img {
  display: block; width: 100%; height: 100%;
  object-fit: fill; object-position: center bottom;
  filter: none; -webkit-mask-image: none !important; mask-image: none !important;
}
/* No contact-shadow fade, gradient or blur at the cut line. */
.hero-portrait .portrait-contact-shadow { display: none !important; }
.hero-portrait figcaption { display: none; }
.hero-bottom { position: relative; z-index: 4; }
@media (min-width: 1600px) {
  .hero-portrait { height: calc(100% + 29px); width: auto; right: -1%; bottom: 0; }
}
@media (min-width: 721px) and (max-width: 1200px) {
  .hero-portrait { height: calc(100% + 22px); width: auto; right: -6%; bottom: 0; }
}
@media (max-width: 720px) {
  .hero-grid { padding-bottom: 0; }
  .hero-portrait {
    position: relative; order: 1; align-self: flex-end;
    width: min(95vw, 440px); height: auto; aspect-ratio: 447 / 600;
    right: auto; bottom: auto; margin: 0 -4vw 0 0;
  }
  .hero-portrait .portrait-frame { position: absolute; inset: 0; }
}
@media (max-width: 420px) {
  .hero-portrait { width: 98vw; height: auto; margin: 0 -6vw 0 0; }
}