/* Shared site header (the nav bar), used by the home page and linked from every public page.
   The header MARKUP lives only in index.html (<nav id="topnav">); server.js injects it into the other
   pages, so there is one header to edit. Tokens only (RULE 4). Button rules are scoped to #topnav so a
   page's own .btn styles can never restyle the header. */
nav{position:sticky;top:0;z-index:10;background:var(--bg);display:flex;align-items:center;gap:24px;padding:14px clamp(20px,5vw,64px)}
.nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav-word{font:700 24px/1 Fredoka,sans-serif;color:var(--wm)}
.nav-links{display:flex;gap:6px;flex:1;flex-wrap:wrap}
.nav-actions{display:flex;gap:10px;align-items:center;margin-left:auto}
.nav-menu,.nav-mobile-only{display:none}
.navlink{text-decoration:none;font:800 15px/1 Nunito,sans-serif;color:var(--text2);padding:10px 14px;border-radius:999px}
.navlink:hover,.navlink[aria-current="page"]{background:var(--soft);color:var(--softText)}
/* Phone nav: one 64px row (brand · theme · Subscribe · menu) instead of three wrapped
   rows that ate a third of the screen (owner 2026-09-24). The section links + Sign in
   live in a dropdown under the bar; it is position:absolute so --navH stays the bar. */
@media (max-width:760px){
  nav{gap:10px;padding:10px 16px}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:2px;padding:8px 12px 14px;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
  nav.open .nav-links{display:flex}
  .navlink{padding:12px 14px;font-size:16px}
  .nav-mobile-only{display:block}
  .nav-signin{display:none !important}
  .nav-menu{display:grid;place-items:center;height:44px;width:44px;border:0;border-radius:14px;background:var(--soft);color:var(--softText);cursor:pointer}
  .nav-menu .i-close{display:none} nav.open .nav-menu .i-open{display:none} nav.open .nav-menu .i-close{display:block}
}
@media (max-width:400px){.nav-word{display:none}}
.theme-toggle{height:44px;width:44px;display:grid;place-items:center;border:0;border-radius:14px;background:var(--soft);color:var(--softText);cursor:pointer;font-size:18px}
#topnav .btn{border:0;cursor:pointer;font-family:Nunito,sans-serif;white-space:nowrap}
#topnav .btn-primary{background:var(--primary);color:var(--onPrimary);box-shadow:0 6px 16px rgba(80,130,200,.3)}
#topnav .btn-primary:hover{filter:brightness(1.05)}
#topnav .btn-soft{background:var(--soft);color:var(--softText)}
#topnav .btn:active{transform:scale(.98)}