:root {
  --ink: #16191c;
  --muted: #5d6670;
  --line: #d7dce0;
  --paper: #ffffff;
  --wash: #f3f6f7;
  --blue: #1f5d8f;
  --teal: #13736d;
  --dark: #1c2428;
  --content: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0;
}
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover, a:focus-visible { color: var(--blue); }
button, a { -webkit-tap-highlight-color: transparent; }
.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;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 64px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 max(24px, calc((100vw - var(--content)) / 2));
  border-bottom: 1px solid rgba(215, 220, 224, .9);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(12px);
}
.wordmark { font-weight: 800; text-decoration: none; color: var(--ink); }
nav { display: flex; gap: 28px; }
nav a { font-size: 14px; font-weight: 650; text-decoration: none; }
.mobile-nav-toggle {
  display: none;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  background: var(--paper);
  cursor: pointer;
}
.menu-icon {
  position: relative;
  display: block;
  width: 17px;
  height: 13px;
}
.menu-icon span {
  position: absolute;
  left: 0;
  width: 17px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform .18s ease, opacity .18s ease, top .18s ease;
}
.menu-icon span:nth-child(1) { top: 0; }
.menu-icon span:nth-child(2) { top: 5.5px; }
.menu-icon span:nth-child(3) { top: 11px; }
.mobile-nav-toggle[aria-expanded="true"] .menu-icon span:nth-child(1) { top: 5.5px; transform: rotate(45deg); }
.mobile-nav-toggle[aria-expanded="true"] .menu-icon span:nth-child(2) { opacity: 0; }
.mobile-nav-toggle[aria-expanded="true"] .menu-icon span:nth-child(3) { top: 5.5px; transform: rotate(-45deg); }
.language-switch {
  justify-self: end;
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.language-switch button {
  min-width: 38px;
  height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: 4px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.language-switch button.active { color: white; background: var(--ink); }

.intro-band {
  width: min(var(--content), calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(40px, 5vh, 58px) 0 40px;
}
.profile {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: clamp(34px, 5vw, 72px);
  align-items: start;
}
.mobile-identity { display: none; }
.profile-photo-wrap { margin-top: 6px; }
.profile-photo {
  display: block;
  width: 180px;
  height: 232px;
  object-fit: cover;
  object-position: center top;
  filter: saturate(.92) contrast(1.02);
}
.availability {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.availability > span:first-child { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.eyebrow { margin: 0 0 10px; color: var(--blue); font-size: 13px; font-weight: 800; text-transform: uppercase; }
h1, h2, h3, p { letter-spacing: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.lead,
.bio,
.section-heading div > p,
.research-grid p,
.timeline article > div > p:last-child,
.contact h2 { text-wrap: balance; }
h1 { margin: 0; font-size: 56px; line-height: 1.08; }
h1 small { display: block; margin-top: 8px; color: var(--muted); font-size: 17px; font-weight: 500; }
.profile-copy { max-width: 830px; }
.lead { max-width: 820px; margin: 22px 0 14px; font-size: 22px; line-height: 1.55; font-weight: 650; }
.bio { max-width: 820px; margin: 0; color: var(--muted); }
.bio a { color: var(--blue); font-weight: 700; }
.primary-links, .pub-links { display: flex; flex-wrap: wrap; gap: 22px; }
.primary-links { margin-top: 22px; }
.primary-links a, .pub-links a { color: var(--blue); font-size: 14px; font-weight: 750; }

.section { padding: 70px max(24px, calc((100vw - var(--content)) / 2)); }
.section-tint { background: var(--wash); }
.section-heading {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  align-items: start;
  margin-bottom: 30px;
}
.section-heading > p { margin: 6px 0 0; color: var(--teal); font-family: Georgia, serif; font-size: 14px; }
.section-heading h2 { margin: 0 0 8px; font-size: 34px; line-height: 1.2; }
.section-heading h2:last-child { margin-bottom: 0; }
.section-heading div > p { margin: 0; color: var(--muted); }
.research-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-left: 84px; }
.research-grid article { padding-top: 15px; border-top: 2px solid var(--ink); }
.research-title-row { display: flex; gap: 12px; align-items: baseline; margin-bottom: 9px; }
.research-title-row span { flex: 0 0 auto; color: var(--teal); font-family: Georgia, serif; font-size: 13px; }
.research-grid h3 { margin: 0; font-size: 20px; }
.research-grid p { margin: 0; color: var(--muted); font-size: 15px; }

.publication {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 300px;
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
}
.publication:last-child { border-bottom: 1px solid var(--line); }
.publication.featured { border-top: 3px solid var(--ink); }
.pub-index { color: var(--teal); font-family: Georgia, serif; }
.pub-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; color: var(--blue); font-size: 13px; font-weight: 800; }
.pub-meta span + span { color: var(--muted); }
.publication h3 { max-width: 900px; margin: 10px 0 12px; font-family: Georgia, "Times New Roman", serif; font-size: 23px; line-height: 1.32; }
.publication p { max-width: 900px; margin: 0 0 18px; color: var(--muted); }
.pub-visual { align-self: center; margin: 0; }
.pub-visual a { display: block; background: #fff; }
.pub-visual img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line);
  background: var(--wash);
  object-fit: contain;
}
.pub-visual figcaption { margin-top: 7px; color: var(--muted); font-size: 11px; text-align: right; }

.section-dark { color: white; background: var(--dark); }
.section-dark .section-heading div > p, .section-dark .timeline article > div > p { color: #bac4c9; }
.section-dark .section-heading > p, .section-dark .org { color: #69c2b7; }
.timeline { margin-left: 84px; }
.timeline article { display: grid; grid-template-columns: 180px 1fr; gap: 28px; padding: 28px 0; border-top: 1px solid #536066; }
.timeline article:last-child { border-bottom: 1px solid #536066; }
.time span, .time strong { display: block; font-size: 14px; }
.time strong { color: #bac4c9; font-weight: 500; }
.timeline .org { margin: 0 0 4px; font-size: 13px; font-weight: 800; }
.timeline h3 { margin: 0 0 12px; font-size: 20px; }
.timeline article > div > p:last-child { max-width: 760px; margin: 0; }

.contact { padding-top: 78px; padding-bottom: 78px; }
.contact h2 { max-width: 820px; margin: 0; font-size: 40px; line-height: 1.35; }
.contact-row { display: flex; flex-wrap: wrap; gap: 18px 34px; margin-top: 26px; color: var(--muted); }
.contact-row a { color: var(--blue); font-weight: 700; }
footer {
  display: flex;
  justify-content: space-between;
  padding: 22px max(24px, calc((100vw - var(--content)) / 2));
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 900px) {
  .site-header {
    min-height: 96px;
    height: auto;
    grid-template-columns: 1fr auto;
    grid-template-rows: 54px 42px;
    column-gap: 8px;
    padding-inline: 24px;
  }
  .wordmark { grid-column: 1; grid-row: 1; }
  .language-switch { grid-column: 2; grid-row: 1; }
  .mobile-nav-toggle { display: none; }
  nav,
  nav.open {
    position: static;
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    width: auto;
    margin-inline: -24px;
    padding: 0 24px;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: rgba(255, 255, 255, .97);
    box-shadow: none;
  }
  nav a {
    display: flex;
    min-height: 42px;
    justify-content: center;
    align-items: center;
    padding: 7px 4px;
    border-radius: 0;
    background: transparent;
    font-size: 13px;
  }
  #research, #publications, #experience, #contact { scroll-margin-top: 96px; }
  .profile { grid-template-columns: 150px 1fr; }
  .profile-photo { width: 145px; height: 187px; }
  .research-grid { margin-left: 0; gap: 24px; }
  .publication { grid-template-columns: 50px minmax(0, 1fr) 230px; gap: 18px; }
}

@media (max-width: 640px) {
  body { font-size: 15px; }
  .site-header { padding-inline: 18px; }
  nav,
  nav.open {
    margin-inline: -18px;
    padding-inline: 18px;
  }
  .intro-band { width: calc(100% - 36px); min-height: auto; padding: 34px 0 36px; }
  .profile { display: block; }
  .mobile-identity { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; align-items: center; margin-bottom: 20px; }
  .mobile-identity .profile-photo { width: 120px; height: 176px; }
  .mobile-identity-copy { min-width: 0; }
  .mobile-identity .eyebrow { margin: 0 0 10px; font-size: 11px; line-height: 1.45; }
  .mobile-identity h1 { font-size: 34px; }
  .mobile-identity h1 small { margin-top: 6px; font-size: 13px; }
  .mobile-identity .availability { margin: 14px 0 0; font-size: 12px; line-height: 1.4; }
  .profile-photo-wrap { display: none; }
  .profile-copy { display: block; }
  .profile-copy > .eyebrow, .profile-copy > h1 { display: none; }
  .lead { margin: 0 0 12px; font-size: 18px; }
  .bio { font-size: 14px; }
  .primary-links { margin-top: 20px; }
  .section { padding: 42px 18px; }
  .section-heading { grid-template-columns: 38px 1fr; gap: 12px; margin-bottom: 16px; }
  .section-heading h2 { font-size: 28px; }
  .research-grid { grid-template-columns: 1fr; }
  .research-grid article { padding-top: 11px; }
  .research-title-row { gap: 10px; margin-bottom: 7px; }
  .publication { grid-template-columns: 38px 1fr; gap: 12px; padding: 18px 0; }
  .pub-visual { grid-column: 2; margin-top: 6px; }
  .publication h3 { font-size: 19px; overflow-wrap: anywhere; }
  .timeline { margin-left: 0; }
  .timeline article { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
  .time span, .time strong { display: inline; margin-right: 6px; }
  .contact h2 { font-size: 30px; }
  .contact-row { margin-top: 22px; }
  .contact-row a, .contact-row span { overflow-wrap: anywhere; }
  footer { padding-inline: 18px; }
}

@media (max-width: 360px) {
  .site-header { padding-inline: 14px; }
  nav,
  nav.open { margin-inline: -14px; padding-inline: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  nav a { font-size: 12px; }
  .intro-band { width: calc(100% - 28px); }
  .section { padding-inline: 14px; }
  .section-heading { grid-template-columns: 30px minmax(0, 1fr); gap: 8px; }
  .mobile-identity { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; }
  .mobile-identity .profile-photo { width: 104px; height: 158px; }
  .mobile-identity h1 { font-size: 30px; }
  .mobile-identity .eyebrow { font-size: 10px; }
  .publication { grid-template-columns: 30px minmax(0, 1fr); gap: 8px; }
  .publication h3 { font-size: 18px; }
  .primary-links, .pub-links { gap: 16px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }