:root{--bg:#F7F6F2;--ink:#111;--ink-2:#5C5A55;--line:#D4D1C8;--ghost:#E4E1D8;--on-ink:#fff;--focus:#111;--chip-line:#8A877F;--ease:cubic-bezier(.2,.7,.2,1);
--serif:"Instrument Serif","Noto Serif SC","Songti SC",serif;--mono:"JetBrains Mono","Noto Sans SC",monospace;--pad:40px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--serif);font-synthesis:none;font-kerning:normal;font-feature-settings:"kern" 1,"liga" 1;text-rendering:optimizeLegibility}
html:not([lang=zh-CN]) .zh{display:none!important}html[lang=zh-CN] .en{display:none!important}
::selection,mark{background:var(--ink);color:var(--on-ink)}
a{color:inherit}a:focus-visible,button:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
img{display:block;max-width:100%;height:auto}button{font:inherit;color:inherit}
.m{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--on-ink);padding:8px 12px;z-index:99}.skip:focus{left:8px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ink);margin-right:8px;vertical-align:1px}
/* nav */
.nav{position:sticky;top:0;z-index:40;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:20px var(--pad);background:rgba(247,246,242,.92);backdrop-filter:blur(8px);color:var(--ink-2)}
.nav a{text-decoration:none}.nav a:hover{color:var(--ink)}.nl a{color:var(--ink)}.nc{text-align:center;white-space:nowrap}
.nr{display:flex;justify-content:flex-end;align-items:center;gap:20px;white-space:nowrap}
.lang{background:none;border:1px solid var(--ink);color:var(--ink);padding:5px 10px;cursor:pointer;font:12px var(--mono);letter-spacing:.08em}.lang:hover{background:var(--ink);color:var(--bg)}
.menu{display:none;background:none;border:0;cursor:pointer;font:12px var(--mono);letter-spacing:.16em;color:var(--ink);padding:12px 0}
.overlay{position:fixed;inset:64px 0 0;z-index:39;background:var(--bg);padding:40px 20px;display:flex;flex-direction:column;gap:16px}.overlay[hidden]{display:none}
.overlay a{font:400 56px/1.1 var(--serif);text-decoration:none}
/* hero */
.hero{position:relative;padding:44px var(--pad) 0}
.cnt{position:absolute;right:var(--pad);top:40px;font:400 220px/1 Anton,var(--serif);color:var(--ghost);user-select:none;pointer-events:none}
.slate{color:var(--ink-2)}
.disp{position:relative;font-weight:400;font-size:104px;line-height:1.12;letter-spacing:-.022em;margin:14px 0 28px}
.disp .l2{display:block;margin-top:0;font-style:italic;color:var(--ink-2);letter-spacing:-.012em}
html[lang=zh-CN] .disp{font-family:"Noto Serif SC",serif;font-weight:600;font-size:81px;line-height:1.18;letter-spacing:.02em}
html[lang=zh-CN] .disp .l2{font-style:normal;font-weight:400;letter-spacing:.02em}
.intro{max-width:760px;margin:0 0 26px}.intro p{margin:0}
.intro .en{font-size:19px;line-height:1.5;letter-spacing:.003em}
.intro .zh{font-family:"Noto Serif SC",serif;font-size:18px;line-height:1.8;letter-spacing:.04em;font-feature-settings:"palt" 0}
.intro a,dd a,.email{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}.intro a:hover,dd a:hover,.email:hover{text-decoration-thickness:2px}
/* works */
.works{position:relative;padding:0 var(--pad)}
.filter{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:14px 0;border-top:1px solid var(--ink)}
.chip{background:none;border:1px solid var(--chip-line);padding:6px 10px;cursor:pointer;font-size:11px;color:var(--ink-2)}.chip:not([aria-pressed=true]):hover{border-color:var(--ink);color:var(--ink)}.chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.count{margin-left:auto;color:var(--ink-2)}
.list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.row{border-bottom:1px solid var(--line)}.row[hidden]{display:none}
.row a{display:grid;grid-template-columns:64px 1fr 380px;align-items:baseline;min-height:56px;padding:8px 0;text-decoration:none}
.idx{color:var(--ink-2)}.row:first-child .idx{color:var(--ink);font-weight:700}
.tt{font-size:42px;line-height:1.1;transition:color .25s}html[lang=zh-CN] .tt{font-family:"Noto Serif SC",serif;font-size:34px;line-height:1.3}
.meta{color:var(--ink-2);text-align:right;font-size:11px}
.inl{display:none}
.preview{position:fixed;left:0;top:0;width:640px;aspect-ratio:16/9;pointer-events:none;opacity:0;transition:opacity .25s var(--ease),transform .15s linear;z-index:20;background:#E4E1D8;border:1px solid #8A877F}
.preview img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .15s}.preview img.ok{opacity:1}.preview.on{opacity:1}
@media (hover:hover) and (pointer:fine){
 .list.hovering .row .tt{color:var(--ink-2)}.list.hovering .row.act .tt{color:var(--ink);font-style:italic}
 html[lang=zh-CN] .list.hovering .row.act .tt{font-style:normal}}
/* credits */
.credits{text-align:center;padding:128px var(--pad) 96px;max-width:820px;margin:0 auto}
.credits .m{color:var(--ink-2);margin:0}
.cname{font-weight:400;font-size:96px;line-height:1;margin:12px 0 28px}.cname i{font-style:italic}
.arrow{font-size:40px;line-height:1;margin:16px 0}
.bio{font-size:20px;line-height:1.45;margin:32px 0 16px}html[lang=zh-CN] .bio{font-family:"Noto Serif SC",serif;font-size:18px;line-height:1.75}
.roll{margin-top:24px!important}
.contact{margin-top:72px}.contact p{margin:8px 0}
.email{font-size:34px}
.copy,.wx{background:none;border:1px solid var(--line);padding:5px 9px;cursor:pointer;color:var(--ink-2);vertical-align:middle}
.wx{border:0;border-bottom:1px solid var(--ink-2);padding:6px 0;color:var(--ink)}
.qr{display:flex;justify-content:center;margin-top:16px}.qr[hidden]{display:none}.qr img{width:200px;border-radius:8px}
.foot{display:flex;justify-content:space-between;padding:24px var(--pad);border-top:1px solid var(--ink);color:var(--ink-2)}.foot a{text-decoration:none}
/* detail */
.detail{padding:8px var(--pad) 64px}.dslate{display:flex;justify-content:space-between;color:var(--ink-2)}
.wtitle{font-weight:400;font-size:clamp(56px,9.4vw,120px);line-height:.95;letter-spacing:-.02em;margin:8px 0 24px}html[lang=zh-CN] .wtitle{font-family:"Noto Serif SC",serif;font-weight:600;font-size:clamp(40px,6.5vw,88px);line-height:1.15;letter-spacing:.01em}
.dgrid{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start}
.player{position:relative;aspect-ratio:16/9;background:#111;overflow:hidden}.player img,.player iframe{width:100%;height:100%;object-fit:cover;border:0}
.plabel{position:absolute;left:24px;bottom:24px;background:var(--bg);color:var(--ink);border:0;padding:12px 18px;cursor:pointer}.player.off img{filter:grayscale(.4) brightness(.8)}.player.off .plabel{cursor:default}
.vtoggle{position:absolute;top:12px;right:12px;display:flex;gap:4px}.vtoggle button{background:var(--bg);border:0;padding:6px 10px;cursor:pointer;font:11px var(--mono)}
aside dl{margin:0;border-top:1px solid var(--ink)}dt{color:var(--ink-2);margin-top:16px;font-size:11px}dd{margin:4px 0 0;font-size:22px;line-height:1.25}dd a{color:var(--ink)}
.story{font-size:18px;line-height:1.45;margin-top:32px;border-top:1px solid var(--line);padding-top:8px}.story h3{font-weight:400;font-style:italic;font-size:24px;margin:20px 0 6px}.story ul{padding-left:18px}
.nextcard{display:block;margin-top:96px;padding-top:24px;border-top:1px solid var(--ink);text-decoration:none}.nextcard .m{color:var(--ink-2)}
.ntitle{display:block;font-size:clamp(48px,7vw,96px);line-height:1;margin-top:8px}.nextcard:hover .ntitle{font-style:italic}
/* reveal */
.rv{opacity:0;transform:translateY(24px)}.rv.in{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
/* responsive */
@media(max-width:1199px){.row a{grid-template-columns:56px 1fr 300px}.cnt{font-size:180px}}
@media(max-width:899px){:root{--pad:24px}.cnt{display:none}.disp{font-size:clamp(64px,9vw,88px);letter-spacing:-.02em;margin:12px 0 24px}
 .nc{display:none}.nav{grid-template-columns:1fr auto}.links{display:none}.menu{display:block}
 .dgrid{grid-template-columns:1fr}.row a{grid-template-columns:48px 1fr}.meta{grid-column:2;text-align:left;margin-top:2px}}
@media(max-width:639px){:root{--pad:20px}
 .disp{font-size:54px;letter-spacing:-.018em;margin:12px 0 22px}.disp .l2{letter-spacing:-.01em}html[lang=zh-CN] .disp{font-size:42px}
 .intro{margin-bottom:22px}.intro .en{font-size:17px}.intro .zh{font-size:15px;letter-spacing:.03em}
 .tt{font-size:30px}html[lang=zh-CN] .tt{font-size:26px}
 .inl{display:block;grid-column:1/-1;height:0;overflow:hidden;transition:height .2s var(--ease)}.row.act .inl{height:calc((100vw - 40px)*9/16 + 12px);padding-top:12px}
 .row.act .idx{color:var(--ink);font-weight:700}.row:first-child:not(.act) .idx{color:var(--ink-2);font-weight:400}
 .cname{font-size:56px}.email{font-size:24px}.credits{padding-top:96px}}
@media (prefers-reduced-motion:reduce){*{transition-duration:.12s!important;animation:none!important}.rv{transform:none}.inl{transition:none}}
/* fold tuning */
.hero{padding-top:32px}.filter{padding:10px 0}.chip{padding:5px 9px}
@media(max-width:639px){.filter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:10px 20px}.filter::-webkit-scrollbar{display:none}.chip{flex:none}.count{display:none}
 .slate{font-size:10px;letter-spacing:.12em}.hero{padding-top:20px}}
.copy{margin-left:10px}
@media(min-width:900px){.meta{white-space:nowrap}}
@media(min-width:900px){.row a{grid-template-columns:64px 1fr auto}.meta{padding-left:24px}}

.roll .nw{white-space:nowrap}
@media (max-width:640px){.roll .nw{display:block}.roll .nw+.nw{margin-top:.35em}}
/* ===== v2.5 credits sheet / overlay ===== */
html{scrollbar-gutter:stable}
.nr .links a{padding-bottom:2px}.nr .links a:hover,.nr .links a:focus-visible,.nr .links a[aria-expanded=true]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.4em;color:var(--ink)}
.credits-sheet{padding:96px var(--pad) 64px;border-top:1px solid var(--ink)}
.cbar{display:flex;justify-content:space-between;align-items:center;color:var(--ink)}
.no-js .cbar .close,.cbar .close{display:none}
.cbody{max-width:1440px;margin:0 auto}
.ctitle{text-align:center;padding:12px 0 18px}.ctitle .m{color:var(--ink-2);font-size:11px;margin:0}
#credits-title{font-weight:400;font-size:84px;line-height:1.05;margin:4px 0 8px;outline:none}#credits-title i{font-style:italic}
.ctable{margin:0;border-top:1px solid var(--ink)}
.crow{display:grid;grid-template-columns:260px 1fr;gap:32px;padding:11px 0;border-bottom:1px solid var(--line);scroll-margin-top:72px}
.crow dt{color:var(--ink-2);font-size:11px;padding-top:6px}.crow dd{margin:0}.crow p{margin:0}
.cprim{font-size:20px;line-height:1.35}.csec{font-size:17px;line-height:1.4;color:var(--ink-2);margin-top:2px!important}
.cmeta{font-size:11px;letter-spacing:.12em;color:var(--ink-2);margin:4px 0 2px!important}
.crow a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}.crow a:hover{text-decoration-thickness:2px}
html[lang=zh-CN] .cprim{font-family:"Noto Serif SC",serif;font-size:17px;line-height:1.7}html[lang=zh-CN] .csec{font-family:"Noto Serif SC",serif;font-size:15px;line-height:1.7}
.crow .email{font-size:inherit}.crow .wx{border:0;border-bottom:1px solid var(--ink-2);padding:2px 0;background:none;cursor:pointer;font:inherit;color:var(--ink-2)}
.credits-sheet .roll{text-align:center;color:var(--ink-2);margin:40px 0 0}
.fin{text-align:center;font-size:34px;margin:24px 0 8px}html[lang=zh-CN] .fin{font-family:"Noto Serif SC",serif;font-size:26px}
.qr{justify-content:flex-start}
/* overlay mode (JS) */
.credits-sheet.ov{position:fixed;inset:0;z-index:60;padding:0;border:0;overflow-y:auto;overscroll-behavior:contain;background:var(--bg)}
@supports ((backdrop-filter:blur(6px)) or (-webkit-backdrop-filter:blur(6px))){.credits-sheet.ov{background:rgba(247,246,242,.95);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}}
.credits-sheet.ov[hidden]{display:none}
.ov .cbar{position:sticky;top:0;z-index:2;height:52px;padding:0 var(--pad);background:var(--bg);border-bottom:1px solid var(--ink)}
.ov .cbar .close{display:inline-block;background:none;border:1px solid var(--ink);color:var(--ink);padding:7px 12px;cursor:pointer;font-size:11px;letter-spacing:.12em;position:relative}
.ov .cbar .close::after{content:"";position:absolute;inset:-6px}
.ov .cbody{padding:16px var(--pad) 64px}.ov .crow{scroll-margin-top:60px}
.ov{opacity:0;transition:opacity .2s var(--ease)}.ov.open{opacity:1}.ov.closing{opacity:0;transition-duration:.15s}
.ov .cbody>*{transform:translateY(24px);transition:transform .4s var(--ease)}.ov.open .cbody>*{transform:none}
.ov .crow{opacity:0;transform:translateY(12px);transition:opacity .4s var(--ease),transform .4s var(--ease);transition-delay:calc(var(--k,0)*40ms)}.ov.open .crow{opacity:1;transform:none}
.ov.instant,.ov.instant *{transition:none!important}
@media (prefers-reduced-motion:reduce){.ov .cbody>*,.ov .crow{transform:none!important;transition-delay:0s!important}.ov{transition-duration:.12s}}
/* mobile menu v2.5 */
.overlay{gap:0}.mlinks{border-top:1px solid var(--ink)}
.mlinks a{display:flex;justify-content:space-between;align-items:baseline;font:400 46px/1.15 var(--serif);padding:12px 0;border-bottom:1px solid var(--line)}
html[lang=zh-CN] .mlinks a{font-family:"Noto Serif SC",serif;font-size:36px}.mlinks i{font-style:normal;color:var(--ink-2);font-size:12px}
.overlay a{font-size:46px}
.seg{display:inline-flex;margin-top:32px;border:1px solid var(--ink);align-self:flex-start}.seg button{background:none;border:0;padding:12px 18px;cursor:pointer;font:12px var(--mono);letter-spacing:.12em;min-height:44px}
html:not([lang=zh-CN]) .seg [data-lang=en],html[lang=zh-CN] .seg [data-lang=zh]{background:var(--ink);color:var(--on-ink)}
@media(max-width:639px){.crow{grid-template-columns:1fr;gap:4px;padding:12px 0}.crow dt{padding-top:0}
 #credits-title{font-size:52px}.csub{font-size:10px!important;letter-spacing:.1em!important;white-space:nowrap}
 .cprim{font-size:17px}html[lang=zh-CN] .cprim{font-size:15.5px}.ov .cbar{height:46px}}
.crow dt{margin:0;padding-top:5px}@media(max-width:639px){.crow dt{padding-top:0}}
.crow dt{line-height:20px;padding-top:3px}.cmeta{line-height:18px}
/* ===== audit fixes (SKILL_AUDIT.md) ===== */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
html{-webkit-tap-highlight-color:rgba(17,17,17,.08)}
a,button,.chip,.row a{touch-action:manipulation}
.chip:active{background:var(--ink);color:var(--on-ink)}
.menu .mc{display:none}.menu[aria-expanded=true] .mo{display:none}.menu[aria-expanded=true] .mc{display:inline}
/* desktop nav hit areas ≥24px */
.nr .links a,.foot a{display:inline-block;padding:6px 0;margin:-6px 0}
/* coarse pointers: 44px hit areas without visual change */
@media (pointer:coarse){
 .chip,.copy,.wx,.intro a,.crow a,.foot a,.links a,.nl a,.pn,.dd a,dd a,.close,.lang{position:relative}
 .chip::after,.copy::after,.wx::after,.intro a::after,.crow a::after,.foot a::after,.nl a::after,dd a::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:44px;transform:translateY(-50%);min-width:44px}
 .menu,.lang{min-height:44px}
}
/* mobile small text ≥12px + one language toggle */
@media(max-width:639px){
 .meta,.slate,.chip,.count,.cmeta,.crow dt,.ctitle .m,dt,.foot{font-size:12px!important}
 .csub{font-size:11px!important;letter-spacing:.06em!important;white-space:normal!important}
 .filter{scroll-snap-type:x proximity;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);scroll-padding:0 20px}
 .filter.end{-webkit-mask-image:none;mask-image:none}
 .chip{scroll-snap-align:start}
}
/* hover preview: hide other rows' meta while previewing so nothing is overdrawn */
@media (hover:hover) and (pointer:fine){.list .meta{transition:opacity .2s var(--ease)}.list.hovering .meta{opacity:0}}
.inl img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}.qr img{height:auto}

.slate .date{white-space:nowrap}
@media (max-width:640px){.slate .date{display:block;margin-top:.35em}}

/* header lang always visible; 44px tap */
.nr{display:flex;align-items:center;gap:8px;justify-self:end}
.lang{min-height:44px;min-width:44px;padding:10px 12px;display:inline-flex;align-items:center;justify-content:center}
@media(max-width:899px){.nr .lang{display:inline-flex}}