Add light mode that follows the device setting

Dark stays the default. A device set to light gets the picks from the
light motif board: the Dawn chart sky (dawn wash over faint star chart
lines, atlas marks in the hero), deep gold line seals, Midnight, violet and
gold dust, the deep gold to teal filament and the morning sky placeholder.
Large standalone seals (404, Inquiries, Inquiry sent, the blog's lead) are
gold foil in both modes.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012aSbo2D1qP8cMFQCykf7kx

services/site/src/pages/now.astro

@@ -5,6 +5,7 @@
  * Everything / Now / Up next filter.
  */
 import FilterGroup from "@gk/ui/components/FilterGroup.astro";
+import Motif from "@gk/ui/components/Motif.astro";
 import PageShell from "@gk/ui/components/PageShell.astro";
 import SectionHeading from "@gk/ui/components/SectionHeading.astro";
 import Star from "@gk/ui/components/Star.astro";
@@ -74,7 +75,7 @@ const wrapped = s
 
     <aside aria-label="About this page" class="aside">
       <div class="panel">
-        <img src={seals.zodiac} alt="" aria-hidden="true" class="panel-seal" />
+        <Motif src={seals.zodiac} alt="" aria-hidden="true" class="panel-seal" />
         <span class="panel-kicker"><Star size={11} /><span>How this works</span></span>
         <TickScale width={200} height={10} count={30} class="panel-ticks" />
         <p class="panel-text">
@@ -85,7 +86,7 @@ const wrapped = s
       {
         wrapped.length > 0 && (
           <div class="panel">
-            <img src={seals["seven-metals"]} alt="" aria-hidden="true" class="panel-seal" />
+            <Motif src={seals["seven-metals"]} alt="" aria-hidden="true" class="panel-seal" />
             <span class="panel-kicker"><Star size={11} /><span>Recently wrapped up</span></span>
             <TickScale width={200} height={10} count={30} class="panel-ticks" />
             <ul class="wrapped">