Give the GK monogram a light mode version

In light mode the header, footer and post placeholders show the monogram
on a pale disc with deep gold rings and ink letters, with a soft edge so
it sits apart from the Starlight page. The light file is written by the
light motifs script.

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

packages/ui/src/components/SiteFooter.astro

@@ -2,12 +2,13 @@
 /** The site footer: the header divider again, then the monogram line and links. */
 import monogram from "../assets/brand/gk-monogram.svg?url";
 import Divider from "./Divider.astro";
+import Motif from "./Motif.astro";
 const year = new Date().getFullYear();
 ---
 <footer class="gk-site-footer">
   <div class="gk-wrap"><Divider seed="footer" /></div>
   <div class="gk-wrap row">
-    <span class="mark"><img src={monogram} alt="" width="40" height="40" />© {year} Greg Kilmer · Web Development · a Patiun LLC company</span>
+    <span class="mark"><Motif src={monogram} alt="" width="40" height="40" />© {year} Greg Kilmer · Web Development · a Patiun LLC company</span>
     <span class="links">
       <a href="/inquiries" class="gk-text strong">Start an inquiry</a>
       <a href="/about" class="gk-text gk-quiet">About</a>
@@ -37,6 +38,12 @@ const year = new Date().getFullYear();
     align-items: center;
     gap: 12px;
   }
+  .mark :global(img) {
+    border-radius: 50%;
+  }
+  :global(:root[data-theme="light"]) .mark :global(img) {
+    box-shadow: 0 1px 3px rgba(19, 28, 43, 0.14);
+  }
   .links {
     display: flex;
     flex-wrap: wrap;