feat(ui): add responsive navigation and mobile layout improvements

Add hamburger menu toggle with ARIA support for mobile nav. Introduce
responsive breakpoints at 768px (tablet) and 480px (phone) with stacked
nav, adjusted spacing, and full-width elements. Add table overflow
protection and responsive refinements across all page layouts.

src/layouts/BaseLayout.astro

@@ -67,7 +67,10 @@ const isActiveRoute = (path: string) => currentPath === normalizePath(path);
           <a href="/" class="logo">
             <img src="/zblade-logo.png" alt="Zaguán Blade" class="logo-image" />
           </a>
-          <nav class="nav">
+          <button class="nav-toggle" id="nav-toggle" aria-label="Toggle navigation" aria-expanded="false">
+            <span class="nav-toggle-icon">☰</span>
+          </button>
+          <nav class="nav" id="nav-menu">
             <a href="/#philosophy">Why Blade</a>
             <a href="/docs" class={isActiveRoute('/docs') ? 'active' : undefined} aria-current={isActiveRoute('/docs') ? 'page' : undefined}>Docs</a>
             <a href="/blog" class={isActiveRoute('/blog') ? 'active' : undefined} aria-current={isActiveRoute('/blog') ? 'page' : undefined}>Blog</a>
@@ -116,5 +119,26 @@ const isActiveRoute = (path: string) => currentPath === normalizePath(path);
       <img referrerpolicy="no-referrer-when-downgrade" src="https://kekepower.com/mtr/matomo.php?idsite=19&amp;rec=1" style="border:0" alt="" />
     </noscript>
     <!-- End Matomo -->
+    <script is:inline>
+      (function() {
+        var toggle = document.getElementById('nav-toggle');
+        var menu = document.getElementById('nav-menu');
+        if (!toggle || !menu) return;
+        toggle.addEventListener('click', function() {
+          var expanded = toggle.getAttribute('aria-expanded') === 'true';
+          toggle.setAttribute('aria-expanded', String(!expanded));
+          menu.classList.toggle('nav-open', !expanded);
+          toggle.querySelector('.nav-toggle-icon').textContent = expanded ? '☰' : '✕';
+        });
+        // Close menu when a nav link is clicked
+        menu.querySelectorAll('a').forEach(function(link) {
+          link.addEventListener('click', function() {
+            toggle.setAttribute('aria-expanded', 'false');
+            menu.classList.remove('nav-open');
+            toggle.querySelector('.nav-toggle-icon').textContent = '☰';
+          });
+        });
+      })();
+    </script>
   </body>
 </html>

src/layouts/BlogPost.astro

@@ -226,4 +226,98 @@ const { post } = Astro.props;
   .post-content :global(tr:hover td) {
     background: var(--color-bg-elevated);
   }
+
+  @media (max-width: 768px) {
+    .blog-post {
+      padding-top: 100px;
+    }
+
+    .post-container {
+      padding: 0 var(--space-md);
+      padding-bottom: var(--space-xl);
+    }
+
+    .post-title {
+      font-size: 2rem;
+    }
+
+    .post-description {
+      font-size: 1rem;
+    }
+
+    .hero-image {
+      max-height: 250px;
+    }
+
+    .post-content {
+      font-size: 1rem;
+    }
+
+    .post-content :global(h2) {
+      font-size: 1.35rem;
+    }
+
+    .post-content :global(h3) {
+      font-size: 1.15rem;
+    }
+
+    .post-content :global(table) {
+      font-size: 0.85rem;
+    }
+
+    .post-content :global(th),
+    .post-content :global(td) {
+      padding: var(--space-xs) var(--space-sm);
+    }
+  }
+
+  @media (max-width: 480px) {
+    .blog-post {
+      padding-top: 80px;
+    }
+
+    .post-container {
+      padding: 0 var(--space-sm);
+      padding-bottom: var(--space-lg);
+    }
+
+    .post-title {
+      font-size: 1.6rem;
+    }
+
+    .post-description {
+      font-size: 0.95rem;
+    }
+
+    .hero-image {
+      max-height: 180px;
+    }
+
+    .post-meta {
+      flex-direction: column;
+      gap: var(--space-xs);
+      font-size: 0.8rem;
+    }
+
+    .post-content {
+      font-size: 0.95rem;
+    }
+
+    .post-content :global(h2) {
+      font-size: 1.2rem;
+    }
+
+    .post-content :global(h3) {
+      font-size: 1.05rem;
+    }
+
+    .post-content :global(table) {
+      font-size: 0.8rem;
+    }
+
+    .post-content :global(th),
+    .post-content :global(td) {
+      padding: var(--space-xxs) var(--space-xs);
+    }
+  }
 </style>

src/pages/blog.astro

@@ -127,7 +127,7 @@ const posts = (await getCollection('blog', ({ data }) => {
   .posts-grid {
     display: grid;
     gap: var(--space-lg);
-    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   }
   
   /* Post Card */
@@ -218,5 +218,24 @@ const posts = (await getCollection('blog', ({ data }) => {
     .posts-grid {
       grid-template-columns: 1fr;
     }
+
+    .post-title {
+      font-size: 1.1rem;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .blog-hero {
+      padding-top: calc(var(--space-lg) + 60px);
+      padding-bottom: var(--space-md);
+    }
+
+    .blog-section {
+      padding: var(--space-md) 0;
+    }
+
+    .post-content {
+      padding: var(--space-sm);
+    }
   }
 </style>

src/pages/changelog.astro

@@ -1735,6 +1735,71 @@ import BaseLayout from '../layouts/BaseLayout.astro';
     }
   }
 
+  @media (max-width: 480px) {
+    .changelog-hero {
+      padding-top: calc(var(--space-xl) + 60px);
+      padding-bottom: var(--space-md);
+    }
+
+    .title-line-1 {
+      font-size: clamp(1.5rem, 7vw, 2rem);
+    }
+
+    .title-accent {
+      font-size: 0.8rem;
+    }
+
+    .hero-description {
+      font-size: 0.9rem;
+    }
+
+    .version-card {
+      padding: var(--space-md);
+    }
+
+    .version-number {
+      font-size: 1.35rem;
+    }
+
+    .version-date {
+      font-size: 0.85rem;
+    }
+
+    .version-badge {
+      font-size: 0.65rem;
+      padding: 0.3rem 0.5rem;
+    }
+
+    .product-heading {
+      font-size: 0.95rem;
+      padding: var(--space-xs) var(--space-sm);
+    }
+
+    .changes-title,
+    .changes-toggle {
+      font-size: 0.85rem;
+    }
+
+    .changes-list li {
+      font-size: 0.85rem;
+      padding-left: var(--space-sm);
+    }
+
+    .updates-table {
+      font-size: 0.75rem;
+    }
+
+    .updates-table th,
+    .updates-table td {
+      padding: var(--space-xs);
+    }
+
+    .breaking-updates-list li {
+      padding: var(--space-xs);
+      font-size: 0.85rem;
+    }
+  }
+
   /* Screenshot Showcase */
   .screenshot-showcase {
     padding: var(--space-2xl) 0;

src/pages/docs.astro

@@ -798,7 +798,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
   
   .concept-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: var(--space-lg);
   }
   
@@ -835,7 +835,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
   /* Steps Grid */
   .steps-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
     gap: var(--space-lg);
   }
   
@@ -937,7 +937,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
   /* Interface Grid */
   .interface-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: var(--space-lg);
   }
   
@@ -1025,7 +1025,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
   /* Shortcuts */
   .shortcuts-layout {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
     gap: var(--space-lg);
   }
   
@@ -1079,7 +1079,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
   /* Commands */
   .commands-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
     gap: var(--space-lg);
   }
   
@@ -1175,7 +1175,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
   /* Settings */
   .settings-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
     gap: var(--space-lg);
   }
   
@@ -1330,7 +1330,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
   /* Known Bugs */
   .bugs-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: var(--space-lg);
     margin-bottom: var(--space-xl);
   }
@@ -1434,7 +1434,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
   /* Screenshot Capture */
   .screenshot-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: var(--space-lg);
     margin-bottom: var(--space-xl);
   }
@@ -1704,11 +1704,28 @@ import BaseLayout from '../layouts/BaseLayout.astro';
       padding-top: calc(var(--space-xl) + 60px);
       padding-bottom: var(--space-md);
     }
+
+    .docs-section {
+      padding: var(--space-xl) 0;
+    }
+
+    .concept-card,
+    .support-card {
+      padding: var(--space-lg);
+    }
     
     .concept-header {
       flex-direction: column;
       align-items: flex-start;
     }
+
+    .concept-header h2 {
+      font-size: 1.5rem;
+    }
+
+    .concept-lead {
+      font-size: 1rem;
+    }
     
     .support-header {
       flex-direction: column;
@@ -1723,5 +1740,48 @@ import BaseLayout from '../layouts/BaseLayout.astro';
       width: 100%;
       justify-content: space-between;
     }
+
+    .tool-calls-link {
+      flex-direction: column;
+      text-align: center;
+      gap: var(--space-md);
+    }
+
+    .step-options {
+      flex-wrap: wrap;
+    }
+
+    .section-title {
+      font-size: clamp(1.5rem, 6vw, 2rem);
+    }
+  }
+
+  @media (max-width: 480px) {
+    .docs-hero {
+      padding-top: calc(var(--space-lg) + 60px);
+    }
+
+    .concept-card,
+    .support-card,
+    .ai-block,
+    .step-card,
+    .setting-card,
+    .feature-detail,
+    .screenshot-notes {
+      padding: var(--space-md);
+    }
+
+    .code-block pre {
+      padding: var(--space-sm);
+      font-size: 0.8rem;
+    }
+
+    .code-block code {
+      font-size: 0.75rem;
+    }
+
+    .step-num {
+      font-size: 2rem;
+    }
   }
 </style>

src/pages/index.astro

@@ -282,4 +282,215 @@ const version = pkg.version ?? "";
       </div>
     </section>
   </main>
-</BaseLayout>
+</BaseLayout>
+
+<style>
+  /* Index Page Responsive */
+
+  @media (max-width: 768px) {
+    .hero-content {
+      max-width: 100%;
+    }
+
+    .hero-label {
+      font-size: 0.75rem;
+    }
+
+    .hero-title {
+      margin-bottom: var(--space-md);
+    }
+
+    .hero-description {
+      font-size: 1rem;
+      max-width: 100%;
+    }
+
+    .hero-actions {
+      flex-direction: column;
+    }
+
+    .action-primary,
+    .action-secondary {
+      width: 100%;
+      justify-content: center;
+    }
+
+    .hero-meta {
+      gap: var(--space-xs);
+    }
+
+    .meta-item {
+      font-size: 0.65rem;
+      padding: 0.3rem 0.6rem;
+    }
+
+    .meta-divider {
+      display: none;
+    }
+
+    /* Video container */
+    .hero .container + .container {
+      margin-top: var(--space-xl) !important;
+    }
+
+    .features-header .section-title {
+      font-size: clamp(1.75rem, 8vw, 2.5rem);
+    }
+
+    .feature-primary {
+      padding: var(--space-lg);
+    }
+
+    .feature-content h3 {
+      font-size: 1.5rem;
+    }
+
+    .feature-content p {
+      font-size: 1rem;
+    }
+
+    .feature-row {
+      grid-template-columns: 1fr;
+    }
+
+    .feature-item h3 {
+      font-size: 1.1rem;
+    }
+
+    .feature-banner {
+      padding: var(--space-lg);
+    }
+
+    .feature-banner p {
+      font-size: 0.9rem !important;
+    }
+
+    .arch-grid {
+      grid-template-columns: 1fr;
+      gap: var(--space-md);
+    }
+
+    .arch-node {
+      padding: var(--space-lg);
+    }
+
+    .arch-node h3 {
+      font-size: 1.25rem;
+    }
+
+    .pricing-block {
+      padding: var(--space-lg);
+    }
+
+    .pricing-title {
+      font-size: clamp(1.75rem, 8vw, 3rem);
+    }
+
+    .pricing-grid {
+      grid-template-columns: 1fr;
+      gap: var(--space-md);
+    }
+
+    .pricing-divider {
+      width: 100%;
+      height: 2px;
+    }
+
+    .pricing-features {
+      flex-direction: column;
+    }
+
+    .pricing-features span {
+      width: 100%;
+      text-align: center;
+    }
+
+    .pricing-action {
+      width: 100%;
+      justify-content: center;
+    }
+
+    .download-title {
+      font-size: clamp(1.75rem, 8vw, 2.5rem);
+    }
+
+    .download-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .platform-card {
+      padding: var(--space-lg);
+    }
+
+    .platform-name {
+      font-size: 1.25rem;
+    }
+
+    .download-disclaimer {
+      flex-direction: column;
+      text-align: center;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .hero {
+      padding-top: calc(var(--space-xl) + 60px);
+      padding-bottom: var(--space-xl);
+    }
+
+    .hero-description {
+      font-size: 0.9rem;
+    }
+
+    .hero-title .title-line-1,
+    .hero-title .title-line-2 {
+      font-size: clamp(1.5rem, 9vw, 2.5rem);
+    }
+
+    .feature-primary {
+      padding: var(--space-md);
+      border-width: 1px;
+    }
+
+    .feature-item {
+      padding: var(--space-md);
+    }
+
+    .feature-banner .banner-text {
+      font-size: 0.9rem;
+    }
+
+    .arch-node h3 {
+      font-size: 1.1rem;
+    }
+
+    .arch-node p {
+      font-size: 0.8rem;
+    }
+
+    .pricing-block {
+      padding: var(--space-md);
+      border-width: 1px;
+    }
+
+    .pricing-value {
+      font-size: 1rem;
+    }
+
+    .pricing-label {
+      font-size: 0.65rem;
+    }
+
+    .platform-icon {
+      font-size: 2rem;
+    }
+
+    .section-title {
+      font-size: clamp(1.5rem, 8vw, 2rem);
+    }
+
+    .section-label {
+      font-size: 0.65rem;
+    }
+  }
+</style>

src/pages/privacy.astro

@@ -365,4 +365,32 @@ import BaseLayout from '../layouts/BaseLayout.astro';
       grid-template-columns: 1fr;
     }
   }
+
+  @media (max-width: 480px) {
+    .privacy-hero .section-title {
+      font-size: 1.8rem;
+    }
+
+    .privacy-hero {
+      padding-top: calc(var(--space-xl) + 60px);
+      padding-bottom: var(--space-md);
+    }
+
+    .privacy-content {
+      padding: 0 var(--space-sm);
+    }
+
+    .privacy-section h2 {
+      font-size: 1.2rem;
+    }
+
+    .privacy-section h3 {
+      font-size: 1rem;
+    }
+
+    .privacy-section p,
+    .privacy-section li {
+      font-size: 0.9rem;
+    }
+  }
 </style>

src/pages/tools.astro

@@ -1597,4 +1597,55 @@ To use a tool, respond with:
       width: auto;
     }
   }
+
+  @media (max-width: 480px) {
+    .tools-hero {
+      padding-top: calc(var(--space-xl) + 60px);
+      padding-bottom: var(--space-md);
+    }
+
+    .tool-card {
+      padding: 0;
+    }
+
+    .tool-header {
+      padding: var(--space-sm);
+    }
+
+    .tool-body {
+      padding: var(--space-sm);
+    }
+
+    .tool-name {
+      font-size: 1.25rem;
+    }
+
+    .tool-name .slug {
+      font-size: 0.75rem;
+    }
+
+    .tool-desc {
+      font-size: 0.9rem;
+    }
+
+    .param-name {
+      font-size: 0.8rem;
+    }
+
+    .param-desc code {
+      font-size: 0.75rem;
+    }
+
+    .example-label {
+      font-size: 0.75rem;
+    }
+
+    .breadcrumb-trail {
+      flex-wrap: wrap;
+    }
+
+    .params-table {
+      font-size: 0.75rem;
+    }
+  }
 </style>