/* Shared photograph stage; mobile viewport rules follow below. */
.mobile-slideshow{display:block;position:absolute;inset:0}
.mobile-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;opacity:0;transition:opacity 1.2s ease;pointer-events:none}
.mobile-slide.active{opacity:1}
.mobile-slideshow-ready #heroPoster{visibility:hidden}
.hero{touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none}
.hero.is-swiping,.hero.is-swiping *{cursor:grabbing!important}
@media(hover:hover) and (pointer:fine){.hero{cursor:grab}.hero a,.hero button{cursor:pointer}}
@media(max-width:800px), (hover:none) and (pointer:coarse) and (max-height:600px){
 .mobile-slideshow{display:block;position:absolute;inset:0}
 .mobile-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;opacity:0;transition:opacity 1.2s ease;pointer-events:none}
 .mobile-slide.active{opacity:1}
 .mobile-slideshow-ready #heroPoster{visibility:hidden}
}
@media(prefers-reduced-motion:reduce){.mobile-slide{transition:none}}

/* Stable full-screen framing; browser chrome changes never rescale the photo. */
@media(max-width:800px), (hover:none) and (pointer:coarse) and (max-height:600px){
 .hero{width:100%;height:100vh;height:var(--mobile-viewport-height,100svh);min-height:0;max-height:none}
 .hero-slides,.mobile-slideshow{width:100%;height:100%}
 .mobile-slide{max-width:none;object-fit:cover}
 .site-header{height:calc(68px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
 .site-header.scrolled{height:calc(62px + env(safe-area-inset-top,0px))}
 .hero-content{left:max(22px,env(safe-area-inset-left,0px));bottom:calc(clamp(100px,16svh,145px) + env(safe-area-inset-bottom,0px))}
 .hero-bottom{left:max(22px,env(safe-area-inset-left,0px));bottom:calc(28px + env(safe-area-inset-bottom,0px))}
}
@media(orientation:landscape) and (max-height:600px) and (hover:none) and (pointer:coarse){
 .hero h1{font-size:clamp(24px,6svh,36px)}
 .hero-content{bottom:calc(78px + env(safe-area-inset-bottom,0px))}
 .hero-link{margin-top:8px}
}

/* Fade the photograph into the exact background of the map section. */
.hero-controls{display:none}
.hero{background:var(--ink)}
.hero-shade{background:linear-gradient(180deg,rgba(8,9,10,.28) 0%,rgba(8,9,10,.04) 27%,rgba(8,9,10,0) 48%,rgba(8,9,10,.08) 62%,rgba(8,9,10,.32) 75%,rgba(8,9,10,.7) 87%,rgba(8,9,10,.96) 96%,var(--ink) 100%)}
.places{background:var(--ink)}

.mobile-slide,.hero-photo{transform:none;animation:none}