fix(nav): center About/Blog using 3-col grid layout

Replace flex+ml-auto with grid-cols-[1fr_auto_1fr]:
- Col 1 (1fr): logo, left-aligned
- Col 2 (auto): nav links, truly centered regardless of button width
- Col 3 (1fr): auth button, flex justify-end

Works on mobile too: About sits perfectly centered between logo and button.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/marketing/MarketingNav.tsx

@@ -17,9 +17,10 @@ export function MarketingNav() {
 
   return (
     <header className="sticky top-0 z-50 bg-white/95 backdrop-blur-md border-b border-rose-100 shadow-sm">
-      <div className="max-w-5xl mx-auto px-5 py-3.5 flex items-center gap-3">
-        {/* Logo */}
-        <Link href="/" className="flex items-center gap-2 group shrink-0">
+      {/* 3-col grid: logo left · nav truly centered · auth right */}
+      <div className="max-w-5xl mx-auto px-5 py-3.5 grid grid-cols-[1fr_auto_1fr] items-center">
+        {/* Left: Logo */}
+        <Link href="/" className="flex items-center gap-2 group">
           <span className="text-2xl transition-transform duration-200 group-hover:scale-110">🌸</span>
           <span
             className="text-xl font-bold text-gray-900 tracking-tight"
@@ -29,8 +30,8 @@ export function MarketingNav() {
           </span>
         </Link>
 
-        {/* Center nav — grows to fill space, links pushed right via ml-auto */}
-        <nav className="flex items-center gap-0.5 ml-auto mr-2">
+        {/* Center: nav links */}
+        <nav className="flex items-center gap-0.5">
           {/* About — always visible, including mobile */}
           <Link href="/about" className={navLinkClass(pathname, "/about")}>
             About
@@ -44,7 +45,10 @@ export function MarketingNav() {
           </Link>
         </nav>
 
-        <NavAuthButton />
+        {/* Right: auth button */}
+        <div className="flex justify-end">
+          <NavAuthButton />
+        </div>
       </div>
     </header>
   );