/* Edge-to-edge canvas; only interactive content is inset away from hardware cutouts. */
:root{--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
html,body{background-color:#101519}
@media(max-width:800px),(max-width:950px) and (max-height:500px){
 #experience{height:100dvh}
 #menu-dialog,#print-dialog,#contact-dialog:not(.video-enlarged){height:100dvh;max-height:100dvh}
 header{left:max(24px,var(--safe-left));right:max(24px,var(--safe-right));top:max(20px,var(--safe-top))}
 dialog .close,#menu-dialog .close{right:max(20px,var(--safe-right));top:max(12px,var(--safe-top))}
 .dialog-home,#menu-dialog .dialog-home,body.regard-open #story-dialog .dialog-home{left:max(24px,var(--safe-left));top:max(12px,var(--safe-top))}
 dialog .panel-language{right:calc(max(20px,var(--safe-right)) + 48px);top:max(12px,var(--safe-top))}
 #menu-dialog .menu-content{padding-left:max(28px,var(--safe-left));padding-right:max(28px,var(--safe-right));padding-bottom:var(--safe-bottom)}
 #print-dialog .print-content,.reading,.overview-scroll,#legal-dialog article{padding-left:max(24px,var(--safe-left));padding-right:max(24px,var(--safe-right));padding-bottom:max(28px,var(--safe-bottom))}
 #explore-top-group{right:max(20px,var(--safe-right))}
 body:not(.atlas-mode) #journey-controls #about-series{left:max(20px,var(--safe-left));bottom:max(22px,var(--safe-bottom))}
 body:not(.atlas-mode) #journey-controls #print-current{right:max(20px,var(--safe-right));bottom:max(22px,var(--safe-bottom))}
 #contact-dialog.portfolio-fullscreen{height:100dvh!important;max-height:100dvh!important}
 #contact-dialog.portfolio-fullscreen #contact-video-audio-row{left:max(24px,var(--safe-left))!important;bottom:max(14px,var(--safe-bottom))!important}
 #contact-dialog.portfolio-fullscreen.video-landscape #contact-video-audio-row{left:auto!important;right:max(12px,var(--safe-right))!important}
 body:has(#order-form),body:has(#checkout-form){padding-left:var(--safe-left);padding-right:var(--safe-right)}
}
/* Contact mobile: the same hierarchy as desktop, without changing Portfolio modes. */
@media(max-width:800px),(max-width:950px) and (max-height:500px){
 #contact-dialog:not(.portfolio-fullscreen):not(.video-user-fullscreen):not(.video-enlarged):not(:fullscreen) .contact-content{display:flex;flex-direction:column;align-items:stretch;gap:0;height:100%;padding:82px max(24px,var(--safe-right)) max(28px,var(--safe-bottom)) max(24px,var(--safe-left))!important}
 #contact-dialog:not(.portfolio-fullscreen):not(.video-user-fullscreen):not(.video-enlarged):not(:fullscreen) .contact-content>.eyebrow{order:0;margin:0 0 14px;font:9px/1.5 Arial,sans-serif;letter-spacing:.18em;color:#a8b4bc}
 #contact-dialog:not(.portfolio-fullscreen):not(.video-user-fullscreen):not(.video-enlarged):not(:fullscreen) .contact-heading{order:1;display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:0}
 #contact-dialog:not(.portfolio-fullscreen):not(.video-user-fullscreen):not(.video-enlarged):not(:fullscreen) .contact-content #contact-title{font:400 48px/1 Georgia,serif;letter-spacing:-.045em;margin:0}
 #contact-dialog:not(.portfolio-fullscreen):not(.video-user-fullscreen):not(.video-enlarged):not(:fullscreen) .contact-phone{font:14px/1.5 Arial,sans-serif;letter-spacing:.045em;text-decoration:none;border:0;padding:0;min-height:0}
 #contact-dialog:not(.portfolio-fullscreen):not(.video-user-fullscreen):not(.video-enlarged):not(:fullscreen) .contact-lead{order:2;margin:16px 0;font:14px/1.6 Arial,sans-serif;color:#b9c2c8}
 #contact-dialog:not(.portfolio-fullscreen):not(.video-user-fullscreen):not(.video-enlarged):not(:fullscreen) .mobile-purchase{order:3;align-self:flex-start;min-height:40px;margin:0 0 18px;padding:8px 0;font:13px/1.5 Arial,sans-serif;border:0;border-bottom:1px solid #ffffff60}
 #contact-dialog:not(.portfolio-fullscreen):not(.video-user-fullscreen):not(.video-enlarged):not(:fullscreen) .contact-links{order:4;display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 20px!important;padding:16px 0 0;border-top:1px solid #ffffff24}
 #contact-dialog:not(.portfolio-fullscreen):not(.video-user-fullscreen):not(.video-enlarged):not(:fullscreen) .contact-links a{font:11px/1.6 Arial,sans-serif;padding:4px 0;white-space:normal}
 #contact-dialog:not(.portfolio-fullscreen):not(.video-user-fullscreen):not(.video-enlarged):not(:fullscreen) #contact-player{order:5;flex:none;margin:0;width:100%}
 #contact-dialog:not(.portfolio-fullscreen):not(.video-user-fullscreen):not(.video-enlarged):not(:fullscreen) #contact-video-audio-row{order:6;flex:none;justify-content:space-between;min-height:52px;margin:0 0 24px;padding:4px 0;border-bottom:1px solid #ffffff24}
 #contact-dialog:not(.portfolio-fullscreen):not(.video-user-fullscreen):not(.video-enlarged):not(:fullscreen) #contact-form{order:7;flex:none}
}
@media(max-width:800px),(max-width:950px) and (max-height:500px){
 #experience>#music-dock{right:max(20px,var(--safe-right))}
 .checkout-header,.checkout-panel,.art-panel{padding-left:max(24px,var(--safe-left));padding-right:max(24px,var(--safe-right))}
}
@media(max-width:800px),(max-width:950px) and (max-height:500px){
 #contact-dialog.portfolio-fullscreen.video-landscape:not(:fullscreen):not(.video-user-fullscreen)>.close{right:max(20px,var(--safe-right));top:max(12px,var(--safe-top))}
}
/* Mobile gallery: match the surrounding canvas, avoiding blue horizontal seams. */
@media(max-width:800px),(max-width:950px) and (max-height:500px){
 body.atlas-mode #atlas{background:#101519}
}
/* Scroll-container focus must not draw the native blue frame on iPhone. */
@media(max-width:800px),(max-width:950px) and (max-height:500px){
 #atlas:focus{outline:none}
 #atlas:focus-visible{outline:1px solid #f3f2ee;outline-offset:-2px}
 html[data-navigation-input="pointer"] #atlas:focus{outline:none}
}