/* nav.css — the WHOLE header's styles, loaded as an external stylesheet in so the server-rendered menu (see nav_header.py) is fully styled at first paint: no flash of unstyled content, no layout shift. Covers the brand bar, the page subtitle, and all the dropdown/link styles (these used to be injected by nav.js; nav.js now only injects them as a fallback when the menu isn't server-rendered). Served at /nav.css by both servers (revalidate-cacheable). */ .rnav-bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 16px; margin-bottom:4px; } .rnav-brand{ font-size:1.4rem; font-weight:800; color:#122150; text-decoration:none; white-space:nowrap; letter-spacing:-.01em; } .rnav-brand:hover{ color:#122150; text-decoration:none; } /* reserve the menu row's height so it doesn't jump when nav.js builds it */ #site-nav{ min-height:32px; } /* the per-page name, demoted to a subtitle under the fixed wordmark */ .page-title{ font-size:1.1rem; font-weight:700; margin:12px 0 8px; color:#1a1a1a; } /* --- menu/dropdown styles (were injected by nav.js; now here so the server- rendered menu is styled at first paint — no flash of unstyled menu). --- */ .rnav{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; font-size:.9rem; } .rnav a{ color:var(--accent,#1a73e8); text-decoration:none; white-space:nowrap; } .rnav a:hover{ text-decoration:underline; } .rnav .rnav-cur{ font-weight:700; color:#111; } .rnav-search{ display:inline-flex; margin:0 2px 0 0; } .rnav-search input{ width:124px; height:30px; padding:0 12px; border:1px solid rgba(0,0,0,.25); border-radius:15px; background:#fafafa; font-size:.85rem; transition:width .15s ease; } .rnav-search input:focus{ width:184px; outline:none; border-color:var(--accent,#1a73e8); } .rnav-grp{ position:relative; } .rnav-btn{ background:none; border:0; margin:0; padding:2px; cursor:pointer; color:var(--accent,#1a73e8); font:inherit; font-size:.9rem; white-space:nowrap; } .rnav-btn:hover{ text-decoration:underline; } .rnav-btn.rnav-cur{ font-weight:700; color:#111; } .rnav-caret{ font-size:.7em; opacity:.65; margin-left:3px; } .rnav-menu{ position:absolute; right:0; top:100%; margin-top:6px; min-width:172px; background:#fff; border:1px solid rgba(0,0,0,.18); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.14); padding:4px; z-index:1000; display:none; } .rnav-menu.rnav-open{ display:block; } .rnav-menu a{ display:block; padding:9px 12px; border-radius:6px; color:#222; font-size:.9rem; white-space:nowrap; } .rnav-menu a:hover{ background:#f1f5ff; color:var(--accent,#1a73e8); text-decoration:none; } @media (max-width:560px){ .rnav-brand{ font-size:1.25rem; } .rnav-menu{ right:auto; left:0; } } /* --- site footer (server-injected before by nav_header.inject) --- */ .site-footer{ margin-top:48px; border-top:1px solid rgba(0,0,0,.1); background:#fafbfc; } .site-footer-inner{ max-width:1180px; margin:0 auto; padding:18px 14px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; font-size:.82rem; color:#777; } .site-footer .sf-brand{ font-weight:800; color:#122150; letter-spacing:-.01em; } .site-footer .sf-links{ display:flex; flex-wrap:wrap; gap:6px 16px; } .site-footer .sf-links a{ color:#555; text-decoration:none; white-space:nowrap; } .site-footer .sf-links a:hover{ color:var(--accent,#1a73e8); text-decoration:underline; } .site-footer .sf-legal{ margin-left:auto; text-align:right; color:#999; } @media (max-width:560px){ .site-footer .sf-legal{ margin-left:0; text-align:left; width:100%; } } /* --- canonical page width ------------------------------------------------- Every page's content sits in

. THIS is the single source of the site width — new pages just use the class and inherit 1180px; they should NOT redeclare max-width (that is how the footer/legal pages drifted narrower). nav.css loads on every page, after each page's own