fix sticky nav at launch

js/pages/HomePage.js

@@ -41,7 +41,9 @@ export function renderHomePage() {
         ${renderHomeNavigation()}
         
         ${renderContentSection('about-and-works', `
-            <h3 id="about" class="text-xl md:text-2xl font-bold text-gray-900 mb-8 text-center">AI, ML, and Society</h3>
+            <h3 id="about" class="text-xl md:text-2xl font-bold text-gray-900 mb-4 text-center">
+              AI, ML, and Society
+            </h3>
             
             <div class="space-y-4 text-gray-900 mb-10">
                 <div class="text-base">
@@ -56,7 +58,7 @@ export function renderHomePage() {
                         <div class="text-base leading-loose font-medium">
                             The ${createInlineLink('Sustainability', '/sustainability', areasData.sustainability.color, areasData.sustainability.description.short)} of the technology, through better
                             ${createInlineLink('measurement', '/sustainability#measuring', areasData.sustainability.topics.measuring.color, areasData.sustainability.topics.measuring.description.short)} and
-                            ${createInlineLink('efficiency', '/sustainability#efficiency', areasData.sustainability.topics.efficiency.color, areasData.sustainability.topics.efficiency.description.short)}.
+                            ${createInlineLink('efficiency', '/sustainability#efficiency', areasData.sustainability.topics.efficiency.color, areasData.sustainability.topics.efficiency.description.short)} techniques.
                         </div>
                     </li>
                     
@@ -75,7 +77,7 @@ export function renderHomePage() {
                             The ${createInlineLink('Ecosystems', '/ecosystems', areasData.ecosystems.color, areasData.ecosystems.description.short)} that shape AI,
                             including ${createInlineLink('economic', '/ecosystems#economy', areasData.ecosystems.topics.economy.color, areasData.ecosystems.topics.economy.description.short)} and
                             ${createInlineLink('regulatory', '/ecosystems#regulation', areasData.ecosystems.topics.regulation.color, areasData.ecosystems.topics.regulation.description.short)} and the impact of
-                            ${createInlineLink('concentrations of resources', '/ecosystems#power', areasData.ecosystems.topics.power.color, areasData.ecosystems.topics.power.description.short)} on those.
+                            ${createInlineLink('concentrations of resources', '/ecosystems#power', areasData.ecosystems.topics.power.color, areasData.ecosystems.topics.power.description.short)} on these.
                         </div>
                     </li>
                 </ul>

js/utils/stickyNavigation.js

@@ -18,10 +18,10 @@ export function initializeStickyNavigation(navElementId) {
         return;
     }
     
-    // Calculate sticky threshold: when nav reaches bottom of header
+    // Calculate sticky threshold: when nav reaches bottom of header plus padding
     const headerHeight = parseInt(getComputedStyle(document.documentElement)
         .getPropertyValue('--header-height')) || 100;
-    const stickyThreshold = navSection.offsetTop - headerHeight;
+    const stickyThreshold = navSection.offsetTop - headerHeight + 16; // 16px padding
     
     // Scroll handler with throttling
     let scrollTimeout;