/* Site theme: warm paper + charcoal + antique bronze.
   Loaded last on every page, so it overrides w3.css, bootstrap and the inline styles.
   The animated background is drawn by assets/js/bg.js behind a transparent body. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&display=swap");

:root {
  --th-bg: #fdfdfb;          /* page: near-white, a touch warm */
  --th-surface: #f6f4f0;     /* cards, panels */
  --th-surface-2: #eeeae3;   /* hover / active */
  --th-rule: #e3ded5;
  --th-ink: #0e0d0c;         /* headings, bold */
  --th-text: #111111;        /* body text */
  --th-muted: #5e554b;
  --th-link: #006699;        /* Nature classic link blue */
  --th-link-hover: #004466;
  --th-gold: #c00000;        /* Nature red: section bars and the masthead rule */
  --th-red: #c00000;         /* Nature red for hiring / highlights */
  --th-bronze: #927656;      /* background accents only */
  --th-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --th-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

/* page */
html { background-color: var(--th-bg) !important; }
body, body.w3-light-grey { background-color: transparent !important; color: var(--th-text) !important; }
.w3-light-grey:not(body), .w3-white { background-color: var(--th-surface) !important; color: var(--th-text) !important; }
strong, b { color: var(--th-ink) !important; }
hr { border-color: var(--th-rule) !important; }
::selection { background: rgba(146, 118, 86, 0.25); color: var(--th-ink); }

/* headings */
h1, h2, h3, h4, h5 {
  font-family: var(--th-serif) !important;
  color: var(--th-ink) !important;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.w3-container > h2 {
  border-bottom: 1px solid var(--th-rule);
  padding-bottom: 6px;
}
.w3-container > h2::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 0.85em;
  margin-right: 10px;
  background: var(--th-gold);
  vertical-align: -0.05em;
}

/* links */
a, a:link, a:visited { color: var(--th-link) !important; }
a:hover, a:focus { color: var(--th-link-hover) !important; text-decoration: underline; }

/* inline colours written for a white page */
[style*="color: #000"], [style*="color:#000"], [style*="color: #333"], [style*="color:#333"],
[style*="color: #444"], [style*="color: #555"], [style*="color: black"] { color: var(--th-text) !important; }
[style*="#447ec9"], [style*="#447EC9"] { color: var(--th-link) !important; }
font[color="darkred"], [style*="darkred"] { color: var(--th-red) !important; }
font[color="#C0C0C0"] { color: var(--th-muted); }

/* top navigation: charcoal masthead with a bronze rule */
.w3-black, .w3-top .w3-black { background-color: #24211e !important; color: #eee !important; }
.w3-top > .w3-row, .w3-top > div.w3-bar { border-bottom: 2px solid var(--th-gold); }
.w3-top a, .w3-top a:link, .w3-top a:visited, .w3-bar-block a { color: #efe9df !important; }
.w3-top .w3-button:hover, .w3-black .w3-button:hover, .w3-hover-white:hover {
  background-color: #35312c !important;
  color: #e9d3b4 !important;
}
.w3-red { background-color: var(--th-red) !important; }

/* news icons */
.fa-flag { color: #c00000 !important; }   /* Nature red */
.fa-university { color: #1c1b19 !important; }   /* ink */
.fa-trophy { color: #d29a00 !important; }

/* collapsible sections */
.accordion {
  background-color: var(--th-surface) !important;
  color: var(--th-ink) !important;
  border: 1px solid var(--th-rule) !important;
}
.accordion:hover, .accordion.active, .active.accordion { background-color: var(--th-surface-2) !important; }
.accordion:after { color: var(--th-gold) !important; }
.panel { background-color: transparent !important; color: var(--th-text) !important; }

/* project page */
.lead { color: var(--th-text) !important; }
.pillar-num { color: var(--th-gold) !important; }
.pillar-hero { border-color: var(--th-rule) !important; }
.subtheme-btn {
  background-color: var(--th-surface) !important;
  color: var(--th-link) !important;
  border-left-color: var(--th-gold) !important;
}
.subtheme-btn:hover, .subtheme-btn.active { background-color: var(--th-surface-2) !important; }
.subtheme-btn:after { color: var(--th-gold) !important; }
.pub-logo { border-radius: 4px; }

/* group page */
.section-title { border-left-color: var(--th-gold) !important; }
.member-card, .intro-box, .visitor-list {
  background: var(--th-surface) !important;
  border: 1px solid var(--th-rule) !important;
  box-shadow: none !important;
}
.member-card { background: #fbfaf7 !important; }
.member-card:hover { box-shadow: 0 6px 18px rgba(60, 45, 25, 0.12) !important; border-color: #cbbfae !important; }
.member-photo { border-color: var(--th-rule) !important; }
.member-name, .visitor-name { color: var(--th-ink) !important; }
.member-role, .visitor-role, .section-note, .visitor-affiliation, .visitor-period { color: var(--th-muted) !important; }
.member-info, .visitor-interest { color: var(--th-text) !important; }
.visitor-item { border-color: var(--th-rule) !important; }

/* positions page */
.box {
  background-color: var(--th-surface) !important;
  border: 1px solid var(--th-rule);
  box-shadow: none !important;
  color: var(--th-text);
}

/* footer */
footer { color: var(--th-muted) !important; }

/* ---------- typography ----------
   Sans (Inter) for reading text, serif (Source Serif 4) for titles, one modular scale. */
html { font-size: 16px; }
body, body.w3-light-grey {
  font-family: var(--th-sans) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  font-feature-settings: "kern", "liga", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
p, li, td, th, button, .w3-button, .accordion, .panel, .box, .member-card, .lead { font-family: var(--th-sans) !important; }
h1, h2, h3, h4, h5, h6 { font-family: var(--th-serif) !important; line-height: 1.25 !important; }
h1 { font-size: 2.6rem !important; font-weight: 600 !important; letter-spacing: -0.015em !important; }
h2 { font-size: 1.75rem !important; font-weight: 600 !important; letter-spacing: -0.01em !important; margin-top: 1.6em !important; }
h3 { font-size: 1.3rem !important; font-weight: 600 !important; }
h4 { font-size: 1.1rem !important; font-weight: 600 !important; }
p { margin: 0 0 0.9em; }
strong, b { font-weight: 600 !important; }

/* news list: slightly smaller, airy, titles in semibold */
ul > li { font-size: 15.5px; line-height: 1.7; margin-bottom: 0.35em; }
ul ul > li, .panel li { font-size: 14.5px; }

/* navigation */
.w3-top .w3-button { font-family: var(--th-sans) !important; font-size: 15px !important; font-weight: 500 !important; letter-spacing: 0.02em; }

/* project page */
.lead { font-size: 17px !important; line-height: 1.7 !important; }
.subtheme-btn, .accordion { font-size: 15px !important; font-weight: 500 !important; }
.pub-info { font-size: 15px !important; }
.pub-venue { font-size: 13px !important; letter-spacing: 0.02em; }

/* group page */
.member-name { font-family: var(--th-serif) !important; font-size: 1.25rem !important; font-weight: 600 !important; }
.member-role { font-size: 0.85rem !important; letter-spacing: 0.06em; text-transform: uppercase; }
.member-info { font-size: 0.93rem !important; line-height: 1.65 !important; }
.member-links a { font-size: 0.9rem; font-weight: 500; }

/* footer */
footer, footer p { font-size: 13px !important; letter-spacing: 0.02em; color: var(--th-muted) !important; }
.intro-box h1, .intro-box h2, .box > h2:first-child, .box > h3:first-child { margin-top: 0 !important; }

/* links stand out from body text: Nature blue, medium weight, underline on hover */
a, a:link, a:visited { font-weight: 500; text-decoration: none !important; }
.w3-top a, .w3-top a:link, .w3-top a:visited { text-decoration: none; }
a:hover, a:focus { text-decoration: none !important; }
.w3-top a { font-weight: 500; }