Add per-story views, trending, and reader reading-experience upgrades

Surface read counts and sharpen the reader:
- story_views table + RecordStoryView on /api/article (background,
  filter-guarded); "Popular this week" home rail via TrendingStories;
  read-count badge and reading-time chip decorated onto every listing
- reader: signed-in-only read-aloud (TTS), native share/copy, and an
  Aa typography popover (size/serif/sepia) persisted per device
- real alt text on card/reader/related/search images; time-of-day Pete
  greeting on the home hero
- harden exec() to skip (not panic) on a nil DB so background writes
  can't crash on a closed handle

Tests: story_views_test.go, trending_test.go. Suite green, CSS rebuilt.

internal/web/templates/layout.html

@@ -218,6 +218,36 @@
         <div class="pete-reader-nav">
           <button type="button" data-reader-prev class="pete-reader-btn" title="Previous (←)" aria-label="Previous article">←</button>
           <button type="button" data-reader-next class="pete-reader-btn" title="Next (→)" aria-label="Next article">→</button>
+          <button type="button" data-reader-listen class="pete-reader-btn" style="display:none" title="Read aloud (r)" aria-label="Read this story aloud" aria-pressed="false">🔊 Listen</button>
+          <button type="button" data-reader-share class="pete-reader-btn" style="display:none" title="Share (s)" aria-label="Share this story">Share</button>
+          <div class="pete-reader-type">
+            <button type="button" data-reader-type class="pete-reader-btn" title="Text options (t)" aria-label="Text options" aria-expanded="false"><span style="font-size:1.05rem">A</span><span style="font-size:.8rem">a</span></button>
+            <div class="pete-reader-typemenu" data-reader-typemenu hidden>
+              <div class="pete-reader-typerow">
+                <span class="pete-reader-typelabel">Size</span>
+                <div class="pete-reader-typebtns" data-reader-size>
+                  <button type="button" data-size="s" title="Small">S</button>
+                  <button type="button" data-size="m" title="Medium">M</button>
+                  <button type="button" data-size="l" title="Large">L</button>
+                  <button type="button" data-size="xl" title="Extra large">XL</button>
+                </div>
+              </div>
+              <div class="pete-reader-typerow">
+                <span class="pete-reader-typelabel">Font</span>
+                <div class="pete-reader-typebtns" data-reader-font>
+                  <button type="button" data-font="sans">Sans</button>
+                  <button type="button" data-font="serif" style="font-family:Georgia,'Times New Roman',serif">Serif</button>
+                </div>
+              </div>
+              <div class="pete-reader-typerow">
+                <span class="pete-reader-typelabel">Paper</span>
+                <div class="pete-reader-typebtns" data-reader-paper>
+                  <button type="button" data-paper="default">Default</button>
+                  <button type="button" data-paper="sepia">Sepia</button>
+                </div>
+              </div>
+            </div>
+          </div>
           <button type="button" data-reader-bookmark class="pete-reader-btn" style="display:none" title="Bookmark (b)" aria-label="Bookmark this story" aria-pressed="false">🔖 Save</button>
           <a data-reader-link target="_blank" rel="noopener noreferrer" class="pete-reader-btn pete-reader-btn-open" title="Open original (o)">Open&nbsp;↗</a>
           <button type="button" data-reader-close class="pete-reader-btn" title="Close (esc)" aria-label="Close reader">esc</button>
@@ -228,7 +258,7 @@
         <div class="pete-reader-related" data-reader-related hidden></div>
       </div>
       <div class="pete-reader-hint">
-        <span><kbd>←</kbd> <kbd>→</kbd> navigate · <kbd>o</kbd> open · <kbd>u</kbd> mark unread · <kbd>esc</kbd> close</span>
+        <span><kbd>←</kbd> <kbd>→</kbd> navigate · <kbd>o</kbd> open · <kbd>s</kbd> share · <kbd>t</kbd> text · <kbd>u</kbd> unread · <kbd>esc</kbd> close</span>
       </div>
     </div>
   </div>
@@ -244,8 +274,16 @@
   </footer>
 
   <script>
-    // Tiny clock + phase label updater for the header pill / footer.
+    // Tiny clock + phase label updater for the header pill / footer, plus Pete's
+    // time-of-day greeting on the home hero (whichever of these exist).
     (function () {
+      function greeting(h) {
+        if (h >= 5 && h < 8) return "Early start? Here's what came in overnight.";
+        if (h >= 8 && h < 12) return "Morning! Here's what's fresh.";
+        if (h >= 12 && h < 17) return "Afternoon. Here's what's new.";
+        if (h >= 17 && h < 21) return "Evening. Here's what you missed today.";
+        return "Late one? Here's the quiet-hours roundup.";
+      }
       function tick() {
         var now = new Date();
         var hh = String(now.getHours()).padStart(2, "0");
@@ -254,6 +292,8 @@
         if (el) el.textContent = hh + ":" + mm;
         var label = document.querySelector("[data-phase-label]");
         if (label) label.textContent = document.documentElement.dataset.phase;
+        var greet = document.querySelector("[data-pete-greeting]");
+        if (greet) greet.textContent = greeting(now.getHours());
       }
       tick();
       setInterval(tick, 30000);