:root {
  --paper: #faf9f4;
  --ink: #171611;
  --muted: #8f897e;
  --faint: #d9d5ca;
  --accent: #c3412b;
  --sidebar-w: 390px;

  /* Fonts — change any one line and the whole site follows.
     Headline font: switch by commenting/uncommenting the two lines below.
     --font-headings is currently SERIF (Source Serif 4). */
  --font-headings: "Source Serif 4", Georgia, "Times New Roman", serif;  /* current: serif */
  /* --font-headings: "Inter", Arial, Helvetica, sans-serif; */          /* alt: sans (sidebar look) */
  --font-body: "Source Serif 4", Georgia, "Times New Roman", serif; /* reading text */
  --font-meta: "IBM Plex Mono", "Courier New", monospace;          /* labels, numbers, meta */
  --font-brand: "Inter", Arial, Helvetica, sans-serif;               /* sidebar wordmark (always sans) */

  /* Type scale — one place to tune every size (clamps handle smaller screens) */
  --fs-hero: clamp(34px, 3.3vw, 52px);    /* h1 name */
  --fs-section: clamp(30px, 2.9vw, 45px); /* h2 section titles */
  --fs-section-md: clamp(28px, 2.5vw, 38px); /* h2 secondary sections (Data, Open Source) */
  --fs-h3: 18px;                           /* h3 sub-section headings */
  --fs-title: 20px;                        /* item titles: papers, datasets, packages, awards */
  --fs-body: 17px;
  --fs-lead: clamp(17px, 1.4vw, 22px);   /* bio lead paragraphs */
  --fs-kicker: 13px;                       /* uppercase mono kickers */
  --fs-meta: 12px;
  --fs-tiny: 11px;
  --fs-label: 10px;                        /* tiny uppercase labels */

  /* Tracking — "editorial kerning": subtle negative letter-spacing scaled by size.
     Tuned for serif display type (loose; serifs cramp under tight tracking).
     If you switch --font-headings back to Inter, re-tighten to these values:
     --ls-hero:-0.045em --ls-section:-0.035em --ls-jmp:-0.025em --ls-h3:-0.015em --ls-title:-0.012em */
  --ls-hero: -0.015em;
  --ls-section: -0.01em;
  --ls-h3: -0.003em;
  --ls-title: 0;
  --ls-label: 0.08em;                      /* uppercase kicker/label tracking */
  --ls-brand: -0.045em;                    /* sidebar wordmark (sans, tight editorial) */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover { color: var(--accent); }
::selection { background: #ead5cd; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.page-wrapper { min-height: 100vh; }

/* Left editorial rail — modelled on the reference page. */
.site-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  width: var(--sidebar-w);
  padding: 96px 50px 48px 44px;
  background: var(--paper);
  overflow-y: auto;
}
.sidebar-rule {
  width: 205px;
  height: 4px;
  background: var(--ink);
  margin-bottom: 27px;
}
.sidebar-brand {
  display: inline-block;
  /* Always sans — independent of the --font-headings switch. */
  font-family: var(--font-brand);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: var(--ls-brand);
  line-height: 1.02;
  margin-bottom: 44px;
}
.sidebar-meta {
  display: grid;
  gap: 7px;
  font-family: var(--font-meta);
  font-size: 15px;
  line-height: 1.35;
  margin-bottom: 60px;
}
.sidebar-meta strong {
  color: var(--accent);
  font-weight: 500;
}
.sidebar-nav {
  display: grid;
  gap: 8px;
  font-family: var(--font-meta);
  font-size: 15px;
  line-height: 1.35;
  margin-bottom: 18px;
}
.sidebar-nav a:hover { color: var(--accent); }
.sidebar-nav a[aria-current="page"] {
  color: var(--accent);
  box-shadow: inset 2px 0 0 var(--accent);
}
/* Research subheadings — compact sub-TOC in the sidebar (scroll-spy highlights the active one) */
.sidebar-filter {
  display: grid;
  gap: 6px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--faint);
  font-family: var(--font-meta);
  font-size: var(--fs-kicker);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
}
.sidebar-filter a { color: var(--muted); }
.sidebar-filter a:hover { color: var(--accent); }
.sidebar-filter a[aria-current="page"] {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sidebar-divider {
  height: 1px;
  background: var(--faint);
  margin: 56px 0 28px;
}
.sidebar-note {
  max-width: 260px;
  font-family: var(--font-meta);
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 22px;
}
.sidebar-links {
  display: grid;
  gap: 8px;
  font-family: var(--font-meta);
  font-size: 14px;
  color: var(--accent);
}

/* Main column */
.layout-container {
  width: min(1120px, calc(100vw - var(--sidebar-w) - 80px));
  margin-left: calc(var(--sidebar-w) + 86px);
  padding: 132px 0 110px;
}

.hero-header {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 22px;
  align-items: start;
  margin-bottom: 118px;
}
.hero-number {
  grid-column: 1;
  font-family: var(--font-meta);
  font-size: 15px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-top: 12px;
}
.hero-main {
  grid-column: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.hero-title {
  order: 1;
  margin: 0 0 14px;
  max-width: 760px;
  font-family: var(--font-headings);
  font-size: var(--fs-hero);
  font-weight: 700;
  font-style: normal;
  line-height: 1.04;
  letter-spacing: var(--ls-hero);
}
.hero-kicker-alt {
  order: 2;
  font-family: var(--font-meta);
  font-size: var(--fs-kicker);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--muted);
  margin-bottom: 4px;
}
.hero-affil-text-flat,
.hero-affil-last {
  order: 3;
  margin: 0;
  font-family: var(--font-meta);
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
}
.hero-affil-last { order: 4; margin-bottom: 29px; }
.bio-p,
.bio-p-second {
  order: 5;
  max-width: 790px;
  margin: 0 0 20px;
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: 1.45;
  letter-spacing: -0.012em;
  text-align: justify;
  hyphens: auto;
  color: #2d2a24;
}
.bio-p-second { order: 6; }
.advisor-note {
  order: 7;
  margin: 14px 0 0;
  font-family: var(--font-meta);
  font-size: 13px;
  font-style: normal;
  color: var(--muted);
}
.hero-main a,
.advisor-note a { color: var(--accent); }

/* Research areas — moved into the main column so the content aligns with the bio. */
.hero-areas {
  order: 8;
  margin: 26px 0 0;
  font-family: var(--font-meta);
  font-size: 13px;
  line-height: 1.55;
}
.hero-areas-label {
  display: block;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--muted);
  margin-bottom: 5px;
}
.hero-areas-list { display: block; color: var(--ink); }
.hero-areas-cv {
  display: inline-block;
  margin-top: 8px;
  color: var(--accent);
}
/* Headshot — shown in the sidebar under the brand (sanctioned deviation from the hidden-headshot reference). */
.site-sidebar .headshot-figure {
  width: min(200px, 100%);
  margin: 0 0 42px;
  line-height: 0;
  border: 1px solid var(--faint);
}
.site-sidebar .headshot-image {
  display: block;
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
}
/* Mobile hero portrait — replaces the sidebar portrait on ≤860px, sitting beside the name/affiliations. */
.hero-headshot {
  display: none;
  width: 112px;
  aspect-ratio: 4/5;
  object-fit: cover;
  border: 1px solid var(--faint);
}
.hr { display: none; }

/* Mobile persistent header — hidden on desktop; sticky top bar ≤860px (see media query). */
.mobile-header { display: none; }

/* Section language: red mono index + large serif heading. */
.section-scroll-target,
.scroll-target { scroll-margin-top: 36px; }
.section-scroll-target { margin-bottom: 112px; }
.section-head {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 22px;
  align-items: baseline;
  margin: 0 0 46px;
}
.section-num {
  font-family: var(--font-meta);
  font-size: 15px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: 0;
  color: var(--accent);
}
.section-title-wrap,
.section-title-wrap-flex {
  border: 0;
  padding: 0;
}
.section-title-wrap-flex {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.section-title,
.section-title-md {
  margin: 0;
  font-family: var(--font-headings);
  font-size: var(--fs-section);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: var(--ls-section);
}
.section-title-md { font-size: var(--fs-section-md); }
.brand-icon-wrap { opacity: .6; }
.brand-icon-img { height: 15px; }

/* Featured paper — no card chrome, just editorial hierarchy. */
.jmp-card {
  margin: 0 0 76px 78px;
  padding: 0;
  background: transparent;
  border: 0;
  max-width: 850px;
}
.jmp-kicker {
  display: block;
  margin: 0 0 14px;
  font-family: var(--font-meta);
  font-size: var(--fs-kicker);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--accent);
}
.jmp-title {
  margin: 0 0 24px;
  font-family: var(--font-headings);
  font-size: var(--fs-title);  /* same size as the other research item titles */
  font-weight: 700;
  font-style: normal;
  line-height: 1.18;
  letter-spacing: var(--ls-title);
  max-width: 780px;
}
.abstract-jmp {
  margin: 0;
  max-width: 820px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: #4d4840;
  text-align: justify;
  hyphens: auto;
}
.grant-note {
  margin: 22px 0 0;
  max-width: 760px;
  font-family: var(--font-meta);
  font-size: 12px;
  line-height: 1.6;
  font-style: normal;
  color: var(--muted);
}
.jmp-card a,
.grant-note a { color: var(--accent); }

.subsection-heading {
  margin: 70px 0 32px 78px;
  padding-top: 20px;
  max-width: 820px;
  border-top: 1px solid var(--faint);
  font-family: var(--font-meta);
  font-size: var(--fs-kicker);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--accent);
}
.paper-entry,
#research > div:last-child {
  margin: 0 0 48px 78px;
  max-width: 820px;
}
.paper-title,
.paper-title-margin,
.dataset-title {
  display: block;
  margin: 0 0 7px;
  font-family: var(--font-headings);
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: var(--ls-title);
}
.dataset-desc,
.paper-coauthors-flat,
.dataset-entry-margin {
  margin: 0 0 13px;
  font-family: var(--font-meta);
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
}
.dataset-grant-tag-alt { color: var(--accent); font-style: normal; }
.paper-entry a,
#research > div:last-child a { color: var(--accent); }
.abstract-wip {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: #4d4840;
  text-align: justify;
  hyphens: auto;
}

/* Two-column data/open-source area */
.datasets-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 78px;
  margin-bottom: 112px;
}
.datasets-grid .section-head { margin-bottom: 34px; }
.code-card-flat,
.code-card {
  padding: 24px 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--faint);
}
.code-card-flat:first-of-type { border-top: 0; padding-top: 0; }
.code-title {
  font-family: var(--font-headings);
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: var(--ls-title);
}
a.code-title { color: var(--ink); }
a.code-title:hover { color: var(--accent); }
/* People links — co-authors, supervisors, course instructors */
.bio-p a,
.paper-coauthors-flat a,
.dataset-desc a,
.eval-course-teachers a {
  color: var(--accent);
}
.bio-p a:hover,
.paper-coauthors-flat a:hover,
.dataset-desc a:hover,
.eval-course-teachers a:hover {
  color: #a03a26;
}
.code-card-tag {
  margin-left: 7px;
  font-family: var(--font-meta);
  font-size: 11px;
  font-style: normal;
  color: var(--accent);
}
.code-card-desc {
  margin: 9px 0 0;
  font-size: 14px;
  line-height: 1.65;
  color: #575147;
}
.code-card-doc {
  margin: 10px 0 0;
  font-family: var(--font-meta);
  font-size: 11px;
  line-height: 1.5;
  font-style: normal;
  color: var(--muted);
}
.code-card-desc a,
.code-card-doc a { color: var(--accent); }
.sparkline-container { display: flex; align-items: center; gap: 10px; margin-top: 13px; }
.sparkline-svg { display: block; overflow: visible; }
.sparkline-label { font-family: var(--font-meta); font-size: 10px; color: var(--muted); white-space: nowrap; }

/* Teaching and presentations */
.awards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 48px;
  margin: 0 0 56px 78px;
  padding: 0;
  max-width: 840px;
  border: 0;
}
.award-title { font-family: var(--font-headings); font-size: var(--fs-title); font-weight: 700; line-height: 1.3; letter-spacing: var(--ls-title); }
.award-sub { margin-top: 5px; font-family: var(--font-meta); font-size: 11px; line-height: 1.5; font-style: normal; color: var(--muted); }
.eval-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 56px 0 0 78px;
  padding: 0 0 13px;
  max-width: 840px;
  border-bottom: 1px solid var(--faint);
  font-family: var(--font-headings);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: var(--ls-h3);
}
.table-subheading-tag {
  font-family: var(--font-meta);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
}
.eval-row,
.eval-row-margin {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: flex-start;
  margin: 0 0 0 78px;
  padding: 22px 0;
  max-width: 840px;
  border-bottom: 1px solid var(--faint);
}
.eval-row-margin { margin-bottom: 42px; }
.eval-course-info { flex: 1 1 380px; }
.eval-course-sub,
.eval-course-teachers,
.presentation-item {
  margin-top: 5px;
  font-family: var(--font-meta);
  font-size: 11px;
  line-height: 1.55;
  font-style: normal;
  color: var(--muted);
}
.eval-scores-container {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 15px;
  justify-content: flex-end;
  max-width: 360px;
}
.eval-link,
.eval-link-highlight,
.eval-feedback-single,
.eval-feedback-list {
  font-family: var(--font-meta);
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.eval-link-highlight,
.eval-score-accent,
.eval-feedback-single,
.eval-feedback-list { color: var(--accent); }
.eval-score-normal { color: #625c53; }
#presentations .code-card-flat,
#presentations > div:not(.section-head),
#media .code-card-flat,
#media > div:not(.section-head) {
  margin-left: 78px;
  max-width: 840px;
}

.footer-container {
  margin-left: var(--sidebar-w);
  border-top: 1px solid var(--faint);
  padding: 52px 0 62px;
}
.footer-grid {
  width: min(1030px, calc(100vw - var(--sidebar-w) - 120px));
  margin-left: 86px;
  display: grid;
  grid-template-columns: 1.15fr 1fr .5fr;
  gap: 48px;
}
.footer-col-title-bold {
  margin-bottom: 12px;
  font-family: var(--font-meta);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
}
.footer-address,
.footer-col-italic {
  font-family: var(--font-meta);
  font-size: 11px;
  line-height: 1.7;
  font-style: normal;
  color: var(--muted);
}
.footer-container a { color: var(--accent); }
.footer-address strong { color: var(--ink); }
.style-text-align-right { text-align: right; }

@media (max-width: 1180px) {
  :root { --sidebar-w: 315px; }
  .site-sidebar { padding-left: 32px; padding-right: 32px; }
  .sidebar-rule { width: 180px; }
  .layout-container { margin-left: calc(var(--sidebar-w) + 52px); width: calc(100vw - var(--sidebar-w) - 86px); }
  .hero-header { grid-template-columns: 46px minmax(0,1fr); }
  .section-head { grid-template-columns: 46px minmax(0,1fr); }
  .hero-main { grid-column: 2; }
  .footer-grid { margin-left: 52px; }
}

@media (max-width: 860px) {
  /* The whole sidebar hides on mobile — the portrait moves into the hero beside the name/affiliations */
  .site-sidebar { display: none; }
  /* Hero: number | portrait | name+affiliations */
  .hero-header { grid-template-columns: 46px 112px minmax(0, 1fr); column-gap: 16px; }
  .hero-headshot { display: block; grid-column: 2; grid-row: 1; }
  .hero-main { grid-column: 3; }
  .mobile-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: block;
    padding: 10px 28px;
    background: var(--paper);
    border-bottom: 1px solid var(--faint);
  }
  .mobile-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 5px 14px;
    font-family: var(--font-meta);
    font-size: 14px;
    line-height: 1.2;
  }
  .mobile-brand {
    font-family: var(--font-brand);
    font-size: 16px;
    font-weight: 650;
    letter-spacing: var(--ls-brand);
    line-height: 1.2;
    white-space: nowrap;
    margin-right: 6px;
  }
  .mobile-nav a { padding: 3px 0; }
  .mobile-nav a:hover { color: var(--accent); }
  .mobile-nav a[aria-current="page"] { color: var(--accent); }
  /* keep section headings clear of the sticky header on anchor jumps */
  .section-scroll-target,
  .scroll-target,
  .layout-container { scroll-margin-top: 130px; }
  .layout-container { width: auto; margin: 0; padding: 70px 28px 90px; }
  .footer-container { margin-left: 0; }
  .footer-grid { width: auto; margin: 0; padding: 0 28px; }
}

@media (max-width: 680px) {
  .layout-container { padding-top: 44px; }
  /* Number above; then portrait beside the name/affiliations */
  .hero-header { grid-template-columns: 112px minmax(0, 1fr); column-gap: 16px; row-gap: 14px; margin-bottom: 48px; }
  .hero-number { grid-column: 1 / -1; grid-row: 1; font-size: 13px; padding-top: 0; }
  .hero-headshot { grid-column: 1; grid-row: 2; }
  .hero-main { grid-column: 2; grid-row: 2; }
  .section-head { grid-template-columns: minmax(0, 1fr); row-gap: 8px; margin-bottom: 28px; }
  .section-num { font-size: 13px; }
  .jmp-card,
  .subsection-heading,
  .paper-entry,
  #research > div:last-child,
  .awards-grid,
  .eval-heading,
  .eval-row,
  .eval-row-margin,
  #presentations .code-card-flat,
  #presentations > div:not(.section-head),
  #media .code-card-flat,
  #media > div:not(.section-head) { margin-left: 0; }
  .jmp-card { margin-bottom: 40px; }
  .subsection-heading { margin-top: 44px; }
  .datasets-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .awards-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-container { padding: 40px 0 56px; }
  .section-scroll-target { margin-bottom: 76px; }
  .style-text-align-right { text-align: left; }
}

@media (max-width: 430px) {
  .site-sidebar { padding-inline: 20px; }
  /* slim bar on phones: nav links only (brand sits in the sidebar block below) */
  .mobile-header { padding: 8px 20px; }
  .mobile-brand { display: none; }
  .mobile-nav { font-size: 13px; gap: 5px 12px; }
  /* header is ~60px here, so less scroll margin is needed */
  .section-scroll-target,
  .scroll-target,
  .layout-container { scroll-margin-top: 90px; }
  .hero-header { grid-template-columns: 112px minmax(0, 1fr); column-gap: 14px; row-gap: 12px; }
  .hero-number { margin-bottom: 0; grid-column: 1 / -1; }
  .hero-headshot { grid-column: 1; grid-row: 2; }
  .hero-main { grid-column: 2; grid-row: 2; }
  .hero-title { text-wrap: balance; }
  .section-head { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .layout-container { padding-inline: 20px; }
  .footer-grid { padding-inline: 20px; }
  /* narrow-column readability: keep justification off narrow screens */
  .bio-p, .bio-p-second, .abstract-jmp, .abstract-wip { text-align: left; }
  /* sparkline stat rows must not overflow the column */
  .sparkline-container { flex-wrap: wrap; row-gap: 6px; }
}