feat(design): reader view — strip terminal chrome, add typography controls

Replace monospace-terminal aesthetic with clean reader layout. System
sans-serif default, typeface picker (sans/serif/mono) with per-face
optical tuning. Warm color palettes (slate dark, bone light), crafted
link underlines, WCAG AA contrast on all text tiers. Semantic HTML
throughout: proper heading hierarchy, <time> elements, role=group,
<dl>/<table>/<article> where appropriate. Net -140 lines.

src/pages/projects.astro

@@ -14,61 +14,48 @@ import { featuredProjects, archiveProjects } from "@/data/projects";
   <Nav slot="nav" />
 
   <div class="mb-4lh">
-    <p class="font-mono text-sm font-bold text-[var(--color-text)] mb-1lh">
-      <span class="text-[var(--color-accent-green)] select-none mr-1ch" aria-hidden="true">❯</span>
-      projects
-    </p>
-    <p class="font-mono text-sm text-[var(--color-text)] leading-relaxed max-w-xl opacity-80">
+    <h1 class="text-xl font-bold mb-half-lh">Projects</h1>
+    <p class="text-[var(--color-text-label)] leading-relaxed max-w-xl">
       Featured work first. Earlier experiments, browser extensions, and bootcamp projects below — kept for context.
     </p>
   </div>
 
-  <Widget title="projects/featured" badge={featuredProjects.length} as="section">
-    <div class="grid grid-cols-1 sm:grid-cols-2 gap-1ch">
+  <Widget title="Featured" badge={featuredProjects.length} as="section">
+    <div class="flex flex-col">
       {featuredProjects.map((project) => (
         <ProjectCard project={project} />
       ))}
     </div>
   </Widget>
 
-  <Widget title="projects/archive" badge={archiveProjects.length} as="section">
-    <div class="flex flex-col gap-px bg-[var(--color-border)]">
+  <Widget title="Archive" badge={archiveProjects.length} as="section">
+    <div class="flex flex-col gap-2lh">
       {archiveProjects.map((project) => (
-        <a
-          href={project.githubUrl}
-          target="_blank"
-          rel="noopener noreferrer"
-          class="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] flex items-start justify-between gap-2ch px-2ch py-1lh group"
-        >
-          <div class="flex flex-col gap-1ch flex-1 min-w-0">
-            <div class="flex items-center gap-1ch">
-              {project.year && (
-                <span class="font-mono text-sm text-[var(--color-text-dim)] shrink-0">
-                  {project.year}
-                </span>
-              )}
-              <span class="font-mono text-sm text-[var(--color-text)] group-hover:text-[var(--color-accent-green)] truncate">
-                {project.title}
+        <div>
+          <div class="flex items-baseline gap-1ch mb-half-lh">
+            {project.year && (
+              <span class="text-[var(--color-text-dim)] shrink-0">
+                {project.year}
               </span>
-            </div>
-            <p class="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-75">
-              {project.description}
-            </p>
-            <div class="flex flex-wrap gap-x-1ch gap-y-0.5">
-              {project.tags.map((tag) => (
-                <span class="font-mono text-sm text-[var(--color-text-dim)]">
-                  {tag}
-                </span>
-              ))}
-            </div>
+            )}
+            <h3>
+              <a
+                href={project.githubUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                class="font-semibold underline hover:text-[var(--color-text-label)]"
+              >
+                {project.title}
+              </a>
+            </h3>
           </div>
-          <span
-            class="font-mono text-sm text-[var(--color-text-label)] group-hover:text-[var(--color-text)] shrink-0 mt-0.5"
-            aria-hidden="true"
-          >
-            ↗
-          </span>
-        </a>
+          <p class="text-[var(--color-text-label)] leading-relaxed mb-half-lh">
+            {project.description}
+          </p>
+          <p class="text-[var(--color-text-dim)]">
+            {project.tags.join(" · ")}
+          </p>
+        </div>
       ))}
     </div>
   </Widget>