/* Shared header + nav layout. Linked by BOTH the static content pages and the
   React app so every page renders an identical brand and navigation from one
   source. Colors come from CSS variables the host page provides (site.css :root
   for the static pages; the app sets them from its theme so dark/light still works). */
header.site {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 8px 12px; min-height: 54px; background: var(--bg2); border-bottom: 1px solid var(--border);
}
.brandbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-weight: 600; font-size: 15px; }
.brand-name { display: flex; flex-direction: column; line-height: 1.15; }
.brand-desc { font-size: 10px; font-weight: 500; color: var(--sub); letter-spacing: 0; }
.brand .mark {
  width: 24px; height: 24px; border-radius: 2px; color: #fff; font-weight: 700; font-size: 12px;
  font-family: 'JetBrains Mono', Menlo, Consolas, monospace;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: flex; align-items: center; justify-content: center;
}
nav.site { display: flex; gap: 2px; flex-wrap: wrap; }
nav.site a { color: var(--sub); text-decoration: none; font-size: 13px; font-weight: 500; line-height: 1.2; padding: 4px 8px; border-radius: 2px; }
nav.site a:hover { color: var(--text); background: var(--code-bg); }
nav.site a.active { color: var(--text); font-weight: 600; }
.cta { color: #fff; background: var(--accent); text-decoration: none; font-weight: 600; font-size: 13px; line-height: 1.2; padding: 5px 12px; border-radius: 2px; white-space: nowrap; }
.cta:hover { filter: brightness(1.1); color: #fff; }