Reskin GregKilmer.com in the Patiun brand

- Palette: Patiun Teal, Midnight, night sky, Starlight, flat Alchemist Gold;
  violet/indigo only as nebula light. Starlight content sections, night-sky
  nav and heroes (.on-sky scope re-points accent/gold to on-dark values).
- Type: Cinzel for headings, names and card titles; Montserrat for body, UI
  and eyebrows (font-eyebrow); JetBrains Mono kept for code-like blocks.
- Header lockup: Patiun glyph + Cinzel "GREG KILMER" + "Web Development ·
  a Patiun LLC company"; glyph also marks the footer and store nav.
- Teal filled buttons with Midnight text; gold eyebrows; small links use a
  darker teal so they pass WCAG AA on Starlight.
- Favicons, app icons and web manifest from the GregKilmer.com brand package.
- docs/THEMING.md updated for the new palette and fonts.

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

src/components/layout/Footer.astro

@@ -3,11 +3,11 @@
  * Footer.astro
  * ---------------------------------------------------------------------------
  * Minimal footer on a deep night-sky surface: a faint static starfield accent,
- * a StarBurst mark beside the name, social links (mdi icons), copyright, and
+ * the Patiun glyph as a maker's mark beside the name, social links (mdi icons), copyright, and
  * the spec microcopy "Built with intention. Powered by caffeine." No emojis.
  */
 import Icon from '@components/Icon.astro';
-import StarBurst from '@components/mystic/StarBurst.astro';
+import PatiunGlyph from '@components/brand/PatiunGlyph.astro';
 import StarField from '@components/mystic/StarField.astro';
 import { socials, footerMicrocopy, siteIdentity } from '@lib/site';
 const year = new Date().getFullYear();
@@ -26,12 +26,12 @@ const socialList = Object.values(socials);
   />
   <div class="container-prose relative z-10 flex flex-col items-center gap-6 py-10 text-center sm:flex-row sm:justify-between sm:text-left">
     <div class="flex items-center gap-3">
-      <StarBurst class="h-5 w-5 shrink-0" style="color: var(--color-accent);" />
+      <PatiunGlyph class="h-6 w-auto shrink-0" />
       <div class="flex flex-col gap-1">
-        <p class="font-sans text-sm font-semibold" style="color: var(--color-text);">
+        <p class="font-display text-sm font-bold uppercase tracking-[0.14em]" style="color: var(--color-text);">
           {siteIdentity.name}
         </p>
-        <p class="font-mono text-xs italic" style="color: var(--color-text-subtle);">
+        <p class="font-eyebrow text-xs italic" style="color: var(--color-text-subtle);">
           {footerMicrocopy}
         </p>
       </div>

src/components/layout/InterestHero.astro

@@ -6,7 +6,7 @@
  * Milky Way field: a back-to-hub breadcrumb, a small icon mark, the title, and
  * the italic tagline.
  *
- * Tuned for the dark starfield: text uses bright cream tones (not the dim
+ * Tuned for the dark starfield: text uses bright Starlight tones (not the dim
  * --color-text-subtle/--color-text which vanish on the deep sky). The title is
  * h2-sized (the page is a sub-page, not Home) so it doesn't dominate. An
  * optional banner image sits above the heading.
@@ -39,7 +39,7 @@ const {
 } = Astro.props;
 ---
 
-<section class="relative overflow-hidden pb-8 pt-28 sm:pt-32">
+<section class="on-sky relative overflow-hidden pb-8 pt-28 sm:pt-32">
   <!-- Full animated Milky Way field + stars (matches the Home/Interests hero).
        Carries the per-page morph name (one .vt-sky per page snapshot). -->
   <AnimatedBackground client:idle className="vt-sky" />
@@ -54,8 +54,8 @@ const {
       <Reveal>
         <a
           href="/interests"
-          class="inline-flex items-center gap-1.5 font-mono text-xs uppercase tracking-[0.18em] transition-colors"
-          style="color: var(--color-cream); opacity: 0.8;"
+          class="inline-flex items-center gap-1.5 font-eyebrow text-xs uppercase tracking-[0.18em] transition-colors"
+          style="color: var(--color-starlight); opacity: 0.8;"
         >
           <Icon name="arrow-left" class="h-4 w-4" />
           {eyebrow}
@@ -74,8 +74,8 @@ const {
 
       <Reveal delay={100}>
         <h2
-          class="font-sans font-bold tracking-tight"
-          style="color: var(--color-cream); font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem); line-height: 1.15;"
+          class="font-display font-bold"
+          style="color: var(--color-starlight); font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem); line-height: 1.15;"
         >
           {title}
         </h2>
@@ -84,7 +84,7 @@ const {
       <Reveal delay={140}>
         <p
           class="max-w-xl border-l-2 pl-4 font-sans text-base italic sm:text-lg"
-          style="border-color: var(--color-accent); color: var(--color-cream); opacity: 0.92;"
+          style="border-color: var(--color-accent); color: var(--color-starlight); opacity: 0.92;"
         >
           {tagline}
         </p>

src/components/layout/Placeholder.astro

@@ -40,7 +40,7 @@ const { label, hint, class: className = '' } = Astro.props;
     <Icon name="pencil" class="h-4 w-4" />
   </span>
   <div class="flex flex-col gap-1">
-    <span class="font-mono text-[0.65rem] font-bold uppercase tracking-[0.18em]" style="color: var(--color-accent);">
+    <span class="font-eyebrow text-[0.65rem] font-bold uppercase tracking-[0.18em]" style="color: var(--color-accent);">
       TODO &middot; {label}
     </span>
     {hint && <p class="text-sm" style="color: var(--color-text-muted);">{hint}</p>}

src/components/layout/RelatedInterests.astro

@@ -23,7 +23,7 @@ const { items } = Astro.props;
 ---
 
 <section class="mt-16">
-  <h3 class="mb-5 font-mono text-xs uppercase tracking-[0.22em]" style="color: var(--color-accent);">
+  <h3 class="mb-5 font-eyebrow text-xs uppercase tracking-[0.22em]" style="color: var(--color-accent);">
     You might also like
   </h3>
   <div class="grid gap-4 sm:grid-cols-2">

src/components/layout/SectionHeader.astro

@@ -39,8 +39,8 @@ const {
 } = Astro.props;
 
 const isHero = tone === "hero";
-const titleColor = isHero ? "var(--color-cream)" : undefined;
-const subtitleColor = isHero ? "var(--color-cream)" : "var(--color-text-muted)";
+const titleColor = isHero ? "var(--color-starlight)" : undefined;
+const subtitleColor = isHero ? "var(--color-starlight)" : "var(--color-text-muted)";
 ---
 
 <div
@@ -53,11 +53,11 @@ const subtitleColor = isHero ? "var(--color-cream)" : "var(--color-text-muted)";
   {
     kicker && (
       <span
-        class="inline-flex items-center gap-2 font-mono text-xs uppercase tracking-[0.22em]"
+        class="inline-flex items-center gap-2 font-eyebrow text-xs uppercase tracking-[0.22em]"
         style={
           isHero
             ? "color: var(--color-accent); text-shadow: 0 0 14px color-mix(in srgb, var(--color-accent) 45%, transparent);"
-            : "color: var(--color-accent);"
+            : "color: var(--color-secondary);"
         }
       >
         {icon && <Icon name={icon} class="h-4 w-4" />}

src/components/layout/SplitTransition.astro

@@ -39,7 +39,7 @@ const {
     />
     <span class="flex flex-col gap-1">
       <span
-        class="font-mono text-xs uppercase tracking-[0.18em]"
+        class="font-eyebrow text-xs uppercase tracking-[0.18em]"
         style="color: var(--color-text-subtle); text-align:right;"
       >
         The professional wing
@@ -59,7 +59,7 @@ const {
   >
     <span class="flex flex-col gap-1">
       <span
-        class="font-mono text-xs uppercase tracking-[0.18em]"
+        class="font-eyebrow text-xs uppercase tracking-[0.18em]"
         style="color: var(--color-text-subtle);"
       >
         The personal wing