.affiliations {
  text-align: left;
  margin: 24px 0 8px;
}

:root {
  --site-nav-height: 64px;
  /* Typography / spacing tokens to keep layout consistent */
  --font-family: 'Lato', Verdana, Helvetica, sans-serif;
  --base-font-size: 14px;
  --base-line-height: 1.5;
  --space-1: 6px;
  --space-2: 12px;
  --space-3: 18px;
  --space-4: 24px;
  --radius: 10px;
  --muted: #666666;
}

/* Enable smooth scrolling for in-page anchor navigation */
html { scroll-behavior: smooth; }

.affiliations h2 {
  font-size: 20px;
  margin: 0 0 10px;
}

.affiliations p {
  margin: 4px 0;
  color: #4a4a4a;
  line-height: 1.5;
}

.institution-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin: 16px auto 24px;
  max-width: 540px;
  padding: 0 12px;
}

.institution-logos img {
  max-width: 220px;
  max-height: 140px;
  height: auto;
  width: auto;
  display: block;
  object-fit: contain;
}

.institution-logos.single {
  margin-bottom: 12px;
  justify-content: center;
}

.institution-logos.single img {
  max-width: 340px;
  max-height: 180px;
}

.institution-logos.pair img {
  max-width: 90px;
  max-height: 70px;
}

.institution-logos.pair {
  gap: 24px;
}

.site-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.nav-inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav-brand {
  font-weight: 700;
  font-size: 18px;
  color: #0f172a;
  text-decoration: none;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

.nav-links a {
  color: #1f2a37;
  font-weight: 600;
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 999px;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 200ms ease;
}

.nav-links a:focus,
.nav-links a:hover {
  color: #ffffff;
  background-color: #1772d0;
  box-shadow: 0 6px 14px rgba(23, 114, 208, 0.24);
}

@media (max-width: 640px) {
  .nav-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .nav-links {
    width: 100%;
    justify-content: flex-start;
    gap: 10px;
  }

  .nav-links a {
    padding: 6px 12px;
  }
}

/* Mobile nav toggle (hamburger) */
.nav-toggle { display: none; background: transparent; border: 0; cursor: pointer; padding: 8px; border-radius: 8px; }
.nav-toggle .hamburger { display: inline-block; width: 22px; height: 2px; background: #0f172a; position: relative; }
.nav-toggle .hamburger::before, .nav-toggle .hamburger::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; background: #0f172a; }
.nav-toggle .hamburger::before { top: -6px; }
.nav-toggle .hamburger::after { top: 6px; }
.nav-toggle:focus-visible { outline: 3px solid rgba(23,100,200,0.18); }

@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; align-items: center; }
  .nav-links { display: none; width: 100%; }
  .nav-links.open { display: flex; flex-direction: column; gap: 8px; }
  .nav-links a { width: 100%; display: inline-block; }
}

#profile,
#research,
#publications,
#patents,
#honors,
#news,
#affiliations {
  scroll-margin-top: 96px;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: local('Lato Italic'), local('Lato-Italic'), url(https://fonts.gstatic.com/s/lato/v15/S6u8w4BMUTPHjxsAUi-qNiXg7eU0.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: local('Lato Italic'), local('Lato-Italic'), url(https://fonts.gstatic.com/s/lato/v15/S6u8w4BMUTPHjxsAXC-qNiXg7Q.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 700;
  src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url(https://fonts.gstatic.com/s/lato/v15/S6u_w4BMUTPHjxsI5wq_FQftx9897sxZ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 700;
  src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url(https://fonts.gstatic.com/s/lato/v15/S6u_w4BMUTPHjxsI5wq_Gwftx9897g.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v15/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v15/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v15/S6u9w4BMUTPHh6UVSwaPGQ3q5d0N7w.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v15/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

a {
  color: #1772d0;
  text-decoration: none;
}

a:focus,
a:hover {
  color: #f09228;
  text-decoration: none;
}

body,
td,
th,
tr,
p,
a {
  font-family: var(--font-family);
  font-size: var(--base-font-size);
  line-height: var(--base-line-height);
}

strong {
  font-family: 'Lato', Verdana, Helvetica, sans-serif;
  font-size: 14px;
}

h1,h2,h3,h4,h5,h6 {
  margin: 0;
  font-weight: 700;
  font-family: var(--font-family);
}

h1 { font-size: 28px; }
h2 { font-size: 22px; font-weight: 600; }
h3 { font-size: 18px; }


.papertitle {
  font-family: 'Lato', Verdana, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
}

.name {
  padding-top: 20px;
  margin: 0;
  font-family: 'Lato', Verdana, Helvetica, sans-serif;
  font-size: 32px;
}

/* Page-specific and component styles (WeChat popup, News, layout helpers) */
.publication-thumbnail {
  width: 200px;
  height: 200px;
  position: relative;
}

.publication-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

.publication-thumbnail__overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 280ms ease;
  pointer-events: none;
  border-radius: 8px;
}

.publication-thumbnail__overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.main-wrapper {
  width: 100%;
  max-width: 800px;
  margin-right: auto;
  margin-left: auto;
  border: 0;
  border-spacing: 0;
  border-collapse: separate;
}
.full-table { width:100%; border:0; border-spacing:0; border-collapse:separate; margin-right:auto; margin-left:auto; }
.spaced-rows { border-spacing: 0 10px; }
.pad-0 { padding: 0 !important; }
.pad-8 { padding: 8px !important; }
.pad-16 { padding: 16px !important; }
.pad-2-5 { padding: 2.5% !important; }
.col-20 { width: 20% !important; }
.col-80 { width: 80% !important; }
.col-63 { width: 63% !important; }
.col-37 { width: 37% !important; max-width: 37% !important; }
.vcenter { vertical-align: middle !important; }
.center { text-align: center; }
.small { font-size: small; }
.profile-photo { width: auto; max-width: 240px; height: auto; object-fit: cover; border-radius:50%; display:block; }

/* Utility classes replacing inline styles */
.small-center { max-width: 200px; margin: 0 auto; }
.muted-note { font-size: 12px; color: #666; }

/* Patent / publication helpers (replace inline widths) */
.patent-cell-left { width: 30%; }
.patent-cell-right { width: 70%; }

/* Fluid thumbnail variant for patents (object-fit: contain) */
.publication-thumbnail--fluid { width: 100%; height: auto; max-width: 100%; }
.publication-thumbnail--fluid img { object-fit: contain; height: auto; width: 100%; transition: opacity 0.2s ease; border-radius: 8px; display:block; }

/* Patent images and overlays should scale and not be constrained by table cells */
.patent-img { width: 100%; height: auto; display: block; max-width: 880px; }
.publication-thumbnail__overlay img { width: 100%; height: auto; display: block; }

/* Logos: ensure readable size and allow wrapping */
.institution-logos img { display: inline-block; }

/* Publication thumbnails slightly larger on wider screens */
@media (min-width: 960px) {
  .publication-thumbnail { width: 220px; height: 220px; }
}

@media (max-width: 640px) {
  .publication-thumbnail { width: 140px; height: 140px; }
  .institution-logos img { max-width: 140px; max-height: 80px; }
}

/* Responsive image helper */
.responsive-img { max-width: 100%; height: auto; display: block; }

/* News card grid and refined card styles */
.news-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.news-item { padding: 14px; border-radius: var(--radius); background: linear-gradient(180deg,#ffffff,#f8fafc); box-shadow: 0 8px 26px rgba(12,20,35,0.06); border: 1px solid rgba(15,23,35,0.04); transition: transform 220ms ease, box-shadow 220ms ease; }
.news-item:hover, .news-item:focus-within { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(12,20,35,0.08); }
.news-date { font-size: 12px; color: #6b7280; margin-bottom: 6px; }
.news-title { display: block; font-weight: 700; color: #0f172a; text-decoration: none; margin-bottom: 6px; }
.news-title:hover { color: #1772d0; }
.news-summary { color: #374151; font-size: 13px; margin-top: 6px; }
.news-tags { margin-top: 8px; }
.tag { display: inline-block; background: #eef2ff; color: #1e3a8a; font-size: 12px; padding: 4px 8px; border-radius: 999px; margin-right: 6px; }

/* WeChat popup (hover + click for touch) */
.wechat-container { position: relative; display: inline-block; }
.wechat-popup { display: none; position: absolute; top: 110%; left: 50%; transform: translateX(-50%); padding: 8px; background: #fff; border: 1px solid #ddd; border-radius: 6px; box-shadow: 0 6px 18px rgba(12,20,35,0.12); z-index: 220; }
.wechat-popup img { width: 220px; max-width: 80vw; height: auto; display: block; }
.wechat-container:hover .wechat-popup { display: block; }
.wechat-container.open .wechat-popup { display: block; }
.wechat-link { text-decoration: none; color: #1772d0; cursor: pointer; }
.wechat-link:hover { color: #f09228; }

/* News list visual improvements */
.news-list { padding: 12px 8px 18px; }
.news-loading, .news-empty, .news-error { color: #666; font-size: 0.95em; padding: 8px 6px; }
.news-item { padding: 10px; margin-bottom: 10px; border-radius: 10px; background: linear-gradient(180deg,#ffffff,#f8fafc); box-shadow: 0 6px 18px rgba(15,23,35,0.04); border: 1px solid rgba(15,23,35,0.03); }
.news-date { font-size: 12px; color: #6b7280; margin-bottom: 6px; }
.news-title { display: block; font-weight: 700; color: #0f172a; text-decoration: none; margin-bottom: 6px; }
.news-title:hover { color: #1772d0; }
.news-summary { color: #374151; font-size: 13px; margin-top: 6px; }
.news-tags { margin-top: 8px; }
.tag { display: inline-block; background: #eef2ff; color: #1e3a8a; font-size: 12px; padding: 4px 8px; border-radius: 999px; margin-right: 6px; }

/* guestbook/giscus styles removed */

/* News column and controls */
.news-column { position: fixed; right: 0; top: var(--site-nav-height, 64px); width: 320px; height: calc(100vh - var(--site-nav-height, 64px)); overflow: auto; background: #fff; border-left: 1px solid #eee; padding: 12px; box-shadow: -6px 0 18px rgba(15,23,35,0.04); -webkit-overflow-scrolling: touch; z-index: 999; transition: transform 320ms cubic-bezier(.2,.8,.2,1), opacity 220ms ease; }
.news-column header{ display:flex; flex-direction:column; gap:10px; align-items:stretch; color:#0f172a; }
.news-header{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.news-title-wrap{ display:flex; align-items:baseline; gap:10px; }
.news-heading{ margin:0; font-size:18px; font-weight:800; color:#0b1220; }
.news-count{ font-size:12px; color:#6b7280; }
.news-controls{ display:flex; gap:8px; align-items:center; }
.news-search{ padding:8px 10px; border-radius:8px; border:1px solid #e6eef8; background:#fbfdff; outline:none; width:160px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); }
.news-search:focus{ box-shadow: 0 6px 18px rgba(23,100,200,0.06); border-color:#bcd7ff; }
.news-item{ margin-bottom:12px; }
.news-date{ font-size:0.85em; color:#666; }
.news-summary{ margin-top:6px; color:#444; }
.news-toggle-btn{ background: linear-gradient(180deg,#2a7bd4,#1764c8); color:#fff; border:0; padding:8px 10px; border-radius:999px; cursor:pointer; font-weight:700; box-shadow: 0 6px 14px rgba(23,100,200,0.12), inset 0 -2px 0 rgba(255,255,255,0.06); display:flex; align-items:center; gap:8px; }
.news-toggle-btn .arrow { display:inline-block; width:14px; height:14px; transition: transform 260ms ease; }
.news-column.collapsed { transform: translateX(104%); opacity: 0; pointer-events: none; }
body.news-collapsed .main-wrapper { margin-right: auto !important; margin-left: auto !important; }
body.news-collapsed .news-toggle-btn .arrow { transform: rotate(180deg); }
@media (max-width:960px){
  .main-wrapper { margin-right: 0; }
  /* On small screens the news column becomes a stacked block below the main content.
     When collapsed we should fully hide it (display:none) so it doesn't take space.
     Also ensure pointer events and transforms don't interfere with touch scrolling. */
  .news-column{
    position: relative;
    top: 0;
    width: 100%;
    height: auto;
    box-shadow: none;
    border-left: none;
    margin-top: 12px;
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
  .news-column.collapsed {
    display: none !important;
  }
}

/* Reserve space for the fixed news column on wider screens using padding so the
   main content never flows under the fixed panel. Padding works reliably with
   the table layout used by the page and avoids horizontal overflow. */
@media (min-width: 961px) {
  .main-wrapper {
    box-sizing: border-box;
    padding-right: 360px; /* news width (320px) + 40px gutter */
    transition: padding-right 320ms cubic-bezier(.2,.8,.2,1);
  }
  /* When collapsed, remove the reserved padding so content recenters */
  body.news-collapsed .main-wrapper {
    padding-right: 0 !important;
  }
}

/* Floating show button */
.news-show-button{ position: fixed; right: 12px; top: 50%; transform: translateY(-50%); z-index: 1002; background: linear-gradient(180deg,#2a7bd4,#1764c8); color: #fff; border: 0; padding: 8px 12px; border-radius: 999px; box-shadow: 0 6px 18px rgba(23,100,200,0.14); cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight:700; opacity: 0; pointer-events: none; transition: opacity 260ms ease; }
@keyframes popIn { 0% { opacity: 0; transform: translateY(-50%) scale(0.94); } 60% { opacity: 1; transform: translateY(-50%) scale(1.06); } 100% { opacity: 1; transform: translateY(-50%) scale(1); } }

/* Accessibility helpers */
.skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus, .skip-link:active { position: fixed; left: 12px; top: 12px; width: auto; height: auto; padding: 8px 12px; background: #fff; color: #0f172a; z-index: 2000; border: 1px solid rgba(15,23,35,0.08); box-shadow: 0 6px 18px rgba(12,20,35,0.08); border-radius: 6px; }

/* Focus styles using focus-visible for keyboard users */
:focus { outline: none; }
:focus-visible { outline: 3px solid #1764c8; outline-offset: 3px; }

/* Improve tap targets for nav links */
.nav-links a { padding: 10px 16px; }

/* Ensure form controls have clear focus */
input:focus-visible, button:focus-visible, a:focus-visible { box-shadow: 0 0 0 4px rgba(23,100,200,0.12); }

/* Show the floating news show button when news is collapsed */
body.news-collapsed .news-show-button { opacity: 1; pointer-events: auto; }

/* Improve contrast for muted notes */
.muted-note { color: var(--muted); }
body.news-collapsed .news-show-button { opacity: 1; pointer-events: auto; animation: popIn 360ms cubic-bezier(.2,.8,.2,1); }
@media (max-width:960px){
  /* Make the floating show button visible on phones and place it within easy reach.
     Hide the top-right floating button (desktop placement) and move it to bottom-right. */
  .news-show-button{
    display: flex !important;
    right: 12px;
    bottom: 12px;
    top: auto;
    transform: none;
    z-index: 1002;
    /* slightly larger hit area on touch devices */
    padding: 12px 16px;
    font-size: 15px;
  }
}

/* Background Watermark */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('images/beihang_logo_watermark.svg');
  background-repeat: no-repeat;
  background-position: center 78%;
  background-size: 30%;
  opacity: 0.08;
  z-index: -1;
  pointer-events: none;
}

/* Backdrop for news panel */
/* backdrop removed */

/* News item entrance animation */
.news-list .news-item{ opacity: 0; transform: translateY(8px); border-radius: 10px; padding: 10px; transition: transform 360ms ease, opacity 360ms ease; }
.news-list .news-item:nth-child(1){ animation: slideUp 360ms ease 0ms forwards; }
.news-list .news-item:nth-child(2){ animation: slideUp 360ms ease 40ms forwards; }
.news-list .news-item:nth-child(3){ animation: slideUp 360ms ease 80ms forwards; }
.news-list .news-item:nth-child(4){ animation: slideUp 360ms ease 120ms forwards; }
.news-list .news-item:nth-child(5){ animation: slideUp 360ms ease 160ms forwards; }
@keyframes slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.news-list .news-item a.news-title{ color: #0f172a; font-size: 15px; }
.news-list .news-item:hover{ transform: translateY(-4px); box-shadow: 0 10px 30px rgba(2,6,23,0.06); }

/* News card visual style */
.news-list .news-item{ background: linear-gradient(180deg,#ffffff,#fbfdff); border:1px solid rgba(15,23,35,0.04); margin-bottom:10px; }
.news-date{ font-size:12px; color:#6b7280; margin-bottom:6px; }
.news-summary{ color:#374151; font-size:13px; margin-top:6px; }
.news-tags { margin-top:8px; }
.news-item .tag{ background:#eef2ff; color:#1e3a8a; padding:4px 8px; border-radius:999px; margin-right:6px; font-size:12px; }

/* 2026 visual refresh: unified typography, color system, and section/card hierarchy */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@500;600&family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;700&display=swap');

:root {
  --site-nav-height: 72px;
  --content-max: 980px;
  --font-family: 'Manrope', 'Noto Sans SC', 'Lato', Verdana, Helvetica, sans-serif;
  --font-serif: 'IBM Plex Serif', 'Noto Serif SC', 'Times New Roman', serif;
  --base-font-size: 15px;
  --base-line-height: 1.72;

  --bg-mint: #edf8f4;
  --bg-sky: #edf3fb;
  --bg-cream: #fbf5ea;
  --surface: rgba(255, 255, 255, 0.84);
  --surface-strong: #ffffff;
  --ink-strong: #10243e;
  --ink: #22384d;
  --ink-soft: #54677a;
  --line: rgba(16, 36, 62, 0.14);
  --brand: #118d82;
  --brand-deep: #0a6581;
  --accent: #e1712a;

  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 12px;
  --shadow-lg: 0 26px 60px rgba(13, 42, 58, 0.12);
  --shadow-md: 0 14px 34px rgba(13, 42, 58, 0.1);
  --shadow-sm: 0 8px 18px rgba(13, 42, 58, 0.08);
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(980px 560px at -12% -12%, #daf4eb 0%, rgba(218, 244, 235, 0) 72%),
    radial-gradient(760px 420px at 110% 6%, #ffe7d2 0%, rgba(255, 231, 210, 0) 70%),
    linear-gradient(160deg, var(--bg-mint) 0%, var(--bg-sky) 48%, var(--bg-cream) 100%);
}

/* Override previous watermark with layered atmospheric background */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.24) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(0deg, rgba(255, 255, 255, 0.2) 1px, transparent 1px) 0 0 / 32px 32px;
  opacity: 0.2;
  pointer-events: none;
  z-index: -2;
}

body::after {
  content: "";
  position: fixed;
  width: min(48vw, 560px);
  aspect-ratio: 1 / 1;
  right: -140px;
  bottom: -180px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(17, 141, 130, 0.2) 0%, rgba(17, 141, 130, 0) 72%);
  filter: blur(6px);
  pointer-events: none;
  z-index: -1;
}

body,
td,
th,
tr,
p,
a {
  color: var(--ink);
  font-family: var(--font-family);
  font-size: var(--base-font-size);
  line-height: var(--base-line-height);
}

p {
  margin: 0 0 12px;
}

a {
  color: var(--brand-deep);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 180ms ease, border-color 180ms ease;
}

a:focus,
a:hover {
  color: var(--accent);
  border-bottom-color: currentColor;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--ink-strong);
}

h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.36rem, 1.3rem + 0.34vw, 1.6rem);
  letter-spacing: 0.02em;
}

h3 {
  font-size: 1.05rem;
}

.name {
  margin: 0;
  padding-top: 0;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 1.8rem + 0.8vw, 2.7rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.papertitle {
  font-family: var(--font-family);
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink-strong);
}

.main-wrapper {
  width: min(var(--content-max), calc(100% - 24px));
  max-width: var(--content-max);
  margin: 14px auto 36px;
  border-spacing: 0 14px;
}

.main-wrapper > tbody > tr > td {
  padding: 0;
}

#profile,
#research,
#publications,
#patents,
#honors,
#news,
#affiliations {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(6px);
}

/* Let WeChat popup extend outside the profile card without clipping. */
#profile {
  overflow: visible;
  z-index: auto;
}

#profile::before,
#research::before,
#publications::before,
#patents::before,
#honors::before,
#news::before,
#affiliations::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-deep) 52%, var(--accent) 100%);
  opacity: 0.82;
}

#profile .full-table,
#research .full-table,
#publications .full-table,
#patents .full-table,
#honors .full-table,
#affiliations .full-table {
  margin: 0;
}

#profile .full-table td,
#research .full-table td,
#publications .full-table td,
#patents .full-table td,
#honors .full-table td,
#affiliations .full-table td {
  padding-top: 18px;
  padding-bottom: 18px;
}

#profile p.center {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.profile-photo {
  width: min(100%, 250px);
  max-width: 250px;
  border-radius: 28px;
  border: 4px solid rgba(255, 255, 255, 0.78);
  box-shadow: var(--shadow-lg);
}

.wechat-popup {
  display: none !important;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  padding: 10px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 48px rgba(10, 24, 39, 0.3);
  z-index: 5000 !important;
}

.wechat-popup.is-fixed {
  z-index: 5001 !important;
}

.wechat-popup img {
  width: min(320px, calc(100vw - 56px));
  max-width: min(320px, calc(100vw - 56px));
  max-height: calc(100vh - 120px);
  height: auto;
  display: block;
  object-fit: contain;
}

.wechat-popup.open {
  display: block !important;
}

.wechat-popup.is-fixed img {
  max-width: min(320px, calc(100vw - 56px));
  max-height: calc(100vh - 120px);
}

#research p,
#patents p,
#publications p,
#honors p {
  color: var(--ink-soft);
}

#publications .spaced-rows,
#patents .spaced-rows {
  border-spacing: 0 16px;
}

#publications .spaced-rows tr > td,
#patents .spaced-rows tr > td {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.9) 0%, rgba(245, 252, 255, 0.9) 100%);
  border-top: 1px solid rgba(16, 36, 62, 0.1);
  border-bottom: 1px solid rgba(16, 36, 62, 0.1);
}

#publications .spaced-rows tr > td:first-child,
#patents .spaced-rows tr > td:first-child {
  border-left: 1px solid rgba(16, 36, 62, 0.1);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

#publications .spaced-rows tr > td:last-child,
#patents .spaced-rows tr > td:last-child {
  border-right: 1px solid rgba(16, 36, 62, 0.1);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.publication-thumbnail {
  width: min(100%, 230px);
  height: auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

.publication-thumbnail img {
  border-radius: 14px;
}

.publication-thumbnail__overlay {
  border-radius: 14px;
}

.publication-thumbnail--fluid {
  aspect-ratio: auto;
  width: min(100%, 340px);
  max-width: 340px;
}

.patent-img {
  max-width: 340px;
}

#honors .full-table tr + tr td {
  border-top: 1px dashed rgba(16, 36, 62, 0.14);
}

.period-title {
  margin: 0;
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(130deg, rgba(17, 141, 130, 0.14), rgba(10, 101, 129, 0.14));
  color: var(--ink-strong);
  font-family: var(--font-family);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.institution-logos {
  max-width: 720px;
  gap: 18px;
}

.institution-logos a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(16, 36, 62, 0.12);
  box-shadow: var(--shadow-sm);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.institution-logos a:hover,
.institution-logos a:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(10, 101, 129, 0.32);
}

.site-nav {
  width: min(var(--content-max), calc(100% - 24px));
  margin: 12px auto 8px;
  top: 10px;
  border: 1px solid rgba(16, 36, 62, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 12px 30px rgba(13, 42, 58, 0.14);
  backdrop-filter: blur(10px);
}

.nav-inner {
  max-width: none;
  padding: 10px 14px 10px 18px;
  gap: 14px;
}

.nav-brand {
  color: var(--ink-strong);
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
}

.nav-links {
  gap: 8px;
}

.nav-links a {
  color: var(--ink);
  font-weight: 700;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
}

.nav-links a:focus,
.nav-links a:hover {
  color: #ffffff;
  background: linear-gradient(130deg, var(--brand) 0%, var(--brand-deep) 100%);
  box-shadow: 0 10px 18px rgba(10, 101, 129, 0.3);
}

.nav-toggle .hamburger,
.nav-toggle .hamburger::before,
.nav-toggle .hamburger::after {
  background: var(--ink-strong);
}

.news-column {
  right: 14px;
  top: calc(var(--site-nav-height) + 18px);
  width: min(360px, calc(100vw - 28px));
  height: calc(100vh - var(--site-nav-height) - 30px);
  border-radius: 20px;
  border: 1px solid rgba(16, 36, 62, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(247, 252, 255, 0.95) 100%),
    radial-gradient(200px 120px at 95% 0%, rgba(17, 141, 130, 0.12), rgba(17, 141, 130, 0));
  box-shadow: 0 28px 52px rgba(13, 42, 58, 0.2);
  padding: 14px;
}

.news-header {
  margin-bottom: 10px;
}

.news-heading {
  font-family: var(--font-serif);
  font-size: 1.22rem;
  font-weight: 600;
}

.news-count {
  color: var(--ink-soft);
}

.news-search {
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(16, 36, 62, 0.18);
  background: #fff;
  color: var(--ink);
}

.news-search:focus {
  border-color: rgba(10, 101, 129, 0.4);
  box-shadow: 0 0 0 4px rgba(17, 141, 130, 0.12);
}

.news-toggle-btn,
.news-show-button {
  background: linear-gradient(132deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: #fff;
  box-shadow: 0 10px 20px rgba(10, 101, 129, 0.3);
}

.news-list {
  padding: 4px 2px 16px;
}

.news-list .news-item {
  padding: 12px;
  border-radius: 12px;
  background: linear-gradient(160deg, #ffffff 0%, #f6fbff 100%);
  border: 1px solid rgba(16, 36, 62, 0.1);
  box-shadow: 0 10px 18px rgba(13, 42, 58, 0.08);
}

.news-date {
  color: #61758a;
  font-weight: 600;
}

.news-title {
  display: inline-block;
  color: var(--ink-strong);
  font-weight: 800;
  line-height: 1.45;
}

.news-item .tag {
  background: rgba(17, 141, 130, 0.12);
  color: #0d4f62;
  font-weight: 700;
}

.news-footer {
  color: var(--ink-soft);
}

@media (min-width: 961px) {
  .main-wrapper {
    padding-right: 0;
    box-sizing: border-box;
    transition: padding-right 320ms cubic-bezier(.2, .8, .2, 1);
  }

  body.news-expanded .main-wrapper {
    padding-right: 390px;
  }

  body.news-collapsed .main-wrapper {
    padding-right: 0 !important;
  }
}

@media (max-width: 960px) {
  :root {
    --site-nav-height: 64px;
  }

  .site-nav {
    width: calc(100% - 16px);
    margin-top: 8px;
    border-radius: 20px;
  }

  .nav-inner {
    align-items: stretch;
    gap: 10px;
  }

  .nav-links.open {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }

  .nav-links a {
    text-align: center;
    width: 100%;
  }

  .main-wrapper {
    width: calc(100% - 16px);
    margin-top: 10px;
  }

  #profile,
  #research,
  #publications,
  #patents,
  #honors,
  #news,
  #affiliations {
    border-radius: 18px;
  }

  .news-column {
    position: relative;
    top: 0;
    right: auto;
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 16px 30px rgba(13, 42, 58, 0.12);
    margin: 8px 0 0;
  }

  .news-column.collapsed {
    display: none !important;
  }

  .news-show-button {
    right: 14px;
    bottom: 14px;
    top: auto;
    transform: none;
    padding: 12px 16px;
  }
}

@media (max-width: 900px) {
  #publications .spaced-rows,
  #patents .spaced-rows {
    border-spacing: 0 14px;
  }

  #publications .spaced-rows tbody,
  #publications .spaced-rows tr,
  #publications .spaced-rows td,
  #patents .spaced-rows tbody,
  #patents .spaced-rows tr,
  #patents .spaced-rows td {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
  }

  #publications .spaced-rows tr > td,
  #patents .spaced-rows tr > td {
    border-left: 1px solid rgba(16, 36, 62, 0.12);
    border-right: 1px solid rgba(16, 36, 62, 0.12);
    border-radius: 0;
  }

  #publications .spaced-rows tr > td:first-child,
  #patents .spaced-rows tr > td:first-child {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: 0;
  }

  #publications .spaced-rows tr > td:last-child,
  #patents .spaced-rows tr > td:last-child {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    border-top: 0;
  }

  .publication-thumbnail,
  .publication-thumbnail--fluid {
    margin: 0 auto;
  }
}

@media (max-width: 760px) {
  #profile .full-table tbody,
  #profile .full-table tr,
  #profile .full-table td {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
  }

  #profile .col-37 {
    margin-top: 8px;
    text-align: center;
  }

  #profile p.center {
    justify-content: center;
  }

  .profile-photo {
    margin: 0 auto;
  }

  .wechat-popup {
    position: fixed;
    left: 50%;
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    max-height: calc(100vh - 24px);
    overflow: auto;
  }

  .wechat-popup img {
    max-width: min(280px, calc(100vw - 40px));
    max-height: calc(100vh - 80px);
  }
}

@media (max-width: 520px) {
  .nav-links.open {
    grid-template-columns: 1fr;
  }

  #profile .full-table td,
  #research .full-table td,
  #publications .full-table td,
  #patents .full-table td,
  #honors .full-table td,
  #affiliations .full-table td {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .name {
    font-size: 1.92rem;
  }
}

@keyframes sectionRise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.main-wrapper > tbody > tr > td > div {
  animation: sectionRise 560ms cubic-bezier(.2, .8, .2, 1) both;
}

.main-wrapper > tbody > tr:nth-of-type(1) > td > div { animation-delay: 40ms; }
.main-wrapper > tbody > tr:nth-of-type(2) > td > div { animation-delay: 80ms; }
.main-wrapper > tbody > tr:nth-of-type(3) > td > div { animation-delay: 120ms; }
.main-wrapper > tbody > tr:nth-of-type(4) > td > div { animation-delay: 160ms; }
.main-wrapper > tbody > tr:nth-of-type(5) > td > div { animation-delay: 200ms; }
.main-wrapper > tbody > tr:nth-of-type(6) > td > div { animation-delay: 240ms; }
.main-wrapper > tbody > tr:nth-of-type(7) > td > div { animation-delay: 280ms; }

/* Keep accessibility focus ring visible after prior global reset */
:focus-visible {
  outline: 3px solid rgba(10, 101, 129, 0.62);
  outline-offset: 2px;
}

/* Floating side controls for news panel. */
.main-wrapper {
  width: calc(100% - 24px);
  max-width: var(--content-max);
  padding-right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body .news-column {
  display: block !important;
  position: fixed !important;
  top: calc(var(--site-nav-height) + 18px) !important;
  right: 14px !important;
  width: min(360px, calc(100vw - 28px)) !important;
  height: calc(100vh - var(--site-nav-height) - 30px) !important;
  max-height: calc(100vh - var(--site-nav-height) - 30px) !important;
  margin-top: 0 !important;
  overflow: auto !important;
  z-index: 1100;
  opacity: 1 !important;
  transform: translateX(0) !important;
  pointer-events: auto !important;
  transition: transform 260ms ease, opacity 220ms ease;
  box-shadow: 0 24px 48px rgba(13, 42, 58, 0.2);
}

body .news-column.collapsed {
  display: block !important;
  opacity: 0 !important;
  transform: translateX(calc(100% + 24px)) !important;
  pointer-events: none !important;
}

body .news-controls .news-toggle-btn {
  display: none !important;
}

body .news-show-button {
  display: inline-flex !important;
  position: fixed !important;
  right: 14px !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  z-index: 1150;
  opacity: 1 !important;
  pointer-events: auto !important;
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 700;
  background: linear-gradient(132deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: #ffffff;
  box-shadow: 0 12px 22px rgba(10, 101, 129, 0.32);
}

/* Avoid transformed ancestor so fixed-position news controls anchor to viewport. */
.main-wrapper > tbody > tr > td > #news {
  animation: none !important;
  transform: none !important;
}

@media (max-width: 680px) {
  body .news-column {
    width: min(92vw, 360px) !important;
    height: min(72vh, 560px) !important;
    max-height: min(72vh, 560px) !important;
    top: 84px !important;
    right: 8px !important;
  }

  body .news-show-button {
    right: 10px !important;
    top: auto !important;
    bottom: 12px !important;
    transform: none !important;
  }
}

/* News drawer mode (final override): body-level floating panel + side capsule toggle. */
body > .news-column {
  display: block !important;
  position: fixed !important;
  top: 86px !important;
  right: 14px !important;
  width: min(360px, calc(100vw - 28px)) !important;
  height: calc(100vh - 104px) !important;
  max-height: calc(100vh - 104px) !important;
  margin: 0 !important;
  overflow: auto !important;
  z-index: 1160 !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
  pointer-events: auto !important;
  transition: transform 240ms ease, opacity 200ms ease;
}

body > .news-column.collapsed {
  display: block !important;
  opacity: 0 !important;
  transform: translateX(calc(100% + 22px)) !important;
  pointer-events: none !important;
}

body > .news-column .news-toggle-btn {
  display: none !important;
}

body > .news-show-button {
  display: inline-flex !important;
  position: fixed !important;
  right: 14px !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  z-index: 1170 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  padding: 10px 14px !important;
  border-radius: 999px !important;
  border: 0 !important;
  font-weight: 700;
  white-space: nowrap;
  background: linear-gradient(132deg, var(--brand) 0%, var(--brand-deep) 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 26px rgba(10, 101, 129, 0.34) !important;
}

body.news-panel-collapsed > .news-show-button {
  box-shadow: 0 10px 20px rgba(10, 101, 129, 0.28) !important;
}

@media (max-width: 900px) {
  body > .news-column {
    width: min(92vw, 360px) !important;
    height: min(70vh, 560px) !important;
    max-height: min(70vh, 560px) !important;
    top: auto !important;
    bottom: 70px !important;
    right: 10px !important;
    border-radius: 16px !important;
  }

  body > .news-show-button {
    top: auto !important;
    bottom: 14px !important;
    right: 10px !important;
    transform: none !important;
  }
}