Refine mobile header spacing

app/portfolio.css

@@ -249,14 +249,18 @@
     line-height: 1.08;
   }
 
-  .navbar-brand-mobile,
+  .navbar-brand-mobile {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   .hero-title-mobile-lines {
     display: flex;
     flex-direction: column;
     gap: 0.08em;
   }
 
-  .navbar-brand-mobile span,
   .hero-title-mobile-lines span {
     display: block;
   }
@@ -663,16 +667,18 @@
     .navbar-layout {
       flex-direction: column;
       align-items: stretch;
-      gap: 0.875rem;
+      gap: 0.7rem;
     }
 
     .navbar-brand-link {
       max-width: none;
+      order: 2;
     }
 
     .navbar-brand-lockup {
       justify-content: space-between;
-      gap: 0.875rem;
+      align-items: center;
+      gap: 0.75rem;
     }
 
     .navbar-brand-copy {
@@ -685,12 +691,15 @@
     }
 
     .navbar-logo-image {
-      height: 52px;
-      width: 52px;
+      height: 48px;
+      width: 48px;
     }
 
     .navbar-mobile-controls {
-      align-self: flex-start;
+      order: 1;
+      width: 100%;
+      justify-content: flex-start;
+      align-self: stretch;
     }
 
     .site-container {
@@ -718,15 +727,18 @@
     }
 
     .navbar-shell .type-brand {
-      font-size: clamp(25px, 8.2vw, 32px);
-      line-height: 1.03;
+      font-size: clamp(20px, 6.1vw, 24px);
+      line-height: 1.08;
     }
 
-    .navbar-shell .type-label {
+    .navbar-specialty {
       display: block;
-      max-width: 17rem;
-      font-size: 13px;
-      letter-spacing: 0.1em;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-size: 11px;
+      letter-spacing: 0.06em;
+      line-height: 1.35;
     }
 
     .type-page-title {
@@ -805,7 +817,7 @@
     }
 
     .navbar-shell .type-brand {
-      font-size: clamp(22px, 7.4vw, 28px);
+      font-size: clamp(18px, 5.8vw, 22px);
     }
 
     .contact-card {