work: PROOF column, drop heading prose

components/portfolio/WorkIndex.tsx

@@ -3,28 +3,11 @@
 import { useState } from "react";
 import { m, useReducedMotion } from "motion/react";
 
-import { dossiers, type Accent, type Dossier } from "@/lib/portfolio";
+import { dossiers, type Dossier } from "@/lib/portfolio";
 
-const accentText: Record<Accent, string> = {
+const activeText = "text-signal-green";
-  cyan: "text-signal-cyan",
+const activeBorder = "border-l-signal-green";
-  orange: "text-signal-orange",
+const activeGlow = "shadow-[0_0_32px_rgba(182,255,0,0.12)]";
-  green: "text-blacksite-text",
-  violet: "text-signal-violet",
-};
-
-const accentBorder: Record<Accent, string> = {
-  cyan: "border-l-signal-cyan",
-  orange: "border-l-signal-orange",
-  green: "border-l-transparent",
-  violet: "border-l-signal-violet",
-};
-
-const accentGlow: Record<Accent, string> = {
-  cyan: "shadow-[0_0_32px_rgba(0,240,255,0.12)]",
-  orange: "shadow-[0_0_32px_rgba(255,90,31,0.12)]",
-  green: "",
-  violet: "shadow-[0_0_32px_rgba(128,93,255,0.12)]",
-};
 
 function isLiveStatus(status: string) {
   return /\b(live|deployed)\b/i.test(status);
@@ -42,23 +25,11 @@ export function WorkIndex() {
     <section
       id="work"
       aria-labelledby="work-title"
-      className="mx-auto max-w-7xl px-4 py-24 text-blacksite-text sm:px-6 lg:px-8"
+      className="mx-auto max-w-7xl px-6 py-28 text-blacksite-text sm:px-8 sm:py-36 lg:px-12"
     >
-      <div className="mb-10 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+      <p id="work-title" className="section-label mb-12 text-blacksite-muted">
-        <div>
+        WORK /.02
-          <p className="section-label text-signal-cyan">WORK INDEX /.04</p>
-          <h2
-            id="work-title"
-            className="mt-3 font-display text-4xl leading-none tracking-[-0.04em] text-blacksite-text sm:text-6xl"
-          >
-            Eight field dossiers. No thumbnails.
-          </h2>
-        </div>
-        <p className="max-w-md text-sm leading-6 text-blacksite-muted">
-          Proof-first project records: mission, system constraints, and measurable
-          outcomes are exposed on hover, keyboard focus, touch, and reduced motion.
       </p>
-      </div>
 
       <m.div
         initial={shouldReduceMotion ? false : { opacity: 0, y: 18 }}
@@ -69,8 +40,8 @@ export function WorkIndex() {
       >
         <div className="section-label grid grid-cols-[minmax(0,1.35fr)_minmax(0,1fr)_minmax(0,0.8fr)_5rem] gap-4 border-b border-blacksite-line px-4 py-3 text-blacksite-muted max-md:hidden">
           <span>PROJECT</span>
+          <span>PROOF</span>
           <span>TYPE</span>
-          <span>STATUS</span>
           <span className="text-right">YEAR</span>
         </div>
 
@@ -98,10 +69,8 @@ export function WorkIndex() {
                     setActiveId(null);
                   }
                 }}
-                className={`group border-l-2 border-l-transparent bg-blacksite-bg2/20 px-4 py-5 outline-none transition duration-200 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-signal-cyan ${
+                className={`group border-l-2 border-l-transparent bg-blacksite-bg2/20 px-4 py-6 outline-none transition duration-200 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-signal-green ${
-                  isActive
+                  isActive ? `${activeBorder} bg-blacksite-surface/70 ${activeGlow}` : ""
-                    ? `${accentBorder[dossier.accent]} bg-blacksite-surface/70 ${accentGlow[dossier.accent]}`
-                    : ""
                 } ${shouldDim ? "opacity-45" : "opacity-100"}`}
               >
                 <div className="grid gap-3 md:grid-cols-[minmax(0,1.35fr)_minmax(0,1fr)_minmax(0,0.8fr)_5rem] md:items-start md:gap-4">
@@ -115,9 +84,7 @@ export function WorkIndex() {
                       </span>
                       <h3
                         className={`font-display text-2xl leading-none tracking-[-0.03em] transition-colors duration-200 ${
-                          isActive
+                          isActive ? activeText : "text-blacksite-text"
-                            ? accentText[dossier.accent]
-                            : "text-blacksite-text"
                         }`}
                       >
                         {dossier.title}
@@ -129,6 +96,15 @@ export function WorkIndex() {
                   </div>
 
                   <div>
+                    <p className="section-label mb-1 text-blacksite-muted md:hidden">
+                      PROOF
+                    </p>
+                    <p className="font-mono text-xs uppercase tracking-[0.16em] text-signal-green">
+                      {dossier.proofHeadline}
+                    </p>
+                  </div>
+
+                  <div className="hidden md:block">
                     <p className="section-label mb-1 text-blacksite-muted md:hidden">
                       TYPE
                     </p>
@@ -137,18 +113,6 @@ export function WorkIndex() {
                     </p>
                   </div>
 
-                  <div>
-                    <p className="section-label mb-1 text-blacksite-muted md:hidden">
-                      STATUS
-                    </p>
-                    <p className="flex items-center gap-2 font-mono text-xs uppercase tracking-[0.16em] text-blacksite-muted">
-                      {liveStatus ? (
-                        <span aria-hidden="true" className="size-2 rounded-full bg-signal-green shadow-[0_0_14px_rgba(182,255,0,0.45)]" />
-                      ) : null}
-                      {dossier.status}
-                    </p>
-                  </div>
-
                   <div className="md:text-right">
                     <p className="section-label mb-1 text-blacksite-muted md:hidden">
                       YEAR
@@ -186,6 +150,16 @@ export function WorkIndex() {
                       ) : null}
                     </div>
 
+                    <div className="space-y-2">
+                      <p className="section-label">STATUS</p>
+                      <p className="flex items-center gap-2 font-mono text-xs uppercase tracking-[0.16em] text-blacksite-muted">
+                        {liveStatus ? (
+                          <span aria-hidden="true" className="size-2 rounded-full bg-signal-green shadow-[0_0_14px_rgba(182,255,0,0.45)]" />
+                        ) : null}
+                        {dossier.status}
+                      </p>
+                    </div>
+
                     <div className="space-y-2">
                       <p className="section-label">STACK</p>
                       <div className="flex flex-wrap gap-2">
@@ -203,7 +177,7 @@ export function WorkIndex() {
                     <div className="space-y-2 md:text-right">
                       <p className="section-label">PROOF</p>
                       <p
-                        className={`font-display text-xl leading-none ${accentText[dossier.accent]}`}
+                        className={`font-display text-xl leading-none ${activeText}`}
                       >
                         {proof?.metric ?? proof?.label ?? dossier.result}
                       </p>
@@ -222,7 +196,7 @@ export function WorkIndex() {
                               href={link.href}
                               target="_blank"
                               rel="noopener noreferrer"
-                              className="border border-blacksite-line bg-blacksite-surface2 px-3 py-2 font-mono text-xs uppercase tracking-[0.14em] text-blacksite-text transition-colors hover:border-signal-cyan hover:text-signal-cyan focus-visible:outline-signal-cyan"
+                              className="border border-blacksite-line bg-blacksite-surface2 px-3 py-2 font-mono text-xs uppercase tracking-[0.14em] text-blacksite-text transition-colors hover:border-signal-green hover:text-signal-green focus-visible:outline-signal-green"
                             >
                               {link.label} ↗
                             </a>
@@ -230,7 +204,7 @@ export function WorkIndex() {
                         </div>
                       ) : (
                         <p className="font-mono text-xs uppercase tracking-[0.14em] text-blacksite-muted">
-                          Closed / internal artifact
+                          Closed source
                         </p>
                       )}
                     </div>