/* Research page v2: stable thematic structure + compact scrollable work blocks */

.research-intro { max-width: 770px; }

.research-jump {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 34px 0 76px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.research-jump a { min-width: 0; padding: 18px 18px 17px 0; color: var(--navy); text-decoration: none; }
.research-jump a + a { padding-left: 18px; border-left: 1px solid var(--line); }
.research-jump strong, .research-jump small { display: block; }
.research-jump strong { font-family: var(--serif); font-size: 0.98rem; font-weight: 500; line-height: 1.25; }
.research-jump small { margin-top: 5px; color: var(--muted); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.research-jump a:hover strong, .research-jump a:hover small { color: var(--accent); }

.research-theme { padding: 0 0 82px; scroll-margin-top: 24px; }
.research-theme + .research-theme { padding-top: 68px; border-top: 1px solid var(--line); }

.theme-head {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(280px, 0.82fr);
  gap: clamp(42px, 7vw, 92px);
  align-items: center;
  margin-bottom: 38px;
}
.theme-head.no-media { grid-template-columns: minmax(0, 1fr); }
.theme-head.no-media .theme-copy { max-width: 900px; }
/* Explicit placement is used instead of alternating images automatically. */
.theme-head.media-left-compact {
  grid-template-columns: minmax(190px, 270px) minmax(0, 1fr);
  gap: clamp(30px, 4.2vw, 58px);
  align-items: start;
}
.theme-head.media-left-compact .theme-media {
  order: -1;
  width: 100%;
  max-width: 260px;
  justify-self: start;
  margin-top: 4px;
}
.theme-head.media-left-compact .theme-copy { max-width: none; }
.theme-head.media-left-compact .theme-copy > p { max-width: 900px; }
.theme-media.compact { max-width: 260px; justify-self: start; }

.theme-number { margin: 0 0 8px; color: var(--accent); font-size: 0.7rem; font-weight: 750; letter-spacing: 0.11em; text-transform: uppercase; }
.theme-copy h2 { margin: 0 0 17px; color: var(--navy); font-family: var(--serif); font-size: clamp(2rem, 3.4vw, 3.25rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1.02; }
.theme-copy > p { max-width: 760px; margin: 0 0 1.05em; color: var(--ink); font-size: 0.98rem; line-height: 1.72; }

.theme-media { margin: 0; }
.theme-media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; box-shadow: 12px 12px 0 var(--paper-deep); }

.theme-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 0.34fr); gap: clamp(38px, 6vw, 72px); align-items: start; }
.theme-main h3, .theme-side h3, .subtheme h3, .research-scroll-card h3 { margin: 0 0 12px; color: var(--navy); font-family: var(--serif); font-size: 1.18rem; font-weight: 500; }

.research-points { margin: 0; padding-left: 1.15rem; }
.research-points li { margin: 0 0 0.82em; padding-left: 0.25rem; }
.research-points li:last-child { margin-bottom: 0; }

/* More breathing room between the descriptive/questions block and the updateable material. */
.theme-divider { margin: 56px 0 34px; border-top: 1px solid var(--line); }

/* Right-hand boxes are reserved for software only. */
.software-box { padding: 20px 22px 22px; border: 1px solid var(--line); border-top: 3px solid var(--accent); background: rgba(255,255,255,0.28); }
.software-box .box-kicker { margin: 0 0 9px; color: var(--accent); font-size: 0.68rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
.software-box h3 { margin-bottom: 9px; }
.software-box p { margin: 0 0 0.9em; font-size: 0.86rem; line-height: 1.6; }
.software-link { display: inline-block; color: var(--navy-soft); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-decoration: none; text-transform: uppercase; }
.software-link:hover { color: var(--accent); }
.software-list { list-style: none; margin: 0; padding: 0; }
.software-list li + li { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(216,210,200,0.78); }
.software-list a { display: block; color: inherit; text-decoration: none; }
.software-list strong { display: block; color: var(--navy); font-family: var(--serif); font-size: 0.95rem; font-weight: 500; }
.software-list span { display: block; margin-top: 2px; color: var(--muted); font-size: 0.76rem; line-height: 1.45; }
.software-list a:hover strong { color: var(--accent); }
.software-group-label { margin: 11px 0 7px !important; color: var(--navy-soft) !important; font-size: 0.62rem !important; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.software-group-label:first-of-type { margin-top: 2px !important; }
.legacy-label { margin-top: 16px !important; padding-top: 13px; border-top: 1px solid rgba(216,210,200,0.78); }
.legacy-software strong { color: var(--muted); }

/* Selected work / collaboration work use the same scrollable visual grammar. */
.theme-blocks { display: grid; gap: clamp(28px, 4vw, 46px); }
.theme-blocks.two-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.theme-blocks.single-column { grid-template-columns: minmax(0, 1fr); }
.research-scroll-card { min-width: 0; border-top: 2px solid var(--navy); padding-top: 17px; }
.research-scroll { max-height: 225px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding-right: 14px; }
.research-scroll::-webkit-scrollbar { width: 7px; }
.research-scroll::-webkit-scrollbar-track { background: transparent; }
.research-scroll::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(30,48,70,0.22); }
.research-scroll { scrollbar-width: thin; scrollbar-color: rgba(30,48,70,0.22) transparent; }
.work-list { list-style: none; margin: 0; padding: 0; }
.work-list li { padding: 0 0 14px; }
.work-list li + li { padding-top: 14px; border-top: 1px solid rgba(216,210,200,0.78); }
.work-list strong { display: block; margin-bottom: 3px; color: var(--navy); font-family: var(--serif); font-size: 0.98rem; font-weight: 500; }
.work-list span { display: block; color: var(--muted); font-size: 0.84rem; line-height: 1.55; }

.subtheme { margin-top: 34px; border-top: 2px solid var(--navy); padding-top: 17px; }
.subtheme.no-divider { margin-top: 36px; border-top: 0; padding-top: 0; }
.subtheme-grid { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; align-items: start; }
.subtheme-grid img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.subtheme p { margin: 0; }

.roles-list { max-width: 800px; list-style: none; margin: 0; padding: 0; }
.roles-list li { padding-bottom: 18px; }
.roles-list li + li { padding-top: 14px; border-top: 1px solid rgba(216,210,200,0.78); }
.roles-list strong { display: block; margin-bottom: 3px; color: var(--navy); font-family: var(--serif); font-size: 1.02rem; font-weight: 500; }
.roles-list span { display: block; color: var(--muted); font-size: 0.88rem; line-height: 1.55; }

@media (max-width: 900px) {
  .research-jump { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .research-jump a:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .research-jump a:nth-child(4) { border-top: 1px solid var(--line); }
  .theme-head, .gw-head, .theme-head.media-left-compact, .theme-body { grid-template-columns: 1fr; }
  .theme-head.media-left-compact .theme-media { order: initial; max-width: 360px; margin-top: 2px; }
  .theme-media, .theme-media.compact { max-width: 520px; justify-self: start; }
  .theme-blocks.two-column { grid-template-columns: 1fr; }
  .software-side { max-width: 520px; }
}

@media (max-width: 560px) {
  .research-jump { grid-template-columns: 1fr; }
  .research-jump a, .research-jump a + a { padding: 15px 0; border-left: 0; }
  .research-jump a + a { border-top: 1px solid var(--line); }
  .subtheme-grid { grid-template-columns: 1fr; }
  .subtheme-grid img { max-width: 220px; }
  .research-scroll { max-height: 280px; padding-right: 8px; }
}

/* Inference/populations image: preserve the full scientific figure and keep it
   at the same visual scale as the other compact research illustrations. */
.inference-head .inference-media {
  width: 100%;
  max-width: 260px;
  align-self: start;
}
.inference-media img {
  width: 100%;
  max-height: 175px;
  aspect-ratio: auto;
  object-fit: contain;
  background: #0c0d1c;
}