diff --git a/.claude/metrics/hooks-metrics.json b/.claude/metrics/hooks-metrics.json
index 8a16164f..5e590d55 100644
--- a/.claude/metrics/hooks-metrics.json
+++ b/.claude/metrics/hooks-metrics.json
@@ -4381,6 +4381,34 @@
       "file": "/home/theflow/projects/tractatus/public/architecture.html",
       "result": "passed",
       "reason": null
+    },
+    {
+      "hook": "validate-file-edit",
+      "timestamp": "2025-10-19T05:23:26.729Z",
+      "file": "/home/theflow/projects/tractatus/public/architecture.html",
+      "result": "passed",
+      "reason": null
+    },
+    {
+      "hook": "validate-file-edit",
+      "timestamp": "2025-10-19T05:24:02.051Z",
+      "file": "/home/theflow/projects/tractatus/public/js/components/interactive-diagram.js",
+      "result": "passed",
+      "reason": null
+    },
+    {
+      "hook": "validate-file-edit",
+      "timestamp": "2025-10-19T05:24:14.356Z",
+      "file": "/home/theflow/projects/tractatus/public/js/components/interactive-diagram.js",
+      "result": "passed",
+      "reason": null
+    },
+    {
+      "hook": "validate-file-edit",
+      "timestamp": "2025-10-19T05:24:20.477Z",
+      "file": "/home/theflow/projects/tractatus/public/architecture.html",
+      "result": "passed",
+      "reason": null
     }
   ],
   "blocks": [
@@ -4620,9 +4648,9 @@
     }
   ],
   "session_stats": {
-    "total_edit_hooks": 441,
+    "total_edit_hooks": 445,
     "total_edit_blocks": 34,
-    "last_updated": "2025-10-19T05:19:01.520Z",
+    "last_updated": "2025-10-19T05:24:20.477Z",
     "total_write_hooks": 185,
     "total_write_blocks": 5
   }
diff --git a/public/architecture.html b/public/architecture.html
index 4ab1525b..d9dd31df 100644
--- a/public/architecture.html
+++ b/public/architecture.html
@@ -331,23 +331,32 @@
       </div>
 
       <div id="diagram-container" class="relative bg-white rounded-xl shadow-lg p-4 sm:p-6 lg:p-8 border border-gray-200">
-        <!-- Flex container for side-by-side layout on desktop -->
-        <div class="flex flex-col lg:flex-row lg:items-start lg:gap-6">
-          <!-- Interactive SVG -->
-          <div class="flex-shrink-0 flex justify-center lg:justify-start w-full lg:w-auto mb-6 lg:mb-0">
+        <!-- Flex container for side-by-side layout -->
+        <div class="flex flex-col lg:flex-row lg:items-start gap-6">
+          <!-- Interactive SVG (reduced to 25% of original size) -->
+          <div class="flex-shrink-0 flex justify-center lg:justify-start">
             <object
               data="/images/architecture-diagram-interactive.svg"
               type="image/svg+xml"
               id="interactive-svg-object"
-              class="w-full max-w-sm sm:max-w-md lg:max-w-lg h-auto max-h-[500px]"
+              class="w-full max-w-[96px] sm:max-w-[128px] lg:max-w-[160px] h-auto"
               aria-label="Interactive Tractatus Architecture Diagram">
               <!-- Fallback for browsers that don't support object tag -->
-              <img src="/images/architecture-diagram-interactive.svg" alt="Tractatus Architecture Diagram" class="w-full max-w-sm sm:max-w-md lg:max-w-lg" />
+              <img src="/images/architecture-diagram-interactive.svg" alt="Tractatus Architecture Diagram" class="w-full max-w-[96px] sm:max-w-[128px] lg:max-w-[160px]" />
             </object>
           </div>
 
-          <!-- Service detail panel will be dynamically inserted here by interactive-diagram.js -->
-          <!-- It will appear to the right of the diagram on desktop, below on mobile -->
+          <!-- Service detail panel (permanent, updates on click) -->
+          <div id="service-detail-panel" class="flex-1 bg-gray-50 rounded-xl shadow-inner p-6 border border-gray-200 min-h-[300px]">
+            <!-- Default state - will be replaced when service is clicked -->
+            <div id="panel-default-state" class="flex flex-col items-center justify-center h-full text-center">
+              <svg class="w-16 h-16 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+              </svg>
+              <h3 class="text-lg font-semibold text-gray-700 mb-2">Explore the Governance Services</h3>
+              <p class="text-sm text-gray-500 max-w-md">Click any service node in the diagram (colored circles) or the central "T" to learn more about how Tractatus enforces AI safety.</p>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -512,7 +521,7 @@
   <script src="/js/scroll-animations.js"></script>
 
   <!-- Interactive Architecture Diagram (Phase 3) -->
-  <script src="/js/components/interactive-diagram.js?v=20251019163000"></script>
+  <script src="/js/components/interactive-diagram.js?v=20251019164500"></script>
 
   <!-- Footer Component -->
   <script src="/js/components/footer.js"></script>
diff --git a/public/js/components/interactive-diagram.js b/public/js/components/interactive-diagram.js
index 5ecbc2af..5ccb675f 100644
--- a/public/js/components/interactive-diagram.js
+++ b/public/js/components/interactive-diagram.js
@@ -250,28 +250,19 @@ class InteractiveDiagram {
   }
 
   renderServicePanel(service) {
-    let panel = document.getElementById('service-detail-panel');
+    const panel = document.getElementById('service-detail-panel');
 
     if (!panel) {
-      panel = document.createElement('div');
-      panel.id = 'service-detail-panel';
-      panel.className = 'w-full lg:flex-1 bg-white rounded-xl shadow-2xl p-4 sm:p-6 border-2 lg:min-w-[400px]';
-      panel.style.borderColor = service.color;
-
-      // Insert into the flex container for side-by-side layout
-      const flexContainer = document.querySelector('#diagram-container > div');
-      if (flexContainer) {
-        flexContainer.appendChild(panel);
-      } else {
-        console.error('[InteractiveDiagram] Flex container not found');
-        return;
-      }
-    } else {
-      panel.style.borderColor = service.color;
+      console.error('[InteractiveDiagram] Service detail panel not found in DOM');
+      return;
     }
 
+    // Update border color to match selected service
+    panel.style.borderColor = service.color;
+    panel.style.borderWidth = '2px';
+
     const html = `
-      <div class="flex items-start justify-between mb-4">
+      <div class="flex items-start mb-4">
         <div class="flex items-center space-x-3">
           <div class="w-12 h-12 rounded-xl flex items-center justify-center text-2xl service-icon-box" data-color="${service.color}">
             ${service.icon}
@@ -281,11 +272,6 @@ class InteractiveDiagram {
             <span class="text-xs font-medium text-gray-600 uppercase">${service.shortName}</span>
           </div>
         </div>
-        <button id="close-panel-btn" class="text-gray-400 hover:text-gray-600 transition" aria-label="Close">
-          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
-          </svg>
-        </button>
       </div>
 
       <p class="text-gray-700 mb-4 leading-relaxed">${service.description}</p>
@@ -339,40 +325,6 @@ class InteractiveDiagram {
       const color = promiseText.getAttribute('data-color');
       promiseText.style.color = color;
     }
-
-    // Add close button event listener (CSP-compliant)
-    const closeBtn = panel.querySelector('#close-panel-btn');
-    if (closeBtn) {
-      closeBtn.addEventListener('click', () => this.closePanel());
-    }
-
-    panel.style.opacity = '0';
-    panel.style.transform = 'translateY(20px)';
-    panel.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
-
-    setTimeout(() => {
-      panel.style.opacity = '1';
-      panel.style.transform = 'translateY(0)';
-    }, 10);
-  }
-
-  closePanel() {
-    const panel = document.getElementById('service-detail-panel');
-    if (panel) {
-      panel.style.opacity = '0';
-      panel.style.transform = 'translateY(20px)';
-
-      setTimeout(() => {
-        panel.remove();
-      }, 300);
-    }
-
-    if (this.svg) {
-      this.svg.querySelectorAll('.service-node').forEach(n => n.classList.remove('active'));
-      this.svg.querySelectorAll('.connection-line').forEach(l => l.classList.remove('active'));
-    }
-
-    this.activeService = null;
   }
 
   addKeyboardNavigation(nodes) {