/* Tokens: the softpaws palette (indigo #343251, magenta #e7298a, teal #1b9e77,
   lavender #d1ceff). Vivid shades for decoration; deeper shades where text must
   reach 4.5:1. Chart series follow the plot colour cycle of the papers. */
:root {
  color-scheme: light;
  --bg: #fbfaff;
  --surface: #f2f0fc;
  --text: #1b1a2e;
  --text-2: #46435f;
  --muted: #6b6889;
  --border: #dedbf3;
  --link: #127a5b;          /* teal, deepened for text */
  --link-hover: #c0166f;    /* magenta, deepened for text */
  --heading: #343251;       /* indigo */
  --rule: #e7298a;          /* magenta */
  --accent: #c0166f;
  --accent-soft: #fbe3ef;
  --header-bg: #343251;
  --header-text: #ffffff;
  --header-link: #d1ceff;
  --header-current: #47ffc8;
  --header-hover: #f985c1;
  --series-1: #e7298a;
  --series-2: #66a61e;
  /* Contribution tags: magenta = writing, teal = idea, indigo = mentoring */
  --role-wrote: #a8135f;    --role-wrote-bg: #fbe3ef;    --role-wrote-line: #f3b6d4;
  --role-idea: #0d6b4f;     --role-idea-bg: #d9f2e9;     --role-idea-line: #a6dcc8;
  --role-mentored: #343251; --role-mentored-bg: #e3e0fb; --role-mentored-line: #c3bef2;
  --grid: #e4e1f5;
  --axis: #c3bfe0;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --bg: #17162a; --surface: #232139; --text: #eeedf8; --text-2: #cfcce6; --muted: #a19dc4;
    --border: #36334f; --link: #5fe3b9; --link-hover: #f985c1; --heading: #d1ceff; --rule: #e7298a;
    --accent: #f985c1; --accent-soft: #3a2140; --header-bg: #25233d;
    --grid: #2e2c46; --axis: #45425f;
    --role-wrote: #f985c1; --role-wrote-bg: #3d1f3a; --role-wrote-line: #6b2f5c;
    --role-idea: #5fe3b9; --role-idea-bg: #163a31; --role-idea-line: #24604f;
    --role-mentored: #d1ceff; --role-mentored-bg: #33305a; --role-mentored-line: #4d4985;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #17162a; --surface: #232139; --text: #eeedf8; --text-2: #cfcce6; --muted: #a19dc4;
  --border: #36334f; --link: #5fe3b9; --link-hover: #f985c1; --heading: #d1ceff; --rule: #e7298a;
  --accent: #f985c1; --accent-soft: #3a2140; --header-bg: #25233d;
  --grid: #2e2c46; --axis: #45425f;
    --role-wrote: #f985c1; --role-wrote-bg: #3d1f3a; --role-wrote-line: #6b2f5c;
    --role-idea: #5fe3b9; --role-idea-bg: #163a31; --role-idea-line: #24604f;
    --role-mentored: #d1ceff; --role-mentored-bg: #33305a; --role-mentored-line: #4d4985;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 17px/1.6 var(--font);
}
.wrap { max-width: 860px; margin: 0 auto; padding: 0 16px; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }

/* Header / footer */
.site-header { background: var(--header-bg); border-bottom: 3px solid var(--rule); }
.header-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-top: 14px; padding-bottom: 14px; }
.site-name { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; color: var(--header-text); text-decoration: none; }
.site-name:hover { color: var(--header-hover); }
nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: 0.95rem; }
nav a { color: var(--text-2); text-decoration: none; }
nav a:hover { color: var(--link-hover); }
.site-header nav a { color: var(--header-link); }
.site-header nav a:hover { color: var(--header-hover); }
.site-header nav a[aria-current="page"] { color: var(--header-current); }
nav a[aria-current="page"] { font-weight: 600; }
.theme-toggle { background: none; border: 1px solid rgba(209,206,255,.4); border-radius: 6px; color: var(--header-link); cursor: pointer; font-size: 0.9rem; padding: 2px 8px; }
.site-footer { border-top: 1px solid var(--border); margin-top: 64px; padding: 20px 0; color: var(--muted); font-size: 0.85rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; }

/* Typography: section titles echo the CV (small caps + rule) */
h1 { font-family: var(--serif); font-size: 2.1rem; line-height: 1.2; margin: 40px 0 12px; color: var(--heading); }
h2 { font-variant: small-caps; letter-spacing: 0.02em; font-size: 1.35rem; font-weight: 600; color: var(--heading);
     border-bottom: 2px solid var(--rule); padding-bottom: 2px; margin: 44px 0 14px; }
h3 { font-size: 1.05rem; margin: 24px 0 8px; }
.lede { font-size: 1.08rem; color: var(--text-2); }
.muted { color: var(--muted); }
ul.plain, ul.papers, ul.talks, ul.timeline, ul.theme-links { list-style: none; padding: 0; margin: 0; }
ul.plain > li { margin: 0 0 10px; }

/* Hero */
.hero { display: flex; gap: 36px; align-items: center; justify-content: space-between; }
.hero h1 { margin-top: 36px; }
.hero-text { flex: 1; min-width: 0; }
.pitch { font-size: 1.12rem; line-height: 1.55; }
.portrait { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; flex: none;
            border: 4px solid var(--bg); box-shadow: 0 0 0 3px var(--rule); }
.links { display: flex; flex-wrap: wrap; gap: 8px; }
.button { display: inline-block; border: 1px solid var(--border); border-radius: 6px; padding: 4px 12px; font-size: 0.9rem; text-decoration: none; color: var(--text); background: var(--surface); }
.button:hover { border-color: var(--rule); color: var(--link-hover); }
.button.primary { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.button.primary:hover { background: var(--header-bg); border-color: var(--header-bg); color: #fff; }
@media (max-width: 680px) { .hero { flex-direction: column-reverse; align-items: flex-start; gap: 0; } .portrait { width: 132px; height: 132px; margin-top: 32px; } .hero h1 { margin-top: 20px; } }

/* Stat tiles */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 32px 0; }
.stat { background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--rule); border-radius: 8px; padding: 14px 16px; }
.stat-value { display: block; font-size: 1.7rem; font-weight: 600; line-height: 1.2; color: var(--heading); }
.stat-label { display: block; color: var(--muted); font-size: 0.85rem; }

/* Research */
.theme-links li { margin: 6px 0; }
.toc { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 20px 0; padding-left: 12px; border-left: 3px solid var(--rule); }
.theme { scroll-margin-top: 16px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 18px 0; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; }
.card h3 { margin: 0 0 6px; font-size: 1rem; line-height: 1.35; }
.card h3 a { color: var(--text); text-decoration: none; }
.card h3 a:hover { color: var(--link-hover); }
.card p { margin: 6px 0; font-size: 0.95rem; }

.card .meta { font-size: 0.85rem; color: var(--muted); }
details { margin: 12px 0; }
summary { cursor: pointer; color: var(--link); }

/* Papers */
.paper { margin: 0 0 16px; }
.paper > span { display: block; }
.paper-title { font-weight: 600; }
.paper-title a { color: var(--text); text-decoration: none; }
.paper-title a:hover { color: var(--link-hover); text-decoration: underline; }
.paper-authors { color: var(--text-2); font-size: 0.92rem; }
.paper-meta { color: var(--muted); font-size: 0.88rem; }
.paper-contribution { display: flex !important; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin-top: 3px; font-size: 0.85rem; color: var(--text-2); }
.role { border-radius: 999px; padding: 0 9px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.role-wrote    { background: var(--role-wrote-bg);    color: var(--role-wrote);    border-color: var(--role-wrote-line); }
.role-idea     { background: var(--role-idea-bg);     color: var(--role-idea);     border-color: var(--role-idea-line); }
.role-mentored { background: var(--role-mentored-bg); color: var(--role-mentored); border-color: var(--role-mentored-line); }
.paper-contribution .details { font-style: italic; }
.paper > .tag { display: inline-block; margin-left: 6px; }
.tag { font-size: 0.75rem; border: 1px solid var(--rule); color: var(--accent); border-radius: 4px; padding: 0 5px; vertical-align: 2px; }
.papers.compact .paper { margin-bottom: 10px; }
.papers.compact .paper-authors { display: none; }

/* Talks and CV timelines */
.talks li, .timeline > li { display: grid; grid-template-columns: 8.5em 1fr; gap: 16px; margin: 0 0 14px; }
.talks li { grid-template-columns: 3.5em 1fr; }
.talk-year, .when { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 0.92rem; padding-top: 1px; }
.timeline ul { margin: 6px 0 0; padding-left: 18px; color: var(--text-2); font-size: 0.95rem; }
@media (max-width: 600px) { .timeline > li { grid-template-columns: 1fr; gap: 0; } }
.cv-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; }

/* Charts */
.chart { margin: 28px 0; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; position: relative; }
.chart figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-bottom: 8px; }
.chart-title { font-weight: 600; }
.chart-title .muted { font-weight: 400; font-size: 0.85rem; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.85rem; color: var(--text-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.s1 { background: var(--series-1); } .s2 { background: var(--series-2); }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart svg text { fill: var(--muted); font: 12px var(--font); font-variant-numeric: tabular-nums; }
.chart .gridline { stroke: var(--grid); stroke-width: 1; }
.chart .baseline { stroke: var(--axis); stroke-width: 1; }
.chart .hit { fill: transparent; cursor: default; }
.chart .col.dim rect.seg { opacity: 0.35; }
.chart table { border-collapse: collapse; font-size: 0.88rem; margin-top: 8px; }
.chart th, .chart td { padding: 3px 12px 3px 0; text-align: left; font-variant-numeric: tabular-nums; }
.tooltip { position: absolute; pointer-events: none; background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
           padding: 8px 10px; font-size: 0.82rem; line-height: 1.45; box-shadow: 0 2px 8px rgba(0,0,0,.12); white-space: nowrap; }
.tooltip strong { display: block; margin-bottom: 2px; }
.tooltip .row { display: flex; align-items: center; gap: 6px; color: var(--text-2); }
.tooltip .row b { margin-left: auto; padding-left: 12px; color: var(--text); font-weight: 600; }
@media (forced-colors: active) { .swatch, .chart rect.seg { forced-color-adjust: none; } }

/* Software cards */
.software-list { display: grid; gap: 16px; margin: 24px 0; }
.card.software { display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: start; padding: 18px 20px; border-left: 4px solid var(--rule); }
.card.software .logo { width: 96px; height: 96px; object-fit: contain; background: #fff; border-radius: 10px; padding: 6px; border: 1px solid var(--border); }
.card.software .logo-text { display: flex; align-items: center; justify-content: center; font: 600 1.8rem var(--serif); color: #fff; background: var(--header-bg); border: 0; }
.card.software h2 { border: 0; margin: 0 0 2px; padding: 0; font-variant: normal; letter-spacing: 0; font-size: 1.3rem; }
.card.software h2 a { color: var(--heading); text-decoration: none; }
.card.software h2 a:hover { color: var(--link-hover); }
.card.software .tagline { color: var(--accent); font-weight: 500; margin: 0 0 6px; }
.card.software .actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.meta { font-size: 0.85rem; color: var(--muted); }
.card.software .meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; }
@media (max-width: 600px) { .card.software { grid-template-columns: 1fr; } .card.software .logo { width: 72px; height: 72px; } }
ul.plain .meta span + span::before { content: " · "; }
.software-list.compact { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.software-list.compact .card.software { grid-template-columns: 64px 1fr; gap: 14px; border-left-color: var(--role-idea-line); }
.software-list.compact .card.software .logo { width: 64px; height: 64px; padding: 4px; }
.software-list.compact .card.software h2 { font-size: 1.15rem; }
.software-list.compact .card.software .tagline { color: var(--role-idea); }

/* Home highlights: figure + one result */
.highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin: 18px 0; }
.highlight { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.highlight .figure { display: flex; align-items: center; justify-content: center; height: 210px; background: #fff; border-bottom: 3px solid var(--rule); padding: 10px; }
.highlight .figure img { max-width: 100%; max-height: 100%; object-fit: contain; }
.highlight-body { padding: 12px 16px 14px; }
.highlight h3 { margin: 0 0 6px; font-size: 1.05rem; line-height: 1.3; }
.highlight h3 a { color: var(--heading); text-decoration: none; }
.highlight h3 a:hover { color: var(--link-hover); }
.highlight p { margin: 4px 0; font-size: 0.95rem; }
.highlight .muted { font-size: 0.85rem; }

/* Tag legend on the publications page */
.role-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 0.85rem; color: var(--muted); margin: 8px 0 0; }
.role-legend .role + .role { margin-left: 8px; }
.theme-note { margin: -8px 0 10px; font-size: 0.9rem; color: var(--accent); font-weight: 500; }
.theme.minor h2 { font-size: 1.15rem; }
@media (min-width: 640px) { .cards.cards-2x2 { grid-template-columns: repeat(2, 1fr); } }

/* News */
.news-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.news-card { display: grid; grid-template-columns: 180px 1fr; gap: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.news-card:not(:has(.news-thumb)) { grid-template-columns: 1fr; }
.news-thumb { display: flex; align-items: center; justify-content: center; background: #fff; padding: 8px; border-right: 3px solid var(--rule); }
.news-thumb img { max-width: 100%; max-height: 150px; object-fit: contain; }
.news-body { padding: 12px 16px 12px 0; }
.news-card:not(:has(.news-thumb)) .news-body { padding-left: 16px; border-left: 3px solid var(--rule); }
.news-body h3 { margin: 2px 0 6px; font-size: 1.08rem; line-height: 1.3; }
.news-body h3 a { color: var(--heading); text-decoration: none; }
.news-body h3 a:hover { color: var(--link-hover); }
.news-body p { margin: 4px 0; font-size: 0.95rem; }
.news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 0.82rem; color: var(--muted); margin: 0; }
.news-kind { border-radius: 999px; padding: 0 8px; font-size: 0.75rem; font-weight: 600; }
.kind-paper { background: var(--role-wrote-bg); color: var(--role-wrote); }
.kind-software { background: var(--role-idea-bg); color: var(--role-idea); }
.kind-talk { background: var(--role-mentored-bg); color: var(--role-mentored); }
.news-oneliner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 0.95rem; padding: 2px 0; }
@media (max-width: 600px) {
  .news-card { grid-template-columns: 1fr; }
  .news-thumb { border-right: 0; border-bottom: 3px solid var(--rule); }
  .news-body { padding: 0 14px 12px; }
}
.news-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px !important; font-size: 0.88rem; }
.news-thumb img { max-height: 170px; }

/* Header: room for seven links on one line */
.site-header .wrap, .site-footer .wrap { max-width: 1060px; }
nav { gap: 4px 14px; }