From 567a45079fa938416b6ded88160573203731ab12 Mon Sep 17 00:00:00 2001
From: Ryan Salazar <ryaninwilton@gmail.com>
Date: Wed, 20 May 2026 21:52:53 +0000
Subject: [PATCH] homepage: shrink Staff Editorial header to match The Latest
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Earlier this evening I bumped the Staff Editorial header to a
font-serif 2xl/3xl bold — too loud, fought with The Latest section
header below it on the same page.

Reverted to the same shape The Latest uses:
  <span class="section-label">Staff Editorial</span>
  <div class="flex-1 h-px bg-[#2a2a2a]" />
  <Link>All featured →</Link>

That's the global .section-label utility (font-body 13px,
font-weight:700, letter-spacing:0.08em, uppercase, color
accent-blue, with a 3px accent border on the left). Now the two
section headers on the homepage are visually consistent.
---
 src/components/FeaturedBentoFromDb.tsx | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/components/FeaturedBentoFromDb.tsx b/src/components/FeaturedBentoFromDb.tsx
index dbce0d3..6008122 100644
--- a/src/components/FeaturedBentoFromDb.tsx
+++ b/src/components/FeaturedBentoFromDb.tsx
@@ -60,16 +60,13 @@ export default async function FeaturedBento() {
 
   return (
     <section className="max-w-container mx-auto px-4 my-8" aria-label="Featured stories">
-      <div className="flex items-end gap-4 mb-4 flex-wrap pb-2 border-b-2 border-[#2a2a2a]">
-        <h2 className="font-serif text-2xl md:text-3xl font-bold tracking-tight text-white whitespace-nowrap leading-none">
-          Staff Editorial
-        </h2>
-        <span className="font-mono text-[10px] uppercase tracking-[0.2em] text-[#6b7280] pb-1">
-          Selected by our newsroom
-        </span>
-        <div className="flex-1" />
-        <Link href="/news?category=Featured" className="text-[11px] font-mono text-[var(--color-text-info,#60a5fa)] hover:underline whitespace-nowrap pb-1">
-          See all →
+      {/* Section header — same shape as "The Latest" on ArticleFeed:
+          section-label utility + flex-1 hr + accent-blue "all →" link. */}
+      <div className="flex items-center gap-3 mb-4 md:mb-5 flex-wrap">
+        <span className="section-label">Staff Editorial</span>
+        <div className="flex-1 h-px bg-[#2a2a2a]" />
+        <Link href="/news?category=Featured" className="text-[11px] font-mono text-[var(--color-text-info,#60a5fa)] hover:underline whitespace-nowrap">
+          All featured →
         </Link>
       </div>