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>

blog.njk

@@ -9,8 +9,8 @@ pagination:
 permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber + 1 }}/{% endif %}"
 ---
 <div class="h-feed">
-  <h1 class="text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Blog</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">Blog</h1>
+  <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
     All posts including articles and notes.
     <span class="text-sm">({{ collections.posts.length }} total)</span>
   </p>