/* `body ` prefixed, not just placed in a media query: a media query adds NO
   specificity, and this block sits ABOVE the base .sitenav a rule, so the 13px
   base padding was silently winning and touch devices never got the bigger tap
   target. Fourth instance of later-rule-wins here; verify_css.py now fails the
   build on it. */
@media (pointer:coarse){body .sitenav a{padding:0 16px}}
/* --navh is the one place the bar's height is stated. Anything that has to clear it -
   the sticky rail, the crumb bar, anchor scroll offsets - reads it from here, so the
   two can never drift apart. */
:root{--navh:38px}
.sitenav{position:sticky;top:0;z-index:70;display:flex;align-items:center;gap:2px;
  padding:0 20px;height:var(--navh);background:var(--surface);
  border-bottom:1px solid var(--line)}
.sitenav a{font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);text-decoration:none;
  padding:0 13px;line-height:37px;border-bottom:2px solid transparent}
.sitenav a:hover{color:var(--ink)}
.sitenav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
.sitenav .brand{font-family:var(--serif);font-size:14.5px;letter-spacing:-.01em;
  text-transform:none;color:var(--ink);padding:0 14px 0 0;margin-right:4px;
  border-bottom:2px solid transparent;font-weight:600}
.sitenav .brand:hover{color:var(--accent-ink)}
/* the strapline is the first thing to go when the bar gets tight - the wordmark and
   the two section links are what must survive */
@media (max-width:560px){.sitenav .tag{display:none}}
@media (max-width:400px){.sitenav{padding:0 12px}.sitenav a{padding:0 9px}
  .sitenav .brand{font-size:13.5px;padding-right:8px}}
.sitenav .sep{flex:1}
.sitenav .tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted)}