/* The ONE site navigation bar, identical on every page (Wal, 2026-11-08: the pages had drifted apart).
   Markup (mark the current page with aria-current="page"):
   <nav class="sitenav"><div class="in"><a class="brand" href="/">A57 SNAKE PASS</a><a class="l" href="/conditions/">Conditions</a>
   <a class="l" href="/map/">Map</a><a class="l" href="/virtual/">3D Snake Pass</a></div></nav>
   Full-screen pages (map, 3D) add class "over" and move their top panels down by var(--navh).
   Full width on every page: brand at the left edge, links at the right edge (Wal: it moved between pages).
   This file is cached for ten years: bump ?v= in every page after changing it. */
:root { --navh: 48px; }                 /* pixels, not rem: the pages use different base sizes */
.sitenav { position:relative; z-index:30; background:#15171a; border-bottom:1px solid #2e3238; font-family:"Noto Sans",sans-serif; }
.sitenav .in { padding:0 16px; height:var(--navh); display:flex; align-items:center; gap:19px; overflow-x:auto; scrollbar-width:none; }
.sitenav .in::-webkit-scrollbar { display:none; }
.sitenav .brand { font:800 18px "Libre Franklin",Arial,sans-serif; letter-spacing:.01em; color:#e8e6e1; text-decoration:none; margin-right:auto; white-space:nowrap; }
.sitenav a.l { color:#9aa0a6; text-decoration:none; font-size:15px; white-space:nowrap; padding:3px 0; border-bottom:2px solid transparent; }
.sitenav a.l:hover { color:#e8e6e1; }
.sitenav a.l[aria-current=page] { color:#e8e6e1; border-bottom-color:#e0a526; }
.sitenav.over { position:fixed; top:0; left:0; right:0; background:rgba(21,23,26,.92); backdrop-filter:blur(4px); }
@media (max-width:640px) {
  :root { --navh: 42px; }
  .sitenav .in { gap:10px; padding:0 12px; }
  .sitenav .brand { font-size:14.5px; letter-spacing:0; }
  .sitenav a.l { font-size:13px; }
}
@media (max-width:370px) {                 /* 320 px phones: the bar must still fit */
  .sitenav .in { gap:6px; padding:0 8px; }
  .sitenav .brand { font-size:12.5px; letter-spacing:0; }
  .sitenav a.l { font-size:12px; }
}