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;
+      height: 48px;
-      width: 52px;
+      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);
+      font-size: clamp(20px, 6.1vw, 24px);
-      line-height: 1.03;
+      line-height: 1.08;
     }
 
-    .navbar-shell .type-label {
+    .navbar-specialty {
       display: block;
-      max-width: 17rem;
+      white-space: nowrap;
-      font-size: 13px;
+      overflow: hidden;
-      letter-spacing: 0.1em;
+      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 {

components/navbar.tsx

@@ -11,9 +11,6 @@ export function Navbar({ language }: { language: Language }) {
   const t = portfolioContent[language].ui;
   const brandName = language === "ar" ? sharedProfile.brandNameAr : sharedProfile.brandNameEn;
   const basePath = getBasePath(language);
-  const brandParts = brandName.trim().split(/\s+/);
-  const mobileBrandLines =
-    brandParts.length > 2 ? [`${brandParts[0]} ${brandParts[1]}`, brandParts.slice(2).join(" ")] : [brandName];
 
   const navItems = [
     { label: t.navAbout, href: `${basePath}#about` },
@@ -46,11 +43,9 @@ export function Navbar({ language }: { language: Language }) {
                 {brandName}
               </p>
               <p className="type-brand display-face navbar-brand-mobile text-[var(--color-ink)] sm:hidden">
-                {mobileBrandLines.map((line) => (
+                {brandName}
-                  <span key={line}>{line}</span>
-                ))}
               </p>
-              <p className="type-label mt-1 hidden tracking-[0.18em] text-[var(--color-muted)] sm:block">
+              <p className="type-label navbar-specialty mt-1 tracking-[0.18em] text-[var(--color-muted)]">
                 {t.architectureEngineer}
               </p>
             </div>