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

packages/ui/src/components/PageShell.astro

@@ -12,7 +12,7 @@ import ConstellationDust from "./ConstellationDust.astro";
 import EdgeSeals from "./EdgeSeals.astro";
 import SiteFooter from "./SiteFooter.astro";
 import SiteHeader from "./SiteHeader.astro";
-import type { NavKey } from "./nav.ts";
+import type { NavKey, StoreNav } from "./nav.ts";
 import type { PageFamily, SealName } from "./seals.ts";
 
 interface Props {
@@ -22,10 +22,12 @@ interface Props {
   /** A craft page's own seal, overriding the family's. */
   seal?: SealName;
   current?: NavKey;
+  /** The Store's own header, on Store pages. */
+  store?: StoreNav;
   /** Leave the edge seals off, for a page led by a photo. */
   noSeals?: boolean;
 }
-const { title, description, family = "landing", seal, current, noSeals } = Astro.props;
+const { title, description, family = "landing", seal, current, store, noSeals } = Astro.props;
 const fullTitle = title === "Greg Kilmer" ? title : `${title} · Greg Kilmer`;
 ---
 <!doctype html>
@@ -35,6 +37,10 @@ const fullTitle = title === "Greg Kilmer" ? title : `${title} · Greg Kilmer`;
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="color-scheme" content="dark" />
     <meta name="theme-color" content="#0E1522" />
+    <link rel="icon" href="/favicon.ico" sizes="48x48" />
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+    <link rel="manifest" href="/site.webmanifest" />
     <title>{fullTitle}</title>
     {description && <meta name="description" content={description} />}
     <slot name="head" />
@@ -44,7 +50,7 @@ const fullTitle = title === "Greg Kilmer" ? title : `${title} · Greg Kilmer`;
     <div class="gk-page">
       <ConstellationDust />
       {!noSeals && <EdgeSeals family={family} seal={seal} />}
-      <SiteHeader current={current}><slot name="hero" /></SiteHeader>
+      <SiteHeader current={current} store={store} hero={Astro.slots.has("hero")}><slot name="hero" /></SiteHeader>
       <main id="main" class="gk-wrap gk-main">
         <slot />
       </main>
@@ -58,6 +64,11 @@ const fullTitle = title === "Greg Kilmer" ? title : `${title} · Greg Kilmer`;
     position: relative;
     min-height: 100vh;
     overflow-x: clip;
+    /* The page's nebula: violet from the top right, teal from the bottom left. */
+    background:
+      radial-gradient(ellipse at 100% 0%, rgba(106, 47, 224, 0.28), transparent 50%),
+      radial-gradient(ellipse at 0% 100%, rgba(20, 163, 154, 0.2), transparent 55%),
+      var(--gk-sky);
   }
   .gk-main {
     position: relative;