/* Public topbar shared by the templated landing and error pages. */

header.topbar {
  display: flex; align-items: center; gap: var(--sp-xl);
  padding: var(--sp-md) var(--sp-xl);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: var(--z-sticky);
}
.brand { color: var(--text); font-weight: 600; font-size: 1rem; }
.brand:hover { text-decoration: none; }
.brandmark { display: inline-flex; align-items: center; gap: var(--sp-sm); }
.brandglyph { color: var(--lilac); display: block; }
.brandver { color: var(--muted); font-family: var(--mono); font-size: 0.6875rem; font-weight: 400; align-self: center; }
header.topbar nav { display: flex; align-items: center; gap: var(--sp-lg); }
header.topbar nav a { color: var(--subtext); }
header.topbar nav a:hover { color: var(--lilac); text-decoration: none; }
header.topbar nav .gh-link { display: inline-flex; }

@media (max-width: 640px) {
  header.topbar { gap: var(--sp-md); flex-wrap: wrap; padding: var(--sp-sm) var(--sp-md); }
}