/* Desktop module index: two available projects, then a compact upcoming row. */
@media (min-width: 981px) {
  body:has(.modules-hero) {
    --theme-bg: #101214; --theme-surface: #191c20; --theme-line: #30353a;
    --theme-accent: #b7c0c8;
    background: #101214;
  }
  body:has(.modules-hero) .site-header,
  body:has(.modules-hero) .site-footer { background: #101214; border-color: #30353a; }
  body:has(.modules-hero) .brand-mark { color: #202327; background: #d9dde1; }
  .modules-hero {
    min-height: 300px; padding-top: 76px; padding-bottom: 64px;
    grid-template-columns: 1fr 1fr; align-items: end; gap: 64px;
    background: #101214; border-color: #30353a;
  }
  .modules-hero .kicker { color: #aab6c0; }
  .modules-hero h1 { margin-bottom: 0; font-size: 58px; color: #eef0f2; }
  .modules-hero > p { color: #b5bec6; max-width: 560px; }
  .module-gallery {
    --theme-bg: #e5e3dd; --theme-surface: #d9dad5;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px; padding-top: 56px; padding-bottom: 72px;
    background: #e5e3dd; box-shadow: 0 0 0 100vmax #e5e3dd;
  }
  .module-gallery .module-card {
    --ink: #303438; --muted: #565c60; --blue: #365d77; --line: #bfc2bd;
    --theme-ink: #303438; --theme-muted: #565c60; --theme-accent: #365d77;
    --surface-fill: #e5e3dd;
    min-height: 0; border: 1px solid #bfc2bd; border-radius: 12px;
    color: #303438; background: transparent; overflow: hidden;
    box-shadow: none; transform: none;
  }
  .module-gallery .module-card:hover,
  .module-gallery .module-card:focus-within { border-color: #8c979e; transform: none; }
  .module-gallery .module-figure {
    --ink: #e8ebee; --muted: #aeb7bf; --blue: #a3b4c1; --lime: #a4b8ac; --line: #3e4952;
    --theme-bg: #191c20; --theme-secondary: #191c20; --theme-surface: #191c20;
    --theme-accent: #a3b4c1; --theme-status: #a4b8ac; --surface-fill: #191c20;
    height: 224px; flex-basis: 224px; background-color: #191c20; background-image: none;
    border: 0; color: #e8ebee;
  }
  .module-gallery .module-card-body { padding: 28px 32px 30px; }
  .module-gallery .module-card h2 { min-height: 0; margin: 17px 0 16px; font-size: 27px; line-height: 1.4; }
  .module-gallery .module-card-body > p { min-height: 50px; margin-bottom: 22px; font-size: 15px; }
  .module-gallery .module-keywords { margin-bottom: 22px; gap: 8px; }
  .module-gallery .module-keywords span { color: #596266; font-size: 10px; border-color: #c3c6c0; border-radius: 4px; }
  .module-gallery .module-card-body > a { color: #365d77; font-size: 14px; }
  .module-gallery .module-card-upcoming {
    grid-column: 1 / -1; display: grid; grid-template-columns: 144px minmax(0, 1fr);
    align-items: center; border: 0; border-top: 1px solid #bfc2bd; border-radius: 0;
    margin-top: 16px; padding-top: 32px; background: transparent;
  }
  .module-gallery .module-card-upcoming .upcoming-figure {
    height: 120px; min-height: 0; background: #d9dad5; border-radius: 10px;
  }
  .module-gallery .upcoming-figure > span { width: 52px; height: 52px; background: transparent; border-color: #949e9f; }
  .module-gallery .module-card-upcoming .module-card-body { padding: 0 0 0 32px; }
  .module-gallery .module-card-upcoming h2 { margin: 10px 0; font-size: 23px; }
  .module-gallery .module-card-upcoming p { min-height: 0; margin-bottom: 14px; }
  .module-gallery .module-card-upcoming .module-keywords { margin-bottom: 8px; }
  .module-gallery .module-pending { min-height: 0; padding-top: 0; border-top: 0; font-size: 11px; color: #687176; }
}

/* Compact vector illustrations for the two available research modules. */
.module-gallery .module-overview-diagram {
  flex-direction: column;
  gap: 8px;
  padding: 16px 20px 20px;
}
.module-overview-diagram img {
  display: block;
  width: 100%;
  max-width: 560px;
  height: 164px;
  min-height: 0;
  object-fit: contain;
}
.module-diagram-caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  color: #b0b1b8;
  font-size: 12px;
  line-height: 1.6;
}
.module-diagram-caption > span { color: #b4ff50; }
@media (max-width: 480px) {
  .module-gallery .module-overview-diagram { padding-inline: 12px; }
  .module-diagram-caption { gap: 6px; }
}