fix(article-detail): sidebar column width + placeholder using new mark

Two pointed bugs on the article detail page:

1) Width alignment. The right-rail Related Articles and Related Forum
   Posts boxes were free-stretching to the lg:col-span-4 width while the
   SidebarAdStack below them rendered ads at their natural 300px (items-
   end, right-aligned). The visual result: boxes overhung the ad column
   on both edges. Wrapped each sidebar in an inner `w-full lg:w-[300px]
   lg:ml-auto` div so every block (ads + boxes + newsletter) shares one
   300px column on lg+ and stays full-width on mobile. Applied to both
   article templates (/articles/[slug] and /news/[slug]).

2) Placeholder rendered the old "AV BEAT" wordmark when an article had no
   featured image. Rebuilt article-placeholder.svg around the new brand
   mark — the A-monogram tile with the blue gradient (#2563EB→#1E3A8A)
   that matches AnimatedLogo + the rest of the brand-gradient system.
   Same 1200×630 dimensions so OG/feed embeds aren't affected.

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

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

@@ -393,8 +393,11 @@ export default function ArticleDetailClient({ article, relatedArticles, relatedF
             <ArticleComments articleSlug={article.slug} />
           </div>
 
-          {/* Sidebar */}
-          <aside className="lg:col-span-4 space-y-6">
+          {/* Sidebar — every right-rail block (ads, Related Articles, Related
+              Forum Posts) shares the same 300px column width on lg+ so left +
+              right edges align cleanly with the ad inventory below. */}
+          <aside className="lg:col-span-4">
+            <div className="space-y-6 w-full lg:w-[300px] lg:ml-auto">
             {/* Related Articles */}
             {/* DO NOT OVERRIDE — related articles sidebar */}
             <div className="bg-[#111] border border-[#222] p-5">
@@ -470,6 +473,7 @@ export default function ArticleDetailClient({ article, relatedArticles, relatedF
 
             {/* Sidebar ad stack — 300x600 + 300x250 rotating */}
             <SidebarAdStack />
+            </div>
           </aside>
         </div>
       </article>

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

@@ -528,8 +528,13 @@ export default function NewsArticleDetailClient({
             <ArticleComments articleSlug={article.slug} />
           </div>
 
-          {/* Sidebar */}
-          <aside className="lg:col-span-4 space-y-6">
+          {/* Sidebar — every right-rail block (ads, Related Articles, Related
+              Forum Posts, Newsletter) shares the same 300px column width so
+              their left + right edges align cleanly. Ads are 300×600 / 300×250
+              by definition; the boxes below now collapse to 300px on lg+ to
+              match. On mobile the wrapper is full-width. */}
+          <aside className="lg:col-span-4">
+            <div className="space-y-6 w-full lg:w-[300px] lg:ml-auto">
             {/* Blackmagic 300x600 fixed at top + every 300x250 banner stacked */}
             <SidebarAdStack />
 
@@ -619,6 +624,7 @@ export default function NewsArticleDetailClient({
             </div>
 
             {/* Ad placeholder */}
+            </div>
           </aside>
         </div>
       </article>