sizes and shorter intro

index.html

@@ -95,7 +95,7 @@
         <div class="h-full flex items-stretch">
             <!-- Left: Title as Home Link (always two lines) -->
             <div class="flex items-center justify-between flex-1 xl:flex-initial border-r-0 xl:border-r border-gray-300 px-4 xl:px-6">
-                <a href="/" class="text-lg xl:text-xl font-bold text-gray-800 leading-tight hover:text-blue-600 transition-colors">
+                <a href="/" class="text-xl xl:text-2xl font-bold text-gray-800 leading-tight hover:text-blue-600 transition-colors">
                     <span class="block">Machine Learning</span>
                     <span class="block">and Society at 🤗</span>
                 </a>

js/components/Card.js

@@ -197,7 +197,7 @@ function renderAreaCard(area, options = {}) {
     
     return `
         <a href="/${area.id}" 
-           class="group relative block border border-gray-300 rounded-lg overflow-hidden bg-white/95 shadow-sm hover:shadow-lg transition-all duration-200 h-64">
+            class="group relative block border border-gray-300 rounded-lg overflow-hidden bg-white/95 shadow-sm hover:shadow-lg transition-all duration-200 min-h-80">
             
             <!-- Background image with low opacity -->
             ${area.image ? `
@@ -210,7 +210,7 @@ function renderAreaCard(area, options = {}) {
             <div class="relative p-5 h-full flex flex-col">
                 <!-- Header -->
                 <div class="flex justify-between items-start mb-3 flex-shrink-0">
-                    <h3 class="text-xl font-bold text-gray-900 leading-tight">${area.navTitle}</h3>
+                    <h3 class="text-xl font-bold text-gray-900 leading-tight">${area.title}</h3>
                     <svg class="w-5 h-5 text-gray-400 group-hover:text-blue-600 transition-colors flex-shrink-0 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                     </svg>

js/pages/HomePage.js

@@ -45,19 +45,16 @@ export function renderHomePage() {
             
             <div class="space-y-2 text-gray-900 leading-relaxed mb-8">
                 <p>
-                    With the rapid evolution of Artificial Intelligence over the last five years – and particularly its shift from Machine Learning as a behind-the-scenes organizing principle of our digital infrastructure to the more visible "generative AI" systems sold as consumer products – the interaction modes between the technology and its social contexts have expanded drastically.
+                    Artificial Intelligence has evolved rapidly over the past five years: from a largely hidden infrastructure to a visible, consumer-facing force driven by generative systems that now shape everyday interactions. This change has expanded how AI interacts with society, making shared understanding and collaborative engagement – outside of the control of a limited set of developers who control data flows – more critical. Openly accessible models, documented datasets, and reproducible workflows support broader investigation, informed dialogue, and iterative improvement across diverse stakeholders with different interests.
                 </p>
                 
                 <p>
-                    Technology developers have a role to play in fostering more positive outcomes for these interactions; but they cannot be the sole deciders. However, for co-development to occur in meaningful ways between different kinds of stakeholders – with potentially diverging interests – it needs to be grounded in a common understanding of the technology and ability to investigate and modify technical systems. This is greatly facilitated by artificial intelligence models, datasets, and systems that are openly and collaboratively developed.
-                </p>
-                
-                <p>
-                    In addition to the work of the entire ${createInlineLink('Hugging Face', 'https://huggingface.co', 'bg-yellow-100 text-yellow-800')} team to support the development and sharing of such systems, the ${createInlineLink('Machine Learning and Society Team', 'https://huggingface.co/hfmlsoc', 'bg-blue-100 text-blue-800')} works on projects targeting the boundaries between technology and society more specifically. This includes work on the ${createInlineLink('Sustainability', '/sustainability', areasData.sustainability.color, areasData.sustainability.description.short)} of the technology, addressing its financial and environmental costs and investigating methods to manage its footprint, work on how ${createInlineLink('Agency', '/agency', areasData.agency.color, areasData.agency.description.short)} over artificial intelligence systems (or lack thereof) plays out for individual and communities, and work on how the economic and regulatory ${createInlineLink('Ecosystems of AI', '/ecosystems', areasData.ecosystems.color, areasData.ecosystems.description.short)} shape who benefits most or least from the technology.
-                </p>
-                
-                <p>
-                    This work is shaped by different aspects of openness, from transparency to collaboration to ease of access. Beyond producing research and tools that we hope will support more distributed development of the technology, we strongly invite collaborations on shared resources with all categories of expertise.
+                    In the broader context of ${createInlineLink('Hugging Face', 'https://huggingface.co', 'bg-yellow-100 text-yellow-800')}'s efforts to support the open sharing and development of AI systems,
+                    the ${createInlineLink('Machine Learning and Society Team', 'https://huggingface.co/hfmlsoc', 'bg-blue-100 text-blue-800')} works on projects targeting topics at the boundary between technology and society.
+                    These include measuring and improving the ${createInlineLink('Sustainability', '/sustainability', areasData.sustainability.color, areasData.sustainability.description.short)} of the technology,
+                    characterizing and supporting the ${createInlineLink('Agency', '/agency', areasData.agency.color, areasData.agency.description.short)} of individual and communities in their interactions with AI,
+                    and understanding the economic and regulatory ${createInlineLink('Ecosystems of AI', '/ecosystems', areasData.ecosystems.color, areasData.ecosystems.description.short)} that shape who benefits from the technology.
+                    Our approach is rooted in open production of research and tools, and we actively invite partners from all areas of expertise to reach out and collaborate.
                 </p>
             </div>
             

styles.css

@@ -201,7 +201,7 @@ p {
 }
 
 .page-navigation.sticky-nav #nav-container {
-    background: rgba(255, 255, 255, 0.95);
+    background: rgba(222, 241, 243, 0.3);
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
     padding: 0.75rem 1.5rem;