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>

interactions.njk

@@ -3,12 +3,12 @@ layout: layouts/base.njk
 title: Interactions
 permalink: /interactions/
 ---
-<div class="page-header mb-8">
-  <h1 class="text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Interactions</h1>
+<div class="page-header mb-6 sm:mb-8">
+  <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100 mb-2">Interactions</h1>
   <p class="text-surface-600 dark:text-surface-400">My engagement with content across the IndieWeb.</p>
 </div>
 
-<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+<div class="grid gap-4 sm:gap-6 md:grid-cols-2 lg:grid-cols-3">
   {# Likes #}
   <a href="/likes/" class="block p-6 bg-surface-100 dark:bg-surface-800 rounded-lg hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors group">
     <div class="flex items-center gap-4 mb-4">