/* A travel-led mobile menu. Native dialog supplies modal focus and inertness. */
.navigation-dialog { display:none; }
.navigation-dialog[open] {
  display:block; position:fixed; inset:0; width:100%; max-width:none;
  height:100dvh; max-height:none; margin:0; padding:0; border:0; border-radius:0;
  background:var(--nav-surface); color:var(--nav-ink); overflow:auto;
  overscroll-behavior:contain; animation:nav-enter var(--nav-motion) var(--ease-out);
}
.navigation-dialog::backdrop { background:var(--nav-surface); }
.navigation-shell {
  min-height:100%; max-width:700px; margin-inline:auto; display:flex; flex-direction:column;
  padding:max(var(--space-2),env(safe-area-inset-top)) var(--nav-space) max(var(--nav-space),env(safe-area-inset-bottom));
}
.navigation-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); margin-bottom:var(--nav-space); }
.navigation-brand { display:flex; align-items:center; gap:var(--space-1); }
.navigation-brand img { width:var(--control-size); height:var(--control-size); object-fit:contain; filter:url(#brand-opacity); }
.navigation-brand > span { display:grid; gap:4px; font:400 var(--text-sm)/1 var(--display); letter-spacing:.12em; }
.navigation-brand small { font:400 .625rem/1 var(--sans); letter-spacing:.3em; }
.navigation-close { display:grid; place-items:center; width:var(--control-size); height:var(--control-size); flex-shrink:0; border:1px solid var(--action-rule-light); border-radius:50%; background:transparent; color:var(--nav-ink); }
.navigation-dialog :focus-visible { outline:2px solid var(--nav-ink); outline-offset:4px; }
.navigation-links { display:grid; }
.navigation-destinations { position:relative; isolation:isolate; display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-2); min-height:var(--nav-photo-height); padding:var(--space-3); overflow:hidden; border-radius:var(--nav-radius); }
.navigation-destinations img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 58%; z-index:-2; }
.navigation-destinations::after { content:''; position:absolute; inset:0; z-index:-1; background:var(--nav-photo-shade); }
.navigation-destinations > span { display:grid; gap:var(--space-1); }
.navigation-destinations strong { font:400 var(--nav-link-size)/1.1 var(--editorial); }
.navigation-destinations small { font:400 var(--text-xs)/1.4 var(--catalog-reading); }
.navigation-destinations > svg { width:var(--space-4); height:var(--space-4); }
.navigation-link { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); min-height:80px; padding-block:var(--space-3); border-bottom:1px solid var(--nav-rule); font:400 var(--nav-link-size)/1.25 var(--editorial); }
.navigation-link svg { opacity:.8; }
.navigation-action { margin-top:auto; padding-top:var(--space-5); }
.navigation-action p { margin:0 0 var(--space-2); max-width:28ch; font:400 var(--text-xs)/1.6 var(--catalog-reading); }
.navigation-action .button { width:100%; min-height:56px; padding:var(--space-2); justify-content:space-between; gap:var(--space-2); background:var(--white); color:var(--brand-ink); font-family:var(--catalog-reading); font-size:var(--text-xs); font-weight:600; text-align:left; }
.navigation-action .button svg { display:block; }
@keyframes nav-enter { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:none; } }
@media(max-width:700px) {
  .travel-home .header .brand { display:grid; grid-template-columns:var(--control-size) auto; grid-template-rows:auto auto; column-gap:var(--space-1); row-gap:4px; }
  .travel-home .header .brand-emblem { grid-column:1; grid-row:1 / 3; }
  .travel-home .header .brand > span { grid-column:2; grid-row:2; }
  .travel-home .menu-toggle { display:flex; align-items:center; justify-content:center; flex-direction:row; gap:var(--space-1); width:auto; height:var(--control-size); padding:0 var(--space-2); border:1px solid var(--nav-rule); border-radius:var(--radius-round); background:var(--nav-overlay); color:var(--white); font:400 var(--text-xs)/1 var(--catalog-reading); }
  .travel-home .menu-toggle svg { width:18px; height:18px; }
}
@media(max-height:560px) {
  .navigation-action { padding-top:var(--space-3); }
  .navigation-head { margin-bottom:var(--space-2); }
  .navigation-link { min-height:64px; padding-block:var(--space-2); }
}
@media(prefers-reduced-motion:reduce) { .navigation-dialog[open] { animation:none; } }