:root { --ink:#17212b; --muted:#5f6b76; --navy:#18354a; --accent:#aa7c42; --cream:#f7f5f0; --line:#dedbd3; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
html,body { width:100%; height:100%; }
body { margin:0; overflow:hidden; color:var(--ink); background:var(--white); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.72; }
.lang-zh,body[data-lang="zh"] .lang-en { display:none; }
body[data-lang="zh"] .lang-zh { display:revert; }
a { color:inherit; text-underline-offset:.2em; }
.water-stage { position:fixed; inset:0 0 auto; z-index:-1; height:280px; background:linear-gradient(rgba(13,38,52,.28),rgba(13,38,52,.52)),url("materials/water.jpg") center 46%/cover no-repeat; }
.site-header { position:fixed; inset:0 0 auto; z-index:20; display:flex; min-height:66px; align-items:center; gap:24px; padding:10px clamp(20px,5vw,68px); color:var(--white); background:rgba(16,39,53,.76); backdrop-filter:blur(12px); box-shadow:0 1px 0 rgba(255,255,255,.12); }
.brand { display:inline-flex; align-items:center; gap:10px; font-weight:750; letter-spacing:.025em; text-decoration:none; white-space:nowrap; }
.brand img { width:34px; height:34px; object-fit:contain; }
.site-nav { display:flex; align-items:center; gap:clamp(16px,2.5vw,34px); margin-left:auto; }
.site-nav a { position:relative; color:rgba(255,255,255,.82); font-size:.92rem; font-weight:600; text-decoration:none; }
.site-nav a::after { position:absolute; right:0; bottom:-8px; left:0; height:2px; background:#e2c38c; content:""; transform:scaleX(0); transition:transform .2s ease; }
.site-nav a:hover,.site-nav a.is-active { color:#fff; }
.site-nav a.is-active::after { transform:scaleX(1); }
.language-toggle { display:inline-flex; align-items:center; gap:2px; padding:3px; border:1px solid rgba(255,255,255,.3); border-radius:999px; color:#fff; background:rgba(255,255,255,.08); font:inherit; font-size:.76rem; font-weight:700; cursor:pointer; }
.language-icon { width:17px; height:17px; margin:0 4px 0 5px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.language-option { padding:3px 8px; border-radius:999px; line-height:1.2; }
body[data-lang="en"] .language-option-en,body[data-lang="zh"] .language-option-zh { color:#fff; background:var(--navy); }
.nav-toggle { display:none; border:0; background:transparent; }
.nav-toggle span { display:block; width:22px; height:2px; margin:5px; background:#fff; }
main { height:100%; }
.page-section { position:fixed; inset:0; overflow:auto; padding-top:66px; background:var(--white); opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .22s ease,transform .22s ease,visibility .22s; }
body[data-section="home"] #home,body[data-section="publications"] #publications,body[data-section="teaching"] #teaching,body[data-section="cv"] #cv,body[data-section="contact"] #contact { opacity:1; visibility:visible; transform:none; }
.page-banner { height:214px; display:grid; place-items:center; color:#fff; background:linear-gradient(rgba(17,46,63,.3),rgba(17,46,63,.56)),url("materials/water.jpg") center 46%/cover no-repeat; }
.home-banner { height:auto; min-height:0; padding:82px 20px 48px; align-items:start; color:var(--ink); background:linear-gradient(rgba(17,46,63,.22),rgba(17,46,63,.48)),url("materials/water.jpg") center top/100% 230px no-repeat,#fff; }
.inner-banner { height:228px; }
.banner-title { text-align:center; }
.banner-title h1 { margin:0; font-family:Georgia,"Times New Roman",serif; font-size:clamp(2.3rem,6vw,4.4rem); font-weight:500; letter-spacing:-.025em; }
.gold-rule { width:56px; height:2px; margin:18px auto 0; background:#e5c895; }
.home-hero { width:min(920px,100%); text-align:center; }
.profile-photo { display:block; width:190px; height:190px; margin:0 auto 20px; border:7px solid rgba(255,255,255,.92); border-radius:50%; object-fit:cover; object-position:center; box-shadow:0 14px 38px rgba(7,27,39,.35); }
.home-hero h1 { margin:0; font-family:Georgia,"Times New Roman",serif; font-size:clamp(2.5rem,6vw,4.7rem); font-weight:500; letter-spacing:-.035em; line-height:1.05; }
.tagline { margin:16px 0 22px; font-size:clamp(1rem,2vw,1.24rem); font-weight:550; }
.social-links { display:flex; flex-wrap:wrap; justify-content:center; gap:9px 18px; }
.social-links a { display:inline-flex; align-items:center; gap:7px; color:var(--navy); font-size:.82rem; font-weight:650; text-decoration:none; }
.social-links a:hover { text-decoration:underline; }
.social-links img { width:23px; height:23px; border-radius:5px; object-fit:contain; background:rgba(255,255,255,.94); }
.content-section { width:min(980px,calc(100% - 40px)); margin:0 auto; padding:72px 0 86px; }
.content-section h2 { margin:0 0 25px; font-family:Georgia,"Times New Roman",serif; font-size:clamp(2rem,4vw,3rem); font-weight:500; letter-spacing:-.025em; }
.content-section h3 { margin-top:42px; color:var(--navy); font-size:1.2rem; }
.text-block { max-width:810px; margin:auto; }
.text-block p { margin:0 0 20px; font-size:1.02rem; }
.about-content { display:block; }
.focus-diagram,.research-content,.contact-content { display:none; }
.appointments-heading,.education-heading { padding-top:34px; border-top:1px solid var(--line); }
.appointment-list,.education-list { display:grid; border-top:1px solid var(--line); }
.appointment-list div,.education-list div { display:grid; grid-template-columns:minmax(260px,.9fr) 1.1fr; align-items:center; gap:36px; padding:20px 0; border-bottom:1px solid var(--line); }
.appointment-list div>span,.education-list div>span { display:flex; align-items:center; gap:14px; color:var(--muted); }
.appointment-list img,.education-list img { flex:0 0 auto; width:52px; height:52px; object-fit:contain; }
.publications-content article { padding-bottom:20px; border-bottom:1px solid var(--line); }
.publications-content ol { padding-left:1.45rem; }
.publications-content li { margin:0 0 18px; padding-left:8px; }
.publications-content a { color:#215f83; }
.teaching-content { display:grid; grid-template-columns:minmax(260px,42%) 1fr; gap:48px; align-items:center; }
.teaching-content>img { width:100%; border-radius:4px; box-shadow:0 18px 50px rgba(21,35,44,.14); }
.teaching-content>div { align-self:stretch; display:flex; flex-direction:column; justify-content:space-between; }
.teaching-content>div h2 { margin-bottom:0; font-size:clamp(1.45rem,2.4vw,2rem); line-height:1.25; }
.teaching-content>div p { margin:0; }
.teaching-content>div .button { align-self:flex-start; }
.teaching-quote { grid-column:1/-1; margin:20px 0 0; padding:34px 44px; border:0; border-left:3px solid var(--accent); background:var(--cream); }
.quote-mark { display:none; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:9px 20px; border:1px solid var(--navy); border-radius:2px; color:#fff; background:var(--navy); font-weight:700; text-decoration:none; }
.button:hover { background:#274f68; }
.section-intro { max-width:670px; margin:0 auto 25px; color:var(--muted); font-size:1.08rem; text-align:center; }
.cv-content { text-align:center; }
.cv-frame { display:block; width:100%; height:70vh; min-height:600px; margin:32px auto 0; border:1px solid var(--line); }
.contact-page-content { max-width:760px; }
.contact-page-content>h2 { text-align:center; }
.contact-card { margin-top:42px; border-top:1px solid var(--line); }
.contact-card p { display:grid; grid-template-columns:150px 1fr; gap:24px; margin:0; padding:19px 0; border-bottom:1px solid var(--line); }
.contact-card p>span { color:var(--muted); font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.contact-card strong { font-weight:600; }
.site-footer { padding:26px 20px; color:#d9e1e5; background:var(--navy); font-size:.8rem; text-align:center; }
.site-footer p { margin:2px; }
.back-to-top,.page-scrollbar { display:none; }
@media (max-width:820px) {
  .site-header { padding-inline:18px; }
  .brand span { display:none; }
  .nav-toggle { display:block; order:3; cursor:pointer; }
  .language-toggle { margin-left:auto; }
  .site-nav { position:absolute; top:66px; right:0; left:0; display:none; flex-direction:column; align-items:stretch; gap:0; padding:12px 22px 18px; background:rgba(17,46,63,.98); }
  body.is-nav-open .site-nav { display:flex; }
  .site-nav a { padding:10px 0; text-align:center; }
  .site-nav a::after { display:none; }
  .home-banner { min-height:0; padding-top:68px; background-size:100% 205px; }
  .profile-photo { width:165px; height:165px; }
  .social-links { max-width:500px; margin:auto; }
  .appointment-list div,.education-list div { grid-template-columns:1fr; gap:10px; }
  .appointment-list img,.education-list img { width:44px; height:44px; }
  .contact-card p { grid-template-columns:1fr; gap:4px; }
  .teaching-content { grid-template-columns:1fr; gap:30px; }
  .teaching-content>div { align-self:auto; }
  .teaching-quote { grid-column:auto; padding:28px; }
  .cv-frame { min-height:500px; }
}
@media (max-width:520px) {
  .content-section { width:min(100% - 28px,980px); padding-block:48px 64px; }
  .home-banner { min-height:0; }
  .social-links { flex-direction:column; align-items:center; }
  .page-banner { height:180px; }
  .home-banner { height:auto; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }

/* Persistent profile rail: only the right-hand page changes. */
.water-stage,.home-banner,.page-section>.page-banner { display:none; }
.profile-panel { position:fixed; inset:0 auto 0 0; z-index:30; width:360px; overflow:auto; color:#fff; background:#02070b url("materials/water.jpg") center/cover no-repeat; box-shadow:10px 0 34px rgba(16,35,48,.13); }
.profile-panel-inner { display:flex; min-height:100%; flex-direction:column; align-items:center; padding:70px 40px 38px; text-align:center; }
.profile-panel .profile-photo { width:172px; height:172px; margin:0 auto 22px; border:0; box-shadow:none; }
.profile-panel h1 { margin:0; font-family:Georgia,"Times New Roman",serif; font-size:3.35rem; font-weight:500; line-height:1; }
.profile-panel .tagline { max-width:270px; margin:18px auto 28px; font-size:.98rem; line-height:1.55; }
.profile-links { display:flex; width:100%; flex-direction:column; gap:7px; margin-top:4px; padding-top:22px; border-top:1px solid rgba(255,255,255,.24); text-align:left; }
.profile-links a { display:grid; grid-template-columns:30px 1fr; grid-template-rows:auto auto; align-items:center; gap:0 11px; padding:8px 10px; border-radius:5px; color:rgba(255,255,255,.92); font-size:.88rem; font-weight:650; text-decoration:none; transition:background-color .18s ease,transform .18s ease; }
.profile-links a:hover { background:rgba(255,255,255,.12); transform:translateX(3px); }
.profile-links img { grid-row:1/3; width:28px; height:28px; border-radius:5px; object-fit:contain; background:#fff; }
.profile-links small { color:rgba(255,255,255,.68); font-size:.69rem; font-weight:500; }
.site-header { left:360px; justify-content:center; color:var(--ink); background:rgba(255,255,255,.94); box-shadow:0 1px 0 var(--line); }
.site-header .brand { display:none; }
.site-nav { margin-left:0; }
.site-nav a { color:var(--muted); }
.site-nav a:hover,.site-nav a.is-active { color:var(--navy); }
.site-nav a::after { background:var(--accent); }
.language-toggle { margin-left:auto; border-color:var(--line); color:var(--navy); background:var(--cream); }
@media (min-width:1051px) {
  .site-header { display:grid; grid-template-columns:1fr auto 1fr; }
  .site-nav { grid-row:1; grid-column:2; display:grid; grid-template-columns:76px 108px 60px 36px 72px; gap:clamp(12px,1.6vw,24px); margin:0; text-align:center; }
  .language-toggle { grid-row:1; grid-column:3; justify-self:end; width:146px; margin:0; justify-content:center; }
}
main { margin-left:360px; }
.page-section { top:66px; right:0; bottom:0; left:360px; padding-top:0; }
.content-section { width:min(920px,calc(100% - 72px)); padding:72px 0 86px; }
.content-section>h2:first-child,.teaching-content h2 { margin-top:0; }

@media (max-width:1050px) {
  .profile-panel { width:290px; }
  .profile-panel-inner { padding-inline:28px; }
  .profile-panel .profile-photo { width:150px; height:150px; }
  .profile-panel h1 { font-size:2.8rem; }
  .site-header { left:290px; }
  main { margin-left:290px; }
  .page-section { left:290px; }
  .site-nav { gap:16px; }
}

@media (max-width:760px) {
  body { overflow:hidden; }
  .profile-panel { inset:0 0 auto; width:auto; height:226px; overflow:hidden; background-position:center 42%; }
  .profile-panel-inner { display:grid; min-height:0; height:100%; grid-template-columns:112px 1fr; grid-template-rows:auto auto auto; align-content:center; gap:5px 18px; padding:22px 22px 18px; text-align:left; }
  .profile-panel .profile-photo { grid-row:1/4; width:108px; height:108px; margin:0; border-width:5px; }
  .profile-panel h1 { font-size:2.25rem; }
  .profile-panel .gold-rule { display:none; }
  .profile-panel .tagline { max-width:none; margin:0; font-size:.82rem; }
  .profile-links { flex-flow:row wrap; gap:4px 9px; margin:5px 0 0; padding:8px 0 0; }
  .profile-links a { display:inline-flex; gap:5px; padding:2px; font-size:.68rem; }
  .profile-links a:hover { transform:none; }
  .profile-links img { width:19px; height:19px; }
  .profile-links small { display:none; }
  .site-header { top:226px; left:0; min-height:58px; padding:8px 15px; }
  .site-nav { top:58px; }
  main { margin-left:0; }
  .page-section { top:284px; left:0; }
  .content-section { width:min(100% - 32px,920px); padding:42px 0 64px; }
  .nav-toggle { display:block; order:3; }
  .language-toggle { margin-left:auto; }
}

@media (max-width:480px) {
  .profile-panel-inner { grid-template-columns:90px 1fr; gap-x:13px; padding-inline:15px; }
  .profile-panel .profile-photo { width:88px; height:88px; }
  .profile-panel h1 { font-size:1.9rem; }
  .profile-links a span { display:none; }
}