diff --git a/site/index.html b/site/index.html
index 6678e42201..8cebe38890 100644
--- a/site/index.html
+++ b/site/index.html
@@ -550,16 +550,142 @@
       }
     }
 
+    @media (max-width: 600px) {
+      html,
+      body {
+        overflow-x: hidden;
+      }
+
+      .manual-masthead.container,
+      .preface.container,
+      .stat-block.container,
+      .toc.container,
+      .colophon.container {
+        padding-left: 20px;
+        padding-right: 20px;
+      }
+
+      .manual-masthead {
+        padding-top: 76px;
+      }
+
+      .manual-meta-row {
+        align-items: flex-start;
+        flex-direction: column;
+        margin-bottom: 20px;
+        gap: 6px;
+      }
+
+      .manual-title {
+        font-size: clamp(2.45rem, 12vw, 3.7rem);
+        line-height: 0.98;
+        letter-spacing: 0;
+      }
+
+      .manual-tagline {
+        max-width: 34ch;
+        line-height: 1.48;
+        hyphens: none;
+        -webkit-hyphens: none;
+      }
+
+      .manual-attribution {
+        line-height: 1.45;
+      }
+
+      .masthead-cta {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 10px;
+      }
+
+      .masthead-btn {
+        width: 100%;
+        justify-content: center;
+        min-width: 0;
+      }
+
+      .masthead-btn svg {
+        flex-shrink: 0;
+      }
+
+      .masthead-btn span {
+        min-width: 0;
+      }
+
+      .masthead-btn-count {
+        flex-shrink: 0;
+      }
+
+      .preface-body {
+        font-size: 1rem;
+        line-height: 1.62;
+        text-align: left;
+        hyphens: none;
+        -webkit-hyphens: none;
+      }
+
+      .preface-body p:first-of-type::first-letter {
+        float: none !important;
+        font-family: inherit !important;
+        font-size: inherit !important;
+        line-height: inherit !important;
+        padding: 0 !important;
+        color: inherit !important;
+      }
+
+      .stat-row {
+        grid-template-columns: minmax(0, 1fr) auto;
+      }
+
+      .stat-row-bar {
+        grid-column: 1 / -1;
+      }
+
+      .toc-row {
+        grid-template-columns: auto minmax(0, 1fr);
+        gap: 8px 12px;
+        padding: 14px 12px;
+        margin-bottom: 8px;
+        border: 1px solid var(--rule-soft);
+        background: rgba(107, 142, 255, 0.04);
+      }
+
+      .toc-row .toc-meta {
+        grid-column: 2;
+        min-width: 0;
+        text-align: left;
+      }
+
+      .toc-list {
+        border-top: none;
+      }
+
+      .toc-name {
+        font-size: 1.12rem;
+        line-height: 1.1;
+      }
+    }
+
     @media (max-width: 480px) {
-      .manual-masthead { padding: 72px 0 12px; }
+      .manual-masthead { padding: 70px 0 12px; }
       .preface { padding: 24px 0; }
       .stat-block { padding: 24px 0; }
       .toc { padding: 24px 0 32px; }
       .colophon { padding: 24px 0; }
 
+      .manual-masthead.container,
+      .preface.container,
+      .stat-block.container,
+      .toc.container,
+      .colophon.container {
+        padding-left: 18px;
+        padding-right: 18px;
+      }
+
       .manual-title {
-        font-size: clamp(2.4rem, 14vw, 3.6rem);
-        line-height: 0.92;
+        font-size: clamp(2.05rem, 11vw, 2.75rem);
+        line-height: 1;
       }
 
       .manual-meta-row {
@@ -570,12 +696,18 @@
       }
 
       .manual-tagline {
-        font-size: 0.96rem;
+        font-size: 1rem;
+        line-height: 1.45;
         margin: 16px 0 4px;
       }
 
+      .manual-attribution {
+        font-size: 0.9rem;
+        line-height: 1.45;
+      }
+
       .ascii-rule {
-        margin: 16px 0;
+        margin: 18px 0 !important;
       }
 
       .preface-eyebrow,
@@ -590,8 +722,12 @@
       }
 
       .preface-body p:first-of-type::first-letter {
-        font-size: 2.8rem;
-        padding: 0.04em 0.1em 0 0;
+        float: none !important;
+        font-family: inherit !important;
+        font-size: inherit !important;
+        line-height: inherit !important;
+        padding: 0 !important;
+        color: inherit !important;
       }
 
       .stat-row {
@@ -610,9 +746,9 @@
       }
 
       .toc-row {
-        grid-template-columns: 30px 1fr auto;
+        grid-template-columns: auto minmax(0, 1fr);
         gap: 8px;
-        padding: 10px 0;
+        padding: 13px 12px;
       }
 
       .toc-name {
diff --git a/site/lesson.html b/site/lesson.html
index b43f0b759f..42effc3a37 100644
--- a/site/lesson.html
+++ b/site/lesson.html
@@ -1516,34 +1516,110 @@
     }
 
     @media (max-width: 900px) {
+      html,
+      body {
+        overflow-x: hidden;
+      }
+      .lesson-layout { padding-top: 56px; }
       .lesson-sidebar { transform: translateX(-100%); }
       .lesson-sidebar.open { transform: translateX(0); }
       .lesson-sidebar-toggle {
         display: flex;
-        top: 70px;
-        right: 12px;
+        top: auto;
+        right: 16px;
+        bottom: 18px;
         left: auto;
-        width: 32px;
-        height: 32px;
-        font-size: 0.95rem;
+        width: auto;
+        height: 44px;
+        padding: 0 14px;
+        gap: 8px;
+        border-color: var(--blueprint);
+        background: var(--modal-bg);
+        color: var(--blueprint);
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
+        font-size: 0.78rem;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
+      .lesson-sidebar {
+        top: 56px;
+        width: min(360px, 88vw);
+        padding: 18px 0 88px;
+        border-right-color: var(--blueprint);
+        box-shadow: 16px 0 40px rgba(0, 0, 0, 0.22);
+      }
+      .sidebar-phase-header {
+        padding: 18px 18px 8px;
+      }
+      .sidebar-lesson-link {
+        padding: 10px 18px;
+        font-size: 1rem;
+        line-height: 1.35;
+      }
+      .lesson-main {
+        margin-left: 0;
+        justify-content: stretch;
+        padding: 44px 20px 80px;
       }
-      .lesson-main { margin-left: 0; padding: 56px 20px 80px; }
+      .lesson-content { max-width: none; }
     }
 
     @media (max-width: 768px) {
-      .lesson-main { padding: 56px 16px 60px; }
+      .lesson-main { padding: 40px 16px 60px; }
       .lesson-article { max-width: 100%; }
+      .lesson-article h1 {
+        font-size: clamp(2.05rem, 11vw, 3rem);
+        line-height: 0.95;
+        margin-bottom: 16px;
+        padding-bottom: 14px;
+      }
+      .lesson-article h2 {
+        margin-top: 42px;
+        font-size: clamp(1.35rem, 8vw, 1.9rem);
+      }
+      .lesson-article h3 {
+        margin-top: 28px;
+        font-size: 0.84rem;
+        line-height: 1.35;
+      }
       .lesson-article p,
       .lesson-article ul li,
       .lesson-article ol li { font-size: 1rem; line-height: 1.65; }
+      .lesson-article p {
+        text-align: left;
+        hyphens: none;
+        -webkit-hyphens: none;
+      }
       .lesson-article > p:first-of-type::first-letter { font-size: 3rem; }
       .lesson-article pre code { font-size: 0.78rem; padding: 14px 14px; }
       .lesson-article table { font-size: 0.84rem; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
       .lesson-article table th,
       .lesson-article table td { padding: 8px 10px; white-space: nowrap; }
       .lesson-article .motto { font-size: 1.05rem; padding: 14px 16px; }
+      .learning-objectives,
+      .quiz-section,
+      .quiz-container {
+        padding: 18px 16px;
+      }
+      .lesson-meta {
+        gap: 6px;
+        margin-bottom: 24px;
+      }
+      .lesson-meta-tag {
+        font-size: 0.66rem;
+        letter-spacing: 0.07em;
+        padding: 3px 8px;
+      }
       .ai-panels { margin-top: 40px; gap: 28px; }
       .ai-panel { padding: 22px 16px; }
+      .ai-panel-header {
+        align-items: flex-start;
+        gap: 10px;
+      }
+      .ai-panel-title {
+        font-size: 1.22rem;
+        line-height: 1.05;
+      }
       .output-cards,
       .code-cards { grid-template-columns: 1fr; }
       .lesson-nav-bottom { flex-direction: column; gap: 12px; }
@@ -1552,11 +1628,49 @@
     }
 
     @media (max-width: 480px) {
+      .lesson-main { padding: 36px 12px 56px; }
+      .lesson-sidebar-toggle {
+        right: 12px;
+        bottom: 14px;
+        height: 42px;
+        padding: 0 12px;
+      }
       .lesson-article p,
       .lesson-article ul li,
       .lesson-article ol li { font-size: 0.96rem; }
+      .lesson-article h1 { font-size: clamp(1.9rem, 12vw, 2.55rem); }
       .lesson-article > p:first-of-type::first-letter { font-size: 2.6rem; }
+      .lesson-article ul { padding-left: 18px; }
+      .lesson-article ol { padding-left: 24px; }
+      .learning-objectives,
+      .quiz-section,
+      .quiz-container {
+        padding: 16px 12px;
+      }
+      .learning-objectives-title,
+      .quiz-title {
+        align-items: flex-start;
+        font-size: 0.66rem;
+        line-height: 1.35;
+      }
+      .quiz-option {
+        gap: 10px;
+        padding: 10px 12px;
+      }
       .ai-panel { padding: 18px 12px; }
+      .code-card,
+      .output-card {
+        padding: 14px;
+      }
+      .code-card-actions,
+      .output-actions {
+        display: grid;
+        grid-template-columns: 1fr;
+      }
+      .code-card-btn,
+      .output-btn {
+        text-align: center;
+      }
       .timeline-item { min-width: 70px; }
       .timeline-line { width: 20px; }
     }
@@ -1599,7 +1713,10 @@
     </div>
   </header>
 
-  <button class="lesson-sidebar-toggle" id="sidebarToggle" aria-label="Toggle sidebar">&#9776;</button>
+  <button class="lesson-sidebar-toggle" id="sidebarToggle" aria-label="Toggle lesson menu" type="button">
+    <span aria-hidden="true">&#9776;</span>
+    <span>Lessons</span>
+  </button>
 
   <div class="mermaid-modal-overlay" id="mermaidModalOverlay" aria-hidden="true">
     <div class="mermaid-modal" role="dialog" aria-modal="true" aria-label="Expanded diagram">
@@ -1833,7 +1950,7 @@
 
         document.addEventListener('click', function (e) {
           if (window.innerWidth <= 900 && sidebar.classList.contains('open')) {
-            if (!sidebar.contains(e.target) && e.target !== toggle) {
+            if (!sidebar.contains(e.target) && !toggle.contains(e.target)) {
               sidebar.classList.remove('open');
             }
           }
diff --git a/site/style.css b/site/style.css
index 1f82682249..05a06b5974 100644
--- a/site/style.css
+++ b/site/style.css
@@ -982,6 +982,168 @@ body.js-anim .toc-row.in-view {
   }
 }
 
+@media (max-width: 600px) {
+  .header-inner {
+    height: 52px;
+    padding: 0 14px;
+    justify-content: flex-start;
+    gap: 8px;
+  }
+
+  .logo {
+    max-width: calc(100vw - 120px);
+    font-size: 1.05rem;
+    line-height: 1;
+  }
+
+  .header-github {
+    display: none;
+  }
+
+  .header-nav {
+    margin-left: auto;
+    gap: 0;
+  }
+
+  .theme-toggle {
+    width: 34px;
+    height: 34px;
+  }
+
+  .modal-overlay {
+    align-items: stretch;
+    justify-content: flex-end;
+    padding: 52px 0 0;
+  }
+
+  .modal {
+    max-width: 100%;
+    max-height: calc(100vh - 52px);
+    height: calc(100vh - 52px);
+    border-left: none;
+    border-right: none;
+    padding: 24px 16px 22px;
+  }
+
+  .modal-close {
+    top: 12px;
+    right: 12px;
+    width: 34px;
+    height: 34px;
+    border: 1px solid var(--rule-soft);
+    background: var(--modal-bg);
+  }
+
+  .modal-header {
+    padding-right: 38px;
+  }
+
+  .modal-title {
+    font-size: 2rem;
+    line-height: 0.98;
+  }
+
+  .modal-desc {
+    font-size: 0.96rem;
+    line-height: 1.5;
+  }
+
+  .modal-lessons {
+    gap: 10px;
+  }
+
+  .modal-lesson {
+    grid-template-columns: 14px minmax(0, 1fr) auto;
+    gap: 8px 10px;
+    padding: 14px 12px;
+    border: 1px solid var(--rule-soft);
+    background: rgba(107, 142, 255, 0.04);
+  }
+
+  .modal-lesson:last-child {
+    border-bottom: 1px solid var(--rule-soft);
+  }
+
+  .modal-lesson-status {
+    align-self: start;
+    margin-top: 0.42em;
+  }
+
+  .modal-lesson > a {
+    grid-column: 2 / 4;
+    white-space: normal;
+    overflow: visible;
+    text-overflow: clip;
+    font-size: 1rem;
+    line-height: 1.35;
+  }
+
+  .modal-lesson-type {
+    grid-column: 2;
+    grid-row: 2;
+    justify-self: start;
+    min-width: 0;
+    padding: 3px 9px;
+  }
+
+  .modal-lesson-lang {
+    grid-column: 3;
+    grid-row: 2;
+    justify-self: end;
+    min-width: 0;
+    text-align: right;
+    align-self: center;
+    font-size: 0.7rem;
+  }
+
+  .modal-lesson .modal-lesson-read {
+    grid-column: 2;
+    grid-row: 3;
+    justify-self: stretch;
+    margin-top: 4px;
+    padding: 8px 12px;
+    border-color: var(--blueprint);
+    background: var(--blueprint-tint);
+    color: var(--blueprint);
+    text-align: center;
+    font-size: 0.7rem;
+  }
+
+  .modal-lesson-read-placeholder {
+    display: none;
+  }
+
+  .modal-lesson-toggle {
+    grid-column: 3;
+    grid-row: 3;
+    align-self: stretch;
+    width: auto;
+    min-width: 76px;
+    height: auto;
+    margin-top: 4px;
+    padding: 0 12px;
+    gap: 6px;
+    background: var(--bg);
+    font-size: 0.75rem;
+  }
+
+  .modal-lesson-toggle::after {
+    content: "Mark";
+    font-size: 0.66rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  .modal-lesson-toggle.done::after {
+    content: "Done";
+  }
+
+  .modal-footer {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}
+
 @media (max-width: 480px) {
   body {
     font-size: 16px;