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/Hero.astro

@@ -1,71 +1,45 @@
-<section class="mb-16">
-  <div class="flex flex-col gap-1ch">
-    <div>
-      <p class="font-mono text-sm font-bold text-[var(--color-text)]">
-        <span
-          class="text-[var(--color-accent-green)] select-none mr-1ch"
-          aria-hidden="true"
-        >
-          ❯
-        </span>
-        tyler koenig
-      </p>
-      <p class="font-mono text-sm text-[var(--color-text-label)] mt-0.5">
-        Security Operations · Self-Hosted Infrastructure
-      </p>
-    </div>
+<section class="mb-3lh">
+  <h1 class="text-xl font-bold mb-half-lh">Tyler Koenig</h1>
+  <p class="text-[var(--color-text-label)] mb-1lh">
+    Security Operations · Self-Hosted Infrastructure
+  </p>
 
-    <p class="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-70">
-      Homelab runs 30+
-      services across segmented VLANs — pfSense, Authentik SSO, full
-      observability stack. Write software too: mobile apps, Go backends,
-      open protocols. Daily drivers, all of it.{" "}
-      <span
-        class="animate-cursor text-[var(--color-accent-green)]"
-        aria-hidden="true"
-      >
-        █
-      </span>
-    </p>
+  <p class="text-[var(--color-text-label)] leading-relaxed mb-1lh">
+    Homelab runs 30+ services across segmented VLANs — pfSense, Authentik SSO,
+    full observability stack. Write software too: mobile apps, Go backends, open
+    protocols. Daily drivers, all of it.
+  </p>
 
-    <div class="flex flex-wrap items-center gap-x-1ch gap-y-half-lh">
-      <span class="font-mono text-sm text-[var(--color-accent-green)]">
-        ● available
-      </span>
-      <a
-        href="https://github.com/lerko96"
-        target="_blank"
-        rel="noopener noreferrer"
-        aria-label="GitHub"
-        class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
-      >
-        [github]
-      </a>
-      <a
-        href="https://gitea.lerkolabs.com/lerko"
-        target="_blank"
-        rel="noopener noreferrer"
-        aria-label="Gitea"
-        class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
-      >
-        [gitea]
-      </a>
-      <a
-        href="https://www.linkedin.com/in/tyler-koenig"
-        target="_blank"
-        rel="noopener noreferrer"
-        aria-label="LinkedIn"
-        class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
-      >
-        [linkedin]
-      </a>
-      <a
-        href="mailto:tyler@lerkolabs.com"
-        aria-label="Email"
-        class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
-      >
-        [email]
-      </a>
-    </div>
-  </div>
+  <nav class="flex flex-wrap items-center gap-x-2ch gap-y-half-lh text-[var(--color-text-label)]">
+    <a
+      href="https://github.com/lerko96"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="underline hover:text-[var(--color-text)]"
+    >
+      GitHub
+    </a>
+    <a
+      href="https://gitea.lerkolabs.com/lerko"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="underline hover:text-[var(--color-text)]"
+    >
+      Gitea
+    </a>
+    <a
+      href="https://www.linkedin.com/in/tyler-koenig"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="underline hover:text-[var(--color-text)]"
+    >
+      LinkedIn
+    </a>
+    <a
+      href="mailto:tyler@lerkolabs.com"
+      class="underline hover:text-[var(--color-text)]"
+    >
+      Email
+    </a>
+  </nav>
 </section>