.l-menu {
  --gap: var(--theme-spacing--gutter);
  @include grid-assign(heading, action, primary, secondary, container);
  @include pattern(graph, currentColor, b, false, 0.2);
  overflow: hidden;
  position: fixed;
  top: 0;
  right: -100%;
  visibility: hidden;
  background-color: var(--theme-color--paper);
  border-right: 1px solid var(--theme-color--contrast-max);
  min-height: calc(100vh - calc(100vh - 100%));
  min-width: var(--theme-spacing--container-min);
  max-width: calc(2 * var(--theme-spacing--container-min));
  z-index: 1;

  --box-shadow: var(--theme-color--ink-fade);
  box-shadow: -20px -2px 30px var(--box-shadow);

  .is-dark-mode & {
    --box-shadow: var(--theme-color--contrast-max);
  }

  &.is-active {
    visibility: visible;
    right: var(--theme-spacing--menu);
    outline: none;
    animation: slide-menu 0.8s ease-out forwards;
  }

  grid-template: "container";

  &__container {
    display: grid;
    grid-template:
      ". ....... ......... ......... ." var(--gap)
      ". heading ......... action    ." min-content
      ". ....... ......... ......... ." var(--gap)
      ". primary primary   primary   ." 1fr
      ". ....... secondary secondary ." var(--theme-spacing--touchtarget)
      ". ....... ......... ......... ." var(--gap) / var(--gap)
      1fr 1fr var(--theme-spacing--touchtarget) var(--gap);
    align-items: center;
  }

  &__link {
    text-transform: lowercase;
    text-decoration: none;
  }

  &__heading {
    font: var(--theme-font--brand);
  }
  &__home {
    @include on-event {
      outline: 1px dotted;
      color: var(--theme-color--accent);
    }
  }

  &__secondary {
    display: flex;
    justify-content: flex-end;
  }

  &__bg {
    grid-area: container;
    object-fit: cover;
    z-index: -1;
    mix-blend-mode: darken; // might remove this, not v performant
    @media (prefers-color-scheme: dark) {
      mix-blend-mode: overlay;
    }
  }
}

@keyframes slide-menu {
  0% {
    transform: translateX(100vw);
  }
  40% {
    transform: translateX(100vw);
  }
  50% {
    transform: translateX(100vw);
  }
  100% {
    transform: translateX(0);
  }
}
