nav: phone tabs on a compact second row - zero-JS, scrollable, no hamburger

The links were display:none under 720px (desktop-only nav). Phones now wrap the bar: brand +
theme toggle row 1, the five tabs row 2 (mono 0.78rem, overflow-x scroll, hidden scrollbar).
Media block placed AFTER the base rules - same-specificity source order was eating the first attempt.

src/components/Nav.astro

@@ -120,4 +120,32 @@ const links = [
       display: flex;
     }
   }
+  /* phones: the tabs live on a compact second row (zero-JS, no hamburger) —
+     the bar wraps: brand + toggle on row 1, links across row 2 */
+  @media (max-width: 719px) {
+    .nav__inner {
+      height: auto;
+      flex-wrap: wrap;
+      row-gap: 0;
+      padding-block: 0.55rem 0.6rem;
+    }
+    .nav__links {
+      display: flex;
+      order: 3;
+      width: 100%;
+      gap: var(--space-4);
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+      scrollbar-width: none;
+      font-size: 0.78rem;
+      padding-top: 0.5rem;
+    }
+    .nav__links::-webkit-scrollbar {
+      display: none;
+    }
+    .nav__links a {
+      flex-shrink: 0;
+      padding-bottom: 0.15rem;
+    }
+  }
 </style>