From f1343a28875b327d32613d31ae14c00187b53d07 Mon Sep 17 00:00:00 2001
From: Ivan Ogasawara <ivan.ogasawara@gmail.com>
Date: Wed, 17 Jun 2026 16:13:05 +0000
Subject: [PATCH] theme: Improve layout

---
 mkdocs.yml                       |   1 +
 pages/about/sponsorship/index.md |   2 +-
 theme/blog-post.html             | 133 ++++----
 theme/css/base.css               |  47 ++-
 theme/css/blog.css               | 168 +++++++++-
 theme/css/content.css            | 552 +++++++++++++++++++++++++++++++
 theme/css/home.css               |   8 +
 theme/css/partners.css           |  15 +-
 theme/css/team.css               | 151 ++++++---
 theme/css/tokens.css             |  35 ++
 theme/events.html                | 159 +++++----
 theme/main.html                  |  26 ++
 theme/partners.html              |   7 +
 theme/projects.html              | 120 ++++---
 theme/single-sidebar.html        | 103 +++---
 theme/team.html                  |  86 +++--
 16 files changed, 1293 insertions(+), 320 deletions(-)

diff --git a/mkdocs.yml b/mkdocs.yml
index 82fb95a0..67a3386b 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -89,6 +89,7 @@ nav:
           - Governance: about/governance/index.md
       - Team: about/team/index.md
       - Fiscal Sponsor: about/fiscal-sponsor/index.md
+      - Sponsorship: about/sponsorship/index.md
       - Guidelines:
           - Overview: about/guidelines/index.md
           - Articles: about/guidelines/articles/index.md
diff --git a/pages/about/sponsorship/index.md b/pages/about/sponsorship/index.md
index 27f1488b..b627d27c 100644
--- a/pages/about/sponsorship/index.md
+++ b/pages/about/sponsorship/index.md
@@ -6,7 +6,7 @@ description: >
   pathways.
 date: "2026-06-17"
 authors: ["OSL Team"]
-template: main.html
+template: single-sidebar.html
 ---
 
 # Sponsorship
diff --git a/theme/blog-post.html b/theme/blog-post.html
index b2a4883b..f19f50d6 100644
--- a/theme/blog-post.html
+++ b/theme/blog-post.html
@@ -1,39 +1,61 @@
-{% extends "main.html" %}
+{% extends "base.html" %}
 
-{% block content_inner %}
+{% block content %}
+{% set title = page.meta.get("title", page.title) %}
+{% set slug = page.meta.get("slug") %}
+{% set thumbnail = page.meta.get("thumbnail") %}
 
-<div class="blog-article">
-  <h1 class="post-title">
-    <a href="{{ page.canonical_url or url }}" title="{{ page.meta['title'] }}" target="_self">
-      {{ page.meta["title"] }}
-    </a>
-  </h1>
+<article class="blog-article blog-article--feature">
+  <header class="blog-hero">
+    <div class="blog-hero__content">
+      <p class="blog-hero__kicker">Open Science Labs Blog</p>
+      <h1>{{ title }}</h1>
 
-  <!-- Meta row -->
-  <div class="post_meta">
-    <span class="meta_item">
-      <svg class="icon" aria-hidden="true"><use xlink:href="#author"/></svg>
-      <span class="author_name">
-        {{ ", ".join(page.meta["authors"]) if "authors" in page.meta else "" }}
-      </span>
-    </span>
+      <div class="post_meta">
+        {% if "authors" in page.meta %}
+        <span class="meta_item">
+          <svg class="icon" aria-hidden="true"><use xlink:href="#author"/></svg>
+          <span class="author_name">{{ ", ".join(page.meta["authors"]) }}</span>
+        </span>
+        {% endif %}
 
-    {% if "date" in page.meta %}
-    <span class="meta_item">
-      <svg class="icon" aria-hidden="true"><use xlink:href="#calendar"/></svg>
-      <time class="post_date">{{ page.meta["date"].strftime('%b %-d, %Y') }}</time>
-    </span>
+        {% if "date" in page.meta %}
+        <span class="meta_item">
+          <svg class="icon" aria-hidden="true"><use xlink:href="#calendar"/></svg>
+          <time class="post_date" datetime="{{ page.meta["date"].strftime('%Y-%m-%d') }}">
+            {{ page.meta["date"].strftime('%b %-d, %Y') }}
+          </time>
+        </span>
+        {% endif %}
+      </div>
+
+      {% if show_tags and "tags" in page.meta %}
+        <div class="post_tags">
+          {% for tag in page.meta["tags"] %}
+            <a href="#{{ tag }}" title="{{ tag }}" class="post_tag button button_translucent">{{ tag }}</a>
+          {% endfor %}
+        </div>
+      {% endif %}
+    </div>
+
+    {% if slug and thumbnail %}
+    <figure class="blog-hero__media">
+      <img loading="lazy" decoding="async"
+           src="/blog/{{ slug }}{{ thumbnail }}"
+           alt="{{ title }}">
+    </figure>
     {% endif %}
+  </header>
 
-    <!-- Share -->
-    <div class="post_share">
-      <span class="share_label">Share it:</span>
-      <a href="https://twitter.com/intent/tweet?text={{ page.meta['title'] }}&url={{ page.canonical_url or url }}&tw_p=tweetbutton"
-         class="twitter" title="Share on X / Twitter" target="_blank" rel="nofollow">
+  <div class="blog-article__shell">
+    <aside class="blog-share-panel" aria-label="Share this post">
+      <span>Share</span>
+      <a href="https://twitter.com/intent/tweet?text={{ title }}&url={{ page.canonical_url or url }}&tw_p=tweetbutton"
+         class="twitter" title="Share on X / Twitter" target="_blank" rel="nofollow noopener">
         <svg class="icon" aria-hidden="true"><use xlink:href="#twitter"/></svg>
       </a>
-      <a href="https://www.facebook.com/sharer.php?u={{ page.canonical_url or url }}&t={{ page.meta['title'] }}"
-         class="facebook" title="Share on Facebook" target="_blank" rel="nofollow">
+      <a href="https://www.facebook.com/sharer.php?u={{ page.canonical_url or url }}&t={{ title }}"
+         class="facebook" title="Share on Facebook" target="_blank" rel="nofollow noopener">
         <svg class="icon" aria-hidden="true"><use xlink:href="#facebook"/></svg>
       </a>
       <a href="#linkedinshare" id="linkedinshare" class="linkedin" title="Share on LinkedIn" rel="nofollow">
@@ -42,54 +64,11 @@ <h1 class="post-title">
       <a href="{{ page.canonical_url or url }}" title="Copy link" class="link link_yank">
         <svg class="icon" aria-hidden="true"><use xlink:href="#copy"/></svg>
       </a>
-    </div>
+    </aside>
 
-    {% if show_tags and "tags" in page.meta %}
-      <div class="post_tags">
-        {% for tag in page.meta["tags"] %}
-          <a href="#{{ tag }}" title="{{ tag }}" class="post_tag button button_translucent">{{ tag }}</a>
-        {% endfor %}
-      </div>
-    {% endif %}
-  </div>
-
-  <!-- Hero image -->
-  <div class="excerpt_thumbnail my-3">
-    <figure class="mb-3">
-      <picture>
-        <img loading="lazy" decoding="async"
-             class="image_figure image_thumbnail image_internal image_unprocessed"
-             src="/blog/{{ page.meta['slug'] }}{{ page.meta['thumbnail'] }}"
-             alt="{{ page.meta['title'] }}">
-      </picture>
-    </figure>
-  </div>
-
-  <!-- Article body -->
-  <div class="post_body">
-    {{ page.content }}
-  </div>
-</div>
-
-{# Related: show other blog pages #}
-{% for nav_item in nav %}
-  {% if nav_item.title == "Blog" and nav_item.children %}
-    <div class="posts mt-5">
-      {% for sub_nav_item in nav_item.children if sub_nav_item.title != "main" %}
-        <article>
-          <a href="{{ sub_nav_item.url|url }}" class="image">
-            <img src="https://picsum.photos/id/{{ loop.index }}/400/200"
-                 alt="{{ sub_nav_item.title }}" loading="lazy" decoding="async" width="400" height="200" />
-          </a>
-          <h3>{{ sub_nav_item.title }}</h3>
-          <p>{{ sub_nav_item.summary }}</p>
-          <ul class="actions">
-            <li><a href="{{ sub_nav_item.url|url }}" class="button">Read</a></li>
-          </ul>
-        </article>
-      {% endfor %}
+    <div class="post_body osl-markdown">
+      {{ page.content }}
     </div>
-  {% endif %}
-{% endfor %}
-
-{% endblock content_inner %}
+  </div>
+</article>
+{% endblock content %}
diff --git a/theme/css/base.css b/theme/css/base.css
index d15fb77b..100fcf48 100644
--- a/theme/css/base.css
+++ b/theme/css/base.css
@@ -1,10 +1,38 @@
 /* Reset & base layout */
+@font-face{
+  font-family: "Metropolis";
+  font-style: normal;
+  font-weight: 400;
+  src: url("../fonts/Metropolis-Regular.woff2") format("woff2"),
+       url("../fonts/Metropolis-Regular.woff") format("woff");
+  font-display: swap;
+}
+@font-face{
+  font-family: "Metropolis";
+  font-style: normal;
+  font-weight: 600;
+  src: url("../fonts/Metropolis-SemiBold.woff2") format("woff2"),
+       url("../fonts/Metropolis-SemiBold.woff") format("woff");
+  font-display: swap;
+}
+@font-face{
+  font-family: "Metropolis";
+  font-style: normal;
+  font-weight: 800;
+  src: url("../fonts/Metropolis-ExtraBold.woff2") format("woff2"),
+       url("../fonts/Metropolis-ExtraBold.woff") format("woff");
+  font-display: swap;
+}
+
 * { box-sizing: border-box; -webkit-appearance: none; }
 html, body { min-height: 100%; }
 html { scroll-padding-top: 4.5rem; }
 body{
   background: var(--bg);
   color: var(--fg);
+  font-family: "Metropolis", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-size: 1rem;
+  line-height: 1.65;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   position: relative;
@@ -24,10 +52,21 @@ body::before{
 /* Typography */
 a{ color: var(--brand); text-decoration: none; }
 a:hover{ color: var(--brand-2); }
-h1,h2,h3,h4,h5,h6{ font-weight: 300; line-height: 1.35; margin: 15px 0 5px; }
-h1{ font-size: 175%; font-weight: 400; }
-h2{ font-size: 150%; } h3{ font-size: 130%; } h4{ font-size: 120%; } h5{ font-size: 110%; } h6{ font-size: 100%; }
-p{ padding: .8rem 0 0 0; }
+h1,h2,h3,h4,h5,h6{
+  color: var(--heading);
+  font-weight: 800;
+  letter-spacing: -.025em;
+  line-height: 1.15;
+  margin: 1.6rem 0 .75rem;
+}
+h1{ font-size: clamp(2.15rem, 5vw, 4.2rem); }
+h2{ font-size: clamp(1.55rem, 3vw, 2.35rem); }
+h3{ font-size: clamp(1.22rem, 2vw, 1.55rem); }
+h4{ font-size: 1.15rem; }
+h5{ font-size: 1.05rem; }
+h6{ font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; }
+p{ margin: 0 0 1rem; padding: 0; }
+strong{ font-weight: 800; color: color-mix(in oklab, var(--fg) 88%, var(--heading)); }
 
 /* Media */
 img, svg{ max-width: 100%; height: auto; vertical-align: middle; }
diff --git a/theme/css/blog.css b/theme/css/blog.css
index 2cccce0d..5635dcea 100644
--- a/theme/css/blog.css
+++ b/theme/css/blog.css
@@ -42,17 +42,17 @@
 .excerpt{
   display: flex;                 /* keep thumbnail on top, body below */
   flex-direction: column;
-  border: 1px solid rgba(255,255,255,.08);
+  border: 1px solid var(--border, rgba(255,255,255,.08));
   border-radius: var(--radius, 16px);
-  background: rgba(255,255,255,.04);
-  box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,.25));
+  background: var(--surface, rgba(255,255,255,.04));
+  box-shadow: var(--shadow-card, 0 10px 30px rgba(0,0,0,.25));
   overflow: hidden;
   transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
 }
 .excerpt:hover{
   transform: translateY(-2px);
-  border-color: rgba(255,255,255,.14);
-  background: rgba(255,255,255,.05);
+  border-color: color-mix(in oklab, var(--brand-strong, #3b82f6) 35%, var(--border));
+  background: var(--surface-solid, rgba(255,255,255,.05));
 }
 
 /* Thumbnail */
@@ -60,7 +60,7 @@
   display: block;
   position: relative;
   aspect-ratio: 16 / 9;
-  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
+  background: var(--surface-muted);
 }
 .post-thumb img{
   width: 100%;
@@ -108,13 +108,13 @@
   font-size: .8rem;
   padding: .25rem .5rem;
   border-radius: .5rem;
-  border: 1px solid rgba(255,255,255,.16);
+  border: 1px solid var(--border, rgba(255,255,255,.16));
   color: var(--fg);
   text-decoration: none;
 }
 .post_tag:hover{
-  background: rgba(255,255,255,.08);
-  border-color: rgba(255,255,255,.22);
+  background: var(--surface-muted, rgba(255,255,255,.08));
+  border-color: var(--border-strong, rgba(255,255,255,.22));
 }
 
 /* Description (clamp to keep cards even-ish) */
@@ -158,6 +158,134 @@
 }
 
 /* ===== Blog post page ===== */
+.blog-article--feature{
+  width: min(1120px, 100%);
+  margin: 0 auto;
+}
+
+.blog-hero{
+  overflow: hidden;
+  display: grid;
+  grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr);
+  gap: clamp(1.1rem, 3vw, 2rem);
+  align-items: stretch;
+  margin-bottom: clamp(1.2rem, 3vw, 2rem);
+  padding: clamp(1.1rem, 3vw, 1.45rem);
+  border: 1px solid var(--border);
+  border-radius: clamp(1.35rem, 4vw, 2.2rem);
+  background:
+    radial-gradient(circle at 14% 10%, rgba(255,170,0,.18), transparent 18rem),
+    linear-gradient(135deg, var(--surface), var(--surface-muted));
+  box-shadow: var(--shadow-soft);
+}
+
+.blog-hero__content{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: clamp(1rem, 3vw, 2rem);
+}
+
+.blog-hero__kicker{
+  display: inline-flex;
+  align-items: center;
+  gap: .5rem;
+  margin: 0 0 .8rem;
+  color: var(--brand-strong);
+  font-size: .78rem;
+  font-weight: 800;
+  letter-spacing: .12em;
+  text-transform: uppercase;
+}
+
+.blog-hero__kicker::before{
+  content: "";
+  width: .55rem;
+  height: .55rem;
+  border-radius: 999px;
+  background: var(--accent);
+  box-shadow: 0 0 0 6px rgba(255,170,0,.16);
+}
+
+.blog-hero h1{
+  margin: 0;
+  font-size: clamp(2.1rem, 5vw, 4.25rem);
+  line-height: 1;
+}
+
+.blog-hero .post_meta{
+  margin: 1rem 0 0;
+}
+
+.blog-hero .post_tags{
+  margin-top: 1rem;
+}
+
+.blog-hero__media{
+  overflow: hidden;
+  min-height: 100%;
+  margin: 0;
+  border-radius: 1.45rem;
+  background: var(--surface-muted);
+}
+
+.blog-hero__media img{
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-height: 320px;
+  margin: 0;
+  object-fit: cover;
+}
+
+.blog-article__shell{
+  display: grid;
+  grid-template-columns: 76px minmax(0, 820px);
+  gap: clamp(1rem, 3vw, 1.5rem);
+  justify-content: center;
+  align-items: start;
+}
+
+.blog-share-panel{
+  position: sticky;
+  top: 5.8rem;
+  display: grid;
+  gap: .45rem;
+  justify-items: center;
+  padding: .75rem .5rem;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: var(--surface);
+  box-shadow: var(--shadow-card);
+}
+
+.blog-share-panel span{
+  color: var(--muted);
+  font-size: .7rem;
+  font-weight: 800;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+  writing-mode: vertical-rl;
+}
+
+.blog-share-panel a{
+  display: grid;
+  place-items: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 999px;
+  color: var(--brand-strong);
+}
+
+.blog-share-panel a:hover{
+  background: var(--surface-muted);
+}
+
+.blog-share-panel .icon{
+  width: 1rem;
+  height: 1rem;
+}
+
 .blog-article .post-title {
   margin: 0 0 .25rem 0;
 }
@@ -232,3 +360,25 @@
   /* Reserve space to reduce CLS when dimensions unknown */
   min-height: 1px;
 }
+
+@media (max-width: 900px){
+  .blog-hero{
+    grid-template-columns: 1fr;
+  }
+
+  .blog-article__shell{
+    grid-template-columns: 1fr;
+  }
+
+  .blog-share-panel{
+    position: static;
+    display: flex;
+    justify-content: flex-start;
+    width: fit-content;
+    border-radius: 999px;
+  }
+
+  .blog-share-panel span{
+    writing-mode: initial;
+  }
+}
diff --git a/theme/css/content.css b/theme/css/content.css
index e2202885..48a33876 100644
--- a/theme/css/content.css
+++ b/theme/css/content.css
@@ -42,3 +42,555 @@ blockquote{
   display: grid; place-items: center;
 }
 .to_top .icon { width: 24px; height: 24px; }
+
+/* ───────── Polished non-home page system ───────── */
+.osl-page{
+  position: relative;
+  isolation: isolate;
+}
+
+.osl-page-shell{
+  width: min(1040px, 100%);
+  margin: 0 auto;
+}
+
+.osl-page--directory .osl-page-shell,
+.osl-page--events .osl-page-shell,
+.osl-page--team .osl-page-shell{
+  width: min(1120px, 100%);
+}
+
+.osl-page-hero{
+  overflow: hidden;
+  position: relative;
+  margin-bottom: clamp(1.2rem, 3vw, 2rem);
+  padding: clamp(2rem, 5vw, 3.6rem);
+  border: 1px solid var(--border);
+  border-radius: clamp(1.35rem, 4vw, 2.2rem);
+  color: #fff;
+  background:
+    radial-gradient(circle at 14% 18%, rgba(255,170,0,.28), transparent 18rem),
+    radial-gradient(circle at 88% 12%, rgba(92,200,255,.28), transparent 24rem),
+    linear-gradient(135deg, #0f172a 0%, #12394c 48%, #087fa8 100%);
+  box-shadow: var(--shadow-soft);
+}
+
+.osl-page-hero::before{
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background-image:
+    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
+  background-size: 48px 48px;
+  mask-image: linear-gradient(90deg, rgba(0,0,0,.55), transparent 78%);
+}
+
+.osl-page-hero::after{
+  content: "";
+  position: absolute;
+  right: clamp(1.2rem, 4vw, 3rem);
+  bottom: clamp(1rem, 3vw, 2.4rem);
+  width: clamp(5rem, 18vw, 11rem);
+  aspect-ratio: 1;
+  border-radius: 999px;
+  background:
+    linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.04));
+  box-shadow: inset 0 0 0 1px rgba(255,255,255,.20);
+  opacity: .55;
+}
+
+.osl-page-hero__content{
+  position: relative;
+  z-index: 1;
+  max-width: 820px;
+}
+
+.osl-page-kicker,
+.directory-eyebrow{
+  display: inline-flex;
+  align-items: center;
+  gap: .5rem;
+  margin: 0 0 .8rem;
+  color: #b8f0ff;
+  font-size: .78rem;
+  font-weight: 800;
+  letter-spacing: .12em;
+  line-height: 1.2;
+  text-transform: uppercase;
+}
+
+.osl-page-kicker::before,
+.directory-eyebrow::before{
+  content: "";
+  width: .55rem;
+  height: .55rem;
+  border-radius: 999px;
+  background: var(--accent);
+  box-shadow: 0 0 0 6px rgba(255,170,0,.16);
+}
+
+.osl-page-hero h1{
+  max-width: 880px;
+  margin: 0;
+  padding: 0;
+  color: #fff;
+  font-size: clamp(2.35rem, 6vw, 4.85rem);
+  font-weight: 800;
+  letter-spacing: -.065em;
+  line-height: .96;
+}
+
+.osl-page-description{
+  max-width: 760px;
+  margin: 1.1rem 0 0;
+  color: rgba(255,255,255,.84);
+  font-size: clamp(1.03rem, 1.6vw, 1.22rem);
+  line-height: 1.65;
+}
+
+.osl-markdown{
+  color: var(--fg);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: clamp(1.2rem, 3vw, 1.8rem);
+  box-shadow: var(--shadow-card);
+  padding: clamp(1.25rem, 4vw, 2.65rem);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+}
+
+.osl-markdown > h1:first-child{
+  display: none;
+}
+
+.osl-markdown > .pt-5:first-child{
+  display: none;
+}
+
+.osl-markdown > :first-child{
+  margin-top: 0;
+}
+
+.osl-markdown > :last-child{
+  margin-bottom: 0;
+}
+
+.osl-markdown h2{
+  margin-top: 2.25rem;
+  padding-top: 1.55rem;
+  border-top: 1px solid var(--border);
+}
+
+.osl-markdown h2:first-child,
+.osl-markdown > h1:first-child + h2{
+  margin-top: 0;
+  padding-top: 0;
+  border-top: 0;
+}
+
+.osl-markdown h3{
+  color: color-mix(in oklab, var(--heading) 88%, var(--brand-strong));
+}
+
+.osl-markdown p,
+.osl-markdown li{
+  color: color-mix(in oklab, var(--fg) 86%, var(--muted));
+}
+
+.osl-markdown p{
+  font-size: 1.02rem;
+}
+
+.osl-markdown ul,
+.osl-markdown ol{
+  margin: 1rem 0 1.25rem;
+  padding-left: 1.25rem;
+}
+
+.osl-markdown li{
+  margin: .45rem 0;
+  padding-left: .15rem;
+}
+
+.osl-markdown a:not(.btn):not(.post_tag):not(.post-thumb):not(.excerpt_more):not(.icon-btn):not(.osl-inline-button){
+  color: var(--brand-strong);
+  font-weight: 700;
+  text-decoration: underline;
+  text-decoration-color: color-mix(in oklab, var(--brand-strong) 30%, transparent);
+  text-underline-offset: .18em;
+}
+
+.osl-markdown a:hover{
+  text-decoration-color: currentColor;
+}
+
+.osl-markdown .btn,
+.osl-inline-button{
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: .45rem;
+  width: fit-content;
+  margin: .35rem .4rem .7rem 0;
+  padding: .68rem 1rem;
+  border: 1px solid color-mix(in oklab, var(--brand-strong) 35%, transparent);
+  border-radius: 999px;
+  background: linear-gradient(135deg, var(--brand-strong), var(--brand-2));
+  box-shadow: 0 14px 30px rgba(8,127,168,.18);
+  color: #fff !important;
+  font-weight: 800;
+  line-height: 1.1;
+  text-decoration: none !important;
+  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
+}
+
+.osl-markdown .btn:hover,
+.osl-inline-button:hover{
+  transform: translateY(-1px);
+  box-shadow: 0 18px 38px rgba(8,127,168,.24);
+}
+
+.osl-inline-button--subtle{
+  background: var(--surface-muted);
+  border-color: var(--border);
+  box-shadow: none;
+  color: var(--brand-strong) !important;
+}
+
+.osl-inline-button--subtle:hover{
+  border-color: color-mix(in oklab, var(--brand-strong) 38%, var(--border));
+  box-shadow: 0 12px 28px rgba(15,23,42,.08);
+}
+
+.osl-markdown img{
+  display: block;
+  max-width: 100%;
+  margin: 1.4rem auto;
+  border-radius: 1.1rem;
+  box-shadow: 0 12px 34px rgba(15,23,42,.10);
+}
+
+.osl-markdown blockquote{
+  margin: 1.4rem 0;
+  padding: 1rem 1.2rem;
+  border: 1px solid var(--border);
+  border-left: 5px solid var(--brand-strong);
+  border-radius: 1rem;
+  background: var(--surface-muted);
+  color: var(--fg);
+}
+
+.osl-markdown table{
+  overflow: hidden;
+  border-radius: 1rem;
+  box-shadow: 0 0 0 1px var(--border);
+}
+
+.osl-markdown .post-grid{
+  margin: 1rem 0 0;
+  padding: 0;
+}
+
+.osl-markdown .blog-index > .blog-title{
+  display: none;
+}
+
+.osl-markdown .post-grid li{
+  margin: 0;
+  padding: 0;
+}
+
+/* Sidebar documentation pages */
+.osl-page-layout{
+  display: grid;
+  grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
+  gap: clamp(1rem, 2.5vw, 1.5rem);
+  align-items: start;
+}
+
+.osl-side-nav{
+  position: sticky;
+  top: 5.8rem;
+  display: grid;
+  gap: .35rem;
+  max-height: calc(100vh - 7rem);
+  overflow: auto;
+  padding: .9rem;
+  border: 1px solid var(--border);
+  border-radius: 1.25rem;
+  background: var(--surface);
+  box-shadow: var(--shadow-card);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+}
+
+.osl-side-nav__title{
+  margin: 0 0 .35rem;
+  padding: 0 .55rem .55rem;
+  border-bottom: 1px solid var(--border);
+  color: var(--muted);
+  font-size: .76rem;
+  font-weight: 800;
+  letter-spacing: .1em;
+  text-transform: uppercase;
+}
+
+.osl-side-nav nav,
+.osl-side-nav__group{
+  display: grid;
+  gap: .18rem;
+}
+
+.osl-side-nav__group{
+  margin-top: .25rem;
+}
+
+.osl-side-nav__group-title{
+  padding: .65rem .65rem .25rem;
+  color: var(--heading);
+  font-size: .82rem;
+  font-weight: 800;
+}
+
+.osl-side-nav a{
+  display: block;
+  padding: .56rem .68rem;
+  border-radius: .8rem;
+  color: color-mix(in oklab, var(--fg) 78%, var(--muted));
+  font-size: .92rem;
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+.osl-side-nav a:hover,
+.osl-side-nav a.active{
+  background: var(--surface-muted);
+  color: var(--brand-strong);
+}
+
+/* Directory sections */
+.directory-heading{
+  margin: clamp(1.35rem, 4vw, 2.6rem) 0 1rem;
+}
+
+.directory-heading--inside{
+  margin-top: 1rem;
+}
+
+.directory-heading .directory-eyebrow{
+  color: var(--brand-strong);
+}
+
+.directory-heading h2{
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.project-grid,
+.event-grid{
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
+  gap: 1rem;
+}
+
+.project-card,
+.event-card,
+.empty-state{
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: 1.35rem;
+  background: var(--surface);
+  box-shadow: var(--shadow-card);
+}
+
+.project-card{
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+  padding: 1.15rem;
+  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
+}
+
+.project-card:hover,
+.event-card:hover{
+  transform: translateY(-2px);
+  border-color: color-mix(in oklab, var(--brand-strong) 38%, var(--border));
+  box-shadow: 0 22px 52px rgba(15,23,42,.12);
+}
+
+.project-card__top{
+  display: grid;
+  gap: .7rem;
+}
+
+.project-card h3{
+  margin: 0;
+  font-size: 1.35rem;
+}
+
+.project-card h3 a{
+  color: var(--heading);
+}
+
+.project-card h3 a:hover{
+  color: var(--brand-strong);
+}
+
+.project-badge{
+  width: fit-content;
+  padding: .32rem .62rem;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: var(--surface-muted);
+  color: var(--brand-strong);
+  font-size: .72rem;
+  font-weight: 800;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+}
+
+.project-badge--incubated{
+  background: var(--surface-warm);
+  color: #9a5b00;
+}
+
+html[data-mode="dim"] .project-badge--incubated{
+  color: #ffd166;
+}
+
+.project-card__description{
+  margin: .85rem 0 1.1rem;
+  color: color-mix(in oklab, var(--fg) 82%, var(--muted));
+}
+
+.project-meta{
+  display: grid;
+  gap: .65rem;
+  margin: auto 0 1rem;
+}
+
+.project-meta div{
+  display: grid;
+  gap: .12rem;
+}
+
+.project-meta dt{
+  color: var(--muted);
+  font-size: .72rem;
+  font-weight: 800;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+}
+
+.project-meta dd{
+  margin: 0;
+  color: var(--fg);
+  font-weight: 700;
+}
+
+.project-card__footer{
+  display: flex;
+  justify-content: flex-start;
+}
+
+/* Events */
+.event-section{
+  margin-top: clamp(1.4rem, 4vw, 2.8rem);
+}
+
+.event-card{
+  display: grid;
+  grid-template-rows: auto 1fr;
+  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
+}
+
+.event-card__media{
+  display: grid;
+  min-height: 180px;
+  background:
+    linear-gradient(135deg, color-mix(in oklab, var(--brand-strong) 12%, transparent), transparent),
+    var(--surface-muted);
+}
+
+.event-card__media a{
+  display: grid;
+}
+
+.event-card__media img{
+  width: 100%;
+  height: 100%;
+  min-height: 180px;
+  max-height: 250px;
+  object-fit: cover;
+}
+
+.event-card__body{
+  display: flex;
+  flex-direction: column;
+  padding: 1.15rem;
+}
+
+.event-card__date{
+  margin: 0 0 .45rem;
+  color: var(--brand-strong);
+  font-size: .82rem;
+  font-weight: 800;
+  letter-spacing: .04em;
+  text-transform: uppercase;
+}
+
+.event-card h3{
+  margin: 0 0 .55rem;
+  font-size: 1.3rem;
+}
+
+.event-card__body p:not(.event-card__date){
+  color: color-mix(in oklab, var(--fg) 84%, var(--muted));
+}
+
+.event-card__body .osl-inline-button{
+  margin-top: auto;
+}
+
+.empty-state{
+  padding: clamp(1.25rem, 3vw, 2rem);
+  background:
+    radial-gradient(circle at 10% 0%, color-mix(in oklab, var(--brand-strong) 14%, transparent), transparent 16rem),
+    var(--surface);
+}
+
+.empty-state h3{
+  margin-top: 0;
+}
+
+@media (max-width: 900px){
+  .osl-page-layout{
+    grid-template-columns: 1fr;
+  }
+
+  .osl-side-nav{
+    position: static;
+    max-height: none;
+  }
+}
+
+@media (max-width: 640px){
+  .content-inner{
+    padding-top: 1.2rem;
+  }
+
+  .osl-page-hero{
+    padding: 1.45rem;
+  }
+
+  .osl-page-hero::after{
+    display: none;
+  }
+
+  .osl-markdown{
+    padding: 1.1rem;
+  }
+}
diff --git a/theme/css/home.css b/theme/css/home.css
index cae8ab4a..eef10409 100644
--- a/theme/css/home.css
+++ b/theme/css/home.css
@@ -19,21 +19,29 @@
   --hero-overlay: linear-gradient(to bottom right, rgba(0,0,0,.60), rgba(0,0,0,.45));
 }
 .home-hero .eyebrow{
+  color: rgba(255,255,255,.9);
   letter-spacing: .08em;
   text-transform: uppercase;
   opacity: .85;
+  text-shadow: 0 2px 14px rgba(0,0,0,.45);
 }
 .home-hero h1{
+  color: #fff;
   text-wrap: balance;
+  text-shadow: 0 3px 22px rgba(0,0,0,.55);
 }
 .home-hero .lead{
+  color: rgba(255,255,255,.94);
   max-width: 52ch;
   opacity: .9;
+  text-shadow: 0 2px 16px rgba(0,0,0,.48);
 }
 .hero-bullets{
   list-style: none; padding: 0; margin: 0;
   display: flex; flex-wrap: wrap; gap: .75rem 1.25rem;
+  color: rgba(255,255,255,.94);
   opacity: .95;
+  text-shadow: 0 2px 14px rgba(0,0,0,.42);
 }
 .hero-bullets .dot{
   display: inline-block; width: .5rem; height: .5rem; border-radius: 50%;
diff --git a/theme/css/partners.css b/theme/css/partners.css
index 3a148237..c216c335 100644
--- a/theme/css/partners.css
+++ b/theme/css/partners.css
@@ -2,9 +2,9 @@
 
 :root{
   --pc-text: var(--fg, #e8eaf0);
-  --pc-bg: rgba(16,18,27,.6);
-  --pc-border: rgba(255,255,255,.12);
-  --pc-hover: rgba(255,255,255,.06);
+  --pc-bg: var(--surface, rgba(16,18,27,.6));
+  --pc-border: var(--border, rgba(255,255,255,.12));
+  --pc-hover: var(--surface-muted, rgba(255,255,255,.06));
 }
 [data-bs-theme="light"]{
   --pc-text: #111827;
@@ -16,10 +16,10 @@
 .partners-grid .partner-card{
   background: var(--pc-bg);
   border: 1px solid var(--pc-border);
-  border-radius: 1rem;
+  border-radius: 1.35rem;
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
-  box-shadow: 0 10px 24px rgba(0,0,0,.08);
+  box-shadow: var(--shadow-card, 0 10px 24px rgba(0,0,0,.08));
   transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
   position: relative;
 }
@@ -74,7 +74,7 @@
   display: flex; align-items: center; justify-content: center;
   border-bottom: 1px dashed var(--pc-border);
   background: color-mix(in oklab, var(--pc-bg) 92%, transparent);
-  border-top-left-radius: 1rem; border-top-right-radius: 1rem;
+  border-top-left-radius: 1.35rem; border-top-right-radius: 1.35rem;
 }
 
 /* Logos: clamp both height and width so tall/wide marks don’t dominate */
@@ -82,6 +82,9 @@
   display: block;
   object-fit: contain;
   width: auto;
+  margin: 0;
+  border-radius: 0;
+  box-shadow: none;
   max-width: 80%;                /* prevent super-wide brands from touching edges */
   max-height: clamp(44px, 8vw, 78px); /* scale responsively but never huge */
   transform: scale(var(--logo-scale, 1));  /* per-partner fine-tune (see below) */
diff --git a/theme/css/team.css b/theme/css/team.css
index 497bf0eb..dc4a2512 100644
--- a/theme/css/team.css
+++ b/theme/css/team.css
@@ -1,56 +1,129 @@
-/* ===== Team page (scoped) ===== */
-.team-grid .card{
-  border-radius: 1rem;
-  border: 1px solid var(--card-border, rgba(255,255,255,.12));
-  background: var(--card-bg, rgba(20,24,33,.6));
+/* ===== Team directory ===== */
+.team-directory{
+  display: grid;
+  gap: clamp(1.6rem, 4vw, 3rem);
+}
+
+.team-group{
+  display: grid;
+  gap: 1rem;
+}
+
+.team-grid{
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
+  gap: 1rem;
+}
+
+.team-card{
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+  border: 1px solid var(--border);
+  border-radius: 1.35rem;
+  background: var(--surface);
+  box-shadow: var(--shadow-card);
+  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
+}
+
+.team-card:hover{
+  transform: translateY(-2px);
+  border-color: color-mix(in oklab, var(--brand-strong) 38%, var(--border));
+  box-shadow: 0 22px 52px rgba(15,23,42,.12);
 }
-[data-bs-theme="light"] .team-grid .card{
-  background: #fff;
-  border-color: rgba(0,0,0,.08);
+
+.team-card__media{
+  position: relative;
+  overflow: hidden;
+  display: grid;
+  place-items: center;
+  aspect-ratio: 4 / 3;
+  background:
+    radial-gradient(circle at 20% 0%, color-mix(in oklab, var(--brand-strong) 24%, transparent), transparent 16rem),
+    var(--surface-muted);
 }
 
-.team-grid .card-img-top{
-  display:block;
-  width:100%;
-  aspect-ratio: 4 / 3;       /* keeps consistent header area */
-  object-fit: cover;         /* crops tall/wide headshots neatly */
+.team-card__media img{
+  display: block;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  object-fit: cover;
 }
 
-.team-grid .card-title{
-  font-size: 1.15rem;
-  margin-bottom: .25rem;
+.team-card__avatar{
+  display: grid;
+  place-items: center;
+  width: 7rem;
+  height: 7rem;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: var(--surface-solid);
+  color: var(--brand-strong);
+  font-size: 3rem;
+  font-weight: 800;
 }
 
-/* Social icon row */
-.team-grid .social{
+.team-card__body{
   display: flex;
-  align-items: center;
-  gap: .5rem;
+  flex: 1;
+  flex-direction: column;
+  padding: 1.1rem;
 }
 
-/* Tight, consistent SVG icon sizing + inherit theme color */
-.team-grid .social .icon{
-  width: 22px;               /* <- right here: fix HUGE icon */
-  height: 22px;
-  display: inline-block;
-  vertical-align: middle;
-  fill: currentColor;        /* ensure symbols use text color */
+.team-card__header{
+  display: flex;
+  gap: .75rem;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.team-card h3{
+  margin: 0;
+  font-size: 1.18rem;
+  letter-spacing: -.02em;
+}
+
+.team-card p{
+  margin: .65rem 0 0;
+  color: color-mix(in oklab, var(--fg) 84%, var(--muted));
+  font-size: .96rem;
 }
-.team-grid .social a{
-  color: var(--fg, #e6e9f0);
-  opacity: .85;
-  text-decoration: none;
+
+.team-card__social{
+  display: inline-grid;
+  flex: 0 0 auto;
+  place-items: center;
+  width: 2.15rem;
+  height: 2.15rem;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: var(--surface-muted);
+  color: var(--brand-strong);
 }
-[data-bs-theme="light"] .team-grid .social a{
-  color: #1f2937;
+
+.team-card__social:hover{
+  background: var(--brand-strong);
+  color: #fff;
 }
-.team-grid .social a:hover{
-  color: var(--brand, #3b82f6);
-  opacity: 1;
+
+.team-card__social .icon{
+  width: 1.1rem;
+  height: 1.1rem;
+}
+
+.team-card__sponsor{
+  display: grid;
+  gap: .35rem;
+  margin-top: auto;
+  padding-top: 1rem;
 }
 
-/* Sponsor iframe wrapper spacing */
-.team-grid .sponsor{
-  margin-top: .5rem;
+.team-card__sponsor span{
+  color: var(--muted);
+  font-size: .75rem;
+  font-weight: 800;
+  letter-spacing: .08em;
+  text-transform: uppercase;
 }
diff --git a/theme/css/tokens.css b/theme/css/tokens.css
index 431e00fb..04c41b72 100644
--- a/theme/css/tokens.css
+++ b/theme/css/tokens.css
@@ -4,9 +4,22 @@
   --bg: #f8fafc;
   --fg: #101218;
   --muted: #5f6b7a;
+  --heading: #0f172a;
 
   --brand: #5cc8ff;
   --brand-2: #8a7dff;
+  --brand-strong: #087fa8;
+  --accent: #ffaa00;
+
+  /* Content surfaces */
+  --surface: rgba(255,255,255,.88);
+  --surface-solid: #ffffff;
+  --surface-muted: #eef7fb;
+  --surface-warm: #fff8e7;
+  --border: rgba(15,23,42,.10);
+  --border-strong: rgba(15,23,42,.16);
+  --shadow-soft: 0 18px 60px rgba(15,23,42,.10);
+  --shadow-card: 0 16px 38px rgba(15,23,42,.08);
 
   /* Nav / surfaces */
   --nav-bg: rgba(255,255,255,.75);
@@ -51,6 +64,17 @@ html[data-mode="dim"]{
   --bg: #0b0d12;
   --fg: #e7ecf4;
   --muted: #a7b0c0;
+  --heading: #f8fafc;
+  --brand-strong: #76d8ff;
+  --accent: #ffc94a;
+  --surface: rgba(17,24,39,.76);
+  --surface-solid: #111827;
+  --surface-muted: rgba(255,255,255,.07);
+  --surface-warm: rgba(255,201,74,.10);
+  --border: rgba(255,255,255,.12);
+  --border-strong: rgba(255,255,255,.18);
+  --shadow-soft: 0 22px 70px rgba(0,0,0,.34);
+  --shadow-card: 0 18px 48px rgba(0,0,0,.28);
 
   --nav-bg: rgba(14,18,26,.55);
   --nav-border: rgba(255,255,255,.06);
@@ -76,6 +100,17 @@ html[data-mode="dim"]{
     --bg: #0b0d12;
     --fg: #e7ecf4;
     --muted: #a7b0c0;
+    --heading: #f8fafc;
+    --brand-strong: #76d8ff;
+    --accent: #ffc94a;
+    --surface: rgba(17,24,39,.76);
+    --surface-solid: #111827;
+    --surface-muted: rgba(255,255,255,.07);
+    --surface-warm: rgba(255,201,74,.10);
+    --border: rgba(255,255,255,.12);
+    --border-strong: rgba(255,255,255,.18);
+    --shadow-soft: 0 22px 70px rgba(0,0,0,.34);
+    --shadow-card: 0 18px 48px rgba(0,0,0,.28);
 
     --nav-bg: rgba(14,18,26,.55);
     --nav-border: rgba(255,255,255,.06);
diff --git a/theme/events.html b/theme/events.html
index 07bca23f..3beb485d 100644
--- a/theme/events.html
+++ b/theme/events.html
@@ -1,74 +1,111 @@
-{% extends "main.html" %}
-
-{% set colors=["", "bg-light"] %}
+{% extends "base.html" %}
 
 {% block content %}
-  {{ page.content }}
-
-  <div class="row">
-    <div class="col-md-12 mx-auto pt-3">
-      {%set upcoming_events = page.meta.get("events", {}).get("upcoming", {}) %}
-      <h2>Upcoming Events</h2>
-      {% for event in upcoming_events %}
+{% set events = page.meta.get("events", {}) %}
+{% set upcoming_events = events.get("upcoming", []) %}
+{% set past_events = events.get("past_events", []) %}
+{% set page_title = page.meta.get("title", page.title) %}
+{% set page_description = page.meta.get("description", "Workshops, talks, study sessions, and community gatherings from Open Science Labs.") %}
 
-      <div class="row {{ colors[loop.index % 2] }}">
-        <div class="col-4 text-center">
-          <a href="{{ event.url }}">
-            <img src="{{ event.thumbnail }}" alt="{{ event.name }}" loading="lazy" decoding="async" />
-          </a>
-        </div>
-        <div class="col-8">
-          <h2>{{ event.name }}</h2>
-          <p>{{ event.description }}</p>
-          <p>
-            From <strong>{{ event.date_start }}</strong> to
-            <strong>{{ event.date_end }}</strong>.
-          </p>
-          <p>
-            <a href="{{ event.url }}" class="button">More information</a>
-          </p>
-        </div>
+<section class="osl-page osl-page--events">
+  <div class="osl-page-shell">
+    <header class="osl-page-hero">
+      <div class="osl-page-hero__content">
+        <p class="osl-page-kicker">Learning together</p>
+        <h1>{{ page_title }}</h1>
+        {% if page_description and page_description != page_title %}
+          <p class="osl-page-description">{{ page_description }}</p>
+        {% endif %}
       </div>
+    </header>
 
-      {% endfor %}
-
-      {% if not upcoming_events %}
-      No upcoming events for now.
-      {% endif %}
-    </div>
-  </div>
+    <article class="osl-markdown">
+      {{ page.content }}
+    </article>
 
-  <div class="row">
-    <div class="col-md-12 mx-auto pt-3">
-      <h2>Past Events</h2>
-      {%set past_events = page.meta.get("events", {}).get("past_events", {}) %}
-      {% for event in past_events %}
+    <section class="event-section" aria-labelledby="upcoming-events">
+      <div class="directory-heading">
+        <p class="directory-eyebrow">What's next</p>
+        <h2 id="upcoming-events">Upcoming Events</h2>
+      </div>
 
-      <div class="row {{ colors[loop.index % 2] }}">
-        <div class="col-4 text-center">
-          <a href="{{ event.url }}">
-            <img src="{{ event.thumbnail }}" alt="{{ event.name }}" loading="lazy" decoding="async" />
-          </a>
-        </div>
-        <div class="col-8">
-          <h2>{{ event.name }}</h2>
-          <p>{{ event.description }}</p>
-          <p>
-            From <strong>{{ event.date_start }}</strong> to
-            <strong>{{ event.date_end }}</strong>.
-          </p>
-          <p>
-            <a href="{{ event.url }}" class="button">More information</a>
-          </p>
-        </div>
+      {% if upcoming_events %}
+      <div class="event-grid">
+        {% for event in upcoming_events %}
+        <article class="event-card event-card--upcoming">
+          <div class="event-card__media">
+            {% if event.url %}
+            <a href="{{ event.url }}" target="_blank" rel="noopener">
+              <img src="{{ event.thumbnail }}" alt="{{ event.name }}" loading="lazy" decoding="async" />
+            </a>
+            {% else %}
+              <img src="{{ event.thumbnail }}" alt="{{ event.name }}" loading="lazy" decoding="async" />
+            {% endif %}
+          </div>
+          <div class="event-card__body">
+            <p class="event-card__date">
+              {{ event.date_start }}{% if event.date_end and event.date_end != event.date_start %} — {{ event.date_end }}{% endif %}
+            </p>
+            <h3>{{ event.name }}</h3>
+            <p>{{ event.description }}</p>
+            {% if event.url %}
+              <a href="{{ event.url }}" class="osl-inline-button" target="_blank" rel="noopener">
+                More information
+              </a>
+            {% endif %}
+          </div>
+        </article>
+        {% endfor %}
       </div>
+      {% else %}
+      <div class="empty-state">
+        <h3>No upcoming events yet</h3>
+        <p>Check back soon or join our community channels to hear about new sessions first.</p>
+      </div>
+      {% endif %}
+    </section>
 
-      {% endfor %}
+    <section class="event-section" aria-labelledby="past-events">
+      <div class="directory-heading">
+        <p class="directory-eyebrow">From the archive</p>
+        <h2 id="past-events">Past Events</h2>
+      </div>
 
-      {% if not past_events %}
-      No past events yet.
+      {% if past_events %}
+      <div class="event-grid">
+        {% for event in past_events %}
+        <article class="event-card">
+          <div class="event-card__media">
+            {% if event.url %}
+            <a href="{{ event.url }}" target="_blank" rel="noopener">
+              <img src="{{ event.thumbnail }}" alt="{{ event.name }}" loading="lazy" decoding="async" />
+            </a>
+            {% else %}
+              <img src="{{ event.thumbnail }}" alt="{{ event.name }}" loading="lazy" decoding="async" />
+            {% endif %}
+          </div>
+          <div class="event-card__body">
+            <p class="event-card__date">
+              {{ event.date_start }}{% if event.date_end and event.date_end != event.date_start %} — {{ event.date_end }}{% endif %}
+            </p>
+            <h3>{{ event.name }}</h3>
+            <p>{{ event.description }}</p>
+            {% if event.url %}
+              <a href="{{ event.url }}" class="osl-inline-button osl-inline-button--subtle" target="_blank" rel="noopener">
+                More information
+              </a>
+            {% endif %}
+          </div>
+        </article>
+        {% endfor %}
+      </div>
+      {% else %}
+      <div class="empty-state">
+        <h3>No past events yet</h3>
+        <p>Past event recordings and notes will appear here when they are available.</p>
+      </div>
       {% endif %}
-    </div>
+    </section>
   </div>
-
+</section>
 {% endblock content %}
diff --git a/theme/main.html b/theme/main.html
index 94d9808c..a7755253 100644
--- a/theme/main.html
+++ b/theme/main.html
@@ -1 +1,27 @@
 {% extends "base.html" %}
+
+{% block content %}
+{% set page_title = page.meta.get("title", page.title) %}
+{% set page_description = page.meta.get("description") %}
+{% set section_label = page.meta.get("section_label", "Open Science Labs") %}
+
+<section class="osl-page">
+  <div class="osl-page-shell">
+    <header class="osl-page-hero">
+      <div class="osl-page-hero__content">
+        <p class="osl-page-kicker">{{ section_label }}</p>
+        <h1>{{ page_title or config.site_name }}</h1>
+        {% if page_description and page_description != page_title %}
+          <p class="osl-page-description">{{ page_description }}</p>
+        {% endif %}
+      </div>
+    </header>
+
+    <article class="osl-markdown">
+      {% block content_inner %}
+        {{ page.content }}
+      {% endblock content_inner %}
+    </article>
+  </div>
+</section>
+{% endblock content %}
diff --git a/theme/partners.html b/theme/partners.html
index 7aa502a0..5746de7c 100644
--- a/theme/partners.html
+++ b/theme/partners.html
@@ -7,6 +7,12 @@
 {% block content_inner %}
 {{ page.content }}
 
+<section class="partners-directory" aria-label="Partner organizations">
+  <div class="directory-heading directory-heading--inside">
+    <p class="directory-eyebrow">{{ page.meta["partners"]|length }} partners</p>
+    <h2>Organizations collaborating with OSL</h2>
+  </div>
+
 <div class="partners-grid row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-4 mt-2">
 
   {% for partner in page.meta["partners"] %}
@@ -55,4 +61,5 @@ <h3 class="h5 partner-title mb-2">
   {% endfor %}
 
 </div>
+</section>
 {% endblock content_inner %}
diff --git a/theme/projects.html b/theme/projects.html
index 6075f814..995a0cf7 100644
--- a/theme/projects.html
+++ b/theme/projects.html
@@ -1,55 +1,87 @@
 {% extends "base.html" %}
-{% set colors=["", "bg-light"] %}
-{% set text_colors=["", "text-secondary"] %}
 
 {% block content %}
-<section>
-  <div class="row pt-2">
-    <div class="col-md-12 mx-auto">
-      {% block content_inner %}
+{% set projects = page.meta.get("projects", []) %}
+{% set page_title = page.meta.get("title", page.title) %}
+{% set page_description = page.meta.get("description", "Explore the open-source projects growing with Open Science Labs.") %}
+
+<section class="osl-page osl-page--directory">
+  <div class="osl-page-shell">
+    <header class="osl-page-hero">
+      <div class="osl-page-hero__content">
+        <p class="osl-page-kicker">Project directory</p>
+        <h1>{{ page_title }}</h1>
+        {% if page_description and page_description != page_title %}
+          <p class="osl-page-description">{{ page_description }}</p>
+        {% endif %}
+      </div>
+    </header>
+
+    <article class="osl-markdown">
       {{ page.content }}
-      {% endblock content_inner %}
-    </div>
-  </div>
+    </article>
+
+    <section class="project-directory" aria-label="Affiliated and incubated projects">
+      <div class="directory-heading">
+        <p class="directory-eyebrow">{{ projects|length }} projects</p>
+        <h2>Projects under the OSL umbrella</h2>
+      </div>
+
+      <div class="project-grid">
+        {% for project in projects %}
+        <article class="project-card project-card--{{ project.type|default('project') }}">
+          <div class="project-card__top">
+            <span class="project-badge project-badge--{{ project.type|default('project') }}">
+              {{ project.type|default("project")|title }}
+            </span>
+            <h3>
+              <a href="{{ project.url }}" target="_blank" rel="noopener">
+                {{ project.name }}
+              </a>
+            </h3>
+          </div>
+
+          <p class="project-card__description">{{ project.description }}</p>
+
+          <dl class="project-meta">
+            {% if project.maintainer_name %}
+            <div>
+              <dt>Maintainer</dt>
+              <dd>
+                {% if project.maintainer_email %}
+                  <a href="mailto:{{ project.maintainer_email }}">{{ project.maintainer_name }}</a>
+                {% else %}
+                  {{ project.maintainer_name }}
+                {% endif %}
+              </dd>
+            </div>
+            {% endif %}
 
-  <div class="row">
-    <div class="col-md-12 pt-3">
-
-      {% for project in page.meta["projects"] %}
-
-      <div class="row {{ colors[loop.index % 2] }}">
-        <div class="col">
-          <h2>
-            <a href="{{ project.url }}" target="_blank">
-              {% if project.type == "incubated"  %}
-              <img
-                alt="Static Badge"
-                src="https://img.shields.io/badge/project-incubated-333333?style=for-the-badge&label=project&labelColor=FFAA00&color=888888"
-                loading="lazy" decoding="async"
-              />
-              {% elif project.type == "affiliated" %}
-              <img
-                alt="Static Badge"
-                src="https://img.shields.io/badge/project-affiliated-333333?style=for-the-badge&label=project&labelColor=0E91C3&color=888888"
-                loading="lazy" decoding="async"
-              />
-              {% endif %}
-              {{ project.name }}
-            </a>
-          </h2>
-          <p class="{{ text_colors[loop.index % 2] }}">
-            <strong>Maintainer</strong>: {{ project.maintainer_name }}
-            &lt;<a href="mailto:{{ project.maintainer_email }}">{{ project.maintainer_email }}</a>&gt;<br/>
             {% if project.communication_channel %}
-            <strong>Communication Channel</strong>:
-            <a href="{{ project.communication_channel.url }}">{{ project.communication_channel.provider.title() }}</a>
+            <div>
+              <dt>Community</dt>
+              <dd>
+                {% if project.communication_channel.url and project.communication_channel.url != "TBA" %}
+                  <a href="{{ project.communication_channel.url }}" target="_blank" rel="noopener">
+                    {{ project.communication_channel.provider|default("channel")|title }}
+                  </a>
+                {% else %}
+                  {{ project.communication_channel.provider|default("Channel")|title }}
+                {% endif %}
+              </dd>
+            </div>
             {% endif %}
-          </p>
-          <p class="{{ text_colors[loop.index % 2] }}">{{ project.description }}</p>
-        </div>
+          </dl>
+
+          <div class="project-card__footer">
+            <a class="osl-inline-button osl-inline-button--subtle" href="{{ project.url }}" target="_blank" rel="noopener">
+              Visit project
+            </a>
+          </div>
+        </article>
+        {% endfor %}
       </div>
-      {% endfor %}
-    </div>
+    </section>
   </div>
 </section>
 {% endblock content %}
diff --git a/theme/single-sidebar.html b/theme/single-sidebar.html
index 97d19c49..bc68495b 100644
--- a/theme/single-sidebar.html
+++ b/theme/single-sidebar.html
@@ -1,54 +1,71 @@
 {% extends "base.html" %}
 
 {% block content %}
+{% set page_title = page.meta.get("title", page.title) %}
+{% set page_description = page.meta.get("description") %}
+{% set section_label = page.meta.get("section_label", "Open Science Labs") %}
 
-<section>
-  <div class="row pt-2">
-    {% block side_menu %}
+{% set sidebar = namespace(title="", items=[]) %}
+{% for nav_item in nav %}
+  {% if nav_item.children and nav_item.active %}
+    {% set sidebar.title = nav_item.title %}
+    {% set sidebar.items = nav_item.children %}
+  {% endif %}
+{% endfor %}
 
-    {# prepare the nav3 content inside the side block -#}
-    {% set nav3_selected = [] -%}
-    {% for nav1 in nav -%}
-      {% for nav2 in (nav1.children or []) -%}
-        {% if nav2.active %}
-          {% for nav3 in (nav2.children or []) -%}
-            {% if nav3.title != "index" -%}
-            {{ nav3_selected.append(nav3) or "" -}}
-            {% endif %}
-          {% endfor -%}
-        {% endif -%}
-      {% endfor -%}
-    {% endfor %}
-
-    <div class="col">
-      <!-- List group for sidebar menu -->
-      <div class="list-group pt-4">
-        {% for nav3_item in nav3_selected %}
-        <a
-          href="/{{ nav3_item.url }}"
-          class="list-group-item list-group-item-action{% if nav3_item.active %} active{% endif %}"
-          {%- if nav3_item.active %} aria-current="true"{% endif -%}
-        >
-          {{ nav3_item.title }}
-        </a>
-        {% endfor %}
+<section class="osl-page osl-page--sidebar">
+  <div class="osl-page-shell">
+    <header class="osl-page-hero">
+      <div class="osl-page-hero__content">
+        <p class="osl-page-kicker">{{ section_label }}</p>
+        <h1>{{ page_title or config.site_name }}</h1>
+        {% if page_description and page_description != page_title %}
+          <p class="osl-page-description">{{ page_description }}</p>
+        {% endif %}
       </div>
+    </header>
 
-      {% if menu_3rd_level_selected %}
-      <div>
-        {% for menu_item_3rd_level in menu_3rd_level_selected %}
-        <p>
-          <a href="{{ menu_item_3rd_level.url }}">{{ menu_item_3rd_level.title }}</a>
-        </p>
-        {% endfor %}
-      </div>
+    <div class="osl-page-layout">
+      {% if sidebar.items %}
+      <aside class="osl-side-nav" aria-label="{{ sidebar.title }} navigation">
+        <p class="osl-side-nav__title">{{ sidebar.title }}</p>
+        <nav>
+          {% set rendered = namespace(urls=[]) %}
+          {% for item in sidebar.items %}
+            {% if item.children %}
+              <div class="osl-side-nav__group">
+                <span class="osl-side-nav__group-title">{{ item.title }}</span>
+                {% for child in item.children %}
+                  {% if child.url not in rendered.urls %}
+                  {% set _ = rendered.urls.append(child.url) %}
+                  <a href="{{ child.url|url }}"
+                     class="{% if child.active or child.url == page.url %}active{% endif %}"
+                     {% if child.active or child.url == page.url %}aria-current="page"{% endif %}>
+                    {{ child.title }}
+                  </a>
+                  {% endif %}
+                {% endfor %}
+              </div>
+            {% else %}
+              {% if item.url not in rendered.urls %}
+              {% set _ = rendered.urls.append(item.url) %}
+              <a href="{{ item.url|url }}"
+                 class="{% if item.active or item.url == page.url %}active{% endif %}"
+                 {% if item.active or item.url == page.url %}aria-current="page"{% endif %}>
+                {{ item.title }}
+              </a>
+              {% endif %}
+            {% endif %}
+          {% endfor %}
+        </nav>
+      </aside>
       {% endif %}
-    </div>
-    {% endblock side_menu %}
-    <div class="col-md-9 mx-auto">
-      {% block content_inner %}
-        {{ page.content }}
-      {% endblock content_inner %}
+
+      <article class="osl-markdown">
+        {% block content_inner %}
+          {{ page.content }}
+        {% endblock content_inner %}
+      </article>
     </div>
   </div>
 </section>
diff --git a/theme/team.html b/theme/team.html
index e51af337..5ffd9609 100644
--- a/theme/team.html
+++ b/theme/team.html
@@ -5,49 +5,64 @@
 {% endblock header_extra %}
 
 {% block content %}
-<section class="team-grid py-2">
-  <div class="row">
-    <div class="col-md-12 mx-auto">
-      {% block content_inner %}
-      {{ page.content }}
-      {% endblock content_inner %}
-    </div>
-  </div>
+{% set groups = page.meta.get("teams", []) %}
+{% set page_title = page.meta.get("title", page.title) %}
+{% set page_description = page.meta.get("description", "Meet the people helping Open Science Labs grow as a caring, practical, open community.") %}
 
-  {% for group in page.meta["teams"] %}
-  <div class="row pt-3">
-    <div class="col-md-12 mx-auto">
-      <h2 class="mb-3">{{ group.name }}</h2>
+<section class="osl-page osl-page--team">
+  <div class="osl-page-shell">
+    <header class="osl-page-hero">
+      <div class="osl-page-hero__content">
+        <p class="osl-page-kicker">People behind OSL</p>
+        <h1>{{ page_title }}</h1>
+        {% if page_description and page_description != page_title %}
+          <p class="osl-page-description">{{ page_description }}</p>
+        {% endif %}
+      </div>
+    </header>
+
+    {% if page.content|trim %}
+    <article class="osl-markdown">
+      {{ page.content }}
+    </article>
+    {% endif %}
 
-      <!-- Responsive grid with gutter spacing -->
-      <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-4">
-        {% for member in group.members %}
-        <div class="col">
-          <div class="card h-100">
-            {% if member.image_url %}
-              <img src="{{ member.image_url }}" class="card-img-top" alt="{{ member.name }}" loading="lazy" decoding="async" width="400" height="400">
-            {% endif %}
+    <section class="team-directory" aria-label="Open Science Labs team">
+      {% for group in groups %}
+      <div class="team-group">
+        <div class="directory-heading">
+          <p class="directory-eyebrow">{{ group.members|length }} members</p>
+          <h2>{{ group.name }}</h2>
+        </div>
 
-            <div class="card-body d-flex flex-column">
-              <div class="d-flex justify-content-between align-items-start">
-                <h3 class="card-title mb-2">{{ member.name }}</h3>
+        <div class="team-grid">
+          {% for member in group.members %}
+          <article class="team-card">
+            <div class="team-card__media">
+              {% if member.image_url %}
+                <img src="{{ member.image_url }}" alt="{{ member.name }}" loading="lazy" decoding="async" width="400" height="400">
+              {% else %}
+                <div class="team-card__avatar" aria-hidden="true">{{ member.name[:1] }}</div>
+              {% endif %}
+            </div>
 
+            <div class="team-card__body">
+              <div class="team-card__header">
+                <h3>{{ member.name }}</h3>
                 {% if member.github_url %}
-                <div class="social">
-                  <a class="git_ico" href="{{ member.github_url }}" target="_blank" aria-label="{{ member.name }} on GitHub" rel="noopener">
-                    <svg class="icon"><use xlink:href="#github"/></svg>
-                  </a>
-                </div>
+                <a class="team-card__social" href="{{ member.github_url }}" target="_blank" rel="noopener" aria-label="{{ member.name }} on GitHub">
+                  <svg class="icon"><use xlink:href="#github"/></svg>
+                </a>
                 {% endif %}
               </div>
 
               {% if member.bio %}
-                <p class="card-text mb-2">{{ member.bio }}</p>
+                <p>{{ member.bio }}</p>
               {% endif %}
 
               {% if "github_sponsor" in member %}
-                <div class="sponsor mt-auto">
-                  <small class="text-secondary d-block mb-1">Support this work:</small>
+                <div class="team-card__sponsor">
+                  <span>Support this work</span>
                   <iframe
                     src="{{ member.github_sponsor }}"
                     title="Sponsor {{ member.name }}"
@@ -58,13 +73,12 @@ <h3 class="card-title mb-2">{{ member.name }}</h3>
                 </div>
               {% endif %}
             </div>
-          </div>
+          </article>
+          {% endfor %}
         </div>
-        {% endfor %}
       </div>
-
-    </div>
+      {% endfor %}
+    </section>
   </div>
-  {% endfor %}
 </section>
 {% endblock content %}