Match the site to the approved designs

Denser star field, the page nebula, a favicon package, the filament banner
without its box, the About portrait, Kashi and tea photos and Scorpius, the
Store's own header, a header logo glow, a resume PDF that fills its page,
one divider on the Library and Shelf, star-chart art for coverless
favorites, Shelf Players, Play time and blog filters with a Show all fold,
make kind pills on craft pages, and full-width closing bands.

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

services/site/src/components/home/Portrait.astro

@@ -1,9 +1,10 @@
 ---
 /**
- * Greg's portrait in a gold frame. No portrait file exists yet, so the
- * star-chart art stands in; pass `src` once there is one.
+ * Greg's portrait in a gold frame, from the Page text note's `portrait`.
+ * Without one, or if it fails to load, the star-chart art stands in.
  */
 import GiltCorners from "@gk/ui/components/GiltCorners.astro";
+import Star from "@gk/ui/components/Star.astro";
 import StarChartArt from "@gk/ui/components/StarChartArt.astro";
 import type { SealName } from "@gk/ui/components/seals.ts";
 
@@ -20,6 +21,8 @@ const { variant = "hero", src, alt = "Greg Kilmer", seal = "transmutation", clas
 <figure class:list={["portrait", variant, className]}>
   <StarChartArt seal={seal} ratio={variant === "hero" ? "188 / 228" : "auto"} src={src} alt={alt} class="art" />
   {variant === "panel" && <GiltCorners inset={4} size={30} />}
+  {variant === "hero" && <Star size={34} class="spark tl" />}
+  {variant === "hero" && <Star size={24} class="spark br" />}
   {!src && <figcaption class="gk-visually-hidden">Portrait coming soon</figcaption>}
 </figure>
 
@@ -38,6 +41,20 @@ const { variant = "hero", src, alt = "Greg Kilmer", seal = "transmutation", clas
   .hero :global(.art) {
     border-radius: var(--gk-radius);
   }
+  .hero :global(.photo) {
+    object-position: 50% 20%;
+  }
+  .hero :global(.spark) {
+    position: absolute;
+  }
+  .hero :global(.tl) {
+    left: -17px;
+    top: -17px;
+  }
+  .hero :global(.br) {
+    right: -12px;
+    bottom: -12px;
+  }
   .panel {
     width: 100%;
     padding: 10px;
@@ -50,4 +67,7 @@ const { variant = "hero", src, alt = "Greg Kilmer", seal = "transmutation", clas
     width: 100%;
     height: 320px;
   }
+  .panel :global(.photo) {
+    object-position: 50% 25%;
+  }
 </style>