diff --git a/app/globals.css b/app/globals.css
index 5e81512..e2fa776 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -4,32 +4,37 @@
 @custom-variant dark (&:is(.dark *));
 
 :root {
-  /* Hack-ademic color palette - terminal greens, amber, deep blacks */
-  --background: oklch(0.08 0.01 150);
-  --foreground: oklch(0.85 0.08 145);
-  --card: oklch(0.12 0.015 150);
-  --card-foreground: oklch(0.85 0.08 145);
-  --popover: oklch(0.1 0.015 150);
-  --popover-foreground: oklch(0.85 0.08 145);
-  --primary: oklch(0.7 0.18 145);
-  --primary-foreground: oklch(0.08 0.01 150);
-  --secondary: oklch(0.15 0.02 150);
-  --secondary-foreground: oklch(0.75 0.12 145);
-  --muted: oklch(0.18 0.015 150);
-  --muted-foreground: oklch(0.55 0.06 145);
-  --accent: oklch(0.75 0.15 85);
-  --accent-foreground: oklch(0.08 0.01 150);
-  --destructive: oklch(0.6 0.2 25);
-  --destructive-foreground: oklch(0.95 0.01 150);
-  --border: oklch(0.22 0.03 145);
-  --input: oklch(0.15 0.02 150);
-  --ring: oklch(0.7 0.18 145);
-  --radius: 0.25rem;
+  /* Blueprint color palette - warm cream paper with blue ink */
+  --background: oklch(0.97 0.01 85);
+  --foreground: oklch(0.25 0.02 250);
+  --card: oklch(0.95 0.015 85);
+  --card-foreground: oklch(0.25 0.02 250);
+  --popover: oklch(0.96 0.01 85);
+  --popover-foreground: oklch(0.25 0.02 250);
+  --primary: oklch(0.45 0.15 250);
+  --primary-foreground: oklch(0.98 0.01 85);
+  --secondary: oklch(0.92 0.02 85);
+  --secondary-foreground: oklch(0.35 0.08 250);
+  --muted: oklch(0.90 0.015 85);
+  --muted-foreground: oklch(0.45 0.04 250);
+  --accent: oklch(0.55 0.12 30);
+  --accent-foreground: oklch(0.98 0.01 85);
+  --destructive: oklch(0.55 0.2 25);
+  --destructive-foreground: oklch(0.98 0.01 85);
+  --border: oklch(0.75 0.06 250);
+  --input: oklch(0.92 0.02 85);
+  --ring: oklch(0.45 0.15 250);
+  --radius: 0.125rem;
+
+  /* Blueprint specific */
+  --grid-color: oklch(0.75 0.08 250 / 0.3);
+  --sketch-color: oklch(0.35 0.12 250);
+  --annotation-color: oklch(0.50 0.15 30);
 }
 
 @theme inline {
-  --font-sans: "JetBrains Mono", "Fira Code", "SF Mono", "Monaco", monospace;
-  --font-mono: "JetBrains Mono", "Fira Code", "SF Mono", "Monaco", monospace;
+  --font-sans: "Inter", "Helvetica Neue", system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", "Fira Code", monospace;
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);
@@ -49,7 +54,7 @@
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
-  --radius-sm: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 1px);
   --radius-md: var(--radius);
   --radius-lg: calc(var(--radius) + 2px);
 }
@@ -60,16 +65,14 @@
   }
 
   body {
-    @apply bg-background text-foreground font-mono;
-    cursor: none;
+    @apply bg-background text-foreground;
+    font-family: var(--font-sans);
+    /* Blueprint grid paper background */
     background-image:
-      linear-gradient(rgba(0, 255, 100, 0.02) 1px, transparent 1px),
-      linear-gradient(90deg, rgba(0, 255, 100, 0.02) 1px, transparent 1px);
-    background-size: 20px 20px;
-  }
-
-  a, button, [role="button"] {
-    cursor: none;
+      linear-gradient(var(--grid-color) 1px, transparent 1px),
+      linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
+    background-size: 24px 24px;
+    background-position: -1px -1px;
   }
 
   html {
@@ -77,102 +80,102 @@
   }
 
   ::selection {
-    background: rgba(52, 211, 153, 0.3);
-    color: #fff;
+    background: oklch(0.45 0.15 250 / 0.25);
+    color: oklch(0.20 0.02 250);
   }
 }
 
-/* Scanline effect overlay */
-.scanlines::before {
-  content: "";
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 9990;
-  background: repeating-linear-gradient(
-    0deg,
-    rgba(0, 0, 0, 0.1),
-    rgba(0, 0, 0, 0.1) 1px,
-    transparent 1px,
-    transparent 2px
-  );
-  opacity: 0.3;
-}
-
-/* Glitch text effect */
-.glitch {
+/* Sketch/hand-drawn border effect */
+.sketch-border {
   position: relative;
+  border: 2px solid var(--sketch-color);
+  border-radius: 2px;
 }
 
-.glitch::before,
-.glitch::after {
-  content: attr(data-text);
+.sketch-border::before {
+  content: "";
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  inset: -3px;
+  border: 1px solid var(--sketch-color);
+  border-radius: 3px;
+  opacity: 0.3;
+  pointer-events: none;
 }
 
-.glitch::before {
-  animation: glitch-1 2s infinite linear alternate-reverse;
-  color: #ff0000;
-  z-index: -1;
+/* Blueprint card styling */
+.blueprint-card {
+  background: oklch(0.96 0.01 85 / 0.9);
+  border: 1.5px solid var(--sketch-color);
+  border-radius: 2px;
+  box-shadow:
+    3px 3px 0 oklch(0.45 0.15 250 / 0.1),
+    inset 0 0 0 1px oklch(0.45 0.15 250 / 0.05);
 }
 
-.glitch::after {
-  animation: glitch-2 3s infinite linear alternate-reverse;
-  color: #00ffff;
-  z-index: -2;
+/* Node/diagram point styling */
+.node-point {
+  width: 12px;
+  height: 12px;
+  border: 2px solid var(--sketch-color);
+  border-radius: 50%;
+  background: var(--background);
 }
 
-@keyframes glitch-1 {
-  0%, 100% { clip-path: inset(0 0 95% 0); transform: translate(-2px, 2px); }
-  20% { clip-path: inset(30% 0 50% 0); transform: translate(2px, -2px); }
-  40% { clip-path: inset(60% 0 20% 0); transform: translate(-2px, 0); }
-  60% { clip-path: inset(10% 0 70% 0); transform: translate(0, 2px); }
-  80% { clip-path: inset(80% 0 5% 0); transform: translate(2px, 0); }
+.node-point.filled {
+  background: var(--sketch-color);
 }
 
-@keyframes glitch-2 {
-  0%, 100% { clip-path: inset(95% 0 0 0); transform: translate(2px, -2px); }
-  20% { clip-path: inset(50% 0 30% 0); transform: translate(-2px, 2px); }
-  40% { clip-path: inset(20% 0 60% 0); transform: translate(2px, 0); }
-  60% { clip-path: inset(70% 0 10% 0); transform: translate(0, -2px); }
-  80% { clip-path: inset(5% 0 80% 0); transform: translate(-2px, 0); }
+/* Connection lines */
+.connection-line {
+  stroke: var(--sketch-color);
+  stroke-width: 1.5;
+  stroke-dasharray: 4 2;
+  fill: none;
 }
 
-/* Terminal cursor blink */
-@keyframes blink {
-  0%, 50% { opacity: 1; }
-  51%, 100% { opacity: 0; }
+.connection-line.solid {
+  stroke-dasharray: none;
 }
 
-.cursor-blink::after {
-  content: "_";
-  animation: blink 1s step-end infinite;
+/* Annotation styling */
+.annotation {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  color: var(--annotation-color);
+  font-style: italic;
 }
 
-/* Typing effect */
-@keyframes typing {
-  from { width: 0; }
-  to { width: 100%; }
+.annotation::before {
+  content: "// ";
+  opacity: 0.6;
 }
 
-.typing {
-  overflow: hidden;
-  white-space: nowrap;
-  animation: typing 2s steps(40, end);
+/* Section label - like blueprint labels */
+.section-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.25rem 0.75rem;
+  background: var(--sketch-color);
+  color: var(--background);
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  font-weight: 500;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
 }
 
-/* Fade in from below */
+/* Handwritten-style text */
+.handwritten {
+  font-family: "Caveat", "Comic Sans MS", cursive;
+  font-size: 1.1em;
+}
+
+/* Fade in animation */
 @keyframes fadeInUp {
   from {
     opacity: 0;
-    transform: translateY(30px);
+    transform: translateY(20px);
   }
   to {
     opacity: 1;
@@ -181,110 +184,7 @@
 }
 
 .fade-in-up {
-  animation: fadeInUp 0.8s ease-out forwards;
-}
-
-/* Glow pulse */
-@keyframes glow-pulse {
-  0%, 100% {
-    box-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
-    opacity: 0.8;
-  }
-  50% {
-    box-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor;
-    opacity: 1;
-  }
-}
-
-.glow-pulse {
-  animation: glow-pulse 2s ease-in-out infinite;
-}
-
-/* Matrix rain character style */
-.matrix-char {
-  font-family: monospace;
-  text-shadow: 0 0 8px currentColor;
-}
-
-/* Terminal window styling */
-.terminal-window {
-  background: linear-gradient(180deg, rgba(15, 23, 20, 0.95) 0%, rgba(10, 18, 15, 0.98) 100%);
-  border: 1px solid rgba(52, 211, 153, 0.3);
-  box-shadow:
-    0 0 20px rgba(52, 211, 153, 0.1),
-    inset 0 0 60px rgba(0, 0, 0, 0.5);
-}
-
-.terminal-header {
-  background: linear-gradient(180deg, rgba(52, 211, 153, 0.15) 0%, rgba(52, 211, 153, 0.05) 100%);
-  border-bottom: 1px solid rgba(52, 211, 153, 0.2);
-}
-
-/* Academic citation style */
-.citation {
-  font-size: 0.75rem;
-  color: rgba(52, 211, 153, 0.6);
-  font-style: italic;
-}
-
-.citation::before {
-  content: "[";
-}
-
-.citation::after {
-  content: "]";
-}
-
-/* Code block styling */
-.code-block {
-  background: rgba(0, 0, 0, 0.4);
-  border-left: 3px solid rgba(52, 211, 153, 0.5);
-  padding: 1rem;
-  font-family: monospace;
-  overflow-x: auto;
-}
-
-/* Neon border */
-.neon-border {
-  border: 1px solid rgba(52, 211, 153, 0.5);
-  box-shadow:
-    0 0 5px rgba(52, 211, 153, 0.3),
-    inset 0 0 5px rgba(52, 211, 153, 0.1);
-}
-
-/* Hover glow effect */
-.hover-glow {
-  transition: all 0.3s ease;
-}
-
-.hover-glow:hover {
-  box-shadow: 0 0 20px rgba(52, 211, 153, 0.4);
-  border-color: rgba(52, 211, 153, 0.8);
-}
-
-/* ASCII art container */
-.ascii-art {
-  font-family: monospace;
-  white-space: pre;
-  line-height: 1.1;
-  font-size: 0.5rem;
-  color: rgba(52, 211, 153, 0.4);
-}
-
-@media (min-width: 768px) {
-  .ascii-art {
-    font-size: 0.6rem;
-  }
-}
-
-/* Floating animation */
-@keyframes float {
-  0%, 100% { transform: translateY(0px); }
-  50% { transform: translateY(-10px); }
-}
-
-.animate-float {
-  animation: float 4s ease-in-out infinite;
+  animation: fadeInUp 0.6s ease-out forwards;
 }
 
 /* Stagger animation delays */
@@ -293,3 +193,108 @@
 .stagger-3 { animation-delay: 0.3s; }
 .stagger-4 { animation-delay: 0.4s; }
 .stagger-5 { animation-delay: 0.5s; }
+
+/* Cursor blink for typing effect */
+@keyframes blink {
+  0%, 50% { opacity: 1; }
+  51%, 100% { opacity: 0; }
+}
+
+.cursor-blink::after {
+  content: "|";
+  animation: blink 1s step-end infinite;
+  margin-left: 2px;
+}
+
+/* Graph/chart styling */
+.graph-axis {
+  stroke: var(--sketch-color);
+  stroke-width: 1.5;
+}
+
+.graph-label {
+  font-family: var(--font-mono);
+  font-size: 0.65rem;
+  fill: var(--muted-foreground);
+}
+
+/* Tag/label styling */
+.tag {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.125rem 0.5rem;
+  border: 1px solid var(--border);
+  border-radius: 1px;
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  color: var(--muted-foreground);
+  background: var(--secondary);
+}
+
+.tag.primary {
+  border-color: var(--primary);
+  color: var(--primary);
+  background: oklch(0.45 0.15 250 / 0.08);
+}
+
+/* Dimension lines (like architectural drawings) */
+.dimension-line {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.dimension-line::before,
+.dimension-line::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: var(--border);
+}
+
+/* Crosshatch pattern for backgrounds */
+.crosshatch {
+  background-image:
+    repeating-linear-gradient(
+      45deg,
+      transparent,
+      transparent 4px,
+      oklch(0.45 0.15 250 / 0.03) 4px,
+      oklch(0.45 0.15 250 / 0.03) 5px
+    );
+}
+
+/* Hover lift effect */
+.hover-lift {
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.hover-lift:hover {
+  transform: translateY(-2px);
+  box-shadow: 4px 4px 0 oklch(0.45 0.15 250 / 0.15);
+}
+
+/* Link styling */
+a.blueprint-link {
+  color: var(--primary);
+  text-decoration: none;
+  border-bottom: 1px dashed var(--primary);
+  transition: border-color 0.2s;
+}
+
+a.blueprint-link:hover {
+  border-bottom-style: solid;
+}
+
+/* Status indicators */
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  border: 1.5px solid currentColor;
+}
+
+.status-dot.active {
+  background: currentColor;
+}
diff --git a/components/about-section.tsx b/components/about-section.tsx
index 7312d34..cabcd80 100644
--- a/components/about-section.tsx
+++ b/components/about-section.tsx
@@ -1,152 +1,126 @@
 "use client"
 
-const MYCELIUM_ASCII = `
-    ╭───╮     ╭───╮
-    │ ◉ ├─────┤ ◉ │
-    ╰─┬─╯     ╰─┬─╯
-      │    ╭────┴────╮
-   ╭──┴──╮ │  NODES  │
-   │ ◉◉◉ ├─┤ CONNECT │
-   ╰──┬──╯ ╰────┬────╯
-      │         │
-   ═══╧═════════╧═══
-`
-
-const BIO_BLOCKS = [
+const FOCUS_AREAS = [
   {
-    command: "cat identity.yml",
-    content: `name: "Jeff Emmett"
-role: "Token Engineering Researcher"
-focus: ["regenerative_systems", "crypto_commons", "emancipatory_tech"]
-affiliation: ["Commons Stack", "MycoFi", "Bonding Curve Research Group"]`,
+    label: "Token Engineering",
+    description: "Designing sustainable crypto-economic systems",
+    items: ["Bonding Curves", "cadCAD Modeling", "Primary Issuance Markets"],
   },
   {
-    command: "cat mission.md",
-    content: `## Core Mission
-
-Designing cyber-physical commons architectures that translate
-Elinor Ostrom's principles into DAO templates. Building
-customizable libraries for communal management of public goods.
-
-> "Just as the Golden Gate Bridge required rigorous engineering,
->  our token economies need mathematical validation."`,
+    label: "Governance",
+    description: "Mechanisms for collective decision-making",
+    items: ["Conviction Voting", "DAO Templates", "Ostrom Principles"],
   },
   {
-    command: "cat research_focus.txt",
-    content: `PRIMARY ISSUANCE MARKETS
-└── Challenging fixed-supply paradigm
-└── Dynamic token mechanisms
-└── Volatility dampening
-└── Sustainable ecosystem revenue
-
-MYCOECONOMICS
-└── Fungal network-inspired economics
-└── Evolutionary resource allocation
-└── Regenerative protocol design
-└── Mutual aid & permaculture currency`,
+    label: "Regenerative Economics",
+    description: "Beyond extractive growth models",
+    items: ["MycoFi", "Commons-based Systems", "Mutual Aid"],
   },
 ]
 
-const STATS = [
-  { value: "2015", label: "// origin_block", subtext: "First entry into Web3" },
-  { value: "8+", label: "// years_exp", subtext: "Token Engineering" },
-  { value: "∞", label: "// impact_scope", subtext: "Regenerative systems" },
-]
-
 export function AboutSection() {
   return (
-    <section id="about" className="py-20 px-4 md:px-6 bg-black/30">
+    <section id="about" className="py-20 px-4 md:px-6 crosshatch">
       <div className="max-w-4xl mx-auto">
         {/* Section header */}
         <div className="mb-12">
-          <div className="flex items-center gap-4 mb-4">
-            <span className="text-emerald-500 text-sm">$</span>
-            <h2 className="text-2xl md:text-3xl font-bold text-emerald-400">
-              whoami
-            </h2>
+          <span className="section-label">About</span>
+          <h2 className="text-3xl md:text-4xl font-light mt-6 mb-4">
+            Background
+          </h2>
+        </div>
+
+        {/* Main content card */}
+        <div className="blueprint-card p-8 md:p-10 mb-12">
+          <div className="space-y-6 text-muted-foreground leading-relaxed">
+            <p>
+              I'm a token engineering researcher and systems designer exploring the
+              intersection of economics, ecology, and decentralized coordination. My work
+              focuses on creating tools and frameworks that enable communities to manage
+              shared resources sustainably and equitably.
+            </p>
+
+            <p>
+              As a co-founder of the <strong className="text-foreground">Commons Stack</strong>,
+              I've been instrumental in developing cyber-physical commons architectures
+              that translate Elinor Ostrom's principles into DAO templates. We build
+              customizable libraries of tools for communal management of public goods.
+            </p>
+
+            <p>
+              Through <strong className="text-foreground">MycoFi</strong>, I explore
+              mycoeconomics—economic systems inspired by fungal networks. By emulating
+              nature's evolutionary resource allocation algorithms, we can design
+              regenerative protocols built on cooperation rather than extraction.
+            </p>
           </div>
-          <div className="code-block">
-            <p className="text-muted-foreground text-sm">
-              # Operator Profile
-            </p>
-            <p className="text-muted-foreground text-sm">
-              ## Token engineer, systems thinker, regenerative economist
-            </p>
+
+          {/* Timeline markers */}
+          <div className="mt-10 pt-8 border-t border-border">
+            <div className="flex items-center gap-4 mb-4">
+              <div className="node-point filled" />
+              <span className="text-sm text-muted-foreground font-mono">2015</span>
+              <span className="text-sm">Entered Web3</span>
+            </div>
+            <svg className="ml-1.5 h-8 w-px text-border">
+              <line x1="0" y1="0" x2="0" y2="32" stroke="currentColor" strokeWidth="2" strokeDasharray="4 2" />
+            </svg>
+            <div className="flex items-center gap-4 mb-4">
+              <div className="node-point filled" />
+              <span className="text-sm text-muted-foreground font-mono">2018</span>
+              <span className="text-sm">Co-founded Commons Stack</span>
+            </div>
+            <svg className="ml-1.5 h-8 w-px text-border">
+              <line x1="0" y1="0" x2="0" y2="32" stroke="currentColor" strokeWidth="2" strokeDasharray="4 2" />
+            </svg>
+            <div className="flex items-center gap-4 mb-4">
+              <div className="node-point filled" />
+              <span className="text-sm text-muted-foreground font-mono">2023</span>
+              <span className="text-sm">Launched MycoFi</span>
+            </div>
+            <svg className="ml-1.5 h-8 w-px text-border">
+              <line x1="0" y1="0" x2="0" y2="32" stroke="currentColor" strokeWidth="2" strokeDasharray="4 2" />
+            </svg>
+            <div className="flex items-center gap-4">
+              <div className="node-point" />
+              <span className="text-sm text-muted-foreground font-mono">now</span>
+              <span className="text-sm text-muted-foreground">Continuing to build...</span>
+            </div>
           </div>
         </div>
 
-        {/* ASCII art and bio blocks */}
-        <div className="grid md:grid-cols-3 gap-8 mb-12">
-          {/* ASCII Mycelium */}
-          <div className="hidden md:block">
-            <pre className="ascii-art text-emerald-400/50 text-xs leading-tight">
-              {MYCELIUM_ASCII}
-            </pre>
-            <p className="text-xs text-muted-foreground mt-4 text-center">
-              mycelial_network.active
-            </p>
-          </div>
-
-          {/* Bio blocks */}
-          <div className="md:col-span-2 space-y-6">
-            {BIO_BLOCKS.map((block, index) => (
-              <div
-                key={index}
-                className="terminal-window rounded-lg overflow-hidden fade-in-up"
-                style={{ animationDelay: `${index * 0.15}s` }}
-              >
-                <div className="terminal-header px-4 py-2">
-                  <span className="text-xs text-emerald-400/60 font-mono">
-                    jeff@emmett:~$ {block.command}
-                  </span>
-                </div>
-                <div className="p-4">
-                  <pre className="text-sm text-emerald-300/80 whitespace-pre-wrap font-mono leading-relaxed">
-                    {block.content}
-                  </pre>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        {/* Stats grid */}
-        <div className="grid grid-cols-3 gap-4">
-          {STATS.map((stat, index) => (
+        {/* Focus areas as a diagram */}
+        <div className="grid md:grid-cols-3 gap-6">
+          {FOCUS_AREAS.map((area, index) => (
             <div
-              key={index}
-              className="terminal-window rounded-lg p-4 text-center fade-in-up"
-              style={{ animationDelay: `${0.5 + index * 0.1}s` }}
+              key={area.label}
+              className="blueprint-card p-6 fade-in-up"
+              style={{ animationDelay: `${index * 0.1}s` }}
             >
-              <div className="text-3xl md:text-4xl font-bold text-emerald-400 mb-1">
-                {stat.value}
-              </div>
-              <div className="text-xs text-cyan-400/70 font-mono mb-1">
-                {stat.label}
-              </div>
-              <div className="text-xs text-muted-foreground">
-                {stat.subtext}
+              <div className="flex items-center gap-3 mb-4">
+                <div className="node-point filled" />
+                <h3 className="font-medium">{area.label}</h3>
               </div>
+              <p className="text-sm text-muted-foreground mb-4">
+                {area.description}
+              </p>
+              <ul className="space-y-2">
+                {area.items.map((item) => (
+                  <li key={item} className="text-sm flex items-center gap-2">
+                    <span className="w-1.5 h-px bg-border" />
+                    {item}
+                  </li>
+                ))}
+              </ul>
             </div>
           ))}
         </div>
 
-        {/* Tools declaration */}
-        <div className="mt-12 code-block">
-          <p className="text-amber-400 text-sm">/* Open Source Contributions */</p>
-          <p className="text-emerald-400/80 text-sm mt-2">
-            <span className="text-cyan-400">export const</span> tools = [
+        {/* Annotation */}
+        <div className="mt-8">
+          <p className="annotation">
+            Just as bridges require engineering, our token economies need mathematical validation
           </p>
-          <p className="text-emerald-400/80 text-sm pl-4">
-            "cadCAD", <span className="text-muted-foreground">// Token economy simulation</span>
-          </p>
-          <p className="text-emerald-400/80 text-sm pl-4">
-            "Conviction Voting", <span className="text-muted-foreground">// Novel governance mechanism</span>
-          </p>
-          <p className="text-emerald-400/80 text-sm pl-4">
-            "Augmented Bonding Curves", <span className="text-muted-foreground">// Sustainable funding</span>
-          </p>
-          <p className="text-emerald-400/80 text-sm">];</p>
         </div>
       </div>
     </section>
diff --git a/components/contact-section.tsx b/components/contact-section.tsx
index cddfa6a..8b7ca3b 100644
--- a/components/contact-section.tsx
+++ b/components/contact-section.tsx
@@ -1,178 +1,120 @@
 "use client"
 
-const NETWORK_NODES = [
+const CONNECTIONS = [
   {
-    protocol: "mailto:",
-    address: "jeff@commonsstack.org",
-    label: "email",
-    icon: "📧",
-    description: "pgp_key_available",
+    label: "Email",
+    value: "jeff@commonsstack.org",
+    href: "mailto:jeff@commonsstack.org",
   },
   {
-    protocol: "https://",
-    address: "bsky.app/profile/jeffemmett.bsky.social",
-    label: "bluesky",
-    icon: "🦋",
-    description: "@jeffemmett",
+    label: "Bluesky",
+    value: "@jeffemmett",
+    href: "https://bsky.app/profile/jeffemmett.bsky.social",
   },
   {
-    protocol: "https://",
-    address: "twitter.com/JeffEmmett",
-    label: "x/twitter",
-    icon: "𝕏",
-    description: "@JeffEmmett",
+    label: "X/Twitter",
+    value: "@JeffEmmett",
+    href: "https://twitter.com/JeffEmmett",
   },
   {
-    protocol: "https://",
-    address: "medium.com/@jeffemmett",
-    label: "medium",
-    icon: "📝",
-    description: "long_form_research",
-  },
-  {
-    protocol: "https://",
-    address: "commonsstack.org",
-    label: "commons_stack",
-    icon: "🏛️",
-    description: "primary_organization",
-  },
-  {
-    protocol: "https://",
-    address: "mycofi.earth",
-    label: "mycofi",
-    icon: "🍄",
-    description: "mycoeconomics_research",
+    label: "Medium",
+    value: "jeffemmett",
+    href: "https://medium.com/@jeffemmett",
   },
 ]
 
-const ASCII_NETWORK = `
-     ◉─────◉─────◉
-     │╲   ╱│╲   ╱│
-     │ ╲ ╱ │ ╲ ╱ │
-     ◉──◉──◉──◉──◉
-     │ ╱ ╲ │ ╱ ╲ │
-     │╱   ╲│╱   ╲│
-     ◉─────◉─────◉
-`
+const PROJECTS = [
+  {
+    label: "Commons Stack",
+    href: "https://commonsstack.org",
+  },
+  {
+    label: "MycoFi",
+    href: "https://mycofi.earth",
+  },
+  {
+    label: "Token Engineering",
+    href: "https://tokenengineering.net",
+  },
+]
 
 export function ContactSection() {
   return (
-    <section id="connect" className="py-20 px-4 md:px-6 bg-black/30">
+    <section id="connect" className="py-20 px-4 md:px-6 crosshatch">
       <div className="max-w-4xl mx-auto">
         {/* Section header */}
         <div className="mb-12">
-          <div className="flex items-center gap-4 mb-4">
-            <span className="text-emerald-500 text-sm">$</span>
-            <h2 className="text-2xl md:text-3xl font-bold text-emerald-400">
-              ssh connect@jeff.emmett
-            </h2>
-          </div>
-          <div className="code-block">
-            <p className="text-muted-foreground text-sm">
-              # Establish Connection
-            </p>
-            <p className="text-muted-foreground text-sm">
-              ## Token engineering, regenerative economics, commons-based systems
-            </p>
-          </div>
+          <span className="section-label">Connect</span>
+          <h2 className="text-3xl md:text-4xl font-light mt-6 mb-4">
+            Get In Touch
+          </h2>
+          <p className="text-muted-foreground max-w-2xl">
+            Interested in token engineering, regenerative economics, or building
+            commons-based systems? Let's collaborate.
+          </p>
         </div>
 
-        {/* Network visualization + links */}
-        <div className="grid md:grid-cols-3 gap-8 mb-12">
-          {/* ASCII Network */}
-          <div className="hidden md:flex flex-col items-center justify-center">
-            <pre className="ascii-art text-emerald-400/40 text-sm">
-              {ASCII_NETWORK}
-            </pre>
-            <p className="text-xs text-muted-foreground mt-2">
-              node_mesh.active
-            </p>
+        {/* Connection grid */}
+        <div className="grid md:grid-cols-2 gap-8 mb-12">
+          {/* Direct contact */}
+          <div className="blueprint-card p-6">
+            <div className="flex items-center gap-3 mb-6">
+              <div className="node-point filled" />
+              <h3 className="font-medium">Direct</h3>
+            </div>
+            <div className="space-y-4">
+              {CONNECTIONS.map((connection) => (
+                <a
+                  key={connection.label}
+                  href={connection.href}
+                  target={connection.href.startsWith("mailto:") ? undefined : "_blank"}
+                  rel="noopener noreferrer"
+                  className="flex items-center justify-between py-2 group"
+                >
+                  <span className="text-sm text-muted-foreground">
+                    {connection.label}
+                  </span>
+                  <span className="text-sm blueprint-link">
+                    {connection.value}
+                  </span>
+                </a>
+              ))}
+            </div>
           </div>
 
-          {/* Connection nodes */}
-          <div className="md:col-span-2 grid grid-cols-2 gap-4">
-            {NETWORK_NODES.map((node, index) => (
-              <a
-                key={node.label}
-                href={`${node.protocol}${node.address}`}
-                target={node.protocol === "mailto:" ? undefined : "_blank"}
-                rel="noopener noreferrer"
-                className="terminal-window rounded-lg p-4 hover-glow transition-all group fade-in-up"
-                style={{ animationDelay: `${index * 0.1}s` }}
-              >
-                <div className="flex items-start gap-3">
-                  <span className="text-2xl">{node.icon}</span>
-                  <div className="flex-1 min-w-0">
-                    <div className="flex items-center gap-2">
-                      <span className="text-emerald-400 text-sm font-mono">
-                        {node.label}
-                      </span>
-                      <span className="text-emerald-400 opacity-0 group-hover:opacity-100 transition-opacity">
-                        →
-                      </span>
-                    </div>
-                    <p className="text-xs text-muted-foreground truncate">
-                      {node.description}
-                    </p>
-                  </div>
-                </div>
-              </a>
-            ))}
-          </div>
-        </div>
-
-        {/* Connection prompt */}
-        <div className="terminal-window rounded-lg overflow-hidden mb-8">
-          <div className="terminal-header px-4 py-2">
-            <span className="text-xs text-emerald-400/60 font-mono">
-              connection_status
-            </span>
-          </div>
-          <div className="p-4 md:p-6 font-mono text-sm">
-            <p className="text-emerald-400">
-              <span className="text-cyan-400">$</span> ping collaboration.request
-            </p>
-            <p className="text-muted-foreground mt-2">
-              PING collaboration.request (∞.∞.∞.∞): 56 data bytes
-            </p>
-            <p className="text-emerald-400/70 mt-1">
-              64 bytes from jeff@emmett: icmp_seq=0 ttl=∞ time={"<"}1ms
-            </p>
-            <p className="text-emerald-400/70">
-              64 bytes from jeff@emmett: icmp_seq=1 ttl=∞ time={"<"}1ms
-            </p>
-            <p className="text-muted-foreground mt-2">
-              --- collaboration.request ping statistics ---
-            </p>
-            <p className="text-emerald-400 mt-1">
-              <span className="text-amber-400">STATUS:</span> READY_TO_CONNECT
-            </p>
-            <p className="text-muted-foreground text-xs mt-3">
-              Interested in token engineering, regenerative economics, or building
-              commons-based systems? Let's collaborate.
-            </p>
+          {/* Projects */}
+          <div className="blueprint-card p-6">
+            <div className="flex items-center gap-3 mb-6">
+              <div className="node-point filled" />
+              <h3 className="font-medium">Projects</h3>
+            </div>
+            <div className="space-y-4">
+              {PROJECTS.map((project, index) => (
+                <a
+                  key={project.label}
+                  href={project.href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center gap-3 py-2 group fade-in-up"
+                  style={{ animationDelay: `${index * 0.1}s` }}
+                >
+                  <div className="node-point group-hover:filled transition-colors" />
+                  <span className="text-sm">{project.label}</span>
+                  <span className="text-muted-foreground text-sm ml-auto">→</span>
+                </a>
+              ))}
+            </div>
           </div>
         </div>
 
         {/* Footer */}
-        <div className="border-t border-emerald-500/20 pt-8">
+        <div className="border-t border-border pt-8">
           <div className="flex flex-col md:flex-row items-center justify-between gap-4">
-            <div className="code-block px-4 py-2">
-              <p className="text-xs text-muted-foreground">
-                <span className="text-amber-400">/*</span> Built with Next.js +
-                TailwindCSS <span className="text-amber-400">*/</span>
-              </p>
-            </div>
-            <div className="flex items-center gap-4 text-xs text-muted-foreground">
-              <span>©{" "}{new Date().getFullYear()}</span>
-              <span className="text-emerald-400">jeff.emmett</span>
-              <span className="text-cyan-400">|</span>
-              <span>open_source_human</span>
-            </div>
-          </div>
-          <div className="mt-4 text-center">
-            <p className="citation">
-              "Building regenerative systems one token at a time."
+            <p className="text-sm text-muted-foreground">
+              © {new Date().getFullYear()} Jeff Emmett
+            </p>
+            <p className="annotation">
+              Building regenerative systems, one token at a time
             </p>
           </div>
         </div>
diff --git a/components/cursor-effect.tsx b/components/cursor-effect.tsx
index 2d482ce..e48e3ed 100644
--- a/components/cursor-effect.tsx
+++ b/components/cursor-effect.tsx
@@ -1,197 +1,101 @@
 'use client'
 
-import { useEffect, useState, useCallback } from 'react'
-
-interface Particle {
-  id: number
-  x: number
-  y: number
-  char: string
-  opacity: number
-  velocity: { x: number; y: number }
-  life: number
-}
-
-const MATRIX_CHARS = '01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン∞∂∆∇∫∮≈≠≤≥'
+import { useEffect, useState } from 'react'
 
 export function CursorEffect() {
   const [position, setPosition] = useState({ x: -100, y: -100 })
   const [isHovering, setIsHovering] = useState(false)
-  const [particles, setParticles] = useState<Particle[]>([])
-  const [glitchOffset, setGlitchOffset] = useState({ x: 0, y: 0 })
-
-  const createParticle = useCallback((x: number, y: number): Particle => {
-    const angle = Math.random() * Math.PI * 2
-    const speed = Math.random() * 2 + 1
-    return {
-      id: Date.now() + Math.random(),
-      x,
-      y,
-      char: MATRIX_CHARS[Math.floor(Math.random() * MATRIX_CHARS.length)],
-      opacity: 1,
-      velocity: {
-        x: Math.cos(angle) * speed,
-        y: Math.sin(angle) * speed + 1, // slight downward bias
-      },
-      life: 1,
-    }
-  }, [])
+  const [isVisible, setIsVisible] = useState(false)
 
   useEffect(() => {
-    let frameId: number
-    let lastTime = 0
-
-    const animate = (time: number) => {
-      if (time - lastTime > 50) {
-        setParticles(prev =>
-          prev
-            .map(p => ({
-              ...p,
-              x: p.x + p.velocity.x,
-              y: p.y + p.velocity.y,
-              life: p.life - 0.02,
-              opacity: p.life,
-            }))
-            .filter(p => p.life > 0)
-        )
-        lastTime = time
-      }
-      frameId = requestAnimationFrame(animate)
-    }
-
-    frameId = requestAnimationFrame(animate)
-    return () => cancelAnimationFrame(frameId)
-  }, [])
-
-  useEffect(() => {
-    let particleThrottle = 0
-
     const handleMouseMove = (e: MouseEvent) => {
       setPosition({ x: e.clientX, y: e.clientY })
-
-      // Spawn particles occasionally
-      particleThrottle++
-      if (particleThrottle % 3 === 0) {
-        setParticles(prev => [...prev.slice(-30), createParticle(e.clientX, e.clientY)])
-      }
-
-      // Random glitch effect
-      if (Math.random() > 0.95) {
-        setGlitchOffset({
-          x: (Math.random() - 0.5) * 10,
-          y: (Math.random() - 0.5) * 10,
-        })
-        setTimeout(() => setGlitchOffset({ x: 0, y: 0 }), 50)
-      }
+      setIsVisible(true)
 
       const target = e.target as HTMLElement
       const isInteractive = target.closest('a, button, [role="button"], input, textarea')
       setIsHovering(!!isInteractive)
     }
 
+    const handleMouseLeave = () => {
+      setIsVisible(false)
+    }
+
     window.addEventListener('mousemove', handleMouseMove)
-    return () => window.removeEventListener('mousemove', handleMouseMove)
-  }, [createParticle])
+    document.addEventListener('mouseleave', handleMouseLeave)
+
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove)
+      document.removeEventListener('mouseleave', handleMouseLeave)
+    }
+  }, [])
+
+  if (!isVisible) return null
 
   return (
     <>
-      {/* Matrix particle trail */}
-      {particles.map(particle => (
-        <span
-          key={particle.id}
-          className="pointer-events-none fixed z-[9996] font-mono text-xs select-none"
-          style={{
-            left: particle.x,
-            top: particle.y,
-            opacity: particle.opacity * 0.6,
-            color: `hsl(${120 + Math.random() * 20}, 100%, ${50 + particle.opacity * 30}%)`,
-            textShadow: '0 0 8px currentColor',
-            transform: 'translate(-50%, -50%)',
-          }}
-        >
-          {particle.char}
-        </span>
-      ))}
-
-      {/* Main cursor - terminal style */}
+      {/* Simple crosshair cursor */}
       <div
-        className="pointer-events-none fixed z-[9999]"
+        className="pointer-events-none fixed z-[9999] mix-blend-difference"
         style={{
-          left: position.x + glitchOffset.x,
-          top: position.y + glitchOffset.y,
+          left: position.x,
+          top: position.y,
           transform: 'translate(-50%, -50%)',
         }}
       >
-        {/* Outer scan ring */}
-        <div
-          className={`absolute rounded-full border transition-all duration-300 ${
-            isHovering
-              ? 'w-16 h-16 border-amber-400/60'
-              : 'w-10 h-10 border-emerald-400/40'
-          }`}
-          style={{
-            left: '50%',
-            top: '50%',
-            transform: 'translate(-50%, -50%)',
-            boxShadow: isHovering
-              ? '0 0 20px rgba(251, 191, 36, 0.3), inset 0 0 20px rgba(251, 191, 36, 0.1)'
-              : '0 0 15px rgba(52, 211, 153, 0.2)',
-          }}
-        />
-
-        {/* Inner crosshair */}
-        <div className="relative">
+        {/* Crosshair */}
+        <svg
+          width={isHovering ? 32 : 24}
+          height={isHovering ? 32 : 24}
+          viewBox="0 0 24 24"
+          className="transition-all duration-150"
+          style={{ opacity: 0.7 }}
+        >
           {/* Horizontal line */}
-          <div
-            className={`absolute h-px transition-all duration-200 ${
-              isHovering ? 'w-8 bg-amber-400' : 'w-5 bg-emerald-400'
-            }`}
-            style={{
-              left: '50%',
-              top: '50%',
-              transform: 'translate(-50%, -50%)',
-              boxShadow: '0 0 10px currentColor',
-            }}
+          <line
+            x1="4" y1="12" x2="10" y2="12"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            className="text-blue-900"
+          />
+          <line
+            x1="14" y1="12" x2="20" y2="12"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            className="text-blue-900"
           />
           {/* Vertical line */}
-          <div
-            className={`absolute w-px transition-all duration-200 ${
-              isHovering ? 'h-8 bg-amber-400' : 'h-5 bg-emerald-400'
-            }`}
-            style={{
-              left: '50%',
-              top: '50%',
-              transform: 'translate(-50%, -50%)',
-              boxShadow: '0 0 10px currentColor',
-            }}
+          <line
+            x1="12" y1="4" x2="12" y2="10"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            className="text-blue-900"
+          />
+          <line
+            x1="12" y1="14" x2="12" y2="20"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            className="text-blue-900"
           />
           {/* Center dot */}
-          <div
-            className={`absolute w-1.5 h-1.5 rounded-full transition-all duration-200 ${
-              isHovering ? 'bg-amber-400' : 'bg-emerald-400'
-            }`}
-            style={{
-              left: '50%',
-              top: '50%',
-              transform: 'translate(-50%, -50%)',
-              boxShadow: '0 0 10px currentColor, 0 0 20px currentColor',
-            }}
+          <circle
+            cx="12" cy="12" r="2"
+            fill="currentColor"
+            className="text-blue-900"
           />
-        </div>
+        </svg>
       </div>
 
-      {/* Glitch duplicate (red channel) */}
-      {glitchOffset.x !== 0 && (
-        <div
-          className="pointer-events-none fixed z-[9998] w-3 h-3 rounded-full bg-red-500/50"
-          style={{
-            left: position.x - glitchOffset.x * 2,
-            top: position.y - glitchOffset.y * 2,
-            transform: 'translate(-50%, -50%)',
-            filter: 'blur(1px)',
-          }}
-        />
-      )}
+      {/* Subtle trailing dot */}
+      <div
+        className="pointer-events-none fixed z-[9998] w-1 h-1 rounded-full bg-blue-400/30"
+        style={{
+          left: position.x,
+          top: position.y,
+          transform: 'translate(-50%, -50%)',
+          transition: 'left 0.15s ease-out, top 0.15s ease-out',
+        }}
+      />
     </>
   )
 }
diff --git a/components/hero-section.tsx b/components/hero-section.tsx
index 34b2364..d129abd 100644
--- a/components/hero-section.tsx
+++ b/components/hero-section.tsx
@@ -2,57 +2,25 @@
 
 import { useEffect, useState } from "react"
 
-const MUSHROOM_ASCII = `
-          ████████
-        ██░░░░░░░░██
-      ██░░░░░░░░░░░░██
-    ██░░░░░░░░░░░░░░░░██
-  ██░░░░██░░░░░░██░░░░░░██
-  ██░░░░░░░░░░░░░░░░░░░░██
-    ██░░░░░░░░░░░░░░░░██
-      ████████████████
-          ██░░██
-          ██░░██
-        ██░░░░░░██
-`
-
 const RESEARCH_DOMAINS = [
+  "token engineering",
+  "regenerative economics",
+  "commons governance",
   "mycoeconomics",
-  "token_engineering",
-  "psilo_cybernetics",
-  "institutional_neuroplasticity",
-  "zk_local_first_systems",
-  "regenerative_crypto_commons",
-  "emancipatory_technology",
+  "institutional design",
+  "collective intelligence",
+  "crypto commons",
 ]
 
 export function HeroSection() {
   const [typedText, setTypedText] = useState("")
   const [currentDomain, setCurrentDomain] = useState(0)
   const [showCursor, setShowCursor] = useState(true)
-  const [bootSequence, setBootSequence] = useState(0)
 
   const fullText = RESEARCH_DOMAINS[currentDomain]
 
-  // Boot sequence effect
-  useEffect(() => {
-    const bootSteps = [1, 2, 3, 4, 5]
-    let step = 0
-    const bootInterval = setInterval(() => {
-      if (step < bootSteps.length) {
-        setBootSequence(bootSteps[step])
-        step++
-      } else {
-        clearInterval(bootInterval)
-      }
-    }, 300)
-    return () => clearInterval(bootInterval)
-  }, [])
-
   // Typing effect
   useEffect(() => {
-    if (bootSequence < 5) return
-
     let charIndex = 0
     setTypedText("")
 
@@ -64,12 +32,12 @@ export function HeroSection() {
         clearInterval(typeInterval)
         setTimeout(() => {
           setCurrentDomain((prev) => (prev + 1) % RESEARCH_DOMAINS.length)
-        }, 2000)
+        }, 2500)
       }
-    }, 80)
+    }, 70)
 
     return () => clearInterval(typeInterval)
-  }, [currentDomain, fullText, bootSequence])
+  }, [currentDomain, fullText])
 
   // Cursor blink
   useEffect(() => {
@@ -80,154 +48,117 @@ export function HeroSection() {
   }, [])
 
   return (
-    <section className="relative min-h-screen flex items-center justify-center overflow-hidden px-4 md:px-6 scanlines">
-      {/* Background grid pattern - handled by body in CSS */}
+    <section className="relative min-h-screen flex items-center justify-center px-4 md:px-6 py-20">
+      {/* Blueprint frame corners */}
+      <div className="absolute top-8 left-8 w-16 h-16 border-l-2 border-t-2 border-primary/40" />
+      <div className="absolute top-8 right-8 w-16 h-16 border-r-2 border-t-2 border-primary/40" />
+      <div className="absolute bottom-8 left-8 w-16 h-16 border-l-2 border-b-2 border-primary/40" />
+      <div className="absolute bottom-8 right-8 w-16 h-16 border-r-2 border-b-2 border-primary/40" />
 
-      {/* Floating ASCII mushroom */}
-      <div className="absolute top-10 right-10 md:top-20 md:right-20 opacity-20 animate-float hidden md:block">
-        <pre className="ascii-art text-emerald-400/30">{MUSHROOM_ASCII}</pre>
-      </div>
-
-      {/* Main terminal window */}
-      <div className="relative z-10 w-full max-w-4xl terminal-window rounded-lg overflow-hidden">
-        {/* Terminal header */}
-        <div className="terminal-header px-4 py-3 flex items-center gap-2">
-          <div className="flex gap-2">
-            <div className="w-3 h-3 rounded-full bg-red-500/80" />
-            <div className="w-3 h-3 rounded-full bg-yellow-500/80" />
-            <div className="w-3 h-3 rounded-full bg-emerald-500/80" />
-          </div>
-          <span className="text-xs text-emerald-400/60 ml-4 font-mono">
-            jeff@emmett:~/research$
-          </span>
+      {/* Main content */}
+      <div className="relative z-10 w-full max-w-4xl">
+        {/* Section label */}
+        <div className="mb-8">
+          <span className="section-label">Overview</span>
         </div>
 
-        {/* Terminal content */}
-        <div className="p-6 md:p-8 space-y-6">
-          {/* Boot sequence */}
-          <div className="space-y-1 text-xs md:text-sm text-emerald-400/70">
-            {bootSequence >= 1 && (
-              <p className="fade-in-up">[OK] Loading cognitive_substrate.so</p>
-            )}
-            {bootSequence >= 2 && (
-              <p className="fade-in-up stagger-1">[OK] Initializing mycelial_network</p>
-            )}
-            {bootSequence >= 3 && (
-              <p className="fade-in-up stagger-2">[OK] Mounting /dev/commons</p>
-            )}
-            {bootSequence >= 4 && (
-              <p className="fade-in-up stagger-3">[OK] Syncing regenerative_protocols</p>
-            )}
-            {bootSequence >= 5 && (
-              <p className="fade-in-up stagger-4 text-emerald-400">
-                [READY] System initialized. Welcome.
-              </p>
-            )}
+        {/* Main title area */}
+        <div className="blueprint-card p-8 md:p-12 mb-8">
+          {/* Name */}
+          <h1 className="text-4xl md:text-6xl lg:text-7xl font-light tracking-tight text-foreground mb-6">
+            Jeff Emmett
+          </h1>
+
+          {/* Exploring line with typing effect */}
+          <div className="flex items-baseline gap-3 text-lg md:text-xl mb-8">
+            <span className="text-muted-foreground">Exploring</span>
+            <span className="text-primary font-medium min-w-[200px]">
+              {typedText}
+              <span
+                className={`inline-block w-0.5 h-5 bg-primary ml-0.5 align-middle ${
+                  showCursor ? "opacity-100" : "opacity-0"
+                }`}
+              />
+            </span>
           </div>
 
-          {bootSequence >= 5 && (
-            <>
-              {/* Main title */}
-              <div className="space-y-4 pt-4">
-                <h1
-                  className="text-4xl md:text-6xl lg:text-7xl font-bold text-emerald-400 glitch"
-                  data-text="JEFF EMMETT"
-                >
-                  JEFF EMMETT
-                </h1>
+          {/* Description */}
+          <p className="text-muted-foreground leading-relaxed max-w-2xl mb-8">
+            Token engineering researcher designing systems at the intersection
+            of regenerative economics, crypto commons, and collective intelligence.
+            Co-founder of Commons Stack and MycoFi.
+          </p>
 
-                <div className="flex items-center gap-2 text-lg md:text-xl text-amber-400/90">
-                  <span className="text-emerald-500">$</span>
-                  <span className="text-muted-foreground">exploring</span>
-                  <span className="text-emerald-300">
-                    {typedText}
-                    <span
-                      className={`${showCursor ? "opacity-100" : "opacity-0"}`}
-                    >
-                      _
-                    </span>
-                  </span>
-                </div>
-              </div>
+          {/* Key affiliations as diagram nodes */}
+          <div className="flex flex-wrap gap-6 items-center">
+            <div className="flex items-center gap-3">
+              <div className="node-point filled" />
+              <span className="text-sm font-medium">Commons Stack</span>
+            </div>
+            <svg className="w-8 h-4 text-border hidden md:block">
+              <line x1="0" y1="8" x2="32" y2="8" stroke="currentColor" strokeWidth="1.5" strokeDasharray="4 2" />
+            </svg>
+            <div className="flex items-center gap-3">
+              <div className="node-point filled" />
+              <span className="text-sm font-medium">MycoFi</span>
+            </div>
+            <svg className="w-8 h-4 text-border hidden md:block">
+              <line x1="0" y1="8" x2="32" y2="8" stroke="currentColor" strokeWidth="1.5" strokeDasharray="4 2" />
+            </svg>
+            <div className="flex items-center gap-3">
+              <div className="node-point filled" />
+              <span className="text-sm font-medium">Bonding Curve Research</span>
+            </div>
+          </div>
+        </div>
 
-              {/* Description block */}
-              <div className="code-block text-sm md:text-base space-y-2 mt-6">
-                <p className="text-emerald-400/80">
-                  <span className="text-amber-400">/**</span>
-                </p>
-                <p className="text-emerald-400/80 pl-2">
-                  * Token engineering researcher at the intersection of
-                </p>
-                <p className="text-emerald-400/80 pl-2">
-                  * regenerative systems, crypto commons, and emancipatory tech.
-                </p>
-                <p className="text-emerald-400/80 pl-2">*</p>
-                <p className="text-emerald-400/80 pl-2">
-                  * Co-founder:{" "}
-                  <span className="text-cyan-400">Commons Stack</span>,{" "}
-                  <span className="text-cyan-400">MycoFi</span>
-                </p>
-                <p className="text-emerald-400/80 pl-2">
-                  * Research: Bonding curves, conviction voting, institutional design
-                </p>
-                <p className="text-emerald-400/80">
-                  <span className="text-amber-400">*/</span>
-                </p>
-              </div>
+        {/* Navigation links */}
+        <div className="flex flex-wrap gap-4">
+          <a
+            href="#research"
+            className="blueprint-card px-6 py-3 hover-lift flex items-center gap-3 group"
+          >
+            <div className="node-point group-hover:filled transition-colors" />
+            <span className="text-sm font-medium">Research</span>
+            <span className="text-muted-foreground text-sm">→</span>
+          </a>
+          <a
+            href="#about"
+            className="blueprint-card px-6 py-3 hover-lift flex items-center gap-3 group"
+          >
+            <div className="node-point group-hover:filled transition-colors" />
+            <span className="text-sm font-medium">About</span>
+            <span className="text-muted-foreground text-sm">→</span>
+          </a>
+          <a
+            href="#connect"
+            className="blueprint-card px-6 py-3 hover-lift flex items-center gap-3 group"
+          >
+            <div className="node-point group-hover:filled transition-colors" />
+            <span className="text-sm font-medium">Connect</span>
+            <span className="text-muted-foreground text-sm">→</span>
+          </a>
+        </div>
 
-              {/* Navigation links */}
-              <div className="flex flex-wrap gap-4 pt-6">
-                <a
-                  href="#research"
-                  className="group px-6 py-3 neon-border hover-glow rounded text-emerald-400 text-sm md:text-base transition-all"
-                >
-                  <span className="text-muted-foreground">$</span> cat{" "}
-                  <span className="text-cyan-400">research.md</span>
-                  <span className="opacity-0 group-hover:opacity-100 transition-opacity ml-2">
-                    →
-                  </span>
-                </a>
-                <a
-                  href="#projects"
-                  className="group px-6 py-3 neon-border hover-glow rounded text-emerald-400 text-sm md:text-base transition-all"
-                >
-                  <span className="text-muted-foreground">$</span> ls{" "}
-                  <span className="text-cyan-400">./projects/</span>
-                  <span className="opacity-0 group-hover:opacity-100 transition-opacity ml-2">
-                    →
-                  </span>
-                </a>
-                <a
-                  href="#connect"
-                  className="group px-6 py-3 bg-emerald-500/20 neon-border hover-glow rounded text-emerald-400 text-sm md:text-base transition-all"
-                >
-                  <span className="text-muted-foreground">$</span> ssh{" "}
-                  <span className="text-cyan-400">connect</span>
-                  <span className="opacity-0 group-hover:opacity-100 transition-opacity ml-2">
-                    →
-                  </span>
-                </a>
-              </div>
-
-              {/* Academic citation */}
-              <div className="pt-8 border-t border-emerald-500/20">
-                <p className="citation">
-                  Emmett, J. (2019-present). "Towards Regenerative Cryptoeconomics:
-                  Designing Systems for Collective Flourishing." Working papers
-                  available at commons.stack
-                </p>
-              </div>
-            </>
-          )}
+        {/* Annotation */}
+        <div className="mt-12">
+          <p className="annotation">
+            Designing systems for collective flourishing since 2015
+          </p>
         </div>
       </div>
 
       {/* Scroll indicator */}
-      <div className="absolute bottom-8 left-1/2 -translate-x-1/2 text-emerald-400/50 text-xs animate-bounce">
-        <div className="flex flex-col items-center gap-2">
-          <span>scroll</span>
-          <span>▼</span>
-        </div>
+      <div className="absolute bottom-12 left-1/2 -translate-x-1/2 text-muted-foreground text-xs flex flex-col items-center gap-2">
+        <span className="font-mono">scroll</span>
+        <svg width="16" height="24" viewBox="0 0 16 24" className="animate-bounce">
+          <path
+            d="M8 4 L8 18 M4 14 L8 18 L12 14"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            fill="none"
+          />
+        </svg>
       </div>
     </section>
   )
diff --git a/components/skills-section.tsx b/components/skills-section.tsx
index aaaa582..9e542c0 100644
--- a/components/skills-section.tsx
+++ b/components/skills-section.tsx
@@ -1,162 +1,132 @@
 "use client"
 
-import { useState } from "react"
+const SKILL_CATEGORIES = [
+  {
+    name: "Systems Design",
+    skills: [
+      { name: "Token Engineering", level: 95 },
+      { name: "Mechanism Design", level: 90 },
+      { name: "Agent-Based Modeling", level: 85 },
+      { name: "Complex Systems", level: 80 },
+    ],
+  },
+  {
+    name: "Governance",
+    skills: [
+      { name: "DAO Architecture", level: 90 },
+      { name: "Voting Systems", level: 92 },
+      { name: "Institutional Design", level: 85 },
+      { name: "Commons Management", level: 88 },
+    ],
+  },
+  {
+    name: "Technical",
+    skills: [
+      { name: "cadCAD / Python", level: 88 },
+      { name: "Solidity", level: 70 },
+      { name: "Data Analysis", level: 82 },
+      { name: "Simulation", level: 85 },
+    ],
+  },
+]
 
-interface SkillNode {
-  id: string
-  name: string
-  level: number // 0-100
-  dependencies: string[]
-  description: string
-}
-
-const SKILL_TREE: Record<string, SkillNode[]> = {
-  "token_engineering/": [
-    { id: "bc", name: "bonding_curves.sol", level: 95, dependencies: [], description: "AMMs & primary issuance markets" },
-    { id: "cv", name: "conviction_voting.py", level: 90, dependencies: ["bc"], description: "Continuous decision-making" },
-    { id: "abc", name: "augmented_bonding.ts", level: 88, dependencies: ["bc"], description: "Sustainable funding mechanisms" },
-    { id: "cad", name: "cadCAD_modeling/", level: 92, dependencies: [], description: "Agent-based economic simulation" },
-    { id: "ds", name: "dynamic_supply.rs", level: 85, dependencies: ["bc", "cad"], description: "Elastic token mechanisms" },
-  ],
-  "governance/": [
-    { id: "dao", name: "dao_templates/", level: 90, dependencies: [], description: "Cyber-physical commons frameworks" },
-    { id: "ost", name: "ostrom_compliance.md", level: 88, dependencies: ["dao"], description: "8 principles encoded" },
-    { id: "cgov", name: "collective_governance/", level: 85, dependencies: ["cv"], description: "Participatory systems" },
-  ],
-  "research/": [
-    { id: "myco", name: "mycoeconomics/", level: 80, dependencies: [], description: "Fungal network economics" },
-    { id: "regen", name: "regenerative_economics.tex", level: 85, dependencies: ["myco"], description: "Beyond extractive models" },
-    { id: "complex", name: "complex_systems.jl", level: 78, dependencies: [], description: "Emergence & adaptation" },
-    { id: "behav", name: "behavioral_economics/", level: 75, dependencies: [], description: "Human coordination patterns" },
-  ],
-  "tools/": [
-    { id: "py", name: "python", level: 88, dependencies: [], description: "Primary analysis language" },
-    { id: "sol", name: "solidity", level: 75, dependencies: [], description: "Smart contract development" },
-    { id: "sim", name: "simulation/", level: 85, dependencies: ["py", "cad"], description: "Monte Carlo & ABM" },
-    { id: "web3", name: "web3_stack/", level: 80, dependencies: ["sol"], description: "Decentralized infrastructure" },
-  ],
-}
-
-function ProgressBar({ level }: { level: number }) {
-  const filled = Math.floor(level / 5)
-  const empty = 20 - filled
+function SkillBar({ level }: { level: number }) {
   return (
-    <span className="font-mono text-xs">
-      <span className="text-emerald-400">{"█".repeat(filled)}</span>
-      <span className="text-emerald-400/20">{"░".repeat(empty)}</span>
-      <span className="text-muted-foreground ml-2">{level}%</span>
-    </span>
+    <div className="flex-1 h-2 bg-secondary rounded-sm overflow-hidden">
+      <div
+        className="h-full bg-primary/60 transition-all duration-500"
+        style={{ width: `${level}%` }}
+      />
+    </div>
   )
 }
 
 export function SkillsSection() {
-  const [expandedDir, setExpandedDir] = useState<string | null>("token_engineering/")
-
   return (
     <section id="skills" className="py-20 px-4 md:px-6">
       <div className="max-w-4xl mx-auto">
         {/* Section header */}
         <div className="mb-12">
-          <div className="flex items-center gap-4 mb-4">
-            <span className="text-emerald-500 text-sm">$</span>
-            <h2 className="text-2xl md:text-3xl font-bold text-emerald-400">
-              tree ~/skills --depth=2
-            </h2>
-          </div>
-          <div className="code-block">
-            <p className="text-muted-foreground text-sm">
-              # Expertise & Focus Areas
-            </p>
-            <p className="text-muted-foreground text-sm">
-              ## Interdisciplinary toolkit for building resilient token economies
-            </p>
-          </div>
+          <span className="section-label">Expertise</span>
+          <h2 className="text-3xl md:text-4xl font-light mt-6 mb-4">
+            Skills & Focus Areas
+          </h2>
+          <p className="text-muted-foreground max-w-2xl">
+            Interdisciplinary approach to building resilient token economies
+            and regenerative systems.
+          </p>
         </div>
 
-        {/* Skill tree */}
-        <div className="terminal-window rounded-lg overflow-hidden">
-          <div className="terminal-header px-4 py-2 flex items-center justify-between">
-            <span className="text-xs text-emerald-400/60 font-mono">
-              jeff@emmett:~/skills$
-            </span>
-            <span className="text-xs text-amber-400/60">
-              [SKILL_TREE v2.0]
-            </span>
-          </div>
-          <div className="p-4 md:p-6 font-mono text-sm">
-            {/* Root */}
-            <div className="text-emerald-400 mb-2">~/skills/</div>
-
-            {/* Directories */}
-            {Object.entries(SKILL_TREE).map(([dir, skills], dirIndex) => (
-              <div key={dir} className="ml-4">
-                {/* Directory name */}
-                <div
-                  className="flex items-center gap-2 cursor-pointer hover:text-emerald-300 transition-colors py-1"
-                  onClick={() => setExpandedDir(expandedDir === dir ? null : dir)}
-                >
-                  <span className="text-cyan-400">
-                    {expandedDir === dir ? "▼" : "▶"}
-                  </span>
-                  <span className="text-amber-400">{dir}</span>
-                  <span className="text-muted-foreground text-xs">
-                    [{skills.length} items]
-                  </span>
-                </div>
-
-                {/* Skills in directory */}
-                {expandedDir === dir && (
-                  <div className="ml-6 space-y-2 mt-2 mb-4">
-                    {skills.map((skill, index) => (
-                      <div
-                        key={skill.id}
-                        className="fade-in-up group"
-                        style={{ animationDelay: `${index * 0.05}s` }}
-                      >
-                        <div className="flex items-start gap-3">
-                          <span className="text-muted-foreground">├──</span>
-                          <div className="flex-1">
-                            <div className="flex flex-wrap items-center gap-2 md:gap-4">
-                              <span className={`${skill.name.endsWith('/') ? 'text-amber-400' : 'text-emerald-300'}`}>
-                                {skill.name}
-                              </span>
-                              <ProgressBar level={skill.level} />
-                            </div>
-                            <p className="text-muted-foreground text-xs mt-1 opacity-0 group-hover:opacity-100 transition-opacity">
-                              └─ {skill.description}
-                            </p>
-                          </div>
-                        </div>
-                      </div>
-                    ))}
-                    <div className="text-muted-foreground">└── ...</div>
-                  </div>
-                )}
+        {/* Skills diagram */}
+        <div className="grid md:grid-cols-3 gap-8">
+          {SKILL_CATEGORIES.map((category, catIndex) => (
+            <div
+              key={category.name}
+              className="blueprint-card p-6 fade-in-up"
+              style={{ animationDelay: `${catIndex * 0.1}s` }}
+            >
+              <div className="flex items-center gap-3 mb-6">
+                <div className="node-point filled" />
+                <h3 className="font-medium">{category.name}</h3>
               </div>
-            ))}
 
-            {/* Footer */}
-            <div className="mt-6 pt-4 border-t border-emerald-500/20">
-              <p className="text-muted-foreground text-xs">
-                <span className="text-emerald-400">4 directories</span>,{" "}
-                <span className="text-cyan-400">17 skills</span>,{" "}
-                <span className="text-amber-400">∞ learning</span>
-              </p>
+              <div className="space-y-4">
+                {category.skills.map((skill) => (
+                  <div key={skill.name}>
+                    <div className="flex items-center justify-between mb-1">
+                      <span className="text-sm">{skill.name}</span>
+                      <span className="text-xs text-muted-foreground font-mono">
+                        {skill.level}%
+                      </span>
+                    </div>
+                    <SkillBar level={skill.level} />
+                  </div>
+                ))}
+              </div>
             </div>
-          </div>
+          ))}
         </div>
 
-        {/* Methodology note */}
-        <div className="mt-8 code-block">
-          <p className="text-amber-400 text-sm">/* Methodology */</p>
-          <p className="text-emerald-400/80 text-sm mt-2">
-            <span className="text-muted-foreground">// Skills interconnect like mycelial networks</span>
-          </p>
-          <p className="text-emerald-400/80 text-sm">
-            <span className="text-muted-foreground">// Each node strengthens the whole system</span>
-          </p>
-          <p className="text-emerald-400/80 text-sm">
-            <span className="text-muted-foreground">// Constant iteration, never complete</span>
+        {/* Connection diagram between categories */}
+        <div className="mt-12 flex justify-center">
+          <svg
+            viewBox="0 0 400 60"
+            className="w-full max-w-md h-16 text-border"
+          >
+            {/* Connection lines */}
+            <line
+              x1="80" y1="30" x2="200" y2="30"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeDasharray="4 2"
+            />
+            <line
+              x1="200" y1="30" x2="320" y2="30"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeDasharray="4 2"
+            />
+            {/* Nodes */}
+            <circle cx="80" cy="30" r="6" fill="var(--primary)" />
+            <circle cx="200" cy="30" r="6" fill="var(--primary)" />
+            <circle cx="320" cy="30" r="6" fill="var(--primary)" />
+            {/* Labels */}
+            <text x="80" y="55" textAnchor="middle" className="graph-label">
+              Design
+            </text>
+            <text x="200" y="55" textAnchor="middle" className="graph-label">
+              Govern
+            </text>
+            <text x="320" y="55" textAnchor="middle" className="graph-label">
+              Build
+            </text>
+          </svg>
+        </div>
+
+        {/* Annotation */}
+        <div className="mt-8 text-center">
+          <p className="annotation">
+            Skills interconnect like mycelial networks—each node strengthens the whole
           </p>
         </div>
       </div>
diff --git a/components/work-section.tsx b/components/work-section.tsx
index 240be97..029d7d2 100644
--- a/components/work-section.tsx
+++ b/components/work-section.tsx
@@ -21,7 +21,7 @@ const RESEARCH_ITEMS: ResearchItem[] = [
     year: "2019",
     abstract:
       "Exploration of automated market makers as coordination mechanisms for decentralized communities. Analysis of augmented bonding curves for sustainable funding of public goods.",
-    tags: ["AMM", "DeFi", "public_goods", "cadCAD"],
+    tags: ["AMM", "DeFi", "public goods", "cadCAD"],
     link: "https://medium.com/commonsstack",
     status: "published",
   },
@@ -32,7 +32,7 @@ const RESEARCH_ITEMS: ResearchItem[] = [
     year: "2020",
     abstract:
       "Time-weighted voting mechanism that allows preferences to accumulate over time, reducing plutocratic attack vectors and enabling more nuanced collective decision-making.",
-    tags: ["governance", "voting", "mechanism_design"],
+    tags: ["governance", "voting", "mechanism design"],
     link: "https://blog.giveth.io/conviction-voting",
     status: "published",
   },
@@ -47,16 +47,6 @@ const RESEARCH_ITEMS: ResearchItem[] = [
     link: "https://mycofi.earth",
     status: "ongoing",
   },
-  {
-    id: "psilo-cybernetics",
-    title: "Psilo-Cybernetics: Consciousness, Computation, and Collective Intelligence",
-    category: "psilo_cybernetics",
-    year: "2024",
-    abstract:
-      "Theoretical framework connecting altered states of consciousness with distributed systems theory. Exploring the intersection of psychedelic research and cybernetic governance.",
-    tags: ["consciousness", "cybernetics", "emergence"],
-    status: "working",
-  },
   {
     id: "institutional-neuroplasticity",
     title: "Institutional Neuroplasticity: Adaptive Governance for Complex Systems",
@@ -74,18 +64,17 @@ const RESEARCH_ITEMS: ResearchItem[] = [
     year: "2025",
     abstract:
       "Architecture for local-first applications with ZK proofs for selective disclosure. Enabling community coordination without surveillance capitalism.",
-    tags: ["ZK", "privacy", "local_first", "p2p"],
+    tags: ["ZK", "privacy", "local-first", "p2p"],
     status: "working",
   },
 ]
 
 const CATEGORIES = [
-  { id: "all", label: "/*" },
-  { id: "token_engineering", label: "token_eng" },
-  { id: "governance", label: "governance" },
-  { id: "mycoeconomics", label: "myco" },
-  { id: "cryptography", label: "crypto" },
-  { id: "psilo_cybernetics", label: "psilo" },
+  { id: "all", label: "All" },
+  { id: "token_engineering", label: "Token Engineering" },
+  { id: "governance", label: "Governance" },
+  { id: "mycoeconomics", label: "Mycoeconomics" },
+  { id: "cryptography", label: "Cryptography" },
 ]
 
 export function WorkSection() {
@@ -102,21 +91,14 @@ export function WorkSection() {
       <div className="max-w-4xl mx-auto">
         {/* Section header */}
         <div className="mb-12">
-          <div className="flex items-center gap-4 mb-4">
-            <span className="text-emerald-500 text-sm">$</span>
-            <h2 className="text-2xl md:text-3xl font-bold text-emerald-400">
-              cat research.md
-            </h2>
-          </div>
-          <div className="code-block">
-            <p className="text-muted-foreground text-sm">
-              # Research & Working Papers
-            </p>
-            <p className="text-muted-foreground text-sm">
-              ## Exploring regenerative systems, token engineering, and
-              collective intelligence
-            </p>
-          </div>
+          <span className="section-label">Research</span>
+          <h2 className="text-3xl md:text-4xl font-light mt-6 mb-4">
+            Working Papers & Publications
+          </h2>
+          <p className="text-muted-foreground max-w-2xl">
+            Exploring regenerative systems, token engineering, and collective intelligence
+            through research and open-source tooling.
+          </p>
         </div>
 
         {/* Category filter */}
@@ -125,10 +107,8 @@ export function WorkSection() {
             <button
               key={cat.id}
               onClick={() => setActiveCategory(cat.id)}
-              className={`px-4 py-2 text-sm rounded transition-all ${
-                activeCategory === cat.id
-                  ? "bg-emerald-500/20 text-emerald-400 neon-border"
-                  : "text-muted-foreground hover:text-emerald-400 border border-transparent hover:border-emerald-500/30"
+              className={`tag transition-colors ${
+                activeCategory === cat.id ? "primary" : ""
               }`}
             >
               {cat.label}
@@ -136,67 +116,91 @@ export function WorkSection() {
           ))}
         </div>
 
-        {/* Research items */}
+        {/* Research items as diagram nodes */}
         <div className="space-y-4">
           {filteredItems.map((item, index) => (
             <div
               key={item.id}
-              className="terminal-window rounded-lg overflow-hidden fade-in-up"
+              className="blueprint-card overflow-hidden fade-in-up"
               style={{ animationDelay: `${index * 0.1}s` }}
             >
               <div
-                className="p-4 md:p-6 cursor-pointer"
+                className="p-6 cursor-pointer"
                 onClick={() =>
                   setExpandedItem(expandedItem === item.id ? null : item.id)
                 }
               >
                 {/* Header row */}
-                <div className="flex items-start justify-between gap-4 mb-3">
-                  <div className="flex-1">
-                    <div className="flex items-center gap-2 mb-2">
+                <div className="flex items-start gap-4">
+                  {/* Node indicator */}
+                  <div className="mt-1.5">
+                    <div
+                      className={`node-point ${
+                        item.status === "published" ? "filled" : ""
+                      }`}
+                      style={{
+                        borderColor:
+                          item.status === "ongoing"
+                            ? "var(--accent)"
+                            : item.status === "working"
+                            ? "var(--primary)"
+                            : undefined,
+                      }}
+                    />
+                  </div>
+
+                  {/* Content */}
+                  <div className="flex-1 min-w-0">
+                    <div className="flex flex-wrap items-center gap-3 mb-2">
                       <span
-                        className={`text-xs px-2 py-0.5 rounded ${
+                        className={`tag ${
                           item.status === "published"
-                            ? "bg-emerald-500/20 text-emerald-400"
-                            : item.status === "ongoing"
-                            ? "bg-amber-500/20 text-amber-400"
-                            : "bg-cyan-500/20 text-cyan-400"
+                            ? "primary"
+                            : ""
                         }`}
                       >
                         {item.status}
                       </span>
-                      <span className="text-xs text-muted-foreground">
+                      <span className="text-xs text-muted-foreground font-mono">
                         {item.year}
                       </span>
                     </div>
-                    <h3 className="text-lg md:text-xl text-emerald-300 font-medium">
+                    <h3 className="text-lg font-medium text-foreground mb-2">
                       {item.title}
                     </h3>
+                    <div className="flex flex-wrap gap-2">
+                      {item.tags.map((tag) => (
+                        <span
+                          key={tag}
+                          className="text-xs text-muted-foreground"
+                        >
+                          #{tag}
+                        </span>
+                      ))}
+                    </div>
                   </div>
-                  <span
-                    className={`text-emerald-400 transition-transform ${
+
+                  {/* Expand indicator */}
+                  <svg
+                    width="20"
+                    height="20"
+                    viewBox="0 0 20 20"
+                    className={`text-muted-foreground transition-transform ${
                       expandedItem === item.id ? "rotate-180" : ""
                     }`}
                   >
-                    ▼
-                  </span>
-                </div>
-
-                {/* Tags */}
-                <div className="flex flex-wrap gap-2">
-                  {item.tags.map((tag) => (
-                    <span
-                      key={tag}
-                      className="text-xs text-cyan-400/70 before:content-['#']"
-                    >
-                      {tag}
-                    </span>
-                  ))}
+                    <path
+                      d="M5 8 L10 13 L15 8"
+                      stroke="currentColor"
+                      strokeWidth="1.5"
+                      fill="none"
+                    />
+                  </svg>
                 </div>
 
                 {/* Expanded content */}
                 {expandedItem === item.id && (
-                  <div className="mt-4 pt-4 border-t border-emerald-500/20">
+                  <div className="mt-6 pt-6 border-t border-border ml-8">
                     <p className="text-muted-foreground text-sm leading-relaxed mb-4">
                       {item.abstract}
                     </p>
@@ -205,22 +209,25 @@ export function WorkSection() {
                         href={item.link}
                         target="_blank"
                         rel="noopener noreferrer"
-                        className="inline-flex items-center gap-2 text-sm text-emerald-400 hover:text-emerald-300 transition-colors"
+                        className="blueprint-link text-sm"
                         onClick={(e) => e.stopPropagation()}
                       >
-                        <span>→</span>
-                        <span>Read more</span>
+                        Read more →
                       </a>
                     )}
-                    <div className="mt-4 citation">
-                      Emmett, J. ({item.year}). "{item.title}."
-                    </div>
                   </div>
                 )}
               </div>
             </div>
           ))}
         </div>
+
+        {/* Annotation */}
+        <div className="mt-8">
+          <p className="annotation">
+            Open access research for the commons
+          </p>
+        </div>
       </div>
     </section>
   )