From 2b45112c219c0b4b93cdab5d4dad1a6a56a538eb Mon Sep 17 00:00:00 2001
From: Ryan Salazar <ryaninwilton@gmail.com>
Date: Fri, 22 May 2026 19:35:22 +0000
Subject: [PATCH] feat: add top horizontal rail connecting header verticals

Adds a neon-green horizontal line across the very top of the site,
spanning from the left vertical rail to the right vertical rail, so
the header reads as a closed bracket instead of two floating lines.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/Header.tsx |  1 +
 src/styles/tailwind.css   | 16 +++++++++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 937f994..f8ee1fb 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -244,6 +244,7 @@ export default function Header() {
 
   return (
     <div className="bb-header-rails relative">
+      <div className="bb-header-top-rail" aria-hidden />
       {/* 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">
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 5a0c3d8..96a1013 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -1567,8 +1567,22 @@ h1, h2, h3 {
 }
 .bb-header-rails::before { left: max(12px, calc((100% - 1200px) / 2 + 12px)); }
 .bb-header-rails::after  { right: max(12px, calc((100% - 1200px) / 2 + 12px)); }
+/* Top horizontal connector — closes the bracket along the very top of
+   the site between the two vertical rails. */
+.bb-header-top-rail {
+  position: absolute;
+  top: 0;
+  left: max(12px, calc((100% - 1200px) / 2 + 12px));
+  right: max(12px, calc((100% - 1200px) / 2 + 12px));
+  height: 2px;
+  background: #00ff9f;
+  box-shadow: 0 0 8px rgba(0, 255, 159, 0.7);
+  pointer-events: none;
+  z-index: 61;
+}
 @media (max-width: 768px) {
-  .bb-header-rails::before, .bb-header-rails::after { display: none; }
+  .bb-header-rails::before, .bb-header-rails::after,
+  .bb-header-top-rail { display: none; }
 }
 
 /* ─── Article body — NYT/WaPo-classy typography ──────────────────────────