:root { --ink:#17324d; --muted:#607080; --paper:#f7f4ed; --white:#fff; --line:#d9d6ce; --accent:#bf5b3f; --soft:#e9eff2; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans",sans-serif; line-height:1.6; }
a { color:inherit; }
.skip-link { position:fixed; left:1rem; top:-4rem; z-index:20; background:var(--ink); color:white; padding:.6rem 1rem; }
.skip-link:focus { top:1rem; }
.site-header { height:84px; max-width:1240px; margin:auto; padding:0 4vw; display:flex; align-items:center; justify-content:flex-start; border-bottom:1px solid var(--line); }
.wordmark { text-decoration:none; font-family:"Newsreader",serif; font-size:1.45rem; font-weight:500; letter-spacing:-.05em; }
nav { display:flex; align-items:center; gap:2rem; font-size:.84rem; }
nav a { text-decoration:none; }
nav a:hover, nav a:focus-visible { color:var(--accent); }
.nav-cv { border:1px solid var(--ink); border-radius:100px; padding:.4rem .85rem; }
main, footer { max-width:1240px; margin:auto; padding-left:4vw; padding-right:4vw; }
.hero { display:grid; grid-template-columns:.58fr 1.42fr; align-items:start; gap:6vw; padding-top:4rem; padding-bottom:5rem; }
.eyebrow,.card-label { font-size:.7rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--accent); }
h1,h2 { font-family:"Newsreader",serif; font-weight:400; letter-spacing:-.04em; line-height:.95; margin:0; }
h1 { font-size:clamp(2.8rem,5vw,4.3rem); }
h2 { font-size:clamp(2rem,3.2vw,3rem); }
.profile { align-self:start; width:100%; max-width:270px; padding-top:1rem; display:flex; flex-direction:column; align-items:center; text-align:center; }
.portrait { width:100%; max-width:270px; aspect-ratio:2/3; overflow:hidden; background:#dce5e9; }
.portrait img { width:100%; height:100%; display:block; object-fit:contain; object-position:center; }
.chinese-name { width:100%; margin:1.15rem 0 .15rem; font-family:"FangSong","STFangsong","FangSong_GB2312",serif; font-size:1.4rem; color:var(--accent); text-align:center; }
.profile h1 { margin:0; font-size:2.25rem; line-height:1.05; letter-spacing:-.025em; }
.role { margin:.7rem 0 0; font-size:.92rem; line-height:1.45; }
.institution { display:inline-block; margin-top:.8rem; font-weight:600; text-decoration:none; }
.location { margin:.15rem 0 1rem; color:var(--muted); font-size:.86rem; }
.profile-links { display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem 1rem; font-size:.78rem; font-weight:600; }
.profile-links a,.text-link { text-decoration:none; border-bottom:1px solid var(--ink); }
.hero-copy { padding-top:1rem; }
.hero-copy .eyebrow { margin:0 0 2.1rem; }
.hero-copy h2 { max-width:780px; }
.intro { max-width:660px; margin:2rem 0; font-family:"Newsreader",serif; font-size:clamp(1.4rem,2.3vw,2rem); line-height:1.35; color:#334b60; }
.hero-detail { max-width:690px; color:var(--muted); font-size:1rem; }
.academic-roles { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:2rem; border:1px solid var(--line); background:var(--line); }
.academic-role { min-width:0; padding:1rem; background:var(--paper); color:var(--ink); display:flex; flex-direction:column; }
.academic-role>span { margin-bottom:1.3rem; color:var(--accent); font-size:.58rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.academic-role>a { color:var(--ink); text-decoration:none; display:flex; flex-direction:column; }
.academic-role>a:hover strong,.academic-role>a:focus-visible strong { color:var(--accent); }
.academic-role strong { font:500 1.02rem/1.2 "Newsreader",serif; }
.academic-role small { margin-top:.3rem; color:var(--muted); font-size:.65rem; line-height:1.35; }
.academic-role .secondary-role { margin-top:.8rem; padding-top:.8rem; border-top:1px solid var(--line); }
.actions { display:flex; flex-wrap:wrap; gap:.75rem; }
.hero-copy .actions { align-items:center; gap:1.5rem; margin-top:2rem; padding-top:0; }
.hero-experience { margin-top:2.2rem; padding-top:1.3rem; border-top:1px solid var(--line); }
.hero-experience-label { margin:0 0 .65rem; color:var(--ink); font-size:.65rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
.hero-experience-row { display:grid; grid-template-columns:80px minmax(240px,1fr) 1fr; gap:1rem; align-items:baseline; padding:.45rem 0; }
.hero-experience-row>span,.hero-education-grid span { color:var(--accent); font-size:.7rem; }
.hero-experience-row strong { font-size:.78rem; }
.hero-experience-row small { color:var(--muted); font-size:.72rem; }
.education-label-inline { margin-top:1rem; padding-top:.9rem; border-top:1px solid rgba(217,214,206,.7); }
.hero-education-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.hero-education-grid p { margin:0; display:grid; gap:.12rem; }
.hero-education-grid strong { font-size:.75rem; }
.hero-education-grid small { color:var(--muted); font-size:.68rem; line-height:1.35; }
.experience-compact { padding-top:3.75rem; padding-bottom:3.75rem; }
.experience-compact h2 { font-size:clamp(1.9rem,2.8vw,2.6rem); }
.appointment-list p { margin:0; padding:0 0 1.2rem; display:grid; grid-template-columns:80px minmax(330px,1.25fr) 1fr; gap:1rem; align-items:baseline; }
.appointment-list span,.education-list span { color:var(--accent); font-size:.78rem; }
.appointment-list strong { font-size:.94rem; white-space:nowrap; }
.appointment-list small,.education-list small { color:var(--muted); font-size:.82rem; }
.compact-label { margin:.25rem 0 .8rem; padding-top:1.1rem; border-top:1px solid var(--line); font-size:.65rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
.education-list { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.education-list p { margin:0; display:grid; gap:.12rem; }
.education-list strong { font-size:.88rem; }
.button { text-decoration:none; display:inline-flex; padding:.75rem 1.15rem; border-radius:3px; font-size:.88rem; font-weight:600; }
.button.primary { background:var(--ink); color:white; }
.button.secondary { border:1px solid var(--ink); }
.button:hover { transform:translateY(-2px); }
.section { padding:6rem 0; border-top:1px solid var(--line); }
.section h2 { font-size:2.2rem; }
.research-strip,.split { display:grid; grid-template-columns:1fr 2fr; gap:7vw; }
.section-lead { margin:0; max-width:750px; font-family:"Newsreader",serif; font-size:clamp(1.8rem,3.5vw,3rem); line-height:1.25; }
.research-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-top:3.5rem; background:var(--line); border:1px solid var(--line); }
.research-grid article { background:var(--paper); padding:2rem; min-height:210px; }
.research-grid h3 { font:500 1.5rem "Newsreader",serif; margin:0 0 .5rem; }
.research-grid p { color:var(--muted); font-size:.86rem; margin:0; }
.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:3rem; }
.filter-toggle { border:0; border-bottom:1px solid var(--ink); background:transparent; padding:.4rem 0; color:var(--ink); font:600 .8rem "DM Sans",sans-serif; cursor:pointer; }
.papers { list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.papers li { display:grid; grid-template-columns:72px 1fr; gap:1.2rem; padding:1rem 0; border-bottom:1px solid var(--line); align-items:baseline; }
.papers li>div:last-child { display:grid; grid-template-columns:minmax(260px,2fr) minmax(180px,1.2fr) minmax(250px,1.5fr); column-gap:1.25rem; row-gap:.15rem; align-items:baseline; }
.paper-year { font-size:.74rem; color:var(--accent); padding-top:.25rem; }
.papers h3 { font-family:"DM Sans",sans-serif; font-size:.92rem; font-weight:600; line-height:1.35; margin:0; }
.papers h3 a { color:inherit; text-decoration:none; }
.timeline h3 { font-family:"Newsreader",serif; font-size:1.2rem; font-weight:500; line-height:1.25; margin:0; }
.papers p { margin:0; color:var(--muted); font-size:.82rem; }
.journal { font-size:.78rem; font-weight:600; }
.pdf-pending { display:inline-block; margin-left:.45rem; color:var(--muted); font-size:.62rem; font-weight:500; white-space:nowrap; }
.paper-links { grid-column:3; display:inline-flex; align-items:center; justify-self:start; gap:.35rem; margin:.38rem 0 0; }
.paper-links a,.paper-links > span { color:var(--accent); font-size:.66rem; font-weight:600; line-height:1.25; letter-spacing:.02em; text-decoration:none; white-space:nowrap; }
.paper-links a { padding:.18rem .42rem; border:1px solid var(--ink); border-radius:2px; color:var(--ink); font-size:.6rem; line-height:1.2; transition:background-color .2s ease,color .2s ease; }
.paper-links a:hover,.paper-links a:focus-visible { background:var(--ink); color:white; }
.paper-links > span { color:var(--muted); font-weight:400; }
.paper-actions { display:inline-flex; gap:.3rem; margin-left:.6rem; vertical-align:middle; }
.paper-actions a,.paper-actions .pdf-disabled { padding:.18rem .42rem; border:1px solid var(--ink); border-radius:2px; font-size:.6rem; font-weight:600; line-height:1.2; text-decoration:none; }
.paper-actions a { color:var(--ink); }
.paper-actions a:hover,.paper-actions a:focus-visible { background:var(--ink); color:white; }
.paper-actions .pdf-disabled { border-color:var(--line); color:var(--muted); cursor:not-allowed; opacity:.7; }
.work-link { display:inline-block; margin-left:.45rem; color:var(--accent); font-size:.68rem; font-weight:600; text-decoration:none; }
.work-pdf { display:inline-block; margin-left:.45rem; padding:.18rem .42rem; border:1px solid var(--ink); border-radius:2px; color:var(--ink); font-size:.6rem; font-weight:600; line-height:1.2; text-decoration:none; vertical-align:middle; }
.work-pdf:hover,.work-pdf:focus-visible { background:var(--ink); color:white; }
.work-pdf.pdf-disabled { border-color:var(--line); color:var(--muted); opacity:.7; cursor:not-allowed; }
.award { display:table; margin-top:.35rem; padding:.18rem .45rem; border-radius:2px; background:#f1ddd5; color:#8f3f2c; font-size:.68rem; font-weight:600; line-height:1.35; }
.working-papers { margin-top:5rem; margin-left:0; }
.working-papers h3 { font:400 2.2rem "Newsreader",serif; }
.working-papers ul { list-style:none; padding:0; }
.working-papers li { padding:1rem 0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:2rem; }
.working-papers small { color:var(--muted); max-width:42%; text-align:right; }
.revision-status { display:inline-block; margin-top:.25rem; color:inherit; font-weight:400; }
.timeline article { display:grid; grid-template-columns:120px 1fr; padding:0 0 2rem; }
.timeline article>span { color:var(--accent); font-size:.78rem; }
.timeline p { color:var(--muted); margin:.35rem 0; }
.timeline-divider { margin:.25rem 0 1.5rem !important; padding-top:1.5rem; border-top:1px solid var(--line); color:var(--ink) !important; font-size:.7rem !important; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
.timeline .education-entry { padding-bottom:1.25rem; }
.degrees p { display:flex; justify-content:space-between; gap:2rem; border-bottom:1px solid var(--line); padding:0 0 1rem; margin:0 0 1.2rem; }
.degrees span { color:var(--muted); text-align:right; }
.editorial-copy { max-width:720px; font:400 1.55rem/1.45 "Newsreader",serif; }
.editorial-copy p { margin-top:0; }
.editorial-copy .muted-note { color:var(--muted); font:400 .82rem/1.6 "DM Sans",sans-serif; }
.media-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:2rem; }
.media-heading p { margin:.7rem 0 0; color:var(--muted); font-size:.82rem; }
.carousel-controls { display:flex; gap:.5rem; }
.carousel-controls button { width:2.4rem; height:2.4rem; border:1px solid var(--ink); border-radius:50%; background:transparent; color:var(--ink); font-size:1rem; cursor:pointer; }
.carousel-controls button:hover,.carousel-controls button:focus-visible { background:var(--ink); color:white; }
.media-track { display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:.5rem; }
.media-track::-webkit-scrollbar { display:none; }
.media-card { flex:0 0 min(330px,82vw); min-height:365px; border:1px solid var(--line); background:var(--white); color:var(--ink); text-decoration:none; display:flex; flex-direction:column; overflow:hidden; scroll-snap-align:start; transition:transform .18s ease,border-color .18s ease; }
.media-card:hover,.media-card:focus-visible { transform:translateY(-3px); border-color:var(--ink); }
.media-card>img { width:100%; height:155px; display:block; object-fit:cover; }
.media-card-copy { flex:1; padding:1.2rem 1.3rem; display:flex; flex-direction:column; }
.media-card-copy>span { color:var(--accent); font-size:.66rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.media-card h3 { margin:auto 0 1rem; font:500 1.35rem/1.22 "Newsreader",serif; }
.media-card small { color:var(--muted); font-size:.8rem; }
.media-all { display:inline-block; margin-top:1.5rem; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--ink); font-size:.75rem; font-weight:600; }
.teaching-intro { margin:0 0 1rem; color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; }
.course-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
.course-grid article { min-height:210px; padding:1.6rem; background:var(--paper); display:flex; flex-direction:column; }
.course-grid article>span { color:var(--accent); font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em; }
.course-grid h3 { margin:auto 0 .65rem; font:500 1.35rem/1.2 "Newsreader",serif; }
.course-grid article:nth-child(2) h3 { padding-top:1rem; }
.course-grid p { margin:0; color:var(--muted); font-size:.78rem; }
.course-link { align-self:flex-start; margin-top:1.2rem; padding:.5rem .8rem; border:1px solid var(--ink); border-radius:2px; color:var(--ink); text-decoration:none; font-size:.72rem; font-weight:600; }
.course-link:hover,.course-link:focus-visible { background:var(--ink); color:white; }
footer { min-height:260px; padding-top:4rem; padding-bottom:2rem; background:var(--ink); color:white; display:grid; grid-template-columns:1fr auto; gap:2rem; position:relative; }
footer::before { content:""; position:absolute; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%); background:var(--ink); z-index:-1; }
.footer-name { font:400 2.5rem "Newsreader",serif; margin:0; }
footer p { color:#bac6cf; }
.footer-links { display:flex; gap:1.5rem; align-items:start; font-size:.85rem; }
.copyright { grid-column:1/-1; align-self:end; margin:0; font-size:.7rem; }
@media (max-width:760px) {
  .site-header { height:auto; padding-top:1.2rem; padding-bottom:1.2rem; }
  nav { gap:.8rem; font-size:.72rem; }
  .hero { grid-template-columns:1fr; padding-top:3rem; }
  .hero-copy { padding-top:0; padding-bottom:0; display:block; }
  .hero-copy .actions { margin-top:2rem; padding-top:0; }
  .hero-experience-row { grid-template-columns:65px 1fr; gap:.25rem .75rem; }
  .hero-experience-row small { grid-column:2; }
  .hero-education-grid { grid-template-columns:1fr; }
  .academic-roles { grid-template-columns:1fr; }
  .academic-role>span { margin-bottom:.45rem; }
  .appointment-list p { grid-template-columns:65px 1fr; gap:.25rem .75rem; }
  .appointment-list strong { white-space:normal; }
  .appointment-list small { grid-column:2; }
  .education-list { grid-template-columns:1fr; }
  .profile { max-width:220px; margin-left:auto; margin-right:auto; }
  .portrait { max-width:220px; }
  .research-grid { grid-template-columns:1fr; }
  .research-strip,.split { grid-template-columns:1fr; gap:2.5rem; }
  .section { padding:4.5rem 0; }
  .papers li { grid-template-columns:58px 1fr; gap:1rem; }
  .papers li>div:last-child { display:block; }
  .papers p { margin:.2rem 0; }
  .paper-links { display:flex; width:max-content; margin-top:.45rem; }
  .working-papers { margin-left:0; }
  .working-papers li,.degrees p { flex-direction:column; gap:.25rem; }
  .working-papers small,.degrees span { max-width:none; text-align:left; }
  .timeline article { grid-template-columns:90px 1fr; }
  .course-grid { grid-template-columns:1fr; }
  footer { grid-template-columns:1fr; }
  .copyright { grid-column:auto; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button:hover { transform:none; } }
.course-page main { max-width:900px; min-height:100vh; padding-top:12vh; }
.course-page h1 { max-width:800px; margin:.8rem 0 2rem; }
.course-page main>p:last-child { max-width:620px; color:var(--muted); font:400 1.3rem/1.5 "Newsreader",serif; }
.back-link { display:inline-block; margin-bottom:5rem; text-decoration:none; border-bottom:1px solid var(--ink); font-size:.78rem; font-weight:600; }
.access-panel { max-width:680px; margin-top:3rem; padding:2rem; border:1px solid var(--line); background:var(--white); }
.access-status { margin:0 0 1.3rem !important; color:var(--accent) !important; font:600 .68rem/1.4 "DM Sans",sans-serif !important; letter-spacing:.1em; text-transform:uppercase; }
.access-panel h2 { margin:0 0 .8rem; font-size:2rem; }
.access-panel>p:not(.access-status):not(.access-note) { color:var(--muted); font-size:.88rem; }
.access-form { margin-top:2rem; }
.access-form label { display:block; margin-bottom:.45rem; font-size:.72rem; font-weight:600; }
.access-form>div { display:flex; gap:.6rem; }
.access-form input { flex:1; min-width:0; padding:.75rem .85rem; border:1px solid var(--line); background:var(--paper); color:var(--ink); font:inherit; }
.access-form button { padding:.75rem 1rem; border:1px solid var(--ink); background:var(--ink); color:white; font:600 .75rem "DM Sans",sans-serif; }
.access-form input:disabled,.access-form button:disabled { cursor:not-allowed; opacity:.55; }
.access-note { margin:1rem 0 0 !important; color:var(--muted) !important; font:400 .7rem/1.5 "DM Sans",sans-serif !important; }
@media (max-width:560px) { .access-form>div { flex-direction:column; } }