/**
 * Glass behind the homepage's mobile menu.
 *
 * The links used to sit straight on the photograph, holding themselves up with a text shadow. This
 * gives them a pane to stand on: dark enough for cream type to read over any frame of the artwork,
 * translucent enough that the picture still shows through. Scoped to the one element it is meant
 * for — the burger panel inside the hero, which only exists on narrow screens.
 */
#hero > div.absolute.top-20.items-end.md\:hidden {
  padding: 0.6rem;
  border-radius: 22px;
  background: rgba(44, 24, 50, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 24px 54px -26px rgba(26, 12, 30, 0.75);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
}

/* With a panel underneath, the per-link shadow is no longer doing any work. */
#hero > div.absolute.top-20.items-end.md\:hidden > a {
  filter: none;
  --tw-drop-shadow: none;
}

/* Browsers without backdrop-filter get an honest solid panel rather than a murky one. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  #hero > div.absolute.top-20.items-end.md\:hidden {
    background: rgba(44, 24, 50, 0.86);
  }
}