/* Site menu (George, 2026-10-19). The button shows at 720px and below, where the header hides its links. Uses the page's :root tokens. */

.menu-toggle { display: none; position: relative; width: 44px; height: 44px; border-radius: var(--radius-pill); border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; flex: none; }
.menu-toggle span, .menu-toggle::before, .menu-toggle::after { content: ""; position: absolute; left: 13px; right: 13px; height: 1.5px; border-radius: 1px; background: currentColor; transition: transform .2s cubic-bezier(.2, .7, .2, 1), opacity .15s; }
.menu-toggle::before { top: 15px; }
.menu-toggle span { top: 21px; }
.menu-toggle::after { top: 27px; }
.menu-toggle[aria-expanded="true"]::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span { opacity: 0; }
.menu-toggle[aria-expanded="true"]::after { transform: translateY(-6px) rotate(-45deg); }

.menu { position: absolute; z-index: 30; top: calc(100% - 8px); right: max(var(--gutter), env(safe-area-inset-right, 0px)); width: min(300px, calc(100vw - 32px)); display: grid; padding: 8px; background: var(--bg); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius); animation: menu-in .18s cubic-bezier(.2, .7, .2, 1); }
.menu a { display: flex; align-items: center; min-height: 48px; padding: 0 12px; border-radius: 4px; font: 500 1.35rem/1.1 var(--font-display); color: var(--ink); text-decoration: none; transition: background-color .15s; }
.menu a:hover { background: var(--surface); }
.menu a[aria-current] { color: var(--accent); }
.menu a.menu__cta { justify-content: center; margin-top: 6px; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font: 600 1rem/1 var(--font-body); }
.menu a.menu__cta:hover { background: var(--forest); }
.menu[hidden] { display: none; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }

/* Site pages: the header row anchors the panel. */
.top .wrap { position: relative; }
@media (max-width: 720px) {
  .top .menu-toggle { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .menu { animation: none; }
  .menu-toggle span, .menu-toggle::before, .menu-toggle::after, .menu a { transition: none; }
}
@media print {
  .menu-toggle, .menu { display: none !important; }
}