/* Diana résumé v15 — single stylesheet, token-driven */
:root{
 /* colour: 4 text tokens + surfaces */
 --bg:#f2ece3;--bg2:#e9e0d4;--ink:#231915;--ink2:#4a3b33;--ink3:#54453c;--acc:#834a28;
 --line:#2319151f;--fd:linear-gradient(90deg,transparent,var(--line) 12%,var(--line) 88%,transparent);
 /* type: rem, min .75rem = 12px */
 --serif:"Instrument Serif","Diana Serif SC","Songti SC","STSong","Noto Serif SC",serif;--cn:"Diana Serif SC","Songti SC","STSong","Noto Serif SC",serif;--sans:Inter,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
 --fs-1:.75rem;--fs-2:.875rem;--fs-3:1rem;--fs-4:1.25rem;--fs-5:1.5rem;--fs-6:clamp(1.5rem,1.1rem + 1.2vw,2.25rem);--fs-7:clamp(2.5rem,1.5rem + 3vw,4rem);--fs-8:min(clamp(3.5rem,2rem + 6vw,9rem),24vh);--fs-9:clamp(4.5rem,2rem + 10vw,12rem);
 --lh-1:1;--lh-2:1.2;--lh-3:1.5;--lh-4:1.75;--tr-1:.04em;--tr-2:.16em;
 /* space: 4/8 scale */
 --s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.5rem;--s6:2rem;--s7:3rem;--s8:4rem;--s9:6rem;
 /* motion: 3 durations, 2 easings */
 --d1:.2s;--d2:.45s;--d3:.9s;--e1:cubic-bezier(.2,.8,.2,1);--e2:cubic-bezier(.65,0,.35,1);
 --hit:2.75rem;--max:68rem;--gut:max(1.5rem,6vw)}
html.dk{--bg:#1d1512;--bg2:#271c17;--ink:#efe6db;--ink2:#d6c7ba;--ink3:#bdaa9b;--acc:#d39469;--line:#efe6db24}
.contact{--ink:#f2ece3;--ink2:#eadfd3;--ink3:#e3d4c6;--acc:#e8b48f;--line:#f2ece333}
*{box-sizing:border-box;margin:0;padding:0}html{overflow-x:clip;scroll-padding-top:5rem}html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-stopped{overflow:hidden}
body{background:var(--bg);color:var(--ink);font:400 var(--fs-3)/var(--lh-4) var(--sans);-webkit-font-smoothing:antialiased;transition:background-color var(--d3) var(--e1),color var(--d3) var(--e1)}
::selection{background:var(--acc);color:var(--bg)}a{color:inherit;text-decoration:none}em{font-family:var(--serif);font-style:italic;font-weight:400}
p,li{text-wrap:pretty;line-break:strict}h1,h2,h3,h4{text-wrap:balance;font-weight:400}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus{outline:none}:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:.25rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:var(--s4);top:var(--s4);z-index:200;display:inline-flex;align-items:center;min-height:var(--hit);padding:0 var(--s4);background:var(--ink);color:var(--bg);font-size:var(--fs-2);border-radius:.25rem;transform:translateY(-200%)}.skip:focus{transform:none}
.progress{position:fixed;left:0;top:0;height:2px;width:100%;background:var(--acc);transform-origin:0 50%;transform:scaleX(0);z-index:60}
#curtain{position:fixed;inset:0;z-index:100;background:#231915 url(/assets/art/contact.webp?v=25) center/cover;color:#f2ece3;display:flex;align-items:flex-end;justify-content:space-between;padding:5vw;pointer-events:none}
#curtain small{font-size:var(--fs-1);letter-spacing:.3em;text-transform:uppercase}#curtain small b{display:block;font:400 var(--fs-3)/var(--lh-3) var(--cn);letter-spacing:.3em;margin-bottom:var(--s2)}
#curtain .n{font:400 var(--fs-9)/var(--lh-1) var(--serif)}
/* header */
header{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:var(--s4);padding:var(--s3) max(var(--gut),calc((100vw - var(--max))/2));color:var(--ink);transition:color var(--d2) var(--e1)}
header:before{content:"";position:absolute;inset:0 0 calc(-1*var(--s5));z-index:-1;background:linear-gradient(var(--bg) 55%,transparent);transition:opacity var(--d2) var(--e1)}
header.lt{color:#f2ece3}header.lt:before{background:linear-gradient(#2a1912 50%,transparent)}
header .mark{font:italic 400 var(--fs-5)/var(--lh-1) var(--serif);display:inline-flex;align-items:center;min-height:var(--hit);padding-right:var(--s2)}
header nav{display:flex;gap:var(--s2);margin-left:auto}
header nav a,.thm,.mnb{display:inline-flex;align-items:center;gap:var(--s2);min-height:var(--hit);min-width:var(--hit);padding:0 var(--s2);font-size:var(--fs-1);line-height:var(--lh-1);letter-spacing:var(--tr-2);text-transform:uppercase}
header nav a{justify-content:center;transition:color var(--d1) var(--e1)}header nav a:hover{color:var(--acc)}header.lt nav a:hover{color:#e8b48f}
.thm i{width:.875rem;height:.875rem;border-radius:50%;background:linear-gradient(90deg,currentColor 50%,transparent 50%);border:1px solid currentColor;transition:transform var(--d3) var(--e1)}html.dk .thm i{background:linear-gradient(270deg,currentColor 50%,transparent 50%)}
.mnb{display:none;margin-left:auto}.mnb b{display:grid;gap:var(--s1);width:1.25rem}.mnb b:before,.mnb b:after{content:"";height:1px;background:currentColor;transition:transform var(--d2) var(--e1)}
header.open .mnb b:before{transform:translateY(.125rem)}header.open .mnb b:after{transform:translateY(-.125rem)}
@media(max-width:1100px){.mnb{display:inline-flex}
 header nav{position:absolute;top:100%;left:0;right:0;margin:0;flex-direction:column;gap:0;padding:var(--s2) var(--gut) var(--s5);background:var(--bg);visibility:hidden;opacity:0;transform:translateY(-.5rem);transition:opacity var(--d2) var(--e1),transform var(--d2) var(--e1),visibility 0s var(--d2)}
 header.lt nav{background:#2a1912}header nav a{justify-content:flex-start;font-size:var(--fs-2);border-bottom:1px solid var(--line)}
 header.open nav{visibility:visible;opacity:1;transform:none;transition-delay:0s}}
.petals{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
/* TOC: decorative duplicate of nav, wide screens only */
.toc{position:fixed;right:var(--s4);top:50%;transform:translateY(-50%);z-index:48;display:none;flex-direction:column}
@media(min-width:1280px){.toc{display:flex}}
.toc a{display:flex;align-items:center;justify-content:flex-end;gap:var(--s3);height:var(--hit);min-width:var(--hit);position:relative}
.toc a:after{content:"";width:.875rem;height:1px;background:var(--ink3);transition:width var(--d2) var(--e1),background-color var(--d2) var(--e1)}
.toc .tl{position:absolute;right:calc(100% + var(--s2));font-size:var(--fs-1);letter-spacing:var(--tr-2);text-transform:uppercase;color:var(--ink3);white-space:nowrap;opacity:0;transition:opacity var(--d2) var(--e1)}
.toc a.act:after{width:2rem;background:var(--acc)}.toc a:hover .tl{opacity:1}
@media(min-width:1600px){.toc a.act .tl{opacity:1}}
.toc.lt{--ink3:#e3d4c6;--acc:#e8b48f}
/* hero */
.hero{min-height:100svh;position:relative;display:grid;grid-template-columns:1fr 46vw;align-items:end;overflow:hidden}
.hero .bg{position:absolute;inset:0;background:url(/assets/art/hero-bg.avif?v=25) center/cover;opacity:.85;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.hero .bg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 8%,transparent 70%)}
html.dk .hero .bg{opacity:.25}
.htxt{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--s9) var(--s6) 14vh max(var(--gut),calc((100vw - var(--max))/2))}
.nmh{display:flex;flex-direction:column;align-items:center;font:400 var(--fs-8)/var(--lh-1) var(--cn);letter-spacing:.14em;text-indent:.14em}
.zh1 .hc,.en1 .hc{display:inline-block}
.en1{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s4);font:italic 400 var(--fs-6)/var(--lh-1) var(--serif);letter-spacing:var(--tr-1);color:var(--acc)}
.en1 .ln{width:clamp(2rem,4vw,4rem);height:1px;background:currentColor;opacity:.5}
.hero .role{font:400 var(--fs-6)/var(--lh-2) var(--serif);margin-top:var(--s6);padding-top:var(--s5);background:linear-gradient(90deg,transparent,var(--line),transparent) top/100% 1px no-repeat}
.hero .role em{color:var(--acc)}
.hero .meta{font-size:var(--fs-1);letter-spacing:var(--tr-2);color:var(--ink3);margin-top:var(--s3)}
.ph{position:relative;margin:0;height:100svh;z-index:1;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%);mask-image:linear-gradient(90deg,transparent,#000 22%)}
.ph picture,.ph img{display:block;width:100%;height:100%}.ph img{object-fit:cover;object-position:50% 30%}
@media(min-width:761px) and (max-height:620px){.htxt{padding-top:var(--s8);padding-bottom:var(--s6)}.ph{height:100%;min-height:100svh}}
@media(max-width:760px){.hero{display:flex;flex-direction:column}.ph{order:-1;height:62svh;min-height:15rem;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
 .htxt{width:100%;padding:var(--s5) var(--gut) var(--s8)}:root{--fs-8:min(17vw,7rem)}}
/* layout */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}@media(min-width:1240px){.wrap{padding:0}}
.sec{padding:var(--s9) 0 var(--s6)}
.sec+.sec{position:relative}.sec+.sec:before{content:"";position:absolute;top:0;left:50%;width:min(var(--max),88vw);height:1px;transform:translateX(-50%);background:var(--fd)}
.sh{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:var(--s2) var(--s5);padding-bottom:var(--s5);margin-bottom:var(--s2);position:relative}
.sh:after,.row:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--fd)}
.sh h2{font:400 var(--fs-7)/var(--lh-1) var(--serif);letter-spacing:-.02em}.sh h2 small{font:400 var(--fs-3)/var(--lh-1) var(--cn);letter-spacing:.4em;color:var(--ink3);margin-left:var(--s4);vertical-align:middle}
.ix{font-size:var(--fs-1);letter-spacing:var(--tr-2);color:var(--ink3);text-transform:uppercase;font-variant-numeric:tabular-nums}
.lm{overflow:hidden;display:block;padding-bottom:var(--s2);margin-bottom:calc(-1*var(--s2))}
.row{display:grid;grid-template-columns:11rem 1fr;gap:var(--s6);padding:var(--s6) 0;position:relative}
.row .k{font-size:var(--fs-1);line-height:var(--lh-4);letter-spacing:var(--tr-2);color:var(--ink3);text-transform:uppercase;padding-top:var(--s1);font-variant-numeric:tabular-nums}
.row h3{font:400 var(--fs-6)/var(--lh-2) var(--serif)}.row h3 .cn{font-family:var(--cn);font-size:var(--fs-5);letter-spacing:var(--tr-1)}
.row .r{font-size:var(--fs-2);color:var(--ink3);margin-top:var(--s1);letter-spacing:var(--tr-1)}
.row p{color:var(--ink2);margin-top:var(--s3);max-width:42em}
.dots{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s1) 0;margin-top:var(--s3);color:var(--ink2)}
.dots li:not(:last-child):after{content:"";display:inline-block;width:.25rem;height:.25rem;border-radius:50%;background:var(--acc);margin:0 var(--s3);vertical-align:middle}
@media(max-width:760px){.row{grid-template-columns:1fr;gap:var(--s2);padding:var(--s5) 0}}
/* profile */
.lead{font:400 var(--fs-6)/var(--lh-2) var(--serif);max-width:22em;margin:var(--s8) auto 0;text-align:center}
.lead .cn{display:block;font:400 var(--fs-4)/var(--lh-4) var(--cn);color:var(--ink2);letter-spacing:var(--tr-1)}
.kw{position:relative;background:linear-gradient(var(--acc),var(--acc)) 0 100%/100% 1px no-repeat;padding:0;color:var(--ink);transition:color var(--d1) var(--e1),background-size var(--d2) var(--e1)}.kw:hover,.kw:focus-visible{color:var(--acc);background-size:100% .125rem}
.facts{display:grid;grid-template-columns:repeat(4,1fr);margin-top:var(--s8);position:relative}
.facts:before,.facts:after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--fd)}.facts:before{top:0}.facts:after{bottom:0}
.facts div{padding:var(--s5) 0;text-align:center}.facts div+div{background:linear-gradient(var(--line),var(--line)) left 30%/1px 40% no-repeat}
.facts b{display:block;font:400 var(--fs-6)/var(--lh-2) var(--serif)}.facts span{font-size:var(--fs-1);letter-spacing:var(--tr-2);color:var(--ink3);text-transform:uppercase}
@media(max-width:760px){.facts{grid-template-columns:1fr 1fr}.facts div:nth-child(3){background:none}}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6);margin-top:var(--s8)}
.pillars>div{padding-top:var(--s5);position:relative}.pillars>div:before{content:"";position:absolute;top:0;left:0;width:2rem;height:1px;background:var(--acc)}
.pillars h4{font:400 var(--fs-5)/var(--lh-2) var(--serif)}.pillars h4 em{color:var(--acc);margin-right:var(--s2);font-size:var(--fs-4)}.pillars p{color:var(--ink2);margin-top:var(--s2);font-size:var(--fs-2);line-height:var(--lh-4)}
@media(max-width:760px){.pillars{grid-template-columns:1fr;gap:var(--s5)}}
.courses{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}.courses span{padding:var(--s1) var(--s3);font-size:var(--fs-1);line-height:var(--lh-3);border-radius:99px;color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent)}
/* experience: filter + timeline */
.flt{display:flex;gap:var(--s2);margin-top:var(--s5);flex-wrap:wrap}
.flt button{min-height:var(--hit);padding:0 var(--s4);font-size:var(--fs-2);letter-spacing:var(--tr-1);color:var(--ink2);border:1px solid var(--line);border-radius:99px;transition:border-color var(--d2) var(--e1),color var(--d2) var(--e1),background-color var(--d2) var(--e1)}
.flt button:hover{color:var(--ink)}.flt button[aria-pressed=true]{border-color:var(--acc);color:var(--ink);background:color-mix(in srgb,var(--acc) 8%,transparent)}
.tlx{margin:var(--s6) 0 var(--s4)}.tlh{display:flex;justify-content:space-between;align-items:baseline}.tlh .k{font-size:var(--fs-1);letter-spacing:var(--tr-2);color:var(--ink3);text-transform:uppercase}
.tlh output{font:400 var(--fs-5)/var(--lh-1) var(--serif);font-variant-numeric:tabular-nums}
.track{position:relative;height:var(--hit);margin-top:var(--s2);touch-action:pan-y}
.track .base{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--ink3);opacity:1}
.track .tk{position:absolute;top:50%;translate:0 -50%;width:1px;height:.75rem;background:var(--ink3);left:calc(var(--p)*1%)}
.track .tk b{position:absolute;top:var(--s4);left:50%;transform:translateX(-50%);font:400 var(--fs-1)/var(--lh-1) var(--sans);color:var(--ink2);font-variant-numeric:tabular-nums}
.seg.j{position:absolute;top:calc(50% - var(--s1));height:.375rem;border-radius:99px;left:calc(var(--a)*1%);width:calc((var(--b) - var(--a))*1%);background:color-mix(in srgb,var(--acc) 40%,var(--bg));transition:background-color var(--d2) var(--e1)}
.seg.j{top:calc(50% - var(--s2))}.seg.j.r2{top:calc(50% + var(--s1))}.seg.j.hit{background:var(--acc)}
.track input{position:absolute;inset:0;width:100%;opacity:0;cursor:grab;margin:0}
.knob{position:absolute;top:50%;left:0;width:1rem;height:1rem;translate:-50% -50%;border-radius:50%;background:var(--acc);box-shadow:0 0 0 .25rem var(--bg);pointer-events:none;transition:left var(--d1) var(--e1)}
.track:focus-within{outline:2px solid var(--acc);outline-offset:2px;border-radius:.25rem}
.tld{font-size:var(--fs-2);color:var(--ink2);min-height:1.75em;margin-top:var(--s5)}
/* experience rows */
.job{grid-template-columns:11rem 1fr clamp(13rem,24vw,20rem);isolation:isolate;align-items:start}
.job:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(16rem 12rem at var(--gx,70%) var(--gy,50%),color-mix(in srgb,var(--acc) 14%,transparent),transparent 70%);opacity:0;transition:opacity var(--d2) var(--e1)}
.job.on:before,.job.hl:before{opacity:1}
.job .fig{position:relative;margin:0;aspect-ratio:16/9;border-radius:.5rem;overflow:hidden;background:var(--bg2)}
.job .fig img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--d3) var(--e1),filter var(--d2) var(--e1)}
.job.on .fig img{transform:scale(1.04)}
.job .no{position:absolute;left:0;bottom:0;display:inline-flex;align-items:center;justify-content:center;min-width:var(--hit);min-height:var(--hit);padding:0 var(--s3);font:italic 400 var(--fs-5)/var(--lh-1) var(--serif);color:#f2ece3;background:#231915c7;border-radius:0 .5rem 0 0;transition:background-color var(--d2) var(--e1)}
.job .no[aria-pressed=true],.job.hl .no{background:var(--acc)}
.job .dimtag{display:none;margin-left:var(--s2);font-size:var(--fs-1);letter-spacing:var(--tr-1);color:var(--ink3)}
.job.dim h3,.job.dim .r,.job.dim .dots,.job.dim .k{color:var(--ink3)}.job.dim .fig img{filter:grayscale(1) contrast(.85)}.job.dim .dimtag{display:inline}
.job.flash:before{opacity:1}
@media(max-width:1000px){.job{grid-template-columns:9rem 1fr}.job .fig{grid-column:2;max-width:24rem}}
@media(max-width:760px){.job{grid-template-columns:1fr}.job .fig{grid-column:1;max-width:none}}
/* skills */
.skills{position:relative;isolation:isolate}.skills:after{content:"";position:absolute;inset:0;z-index:-1;background:url(/assets/art/skills.webp?v=25) center/cover;-webkit-mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent)}
html.dk .skills:after{opacity:.12}
.sk{display:grid;grid-template-columns:repeat(3,1fr);margin-top:var(--s4)}
.sk div{padding:var(--s5);border-radius:.5rem;background:color-mix(in srgb,var(--bg) 55%,transparent)}
.sk em{font-size:var(--fs-2);color:var(--acc)}.sk h4{font:400 var(--fs-5)/var(--lh-2) var(--serif);margin:var(--s1) 0 var(--s2)}.sk h4 small{font:400 var(--fs-1)/var(--lh-1) var(--cn);color:var(--ink3);letter-spacing:var(--tr-2);margin-left:var(--s2)}
.sk p{font-size:var(--fs-2);color:var(--ink2)}
@media(max-width:900px){.sk{grid-template-columns:1fr 1fr}}@media(max-width:600px){.sk{grid-template-columns:1fr}}
/* honors */
#edu .row,#honors .row{padding:var(--s5) 0}
.hon h3 .res{font:600 var(--fs-1)/var(--lh-3) var(--sans);letter-spacing:var(--tr-2);color:var(--acc);background:color-mix(in srgb,var(--acc) 6%,transparent);border-radius:99px;padding:var(--s1) var(--s3);margin-left:var(--s3);vertical-align:middle;text-transform:uppercase}
.talks{list-style:none;counter-reset:t;columns:2;column-gap:var(--s6)}.talks li{counter-increment:t;break-inside:avoid;padding:var(--s3) 0;display:flex;gap:var(--s4);font-size:var(--fs-2);color:var(--ink2);position:relative}
.talks li:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--fd)}
.talks .tn{font-family:var(--serif);font-style:italic;color:var(--acc);min-width:1.75em}
@media(max-width:760px){.talks{columns:1}}
/* contact */
.contact{position:relative;color:var(--ink);text-align:center;padding:var(--s9) var(--gut) var(--s5);background:linear-gradient(var(--bg),#5b3826 6rem,#3d2419);isolation:isolate}
.contact:before{content:"";position:absolute;inset:0;z-index:-1;background:url(/assets/art/contact.webp?v=25) center/cover;-webkit-mask-image:linear-gradient(transparent,#000 30%);mask-image:linear-gradient(transparent,#000 30%)}
html.dk .contact{background:linear-gradient(var(--bg),#3d2419 6rem,#2a1912)}
.contact .ix{color:var(--ink3)}
.contact h2{font:400 var(--fs-9)/var(--lh-1) var(--serif);margin:var(--s7) 0 var(--s6)}.contact h2 em{color:var(--acc)}
.ct{font-size:var(--fs-4);line-height:var(--lh-4)}.ct b{display:block;font:400 var(--fs-5)/var(--lh-3) var(--cn);letter-spacing:.2em;margin-bottom:var(--s2)}
.cl{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:var(--s2)}
.ct a{display:inline-flex;align-items:center;min-height:var(--hit);background:linear-gradient(var(--line),var(--line)) 0 80%/100% 1px no-repeat;transition:color var(--d1) var(--e1)}.ct a:hover{color:var(--acc)}
.cp{display:inline-flex;align-items:center;justify-content:center;min-height:var(--hit);min-width:var(--hit);padding:0 var(--s4);font-size:var(--fs-1);letter-spacing:var(--tr-2);color:var(--ink);background:#f2ece31f;border-radius:99px;transition:background-color var(--d1) var(--e1)}.cp:hover{background:#e8b48f40}
.foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--s2);max-width:var(--max);margin:var(--s8) auto 0;font-size:var(--fs-1);letter-spacing:var(--tr-2);text-transform:uppercase;color:var(--ink3)}
.foot a{display:inline-flex;align-items:center;min-height:var(--hit);padding:0 var(--s2)}.foot a:hover{color:var(--acc)}
/* toast */
.toast{position:fixed;left:50%;top:var(--s9);transform:translate(-50%,var(--s4));z-index:120;padding:var(--s3) var(--s5);border-radius:99px;background:#231915e0;backdrop-filter:blur(.75rem);color:#f2ece3;font-size:var(--fs-2);opacity:0;pointer-events:none;transition:opacity var(--d2) var(--e1),transform var(--d2) var(--e1)}
.toast.show{opacity:1;transform:translate(-50%,0)}
/* reveal + reduced motion */
.rv{opacity:0;transform:translateY(1.5rem)}
html.rm .rv,html.nojs .rv{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.petals{display:none}*{transition-duration:.01s!important}}
/* cursor + site-wide reveal (fine pointers) */
#bgr{position:fixed;inset:0;z-index:44;pointer-events:none;opacity:0;transition:opacity var(--d3) var(--e1);mix-blend-mode:multiply;-webkit-mask-image:radial-gradient(circle 17.5rem at var(--mx,-999px) var(--my,-999px),#000,rgba(0,0,0,.55) 45%,transparent);mask-image:radial-gradient(circle 17.5rem at var(--mx,-999px) var(--my,-999px),#000,rgba(0,0,0,.55) 45%,transparent)}
#bgr.on{opacity:.55}.dk #bgr{mix-blend-mode:screen}.dk #bgr.on{opacity:.3}
#bgr i{position:absolute;inset:-4%;background:center/cover no-repeat;opacity:0;transition:opacity var(--d3) var(--e1)}#bgr i.on{opacity:1}
#cd,#cr{position:fixed;left:0;top:0;z-index:130;pointer-events:none;border-radius:50%;mix-blend-mode:difference;opacity:0;transition:opacity var(--d2) var(--e1)}
#cd{width:.375rem;height:.375rem;translate:-50% -50%;background:#f2ece3}
#cr{width:2.25rem;height:2.25rem;translate:-50% -50%;border:1px solid #f2ece3b3;transition:opacity var(--d2) var(--e1),width var(--d2) var(--e1),height var(--d2) var(--e1),background-color var(--d2) var(--e1)}
.fc #cd,.fc #cr{opacity:1}.fc.cout #cd,.fc.cout #cr{opacity:0}
.fc.chov #cr{width:4rem;height:4rem;;background:#f2ece31f}.fc.chov #cd{opacity:0}.fc.cdown #cr{width:1.75rem;height:1.75rem;}
@media(hover:hover) and (pointer:fine){.fc,.fc *{cursor:none!important}}
@media(hover:none),(pointer:coarse){#cd,#cr,#bgr{display:none}}.rm #bgr{display:none}

/* v16 */
main,.contact{position:relative;z-index:1}
.kw:after{content:"";position:absolute;left:50%;top:50%;width:max(100%,var(--hit));height:var(--hit);translate:-50% -50%}
@media (hover:none),(pointer:coarse),(max-width:1100px){#cd,#cr,#bgr{display:none!important}}
@media (max-width:760px),(max-width:1100px) and (orientation:portrait){
 .hero{display:flex;flex-direction:column;align-items:center;min-height:auto;padding-top:var(--s9)}
 .ph{order:-1;width:min(72vw,22rem);height:auto;min-height:0;aspect-ratio:4/5;border-radius:1rem;overflow:hidden;-webkit-mask-image:none;mask-image:none;box-shadow:0 var(--s5) var(--s8) #2319151f}
 .htxt{width:100%;padding:var(--s6) var(--gut) var(--s8)}
}
.kw{display:inline-block;padding-block:var(--s2)}
@media (max-width:1100px) and (orientation:landscape) and (max-height:560px){:root{--fs-8:min(11vw,20vh)}.hero{display:grid;grid-template-columns:1fr 40vw;align-items:center;min-height:100svh;padding-top:0}.ph{order:0;width:auto;height:100svh;aspect-ratio:auto;border-radius:0;box-shadow:none}.htxt{width:auto;padding:var(--s8) var(--s5) var(--s5) var(--gut)}}
@media(max-width:760px){.job .fig{max-width:36rem}}
@media (max-height:560px){:root{--fs-9:clamp(3rem,16vh,4.5rem)}.contact h2{margin:var(--s5) 0 var(--s4)}}
#bgr{z-index:0}
.toc .tl{background:var(--bg);color:var(--ink2);padding:var(--s1) var(--s2);border-radius:var(--s1)}
.toc.lt .tl{background:#3d2419;color:#f2ece3}
#bgr.on{opacity:.24}.dk #bgr.on{opacity:.2}
/* v17 — per-section palette, morphed through registered colour properties */
@property --bg{syntax:"<color>";inherits:true;initial-value:#f2ece3}
@property --bg2{syntax:"<color>";inherits:true;initial-value:#e9e0d4}
@property --acc{syntax:"<color>";inherits:true;initial-value:#834a28}
@property --acc2{syntax:"<color>";inherits:true;initial-value:#be6837}
:root{--acc2:#be6837}
/* v25: the registered-colour morph restyles every element per frame; it runs only on desktop fine pointers. Tablet/phone switch the palette in one step while body background-color still crossfades (one element). */
@media (hover:hover) and (pointer:fine) and (min-width:1101px){:root{transition:--bg var(--d3) var(--e2),--bg2 var(--d3) var(--e2),--acc var(--d3) var(--e2),--acc2 var(--d3) var(--e2)}}
/* v19: one warm family (rose-clay-sand-ochre), distinct per section; acc>=4.5:1 text, acc2>=3:1 UI vs bg and bg2 */
html[data-pal=hero]{--bg:#f3ede8;--bg2:#ebe3db;--acc:#7e4925;--acc2:#ac6332}
html[data-pal=profile]{--bg:#f2e1dc;--bg2:#ecd4cd;--acc:#8c3d29;--acc2:#c25438}
html[data-pal=edu]{--bg:#f2ebd9;--bg2:#ede2c9;--acc:#6f4f20;--acc2:#986d2c}
html[data-pal=exp]{--bg:#ede2da;--bg2:#e6d7cc;--acc:#824526;--acc2:#b45f34}
html[data-pal=skills]{--bg:#f0e0dd;--bg2:#ead2cf;--acc:#96362c;--acc2:#c74d3f}
html[data-pal=honors]{--bg:#f4e9d9;--bg2:#f0e0c9;--acc:#774c22;--acc2:#a2692f}
html[data-pal=contact]{--bg:#edddd6;--bg2:#e7d1c8;--acc:#884128;--acc2:#ba5936}
html.dk{--acc2:#9b5e3b}
html.dk[data-pal=hero]{--bg:#1d1711;--bg2:#272018;--acc:#d39369;--acc2:#a5673e}
html.dk[data-pal=profile]{--bg:#211512;--bg2:#2c1d19;--acc:#d68571;--acc2:#b75c45}
html.dk[data-pal=edu]{--bg:#201b10;--bg2:#2b2417;--acc:#d3a969;--acc2:#9b753b}
html.dk[data-pal=exp]{--bg:#241b16;--bg2:#2f241e;--acc:#d38c69;--acc2:#aa6441}
html.dk[data-pal=skills]{--bg:#211412;--bg2:#2b1b1a;--acc:#d88279;--acc2:#bb574c}
html.dk[data-pal=honors]{--bg:#231b10;--bg2:#2e2417;--acc:#d39e69;--acc2:#9d6c3c}
html.dk[data-pal=contact]{--bg:#2f1d16;--bg2:#3a261d;--acc:#d4876b;--acc2:#b06043}
/* ambient aurora: slow translate and opacity drift only */
.aur{position:fixed;inset:-20%;z-index:0;pointer-events:none;opacity:.5;background:radial-gradient(40% 35% at 20% 30%,color-mix(in srgb,var(--acc2) 38%,transparent),transparent 70%),radial-gradient(35% 30% at 80% 70%,color-mix(in srgb,var(--acc) 16%,transparent),transparent 70%);animation:aur 28s var(--e2) infinite alternate}
html.dk .aur{opacity:.4}
@keyframes aur{to{translate:6% -4%;opacity:.32}}
.rm .aur{animation:none}
.progress{background:linear-gradient(90deg,var(--acc),var(--acc2))}
.sec h2{position:relative}
.sec .sh{position:relative}
.sec .sh:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,var(--acc),var(--acc2) 40%,transparent);transform-origin:0 50%;transform:scaleX(var(--ul,1))}
.job .fig img{transform-origin:50% 50%;will-change:transform}
.job .fig,.sk div{transition:translate var(--d2) var(--e1),box-shadow var(--d2) var(--e1)}
@media(hover:hover) and (pointer:fine){.job .fig:hover,.sk div:hover{translate:0 calc(var(--s1) * -1);box-shadow:0 var(--s3) var(--s6) calc(var(--s4) * -1) color-mix(in srgb,var(--acc) 45%,transparent)}}
.rm .job .fig,.rm .sk div{transition:none}
.kw:hover,.kw:focus-visible{background-image:linear-gradient(var(--acc2),var(--acc2))}
.job .fig .cap{position:absolute;right:0;bottom:0;max-width:70%;padding:var(--s1) var(--s3);font:400 var(--fs-1)/var(--lh-3) var(--cn);color:#f2ece3;background:#231915d9;border-radius:.5rem 0 0 0}
.cv main>section:not(#hero){content-visibility:auto;contain-intrinsic-size:auto 100vh}
.fig picture{display:contents}
/* v21: one lane per role so timeline bars never overlap */
.seg.j,.seg.j.r2{top:calc(50% - var(--s2) - var(--row) * var(--s2));height:.3rem}
.track{margin-top:var(--s6)}
@media (max-width:760px){.job .fig{max-width:22rem}}
/* v21: smaller name; hover / focus / tap crossfades 王宣懿 -> Diana with a soft horizontal mask (no movement) */
.nmh{font-size:var(--fs-7)}
.swap{display:grid;place-items:center;cursor:default;border-radius:var(--s2);outline-offset:var(--s2);min-height:var(--hit);-webkit-tap-highlight-color:transparent}
.swap>span{grid-area:1/1;transition:opacity var(--d3) var(--e1),clip-path var(--d3) var(--e1)}
.swap .en2{font:italic 400 var(--fs-7)/var(--lh-1) var(--serif);letter-spacing:.04em;text-indent:0;color:var(--acc);opacity:0;clip-path:inset(0 100% 0 0)}
.swap:hover .en2,.swap:focus-visible .en2,.swap.on .en2{opacity:1;clip-path:inset(0 0 0 0)}
.swap:hover .zh1,.swap:focus-visible .zh1,.swap.on .zh1{opacity:0;clip-path:inset(0 0 0 100%)}
.rm .swap>span{transition:opacity var(--d2) linear;clip-path:none}
/* ===== v21 interaction layer (fx.js). translate / opacity / clip-path / colour only ===== */
.fx main p:not(.role):not(.meta):not(.ct),.fx .r,.fx .talks li{clip-path:inset(0 0 100% 0);opacity:0;transition:clip-path var(--d3) var(--e1),opacity var(--d3) var(--e1);transition-delay:calc(var(--i,0) * 60ms)}
.fx main p:not(.role):not(.meta):not(.ct).in,.fx .r.in,.fx .talks li.in{clip-path:inset(0 0 -10% 0);opacity:1}
.fx .kw,.fx .res,.fx main p:not(.ct) em,.fx main p:not(.ct) b{background:linear-gradient(color-mix(in srgb,var(--acc) 10%,transparent),color-mix(in srgb,var(--acc) 10%,transparent)) no-repeat 0 88%/0% 40%;transition:background-size var(--d3) var(--e1) .15s}
.fx .kw.in,.fx .res.in,.fx main p:not(.ct) em.in,.fx main p:not(.ct) b.in{background-size:100% 40%}
.fx .fig{clip-path:inset(0 100% 0 0 round var(--s2));transition:clip-path 1.2s var(--e1)}
.fx .fig.in{clip-path:inset(0 0 0 0 round var(--s2))}
.fx .fig img{transition:filter var(--d2) var(--e1),translate var(--d3) var(--e1)}
.job:hover .fig img,.job:focus-within .fig img{filter:brightness(1.06) saturate(1.08)}
.fx .sh{position:relative}
.fx .sh::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--acc);clip-path:inset(0 100% 0 0);transition:clip-path 1.2s var(--e1)}
.fx .sh.in::after{clip-path:inset(0 0 0 0)}
.fx .track .seg.j{clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--e1),background-color var(--d2) var(--e1);transition-delay:calc(var(--row) * 120ms)}
.fx .track.in .seg.j{clip-path:inset(0 0 0 0)}
.fx .hon,.fx .sk>div{opacity:0;translate:0 var(--s5);transition:opacity var(--d3) var(--e1),translate var(--d3) var(--e1),background-color var(--d2) var(--e1);transition-delay:calc(var(--i,0) * 80ms)}
.fx .hon.in,.fx .sk>div.in{opacity:1;translate:none}
.sk>div{border-radius:var(--s2);cursor:pointer;outline-offset:var(--s1)}
.sk>div:hover,.sk>div:focus-visible,.sk>div.open{background:color-mix(in srgb,var(--acc) 7%,transparent)}
@media (pointer:fine){.fx .sk>div p{clip-path:inset(0 0 0 0);opacity:.92;transition:opacity var(--d2) var(--e1)}.fx .sk>div:hover p,.fx .sk>div.open p,.fx .sk>div:focus-visible p{opacity:1}}
.fx .sk>div h4{transition:color var(--d2) var(--e1)}.sk>div:hover h4,.sk>div.open h4{color:var(--acc)}
.ring{position:fixed;right:var(--s5);bottom:var(--s5);z-index:40;width:var(--hit);height:var(--hit);padding:0;border:0;border-radius:50%;background:color-mix(in srgb,var(--bg) 80%,transparent);cursor:pointer;opacity:0;visibility:hidden;transition:opacity var(--d2) var(--e1),visibility var(--d2) var(--e1)}
.ring.on{opacity:1;visibility:visible}
.ring svg{width:100%;height:100%;display:block}.ring circle{fill:none;stroke-width:2}.ring .r0{stroke:color-mix(in srgb,var(--ink3) 40%,transparent)}.ring .r1{stroke:var(--acc);stroke-dasharray:100;stroke-dashoffset:var(--p,100)}
.kb{position:fixed;left:var(--s5);bottom:var(--s5);z-index:40;width:var(--hit);height:var(--hit);border-radius:50%;border:1px solid color-mix(in srgb,var(--ink3) 50%,transparent);background:color-mix(in srgb,var(--bg) 80%,transparent);color:var(--ink);font:500 var(--fs-1)/var(--lh-1) var(--sans);cursor:pointer}
@media (pointer:coarse){.kb{display:none}}
.hint{position:fixed;left:var(--s5);bottom:calc(var(--hit) + var(--s6));z-index:41;display:grid;gap:var(--s2);padding:var(--s4) var(--s5);border-radius:var(--s3);background:var(--bg);color:var(--ink);box-shadow:0 1rem 3rem color-mix(in srgb,var(--ink) 14%,transparent);font:400 var(--fs-1)/var(--lh-2) var(--sans);opacity:0;visibility:hidden;translate:0 var(--s3);transition:opacity var(--d2) var(--e1),translate var(--d2) var(--e1),visibility var(--d2) var(--e1)}
.hint.show{opacity:1;visibility:visible;translate:none}
.hint kbd{display:inline-block;min-width:1.5em;padding:0 var(--s1);border:1px solid var(--ink3);border-radius:var(--s1);text-align:center;font:500 var(--fs-1)/var(--lh-2) var(--sans)}
.pill{position:fixed;left:50%;top:calc(var(--hit) * 2 + var(--s4));z-index:39;translate:-50% calc(var(--s3) * -1);padding:var(--s1) var(--s4);border-radius:99rem;background:var(--ink);color:var(--bg);font:500 var(--fs-1)/var(--lh-2) var(--sans);letter-spacing:.12em;text-transform:uppercase;opacity:0;pointer-events:none;transition:opacity var(--d2) var(--e1),translate var(--d2) var(--e1)}
.pill.show{opacity:1;translate:-50% 0;transition:translate var(--d2) var(--e1)}
.scrolled header{box-shadow:0 1px 0 color-mix(in srgb,var(--ink3) 30%,transparent)}
header{transition:box-shadow var(--d2) var(--e1)}
header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:radial-gradient(30% 100% at var(--hx,50%) 50%,var(--acc),transparent);opacity:0;transition:opacity var(--d2) var(--e1)}
.ptr header::after{opacity:.7}
.cp{transition:color var(--d2) var(--e1),background-color var(--d2) var(--e1)}
.cp.done{color:var(--bg);background:var(--acc)}
.cp:active,.thm:active,.ring:active{opacity:.7}
.mag{transition:translate var(--d2) var(--e1)}
main a:not(.cp){background:linear-gradient(currentColor,currentColor) no-repeat 100% 100%/0% .08em;transition:background-size var(--d2) var(--e1)}
main a:not(.cp):hover,main a:not(.cp):focus-visible{background-position:0 100%;background-size:100% .08em}
.jd{position:absolute;z-index:2;visibility:hidden;left:0;right:0;top:0;display:grid;gap:var(--s1);padding:var(--s3) var(--s4);background:rgba(20,12,8,.82);color:#fff;font:400 var(--fs-1)/var(--lh-2) var(--sans);clip-path:inset(0 0 100% 0);transition:clip-path var(--d2) var(--e1),visibility var(--d2) var(--e1);pointer-events:none}
.jd b{font:400 var(--fs-2)/var(--lh-1) var(--cn)}
.fig{position:relative}
@media(hover:hover) and (pointer:fine){.job:hover .jd,.job:focus-within .jd{clip-path:inset(0 0 0 0);visibility:visible}}
.ring.end{visibility:hidden;opacity:0}
.fx main>section:not(.contact){background-image:radial-gradient(40rem circle at var(--mx,-50rem) var(--my,-50rem),color-mix(in srgb,var(--acc) 3%,transparent),transparent 70%)}
.fx .row{background-image:radial-gradient(18rem 100% at var(--rx,-30rem) 50%,color-mix(in srgb,var(--acc) 3%,transparent),transparent)}
.ph{cursor:grab}.ph.grab{cursor:grabbing}.ph img{transition:translate var(--d3) var(--e1)}
.rm .fx *,.rm.fx *{transition-duration:.01s!important}
.rm.fx main p,.rm.fx .r,.rm.fx .talks li,.rm.fx .hon,.rm.fx .sk>div,.rm.fx .fig,.rm.fx .seg.j{clip-path:none;opacity:1;translate:none}

.foot{padding-bottom:calc(var(--hit) + var(--s6))}
@media(max-width:760px){.pill{display:none}}
.contact-on .pill{visibility:hidden}

@media(max-width:760px){.hero .bg{background-image:url(/assets/art/hero-bg-800.avif?v=25)}}