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/pages/index.astro

@@ -1,6 +1,7 @@
 ---
 import Layout from "../layouts/Layout.astro";
 import Hero from "../components/Hero.astro";
+import CircuitDivider from "../components/CircuitDivider.astro";
 import Section from "../components/Section.astro";
 import About from "../components/About.astro";
 import SkillGroup from "../components/SkillGroup.astro";
@@ -22,6 +23,8 @@ const postTags = allTags(allPosts);
 <Layout path="/">
   <Hero />
 
+  <CircuitDivider />
+
   <Section id="about" eyebrow="About" index="01" title="Reliability you can reason about.">
     <About />
   </Section>
@@ -34,7 +37,7 @@ const postTags = allTags(allPosts);
 
   <Section id="projects" eyebrow="Selected work" index="03" title="Platforms built to keep working unattended.">
     <div class="grid grid--projects">
-      {featuredProjects.map((entry) => <ProjectCard entry={entry} />)}
+      {featuredProjects.map((entry, i) => <ProjectCard entry={entry} index={i + 1} />)}
     </div>
     <p class="projects__more" data-reveal>
       <a class="btn" href="/projects/">All projects →</a>
@@ -70,11 +73,25 @@ const postTags = allTags(allPosts);
     display: grid;
     gap: var(--space-5);
   }
+  /* capabilities bento: 4 columns, hero tile spans 2×2, min row height per the spec */
   .grid--skills {
-    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
+    grid-template-columns: repeat(4, 1fr);
+    grid-auto-rows: minmax(190px, auto);
+    gap: 16px;
+  }
+  @media (max-width: 1000px) {
+    .grid--skills {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+  @media (max-width: 720px) {
+    .grid--skills {
+      grid-template-columns: 1fr;
+    }
   }
   .grid--projects {
     grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
+    gap: 20px;
   }
   .projects__more {
     margin-top: var(--space-6);

src/pages/projects/index.astro

@@ -17,7 +17,7 @@ const projects = (await getCollection("projects")).sort(
       the outcome. More always cooking.
     </p>
     <div class="grid">
-      {projects.map((entry) => <ProjectCard entry={entry} />)}
+      {projects.map((entry, i) => <ProjectCard entry={entry} index={i + 1} />)}
     </div>
   </Section>
 </Layout>