/* ------------------------------------------------------------------ */
/* Design tokens                                                       */
/* ------------------------------------------------------------------ */
:root {
  --navy: #232d4b;
  --navy-light: #2f3d63;
  --orange: #e57200;
  --orange-dark: #c46200;
  --bg: #ffffff;
  --bg-alt: #f5f6f8;
  --text: #24262b;
  --text-muted: #5a5f6b;
  --border: #e2e4e9;
  --max-width: 960px;
  --radius: 8px;
  --shadow: 0 1px 3px rgba(35, 45, 75, 0.08), 0 1px 2px rgba(35, 45, 75, 0.06);
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: Georgia, "Times New Roman", serif;
  /* Word-cloud theme hues (dark-on-white, WCAG-validated). See tools/README.md. */
  --theme-epi: #c1121f;
  --theme-evoeco: #2e7d32;
  --theme-migration: #7b2cbf;
  --theme-social: #1a5fb4;
  --theme-methods: #5b6473;
  --theme-neutral: #9aa0ab;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  font-size: 16px;
}

a {
  color: var(--navy);
  text-decoration: none;
}

a:hover {
  color: var(--orange);
  text-decoration: underline;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--navy);
  line-height: 1.25;
  margin: 0 0 0.5em;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; }

ul { margin: 0 0 1em; padding-left: 1.25em; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ------------------------------------------------------------------ */
/* Header / nav                                                        */
/* ------------------------------------------------------------------ */
.site-header {
  background: var(--navy);
  border-bottom: 4px solid var(--orange);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-top: 14px;
  padding-bottom: 14px;
  gap: 12px;
}

.site-title {
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: bold;
  letter-spacing: 0.02em;
}

.site-title a {
  color: #fff;
}

.site-title a:hover {
  color: var(--orange);
  text-decoration: none;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.site-nav a {
  color: #dfe3ee;
  padding: 8px 12px;
  border-radius: var(--radius);
  font-size: 0.95rem;
}

.site-nav a:hover,
.site-nav a.active {
  color: #fff;
  background: var(--navy-light);
  text-decoration: none;
}

.site-nav a.active {
  box-shadow: inset 0 -3px 0 var(--orange);
}

/* ------------------------------------------------------------------ */
/* Hero (home page)                                                     */
/* ------------------------------------------------------------------ */
.hero {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}

.hero .container {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-top: 40px;
  padding-bottom: 40px;
  flex-wrap: wrap;
}

.hero-photo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  background: #d8dbe3;
  border: 3px solid #fff;
  box-shadow: var(--shadow);
  flex-shrink: 0;
}

.hero-info { flex: 1; min-width: 260px; }

.hero-info h1 { margin-bottom: 0.15em; }

.hero-role {
  color: var(--orange-dark);
  font-weight: 600;
  margin-bottom: 0.5em;
}

.hero-affil {
  color: var(--text-muted);
  margin-bottom: 1em;
}

.hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hero-links a {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--navy);
  border-radius: 20px;
  font-size: 0.9rem;
  color: var(--navy);
}

.hero-links a:hover {
  background: var(--navy);
  color: #fff;
  text-decoration: none;
}

.hero-links a.btn-primary {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}

.hero-links a.btn-primary:hover {
  background: var(--orange-dark);
  border-color: var(--orange-dark);
}

/* ------------------------------------------------------------------ */
/* Sections                                                             */
/* ------------------------------------------------------------------ */
main section {
  padding: 40px 0;
  border-bottom: 1px solid var(--border);
}

main section:last-child { border-bottom: none; }

.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 1.25em;
}

.section-heading .view-all {
  font-size: 0.9rem;
  white-space: nowrap;
}

/* Tag list (research interests) */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 1em;
}

.tag-list li {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 0.9rem;
  color: var(--navy);
}

.tag-group-label {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 1em 0 0.5em;
}

.tag-group-label:first-child { margin-top: 0; }

/* Timeline (experience / education) */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--border);
}

.timeline li {
  position: relative;
  padding: 0 0 1.1em 20px;
}

.timeline li::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--orange);
}

.timeline .tl-dates {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 600;
}

.timeline .tl-role {
  font-weight: 600;
}

.timeline .tl-org {
  color: var(--text-muted);
}

/* Publication list */
.pub-list {
  margin: 0;
  padding: 0;
}

ul.pub-list {
  list-style: none;
}

ol.pub-list {
  list-style: decimal;
  padding-left: 1.5em;
}

ol.pub-list::marker,
ol.pub-list li::marker {
  color: var(--orange-dark);
  font-weight: 600;
}

.pub-list li {
  padding: 10px 0 10px 8px;
  border-bottom: 1px solid var(--border);
}

.pub-list li:last-child { border-bottom: none; }

.pub-year {
  margin: 1.75em 0 0.4em;
  padding-bottom: 0.25em;
  font-size: 1rem;
  color: var(--orange-dark);
  border-bottom: 1px solid var(--border);
}

.pub-year:first-of-type {
  margin-top: 0;
}

.badge {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 8px;
  vertical-align: middle;
}

/* Abstract disclosure (publications page) */
.abs {
  display: inline;            /* keeps the pill on the citation's last line */
}

.abs > summary {
  display: inline-block;
  list-style: none;
  cursor: pointer;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 1px 8px;
  margin-left: 6px;
  border: 1px solid var(--navy);
  border-radius: 10px;
  color: var(--navy);
  background: transparent;
  vertical-align: middle;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  transition: background 0.12s ease, color 0.12s ease;
}

.abs > summary::-webkit-details-marker { display: none; }
.abs > summary::marker { content: ""; }

.abs > summary::after { content: " +"; opacity: 0.7; }
.abs[open] > summary::after { content: " \2212"; }

.abs > summary:hover,
.abs[open] > summary {
  background: var(--navy);
  color: #fff;
}

.abs > summary:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

/* block child inside the inline <details> breaks onto its own line */
.abs-body {
  display: block;
  margin-top: 8px;
  padding: 11px 14px;
  background: var(--bg-alt);
  border-left: 3px solid var(--orange);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text);
}

.abs-body p { margin: 0 0 0.7em; }
.abs-body p:last-child { margin-bottom: 0; }

/* Card grid (open data & software) */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.card {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}

.card h3 {
  font-size: 1rem;
  margin-bottom: 0.35em;
}

.card p {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 0.5em;
}

/* Publications page category nav */
.pub-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 0.5em;
}

.pub-toc a {
  padding: 6px 12px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 0.85rem;
}

.pub-toc a:hover { text-decoration: none; background: var(--navy); color: #fff; }

/* Plain grouped lists (funding, awards, mentoring, outreach) */
.entry-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.entry-list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.entry-list li:last-child { border-bottom: none; }

.entry-title { font-weight: 600; }

.entry-meta {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.entry-sub {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-top: 2px;
}

.reviewer-list {
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* Page hero (non-home pages) */
.page-hero {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  padding: 32px 0;
}

.page-hero h1 { margin-bottom: 0.2em; }
.page-hero p { color: var(--text-muted); margin: 0; }

/* ------------------------------------------------------------------ */
/* Footer                                                               */
/* ------------------------------------------------------------------ */
.site-footer {
  background: var(--navy);
  color: #c3c8d6;
  padding: 28px 0;
  font-size: 0.85rem;
}

.site-footer a { color: #dfe3ee; }
.site-footer a:hover { color: var(--orange); }

.footer-links {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* ------------------------------------------------------------------ */
/* Word cloud (home page "Research Themes")                            */
/* ------------------------------------------------------------------ */
/* The word-cloud controls/legend/play button set their own display, which
   would override the UA [hidden] rule. Keep [hidden] authoritative so they stay
   hidden until JS reveals them (and with JS off / reduced motion). */
[hidden] { display: none !important; }

/* ------------------------------------------------------------------ */
/* Home: research visualization carousel (themes <-> network)          */
/* ------------------------------------------------------------------ */
/* Tabs toggle between the two home-page visualizations. Built by
   js/viz-carousel.js; with JS off the panels stack (both visible), each keeping
   its own <h2>, so the section still works. */
.viz-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 22px;
}

/* Each tab reads as a switchable section title (heading font, not a chip). */
.viz-tab {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--text-muted);
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  margin: 0;
  padding: 2px 2px 6px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.viz-tab:hover { color: var(--navy); }

.viz-tab[aria-selected="true"] {
  color: var(--navy);
  border-bottom-color: var(--orange);
}

.viz-tab:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Enhanced (JS on): the two panels overlap in one grid cell and only the active
   one shows. The inactive panel uses visibility:hidden (NOT display:none) so the
   word cloud / network can still measure text via getBBox while off-screen, and
   so assistive tech skips it. Overlapping keeps the section height stable (no
   jump when toggling). */
.viz-enhanced .viz-stack {
  display: grid;
}

.viz-enhanced .viz-panel {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.viz-enhanced .viz-panel.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* With the <h2> hidden, the intro no longer needs to tuck under it. */
.viz-enhanced .viz-panel .wc-intro,
.viz-enhanced .viz-panel .cn-intro {
  margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .viz-enhanced .viz-panel { transition: none; }
}

.wc-intro {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-top: -0.5em;
}

.wc-cloud {
  width: 100%;
  min-height: 120px;
}

svg.wc {
  display: block;
  width: 100%;
  height: auto;
  max-height: 380px;
  overflow: visible;
}

/* Each word is an <a> wrapping an SVG <text>. */
.wc-word text {
  font-family: var(--font-heading);
  fill: var(--theme-neutral);
  cursor: pointer;
  transition: fill 0.15s ease, opacity 0.15s ease;
}

.wc-word[data-theme="epi"] text { fill: var(--theme-epi); }
.wc-word[data-theme="evoeco"] text { fill: var(--theme-evoeco); }
.wc-word[data-theme="migration"] text { fill: var(--theme-migration); }
.wc-word[data-theme="social"] text { fill: var(--theme-social); }
.wc-word[data-theme="methods"] text { fill: var(--theme-methods); }
.wc-word[data-theme="neutral"] text { fill: var(--theme-neutral); }

/* Override the global a:hover underline — each word is an <a>, but the cloud
   uses bold (not underline) as its hover cue. */
.wc-word,
.wc-word:hover,
.wc-word:focus-visible { text-decoration: none; }

.wc-word:hover text,
.wc-word:focus-visible text {
  font-weight: bold;
}

.wc-word:focus-visible text {
  outline: none;
}
.wc-word:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 1px;
  border-radius: 3px;
}

/* When one word is emphasized, its siblings recede. */
.wc-cloud.is-hovering .wc-word:not(:hover):not(:focus-visible) text {
  opacity: 0.28;
}

/* When a legend theme is previewed or pinned, words of other themes recede. */
.wc-word.wc-off text {
  opacity: 0.1;
}

/* Legend — reuses the tag-list vocabulary. */
.wc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  list-style: none;
  padding: 0;
  margin: 1.25em 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.wc-legend li {
  display: flex;
  align-items: center;
}

/* Each legend entry is a toggle button: hover/focus previews a theme, click pins it. */
.wc-legend-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  margin: 0;
  padding: 3px 6px;
  border-radius: 5px;
  font: inherit;
  color: inherit;
  line-height: 1.2;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.wc-legend-btn:hover {
  color: var(--navy);
  background: rgba(35, 45, 75, 0.06);
}

.wc-legend-btn:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 1px;
}

.wc-legend-btn[aria-pressed="true"] {
  color: var(--navy);
  font-weight: 600;
  background: rgba(35, 45, 75, 0.08);
}

.wc-legend .wc-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

.wc-legend-btn[aria-pressed="true"] .wc-swatch {
  box-shadow: 0 0 0 2px rgba(35, 45, 75, 0.25);
}

/* ------------------------------------------------------------------ */
/* Home: co-author collaboration network                               */
/* ------------------------------------------------------------------ */
.cn-intro {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-top: -0.5em;
}

.cn-graph {
  width: 100%;
  min-height: 120px;
}

svg.cn {
  display: block;
  width: 100%;
  height: auto;
  max-height: 460px;
  overflow: visible;
}

/* Edges: faint at rest so the bubbles lead; a hovered node's ties light up. */
.cn-edge {
  stroke: var(--navy);
  stroke-opacity: 0.16;
  stroke-linecap: round;
  transition: stroke-opacity 0.15s ease;
}

.cn-circle {
  stroke: rgba(35, 45, 75, 0.35);
  stroke-width: 1;
  transition: opacity 0.15s ease;
}

/* Each node is an <a> wrapping a <circle> + <text> label. */
.cn-node { text-decoration: none; }
.cn-node,
.cn-node:hover,
.cn-node:focus-visible { text-decoration: none; }

.cn-label {
  font-family: var(--font-heading);
  fill: #fff;
  /* White halo so the label stays legible over any bubble color. */
  paint-order: stroke;
  stroke: rgba(35, 45, 75, 0.55);
  stroke-width: 2.5px;
  stroke-linejoin: round;
  pointer-events: none;
  cursor: pointer;
}

/* Labels dropped beneath a too-small bubble sit on the page background, so they
   flip to dark ink with a white halo instead. */
.cn-label-below {
  fill: var(--navy);
  stroke: #fff;
  stroke-width: 2.5px;
}

.cn-node:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: 4px;
}

.cn-node:hover .cn-circle,
.cn-node:focus-visible .cn-circle {
  stroke: var(--navy);
  stroke-width: 2;
}

/* Emphasis: when a node is active, its neighborhood stays lit and the rest fade
   (mirrors the word cloud's "siblings recede" behavior). */
.cn.cn-active .cn-node.cn-off { opacity: 0.22; }
.cn.cn-active .cn-edge.cn-off { stroke-opacity: 0.05; }
.cn.cn-active .cn-edge.cn-on { stroke-opacity: 0.5; }

/* ------------------------------------------------------------------ */
/* Publications: cross-page term filter (from the word cloud)          */
/* ------------------------------------------------------------------ */
.pub-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius);
  padding: 12px 16px;
  margin: 0 0 1.5em;
  font-size: 0.92rem;
}

.pub-banner strong { color: #fff; }

.pub-banner .pub-banner-term {
  color: #ffd9b0;
}

.pub-banner .pub-banner-close {
  margin-left: auto;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  border-radius: 16px;
  padding: 3px 12px;
  font-size: 0.82rem;
  font-family: var(--font-body);
  cursor: pointer;
  white-space: nowrap;
}

.pub-banner .pub-banner-close:hover {
  background: var(--orange);
  border-color: var(--orange);
}

/* Screen-reader-only utility. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 640px) {
  .hero .container { flex-direction: column; text-align: center; }
  .hero-links { justify-content: center; }
  .site-header .container { flex-direction: column; align-items: flex-start; }
  h1 { font-size: 1.6rem; }
  svg.wc { max-height: 300px; }
  /* Smaller, tighter tabs on phones so the two fit as a toggle rather than
     reading as two stacked headings. */
  .viz-tab { font-size: 1.2rem; padding-bottom: 4px; }
  .viz-tabs { gap: 2px 16px; }
}