feat: terminal-noir redesign — widget system + design token overhaul

Replace cyan-green modern theme with terminal-noir aesthetic aligned to
style-guide.md. Hard edges, monospace-first, linear transitions, no gradients.

Introduce Widget component as the single repeatable section primitive:
title bar with horizontal rule, optional badge/meta — all pages and
sections now use this pattern (Glance-inspired data-driven layout).

Design system changes (globals.css):
- Palette: #0a0a0a bg, #111111 surface, #00cc44 status green, #cc2200 alert red
- Drop Montserrat; Source Code Pro primary, system sans for prose only
- Transitions: linear 120ms; no eased animations, no border-radius

Component changes:
- Nav: flat, border-bottom only, lowercase links
- Hero: 56px square photo, status dot, @ email glyph
- ProjectCard: flat bordered card, 2-col grid, no gradient tile
- Skills: key-value rows with dot-separated values
- Footer: minimal text links

Pages: all sections wrapped in Widget; homelab uses gap-px grid for
at-a-glance, services, and ADRs sections. Archive uses flat list layout.

Data: remove gradient field from Project type; add optional year field

src/app/archive/page.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import Widget from "@/components/Widget";
 import { archiveProjects } from "@/data/projects";
 
 export const metadata: Metadata = {
@@ -9,51 +10,64 @@ export const metadata: Metadata = {
 export default function ArchivePage() {
   return (
     <>
-      <div className="mb-14">
-        <p className="font-mono text-xs text-[var(--color-green)] tracking-widest uppercase mb-2">
-          Archive
-        </p>
-        <h1 className="font-mono text-2xl font-bold text-[var(--color-text-light)] mb-4">
+      <div className="mb-12">
+        <div className="flex items-center gap-3 mb-4">
+          <span className="font-mono text-xs text-[var(--color-text-label)] tracking-widest uppercase">
+            archive
+          </span>
+          <div className="flex-1 h-px bg-[var(--color-border)]" aria-hidden="true" />
+        </div>
+        <h1 className="font-mono text-lg font-bold text-[var(--color-text)] mb-3">
           Earlier Work
         </h1>
-        <p className="text-[var(--color-grey-3)] text-sm leading-relaxed max-w-xl">
-          Experiments, browser extensions, and bootcamp projects. Kept here for context — not representative of current work.
+        <p className="font-sans text-sm text-[var(--color-text-label)] leading-relaxed max-w-xl">
+          Experiments, browser extensions, and bootcamp projects. Kept here for context — not
+          representative of current work.
         </p>
       </div>
 
-      <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
-        {archiveProjects.map((project) => (
-          <a
-            key={project.slug}
-            href={project.githubUrl}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="group border border-[var(--color-grey-1)] rounded-lg p-6 bg-[var(--color-bg)] hover:border-[var(--color-green-darker)] transition-colors flex flex-col gap-4"
-          >
-            <div className="flex items-start justify-between gap-2">
-              <h2 className="font-mono text-sm font-semibold text-[var(--color-text-light)] group-hover:text-[var(--color-green)] transition-colors">
-                {project.title}
-              </h2>
-              <i className="fas fa-arrow-up-right-from-square text-xs text-[var(--color-grey-2)] shrink-0 mt-0.5 group-hover:text-[var(--color-green)] transition-colors" aria-hidden="true" />
-            </div>
-
-            <p className="text-xs text-[var(--color-grey-3)] leading-relaxed flex-1">
-              {project.description}
-            </p>
-
-            <div className="flex flex-wrap gap-1.5">
-              {project.tags.map((tag) => (
-                <span
-                  key={tag}
-                  className="font-mono text-xs px-2 py-0.5 border border-[var(--color-grey-1)] text-[var(--color-grey-2)] rounded"
-                >
-                  {tag}
-                </span>
-              ))}
-            </div>
-          </a>
-        ))}
-      </div>
+      <Widget title="projects" badge={archiveProjects.length} as="section">
+        <div className="flex flex-col gap-px bg-[var(--color-border)]">
+          {archiveProjects.map((project) => (
+            <a
+              key={project.slug}
+              href={project.githubUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] flex items-start justify-between gap-6 px-4 py-4 group"
+            >
+              <div className="flex flex-col gap-2 flex-1 min-w-0">
+                <div className="flex items-center gap-3">
+                  {project.year && (
+                    <span className="font-mono text-xs text-[var(--color-text-dim)] shrink-0">
+                      {project.year}
+                    </span>
+                  )}
+                  <span className="font-mono text-xs text-[var(--color-text)] group-hover:text-[var(--color-accent-green)] truncate">
+                    {project.title}
+                  </span>
+                </div>
+                <p className="font-sans text-xs text-[var(--color-text-dim)] leading-relaxed">
+                  {project.description}
+                </p>
+                <div className="flex flex-wrap gap-x-3 gap-y-0.5">
+                  {project.tags.map((tag) => (
+                    <span key={tag} className="font-mono text-xs text-[var(--color-text-dim)]">
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+              </div>
+              <span
+                className="font-mono text-xs text-[var(--color-text-label)] group-hover:text-[var(--color-text)] shrink-0 mt-0.5"
+                aria-hidden="true"
+              >
+                ↗
+              </span>
+            </a>
+          ))}
+        </div>
+      </Widget>
     </>
   );
 }