fix: comprehensive mobile responsive design audit

- Make all headings responsive (text-2xl sm:text-3xl pattern)
- Make all section headings responsive (text-xl sm:text-2xl)
- Add responsive margins (mb-6 sm:mb-8 pattern)
- Fix flex layouts to stack on mobile (flex-col sm:flex-row)
- Make images responsive (w-20 sm:w-24 pattern)
- Add responsive padding (p-4 sm:p-6)
- Improve grid gaps for mobile (gap-3 sm:gap-4)
- Add CSS utilities for table overflow and touch scrolling
- Restyle 404 page with proper responsive design

Files updated: 22 template and CSS files across all pages

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

about.njk

@@ -4,15 +4,15 @@ title: About
 permalink: /about/
 ---
 <article class="h-card">
-  <header class="mb-8 flex flex-col md:flex-row gap-8 items-start">
+  <header class="mb-6 sm:mb-8 flex flex-col sm:flex-row gap-6 sm:gap-8 items-start">
     <img
       src="{{ site.author.avatar }}"
       alt="{{ site.author.name }}"
-      class="u-photo w-40 h-40 rounded-full object-cover shadow-lg"
+      class="u-photo w-32 h-32 sm:w-40 sm:h-40 rounded-full object-cover shadow-lg flex-shrink-0"
       loading="eager"
     >
-    <div>
-      <h1 class="p-name text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">
+    <div class="min-w-0">
+      <h1 class="p-name text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">
         {{ site.author.name }}
       </h1>
       {% if site.author.title %}