Tighten navbar branding

style.css

@@ -108,13 +108,15 @@ code, kbd, .mono {
 .topbar {
   position: sticky;
   top: 0;
+  inset-block-start: 0;
   z-index: 100;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 18px var(--gutter);
+  min-height: 60px;
+  padding: 0 var(--gutter);
   border-bottom: 1px solid var(--line);
-  background: color-mix(in oklab, var(--bg) 88%, transparent);
+  background: color-mix(in oklab, var(--bg) 92%, transparent);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
 }
@@ -126,6 +128,13 @@ code, kbd, .mono {
   text-decoration: none;
   color: var(--fg);
 }
+.brand-icon {
+  width: 24px;
+  height: 24px;
+  display: block;
+  object-fit: contain;
+  image-rendering: auto;
+}
 .brand .mark {
   font-size: 18px;
   line-height: 1;
@@ -138,16 +147,6 @@ code, kbd, .mono {
   font-size: 15px;
   letter-spacing: -0.01em;
 }
-.brand .role-tag {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  padding: 2px 6px;
-  border: 1px solid var(--green-soft);
-  color: var(--green);
-  margin-left: 4px;
-}
 
 .nav { display: flex; align-items: center; gap: 28px; }
 .nav-mobile { display: none; }
@@ -876,7 +875,8 @@ a:focus-visible,
     position: sticky;
     align-items: center;
     gap: 12px;
-    padding: 10px var(--gutter);
+    min-height: 52px;
+    padding: 0 var(--gutter);
   }
 
   .brand {
@@ -885,7 +885,7 @@ a:focus-visible,
   }
 
   .brand .wordmark { font-size: 14px; }
-  .brand .role-tag { font-size: 9px; padding: 2px 5px; }
+  .brand-icon { width: 22px; height: 22px; }
 
   .nav-desktop { display: none; }
   .nav-mobile {
@@ -1056,7 +1056,6 @@ a:focus-visible,
 }
 
 @media (max-width: 380px) {
-  .role-tag { display: none; }
   .brand { gap: 7px; }
   .brand .wordmark { font-size: 13px; }
   .nav-mobile { gap: 8px; }

views/partials/header.ejs

@@ -1,8 +1,7 @@
 <header class="topbar">
   <a class="brand" href="/" aria-label="bonzi home">
-    <span class="mark" aria-hidden="true">☤</span>
+    <img class="brand-icon" src="/favicon-32.png" alt="" width="24" height="24" decoding="async" />
     <span class="wordmark">bonzi</span>
-    <span class="role-tag">agent</span>
   </a>
   <nav class="nav nav-desktop" aria-label="primary">
     <% navLinks.forEach((link) => { %>