docs(site): mobile-first revamp of all pages

Rewrite both stylesheets mobile-first (base = phone; @media min-width
progressively enhances) and add a responsive nav.

- Hamburger menu on small screens: links collapse into a clean, uniform
  dropdown list (plain rows + separators, no out-of-place boxed buttons);
  full inline nav with boxed CTA returns at >=720px. Auto-wired for every page.
- Fix horizontal-overflow root causes: min-width:0 on grid/flex code containers,
  pre/sig scroll internally, long names wrap (overflow-wrap). 0 page overflow on
  every page type at 375px.
- Stack layouts on mobile: single-column hero/features/steps/index grid,
  column parameter cards, 2-col color swatches; multi-column returns on wider
  screens. Reduced hero/section padding; fluid clamp() headings.
- Hover cards gated to hover-capable devices so a tap just navigates.
- Desktop layout preserved (verified at 1280px: inline nav, 2-col hero, 3-col
  features, no regression).

Verified in-browser at 375px and 1280px across landing, API index, item
(method/keyword/annotation/phase), namespace overview, and color pages.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

tools/docgen/assets/ludic-highlight.tmpl.js

@@ -134,6 +134,8 @@
   }
   function hideCard(){ if (cardEl) cardEl.hidden = true; }
   function installCards(){
+    // hover cards are a pointer affordance; skip on touch so a tap just navigates
+    if (!(window.matchMedia && window.matchMedia("(hover: hover)").matches)) return;
     document.addEventListener("mouseover", e => {
       const a = e.target.closest && e.target.closest("a.tok[data-id]");
       if (!a) return;
@@ -182,5 +184,23 @@
     box.addEventListener("keydown", e => { if (e.key === "Enter"){ const first = items.find(i=>i.style.display!=="none"); if (first) location.href = first.getAttribute("href"); } });
   }
 
-  global.Ludic = { highlight, highlightAll, installCards, flashTarget, installSearch, SYMBOLS: S };
+  /* ---- mobile nav toggle (auto-wired on every page) ------------------- */
+  function initNav(){
+    document.querySelectorAll(".nav-toggle").forEach(btn => {
+      btn.addEventListener("click", () => {
+        const h = btn.closest("header.nav"); if (!h) return;
+        const open = h.classList.toggle("open");
+        btn.setAttribute("aria-expanded", open ? "true" : "false");
+      });
+    });
+    document.querySelectorAll("header.nav .nav-links a").forEach(a => {
+      a.addEventListener("click", () => {
+        const h = a.closest("header.nav");
+        if (h){ h.classList.remove("open"); const b = h.querySelector(".nav-toggle"); if (b) b.setAttribute("aria-expanded","false"); }
+      });
+    });
+  }
+  if (document.readyState !== "loading") initNav(); else document.addEventListener("DOMContentLoaded", initNav);
+
+  global.Ludic = { highlight, highlightAll, installCards, flashTarget, installSearch, initNav, SYMBOLS: S };
 })(window);