feat(theme): Archipelago uses the reference artwork as the canvas

First pass was abstract gradient washes; the reference mock is the
synthwave sun/tower illustration itself behind frosted-glass panels.
Now: real artwork (public/archipelago-bg.jpg from the user's reference)
fills .main cover/fixed under a dark scrim, cards + sidebar are
translucent blurred glass with light hairline borders, coral accent and
is-active nav pill kept. Verified computed background stack in browser;
139 frontend tests + build green.

frontend/src/styles.css

@@ -707,83 +707,79 @@ html[data-theme='workshop'] .card {
 }
 
 /* ------------------------------------------------------------------
-   Archipelago — synthwave sunset sea, from the reference artwork:
-   a coral scanline sun sinking into a teal dusk, pink cloud banks,
-   and glassmorphic panels floating over the horizon like islands.
+   Archipelago — the user's reference artwork IS the canvas: the
+   synthwave sun-and-tower vista behind frosted-glass panels, with a
+   dark scrim so text stays legible, exactly like the reference mock.
    ------------------------------------------------------------------ */
 :root[data-theme='archipelago'] {
   --bg: #0c1418;
-  --surface: rgba(19, 36, 41, 0.78);
-  --surface-2: #17303a;
-  --surface-hover: rgba(26, 46, 52, 0.85);
-  --border: #27464e;
-  --border-strong: #35606a;
-  --text: #e9f3f1;
-  --text-muted: #92aeb2;
+  --surface: rgba(13, 22, 27, 0.58);
+  --surface-2: rgba(20, 34, 41, 0.72);
+  --surface-hover: rgba(26, 44, 52, 0.78);
+  --border: rgba(140, 190, 200, 0.22);
+  --border-strong: rgba(170, 215, 225, 0.35);
+  --text: #f2f7f6;
+  --text-muted: #b7ccd0;
   --primary: #f0685c;
   --primary-hover: #ff8578;
-  --primary-soft: #40232a;
+  --primary-soft: rgba(240, 104, 92, 0.18);
   --on-primary: #ffffff;
   --danger: #e2554f;
-  --danger-soft: #3a2026;
+  --danger-soft: rgba(226, 85, 79, 0.16);
   --warning: #e8b26a;
-  --warning-soft: #37291d;
-  --success: #5fc9b2;
-  --success-soft: #173630;
-  --info: #6f9fc4;
-  --info-soft: #1c2c38;
+  --warning-soft: rgba(232, 178, 106, 0.14);
+  --success: #4ed0a5;
+  --success-soft: rgba(78, 208, 165, 0.14);
+  --info: #6fa8d8;
+  --info-soft: rgba(111, 168, 216, 0.14);
   --focus: #f0685c;
-  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.4);
+  --shadow: 0 2px 10px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.35);
   --shadow-modal: 0 14px 44px rgba(0, 0, 0, 0.65);
   --radius: 16px;
   --radius-sm: 10px;
-  --arch-coral: rgba(240, 104, 92, 0.16);
-  --arch-cloud: rgba(232, 130, 160, 0.1);
-  --arch-teal: rgba(60, 150, 155, 0.14);
 }
 
-/* The horizon: sun glow low-center, cloud banks left/right, teal dusk
-   above. Fixed so the vista stays put while content scrolls over it. */
+/* The vista fills the whole content surface: scrim first (legibility),
+   then the artwork, sized to cover. Fixed so it stays put while
+   content scrolls behind the glass. */
 html[data-theme='archipelago'] .main {
   background-image:
-    repeating-linear-gradient(
-      0deg,
-      rgba(255, 255, 255, 0.014) 0px,
-      rgba(255, 255, 255, 0.014) 1px,
-      transparent 1px,
-      transparent 3px
-    ),
-    radial-gradient(70% 42% at 50% 108%, var(--arch-coral), transparent 72%),
-    radial-gradient(45% 34% at 8% 16%, var(--arch-cloud), transparent 70%),
-    radial-gradient(45% 34% at 92% 10%, var(--arch-teal), transparent 70%);
+    linear-gradient(rgba(8, 13, 17, 0.55), rgba(8, 13, 17, 0.72)), url('/archipelago-bg.jpg');
+  background-size: cover, cover;
+  background-position: center;
+  background-repeat: no-repeat;
   background-attachment: fixed;
 }
 
-/* Glass panels: let the sunset read through the cards, like the
-   reference dashboard. */
+/* Frosted glass panels — the artwork shows through, blurred, like the
+   reference dashboard cards. */
 html[data-theme='archipelago'] .card,
 html[data-theme='archipelago'] .profile-card,
 html[data-theme='archipelago'] .relay-row {
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(14px) saturate(1.15);
+  -webkit-backdrop-filter: blur(14px) saturate(1.15);
+  border-color: var(--border);
 }
 
 html[data-theme='archipelago'] .sidebar {
-  background: linear-gradient(180deg, rgba(13, 24, 29, 0.92), rgba(13, 24, 29, 0.82));
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
+  background: rgba(10, 17, 21, 0.62);
+  backdrop-filter: blur(16px) saturate(1.1);
+  -webkit-backdrop-filter: blur(16px) saturate(1.1);
   border-right-color: var(--border);
 }
 
-/* Dark artwork theme: the ink logo needs the same treatment as the
-   other dark themes. */
+/* Active nav pill picks up the coral sun accent. */
+html[data-theme='archipelago'] .nav-item.is-active {
+  background: var(--primary-soft);
+}
+
 html[data-theme='archipelago'] .sidebar-logo img {
   filter: invert(1) grayscale(1) brightness(1.4);
 }
 
 html[data-theme='archipelago'] code,
 html[data-theme='archipelago'] .mono {
-  background: rgba(23, 48, 58, 0.9);
+  background: rgba(20, 34, 41, 0.8);
   border: 1px solid var(--border);
 }