Refine mobile hero and navbar layout

app/portfolio.css

@@ -277,6 +277,15 @@
       font-size: var(--text-hero-title-latin);
       white-space: nowrap;
     }
+
+    .hero-panel {
+      padding-top: clamp(6rem, 8vw, 8rem);
+      padding-bottom: clamp(4rem, 5vw, 5.25rem);
+    }
+
+    .hero-action-group {
+      margin-top: clamp(4rem, 5vw, 5rem);
+    }
   }
 
   .type-page-title {
@@ -418,6 +427,7 @@
     width: fit-content;
     max-width: 100%;
     isolation: isolate;
+    margin-top: 4.5rem;
     padding: 0.35rem;
     border-radius: 999px;
   }
@@ -434,6 +444,10 @@
     opacity: 0.92;
   }
 
+  .hero-title {
+    text-wrap: balance;
+  }
+
   .display-face {
     font-family: var(--font-display), serif;
   }
@@ -717,7 +731,7 @@
     .navbar-layout {
       flex-direction: column;
       align-items: stretch;
-      gap: 0.7rem;
+      gap: 0.55rem;
     }
 
     .navbar-brand-link {
@@ -728,7 +742,7 @@
     .navbar-brand-lockup {
       justify-content: space-between;
       align-items: center;
-      gap: 0.75rem;
+      gap: 0.65rem;
     }
 
     .navbar-brand-copy {
@@ -736,25 +750,25 @@
     }
 
     .navbar-brand-mobile {
-      line-height: 1.22;
+      line-height: 1.16;
-      padding-bottom: 0.12rem;
+      padding-bottom: 0;
-      margin-bottom: 0.4rem;
+      margin-bottom: 0.22rem;
     }
 
     .navbar-logo-shell {
-      padding: 0.45rem;
+      padding: 0.35rem;
-      border-radius: 18px;
+      border-radius: 16px;
     }
 
     .navbar-logo-image {
-      height: 48px;
+      height: 42px;
-      width: 48px;
+      width: 42px;
     }
 
     .navbar-mobile-controls {
       order: 1;
       width: 100%;
-      justify-content: flex-start;
+      justify-content: flex-end;
       align-self: stretch;
     }
 
@@ -768,12 +782,12 @@
     }
 
     .section-padding {
-      padding: 1.25rem 1rem 1.5rem;
+      padding: 1.1rem 1rem 1.35rem;
     }
 
     .section-kicker {
-      font-size: clamp(18px, 4.8vw, 22px);
+      font-size: clamp(16px, 4.2vw, 19px);
-      letter-spacing: 0.18em;
+      letter-spacing: 0.14em;
     }
 
     .eyebrow-note,
@@ -783,8 +797,8 @@
     }
 
     .navbar-shell .type-brand {
-      font-size: clamp(20px, 6.1vw, 24px);
+      font-size: clamp(18px, 5.5vw, 22px);
-      line-height: 1.22;
+      line-height: 1.16;
     }
 
     .navbar-specialty {
@@ -792,11 +806,11 @@
       white-space: normal;
       overflow: visible;
       text-overflow: clip;
-      font-size: 11px;
+      font-size: 10px;
       letter-spacing: 0.04em;
-      line-height: 1.4;
+      line-height: 1.3;
       text-wrap: pretty;
-      margin-top: 1.25rem;
+      margin-top: 0.55rem;
     }
 
     .type-page-title {
@@ -811,6 +825,38 @@
       font-size: clamp(24px, 7vw, 32px);
     }
 
+    .hero-shell {
+      border-radius: 30px;
+    }
+
+    .hero-panel {
+      background-size: 180px 180px;
+    }
+
+    .hero-panel .section-kicker {
+      font-size: clamp(15px, 4vw, 18px);
+      letter-spacing: 0.1em;
+    }
+
+    .hero-title {
+      margin-top: 1rem;
+      font-size: clamp(32px, 10vw, 42px);
+      line-height: 1.08;
+    }
+
+    .hero-copy-stack {
+      margin-top: 1.1rem;
+    }
+
+    .hero-copy-stack > * + * {
+      margin-top: 0.75rem;
+    }
+
+    .hero-copy-stack .type-body-responsive {
+      font-size: 15px;
+      line-height: 1.7;
+    }
+
     .type-project-title {
       font-size: clamp(28px, 9vw, 38px);
     }
@@ -830,50 +876,58 @@
     }
 
     .hero-action-group {
-      justify-content: flex-start;
+      display: grid;
-      gap: 0.75rem;
+      width: 100%;
-      padding: 0.3rem 0.45rem 0.95rem;
+      justify-content: stretch;
-      border-radius: 26px;
+      gap: 0.65rem;
+      margin-top: 1.5rem;
+      padding: 0;
+      border-radius: 0;
     }
 
     .hero-action-link {
-      min-width: 156px;
+      width: 100%;
-      min-height: 42px;
+      min-width: 0;
-      padding: 0.62rem 0.9rem;
+      min-height: 46px;
-      font-size: 12px;
+      padding: 0.72rem 1rem;
+      font-size: 13px;
+    }
+
+    .hero-action-group::before {
+      content: none;
     }
 
     .line-frame::before,
     .line-frame::after {
-      height: 56px;
+      height: 44px;
-      width: 56px;
+      width: 44px;
     }
   }
 
   @media (max-width: 430px) {
     .navbar-brand-lockup {
-      align-items: flex-start;
+      align-items: center;
     }
 
     .navbar-brand-copy {
       min-width: 0;
-      padding-top: 0.15rem;
+      padding-top: 0;
     }
 
     .navbar-brand-mobile {
-      margin-bottom: 0.45rem;
+      margin-bottom: 0.18rem;
     }
 
     .navbar-specialty {
       max-width: 100%;
-      font-size: 10.5px;
+      font-size: 9.5px;
-      line-height: 1.45;
+      line-height: 1.28;
-      margin-top: 1.35rem;
+      margin-top: 0.45rem;
     }
 
     .type-hero-title {
-      font-size: clamp(30px, 11.5vw, 40px);
+      font-size: clamp(29px, 10.5vw, 36px);
-      line-height: 1.02;
+      line-height: 1.06;
     }
 
     .type-hero-title-latin {
@@ -890,23 +944,16 @@
     }
 
     .hero-action-group {
-      display: flex;
+      gap: 0.6rem;
-      flex-direction: row;
-      justify-content: flex-start;
-      align-items: flex-start;
-      flex-wrap: wrap;
-      gap: 0.75rem;
-      padding-inline: 0.45rem;
-      padding-bottom: 1rem;
     }
 
     [dir="rtl"] .hero-action-group {
-      padding-right: 2.4rem;
+      padding-right: 0;
     }
 
     .hero-action-group > * {
-      width: auto;
+      width: 100%;
-      min-width: 138px;
+      min-width: 0;
     }
   }
 
@@ -917,21 +964,34 @@
     }
 
     .section-padding {
-      padding: 1rem 0.875rem 1.25rem;
+      padding: 0.95rem 0.875rem 1.2rem;
     }
 
     .navbar-shell .type-brand {
-      font-size: clamp(18px, 5.8vw, 22px);
+      font-size: clamp(17px, 5.4vw, 20px);
     }
 
     .navbar-specialty {
-      font-size: 10px;
+      font-size: 9px;
       letter-spacing: 0.03em;
     }
 
     .contact-card {
       padding: 1rem 0.875rem;
     }
+
+    .hero-panel {
+      background-size: 220px 220px;
+    }
+
+    .hero-title {
+      font-size: clamp(27px, 10vw, 32px);
+    }
+
+    .hero-copy-stack .type-body-responsive {
+      font-size: 14px;
+      line-height: 1.65;
+    }
   }
 
   @media (max-width: 360px) {

components/home-page.tsx

@@ -55,11 +55,11 @@ export function HomePage({ language }: { language: Language }) {
       <main className="site-container flex flex-col gap-12 py-6 md:gap-14 md:py-8 lg:gap-16 lg:py-10">
         <section className="grid gap-5">
           <div className="grid gap-8 lg:grid-cols-[0.92fr_1.08fr] lg:items-stretch">
-            <div className="section-shell hero-glow line-frame h-full">
+            <div className="section-shell hero-shell hero-glow line-frame h-full">
-              <div className="section-padding editorial-grid flex h-full flex-col justify-center">
+              <div className="section-padding hero-panel editorial-grid flex h-full flex-col justify-center">
                 <p className="section-kicker">{t.ui.editorialPortfolio}</p>
                 <h1
-                  className={`type-hero-title mt-6 max-w-4xl text-[var(--color-ink)] ${
+                  className={`type-hero-title hero-title mt-6 max-w-4xl text-[var(--color-ink)] ${
                     language === "en" ? "type-hero-title-latin" : ""
                   }`}
                 >
@@ -78,7 +78,7 @@ export function HomePage({ language }: { language: Language }) {
                   </p>
                 </div>
 
-                <div className={`hero-action-group mt-10 flex flex-wrap gap-4 ${dir === "rtl" ? "justify-start" : ""}`}>
+                <div className={`hero-action-group flex flex-wrap gap-4 ${dir === "rtl" ? "justify-start" : ""}`}>
                   <Link href={`${basePath}#projects`} className="button-primary hero-action-link">
                     {t.ui.viewProjects}
                   </Link>