/* The shared site menu (nav.js). Inherits each page's colours: text in currentColor, accents from --nav-accent. */
.site-nav { display: flex; align-items: center; gap: 4px; font-family: "Karla", "Helvetica Neue", Arial, sans-serif; font-size: .95rem; }
.site-nav a {
  position: relative; display: inline-flex; align-items: center;
  padding: 8px 12px; border-radius: 999px; text-decoration: none;
  color: inherit; opacity: .72; white-space: nowrap; transition: opacity .2s, background .2s;
}
.site-nav a:hover { opacity: 1; background: rgba(255, 255, 255, .06); }
.site-nav a[aria-current="page"] { opacity: 1; }
.site-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 2px;
  background: var(--nav-accent, currentColor);
}
.site-nav a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; opacity: 1; }
.site-nav .s { display: none; }

/* phones: the menu gets its own row under the logo, short labels, spread across the width */
@media (max-width: 720px) {
  .site-nav { order: 3; flex-basis: 100%; justify-content: space-between; gap: 0; font-size: .92rem; margin-top: 2px; }
  .site-nav a { padding: 8px 10px; }
  .site-nav .l { display: none; }
  .site-nav .s { display: inline; }
}