news: design overhaul — sticky feature, disclosure, images for text-only cards, badge size fix, mobile strip scroll [2026-05-15]

- Remove min-height: 100% from .news-feature (inert but confusing; feature was already sized correctly by align-items:start)
- Add position:sticky to .news-feature at min-width:993px — feature card stays in view while scrolling long card grids
- Progressive disclosure: show first 6 cards per section; Show N more button beneath grid; resets cleanly after shuffle
- Fix two text-only cards: WEF UNESCO + National Academies now have Wikimedia thumbnail images; onerror collapses grid column if load fails
- Source badge: 0.67rem→0.72rem, padding 0px 4px→1px 5px (WCAG legibility)
- Mobile (≤700px) news-latest__strip: flex horizontal scroll strip instead of 1-col stack; flex: 0 0 220px per item
- JS: image onerror handler collapses card grid column gracefully; initDisclosure() runs after shuffle on button click

Author: benquist

_pages/news.md

@@ -83,7 +83,7 @@ _styles: |
       </div>
     </article>
     <div class="news-theme__cards">
-      <article class="news-card news-card--text-only"><div><div class="news-meta">September 2023</div><h3 class="news-title"><span class="news-source">World Economic Forum</span><a href="https://www.weforum.org/stories/2023/09/unesco-world-heritage-sites-biodiversity/" target="_blank" rel="noopener">UNESCO World Heritage Sites and Biodiversity</a></h3></div></article>
+      <article class="news-card"><div><div class="news-meta">September 2023</div><h3 class="news-title"><span class="news-source">World Economic Forum</span><a href="https://www.weforum.org/stories/2023/09/unesco-world-heritage-sites-biodiversity/" target="_blank" rel="noopener">UNESCO World Heritage Sites and Biodiversity</a></h3></div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Fagus_sylvatica_forest.jpg/480px-Fagus_sylvatica_forest.jpg" alt="Ancient beech forest — UNESCO World Heritage forests harbour exceptional biodiversity and old-growth carbon stores" loading="lazy" onerror="this.closest('.news-card').style.gridTemplateColumns='1fr';this.style.display='none'"></article>
       <article class="news-card"><div><div class="news-meta">June 2023</div><h3 class="news-title"><span class="news-source">Inside Climate News</span><a href="https://insideclimatenews.org/news/01062023/nature-carbon-storage-solutions/" target="_blank" rel="noopener">New Research Shows Global Climate Benefits Of Protecting Nature, but It's Not a Silver Bullet</a></h3></div><img src="https://insideclimatenews.org/wp-content/uploads/2023/05/forest-getty-scaled.jpg" alt="Forest carbon storage" loading="lazy"></article>
       <article class="news-card"><div><div class="news-meta">2023</div><h3 class="news-title"><span class="news-source">NAU News</span><a href="https://news.nau.edu/goetz-forest-research/" target="_blank" rel="noopener">Why protecting forests means reduced emissions at global scale</a></h3></div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Rainforest_Fatu_Hiva.jpg/960px-Rainforest_Fatu_Hiva.jpg" alt="Tropical rainforest, Fatu Hiva — dense forest canopy as global carbon sink" loading="lazy"></article>
       <article class="news-card"><div><div class="news-meta">August 2022</div><h3 class="news-title"><span class="news-source">Mongabay</span><a href="https://news.mongabay.com/2022/08/protecting-global-forests-with-a-limited-budget-new-study-shows-where-and-when-to-start/" target="_blank" rel="noopener">Protecting global forests with a limited budget? New study shows where and when to start</a></h3></div><img src="https://imgs.mongabay.com/wp-content/uploads/sites/20/2022/06/17045519/sabah_RAB.jpg" alt="Borneo forest conservation" loading="lazy"></article>
@@ -170,7 +170,7 @@ _styles: |
       </div>
     </article>
     <div class="news-theme__cards">
-      <article class="news-card news-card--text-only"><div><div class="news-meta">2022</div><h3 class="news-title"><span class="news-source">National Academies of Sciences</span><a href="https://www.nationalacademies.org/projects/DELS-BEST-20-02" target="_blank" rel="noopener">Research at Multiple Scales: A Vision for Continental Scale Biology</a></h3></div></article>
+      <article class="news-card"><div><div class="news-meta">2022</div><h3 class="news-title"><span class="news-source">National Academies of Sciences</span><a href="https://www.nationalacademies.org/projects/DELS-BEST-20-02" target="_blank" rel="noopener">Research at Multiple Scales: A Vision for Continental Scale Biology</a></h3></div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Aerial_view_of_the_Okavango_Delta.jpg/480px-Aerial_view_of_the_Okavango_Delta.jpg" alt="Aerial view of a continental ecosystem — research at multiple biological scales from organisms to landscapes" loading="lazy" onerror="this.closest('.news-card').style.gridTemplateColumns='1fr';this.style.display='none'"></article>
       <article class="news-card"><div><div class="news-meta">April 2024</div><h3 class="news-title"><span class="news-source">Phys.org</span><a href="https://phys.org/news/2024-04-biosphere-science-reconnect-scientific-cultures.html" target="_blank" rel="noopener">To accelerate biosphere science, researchers say reconnect three scientific cultures</a></h3></div><img src="https://scx2.b-cdn.net/gfx/news/hires/2024/to-accelerate-biospher.jpg" alt="Biosphere science" loading="lazy"></article>
       <article class="news-card"><div><div class="news-meta">July 2014</div><h3 class="news-title"><span class="news-source">Phys.org</span><a href="https://phys.org/news/2014-07-ecologists-efficient-theory.html" target="_blank" rel="noopener">Ecologists need &lsquo;efficient theory&rsquo; to make sense of all the data</a></h3></div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Terrestrial_Ecoregions_of_the_World.jpg/960px-Terrestrial_Ecoregions_of_the_World.jpg" alt="WWF Terrestrial Ecoregions of the World — global biodiversity data demanding coherent ecological theory" loading="lazy"></article>
     </div>
@@ -179,6 +179,42 @@ _styles: |
 </div>
 
 <script>
+function initDisclosure() {
+  // Remove any existing show-more buttons before re-initialising
+  document.querySelectorAll('.news-show-more').forEach(function (b) { b.remove(); });
+
+  document.querySelectorAll('.news-theme__cards').forEach(function (grid) {
+    var cards = Array.from(grid.querySelectorAll('.news-card'));
+    var limit = 6;
+
+    // Reset all cards to visible first
+    cards.forEach(function (c) { c.classList.remove('news-card--hidden'); });
+
+    if (cards.length <= limit) return;
+
+    // Hide cards beyond the limit
+    cards.slice(limit).forEach(function (c) { c.classList.add('news-card--hidden'); });
+
+    var hiddenCount = cards.length - limit;
+    var sectionEl = grid.closest('.news-theme');
+    var sectionTitle = sectionEl && sectionEl.querySelector('h2')
+      ? sectionEl.querySelector('h2').textContent
+      : 'this section';
+
+    var btn = document.createElement('button');
+    btn.className = 'news-show-more';
+    btn.textContent = 'Show ' + hiddenCount + ' more';
+    btn.setAttribute('aria-label', 'Show ' + hiddenCount + ' more stories in ' + sectionTitle);
+    btn.addEventListener('click', function () {
+      cards.forEach(function (c) { c.classList.remove('news-card--hidden'); });
+      btn.remove();
+    });
+    // Insert after the grid container (outside both columns)
+    var gridContainer = grid.closest('.news-theme__grid');
+    if (gridContainer) gridContainer.after(btn);
+  });
+}
+
 function shuffleNewsSections() {
   var container = document.querySelector('.news-page');
   if (!container) return;
@@ -196,9 +232,21 @@ function shuffleNewsSections() {
   sections.forEach(function (section) {
     container.appendChild(section);
   });
+
+  // Re-run disclosure so buttons sit in the correct DOM position after reorder
+  initDisclosure();
 }
 
 document.addEventListener('DOMContentLoaded', function () {
   shuffleNewsSections();
+
+  // Graceful fallback for any external image that fails to load
+  document.querySelectorAll('.news-page img').forEach(function (img) {
+    img.addEventListener('error', function () {
+      var card = this.closest('.news-card');
+      if (card) card.style.gridTemplateColumns = '1fr';
+      this.style.display = 'none';
+    });
+  });
 });
 </script>

_sass/_lab-redesign.scss

@@ -1455,7 +1455,6 @@ figure {
 .news-feature {
   display: flex;
   flex-direction: column;
-  min-height: 100%;
   overflow: hidden;
   background: color-mix(in srgb, var(--global-theme-color) 12%, var(--global-card-bg-color) 88%);
 
@@ -1473,6 +1472,13 @@ figure {
   }
 }
 
+@media (min-width: 993px) {
+  .news-feature {
+    position: sticky;
+    top: calc(var(--navbar-height, 64px) + 1rem);
+  }
+}
+
 .news-feature__body {
   padding: 1rem 1rem 0.85rem;
 }
@@ -1516,6 +1522,33 @@ figure {
   grid-template-columns: 1fr;
 }
 
+.news-card--hidden {
+  display: none;
+}
+
+.news-show-more {
+  display: inline-flex;
+  align-items: center;
+  margin: 0.6rem 0 0;
+  padding: 4px 12px;
+  font-size: 0.76rem;
+  font-family: "Source Sans 3", sans-serif;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--global-theme-color);
+  background: none;
+  border: 1px solid color-mix(in srgb, var(--global-theme-color) 45%, transparent);
+  border-radius: 3px;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+
+  &:hover {
+    background: var(--global-theme-color);
+    color: #fff;
+  }
+}
+
 .news-meta {
   font-size: 0.72rem;
   text-transform: uppercase;
@@ -1547,14 +1580,14 @@ figure {
 
 .news-source {
   display: inline-block;
-  font-size: 0.67rem;
+  font-size: 0.72rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--global-theme-color);
   border: 1px solid color-mix(in srgb, var(--global-theme-color) 40%, transparent);
   border-radius: 3px;
-  padding: 0px 4px;
+  padding: 1px 5px;
   margin-bottom: 0.32rem;
 }
 
@@ -1693,11 +1726,236 @@ figure {
   }
 
   .news-latest__strip {
-    grid-template-columns: 1fr;
+    display: flex;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    padding-bottom: 0.4rem;
+    scrollbar-width: thin;
+    -ms-overflow-style: none;
+  }
+
+  .news-latest__item {
+    flex: 0 0 220px;
+    flex-shrink: 0;
   }
 
   .news-section-nav a {
     font-size: 0.7rem;
     padding: 2px 7px;
   }
 }
+
+// ═══════════════════════════════════════════════════════════════════════════
+// ── Research page: layout and component patterns (2026 redesign) ───────────
+// ═══════════════════════════════════════════════════════════════════════════
+
+// ── 1. Research Program two-column intro grid ──────────────────────────────
+//    Text col (left) + aside card (right).
+//    Wrapping prose in the text div removes it from `.post article > p`,
+//    which has max-width: 72ch via a higher-specificity rule — the grid
+//    column fills naturally without that constraint firing.
+.research-intro-grid {
+  display: grid;
+  grid-template-columns: 1fr 300px;
+  gap: 2rem;
+  align-items: start;
+  margin: 1.5rem 0 2rem;
+
+  @media (max-width: 900px) {
+    grid-template-columns: 1fr;
+    gap: 1.25rem;
+  }
+}
+
+// ── 2. Research Program aside card (right column of intro grid) ───────────
+.research-program-card {
+  border: 1px solid var(--global-divider-color);
+  border-radius: 6px;
+  overflow: hidden;
+  background: var(--global-card-bg-color);
+
+  &__photo {
+    overflow: hidden;
+
+    img {
+      width: 100%;
+      aspect-ratio: 4 / 3;
+      object-fit: cover;
+      object-position: center 30%;
+      display: block;
+    }
+  }
+
+  &__body {
+    padding: 0.85rem 1rem;
+    border-left: 3px solid #2b6cb0;
+  }
+
+  &__label {
+    font-family: "Source Sans 3", sans-serif;
+    font-size: 0.72rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.09em;
+    color: #2b6cb0;
+    margin: 0 0 0.55rem;
+  }
+
+  &__links {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    font-size: 0.83rem;
+    line-height: 1.5;
+
+    li {
+      padding: 0.22rem 0;
+      border-bottom: 1px solid var(--global-divider-color);
+
+      &:last-child {
+        border-bottom: none;
+        padding-top: 0.45rem;
+        font-weight: 600;
+      }
+    }
+
+    a {
+      color: var(--global-text-color);
+      text-decoration: none;
+
+      &:hover {
+        color: var(--global-theme-color);
+      }
+    }
+  }
+}
+
+// ── 3. Section fill card ───────────────────────────────────────────────────
+//    Insert inside float-context text columns, after prose paragraphs,
+//    before <div style="clear:both;">. Fills vertical gap when the right
+//    float box is taller than the prose text. Styled to match the existing
+//    #2b6cb0 border-left accent system.
+.section-fill-card {
+  border-left: 3px solid #2b6cb0;
+  padding: 0.65rem 1rem;
+  background: color-mix(in srgb, #2b6cb0 5%, var(--global-bg-color) 95%);
+  border-radius: 0 4px 4px 0;
+  margin-top: 1.25rem;
+  font-family: "Source Sans 3", sans-serif;
+
+  &__label {
+    font-size: 0.72rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.09em;
+    color: #2b6cb0;
+    margin: 0 0 0.45rem;
+  }
+
+  &__links {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    font-size: 0.82rem;
+    line-height: 1.55;
+
+    li {
+      margin-bottom: 0.18rem;
+    }
+
+    a {
+      color: var(--global-text-color);
+      text-decoration: none;
+
+      &:hover {
+        color: var(--global-theme-color);
+        text-decoration: underline;
+        text-underline-offset: 0.12em;
+      }
+    }
+  }
+}
+
+// ── 4. Photo strip — 2 or 3 images side by side, full column width ─────────
+//    Modifier classes --two and --three set column count.
+.photo-strip {
+  display: grid;
+  gap: 0.5rem;
+  margin: 1.75rem 0;
+
+  &--two   { grid-template-columns: 1fr 1fr; }
+  &--three { grid-template-columns: 1fr 1fr 1fr; }
+
+  figure {
+    margin: 0;
+    overflow: hidden;
+    border-radius: 4px;
+
+    img {
+      width: 100%;
+      aspect-ratio: 4 / 3;
+      object-fit: cover;
+      display: block;
+    }
+
+    figcaption {
+      font-family: "Source Sans 3", sans-serif;
+      font-size: 0.76rem;
+      color: var(--global-text-color-light);
+      margin-top: 0.3rem;
+      line-height: 1.4;
+    }
+  }
+
+  @media (max-width: 640px) {
+    &--two,
+    &--three { grid-template-columns: 1fr; }
+  }
+}
+
+// ── 5. Fig-crop — remove baked-in white padding from PNG figures ───────────
+//    Wrap the <img> in <div class="fig-crop"> (or add class to <figure>).
+//    The img is over-sized by 8% and offset negatively, then clipped by
+//    overflow:hidden on the container. No transform — avoids sub-pixel blur.
+.fig-crop {
+  overflow: hidden;
+  border-radius: 4px;
+
+  img {
+    display: block;
+    width: 108%;
+    margin-left: -4%;
+    margin-top: -3%;
+    margin-bottom: -3%;
+    max-width: none !important; // override Bootstrap .img-fluid
+    border-radius: 0;           // radius lives on the container
+  }
+}
+
+// ── 6. Inline concept diagram figure ──────────────────────────────────────
+//    For SVG/PNG scientific diagrams placed inline within prose sections.
+.diagram-fig {
+  margin: 1.75rem 0;
+  overflow: hidden;
+  border-radius: 4px;
+  background: var(--global-card-bg-color);
+  border: 1px solid var(--global-divider-color);
+  padding: 1rem;
+  text-align: center;
+
+  img,
+  object {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    margin: 0 auto;
+  }
+
+  figcaption {
+    font-family: "Source Sans 3", sans-serif;
+    font-size: 0.78rem;
+    color: var(--global-text-color-light);
+    margin-top: 0.6rem;
+    line-height: 1.4;
+  }
+}