:root {
  --paper: #f6f8fb;
  --surface: #ffffff;
  --line: #dbe3ed;
  --ink: #263449;
  --heading: #182a43;
  --slate: #526176;
  --quiet: #5f6e84;
  --accent: #355f87;
  --accent-strong: #23496d;
  --accent-soft: #edf3f9;
  --accent-line: #c5d5e5;
  --selection: #dbe8f5;
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --display: Fraunces, "Iowan Old Style", Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--serif); font-size: 17px; line-height: 1.62; -webkit-font-smoothing: antialiased; }
::selection { background: var(--selection); color: var(--heading); }
a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: .17em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-strong); text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 3px; }
img { max-width: 100%; display: block; }
h1, h2 { font-family: var(--display); line-height: 1.15; }
h1, h2, h3, h4 { color: var(--heading); }
.skip-link { position: fixed; top: -60px; left: 20px; z-index: 100; background: var(--heading); color: var(--surface); padding: 9px 13px; }
.skip-link:hover { color: var(--surface); }
.skip-link:focus { top: 12px; }
.container { width: min(980px, calc(100% - 48px)); margin: 0 auto; }

.site-nav { min-height: 68px; position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.94); backdrop-filter: saturate(120%) blur(14px); border-bottom: 1px solid var(--line); }
.nav-inner { min-height: 68px; padding: 0 48px; display: flex; align-items: stretch; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--heading); font-family: var(--display); font-size: 17px; text-decoration: none; letter-spacing: -.01em; }
.brand-mark { width: 25px; height: 25px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent-strong); display: grid; place-items: center; font: 700 13px/1 var(--serif); transform: rotate(-2deg); }
.nav-menu { margin-left: auto; display: flex; align-items: stretch; gap: 32px; }
.nav-menu a { position: relative; display: flex; align-items: center; color: var(--slate); text-decoration: none; text-transform: uppercase; letter-spacing: .13em; font: 700 11px/1.2 var(--serif); }
.nav-menu a::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: 0; position: absolute; left: 50%; bottom: 12px; transform: translate(-50%, 5px); transition: .2s; }
.nav-menu a:hover, .nav-menu a.is-active { color: var(--accent-strong); }
.nav-menu a.is-active::after { opacity: 1; transform: translate(-50%, 0); }
.menu-button { display: none; width: 48px; margin-left: auto; padding: 0; background: transparent; border: 0; cursor: pointer; }
.menu-button span { width: 18px; height: 1px; background: var(--ink); display: block; margin: 5px auto; transition: transform .18s, opacity .12s; }
.menu-button.is-open span:first-child { transform: translateY(6px) rotate(45deg); }
.menu-button.is-open span:nth-child(2) { opacity: 0; }
.menu-button.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.hero { display: grid; grid-template-columns: 235px minmax(0, 1fr); gap: 52px; padding-top: 48px; }
.hero-photo { width: 100%; height: auto; object-fit: contain; object-position: center; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 1px 2px rgba(24,42,67,.04), 0 8px 24px rgba(24,42,67,.07); }
.caption { color: var(--quiet); text-align: center; font-size: 14px; line-height: 1.45; margin: 9px 0 0; }
.caption a { color: var(--slate); }
.hero-copy { padding-top: 4px; }
.hero h1 { font-size: clamp(40px, 5vw, 54px); font-weight: 600; letter-spacing: -.035em; margin: 0 0 5px; }
.email { color: var(--slate); font-size: 15px; margin: 0 0 24px; }
.hero-copy > p:not(.email) { max-width: 690px; margin: 0 0 20px; }
.hero-copy > p a { text-decoration-thickness: 1.5px; }
.hero-copy > p a:hover { color: var(--accent-strong); }
.opportunity-note { color: var(--accent-strong); font-weight: 600; }
.profile-links { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding-top: 6px; font-size: 15px; }
.profile-links span { color: var(--quiet); }
.profile-links .profile-contact { color: var(--slate); }
.profile-action { appearance: none; margin: 0; padding: 0; border: 0; background: transparent; font: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .17em; text-decoration-thickness: 1px; cursor: pointer; }
.profile-links .profile-action:hover { color: var(--accent-strong); text-decoration-thickness: 2px; }
.wechat-dialog { width: min(420px, calc(100% - 32px)); max-height: calc(100vh - 32px); margin: auto; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: 0 24px 70px rgba(24,42,67,.24); }
.wechat-dialog::backdrop { background: rgba(24,42,67,.55); backdrop-filter: blur(3px); }
.wechat-dialog-card { padding: 14px; }
.wechat-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.wechat-dialog-header h2 { margin: 0; font-size: 24px; }
.wechat-close { width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink); font: 400 25px/1 var(--serif); cursor: pointer; }
.wechat-close:hover { border-color: var(--accent); color: var(--accent-strong); }
.wechat-dialog img { width: 100%; max-height: calc(100vh - 110px); object-fit: contain; border-radius: 10px; }

.page-section { padding-top: 56px; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.page-section h2 { margin: 0 0 4px; font-size: clamp(29px, 4vw, 37px); font-weight: 600; letter-spacing: -.025em; }
.section-note { color: var(--quiet); font-size: 13px; margin: 0 0 8px; letter-spacing: .04em; }
.rule { height: 1px; background: var(--line); margin: 10px 0 25px; }
.publication { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 34px; margin-bottom: 48px; }
.paper-visual { position: relative; aspect-ratio: 1.45; width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 2px rgba(24,42,67,.04), 0 5px 16px rgba(24,42,67,.07); transition: transform .24s, box-shadow .24s; text-decoration: none; }
.paper-visual:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(24,42,67,.05), 0 15px 30px rgba(24,42,67,.10); }
.paper-visual img { width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.dexhot-visual { aspect-ratio: 16 / 9; background: var(--surface); }
.dexhot-visual img { object-fit: contain; object-position: center; }
.paper-placeholder { display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; background: radial-gradient(circle at 78% 23%, rgba(126,165,201,.74) 0 10%, transparent 10.5%), linear-gradient(150deg,#2b4360,#182a43); color: var(--surface); }
.paper-placeholder:hover { color: var(--surface); }
.paper-placeholder::after { content: ""; position: absolute; inset: 13px; border: 1px solid rgba(255,255,255,.38); border-radius: 5px; }
.paper-placeholder span { font: 600 31px/.77 var(--display); letter-spacing: -.04em; z-index: 1; }
.paper-placeholder small { margin-top: 12px; font: 700 9px/1.3 var(--serif); letter-spacing: .12em; color: var(--selection); z-index: 1; }
.paper-copy h3 { margin: 1px 0 7px; font-family: "Palatino Linotype", Palatino, Georgia, serif; font-size: 19px; line-height: 1.42; font-weight: 600; }
.authors, .venue, .paper-actions { font-size: 15px; }
.authors { margin: 0 0 5px; color: var(--slate); line-height: 1.5; }
.authors u { color: var(--heading); text-decoration-color: var(--accent); text-underline-offset: .18em; font-weight: 600; }
.venue { margin: 0 0 13px; font-size: 16px; font-weight: 600; }
.lead-badge { display: inline-block; margin-left: .35em; padding: 0 .48em; border: 1px solid var(--accent-line); border-radius: 4px; color: var(--accent-strong); background: var(--accent-soft); font-size: 13px; line-height: 1.55; }
.contribution { margin: -4px 0 13px; color: var(--slate); font-size: 14px; line-height: 1.5; }
.contribution strong { color: var(--ink); }
.paper-actions { display: flex; flex-wrap: wrap; gap: 7px 11px; color: var(--quiet); }
.paper-actions a, .abstract-toggle { color: var(--accent); text-decoration: none; }
.paper-actions a:hover, .abstract-toggle:hover, .abstract-toggle[aria-expanded="true"] { color: var(--accent-strong); }
.abstract-toggle { background: transparent; border: 0; padding: 0; cursor: pointer; font: inherit; }
.abstract-copy { width: 100%; margin: 10px 0 0; padding: 12px 15px; color: var(--slate); background: var(--accent-soft); border: 1px solid var(--accent-line); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; font-size: 15px; line-height: 1.58; }
.abstract-copy strong { color: var(--heading); }
.abstract-copy[hidden] { display: none; }

.experience-groups { display: grid; grid-template-columns: 1fr; gap: 38px; }
.experience-category { margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); color: var(--accent); font: 700 14px/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.timeline-item { display: flex; align-items: center; gap: 20px; padding: 12px 0; }
.institution-logo { position: relative; flex: 0 0 120px; width: 120px; height: 74px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 1px 4px rgba(24,42,67,.05); }
.institution-logo img,
.institution-logo .logo-wide { position: absolute; inset: 9px; display: block; width: calc(100% - 18px); height: calc(100% - 18px); max-width: none; max-height: none; object-fit: contain; object-position: center; }
.timeline-item h4 { margin: 0 0 3px; font-size: 17px; line-height: 1.35; }
.timeline-item p { margin: 0; color: var(--slate); font-size: 15px; line-height: 1.4; }
.timeline-item .timeline-date { color: var(--quiet); margin-top: 2px; font-size: 14px; }
.details-list { margin: 0; }
.details-list > div { display: grid; grid-template-columns: 184px 1fr; gap: 22px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.details-list > div:last-child { border-bottom: 0; }
.details-list dt { color: var(--accent); font-weight: 700; }.details-list dd { margin: 0; }

footer { width: min(980px, calc(100% - 48px)); margin: 68px auto 0; padding: 26px 0 30px; border-top: 1px solid var(--line); color: var(--quiet); display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px; align-items: center; font-size: 13px; }
footer p { margin: 0; }.footer-note { color: var(--accent-strong); }.opportunity-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin: 0 8px 1px 0; } footer a { justify-self: end; }

@media (max-width: 840px) {
  .nav-inner { flex-wrap: wrap; padding: 0 24px; }
  .menu-button { display: block; }
  .nav-menu { width: 100%; margin: 0; padding: 6px 0 14px; border-top: 1px solid var(--line); display: none; flex-direction: column; gap: 0; }
  .nav-menu.is-open { display: flex; }
  .nav-menu a { min-height: 40px; }.nav-menu a::after { display: none; }
  .hero { grid-template-columns: 195px minmax(0,1fr); gap: 34px; }
  .publication { grid-template-columns: 190px minmax(0,1fr); gap: 26px; }
}
@media (max-width: 660px) {
  .container, footer { width: min(calc(100% - 40px), 520px); }
  .hero { grid-template-columns: 1fr; gap: 24px; padding-top: 30px; }
  .portrait-column { width: min(72%, 280px); margin: 0 auto; }
  .hero h1 { font-size: 42px; }
  .page-section { padding-top: 48px; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 0; }
  .section-note { margin-top: 4px; }
  .publication { grid-template-columns: 1fr; gap: 18px; margin-bottom: 42px; }
  .paper-visual { width: min(100%, 340px); }
  .experience-groups { grid-template-columns: 1fr; gap: 30px; }
  .timeline-item { align-items: flex-start; gap: 14px; }
  .institution-logo { flex-basis: 92px; width: 92px; height: 66px; }
  .institution-logo img,
  .institution-logo .logo-wide { inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); }
  .education-list article { align-items: flex-start; }.education-list .year { flex-basis: 105px; }
  .details-list > div { grid-template-columns: 105px 1fr; }
  footer { grid-template-columns: 1fr; margin-top: 56px; } footer a { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition-duration: .01ms !important; } }