diff --git a/public/docs.html b/public/docs.html
index 320aab41..3ec3ebe1 100644
--- a/public/docs.html
+++ b/public/docs.html
@@ -231,7 +231,12 @@
       display: block;
     }
 
-    /* Document list container */
+    /* Document list container - prevent CLS */
+    #document-list {
+      min-height: 800px; /* Reserve space for ~40 documents to prevent layout shift */
+      contain: layout; /* Isolate layout calculations */
+    }
+
     #document-list .relative,
     #document-list > div {
       position: relative !important;
@@ -475,7 +480,7 @@
   <a href="#main-content" class="skip-link">Skip to main content</a>
 
   <!-- Navigation (injected by navbar.js) -->
-  <script src="/js/components/navbar.js?v=0.1.0.1760254958072"></script>
+  <script src="/js/components/navbar.js?v=0.1.0.1760254958072" defer></script>
 
   <!-- Page Header -->
   <div class="bg-white border-b border-gray-200">
diff --git a/public/implementer.html b/public/implementer.html
index 62848b9f..24bce1ab 100644
--- a/public/implementer.html
+++ b/public/implementer.html
@@ -225,7 +225,7 @@
           </a>
           <a href="/images/architecture-diagram.png"
              download
-             class="inline-flex items-center bg-green-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-green-700 transition">
+             class="inline-flex items-center bg-green-700 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-green-800 transition">
             <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
             </svg>
@@ -270,7 +270,7 @@
         </div>
 
         <div class="bg-yellow-50 rounded-lg p-6 border-2 border-yellow-200">
-          <div class="text-yellow-600 text-2xl font-bold mb-2">Layer 2</div>
+          <div class="text-yellow-900 text-2xl font-bold mb-2">Layer 2</div>
           <h3 class="text-lg font-bold text-gray-900 mb-3">MongoDB Persistence</h3>
           <ul class="space-y-2 text-sm text-gray-700">
             <li>• governance_rules</li>
@@ -302,7 +302,7 @@
             <p class="text-sm text-gray-600">All actions validated against governance rules before execution</p>
           </div>
           <div class="text-center">
-            <div class="bg-green-600 text-white w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3 text-xl font-bold">2</div>
+            <div class="bg-green-700 text-white w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3 text-xl font-bold">2</div>
             <h4 class="font-semibold text-gray-900 mb-2">Instruction Persistence</h4>
             <p class="text-sm text-gray-600">User instructions classified and stored for cross-reference validation</p>
           </div>
diff --git a/public/leader.html b/public/leader.html
index 18b619c3..d6e50343 100644
--- a/public/leader.html
+++ b/public/leader.html
@@ -262,7 +262,7 @@
                     <div class="text-xs text-gray-600">CrossReferenceValidator flags policy violation</div>
                   </div>
                   <div class="flex items-center gap-3">
-                    <div class="bg-amber-100 text-amber-700 px-3 py-2 rounded text-xs font-medium w-40">2. Root Cause Analysis</div>
+                    <div class="bg-amber-100 text-amber-900 px-3 py-2 rounded text-xs font-medium w-40">2. Root Cause Analysis</div>
                     <div class="text-xs text-gray-600">Automated analysis of instruction history, context state</div>
                   </div>
                   <div class="flex items-center gap-3">
@@ -494,7 +494,7 @@
               Core premise: When knowledge becomes ubiquitous through AI, authority must derive from appropriate time horizon and domain expertise rather than hierarchical position. Governance systems must orchestrate decision-making across strategic, operational, and tactical timescales.
             </p>
             <p>
-              <a href="/downloads/organizational-theory-foundations-of-the-tractatus-framework.pdf" target="_blank" class="text-amber-700 hover:text-amber-800 font-medium inline-flex items-center">
+              <a href="/downloads/organizational-theory-foundations-of-the-tractatus-framework.pdf" target="_blank" class="text-amber-800 hover:text-amber-900 font-medium inline-flex items-center underline">
                 View complete organisational theory foundations (PDF)
                 <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
@@ -504,14 +504,14 @@
             <p class="mt-3">
               <strong>AI Safety Research:</strong> Architectural Safeguards Against LLM Hierarchical Dominance — How Tractatus protects pluralistic values from AI pattern bias while maintaining safety boundaries.
               <span class="inline-flex gap-3 mt-2">
-                <a href="/docs/research/ARCHITECTURAL-SAFEGUARDS-Against-LLM-Hierarchical-Dominance-Prose.pdf" target="_blank" class="text-amber-700 hover:text-amber-800 font-medium inline-flex items-center">
+                <a href="/docs/research/ARCHITECTURAL-SAFEGUARDS-Against-LLM-Hierarchical-Dominance-Prose.pdf" target="_blank" class="text-amber-800 hover:text-amber-900 font-medium inline-flex items-center underline">
                   PDF
                   <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
                   </svg>
                 </a>
                 <span class="text-gray-400">|</span>
-                <a href="/docs.html?doc=architectural-safeguards-against-llm-hierarchical-dominance-prose" class="text-amber-700 hover:text-amber-800 font-medium inline-flex items-center">
+                <a href="/docs.html?doc=architectural-safeguards-against-llm-hierarchical-dominance-prose" class="text-amber-800 hover:text-amber-900 font-medium inline-flex items-center underline">
                   Read online
                   <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
@@ -586,7 +586,7 @@
 
       <div class="mt-8 pt-8 border-t border-gray-200">
         <p class="text-sm text-gray-600">
-          <strong class="text-gray-900" data-i18n="footer.contact">Contact:</strong> <span data-i18n="footer.contact_text">For pilot partnerships, validation studies, or technical consultation, contact via</span> <a href="/about.html" class="text-amber-700 hover:text-amber-800">project information page</a>.
+          <strong class="text-gray-900" data-i18n="footer.contact">Contact:</strong> <span data-i18n="footer.contact_text">For pilot partnerships, validation studies, or technical consultation, contact via</span> <a href="/about.html" class="text-amber-800 hover:text-amber-900 underline">project information page</a>.
         </p>
       </div>
     </section>