diff --git a/manifest.yaml b/manifest.yaml
index ab4a4c8..6bb2203 100644
--- a/manifest.yaml
+++ b/manifest.yaml
@@ -222,6 +222,13 @@ css:
         font-size: 3.2em; line-height: 0.9; float: left; padding: 0.02em 0.14em 0 0; color: hsl(var(--primary));
       }
 
+      /* reel-onimg-* — fixed light ink for text set OVER hero imagery + its
+       * black scrims (mode-independent, like the scrim itself): light-mode
+       * tokens are near-black and vanish on the photo. */
+      .reel-onimg-strong { color: hsl(40 30% 97%); }
+      .reel-onimg-soft { color: hsl(40 22% 88% / 0.92); }
+      .reel-onimg-dim { color: hsl(40 20% 85% / 0.9); }
+
       /* letterbox-scrim — black cinematic bars over hero imagery (image overlay). */
       .letterbox-scrim {
         background-image: linear-gradient(to bottom,
diff --git a/templates/overrides/gotham/hero.ninjatpl b/templates/overrides/gotham/hero.ninjatpl
index 9c79743..8063af6 100644
--- a/templates/overrides/gotham/hero.ninjatpl
+++ b/templates/overrides/gotham/hero.ninjatpl
@@ -13,9 +13,9 @@
 {% set showOverlay = hasImage and overlayColor != "none" and overlayColor != "" %}
 {% macro herocontent(align, onImage) %}
 {% if eyebrowText %}<div class="mb-5 flex items-center gap-4 {% if align == "center" %}justify-center{% endif %}"><span class="reel-rule w-10"></span><span class="reel-caps text-xs text-primary">{{ eyebrowText }}</span><span class="reel-rule w-10"></span></div>{% endif %}
-{% if headlineText %}<h1 class="reel-caps text-4xl sm:text-5xl lg:text-6xl leading-tight" style="font-family:var(--font-heading, 'Antonio', 'Oswald', 'Bebas Neue', sans-serif);color:{% if onImage == "on" %}hsl(40 30% 97%){% else %}hsl(var(--foreground)){% endif %};">{{ headlineText }}</h1>{% endif %}
-{% if subText %}<h2 class="mt-5 text-xl sm:text-2xl italic max-w-2xl{% if align == "center" %} mx-auto{% endif %}" style="color:{% if onImage == "on" %}hsl(40 22% 88% / 0.92){% else %}hsl(var(--muted-foreground)){% endif %};font-family:var(--font-body, 'Cormorant Garamond', Georgia, serif);">{{ subText }}</h2>{% endif %}
-{% if descText %}<p class="mt-4 max-w-xl leading-relaxed{% if align == "center" %} mx-auto{% endif %}" style="color:{% if onImage == "on" %}hsl(40 20% 85% / 0.9){% else %}hsl(var(--muted-foreground)){% endif %};">{{ descText }}</p>{% endif %}
+{% if headlineText %}<h1 class="reel-caps text-4xl sm:text-5xl lg:text-6xl leading-tight {% if onImage == "on" %}reel-onimg-strong{% else %}text-foreground{% endif %}" style="font-family:var(--font-heading, 'Antonio', 'Oswald', 'Bebas Neue', sans-serif);">{{ headlineText }}</h1>{% endif %}
+{% if subText %}<h2 class="mt-5 text-xl sm:text-2xl italic max-w-2xl{% if align == "center" %} mx-auto{% endif %} {% if onImage == "on" %}reel-onimg-soft{% else %}text-muted-foreground{% endif %}" style="font-family:var(--font-body, 'Cormorant Garamond', Georgia, serif);">{{ subText }}</h2>{% endif %}
+{% if descText %}<p class="mt-4 max-w-xl leading-relaxed{% if align == "center" %} mx-auto{% endif %} {% if onImage == "on" %}reel-onimg-dim{% else %}text-muted-foreground{% endif %}">{{ descText }}</p>{% endif %}
 {% if pText or sText %}<div class="mt-8 flex flex-col sm:flex-row gap-4{% if align == "center" %} justify-center{% endif %}">
 {% if pText and pUrl %}<a href="{{ pUrl }}" class="reel-btn inline-flex items-center justify-center gap-2">{{ pText }}</a>{% endif %}
 {% if sText and sUrl %}<a href="{{ sUrl }}" class="reel-link inline-flex items-center justify-center">{{ sText }}</a>{% endif %}