/* 单页静态站：内容无需 JavaScript；颜色、字号和布局在此集中维护。 */
:root {
  --paper:#f8f7f3;
  --ink:#202d29;
  --muted:#59645e;
  --line:#d9ddd5;
  --green:#315f4b;
  --pale:#edf0e8;
  --white:#fff;
  --serif:Georgia,'Times New Roman',serif;
  --sans:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --width:1080px;
  color-scheme:light
}

* {
  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:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased
}

a {
  color:inherit;
  text-decoration-thickness:1px;
  text-underline-offset:5px
}

a:hover {
  color:var(--green)
}

a:focus-visible,summary:focus-visible {
  outline:3px solid var(--green);
  outline-offset:6px;
  border-radius:2px
}

img {
  display:block;
  max-width:100%;
  height:auto
}

p,h1,h2,h3,figure {
  margin:0
}

p+p {
  margin-top:18px
}

::selection {
  background:#dbe6d6
}

strong {
  font-weight:600
}

.wrap {
  width:min(var(--width),calc(100% - 96px));
  margin-inline:auto
}

.skip-link {
  position:absolute;
  top:12px;
  left:20px;
  z-index:10;
  padding:8px 16px;
  background:var(--ink);
  color:var(--white);
  transform:translateY(-180%)
}

.skip-link:focus {
  transform:translateY(0)
}

.site-header {
  border-bottom:1px solid var(--line);
  background:var(--paper)
}

.header-inner {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:90px
}

.wordmark {
  text-decoration:none;
  font-size:17px;
  font-weight:600;
  letter-spacing:-.4px
}

.wordmark span {
  font-weight:400;
  color:var(--muted);
  margin-left:10px;
  font-size:14px
}

nav {
  display:flex;
  gap:28px;
  flex-wrap:wrap
}

nav a {
  font-size:13px;
  text-decoration:none;
  color:var(--muted);
  padding-block:10px
}

/* The locale is explicit in each URL; switching languages needs no script. */
.header-controls {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px 28px
}

.language-switch {
  flex-wrap:nowrap;
  gap:4px;
  padding-left:18px;
  border-left:1px solid var(--line)
}

.language-switch a {
  padding:5px 8px;
  border-radius:3px;
  font-size:14px;
  white-space:nowrap
}

.language-switch a[aria-current="page"] {
  color:var(--ink);
  background:var(--pale);
  font-weight:600
}

:lang(zh-CN) {
  --serif:Georgia,'Songti SC','Noto Serif CJK SC',STSong,serif;
  --sans:Inter,-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif
}

html:lang(zh-CN) body {
  line-height:1.9;
  line-break:strict
}

html:lang(zh-CN) :is(h1,h2,h3,h4,.statement,.hero-title) {
  letter-spacing:0;
  line-height:1.5
}

html:lang(zh-CN) .hero-intro {
  line-height:1.95
}

@media(max-width:640px) {
  .header-controls {
    width:100%;
    justify-content:space-between;
    gap:6px 18px
  }
  .language-switch {
    position:absolute;
    top:18px;
    right:0;
    padding-left:0;
    border-left:0
  }
  .header-inner > .wordmark {
    padding-right:100px
  }
}

nav a:hover {
  text-decoration:underline;
  color:var(--ink)
}

.hero {
  padding:86px 0 72px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 232px;
  column-gap:96px;
  align-items:start
}

.eyebrow {
  font-size:11px;
  letter-spacing:1.8px;
  text-transform:uppercase;
  font-weight:600;
  color:var(--green);
  line-height:1.6
}

.hero h1 {
  font-family:var(--serif);
  font-size:clamp(40px,5vw,64px);
  font-weight:400;
  letter-spacing:-2.4px;
  line-height:1.1;
  margin:19px 0 12px
}

.chinese-name {
  display:block;
  margin-top:14px;
  font-family:var(--sans);
  font-size:18px;
  letter-spacing:5px;
  font-weight:400;
  color:var(--muted)
}

.hero-title {
  font-size:18px;
  font-weight:500;
  margin-top:26px
}

.hero-intro {
  font-size:17px;
  color:var(--muted);
  max-width:620px;
  margin-top:17px;
  line-height:1.85
}

.hero-links {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px 23px;
  margin-top:27px;
  font-size:13px
}

.hero-links a {
  text-decoration:none;
  border-bottom:1px solid var(--line)
}

.hero-links a:hover {
  border-color:var(--green)
}

.portrait {
  margin-top:7px
}

.portrait img {
  width:232px;
  aspect-ratio:296/356;
  object-position:center 78%;
  object-fit:cover;
  border-radius:3px
}

.portrait figcaption {
  font-size:11px;
  letter-spacing:.4px;
  color:var(--muted);
  margin-top:12px
}

.credentials {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:18px 0;
  display:flex;
  gap:14px 28px;
  justify-content:space-between;
  flex-wrap:wrap;
  font-size:12px;
  color:var(--muted)
}

.credentials a {
  text-decoration:none
}

.credentials a:hover {
  text-decoration:underline
}

.credentials span {
  color:var(--ink);
  font-weight:500
}

.section {
  padding:72px 0;
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  gap:56px
}

.section-label {
  font-size:12px;
  letter-spacing:.7px;
  font-weight:500
}

.section-label .number {
  color:#818b83;
  margin-right:12px;
  font-variant-numeric:tabular-nums
}

.section-body {
  min-width:0
}

.section-body h2 {
  font-family:var(--serif);
  font-size:36px;
  line-height:1.2;
  letter-spacing:-1px;
  font-weight:400
}

.section-lead {
  font-size:16px;
  color:var(--muted);
  margin-top:18px
}

.project-heading {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:18px;
  margin-bottom:20px
}

.project-heading h2 {
  font-size:42px
}

.status {
  font-size:11px;
  letter-spacing:.8px;
  color:var(--green);
  text-transform:uppercase
}

.status::before {
  content:'';
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--green);
  margin-right:8px;
  vertical-align:middle
}

.statement {
  font-family:var(--serif);
  font-size:28px;
  line-height:1.45;
  letter-spacing:-.35px;
  max-width:710px;
  margin-bottom:22px
}

.work-copy {
  color:var(--muted)
}

.principles {
  margin:28px 0 26px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:25px
}

.principle {
  border-top:1px solid var(--line);
  padding-top:16px
}

.principle h3 {
  font-size:13px;
  font-weight:600;
  margin-bottom:7px
}

.principle p {
  font-size:13px;
  line-height:1.75;
  color:var(--muted)
}

.work-footnote {
  font-size:12px;
  color:var(--muted)
}

.text-link {
  display:inline-block;
  font-size:13px;
  margin-top:22px
}

.thesis {
  margin-top:32px;
  border-left:2px solid var(--green);
  padding-left:22px
}

.thesis p {
  font-family:var(--serif);
  font-size:23px;
  line-height:1.45
}

.thesis .eyebrow {
  font-family:var(--sans);
  font-size:10px;
  margin-bottom:9px
}

.research-intro {
  color:var(--muted);
  margin-bottom:12px
}

.paper {
  padding:25px 0;
  border-bottom:1px solid var(--line)
}

.paper:last-of-type {
  border-bottom:0
}

.paper-meta {
  display:flex;
  gap:10px 18px;
  align-items:center;
  flex-wrap:wrap;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--green);
  margin-bottom:7px
}

.paper h3 {
  font-family:var(--serif);
  font-size:23px;
  font-weight:400;
  line-height:1.38;
  letter-spacing:-.3px
}

.paper h3 a {
  text-decoration:none
}

.paper h3 a:hover {
  text-decoration:underline
}

.paper-authors {
  font-size:12px;
  color:var(--muted);
  margin-top:8px;
  line-height:1.8
}

.paper-note {
  font-size:13px;
  color:var(--muted);
  margin-top:8px
}

.paper-links {
  display:flex;
  gap:20px;
  margin-top:10px;
  font-size:12px
}

.award {
  color:var(--ink);
  text-transform:none;
  letter-spacing:0
}

.more-research {
  margin-top:17px
}

.more-research summary {
  cursor:pointer;
  font-size:13px;
  color:var(--green);
  padding:12px 0;
  min-height:44px
}

.more-research ul {
  padding-left:20px;
  margin:8px 0;
  font-size:14px;
  color:var(--muted)
}

.more-research li {
  margin:12px 0
}

.all-papers {
  margin-top:20px
}

.timeline {
  margin-top:25px
}

.timeline-item {
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  gap:22px;
  padding:21px 0;
  border-bottom:1px solid var(--line)
}

.timeline-item:last-child {
  border-bottom:0;
  padding-bottom:0
}

.timeline-date {
  font-size:12px;
  color:var(--muted);
  padding-top:3px
}

.timeline-item h3 {
  font-size:15px;
  font-weight:600;
  line-height:1.6
}

.timeline-item p {
  font-size:13px;
  color:var(--muted);
  margin-top:3px
}

.education {
  margin-top:38px;
  padding-top:25px;
  border-top:1px solid var(--line)
}

.education h3 {
  font-size:12px;
  font-weight:500;
  letter-spacing:.6px;
  margin-bottom:18px
}

.education-list {
  display:grid;
  gap:17px
}

.education-row {
  display:grid;
  grid-template-columns:1fr auto;
  gap:16px;
  font-size:13px
}

.education-row span {
  color:var(--muted)
}

.education-row p {
  font-size:12px;
  color:var(--muted);
  margin-top:2px
}

.recognition-list {
  margin:0;
  padding:0;
  list-style:none
}

.recognition-list li {
  display:grid;
  grid-template-columns:55px minmax(0,1fr);
  gap:17px;
  padding:15px 0;
  border-bottom:1px solid var(--line)
}

.recognition-list li:first-child {
  padding-top:0
}

.recognition-list li:last-child {
  border-bottom:0
}

.recognition-list time {
  font-size:12px;
  color:var(--muted);
  padding-top:2px
}

.recognition-list h3 {
  font-size:15px;
  font-weight:500
}

.recognition-list p {
  font-size:12px;
  color:var(--muted);
  margin-top:3px
}

.previous-work {
  margin-top:44px;
  padding-top:28px;
  border-top:1px solid var(--line)
}

.previous-intro {
  margin-top:12px;
  font-size:14px;
  color:var(--muted)
}

.previous-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:28px;
  margin-top:24px
}

.product-category {
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--green)
}

.previous-product h4 {
  margin:5px 0 10px;
  font-family:var(--serif);
  font-size:25px;
  font-weight:400;
  line-height:1.4
}

.previous-product h4 span {
  display:block;
  font-family:var(--sans);
  font-size:11px;
  color:var(--muted);
  margin-top:3px
}

.previous-product > p:not(.product-category) {
  font-size:13px;
  color:var(--muted)
}

.previous-product .text-link {
  font-size:12px;
  margin-top:14px
}

.coverage-list {
  margin-top:28px
}

.coverage-item {
  padding:22px 0;
  border-top:1px solid var(--line)
}

.coverage-meta {
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:6px 18px;
  color:var(--green);
  font-size:11px;
  letter-spacing:.6px
}

.coverage-meta time {
  color:var(--muted);
  letter-spacing:0
}

.coverage-item h3 {
  font-family:var(--serif);
  font-size:23px;
  font-weight:400;
  line-height:1.4;
  margin-top:7px
}

.coverage-item h3 a {
  text-decoration:none
}

.coverage-item h3 a:hover {
  text-decoration:underline
}

.coverage-item p {
  margin-top:9px;
  font-size:14px;
  color:var(--muted)
}

.coverage-footnote {
  margin-top:16px;
  color:var(--muted);
  font-size:12px
}

.contact {
  padding:75px 0 66px;
  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  gap:56px
}

.contact h2 {
  font-family:var(--serif);
  font-size:36px;
  line-height:1.25;
  font-weight:400;
  letter-spacing:-.7px
}

.contact p {
  color:var(--muted);
  margin-top:15px;
  max-width:640px
}

.email-link {
  display:inline-block;
  margin-top:25px;
  font-size:18px;
  color:var(--green)
}

.footer {
  border-top:1px solid var(--line);
  padding:24px 0 32px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  font-size:11px;
  color:var(--muted)
}

.footer a {
  text-decoration:none
}

.footer a:hover {
  text-decoration:underline
}

.footer-right {
  display:flex;
  gap:22px
}

.archived-cv {
  font-size:12px;
  margin-top:23px;
  color:var(--muted)
}

.visitor-stats {
  border-top:1px solid var(--line);
  padding-block:28px
}

.visitor-map {
  display:block;
  width:min(100%,520px);
  height:auto;
  aspect-ratio:600 / 291;
  object-fit:contain;
  margin-inline:auto
}

@media print {
  .visitor-stats {
    display:none
  }
}

@media(min-width:1450px) {
  .hero {
    padding-top:100px;
    padding-bottom:85px
  }

}

@media(max-width:900px) {
  .wrap {
    width:calc(100% - 56px)
  }

  .hero {
    column-gap:45px;
    grid-template-columns:minmax(0,1fr) 190px
  }

  .portrait img {
    width:190px
  }

  .hero h1 {
    font-size:49px
  }

  .section,.contact {
    grid-template-columns:145px minmax(0,1fr);
    gap:30px
  }

  .principles {
    gap:17px
  }

  .credentials {
    justify-content:flex-start
  }

}

@media(max-width:640px) {
  html {
    scroll-padding-top:24px
  }

  .wrap {
    width:calc(100% - 40px)
  }

  .header-inner {
    min-height:100px;
    align-items:flex-start;
    justify-content:center;
    flex-direction:column;
    gap:4px;
    padding:17px 0 11px
  }

  nav {
    gap:21px
  }

  .wordmark {
    font-size:16px
  }

  .hero {
    padding:42px 0 36px;
    grid-template-columns:minmax(0,1fr) 88px;
    gap:20px
  }

  .hero .eyebrow {
    font-size:9px;
    letter-spacing:1.2px
  }

  .hero h1 {
    font-size:39px;
    letter-spacing:-1.7px;
    margin-top:14px
  }

  .chinese-name {
    font-size:15px;
    letter-spacing:4px
  }

  .hero-title {
    font-size:17px;
    margin-top:20px
  }

  .hero-intro {
    font-size:15px;
    line-height:1.8
  }

  .portrait {
    margin-top:7px
  }

  .portrait img {
    width:88px
  }

  .portrait figcaption {
    display:none
  }

  .hero-title,.hero-intro,.hero-links {
    grid-column:1 / -1
  }

  .hero-text {
    display:contents
  }

  .hero-identity {
    grid-column:1
  }

  .hero-links {
    margin-top:1px;
    font-size:12px;
    gap:12px 20px
  }

  .hero-title {
    margin-top:0
  }

  .hero-intro {
    margin-top:0
  }

  .credentials {
    padding:16px 0;
    gap:7px 20px;
    font-size:11px
  }

  .section,.contact {
    grid-template-columns:1fr;
    gap:24px;
    padding-block:43px
  }

  .section-label {
    font-size:11px
  }

  .section-body h2 {
    font-size:31px
  }

  .project-heading {
    margin-bottom:16px
  }

  .project-heading h2 {
    font-size:37px
  }

  .status {
    font-size:9px
  }

  .statement {
    font-size:25px
  }

  .work-copy,.research-intro {
    font-size:14px
  }

  .principles {
    grid-template-columns:1fr;
    gap:17px;
    margin-block:24px
  }

  .principle {
    display:grid;
    grid-template-columns:106px 1fr;
    gap:15px;
    padding-top:14px
  }

  .principle h3 {
    margin:0;
    font-size:12px
  }

  .principle p {
    font-size:12px
  }

  .thesis p {
    font-size:21px
  }

  .paper {
    padding-block:22px
  }

  .paper h3 {
    font-size:21px
  }

  .paper-meta {
    font-size:10px;
    letter-spacing:.7px
  }

  .paper-authors {
    font-size:11px
  }

  .timeline-item {
    grid-template-columns:80px minmax(0,1fr);
    gap:16px
  }

  .timeline-date {
    font-size:11px
  }

  .timeline-item h3 {
    font-size:14px
  }

  .timeline-item p {
    font-size:12px
  }

  .contact h2 {
    font-size:31px
  }

  .contact p {
    font-size:14px
  }

  .email-link {
    font-size:16px
  }

  .footer {
    align-items:flex-start;
    flex-direction:column;
    gap:9px
  }

  .education-row {
    font-size:12px
  }

  .education-row p {
    font-size:11px
  }

}

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

}

@media print {
  body {
    background:white;
    color:black;
    font-size:11pt
  }

  .wrap {
    width:100%
  }

  .site-header,.hero-links,.footer,.contact,.skip-link {
    display:none
  }

  .hero {
    padding:0 0 24px;
    grid-template-columns:1fr 120px
  }

  .portrait img {
    width:120px
  }

  .hero h1 {
    font-size:32pt
  }

  .section {
    padding:24px 0;
    break-inside:avoid
  }

  .section-body h2 {
    font-size:22pt
  }

  .paper h3 {
    font-size:15pt
  }

  a {
    text-decoration:none
  }

  .more-research {
    display:none
  }

}

/* 保持正确标题层级，同时避免重复展示与栏目标签相同的标题。 */
.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
}

@media(max-width:640px) {
  .portrait {
    grid-column:2;
    grid-row:1
  }

}