feat(site): Palette/Periodic toggle in Language, rename Why → The Case

Two homepage tweaks:

- Section 02 (The Language) gets a pill-style Palette / Periodic view
  toggle at the top-right of the intro row. Palette (fisheye command
  gallery) is default; Periodic (the periodic table) is behind a tab
  click. Collapses the section's vertical footprint substantially
  without losing the signature periodic-table visualization.
- Section 04 renamed "Why Impeccable" → "The Case". Matches the
  editorial voice of "The Language" / "The Antidote" / "The Editors"
  (changelog signature). Sticky nav label Case.

public/app.js

@@ -216,12 +216,38 @@ function init() {
 	initFoundationGrid();
 	initSectionNav();
 	initWhyTabs();
+	initLanguageTabs();
 	initLiveDemo();
 	loadContent();
 
 	document.body.classList.add("loaded");
 }
 
+function initLanguageTabs() {
+	const toggle = document.querySelector('.language-view-toggle');
+	if (!toggle) return;
+	const tabs = Array.from(toggle.querySelectorAll('.language-view-tab'));
+	const panels = Array.from(document.querySelectorAll('.language-view[data-view-panel]'));
+	if (!tabs.length || !panels.length) return;
+
+	tabs.forEach((tab) => {
+		tab.addEventListener('click', () => {
+			const view = tab.dataset.view;
+			tabs.forEach((t) => {
+				const on = t === tab;
+				t.classList.toggle('is-active', on);
+				t.setAttribute('aria-selected', on ? 'true' : 'false');
+			});
+			panels.forEach((p) => {
+				const on = p.dataset.viewPanel === view;
+				p.classList.toggle('is-active', on);
+				if (on) p.removeAttribute('hidden');
+				else p.setAttribute('hidden', '');
+			});
+		});
+	});
+}
+
 function initWhyTabs() {
 	const container = document.querySelector('.why-layout');
 	if (!container) return;

public/css/workflow.css

@@ -3191,3 +3191,66 @@
   }
   .live-demo-caption::before { animation: none; }
 }
+
+/* ============================================
+   LANGUAGE section — Palette / Periodic tabs
+   ============================================ */
+
+.language-intro-row {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: var(--spacing-lg);
+  margin-bottom: var(--spacing-xl);
+}
+
+.language-intro-row .section-lead {
+  margin: 0;
+  flex: 1;
+}
+
+.language-view-toggle {
+  display: inline-flex;
+  gap: 2px;
+  padding: 3px;
+  background: var(--color-mist);
+  border-radius: 999px;
+  flex-shrink: 0;
+}
+
+.language-view-tab {
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  padding: 8px 18px;
+  background: transparent;
+  border: 0;
+  border-radius: 999px;
+  color: var(--color-ash);
+  cursor: pointer;
+  transition: background 200ms var(--ease-out), color 200ms var(--ease-out);
+}
+
+.language-view-tab:hover { color: var(--color-ink); }
+
+.language-view-tab.is-active {
+  background: var(--color-paper);
+  color: var(--color-ink);
+  box-shadow: 0 1px 3px oklch(0% 0 0 / 0.08);
+}
+
+.language-view-tab:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+
+.language-view { display: none; }
+.language-view.is-active { display: block; }
+
+@media (max-width: 680px) {
+  .language-intro-row {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}

public/index.html

@@ -75,7 +75,7 @@
     <a href="#foundation" class="section-nav-item" data-section="foundation"><span class="section-nav-num">01</span><span class="section-nav-label">Foundation</span></a>
     <a href="#language" class="section-nav-item" data-section="language"><span class="section-nav-num">02</span><span class="section-nav-label">Language</span></a>
     <a href="#antidote" class="section-nav-item" data-section="antidote"><span class="section-nav-num">03</span><span class="section-nav-label">Antidote</span></a>
-    <a href="#why" class="section-nav-item" data-section="why"><span class="section-nav-num">04</span><span class="section-nav-label">Why</span></a>
+    <a href="#why" class="section-nav-item" data-section="why"><span class="section-nav-num">04</span><span class="section-nav-label">Case</span></a>
     <a href="#live-mode" class="section-nav-item" data-section="live-mode"><span class="section-nav-num">05</span><span class="section-nav-label">Live</span></a>
     <a href="#downloads" class="section-nav-item" data-section="downloads"><span class="section-nav-num">06</span><span class="section-nav-label">Install</span></a>
     <a href="#changelog" class="section-nav-item" data-section="changelog"><span class="section-nav-num">07</span><span class="section-nav-label">New</span></a>
@@ -211,20 +211,30 @@
         <h2 class="section-title">The Language</h2>
       </div>
       <div class="language-content">
-        <p class="section-lead" data-reveal>23 commands form a shared vocabulary between you and your AI. Each one encodes a specific design discipline, so you can steer with precision.</p>
-
-        <div class="solution-visual-interactive" id="framework-viz-container" data-reveal>
-        <!-- Periodic table generated by JS -->
+        <div class="language-intro-row" data-reveal>
+          <p class="section-lead">23 commands form a shared vocabulary between you and your AI. Each one encodes a specific design discipline, so you can steer with precision.</p>
+          <div class="language-view-toggle" role="tablist" aria-label="Commands view">
+            <button type="button" role="tab" class="language-view-tab is-active" data-view="palette" aria-selected="true">Palette</button>
+            <button type="button" role="tab" class="language-view-tab" data-view="periodic" aria-selected="false">Periodic</button>
+          </div>
         </div>
 
         <div id="commands-section" style="height:0;overflow:hidden;visibility:hidden"></div>
 
-        <div class="commands-subsection">
-          <div class="commands-header" data-reveal>
-            <p class="commands-header-subtitle">Pick any command to see it in action. <a href="/docs" class="cheatsheet-link">Full command reference &rarr;</a></p>
+        <div class="language-view language-view--palette is-active" data-view-panel="palette">
+          <div class="commands-subsection">
+            <div class="commands-header" data-reveal>
+              <p class="commands-header-subtitle">Pick any command to see it in action. <a href="/docs" class="cheatsheet-link">Full command reference &rarr;</a></p>
+            </div>
+            <div class="commands-gallery">
+              <!-- Rendered by JS -->
+            </div>
           </div>
-          <div class="commands-gallery">
-            <!-- Rendered by JS -->
+        </div>
+
+        <div class="language-view language-view--periodic" data-view-panel="periodic" hidden>
+          <div class="solution-visual-interactive" id="framework-viz-container" data-reveal>
+          <!-- Periodic table generated by JS -->
           </div>
         </div>
       </div>
@@ -294,7 +304,7 @@
           <div class="why-left">
             <div class="section-header">
               <span class="section-number">04</span>
-              <h2 class="section-title">Why Impeccable</h2>
+              <h2 class="section-title">The Case</h2>
             </div>
             <ol class="why-tabs" role="tablist" aria-label="Reasons Impeccable is different">
             <li><button role="tab" class="why-tab is-active" data-index="0" aria-selected="true" aria-controls="why-panel-0"><span class="why-tab-num">01</span><span class="why-tab-label">Intentional design</span><span class="why-tab-progress" aria-hidden="true"></span></button></li>
@@ -1157,8 +1167,5 @@
 
   <script type="module" src="./app.js"></script>
 
-<!-- impeccable-live-start -->
-<script src="http://localhost:8400/live.js"></script>
-<!-- impeccable-live-end -->
 </body>
 </html>

public/privacy.html

@@ -77,8 +77,5 @@
   <h2>Contact</h2>
   <p>Questions about this policy? Open an issue on <a href="https://github.com/pbakaus/impeccable">GitHub</a> or reach out to <a href="https://x.com/pbakaus">@pbakaus</a>.</p>
   </main>
-<!-- impeccable-live-start -->
-<script src="http://localhost:8400/live.js"></script>
-<!-- impeccable-live-end -->
 </body>
 </html>