/* A transparent portrait window keeps the page landscape continuous.
   Keep the approved preview and its shared styles unchanged. */
.hero-photo.portrait-study{
  overflow:hidden;background:transparent;box-shadow:none;
  border-color:transparent;outline:none
}
.portrait-composition{
  position:relative;isolation:isolate;width:100%;aspect-ratio:4/5;
  overflow:hidden;border-radius:calc(var(--radius) - 8px);background:transparent
}
.hero-photo.portrait-study .portrait-person{
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:94%;height:auto;aspect-ratio:1;object-fit:contain;opacity:1;
  filter:none!important;mix-blend-mode:normal!important;
  border-radius:0!important;z-index:1
}
@media(max-width:820px){
  .portrait-composition{aspect-ratio:1}
  .hero-photo.portrait-study .portrait-person{width:75%}
}

/* Let the hero use a large display without widening the content below it.
   Align the actual cutout with the introduction instead of offsetting a fixed frame. */
@media(min-width:821px){
  .hero{
    width:min(1520px,calc(100vw - 80px));margin-left:50%;transform:translateX(-50%);
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    align-items:start;align-content:center;
    min-height:min(calc(100svh - var(--nav-h)),1000px)
  }
  .hero-text{min-width:0}
  .hero .lede{max-width:48ch}
  .hero-photo.portrait-study{
    position:relative;top:0;width:clamp(340px,36vw,640px);max-width:100%;
    padding-top:0;padding-bottom:0
  }
  .portrait-composition{aspect-ratio:auto}
  .hero-photo.portrait-study .portrait-person{
    position:relative;bottom:auto;left:auto;transform:none;width:94%;margin-inline:auto
  }
}