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/components/ProjectCard.astro

@@ -8,60 +8,28 @@ interface Props {
 const { project } = Astro.props;
 ---
 
-<article class="border border-[var(--color-border)] bg-[var(--color-surface)] flex flex-col gap-1lh p-2ch hover:bg-[var(--color-surface-raised)]">
-  <div class="flex items-start justify-between gap-1ch">
-    <a
-      href={project.githubUrl}
-      target="_blank"
-      rel="noopener noreferrer"
-      class="font-mono text-sm font-semibold text-[var(--color-text)] hover:text-[var(--color-accent-green)]"
-    >
-      {project.title}
-    </a>
-    <div class="flex items-center gap-1ch shrink-0">
-      {project.stats && (
-        <span class="font-mono text-sm text-[var(--color-text-dim)]">
-          {project.stats}
-        </span>
-      )}
-      {project.externalUrl && (
-        <a
-          href={project.externalUrl}
-          target="_blank"
-          rel="noopener noreferrer"
-          aria-label={`View ${project.title} externally`}
-          class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
-        >
-          ↗
-        </a>
-      )}
+<article class="mb-2lh">
+  <div class="flex items-baseline gap-1ch mb-half-lh">
+    <h3>
       <a
         href={project.githubUrl}
         target="_blank"
         rel="noopener noreferrer"
-        aria-label={`View ${project.title} on GitHub`}
-        class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
+        class="font-semibold underline hover:text-[var(--color-text-label)]"
       >
-        ↗
+        {project.title}
       </a>
-    </div>
+    </h3>
+    {project.statusBadge && (
+      <span class="text-[var(--color-text-dim)]">({project.statusBadge})</span>
+    )}
   </div>
 
-  {project.statusBadge && (
-    <span class="font-mono text-sm text-[var(--color-accent-amber,#d4a027)] border border-[var(--color-accent-amber,#d4a027)] px-1ch py-0.5 w-fit opacity-80">
-      {project.statusBadge}
-    </span>
-  )}
-
-  <p class="font-mono text-sm text-[var(--color-text)] leading-relaxed flex-1 opacity-70">
+  <p class="text-[var(--color-text-label)] leading-relaxed mb-half-lh">
     {project.description}
   </p>
 
-  <div class="flex flex-wrap gap-x-1ch gap-y-half-lh mt-half-lh">
-    {project.tags.map((tag) => (
-      <span class="font-mono text-sm text-[var(--color-text-dim)]">
-        {tag}
-      </span>
-    ))}
-  </div>
+  <p class="text-[var(--color-text-dim)]">
+    {project.tags.join(" · ")}
+  </p>
 </article>