/* Mobile menu (build-003): <details class="navmenu"> in the header (its summary keeps the old button class .menu, which Motion's button feel in motion.css targets; the details itself must not carry it), shown below 1024 only. Works without JavaScript (native details);
   js/menu.js adds Esc, focus trap, outside click and scroll lock. Panel hangs from the sticky header (position: absolute on .hdr,
   because the header's backdrop-filter would otherwise trap a fixed child). */
.navmenu { position: static; }
.menu {
  width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-8); background: none;
  display: grid; place-items: center; list-style: none; cursor: pointer;
}
.menu::-webkit-details-marker { display: none; }
.menu svg { width: 16px; height: 16px; }
.navmenu[open] .menu { background: var(--paper); box-shadow: var(--sh-btn-quiet-down); }
.menu__scrim { position: absolute; left: 0; right: 0; top: 100%; height: 100vh; background: color-mix(in srgb, var(--ink) 28%, transparent); }
.menu__panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 1; max-height: calc(100dvh - 100%); overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s-8) var(--gutter) var(--s-24); background: var(--cream-hi); box-shadow: 0 1px 0 var(--line), 0 24px 40px -20px rgba(70, 38, 20, .35);
}
.menu__nav { display: flex; flex-direction: column; max-width: 560px; margin: 0; }
.menu__nav a {
  display: flex; align-items: center; min-height: 56px; border-bottom: 1px solid var(--line-soft);
  font-family: var(--f-display); font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: -.02em; color: var(--ink);
}
.menu__nav a:hover { color: var(--ink-2); }
.menu__panel .ctas { margin: var(--s-24) 0 0; max-width: 560px; justify-content: flex-start; }
@media (prefers-reduced-motion: no-preference) {
  .navmenu[open] .menu__panel { animation: menu-in .14s ease-out; }
  .navmenu[open] .menu__scrim { animation: menu-fade .14s ease-out; }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes menu-fade { from { opacity: 0; } }
html.menu-open { overflow: hidden; }
@media (min-width: 1024px) { .navmenu { display: none; } }