/* Cahan Lab site styles: shared shell (header, footer, type, palette) and page components.
   Palette and type match the landing page hero. */
:root {
  --slate: #000;
  --slate-deep: #000;
  --slate-card: #15191d;
  --teal: #21b2a6;
  --teal-pale: #c7ebe8;
  --white: #f4f7f8;
  --warm: #f2b544;
  --mint: #80e2d2;
  --iris: #7a9efa;
  --rose: #d096ce;
  --muted: #9fb3b0;
  --rule: rgba(33, 178, 166, 0.2);
  --rule-soft: rgba(199, 235, 232, 0.12);
  --fs-0: 17px;
  --fs-1: 1.25rem;
  --fs-2: 1.5625rem;
  --fs-3: 1.953rem;
  --fs-4: 2.441rem;
  --fs-5: 3.052rem;
  --gutter: clamp(20px, 5vw, 72px);
  --wrap: 72rem;
  --font: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --bg-dim: 0.85;   /* how much the embryo background is darkened: 0 = the photo as is, 1 = black */
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--slate);
  color: var(--white);
  font-family: var(--font);
  font-size: var(--fs-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--teal); text-decoration: none; text-underline-offset: 0.18em; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3, h4 { font-weight: 600; line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
img { max-width: 100%; height: auto; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.measure { max-width: 68ch; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px var(--gutter);
  background: rgba(0,0,0,0.78);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule-soft);
}
.site-head--overlay { position: fixed; left: 0; right: 0; }
.site-head .brand { display: inline-flex; flex-shrink: 0; align-items: center; gap: 12px; color: var(--white); font-weight: 500; font-size: 1.15rem; line-height: 34px; white-space: nowrap; }
.site-head .brand img { width: 34px; height: 34px; filter: invert(1) brightness(1.4); }
.site-head .brand:hover { text-decoration: none; color: var(--teal-pale); }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px 26px; }
@media (max-width: 1000px) { .site-head .brand .uni { display: none; } }
.site-nav li { display: flex; align-items: center; }
.site-nav a { position: relative; display: inline-block; color: var(--teal-pale); font-size: 0.95rem; font-weight: 500; line-height: 26px; padding: 0; }
.site-nav a:hover { color: var(--white); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--white); }
.site-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--teal); }
.menu-toggle { display: none; background: none; border: 1px solid rgba(244,247,248,0.35); color: var(--white); font: inherit; font-size: 0.9rem; padding: 6px 12px; border-radius: 3px; cursor: pointer; }
@media (max-width: 860px) {
  .site-head .brand .uni { display: none; }
  .menu-toggle { display: inline-block; }
  .site-nav { display: none; position: absolute; top: 64px; right: var(--gutter); background: rgba(0,0,0,0.96); padding: 14px 20px; border: 1px solid var(--rule); border-radius: 4px; z-index: 6; }
  .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; gap: 10px; }
}

/* ---------- Page hero (non-landing pages) ---------- */
.page-top { padding: clamp(20px, 3vw, 32px) 0 0; }
.site-head + .section, .site-head + .research-area, .page-top + .section { border-top: 0; padding-top: clamp(28px, 4vw, 48px); }
.photo-band { background: var(--slate-deep); }
.photo-band img { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: center 42%; }
@media (max-width: 620px) { .photo-band img { aspect-ratio: 4 / 3; } }

/* ---------- Sections ---------- */
.section { padding: clamp(48px, 7vw, 96px) 0; }
.section + .section { border-top: 1px solid var(--rule); }
.section h2 { font-size: clamp(1.6rem, 2.8vw, var(--fs-3)); margin-bottom: 1rem; letter-spacing: -0.015em; }
.section h3 { font-size: var(--fs-1); margin-bottom: 0.5rem; }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.section-head .num { color: var(--teal); font-size: 0.85rem; letter-spacing: 0.08em; margin-bottom: 0.6rem; }
.section-head p { color: rgba(244,247,248,0.9); max-width: 68ch; }
@media (max-width: 760px) { .section-head { grid-template-columns: 1fr; gap: 1rem; } }

.lead { font-size: var(--fs-1); line-height: 1.55; }
.join { color: var(--teal-pale); }
.copy-email { cursor: pointer; }
.copied { color: var(--warm); font-size: 0.85em; margin-left: 0.5em; }

/* ---------- Cards and grids ---------- */
.grid { display: grid; gap: 22px; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 960px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }
.card { background: var(--slate-card); border: 1px solid var(--rule-soft); border-radius: 6px; padding: 22px 22px 20px; }
.card h3 { font-size: 1.12rem; margin-bottom: 0.35rem; }
.card p { color: rgba(244,247,248,0.86); font-size: 0.97rem; }
.card p:last-child { margin-bottom: 0; }
.card .more { font-weight: 600; font-size: 0.92rem; }
a.card { display: block; color: inherit; transition: border-color 0.2s, transform 0.2s; }
a.card:hover { text-decoration: none; border-color: rgba(33,178,166,0.55); transform: translateY(-2px); }
.card .accent { display: block; width: 36px; height: 3px; border-radius: 2px; margin-bottom: 16px; background: var(--teal); }

/* chips */
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li a, .chips li span { display: inline-block; font-size: 0.78rem; color: var(--teal-pale); border: 1px solid var(--rule); border-radius: 999px; padding: 0.22rem 0.7rem; }
.chips li a:hover { text-decoration: none; border-color: var(--teal); color: var(--white); }

/* ---------- Research page ---------- */
.research-area { padding: clamp(48px, 7vw, 96px) 0; border-top: 1px solid var(--rule); }
.research-area:first-of-type { border-top: 0; }
.research-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.research-grid h2 { font-size: clamp(1.8rem, 3.2vw, var(--fs-4)); margin-bottom: 1.2rem; }
.research-grid .num { color: var(--teal); font-size: 0.85rem; letter-spacing: 0.08em; margin-bottom: 0.6rem; }
.research-grid > div > p { font-size: 1.05rem; line-height: 1.6; }
@media (max-width: 860px) { .research-grid { grid-template-columns: 1fr; } }
.research-area p { color: rgba(244,247,248,0.9); }
.paperlist { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.paperlist li { padding: 0.55rem 0; border-top: 1px solid var(--rule-soft); font-size: 0.95rem; line-height: 1.45; }
.paperlist li:last-child { border-bottom: 1px solid var(--rule-soft); }
.paperlist a { color: var(--white); font-weight: 500; }
.paperlist a:hover { color: var(--teal); }
.paperlist .where { display: block; color: var(--muted); font-size: 0.85rem; }
.aside-label { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); margin: 0 0 0.6rem; }

/* ---------- Publications ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: clamp(18px, 3vw, 28px); }
@media (max-width: 720px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat { border-top: 2px solid var(--teal); padding-top: 10px; }
.stat b { display: block; font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); font-size: 0.88rem; }
.pub-controls { display: none; position: sticky; top: var(--head-h, 70px); z-index: 4; background: rgba(0,0,0,0.88); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); padding: 12px 0; }
.pub-controls .row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.pub-search { flex: 1 1 240px; min-width: 200px; font: inherit; font-size: 0.95rem; color: var(--white); background: var(--slate-deep); border: 1px solid var(--rule); border-radius: 4px; padding: 0.5rem 0.8rem; }
.pub-search::placeholder { color: var(--muted); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter { font: inherit; font-size: 0.82rem; color: var(--teal-pale); background: none; border: 1px solid var(--rule); border-radius: 999px; padding: 0.28rem 0.8rem; cursor: pointer; }
.filter:hover { border-color: var(--teal); color: var(--white); }
.filter[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: var(--slate-deep); font-weight: 600; }
.pub-count { color: var(--muted); font-size: 0.85rem; margin-left: auto; font-variant-numeric: tabular-nums; }
.pub-year { font-size: 0.85rem; letter-spacing: 0.1em; color: var(--teal); margin: clamp(36px, 5vw, 56px) 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.pub-year:first-of-type { margin-top: 24px; }
.pub { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 22px; padding: 22px 0; border-bottom: 1px solid var(--rule-soft); }
.pub[hidden] { display: none; }
.pub-fig { display: block; aspect-ratio: 4 / 3; background: var(--slate-deep); border-radius: 4px; overflow: hidden; border: 1px solid var(--rule-soft); cursor: zoom-in; }
.pub-fig img { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; }
.pub-fig.empty { cursor: default; display: grid; place-items: center; color: var(--muted); font-size: 0.75rem; }
.pub-title { font-size: 1.12rem; font-weight: 600; line-height: 1.3; margin-bottom: 0.25rem; }
.pub-title a { color: var(--white); }
.pub-title a:hover { color: var(--teal); text-decoration: none; }
.pub-journal { color: var(--teal-pale); font-style: italic; font-size: 0.95rem; }
.pub-authors { color: rgba(244,247,248,0.8); font-size: 0.9rem; margin: 0.35rem 0; }
.pub-authors u { text-decoration: none; color: var(--white); border-bottom: 1px solid rgba(33,178,166,0.65); }
.pub-summary { color: rgba(244,247,248,0.86); font-size: 0.95rem; margin: 0.35rem 0 0.6rem; }
.pub-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.pub-meta a { color: var(--teal-pale); border-bottom: 1px solid var(--rule); }
.pub-meta a:hover { color: var(--white); text-decoration: none; border-bottom-color: var(--teal); }
.pub-meta .num { margin-left: auto; color: var(--muted); }
.pub-empty { display: none; color: var(--muted); padding: 40px 0; }
.pub-empty button { font: inherit; color: var(--teal); background: none; border: 0; cursor: pointer; text-decoration: underline; }
@media (max-width: 620px) {
  .pub { grid-template-columns: 1fr; gap: 12px; }
  .pub-fig { max-width: 320px; }
}
.lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,0.94); display: none; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.lightbox.open { display: flex; }
.lightbox img { max-width: min(1200px, 96vw); max-height: 86vh; object-fit: contain; background: #fff; border-radius: 4px; }
.lightbox figcaption { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); max-width: 80vw; text-align: center; color: var(--teal-pale); font-size: 0.9rem; }

/* ---------- Team and alumni ---------- */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 26px 22px; }
.person { display: flex; flex-direction: column; }
.person .photo { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 6px; background: var(--slate-deep); border: 1px solid var(--rule-soft); }
.person .photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; filter: saturate(0.92); transition: transform 0.4s ease, filter 0.4s ease; }
.person:hover .photo img { transform: scale(1.03); filter: saturate(1); }
.person h3 { font-size: 1.1rem; margin: 12px 0 2px; }
.person .role { color: var(--teal-pale); font-size: 0.9rem; margin: 0 0 4px; }
.person .focus { color: rgba(244,247,248,0.82); font-size: 0.9rem; margin: 0; line-height: 1.45; }
.person .now { margin: 8px 0 0; font-size: 0.9rem; color: var(--white); }
.person .now::before { content: "Next "; color: var(--teal); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; margin-right: 4px; }
.people--compact { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.people--compact .person h3 { font-size: 1rem; }
@media (max-width: 620px) {
  /* phones: a list, photo at the left, so the pictures stay small */
  .people, .people--compact { grid-template-columns: 1fr; gap: 18px; }
  .person { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: 14px; align-items: start; }
  .person .photo { grid-row: 1 / span 5; width: 88px; height: 88px; aspect-ratio: auto; }
  .person h3, .person .role, .person .focus, .person .now { grid-column: 2; }
  .person h3 { margin-top: 0; }
  .person h3 { font-size: 0.98rem; }
  .person .role, .person .focus, .person .now { font-size: 0.82rem; }
}
.group-label { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); margin: 0 0 1.2rem; }
.destinations { display: flex; flex-wrap: wrap; gap: 10px 24px; color: var(--teal-pale); font-size: 0.95rem; }
.destinations b { color: var(--white); font-weight: 600; }
.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px 28px; }
.values div { border-top: 2px solid var(--teal); padding-top: 10px; }
.values b { display: block; margin-bottom: 4px; }
.values p { color: rgba(244,247,248,0.86); font-size: 0.95rem; margin: 0; }

/* ---------- Resources ---------- */
.res-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.res { background: var(--slate-card); border: 1px solid var(--rule-soft); border-radius: 6px; padding: 20px 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.res.has-icon { grid-template-columns: 92px minmax(0, 1fr); }
.res .icon { width: 92px; height: 92px; object-fit: contain; background: #fff; border-radius: 4px; }
.res h3 { font-size: 1.1rem; margin-bottom: 0.3rem; }
.res .desc { color: rgba(244,247,248,0.86); font-size: 0.95rem; }
.res .links { color: var(--muted); font-size: 0.9rem; line-height: 1.7; overflow-wrap: anywhere; }
.res .links a { color: var(--teal-pale); border-bottom: 1px solid var(--rule); }
.res .links a:hover { text-decoration: none; color: var(--white); border-bottom-color: var(--teal); }
.res .links ul { margin: 0; padding-left: 1.1em; }
.res.has-shot { grid-template-columns: 240px minmax(0, 1fr); }
.res .shot { display: block; border-radius: 4px; overflow: hidden; border: 1px solid var(--rule-soft); background: var(--slate-deep); }
.res .shot img { display: block; width: 100%; height: 150px; object-fit: cover; object-position: top left; }
.res .shot:hover img { filter: brightness(1.08); }
@media (max-width: 620px) { .res.has-icon, .res.has-shot { grid-template-columns: 1fr; } .res .shot img { height: 160px; } }

/* ---------- Timeline: layout and look ported from the live page (assets/css/main.css + timeline.css) ---------- */
.timeline-page {
  --tl-spine: rgba(255,255,255,0.16); --tl-panel: rgba(24,31,38,0.82); --tl-panel-hover: rgba(30,39,48,0.92); --tl-text: rgba(255,255,255,0.9);
  --tl-pub: #3fc48a; --tl-levelup: #56c2e0; --tl-member: #ff8f8f; --tl-grant: #b294f5; --tl-award: #f2b350;
  /* background-image is set inline by the build (page-relative url) */
  background-attachment: fixed; background-position: center center; background-repeat: no-repeat; background-size: cover;
}
.timeline-page .timeline { list-style: none; margin: 0; padding: 1em 2% 3em; position: relative; }
.timeline-page .timeline::before { content: ""; position: absolute; top: 0; bottom: 0; left: 27%; width: 2px; margin-left: -1px;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0, var(--tl-spine) 4%, var(--tl-spine) 96%, rgba(255,255,255,0) 100%); }
.timeline-page .timeline > li { position: relative; margin: 0 0 1.3em; padding: 0; }
.timeline-page .timeline > li::after { content: ""; display: table; clear: both; }
.timeline-page .timeline > li:last-child { margin-bottom: 0; }
.timeline-page .timeline-year { margin: 2.25em 0 1.25em; padding-left: 27%; line-height: 1; }
.timeline-page .timeline-year:first-child { margin-top: 0; }
.timeline-page .timeline-year span { display: inline-block; transform: translateX(-50%); padding: 0.35em 1.15em; font-size: 0.8em; font-weight: 700; letter-spacing: 0.22em; color: rgba(255,255,255,0.92); background: rgba(18,24,30,0.92); border: 1px solid rgba(255,255,255,0.22); border-radius: 20px; white-space: nowrap; }
.timeline-page .timeline-date { position: absolute; left: 0; top: 0; width: 23%; text-align: right; padding: 1.1em 1.4em 0 0; font-size: 0.85em; font-weight: 600; letter-spacing: 0.02em; line-height: 1.6; color: rgba(255,255,255,0.82); text-shadow: 0 1px 6px rgba(0,0,0,0.85); }
.timeline-page .timeline-badge { position: absolute; left: 27%; top: 9px; width: 42px; height: 42px; margin-left: -21px; line-height: 42px; font-size: 1.1em; text-align: center; border-radius: 50%; z-index: 2; color: #10161c; background: var(--tl-accent, #999); border: 2px solid rgba(12,17,22,0.85); box-shadow: 0 0 0 4px rgba(12,17,22,0.5), 0 4px 14px rgba(0,0,0,0.4); transition: transform 0.22s ease, box-shadow 0.22s ease; }
.timeline-page .timeline > li:hover > .timeline-badge { transform: scale(1.12); box-shadow: 0 0 0 4px rgba(12,17,22,0.5), 0 0 18px var(--tl-accent, rgba(255,255,255,0.5)); }
.timeline-page .timeline-panel { float: right; width: 68%; position: relative; background: var(--tl-panel); -webkit-backdrop-filter: blur(8px) saturate(120%); backdrop-filter: blur(8px) saturate(120%); border: 1px solid rgba(255,255,255,0.1); border-left: 3px solid var(--tl-accent, rgba(255,255,255,0.25)); border-radius: 10px; padding: 1.1em 1.3em; box-shadow: 0 6px 22px rgba(0,0,0,0.32); transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease; }
.timeline-page .timeline-panel:hover { background: var(--tl-panel-hover); transform: translateX(3px); box-shadow: 0 10px 30px rgba(0,0,0,0.42); }
.timeline-page .timeline-body { font-size: 0.95em; line-height: 1.6; color: var(--tl-text); }
.timeline-page .timeline-body p { margin: 0; }
.timeline-page .timeline-body p + p { margin-top: 5px; }
.timeline-page .timeline-body a { color: #8fd8f0; border-bottom: 1px solid rgba(143,216,240,0.4); }
.timeline-page .timeline-body a:hover { color: #b9e9fa; border-bottom-color: #b9e9fa; text-decoration: none; }
.timeline-page .timeline-body img { max-width: 100%; border-radius: 4px; margin-top: 10px; }
.timeline-page .timeline-event-type { float: right; margin: 0.15em 0 0.35em 1em; padding: 0.15em 0.7em; font-size: 0.68em; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; color: var(--tl-accent, rgba(255,255,255,0.75)); background: rgba(255,255,255,0.07); border: 1px solid var(--tl-accent, rgba(255,255,255,0.25)); border-radius: 20px; }
.timeline-page .tl-pub { --tl-accent: var(--tl-pub); }
.timeline-page .tl-levelup { --tl-accent: var(--tl-levelup); }
.timeline-page .tl-member { --tl-accent: var(--tl-member); }
.timeline-page .tl-grant { --tl-accent: var(--tl-grant); }
.timeline-page .tl-award { --tl-accent: var(--tl-award); }
.timeline-page .timeline > li.tl-reveal { opacity: 0; transform: translateY(18px); }
.timeline-page .timeline > li.tl-reveal.is-visible { opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.5s ease; }
@media (prefers-reduced-motion: reduce) {
  .timeline-page .timeline > li.tl-reveal, .timeline-page .timeline > li.tl-reveal.is-visible { opacity: 1; transform: none; transition: none; }
  .timeline-page .timeline-panel, .timeline-page .timeline-badge { transition: none; }
}
@media (max-width: 736px) {
  .timeline-page { background-attachment: scroll; }
  .timeline-page .timeline { padding: 0.5em 0 2em; }
  .timeline-page .timeline::before, .timeline-page .timeline-badge { display: none; }
  .timeline-page .timeline-date { position: relative; width: 100%; text-align: left; padding: 0; margin-bottom: 0.35em; font-size: 0.78em; color: rgba(255,255,255,0.72); }
  .timeline-page .timeline-panel { width: 100%; float: none; padding: 0.9em 1em; }
  .timeline-page .timeline > li { margin-bottom: 1.1em; }
  .timeline-page .timeline-year { margin: 2em 0 1em; padding-left: 0; }
  .timeline-page .timeline-year span { transform: none; }
  .timeline-page .timeline-event-type { font-size: 0.62em; margin-left: 0.7em; }
}

/* ---------- Lab fun ---------- */
.gallery { columns: 3 300px; column-gap: 20px; }
.gallery figure { break-inside: avoid; margin: 0 0 20px; background: var(--slate-card); border: 1px solid var(--rule-soft); border-radius: 6px; overflow: hidden; }
.gallery img { display: block; width: 100%; height: auto; }
.gallery figcaption { padding: 12px 14px 14px; }
.gallery figcaption b { display: block; font-weight: 600; font-size: 0.98rem; }
.gallery figcaption span { color: var(--muted); font-size: 0.75rem; }

/* ---------- Buttons ---------- */
.btn { display: inline-block; font: inherit; font-weight: 600; font-size: 0.95rem; color: var(--slate-deep); background: var(--teal); border: 0; border-radius: 4px; padding: 0.6rem 1.1rem; cursor: pointer; }
.btn:hover { text-decoration: none; background: var(--teal-pale); }
.btn-ghost { background: none; color: var(--teal-pale); border: 1px solid var(--rule); }
.btn-ghost:hover { background: none; color: var(--white); border-color: var(--teal); }

/* ---------- Footer ---------- */
.site-foot { padding: 56px var(--gutter) 40px; border-top: 1px solid var(--rule); color: var(--teal-pale); font-size: 0.95rem; background: var(--slate-deep); }
.site-foot .inner { max-width: var(--wrap); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
.site-foot p { margin: 0 0 0.35em; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; flex-wrap: wrap; }
.site-foot .copyright { width: 100%; color: var(--muted); font-size: 0.85rem; margin-top: 12px; }

.site-foot ul a svg { display: block; opacity: 0.8; }
.site-foot ul a:hover svg { opacity: 1; }
.site-foot ul li a { display: inline-flex; align-items: center; min-height: 24px; }
/* ---------- Background modes: embryo image (default), black, slate; the switch in the header cycles them ---------- */
html.bg-embryo body { background-color: #000; background-attachment: fixed; background-position: center center; background-repeat: no-repeat; background-size: cover; }
html.bg-black body { background: #000; }
html.bg-slate body { background: #1b2229; }   /* the a-regulatory-sphere hero colour */
html.bg-slate .site-head { background: rgba(27,34,41,0.82); }
.bg-switch { background: none; border: 1px solid var(--rule-soft); color: var(--teal-pale); width: 26px; height: 26px; border-radius: 50%; padding: 0; cursor: pointer; display: inline-grid; place-items: center; flex-shrink: 0; margin-left: 18px; }
.bg-switch:hover { border-color: var(--teal); color: var(--white); }
.bg-switch svg { width: 14px; height: 14px; }
@media (max-width: 736px) { html.bg-embryo body { background-attachment: scroll; } .bg-switch { margin-left: 10px; } }

/* ---------- Candidates TOC (not linked from the site) ---------- */
.cand { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 14px; }
.cand li { background: var(--slate-card); border: 1px solid var(--rule-soft); border-radius: 6px; padding: 16px 20px; }
.cand li a { font-weight: 600; font-size: 1.05rem; color: var(--white); }
.cand li a:hover { color: var(--teal); }
.cand li p { margin: 4px 0 0; color: rgba(244,247,248,0.82); font-size: 0.95rem; }

/* ---------- Impact page ---------- */
.imp-filters { margin: 1.4rem 0 0.6rem; }
.filter i { font-style: normal; opacity: 0.6; margin-left: 4px; }
.imp-count { color: var(--muted); font-size: 0.85rem; margin: 0 0 1rem; }
.imp-list { display: grid; gap: 12px; }
.imp { background: var(--slate-card); border: 1px solid var(--rule-soft); border-radius: 6px; padding: 14px 18px; }
.imp h3 { font-size: 1.02rem; margin: 0 0 4px; font-weight: 600; }
.imp h3 a { color: var(--white); }
.imp h3 a:hover { color: var(--teal); text-decoration: none; }
.imp-meta { color: rgba(244,247,248,0.8); font-size: 0.9rem; }
.imp-meta .where { color: var(--muted); margin-left: 6px; }
.imp-tags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.imp-tags span { font-size: 0.72rem; color: var(--teal-pale); border: 1px solid var(--rule); border-radius: 999px; padding: 1px 8px; }
sup.cite { font-size: 0.72em; margin-left: 2px; }
sup.cite a { color: var(--teal); border-bottom: 1px solid var(--rule); white-space: nowrap; }