/* Keep the photograph, lettering and roof cutout on one undistorted image plane. */
.hero{--hero-frame-height:min(100svh,850px);--hero-art-min-height:var(--hero-frame-height);--hero-letter-size:min(17.5vw,330px)}
.hero-scene{position:absolute;top:0;left:50%;width:max(100%,calc(var(--hero-art-min-height)*1672/941));aspect-ratio:1672/941;transform:translateX(-50%);isolation:isolate;z-index:-2;pointer-events:none}
.hero-scene .hero-image{position:absolute;inset:0;width:100%;height:100%;min-height:0;max-width:none;transform:none;object-fit:fill;z-index:0}
.hero-scene .hero-wordmark{position:absolute;top:calc(29.3% - var(--hero-letter-size)*.64);left:50%;transform:translateX(-50%);max-width:none;width:max-content;font-size:var(--hero-letter-size);font-weight:400;letter-spacing:-.078em;line-height:1;white-space:nowrap;color:rgba(255,255,255,.91);filter:blur(.25px);z-index:1}
.hero-scene .hero-foreground{z-index:2;clip-path:polygon(0 61%,17.703% 61%,17.703% 34.969%,29.486% 29.230%,54.426% 36.032%,57.656% 35.394%,57.656% 33.906%,82.297% 29.230%,87.739% 33.694%,87.739% 64%,100% 72%,100% 100%,0 100%)}
.hero .hero-shade{z-index:-1}
@media(max-width:800px){
 .hero{--hero-art-min-height:calc(var(--hero-frame-height)*.92);--hero-letter-size:17vw}
 .hero-scene{top:0;z-index:0}
 .hero-scene .hero-wordmark{top:calc(34.5% - var(--hero-letter-size)*.64 - 16px)}
 .hero .hero-shade{z-index:2}
}
@media(max-width:540px){.hero{--hero-art-min-height:calc(var(--hero-frame-height)*.78)}.hero-scene{top:3%}}
@media(max-width:540px) and (max-height:650px){.hero{--hero-art-min-height:calc(var(--hero-frame-height)*.83)}.hero-scene{top:2%}}