/* Native photo proportions: the image itself is never cropped to a preset frame. */
.hero-photo{height:auto;aspect-ratio:var(--photo-ratio,.66640625)}
.hero-photo--1,.hero-photo--4{--photo-ratio:.66640625}
.hero-photo--2,.hero-photo--8{--photo-ratio:2.20499569}
.hero-photo--3{--photo-ratio:.5625}
.hero-photo--5{--photo-ratio:.99375}
.hero-photo--6{--photo-ratio:.5640625}
.hero-photo--7{--photo-ratio:.75}
.hero-photo--5{left:4.5%}
.hero-photo [data-float]{width:100%;height:auto;aspect-ratio:var(--photo-ratio,.66640625)}
.hero .hero-photo-trigger{display:block;width:100%;height:auto;aspect-ratio:var(--photo-ratio,.66640625)}
.hero .hero-photo img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;object-position:center top}
.collage-photo--1{height:auto;aspect-ratio:3/4}
.hero-photo img,.barber-portrait img,.about-portrait img,.collage-photo img,.panorama img{object-fit:contain;object-position:center top}
html.gallery-open [data-float]{animation-play-state:paused!important}
/* A same-photo full-bleed layer fills the stage only when desktop head safety
   requires a smaller/shifted sharp photograph. Both layers share the landing. */
.intro-card .intro-card-backdrop{filter:blur(12px);opacity:.45;z-index:0}
.intro-card .intro-card-photo{z-index:1}

@media(max-width:899px){
  .hero{height:100vh;height:100svh;min-height:0;--hero-message-height:272px;--hero-row-boundary:64px;--hero-photo-limit:max(0px,min(120px,calc((100svh - var(--hero-message-height))/2 - 88px)))}
  .hero .hero-message{top:50%;left:20px;right:20px;transform:translateY(-50%);gap:clamp(10px,2.2svh,18px)}
  .hero .hero-message h1{font-size:min(clamp(36px,14.359vw,64px),8.5svh)}
  .hero .hero-logo{width:min(210px,27svh);max-width:60%;height:auto}
  .hero .hero-meta{bottom:16px}
  .hero .hero-photo{--photo-height:var(--hero-photo-limit);--photo-center-x:18%;width:calc(var(--photo-height)*var(--photo-ratio));height:auto;left:calc(var(--photo-center-x) - var(--photo-height)*var(--photo-ratio)/2);top:calc((100% - var(--hero-message-height))/4 + var(--hero-row-boundary)/2 - var(--photo-height)/2)}
  .hero .hero-photo--2{--photo-height:min(49px,var(--hero-photo-limit));--photo-center-x:50%}
  .hero .hero-photo--4{--photo-center-x:82%}
  .hero .hero-photo--7{--photo-center-x:23%;top:calc(100% - (100% - var(--hero-message-height))/4 - var(--hero-row-boundary)/2 - var(--photo-height)/2)}
  .hero .hero-photo--5{--photo-center-x:76%;top:calc(100% - (100% - var(--hero-message-height))/4 - var(--hero-row-boundary)/2 - var(--photo-height)/2)}
  .hero .hero-photo--1{--compact-x:-2px;--compact-y:-2px}
  .hero .hero-photo--2{--compact-x:2px;--compact-y:-1px}
  .hero .hero-photo--4{--compact-x:1px;--compact-y:2px}
  .hero .hero-photo--5{--compact-x:-2px;--compact-y:1px}
  .hero .hero-photo--7{--compact-x:2px;--compact-y:-2px}
  .motion-ready .hero[data-compact-photos=true] .hero-photo:nth-child(n) [data-float]{animation-name:hero-compact-drift}
}
@media(min-width:600px) and (max-width:899px){.hero .hero-message h1{font-size:min(76px,8.5svh)}}
@media(max-width:899px) and (max-height:600px){.motion-ready .hero .hero-photo:nth-child(n) [data-float]{animation-name:hero-compact-drift}}
@keyframes hero-compact-drift{0%,100%{transform:translate3d(0,0,0) rotate(0)}40%{transform:translate3d(var(--compact-x,2px),var(--compact-y,-2px),0) rotate(.25deg)}75%{transform:translate3d(calc(var(--compact-x,2px)*-.5),calc(var(--compact-y,-2px)*-.5),0) rotate(-.2deg)}}