:root {
  --menu-ink: #211e22;
  --menu-coral: #e78675;
  --menu-teal: #54a494;
  --menu-yellow: #e4b45c;
  --menu-purple: #7c7cec;
  --menu-blue: #4e97bd;
  --menu-paper: #f7e9de;
}

@media (max-width: 900px) {
  body.pdf-site #nav .burger {
    background: var(--menu-teal);
    box-shadow: 3px 3px 0 rgba(33, 30, 34, .2);
  }

  body.pdf-site #nav .burger span { background: #fff; }

  body.menu-open #nav {
    z-index: 230;
    background: transparent;
    box-shadow: none;
  }

  body.menu-open #nav .logo-light { opacity: 0; }
  body.menu-open #nav .logo-dark { display: block; opacity: 1; }

  body.menu-open #nav .burger {
    pointer-events: auto;
    background: var(--menu-yellow);
    box-shadow: 4px 4px 0 var(--menu-teal);
    transform: rotate(2deg);
  }

  body.menu-open #nav .burger.open span {
    background: var(--menu-ink) !important;
  }

  body.menu-open > #menu.open {
    position: fixed;
    z-index: 220;
    inset: 0;
    display: flex;
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 112px 32px 42px;
    background: var(--menu-paper) url('/assets/pdf-mobile-menu-bg.svg') center / cover no-repeat;
    isolation: isolate;
    animation: branded-menu-reveal .24s ease-out both;
  }

  body.menu-open > #menu li {
    position: relative;
    z-index: 1;
    display: flex;
    width: min(100%, 340px);
    align-items: center;
    gap: 14px;
    opacity: 0;
  }

  body.menu-open > #menu.open li {
    animation: branded-menu-item-in .42s cubic-bezier(.22, .8, .28, 1) both;
  }

  body.menu-open > #menu.open li:nth-child(1) { animation-delay: .11s; }
  body.menu-open > #menu.open li:nth-child(2) { animation-delay: .15s; }
  body.menu-open > #menu.open li:nth-child(3) { animation-delay: .19s; }
  body.menu-open > #menu.open li:nth-child(4) { animation-delay: .23s; }
  body.menu-open > #menu.open li:nth-child(5) { animation-delay: .27s; }
  body.menu-open > #menu.open li:nth-child(6) { animation-delay: .31s; }
  body.menu-open > #menu.open li:nth-child(7) { animation-delay: .36s; }
  body.menu-open > #menu.open li:nth-child(8) { animation-delay: .4s; }

  body.menu-open > #menu li::before {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    transform: rotate(45deg);
    background: var(--menu-coral);
    content: "";
  }

  body.menu-open > #menu li:nth-child(2)::before { background: var(--menu-yellow); }
  body.menu-open > #menu li:nth-child(3)::before,
  body.menu-open > #menu li:nth-child(7)::before { background: var(--menu-teal); }
  body.menu-open > #menu li:nth-child(4)::before { background: var(--menu-coral); }
  body.menu-open > #menu li:nth-child(5)::before { background: var(--menu-purple); }
  body.menu-open > #menu li:nth-child(6)::before { background: var(--menu-blue); }
  body.menu-open > #menu li:last-child::before { display: none; }
  body.menu-open > #menu li:last-child { margin-top: 13px; }

  body.menu-open > #menu a:not(.nav-cta) {
    position: relative;
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    color: var(--menu-ink) !important;
    font-family: "Fraunces", Georgia, serif;
    font-size: clamp(1.72rem, 7vw, 2.35rem);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: .98;
    text-decoration: none;
    text-transform: none;
  }

  body.menu-open > #menu a:not(.nav-cta)::after {
    position: absolute;
    right: 0;
    bottom: 3px;
    left: 0;
    height: 4px;
    transform: scaleX(0) rotate(-1deg);
    transform-origin: left;
    background: var(--menu-coral);
    content: "";
    transition: transform .24s ease;
  }

  body.menu-open > #menu a:not(.nav-cta):hover::after,
  body.menu-open > #menu a:not(.nav-cta):focus-visible::after,
  body.menu-open > #menu a[aria-current="page"]::after {
    transform: scaleX(1) rotate(-1deg);
  }

  body.menu-open > #menu .nav-cta {
    display: inline-flex;
    min-width: 190px;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 12px 28px;
    border: 2px solid var(--menu-ink);
    border-radius: 999px;
    background: var(--menu-coral);
    box-shadow: 6px 6px 0 var(--menu-purple);
    color: var(--menu-ink) !important;
    font-family: "Lato", sans-serif;
    font-size: .96rem;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;
    transition: transform .2s ease, box-shadow .2s ease;
  }

  body.menu-open > #menu .nav-cta:hover,
  body.menu-open > #menu .nav-cta:focus-visible {
    transform: translate(3px, 3px);
    box-shadow: 3px 3px 0 var(--menu-purple);
  }

  body.menu-open > #menu a:focus-visible {
    outline: 3px solid var(--menu-ink);
    outline-offset: 4px;
  }
}

@media (max-width: 900px) and (max-height: 700px) {
  body.menu-open > #menu.open {
    justify-content: flex-start;
    gap: 0;
    padding-top: 80px;
    padding-bottom: 24px;
  }

  body.menu-open > #menu a:not(.nav-cta) {
    min-height: 44px;
    font-size: clamp(1.42rem, 5.6vh, 1.9rem);
  }

  body.menu-open > #menu li:last-child { margin-top: 8px; }
  body.menu-open > #menu .nav-cta { min-height: 48px; }
}

@keyframes branded-menu-reveal {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes branded-menu-item-in {
  from { opacity: 0; transform: translateY(18px) rotate(-1deg); }
  to { opacity: 1; transform: translateY(0) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
  body.menu-open > #menu.open,
  body.menu-open > #menu.open li {
    animation: none !important;
  }

  body.menu-open > #menu a::after,
  body.menu-open > #menu .nav-cta {
    transition: none !important;
  }
}