.overlay {
  position: fixed;
  z-index: 6; /*  Appear above all hero stacks. */
  top: 0;
  left: 0;
  visibility: hidden;
  width: 100%;
  height: 100vh;
  transition:
    opacity 0.2s,
    visibility 0.2s;
  opacity: 0;
  background: var(--neutral-dark);

  .is-overlay-active & {
    visibility: visible;
    opacity: 0.5;
  }

  @media (forced-colors: active) {
    background: canvasText;
  }
}