add files

Author: cjerzak

_includes/header.html

@@ -1,12 +1,4 @@
 <header class="site-header">
-  <div class="site-notice" role="region" aria-label="Main lab site">
-    <div class="container">
-      <p class="site-notice-text">
-        For datasets, rankings, videos, and the full archive, visit
-        <a href="{{ site.main_site.url }}" target="_blank" rel="noopener">{{ site.main_site.name }}</a>.
-      </p>
-    </div>
-  </div>
   <div class="container">
     <nav class="nav">
       <a href="{{ '/' | relative_url }}" class="nav-logo">

_layouts/default.html

@@ -13,6 +13,12 @@
 
   {% include footer.html %}
 
+  <!-- Lightbox (used by gallery + homepage case studies) -->
+  <div class="lightbox" id="lightbox">
+    <button class="lightbox-close" type="button" aria-label="Close">&times;</button>
+    <img src="" alt="">
+  </div>
+
   <script src="{{ '/assets/js/main.js' | relative_url }}"></script>
 </body>
 </html>

_sass/_base.scss

@@ -81,7 +81,7 @@ html {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   scroll-behavior: smooth;
-  scroll-padding-top: var(--site-header-height, 88px);
+  scroll-padding-top: var(--site-header-height, 64px);
 }
 
 body {

_sass/_components.scss

@@ -677,6 +677,61 @@ button.tag {
   pointer-events: none;
 }
 
+// Visual case studies (Home)
+.case-studies-title {
+  display: inline-block;
+  padding: 12px 18px;
+  border: 1px solid var(--c-border);
+  background: rgba(var(--c-surface-rgb), 0.72);
+  box-shadow: $shadow-sm;
+}
+
+.case-studies-grid {
+  display: grid;
+  gap: $space-4;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+
+  @media (max-width: $breakpoint-lg) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.case-study__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: $space-2;
+  margin-bottom: $space-2;
+}
+
+.case-study__title {
+  margin: 0;
+  font-family: $font-mono;
+  font-size: $font-size-h4;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.case-study__links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $space-1;
+  justify-content: flex-end;
+}
+
+.case-study__caption {
+  margin: 0 0 $space-3;
+  color: $color-gray-600;
+  font-size: $font-size-small;
+  line-height: $line-height-relaxed;
+}
+
+.case-study__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 10px;
+}
+
 // Lightbox
 .lightbox {
   position: fixed;

gallery.md

@@ -116,9 +116,3 @@ description: Visual showcase of research outputs from the AI & Global Developmen
     <p class="animate-on-scroll">Images from our research are available for academic and educational use with attribution. For high-resolution versions or media inquiries, please <a href="{{ '/contact/' | relative_url }}">contact us</a>.</p>
   </div>
 </section>
-
-<!-- Lightbox -->
-<div class="lightbox" id="lightbox">
-  <button class="lightbox-close" type="button" aria-label="Close">&times;</button>
-  <img src="" alt="">
-</div>

index.md

@@ -40,6 +40,56 @@ title: Home
   </div>
 </section>
 
+<section class="section section-gray case-studies-section">
+  <div class="container">
+    <h2 class="section-title text-center animate-on-scroll case-studies-title">Visual Case Studies</h2>
+    <p class="text-center text-muted animate-on-scroll">Figure-first summaries from our papers. Click any tile to zoom.</p>
+
+    {% assign case_studies = site.data.gallery_batteries %}
+
+    <div class="case-studies-grid mt-6 animate-stagger">
+      {% for battery in case_studies %}
+        {% assign lead_panel = battery.panels | first %}
+        <article class="case-study card card-glass animate-on-scroll">
+          <header class="case-study__header">
+            <h3 class="case-study__title">{{ battery.title }}</h3>
+            <div class="case-study__links">
+              <a class="tag" href="{{ battery.href }}" target="_blank" rel="noopener">Paper</a>
+              <a class="tag" href="{{ '/gallery/' | relative_url }}#{{ battery.id }}">Gallery</a>
+            </div>
+          </header>
+
+          {% if lead_panel and lead_panel.alt %}
+            <p class="case-study__caption">{{ lead_panel.alt | truncate: 160 }}</p>
+          {% endif %}
+
+          <div class="case-study__grid" aria-label="Case study panels: {{ battery.title }}">
+            {% for panel in battery.panels | slice: 0, 4 %}
+              <button class="figure-tile" type="button" data-lightbox aria-label="Open full-size image: {{ battery.title }} — {{ panel.label }}">
+                <picture class="figure-tile__media">
+                  {% if panel.dark %}
+                    <source srcset="{{ panel.dark | relative_url }}" media="(prefers-color-scheme: dark)">
+                  {% endif %}
+                  <img
+                    src="{{ panel.light | relative_url }}"
+                    alt="{{ panel.alt }}"
+                    class="figure-tile__img{% if panel.invert_dark %} figure-tile__img--invert-dark{% endif %}"
+                    loading="lazy" />
+                </picture>
+                <span class="figure-tile__label">{{ panel.label }}</span>
+              </button>
+            {% endfor %}
+          </div>
+        </article>
+      {% endfor %}
+    </div>
+
+    <div class="mt-6 text-center animate-on-scroll">
+      <a href="{{ '/gallery/' | relative_url }}" class="link-arrow">Browse all figure batteries</a>
+    </div>
+  </div>
+</section>
+
 <section class="section">
   <div class="container">
     <h2 class="section-title animate-on-scroll">Lab Sites</h2>