.nav-right { display: flex; align-items: center; gap: 10px; }
nav .nav-right { order: 2; }
nav .nav-right .status { order: 0; }
nav .nav-right .menu-btn { order: 1; }
.menu-btn {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  background: transparent; color: var(--text, #F5F3EE); font: inherit;
  font-family: var(--mono, ui-monospace, monospace); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  border: 1px solid var(--line, #2A2A2E); border-radius: 16px; padding: 7px 12px;
}
.menu-btn:hover, .menu-btn:focus-visible { border-color: var(--accent, #A31621); }
.menu-btn .bars { display: inline-block; width: 16px; height: 10px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; position: relative; }
.menu-btn .bars::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; margin-top: -1px; height: 2px; background: currentColor; }
@media (max-width: 480px) { .menu-btn .lbl { display: none; } .menu-btn { padding: 9px 11px; } }

html.menu-open, html.menu-open body { overflow: hidden; }
.menu {
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column;
  padding: calc(18px + env(safe-area-inset-top, 0px)) clamp(20px, 5vw, 56px) 28px;
  color: var(--text, #F5F3EE); overflow-y: auto;
  /* see-through: the page stays visible behind a dark, blurred wash that is heaviest under the list */
  background: linear-gradient(90deg, rgba(5, 5, 6, .8) 0%, rgba(5, 5, 6, .46) 55%, rgba(5, 5, 6, .2) 100%);
  -webkit-backdrop-filter: blur(4px) saturate(1.1); backdrop-filter: blur(4px) saturate(1.1);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .menu { background: rgba(5, 5, 6, .9); } }
.menu[hidden] { display: none; }
.menu-top { display: flex; justify-content: flex-end; }
.menu-close {
  cursor: pointer; background: transparent; color: inherit; font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  border: 1px solid rgba(245, 243, 238, .28); border-radius: 16px; padding: 8px 14px; background: rgba(5, 5, 6, .35);
}
.menu-close:hover, .menu-close:focus-visible { border-color: var(--accent, #A31621); }
.menu ul { list-style: none; margin: clamp(8px, 4vh, 40px) 0 0; padding: 0; }
.menu li { border-bottom: 1px solid rgba(245, 243, 238, .16); }
.menu li[hidden] { display: none; }
.menu li a {
  display: flex; align-items: baseline; gap: 18px; padding: clamp(8px, 1.6vh, 16px) 0;
  font-family: var(--display, 'Bebas Neue', Impact, sans-serif); font-weight: 400; text-transform: uppercase;
  font-size: clamp(32px, 6vh, 64px); letter-spacing: 3px; line-height: 1.05; color: var(--text, #F5F3EE); text-decoration: none; text-shadow: 0 2px 18px rgba(0, 0, 0, .7);
}
.menu li a small { font-family: var(--mono, ui-monospace, monospace); font-size: 11px; letter-spacing: 1.5px; color: var(--muted, #8A8A8E); min-width: 22px; }
.menu li a:hover, .menu li a:focus-visible, .menu li a[aria-current="page"] { color: var(--accent, #A31621); }
.menu-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 28px; }
.menu-social a {
  font-family: var(--mono, ui-monospace, monospace); font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: #CFCFD2; border: 1px solid rgba(245, 243, 238, .24); border-radius: 20px; padding: 8px 14px; text-decoration: none; background: rgba(5, 5, 6, .35);
}
.menu-social a:hover, .menu-social a:focus-visible { color: var(--text, #F5F3EE); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }