/* --- Mobile Top-Left Dropdown Nav --- */
:root { --nav-h: 56px; }
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: #0f0f10; color: #fff; height: var(--nav-h);
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px; border-bottom: 1px solid #1f2937;
}
.nav-brand { font-weight: 800; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hamburger {
  display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center;
  border: 1px solid #30363d; background: #111; color:#fff; border-radius: 8px;
}
.hamburger:focus { outline: 3px solid #3b82f6; outline-offset: 2px; }
.nav-menu {
  position: fixed; left: 12px; top: calc(var(--nav-h) + 8px);
  background: #111; color: #fff; border: 1px solid #30363d; border-radius: 12px;
  min-width: 220px; padding: 8px; display: none; z-index: 101;
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}
.nav-menu.open { display: block; }
.nav-menu a {
  display: block; color:#fff; text-decoration: none;
  padding: 10px 12px; border-radius: 8px;
}
.nav-menu a:hover { background:#1f2937; }
main, .section, .content { scroll-margin-top: calc(var(--nav-h) + 12px); }
body { padding-top: 0; } /* prevent double spacing */
@media (min-width: 768px) {
  .nav-brand { font-size: 1.05rem; }
}

/* Avatar next to brand */
.nav-avatar{
  width:28px;height:28px;border-radius:999px;object-fit:cover;
  border:1px solid #30363d;margin-right:8px;display:inline-block;
}
.site-header .brand-wrap{display:flex;align-items:center;gap:8px;overflow:hidden}