/* Navigation shared by the editorial guide and interactive map. */
:root { --ease-drawer: cubic-bezier(.32,.72,0,1); --ease-out: cubic-bezier(.23,1,.32,1); }
.menu-button { grid-column: 1; justify-self: start; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 4px 0 0; background: none; border: 0; color: inherit; font: 500 12px/1 GuideSans, Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: transform 160ms var(--ease-out); }
.menu-button:active { transform: scale(.97); }
.menu-icon { display: grid; gap: 7px; width: 26px; }
.menu-icon i { display: block; height: 1.5px; background: currentColor; transform-origin: left; transition: transform 240ms var(--ease-out); }
.menu-icon i:last-child { transform: scaleX(.62); }
@media (hover: hover) and (pointer: fine) { .menu-button:hover .menu-icon i:last-child { transform: scaleX(1); } }
.drawer { position: fixed; inset: 0 auto 0 0; margin: 0; width: min(88vw, 420px); max-width: none; height: 100dvh; max-height: none; padding: 0; border: 0; background: var(--paper); color: var(--ink); overflow: hidden; touch-action: pan-y; transform: translateX(-102%); transition: transform 260ms var(--ease-drawer); box-shadow: 24px 0 60px -30px #0f181366; }
.drawer.is-open { transform: none; transition-duration: 500ms; }
.drawer::backdrop { background: #0f1813; opacity: 0; transition: opacity 260ms var(--ease-out); }
.drawer.is-open::backdrop { opacity: .55; transition-duration: 500ms; }
.drawer-inner { display: flex; flex-direction: column; height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 18px clamp(24px, 7vw, 40px) calc(28px + env(safe-area-inset-bottom, 0px)); }
.drawer-close { align-self: flex-start; display: grid; place-items: center; width: 44px; height: 44px; margin-left: -11px; background: none; border: 0; color: inherit; cursor: pointer; transition: transform 160ms var(--ease-out); }
.drawer-close:active { transform: scale(.94); }
.drawer-nav { display: grid; margin-top: clamp(20px, 6vh, 56px); }
.drawer-nav a { display: flex; align-items: center; min-height: 64px; border-bottom: 1px solid var(--rule); font: 400 clamp(30px, 8.4vw, 38px)/1.1 GuideSerif, Georgia, serif; letter-spacing: -.02em; text-decoration: none; }
.drawer-routes { display: grid; margin-top: 30px; }
.drawer-routes p { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.drawer-routes a { display: flex; align-items: center; min-height: 44px; font-size: 16px; text-decoration: none; }
.drawer-maker { margin-top: auto; padding-top: 32px; display: grid; gap: 14px; text-decoration: none; }
.drawer-maker img { width: 132px; height: auto; }
.drawer-maker span { font-size: 13px; line-height: 1.5; color: var(--muted); max-width: 26ch; }
/* Links arrive after the panel, 45ms apart; they leave with it, undelayed. */
.drawer-nav a, .drawer-routes, .drawer-maker { opacity: 0; transform: translateX(-14px); transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out); }
.drawer.is-open :is(.drawer-nav a, .drawer-routes, .drawer-maker) { opacity: 1; transform: none; transition-duration: 520ms; }
.drawer.is-open .drawer-nav a:nth-child(1) { transition-delay: 110ms; }
.drawer.is-open .drawer-nav a:nth-child(2) { transition-delay: 155ms; }
.drawer.is-open .drawer-nav a:nth-child(3) { transition-delay: 200ms; }
.drawer.is-open .drawer-nav a:nth-child(4) { transition-delay: 245ms; }
.drawer.is-open .drawer-routes { transition-delay: 300ms; }
.drawer.is-open .drawer-maker { transition-delay: 360ms; }
@media (hover: hover) and (pointer: fine) { .drawer-nav a { transition-property: opacity, transform; } .drawer.is-open .drawer-nav a:hover { transform: translateX(4px); } .drawer-routes a:hover { text-decoration: underline; } }

@media(max-width:700px){.menu-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}
@media(prefers-reduced-motion:reduce){.drawer,.drawer.is-open,.drawer :is(.drawer-nav a,.drawer-routes,.drawer-maker),.menu-icon i,.menu-button{transition:none;animation:none}}
