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>

bookmarks.njk

@@ -3,7 +3,10 @@ layout: layouts/base.njk
 title: Bookmarks
 permalink: /bookmarks/
 ---
-<h1>Bookmarks</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">Bookmarks</h1>
+  <p class="text-surface-600 dark:text-surface-400">Links I've saved for later.</p>
+</div>
 
 {% if collections.bookmarks.length > 0 %}
 <ul class="post-list">