/* Safari can clip backdrop sampling at the device inset. Give the system
   status area its own dark surface, independent of the scrolling blur. */
:root {
  --site-status-height: env(safe-area-inset-top, 0px);
  --site-status-feather: min(10px, var(--site-status-height));
}

#website::before,
#project::before {
  content: '';
  position: fixed;
  z-index: 36;
  top: 0;
  right: 0;
  left: 0;
  height: calc(var(--site-status-height) + var(--site-status-feather));
  background: linear-gradient(
    to bottom,
    #050505 var(--site-status-height),
    transparent
  );
  pointer-events: none;
}