/* The header every page shares (the demo, index.html, the results pages,
   results/*.html, and the usage pages, docs/*.html): the logo and the site's
   sections, Demo · Results · Method · Docs · GitHub. Colours are tokens so a page's theme (results/site.css: dark mode)
   can restate them; the values are the demo's. */
:root {
  --header-page: #f5f5f0;
  --header-ink: #222b2a;
  --header-muted: #52625b;
  --header-line: #dce0d8;
  --header-brand: #226b51;
  --header-accent: #d9eee2;
}
.site-header { max-width: 1440px; margin: 0 auto; min-height: 72px; padding: 12px 48px; display: flex; flex-wrap: wrap;
  align-items: center; gap: 10px 28px; border-bottom: 1px solid var(--header-line); color: var(--header-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.site-header .brand { font-size: 25px; font-weight: 750; letter-spacing: -1.2px; display: flex; align-items: center;
  color: var(--header-ink); text-decoration: none; }
.site-header .brand > span:last-child { font-weight: 400; }
.site-header .brand-mark { font-size: 31px; color: var(--header-brand); margin-right: 12px; }
.site-sections { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; font-size: 14px; }
.site-sections a { color: var(--header-muted); text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
.site-sections a:hover { color: var(--header-ink); }
.site-sections a[aria-current="page"] { color: var(--header-ink); border-bottom-color: var(--header-brand); }
.site-sections .project-link { color: var(--header-brand); border: 1px solid var(--header-line); border-radius: 6px; padding: 5px 10px; }
.site-sections .project-link:hover { background: var(--header-accent); }
.site-header .local-badge { margin-left: auto; font-size: 12px; color: var(--header-muted); display: flex; align-items: center; gap: 8px; }
@media (max-width: 700px) {
  .site-header { padding: 10px 16px; gap: 6px 14px; min-height: 0; }
  .site-header .brand { font-size: 22px; }
  .site-header .brand-mark { font-size: 26px; margin-right: 8px; }
  .site-sections { gap: 4px 14px; font-size: 13.5px; }
  .site-header .local-badge { display: none; }
}