header: add two neon-green vertical rails at left/right edges of max-w-container, spanning top utility bar through browse bar (frames the whole header)

src/components/Header.tsx

@@ -243,7 +243,7 @@ export default function Header() {
   };
 
   return (
-    <>
+    <div className="bb-header-rails relative">
       {/* TOP BAR */}
       <div className="max-w-container mx-auto px-4">
         <div className="bg-[#1a2535] border-b border-[#2a3a50] h-8 flex items-center justify-between">
@@ -643,6 +643,6 @@ export default function Header() {
           </div>
         </div>
       </div>
-    </>
+    </div>
   );
 }

src/styles/tailwind.css

@@ -1545,6 +1545,30 @@ h1, h2, h3 {
   border-color: #00d4ff !important;
 }
 
+/* ─── Header neon rails ──────────────────────────────────────────────────
+   Two vertical neon-green lines pinned to the left + right edges of the
+   centered max-w-container (1200px), running from the very top of the
+   site down to the bottom of the browse bar. They line up exactly with
+   the horizontal neon-green border under the "search all content
+   sitewide" row, framing the whole header as a single bracket. */
+.bb-header-rails::before,
+.bb-header-rails::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: #00ff9f;
+  box-shadow: 0 0 6px rgba(0, 255, 159, 0.55);
+  pointer-events: none;
+  z-index: 5;
+}
+.bb-header-rails::before { left: max(16px, calc((100% - 1200px) / 2 + 16px)); }
+.bb-header-rails::after  { right: max(16px, calc((100% - 1200px) / 2 + 16px)); }
+@media (max-width: 768px) {
+  .bb-header-rails::before, .bb-header-rails::after { display: none; }
+}
+
 /* ─── Article body — NYT/WaPo-classy typography ──────────────────────────
    Apply this class alongside the existing `prose prose-invert` on the
    article body render in /news/[slug] and /articles/[slug]. */