@font-face { font-family: Lato; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/lato-400.woff2') format('woff2'); }
@font-face { font-family: Lato; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/lato-700.woff2') format('woff2'); }
/* Academic homepage styling inspired by luost26/academic-homepage (MIT,
 * Copyright (c) 2024 Shitong Luo) and the user-selected Shuang Zeng homepage.
 * Keep the upstream MIT notice with distributed template-derived files. */
:root {
  --page: #f8f9fa;
  --card: #fff;
  --ink: #212529;
  --muted: #6c757d;
  --link: #007bff;
  --link-hover: #0056b3;
  --border: #e8ebee;
  --nav: #343a40;
  --blue-soft: #f0f6fc;
  --radius: .8rem;
  --shadow: 0 2px 4px rgba(0, 0, 0, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  padding-top: 80px;
  background: var(--page);
  color: var(--ink);
  font: 400 16px/1.55 Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }
img, svg { max-width: 100%; }
img { display: block; height: auto; }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
h1, h2, h3, h4, p, figure { margin-top: 0; }
h1, h2, h3, h4 { line-height: 1.3; }
p { margin-bottom: 16px; }
ul { padding-left: 20px; }
strong { font-weight: 700; }
time { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #e5a732; outline-offset: 4px; }
.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;
}
.skip {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 12px;
  padding: 10px 16px;
  background: #fff;
  border-radius: 4px;
  transform: translateY(-160%);
}
.skip:focus { transform: translateY(0); }

/* Fixed navigation, matching the dark bar of the selected reference. */
.site-header {
  position: fixed;
  z-index: 30;
  inset: 0 0 auto;
  height: 56px;
  background: var(--nav);
  box-shadow: var(--shadow);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(1110px, calc(100% - 40px));
  height: 56px;
  margin: 0 auto;
}
.site-name {
  flex: 0 0 auto;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  white-space: nowrap;
}
.site-name:hover { color: #fff; text-decoration: none; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
.nav-links a {
  flex: 0 0 auto;
  padding: 12px 0;
  color: #e1e4e7;
  font-size: 14px;
  line-height: 1.5;
  white-space: nowrap;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: #fff; }

/* One stationary profile column and one flowing column of white cards. */
.page-layout {
  display: grid;
  grid-template-columns: 255px minmax(0, 1fr);
  align-items: start;
  gap: 30px;
  width: min(1110px, calc(100% - 40px));
  margin: 0 auto;
}
.profile-column { position: sticky; top: 80px; min-width: 0; }
.content-column { min-width: 0; }
.profile-card, .card {
  background: var(--card);
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.profile-card { padding: 22px 22px 24px; text-align: center; }
.profile-photo {
  display: block;
  width: 210px;
  height: 210px;
  margin: 0 auto 10px;
  object-fit: cover;
  object-position: center;
  border-radius: 5px;
}
.profile-card h1 { margin: 0 0 10px; font-size: 26px; font-weight: 700; }
.profile-role { margin-bottom: 10px; font-size: 14px; line-height: 1.65; }
.profile-affiliation { margin-bottom: 12px; font-size: 13px; line-height: 1.6; }
.profile-affiliation a { color: inherit; }
.profile-email {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 12px;
  font: 12px/1.7 "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  overflow-wrap: anywhere;
}
.profile-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 4px;
  font-size: 13px;
}
.profile-links a { display: inline-flex; align-items: center; gap: 5px; }
.profile-links svg { width: 22px; height: 22px; fill: currentColor; }
.profile-location { margin: 14px 0 0; color: var(--muted); font-size: 12px; }
.profile-card .profile-caption { margin: 12px 0 0; color: var(--muted); font-size: 12px; }
.content-column > .card { margin-bottom: 24px; }
.card { min-width: 0; scroll-margin-top: 80px; }
.card-body { padding: 32px; }
.card-body > :last-child { margin-bottom: 0; }
.card-body.roomy { padding: 40px; }
.card-title { margin-bottom: 20px; font-size: 28px; font-weight: 700; }
.card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  font-size: 18px;
  font-weight: 700;
}
.card-heading h2, .card-heading h3 { margin: 0; font-size: inherit; font-weight: inherit; }
.card-heading a { font-size: 13px; font-weight: 400; }
.card-heading small { color: var(--muted); font-size: 12px; font-weight: 400; }
.card-body h3 { margin-bottom: 12px; font-size: 17px; }
.section-title { margin: 0 0 15px; font-size: 16px; font-weight: 700; }
.small-text { font-size: 13px; }
.teaching-title { margin-top: 24px; }
.about-text { font-size: 16px; }
.section-intro { color: var(--muted); font-size: 14px; }

/* Compact appointment facts, education and research topics. */
.appointment-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}
.appointment-grid .fact { padding: 14px; background: var(--blue-soft); border-radius: 7px; }
.appointment-grid .fact h3 { margin: 0 0 7px; color: #224867; font-size: 13px; font-weight: 700; }
.appointment-grid .fact p { margin: 0; color: #526476; font-size: 12px; line-height: 1.6; }
.two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.two-column > * { min-width: 0; }
.two-column h3 { margin-bottom: 18px; font-size: 17px; }
.education-item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 17px; }
.education-item:last-child { margin-bottom: 0; }
.school-mark {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  min-height: 30px;
  border-radius: 5px;
  background: var(--blue-soft);
  color: #456987;
  font-size: 10px;
  font-weight: 700;
}
.school-mark img { width: 24px; height: 24px; object-fit: contain; }
.school-details { flex: 1; min-width: 0; font-size: 14px; line-height: 1.5; }
.school-details h4, .school-details strong { font-size: 14px; }
.school-details h3 { margin: 0 0 4px; font-size: 15px; font-weight: 400; }
.school-details h4 { margin: 0 0 3px; font-weight: 700; }
.school-details p { margin: 3px 0 0; font-size: 12px; }
.school-details span, .school-details time { font-size: 12px; }
.school-details time { color: var(--muted); }
.school-details .degree-line { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.school-details .degree-line time { margin-left: auto; }
.honors-list { margin: 0; padding: 0; list-style: none; }
.honors-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 5px;
  font-size: 12px;
  line-height: 1.6;
}
.honors-list li > :first-child { min-width: 0; }
.honors-list time { flex: 0 0 auto; color: var(--muted); font-style: italic; white-space: nowrap; }
.research-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.research-item { min-width: 0; }
.research-item h3 { margin-bottom: 10px; font-size: 15px; }
.research-item p { margin-bottom: 0; color: #59636d; font-size: 13px; line-height: 1.65; }
.research-item .tags { margin-top: 10px; color: #59758d; font-size: 11px; }

/* The existing publication search/filter controls remain independently usable. */
.pub-downloads { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.publication-intro > p:first-child { margin: 0; padding: 15px 24px 0; color: var(--muted); font-size: 13px; }
.pub-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px 24px 12px;
}
.search-field { flex: 1 1 100%; min-width: 0; }
.search-field input {
  display: block;
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 8px 12px;
  color: var(--ink);
  border: 1px solid #d9dfe4;
  border-radius: 5px;
  background: #fff;
  font-size: 13px;
}
.search-field input::placeholder { color: #747e87; opacity: 1; }
.filter-buttons { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.pub-controls button, .pub-controls select {
  min-height: 34px;
  max-width: 100%;
  padding: 6px 11px;
  border: 1px solid #dbe1e6;
  border-radius: 5px;
  color: #435363;
  background: #fff;
  font-size: 12px;
  line-height: 1.5;
}
.pub-controls button:hover { background: #f1f5f8; }
.pub-controls button[aria-pressed="true"] { border-color: #356e9d; background: #356e9d; color: #fff; }
.year-select { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 12px; }
.year-select label { color: var(--muted); }
.pub-count { margin: 0; padding: 0 24px 16px; color: var(--muted); font-size: 12px; }
.publication-list { margin: 0; padding: 0; list-style: none; }
.year-group { margin: 0; }
.year-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 10px 24px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: #f7f9fb;
  color: #566b7e;
  font-size: 16px;
  font-weight: 700;
}
.year-heading span { color: var(--muted); font-size: 11px; font-weight: 400; }
.publication {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  align-items: start;
  gap: 20px;
  margin: 0;
  padding: 22px 24px;
  border-bottom: 1px solid var(--border);
}
.publication:last-child { border-bottom: 0; }
.publication article { min-width: 0; }
.venue-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 86px;
  min-height: 86px;
  padding: 8px 5px;
  border: 1px solid #e2e9ef;
  border-radius: 7px;
  background: #f1f5f9;
  color: #47657f;
  text-align: center;
}
.tile-label { max-width: 100%; font-size: 16px; line-height: 1.2; font-weight: 700; overflow-wrap: anywhere; }
.tile-year { color: #637b90; font-size: 12px; }
.tile-type { color: #758696; font-size: 9px; line-height: 1.3; }
.publication h4, .publication .pub-title {
  margin: 0 0 7px;
  color: #273d51;
  font-size: 17px;
  line-height: 1.4;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.publication h4 a, .publication .pub-title a { color: inherit; }
.publication h4 a:hover, .publication .pub-title a:hover { color: var(--link-hover); }
.publication .authors { margin: 0 0 5px; color: #626b74; font-size: 12px; line-height: 1.65; }
.publication .authors strong { color: #283440; font-weight: 700; }
.pub-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 12px; margin: 0 0 6px; font-size: 12px; line-height: 1.6; }
.pub-meta .venue { color: #596b7a; font-style: italic; }
.pub-links { display: inline-flex; flex-wrap: wrap; gap: 6px 11px; font-size: 12px; }
.pub-links a { white-space: nowrap; }
.pub-links:empty { display: none; }
.pub-note { margin: 7px 0 0; color: var(--muted); font-size: 11px; }
.no-results { margin: 0; padding: 28px 24px; color: var(--muted); font-size: 14px; }

/* Recruitment, service and contact follow the same compact card rhythm. */
.opportunities { padding: 20px 24px; background: #f1f6fb; border-radius: 7px; }
.opportunities h3 { margin-bottom: 12px; font-size: 18px; }
.opportunities p { font-size: 14px; }
.opportunities > :last-child { margin-bottom: 0; }
.contact-link { display: inline-block; max-width: 100%; font-size: 14px; overflow-wrap: anywhere; }
.recruit-details { margin-top: 24px; }
.recruit-details h3 { margin: 20px 0 10px; font-size: 16px; }
.recruit-details p, .recruit-details li { color: #59636d; font-size: 14px; }
.recruit-details ul { margin-top: 0; margin-bottom: 16px; }
.recruit-details li + li { margin-top: 7px; }
.service-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.service-list h3 { font-size: 15px; }
.service-list ul { margin: 0; padding-left: 18px; color: #59636d; font-size: 13px; }
.service-list li + li { margin-top: 7px; }
.subheading { margin: 24px 0 10px; font-size: 16px; }
.contact-card p { margin-bottom: 12px; color: #59636d; font-size: 14px; }
.contact-card .contact-email { font-size: 18px; overflow-wrap: anywhere; }
.footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 20px;
  width: 100%;
  margin: 4px auto 0;
  padding: 22px 0 30px;
  color: var(--muted);
  font-size: 12px;
}
.footer .footer-inner, .footer .container {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.footer a { color: #62768a; }

@media (max-width: 1000px) {
  .nav-links { gap: 18px; }
  .page-layout { gap: 24px; }
  .card-body, .card-body.roomy { padding: 26px; }
  .two-column { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .appointment-grid { gap: 8px; }
  .appointment-grid .fact { padding: 11px; }
  .research-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .publication { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; padding: 20px; }
  .venue-tile { width: 72px; min-height: 78px; }
  .tile-label { font-size: 14px; }
  .service-list { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}

@media (max-width: 767px) {
  body { padding-top: 74px; font-size: 15px; }
  html { scroll-padding-top: 74px; }
  .nav-inner, .page-layout, .footer { width: calc(100% - 28px); }
  .nav-inner { gap: 20px; }
  .site-name { font-size: 17px; }
  .nav-links { gap: 17px; }
  .nav-links a { font-size: 12px; }
  .page-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .profile-column { position: static; }
  .profile-card { padding: 22px; }
  .profile-photo { width: 100px; height: 100px; margin-bottom: 14px; border-radius: 50%; }
  .profile-card h1 { margin-bottom: 7px; font-size: 26px; }
  .profile-role { margin-bottom: 7px; }
  .profile-affiliation { margin-bottom: 7px; }
  .profile-email { margin-bottom: 4px; }
  .profile-links { margin-top: 8px; }
  .content-column > .card { margin-bottom: 18px; }
  .card-body, .card-body.roomy { padding: 24px; }
  .card-title { font-size: 26px; margin-bottom: 18px; }
  .card-heading { padding: 15px 20px; font-size: 17px; }
  .about-text { font-size: 15px; }
  .appointment-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 20px; }
  .appointment-grid .fact { padding: 13px 15px; }
  .appointment-grid .fact h3 { margin-bottom: 4px; }
  .two-column { gap: 26px; }
  .honors-list li { font-size: 12px; gap: 10px; }
  .pub-controls { gap: 10px; padding: 17px 18px 12px; }
  .publication-intro > p:first-child { padding: 14px 18px 0; font-size: 12px; }
  .pub-count { padding: 0 18px 14px; }
  .year-heading { padding: 10px 18px; }
  .publication { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 19px 18px; }
  .venue-tile { width: 64px; min-height: 72px; padding: 7px 4px; }
  .tile-label { font-size: 13px; }
  .tile-year { font-size: 11px; }
  .tile-type { font-size: 8px; }
  .publication h4, .publication .pub-title { font-size: 16px; line-height: 1.4; }
  .publication .authors { font-size: 12px; }
  .pub-meta { gap: 3px 10px; }
  .opportunities { padding: 18px; }
  .footer { margin-top: 0; padding: 14px 0 24px; font-size: 11px; }
  .footer .footer-inner, .footer .container { display: block; }
  .footer span { display: block; margin-bottom: 5px; }
}

@media (max-width: 380px) {
  .nav-inner { gap: 14px; }
  .site-name { font-size: 16px; }
  .card-body, .card-body.roomy { padding: 20px; }
  .card-heading { padding-right: 18px; padding-left: 18px; }
  .pub-controls { padding-right: 14px; padding-left: 14px; }
  .pub-controls button, .pub-controls select { padding: 6px 9px; }
  .year-select { margin-left: 0; }
  .publication { grid-template-columns: 48px minmax(0, 1fr); gap: 11px; padding: 18px 14px; }
  .venue-tile { width: 48px; min-height: 65px; }
  .tile-label { font-size: 11px; }
  .tile-year { font-size: 10px; }
  .tile-type { font-size: 7px; }
}

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

/* Publication figures, concise summaries and source-linked venue metrics. */
.nav-inner,.page-layout {width:min(1240px,calc(100% - 48px));}
.page-layout {grid-template-columns:255px minmax(0,1fr);}
.profile-links {display:flex;flex-direction:column;align-items:flex-start;gap:11px;width:max-content;max-width:100%;margin:18px auto 0;}
.profile-links svg {width:18px;height:18px;}
.profile-links a {gap:10px;}
.school-emblem {display:block;flex:0 0 54px;width:54px;height:54px;overflow:hidden;background:white;}
.school-emblem img {width:54px;height:54px;object-fit:contain;}
.school-emblem.emblem-ouc img {object-fit:cover;transform:scale(1.35);}
.school-emblem.emblem-dut img {object-fit:cover;transform:scale(1.1);}
.school-emblem-pair {display:flex;flex-direction:row;align-items:center;gap:7px;flex:0 0 115px;width:115px;height:54px;}
.research-overview {font-size:15px;color:#526476;}
.research-tags {display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;}
.research-tags span {padding:5px 10px;background:#eef5fb;border-radius:5px;font-size:12px;color:#32618a;}
.research-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
.publication {grid-template-columns:152px minmax(0,1fr);gap:24px;padding:26px;}
.pub-figure {width:152px;margin:2px 0 0;}
.pub-figure>a {display:block;aspect-ratio:1;overflow:hidden;background:#f7f9fc;border:1px solid #e7edf1;border-radius:8px;}
.pub-figure img {width:100%;height:100%;object-fit:contain;transition:transform .18s ease;}
.pub-figure>a:hover img {transform:scale(1.025);}
.pub-figure figcaption {margin-top:6px;color:#77828c;font-size:10px;line-height:1.4;text-align:center;}
.publication h4,.publication .pub-title {font-size:19px;font-weight:700;line-height:1.4;color:#26313b;margin-bottom:8px;}
.publication .authors {font-size:13px;color:#404a54;line-height:1.65;}
.pub-meta {font-size:13px;gap:3px 8px;margin-bottom:7px;}
.pub-meta .venue {color:#46525e;}
.pub-metrics {display:flex;flex-wrap:wrap;gap:5px;margin:7px 0 10px;}
.pub-metrics:empty {display:none;}
.metric-badge {display:inline-block;padding:3px 8px;border-radius:12px;font-size:10px;font-weight:700;line-height:1.5;white-space:nowrap;color:#fff;}
.metric-badge:hover {color:#fff;text-decoration:none;filter:brightness(.92);}
.badge-ccf {background:#386b9c;}.badge-cas {background:#288448;}.badge-if {background:#626f7d;}
.pub-summary {color:#687681;font-size:13px;line-height:1.7;margin:0 0 9px;}
.pub-links {font-size:13px;}
.metrics-note {padding:14px 24px 0;color:#6c757d;font-size:11px;}
.metrics-note summary {cursor:pointer;}
.metrics-note p {margin:8px 0;line-height:1.6;}
@media (max-width:1050px){.publication{grid-template-columns:120px minmax(0,1fr);gap:18px;padding:22px;}.pub-figure{width:120px;}.research-grid{grid-template-columns:1fr;gap:18px;}.publication h4,.publication .pub-title{font-size:18px;}}
@media (max-width:767px){.nav-inner,.page-layout{width:calc(100% - 28px);}.page-layout{grid-template-columns:minmax(0,1fr);}.profile-links{flex-direction:row;justify-content:center;width:auto;gap:12px;flex-wrap:wrap;}.profile-links a{font-size:12px;gap:5px;}.publication{grid-template-columns:90px minmax(0,1fr);gap:16px;padding:21px 18px;}.pub-figure{width:90px;}.publication h4,.publication .pub-title{font-size:17px;}.metrics-note{padding:14px 18px 0;}.publication .authors,.pub-summary,.pub-meta{font-size:12px;}.metric-badge{font-size:9px;padding:3px 6px;}}
@media (max-width:420px){.publication{display:block;padding:22px 18px;}.pub-figure{float:left;width:94px;margin:3px 15px 9px 0;}.publication article{display:contents;}.publication h4,.publication .pub-title{font-size:17px;min-height:98px;}.publication .authors{clear:both;}.publication::after{display:table;content:"";clear:both;}.pub-summary{font-size:13px;}.metric-badge{font-size:10px;}}
@media (prefers-reduced-motion:reduce){.pub-figure img{transition:none;}}
/* Keep every section link visible on narrow screens. */
@media (max-width:767px){
  body{padding-top:91px;}
  html{scroll-padding-top:91px;}
  .site-header{height:auto;}
  .nav-inner{display:block;height:auto;padding:8px 0;}
  .nav-links{flex-wrap:wrap;gap:0 14px;overflow:visible;margin-top:2px;}
  .nav-links a{padding:6px 0;font-size:12px;}
  .card{scroll-margin-top:91px;}
}
@media (max-width:380px){body{padding-top:119px;}html{scroll-padding-top:119px;}.card{scroll-margin-top:119px;}}

.school-emblem.emblem-hku img {border-radius:5px;}
.school-emblem.emblem-um img {width:174px;height:54px;max-width:none;object-fit:fill;}
.school-emblem.emblem-um {flex:0 0 46px;width:46px;border-radius:2px;}

/* Keep paired university emblems together on small screens. */
@media(max-width:600px){
  .education-item {flex-direction:column;gap:10px;}
  .school-emblem-pair {flex:0 0 auto;width:115px;height:54px;}
  .school-details {width:100%;}
}