facelift: the scroll story - bento capabilities, dossier cards, series badges, GitOps receipt

02 Capabilities becomes a 4-col bento (Edge AI 2x2 flagship w/ magenta corner radial, Platform
wide, magenta-flavoured security tile, Observability row-completer) driven by span/flavor fields
in skills.ts. 03 Selected Work becomes dossier cards: house-style SVG thumbnails (per-project
motif via DossierThumb), DOSSIER/00N corner tags, 'the argument' line from the outcome field,
chip tags, mono meta footer. 04 Writing cards gain the security-series badge (data/series.ts)
and sit three across. Section numbers glow cyan; a circuit divider (gradient hairlines + two
diamonds) closes the hero. Footer opens with the GitOps receipt - git sha + build date baked at
build time via lib/build-info.ts, zero runtime calls.

src/components/ProjectCard.astro

@@ -1,89 +1,132 @@
 ---
+// Dossier card — thumbnail diagram, DOSSIER/00N corner tag, title, "the argument",
+// tag chips, mono meta footer. Facelift shape from the design handoff.
 import type { CollectionEntry } from "astro:content";
+import DossierThumb from "./DossierThumb.astro";
+
 interface Props {
   entry: CollectionEntry<"projects">;
+  /** 1-based position → the DOSSIER / 00N corner tag. */
+  index?: number;
 }
-const { entry } = Astro.props;
+const { entry, index = 1 } = Astro.props;
 const p = entry.data;
 const href = `/projects/${entry.id}/`;
+const dossierNo = String(index).padStart(3, "0");
 ---
 
-<a class="project card" href={href} data-reveal>
-  <div class="project__top">
-    <h3 class="project__title">{p.title}</h3>
-    <span class="project__arrow" aria-hidden="true">→</span>
+<a class="dossier" href={href} data-reveal>
+  <div class="dossier__thumb">
+    <DossierThumb kind={p.diagram} />
+    <span class="dossier__tag mono">DOSSIER / {dossierNo}</span>
+  </div>
+  <div class="dossier__body">
+    <h3 class="dossier__title">
+      {p.title} <span class="dossier__arrow" aria-hidden="true">→</span>
+    </h3>
+    <p class="dossier__argument">The argument: {p.outcome}</p>
+    <ul class="dossier__chips mono" role="list">
+      {p.stack.map((s) => <li class="dchip">{s}</li>)}
+    </ul>
+    <p class="dossier__meta mono">{p.role} · {p.period}</p>
   </div>
-
-  <p class="project__outcome">{p.outcome}</p>
-  <p class="project__summary">{p.summary}</p>
-
-  <ul class="project__stack">
-    {p.stack.map((s) => <li class="tag">{s}</li>)}
-  </ul>
-
-  <p class="project__meta mono">
-    <span>{p.role}</span><span class="project__sep">·</span><span>{p.period}</span>
-  </p>
 </a>
 
 <style>
-  .project {
-    padding: var(--space-5);
+  .dossier {
     display: flex;
     flex-direction: column;
-    gap: var(--space-3);
-    color: inherit;
-    height: 100%;
-  }
-  a.project:hover {
+    background: var(--panel);
+    border: 1px solid var(--border-accent);
+    border-radius: 10px;
+    overflow: hidden;
     text-decoration: none;
+    color: inherit;
+    backdrop-filter: var(--panel-blur);
+    -webkit-backdrop-filter: var(--panel-blur);
+    transition:
+      border-color 180ms var(--ease),
+      box-shadow 180ms var(--ease),
+      transform 180ms var(--ease);
+  }
+  .dossier:hover {
+    text-decoration: none;
+    border-color: rgba(63, 186, 245, 0.55);
+    box-shadow: 0 0 32px rgba(63, 186, 245, 0.15);
     transform: translateY(-3px);
   }
-  .project__top {
+  @media (prefers-reduced-motion: reduce) {
+    .dossier:hover { transform: none; }
+  }
+
+  .dossier__thumb {
+    height: 180px;
+    background: #0b101c;
+    position: relative;
+    border-bottom: 1px solid rgba(63, 186, 245, 0.12);
+  }
+  [data-theme="light"] .dossier__thumb {
+    background: var(--surface-2);
+    border-bottom-color: var(--border-accent);
+  }
+  .dossier__tag {
+    position: absolute;
+    top: 12px;
+    left: 14px;
+    font-size: 10px;
+    letter-spacing: 0.14em;
+    color: var(--text-faint);
+  }
+
+  .dossier__body {
+    padding: 24px;
     display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: var(--space-3);
+    flex-direction: column;
+    gap: 12px;
+    flex: 1;
   }
-  .project__title {
-    font-size: var(--step-1);
+  .dossier__title {
+    margin: 0;
+    font-family: var(--font-display);
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--text-strong);
   }
-  .project__arrow {
+  .dossier__arrow {
     color: var(--accent);
+    display: inline-block;
     transition: transform 0.2s var(--ease);
   }
-  a.project:hover .project__arrow {
+  .dossier:hover .dossier__arrow {
     transform: translateX(4px);
   }
-  .project__outcome {
-    color: var(--text);
-    font-weight: 500;
-    border-left: 2px solid var(--accent);
-    padding-left: var(--space-3);
-  }
-  .project__summary {
-    color: var(--text-dim);
-    font-size: var(--step--1);
+  .dossier__argument {
+    margin: 0;
+    font-size: 14px;
     line-height: 1.6;
+    color: var(--text-secondary);
+    text-wrap: pretty;
   }
-  .project__stack {
+  .dossier__chips {
     list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin: auto 0 0;
     padding: 0;
-    margin: var(--space-2) 0 0;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.4rem;
   }
-  .project__meta {
-    margin-top: auto;
-    padding-top: var(--space-3);
-    font-size: 0.72rem;
+  .dchip {
+    font-size: 11px;
+    color: var(--text-secondary);
+    background: rgba(63, 186, 245, 0.08);
+    border-radius: 3px;
+    padding: 4px 8px;
+  }
+  .dossier__meta {
+    margin: 0;
+    font-size: 11px;
     color: var(--text-faint);
-    display: flex;
-    gap: 0.5rem;
-    flex-wrap: wrap;
-  }
-  .project__sep {
-    opacity: 0.6;
+    border-top: 1px solid rgba(63, 186, 245, 0.1);
+    padding-top: 12px;
   }
 </style>