/* Shared viewport rules: cover screens, unfolded phones, landscape and split windows.
   React to available space and input, never a device-name or user-agent list. */
:root{--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px)}
.project-gallery{--case-gutter:max(clamp(24px,4vw,110px),var(--safe-left),var(--safe-right))}
:is(.cf-hero,.story-chapter,.about-hero,.about-story,.about-principles,.about-location,.cf-closing){padding-left:max(var(--pad),var(--safe-left));padding-right:max(var(--pad),var(--safe-right))}
.site-header,.gallery-header{padding-left:max(var(--pad,4vw),var(--safe-left));padding-right:max(var(--pad,4vw),var(--safe-right));padding-top:calc(16px + var(--safe-top));height:calc(var(--header-clearance,94px) + var(--safe-top))}
.gallery-header{height:calc(104px + var(--safe-top));padding-inline:max(var(--case-gutter),var(--safe-left)) max(var(--case-gutter),var(--safe-right))}
.case-tools{bottom:calc(18px + var(--safe-bottom));left:max(var(--case-gutter),var(--safe-left));right:max(var(--case-gutter),var(--safe-right))}
.case-next{padding-bottom:calc(70px + var(--safe-bottom))}
.quiet-footer{padding-bottom:calc(35px + var(--safe-bottom))}
:where(dialog){max-width:calc(100vw - max(32px,var(--safe-left) + var(--safe-right)));max-height:calc(100dvh - 32px - var(--safe-top) - var(--safe-bottom))}
:is(.screen-dialog,.enquiry-dialog){max-width:calc(100vw - max(32px,var(--safe-left) + var(--safe-right)));max-height:calc(100dvh - 32px - var(--safe-top) - var(--safe-bottom))}
:is(.dialog-close,.screen-dialog form button,.gallery-header nav a){min-height:44px;display:inline-flex;align-items:center;justify-content:center}
#site-menu{max-height:calc(100dvh - 32px - var(--safe-top) - var(--safe-bottom));overflow:auto;overscroll-behavior:contain}
:where(.opening-copy,.brief-columns,.delivery-copy,.delivery-tech,.cf-story-copy,.cf-service>div){min-width:0}
:where(.delivery-tech dd,.contact-email,.client-help,.cf-essentials strong){overflow-wrap:anywhere}
@media(max-width:900px){.gallery-header{height:calc(85px + var(--safe-top))}.screen-dialog{padding:12px}.case-tools{gap:12px}}
@media(max-width:600px){
 .project-gallery{--case-gutter:max(20px,var(--safe-left),var(--safe-right))}
 .site-header{padding-inline:max(20px,var(--safe-left)) max(20px,var(--safe-right))}
 .gallery-header{padding-inline:max(20px,var(--safe-left)) max(20px,var(--safe-right))}
 :where(dialog):not(.screen-dialog):not(#site-menu){padding:25px 22px}
 .screen-dialog{max-width:calc(100vw - 20px)}
 .case-tools{gap:8px}.case-progress{min-width:16px}
 .site-header .brand{flex-shrink:0}
 .cf-hero .hero-actions{flex-wrap:wrap;row-gap:18px}
 #site-menu{top:calc(87px + var(--safe-top));height:auto;max-height:calc(100dvh - 102px - var(--safe-top) - var(--safe-bottom))}
}
/* Unfolded and landscape phones get a balanced composition, not a squeezed desktop. */
@media(min-width:601px) and (max-width:1000px){
 .cf-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px 24px;min-height:100svh;padding-top:calc(125px + var(--safe-top));padding-bottom:40px}
 .cf-hero .hero-top{grid-column:1/-1;margin:0}
 .cf-hero-heading{grid-column:1;grid-row:2;padding:0;margin:0;align-self:center}
 .cf-hero h1{font-size:clamp(43px,6.6vw,68px);max-width:100%;line-height:1.06}
 .cf-hero-art{grid-column:2;grid-row:2;position:relative;inset:auto;width:100%;max-width:400px;height:auto;aspect-ratio:1;transform:none;margin:0;align-self:center;justify-self:center}
 .cf-hero .hero-bottom{grid-column:1/-1;display:flex;gap:30px;margin:0;padding-top:20px;align-items:flex-end}
 .cf-hero .hero-bottom>p{width:58%;font-size:15px}
 .cf-hero .hero-actions{flex-direction:column;align-items:flex-end;flex-shrink:0;gap:18px}
 .cf-hero .talk-link{font-size:12px;min-height:44px;gap:16px}
 .cf-hero .explore-link{font-size:12px;gap:12px}
 .about-hero{padding-top:145px;min-height:0;gap:60px}
 .about-hero h1{font-size:clamp(60px,10vw,100px)}
 .about-hero-bottom{gap:30px}.about-hero-bottom>p{font-size:18px}
}
@media(max-height:550px) and (min-width:601px){
 .site-header,.gallery-header{position:absolute}
 .case-tools{position:relative;left:auto;right:auto;bottom:auto;margin:0 var(--case-gutter) calc(18px + var(--safe-bottom))}
 .case-next{padding-bottom:45px}
 .case-opening{padding-top:145px;min-height:0}
 .cf-hero{min-height:0}
 #site-menu{height:auto;padding:20px 30px;max-height:calc(100dvh - 24px - var(--safe-top) - var(--safe-bottom))}
 #site-menu nav{font-size:clamp(24px,4vw,36px);gap:4px;margin:15px 0}
 #site-menu .dialog-close{margin-bottom:15px}
}
@media(pointer:coarse){
 .site-header :is(.sound-toggle,.menu-button){min-width:44px;min-height:44px}
 .cf-story-cta,.cf-service>.text-link,.text-link{min-height:44px}
 .case-tools button,.case-tools a{min-height:44px}
}
/* A real segmented viewport reports its usable panes. Keep modal controls in one
   pane; continuous unfolded displays retain the full responsive composition. */
@media(horizontal-viewport-segments:2){
 dialog:not(#site-menu){width:calc(env(viewport-segment-width 0 0) - 32px);max-width:calc(env(viewport-segment-width 0 0) - 32px);margin-left:16px;margin-right:0}
 #site-menu{width:calc(env(viewport-segment-width 0 0) - 24px);max-width:calc(env(viewport-segment-width 0 0) - 24px);left:12px;right:auto}
 .case-tools{right:auto;width:calc(env(viewport-segment-width 0 0) - 48px);left:24px}
 .case-brief,.case-delivery{grid-template-columns:env(viewport-segment-width 0 0) env(viewport-segment-width 1 0);gap:calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));width:100%;max-width:none;padding-inline:0}
 .case-brief>div,.case-delivery>div{padding-inline:24px;min-width:0}
 .case-brief h2,.case-delivery h2{font-size:38px}
}

@media(vertical-viewport-segments:2){
 :is(dialog,.screen-dialog,.enquiry-dialog){top:env(viewport-segment-top 0 0);bottom:auto;max-height:calc(env(viewport-segment-height 0 0) - 24px);margin-top:12px}
 #site-menu{top:12px;max-height:calc(env(viewport-segment-height 0 0) - 24px)}
}