/* The root scroll surface and the sticky header share one opaque colour.
   iOS rubber-banding / browser chrome must not sample the photographic layer.
   Safe area belongs to the actual header box, not an overlay or a translated layer. */
html{background:#101512;overscroll-behavior-y:none}
body{margin:0}
body>header{position:sticky;top:0;left:auto;z-index:30;isolation:isolate;background:#101512;backdrop-filter:none;-webkit-backdrop-filter:none;transform:none;will-change:auto}
@media(max-width:760px){
 body>header{padding-top:calc(15px + env(safe-area-inset-top,0px));padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
 html{scroll-padding-top:calc(110px + env(safe-area-inset-top,0px))}
}