backlineint · backlineint · Jun 4, 2026 · Jun 5, 2026 · Jun 5, 2026 · Jun 5, 2026
diff --git a/public/favicon.svg b/public/favicon.svg
diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
@@ -34,26 +34,57 @@ const { title, description, image = "/og_image.jpg" } = Astro.props;
   gtag("config", "G-R4YJ3X82V6");
 </script>
 
+<!-- Color theme: apply before paint, persist choice, survive view transitions -->
+<script is:inline>
+  (() => {
+    const KEY = "theme";
+    const MODES = ["auto", "light", "dark"];
+    const root = document.documentElement;
+    const system = () =>
+      window.matchMedia("(prefers-color-scheme: light)").matches
+        ? "light"
+        : "dark";
+    // Stored value is the explicit override; absence means "auto" (follow OS).
+    const mode = () => {
+      const m = localStorage.getItem(KEY);
+      return m === "light" || m === "dark" ? m : "auto";
+    };
+    const apply = () => {
+      const m = mode();
+      root.setAttribute("data-theme-mode", m);
+      root.setAttribute("data-theme", m === "auto" ? system() : m);
+    };
+    apply();
+    // ViewTransitions swaps <html> attributes on navigation — reapply after.
+    document.addEventListener("astro:after-swap", apply);
+    // In Auto mode this updates the theme when the OS theme changes.
+    window
+      .matchMedia("(prefers-color-scheme: light)")
+      .addEventListener("change", apply);
+    // Delegated so it keeps working after the header is swapped.
+    document.addEventListener("click", (e) => {
+      const t = e.target;
+      if (!(t instanceof Element) || !t.closest("[data-theme-toggle]")) return;
+      const next = MODES[(MODES.indexOf(mode()) + 1) % MODES.length];
+      if (next === "auto") localStorage.removeItem(KEY);
+      else localStorage.setItem(KEY, next);
+      apply();
+    });
+  })();
+</script>
+
 <!-- Global Metadata -->
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1" />
 <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 <meta name="generator" content={Astro.generator} />
 
-<!-- Font preloads -->
-<link
-  rel="preload"
-  href="/fonts/atkinson-regular.woff"
-  as="font"
-  type="font/woff"
-  crossorigin
-/>
+<!-- Fonts: Archivo Black (display) · Space Grotesk (body) · JetBrains Mono (kickers) -->
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 <link
-  rel="preload"
-  href="/fonts/atkinson-bold.woff"
-  as="font"
-  type="font/woff"
-  crossorigin
+  href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;700;800&display=swap"
+  rel="stylesheet"
 />
 
 <!-- Canonical URL -->

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -1,51 +1,85 @@
-<footer>
-  Made with 🥯 by Brian Perry.
-  <div class="social-links">
-    <a href="https://bsky.app/profile/brianperry.dev" target="_blank">
-      <span class="sr-only">Follow me on Bluesky</span>
-      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="32" height="32" viewBox="0 0 576 512"><path fill="currentColor" d="M407.8 294.7c-3.3-.4-6.7-.8-10-1.3c3.4.4 6.7.9 10 1.3M288 227.1c-26.1-50.7-97.1-145.2-163.1-191.8C61.6-9.4 37.5-1.7 21.6 5.5C3.3 13.8 0 41.9 0 58.4S9.1 194 15 213.9c19.5 65.7 89.1 87.9 153.2 80.7c3.3-.5 6.6-.9 10-1.4c-3.3.5-6.6 1-10 1.4c-93.9 14-177.3 48.2-67.9 169.9C220.6 589.1 265.1 437.8 288 361.1c22.9 76.7 49.2 222.5 185.6 103.4c102.4-103.4 28.1-156-65.8-169.9c-3.3-.4-6.7-.8-10-1.3c3.4.4 6.7.9 10 1.3c64.1 7.1 133.6-15.1 153.2-80.7C566.9 194 576 75 576 58.4s-3.3-44.7-21.6-52.9c-15.8-7.1-40-14.9-103.2 29.8C385.1 81.9 314.1 176.4 288 227.1"/></svg>
-    </a>
-    <a href="https://github.com/backlineint" target="_blank">
-      <span class="sr-only">Go to my GitHub profile</span>
-      <svg
-        viewBox="0 0 16 16"
-        aria-hidden="true"
-        width="32"
-        height="32"
-        astro-icon="social/github"
-        ><path
-          fill="currentColor"
-          d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
-        ></path></svg
-      >
-    </a>
-  </div>
-  <div class="internal-links">
-    <a href="/feed.xml">Feed</a> •
-    <a href="/style-guide">Style Guide</a>
+<footer class="foot">
+  <div class="foot-inner">
+    <div class="made">Made with 🥯 by <b>Brian Perry</b>.</div>
+    <div class="social">
+      <a href="https://bsky.app/profile/brianperry.dev" target="_blank">
+        <span class="sr-only">Follow me on Bluesky</span>
+        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 576 512"><path fill="currentColor" d="M407.8 294.7c-3.3-.4-6.7-.8-10-1.3c3.4.4 6.7.9 10 1.3M288 227.1c-26.1-50.7-97.1-145.2-163.1-191.8C61.6-9.4 37.5-1.7 21.6 5.5C3.3 13.8 0 41.9 0 58.4S9.1 194 15 213.9c19.5 65.7 89.1 87.9 153.2 80.7c3.3-.5 6.6-.9 10-1.4c-3.3.5-6.6 1-10 1.4c-93.9 14-177.3 48.2-67.9 169.9C220.6 589.1 265.1 437.8 288 361.1c22.9 76.7 49.2 222.5 185.6 103.4c102.4-103.4 28.1-156-65.8-169.9c-3.3-.4-6.7-.8-10-1.3c3.4.4 6.7.9 10 1.3c64.1 7.1 133.6-15.1 153.2-80.7C566.9 194 576 75 576 58.4s-3.3-44.7-21.6-52.9c-15.8-7.1-40-14.9-103.2 29.8C385.1 81.9 314.1 176.4 288 227.1"/></svg>
+      </a>
+      <a href="https://github.com/backlineint" target="_blank">
+        <span class="sr-only">Go to my GitHub profile</span>
+        <svg viewBox="0 0 16 16" aria-hidden="true"><path fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
+      </a>
+    </div>
+    <div class="botlinks">
+      <a href="/feed.xml">Feed</a><span>·</span><a href="/style-guide">Style Guide</a>
+    </div>
   </div>
 </footer>
 <style>
-  footer {
-    padding: 2em 1em 2.5em 1em;
-    background: var(--surface-2);
-    color: var(--text-2);
+  .foot {
+    margin-top: 76px;
+    border-top: 2px solid var(--line);
+    background: var(--bg-2);
+  }
+  .foot-inner {
+    max-width: 1080px;
+    margin: 0 auto;
+    padding: 42px 24px 50px;
     text-align: center;
   }
-  .social-links {
+  .made {
+    font-size: 16px;
+    color: var(--muted);
+  }
+  .made b {
+    color: var(--ink);
+    font-weight: 700;
+  }
+  .social {
     display: flex;
+    gap: 14px;
     justify-content: center;
-    gap: 1em;
-    margin-top: 1em;
+    margin: 20px 0 16px;
   }
-  .social-links a {
-    text-decoration: none;
-    color: var(--text-2);
+  .social a {
+    width: 38px;
+    height: 38px;
+    border-radius: 10px;
+    background: var(--surface);
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.15s;
+  }
+  .social a:hover {
+    background: var(--surface-2);
+  }
+  .social svg {
+    width: 19px;
+    height: 19px;
+    fill: var(--muted);
+    color: var(--muted);
+    transition: fill 0.15s, color 0.15s;
   }
-  .social-links a:hover {
-    color: var(--text-1);
+  .social a:hover svg {
+    fill: var(--gold);
+    color: var(--gold);
+  }
+  .botlinks {
+    font-family: "JetBrains Mono", monospace;
+    font-size: 12px;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--faint);
+  }
+  .botlinks a {
+    color: var(--cyan);
+    text-decoration: none;
   }
-  .internal-links {
-    margin-top: var(--size-3);
+  .botlinks span {
+    margin: 0 9px;
+    opacity: 0.5;
   }
 </style>