/* Canonical fixed navigation, shared with the static legal document. */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--hdr); padding: env(safe-area-inset-top, 0px) var(--gx) 0;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; color: var(--fg); /* the nav centres in the space between logo and button (equal gaps), not on the page: the button is wider than the logo */
  transition: color .25s, background-color .25s, box-shadow .25s, backdrop-filter .25s;
}
.hdr[data-over="page"] { background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 1px 0 var(--line); }
.hdr .wm { font-size: 19px; font-weight: 650; letter-spacing: -.02em; text-decoration: none; font-variation-settings: 'SHRP' 100; justify-self: start; }
/* Brand lockup (Overshoot O + needle-i wordmark): 2000 font units = 1em, so the outlined name keeps the old 19px text size. */
.wm { display: inline-flex; align-items: center; min-height: 44px; color: inherit; }
.wm-lockup { display: block; height: 1.18em; width: auto; overflow: visible; stroke: none; } /* opt out of the line-icon svg defaults in globals.css */
.hnav { display: flex; gap: 4px; justify-self: center; }
.hnav a { font-size: 14.5px; font-weight: 450; color: var(--fg-2); text-decoration: none; padding: 8px 12px; border-radius: 9px; transition: color .2s, background-color .2s; }
.hnav a:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); }
.hdr .btn { justify-self: end; }

.hdr { font-family: 'Overspike Footer', ui-sans-serif, system-ui, sans-serif; }
.hnav a, .hdr .btn-sm { min-height: 44px; display: inline-flex; align-items: center; }
.hdr .btn { justify-content: center; gap: 10px; padding: 0 16px; border-radius: 12px; background: var(--fg); color: var(--bg); text-decoration: none; font-size: 14.5px; font-weight: 560; letter-spacing: -.005em; white-space: nowrap; transition: transform .18s var(--out), background-color .25s, color .25s; }
.hdr .btn:active { transform: scale(.97); }
.mobile-nav { display: none; }
@media (max-width: 999px) {
  .hdr { grid-template-columns: 1fr auto auto; column-gap: 8px; }
  .hdr .btn-sm { font-size: 14px; padding-inline: 14px; min-height: 40px; }
  .mobile-nav { display: block; order: 3; margin-right: -10px; }
  .mobile-nav summary { display: grid; place-items: center; cursor: pointer; width: 44px; height: 44px; list-style: none; border-radius: 10px; }
  .mobile-nav summary::-webkit-details-marker { display: none; }
  .burger { position: relative; display: block; width: 20px; height: 14px; }
  .burger i { position: absolute; left: 0; width: 100%; height: 1.75px; border-radius: 1px; background: currentColor; transition: transform .3s var(--out, ease), opacity .2s; }
  .burger i:nth-child(1) { top: 0; } .burger i:nth-child(2) { top: 6.1px; } .burger i:nth-child(3) { bottom: 0; }
  .mobile-nav[open] .burger i:nth-child(1) { transform: translateY(6.1px) rotate(45deg); }
  .mobile-nav[open] .burger i:nth-child(2) { opacity: 0; }
  .mobile-nav[open] .burger i:nth-child(3) { transform: translateY(-6.1px) rotate(-45deg); }
  .mobile-nav nav { position: absolute; left: 0; right: 0; top: 100%; display: grid; padding: 8px var(--gx) 20px; background: var(--bg); color: var(--fg); box-shadow: 0 1px 0 var(--line), 0 24px 40px -12px rgba(0,0,0,.28); animation: menu-in .22s var(--out, ease); }
  .mobile-nav nav a { display: flex; align-items: center; min-height: 56px; border-bottom: 1px solid var(--line); text-decoration: none; font-size: 20px; font-weight: 520; letter-spacing: -.01em; color: inherit; }
  .mobile-nav nav a:last-child { border-bottom: 0; }
  @keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }
}
@media (max-width: 999px) { .hnav { display: none; } }