fix(v2): stack mobile header vertically, prevent nav mid-item wrap

At <=700px the nav was sharing a horizontal row with the logo and
social icons, but "Inference Economics" exceeded the available
width and wrapped mid-item, pushing the social icons into the
vertical center of the wrapped nav. Stack the header as three
centered rows (logo / nav / social) and add white-space: nowrap
to nav items so wrapping only happens between items.

Author: Sohailm25

theme/static/css/site.css

@@ -525,8 +525,22 @@ a:hover { color: var(--brown); text-decoration-color: var(--brown); }
   }
 }
 @media (max-width: 700px) {
-  .site-header-inner { flex-wrap: wrap; gap: var(--space-3); padding: var(--space-3); }
-  .site-nav ul { gap: var(--space-3); flex-wrap: wrap; justify-content: center; }
+  .site-header-inner {
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-3) var(--space-4);
+  }
+  .site-logo { align-self: center; }
+  .site-nav { flex: none; width: 100%; }
+  .site-nav ul {
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: var(--space-2) var(--space-4);
+  }
+  .site-nav li { white-space: nowrap; }
+  .site-nav a { white-space: nowrap; font-size: 0.78rem; }
+  .site-social { justify-content: center; }
   .site-main { padding: var(--space-5) var(--space-4); }
   .hero {
     flex-direction: column-reverse;