fix(gotham): remediate whitespace stranding, imageless hero void, mobile grid collapse

- Robust scroll-reveal: replace observer-only reveal (which stranded
  below-fold .reveal blocks at opacity:0 while they still occupied layout
  height, producing a huge dead band before the footer) with an instant
  in-view pass + scroll/resize/load listeners + safety-net full reveal.
  Applied identically to all 8 page templates. Never strands content;
  fixes the invisible hero text and the giant empty band.
- Imageless hero: cap to a compact 520px (380px mobile) letterboxed text
  plate with a token spotlight backdrop instead of a 75vh empty void.
  Height moved to a raw manifest CSS class (JIT-scan-independent).
- Mobile safety net: raw @media(max-width:640px) rules force the events,
  membership and feature-grid layouts to a single column so a dropped
  responsive Tailwind prefix can never strand a wide grid on a phone.
- Shorten reveal transition .7s -> .5s for screenshot-safe opacity.

check-safety: 32 checks 19 ok 13 skip -> OK; codeless build exit 0.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

manifest.yaml

@@ -217,9 +217,26 @@ css:
 
       /* reveal — MID-tier scroll reveal. No JS = visible; reduced-motion honoured. */
       .reveal { opacity: 1; }
-      .gotham-js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
+      .gotham-js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
       .gotham-js .reveal.is-visible { opacity: 1; transform: none; }
       @media (prefers-reduced-motion: reduce) {
         .gotham-js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
       }
     }
+
+    /* Raw CSS (outside @layer, JIT-scan-independent) — layout guarantees the
+     * host Tailwind scan may not reliably emit from theme .ninjatpl files.
+     * Imageless hero: a compact letterboxed text plate, never a 75vh void. */
+    .gotham-hero-plate { min-height: 520px; }
+    @media (max-width: 640px) { .gotham-hero-plate { min-height: 380px; } }
+
+    /* Mobile collapse safety net — guarantee persona/override grids fall to a
+     * single column at ~<=640px even if the responsive prefix classes are not
+     * compiled from the theme templates. Base is already 1-col in the markup;
+     * this hard-forces it so a dropped sm:/md:/lg: prefix can never strand a
+     * wide multi-column grid on a phone (no horizontal overflow). */
+    @media (max-width: 640px) {
+      [data-block="gotham:events_marquee"] ul > li { grid-template-columns: 1fr !important; }
+      [data-block="gotham:membership_tiers"] .grid,
+      [data-block-override="gotham:feature-grid"] .grid { grid-template-columns: 1fr !important; }
+    }

templates/gotham/article.ninjatpl

@@ -17,7 +17,7 @@
 	</footer>
 	{{ body_end_html|safe }}
 	<script>
-	(function(){if(window.__gothamMotion)return;window.__gothamMotion=1;var d=document;d.documentElement.classList.add('gotham-js');function run(){var els=d.querySelectorAll('.reveal');if(!('IntersectionObserver' in window)){els.forEach(function(e){e.classList.add('is-visible');});return;}var io=new IntersectionObserver(function(en){en.forEach(function(x){if(x.isIntersecting){x.target.classList.add('is-visible');io.unobserve(x.target);}});},{threshold:0.12,rootMargin:'0px 0px -8% 0px'});els.forEach(function(e){io.observe(e);});var rm=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches;if(!rm){d.querySelectorAll('[data-spotlight]').forEach(function(s){s.addEventListener('pointermove',function(ev){var r=s.getBoundingClientRect();s.style.setProperty('--sx',((ev.clientX-r.left)/r.width*100)+'%');s.style.setProperty('--sy',((ev.clientY-r.top)/r.height*100)+'%');});});}}if(d.readyState!='loading')run();else d.addEventListener('DOMContentLoaded',run);})();
+	(function(){if(window.__gothamMotion)return;window.__gothamMotion=1;var d=document,root=d.documentElement;root.classList.add('gotham-js');var reduce=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches;function pending(){return d.querySelectorAll('.reveal:not(.is-visible)');}function reveal(el){el.classList.add('is-visible');}function inView(){var h=window.innerHeight||root.clientHeight;pending().forEach(function(el){var r=el.getBoundingClientRect();if(r.top<h*1.05&&r.bottom>-h*0.25)reveal(el);});}function all(){pending().forEach(reveal);}function run(){if(reduce){all();return;}inView();window.addEventListener('scroll',inView,{passive:true});window.addEventListener('resize',inView,{passive:true});window.addEventListener('load',function(){inView();setTimeout(inView,120);},{once:true});setTimeout(inView,400);setTimeout(all,2600);d.querySelectorAll('[data-spotlight]').forEach(function(s){s.addEventListener('pointermove',function(ev){var r=s.getBoundingClientRect();s.style.setProperty('--sx',((ev.clientX-r.left)/r.width*100)+'%');s.style.setProperty('--sy',((ev.clientY-r.top)/r.height*100)+'%');});});}if(d.readyState!='loading')run();else d.addEventListener('DOMContentLoaded',run);})();
 	</script>
 </body>
 </html>

templates/gotham/auth.ninjatpl

@@ -15,7 +15,7 @@
 	</main>
 	{{ body_end_html|safe }}
 	<script>
-	(function(){if(window.__gothamMotion)return;window.__gothamMotion=1;var d=document;d.documentElement.classList.add('gotham-js');function run(){var els=d.querySelectorAll('.reveal');if(!('IntersectionObserver' in window)){els.forEach(function(e){e.classList.add('is-visible');});return;}var io=new IntersectionObserver(function(en){en.forEach(function(x){if(x.isIntersecting){x.target.classList.add('is-visible');io.unobserve(x.target);}});},{threshold:0.12,rootMargin:'0px 0px -8% 0px'});els.forEach(function(e){io.observe(e);});var rm=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches;if(!rm){d.querySelectorAll('[data-spotlight]').forEach(function(s){s.addEventListener('pointermove',function(ev){var r=s.getBoundingClientRect();s.style.setProperty('--sx',((ev.clientX-r.left)/r.width*100)+'%');s.style.setProperty('--sy',((ev.clientY-r.top)/r.height*100)+'%');});});}}if(d.readyState!='loading')run();else d.addEventListener('DOMContentLoaded',run);})();
+	(function(){if(window.__gothamMotion)return;window.__gothamMotion=1;var d=document,root=d.documentElement;root.classList.add('gotham-js');var reduce=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches;function pending(){return d.querySelectorAll('.reveal:not(.is-visible)');}function reveal(el){el.classList.add('is-visible');}function inView(){var h=window.innerHeight||root.clientHeight;pending().forEach(function(el){var r=el.getBoundingClientRect();if(r.top<h*1.05&&r.bottom>-h*0.25)reveal(el);});}function all(){pending().forEach(reveal);}function run(){if(reduce){all();return;}inView();window.addEventListener('scroll',inView,{passive:true});window.addEventListener('resize',inView,{passive:true});window.addEventListener('load',function(){inView();setTimeout(inView,120);},{once:true});setTimeout(inView,400);setTimeout(all,2600);d.querySelectorAll('[data-spotlight]').forEach(function(s){s.addEventListener('pointermove',function(ev){var r=s.getBoundingClientRect();s.style.setProperty('--sx',((ev.clientX-r.left)/r.width*100)+'%');s.style.setProperty('--sy',((ev.clientY-r.top)/r.height*100)+'%');});});}if(d.readyState!='loading')run();else d.addEventListener('DOMContentLoaded',run);})();
 	</script>
 </body>
 </html>

templates/gotham/blog-index.ninjatpl

@@ -20,7 +20,7 @@
 	{% if slots.footer %}<footer class="w-full mt-auto border-t border-[hsl(var(--primary)/0.35)]">{{ slots.footer|safe }}</footer>{% endif %}
 	{{ body_end_html|safe }}
 	<script>
-	(function(){if(window.__gothamMotion)return;window.__gothamMotion=1;var d=document;d.documentElement.classList.add('gotham-js');function run(){var els=d.querySelectorAll('.reveal');if(!('IntersectionObserver' in window)){els.forEach(function(e){e.classList.add('is-visible');});return;}var io=new IntersectionObserver(function(en){en.forEach(function(x){if(x.isIntersecting){x.target.classList.add('is-visible');io.unobserve(x.target);}});},{threshold:0.12,rootMargin:'0px 0px -8% 0px'});els.forEach(function(e){io.observe(e);});var rm=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches;if(!rm){d.querySelectorAll('[data-spotlight]').forEach(function(s){s.addEventListener('pointermove',function(ev){var r=s.getBoundingClientRect();s.style.setProperty('--sx',((ev.clientX-r.left)/r.width*100)+'%');s.style.setProperty('--sy',((ev.clientY-r.top)/r.height*100)+'%');});});}}if(d.readyState!='loading')run();else d.addEventListener('DOMContentLoaded',run);})();
+	(function(){if(window.__gothamMotion)return;window.__gothamMotion=1;var d=document,root=d.documentElement;root.classList.add('gotham-js');var reduce=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches;function pending(){return d.querySelectorAll('.reveal:not(.is-visible)');}function reveal(el){el.classList.add('is-visible');}function inView(){var h=window.innerHeight||root.clientHeight;pending().forEach(function(el){var r=el.getBoundingClientRect();if(r.top<h*1.05&&r.bottom>-h*0.25)reveal(el);});}function all(){pending().forEach(reveal);}function run(){if(reduce){all();return;}inView();window.addEventListener('scroll',inView,{passive:true});window.addEventListener('resize',inView,{passive:true});window.addEventListener('load',function(){inView();setTimeout(inView,120);},{once:true});setTimeout(inView,400);setTimeout(all,2600);d.querySelectorAll('[data-spotlight]').forEach(function(s){s.addEventListener('pointermove',function(ev){var r=s.getBoundingClientRect();s.style.setProperty('--sx',((ev.clientX-r.left)/r.width*100)+'%');s.style.setProperty('--sy',((ev.clientY-r.top)/r.height*100)+'%');});});}if(d.readyState!='loading')run();else d.addEventListener('DOMContentLoaded',run);})();
 	</script>
 </body>
 </html>

templates/gotham/centered.ninjatpl

@@ -10,7 +10,7 @@
 	<footer class="w-full mt-auto border-t border-[hsl(var(--primary)/0.35)]"><div class="max-w-2xl mx-auto px-4">{{ slots.footer|safe }}</div></footer>
 	{{ body_end_html|safe }}
 	<script>
-	(function(){if(window.__gothamMotion)return;window.__gothamMotion=1;var d=document;d.documentElement.classList.add('gotham-js');function run(){var els=d.querySelectorAll('.reveal');if(!('IntersectionObserver' in window)){els.forEach(function(e){e.classList.add('is-visible');});return;}var io=new IntersectionObserver(function(en){en.forEach(function(x){if(x.isIntersecting){x.target.classList.add('is-visible');io.unobserve(x.target);}});},{threshold:0.12,rootMargin:'0px 0px -8% 0px'});els.forEach(function(e){io.observe(e);});var rm=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches;if(!rm){d.querySelectorAll('[data-spotlight]').forEach(function(s){s.addEventListener('pointermove',function(ev){var r=s.getBoundingClientRect();s.style.setProperty('--sx',((ev.clientX-r.left)/r.width*100)+'%');s.style.setProperty('--sy',((ev.clientY-r.top)/r.height*100)+'%');});});}}if(d.readyState!='loading')run();else d.addEventListener('DOMContentLoaded',run);})();
+	(function(){if(window.__gothamMotion)return;window.__gothamMotion=1;var d=document,root=d.documentElement;root.classList.add('gotham-js');var reduce=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches;function pending(){return d.querySelectorAll('.reveal:not(.is-visible)');}function reveal(el){el.classList.add('is-visible');}function inView(){var h=window.innerHeight||root.clientHeight;pending().forEach(function(el){var r=el.getBoundingClientRect();if(r.top<h*1.05&&r.bottom>-h*0.25)reveal(el);});}function all(){pending().forEach(reveal);}function run(){if(reduce){all();return;}inView();window.addEventListener('scroll',inView,{passive:true});window.addEventListener('resize',inView,{passive:true});window.addEventListener('load',function(){inView();setTimeout(inView,120);},{once:true});setTimeout(inView,400);setTimeout(all,2600);d.querySelectorAll('[data-spotlight]').forEach(function(s){s.addEventListener('pointermove',function(ev){var r=s.getBoundingClientRect();s.style.setProperty('--sx',((ev.clientX-r.left)/r.width*100)+'%');s.style.setProperty('--sy',((ev.clientY-r.top)/r.height*100)+'%');});});}if(d.readyState!='loading')run();else d.addEventListener('DOMContentLoaded',run);})();
 	</script>
 </body>
 </html>

templates/gotham/contact.ninjatpl

@@ -19,7 +19,7 @@
 	{% if slots.footer %}<footer class="w-full mt-auto border-t border-[hsl(var(--primary)/0.35)]">{{ slots.footer|safe }}</footer>{% endif %}
 	{{ body_end_html|safe }}
 	<script>
-	(function(){if(window.__gothamMotion)return;window.__gothamMotion=1;var d=document;d.documentElement.classList.add('gotham-js');function run(){var els=d.querySelectorAll('.reveal');if(!('IntersectionObserver' in window)){els.forEach(function(e){e.classList.add('is-visible');});return;}var io=new IntersectionObserver(function(en){en.forEach(function(x){if(x.isIntersecting){x.target.classList.add('is-visible');io.unobserve(x.target);}});},{threshold:0.12,rootMargin:'0px 0px -8% 0px'});els.forEach(function(e){io.observe(e);});var rm=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches;if(!rm){d.querySelectorAll('[data-spotlight]').forEach(function(s){s.addEventListener('pointermove',function(ev){var r=s.getBoundingClientRect();s.style.setProperty('--sx',((ev.clientX-r.left)/r.width*100)+'%');s.style.setProperty('--sy',((ev.clientY-r.top)/r.height*100)+'%');});});}}if(d.readyState!='loading')run();else d.addEventListener('DOMContentLoaded',run);})();
+	(function(){if(window.__gothamMotion)return;window.__gothamMotion=1;var d=document,root=d.documentElement;root.classList.add('gotham-js');var reduce=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches;function pending(){return d.querySelectorAll('.reveal:not(.is-visible)');}function reveal(el){el.classList.add('is-visible');}function inView(){var h=window.innerHeight||root.clientHeight;pending().forEach(function(el){var r=el.getBoundingClientRect();if(r.top<h*1.05&&r.bottom>-h*0.25)reveal(el);});}function all(){pending().forEach(reveal);}function run(){if(reduce){all();return;}inView();window.addEventListener('scroll',inView,{passive:true});window.addEventListener('resize',inView,{passive:true});window.addEventListener('load',function(){inView();setTimeout(inView,120);},{once:true});setTimeout(inView,400);setTimeout(all,2600);d.querySelectorAll('[data-spotlight]').forEach(function(s){s.addEventListener('pointermove',function(ev){var r=s.getBoundingClientRect();s.style.setProperty('--sx',((ev.clientX-r.left)/r.width*100)+'%');s.style.setProperty('--sy',((ev.clientY-r.top)/r.height*100)+'%');});});}if(d.readyState!='loading')run();else d.addEventListener('DOMContentLoaded',run);})();
 	</script>
 </body>
 </html>

templates/gotham/default.ninjatpl

@@ -14,7 +14,7 @@
 	</footer>
 	{{ body_end_html|safe }}
 	<script>
-	(function(){if(window.__gothamMotion)return;window.__gothamMotion=1;var d=document;d.documentElement.classList.add('gotham-js');function run(){var els=d.querySelectorAll('.reveal');if(!('IntersectionObserver' in window)){els.forEach(function(e){e.classList.add('is-visible');});return;}var io=new IntersectionObserver(function(en){en.forEach(function(x){if(x.isIntersecting){x.target.classList.add('is-visible');io.unobserve(x.target);}});},{threshold:0.12,rootMargin:'0px 0px -8% 0px'});els.forEach(function(e){io.observe(e);});var rm=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches;if(!rm){d.querySelectorAll('[data-spotlight]').forEach(function(s){s.addEventListener('pointermove',function(ev){var r=s.getBoundingClientRect();s.style.setProperty('--sx',((ev.clientX-r.left)/r.width*100)+'%');s.style.setProperty('--sy',((ev.clientY-r.top)/r.height*100)+'%');});});}}if(d.readyState!='loading')run();else d.addEventListener('DOMContentLoaded',run);})();
+	(function(){if(window.__gothamMotion)return;window.__gothamMotion=1;var d=document,root=d.documentElement;root.classList.add('gotham-js');var reduce=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches;function pending(){return d.querySelectorAll('.reveal:not(.is-visible)');}function reveal(el){el.classList.add('is-visible');}function inView(){var h=window.innerHeight||root.clientHeight;pending().forEach(function(el){var r=el.getBoundingClientRect();if(r.top<h*1.05&&r.bottom>-h*0.25)reveal(el);});}function all(){pending().forEach(reveal);}function run(){if(reduce){all();return;}inView();window.addEventListener('scroll',inView,{passive:true});window.addEventListener('resize',inView,{passive:true});window.addEventListener('load',function(){inView();setTimeout(inView,120);},{once:true});setTimeout(inView,400);setTimeout(all,2600);d.querySelectorAll('[data-spotlight]').forEach(function(s){s.addEventListener('pointermove',function(ev){var r=s.getBoundingClientRect();s.style.setProperty('--sx',((ev.clientX-r.left)/r.width*100)+'%');s.style.setProperty('--sy',((ev.clientY-r.top)/r.height*100)+'%');});});}if(d.readyState!='loading')run();else d.addEventListener('DOMContentLoaded',run);})();
 	</script>
 </body>
 </html>

templates/gotham/full-width.ninjatpl

@@ -12,7 +12,7 @@
 	</footer>
 	{{ body_end_html|safe }}
 	<script>
-	(function(){if(window.__gothamMotion)return;window.__gothamMotion=1;var d=document;d.documentElement.classList.add('gotham-js');function run(){var els=d.querySelectorAll('.reveal');if(!('IntersectionObserver' in window)){els.forEach(function(e){e.classList.add('is-visible');});return;}var io=new IntersectionObserver(function(en){en.forEach(function(x){if(x.isIntersecting){x.target.classList.add('is-visible');io.unobserve(x.target);}});},{threshold:0.12,rootMargin:'0px 0px -8% 0px'});els.forEach(function(e){io.observe(e);});var rm=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches;if(!rm){d.querySelectorAll('[data-spotlight]').forEach(function(s){s.addEventListener('pointermove',function(ev){var r=s.getBoundingClientRect();s.style.setProperty('--sx',((ev.clientX-r.left)/r.width*100)+'%');s.style.setProperty('--sy',((ev.clientY-r.top)/r.height*100)+'%');});});}}if(d.readyState!='loading')run();else d.addEventListener('DOMContentLoaded',run);})();
+	(function(){if(window.__gothamMotion)return;window.__gothamMotion=1;var d=document,root=d.documentElement;root.classList.add('gotham-js');var reduce=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches;function pending(){return d.querySelectorAll('.reveal:not(.is-visible)');}function reveal(el){el.classList.add('is-visible');}function inView(){var h=window.innerHeight||root.clientHeight;pending().forEach(function(el){var r=el.getBoundingClientRect();if(r.top<h*1.05&&r.bottom>-h*0.25)reveal(el);});}function all(){pending().forEach(reveal);}function run(){if(reduce){all();return;}inView();window.addEventListener('scroll',inView,{passive:true});window.addEventListener('resize',inView,{passive:true});window.addEventListener('load',function(){inView();setTimeout(inView,120);},{once:true});setTimeout(inView,400);setTimeout(all,2600);d.querySelectorAll('[data-spotlight]').forEach(function(s){s.addEventListener('pointermove',function(ev){var r=s.getBoundingClientRect();s.style.setProperty('--sx',((ev.clientX-r.left)/r.width*100)+'%');s.style.setProperty('--sy',((ev.clientY-r.top)/r.height*100)+'%');});});}if(d.readyState!='loading')run();else d.addEventListener('DOMContentLoaded',run);})();
 	</script>
 </body>
 </html>

templates/gotham/landing.ninjatpl

@@ -13,7 +13,7 @@
 	</footer>
 	{{ body_end_html|safe }}
 	<script>
-	(function(){if(window.__gothamMotion)return;window.__gothamMotion=1;var d=document;d.documentElement.classList.add('gotham-js');function run(){var els=d.querySelectorAll('.reveal');if(!('IntersectionObserver' in window)){els.forEach(function(e){e.classList.add('is-visible');});return;}var io=new IntersectionObserver(function(en){en.forEach(function(x){if(x.isIntersecting){x.target.classList.add('is-visible');io.unobserve(x.target);}});},{threshold:0.12,rootMargin:'0px 0px -8% 0px'});els.forEach(function(e){io.observe(e);});var rm=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches;if(!rm){d.querySelectorAll('[data-spotlight]').forEach(function(s){s.addEventListener('pointermove',function(ev){var r=s.getBoundingClientRect();s.style.setProperty('--sx',((ev.clientX-r.left)/r.width*100)+'%');s.style.setProperty('--sy',((ev.clientY-r.top)/r.height*100)+'%');});});}}if(d.readyState!='loading')run();else d.addEventListener('DOMContentLoaded',run);})();
+	(function(){if(window.__gothamMotion)return;window.__gothamMotion=1;var d=document,root=d.documentElement;root.classList.add('gotham-js');var reduce=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches;function pending(){return d.querySelectorAll('.reveal:not(.is-visible)');}function reveal(el){el.classList.add('is-visible');}function inView(){var h=window.innerHeight||root.clientHeight;pending().forEach(function(el){var r=el.getBoundingClientRect();if(r.top<h*1.05&&r.bottom>-h*0.25)reveal(el);});}function all(){pending().forEach(reveal);}function run(){if(reduce){all();return;}inView();window.addEventListener('scroll',inView,{passive:true});window.addEventListener('resize',inView,{passive:true});window.addEventListener('load',function(){inView();setTimeout(inView,120);},{once:true});setTimeout(inView,400);setTimeout(all,2600);d.querySelectorAll('[data-spotlight]').forEach(function(s){s.addEventListener('pointermove',function(ev){var r=s.getBoundingClientRect();s.style.setProperty('--sx',((ev.clientX-r.left)/r.width*100)+'%');s.style.setProperty('--sy',((ev.clientY-r.top)/r.height*100)+'%');});});}if(d.readyState!='loading')run();else d.addEventListener('DOMContentLoaded',run);})();
 	</script>
 </body>
 </html>

templates/overrides/gotham/hero.ninjatpl

@@ -32,7 +32,7 @@
 {% else %}
 {% set align = "center" %}
 {% if variant == "left-aligned" %}{% set align = "left" %}{% endif %}
-<section data-block-override="gotham:hero" data-spotlight class="hero relative flex flex-col overflow-hidden bg-background text-foreground film-grain {% if minHeight == "screen" %}min-h-screen{% elif minHeight == "50vh" %}min-h-[50vh]{% elif minHeight == "auto" %}min-h-[400px]{% else %}min-h-[75vh]{% endif %} {% if verticalAlign == "top" %}justify-start pt-20{% elif verticalAlign == "bottom" %}justify-end pb-20{% else %}justify-center{% endif %}{% if class %} {{ class }}{% endif %}">
+<section data-block-override="gotham:hero" data-spotlight class="hero relative flex flex-col overflow-hidden bg-background text-foreground film-grain {% if not hasImage %}spotlight gotham-hero-plate{% elif minHeight == "screen" %}min-h-screen{% elif minHeight == "50vh" %}min-h-[50vh]{% elif minHeight == "auto" %}min-h-[400px]{% else %}min-h-[75vh]{% endif %} {% if verticalAlign == "top" %}justify-start pt-20{% elif verticalAlign == "bottom" %}justify-end pb-20{% else %}justify-center{% endif %}{% if class %} {{ class }}{% endif %}">
 {% if hasImage %}<div class="absolute inset-0 z-0">{% img backgroundImage alt=headlineText class="h-full w-full object-cover" layout="hero" %}{% if showOverlay %}<div class="absolute inset-0 {% if overlayColor == "light" %}bg-background/60{% elif overlayColor == "primary" %}bg-primary/50{% elif overlayOpacity <= 30 %}bg-black/30{% elif overlayOpacity <= 50 %}bg-black/50{% elif overlayOpacity <= 70 %}bg-black/70{% else %}bg-black/80{% endif %}"></div>{% endif %}<div class="absolute inset-0 letterbox-scrim" aria-hidden="true"></div></div>{% endif %}
 <div class="pointer-events-none absolute inset-x-0 top-0 z-[2] h-px bg-[hsl(var(--primary))]" aria-hidden="true"></div>
 <div class="pointer-events-none absolute inset-x-0 bottom-0 z-[2] h-px bg-[hsl(var(--primary))]" aria-hidden="true"></div>