/* THE TOP MENU (2026-10-12, his "all pages should have fully linked top menu"): one stylesheet, every page; the brand links home */
nav{position:sticky;top:0;z-index:5;background:#222222f0;border-bottom:1px solid var(--line);display:flex;gap:18px;align-items:center;padding:12px 16px;flex-wrap:wrap}
nav b{letter-spacing:.12em}nav b a{color:var(--acc);text-decoration:none;font-size:inherit}nav b a:hover,nav b a:focus-visible{color:var(--fg)}nav a{color:var(--mut);text-decoration:none;font-size:13px}nav a[aria-current=page]{color:var(--fg)}nav a:hover,nav a:focus-visible{color:var(--fg)}nav a.go{margin-left:auto;background:var(--acc);color:#111;font-weight:700;padding:8px 14px;letter-spacing:.06em;text-transform:uppercase;border:2px solid var(--acc)}nav a.go:hover,nav a.go:focus-visible{background:var(--bg);color:var(--acc)}
/* ON A PHONE (his 2026-10-13: 'the header section and top menu look cramped'): the links fold into a ☰ beside the brand; open, they drop down one per row.
   The home page hides the menu's PULL MY FINGER on a phone — the hero's button is right under it (his 'redundant'). Desktop is as it was. */
nav .menu{display:none;margin-left:auto;background:none;border:2px solid var(--line);color:var(--fg);font:inherit;font-size:18px;line-height:1;padding:5px 10px;cursor:pointer}
nav .menu:hover,nav .menu:focus-visible{border-color:var(--acc);color:var(--acc)}
@media (max-width:640px){
  nav{gap:0 14px}
  nav .menu{display:block}
  nav>a{display:none;width:100%;padding:11px 0;border-top:1px solid var(--line);font-size:15px}
  nav.open>a{display:block}
  nav.open>a:first-of-type{margin-top:12px}
  nav>a.go{margin-left:0;text-align:center;margin-top:10px;margin-bottom:2px;border-top:2px solid var(--acc)}
  nav.home>a.go{display:none}
}