fix: CSS MIME type mapping in server.mjs + rename blog hero header to section

- Add explicit mimeTypes map and setHeaders callback to the /_assets express.static handler to guarantee correct Content-Type for .css, .js, .mjs, .json, .svg, .png, .jpg, .webp, and .woff2 files
- Rename the blog post hero <header> to <section> to eliminate duplicate <header> elements and fix Playwright strict-mode selector failures

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

server.mjs

@@ -32,6 +32,19 @@ app.use(compression({
   },
 }));
 
+// MIME type map for explicit Content-Type headers
+const mimeTypes = {
+  '.css': 'text/css',
+  '.js': 'application/javascript',
+  '.mjs': 'application/javascript',
+  '.json': 'application/json',
+  '.svg': 'image/svg+xml',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.webp': 'image/webp',
+  '.woff2': 'font/woff2',
+};
+
 // Serve static assets with long-term caching
 // Hashed assets (_assets/) get 1-year immutable cache
 // Non-hashed assets get 1-hour cache with revalidation
@@ -39,6 +52,12 @@ app.use('/_assets', express.static(join(__dirname, 'dist', 'client', '_assets'),
   maxAge: '1y',
   immutable: true,
   etag: false,
+  setHeaders: (res, filePath) => {
+    const ext = filePath.slice(filePath.lastIndexOf('.')).toLowerCase();
+    if (mimeTypes[ext]) {
+      res.setHeader('Content-Type', mimeTypes[ext]);
+    }
+  },
 }));
 
 app.use(express.static(join(__dirname, 'dist', 'client'), {

src/pages/blog/[...slug].astro

@@ -64,7 +64,7 @@ const shareDescription = encodeURIComponent(post.data.description);
   />
   <article class="bg-white dark:bg-secondary-900">
     <!-- Hero Section -->
-    <header class="relative bg-gradient-to-br from-secondary-900 via-secondary-800 to-secondary-900 py-16 md:py-24 overflow-hidden">
+    <section class="relative bg-gradient-to-br from-secondary-900 via-secondary-800 to-secondary-900 py-16 md:py-24 overflow-hidden">
       <div class="absolute inset-0 opacity-20">
         <div class="absolute top-10 left-10 w-64 h-64 bg-primary-500 rounded-full blur-[100px]"></div>
         <div class="absolute bottom-10 right-10 w-80 h-80 bg-accent-500 rounded-full blur-[120px]"></div>
@@ -132,7 +132,7 @@ const shareDescription = encodeURIComponent(post.data.description);
           </div>
         </div>
       </div>
-    </header>
+    </section>
 
     <!-- Hero Image -->
     {post.data.heroImage && (