/* Photo navigation stays outside the image, including on small screens. */
.lightbox{padding:20px 24px 12px;height:100dvh;overflow:hidden}
.lightbox[open]{display:grid;grid-template-rows:36px minmax(0,1fr) 24px;gap:10px}
.lightbox .lightbox-close{margin:0 0 0 auto;padding:8px 4px;font-size:12px;align-self:start;color:inherit}
.lightbox-stage{min-height:0;display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:12px}
.lightbox .lightbox-image{grid-column:2;grid-row:1;display:block;width:100%;height:100%;min-height:0;object-fit:contain;touch-action:pan-y pinch-zoom}
.lightbox .lightbox-arrow{padding:10px;margin:0;width:48px;height:48px;color:inherit;display:grid;place-items:center;grid-row:1}
.lightbox-previous{grid-column:1}.lightbox-next{grid-column:3}
.lightbox-arrow svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.lightbox-count{margin:0;text-align:center;font-size:11px;line-height:24px}
.lightbox [hidden]{display:none!important}

/* These two pages share a viewport instead of growing below its footer. */
html.single-page,html.single-page body{height:100svh;height:100dvh;overflow:hidden}
.single-page body{display:flex;flex-direction:column}
.single-page body>header{flex:none}
.single-page main{flex:1;min-height:0}
.single-page .contact-page{height:100%;min-height:0;display:flex;flex-direction:column;gap:clamp(12px,3svh,28px);padding:clamp(24px,16svh,115px) 4vw 56px}
.single-page .contact-page h1{flex:none;margin:0;font-size:clamp(40px,min(9.2vw,16svh),150px)}
.single-page .email{flex:none;font-size:clamp(20px,min(4.4vw,8svh),74px);line-height:1.15}
.single-page .social{flex:none;margin-top:clamp(8px,4svh,40px);font-size:15px}
.single-page .social p{margin:0 0 20px}
.single-page .contact-page .back{flex:none;margin:auto 0 0;align-self:flex-start;line-height:1.3}
.single-page #owner-tools{position:fixed;bottom:14px;right:32px;padding:0;z-index:5}
.single-page .preview-bar{position:fixed;bottom:8px;left:20px;padding:7px 10px;font-size:10px;z-index:6}
.single-page .about-page{padding-top:25px;gap:0}
.single-page .about-description{flex:none;min-height:clamp(30px,9.7svh,70px);max-height:22%;overflow:auto}
.single-page .about-page h1{margin-top:20px}
.single-page .about-portrait{flex:1;min-height:0;margin-top:min(var(--photo-gap),5svh);margin-bottom:18px;display:flex;align-items:flex-start;container-type:size}
.single-page .about-portrait img{height:min(100%,150cqw);width:auto;max-width:100%;max-height:100%;aspect-ratio:2/3;object-fit:cover}
.single-page .about-page .back{margin-top:auto}
@media(max-width:800px){
 .single-page .contact-page{padding-top:clamp(20px,10svh,85px)}
 .single-page .about-page{padding-top:25px}
 .single-page .about-description{min-height:40px}
}
@media(max-width:480px){
 .single-page .contact-page{padding:clamp(20px,9.5svh,80px) 22px 48px}
 .single-page .contact-page h1{font-size:min(15vw,14svh)}
 .single-page .email{font-size:7vw}
 .single-page .about-page{padding-top:20px}
 .single-page #owner-tools{right:22px;bottom:14px}
 .lightbox{padding:14px 8px 8px}
 .lightbox-stage{grid-template-columns:36px minmax(0,1fr) 36px;gap:2px}
 .lightbox .lightbox-arrow{width:36px;height:48px;padding:6px}
 .lightbox-arrow svg{width:22px;height:22px}
}
@media(max-height:540px){
 .single-page body>header{height:58px;padding:12px 22px}
 .single-page .brand img{width:32px;height:29px}
 .single-page .contact-page{padding-top:14px;padding-bottom:38px;gap:12px}
 .single-page .contact-page h1{font-size:min(9.2vw,13svh)}
 .single-page .email{font-size:min(4.4vw,7svh)}
 .single-page .social{margin-top:0;font-size:12px}
 .single-page .social p{margin-bottom:10px}
 .single-page .about-page{gap:0}
 .single-page .about-description{min-height:18px}
 .single-page .about-page h1{margin-top:8px}
 .single-page .about-portrait{margin-top:min(var(--photo-gap),3svh);margin-bottom:12px}
 .single-page #owner-tools{bottom:10px}
}