Improve mobile name layout

app/portfolio.css

@@ -249,6 +249,18 @@
     line-height: 1.08;
   }
 
+  .navbar-brand-mobile,
+  .hero-title-mobile-lines {
+    display: flex;
+    flex-direction: column;
+    gap: 0.08em;
+  }
+
+  .navbar-brand-mobile span,
+  .hero-title-mobile-lines span {
+    display: block;
+  }
+
   @media (min-width: 1024px) {
     .type-hero-title-latin {
       font-size: var(--text-hero-title-latin);
@@ -648,6 +660,39 @@
   }
 
   @media (max-width: 767px) {
+    .navbar-layout {
+      flex-direction: column;
+      align-items: stretch;
+      gap: 0.875rem;
+    }
+
+    .navbar-brand-link {
+      max-width: none;
+    }
+
+    .navbar-brand-lockup {
+      justify-content: space-between;
+      gap: 0.875rem;
+    }
+
+    .navbar-brand-copy {
+      flex: 1 1 auto;
+    }
+
+    .navbar-logo-shell {
+      padding: 0.45rem;
+      border-radius: 18px;
+    }
+
+    .navbar-logo-image {
+      height: 52px;
+      width: 52px;
+    }
+
+    .navbar-mobile-controls {
+      align-self: flex-start;
+    }
+
     .site-container {
       padding-left: 1rem;
       padding-right: 1rem;
@@ -673,7 +718,8 @@
     }
 
     .navbar-shell .type-brand {
-      font-size: clamp(24px, 8vw, 30px);
+      font-size: clamp(25px, 8.2vw, 32px);
+      line-height: 1.03;
     }
 
     .navbar-shell .type-label {
@@ -687,6 +733,10 @@
       font-size: clamp(28px, 9vw, 42px);
     }
 
+    .hero-title-mobile-lines {
+      text-wrap: balance;
+    }
+
     .type-section-title {
       font-size: clamp(24px, 7vw, 32px);
     }
@@ -755,7 +805,7 @@
     }
 
     .navbar-shell .type-brand {
-      font-size: clamp(20px, 7.2vw, 26px);
+      font-size: clamp(22px, 7.4vw, 28px);
     }
 
     .contact-card {