/* A narrow, non-interactive veil lets content recede beneath the fixed navbar. */
.navigation-fade {
  position: fixed;
  inset: 0 0 auto;
  height: var(--navigation-fade-bottom, 120px);
  z-index: 45;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to bottom,
    rgb(248 249 251 / .97) 0,
    rgb(248 249 251 / .94) var(--navigation-fade-solid, 68px),
    rgb(248 249 251 / .64) var(--navigation-fade-nav, 88px),
    rgb(248 249 251 / 0) 100%);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  -webkit-mask-image: var(--navigation-fade-mask);
  mask-image: var(--navigation-fade-mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@media(max-width:700px) {
  .navigation-fade {-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}
}
@media(prefers-reduced-motion:reduce) {
  .navigation-fade {-webkit-backdrop-filter:none;backdrop-filter:none}
}