diff --git a/docs/website/blog/100-simulated-routers.html b/docs/website/blog/100-simulated-routers.html
index a26375e..15feb7f 100644
--- a/docs/website/blog/100-simulated-routers.html
+++ b/docs/website/blog/100-simulated-routers.html
@@ -57,6 +57,9 @@
       --accent: #8a7a48;
     }
     body { background-color: #eae7de; color: #1a1810; }
+    .site-nav { background: #e0dcd2 !important; border-bottom: 1px solid rgba(40,36,28,0.12); }
+    .site-nav .nav-logo span, .site-nav .nav-link, .site-nav .nav-cta { color: #1a1810 !important; }
+    .site-nav .nav-link:hover { color: #8a7a48 !important; }
     .dark { /* prevent dark mode */ }
   </style>
   <style>
@@ -121,7 +124,7 @@
 </head>
 <body>
 
-  <nav class="site-nav site-nav--dark">
+  <nav class="site-nav">
     <div class="nav-inner container">
       <a href="../index.html" class="nav-logo">
         <svg class="nav-logo-mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="32" height="32" aria-label="The Other Dude logo">
diff --git a/docs/website/blog/500-devices-broke-the-api.html b/docs/website/blog/500-devices-broke-the-api.html
index 2f63caa..edfc518 100644
--- a/docs/website/blog/500-devices-broke-the-api.html
+++ b/docs/website/blog/500-devices-broke-the-api.html
@@ -57,6 +57,9 @@
       --accent: #8a7a48;
     }
     body { background-color: #eae7de; color: #1a1810; }
+    .site-nav { background: #e0dcd2 !important; border-bottom: 1px solid rgba(40,36,28,0.12); }
+    .site-nav .nav-logo span, .site-nav .nav-link, .site-nav .nav-cta { color: #1a1810 !important; }
+    .site-nav .nav-link:hover { color: #8a7a48 !important; }
     .dark { /* prevent dark mode */ }
   </style>
   <style>
@@ -141,7 +144,7 @@
 </head>
 <body>
 
-  <nav class="site-nav site-nav--dark">
+  <nav class="site-nav">
     <div class="nav-inner container">
       <a href="../index.html" class="nav-logo">
         <svg class="nav-logo-mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="32" height="32" aria-label="The Other Dude logo">
diff --git a/docs/website/blog/free-tier-cap.html b/docs/website/blog/free-tier-cap.html
index c1cd9f8..8a7cc4f 100644
--- a/docs/website/blog/free-tier-cap.html
+++ b/docs/website/blog/free-tier-cap.html
@@ -57,6 +57,9 @@
       --accent: #8a7a48;
     }
     body { background-color: #eae7de; color: #1a1810; }
+    .site-nav { background: #e0dcd2 !important; border-bottom: 1px solid rgba(40,36,28,0.12); }
+    .site-nav .nav-logo span, .site-nav .nav-link, .site-nav .nav-cta { color: #1a1810 !important; }
+    .site-nav .nav-link:hover { color: #8a7a48 !important; }
     .dark { /* prevent dark mode */ }
   </style>
   <style>
@@ -148,7 +151,7 @@
 </head>
 <body>
 
-  <nav class="site-nav site-nav--dark">
+  <nav class="site-nav">
     <div class="nav-inner container">
       <a href="../index.html" class="nav-logo">
         <svg class="nav-logo-mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="32" height="32" aria-label="The Other Dude logo">
diff --git a/docs/website/blog/index.html b/docs/website/blog/index.html
index 3ba4427..74d6188 100644
--- a/docs/website/blog/index.html
+++ b/docs/website/blog/index.html
@@ -35,6 +35,9 @@
       --accent: #8a7a48;
     }
     body { background-color: #eae7de; color: #1a1810; }
+    .site-nav { background: #e0dcd2 !important; border-bottom: 1px solid rgba(40,36,28,0.12); }
+    .site-nav .nav-logo span, .site-nav .nav-link, .site-nav .nav-cta { color: #1a1810 !important; }
+    .site-nav .nav-link:hover { color: #8a7a48 !important; }
     .dark { /* prevent dark mode */ }
   </style>
   <style>
@@ -100,7 +103,7 @@
 </head>
 <body>
 
-  <nav class="site-nav site-nav--dark">
+  <nav class="site-nav">
     <div class="nav-inner container">
       <a href="../index.html" class="nav-logo">
         <svg class="nav-logo-mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="32" height="32" aria-label="The Other Dude logo">
diff --git a/docs/website/blog/not-posting-on-reddit.html b/docs/website/blog/not-posting-on-reddit.html
index 2166a5a..8534904 100644
--- a/docs/website/blog/not-posting-on-reddit.html
+++ b/docs/website/blog/not-posting-on-reddit.html
@@ -57,6 +57,9 @@
       --accent: #8a7a48;
     }
     body { background-color: #eae7de; color: #1a1810; }
+    .site-nav { background: #e0dcd2 !important; border-bottom: 1px solid rgba(40,36,28,0.12); }
+    .site-nav .nav-logo span, .site-nav .nav-link, .site-nav .nav-cta { color: #1a1810 !important; }
+    .site-nav .nav-link:hover { color: #8a7a48 !important; }
     .dark { /* prevent dark mode */ }
   </style>
   <style>
@@ -215,7 +218,7 @@
 </head>
 <body>
 
-  <nav class="site-nav site-nav--dark">
+  <nav class="site-nav">
     <div class="nav-inner container">
       <a href="../index.html" class="nav-logo">
         <svg class="nav-logo-mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="32" height="32" aria-label="The Other Dude logo">
diff --git a/docs/website/blog/not-stable-software.html b/docs/website/blog/not-stable-software.html
index 9e46f92..d40f14f 100644
--- a/docs/website/blog/not-stable-software.html
+++ b/docs/website/blog/not-stable-software.html
@@ -57,6 +57,9 @@
       --accent: #8a7a48;
     }
     body { background-color: #eae7de; color: #1a1810; }
+    .site-nav { background: #e0dcd2 !important; border-bottom: 1px solid rgba(40,36,28,0.12); }
+    .site-nav .nav-logo span, .site-nav .nav-link, .site-nav .nav-cta { color: #1a1810 !important; }
+    .site-nav .nav-link:hover { color: #8a7a48 !important; }
     .dark { /* prevent dark mode */ }
   </style>
   <style>
@@ -121,7 +124,7 @@
 </head>
 <body>
 
-  <nav class="site-nav site-nav--dark">
+  <nav class="site-nav">
     <div class="nav-inner container">
       <a href="../index.html" class="nav-logo">
         <svg class="nav-logo-mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="32" height="32" aria-label="The Other Dude logo">
diff --git a/docs/website/blog/what-you-can-do-today.html b/docs/website/blog/what-you-can-do-today.html
index c7bd3ee..8154d09 100644
--- a/docs/website/blog/what-you-can-do-today.html
+++ b/docs/website/blog/what-you-can-do-today.html
@@ -57,6 +57,9 @@
       --accent: #8a7a48;
     }
     body { background-color: #eae7de; color: #1a1810; }
+    .site-nav { background: #e0dcd2 !important; border-bottom: 1px solid rgba(40,36,28,0.12); }
+    .site-nav .nav-logo span, .site-nav .nav-link, .site-nav .nav-cta { color: #1a1810 !important; }
+    .site-nav .nav-link:hover { color: #8a7a48 !important; }
     .dark { /* prevent dark mode */ }
   </style>
   <style>
@@ -121,7 +124,7 @@
 </head>
 <body>
 
-  <nav class="site-nav site-nav--dark">
+  <nav class="site-nav">
     <div class="nav-inner container">
       <a href="../index.html" class="nav-logo">
         <svg class="nav-logo-mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="32" height="32" aria-label="The Other Dude logo">
diff --git a/docs/website/blog/why-this-exists.html b/docs/website/blog/why-this-exists.html
index 9ed0eea..a1f8ff1 100644
--- a/docs/website/blog/why-this-exists.html
+++ b/docs/website/blog/why-this-exists.html
@@ -57,6 +57,9 @@
       --accent: #8a7a48;
     }
     body { background-color: #eae7de; color: #1a1810; }
+    .site-nav { background: #e0dcd2 !important; border-bottom: 1px solid rgba(40,36,28,0.12); }
+    .site-nav .nav-logo span, .site-nav .nav-link, .site-nav .nav-cta { color: #1a1810 !important; }
+    .site-nav .nav-link:hover { color: #8a7a48 !important; }
     .dark { /* prevent dark mode */ }
   </style>
   <style>
@@ -121,7 +124,7 @@
 </head>
 <body>
 
-  <nav class="site-nav site-nav--dark">
+  <nav class="site-nav">
     <div class="nav-inner container">
       <a href="../index.html" class="nav-logo">
         <svg class="nav-logo-mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="32" height="32" aria-label="The Other Dude logo">
diff --git a/docs/website/index.html b/docs/website/index.html
index 4886070..54e3060 100644
--- a/docs/website/index.html
+++ b/docs/website/index.html
@@ -237,27 +237,65 @@
     .wp-screenshot-card {
       background: #f6f4ec;
       border: 1px solid rgba(40, 36, 28, 0.12);
-      border-radius: 8px;
+      border-radius: 2px;
       overflow: hidden;
+      position: relative;
+      cursor: pointer;
     }
-
-    .wp-screenshot-card img {
+    .wp-screenshot-card .ss-light,
+    .wp-screenshot-card .ss-dark {
       width: 100%;
       display: block;
-      cursor: zoom-in;
-      transition: opacity 0.2s ease;
     }
-
-    .wp-screenshot-card img:hover {
-      opacity: 0.92;
+    .wp-screenshot-card .ss-dark {
+      position: absolute;
+      top: 0; left: 0;
+      opacity: 0;
+      transition: opacity 150ms linear;
+    }
+    .wp-screenshot-card:hover .ss-dark {
+      opacity: 1;
     }
-
     .wp-screenshot-caption {
-      padding: 10px 14px;
-      font-size: 0.8rem;
+      padding: 8px 14px;
+      font-size: 0.75rem;
       color: #8a8578;
       font-weight: 500;
+      display: flex;
+      justify-content: space-between;
     }
+    .wp-screenshot-caption .ss-hint {
+      font-size: 0.65rem;
+      color: #b0aa9a;
+    }
+    .wp-screenshot-expanded {
+      display: none;
+      position: fixed;
+      inset: 0;
+      z-index: 100;
+      background: rgba(14,13,11,0.85);
+      padding: 40px;
+      cursor: pointer;
+      align-items: center;
+      justify-content: center;
+      gap: 12px;
+    }
+    .wp-screenshot-expanded.active { display: flex; }
+    .wp-screenshot-expanded img {
+      max-width: 48%;
+      max-height: 90vh;
+      border-radius: 2px;
+      border: 1px solid rgba(180,170,150,0.15);
+    }
+    .wp-screenshot-expanded .ss-label {
+      position: absolute;
+      bottom: 16px;
+      font-size: 11px;
+      color: #948e80;
+      font-family: 'IBM Plex Mono', monospace;
+    }
+    .wp-screenshot-expanded .ss-label-left { left: 40px; }
+    .wp-screenshot-expanded .ss-label-right { right: 40px; }
 
     /* ---- Caveats / what-it-is-not ---- */
     .wp-caveats {
@@ -394,7 +432,7 @@
   <a href="#main-content" class="skip-link">Skip to main content</a>
 
   <!-- Navigation -->
-  <nav class="site-nav site-nav--dark" aria-label="Main navigation">
+  <nav class="site-nav" aria-label="Main navigation">
     <div class="nav-inner container">
       <a href="index.html" class="nav-logo">
         <svg class="nav-logo-mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="32" height="32" aria-hidden="true">
@@ -459,45 +497,38 @@
         <h2>Screenshots</h2>
         <div class="wp-screenshot-grid">
 
-          <figure class="wp-screenshot-card screenshot-card">
-            <img src="assets/01-overview-light.png" alt="Fleet overview — light mode" loading="lazy" width="1440" height="900">
-            <figcaption class="wp-screenshot-caption">Fleet overview — light</figcaption>
+          <figure class="wp-screenshot-card" data-light="assets/01-overview-light.png" data-dark="assets/01-overview-dark.png" onclick="expandScreenshot(this)">
+            <img class="ss-light" src="assets/01-overview-light.png" alt="Fleet overview" loading="lazy" width="1440" height="900">
+            <img class="ss-dark" src="assets/01-overview-dark.png" alt="Fleet overview — dark" loading="lazy" width="1440" height="900">
+            <figcaption class="wp-screenshot-caption">Fleet overview <span class="ss-hint">hover for dark · click for both</span></figcaption>
           </figure>
 
-          <figure class="wp-screenshot-card screenshot-card">
-            <img src="assets/01-overview-dark.png" alt="Fleet overview — dark mode" loading="lazy" width="1440" height="900">
-            <figcaption class="wp-screenshot-caption">Fleet overview — dark</figcaption>
+          <figure class="wp-screenshot-card" data-light="assets/02-device-detail-light.png" data-dark="assets/02-device-detail-dark.png" onclick="expandScreenshot(this)">
+            <img class="ss-light" src="assets/02-device-detail-light.png" alt="Device management" loading="lazy" width="1440" height="900">
+            <img class="ss-dark" src="assets/02-device-detail-dark.png" alt="Device management — dark" loading="lazy" width="1440" height="900">
+            <figcaption class="wp-screenshot-caption">Device management <span class="ss-hint">hover for dark · click for both</span></figcaption>
           </figure>
 
-          <figure class="wp-screenshot-card screenshot-card">
-            <img src="assets/02-device-detail-light.png" alt="Device management — light mode" loading="lazy" width="1440" height="900">
-            <figcaption class="wp-screenshot-caption">Device management — light</figcaption>
+          <figure class="wp-screenshot-card" data-light="assets/03-interfaces-light.png" data-dark="assets/03-interfaces-dark.png" onclick="expandScreenshot(this)">
+            <img class="ss-light" src="assets/03-interfaces-light.png" alt="Interface configuration" loading="lazy" width="1440" height="900">
+            <img class="ss-dark" src="assets/03-interfaces-dark.png" alt="Interface configuration — dark" loading="lazy" width="1440" height="900">
+            <figcaption class="wp-screenshot-caption">Interface configuration <span class="ss-hint">hover for dark · click for both</span></figcaption>
           </figure>
 
-          <figure class="wp-screenshot-card screenshot-card">
-            <img src="assets/02-device-detail-dark.png" alt="Device management — dark mode" loading="lazy" width="1440" height="900">
-            <figcaption class="wp-screenshot-caption">Device management — dark</figcaption>
+          <figure class="wp-screenshot-card" data-light="assets/04-firmware-light.png" data-dark="assets/04-firmware-dark.png" onclick="expandScreenshot(this)">
+            <img class="ss-light" src="assets/04-firmware-light.png" alt="Firmware management" loading="lazy" width="1440" height="900">
+            <img class="ss-dark" src="assets/04-firmware-dark.png" alt="Firmware management — dark" loading="lazy" width="1440" height="900">
+            <figcaption class="wp-screenshot-caption">Firmware management <span class="ss-hint">hover for dark · click for both</span></figcaption>
           </figure>
 
-          <figure class="wp-screenshot-card screenshot-card">
-            <img src="assets/03-interfaces-light.png" alt="Interface configuration — light mode" loading="lazy" width="1440" height="900">
-            <figcaption class="wp-screenshot-caption">Interface configuration — light</figcaption>
-          </figure>
+        </div>
 
-          <figure class="wp-screenshot-card screenshot-card">
-            <img src="assets/03-interfaces-dark.png" alt="Interface configuration — dark mode" loading="lazy" width="1440" height="900">
-            <figcaption class="wp-screenshot-caption">Interface configuration — dark</figcaption>
-          </figure>
-
-          <figure class="wp-screenshot-card screenshot-card">
-            <img src="assets/04-firmware-light.png" alt="Firmware management — light mode" loading="lazy" width="1440" height="900">
-            <figcaption class="wp-screenshot-caption">Firmware management — light</figcaption>
-          </figure>
-
-          <figure class="wp-screenshot-card screenshot-card">
-            <img src="assets/04-firmware-dark.png" alt="Firmware management — dark mode" loading="lazy" width="1440" height="900">
-            <figcaption class="wp-screenshot-caption">Firmware management — dark</figcaption>
-          </figure>
+        <div class="wp-screenshot-expanded" id="ss-expanded" onclick="this.classList.remove('active')">
+          <img id="ss-exp-light" src="" alt="Light mode">
+          <img id="ss-exp-dark" src="" alt="Dark mode">
+          <span class="ss-label ss-label-left">light</span>
+          <span class="ss-label ss-label-right">dark</span>
+        </div>
 
         </div>
       </div>
@@ -624,9 +655,19 @@ python3 setup.py</code>
     lb.addEventListener('click', closeLightbox);
 
     document.addEventListener('keydown', function(e) {
-      if (e.key === 'Escape') closeLightbox();
+      if (e.key === 'Escape') {
+        closeLightbox();
+        document.getElementById('ss-expanded').classList.remove('active');
+      }
     });
   })();
+
+  function expandScreenshot(card) {
+    var overlay = document.getElementById('ss-expanded');
+    document.getElementById('ss-exp-light').src = card.dataset.light;
+    document.getElementById('ss-exp-dark').src = card.dataset.dark;
+    overlay.classList.add('active');
+  }
   </script>
 <script>
 (function() {
