feat(avbeat): typography phase-1 slice + drop homepage Topics chip row

Typography (approved Phase 1 slice only — utility classes + other reclasses deferred):
- src/styles/tailwind.css body rule: re-add smoothing now that the surface palette is locked in — -webkit-font-smoothing antialiased, -moz-osx-font-smoothing grayscale, text-rendering optimizeLegibility, font-feature-settings 'kern','liga', global letter-spacing -0.005em.
- src/components/FeaturedBentoFromDb.tsx:115 cinematic hero headline: text-2xl md:text-4xl lg:text-5xl leading-tight → text-[40px] md:text-[48px] lg:text-[56px] leading-[1.05] tracking-[-0.02em] font-bold. Confident editorial display per the avinteractive reference.
- src/app/news/[slug]/NewsArticleDetailClient.tsx:309 and src/app/articles/[slug]/ArticleDetailClient.tsx:255 article H1: text-[#f0f0f0] → text-[#0F172A]. Fixes the leftover white-on-white readability bug on article pages.

UI:
- src/app/home-page/components/ArticleFeed.tsx: removed the 'Topics:' chip row from Industry News per current design direction; all stories now show without per-topic filter.

src/app/articles/[slug]/ArticleDetailClient.tsx

@@ -252,7 +252,7 @@ export default function ArticleDetailClient({ article, relatedArticles, relatedF
                 <span className="text-xs text-[#555]">·</span>
                 <span className="text-xs text-[#777]">{article.readTime}</span>
               </div>
-              <h1 className="font-heading text-3xl md:text-4xl font-bold mb-4 leading-tight text-[#f0f0f0]">
+              <h1 className="font-heading text-3xl md:text-4xl font-bold mb-4 leading-tight text-[#0F172A]">
                 {article.title}
               </h1>
               <div className="mb-4">

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

@@ -416,29 +416,8 @@ export default function ArticleFeed() {
               </button>
             </div>
 
-            {/* Row: topic chips */}
-            <div className="flex items-center gap-2 flex-wrap">
-              <span className="text-[#555] text-[10px] font-body uppercase tracking-wider shrink-0">Topics:</span>
-              <div className="flex gap-1.5 flex-wrap">
-                {ALL_CATEGORIES.map((cat) => {
-                  const isActive = activeCategory === cat;
-                  return (
-                    <button
-                      key={cat}
-                      type="button"
-                      onClick={() => { setActiveCategory(cat); setPage(1); }}
-                      aria-pressed={isActive}
-                      className={`px-3 py-1.5 rounded-sm font-body text-[11px] font-semibold uppercase tracking-wide transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8] ${
-                        isActive
-                          ? "bg-[#1D4ED8]/20 text-[#1D4ED8] border border-[#1D4ED8]/50"
-                          : "bg-[#111] text-[#888] border border-[#DCE6F2] hover:text-[#ccc] hover:border-[#3a3a3a]"
-                      }`}>
-                      {cat}
-                    </button>
-                  );
-                })}
-              </div>
-            </div>
+            {/* Topic chip row removed per current design direction —
+                Industry News shows all stories with no per-topic filter. */}
 
             {/* Advanced filters panel */}
             {showAdvanced && (

src/app/news/[slug]/NewsArticleDetailClient.tsx

@@ -306,7 +306,7 @@ export default function NewsArticleDetailClient({
                 <span className="text-xs text-[#777]">{article.readTime}</span>
               </div>
 
-              <h1 className="font-heading text-3xl md:text-4xl font-bold mb-4 leading-tight text-[#f0f0f0]">
+              <h1 className="font-heading text-3xl md:text-4xl font-bold mb-4 leading-tight text-[#0F172A]">
                 {article.title}
               </h1>
               <div className="mb-4">

src/components/FeaturedBentoFromDb.tsx

@@ -112,7 +112,7 @@ export default async function FeaturedBento() {
                     {hero.category}
                   </div>
                 )}
-                <h3 className="font-serif text-2xl md:text-4xl lg:text-5xl text-white leading-tight max-w-3xl group-hover:text-[var(--color-text-info,#60a5fa)] transition-colors">
+                <h3 className="font-serif text-[40px] md:text-[48px] lg:text-[56px] text-white leading-[1.05] tracking-[-0.02em] font-bold max-w-3xl group-hover:text-[var(--color-text-info,#60a5fa)] transition-colors">
                   {hero.title}
                 </h3>
                 {hero.excerpt && (

src/styles/tailwind.css

@@ -56,10 +56,11 @@ body {
   font-family: var(--font-body);
   background-color: var(--color-bg);
   color: var(--color-foreground);
-  /* Smoothing intentionally NOT overridden — `antialiased`/`grayscale` was
-     correct for the old dark theme but renders thinner/harsher on the new
-     light theme. Default OS smoothing (subpixel on Windows/older macOS,
-     `auto` elsewhere) gives Inter + Lora their intended weight. */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  font-feature-settings: 'kern', 'liga';
+  letter-spacing: -0.005em;
 }
 
 /* =====================