Fix search overlay CSS trap and blog filter navigation race

SearchOverlay was rendered as a <header> descendant, so the header's
conditional backdrop-blur-md (once scrolled) made it the containing
block for the overlay's fixed positioning, clipping the opaque
background to the header's height and letting page content show
through underneath. Now rendered as a header sibling, same pattern
already used for NewsletterModal.

Blog category chips are now a client component gating navigation
behind useTransition, disabling the chips while a navigation is
pending so rapid clicks can't fire overlapping RSC navigations that
commit out of order and briefly show an empty result.

app/blog/page.tsx

@@ -4,6 +4,7 @@ import Image from "next/image";
 import { Reveal, RevealGroup, RevealItem } from "../components/Reveal";
 import { Newsletter } from "../components/Newsletter";
 import { Footer } from "../components/Footer";
+import { BlogCategoryFilter } from "../components/BlogCategoryFilter";
 import { getBlogPosts, getBlogFilterEnabled } from "../lib/payload";
 import { formatDate } from "../lib/format";
 
@@ -31,11 +32,6 @@ function distinctCategories(posts: { categories: string[] }[]): string[] {
   return Array.from(seen);
 }
 
-function buildCategoryHref(active: string[], category: string): string {
-  const next = active.includes(category) ? active.filter((c) => c !== category) : [...active, category];
-  return next.length > 0 ? `/blog?categories=${next.map(encodeURIComponent).join(",")}` : "/blog";
-}
-
 export default async function BlogOverviewPage({
   searchParams,
 }: {
@@ -93,29 +89,7 @@ export default async function BlogOverviewPage({
                 under the description keeps them in view immediately, on
                 every width, no scrolling past the photo needed. */}
             {allCategories.length > 1 && (
-              <div className="flex flex-wrap gap-2 w-full">
-                {allCategories.map((category) => {
-                  const active = activeCategories.includes(category);
-                  return (
-                    <Link
-                      key={category}
-                      href={buildCategoryHref(activeCategories, category)}
-                      // bg-bg-muted, not bg-bg-base — border-border (#e5e0d8)
-                      // on bg-base (#f8f5f1) is a ~2% lightness difference,
-                      // nearly invisible as a pill outline; a filled muted
-                      // background makes the chip read as a discrete control
-                      // regardless of the border's own low contrast.
-                      className={`inline-flex items-center px-3 py-1.5 rounded-full text-body-sm font-semibold whitespace-nowrap border transition-colors ${
-                        active
-                          ? "bg-brand border-brand text-text-primary"
-                          : "bg-bg-muted border-border text-text-muted hover:border-brand hover:text-brand"
-                      }`}
-                    >
-                      {category}
-                    </Link>
-                  );
-                })}
-              </div>
+              <BlogCategoryFilter allCategories={allCategories} activeCategories={activeCategories} />
             )}
           </div>
           <div className="relative w-full sm:absolute sm:inset-y-0 sm:right-0 sm:w-[68%] h-56 sm:h-full">