/* Top bar, monochrome dark (2026-10-29): Google-style navigation type (Google Sans 14px, regular weight, no caps or tracking)
   in the ECS dark palette (ecs-mono.css): a near-black pill, gray links that turn white on hover, the current page in
   white at medium weight, and a light-gray Email button. No accent color. Linked last on every page with the top bar.
   Selectors start with header.hud so they win over ac.css, pc.css and g.css regardless of order.
   Pre-change: _archive/nav-pre-mono-2026-10-29/ */
header.hud { --n-bg: rgba(31, 32, 34, .9); --n-hover: #2a2b2e; --n-ink: #e1e3e4; --n-ink-2: #c4c7c8; --n-ink-3: #9aa0a6;
  position: sticky; top: 10px; z-index: 200; height: 54px; width: min(1392px, calc(100% - 48px)); margin: 10px auto 0; /* 12-column width (g.css --g-w12) */
  display: flex; justify-content: space-between; align-items: center; padding: 0 7px 0 10px; border: none; border-radius: 999px;
  background: var(--n-bg); backdrop-filter: saturate(1.2) blur(16px); -webkit-backdrop-filter: saturate(1.2) blur(16px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 8px 24px rgba(0, 0, 0, .28);
  font-family: "Google Sans", Roboto, Arial, sans-serif; font-size: .875rem; font-weight: 400; line-height: 1.43; letter-spacing: .01em;
  text-transform: none; color: var(--n-ink-2); color-scheme: dark; }
header.hud .grp { display: flex; align-items: center; gap: 2px; min-width: 0; }
header.hud .mark { display: flex; align-items: center; height: 40px; padding: 0 .9rem 0 .7rem; border: none;
  font-family: "Google Sans", Roboto, Arial, sans-serif; font-size: 1.125rem; font-weight: 500; font-stretch: normal; font-variation-settings: normal;
  letter-spacing: 0; color: var(--n-ink); }
header.hud nav { display: flex; align-items: center; gap: 2px; padding: 0; }
header.hud .sep { border-left: none; margin-left: 4px; }
header.hud a.it { display: flex; align-items: center; padding: 0; color: var(--n-ink-2); }
header.hud a.it span { display: block; padding: .5rem .9rem; border-radius: 999px; background: none; color: inherit; transition: background .15s, color .15s; }
header.hud a.it:hover span, header.hud a.it[aria-expanded="true"] span { background: var(--n-hover); color: #fff; }
header.hud a.it[aria-current] { color: var(--n-ink); }
header.hud a.it[aria-current] span { background: none; color: #fff; font-weight: 500; }
header.hud a.it[aria-current]:hover span { background: var(--n-hover); }
header.hud a:focus-visible { outline: 2px solid var(--n-ink); outline-offset: 2px; border-radius: 999px; }
header.hud .loc { display: flex; align-items: center; padding: 0 .9rem; font-size: .875rem; color: var(--n-ink-3); }
header.hud a.go { display: flex; align-items: center; height: 40px; padding: 0 1.2rem; border-radius: 999px; background: var(--n-ink); color: #151618;
  font-size: .875rem; font-weight: 500; transition: background .2s; }
header.hud a.go:hover { background: #fff; }
@media (max-width: 760px) { header.hud { top: 8px; height: 50px; width: calc(100% - 32px); } header.hud .loc, header.hud .hide-sm { display: none; }
  header.hud a.it span { padding: .45rem .6rem; } header.hud a.go { padding: 0 .9rem; } }
@media (max-width: 420px) { header.hud .mark { padding: 0 .6rem; } header.hud a.it span { padding: .45rem .5rem; } }
/* avatar in place of the JK mark (2026-10-30): James's wire-portrait, round, on its own beige ground */
header.hud .mark { padding: 0 .55rem 0 .15rem; }
header.hud .mark .av { display: block; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }