projects: cover art on every case study

Six generated covers wired in via an optional cover key - 2528x1696 sources
optimised to 1600px webp, 49-144KB each. They sit on the page background
rather than the diagrams' light card, since the art is already generated in
the site palette on near-black. Cover carries the story at a glance, the
diagram still carries the architecture below it.

src/pages/projects/[slug].astro

@@ -19,6 +19,19 @@ const { Content } = await render(entry);
     <div class="container case__inner">
       <a class="case__back mono" href="/projects/">← All projects</a>
 
+      {p.cover && (
+        <figure class="case__cover" data-reveal>
+          <img
+            src={`/covers/${p.cover}.webp`}
+            alt={`${p.title} — cover art`}
+            width="1600"
+            height="1073"
+            loading="eager"
+            decoding="async"
+          />
+        </figure>
+      )}
+
       <header class="case__head" data-reveal>
         <p class="eyebrow">Case study</p>
         <h1 class="case__title">{p.title}</h1>
@@ -65,6 +78,21 @@ const { Content } = await render(entry);
     color: var(--accent);
     text-decoration: none;
   }
+  /* Cover art is generated in the site palette on near-black, so it sits on the
+     page background directly - no light card (that's for the fixed-colour SVG
+     diagrams, which need a constant surface to stay legible in dark mode). */
+  .case__cover {
+    margin: 0 0 var(--space-6);
+    border: 1px solid var(--border-accent);
+    border-radius: var(--radius);
+    overflow: hidden;
+    line-height: 0;
+  }
+  .case__cover img {
+    width: 100%;
+    height: auto;
+    display: block;
+  }
   .case__title {
     margin-top: var(--space-3);
     font-size: var(--step-4);