/* ==========================================================================
   Memoire - shared top header (single source of truth)
   Height 70px desktop / 60px <=600px. Side gutter 32px / 16px.
   Logo 28px / 24px (<=600) / 22px (<=380), always vertically centered.
   Pages only override colours via --hdr-bg / --hdr-line (light pages).
   ========================================================================== */
:root {
  --hdr-h: 70px;
  --hdr-px: 32px;
  --hdr-logo: 28px;
  --hdr-bg: rgba(13, 11, 10, 0.92);
  --hdr-line: var(--border-soft, rgba(245, 239, 230, 0.08));
}
@media (max-width: 600px) {
  :root { --hdr-h: 60px; --hdr-px: 16px; --hdr-logo: 24px; }
}
@media (max-width: 380px) {
  :root { --hdr-logo: 22px; }
}

/* Geometry: identical on every bar */
.topbar, .wizard-topbar, .dj-header, .pl-header, .pol-header, .wall-header, body > nav {
  box-sizing: border-box;
  height: var(--hdr-h);
  padding: 0 var(--hdr-px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}

/* Chrome: sticky bar, blur, hairline */
.topbar, .wizard-topbar, .dj-header, .pl-header, .pol-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--hdr-bg);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hdr-line);
}
.wizard-topbar { position: relative; }

/* Logo link + image */
.topbar-logo, .dj-logo, .pl-logo, .pol-logo, .wall-logo, .nav-logo {
  display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0;
  line-height: 0; text-decoration: none;
}
.topbar-logo img, .wizard-topbar .logo-img, .dj-logo img, .pl-logo img, .pol-logo img,
.wall-logo img, .nav-logo img, .mobile-menu-header img, .topbar > a > img {
  height: var(--hdr-logo); width: auto; display: block;
}
.topbar-logo .logo-fallback, .dj-logo .logo-fallback, .pl-logo .logo-fallback, .pol-logo .logo-fallback,
.wall-logo .logo-fallback, .nav-logo .logo-fallback, .wizard-topbar .logo-fallback {
  font-size: 20px; line-height: 1;
}