:root{
  --fs:15px; --lh:1.38;
  --sans:Georgia,"Times New Roman",Times,"Songti SC","STSong","Noto Serif CJK SC","Source Han Serif SC",SimSun,serif;
  --pg:#fff; --tx:#000; --dim:#8a8a8a; --hair:#000;
  --linkwork:#6f3fd4;   /* 作品之间互相跳转的链接：鲜艳灰紫 + 加粗，提示可点击 */
  --gut-desktop:30px;
  --gut:var(--gut-desktop,30px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--pg);color:var(--tx);font:400 var(--fs)/var(--lh) var(--sans);
  letter-spacing:.005em;-webkit-font-smoothing:antialiased}
/* 中文一律偏粗宋体；拉丁与数字保持 Georgia 常规 */
[lang="zh"]{font-weight:600}
a{color:inherit;text-decoration:none}
a:hover{opacity:.55}
img{display:block;width:100%;height:auto}

/* language switch: default EN, html[data-lang] flips */
[lang="zh"]{display:none}
html[data-lang="zh"] [lang="zh"]{display:revert}
html[data-lang="zh"] [lang="en"]{display:none}

/* ---------- nav ---------- */
.nav{display:grid;grid-template-columns:repeat(4,1fr);gap:0 var(--gut);
  padding:var(--gut) var(--gut) 24px}
.nav3{grid-template-columns:1fr 2fr 1fr}
.nav .col{display:flex;flex-direction:column}
.nav .col:last-child{align-items:flex-end;text-align:right}
.nav a[aria-current]{opacity:.45}
#lang{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;letter-spacing:inherit}
#lang:hover{opacity:.55}

/* ---------- index: horizontal scrolling bands ---------- */
body.home{overflow-x:hidden}
.bands{padding:8px var(--gut) 40px;min-height:calc(100vh - 230px);
  display:flex;flex-direction:column;justify-content:center}
.band{--h:240px;overflow:hidden;padding-top:20px;margin-bottom:26px}
.track{display:flex;align-items:flex-start;gap:12px;width:max-content;
  animation:marq var(--dur,70s) linear infinite}
.band.rev .track{animation-direction:reverse}
.track .dup{display:contents}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.band:hover .track,.band:focus-within .track{animation-play-state:paused}
.it{position:relative;flex:0 0 auto;height:var(--h);display:block}
.it img{height:100%;width:auto;display:block;background:#eee}
.it .cap{position:absolute;left:0;bottom:calc(100% + 4px);white-space:nowrap;
  opacity:0;transition:opacity .12s;pointer-events:none}
.it:hover .cap,.it:focus-visible .cap{opacity:1}
.it .y{color:var(--dim)}
.it:hover{opacity:1}
.it:hover img{opacity:.82}
@media(prefers-reduced-motion:reduce){.track{animation:none}}

/* ---------- work page (dark) ---------- */
body.work{--pg:#fff;--tx:#000;--dim:#8a8a8a;--hair:#ddd;--linkwork:#6f3fd4}
body.work .nav{padding-bottom:14px;border-bottom:1px solid var(--hair);margin-bottom:22px}
@media(max-width:700px){body.work .nav{margin-bottom:16px}}
.work-title{padding:0 var(--gut) 24px;font-size:calc(var(--fs) * var(--sc-title,1.7));line-height:1.25}
.media{margin:0 0 24px}
.media figure{margin:0}
.media .frame{position:relative;padding-bottom:56.25%;height:0;background:#000}
.media iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.media .cap{padding:4px var(--gut) 0;color:var(--dim)}
/* 作品简介：宽度为原先的 60%（46em → 27.6em）
   中文用偏粗的宋体，英文用接近 NYTimes 正文的过渡型衬线（Georgia 是各平台都有的近似字体） */
.txt{padding:0 var(--gut);margin:0 0 28px;max-width:34.5em}
.txt p{margin:0 0 1em}
.txt p:last-child{margin:0}
/* 两端对齐，右边缘也齐；英文开启断词避免出现过宽的词间空隙 */
.txt p{font-size:calc(var(--fs) * var(--sc-body,1.05));text-align:justify;text-justify:inter-character}
.txt p[lang="en"]{hyphens:auto;-webkit-hyphens:auto}
.txt p[lang="en"]{line-height:1.52;letter-spacing:0;hyphens:auto;-webkit-hyphens:auto}
.txt p[lang="zh"]{line-height:1.85;letter-spacing:.01em}
.facts{padding:0 var(--gut);margin:0 0 24px;color:var(--dim);
  font-size:calc(var(--fs) * var(--sc-meta,.85))}
.facts div{max-width:46em}
/* 中文那一层 [lang="zh"] 本身带 600，这里必须一并覆盖才能真正加粗 */
.facts a,.facts a [lang]{color:var(--linkwork);font-weight:700}
.facts a{border-bottom:1px solid transparent}
.facts a:hover{opacity:1;border-bottom-color:var(--linkwork)}
.credits{padding:0 var(--gut);margin:0 0 40px;color:var(--dim);max-width:46em;
  font-size:calc(var(--fs) * var(--sc-meta,.85))}
.todo{padding:0 var(--gut);margin:0 0 24px;color:#d08b7a}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);
  padding:24px var(--gut) 40px;border-top:1px solid var(--hair);margin-top:24px}
.pager .r{text-align:right}
.pager .x{color:var(--dim)}

/* ---------- gallery (work page) ---------- */
.gal{margin:0 0 28px}
.stage{position:relative;height:72vh;min-height:320px;display:flex;
  align-items:center;justify-content:center;padding:0 var(--gut)}
.stage .sl{display:none;max-height:100%;max-width:60vw;width:auto;height:auto}
.stage .sl.on{display:block}
/* 左右各占一半，画面任意位置点击即可翻页 */
.zone{position:absolute;top:0;bottom:0;width:50%;background:none;border:0;padding:0;
  cursor:pointer;opacity:0}
.zone.prev{left:0;cursor:w-resize}
.zone.next{right:0;cursor:e-resize}
.galbar{display:flex;gap:1.2em;padding:8px var(--gut) 0;justify-content:center;color:var(--dim);
  font-size:calc(var(--fs) * var(--sc-meta,.85))}
.galbar .gcap:empty{display:none}

/* ---------- work list ---------- */
.wl{padding:0 var(--gut) 40px}
.wl-row{display:grid;grid-template-columns:5.5em minmax(0,1fr) minmax(0,1.1fr);
  gap:0 1.2em;padding:5px 0;border-bottom:1px solid var(--hair)}
.wl-row:first-child{border-top:1px solid var(--hair)}
.wl-row:hover{opacity:1;background:#00000008}
.wl-y{color:var(--dim)}
.wl-sub{color:var(--dim)}
.wl-sub::before{content:" / "}
.wl-m{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- cv / about ---------- */
.page{padding:0 var(--gut);max-width:52em}
.page h2{font:inherit;color:var(--dim);margin:0 0 4px;padding-top:24px}
.page .row{display:grid;grid-template-columns:3.5em 1fr;gap:0 1em;padding:0 0 4px}
.page .row .y{color:var(--dim)}
.page .row .n{color:var(--dim)}
.page .flag{color:#b4553f}
.page p{margin:0 0 1em;max-width:46em}
.sect{margin:0 0 24px}
footer.site{padding:40px var(--gut);color:var(--dim);
  display:grid;grid-template-columns:repeat(4,1fr);gap:0 var(--gut)}
footer.site .r{text-align:right}

@media(max-width:700px){
  :root{--fs:14px;--gut:clamp(14px,calc(var(--gut-desktop,30px) * .6),22px)}
  /* 导航常驻顶部：名字与语言一行，栏目横排一行，两行高度才压得住 */
  .nav,.nav3{position:sticky;top:0;z-index:50;background:var(--pg);
    grid-template-columns:1fr auto;row-gap:8px;padding-bottom:10px;
    border-bottom:1px solid var(--hair)}
  .nav .col:last-child{align-items:flex-end;text-align:right}
  .nav3 .col:last-child{grid-column:2;grid-row:1;align-self:start}
  .nav3 .col:nth-child(2){grid-column:1/-1;grid-row:2;
    flex-direction:row;flex-wrap:wrap;gap:0 1.1em}
  /* Archive：图片收窄、四周留白加大，图与标题之间拉开 */
  .bands{padding:8px calc(var(--gut) + 12px) 28px;min-height:0;display:block}
  .band{overflow:visible;height:auto;padding-top:0;margin-bottom:0}
  .track{display:block;width:auto;animation:none}
  .track .dup{display:none}
  .it{height:auto;margin-bottom:42px}
  .it img{width:100%;height:auto}
  /* 标题在图上方（与桌面端悬停位置一致），留白要加在标题与图之间 */
  .it .cap{position:static;opacity:1;display:block;padding:0 0 12px;white-space:normal;
    line-height:1.5}
  .page .row{grid-template-columns:3.2em 1fr}
  .txt{max-width:none}
  .stage{height:auto;min-height:0;padding:0}
  .stage .sl{max-width:100%;max-height:none;width:100%}
  .zone{width:50%}
  .galbar{justify-content:flex-start;padding-left:var(--gut)}
  .wl-row{grid-template-columns:4.6em 1fr}
  .wl-m{display:none}
  footer.site{grid-template-columns:1fr 1fr;row-gap:8px}
  footer.site .r{text-align:left}
}