/* ---------------------------------------------------------------
   Shared navigation for every page except the homepage (which is
   rendered by the app bundle). Mirrors the homepage: pill bar with
   links on desktop, a menu button that opens a full-screen list on
   phones and tablets.
--------------------------------------------------------------- */
.mnav {
  position: sticky;
  top: 1rem;
  z-index: 40;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.mnav-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.9rem;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 999px;
  padding: 0.55rem 0.6rem 0.55rem 1.1rem;
  background: rgb(4 7 14 / 94%);
  box-shadow: 0 12px 40px rgb(0 0 0 / 35%);
}
@supports (backdrop-filter: blur(12px)) {
  .mnav-bar { background: rgb(4 7 14 / 68%); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
}

.mnav-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex: 0 0 auto;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.mnav-brand img { width: 1.6rem; height: 1.6rem; }

.mnav-links {
  display: none;
  align-items: center;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mnav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 0.75rem;
  border-radius: 999px;
  color: rgb(226 231 240 / 66%);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.mnav-links a:hover { color: #fff; }
.mnav-links a[aria-current="page"] { color: #fff; background: rgb(255 255 255 / 7%); }

.mnav-end { display: flex; align-items: center; gap: 0.45rem; }

.mnav-cta {
  display: none;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.65rem;
  padding: 0 1.15rem;
  border-radius: 999px;
  background: #fff;
  color: #05070b;
  font-size: 0.84rem;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.mnav-cta:hover { background: #e7ecf8; }
.mnav-cta svg { width: 0.85rem; height: 0.85rem; }

.mnav-toggle {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 999px;
  background: rgb(255 255 255 / 5%);
  color: #fff;
  cursor: pointer;
}
.mnav-toggle svg { width: 1.15rem; height: 1.15rem; }
.mnav-toggle .i-close { display: none; }
.mnav[data-open="true"] .mnav-toggle .i-open { display: none; }
.mnav[data-open="true"] .mnav-toggle .i-close { display: block; }

@media (min-width: 40rem) { .mnav-cta { display: inline-flex; } }
@media (min-width: 64rem) {
  .mnav-links { display: flex; }
  .mnav-toggle { display: none; }
}

/* ---------- full-screen menu ---------- */
.mnav-menu {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: none;
  flex-direction: column;
  overflow-y: auto;
  padding: 6.5rem max(1rem, calc((100vw - 64rem) / 2)) 2rem;
  background:
    radial-gradient(circle at 50% 0%, rgb(47 107 255 / 16%), transparent 32rem),
    #02040a;
}
.mnav[data-open="true"] .mnav-menu { display: flex; animation: mnav-in 0.22s ease both; }
@keyframes mnav-in { from { opacity: 0; } to { opacity: 1; } }

.mnav-menu ul { margin: 0; padding: 0 0.5rem; list-style: none; }
.mnav-menu li a {
  display: block;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgb(255 255 255 / 10%);
  color: #fff;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(2.1rem, 9vw, 2.6rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.mnav-menu li a[aria-current="page"] { color: #90aaff; font-style: italic; }
.mnav[data-open="true"] .mnav-menu li { animation: mnav-rise 0.35s ease both; }
.mnav[data-open="true"] .mnav-menu li:nth-child(2) { animation-delay: 0.04s; }
.mnav[data-open="true"] .mnav-menu li:nth-child(3) { animation-delay: 0.08s; }
.mnav[data-open="true"] .mnav-menu li:nth-child(4) { animation-delay: 0.12s; }
.mnav[data-open="true"] .mnav-menu li:nth-child(5) { animation-delay: 0.16s; }
.mnav[data-open="true"] .mnav-menu li:nth-child(6) { animation-delay: 0.2s; }
@keyframes mnav-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.mnav-menu-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.4rem;
  margin: 2rem 0.5rem 0;
  border-radius: 999px;
  background: #fff;
  color: #05070b;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
}
.mnav-menu-meta {
  margin: 1.25rem 0.5rem 0;
  color: rgb(226 231 240 / 55%);
  font-size: 0.85rem;
  text-align: center;
}
.mnav-menu-meta a { color: rgb(226 231 240 / 80%); text-decoration: none; }

html.mnav-locked, html.mnav-locked body { overflow: hidden; }
html.mnav-locked #mcbot { display: none; }

.mnav a:focus-visible, .mnav button:focus-visible { outline: 2px solid #85a4ff; outline-offset: 3px; }

@media (min-width: 64rem) { .mnav-menu { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  .mnav[data-open="true"] .mnav-menu,
  .mnav[data-open="true"] .mnav-menu li { animation: none; }
}

/* Icon sizing inside the menu button, and colour guards so page-level
   link styles (e.g. the utility pages' blue links) never leak into the nav. */
.mnav-menu-cta svg { width: 0.9rem; height: 0.9rem; flex: 0 0 auto; }
.mnav .mnav-brand { color: #fff !important; }
.mnav .mnav-links a { color: rgb(226 231 240 / 66%) !important; }
.mnav .mnav-links a:hover, .mnav .mnav-links a[aria-current="page"] { color: #fff !important; }
.mnav .mnav-cta, .mnav .mnav-menu-cta { color: #05070b !important; }
.mnav .mnav-menu li a { color: #fff !important; }
.mnav .mnav-menu li a[aria-current="page"] { color: #90aaff !important; }
.mnav .mnav-menu-meta a { color: rgb(226 231 240 / 80%) !important; }

.mnav, .mnav *, .mnav *::before, .mnav *::after { box-sizing: border-box; }