Take the article page color from the section banner SVG so the body cannot drift from the hero on current or future posts.

Co-authored-by: Cursor <cursoragent@cursor.com>

tests/unit/blogSectionBackground.test.ts

@@ -0,0 +1,64 @@
+import { describe, expect, it } from "vitest";
+import { getAllBlogPosts } from "../../lib/content";
+import {
+  extractSectionBannerFill,
+  resolveBlogPageBackgroundColor,
+} from "../../lib/blogSectionBackground";
+
+describe("extractSectionBannerFill", () => {
+  it("reads the first 1920×672 rect fill and ignores a later clip-path rect", () => {
+    const svg = `<svg>
+<rect width="1920" height="672" fill="#ECC98E"/>
+<defs>
+<clipPath id="clip">
+<rect width="1920" height="672" fill="white"/>
+</clipPath>
+</defs>
+</svg>`;
+
+    expect(extractSectionBannerFill(svg)).toBe("#ECC98E");
+  });
+
+  it("returns null when there is no section rect", () => {
+    expect(extractSectionBannerFill("<svg></svg>")).toBeNull();
+  });
+});
+
+describe("resolveBlogPageBackgroundColor", () => {
+  it("uses the section SVG fill when the banner file exists", () => {
+    expect(
+      resolveBlogPageBackgroundColor({
+        slug: "making-decisions-without-hierarchy",
+        frontmatterColor: "#F3F3F1",
+      }),
+    ).toBe("#ECC98E");
+  });
+
+  it("falls back to frontmatter when there is no section SVG", () => {
+    expect(
+      resolveBlogPageBackgroundColor({
+        slug: "not-a-real-article",
+        frontmatterColor: "#F4F3F1",
+      }),
+    ).toBe("#F4F3F1");
+  });
+});
+
+describe("parsed blog posts", () => {
+  it("uses each article’s section banner fill as the page background", () => {
+    const posts = getAllBlogPosts();
+    expect(posts.length).toBeGreaterThan(0);
+
+    for (const post of posts) {
+      const fromBanner = resolveBlogPageBackgroundColor({
+        slug: post.slug,
+        bannerFileName: post.frontmatter.banner?.horizontal,
+        frontmatterColor: "#000000",
+      });
+      if (fromBanner === "#000000") {
+        continue;
+      }
+      expect(post.frontmatter.background?.color).toBe(fromBanner);
+    }
+  });
+});