update: refine header layout and lighten top branding

styles.css

@@ -133,12 +133,14 @@ textarea {
     position: relative;
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    gap: 24px;
-    min-height: 82px;
+    justify-content: flex-start;
+    gap: 14px;
+    min-height: 74px;
 }
 
 .menu-toggle {
+    order: 3;
+    margin-right: auto;
     width: 52px;
     height: 52px;
     display: inline-flex;
@@ -181,6 +183,7 @@ textarea {
 }
 
 .brand {
+    order: 1;
     display: inline-flex;
     align-items: center;
     gap: 12px;
@@ -198,18 +201,21 @@ textarea {
     display: flex;
     flex-direction: column;
     line-height: 1.1;
+    align-items: flex-start;
 }
 
 .brand-name {
     font-size: 24px;
-    font-weight: 800;
+    font-weight: 700;
 }
 
 .brand-copy small {
     color: var(--text-muted);
-    font-size: 11px;
+    font-size: 10px;
+    font-weight: 500;
     letter-spacing: 0.06em;
     text-transform: uppercase;
+    opacity: 0.82;
 }
 
 .nav {
@@ -1193,6 +1199,21 @@ textarea {
         display: none;
     }
 
+    .header-shell {
+        min-height: 68px;
+        gap: 10px;
+    }
+
+    .brand-logo {
+        width: 46px;
+        height: 46px;
+    }
+
+    .brand-name {
+        font-size: 21px;
+        font-weight: 700;
+    }
+
     .footer-shell {
         text-align: center;
     }