diff --git a/css/app.css b/css/app.css
index fe256cc..e01d1cf 100644
--- a/css/app.css
+++ b/css/app.css
@@ -846,6 +846,9 @@ body {
   .hero__title { font-size: 32px; }
   .hero__sub { font-size: 12px; word-break: break-word; white-space: normal; }
   .hero__sub .mono { display: block; margin-top: 4px; }
+  /* When .mono drops to its own line, the inline " · " in front of it would
+     dangle as an orphan after "Canadian citizen". Hide it on mobile. */
+  .hero__sub .hero__sub-sep { display: none; }
   .hero__hint { font-size: 12.5px; white-space: normal; word-break: break-word; }
   .hero--slim { padding: 14px 18px 10px; }
   .hero--slim .hero__title { font-size: 20px; }
@@ -910,6 +913,15 @@ body {
   .hero__hint { font-size: 11px; }
   .hero--slim .hero__title { font-size: 18px; }
 
+  /* Tighten the topbar so 5 ghost buttons + brand fit on iPhone-mini widths
+     without horizontal overflow. We keep all controls reachable; just trim
+     their padding and shrink the brand wordmark. */
+  .topbar { gap: 4px; padding: 0 6px; }
+  .topbar__right { gap: 2px; }
+  .btn { padding: 0 6px; }
+  .btn--run { padding: 0 9px; }
+  .brand__name { font-size: 11.5px; }
+
   .trace-row, .trace-axis { grid-template-columns: 80px 1fr 44px; font-size: 10px; }
   .trace-head__meta { display: none; }
 
diff --git a/index.html b/index.html
index 27cc1d5..ed88f6b 100644
--- a/index.html
+++ b/index.html
@@ -9,8 +9,8 @@
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet" />
-  <link rel="stylesheet" href="css/base.css?v=7" />
-  <link rel="stylesheet" href="css/app.css?v=7" />
+  <link rel="stylesheet" href="css/base.css?v=8" />
+  <link rel="stylesheet" href="css/app.css?v=8" />
 </head>
 <body>
   <!-- ============== TOP BAR ============== -->
@@ -134,7 +134,7 @@
         <div class="hero">
           <div class="hero__tag">describe</div>
           <h1 class="hero__title">Ilia Dobkin</h1>
-          <p class="hero__sub">Senior SDET · Remote (ET) · Canadian citizen · <span class="mono">test.describe("portfolio")</span></p>
+          <p class="hero__sub">Senior SDET · Remote (ET) · Canadian citizen<span class="hero__sub-sep"> · </span><span class="mono">test.describe("portfolio")</span></p>
           <p class="hero__hint">Click the green <span class="kbd">▶</span> next to any test to run it — or press <span class="kbd">Run all</span> above.</p>
         </div>
         <!-- Tiny run-history banner above the results list. Pulls the eye to
diff --git a/tests/portfolio.spec.ts b/tests/portfolio.spec.ts
index add4c11..ba7e536 100644
--- a/tests/portfolio.spec.ts
+++ b/tests/portfolio.spec.ts
@@ -419,6 +419,15 @@ test.describe("responsive", () => {
     await page.click("#menu-btn");
     await expect(page.locator("#sidebar")).toHaveClass(/is-open/);
   });
+
+  test("hero subtitle separator is hidden on mobile", async ({ page }) => {
+    await page.goto("/");
+    const sep = page.locator(".hero__sub-sep");
+    await expect(sep).toBeHidden();
+    const sub = page.locator(".hero__sub");
+    await expect(sub).toContainText("Canadian citizen");
+    await expect(sub).toContainText("test.describe");
+  });
 });
 
 // ---------------------------------------------------------------------------
