Card + article-page polish

* Placeholder: bold, slightly larger initial letter on the topic word; make
  health (teal) and environment (leaf green) clearly distinct and show more hue
  in the deepened word so they're easy to tell apart.
* Article page: the source name was chopped to its first word ("Read the full
  story at The") — use the full publisher name; open the source link in a new
  tab so upbeatbytes.com stays put.
* Use the new SVG back arrow on the account and admin top bars (matching the
  article page) instead of the old "←" glyph.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/src/lib/components/ArticleCard.svelte

@@ -22,8 +22,8 @@
   const TOPIC_COLOR = {
     science: '#0083ad',     // azure (sea)
     technology: '#5f72a8',  // muted indigo
-    environment: '#3f9070', // soft green
-    health: '#3aa6a0',      // calm teal
+    environment: '#5a9d3e', // leaf green (clearly distinct from health's teal)
+    health: '#1f9e95',      // teal
     community: '#c79a3a',   // warm gold
     culture: '#c4795a',     // terracotta
     animals: '#9a8246',     // earthy tan
@@ -299,10 +299,13 @@
   }
   .tile .media.placeholder .ph-word {
     font-family: var(--serif); font-size: 2rem; line-height: 1;
-    /* A deep, near-black shade of the topic color so the word reads clearly. */
-    color: color-mix(in srgb, var(--c) 55%, var(--ink)); opacity: 0.9;
+    /* A deep shade of the topic color so the word reads clearly (more hue than
+       before, so health vs environment are easy to tell apart). */
+    color: color-mix(in srgb, var(--c) 64%, var(--ink)); opacity: 0.92;
     text-transform: lowercase; letter-spacing: -0.01em;
   }
+  /* A snazzy bold, slightly larger initial. */
+  .tile .media.placeholder .ph-word::first-letter { font-weight: 800; font-size: 1.2em; }
   /* A thumb card's banner carries the topic identity, so drop the faint corner
      watermark there to avoid a doubled word. */
   .tile.hasthumb::after { display: none; }