/* Core color scheme variables */
:root {
  --brand-dark: #181003;
  --brand-mid: #3F2504;
  --brand-light: #6C4B12;
  --brand-cream: #F5ECD4;
  --bg: #E7E7E7;
  --text: #1f2937;
  --muted: #6b7280;
  --accent: #6C4B12;
  --card: #ffffff;
  --border: #d4d4d4;
  --rule: rgba(0, 0, 0, 0.25);
  --rule-hover: rgba(0, 0, 0, 0.55);
  --font-sans: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0f14;
    --text: #e5e7eb;
    --muted: #9aa3af;
    --accent: #8b93ff;
    --card: #121821;
    --border: #1f2937;
    --rule: rgba(255, 255, 255, 0.35);
    --rule-hover: rgba(255, 255, 255, 0.7);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

/* Content typography — Distill-style serif inside main */
main {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.6;
}
@media (min-width: 1024px) {
  main { font-size: 18px; }
}
main h1, main h2, main h3 {
  font-family: var(--font-serif);
  font-weight: 400;
}
main h1 {
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 1.5rem 0 .75rem;
}
@media (min-width: 768px) {
  main h1 { font-size: 46px; }
}
@media (min-width: 1080px) {
  main h1 { font-size: 50px; letter-spacing: -0.02em; }
}
main h2 {
  font-size: 26px;
  line-height: 1.25;
  margin: 2.25rem 0 1rem;
}
@media (min-width: 1024px) {
  main h2 { font-size: 30px; }
}
main h3 {
  font-size: 20px;
  line-height: 1.4;
  font-style: italic;
  margin: 2rem 0 .75rem;
}
@media (min-width: 1024px) {
  main h3 { font-size: 24px; }
}
main h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 14px;
  line-height: 1.4;
  margin: 1.75rem 0 .5rem;
}
main p, main li {
  font-family: var(--font-serif);
}
main ul, main ol { padding-left: 1.5rem; }
main li { margin-bottom: .5rem; }
main section { margin: 3rem 0; }
main a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: border-color .15s ease;
}
main a:hover { border-bottom-color: var(--rule-hover); }

header {
  background: var(--brand-dark);
  color: var(--brand-cream);
}
header .brand { color: var(--brand-cream); }
header .brand .brand-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
}
header .primary-nav .nav-link { color: var(--brand-cream); opacity: 0.75; }
header .primary-nav .nav-link:hover,
header .primary-nav .nav-link.active { color: var(--brand-cream); opacity: 1; }

.wrap { max-width: 960px; margin: 0 auto; padding: 1.25rem; }

nav a { color: var(--muted); text-decoration: none; margin-left: 1rem; }
nav a.active { color: var(--accent); font-weight: 600; }
nav a:hover { color: var(--accent); }

.header-bar { display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:.6rem; font-weight:700; letter-spacing:.2px; text-decoration:none; color:inherit; }
.brand .brand-logo { width:44px; height:44px; object-fit:contain; display:block; }

.primary-nav { display:flex; gap:1rem; }
.primary-nav .nav-link { color:var(--muted); text-decoration:none; }
.primary-nav .nav-link:hover { color:var(--accent); }
.primary-nav .nav-link.active { color:var(--accent); font-weight:600; }

main .hero { padding: 3rem 0 1.5rem; }
h1 { font-size: clamp(1.8rem, 2vw + 1rem, 2.4rem); margin: 0 0 .5rem; }
p.lead { color: var(--muted); max-width: 60ch; margin: 0; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
  margin: 2rem 0;
  overflow: auto;
}

.small { font-size: .9rem; color: var(--muted); font-family: var(--font-sans); }
.mermaid { min-height: 220px; font-family: var(--font-sans); }
.mermaid text, .mermaid foreignObject div, .mermaid .label { font-family: var(--font-sans) !important; }
.parent-link { font-family: var(--font-sans); font-size: .9rem; color: var(--muted); margin: 0 0 1rem; }
.parent-link a { border-bottom: none; color: var(--muted); }
.parent-link a:hover { color: var(--text); }


/* Footnotes */

/* Superscript reference links */
a.footnote,
a[rel="footnote"] {
text-decoration: none;
padding-left: 2px;
}

/* Footnotes block at the end */
.footnotes {
border-top: 1px solid var(--border);
margin-top: 2rem;
padding-top: 1rem;
color: var(--muted);
font-size: 0.95rem;
}

.footnotes ol {
margin-left: 1.25rem;
}

.footnotes li {
margin: 0 0 .5rem;
}

.footnotes .reversefootnote,
.footnotes a.footnote-backref {
text-decoration: none;
margin-left: .25rem;
color: inherit;
opacity: .7;
}

/* Landing-page bands (three colored layers at top) */
.landing main { display: block; }
.landing main > section { margin: 0; }
.band {
  padding: 4rem 0;
}
.band > .wrap { padding: 0 1.25rem; margin: 0 auto; max-width: 960px; }
.band-hero {
  background: var(--brand-mid);
  color: var(--brand-cream);
  padding: 5rem 0 4rem;
}
.band-hero h1 {
  color: var(--brand-cream);
  margin: 0 0 .5rem;
  font-size: clamp(2rem, 3vw + 0.5rem, 3rem);
  font-weight: 300;
  letter-spacing: .04em;
  display: block;
  text-align: left;
  text-align-last: left;
}
.band-hero h1 b {
  font-weight: 600;
  font-style: normal;
}
.band-hero .lead {
  color: rgba(245, 236, 212, 0.85);
  max-width: 60ch;
  margin: 0;
  font-size: 1.25rem;
}
.band-subprojects {
  background: var(--brand-light);
  color: var(--brand-cream);
}
.band-subprojects h2 { color: var(--brand-cream); margin: 0 0 .75rem; }
.band-subprojects p { margin: 0; max-width: 70ch; }
.band-subprojects a,
.band-subprojects strong { color: var(--brand-cream); }
.band-subprojects a { border-bottom: 1px solid rgba(245, 236, 212, 0.5); }
.band-subprojects a:hover { border-bottom-color: var(--brand-cream); }

/* Non-band sections on the landing: separated by thin horizontal rules */
.landing main > section:not(.band) > .wrap {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.landing main > section:not(.band) + section:not(.band) > .wrap {
  border-top: 1px solid var(--rule);
}

/* Footer */

footer {
  background: var(--brand-dark);
  color: var(--brand-cream);
  margin-top: 3rem;
  padding: 2rem 0;
}
.landing footer { margin-top: 4rem; }
footer .footer-grid { display: flex; flex-direction: column; gap: .4rem; }
footer .footer-tagline {
  margin: 0;
  max-width: 60ch;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--brand-cream);
}
footer .footer-updated {
  margin: 0;
  font-size: .85rem;
  color: rgba(245, 236, 212, 0.55);
}

/* People (Distill-inspired) */
.people {
  overflow: hidden;
  margin-top: 1.5rem;
}
.people > h2 {
  margin-bottom: 1rem;
}
.people .investigators,
.people .consultants,
.people .team,
.people .project-leads {
  clear: both;
  overflow: hidden;
}
@media (min-width: 1080px) {
  .people .investigators {
    display: flex;
    flex-direction: column;
    width: 22.5%;
    float: left;
  }
  .people .consultants {
    clear: both;
    display: flex;
    flex-direction: column;
    width: 22.5%;
    float: left;
  }
  .people .team {
    clear: none;
    margin-left: 5%;
    width: 30%;
    float: left;
  }
  .people .project-leads {
    clear: none;
    display: flex;
    flex-direction: column;
    margin-left: 5%;
    width: 22.5%;
    float: left;
  }
  .people .team .columns {
    display: grid;
    grid-template-columns: repeat(1, 255px);
    column-gap: 20px;
    justify-content: start;
    height: auto;
  }
  .people .team .columns .person {
    float: none;
    width: 255px;
  }
}
.people .investigators h3,
.people .consultants h3,
.people .team h3,
.people .project-leads h3,
.funding h3 {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  margin-top: 12px;
  color: var(--muted);
}
.funding p { max-width: 60ch; }
@media (min-width: 1080px) {
  .people .investigators h3,
  .people .consultants h3,
  .people .team h3,
  .people .project-leads h3 {
    margin-top: 26px;
  }
}
.person {
  width: 255px;
  padding-right: 10px;
  position: relative;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5em;
  margin-bottom: 16px;
  min-height: 50px;
  float: left;
}
.person .mug {
  position: absolute;
  top: 4px;
  left: 0;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--card);
}
.person .mug img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.person .name {
  margin-top: 6px;
  margin-left: 60px;
  font-weight: 600;
  display: block;
  color: var(--text);
}
.person .role {
  margin-left: 60px;
  display: block;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}
.person .affiliation {
  margin-left: 60px;
  display: block;
  color: var(--muted);
  font-style: italic;
}

/* References (hanging indent, not a card) */
.refs { margin: 1rem 0 2rem; padding-left: 1.25rem; }
.refs li {
  margin: 0 0 .75rem;
  text-indent: -1.25rem;
  padding-left: 1.25rem;
}
.refs a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
.refs a:hover { border-bottom-color: var(--rule-hover); }

.section-spacer { margin-top: 2rem; }

.footer-grid {
  padding: 1rem 0;
  font-size: .95rem;
}

/* Inline images */

/* Full-width images inside the content area */
.img-full {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 8px; /* optional */
}

/* Optional: full-bleed wrapper (edge-to-edge across viewport) */
.full-bleed {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
}
.full-bleed > img,
.full-bleed > .img-full {
  width: 100vw;
  max-width: 100vw;
}

/* Make it obvious the image can be zoomed */
.can-fullscreen { cursor: zoom-in; }

/* Fullscreen styling */
img:fullscreen,
img:-webkit-full-screen {
  background: #000;
  width: 100vw;
  height: 100vh;
  object-fit: contain; /* letterbox without cropping */
}

figcaption { color: var(--muted); margin-top: .5rem; }
figcaption.small { font-size: 0.95rem; }

/* images in tables */
.img-table { table-layout: fixed; width: 100%; }
.img-table th, .img-table td { text-align: center; vertical-align: top; }
.img-table img.tbl-img {
width: 100% !important;
max-width: clamp(80px, 18vw, 140px) !important;
height: auto;
display: inline-block;
}
.table-wrapper { overflow-x: auto; }