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>

categories.njk

@@ -10,8 +10,8 @@ eleventyComputed:
   title: "{{ category }}"
 ---
 <div class="h-feed">
-  <h1 class="text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">{{ category }}</h1>
-  <p class="text-surface-600 dark:text-surface-400 mb-8">
+  <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">{{ category }}</h1>
+  <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
     Posts tagged with "{{ category }}".
   </p>