homepage: bento 3-up + 300x600 inline; word-safe excerpt; bigger sponsor logos

- FeaturedBentoFromDb: row below the hero is now a 3-up rail on the left
  with the Blackmagic 300x600 on the right, aligned with the hero's right
  edge. SidebarAdStack skips that 300x600 so the article-feed sidebar
  starts with the 300x250 stack instead.
- cleanExcerpt: render-time word-snap for excerpts that were hard-cut at a
  byte count (Matrox 50-years showed "Since 1976, the co" mid-word). Used
  on the bento hero subhead and the article-feed cards.
- SponsorLogoStrip: now also pulls every tracked_companies.featured=true
  brand (Rode, TBC Consoles, Plura, Autocue, Autoscript, Filmcraft,
  Lectrosonics, Prompter People, SanDisk, Sennheiser), and logos go from
  h-10/h-12 max-w-140 → h-14/h-16 max-w-180 with thicker padding.

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

src/app/home-page/components/ArticleFeed.tsx

@@ -4,6 +4,7 @@ import AppImage from "@/components/ui/AppImage";
 import SidebarAdStack from "@/components/SidebarAdStack";
 import AdImage from "@/components/AdImage";
 import { rotateAll, type Ad } from "@/lib/ads";
+import { cleanExcerpt } from "@/lib/articles/excerpt";
 import { PersonIcon, ChevronLeftIcon, ChevronRightIcon, SearchIcon, CloseIcon } from "@/components/ui/Icons";
 import StarRating from "@/components/StarRating";
 import Link from "next/link";
@@ -632,7 +633,7 @@ export default function ArticleFeed() {
                         </Link>
                       </h3>
                       <p className="font-body text-[#777] text-sm leading-relaxed line-clamp-2 mb-2 md:mb-2.5 hidden sm:block">
-                        {article?.excerpt}
+                        {cleanExcerpt(article?.excerpt)}
                       </p>
                       <div className="mb-2">
                         <StarRating seed={article?.slug || article?.title || ""} publishedAt={article?.date} size="sm" />
@@ -807,10 +808,11 @@ export default function ArticleFeed() {
           )}
         </div>
 
-        {/* Sidebar — Blackmagic 300x600 fixed at top + every 300x250 banner stacked */}
+        {/* Sidebar — 300x250 banners stacked. The 300x600 is rendered up in
+            FeaturedBento alongside the 3-up rail, so it's skipped here. */}
         <aside aria-label="Advertisements">
           <div className="lg:sticky lg:top-24">
-            <SidebarAdStack />
+            <SidebarAdStack skipTop600 />
           </div>
         </aside>
       </div>

src/components/FeaturedBentoFromDb.tsx

@@ -2,6 +2,9 @@ import Link from "next/link";
 import { createClient } from "@supabase/supabase-js";
 import { rewriteLegacyImageUrl } from "@/lib/legacy-image";
 import StarRating from "@/components/StarRating";
+import AdImage from "@/components/AdImage";
+import { pickAds } from "@/lib/ads";
+import { cleanExcerpt } from "@/lib/articles/excerpt";
 
 export const dynamic = "force-dynamic";
 
@@ -53,7 +56,11 @@ export default async function FeaturedBento() {
   if (rows.length === 0) return null;
 
   const hero = rows[0];
-  const rail = rows.slice(1, 5);
+  // 3-up rail: room is reserved on the right of the same row for the
+  // Blackmagic 300x600 banner — see grid below. Dropped the 4th card so
+  // the banner can sit baseline-aligned with the hero's right edge.
+  const rail = rows.slice(1, 4);
+  const heroAd = pickAds("300x600", 1)[0] || null;
 
   function img(r: Row): string {
     return r.featured_image ? rewriteLegacyImageUrl(r.featured_image) : "/assets/images/article-placeholder.svg";
@@ -102,7 +109,7 @@ export default async function FeaturedBento() {
             </h3>
             {hero.excerpt && (
               <p className="font-serif text-base md:text-lg text-[#cbd5e1] mt-3 max-w-2xl line-clamp-2">
-                {hero.excerpt}
+                {cleanExcerpt(hero.excerpt)}
               </p>
             )}
             <div className="mt-4 flex flex-wrap items-center gap-3 text-[11px] font-mono text-[#9ca3af]">
@@ -114,34 +121,48 @@ export default async function FeaturedBento() {
         </div>
       </Link>
 
-      {/* 4-up rail BELOW the hero, vertical cards */}
-      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-4">
-        {rail.map((r) => (
-          <Link
-            key={r.wp_slug}
-            href={`/news/${r.wp_slug}`}
-            className="group block rounded border border-[#252525] bg-[#0b0f17] overflow-hidden hover:border-[var(--color-text-info,#60a5fa)] transition-colors"
-          >
-            <div className="aspect-[16/10] bg-[#111] relative">
-              <img
-                src={img(r)}
-                alt={r.featured_image_alt || r.title}
-                className="w-full h-full object-cover"
-              />
-            </div>
-            <div className="p-3">
-              <div className="text-[9px] font-mono uppercase tracking-wider text-[var(--color-text-info,#60a5fa)] mb-1">
-                {r.category || "News"}
+      {/* Row below the hero — 3-up rail (left) + Blackmagic 300x600 (right).
+          Right column is locked to 300px so its edge aligns with the right
+          edge of the 21:9 hero above; SidebarAdStack downstream skips this
+          banner so it doesn't double-render. */}
+      <div className="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_300px] gap-4 mt-4 items-start">
+        <div className="grid grid-cols-3 gap-3">
+          {rail.map((r) => (
+            <Link
+              key={r.wp_slug}
+              href={`/news/${r.wp_slug}`}
+              className="group block rounded border border-[#252525] bg-[#0b0f17] overflow-hidden hover:border-[var(--color-text-info,#60a5fa)] transition-colors"
+            >
+              <div className="aspect-[16/10] bg-[#111] relative">
+                <img
+                  src={img(r)}
+                  alt={r.featured_image_alt || r.title}
+                  className="w-full h-full object-cover"
+                />
               </div>
-              <h4 className="font-serif text-sm leading-tight text-[#e5e7eb] group-hover:text-[var(--color-text-info,#60a5fa)] line-clamp-3">
-                {r.title}
-              </h4>
-              <div className="mt-2">
-                <StarRating seed={r.wp_slug} publishedAt={r.wp_published_at} size="sm" showCount={false} />
+              <div className="p-3">
+                <div className="text-[9px] font-mono uppercase tracking-wider text-[var(--color-text-info,#60a5fa)] mb-1">
+                  {r.category || "News"}
+                </div>
+                <h4 className="font-serif text-sm leading-tight text-[#e5e7eb] group-hover:text-[var(--color-text-info,#60a5fa)] line-clamp-3">
+                  {r.title}
+                </h4>
+                <div className="mt-2">
+                  <StarRating seed={r.wp_slug} publishedAt={r.wp_published_at} size="sm" showCount={false} />
+                </div>
               </div>
+            </Link>
+          ))}
+        </div>
+        <aside className="hidden lg:block" aria-label="Premium sponsor">
+          {heroAd ? (
+            <AdImage ad={heroAd} priority />
+          ) : (
+            <div className="w-[300px] h-[600px] bg-[#0d1520] border border-[#1e3a5f] rounded flex items-center justify-center text-[#888] text-xs uppercase tracking-widest">
+              Premium Sponsorship
             </div>
-          </Link>
-        ))}
+          )}
+        </aside>
       </div>
     </section>
   );

src/components/SidebarAdStack.tsx

@@ -12,13 +12,18 @@ import { pickAds, rotateAll, type Ad } from "@/lib/ads";
 export default function SidebarAdStack({
   excludeSrcs = [],
   className = "",
+  // When true, omit the leading 300x600 banner. Used on the homepage where
+  // the 300x600 is rendered up in the FeaturedBento row instead, to keep
+  // the article feed sidebar starting with the 300x250 stack.
+  skipTop600 = false,
 }: {
   excludeSrcs?: string[];
   className?: string;
+  skipTop600?: boolean;
 }) {
   const top600 = useMemo<Ad | null>(
-    () => pickAds("300x600", 1)[0] ?? null,
-    [excludeSrcs.join("|")],
+    () => (skipTop600 ? null : pickAds("300x600", 1)[0] ?? null),
+    [excludeSrcs.join("|"), skipTop600],
   );
   const rotating = useMemo<Ad[]>(
     () => rotateAll("300x250", new Set(excludeSrcs)),

src/components/SponsorLogoStrip.tsx

@@ -15,23 +15,22 @@ async function fetchSponsors(): Promise<Sponsor[]> {
       .select("company_name_lower")
       .eq("property", "broadcastbeat");
     const names = Array.from(new Set((ads || []).map((r: any) => String(r.company_name_lower))));
-    if (names.length === 0) return [];
 
     const bb = createAdminClient();
-    const { data: dir } = await bb
-      .from("tracked_companies")
-      .select("slug, company_name, logo_url")
-      .eq("directory_visible", true)
-      .in("company_name", names.map((n) => n)); // case-sensitive — directory should match
-    // Some directory entries may have slightly different casing — fall back
-    // to a case-insensitive single-name lookup for anything missed.
     const bySlug = new Map<string, Sponsor>();
-    for (const d of (dir || []) as any[]) {
-      bySlug.set(d.slug, { slug: d.slug, name: d.company_name, logoUrl: d.logo_url || null });
-    }
-    const matchedNames = new Set((dir || []).map((d: any) => String(d.company_name).toLowerCase()));
-    const missing = names.filter((n) => !matchedNames.has(n));
-    if (missing.length > 0) {
+
+    // Layer 1 — currently active advertisers.
+    if (names.length > 0) {
+      const { data: dir } = await bb
+        .from("tracked_companies")
+        .select("slug, company_name, logo_url")
+        .eq("directory_visible", true)
+        .in("company_name", names.map((n) => n));
+      for (const d of (dir || []) as any[]) {
+        bySlug.set(d.slug, { slug: d.slug, name: d.company_name, logoUrl: d.logo_url || null });
+      }
+      const matchedNames = new Set((dir || []).map((d: any) => String(d.company_name).toLowerCase()));
+      const missing = names.filter((n) => !matchedNames.has(n));
       for (const n of missing) {
         const { data: hit } = await bb
           .from("tracked_companies")
@@ -44,7 +43,21 @@ async function fetchSponsors(): Promise<Sponsor[]> {
       }
     }
 
-    return Array.from(bySlug.values()).filter((s) => s.logoUrl); // only show those with a logo
+    // Layer 2 — pinned coverage partners (directory.featured=true). These
+    // surface here whether or not they have an active ad campaign.
+    const { data: pinned } = await bb
+      .from("tracked_companies")
+      .select("slug, company_name, logo_url")
+      .eq("directory_visible", true)
+      .eq("featured", true)
+      .limit(40);
+    for (const d of (pinned || []) as any[]) {
+      if (!bySlug.has(d.slug)) {
+        bySlug.set(d.slug, { slug: d.slug, name: d.company_name, logoUrl: d.logo_url || null });
+      }
+    }
+
+    return Array.from(bySlug.values()).filter((s) => s.logoUrl);
   } catch {
     return [];
   }
@@ -78,7 +91,7 @@ export default async function SponsorLogoStrip() {
             <img
               src={s.logoUrl || ""}
               alt={s.name}
-              className="h-10 md:h-12 w-auto object-contain max-w-[140px] bg-white p-1.5 rounded"
+              className="h-14 md:h-16 w-auto object-contain max-w-[180px] bg-white p-2 rounded"
               loading="lazy"
             />
           </Link>

src/lib/articles/excerpt.ts

@@ -0,0 +1,21 @@
+// Render-time excerpt sanitizer. Some imported / AI-generated excerpts were
+// hard-truncated at a fixed byte count, leaving sentences clipped mid-word
+// (e.g. "Since 1976, the co"). Until the upstream excerpt generator gets the
+// same treatment, this helper makes any clipped excerpt visually clean:
+// strip trailing junk, snap to the last complete word, and append an
+// ellipsis only when the excerpt isn't already a complete sentence.
+
+const SENTENCE_END = /[.!?…]['")\]]?$/;
+const TRAILING_JUNK = /[\s,;:—–\-—_]+$/;
+
+export function cleanExcerpt(raw: string | null | undefined): string {
+  if (!raw) return "";
+  let s = raw.replace(/ /g, " ").trim();
+  if (!s) return "";
+  if (SENTENCE_END.test(s)) return s;
+  // Drop the trailing partial token.
+  const lastSpace = s.lastIndexOf(" ");
+  if (lastSpace > 20) s = s.slice(0, lastSpace);
+  s = s.replace(TRAILING_JUNK, "");
+  return s + "…";
+}