slice 3: FeatureStoryHero — single cinematic hero card above bento

New component src/components/FeatureStoryHero.tsx renders a wide 21:9 hero
of the top-pinned featured article (same query shape as FeaturedBentoFromDb).
Wired into home-page/page.tsx above the bento. Teal accent (#5B7C8D) used
intentionally — Slice 4 will sweep the rest of the site to match.

Bento remains intact and may share its top article with the hero; that's
the magazine "lead story emphasized" treatment, not a bug.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/app/home-page/page.tsx

@@ -3,6 +3,7 @@ import type { Metadata } from "next";
 import Header from "@/components/Header";
 import Footer from "@/components/Footer";
 import FeaturedBentoFromDb from '@/components/FeaturedBentoFromDb';
+import FeatureStoryHero from '@/components/FeatureStoryHero';
 import FeaturedCarouselServer from '@/components/FeaturedCarouselServer';
 import TrendsSidebar from '@/components/TrendsSidebar';
 import LiveWireTicker from '@/components/LiveWireTicker';
@@ -156,6 +157,13 @@ export default function HomePage() {
         </Suspense>
       </div>
 
+      {/* Top feature story hero — single prominent card above the bento */}
+      <ScrollRevealSection className="section-enter section-enter-2">
+        <Suspense fallback={<BentoSkeleton />}>
+          <FeatureStoryHero />
+        </Suspense>
+      </ScrollRevealSection>
+
       {/* Featured articles bento */}
       <ScrollRevealSection className="section-enter section-enter-3">
         <Suspense fallback={<BentoSkeleton />}>