/* Reserve a permanent left gutter so the fixed logo never covers page content. */
:root{--site-logo-size:80px;--site-logo-left:16px;--site-logo-top:16px;--site-logo-clearance:112px}
.site-logo{position:fixed;top:max(var(--site-logo-top),env(safe-area-inset-top));left:max(var(--site-logo-left),env(safe-area-inset-left));z-index:6;display:block;width:var(--site-logo-size);line-height:0;background:#FFFFFF;box-shadow:0 2px 12px rgb(24 49 83 / 12%)}
.site-logo img{display:block;width:100%;height:auto;object-fit:contain}
body header,body .layout{padding-left:max(4%,calc(var(--site-logo-clearance) + env(safe-area-inset-left)))}
@media(max-width:1000px){:root{--site-logo-size:64px;--site-logo-clearance:96px}}
@media(max-width:800px){
 :root{--site-logo-size:48px;--site-logo-left:12px;--site-logo-top:12px;--site-logo-clearance:72px}
 body header,body .layout{padding-left:max(5%,calc(var(--site-logo-clearance) + env(safe-area-inset-left)))}
 body header{flex-wrap:wrap}
}
@media(max-width:800px) and (max-height:360px){:root{--site-logo-size:36px;--site-logo-top:8px;--site-logo-clearance:60px}}