Better nav layout for portrait phones.

frontend/src/assets/pagerite.css

@@ -907,6 +907,30 @@ article h2 {
    (explicit img widths still shrink-wrap), while .wide keeps its full
    viewport bleed. */
 @media (max-width: 48rem) {
+  /* Nav type shrinks fluidly as space runs out. The nav font-size is
+     em-based both in base and in every theme override, so scaling the
+     banner's font-size (nothing else in the banner is em-sized — brand and
+     gaps use rem) reaches the nav through all themes with a single rule.
+     2.6vw crosses 1rem at ≈38.5rem, so only genuinely narrow viewports
+     shrink. */
+  #banner {
+    font-size: clamp(0.65rem, 2.6vw, 1rem);
+  }
+
+  /* Tighter margins/padding/gaps: the 1.25rem side gutter is wasted space
+     on a phone. */
+  #brand {
+    margin-inline: 0.6rem;
+  }
+
+  #nav {
+    padding: 0.25rem 0.6rem;
+  }
+
+  #nav ul {
+    gap: 0.15rem 0.9rem;
+  }
+
   #content {
     display: flex;
     flex-direction: column;
@@ -918,7 +942,11 @@ article h2 {
     max-height: none;
     overflow-y: visible;
     border-radius: 0;
-    padding: 0.5rem 1rem;
+    padding: 0.4rem 0.8rem;
+    /* Smaller type: the horizontal link strip fits roughly a third more
+       items per line. The nested-list gaps below are em-based and shrink
+       along. */
+    font-size: 0.9rem;
   }
 
   /* Only the main level becomes a horizontal wrapping strip; submenus stay
@@ -926,7 +954,7 @@ article h2 {
   #sidebar > ul {
     flex-direction: row;
     flex-wrap: wrap;
-    gap: 0.5rem 1.2rem;
+    gap: 0.35rem 0.9rem;
   }
 
   figure:has(.right),