Content update and Professional details

src/components/layout/InterestHero.astro

@@ -2,16 +2,14 @@
 /**
  * InterestHero.astro
  * ---------------------------------------------------------------------------
- * Shared header for every interest sub-page, implementing the spec's
- * per-interest template (Header: title + tagline; Overview: narrative). Uses the
- * warm "interest" surface tone via InterestLayout.
+ * Shared header for every interest sub-page. Compact hero on the animated
+ * Milky Way field: a back-to-hub breadcrumb, a small icon mark, the title, and
+ * the italic tagline.
  *
- * The decorative icon and the tagline (in mono, as a pull quote) give each page
- * a consistent rhythm while the page supplies its own title + overview copy.
- *
- * An optional `image` prop renders a wide celestial-framed banner behind / above
- * the heading so each interest page leads with a vibe-matched photo. A faint
- * starfield + alchemical accent reinforces the esoteric mood.
+ * Tuned for the dark starfield: text uses bright cream 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.
  */
 import Icon from '@components/Icon.astro';
 import Reveal from '@components/motion/Reveal.astro';
@@ -46,20 +44,57 @@ const {
        Carries the per-page morph name (one .vt-sky per page snapshot). -->
   <AnimatedBackground client:idle className="vt-sky" />
 
-  <div class="container-prose relative z-10 flex flex-col items-start gap-6 py-8">
-    <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-text-subtle);"
-      >
-        <Icon name="arrow-left" class="h-4 w-4" />
-        {eyebrow}
-      </a>
-    </Reveal>
+  {/* Two-column layout: text on the left, image on the right. Putting the image
+      BESIDE the text (instead of stacked above it) means the hero height is
+      driven by the text column and stays consistent across interest pages
+      regardless of image presence. On small screens it stacks (image below). */}
+  <div class="container-prose relative z-10 grid items-center gap-6 py-6 sm:grid-cols-[1.4fr_1fr]">
+    {/* --- Left: text column --- */}
+    <div class="flex flex-col items-start gap-4">
+      <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;"
+        >
+          <Icon name="arrow-left" class="h-4 w-4" />
+          {eyebrow}
+        </a>
+      </Reveal>
 
+      <Reveal delay={60}>
+        <span
+          class="inline-flex h-12 w-12 items-center justify-center rounded-xl"
+          style="background: color-mix(in srgb, var(--color-accent) 18%, transparent); color: var(--color-accent);"
+          aria-hidden="true"
+        >
+          <Icon name={icon} class="h-6 w-6" />
+        </span>
+      </Reveal>
+
+      <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;"
+        >
+          {title}
+        </h2>
+      </Reveal>
+
+      <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;"
+        >
+          {tagline}
+        </p>
+      </Reveal>
+    </div>
+
+    {/* --- Right: image column (only when an image is provided). A fixed
+        aspect keeps every interest hero the same height. --- */}
     {image && (
-      <Reveal delay={40} class="w-full">
+      <Reveal delay={80} class="w-full">
         <figure
           class="relative w-full overflow-hidden rounded-2xl border"
           style="border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);"
@@ -69,7 +104,7 @@ const {
             alt={imageAlt}
             loading="lazy"
             decoding="async"
-            class="aspect-[21/9] w-full object-cover"
+            class="aspect-[4/3] w-full object-cover"
           />
           <StarBurst
             class="pointer-events-none absolute left-3 top-3 h-5 w-5 drop-shadow-[0_0_6px_color-mix(in_srgb,var(--color-accent)_60%,transparent)]"
@@ -78,28 +113,5 @@ const {
         </figure>
       </Reveal>
     )}
-
-    <Reveal delay={60}>
-      <span
-        class="inline-flex h-16 w-16 items-center justify-center rounded-2xl"
-        style="background: color-mix(in srgb, var(--color-accent) 18%, transparent); color: var(--color-accent);"
-        aria-hidden="true"
-      >
-        <Icon name={icon} class="h-8 w-8" />
-      </span>
-    </Reveal>
-
-    <Reveal delay={120}>
-      <h1 class="text-balance">{title}</h1>
-    </Reveal>
-
-    <Reveal delay={160}>
-      <p
-        class="max-w-2xl border-l-2 pl-5 font-sans text-lg italic sm:text-xl"
-        style="border-color: var(--color-accent); color: var(--color-text);"
-      >
-        {tagline}
-      </p>
-    </Reveal>
   </div>
 </section>