feat(theme): implement console.dark + console.light design system

Replace macOS Classic theme with console-inspired palette. Amber accent,
warm off-white text hierarchy, desaturated green status pips, VLAN-grouped
home services, git-log tabular journey, identity key-value grid with
contact links, active pane (studying/shipping/maintaining). Wider 960px
container, pane headers, responsive mobile fallbacks.

src/components/Active.astro

@@ -0,0 +1,51 @@
+---
+const items = [
+  {
+    label: "studying",
+    title: "comptia network+",
+    meta: "ch. 7 · ipv6 addressing",
+    progress: 0.62,
+    progressText: "62%",
+  },
+  {
+    label: "shipping",
+    title: "portfolio site v2",
+    meta: "astro 5 · gitea actions ci · dmz lxc",
+  },
+  {
+    label: "maintaining",
+    title: "32 services across 4 vlans",
+    meta: "last alert 11d ago · backups green",
+  },
+];
+---
+
+<section class="border-r border-[var(--color-border)]">
+  <div class="flex items-baseline justify-between px-5 py-3.5 border-b border-[var(--color-border)]">
+    <span class="text-[var(--color-text-fg)] text-[11px] tracking-[0.16em] uppercase">active</span>
+    <span class="text-[var(--color-text-label)] text-[11px]">updated 4m ago</span>
+  </div>
+
+  <div>
+    {items.map((it, i) => (
+      <div class:list={[
+        "px-5 py-4",
+        i < items.length - 1 && "border-b border-[var(--color-border)]",
+      ]}>
+        <div class="flex items-baseline justify-between gap-2.5">
+          <span class="text-[var(--color-text-label)] text-[10px] tracking-[0.16em] uppercase">{it.label}</span>
+          {it.progress != null && (
+            <span class="text-[var(--color-text-fg)] text-[11px] tabular-nums">{it.progressText}</span>
+          )}
+        </div>
+        <div class="text-[var(--color-text-heading)] text-[15px] mt-1">{it.title}</div>
+        <div class="text-[var(--color-text)] text-xs mt-0.5">{it.meta}</div>
+        {it.progress != null && (
+          <div class="mt-2.5 h-[3px] bg-[var(--color-border-bright)]">
+            <div class="h-full bg-[var(--color-accent)]" style={`width: ${it.progress * 100}%`} />
+          </div>
+        )}
+      </div>
+    ))}
+  </div>
+</section>

src/components/Footer.astro

@@ -2,40 +2,38 @@
 const year = new Date().getFullYear();
 ---
 
-<footer class="border-t border-[var(--color-border)] py-1lh mt-2lh">
+<footer class="flex flex-col sm:flex-row justify-between items-center gap-2 px-6 py-3.5 border-t border-[var(--color-border)] bg-[var(--color-surface-raised)] text-[var(--color-text-label)] text-xs">
-  <div class="px-4ch flex items-center justify-between text-[var(--color-text-dim)]">
+  <span>&copy; {year} tyler koenig &middot; self-hosted in a dmz lxc</span>
-    <span>&copy; {year} Tyler Koenig</span>
+  <div class="flex items-center gap-5">
-    <nav class="flex items-center gap-2ch">
     <a
       href="https://github.com/lerko96"
       target="_blank"
       rel="noopener noreferrer"
-        class="underline hover:text-[var(--color-text)]"
+      class="hover:text-[var(--color-text-fg)]"
     >
-        GitHub
+      github
     </a>
     <a
       href="https://gitea.lerkolabs.com/lerko"
       target="_blank"
       rel="noopener noreferrer"
-        class="underline hover:text-[var(--color-text)]"
+      class="hover:text-[var(--color-text-fg)]"
     >
-        Gitea
+      gitea
     </a>
     <a
       href="https://www.linkedin.com/in/tyler-koenig"
       target="_blank"
       rel="noopener noreferrer"
-        class="underline hover:text-[var(--color-text)]"
+      class="hover:text-[var(--color-text-fg)]"
     >
-        LinkedIn
+      linkedin
     </a>
     <a
       href="mailto:tyler@lerkolabs.com"
-        class="underline hover:text-[var(--color-text)]"
+      class="hover:text-[var(--color-text-fg)]"
     >
-        Email
+      email
     </a>
-    </nav>
   </div>
 </footer>

src/components/Hero.astro

@@ -1,45 +1,62 @@
-<section class="mb-3lh">
+---
-  <h1 class="text-xl font-bold mb-half-lh">Tyler Koenig</h1>
+const identity = [
-  <p class="text-[var(--color-text-label)] mb-1lh">
+  ["role", "soc analyst i · fortress srm"],
-    Security Operations · Self-Hosted Infrastructure
+  ["based", "cleveland, oh · est. 2021"],
+  ["stack", "go · react · typescript · linux"],
+  ["infra", "proxmox · pfsense · authentik · nginx"],
+  ["observ", "victoriametrics · grafana · beszel · ntfy"],
+  ["certs", "comptia a+ · network+ (in progress)"],
+];
+
+const contact = [
+  { key: "github", value: "lerko96", href: "https://github.com/lerko96", glyph: "↗" },
+  { key: "gitea", value: "gitea.lerkolabs.com/lerko", href: "https://gitea.lerkolabs.com/lerko", glyph: "↗" },
+  { key: "linkedin", value: "tyler-koenig", href: "https://www.linkedin.com/in/tyler-koenig", glyph: "↗" },
+  { key: "email", value: "tyler@lerkolabs.com", href: "mailto:tyler@lerkolabs.com", glyph: "✉" },
+];
+---
+
+<section class="border-b border-[var(--color-border)]">
+  <div class="flex items-baseline justify-between px-5 py-3.5 border-b border-[var(--color-border)]">
+    <span class="text-[var(--color-text-fg)] text-[11px] tracking-[0.16em] uppercase">identity</span>
+    <span class="text-[var(--color-text-label)] text-[11px]">~/identity.toml</span>
+  </div>
+
+  <div class="px-6 py-6 grid grid-cols-1 md:grid-cols-[1.4fr_1fr] gap-9">
+    <div>
+      <h1 class="text-[var(--color-text-heading)] text-[38px] leading-[1.05] tracking-tight font-semibold">
+        tyler koenig
+      </h1>
+      <p class="text-[var(--color-text)] text-sm mt-2 leading-relaxed max-w-[540px]">
+        security operations, self-hosted infrastructure, and the software that holds it together.
       </p>
 
-  <p class="text-[var(--color-text-label)] leading-relaxed mb-1lh">
+      <dl class="mt-6 grid grid-cols-[auto_1fr] gap-x-6 gap-y-1.5 text-[13px] tabular-nums">
-    Homelab runs 30+ services across segmented VLANs — pfSense, Authentik SSO,
+        {identity.map(([k, v]) => (
-    full observability stack. Write software too: mobile apps, Go backends, open
+          <Fragment>
-    protocols. Daily drivers, all of it.
+            <dt class="text-[var(--color-text-label)] tracking-wide">{k}</dt>
-  </p>
+            <dd class="text-[var(--color-text-fg)]">{v}</dd>
+          </Fragment>
+        ))}
+      </dl>
+    </div>
 
-  <nav class="flex flex-wrap items-center gap-x-2ch gap-y-half-lh text-[var(--color-text-label)]">
+    <aside>
+      <div class="text-[var(--color-text-label)] text-[11px] tracking-[0.12em] mb-2.5">CONTACT</div>
+      <div class="grid gap-px">
+        {contact.map(({ key, value, href, glyph }) => (
           <a
-      href="https://github.com/lerko96"
+            href={href}
-      target="_blank"
+            target={href.startsWith("mailto") ? undefined : "_blank"}
-      rel="noopener noreferrer"
+            rel={href.startsWith("mailto") ? undefined : "noopener noreferrer"}
-      class="underline hover:text-[var(--color-text)]"
+            class="grid grid-cols-[90px_1fr_16px] gap-x-2.5 items-baseline py-[7px] border-b border-[var(--color-border)] text-[13px] no-underline hover:bg-[var(--color-surface)]"
           >
-      GitHub
+            <span class="text-[var(--color-text-label)] tracking-wide">{key}</span>
+            <span class="text-[var(--color-text-fg)] overflow-hidden text-ellipsis whitespace-nowrap">{value}</span>
+            <span class="text-[var(--color-accent)] text-right">{glyph}</span>
           </a>
-    <a
+        ))}
-      href="https://gitea.lerkolabs.com/lerko"
+      </div>
-      target="_blank"
+    </aside>
-      rel="noopener noreferrer"
+  </div>
-      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>

src/components/HomeServices.astro

@@ -0,0 +1,67 @@
+---
+const vlans = [
+  {
+    id: "vlan10",
+    label: "management",
+    services: [
+      { name: "pfsense", kind: "firewall" },
+      { name: "authentik", kind: "sso" },
+      { name: "proxmox", kind: "hypervisor" },
+      { name: "pbs", kind: "backup" },
+    ],
+  },
+  {
+    id: "vlan20",
+    label: "public-facing",
+    services: [
+      { name: "gitea", kind: "scm/ci" },
+      { name: "caddy", kind: "proxy" },
+      { name: "lerkolabs.com", kind: "web" },
+    ],
+  },
+  {
+    id: "vlan30",
+    label: "internal services",
+    services: [
+      { name: "victoriametrics", kind: "tsdb" },
+      { name: "grafana", kind: "dashboards" },
+      { name: "beszel", kind: "host-mon" },
+      { name: "ntfy", kind: "alerts" },
+      { name: "jellyfin", kind: "media" },
+    ],
+  },
+];
+
+const totalSvc = vlans.reduce((n, v) => n + v.services.length, 0);
+---
+
+<section>
+  <div class="flex items-baseline justify-between px-5 py-3.5 border-b border-[var(--color-border)]">
+    <span class="text-[var(--color-text-fg)] text-[11px] tracking-[0.16em] uppercase">infrastructure</span>
+    <span class="text-[var(--color-text-label)] text-[11px]">{totalSvc} up · 0 failed</span>
+  </div>
+
+  <div>
+    {vlans.map((vlan, gi) => (
+      <div class:list={[gi < vlans.length - 1 && "border-b border-[var(--color-border)]"]}>
+        <div class="flex items-baseline gap-2.5 px-5 pt-2.5 pb-1 text-[var(--color-text-label)] text-[10px] tracking-[0.14em]">
+          <span class="text-[var(--color-text-fg)]">{vlan.id}</span>
+          <span>·</span>
+          <span class="uppercase">{vlan.label}</span>
+          <span class="ml-auto text-[var(--color-text-faint)]">{vlan.services.length} svc</span>
+        </div>
+
+        {vlan.services.map((s) => (
+          <div class="grid grid-cols-[12px_1fr_110px_60px] gap-x-2.5 px-5 py-1.5 text-[13px] items-baseline tabular-nums">
+            <span class="w-1.5 h-1.5 rounded-full bg-[var(--color-accent-green)] self-center" />
+            <span class="text-[var(--color-text-fg)]">{s.name}</span>
+            <span class="text-[var(--color-text-label)] text-[11px]">{s.kind}</span>
+            <span class="text-[var(--color-text-label)] text-[11px] text-right">up</span>
+          </div>
+        ))}
+
+        <div class="h-2" />
+      </div>
+    ))}
+  </div>
+</section>

src/components/Nav.astro

@@ -8,42 +8,44 @@ const links = [
 ];
 ---
 
-<header class="sticky top-0 z-50 bg-[var(--color-bg)] border-b border-[var(--color-border)]">
+<header class="sticky top-0 z-50 bg-[var(--color-surface-raised)] border-b border-[var(--color-border)]">
-  <nav class="max-w-[740px] mx-auto px-4ch h-11 flex items-center justify-between">
+  <nav class="max-w-[960px] mx-auto px-6 h-11 flex items-center justify-between text-xs tabular-nums">
-    <ul class="flex items-center gap-2ch">
+    <div class="flex items-center gap-4">
+      <a href="/" class="text-[var(--color-text-fg)] tracking-wide hover:text-[var(--color-text-heading)]">
+        lerkolabs
+      </a>
+      <span class="text-[var(--color-text-faint)]">/</span>
+      <span class="text-[var(--color-text-label)]">tyler</span>
+      <span class="text-[var(--color-text-faint)]">/</span>
+      <span class="text-[var(--color-text-label)]">~</span>
+    </div>
+
+    <div class="flex items-center gap-5">
+      <span class="hidden sm:inline-flex items-center gap-1.5">
+        <span class="inline-block w-1.5 h-1.5 rounded-full bg-[var(--color-accent-green)] status-pip" />
+        <span class="text-[var(--color-text-fg)]">available</span>
+      </span>
+
       {links.map(({ href, label }) => {
         const active = pathname === href || pathname === href.replace(/\/$/, "");
         return (
-          <li>
           <a
             href={href}
             aria-current={active ? "page" : undefined}
             class:list={[
               active
-                  ? "text-[var(--color-text)]"
+                ? "text-[var(--color-text-fg)]"
-                  : "text-[var(--color-text-label)] hover:text-[var(--color-text)]",
+                : "text-[var(--color-text-label)] hover:text-[var(--color-text-fg)]",
             ]}
           >
             {label}
           </a>
-          </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"
+        class="text-[var(--color-text-fg)] hover:text-[var(--color-accent)] cursor-pointer"
       >
         light
       </button>
@@ -51,51 +53,33 @@ const links = [
   </nav>
 </header>
 
-<script>
+<style>
-  const themeBtn = document.querySelector("[data-theme-toggle]") as HTMLButtonElement;
+  .status-pip {
+    box-shadow: 0 0 6px color-mix(in srgb, var(--color-accent-green) 67%, transparent);
+  }
+  :root:not(.dark) .status-pip {
+    box-shadow: none;
+  }
+</style>
 
-  function updateTheme() {
+<script>
+  const btn = document.querySelector("[data-theme-toggle]") as HTMLButtonElement;
+
+  function update() {
     const isDark = document.documentElement.classList.contains("dark");
-    themeBtn.textContent = isDark ? "light" : "dark";
+    btn.textContent = isDark ? "light" : "dark";
-    themeBtn.setAttribute(
+    btn.setAttribute(
       "aria-label",
       isDark ? "Switch to light mode" : "Switch to dark mode",
     );
   }
 
-  themeBtn.addEventListener("click", () => {
+  btn.addEventListener("click", () => {
     const next = !document.documentElement.classList.contains("dark");
     document.documentElement.classList.toggle("dark", next);
     localStorage.setItem("lerko96-dark-mode", String(next));
-    updateTheme();
+    update();
   });
 
-  updateTheme();
+  update();
-
-  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>

src/components/ProjectCard.astro

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

src/components/Skills.astro

@@ -27,14 +27,14 @@ const skillGroups = [
 const totalCount = skillGroups.reduce((n, g) => n + g.skills.length, 0);
 ---
 
-<Widget title="Skills" badge={totalCount} as="section">
+<Widget title="tyler/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="text-[var(--color-text-dim)] w-28 shrink-0">
+        <span class="font-mono text-sm text-[var(--color-text-dim)] w-28 shrink-0">
           {label}
         </span>
-        <span>
+        <span class="font-mono text-sm text-[var(--color-text)]">
           {skills.join(" · ")}
         </span>
       </div>

src/components/Timeline.astro

@@ -1,43 +1,101 @@
 ---
-import Widget from "./Widget.astro";
+import { timeline } from "@/data/timeline";
-import { timeline, type TimelineType } from "@/data/timeline";
 
-const isDate = (d: string) => /^\d{4}/.test(d);
+const branchColor: Record<string, string> = {
-
+  career: "var(--color-timeline-career)",
-const typeLabel: Record<TimelineType, string> = {
+  education: "var(--color-timeline-education)",
-  career: "career",
+  cert: "var(--color-timeline-cert)",
-  education: "education",
+  project: "var(--color-timeline-project)",
-  cert: "cert",
+  homelab: "var(--color-timeline-homelab)",
-  project: "project",
-  homelab: "homelab",
 };
+
+const hashes = [
+  "a14c2e1", "8f9b3d2", "7a02b41", "4c1f0aa", "3e9d8c0",
+  "2b6a51f", "9d4c12a", "6e0b8a3", "1c7a4ff", "d5b3e92",
+  "5a8f1ee", "e2b71ac", "f0a39db", "0000000",
+];
 ---
 
-<Widget title="Journey">
+<section class="border-t border-[var(--color-border)]">
-  <ol class="flex flex-col gap-0">
+  <div class="flex items-baseline justify-between px-5 py-3.5 border-b border-[var(--color-border)]">
-    {timeline.map((entry) => (
+    <span class="text-[var(--color-text-fg)] text-[11px] tracking-[0.16em] uppercase">journey</span>
-      <li class="pb-2lh last:pb-0">
+    <span class="text-[var(--color-text-label)] text-[11px]">{timeline.length} commits · 5 branches · git log --all</span>
-        <p class="text-[var(--color-text-dim)] mb-qtr-lh">
+  </div>
-          {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>
 
-        <h3 class="font-semibold mb-half-lh">{entry.title}</h3>
+  <!-- Desktop: tabular grid -->
-
+  <div class="hidden md:grid grid-cols-[92px_86px_92px_1fr] text-[13px] tabular-nums">
-        <p class="text-[var(--color-text-label)] leading-relaxed mb-half-lh">
+    {["date", "commit", "scope", "message"].map((h) => (
-          {entry.description}
+      <div class:list={[
-        </p>
+        "text-[var(--color-text-label)] text-[10px] tracking-[0.16em] uppercase py-3 px-3 border-b border-[var(--color-border)]",
-
+        h === "date" && "pl-6",
-        {entry.tags && entry.tags.length > 0 && (
+      ]}>
-          <p class="text-[var(--color-text-dim)]">
+        {h}
-            {entry.tags.join(" · ")}
+      </div>
-          </p>
-        )}
-      </li>
     ))}
-  </ol>
+
-</Widget>
+    {timeline.map((entry, i) => {
+      const color = branchColor[entry.type] || "var(--color-text-fg)";
+      const hash = hashes[i] || "0000000";
+      const last = i === timeline.length - 1;
+      const borderClass = last ? "" : "border-b border-[var(--color-border)]";
+      return (
+        <Fragment>
+          <div class:list={["py-3.5 px-3 pl-6", borderClass]}>
+            <span class="text-[var(--color-text-fg)]">{entry.date}</span>
+          </div>
+          <div class:list={["py-3.5 px-3", borderClass]}>
+            <span class="text-[var(--color-accent)]">{hash}</span>
+          </div>
+          <div class:list={["py-3.5 px-3", borderClass]}>
+            <span class="text-[11px] border-b border-dotted pb-px" style={`color: ${color}; border-color: ${color}`}>
+              {entry.type}
+            </span>
+          </div>
+          <div class:list={["py-3.5 px-3 pr-6", borderClass]}>
+            <span class="text-[var(--color-text-heading)]">{entry.title}</span>
+            <div class="text-[var(--color-text)] text-xs mt-0.5 leading-relaxed">{entry.description}</div>
+            {entry.tags && entry.tags.length > 0 && (
+              <div class="mt-1.5 flex gap-3.5 flex-wrap text-[var(--color-text-label)] text-[10px]">
+                {entry.tags.map((t) => (
+                  <span>· {t}</span>
+                ))}
+              </div>
+            )}
+          </div>
+        </Fragment>
+      );
+    })}
+  </div>
+
+  <!-- Mobile: stacked cards -->
+  <div class="md:hidden">
+    {timeline.map((entry, i) => {
+      const color = branchColor[entry.type] || "var(--color-text-fg)";
+      const hash = hashes[i] || "0000000";
+      const last = i === timeline.length - 1;
+      return (
+        <div class:list={[
+          "px-5 py-4",
+          !last && "border-b border-[var(--color-border)]",
+        ]}>
+          <div class="flex items-center gap-3 mb-1.5 text-xs">
+            <span class="text-[var(--color-text-fg)]">{entry.date}</span>
+            <span class="text-[var(--color-accent)]">{hash}</span>
+            <span class="border-b border-dotted pb-px text-[11px]" style={`color: ${color}; border-color: ${color}`}>
+              {entry.type}
+            </span>
+          </div>
+          <div class="text-[var(--color-text-heading)] text-sm">{entry.title}</div>
+          <div class="text-[var(--color-text)] text-xs mt-0.5 leading-relaxed">{entry.description}</div>
+          {entry.tags && entry.tags.length > 0 && (
+            <div class="mt-1.5 flex gap-3 flex-wrap text-[var(--color-text-label)] text-[10px]">
+              {entry.tags.map((t) => (
+                <span>· {t}</span>
+              ))}
+            </div>
+          )}
+        </div>
+      );
+    })}
+  </div>
+</section>

src/components/Widget.astro

@@ -10,17 +10,13 @@ interface Props {
 const { title, badge, meta, as: Tag = "section", class: className } = Astro.props;
 ---
 
-<Tag class:list={["mb-4lh", className]}>
+<Tag class:list={["mb-0", className]}>
-  <div class="mb-2lh">
+  <div class="flex items-baseline justify-between px-5 py-3.5 border-b border-[var(--color-border)]">
-    <h2 class="text-lg font-semibold">
+    <span class="text-[var(--color-text-fg)] text-[11px] tracking-[0.16em] uppercase">{title}</span>
-      {title}
+    <span class="text-[var(--color-text-label)] text-[11px]">
-      {badge !== undefined && (
+      {badge !== undefined && <span>[{badge}]</span>}
-        <span class="text-[var(--color-text-dim)] font-normal"> ({badge})</span>
+      {meta && <span>{meta}</span>}
-      )}
+    </span>
-    </h2>
-    {meta && (
-      <p class="text-[var(--color-text-dim)]">{meta}</p>
-    )}
   </div>
   <slot />
 </Tag>

src/layouts/Base.astro

@@ -25,19 +25,13 @@ 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)] min-h-screen"
+    class="bg-[var(--color-bg)] text-[var(--color-text)] font-mono min-h-screen"
   >
     <slot name="nav" />
-    <div class="max-w-[740px] mx-auto">
+    <div class="max-w-[960px] mx-auto">
-      <main class="px-4ch py-3lh">
+      <main>
         <slot />
       </main>
       <slot name="footer" />

src/pages/homelab.astro

@@ -85,9 +85,9 @@ const adrs = [
 >
   <Nav slot="nav" />
 
-  <div class="mb-4lh">
+  <div class="px-6 py-6 border-b border-[var(--color-border)]">
-    <h1 class="text-xl font-bold mb-half-lh">Homelab</h1>
+    <h1 class="text-[var(--color-text-heading)] text-lg font-semibold mb-2">homelab</h1>
-    <p class="text-[var(--color-text-label)] leading-relaxed max-w-2xl">
+    <p class="text-[var(--color-text)] text-sm 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
@@ -95,43 +95,53 @@ const adrs = [
     </p>
   </div>
 
-  <Widget title="Overview" badge={glanceStats.length} as="section">
+  <Widget title="homelab/overview" badge={glanceStats.length} as="section">
-    <dl class="flex flex-col">
+    <div class="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 gap-px bg-[var(--color-border)]">
       {glanceStats.map(({ label, value }) => (
-        <div class="flex gap-2ch py-qtr-lh">
+        <div class="bg-[var(--color-surface)] px-5 py-3">
-          <dt class="text-[var(--color-text-dim)] w-[16ch] shrink-0">{label}</dt>
+          <p class="text-sm text-[var(--color-text-label)] mb-1">
-          <dd>{value}</dd>
+            {label}
+          </p>
+          <p class="text-sm text-[var(--color-text-fg)]">
+            {value}
+          </p>
         </div>
       ))}
-    </dl>
+    </div>
   </Widget>
 
   <Widget
-    title="Network"
+    title="homelab/network"
-    meta="8 segments, default deny"
+    meta="8 network segments · default deny"
     as="section"
   >
-    <div class="overflow-x-auto">
+    <div class="overflow-x-auto px-5">
-      <table class="w-full border-collapse">
+      <table class="w-full text-sm border-collapse">
         <thead>
           <tr class="border-b border-[var(--color-border)]">
-            <th class="text-[var(--color-text-dim)] text-left py-qtr-lh pr-[3ch]">
+            <th class="text-[var(--color-text-label)] text-left py-2 pr-8 text-[10px] tracking-[0.16em] uppercase">
               Segment
             </th>
-            <th class="text-[var(--color-text-dim)] text-left py-qtr-lh pr-[3ch]">
+            <th class="text-[var(--color-text-label)] text-left py-2 pr-8 text-[10px] tracking-[0.16em] uppercase">
               Name
             </th>
-            <th class="text-[var(--color-text-dim)] text-left py-qtr-lh">
+            <th class="text-[var(--color-text-label)] text-left py-2 text-[10px] tracking-[0.16em] uppercase">
               Purpose
             </th>
           </tr>
         </thead>
         <tbody>
           {vlans.map((v) => (
-            <tr class="border-b border-[var(--color-border)]">
+            <tr class="border-b border-[var(--color-border)] hover:bg-[var(--color-surface)]">
-              <td class="py-half-lh pr-[3ch]">{v.id}</td>
+              <td class="text-[var(--color-accent)] py-2.5 pr-8 text-sm">
-              <td class="py-half-lh pr-[3ch]">{v.name}</td>
+                {v.id}
-              <td class="text-[var(--color-text-label)] py-half-lh">{v.purpose}</td>
+              </td>
+              <td class="text-[var(--color-text-fg)] py-2.5 pr-8 text-sm">
+                {v.name}
+              </td>
+              <td class="text-[var(--color-text)] py-2.5 text-sm">
+                {v.purpose}
+              </td>
             </tr>
           ))}
         </tbody>
@@ -139,23 +149,27 @@ const adrs = [
     </div>
   </Widget>
 
-  <Widget title="Services" badge={services.length} as="section">
+  <Widget title="homelab/services" badge={services.length} as="section">
-    <div class="flex flex-col gap-2lh">
+    <div class="flex flex-col gap-6 px-5 py-4">
       {categoryOrder.map((cat) => {
         const catServices = services.filter((s) => s.category === cat);
         return (
           <div>
-            <h3 class="text-[var(--color-text-dim)] font-semibold mb-half-lh">
+            <p class="text-[var(--color-text-label)] text-[10px] tracking-[0.14em] uppercase mb-2 px-1">
               {categoryLabels[cat]}
-            </h3>
+            </p>
-            <ul class="flex flex-col">
+            <div class="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 gap-px bg-[var(--color-border)]">
               {catServices.map((svc) => (
-                <li class="py-qtr-lh">
+                <div class="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] px-5 py-3">
-                  <span class="font-semibold">{svc.name}</span>
+                  <p class="text-sm text-[var(--color-text-fg)] mb-0.5">
-                  <span class="text-[var(--color-text-label)]"> — {svc.description}</span>
+                    {svc.name}
-                </li>
+                  </p>
+                  <p class="text-xs text-[var(--color-text)] leading-relaxed">
+                    {svc.description}
+                  </p>
+                </div>
               ))}
-            </ul>
+            </div>
           </div>
         );
       })}
@@ -163,38 +177,48 @@ const adrs = [
   </Widget>
 
   <Widget
-    title="ADRs"
+    title="homelab/ADRs"
     meta="why things are configured the way they are"
     badge={adrs.length}
     as="section"
   >
-    <div class="flex flex-col gap-2lh">
+    <div class="flex flex-col gap-px bg-[var(--color-border)] mx-5 my-4">
       {adrs.map((adr) => (
-        <div>
+        <div class="bg-[var(--color-surface)] hover:bg-[var(--color-surface-raised)] px-5 py-4">
-          <h3 class="font-semibold mb-half-lh">{adr.title}</h3>
+          <p class="text-sm text-[var(--color-text-fg)] mb-3">
-          <p class="text-[var(--color-text-label)] leading-relaxed mb-half-lh">
+            {adr.title}
-            <strong>Decision:</strong> {adr.decision}
           </p>
-          <p class="text-[var(--color-text-label)] leading-relaxed">
+          <p class="text-sm text-[var(--color-text)] leading-relaxed mb-2">
-            <strong>Why:</strong> {adr.why}
+            <span class="text-[var(--color-text-label)]">
+              decision:{" "}
+            </span>
+            {adr.decision}
+          </p>
+          <p class="text-sm text-[var(--color-text)] leading-relaxed">
+            <span class="text-[var(--color-text-label)]">
+              why:{" "}
+            </span>
+            {adr.why}
           </p>
         </div>
       ))}
     </div>
   </Widget>
 
-  <section class="mb-4lh">
+  <section class="px-5 py-6">
-    <h2 class="text-lg font-semibold mb-half-lh">Docs</h2>
+    <p class="text-[var(--color-text-label)] text-[10px] tracking-[0.14em] uppercase mb-2">
-    <p class="text-[var(--color-text-label)] mb-half-lh">
+      homelab/docs
+    </p>
+    <p class="text-sm text-[var(--color-text)] mb-3">
       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="underline hover:text-[var(--color-text-label)]"
+      class="text-sm text-[var(--color-text-label)] hover:text-[var(--color-accent)]"
     >
-      gitea.lerkolabs.com/lerko/homelab
+      <span class="text-[var(--color-accent)]">↗</span> gitea.lerkolabs.com/lerko/homelab
     </a>
   </section>
 

src/pages/index.astro

@@ -3,12 +3,18 @@ import Base from "@/layouts/Base.astro";
 import Nav from "@/components/Nav.astro";
 import Footer from "@/components/Footer.astro";
 import Hero from "@/components/Hero.astro";
+import Active from "@/components/Active.astro";
+import HomeServices from "@/components/HomeServices.astro";
 import Timeline from "@/components/Timeline.astro";
 ---
 
 <Base>
   <Nav slot="nav" />
   <Hero />
+  <div class="grid grid-cols-1 md:grid-cols-[1fr_1.2fr] border-b border-[var(--color-border)]">
+    <Active />
+    <HomeServices />
+  </div>
   <Timeline />
   <Footer slot="footer" />
 </Base>

src/pages/projects.astro

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

src/styles/globals.css

@@ -3,21 +3,32 @@
 @variant dark (&:where(.dark, .dark *));
 
 @theme {
-  /* Slate (dark, default) */
+  /* Console Dark (default) */
-  --color-bg:             #1A1B1E;
+  --color-bg:             #0a0c0f;
-  --color-surface:        #22242A;
+  --color-surface:        #0e1116;
-  --color-surface-raised: #2A2D34;
+  --color-surface-raised: #11151b;
-  --color-border:         #33363E;
+  --color-border:         #1c2128;
-  --color-border-bright:  #3E4148;
+  --color-border-bright:  #2a3038;
-  --color-text:           #D4D4D8;
+  --color-text:           #c1bdb3;
-  --color-text-label:     #9CA0AA;
+  --color-text-fg:        #e8e4d8;
-  --color-text-dim:       #888D9B;
+  --color-text-heading:   #ffffff;
+  --color-text-label:     #6a675f;
+  --color-text-dim:       #6a675f;
+  --color-text-faint:     #3a3830;
+  --color-accent:         #d4a259;
+  --color-accent-green:   #7b9e7b;
+  --color-accent-red:     #c74028;
+
+  /* Timeline branch colors — dark */
+  --color-timeline-career:    #b390a8;
+  --color-timeline-education: #999999;
+  --color-timeline-cert:      #cba76c;
+  --color-timeline-project:   #8ba8c0;
+  --color-timeline-homelab:   #9ab494;
 
   /* Typography */
-  --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);
+  --font-sans: ui-sans-serif, system-ui, sans-serif;
 
   /* Breakpoints */
   --breakpoint-xs: 576px;
@@ -35,22 +46,27 @@
   --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: 16px;
+  font-size: 15px;
   line-height: 1.5;
   background-color: var(--color-bg);
   color: var(--color-text);
-  font-family: var(--font-body);
+  font-family: var(--font-mono);
+  font-variant-ligatures: none;
 }
 
-/* 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 {
   * {
@@ -60,33 +76,35 @@ html[data-typeface="mono"]  { --font-body: var(--font-mono); font-size: 15px; le
   }
 }
 
-/* Bone (light) overrides */
+/* Console Light overrides */
 :root:not(.dark) {
-  --color-bg:             #FAF8F5;
+  --color-bg:             #f3f0e8;
-  --color-surface:        #F3F0EB;
+  --color-surface:        #faf6ec;
-  --color-surface-raised: #EBE8E3;
+  --color-surface-raised: #f6f2e7;
-  --color-border:         #E0DCD5;
+  --color-border:         #d8d2c2;
-  --color-border-bright:  #D4D0C8;
+  --color-border-bright:  #b8b2a2;
-  --color-text:           #2C2C2C;
+  --color-text:           #3a3c40;
-  --color-text-label:     #6B6560;
+  --color-text-fg:        #1c1e22;
-  --color-text-dim:       #787068;
+  --color-text-heading:   #000000;
+  --color-text-label:     #8a857a;
+  --color-text-dim:       #8a857a;
+  --color-text-faint:     #c0bba8;
+  --color-accent:         #b1631c;
+  --color-accent-green:   #3d7048;
+  --color-accent-red:     #d21f07;
+
+  --color-timeline-career:    #6e3d7a;
+  --color-timeline-education: #595959;
+  --color-timeline-cert:      #9c6620;
+  --color-timeline-project:   #355d8a;
+  --color-timeline-homelab:   #3d7048;
 }
 
-/* Link underlines */
+/* Default transitions — linear, fast */
-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,
-    opacity 120ms linear, text-decoration-color 120ms linear;
+    background-color 120ms linear, opacity 120ms linear;
 }
 
 @media (prefers-reduced-motion: reduce) {