/* Final shared visual layer - loaded after page-specific styles. */
:root { --ink:#17243a; --muted:#596779; --soft:#7d8998; --primary:#315f8c; --primary-dark:#173f69; --nav-text:#626262; --nav-active:#111; --nav-soft:#707070; --paper:#e8e2d7; --card:rgba(244,239,229,.90); --border:rgba(34,68,99,.14); --radius-xl:18px; --shadow-md:0 14px 40px rgba(30,53,78,.08); }
html { scroll-behavior:smooth; background-color:#d9e4ec !important; background-image:linear-gradient(135deg,#cbddeb 0%,#eee5d6 49%,#b9cee0 100%) !important; min-height:100%; }
body { color:var(--ink); background-color:#d9e4ec !important; background-image:linear-gradient(135deg,#cbddeb 0%,#eee5d6 49%,#b9cee0 100%) !important; background-attachment:fixed !important; min-height:100vh; font-family:Inter,"Noto Sans SC","PingFang SC",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; opacity:1; transform:none; }
body.page-ready,body.page-leaving { opacity:1; transform:none; }
body::before,body::after,header::before,header::after { display:none !important; content:none !important; animation:none !important; }
.site-nav { position:sticky; top:0; z-index:50; height:68px; background:#f2eee6; border-bottom:1px solid #ddd7ce; backdrop-filter:none; -webkit-backdrop-filter:none; }
.nav-container { max-width:1040px; height:100%; padding:0 24px; flex-direction:row; justify-content:flex-end; }
.nav-actions,.nav-links { display:flex; align-items:center; }
.nav-actions { gap:16px; }
.nav-links { gap:2px; }
.nav-links a { display:flex; align-items:center; justify-content:center; position:relative; padding:8px; border-radius:8px; font-size:0; font-weight:560; white-space:nowrap; color:var(--nav-text); }
.nav-links a::before { content:attr(data-en); font-size:.88rem; line-height:1.4; }
html[lang^="zh"] .nav-links a::before { content:attr(data-zh); }
.nav-links a:nth-child(1),.nav-links a:nth-child(3) { width:62px; }
.nav-links a:nth-child(2) { width:104px; }
.nav-links a.active { color:var(--nav-active); background:transparent; box-shadow:none; }
.nav-links a.active::after { content:""; position:absolute; left:11px; right:11px; bottom:2px; height:1.5px; background:var(--nav-active); }
.nav-links a:hover { color:#111; background:#e7e2da; }
.language-toggle { display:flex; align-items:center; justify-content:center; gap:6px; width:62px; height:29px; padding:5px 8px; border:1px solid rgba(34,68,99,.14); border-radius:999px; background:rgba(255,255,255,.56); color:var(--nav-soft); cursor:pointer; font:inherit; font-size:.72rem; }
.language-toggle i { width:1px; height:11px; background:var(--border); }
.language-toggle span { min-width:13px; text-align:center; color:var(--nav-soft); font-weight:500; transition:none; }
html:not([lang^="zh"]) .language-toggle [data-lang="en"],html[lang^="zh"] .language-toggle [data-lang="zh"] { color:#111; font-weight:800; }
.language-toggle:hover { color:#111; border-color:#aaa39a; }
.container,.page-container { max-width:1040px; }
header,section { border:1px solid rgba(42,63,71,.13); border-radius:var(--radius-xl); box-shadow:0 16px 46px rgba(41,55,60,.075); background-color:rgba(255,255,255,.76); background-image:none; backdrop-filter:blur(18px) saturate(120%); -webkit-backdrop-filter:blur(18px) saturate(120%); }
body:not(.page-ready) main > header,body:not(.page-ready) main > section { opacity:0; transform:translateX(34px); }
body.page-ready main > header,body.page-ready main > section { animation:card-arrive .7s both cubic-bezier(.22,1,.36,1); animation-delay:calc(var(--card-index,0) * 70ms); }
body.cards-leaving main > header,body.cards-leaving main > section { animation:card-depart .30s both cubic-bezier(.55,0,1,.45); animation-delay:0ms; }
main > :nth-child(1){--card-index:0} main > :nth-child(2){--card-index:1} main > :nth-child(3){--card-index:2} main > :nth-child(4){--card-index:3} main > :nth-child(5){--card-index:4} main > :nth-child(6){--card-index:5} main > :nth-child(7){--card-index:6}
@keyframes card-arrive { from{opacity:0;transform:translateX(38px) scale(.985);filter:blur(3px)} to{opacity:1;transform:none;filter:blur(0)} }
@keyframes card-depart { from{opacity:1;transform:none;filter:blur(0)} to{opacity:0;transform:translateX(-24px) scale(.995);filter:blur(1px)} }
.home-hero { padding:42px; grid-template-columns:214px 1fr; gap:42px; }
.profile-photo { width:190px; height:190px; border-radius:13px; box-shadow:0 10px 30px rgba(31,43,49,.12); }
h1 { font-family:Georgia,"Noto Serif SC",serif; font-weight:500; font-size:clamp(2.25rem,4vw,3.3rem); }
.plain-page-header h1,.life-page-header h1 { margin:0; font-size:clamp(2.25rem,4vw,3.2rem); line-height:1.08; letter-spacing:-.04em; }
.subtitle { line-height:1.72; }
section { padding:28px 30px; margin-top:18px; }
section h2 { display:flex; align-items:center; gap:10px; width:fit-content; margin:0 0 20px; padding:0 0 9px; position:relative; font-family:Georgia,"Noto Serif SC",serif; font-weight:500; font-size:1.5rem; line-height:1.2; color:var(--primary-dark); letter-spacing:.015em; text-shadow:0 1px 0 rgba(255,255,255,.5); }
section h2::before { display:block; position:static; flex:0 0 18px; content:""; width:18px; height:1px; margin:0; background:currentColor; opacity:.6; }
section h2::after { content:""; position:absolute; left:28px; bottom:0; width:46px; height:2px; margin:0; border-radius:9px; background:linear-gradient(90deg,currentColor,transparent); opacity:.45; }
a { font-weight:700; }
.intro-grid { grid-template-columns:repeat(3,1fr); gap:10px; }
.intro-card { position:relative; padding:20px 18px 18px; border-radius:12px; box-shadow:none; border-color:var(--border); background:rgba(255,255,255,.60); backdrop-filter:blur(12px); overflow:hidden; }
.intro-card::after { content:""; position:absolute; top:0; left:0; width:42px; height:2px; background:linear-gradient(90deg,var(--primary),#8da69e); }
.intro-label { padding:0; background:none; color:var(--primary); letter-spacing:.08em; text-transform:uppercase; }
.news-list { position:relative; }
.news-list::before { content:""; position:absolute; left:91px; top:9px; bottom:9px; width:1px; background:linear-gradient(var(--primary),transparent); opacity:.35; }
.news-list li { position:relative; grid-template-columns:88px 1fr; gap:22px; padding:11px 0; }
.news-date { color:var(--primary-dark); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.78rem; }
.compact-publications li { margin-bottom:11px; }
.section-heading-row { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:15px; }
.section-kicker { color:var(--primary); font-size:.88rem; line-height:1.25; font-weight:750; letter-spacing:.11em; text-transform:uppercase; }
.service-count { display:flex; align-items:baseline; gap:7px; color:var(--soft); font-size:.78rem; white-space:nowrap; }
.service-count strong { color:var(--primary-dark); font-family:Georgia,serif; font-size:1.6rem; font-weight:500; }
.service-section { background:rgba(255,255,255,.72); }
.service-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; border:0; }
.service-list li { display:flex; min-height:74px; flex-direction:column; justify-content:space-between; gap:12px; padding:14px; border:1px solid var(--border); border-radius:11px; background:rgba(255,255,255,.52); }
.service-journal { font-weight:650; }
.service-years { color:var(--soft); font-variant-numeric:tabular-nums; }
.site-footer { padding:30px 16px 44px; }

/* Publications */
.plain-page-header { padding:22px 2px 8px; }
.pub-section.year-section { display:grid; grid-template-columns:112px minmax(0,1fr); align-items:start; gap:15px; margin-top:20px; }
.sticky-year { position:sticky; top:84px; grid-column:1; display:block; margin:0; padding:10px 12px; width:100%; min-width:0; border-radius:9px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:Georgia,"Noto Serif SC",serif; font-size:.94rem; line-height:1.25; font-weight:600; color:var(--primary-dark); background:rgba(255,255,255,.72); backdrop-filter:blur(14px); box-shadow:0 7px 20px rgba(32,52,73,.08); }
.sticky-year::before,.sticky-year::after { display:none; }
.pub-list { grid-column:2; width:100%; padding:7px 15px; border-radius:15px; }
.pub-item { margin:0; padding:10px 1px; border:0; border-bottom:1px solid var(--border); border-radius:0; background:transparent; box-shadow:none; }
.pub-item:hover { transform:none; box-shadow:none; }
.pub-item:last-child { border-bottom:0; }
.pub-venue { padding:0; margin-bottom:4px; border-radius:0; background:none; color:var(--primary); font-size:.69rem; letter-spacing:.045em; text-transform:uppercase; }
.pub-title { font-size:.97rem; line-height:1.4; }
.pub-authors { font-size:.86rem; }
.pub-meta { font-size:.8rem; }
.pub-abstract { border-left-color:var(--primary); border-radius:4px 9px 9px 4px; }

/* Life - warmer and more playful, while retaining the shared shell. */
body:has(.life-page-header) { --ink:#351d20; --muted:#6f5553; --soft:#947c76; --primary:#985355; --primary-dark:#6f3438; --border:rgba(113,42,47,.12); background-color:#eee4db !important; background-image:linear-gradient(140deg,#e7c9c2 0%,#f4ede2 48%,#e1b6b4 100%) !important; background-attachment:fixed !important; }
.life-section { background-color:rgba(255,255,255,.72); background-image:none; backdrop-filter:blur(20px) saturate(115%); -webkit-backdrop-filter:blur(20px) saturate(115%); }
.life-page-header h1,.life-heading { font-family:Georgia,"Noto Serif SC",serif; font-weight:500; }
.life-section { padding:28px; margin-top:18px; border-color:rgba(92,70,52,.10); border-radius:var(--radius-xl); box-shadow:0 12px 34px rgba(88,61,41,.06); }
.life-heading { padding:0 0 9px; }
.life-heading::before { display:block; position:static; flex:0 0 18px; width:18px; height:1px; margin:0; border-radius:0; background:currentColor !important; opacity:.6; }
.life-heading::after { content:""; position:absolute; left:28px; bottom:0; width:46px; height:2px; margin:0; border-radius:9px; background:linear-gradient(90deg,currentColor,transparent); opacity:.45; }
.life-list { gap:12px; }
.life-card { min-height:0; padding:18px; border-radius:14px; box-shadow:none; border:1px solid rgba(111,41,46,.10); background:rgba(255,255,255,.66); backdrop-filter:blur(14px) saturate(112%); -webkit-backdrop-filter:blur(14px) saturate(112%); }
.life-card:hover { transform:translateY(-2px) rotate(.08deg); box-shadow:0 12px 28px rgba(88,61,41,.08); }
.life-tag { border-radius:5px; letter-spacing:.07em; text-transform:uppercase; }
.life-title { position:relative; z-index:1; display:block; clear:both; margin-top:4px; background:none; }
.horizontal-photo-strip { perspective:1100px; perspective-origin:center 42%; padding:34px 10px 28px; scroll-padding-inline:10px; }
.horizontal-photo-strip figure { position:relative; isolation:isolate; flex-basis:280px; border-radius:12px; overflow:visible; background:rgba(255,255,255,.86); border:1px solid rgba(105,61,59,.13); box-shadow:0 10px 22px rgba(75,43,42,.14),0 3px 0 rgba(255,255,255,.9),0 6px 0 rgba(125,83,76,.08); transform:translateZ(0) rotateY(0) scale(.965); transform-style:preserve-3d; transform-origin:left center; transition:transform .52s cubic-bezier(.2,.78,.2,1),box-shadow .52s ease,filter .4s ease; will-change:transform; }
.horizontal-photo-strip figure:nth-child(even) { transform-origin:right center; }
.horizontal-photo-strip figure::before { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit; background:linear-gradient(105deg,rgba(255,255,255,.34),transparent 24%,transparent 76%,rgba(85,48,46,.08)); opacity:.55; transition:opacity .35s ease; }
.horizontal-photo-strip figure::after { content:""; position:absolute; z-index:-1; left:7%; right:7%; bottom:-13px; height:18px; border-radius:50%; background:rgba(67,38,38,.22); filter:blur(10px); opacity:.55; transition:transform .5s ease,opacity .5s ease; }
.horizontal-photo-strip figure:hover { z-index:8; transform:translateY(-14px) translateZ(70px) rotateY(-5deg) scale(1.075); box-shadow:0 26px 50px rgba(67,38,38,.24),0 4px 0 rgba(255,255,255,.95),0 8px 0 rgba(125,83,76,.09); filter:saturate(1.04); }
.horizontal-photo-strip figure:nth-child(even):hover { transform:translateY(-14px) translateZ(70px) rotateY(5deg) scale(1.075); }
.horizontal-photo-strip figure:hover::before { opacity:.22; }
.horizontal-photo-strip figure:hover::after { transform:translateY(7px) scale(.82); opacity:.72; }
.horizontal-photo-strip figure:has(+ figure:hover) { transform:translateX(-10px) rotateY(-10deg) scale(.94); }
.horizontal-photo-strip figure:hover + figure { transform:translateX(10px) rotateY(10deg) scale(.94); }
.horizontal-photo-strip img { border-radius:11px 11px 0 0; transform:translateZ(1px); }
.horizontal-photo-strip figcaption { position:relative; z-index:3; border-radius:0 0 11px 11px; background:rgba(255,255,255,.9); }
.championship-box,.music-player-box { border-radius:12px; box-shadow:none; }
@media (max-width:760px) {
  .site-nav { height:62px; }
  .nav-container { flex-direction:row; align-items:center; padding:0 15px; gap:10px; }
  .nav-actions { gap:5px; margin-left:auto; }
  .nav-links { gap:0; }
  .nav-links a { padding:7px 6px; }
  .nav-links a::before { font-size:.76rem; }
  .nav-links a:nth-child(1),.nav-links a:nth-child(3) { width:48px; }
  .nav-links a:nth-child(2) { width:82px; }
  .nav-links a.active::after { left:6px; right:6px; }
  .language-toggle { gap:4px; width:50px; height:27px; padding:4px 6px; font-size:.66rem; }
  .container,.page-container { padding:22px 13px 45px; }
  .home-hero { padding:25px 20px; gap:21px; }
  .intro-grid { grid-template-columns:1fr; }
  section { padding:22px 18px; }
  .section-heading-row { align-items:flex-start; }
  .service-list { grid-template-columns:1fr; }
  .news-list::before { display:none; }
  .pub-section.year-section { grid-template-columns:1fr; gap:8px; }
  .sticky-year { position:relative; top:auto; grid-column:1; width:max-content; min-width:70px; }
  .pub-list { grid-column:1; padding:7px 12px; }
  .life-section { padding:21px 15px; }
  .plain-page-header h1,.life-page-header h1 { font-size:2.25rem; line-height:1.08; }
}
@media (hover:none),(pointer:coarse) {
  .horizontal-photo-strip { perspective:none; padding:8px 0 14px; }
  .horizontal-photo-strip figure,.horizontal-photo-strip figure:nth-child(even),.horizontal-photo-strip figure:hover,.horizontal-photo-strip figure:nth-child(even):hover,.horizontal-photo-strip figure:has(+ figure:hover),.horizontal-photo-strip figure:hover + figure { transform:none; }
  .horizontal-photo-strip figure::after { display:none; }
}
@media (prefers-reduced-motion:reduce) { body,main > header,main > section { animation:none !important; transition:none !important; transform:none !important; filter:none !important; } }