header pass

src/components/layout/InterestHero.astro

@@ -44,7 +44,7 @@ const {
 <section class="relative min-h-[60vh] overflow-hidden 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 transitionName="sky" />
+  <AnimatedBackground client:idle className="vt-sky" />
 
   <div class="container-prose relative z-10 flex flex-col items-start gap-6 py-16">
     <Reveal>

src/components/layout/SectionHeader.astro

@@ -5,8 +5,12 @@
  * Reusable section title block: a mono "kicker" (e.g. "02"), an h2 heading, and
  * an optional supporting line. Keeps section openers visually consistent.
  *
- * The kicker is rendered as a monospace number/label per the spec's "Accent/
- * quotes: a monospace or display font sparingly for section numbers" guidance.
+ * `tone` controls contrast:
+ *   - "default" for headers on lighter CONTENT surfaces (uses --color-text /
+ *     --color-text-muted, which are tuned for the page body).
+ *   - "hero" for headers that sit on a dark hero / starfield background: forces
+ *     near-white title + bright subtitle + a glowing kicker so the text stands
+ *     out against the deep Milky Way field.
  */
 import Icon from "@components/Icon.astro";
 
@@ -20,6 +24,8 @@ interface Props {
   icon?: string;
   class?: string;
   align?: "left" | "center";
+  /** "hero" = bright text for dark backgrounds; "default" = body content. */
+  tone?: "default" | "hero";
 }
 
 const {
@@ -29,7 +35,12 @@ const {
   icon,
   class: className = "",
   align = "left",
+  tone = "default",
 } = Astro.props;
+
+const isHero = tone === "hero";
+const titleColor = isHero ? "var(--color-cream)" : undefined;
+const subtitleColor = isHero ? "var(--color-cream)" : "var(--color-text-muted)";
 ---
 
 <div
@@ -43,19 +54,23 @@ const {
     kicker && (
       <span
         class="inline-flex items-center gap-2 font-mono text-xs uppercase tracking-[0.22em]"
-        style="color: var(--color-accent);"
+        style={
+          isHero
+            ? "color: var(--color-accent); text-shadow: 0 0 14px color-mix(in srgb, var(--color-accent) 45%, transparent);"
+            : "color: var(--color-accent);"
+        }
       >
         {icon && <Icon name={icon} class="h-4 w-4" />}
         {kicker}
       </span>
     )
   }
-  <h2>{title}</h2>
+  <h2 style={titleColor ? `color: ${titleColor};` : undefined}>{title}</h2>
   {
     subtitle && (
       <p
         class="max-w-2xl text-base sm:text-lg"
-        style="color: var(--color-text-muted);"
+        style={`color: ${subtitleColor};${isHero ? " opacity: 0.92;" : ""}`}
       >
         {subtitle}
       </p>