/* A lightweight, editorial academic homepage. No framework or webfont required. */
:root {
  --paper:#f6f8fc;
  --ink:#172b46;
  --muted:#4b607a;
  --accent:#245e9e;
  --accent-light:#e6eef9;
  --line:#d5dfeb;
  --serif:Georgia,'Times New Roman','Noto Serif SC',SimSun,serif;
  --sans:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI','Microsoft YaHei',sans-serif;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:100px;
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
a {
  color:var(--accent);
  text-decoration:none;
  text-underline-offset:4px;
}
a:hover {
  text-decoration:underline;
}
button {
  font:inherit;
  cursor:pointer;
}
img {
  display:block;
  max-width:100%;
}
button,a,summary {
  -webkit-tap-highlight-color:transparent;
}
a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:5px;
}
button:focus-visible {
  border-radius:4px;
}
[hidden] {
  display:none!important;
}
::selection {
  background:#d6e6fc;
}
h1,h2,h3,p,figure {
  margin:0;
}
h1,h2 {
  font-family:var(--serif);
  font-weight:400;
}
h3 {
  font-size:20px;
  line-height:1.5;
  font-weight:600;
}
strong {
  font-weight:600;
}
.site-main,.header-inner,.site-footer {
  max-width:1100px;
  margin:0 auto;
  padding-left:40px;
  padding-right:40px;
}
.site-header {
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:10;
  background:rgba(246,248,252,.96);
  backdrop-filter:blur(14px);
}
.header-inner {
  display:flex;
  align-items:center;
  height:83px;
  gap:36px;
}
.wordmark {
  display:flex;
  align-items:center;
  gap:13px;
  color:var(--ink);
  white-space:nowrap;
}
.wordmark:hover {
  text-decoration:none;
}
.monogram {
  font-family:var(--serif);
  font-weight:700;
  font-size:32px;
  letter-spacing:-3px;
  line-height:1;
}
.monogram>span {
  color:var(--accent);
}
.wordmark-name {
  font-size:17px;
  font-weight:600;
  letter-spacing:.015em;
}
.main-nav {
  display:flex;
  gap:27px;
  align-items:center;
  margin-left:auto;
  font-size:17px;
}
.main-nav a {
  color:var(--muted);
  position:relative;
}
.main-nav a.active {
  color:var(--ink);
}
.main-nav a.active::after {
  content:'';
  height:3px;
  width:3px;
  background:var(--accent);
  border-radius:50%;
  position:absolute;
  bottom:-9px;
  left:50%;
}
.language-switch {
  display:flex;
  gap:9px;
  align-items:center;
  border-left:1px solid var(--line);
  padding-left:24px;
  font-size:16px;
  color:#718198;
}
.language-switch a {
  color:var(--muted);
}
.language-switch a[aria-current] {
  color:var(--ink);
  font-weight:600;
}
.hero {
  padding-top:75px;
  display:grid;
  grid-template-columns:1fr 250px;
  column-gap:88px;
  align-items:start;
}
.eyebrow,.small-label,.section-aside,.section-number,.experience-date,.paper-meta,.award-date,.profile figcaption,.site-footer {
  font-size:15px;
  letter-spacing:.06em;
}
.eyebrow {
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--accent);
  font-weight:600;
}
.status-dot {
  width:6px;
  height:6px;
  background:var(--accent);
  border-radius:50%;
}
.hero h1 {
  font-size:58px;
  letter-spacing:-2.3px;
  line-height:1.15;
  margin-top:23px;
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:17px;
}
.name-secondary {
  font-size:21px;
  letter-spacing:1px;
  font-weight:400;
  color:var(--muted);
}
.hero-statement {
  font-family:var(--serif);
  font-size:25px;
  line-height:1.5;
  letter-spacing:-.4px;
  margin-top:21px;
  max-width:570px;
}
.biography {
  margin-top:22px;
  color:var(--muted);
  font-size:18px;
  line-height:1.9;
  max-width:600px;
}
.biography p+p {
  margin-top:12px;
}
.biography a {
  border-bottom:1px solid #b8cce4;
}
.contact-links {
  display:flex;
  flex-wrap:wrap;
  gap:23px;
  align-items:center;
  margin-top:27px;
  font-size:16px;
  font-weight:600;
}
.contact-links>a {
  color:var(--ink);
  display:flex;
  gap:9px;
  align-items:center;
}
.contact-links .primary-link {
  background:var(--accent);
  color:white;
  padding:8px 16px;
  border:1px solid var(--accent);
  border-radius:3px;
}
.contact-links .primary-link:hover {
  background:#183a63;
  text-decoration:none;
}
.contact-links>a>span {
  font-size:18px;
}
.profile {
  padding-top:10px;
}
.portrait-frame {
  position:relative;
  background:#e5ecf5;
  padding:9px;
  transform:rotate(2deg);
  border:1px solid #ccd8e7;
  box-shadow:3px 6px 0 #e9eff7;
}
.portrait-frame img {
  width:100%;
  height:280px;
  object-fit:cover;
  object-position:center 35%;
  filter:saturate(.85);
}
.profile figcaption {
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-top:19px;
  font-size:14px;
  color:var(--muted);
}
.portrait-coordinate {
  color:var(--accent);
  white-space:nowrap;
}
.research-interests {
  grid-column:1/-1;
  display:flex;
  gap:28px;
  align-items:baseline;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-top:45px;
  padding:18px 0;
}
.small-label {
  font-weight:500;
  text-transform:uppercase;
  color:var(--muted);
}
.research-interests ul {
  list-style:none;
  display:flex;
  gap:26px;
  flex-wrap:wrap;
  margin:0;
  padding:0;
  font-size:16px;
}
.research-interests li {
  position:relative;
}
.research-interests li+li::before {
  content:'·';
  position:absolute;
  left:-15px;
  color:#8a9bb0;
}
.section-heading {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  margin-bottom:25px;
}
.section-heading>div {
  display:flex;
  gap:15px;
  align-items:baseline;
}
.section-number {
  color:var(--accent);
  font-size:14px;
  font-family:var(--sans);
}
.section-heading h2 {
  font-size:31px;
  letter-spacing:-.75px;
  line-height:1.3;
}
.section-aside {
  color:var(--muted);
  letter-spacing:.02em;
}
.news-section {
  padding:48px 0 0;
}
.news-list {
  list-style:none;
  padding:0;
  margin:0;
}
.news-list li {
  display:grid;
  grid-template-columns:85px 1fr;
  gap:16px;
  padding:7px 0;
  font-size:17px;
  line-height:1.8;
}
.news-list time {
  color:var(--muted);
  font-size:15px;
  font-variant-numeric:tabular-nums;
  padding-top:2px;
}
.news-list strong,.news-list b {
  font-weight:600;
}
.past-news {
  margin-top:7px;
}
.past-news summary,.honors-details summary {
  cursor:pointer;
  list-style:none;
  font-size:16px;
  color:var(--accent);
  display:flex;
  gap:16px;
  align-items:center;
  width:fit-content;
}
.past-news summary::-webkit-details-marker,.honors-details summary::-webkit-details-marker {
  display:none;
}
.past-news summary>span,.honors-details summary>span {
  font-size:18px;
  transition:transform .2s;
}
.past-news[open] summary>span,.honors-details[open] summary>span {
  transform:rotate(45deg);
}
.past-news[open] summary {
  margin-bottom:9px;
}
.publications-section,.experience-section,.skills-section,.honors-section {
  padding-top:60px;
}
.publication-toolbar {
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
}
.filters {
  display:flex;
  gap:5px;
  flex-wrap:wrap;
}
.filters button {
  border:0;
  background:transparent;
  color:var(--muted);
  padding:5px 13px;
  font-size:15px;
  border-radius:3px;
}
.filters button:hover {
  color:var(--accent);
  background:#edf3fc;
}
.filters button.is-active {
  background:var(--accent-light);
  color:#1d4d84;
  font-weight:600;
}
.view-toggle {
  border:0;
  color:var(--muted);
  background:transparent;
  font-size:15px;
  white-space:nowrap;
  padding:4px 0 4px 10px;
}
.view-toggle:hover {
  color:var(--accent);
}
.view-toggle>span:first-child {
  font-size:20px;
  vertical-align:-1px;
  margin-right:5px;
}
.publication {
  display:grid;
  min-width:0;
  grid-template-columns:270px 1fr;
  gap:30px;
  padding:30px 0;
  border-bottom:1px solid var(--line);
}
.publication-image {
  background:#fff;
  border:1px solid #dce4ef;
  border-radius:4px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  align-self:center;
  padding:9px;
  min-height:163px;
  transition:border-color .2s,transform .2s;
}
.publication-image:hover {
  border-color:#87a9d0;
  transform:translateY(-2px);
}
.publication-image img {
  width:100%;
  height:148px;
  object-fit:contain;
}
.paper-meta {
  display:flex;
  gap:13px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:9px;
  font-size:14px;
  letter-spacing:.035em;
}
.venue {
  color:var(--accent);
  font-weight:600;
}
.paper-category {
  color:var(--muted);
}
.publication h3 {
  font-size:20px;
  line-height:1.5;
  letter-spacing:-.15px;
}
.publication h3 a {
  color:var(--ink);
}
.authors {
  color:var(--muted);
  font-size:15px;
  margin-top:8px;
  line-height:1.75;
}
.authors strong {
  color:var(--ink);
  font-weight:600;
}
.paper-description {
  font-size:16px;
  line-height:1.8;
  color:var(--muted);
  margin-top:10px;
}
.paper-links {
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin-top:14px;
}
.paper-links>a {
  display:flex;
  gap:10px;
  align-items:center;
  border:1px solid #bfd0e5;
  border-radius:3px;
  padding:2px 9px;
  font-size:14px;
  color:var(--accent);
  font-weight:500;
}
.paper-links>a:hover {
  background:var(--accent-light);
  border-color:#8caed4;
  text-decoration:none;
}
.publication-list.is-compact .publication {
  grid-template-columns:1fr;
  padding:23px 0;
}
.publication-list.is-compact .publication-image,.publication-list.is-compact .paper-description {
  display:none;
}
.publication-list.is-compact .publication-body {
  min-width:0;
  position:relative;
}
.publication-list.is-compact .publication h3 {
  max-width:95%;
}
.review-note {
  display:grid;
  grid-template-columns:120px 1fr;
  gap:16px;
  padding:20px 0;
  border-bottom:1px solid var(--line);
}
.review-note .small-label {
  font-size:14px;
  padding-top:3px;
}
.review-note p {
  font-size:16px;
  color:var(--muted);
  line-height:1.85;
}
.experience-list {
  border-top:1px solid var(--line);
}
.experience-item {
  display:grid;
  grid-template-columns:130px 44px 1fr;
  gap:22px;
  padding:24px 0;
  border-bottom:1px solid var(--line);
}
.experience-date {
  color:var(--muted);
  font-size:14px;
  letter-spacing:0;
  padding-top:3px;
  font-variant-numeric:tabular-nums;
}
.institution-logo {
  width:44px;
  height:44px;
  padding:3px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid #dce5f0;
  border-radius:5px;
}
.institution-logo img {
  max-height:36px;
  width:100%;
  object-fit:contain;
}
.experience-content h3 {
  font-size:18px;
}
.experience-role {
  font-size:16px;
  margin-top:4px;
}
.experience-description {
  font-size:16px;
  color:var(--muted);
  line-height:1.8;
  margin-top:6px;
}
.skills-list {
  margin:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px 40px;
  border-top:1px solid var(--line);
  padding-top:24px;
}
.skills-list dt {
  font-size:16px;
  font-weight:600;
  margin-bottom:5px;
}
.skills-list dd {
  font-size:16px;
  line-height:1.9;
  color:var(--muted);
  margin:0;
}
.award {
  display:grid;
  grid-template-columns:130px 1fr;
  gap:22px;
  padding:17px 0;
  border-bottom:1px solid var(--line);
}
.awards-list {
  border-top:1px solid var(--line);
}
.award-date {
  font-size:14px;
  color:var(--muted);
  padding-top:3px;
  letter-spacing:0;
}
.award h3 {
  font-size:17px;
  font-weight:500;
}
.award p {
  font-size:15px;
  color:var(--muted);
  margin-top:3px;
}
.award p a {
  margin-left:12px;
  font-size:14px;
}
.honors-details {
  margin-top:22px;
}
.honor-gallery {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:23px;
}
.honor-gallery>a {
  font-size:15px;
  color:var(--muted);
  line-height:1.6;
}
.honor-gallery>a>div {
  height:150px;
  background:#e9eff7;
  padding:10px;
  border:1px solid var(--line);
  margin-bottom:10px;
}
.honor-gallery img {
  height:100%;
  width:100%;
  object-fit:contain;
}
.honor-gallery>a>span {
  display:block;
}
.contact-section {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-top:65px;
  padding:35px 0;
}
.contact-section h2 {
  font-size:30px;
  margin-top:8px;
  letter-spacing:-.5px;
}
.contact-section p:not(.eyebrow) {
  font-size:16px;
  color:var(--muted);
  margin-top:8px;
}
.contact-section>a {
  font-size:16px;
  white-space:nowrap;
}
.contact-section>a>span {
  margin-left:10px;
}
.site-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  padding-top:24px;
  padding-bottom:30px;
  font-size:14px;
  color:var(--muted);
  letter-spacing:.01em;
}
.site-footer a {
  color:var(--muted);
}
.skip-link {
  position:fixed;
  top:10px;
  left:10px;
  padding:8px 14px;
  background:var(--accent);
  color:#fff;
  z-index:30;
  transform:translateY(-150%);
}
.skip-link:focus {
  transform:translateY(0);
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
html[lang=zh-CN] .hero h1 {
  letter-spacing:1px;
}
html[lang=zh-CN] .hero-statement {
  font-size:23px;
  line-height:1.65;
}
html[lang=zh-CN] .biography {
  line-height:2;
}
html[lang=zh-CN] .hero h1 .name-secondary {
  font-size:19px;
  letter-spacing:-.3px;
}
@media(min-width:1300px) {
  .site-main,.header-inner,.site-footer {
    max-width:1160px;
  }
  .hero {
    grid-template-columns:1fr 270px;
    column-gap:100px;
  }
  .portrait-frame img {
    height:300px;
  }
  .hero h1 {
    font-size:64px;
  }
  .hero-statement {
    font-size:27px;
  }
}
@media(max-width:900px) {
  .hero {
    grid-template-columns:1fr 200px;
    column-gap:38px;
    padding-top:52px;
  }
  .hero h1 {
    font-size:44px;
    letter-spacing:-1.6px;
  }
  .hero-statement {
    font-size:23px;
  }
  .portrait-frame img {
    height:240px;
  }
  .wordmark-name {
    display:none;
  }
  .header-inner {
    gap:24px;
  }
  .main-nav {
    gap:22px;
  }
  .publication {
    grid-template-columns:225px 1fr;
    gap:23px;
  }
  .publication-image img {
    height:135px;
  }
  .research-interests {
    gap:20px;
  }
  .research-interests ul {
    gap:22px;
  }
  .experience-item {
    grid-template-columns:110px 40px 1fr;
    gap:17px;
  }
  .award {
    grid-template-columns:110px 1fr;
  }
}
@media(max-width:640px) {
  html {
    scroll-padding-top:115px;
  }
  .site-main,.header-inner,.site-footer {
    padding-left:23px;
    padding-right:23px;
  }
  .header-inner {
    height:96px;
    gap:18px;
    flex-wrap:wrap;
    align-content:center;
    row-gap:14px;
    justify-content:space-between;
  }
  .monogram {
    font-size:28px;
  }
  .wordmark-name {
    display:inline;
    font-size:16px;
  }
  .language-switch {
    margin-left:auto;
    padding-left:0;
    border:0;
  }
  .main-nav {
    order:3;
    width:100%;
    justify-content:space-between;
    gap:8px;
    font-size:14px;
  }
  .main-nav a.active::after {
    bottom:-5px;
  }
  .hero {
    padding-top:38px;
    grid-template-columns:1fr 108px;
    gap:0 22px;
  }
  .hero-copy {
    display:contents;
  }
  .hero .eyebrow {
    grid-column:1/-1;
    font-size:13px;
    letter-spacing:.04em;
    margin-bottom:20px;
  }
  .hero h1 {
    grid-column:1;
    grid-row:2;
    display:block;
    font-size:38px;
    letter-spacing:-1.7px;
    align-self:start;
    margin:0;
    padding-top:8px;
  }
  .hero h1 .name-secondary {
    display:block;
    font-size:17px;
    letter-spacing:.5px;
    margin-top:14px;
  }
  .profile {
    grid-column:2;
    grid-row:2;
    padding:0;
    align-self:center;
  }
  .portrait-frame {
    padding:5px;
  }
  .portrait-frame img {
    height:128px;
  }
  .profile figcaption {
    font-size:12px;
    line-height:1.5;
    margin-top:12px;
    letter-spacing:0;
  }
  .portrait-coordinate {
    display:none;
  }
  .hero-statement {
    grid-column:1/-1;
    grid-row:3;
    font-size:23px;
    margin-top:29px;
    max-width:450px;
    line-height:1.5;
  }
  .biography {
    grid-column:1/-1;
    margin-top:18px;
    font-size:17px;
  }
  .contact-links {
    grid-column:1/-1;
    margin-top:22px;
    gap:14px 20px;
    font-size:15px;
  }
  .research-interests {
    margin-top:31px;
    display:block;
    padding:16px 0;
  }
  .research-interests .small-label {
    display:block;
    font-size:13px;
    margin-bottom:8px;
  }
  .research-interests ul {
    gap:6px 20px;
    font-size:14px;
  }
  .research-interests li+li::before {
    left:-12px;
  }
  .section-heading {
    margin-bottom:20px;
    gap:12px;
  }
  .section-heading h2 {
    font-size:27px;
  }
  .section-heading>div {
    gap:10px;
  }
  .section-aside {
    font-size:13px;
    letter-spacing:0;
    text-align:right;
  }
  .section-number {
    font-size:13px;
  }
  .news-section {
    padding-top:34px;
  }
  .news-list li {
    grid-template-columns:60px 1fr;
    gap:10px;
    font-size:16px;
    padding:7px 0;
  }
  .news-list time {
    font-size:14px;
  }
  .past-news summary {
    font-size:15px;
  }
  .publications-section,.experience-section,.skills-section,.honors-section {
    padding-top:43px;
  }
  .publication-toolbar {
    gap:5px;
  }
  .filters {
    gap:1px;
  }
  .filters button {
    font-size:14px;
    padding:5px 9px;
  }
  .view-toggle {
    font-size:14px;
  }
  .publication {
    grid-template-columns:1fr;
    gap:19px;
    padding:25px 0;
  }
  .publication-image {
    width:100%;
    padding:13px;
    min-height:190px;
  }
  .publication-image img {
    height:180px;
  }
  .publication h3 {
    font-size:20px;
  }
  .paper-description {
    font-size:16px;
  }
  .authors {
    font-size:15px;
  }
  .paper-meta {
    font-size:13px;
    margin-bottom:8px;
  }
  .paper-links>a {
    font-size:14px;
    padding:3px 10px;
  }
  .review-note {
    grid-template-columns:1fr;
    gap:6px;
    padding:18px 0;
  }
  .review-note p {
    font-size:15px;
  }
  .experience-item {
    grid-template-columns:34px 1fr;
    gap:6px 13px;
    padding:21px 0;
  }
  .experience-date {
    grid-column:2;
    grid-row:auto;
    font-size:14px;
    padding:0;
  }
  .institution-logo {
    grid-column:1;
    grid-row:span 2;
    width:34px;
    height:34px;
    padding:3px;
    align-self:start;
    margin-top:4px;
  }
  .institution-logo img {
    max-height:28px;
  }
  .experience-content {
    grid-column:2;
  }
  .experience-content h3 {
    font-size:17px;
  }
  .experience-role,.experience-description {
    font-size:15px;
  }
  .skills-list {
    grid-template-columns:1fr;
    gap:20px;
  }
  .skills-list dt,.skills-list dd {
    font-size:15px;
  }
  .award {
    grid-template-columns:60px 1fr;
    gap:10px;
  }
  .award h3 {
    font-size:16px;
  }
  .award p {
    font-size:14px;
  }
  .award-date {
    font-size:12px;
  }
  .award p a {
    margin-left:6px;
    display:inline-block;
  }
  .honor-gallery {
    grid-template-columns:1fr 1fr;
    gap:20px 15px;
  }
  .honor-gallery>a>div {
    height:125px;
  }
  .contact-section {
    display:block;
    margin-top:44px;
    padding:27px 0;
  }
  .contact-section .eyebrow {
    font-size:14px;
  }
  .contact-section h2 {
    font-size:28px;
  }
  .contact-section>a {
    display:inline-block;
    margin-top:22px;
    font-size:16px;
  }
  .site-footer {
    flex-wrap:wrap;
    font-size:13px;
    padding-top:20px;
    padding-bottom:22px;
    gap:8px;
  }
  .site-footer>span:nth-child(2) {
    order:3;
    width:100%;
  }
  html[lang=zh-CN] .hero h1 .name-secondary {
    font-size:20px;
  }
  html[lang=zh-CN] .hero-statement {
    font-size:21px;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    transition:none!important;
  }
}
@media print {
  .site-header,.publication-toolbar,.contact-section,.site-footer,.past-news,.honors-details,.skip-link {
    display:none!important;
  }
  body {
    background:white;
    font-size:15px;
  }
  .site-main {
    max-width:none;
    padding:0;
  }
  .hero {
    padding-top:0;
  }
  .publication,.experience-item,.award {
    break-inside:avoid;
  }
  .publications-section,.experience-section,.skills-section,.honors-section {
    padding-top:24px;
  }
  .publication {
    padding:18px 0;
    grid-template-columns:180px 1fr;
  }
  .publication-image img {
    height:110px;
  }
  a {
    color:inherit;
  }
  .hero h1 {
    font-size:40px;
  }
}