/* Juan Li — site design v6 (approved 2026-10-09). Paper #FBF7F0, umber ink, single accent iron rust #94501F. Fonts: /v6/fonts/fonts.css */
:root{--paper:#FBF7F0;--ink:#3A2E27;--ink2:#6B5B4F;--ink3:#7A6A5C;--rule:#E9E0D2;--tag:#F2EADD;--acc:#94501F;
  --serif:'NR','WK',Georgia,'Songti SC','SimSun',serif;--pad:104px;--max:1232px;--tile-pt:18px}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:18px;line-height:1.55;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-variation-settings:'opsz' 16}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0;padding:0}ul,ol{list-style:none}
a{color:var(--acc);text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:focus-visible,button:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:2px}
b,strong{font-weight:500;color:var(--ink)}
img{max-width:100%;height:auto;display:block}
.ext{font-size:.78em;margin-left:.2em;display:inline-block;transform:translateY(-.05em)}
/* language toggle: English primary, Chinese one size smaller */
[data-lang=en] .zh,[data-lang=zh] .en{display:none!important}
.zh,[lang=zh-CN]{font-family:'WK',var(--serif);font-size:.94em;letter-spacing:.02em}
.zh .zh,[lang=zh-CN] .zh,.zh [lang=zh-CN]{font-size:1em}
[data-lang=en] .zh-only{display:none}
.wrap{width:100%;max-width:calc(var(--max) + 2*var(--pad));margin:0 auto;padding:0 var(--pad)}
.lab{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink3);font-variation-settings:'opsz' 10;line-height:1.5}
.lab .zh{letter-spacing:.3em;font-size:13px}
.muted{color:var(--ink3)}
.note{font-size:15px;color:var(--ink3);margin-top:14px;font-style:italic}
.note .zh{font-style:normal}
mark.todo{background:var(--tag);color:var(--ink2);font-style:normal;padding:2px 6px;border-radius:4px;font-size:.92em}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.tags>span{font-size:14px;color:var(--ink2);background:var(--tag);border-radius:4px;padding:5px 11px;line-height:1.4}
.lk{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:24px;font-size:16px}
.lk .cnote{color:var(--ink3);margin-left:8px;font-size:14px}
.prose{font-size:18px;line-height:1.6;color:var(--ink2);max-width:680px;margin-top:16px}
.prose.small{font-size:16px}
.h2{font-size:30px;line-height:1.25;font-weight:400;letter-spacing:-.005em;font-variation-settings:'opsz' 36;color:var(--ink)}
.h3{font-size:24px;line-height:1.3;font-weight:400;font-variation-settings:'opsz' 28}
.sub{color:var(--ink2);font-size:17px;max-width:640px;margin-top:10px}
/* header: nav + hairline ridge that fades out at the right */
header.site{position:relative;z-index:3}
nav.top{max-width:calc(var(--max) + 2*var(--pad));margin:0 auto;padding:30px var(--pad) 0;display:flex;align-items:baseline;gap:40px;font-size:15px;font-variation-settings:'opsz' 12}
.brand{color:var(--ink);font-size:21px;font-variation-settings:'opsz' 24;white-space:nowrap}.brand:hover{text-decoration:none}
.brand .cn{font-family:'WK';font-size:16px;color:var(--ink3);margin-left:10px}
.brand .dot{color:var(--ink3);margin:0 .35em}.brand .subname{color:var(--acc)}
nav.top .links{display:flex;gap:28px;margin-left:auto;flex-wrap:nowrap}
nav.top .links a{color:var(--ink2);white-space:nowrap}
nav.top .links a[aria-current]{color:var(--acc)}
nav.top .links a[aria-disabled]{cursor:default}nav.top .links a[aria-disabled]:hover{text-decoration:none}
nav.top .links .back a{color:var(--acc)}
.lang{appearance:none;background:none;border:0;padding:4px 0 4px 4px;font:inherit;color:var(--ink3);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:baseline;gap:6px}
.lang .l-en{font-size:15px;color:var(--acc)}.lang .l-zh{font-family:'WK';font-size:13.5px;color:var(--ink3)}
[data-lang=zh] .lang .l-en{color:var(--ink3)}[data-lang=zh] .lang .l-zh{color:var(--acc)}
.lang .sl{color:var(--rule)}
svg.ridge{display:block;width:calc(100% - 2*var(--pad));max-width:var(--max);margin:-8px auto 0;height:auto;color:var(--ink);overflow:visible}
/* home hero (locked H06b layout: centred) */
.hero{position:relative;text-align:center;padding:76px 0 0;min-height:800px;display:flex;flex-direction:column}
.hero .copy{flex:1;padding:0 20px}
.kick{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink3)}
.name{font-family:'DISP';font-weight:500;font-size:clamp(88px,15.14vw,218px);line-height:1;letter-spacing:0;margin-top:24px;white-space:nowrap;color:var(--ink);display:inline-block}
.name .I{position:relative}
.name .ipaw{position:absolute;width:.156em;height:.156em;left:.115em;top:.39em;overflow:visible;transform-origin:50% 85%}
@media (prefers-reduced-motion:no-preference){.name:hover .ipaw,.name:focus-within .ipaw,.name.boop .ipaw{animation:boop .26s cubic-bezier(.3,1.4,.5,1)}}
@keyframes boop{40%{transform:translateY(.006em) rotate(6deg) scale(1.04,.92)}75%{transform:rotate(-2deg) scale(.98,1.03)}}
.name .nm{user-select:none;-webkit-user-select:none}
.name .nl::before{content:'Juan L'}.name .I::before{content:'ı'} /* dotless i drawn by CSS; the snow-leopard paw is its dot, real text stays 'Juan Li' */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.name .vh{user-select:text}
.cnname{font-family:'WK';font-size:28px;letter-spacing:1em;margin:20px 0 0 1em;color:var(--ink2);line-height:1.2}
.role{margin-top:32px;font-size:22px;font-style:italic;font-variation-settings:'opsz' 24}
.role .zh{font-style:normal}
.inst{letter-spacing:.12em;font-size:12px;color:var(--ink3);text-transform:uppercase;margin-top:10px;line-height:1.7}
.inst .zh{letter-spacing:.2em}
.intro{margin:18px auto 0;max-width:640px;font-size:18px;line-height:1.6;color:var(--ink2)}
.cta{margin-top:28px;display:flex;justify-content:center;flex-wrap:wrap;gap:12px 32px;font-size:16px}
.cta.left{justify-content:flex-start}
.next{display:flex;gap:44px;align-items:center;min-height:60px;border-top:1px solid var(--rule);margin-top:64px;font-size:15.5px;white-space:nowrap;color:var(--ink2)}
.next .h{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink3)}
.next a{color:var(--ink2)}.next a:hover{color:var(--acc)}
.next b{font-weight:400;font-style:italic;color:var(--ink3);margin-right:8px}
@media (prefers-reduced-motion:no-preference){svg.ridge{animation:in 1.6s ease both}@keyframes in{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}}
/* sections */
main{display:block}
.band{padding-top:112px}
.sechead{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding-bottom:18px;border-bottom:1px solid var(--rule);margin-bottom:28px}
.sechead .hmore{font-size:15px;white-space:nowrap}
.areas{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.area .num,.rarea .num{font-style:italic;color:var(--ink3);font-size:18px}
.area h3{font-size:23px;line-height:1.3;font-weight:400;margin-top:8px;font-variation-settings:'opsz' 28}
.area p{color:var(--ink2);font-size:16.5px;margin-top:10px}
.area .more{display:inline-block;margin-top:14px;font-size:15px}
/* explainer cards + badge */
.xgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px;margin-top:28px}
.xcard{display:block;color:var(--ink)}.xcard:hover{text-decoration:none}.xcard:hover .xt{color:var(--acc)}
.thumb,.pthumb{position:relative;display:block;border-radius:4px;overflow:hidden;background:var(--tag)}
.thumb img,.pthumb img{width:100%;aspect-ratio:16/9;object-fit:cover}
.badge{position:absolute;left:12px;top:12px;background:var(--paper);color:var(--acc);font-size:12.5px;letter-spacing:.04em;padding:4px 10px;border-radius:4px;line-height:1.4}
.badge.flat{position:static;background:var(--tag);color:var(--ink2)}
.xt{display:block;margin-top:14px;font-size:20px;line-height:1.35;font-variation-settings:'opsz' 24}
.xm{display:block;margin-top:6px;font-size:14.5px;color:var(--ink3)}
/* yixi band */
.yixi{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:end}
.ytitle{font-size:34px;line-height:1.25;font-weight:400;font-variation-settings:'opsz' 40;max-width:720px}
.ytitle .zh{font-size:30px}
.ymeta{color:var(--ink3);font-size:15px;margin-top:10px}
blockquote.pull{font-family:'WK';font-size:24px;line-height:1.6;color:var(--ink2);padding-bottom:6px}
/* practice + platforms */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:26px}
.tcard{position:relative;display:block;background:var(--tag);border-radius:4px;padding:26px 28px 28px;color:var(--ink)}
.tcard:hover{text-decoration:none}.tcard:hover .tt{color:var(--acc)}
.tcard .tt{display:block;font-size:22px}.tcard .ts{display:block;color:var(--ink2);font-size:15.5px;margin-top:6px}
.tcard .arr{position:absolute;right:24px;top:26px;color:var(--acc)}
.plats{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.plat{display:flex;flex-direction:column;gap:10px;padding:30px 32px;border:1px solid var(--rule);border-radius:4px;color:var(--ink)}
.plat:hover{text-decoration:none;border-color:var(--acc)}
.plat .pt{font-size:26px;line-height:1.25;font-variation-settings:'opsz' 32}.plat .ps{color:var(--ink2);font-size:16px}
.plat .pm{color:var(--ink3);font-size:14px}.plat .go{color:var(--acc);font-size:16px;margin-top:6px}
/* bio (text left, photo right; she faces left toward the text) */
.bio{display:grid;grid-template-columns:minmax(0,760px) 264px;justify-content:space-between;column-gap:96px;align-items:start}
.bio .ph{margin-top:var(--ph-top,38px)}
.biowrap{padding-bottom:40px}.biowrap.first{padding-top:40px}
.bio .lead{margin-top:22px;font-size:34px;line-height:1.3;font-weight:400;letter-spacing:-.01em;font-variation-settings:'opsz' 48;color:var(--ink)}
.bio .lead .zh{font-size:30px}
.bio .body{margin-top:22px;font-size:18px;line-height:1.6;color:var(--ink2);max-width:600px}
.ph img{width:264px;height:302px}
.ph figcaption{margin-top:16px;text-align:center;font-size:15px;color:var(--ink2);font-style:italic}
.ph figcaption span{font-family:'WK';font-style:normal;color:var(--ink3);margin-left:8px}
/* inner pages */
.phead{padding-top:72px}
.ptitle{font-size:56px;line-height:1.1;font-weight:400;letter-spacing:-.015em;font-variation-settings:'opsz' 60;margin-top:14px;max-width:980px}
.ptitle .zh{font-size:50px;letter-spacing:.02em}
.ptitle.paper{font-size:46px;line-height:1.15}
.plead{font-size:19px;line-height:1.6;color:var(--ink2);max-width:720px;margin-top:20px}
.crumb{font-size:15px;color:var(--ink3)}.crumb span{margin:0 6px}
.rarea{display:grid;grid-template-columns:72px 1fr;padding-top:96px}
.rarea .num{font-size:26px;line-height:1.25}
.aside{margin-top:32px;background:var(--tag);border-radius:4px;padding:22px 26px;max-width:680px}
.aside.wide{background:none;padding:0;max-width:none}
.aside .at{font-size:20px;margin-top:8px}
.aside .lk{margin-top:12px}
.fund li{display:grid;grid-template-columns:260px 1fr;column-gap:32px;padding:18px 0;border-bottom:1px solid var(--rule)}
.fund .fy{grid-row:span 2;color:var(--ink3);font-size:15px}.fund .fn{font-size:19px}.fund .fd{color:var(--ink2);font-size:16px}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-left:var(--pad);padding-right:var(--pad)}
.twocol>.wrap{padding:0}
.callout{padding-top:112px}
.twocol .callout{padding:28px 32px;background:var(--tag);border-radius:4px;margin-top:112px}
.callout .ct{font-size:22px;margin-top:8px}
.callout .body{color:var(--ink2);margin-top:6px;font-size:16.5px}
.wrap.callout:not(.twocol .callout){margin-top:0}
/* publications */
.profiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.profiles a{display:flex;flex-direction:column;background:var(--tag);border-radius:4px;padding:14px 18px;color:var(--acc);position:relative}
.profiles a b{font-weight:400;color:var(--acc);font-size:17px}.profiles small{color:var(--ink2);font-size:13.5px}
.profiles .ext{position:absolute;right:14px;top:14px}
.yrjump{margin-top:28px;font-size:15px;display:flex;flex-wrap:wrap;gap:6px 14px}
.pubs{padding-top:24px}
.pyear{display:grid;grid-template-columns:120px 1fr;padding-top:40px}
.yr{font-size:26px;font-weight:400;font-style:italic;color:var(--ink3);font-variation-settings:'opsz' 30;line-height:1.3}
.publist>li{padding:16px 0 18px;border-bottom:1px solid var(--rule)}
.publist>li:first-child{padding-top:0}
.pub .ptl{font-size:19px;line-height:1.4;color:var(--acc)}
.pmeta{color:var(--ink2);font-size:15.5px;margin-top:6px;line-height:1.5}
.pmeta a{overflow-wrap:anywhere}.pmeta.big{font-size:17px;max-width:900px;margin-top:20px}
.pmeta sup{font-size:.7em}
.pub.hasx{display:grid;grid-template-columns:1fr 280px;gap:36px;align-items:start}
.plk{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:10px;font-size:15px}
/* paper pages: embedded explainer */
.xwrap{padding-top:44px}
.explainer .xframe{position:relative;aspect-ratio:16/9;background:var(--paper);border-radius:4px;overflow:hidden;outline:1px solid var(--rule)}
.explainer .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.explainer iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .5s}
.explainer.live iframe{opacity:1}
.explainer.live .poster,.explainer.live .xplay{display:none}
.xplay{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;border:0;background:var(--paper);color:var(--acc);font-size:24px;cursor:pointer}
.xplay span{margin-left:4px}
.xbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:14px;font-size:15px}
.xtoggle{appearance:none;border:0;background:none;color:var(--acc);font:inherit;cursor:pointer;padding:0}
.xhint{color:var(--ink3);font-size:14px}.xfull{margin-left:auto}
.pgrid{display:grid;grid-template-columns:1fr 1.6fr;gap:64px;padding-top:72px}
.hl{margin-top:16px}.hl li{position:relative;padding:10px 0 10px 22px;color:var(--ink2);font-size:17px;border-bottom:1px solid var(--rule)}
.hl li:before{content:'';position:absolute;left:2px;top:22px;width:6px;height:6px;border-radius:50%;background:var(--ink3)}
.mt{margin-top:30px}
/* about: yixi story */
.story{counter-reset:s;display:grid;grid-template-columns:1fr 1fr;gap:44px 64px;margin-top:40px}
.story li{counter-increment:s}
.story .sh{font-size:17px;color:var(--ink);font-style:italic}
.story .sh:before{content:counter(s,decimal-leading-zero) '  ';color:var(--ink3);font-style:italic}
.story .sh .zh{font-style:normal}
.story blockquote{font-family:'WK';font-size:18.5px;line-height:1.75;color:var(--ink2);margin-top:12px}
/* teaching */
.courses{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;padding-top:64px}
.course .code{font-style:italic;color:var(--ink3)}.course .h3{margin-top:6px}.course .prose{font-size:16.5px}
/* talks */
.talks{padding-top:32px}
.tyear{display:grid;grid-template-columns:120px 1fr;padding-top:36px}
.talklist li{display:grid;grid-template-columns:200px 1fr;column-gap:24px;padding:14px 0;border-bottom:1px solid var(--rule)}
.talklist li:first-child{padding-top:0}
.talklist .ty{grid-row:span 3;color:var(--ink3);font-size:14.5px;padding-top:3px}
.talklist .tt{font-size:18px;line-height:1.4}.talklist .tv{color:var(--ink2);font-size:15.5px}
.talklist .tl{display:flex;gap:20px;font-size:15px;margin-top:4px}
/* contact */
.mailbig{font-size:30px;margin-top:28px;font-variation-settings:'opsz' 36}
.aff{margin-top:14px;font-size:16px;line-height:1.65;color:var(--ink2)}
/* subsites */
.subsite .subhero{padding-top:72px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.chip{background:var(--tag);color:var(--ink2);border-radius:4px;padding:5px 12px;font-size:14.5px}
.chip.on{background:var(--ink);color:var(--paper)}
.feed{background:var(--tag);border-radius:4px;padding:28px 32px}
.phnote{margin-top:10px;color:var(--ink2)}
.phnote mark.todo{background:none;padding:0}
.sindex{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.sindex li{border-top:1px solid var(--rule);padding-top:16px}
.sindex .it{display:block;font-size:22px}.sindex .id{display:block;color:var(--ink2);font-size:15.5px;margin-top:6px}
[data-lang=zh] .sindex .it .en{display:none}
.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.note-card{border-top:1px solid var(--rule);padding-top:16px}
.note-card .nd{color:var(--ink3);font-size:14px}.note-card .star{color:var(--acc)}
.note-card .nt{font-size:20px;line-height:1.35;margin-top:8px}
.note-card .nw{color:var(--ink2);font-size:16px;margin-top:8px}
.note-card .tags{margin-top:12px}.note-card .tags>span{font-size:13px;padding:3px 9px}
.note-card .nf{display:flex;justify-content:space-between;gap:12px;margin-top:12px;font-size:14.5px}
/* footer */
footer.site{margin-top:140px;border-top:1px solid var(--rule);padding:48px 0 40px;font-size:15.5px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.fname{font-size:20px}.fname span{font-family:'WK';color:var(--ink3);font-size:16px;margin-left:6px}
footer .lab{margin-bottom:10px}.flist li{padding:3px 0}
.mail{margin-top:10px}
.fpaw{width:16px;height:16px;display:inline-block;margin-left:10px;vertical-align:-2px;overflow:visible} /* footer paw (static), matches the i-dot paw */
.fbot{display:flex;justify-content:space-between;gap:20px;margin-top:40px;color:var(--ink2);font-size:14px}

/* PhD recruitment on Home — A: own section, hairline, no box */
.phd-a{padding-top:96px}
.phd-a .in{border-top:1px solid var(--rule);padding-top:56px}
.phd-a .pt,.phd-b .pt{font-weight:400;font-size:34px;line-height:1.2;margin-top:14px;color:var(--ink);font-variation-settings:'opsz' 36}
.phd-a .ps,.phd-b .ps{display:block;font-size:19px;line-height:1.4;color:var(--ink2);margin-top:8px;font-variation-settings:'opsz' 20}
.phd-a .meta,.phd-b .meta{font-size:15px;color:var(--ink3);margin-top:16px;letter-spacing:.01em}
.phd-a .lk,.phd-b .lk{font-size:17px;margin-top:20px}
/* B: two columns, flat tag fill on the right, no outline */
.phd-b{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;padding-top:112px}
.phd-b .h2{margin-top:12px}
.phd-b .r{background:var(--tag);border-radius:4px;padding:30px 34px}
.phd-b .pt{font-size:28px}.phd-b .ps{font-size:17px}
@media (max-width:760px){.phd-a{padding-top:64px}.phd-a .in{padding-top:40px}.phd-a .pt,.phd-b .pt{font-size:26px}.phd-a .ps,.phd-b .ps{font-size:16.5px}
  .phd-b{grid-template-columns:1fr;gap:28px;padding-top:72px}.phd-b .r{padding:24px 22px}}

/* research: long-term strip on Home, sub-lines and paper lists on Research */
.ltstrip{display:grid;grid-template-columns:200px 1fr auto;gap:6px 28px;align-items:baseline;margin-top:44px;padding-top:26px;border-top:1px solid var(--rule);color:var(--ink);text-decoration:none}
.ltstrip .lt-t{font-size:22px;font-variation-settings:'opsz' 24}
.ltstrip .lt-s{grid-column:2;color:var(--ink2);font-size:16px}
.ltstrip .arr{grid-column:3;grid-row:1;color:var(--acc)}
.ltstrip:hover .lt-t{color:var(--acc)}
.asub{color:var(--ink3);font-size:15.5px;line-height:1.55;margin-top:8px;max-width:760px}
.apapers{margin-top:24px}
.apapers ul{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:10px}
.apapers li{font-size:16.5px;line-height:1.45}
.apapers .pm{display:block;font-size:13.5px;color:var(--ink3);margin-top:2px}
.num.lt{color:var(--ink3)}
.rf{margin-top:34px;gap:40px;padding:0}
.rf .hl li{font-size:16px}
.rf .fy{color:var(--ink3);font-variant-numeric:tabular-nums;margin-right:6px}
@media (max-width:760px){.ltstrip{grid-template-columns:1fr auto}.ltstrip .lab{grid-column:1/-1}.ltstrip .lt-s{grid-column:1/-1}.ltstrip .arr{grid-column:2;grid-row:2}}
/* Home: short PhD line + small links */
.phd-line{padding-top:72px}
.phd-line p{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 22px;border-top:1px solid var(--rule);padding-top:28px;font-size:17px}
.phd-line .pl-t{font-size:21px;color:var(--ink)}
.phd-line .pl-m{color:var(--ink2);font-size:15.5px}
.hlinks{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 26px;margin-top:40px;font-size:15.5px}
.hlinks .h{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3)}
.emerging{margin-top:10px;font-size:15px;font-style:italic;color:var(--ink2);max-width:760px}
.emerging .zh{font-style:normal}
/* About · Yixi still poster */
.vstill{margin:0}
.vstill .vposter{display:block;position:relative;padding:0;aspect-ratio:16/9;background:#2b2f3a;overflow:hidden;border-radius:4px}
.vstill img{display:block;width:100%;height:100%;object-fit:cover}
.vstill .vplay{position:absolute;right:22px;bottom:22px;width:54px;height:54px;border-radius:50%;background:rgba(251,247,240,.92);color:var(--acc);display:flex;align-items:center;justify-content:center}
.vstill .vposter:hover .vplay{background:var(--acc);color:var(--paper)}
.vstill figcaption{display:block;margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--ink3)}
.vstill figcaption .cr,.vstill figcaption .vnote{display:inline;margin:0;font:inherit;color:inherit}
.vstill figcaption .cr::after{content:' · '}
/* Home: PhD badge (flat tile, no border, no animation) */
.hero .copy{position:relative}
.phdbadge{position:absolute;right:var(--pad);top:var(--badge-top,-17px);display:grid;grid-template-columns:auto auto;gap:8px 18px;align-items:end;background:var(--tag);border-radius:4px;padding:var(--tile-pt) 22px 18px;text-align:left;color:var(--ink);text-decoration:none;max-width:250px}
.phdbadge .lab,.phdcard .lab{white-space:nowrap}.phdbadge .lab{grid-column:1/-1}
[data-lang=zh] .phdbadge{top:var(--badge-top-zh,-18px)} /* zh kicker sets 1px higher */
.phdbadge .bt{font-size:17px;line-height:1.25;font-style:italic}
.phdbadge .arr{color:var(--acc);font-size:18px}
.phdbadge:hover .bt{color:var(--acc)}
@media (max-width:1240px){.phdbadge{position:static;margin:26px auto 0;width:max-content;max-width:100%}}
.xbadge{display:inline-block;margin-left:8px;font-size:12.5px;letter-spacing:.02em;background:var(--tag);border-radius:4px;padding:1px 7px;color:var(--acc);white-space:nowrap;vertical-align:1px}
/* PhD facts */
.facts{margin-top:18px;display:grid;gap:8px;font-size:15.5px;line-height:1.5}
.facts div{display:grid;grid-template-columns:190px 1fr;gap:12px}
.facts dt{color:var(--ink3);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding-top:3px}
.facts dt .zh{letter-spacing:.2em}
.facts dd{color:var(--ink);margin:0}
.facts.row{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 40px;margin-top:22px}
.facts.row div{grid-template-columns:1fr;gap:2px}
@media (max-width:760px){.facts div{grid-template-columns:1fr;gap:2px}.facts.row{grid-template-columns:1fr}}
/* Contact (2026-10-09 17:01): main column + right-column PhD badge; badge stacks under How to join on narrow screens */
.cgrid{display:grid;grid-template-columns:minmax(0,760px) 320px;justify-content:space-between;column-gap:96px;align-items:start;padding-top:56px;
  grid-template-areas:"join side" "touch side" "collab side"}
.c-join{grid-area:join}.c-touch{grid-area:touch}.c-collab{grid-area:collab}.cside{grid-area:side;align-self:start;margin-top:calc(-1 * var(--tile-pt))} /* tile text, not tile edge, sits on the left label's cap line */
.phdcard{background:var(--tag);border-radius:4px;padding:var(--tile-pt) 22px 20px}
.phdcard .bt{font-size:20px;line-height:1.2;font-style:italic;font-weight:400;margin-top:10px;font-variation-settings:'opsz' 36}
.phdcard .meta{font-size:14px;line-height:1.55;color:var(--ink2);margin-top:10px}
.phdcard .lk{margin-top:14px;font-size:15.5px}
.pdet{margin-top:18px;font-size:15.5px;line-height:1.6}
.pdet summary{cursor:pointer;color:var(--ink3);font-size:12px;letter-spacing:.14em;text-transform:uppercase;list-style:none;padding:4px 0;border-bottom:1px solid var(--rule)}
.pdet summary::-webkit-details-marker{display:none}
.pdet summary::after{content:' +';color:var(--acc)}.pdet[open] summary::after{content:' −'}
.pdet .tags{margin-top:16px}.pdet .ct{font-size:17px;line-height:1.35;margin-top:10px}
.pdet .pq-body{color:var(--ink2);margin-top:12px}
.pdet .facts{font-size:14.5px}.pdet .facts div{grid-template-columns:1fr;gap:1px}
.pdet .lk{margin-top:16px;font-size:15px}
@media (max-width:1100px){.cgrid{column-gap:48px;grid-template-columns:minmax(0,1fr) 280px}}
@media (max-width:900px){.cgrid{grid-template-columns:1fr;grid-template-areas:"join" "side" "touch" "collab"}.cside{margin-top:40px}}
/* About · Yixi: click-to-load video facade + two pull quotes */
.yx{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:start}
.vposter{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:4px;background:var(--tag);color:var(--ink);
  text-align:left;padding:30px 34px;cursor:pointer;font:inherit;overflow:hidden}
.vposter:hover .vplay{background:var(--acc);color:var(--paper)}
.vk{display:block;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.vt{display:block;font-size:30px;line-height:1.2;margin-top:14px;max-width:80%;font-variation-settings:'opsz' 36}
.vt .zh{font-size:28px}
.vn{display:block;margin-top:10px;color:var(--ink2);font-style:italic;font-size:17px}.vn .zh{font-style:normal}
.vplay{position:absolute;right:30px;bottom:30px;width:64px;height:64px;border-radius:50%;background:var(--paper);color:var(--acc);display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s;z-index:1}
.vplay svg{width:26px;height:26px;margin-left:3px}
.vridge{position:absolute;left:0;right:0;bottom:22px;width:100%;height:60px;color:var(--ink3);opacity:.55}
.vnote{font-size:14px;color:var(--ink3);margin-top:10px}
.pq{margin-top:26px}
.pq blockquote{padding-left:18px;border-left:2px solid var(--rule)}
.pq .en-q{font-size:20px;line-height:1.5;color:var(--ink);font-variation-settings:'opsz' 24}
.pq .zh-q{font-family:'WK',var(--serif);font-size:17.5px;line-height:1.7;color:var(--ink2);margin-top:6px}
[data-lang=en] .pq .zh-q{display:none}[data-lang=zh] .pq .en-q{display:none}[data-lang=zh] .pq .zh-q{font-size:19px;color:var(--ink);margin-top:0}
.ylinks{gap:10px 26px}
.note.small{font-size:13.5px;margin-top:8px}
@media (max-width:1100px){.yx{grid-template-columns:1fr;gap:36px}}
@media (max-width:760px){.vposter{padding:20px 22px}.vt{font-size:22px;max-width:100%}.vt .zh{font-size:20px}.vplay{width:48px;height:48px;right:18px;bottom:18px}.vridge{bottom:14px;height:40px}.pq .en-q{font-size:18px}}
/* ---------- responsive ---------- */
@media (max-width:1100px){:root{--pad:48px}
  nav.top{flex-wrap:wrap;gap:12px 28px}nav.top .links{order:3;width:100%;margin-left:0;overflow-x:auto;padding-bottom:4px}
  nav.top .lang{margin-left:auto}
  svg.ridge{margin-top:2px}
  .areas,.trio,.courses,.notes,.sindex{grid-template-columns:1fr 1fr}
  .profiles{grid-template-columns:1fr 1fr}
  .bio{column-gap:48px}
}
@media (max-width:760px){:root{--pad:20px}
  body{font-size:17px}
  nav.top{padding-top:18px}.brand{font-size:19px}nav.top .links{gap:18px;font-size:14.5px}
  .hero{padding-top:44px;min-height:0}
  .cnname{font-size:22px}.role{font-size:19px;margin-top:24px}.intro{font-size:16.5px}
  .next{flex-wrap:wrap;white-space:normal;gap:10px 18px;padding:18px var(--pad);margin-top:48px}.next .h{width:100%}
  .next a{width:100%}
  .band{padding-top:72px}
  .areas,.trio,.courses,.notes,.sindex,.xgrid,.plats,.twocol,.profiles,.story,.pgrid{grid-template-columns:1fr}
  .yixi{grid-template-columns:1fr;gap:28px}
  .ytitle{font-size:27px}.ytitle .zh{font-size:24px}
  .bio{grid-template-columns:1fr;row-gap:36px}.ph{justify-self:center}
  .bio .lead{font-size:27px}.bio .lead .zh{font-size:24px}
  .ptitle{font-size:38px}.ptitle .zh{font-size:34px}.ptitle.paper{font-size:30px}
  .phead,.subsite .subhero{padding-top:44px}
  .rarea{grid-template-columns:1fr;padding-top:64px}.rarea .num{font-size:20px}
  .fund li{grid-template-columns:1fr}.fund .fy{grid-row:auto}
  .pyear,.tyear{grid-template-columns:1fr}.yr{margin-bottom:12px}
  .pub.hasx{grid-template-columns:1fr;gap:16px}
  .talklist li{grid-template-columns:1fr}.talklist .ty{grid-row:auto}
  .twocol .callout{margin-top:48px}
  .xfull{margin-left:0}.xhint{width:100%}
  .fgrid{grid-template-columns:1fr;gap:28px}.fbot{flex-direction:column}
  .mailbig{font-size:22px;word-break:break-all}
  .sechead{flex-wrap:wrap}
  .xplay{width:60px;height:60px;margin:-30px 0 0 -30px}
}
/* Hugo port: the EN/中 control is a link to the paired-language page */
a.lang:hover{text-decoration:none}a.lang:hover .l-zh,a.lang:hover .l-en{color:var(--acc)}