.mobile-menu-toggle {
  display: none;
}

.mobile-menu-nav__top {
  display: none;
}

@media (max-width: 900px) {
  body.is-mobile-menu-open {
    overflow: hidden;
  }

  .mobile-menu-toggle {
    position: fixed;
    z-index: 72;
    top: max(1rem, env(safe-area-inset-top));
    right: max(1rem, env(safe-area-inset-right));
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.65rem 0.5rem;
    place-content: center;
    gap: 0.3125rem;
    border: 0;
    color: #fff;
    background: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    pointer-events: auto;
    backdrop-filter: blur(0.25rem);
  }

  /* A transformed TOP header becomes the containing block for fixed children. */
  body:not(.is-loading) .site-header {
    transform: none;
  }

  .mobile-menu-toggle span {
    display: block;
    width: 1.5rem;
    height: 0.125rem;
    background: currentColor;
    transform-origin: center;
    transition: opacity 240ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1), width 420ms ease;
  }

  .is-mobile-menu-open .mobile-menu-toggle {
    background: transparent;
  }

  .is-mobile-menu-open .mobile-menu-toggle span:first-child {
    transform: translateY(0.4375rem) rotate(45deg);
  }

  .is-mobile-menu-open .mobile-menu-toggle span:nth-child(2) {
    width: 0;
    opacity: 0;
  }

  .is-mobile-menu-open .mobile-menu-toggle span:last-child {
    transform: translateY(-0.4375rem) rotate(-45deg);
  }

  .mobile-menu-nav {
    position: fixed;
    z-index: 70;
    inset: 0;
    display: flex;
    width: 100%;
    height: 100dvh;
    padding: max(4.75rem, env(safe-area-inset-top)) 1.5rem max(3rem, env(safe-area-inset-bottom));
    flex-direction: column;
    gap: min(4.5rem, 7vh);
    align-items: center;
    justify-content: center;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    background: #111;
    clip-path: circle(0 at calc(100% - 2.375rem) 2.375rem);
    pointer-events: none;
    transform: none;
    transition: visibility 0s linear 650ms, opacity 260ms ease, clip-path 650ms cubic-bezier(0.76, 0, 0.24, 1);
  }

  .mobile-menu-nav::before,
  .mobile-menu-nav::after {
    content: none;
  }

  .is-mobile-menu-open .mobile-menu-nav {
    visibility: visible;
    opacity: 1;
    clip-path: circle(150% at calc(100% - 2.375rem) 2.375rem);
    pointer-events: auto;
    transition-delay: 0s;
  }

  .mobile-menu-nav a {
    position: relative;
    z-index: 2;
    display: flex;
    width: min(13rem, calc(100vw - 4rem));
    gap: 0.75rem;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--display-font);
    font-size: 1.35rem;
    font-style: italic;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0.07em;
    opacity: 1;
    transform: none;
    transition: color 180ms ease;
  }

  .mobile-menu-nav .mobile-menu-nav__top {
    display: flex;
  }

  .mobile-menu-nav a::before {
    content: "";
    width: 1.25rem;
    height: 0.1875rem;
    flex: 0 0 auto;
    background: var(--color-red);
  }

  .mobile-menu-nav > a > span {
    display: none;
  }

  .mobile-menu-nav a:hover,
  .mobile-menu-nav a:focus-visible {
    color: var(--color-red);
    outline: none;
  }

  .mobile-menu-nav--top a {
    font-size: clamp(1.25rem, 6vw, 1.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu-toggle span,
  .mobile-menu-nav {
    transition-duration: 0.01ms;
  }
}