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>

public/assets/images/article-placeholder.svg

@@ -1,20 +1,42 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" preserveAspectRatio="xMidYMid slice">
   <defs>
-    <linearGradient id="g" x1="0" y1="0" x2="0" y2="1">
+    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
       <stop offset="0%" stop-color="#0F172A"/>
       <stop offset="50%" stop-color="#1E3A8A"/>
       <stop offset="100%" stop-color="#0F172A"/>
     </linearGradient>
-    <radialGradient id="r" cx="50%" cy="50%" r="60%">
+    <radialGradient id="glow" cx="50%" cy="50%" r="60%">
       <stop offset="0%" stop-color="#1D4ED8" stop-opacity="0.18"/>
       <stop offset="100%" stop-color="#1D4ED8" stop-opacity="0"/>
     </radialGradient>
+    <linearGradient id="tile" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#2563EB"/>
+      <stop offset="100%" stop-color="#1E3A8A"/>
+    </linearGradient>
   </defs>
-  <rect width="1200" height="630" fill="url(#g)"/>
-  <rect width="1200" height="630" fill="url(#r)"/>
-  <g transform="translate(600 315)" text-anchor="middle" font-family="system-ui, sans-serif">
-    <text y="0" font-size="64" font-weight="800" fill="#FFFFFF" letter-spacing="0.04em">AV</text>
-    <text y="64" font-size="64" font-weight="800" fill="#38BDF8" letter-spacing="0.04em">BEAT</text>
-    <text y="120" font-size="16" font-weight="500" fill="#94A3B8" letter-spacing="0.25em">PRO AV · DISPLAY · LIVE PRODUCTION</text>
+
+  <!-- Background gradient -->
+  <rect width="1200" height="630" fill="url(#bg)"/>
+  <rect width="1200" height="630" fill="url(#glow)"/>
+
+  <!-- Brand-mark tile + A monogram, centered. Same geometry as AnimatedLogo. -->
+  <g transform="translate(420 175)">
+    <!-- Rounded tile (280x280, rx 62) with the brand gradient -->
+    <rect x="0" y="0" width="280" height="280" rx="62" ry="62" fill="url(#tile)"/>
+    <!-- Faint inner ring so the tile reads on dark bg -->
+    <rect x="3" y="3" width="274" height="274" rx="59" ry="59" fill="none" stroke="rgba(255,255,255,0.20)" stroke-width="3"/>
+    <!-- A — two strokes: left+right legs and crossbar. Same path as AnimatedLogo at 4.4x scale. -->
+    <path d="M 62 220 L 140 60 L 218 220"
+          fill="none" stroke="#FFFFFF" stroke-width="22"
+          stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M 92 158 L 188 158"
+          fill="none" stroke="#FFFFFF" stroke-width="18"
+          stroke-linecap="round"/>
+  </g>
+
+  <!-- Wordmark + tagline -->
+  <g transform="translate(600 525)" text-anchor="middle" font-family="system-ui, -apple-system, 'Segoe UI', sans-serif">
+    <text y="0" font-size="56" font-weight="700" fill="#FFFFFF" letter-spacing="-0.012em">AV BEAT</text>
+    <text y="34" font-size="14" font-weight="500" fill="#CBD5E1" letter-spacing="0.22em">INSIDE THE FUTURE OF PRO AV</text>
   </g>
 </svg>