projects: cover art on the dossier cards, replacing the sketch thumbnails

The inline SVG thumbs were placeholder-grade next to real art. Cards now use
a 640px mini of the same cover (9-22KB), object-fit cover with a slow hover
zoom, and a corner scrim so the DOSSIER tag stays legible over the brighter
frames. Falls back to the sketch for any project without a cover.

src/components/ProjectCard.astro

@@ -17,7 +17,17 @@ const dossierNo = String(index).padStart(3, "0");
 
 <a class="dossier" href={href} data-reveal>
   <div class="dossier__thumb">
-    <DossierThumb kind={p.diagram} />
+    {p.cover
+      ? <img
+          class="dossier__cover"
+          src={`/covers/thumb/${p.cover}.webp`}
+          alt=""
+          width="640"
+          height="429"
+          loading="lazy"
+          decoding="async"
+        />
+      : <DossierThumb kind={p.diagram} />}
     <span class="dossier__tag mono">DOSSIER / {dossierNo}</span>
   </div>
   <div class="dossier__body">
@@ -63,8 +73,30 @@ const dossierNo = String(index).padStart(3, "0");
     height: 180px;
     background: #0b101c;
     position: relative;
+    overflow: hidden;
     border-bottom: 1px solid rgba(63, 186, 245, 0.12);
   }
+  /* Cover art fills the thumb; the corner tag sits over it, so a scrim keeps
+     the tag legible against the brighter parts of the art. */
+  .dossier__cover {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    transition: transform 320ms var(--ease);
+  }
+  .dossier:hover .dossier__cover {
+    transform: scale(1.04);
+  }
+  .dossier__thumb:has(.dossier__cover)::after {
+    content: "";
+    position: absolute;
+    inset: 0 auto auto 0;
+    width: 60%;
+    height: 46px;
+    background: linear-gradient(160deg, rgba(9, 12, 20, 0.85), transparent 78%);
+    pointer-events: none;
+  }
   :global([data-theme="light"]) .dossier__thumb {
     background: var(--surface-2);
     border-bottom-color: var(--border-accent);