Make the background seals a little stronger in light mode

A --gk-ghost token scales the faint edge seals, panel seals and banners:
1 in dark, 1.6 in light, so their lines read on Starlight.

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

packages/ui/src/components/EdgeSeals.astro

@@ -39,7 +39,7 @@ const other = second === false ? null : (second ?? first);
     top: 760px;
     width: 620px;
     height: 620px;
-    opacity: 0.07;
+    opacity: calc(0.07 * var(--gk-ghost));
     transform: rotate(-10deg);
   }
   .right {
@@ -47,7 +47,7 @@ const other = second === false ? null : (second ?? first);
     top: 64%;
     width: 560px;
     height: 560px;
-    opacity: 0.06;
+    opacity: calc(0.06 * var(--gk-ghost));
     transform: rotate(8deg);
   }
   @media (max-width: 640px) {

packages/ui/src/components/SiteHeader.astro

@@ -132,7 +132,7 @@ const decs = [60, 30, 0, -30].map((d, i) => ({ at: (i / 4) * 100, label: `${d >
     top: -40px;
     width: 900px;
     max-width: none;
-    opacity: 0.22;
+    opacity: calc(0.22 * var(--gk-ghost));
   }
   .nav {
     max-width: var(--gk-page-max);

packages/ui/src/styles/tokens.css

@@ -48,6 +48,8 @@
   --gk-wash: 1;
   /* The star chart grid behind the page; off in dark, faint ink lines in light. */
   --gk-chart: none;
+  /* How strong the faint seals behind pages and panels are; light mode lifts them. */
+  --gk-ghost: 1;
 
   --gk-filament: linear-gradient(90deg, transparent, var(--gk-gold) 25%, var(--gk-teal-bright) 75%, transparent);
 
@@ -111,6 +113,7 @@
   --gk-midnight-rgb: 255, 255, 255;
   --gk-dust-accent-rgb: 106, 47, 224;
   --gk-wash: 0.5;
+  --gk-ghost: 1.6;
   --gk-chart:
     repeating-linear-gradient(0deg, rgba(19, 28, 43, 0.032) 0 1px, transparent 1px 44px),
     repeating-linear-gradient(90deg, rgba(19, 28, 43, 0.032) 0 1px, transparent 1px 44px);

services/site/src/components/blog/LeadPost.astro

@@ -105,7 +105,7 @@ const now = nowStatuses(s, post);
     position: absolute;
     width: 150%;
     max-width: none;
-    opacity: 0.32;
+    opacity: calc(0.32 * var(--gk-ghost));
     pointer-events: none;
   }
   .art :global(.path) {

services/site/src/components/blog/SidePanel.astro

@@ -37,7 +37,7 @@ const { title, seal, as: H = "h2" } = Astro.props;
     position: absolute;
     right: -26px;
     top: -26px;
-    opacity: 0.14;
+    opacity: calc(0.14 * var(--gk-ghost));
     pointer-events: none;
   }
   .head {

services/site/src/components/work/FeaturedStudy.astro

@@ -92,7 +92,7 @@ const facts = d.facts ?? [];
     position: absolute;
     right: -60px;
     bottom: -80px;
-    opacity: 0.12;
+    opacity: calc(0.12 * var(--gk-ghost));
     pointer-events: none;
   }
   .main {

services/site/src/pages/index.astro

@@ -227,7 +227,7 @@ const listFormat = new Intl.ListFormat("en", { style: "long", type: "conjunction
     position: absolute;
     right: -90px;
     top: -90px;
-    opacity: 0.14;
+    opacity: calc(0.14 * var(--gk-ghost));
     pointer-events: none;
   }
   .work > :not(:global(.work-seal), :global(.gk-corner)) {

services/site/src/pages/now.astro

@@ -209,7 +209,7 @@ const wrapped = s
     top: -26px;
     width: 104px;
     height: 104px;
-    opacity: 0.14;
+    opacity: calc(0.14 * var(--gk-ghost));
     pointer-events: none;
   }
   .panel-kicker {

services/site/src/pages/resume.astro

@@ -402,7 +402,7 @@ const isCore = (group: { core?: string[] }, item: string) => group.core?.some((c
     position: absolute;
     right: -30px;
     top: -30px;
-    opacity: 0.12;
+    opacity: calc(0.12 * var(--gk-ghost));
     pointer-events: none;
   }
   .panel-head {

services/site/src/pages/store/index.astro

@@ -328,7 +328,7 @@ const colorStrips = selling.flatMap((l) =>
     position: absolute;
     right: -40px;
     bottom: -60px;
-    opacity: 0.08;
+    opacity: calc(0.08 * var(--gk-ghost));
     pointer-events: none;
   }
   summary {