From 8dff7fe0a5217ce9aefb31f0aca81e6e7f752bb2 Mon Sep 17 00:00:00 2001
From: Titash Deb <titashdev@gmail.com>
Date: Thu, 27 Aug 2026 16:05:14 +0530
Subject: [PATCH 1/4] Make brief covers more room-specific and cinematic

---
 src/components/BriefCover.jsx | 66 ++++++++++++++++++++++++-----------
 1 file changed, 46 insertions(+), 20 deletions(-)

diff --git a/src/components/BriefCover.jsx b/src/components/BriefCover.jsx
index baa365a..886ffa6 100644
--- a/src/components/BriefCover.jsx
+++ b/src/components/BriefCover.jsx
@@ -31,32 +31,44 @@ export function briefFromMission(mission) {
 
 const TONES = {
   gallery: {
-    wrap: "border border-cyan-electric/25 shadow-[0_0_90px_rgba(0,240,255,0.12)]",
-    chip: "border-cyan-electric/30 bg-cyan-electric/10 text-cyan-electric",
-    cell: "text-cyan-electric/70",
+    wrap: "border-cyan-electric/25 shadow-[0_0_110px_rgba(0,240,255,0.14)]",
+    chip: "border-cyan-electric/30 bg-cyan-electric/12 text-cyan-electric",
+    cell: "border-cyan-electric/15 bg-cyan-electric/7 text-cyan-electric/80",
     motion: galleryReveal,
     labels: ["Situation", "Choice", "Cost"],
+    sweep: "from-cyan-electric/25 via-cyan-electric/10 to-transparent",
+    rail: "from-cyan-electric/45 to-transparent",
+    then: "text-cyan-electric/80",
   },
   judgment: {
-    wrap: "border border-amber-400/30 shadow-[0_0_80px_rgba(251,191,36,0.12)]",
-    chip: "border-amber-400/40 bg-amber-400/10 text-amber-300",
-    cell: "text-amber-300/80",
+    wrap: "border-amber-400/30 shadow-[0_0_95px_rgba(251,191,36,0.15)]",
+    chip: "border-amber-400/40 bg-amber-400/12 text-amber-300",
+    cell: "border-amber-400/15 bg-amber-400/7 text-amber-200/80",
     motion: coverReveal,
     labels: ["The bind", "What I picked", "What I gave up"],
+    sweep: "from-amber-400/25 via-amber-400/10 to-transparent",
+    rail: "from-amber-400/45 to-transparent",
+    then: "text-amber-300/80",
   },
   ledger: {
-    wrap: "border border-emerald-glow/25 shadow-[0_0_70px_rgba(52,211,153,0.1)]",
-    chip: "border-emerald-glow/30 bg-emerald-glow/10 text-emerald-glow",
-    cell: "text-emerald-glow/80",
+    wrap: "border-emerald-glow/25 shadow-[0_0_90px_rgba(52,211,153,0.12)]",
+    chip: "border-emerald-glow/30 bg-emerald-glow/12 text-emerald-glow",
+    cell: "border-emerald-glow/15 bg-emerald-glow/7 text-emerald-glow/80",
     motion: ledgerReveal,
     labels: ["Why", "Pick", "Price"],
+    sweep: "from-emerald-glow/25 via-emerald-glow/10 to-transparent",
+    rail: "from-emerald-glow/45 to-transparent",
+    then: "text-emerald-glow/80",
   },
   note: {
-    wrap: "border border-obsidian-border/80 shadow-none",
-    chip: "border-obsidian-border bg-obsidian text-slate-300",
-    cell: "text-slate-500",
+    wrap: "border-obsidian-border/80 shadow-[0_0_60px_rgba(15,23,42,0.2)]",
+    chip: "border-obsidian-border bg-obsidian text-slate-200",
+    cell: "border-obsidian-border/70 bg-obsidian/62 text-slate-300/80",
     motion: coverReveal,
     labels: ["Situation", "Choice", "Cost"],
+    sweep: "from-slate-500/20 via-transparent to-transparent",
+    rail: "from-slate-500/35 to-transparent",
+    then: "text-slate-400",
   },
 };
 
@@ -67,10 +79,10 @@ function Cell({ label, children, delay = 0, toneClass }) {
       initial={{ opacity: 0, y: 10 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ ...springSoft, delay }}
-      className="rounded-xl border border-obsidian-border/70 bg-obsidian/55 p-4 backdrop-blur-md"
+      className="rounded-xl border p-4 backdrop-blur-md transition-colors duration-300"
     >
       <div className={cn("kicker mb-2", toneClass)}>{label}</div>
-      <div className="font-sans text-sm text-slate-200 leading-relaxed">{children}</div>
+      <div className="font-sans text-sm text-slate-100 leading-relaxed">{children}</div>
     </motion.div>
   );
 }
@@ -92,17 +104,21 @@ export default function BriefCover({
   tone = "gallery",
 }) {
   const t = TONES[tone] || TONES.gallery;
+
   return (
     <motion.section
       {...t.motion}
       className={cn(
-        "relative overflow-hidden rounded-2xl bg-slate-950/70",
+        "relative isolate overflow-hidden rounded-2xl bg-slate-950/80",
         t.wrap,
         compact ? "p-4 sm:p-5" : "p-6 sm:p-8",
         className
       )}
     >
+      <div className={cn("pointer-events-none absolute inset-0 bg-gradient-to-br opacity-90", t.sweep)} aria-hidden="true" />
+      <div className={cn("pointer-events-none absolute inset-y-0 left-0 w-px bg-gradient-to-b opacity-70", t.rail)} aria-hidden="true" />
       <div className="dossier-sheen hidden md:block" aria-hidden="true" />
+
       <div className="relative z-10 space-y-4">
         <div className="flex flex-wrap items-center gap-2">
           {status && (
@@ -112,6 +128,7 @@ export default function BriefCover({
           )}
           {kicker && <span className="kicker text-slate-500">{kicker}</span>}
         </div>
+
         {title && (
           <motion.h2
             id={titleId}
@@ -124,18 +141,27 @@ export default function BriefCover({
             {title}
           </motion.h2>
         )}
+
         {lede && <p className={cn("lede max-w-2xl", compact && "text-base")}>{lede}</p>}
         {note && <p className="font-sans text-sm text-slate-500">{note}</p>}
+
         {(situation || choice || cost) && (
           <div className={cn("grid gap-3", compact ? "sm:grid-cols-2" : "sm:grid-cols-3", !compact && "pt-2")}>
-            <Cell label={t.labels[0]} delay={0.04} toneClass={t.cell}>{situation}</Cell>
-            <Cell label={t.labels[1]} delay={0.1} toneClass={t.cell}>{choice}</Cell>
-            <Cell label={t.labels[2]} delay={0.16} toneClass={t.cell}>{cost}</Cell>
+            <Cell label={t.labels[0]} delay={0.04} toneClass={t.then}>
+              {situation}
+            </Cell>
+            <Cell label={t.labels[1]} delay={0.1} toneClass={t.then}>
+              {choice}
+            </Cell>
+            <Cell label={t.labels[2]} delay={0.16} toneClass={t.then}>
+              {cost}
+            </Cell>
           </div>
         )}
+
         {consequence && (
-          <p className="font-sans text-sm text-slate-400 leading-relaxed pt-1">
-            <span className="kicker text-slate-500 mr-2">Then</span>
+          <p className={cn("font-sans text-sm leading-relaxed pt-1", t.then)}>
+            <span className="kicker mr-2 text-slate-500">Then</span>
             {consequence}
           </p>
         )}

From e0ac7a92c1ccab9e1bd71fcdf9808f2d1dc2fb49 Mon Sep 17 00:00:00 2001
From: Titash Deb <titashdev@gmail.com>
Date: Thu, 27 Aug 2026 16:05:41 +0530
Subject: [PATCH 2/4] Make archive search more cinematic and shelf-like

---
 src/components/GlobalSearchModal.jsx | 260 ++++++++++++++++++---------
 1 file changed, 178 insertions(+), 82 deletions(-)

diff --git a/src/components/GlobalSearchModal.jsx b/src/components/GlobalSearchModal.jsx
index 8c77700..a49d6f7 100644
--- a/src/components/GlobalSearchModal.jsx
+++ b/src/components/GlobalSearchModal.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef, useMemo } from "react";
 import { motion, AnimatePresence } from "framer-motion";
-import { Search, X, Map, Database, Activity, Terminal, FileText, Code, Layout } from "lucide-react";
+import { Search, X, Map, Database, Activity, Terminal, FileText, Code, Layout, ArrowRight } from "lucide-react";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import { useSystemCommand } from "../context/SystemCommandContext";
@@ -20,23 +20,23 @@ const firstSentence = (text) => {
 };
 
 const SEARCH_DATA = [
-  ...CASE_STUDIES.map(cs => ({
+  ...CASE_STUDIES.map((cs) => ({
     id: cs.missionId,
     title: cs.projectName,
     lede: firstSentence(cs.executiveSummary),
     category: "Work",
     icon: Layout,
     path: "FLAGSHIP_MODAL",
-    payload: cs
+    payload: cs,
   })),
-  ...ADR_RECORDS.map(adr => ({
+  ...ADR_RECORDS.map((adr) => ({
     id: adr.id,
     title: adr.title,
     lede: adr.problem,
     category: "Records",
     icon: FileText,
     path: "ADR_MODAL",
-    payload: adr
+    payload: adr,
   })),
   { id: "nav-benchmarks", title: "Comparisons", lede: "Side by side. Simulations are labeled.", category: "Docs", icon: Activity, path: "TRUST_CENTER" },
   { id: "nav-discovery", title: "Write a note", lede: "A short intake that opens mail.", category: "Tools", icon: Terminal, path: "DISCOVERY_WIZARD" },
@@ -47,20 +47,66 @@ const SEARCH_DATA = [
 ];
 
 const FEATURED = [
-  ...SEARCH_DATA.filter(d => d.category === "Work").slice(0, 4),
-  ...SEARCH_DATA.filter(d => d.category === "Records").slice(0, 2),
+  ...SEARCH_DATA.filter((d) => d.category === "Work").slice(0, 4),
+  ...SEARCH_DATA.filter((d) => d.category === "Records").slice(0, 2),
 ];
 
+const ARCHIVE_RAIL = ["Work", "Records", "Maps", "Docs"];
+
+function FeaturedTile({ result, index, isSelected, onClick, onHover, wide = false }) {
+  const Icon = result.icon;
+  return (
+    <button
+      type="button"
+      ref={(el) => {}}
+      onClick={onClick}
+      onMouseEnter={onHover}
+      className={cn(
+        "group relative overflow-hidden rounded-xl border p-4 text-left transition-all duration-200 focus-visible:outline-none",
+        wide ? "min-h-[132px]" : "min-h-[104px]",
+        isSelected
+          ? "border-cyan-electric/45 bg-cyan-electric/10 shadow-[0_0_30px_rgba(0,240,255,0.08)]"
+          : "border-obsidian-border/70 bg-obsidian/55 hover:border-cyan-electric/25 hover:bg-cyan-electric/5"
+      )}
+    >
+      <div className="absolute inset-0 bg-[linear-gradient(135deg,rgba(0,240,255,0.08),transparent_35%,rgba(168,85,247,0.04))] opacity-0 transition-opacity duration-200 group-hover:opacity-100" />
+      <div className="dossier-sheen hidden md:block" aria-hidden="true" />
+      <div className="relative z-10 flex items-start gap-3">
+        <div className={cn(
+          "rounded-lg border p-2 transition-colors duration-200",
+          isSelected ? "border-cyan-electric/40 bg-cyan-electric/15 text-cyan-electric" : "border-obsidian-border bg-slate-950 text-slate-400"
+        )}>
+          <Icon size={16} />
+        </div>
+        <div className="min-w-0">
+          <div className="flex items-center gap-2">
+            <span className="rounded-full border border-obsidian-border/70 bg-slate-950 px-2 py-0.5 font-sans text-[10px] uppercase tracking-[0.2em] text-slate-500">
+              {result.category}
+            </span>
+            {wide && <ArrowRight size={11} className="text-cyan-electric/60" />}
+          </div>
+          <div className={cn("mt-2 font-display font-bold tracking-[-0.03em] text-white", wide ? "text-base sm:text-lg" : "text-sm")}>
+            {result.title}
+          </div>
+          {result.lede && (
+            <p className={cn("mt-1 font-sans text-xs text-slate-500 leading-relaxed line-clamp-2", wide && "max-w-lg")}>{result.lede}</p>
+          )}
+        </div>
+      </div>
+    </button>
+  );
+}
+
 export default function GlobalSearchModal({ isOpen, onClose }) {
   const [query, setQuery] = useState("");
   const [selectedIndex, setSelectedIndex] = useState(0);
   const inputRef = useRef(null);
   const modalRef = useRef(null);
   const resultRefs = useRef([]);
-  
+
   const { playClickSound, openEnterpriseExplorer, openAdrs, openFlagships, openContact } = useSystemCommand();
   const { setActiveTab } = useSpatial();
-  
+
   useModal({ isOpen, onClose, ref: modalRef });
 
   useEffect(() => {
@@ -75,11 +121,12 @@ export default function GlobalSearchModal({ isOpen, onClose }) {
   const filteredResults = useMemo(() => {
     if (!query) return [];
     const q = query.toLowerCase();
-    return SEARCH_DATA.filter(item => 
-      (item.title || "").toLowerCase().includes(q) ||
-      (item.lede || "").toLowerCase().includes(q) ||
-      (item.category || "").toLowerCase().includes(q) ||
-      (item.payload && JSON.stringify(item.payload).toLowerCase().includes(q))
+    return SEARCH_DATA.filter(
+      (item) =>
+        (item.title || "").toLowerCase().includes(q) ||
+        (item.lede || "").toLowerCase().includes(q) ||
+        (item.category || "").toLowerCase().includes(q) ||
+        (item.payload && JSON.stringify(item.payload).toLowerCase().includes(q))
     );
   }, [query]);
 
@@ -92,8 +139,8 @@ export default function GlobalSearchModal({ isOpen, onClose }) {
   }, [filteredResults]);
 
   const flatResults = useMemo(() => {
-    let arr = [];
-    Object.values(groupedResults).forEach(group => arr.push(...group));
+    const arr = [];
+    Object.values(groupedResults).forEach((group) => arr.push(...group));
     return arr;
   }, [groupedResults]);
 
@@ -118,14 +165,14 @@ export default function GlobalSearchModal({ isOpen, onClose }) {
   const handleKeyDown = (e) => {
     const list = query ? flatResults : FEATURED;
     if (!list.length) return;
-    
-    if (e.key === 'ArrowDown') {
+
+    if (e.key === "ArrowDown") {
       e.preventDefault();
       setSelectedIndex((prev) => (prev + 1) % list.length);
-    } else if (e.key === 'ArrowUp') {
+    } else if (e.key === "ArrowUp") {
       e.preventDefault();
       setSelectedIndex((prev) => (prev - 1 + list.length) % list.length);
-    } else if (e.key === 'Enter') {
+    } else if (e.key === "Enter") {
       e.preventDefault();
       handleResultClick(list[selectedIndex]);
     }
@@ -135,7 +182,7 @@ export default function GlobalSearchModal({ isOpen, onClose }) {
     if (resultRefs.current[selectedIndex]) {
       resultRefs.current[selectedIndex].scrollIntoView({
         block: "nearest",
-        behavior: "smooth"
+        behavior: "smooth",
       });
     }
   }, [selectedIndex]);
@@ -144,13 +191,14 @@ export default function GlobalSearchModal({ isOpen, onClose }) {
     const Icon = result.icon;
     const isSelected = index === selectedIndex;
     return (
-      <button type="button"
+      <button
+        type="button"
         key={result.id}
-        ref={el => resultRefs.current[index] = el}
+        ref={(el) => (resultRefs.current[index] = el)}
         onClick={() => handleResultClick(result)}
         onMouseEnter={() => setSelectedIndex(index)}
         className={cn(
-          "flex w-full cursor-pointer items-start gap-3 rounded-lg px-3 py-3 text-left transition-colors duration-200 focus-visible:outline-none",
+          "flex w-full cursor-pointer items-start gap-3 rounded-xl px-3 py-3 text-left transition-colors duration-200 focus-visible:outline-none",
           isSelected ? "bg-cyan-electric/10" : "hover:bg-cyan-electric/5"
         )}
       >
@@ -159,9 +207,7 @@ export default function GlobalSearchModal({ isOpen, onClose }) {
         </div>
         <div className="min-w-0">
           <div className={cn("font-sans text-sm font-medium", isSelected ? "text-cyan-electric" : "text-slate-200")}>{result.title}</div>
-          {result.lede && (
-            <p className="mt-0.5 font-sans text-xs text-slate-500 leading-relaxed line-clamp-2">{result.lede}</p>
-          )}
+          {result.lede && <p className="mt-0.5 font-sans text-xs text-slate-500 leading-relaxed line-clamp-2">{result.lede}</p>}
         </div>
       </button>
     );
@@ -170,9 +216,9 @@ export default function GlobalSearchModal({ isOpen, onClose }) {
   return (
     <AnimatePresence>
       {isOpen && (
-        <motion.div 
+        <motion.div
           {...overlayFade}
-          className="pointer-events-auto fixed inset-0 z-[100] flex items-start justify-center pt-24 bg-black/60 backdrop-blur-sm"
+          className="pointer-events-auto fixed inset-0 z-[100] flex items-start justify-center bg-black/65 px-3 pt-20 backdrop-blur-sm sm:px-4 sm:pt-24"
           onClick={onClose}
         >
           <motion.div
@@ -186,76 +232,126 @@ export default function GlobalSearchModal({ isOpen, onClose }) {
             exit={modalReveal.exit}
             transition={modalReveal.transition}
             onKeyDown={handleKeyDown}
-            className="relative w-full max-w-2xl overflow-hidden rounded-xl border border-obsidian-border bg-obsidian/80 backdrop-blur-2xl shadow-2xl"
+            className="relative w-full max-w-3xl overflow-hidden rounded-2xl border border-obsidian-border bg-obsidian/84 shadow-2xl backdrop-blur-2xl"
           >
-            <h2 id="global-search-title" className="sr-only">Archive</h2>
-            <div className="flex items-center border-b border-obsidian-border/50 px-4 py-3">
-              <Search size={20} className="text-slate-400" />
-              <input
-                ref={inputRef}
-                type="text"
-                placeholder="Find a case…"
-                value={query}
-                onChange={(e) => { setQuery(e.target.value); setSelectedIndex(0); }}
-                className="w-full bg-transparent px-4 py-2 font-sans text-sm text-slate-200 placeholder-slate-500 focus:outline-none"
-              />
-              <button type="button" aria-label="Close archive" onClick={() => { playClickSound(); onClose(); }} className="rounded-md p-2 relative after:absolute after:content-[''] after:-inset-3 min-h-[32px] min-w-[32px] flex items-center justify-center text-slate-400 hover:bg-obsidian-surface hover:text-slate-200 focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-electric/50 transition-colors duration-200">
-                <X size={18} />
-              </button>
+            <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(0,240,255,0.12),transparent_35%),radial-gradient(circle_at_top_right,rgba(168,85,247,0.08),transparent_30%)]" />
+            <div className="relative z-10 border-b border-obsidian-border/60 px-4 py-4 sm:px-6">
+              <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+                <div className="space-y-1.5">
+                  <p className="kicker text-cyan-electric/70">Archive</p>
+                  <h2 id="global-search-title" className="font-display text-2xl font-extrabold tracking-[-0.04em] text-white sm:text-3xl">
+                    Find a case, record, or map
+                  </h2>
+                  <p className="max-w-2xl font-sans text-sm text-slate-400">
+                    Search opens as cards. Labels stay short. Results stay honest.
+                  </p>
+                </div>
+                <div className="flex flex-wrap gap-2">
+                  {ARCHIVE_RAIL.map((label) => (
+                    <span key={label} className="rounded-full border border-obsidian-border bg-slate-950/70 px-2.5 py-1 font-sans text-[10px] uppercase tracking-[0.22em] text-slate-400">
+                      {label}
+                    </span>
+                  ))}
+                </div>
+              </div>
+              <div className="mt-4 flex items-center gap-3 rounded-xl border border-obsidian-border/70 bg-slate-950/65 px-4 py-3">
+                <Search size={18} className="text-slate-400" />
+                <input
+                  ref={inputRef}
+                  type="text"
+                  placeholder="Find a case…"
+                  value={query}
+                  onChange={(e) => {
+                    setQuery(e.target.value);
+                    setSelectedIndex(0);
+                  }}
+                  className="w-full bg-transparent font-sans text-sm text-slate-100 placeholder-slate-500 focus:outline-none"
+                />
+                <button
+                  type="button"
+                  aria-label="Close archive"
+                  onClick={() => {
+                    playClickSound();
+                    onClose();
+                  }}
+                  className="relative flex min-h-[32px] min-w-[32px] items-center justify-center rounded-md p-2 text-slate-400 transition-colors duration-200 after:absolute after:-inset-3 after:content-[''] hover:bg-obsidian-surface hover:text-slate-200 focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-electric/50"
+                >
+                  <X size={18} />
+                </button>
+              </div>
             </div>
-            {query && (
-              <div className="max-h-[60vh] overflow-y-auto p-2">
+
+            {query ? (
+              <div className="max-h-[60vh] overflow-y-auto p-3 sm:p-4">
                 {flatResults.length > 0 ? (
-                  <div className="space-y-4 py-2">
+                  <div className="space-y-5 py-1">
                     {Object.entries(groupedResults).map(([category, items]) => (
-                      <div key={category} className="space-y-1">
-                        <div className="px-3 py-1 text-xs font-sans tracking-wide text-slate-500">{category}</div>
-                        {items.map((result) => renderRow(result, flatResults.findIndex(r => r.id === result.id)))}
+                      <div key={category} className="space-y-2">
+                        <div className="flex items-center gap-2 px-1 text-xs font-sans tracking-[0.18em] text-slate-500 uppercase">
+                          <span className="h-px w-8 bg-slate-700" />
+                          {category}
+                        </div>
+                        <div className="grid gap-2 sm:grid-cols-2">
+                          {items.map((result) => renderRow(result, flatResults.findIndex((r) => r.id === result.id)))}
+                        </div>
                       </div>
                     ))}
                   </div>
                 ) : (
-                  <div className="py-12 text-center flex flex-col items-center justify-center space-y-3">
+                  <div className="flex flex-col items-center justify-center space-y-3 py-12 text-center">
                     <Search size={32} className="text-slate-600" />
-                    <p className="text-sm font-sans text-slate-400">
+                    <p className="font-sans text-sm text-slate-400">
                       Nothing matches “<span className="text-slate-200">{query}</span>”
                     </p>
                   </div>
                 )}
               </div>
-            )}
-            
-            {!query && (
-              <div className="max-h-[60vh] overflow-y-auto p-4">
-                <p className="kicker text-slate-500 px-1 pb-3">Open first</p>
-                <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
-                  {FEATURED.map((result, index) => {
-                    const Icon = result.icon;
-                    const isSelected = index === selectedIndex;
+            ) : (
+              <div className="max-h-[60vh] overflow-y-auto p-3 sm:p-4">
+                <div className="rounded-2xl border border-cyan-electric/15 bg-slate-950/55 p-4 sm:p-5">
+                  <p className="kicker text-cyan-electric/70">Open first</p>
+                  <div className="mt-3 grid gap-2 sm:grid-cols-2">
+                    {FEATURED.slice(0, 1).map((result, index) => (
+                      <FeaturedTile
+                        key={result.id}
+                        result={result}
+                        index={index}
+                        isSelected={index === selectedIndex}
+                        onClick={() => handleResultClick(result)}
+                        onHover={() => setSelectedIndex(index)}
+                        wide
+                      />
+                    ))}
+                    <div className="grid gap-2">
+                      {FEATURED.slice(1, 3).map((result, index) => {
+                        const nextIndex = index + 1;
+                        return (
+                          <FeaturedTile
+                            key={result.id}
+                            result={result}
+                            index={nextIndex}
+                            isSelected={nextIndex === selectedIndex}
+                            onClick={() => handleResultClick(result)}
+                            onHover={() => setSelectedIndex(nextIndex)}
+                          />
+                        );
+                      })}
+                    </div>
+                  </div>
+                </div>
+
+                <div className="mt-4 grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
+                  {FEATURED.slice(3).map((result, index) => {
+                    const nextIndex = index + 3;
                     return (
-                      <button type="button"
+                      <FeaturedTile
                         key={result.id}
-                        ref={el => resultRefs.current[index] = el}
+                        result={result}
+                        index={nextIndex}
+                        isSelected={nextIndex === selectedIndex}
                         onClick={() => handleResultClick(result)}
-                        onMouseEnter={() => setSelectedIndex(index)}
-                        className={cn(
-                          "relative overflow-hidden text-left rounded-xl border p-4 transition-colors duration-200 min-h-[96px]",
-                          isSelected
-                            ? "border-cyan-electric/40 bg-cyan-electric/10"
-                            : "border-obsidian-border/70 bg-obsidian/50 hover:border-cyan-electric/25"
-                        )}
-                      >
-                        <div className="dossier-sheen hidden md:block" aria-hidden="true" />
-                        <div className="relative z-10 flex items-start gap-3">
-                          <Icon size={16} className={isSelected ? "text-cyan-electric" : "text-slate-500"} />
-                          <div className="min-w-0">
-                            <div className="font-display text-sm font-bold tracking-[-0.02em] text-white">{result.title}</div>
-                            {result.lede && (
-                              <p className="mt-1 font-sans text-xs text-slate-500 leading-relaxed line-clamp-2">{result.lede}</p>
-                            )}
-                          </div>
-                        </div>
-                      </button>
+                        onHover={() => setSelectedIndex(nextIndex)}
+                      />
                     );
                   })}
                 </div>

From ee1dfae833724dcfe6d869f795ca4800ad542a70 Mon Sep 17 00:00:00 2001
From: Titash Deb <titashdev@gmail.com>
Date: Thu, 27 Aug 2026 16:06:01 +0530
Subject: [PATCH 3/4] Fix featured search refs and keyboard behavior

---
 src/components/GlobalSearchModal.jsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/GlobalSearchModal.jsx b/src/components/GlobalSearchModal.jsx
index a49d6f7..55e2c72 100644
--- a/src/components/GlobalSearchModal.jsx
+++ b/src/components/GlobalSearchModal.jsx
@@ -53,12 +53,12 @@ const FEATURED = [
 
 const ARCHIVE_RAIL = ["Work", "Records", "Maps", "Docs"];
 
-function FeaturedTile({ result, index, isSelected, onClick, onHover, wide = false }) {
+function FeaturedTile({ result, isSelected, onClick, onHover, wide = false, resultRef }) {
   const Icon = result.icon;
   return (
     <button
       type="button"
-      ref={(el) => {}}
+      ref={resultRef}
       onClick={onClick}
       onMouseEnter={onHover}
       className={cn(
@@ -315,11 +315,11 @@ export default function GlobalSearchModal({ isOpen, onClose }) {
                       <FeaturedTile
                         key={result.id}
                         result={result}
-                        index={index}
                         isSelected={index === selectedIndex}
                         onClick={() => handleResultClick(result)}
                         onHover={() => setSelectedIndex(index)}
                         wide
+                        resultRef={(el) => (resultRefs.current[index] = el)}
                       />
                     ))}
                     <div className="grid gap-2">
@@ -329,10 +329,10 @@ export default function GlobalSearchModal({ isOpen, onClose }) {
                           <FeaturedTile
                             key={result.id}
                             result={result}
-                            index={nextIndex}
                             isSelected={nextIndex === selectedIndex}
                             onClick={() => handleResultClick(result)}
                             onHover={() => setSelectedIndex(nextIndex)}
+                            resultRef={(el) => (resultRefs.current[nextIndex] = el)}
                           />
                         );
                       })}
@@ -347,10 +347,10 @@ export default function GlobalSearchModal({ isOpen, onClose }) {
                       <FeaturedTile
                         key={result.id}
                         result={result}
-                        index={nextIndex}
                         isSelected={nextIndex === selectedIndex}
                         onClick={() => handleResultClick(result)}
                         onHover={() => setSelectedIndex(nextIndex)}
+                        resultRef={(el) => (resultRefs.current[nextIndex] = el)}
                       />
                     );
                   })}

From 8d308c3e4ef2f10738ddca299f8e1707f3822bf4 Mon Sep 17 00:00:00 2001
From: Titash Deb <titashdev@gmail.com>
Date: Thu, 27 Aug 2026 16:06:26 +0530
Subject: [PATCH 4/4] Make trust surfaces more graphic and staged

---
 src/components/TrustCenter.jsx | 437 +++++++++++++++++++++------------
 1 file changed, 278 insertions(+), 159 deletions(-)

diff --git a/src/components/TrustCenter.jsx b/src/components/TrustCenter.jsx
index e7c4241..efda2c9 100644
--- a/src/components/TrustCenter.jsx
+++ b/src/components/TrustCenter.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { FileText, Activity, Database, Briefcase, Mail, Link as LinkIcon, Network } from "lucide-react";
+import { FileText, Activity, Database, Briefcase, Mail, Link as LinkIcon, Network, ArrowRight } from "lucide-react";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import { ADR_RECORDS } from "../data/adrs";
@@ -9,185 +9,304 @@ import { useSystemCommand } from "../context/SystemCommandContext";
 const cn = (...inputs) => twMerge(clsx(inputs));
 
 const TRUST_SECTIONS = [
-  { id: "benchmarks", label: "Comparisons", icon: Activity },
-  { id: "adrs", label: "Records", icon: FileText },
-  { id: "reports", label: "Notes", icon: Database },
-  { id: "diagrams", label: "Diagrams", icon: Network },
-  { id: "resume", label: "Resume", icon: Briefcase },
+  { id: "benchmarks", label: "Comparisons", icon: Activity, lede: "Side by side." },
+  { id: "adrs", label: "Records", icon: FileText, lede: "Choices written down." },
+  { id: "reports", label: "Notes", icon: Database, lede: "Short, labeled notes." },
+  { id: "diagrams", label: "Diagrams", icon: Network, lede: "The map behind the rooms." },
+  { id: "resume", label: "Resume", icon: Briefcase, lede: "Open the file." },
 ];
 
+const SECTION_COPY = {
+  benchmarks: {
+    title: "Comparisons",
+    lede: "Short comparisons. No fake fields. No hidden claims.",
+    accent: "cyan-electric",
+  },
+  adrs: {
+    title: "Records",
+    lede: "Decisions, alternatives, and the cost of each choice.",
+    accent: "amber-400",
+  },
+  reports: {
+    title: "Notes",
+    lede: "A smaller set of modeled notes. Enough to read, not enough to inflate.",
+    accent: "emerald-400",
+  },
+  diagrams: {
+    title: "Diagrams",
+    lede: "A spatial view of the systems and the notes behind them.",
+    accent: "violet-400",
+  },
+  resume: {
+    title: "Resume",
+    lede: "Open the file, the profile, or the brief.",
+    accent: "rose-400",
+  },
+};
+
+function SectionButton({ section, isActive, onClick }) {
+  const Icon = section.icon;
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        "group flex items-center gap-3 rounded-xl border px-3 py-3 text-left transition-all font-sans text-sm tracking-wide",
+        isActive
+          ? "border-emerald-400/30 bg-emerald-400/10 text-white shadow-[0_0_25px_rgba(52,211,153,0.08)]"
+          : "border-transparent text-slate-400 hover:border-obsidian-border hover:bg-slate-900/70 hover:text-slate-200"
+      )}
+    >
+      <span className={cn(
+        "flex h-8 w-8 items-center justify-center rounded-lg border transition-colors",
+        isActive ? "border-emerald-400/30 bg-emerald-400/10 text-emerald-400" : "border-obsidian-border bg-obsidian-surface text-slate-500 group-hover:text-slate-300"
+      )}>
+        <Icon size={14} />
+      </span>
+      <span className="min-w-0 flex-1">
+        <span className={cn("block font-medium", isActive ? "text-white" : "text-slate-300")}>{section.label}</span>
+        <span className="block text-xs text-slate-500">{section.lede}</span>
+      </span>
+    </button>
+  );
+}
+
+function SectionShell({ title, lede, accent, children }) {
+  return (
+    <div className="space-y-4">
+      <div className="relative overflow-hidden rounded-2xl border border-obsidian-border/70 bg-slate-950/60 p-4 sm:p-5">
+        <div className={cn("absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(16,185,129,0.12),transparent_34%),radial-gradient(circle_at_top_right,rgba(16,185,129,0.08),transparent_26%)] opacity-90", accent === "amber-400" && "bg-[radial-gradient(circle_at_top_left,rgba(251,191,36,0.14),transparent_34%),radial-gradient(circle_at_top_right,rgba(251,191,36,0.08),transparent_26%)]", accent === "violet-400" && "bg-[radial-gradient(circle_at_top_left,rgba(167,139,250,0.14),transparent_34%),radial-gradient(circle_at_top_right,rgba(167,139,250,0.08),transparent_26%)]", accent === "rose-400" && "bg-[radial-gradient(circle_at_top_left,rgba(251,113,133,0.14),transparent_34%),radial-gradient(circle_at_top_right,rgba(251,113,133,0.08),transparent_26%)]", accent === "cyan-electric" && "bg-[radial-gradient(circle_at_top_left,rgba(0,240,255,0.14),transparent_34%),radial-gradient(circle_at_top_right,rgba(0,240,255,0.08),transparent_26%)]")} />
+        <div className="relative z-10 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
+          <div className="space-y-1.5">
+            <p className={cn("kicker", accent === "amber-400" && "text-amber-400/80", accent === "violet-400" && "text-violet-400/80", accent === "rose-400" && "text-rose-400/80", accent === "cyan-electric" && "text-cyan-electric/80", accent === "emerald-400" && "text-emerald-400/80")}>Archive</p>
+            <h3 className="font-display text-2xl font-extrabold tracking-[-0.04em] text-white sm:text-3xl">{title}</h3>
+            <p className="max-w-2xl font-sans text-sm text-slate-400">{lede}</p>
+          </div>
+          <div className="flex items-center gap-2 text-xs text-slate-500">
+            <span className="rounded-full border border-obsidian-border bg-slate-950/70 px-2.5 py-1 uppercase tracking-[0.2em]">Labeled</span>
+            <ArrowRight size={14} className={cn(accent === "amber-400" && "text-amber-400", accent === "violet-400" && "text-violet-400", accent === "rose-400" && "text-rose-400", accent === "cyan-electric" && "text-cyan-electric", accent === "emerald-400" && "text-emerald-400")} />
+          </div>
+        </div>
+      </div>
+      {children}
+    </div>
+  );
+}
+
 export default function TrustCenter() {
   const [activeSection, setActiveSection] = useState("benchmarks");
   const { openAdrs, openEnterpriseExplorer, openContact, openResume } = useSystemCommand();
+  const copy = SECTION_COPY[activeSection];
 
   return (
-    <div className="flex flex-col h-[75vh] min-h-[500px] border border-obsidian-border/60 rounded-xl overflow-hidden bg-obsidian-surface shadow-2xl">
-      <div className="relative overflow-hidden flex flex-col border-b border-obsidian-border/60 p-6 bg-obsidian/80">
-        <div className="dossier-sheen hidden md:block" aria-hidden="true" />
-        <div className="relative z-10 flex items-center gap-3 mb-2">
-          <h2 className="text-2xl font-display font-extrabold text-slate-100 tracking-[-0.04em]">Comparisons</h2>
+    <div className="flex h-[75vh] min-h-[500px] flex-col overflow-hidden rounded-xl border border-obsidian-border/60 bg-obsidian-surface shadow-2xl">
+      <div className="relative overflow-hidden border-b border-obsidian-border/60 bg-obsidian/85 p-6">
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(52,211,153,0.14),transparent_28%),radial-gradient(circle_at_top_right,rgba(0,240,255,0.08),transparent_24%)]" />
+        <div className="relative z-10 flex flex-col gap-5 lg:flex-row lg:items-end lg:justify-between">
+          <div className="space-y-2">
+            <p className="kicker text-emerald-400/80">Evidence</p>
+            <h2 className="font-display text-3xl font-extrabold tracking-[-0.04em] text-white sm:text-4xl">Comparisons, records, notes.</h2>
+            <p className="max-w-2xl font-sans text-sm text-slate-400">
+              Side by side, with the labels left on. This is the room for proof.
+            </p>
+          </div>
+          <div className="grid grid-cols-3 gap-2 sm:gap-3">
+            {[
+              { label: "Modeled", value: "Yes" },
+              { label: "Verified", value: "No" },
+              { label: "Runtime API", value: "None" },
+            ].map((item) => (
+              <div key={item.label} className="rounded-xl border border-obsidian-border/70 bg-slate-950/65 px-3 py-2 text-left">
+                <div className="font-sans text-[10px] uppercase tracking-[0.22em] text-slate-500">{item.label}</div>
+                <div className="mt-1 font-display text-sm font-bold tracking-[-0.02em] text-white">{item.value}</div>
+              </div>
+            ))}
+          </div>
         </div>
-        <p className="relative z-10 font-sans text-sm text-slate-400">
-          Side by side. Simulations are labeled.
-        </p>
       </div>
 
-      <div className="flex flex-1 flex-col overflow-hidden md:flex-row">
-        <div className="w-full shrink-0 border-b border-obsidian-border/60 bg-obsidian/40 overflow-x-auto overflow-y-hidden p-3 flex flex-row gap-2 md:w-64 md:flex-col md:overflow-y-auto md:overflow-x-hidden md:border-b-0 md:border-r md:p-4">
-          {TRUST_SECTIONS.map((section) => {
-            const isActive = activeSection === section.id;
-            const Icon = section.icon;
-            return (
-              <button type="button"
-                key={section.id}
-                onClick={() => setActiveSection(section.id)}
-                className={cn(
-                  "flex items-center gap-3 px-3 py-2.5 rounded-md text-left transition-colors font-sans text-sm tracking-wide",
-                  isActive
-                    ? "bg-emerald-400/10 text-emerald-400 border border-emerald-400/20"
-                    : "text-slate-400 hover:bg-slate-800 hover:text-slate-200 border border-transparent"
-                )}
-              >
-                <Icon size={14} />
-                <span>{section.label}</span>
-              </button>
-            );
-          })}
-        </div>
-
-        <div className="flex-1 overflow-y-auto p-6 bg-obsidian/20 relative">
-          {activeSection === "benchmarks" && (
-            <div className="space-y-4">
-              <h3 className="font-sans text-sm tracking-wide text-slate-400 mb-4">Comparisons</h3>
-              <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-                <EvidenceCard
-                  title="WebRTC vs HLS"
-                  status="Simulation"
-                  comparison={{
-                    frame: "An operator needs a live-feeling viewport. This is a comparison, not a field test.",
-                    chosen: "WebRTC for the loop.",
-                    notChosen: "HLS. Fine for playback, too slow if someone is still flying.",
-                    consequence: "The model stays in the sub-second range. Treat it as a teaching note, not a measured SLA.",
-                  }}
-                  relatedAdr="adr-001"
-                />
-                <EvidenceCard
-                  title="Vectors vs generation"
-                  status="Simulation"
-                  comparison={{
-                    frame: "Retrieval has to stay cheap next to the model.",
-                    chosen: "A vector store at the edge of the prompt.",
-                    notChosen: "Stuffing the whole graph into context.",
-                    consequence: "In this model, lookup is small versus generation. Numbers here are teaching artifacts.",
-                  }}
-                  relatedAdr="adr-003"
+      <div className="flex min-h-0 flex-1 flex-col overflow-hidden md:flex-row">
+        <div className="w-full shrink-0 border-b border-obsidian-border/60 bg-obsidian/45 p-3 md:w-72 md:border-b-0 md:border-r md:p-4">
+          <div className="flex gap-2 overflow-x-auto md:flex-col md:overflow-visible">
+            {TRUST_SECTIONS.map((section) => {
+              const isActive = activeSection === section.id;
+              return (
+                <SectionButton
+                  key={section.id}
+                  section={section}
+                  isActive={isActive}
+                  onClick={() => setActiveSection(section.id)}
                 />
-                <EvidenceCard
-                  title="Ingress under burst"
-                  status="Simulation"
-                  comparison={{
-                    frame: "Positions arrive faster than a naive table can take them.",
-                    chosen: "Streaming ingress with a hot cache.",
-                    notChosen: "Polling a cold relational table.",
-                    consequence: "The bottleneck moves to storage IOPS. Not a measured ingest profile.",
-                  }}
-                  relatedAdr="adr-004"
-                />
-              </div>
-            </div>
-          )}
+              );
+            })}
+          </div>
+        </div>
 
-          {activeSection === "adrs" && (
-            <div className="space-y-4">
-              <div className="flex items-center justify-between mb-4">
-                <h3 className="font-sans text-sm tracking-wide text-slate-400">Records</h3>
-                <button type="button" onClick={openAdrs} className="px-3 py-1 bg-obsidian-surface hover:bg-slate-800 border border-obsidian-border text-xs font-sans text-cyan-electric rounded transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-electric/50 min-h-[44px] sm:min-h-[auto]">
-                  Open records
-                </button>
-              </div>
-              <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-                {ADR_RECORDS.map((adr) => (
+        <div className="relative flex-1 overflow-y-auto bg-[radial-gradient(circle_at_top_left,rgba(148,163,184,0.08),transparent_35%)] p-4 sm:p-6">
+          <div className="relative z-10 space-y-5">
+            {activeSection === "benchmarks" && (
+              <SectionShell title={copy.title} lede={copy.lede} accent={copy.accent}>
+                <div className="grid gap-4 lg:grid-cols-2">
                   <EvidenceCard
-                    key={adr.id}
-                    title={adr.title}
-                    status={adr.currentStatus || "Documented"}
+                    title="WebRTC vs HLS"
+                    status="Simulation"
                     comparison={{
-                      frame: adr.problem,
-                      chosen: adr.decision,
-                      notChosen: (adr.rejectedAlternatives || []).map((a) => a.name).join(" · "),
-                      consequence: adr.consequences,
+                      frame: "An operator needs a live-feeling viewport. This is a comparison, not a field test.",
+                      chosen: "WebRTC for the loop.",
+                      notChosen: "HLS. Fine for playback, too slow if someone is still flying.",
+                      consequence: "The model stays in the sub-second range. Treat it as a teaching note, not a measured SLA.",
                     }}
-                    relatedAdr={adr.id}
+                    relatedAdr="adr-001"
                   />
-                ))}
-              </div>
-            </div>
-          )}
+                  <EvidenceCard
+                    title="Vectors vs generation"
+                    status="Simulation"
+                    comparison={{
+                      frame: "Retrieval has to stay cheap next to the model.",
+                      chosen: "A vector store at the edge of the prompt.",
+                      notChosen: "Stuffing the whole graph into context.",
+                      consequence: "In this model, lookup is small versus generation. Numbers here are teaching artifacts.",
+                    }}
+                    relatedAdr="adr-003"
+                  />
+                  <EvidenceCard
+                    title="Ingress under burst"
+                    status="Simulation"
+                    comparison={{
+                      frame: "Positions arrive faster than a naive table can take them.",
+                      chosen: "Streaming ingress with a hot cache.",
+                      notChosen: "Polling a cold relational table.",
+                      consequence: "The bottleneck moves to storage IOPS. Not a measured ingest profile.",
+                    }}
+                    relatedAdr="adr-004"
+                  />
+                </div>
+              </SectionShell>
+            )}
 
-          {activeSection === "reports" && (
-            <div className="space-y-4">
-              <h3 className="font-sans text-sm tracking-wide text-slate-400 mb-4">Notes</h3>
-              <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-                <EvidenceCard
-                  title="Clinic records"
-                  status="Simulation"
-                  comparison={{
-                    frame: "A clinic cannot guess who saw what.",
-                    chosen: "Short tokens, field encryption, an audit trail.",
-                    notChosen: "Long-lived session cookies on a shared workstation.",
-                    consequence: "The model isolates a record. It is not a certified clinic.",
-                  }}
-                  relatedAdr="adr-005"
-                />
-              </div>
-            </div>
-          )}
+            {activeSection === "adrs" && (
+              <SectionShell title={copy.title} lede={copy.lede} accent={copy.accent}>
+                <div className="flex items-center justify-between gap-4 rounded-xl border border-obsidian-border/70 bg-slate-950/60 p-4">
+                  <div>
+                    <p className="font-display text-base font-bold text-white tracking-[-0.02em]">Open the record ledger</p>
+                    <p className="mt-1 max-w-xl font-sans text-sm text-slate-400">Each card shows the choice, the constraint, and the cost of that path.</p>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={openAdrs}
+                    className="rounded-lg border border-obsidian-border bg-obsidian-surface px-3 py-2 text-xs font-sans text-cyan-electric transition-colors duration-200 hover:bg-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-electric/50"
+                  >
+                    Open records
+                  </button>
+                </div>
+                <div className="grid gap-4 lg:grid-cols-2">
+                  {ADR_RECORDS.map((adr) => (
+                    <EvidenceCard
+                      key={adr.id}
+                      title={adr.title}
+                      status={adr.currentStatus || "Documented"}
+                      comparison={{
+                        frame: adr.problem,
+                        chosen: adr.decision,
+                        notChosen: (adr.rejectedAlternatives || []).map((a) => a.name).join(" · "),
+                        consequence: adr.consequences,
+                      }}
+                      relatedAdr={adr.id}
+                    />
+                  ))}
+                </div>
+              </SectionShell>
+            )}
 
-          {activeSection === "diagrams" && (
-            <div className="space-y-4">
-              <h3 className="font-sans text-sm tracking-wide text-slate-400 mb-4">Diagrams</h3>
-              <button
-                type="button"
-                onClick={openEnterpriseExplorer}
-                className="w-full p-8 text-left rounded-xl border border-obsidian-border/70 bg-obsidian/60 hover:border-cyan-electric/40 transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-electric/50"
-              >
-                <Network size={24} className="text-cyan-electric mb-3" />
-                <p className="font-display text-lg font-bold text-white">Open the system map</p>
-                <p className="mt-1 font-sans text-sm text-slate-400">A spatial view of the case-study systems. Click a node for a short note.</p>
-              </button>
-            </div>
-          )}
+            {activeSection === "reports" && (
+              <SectionShell title={copy.title} lede={copy.lede} accent={copy.accent}>
+                <div className="grid gap-4 lg:grid-cols-2">
+                  <EvidenceCard
+                    title="Clinic records"
+                    status="Simulation"
+                    comparison={{
+                      frame: "A clinic cannot guess who saw what.",
+                      chosen: "Short tokens, field encryption, an audit trail.",
+                      notChosen: "Long-lived session cookies on a shared workstation.",
+                      consequence: "The model isolates a record. It is not a certified clinic.",
+                    }}
+                    relatedAdr="adr-005"
+                  />
+                  <div className="rounded-2xl border border-obsidian-border/70 bg-slate-950/60 p-5">
+                    <p className="kicker text-emerald-400/80">Notes</p>
+                    <h3 className="mt-2 font-display text-xl font-bold tracking-[-0.03em] text-white">Short notes only</h3>
+                    <p className="mt-2 font-sans text-sm text-slate-400">
+                      The public surface stays small. Deeper model detail lives in the archive, not in the room.
+                    </p>
+                  </div>
+                </div>
+              </SectionShell>
+            )}
 
-          {activeSection === "resume" && (
-            <div className="space-y-4">
-              <h3 className="font-sans text-sm tracking-wide text-slate-400 mb-4">Resume</h3>
-              <div className="flex flex-wrap gap-4">
-                <button type="button"
-                  onClick={openResume}
-                  className="flex flex-col items-center justify-center gap-3 p-6 border border-obsidian-border/60 rounded-lg bg-obsidian-surface hover:bg-slate-800 transition-colors duration-200 cursor-pointer w-44 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-electric/50 min-h-[44px]"
+            {activeSection === "diagrams" && (
+              <SectionShell title={copy.title} lede={copy.lede} accent={copy.accent}>
+                <button
+                  type="button"
+                  onClick={openEnterpriseExplorer}
+                  className="relative w-full overflow-hidden rounded-2xl border border-obsidian-border/70 bg-slate-950/60 p-6 text-left transition-colors duration-200 hover:border-cyan-electric/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-electric/50"
                 >
-                  <FileText size={24} className="text-cyan-electric" />
-                  <span className="font-sans text-xs text-slate-300">Resume</span>
+                  <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(0,240,255,0.12),transparent_34%),radial-gradient(circle_at_bottom_right,rgba(167,139,250,0.08),transparent_30%)]" />
+                  <div className="relative z-10 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+                    <div>
+                      <Network size={24} className="text-cyan-electric mb-3" />
+                      <p className="font-display text-2xl font-bold tracking-[-0.03em] text-white">Open the system map</p>
+                      <p className="mt-1 max-w-2xl font-sans text-sm text-slate-400">A spatial view of the case-study systems. Click a node for a short note.</p>
+                    </div>
+                    <span className="inline-flex w-fit items-center gap-2 rounded-full border border-cyan-electric/20 bg-cyan-electric/10 px-3 py-1 text-xs uppercase tracking-[0.2em] text-cyan-electric">
+                      Explore
+                      <ArrowRight size={12} />
+                    </span>
+                  </div>
                 </button>
-                <a
-                  href="https://linkedin.com/in/titashneogi"
-                  target="_blank"
-                  rel="noreferrer"
-                  className="flex flex-col items-center justify-center gap-3 p-6 border border-obsidian-border/60 rounded-lg bg-obsidian-surface hover:bg-slate-800 transition-colors duration-200 cursor-pointer w-44 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-electric/50 min-h-[44px]"
-                >
-                  <LinkIcon size={24} className="text-[#0a66c2]" />
-                  <span className="font-sans text-xs text-slate-300">LinkedIn</span>
-                </a>
-                <button type="button"
-                  onClick={openContact}
-                  className="flex flex-col items-center justify-center gap-3 p-6 border border-obsidian-border/60 rounded-lg bg-obsidian-surface hover:bg-slate-800 transition-colors duration-200 cursor-pointer w-44 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-electric/50 min-h-[44px]"
-                >
-                  <Mail size={24} className="text-emerald-400" />
-                  <span className="font-sans text-xs text-slate-300">Contact</span>
-                </button>
-              </div>
-            </div>
-          )}
+              </SectionShell>
+            )}
+
+            {activeSection === "resume" && (
+              <SectionShell title={copy.title} lede={copy.lede} accent={copy.accent}>
+                <div className="grid gap-4 sm:grid-cols-3">
+                  <button
+                    type="button"
+                    onClick={openResume}
+                    className="group flex flex-col items-start justify-between gap-8 rounded-2xl border border-obsidian-border/70 bg-slate-950/60 p-5 text-left transition-colors duration-200 hover:border-cyan-electric/30 hover:bg-cyan-electric/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-electric/50"
+                  >
+                    <FileText size={24} className="text-cyan-electric" />
+                    <div>
+                      <span className="font-display text-lg font-bold tracking-[-0.03em] text-white">Resume</span>
+                      <span className="mt-1 block text-xs text-slate-500">Open the file.</span>
+                    </div>
+                  </button>
+                  <a
+                    href="https://linkedin.com/in/titashneogi"
+                    target="_blank"
+                    rel="noreferrer"
+                    className="group flex flex-col items-start justify-between gap-8 rounded-2xl border border-obsidian-border/70 bg-slate-950/60 p-5 text-left transition-colors duration-200 hover:border-cyan-electric/30 hover:bg-cyan-electric/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-electric/50"
+                  >
+                    <LinkIcon size={24} className="text-[#0a66c2]" />
+                    <div>
+                      <span className="font-display text-lg font-bold tracking-[-0.03em] text-white">LinkedIn</span>
+                      <span className="mt-1 block text-xs text-slate-500">Open the profile.</span>
+                    </div>
+                  </a>
+                  <button
+                    type="button"
+                    onClick={openContact}
+                    className="group flex flex-col items-start justify-between gap-8 rounded-2xl border border-obsidian-border/70 bg-slate-950/60 p-5 text-left transition-colors duration-200 hover:border-emerald-400/30 hover:bg-emerald-400/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-electric/50"
+                  >
+                    <Mail size={24} className="text-emerald-400" />
+                    <div>
+                      <span className="font-display text-lg font-bold tracking-[-0.03em] text-white">Contact</span>
+                      <span className="mt-1 block text-xs text-slate-500">Open the brief.</span>
+                    </div>
+                  </button>
+                </div>
+              </SectionShell>
+            )}
+          </div>
         </div>
       </div>
     </div>