From 32455bf7a7c540d47f59d5d9530ecd44bb2bca0b Mon Sep 17 00:00:00 2001
From: Tyler Koenig <tyler@lerkolabs.com>
Date: Sun, 24 May 2026 18:28:02 -0400
Subject: [PATCH] =?UTF-8?q?feat(design):=20reader=20view=20=E2=80=94=20str?=
 =?UTF-8?q?ip=20terminal=20chrome,=20add=20typography=20controls?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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/Footer.astro      |  30 ++++----
 src/components/Hero.astro        | 110 +++++++++++-----------------
 src/components/Nav.astro         |  78 +++++++++++++-------
 src/components/ProjectCard.astro |  58 ++++-----------
 src/components/Skills.astro      |   6 +-
 src/components/Timeline.astro    |  79 +++++---------------
 src/components/Widget.astro      |  20 +++---
 src/layouts/Base.astro           |  12 ++--
 src/pages/homelab.astro          | 119 +++++++++++--------------------
 src/pages/projects.astro         |  71 ++++++++----------
 src/styles/globals.css           |  91 +++++++++++------------
 11 files changed, 267 insertions(+), 407 deletions(-)

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 0307d475..467dd955 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -3,45 +3,39 @@ const year = new Date().getFullYear();
 ---
 
 <footer class="border-t border-[var(--color-border)] py-1lh mt-2lh">
-  <div class="px-4ch flex items-center justify-between">
-    <span class="font-mono text-sm text-[var(--color-text-dim)]">
-      &copy; {year} Tyler Koenig
-    </span>
-    <div class="flex items-center gap-2ch">
+  <div class="px-4ch flex items-center justify-between text-[var(--color-text-dim)]">
+    <span>&copy; {year} Tyler Koenig</span>
+    <nav class="flex items-center gap-2ch">
       <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)]"
+        class="underline hover:text-[var(--color-text)]"
       >
-        [github]
+        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)]"
+        class="underline hover:text-[var(--color-text)]"
       >
-        [gitea]
+        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)]"
+        class="underline hover:text-[var(--color-text)]"
       >
-        [linkedin]
+        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)]"
+        class="underline hover:text-[var(--color-text)]"
       >
-        [email]
+        Email
       </a>
-    </div>
+    </nav>
   </div>
 </footer>
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index c5373360..6d057b4c 100644
--- a/src/components/Hero.astro
+++ b/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>
diff --git a/src/components/Nav.astro b/src/components/Nav.astro
index e4350b4b..b6b5399b 100644
--- a/src/components/Nav.astro
+++ b/src/components/Nav.astro
@@ -8,15 +8,8 @@ const links = [
 ];
 ---
 
-<header class="sticky top-0 z-50 bg-[var(--color-surface)] border-b border-[var(--color-border)]">
+<header class="sticky top-0 z-50 bg-[var(--color-bg)] border-b border-[var(--color-border)]">
   <nav class="max-w-[740px] mx-auto px-4ch h-11 flex items-center justify-between">
-    <a
-      href="/"
-      class="font-mono text-sm font-bold text-[var(--color-text)] hover:text-[var(--color-text-label)]"
-    >
-      ~/
-    </a>
-
     <ul class="flex items-center gap-2ch">
       {links.map(({ href, label }) => {
         const active = pathname === href || pathname === href.replace(/\/$/, "");
@@ -26,7 +19,6 @@ const links = [
               href={href}
               aria-current={active ? "page" : undefined}
               class:list={[
-                "font-mono text-sm",
                 active
                   ? "text-[var(--color-text)]"
                   : "text-[var(--color-text-label)] hover:text-[var(--color-text)]",
@@ -37,37 +29,73 @@ const links = [
           </li>
         );
       })}
-      <li>
-        <button
-          data-theme-toggle
-          aria-label="Switch to light mode"
-          class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)] cursor-pointer"
-        >
-          [light]
-        </button>
-      </li>
     </ul>
+
+    <div class="flex items-center gap-2ch">
+      <div role="group" aria-label="Typeface" class="flex items-center gap-[0.5ch] text-[var(--color-text-dim)]">
+        <button data-typeface-btn="sans" class="hover:text-[var(--color-text)] cursor-pointer">sans</button>
+        <span aria-hidden="true">/</span>
+        <button data-typeface-btn="serif" class="hover:text-[var(--color-text)] cursor-pointer">serif</button>
+        <span aria-hidden="true">/</span>
+        <button data-typeface-btn="mono" class="hover:text-[var(--color-text)] cursor-pointer">mono</button>
+      </div>
+
+      <button
+        data-theme-toggle
+        aria-label="Switch to light mode"
+        class="text-[var(--color-text-label)] hover:text-[var(--color-text)] cursor-pointer"
+      >
+        light
+      </button>
+    </div>
   </nav>
 </header>
 
 <script>
-  const btn = document.querySelector("[data-theme-toggle]") as HTMLButtonElement;
+  const themeBtn = document.querySelector("[data-theme-toggle]") as HTMLButtonElement;
 
-  function update() {
+  function updateTheme() {
     const isDark = document.documentElement.classList.contains("dark");
-    btn.textContent = isDark ? "[light]" : "[dark]";
-    btn.setAttribute(
+    themeBtn.textContent = isDark ? "light" : "dark";
+    themeBtn.setAttribute(
       "aria-label",
       isDark ? "Switch to light mode" : "Switch to dark mode",
     );
   }
 
-  btn.addEventListener("click", () => {
+  themeBtn.addEventListener("click", () => {
     const next = !document.documentElement.classList.contains("dark");
     document.documentElement.classList.toggle("dark", next);
     localStorage.setItem("lerko96-dark-mode", String(next));
-    update();
+    updateTheme();
   });
 
-  update();
+  updateTheme();
+
+  const tfBtns = document.querySelectorAll("[data-typeface-btn]");
+
+  function updateTypeface() {
+    const current = document.documentElement.dataset.typeface || "sans";
+    tfBtns.forEach((b) => {
+      const val = b.getAttribute("data-typeface-btn");
+      if (val === current) {
+        b.classList.add("font-bold", "text-[var(--color-text)]");
+        b.classList.remove("text-[var(--color-text-dim)]");
+      } else {
+        b.classList.remove("font-bold", "text-[var(--color-text)]");
+        b.classList.add("text-[var(--color-text-dim)]");
+      }
+    });
+  }
+
+  tfBtns.forEach((b) => {
+    b.addEventListener("click", () => {
+      const val = b.getAttribute("data-typeface-btn")!;
+      document.documentElement.dataset.typeface = val;
+      localStorage.setItem("lerko96-typeface", val);
+      updateTypeface();
+    });
+  });
+
+  updateTypeface();
 </script>
diff --git a/src/components/ProjectCard.astro b/src/components/ProjectCard.astro
index 8aa30a62..02bd0080 100644
--- a/src/components/ProjectCard.astro
+++ b/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>
diff --git a/src/components/Skills.astro b/src/components/Skills.astro
index a07167b5..10be9f57 100644
--- a/src/components/Skills.astro
+++ b/src/components/Skills.astro
@@ -27,14 +27,14 @@ const skillGroups = [
 const totalCount = skillGroups.reduce((n, g) => n + g.skills.length, 0);
 ---
 
-<Widget title="tyler/skills" badge={totalCount} as="section">
+<Widget title="Skills" badge={totalCount} as="section">
   <div class="flex flex-col">
     {skillGroups.map(({ label, skills }) => (
       <div class="flex flex-col xs:flex-row gap-1ch xs:gap-2ch py-half-lh">
-        <span class="font-mono text-sm text-[var(--color-text-dim)] w-28 shrink-0">
+        <span class="text-[var(--color-text-dim)] w-28 shrink-0">
           {label}
         </span>
-        <span class="font-mono text-sm text-[var(--color-text)]">
+        <span>
           {skills.join(" · ")}
         </span>
       </div>
diff --git a/src/components/Timeline.astro b/src/components/Timeline.astro
index a8c43395..a04f5f47 100644
--- a/src/components/Timeline.astro
+++ b/src/components/Timeline.astro
@@ -2,13 +2,7 @@
 import Widget from "./Widget.astro";
 import { timeline, type TimelineType } from "@/data/timeline";
 
-const typeColor: Record<TimelineType, string> = {
-  career: "var(--color-timeline-career)",
-  education: "var(--color-timeline-education)",
-  cert: "var(--color-timeline-cert)",
-  project: "var(--color-timeline-project)",
-  homelab: "var(--color-timeline-homelab)",
-};
+const isDate = (d: string) => /^\d{4}/.test(d);
 
 const typeLabel: Record<TimelineType, string> = {
   career: "career",
@@ -19,70 +13,31 @@ const typeLabel: Record<TimelineType, string> = {
 };
 ---
 
-<Widget title="tyler/journey">
-  <ol class="relative border-l border-[var(--color-border)] ml-[2px] flex flex-col gap-0">
+<Widget title="Journey">
+  <ol class="flex flex-col gap-0">
     {timeline.map((entry) => (
-      <li data-tl-entry class="pl-[3ch] pb-2lh last:pb-0 relative">
-        <span
-          class="absolute -left-[7px] top-[3px] w-3 h-3 rounded-full border border-[var(--color-bg)] shrink-0"
-          style={`background-color: ${typeColor[entry.type]}`}
-          aria-hidden="true"
-        />
-
-        <div class="flex items-center gap-1ch mb-half-lh">
-          <span class="font-mono text-sm text-[var(--color-text-dim)]">{entry.date}</span>
-          <span
-            class="font-mono text-sm px-1 border"
-            style={`color: ${typeColor[entry.type]}; border-color: ${typeColor[entry.type]}; opacity: 0.7;`}
-          >
-            {typeLabel[entry.type]}
-          </span>
-        </div>
-
-        <p class="font-mono text-sm font-semibold text-[var(--color-text)] mb-half-lh">
-          {entry.title}
+      <li class="pb-2lh last:pb-0">
+        <p class="text-[var(--color-text-dim)] mb-qtr-lh">
+          {isDate(entry.date)
+            ? <time datetime={entry.date}>{entry.date}</time>
+            : <span>{entry.date}</span>
+          }
+          <span class="mx-[0.5ch]">·</span>
+          <em>{typeLabel[entry.type]}</em>
         </p>
 
-        <p class="font-mono text-sm text-[var(--color-text)] opacity-70 leading-relaxed mb-half-lh">
+        <h3 class="font-semibold mb-half-lh">{entry.title}</h3>
+
+        <p class="text-[var(--color-text-label)] leading-relaxed mb-half-lh">
           {entry.description}
         </p>
 
         {entry.tags && entry.tags.length > 0 && (
-          <div class="flex flex-wrap gap-x-1ch gap-y-half-lh">
-            {entry.tags.map((tag) => (
-              <span class="font-mono text-sm text-[var(--color-text-dim)]">
-                {tag}
-              </span>
-            ))}
-          </div>
+          <p class="text-[var(--color-text-dim)]">
+            {entry.tags.join(" · ")}
+          </p>
         )}
       </li>
     ))}
   </ol>
 </Widget>
-
-<script>
-  if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
-    const entries = document.querySelectorAll<HTMLElement>("[data-tl-entry]");
-
-    const observer = new IntersectionObserver(
-      (observed) => {
-        observed.forEach((entry) => {
-          if (entry.isIntersecting) {
-            (entry.target as HTMLElement).style.opacity = "1";
-            (entry.target as HTMLElement).style.transform = "translateY(0)";
-            observer.unobserve(entry.target);
-          }
-        });
-      },
-      { threshold: 0.15 },
-    );
-
-    entries.forEach((el) => {
-      el.style.opacity = "0";
-      el.style.transform = "translateY(8px)";
-      el.style.transition = "opacity 240ms linear, transform 240ms linear";
-      observer.observe(el);
-    });
-  }
-</script>
diff --git a/src/components/Widget.astro b/src/components/Widget.astro
index 0e66c652..cd2a6e44 100644
--- a/src/components/Widget.astro
+++ b/src/components/Widget.astro
@@ -8,22 +8,18 @@ interface Props {
 }
 
 const { title, badge, meta, as: Tag = "section", class: className } = Astro.props;
-const slashIdx = title.lastIndexOf("/");
-const prefix = slashIdx >= 0 ? title.slice(0, slashIdx + 1) : null;
-const name = slashIdx >= 0 ? title.slice(slashIdx + 1) : title;
 ---
 
 <Tag class:list={["mb-4lh", className]}>
-  <div class="flex items-center gap-1ch mb-2lh">
-    {prefix && (
-      <span class="font-mono text-sm text-[var(--color-text-dim)] select-none">{prefix}</span>
-    )}
-    <span class="font-mono text-sm font-semibold text-[var(--color-text)]">{name}</span>
-    {badge !== undefined && (
-      <span class="font-mono text-sm text-[var(--color-text-dim)]">[{badge}]</span>
-    )}
+  <div class="mb-2lh">
+    <h2 class="text-lg font-semibold">
+      {title}
+      {badge !== undefined && (
+        <span class="text-[var(--color-text-dim)] font-normal"> ({badge})</span>
+      )}
+    </h2>
     {meta && (
-      <span class="font-mono text-sm text-[var(--color-text-dim)]">— {meta}</span>
+      <p class="text-[var(--color-text-dim)]">{meta}</p>
     )}
   </div>
   <slot />
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index 39d32349..c615eb4d 100644
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -25,14 +25,18 @@ const {
         if (dark) document.documentElement.classList.add("dark");
       })();
     </script>
+    <script is:inline>
+      (function () {
+        var tf = localStorage.getItem("lerko96-typeface") || "sans";
+        document.documentElement.dataset.typeface = tf;
+      })();
+    </script>
   </head>
   <body
-    class="bg-[var(--color-bg)] text-[var(--color-text)] font-mono min-h-screen"
+    class="bg-[var(--color-bg)] text-[var(--color-text)] min-h-screen"
   >
     <slot name="nav" />
-    <div
-      class="max-w-[740px] mx-auto border-l border-r border-[var(--color-border)]"
-    >
+    <div class="max-w-[740px] mx-auto">
       <main class="px-4ch py-3lh">
         <slot />
       </main>
diff --git a/src/pages/homelab.astro b/src/pages/homelab.astro
index 72784006..d28aef6c 100644
--- a/src/pages/homelab.astro
+++ b/src/pages/homelab.astro
@@ -86,16 +86,8 @@ const adrs = [
   <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>
-      homelab
-    </p>
-    <p class="font-mono text-sm text-[var(--color-text)] leading-relaxed max-w-2xl opacity-80">
+    <h1 class="text-xl font-bold mb-half-lh">Homelab</h1>
+    <p class="text-[var(--color-text-label)] leading-relaxed max-w-2xl">
       Personal infrastructure environment for learning, self-hosting, and
       operational practice. Running 24/7 on production-grade hardware with
       real network segmentation, SSO, monitoring, and IaC-style
@@ -103,53 +95,43 @@ const adrs = [
     </p>
   </div>
 
-  <Widget title="homelab/overview" badge={glanceStats.length} as="section">
-    <div class="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 gap-px bg-[var(--color-border)]">
+  <Widget title="Overview" badge={glanceStats.length} as="section">
+    <dl class="flex flex-col">
       {glanceStats.map(({ label, value }) => (
-        <div class="bg-[var(--color-surface)] px-2ch py-half-lh">
-          <p class="font-mono text-sm text-[var(--color-text-dim)] mb-half-lh">
-            {label}
-          </p>
-          <p class="font-mono text-sm text-[var(--color-text)]">
-            {value}
-          </p>
+        <div class="flex gap-2ch py-qtr-lh">
+          <dt class="text-[var(--color-text-dim)] w-[16ch] shrink-0">{label}</dt>
+          <dd>{value}</dd>
         </div>
       ))}
-    </div>
+    </dl>
   </Widget>
 
   <Widget
-    title="homelab/network"
-    meta="8 network segments · default deny"
+    title="Network"
+    meta="8 segments, default deny"
     as="section"
   >
     <div class="overflow-x-auto">
-      <table class="w-full text-sm border-collapse">
+      <table class="w-full border-collapse">
         <thead>
           <tr class="border-b border-[var(--color-border)]">
-            <th class="font-mono text-[var(--color-text-dim)] text-left py-qtr-lh pr-[3ch] uppercase">
+            <th class="text-[var(--color-text-dim)] text-left py-qtr-lh pr-[3ch]">
               Segment
             </th>
-            <th class="font-mono text-[var(--color-text-dim)] text-left py-qtr-lh pr-[3ch] uppercase">
+            <th class="text-[var(--color-text-dim)] text-left py-qtr-lh pr-[3ch]">
               Name
             </th>
-            <th class="font-mono text-[var(--color-text-dim)] text-left py-qtr-lh uppercase">
+            <th class="text-[var(--color-text-dim)] text-left py-qtr-lh">
               Purpose
             </th>
           </tr>
         </thead>
         <tbody>
           {vlans.map((v) => (
-            <tr class="border-b border-[var(--color-border)] hover:bg-[var(--color-surface)]">
-              <td class="font-mono text-[var(--color-accent-green)] py-half-lh pr-[3ch]">
-                {v.id}
-              </td>
-              <td class="font-mono text-[var(--color-text)] py-half-lh pr-[3ch]">
-                {v.name}
-              </td>
-              <td class="font-mono text-sm text-[var(--color-text)] py-2.5 opacity-80">
-                {v.purpose}
-              </td>
+            <tr class="border-b border-[var(--color-border)]">
+              <td class="py-half-lh pr-[3ch]">{v.id}</td>
+              <td class="py-half-lh pr-[3ch]">{v.name}</td>
+              <td class="text-[var(--color-text-label)] py-half-lh">{v.purpose}</td>
             </tr>
           ))}
         </tbody>
@@ -157,29 +139,23 @@ const adrs = [
     </div>
   </Widget>
 
-  <Widget title="homelab/services" badge={services.length} as="section">
-    <div class="flex flex-col gap-3ch">
+  <Widget title="Services" badge={services.length} as="section">
+    <div class="flex flex-col gap-2lh">
       {categoryOrder.map((cat) => {
         const catServices = services.filter((s) => s.category === cat);
         return (
           <div>
-            <p class="font-mono text-sm text-[var(--color-text-dim)] mb-1lh">
+            <h3 class="text-[var(--color-text-dim)] font-semibold mb-half-lh">
               {categoryLabels[cat]}
-            </p>
-            <div class="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 gap-px bg-[var(--color-border)]">
+            </h3>
+            <ul class="flex flex-col">
               {catServices.map((svc) => (
-                <div class="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] flex items-start gap-1ch px-2ch py-half-lh">
-                  <div>
-                    <p class="font-mono text-sm text-[var(--color-text)] mb-0.5">
-                      {svc.name}
-                    </p>
-                    <p class="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-75">
-                      {svc.description}
-                    </p>
-                  </div>
-                </div>
+                <li class="py-qtr-lh">
+                  <span class="font-semibold">{svc.name}</span>
+                  <span class="text-[var(--color-text-label)]"> — {svc.description}</span>
+                </li>
               ))}
-            </div>
+            </ul>
           </div>
         );
       })}
@@ -187,49 +163,38 @@ const adrs = [
   </Widget>
 
   <Widget
-    title="homelab/ADRs"
+    title="ADRs"
     meta="why things are configured the way they are"
     badge={adrs.length}
     as="section"
   >
-    <div class="flex flex-col gap-px bg-[var(--color-border)]">
+    <div class="flex flex-col gap-2lh">
       {adrs.map((adr) => (
-        <div class="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] px-2ch py-1lh">
-          <p class="font-mono text-sm text-[var(--color-text)] mb-1lh">
-            {adr.title}
+        <div>
+          <h3 class="font-semibold mb-half-lh">{adr.title}</h3>
+          <p class="text-[var(--color-text-label)] leading-relaxed mb-half-lh">
+            <strong>Decision:</strong> {adr.decision}
           </p>
-          <p class="font-mono text-sm text-[var(--color-text)] leading-relaxed mb-half-lh opacity-75">
-            <span class="text-[var(--color-text-label)] opacity-100">
-              decision:{" "}
-            </span>
-            {adr.decision}
-          </p>
-          <p class="font-mono text-sm text-[var(--color-text)] leading-relaxed opacity-75">
-            <span class="text-[var(--color-text-label)] opacity-100">
-              why:{" "}
-            </span>
-            {adr.why}
+          <p class="text-[var(--color-text-label)] leading-relaxed">
+            <strong>Why:</strong> {adr.why}
           </p>
         </div>
       ))}
     </div>
   </Widget>
 
-  <section class="pt-qtr-lh">
-    <p class="font-mono text-sm text-[var(--color-text-dim)] mb-half-lh">
-      homelab/docs
-    </p>
-    <p class="font-mono text-sm text-[var(--color-text)] mb-1lh opacity-75">
-      VLAN maps, runbooks, service registry, config exports, and setup
-      guides.
+  <section class="mb-4lh">
+    <h2 class="text-lg font-semibold mb-half-lh">Docs</h2>
+    <p class="text-[var(--color-text-label)] mb-half-lh">
+      VLAN maps, runbooks, service registry, config exports, and setup guides.
     </p>
     <a
       href="https://gitea.lerkolabs.com/lerko/homelab"
       target="_blank"
       rel="noopener noreferrer"
-      class="font-mono text-sm text-[var(--color-text-label)] hover:text-[var(--color-text)]"
+      class="underline hover:text-[var(--color-text-label)]"
     >
-      ↗ gitea.lerkolabs.com/lerko/homelab
+      gitea.lerkolabs.com/lerko/homelab
     </a>
   </section>
 
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
index 27f8197e..e1f043d6 100644
--- a/src/pages/projects.astro
+++ b/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>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index ab32ea34..8f4e6eec 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -3,28 +3,21 @@
 @variant dark (&:where(.dark, .dark *));
 
 @theme {
-  /* macOS Classic Dark (default) */
-  --color-bg:             #131313;
-  --color-surface:        #1e1d1e;
-  --color-surface-raised: #272727;
-  --color-border:         #3a3a3a;
-  --color-border-bright:  #404040;
-  --color-text:           #caccca;
-  --color-text-label:     #9e9e9e;
-  --color-text-dim:       #8f8f8f;
-  --color-accent-green:   #62ba46;
-  --color-accent-red:     #c74028;
-
-  /* Timeline type colors — dark */
-  --color-timeline-career:    #62ba46;
-  --color-timeline-education: #c28b12;
-  --color-timeline-cert:      #c75828;
-  --color-timeline-project:   #c72855;
-  --color-timeline-homelab:   #e1d797;
+  /* Slate (dark, default) */
+  --color-bg:             #1A1B1E;
+  --color-surface:        #22242A;
+  --color-surface-raised: #2A2D34;
+  --color-border:         #33363E;
+  --color-border-bright:  #3E4148;
+  --color-text:           #D4D4D8;
+  --color-text-label:     #9CA0AA;
+  --color-text-dim:       #888D9B;
 
   /* Typography */
-  --font-mono: "Source Code Pro", ui-monospace, monospace;
-  --font-sans: ui-sans-serif, system-ui, sans-serif;
+  --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
+  --font-mono:  "Source Code Pro", ui-monospace, monospace;
+  --font-body:  var(--font-sans);
 
   /* Breakpoints */
   --breakpoint-xs: 576px;
@@ -42,28 +35,22 @@
   --spacing-2lh:     2lh;
   --spacing-3lh:     3lh;
   --spacing-4lh:     4lh;
-
-  /* Animations */
-  --animate-fade-in: fadeIn 120ms linear forwards;
-
-  @keyframes fadeIn {
-    from { opacity: 0; }
-    to   { opacity: 1; }
-  }
 }
 
 /* Base */
 html {
   scroll-behavior: smooth;
-  font-size: 15px;
+  font-size: 16px;
   line-height: 1.5;
   background-color: var(--color-bg);
   color: var(--color-text);
-  font-family: var(--font-mono);
+  font-family: var(--font-body);
 }
 
-@keyframes blink { 50% { opacity: 0; } }
-.animate-cursor { animation: blink 1s step-start infinite; }
+/* Typeface picker overrides */
+html[data-typeface="sans"]  { --font-body: var(--font-sans); }
+html[data-typeface="serif"] { --font-body: var(--font-serif); line-height: 1.6; }
+html[data-typeface="mono"]  { --font-body: var(--font-mono); font-size: 15px; letter-spacing: -0.01em; }
 
 @layer base {
   * {
@@ -73,31 +60,33 @@ html {
   }
 }
 
-/* macOS Classic Light overrides */
+/* Bone (light) overrides */
 :root:not(.dark) {
-  --color-bg:             #ffffff;
-  --color-surface:        #f9f9f9;
-  --color-surface-raised: #f7f7f7;
-  --color-border:         #e0e0e0;
-  --color-border-bright:  #d2d2d2;
-  --color-text:           #000000;
-  --color-text-label:     #505050;
-  --color-text-dim:       #929292;
-  --color-accent-green:   #036a07;
-  --color-accent-red:     #d21f07;
-
-  --color-timeline-career:    #036a07;
-  --color-timeline-education: #0433ff;
-  --color-timeline-cert:      #957931;
-  --color-timeline-project:   #6f42c1;
-  --color-timeline-homelab:   #0000a2;
+  --color-bg:             #FAF8F5;
+  --color-surface:        #F3F0EB;
+  --color-surface-raised: #EBE8E3;
+  --color-border:         #E0DCD5;
+  --color-border-bright:  #D4D0C8;
+  --color-text:           #2C2C2C;
+  --color-text-label:     #6B6560;
+  --color-text-dim:       #787068;
 }
 
-/* Default transitions — linear, fast */
+/* Link underlines */
+a {
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
+  text-decoration-color: var(--color-border-bright);
+}
+a:hover {
+  text-decoration-color: currentColor;
+}
+
+/* Default transitions */
 a,
 button {
   transition: color 120ms linear, border-color 120ms linear,
-    background-color 120ms linear, opacity 120ms linear;
+    opacity 120ms linear, text-decoration-color 120ms linear;
 }
 
 @media (prefers-reduced-motion: reduce) {
-- 
2.52.0