/* Homepage only: extend the photograph into Safari's safe area.
   Keep the readability gradient on the photograph, not on the fixed header,
   so a translucent header gradient does not become a flat toolbar tint. */
@media(max-width:760px){
  .header:not(.is-scrolled){background:transparent}
  .header{height:calc(65px + env(safe-area-inset-top,0px));padding-top: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))}
  .header.is-scrolled{height:calc(60px + env(safe-area-inset-top,0px))}
  .hero::before{content:"";position:absolute;inset:0 0 auto;height:calc(65px + env(safe-area-inset-top,0px));background:linear-gradient(#1b172c88,transparent);pointer-events:none}
  .wrap{max-width:calc(100% - max(20px,env(safe-area-inset-left,0px)) - max(20px,env(safe-area-inset-right,0px)))}
  footer{padding-bottom:calc(25px + env(safe-area-inset-bottom,0px))}
  dialog{max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 40px);overflow:auto}
}