Fix dangling separator in hero subtitle on narrow Safari viewports

The " · " before test.describe() was orphaned when .mono became
display:block on mobile.  Wrap it in .hero__sub-sep and hide it at
≤900px.  Also tighten topbar padding at ≤480px for iPhone-mini widths.
Add a responsive test asserting the separator is hidden on mobile.

Co-authored-by: Cursor <cursoragent@cursor.com>

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