/* ===== 黑白等宽风格 ===== */
:root{
  --paper:#fff; --ink:#000; --mute:#777;
  --mono:"JetBrains Mono","IBM Plex Mono","Space Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Noto Sans Mono CJK SC","Noto Sans SC","Noto Sans CJK SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",monospace;
  --sans:"Helvetica Neue",Helvetica,Arial,"Noto Sans SC","Noto Sans CJK SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --pad:clamp(18px,2.9vw,44px);
  --ease:cubic-bezier(.2,.8,.2,1);
}
[data-theme="dark"]{--paper:#000;--ink:#fff;--mute:#888}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--mono);font-size:clamp(12px,1.05vw,15px);line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column;transition:background .3s,color .3s}
a{color:inherit;text-decoration:none}
button{font:inherit;border:0;cursor:pointer}
img{display:block;max-width:100%}

/* 黑底白字标签块 */
.hl{background:var(--ink);color:var(--paper);padding:0 .25em;-webkit-box-decoration-break:clone;box-decoration-break:clone;display:inline;transition:background .2s,color .2s,box-shadow .2s}
.hl.big{font-size:1.6em;font-weight:700;letter-spacing:.02em}
.hl.light{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.hl.inv{background:transparent;color:var(--ink);outline:1px dashed var(--ink)}
a.hl:hover,a.hl:focus-visible,.hl.link:hover,.hl.btn:hover,.hl.active{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.hl.btn{line-height:inherit}
p+p{margin-top:.15em}
.gap{margin-top:1.2em!important}

.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--ink);z-index:100}

/* 顶栏 / 页脚 */
.topbar,.footbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:var(--pad)}
.topbar{position:sticky;top:0;z-index:40;background:var(--paper)}
.footbar{margin-top:auto;flex-wrap:wrap;font-size:.85em}
.toggles{display:flex;gap:10px}

/* ===== 首页 ===== */
.page-home{overflow:hidden;height:100vh;height:100svh}
.home-art{position:fixed;inset:0;z-index:0;overflow:hidden}
.home-art img{width:100%;height:100%;object-fit:cover;object-position:right bottom;transform-origin:70% 80%;transition:transform .9s var(--ease);animation:artIn 1.4s var(--ease) both}
@keyframes artIn{from{opacity:0;transform:scale(1.08) translate(3%,3%)}to{opacity:1;transform:none}}
[data-theme="dark"] .home-art img{filter:invert(1)}
.home-labels{position:fixed;z-index:2;top:calc(var(--pad) * 1.05);left:var(--pad);display:flex;flex-direction:column;align-items:flex-start;font-family:var(--sans);font-weight:700;text-transform:uppercase;font-size:clamp(15px,1.55vw,28px);line-height:1.18;letter-spacing:.005em}
.sl{background:var(--ink);color:var(--paper);padding:0 .14em;animation:slIn .6s var(--ease) both}
.home-title .sl:nth-child(2){animation-delay:.08s}.home-labels>.sl.link{animation-delay:.25s}
.home-title{display:flex;flex-direction:column;align-items:flex-start;outline:none}
.home-title .sl{transition:background .2s,color .2s,box-shadow .2s,transform .25s var(--ease)}
.home-title:hover .sl,.home-title:focus-visible .sl{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink);transform:translateX(6px)}
.home-title:focus-visible{outline:2px dashed var(--ink);outline-offset:4px}
@keyframes slIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
.sl-gap{height:.7em}
.sl.link{position:relative;transition:background .2s,color .2s,transform .25s var(--ease),box-shadow .2s}
.sl.link:hover,.sl.link:focus-visible{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink);transform:translateX(6px);outline:none}
.sl.link+.sl.link{margin-top:.12em}

/* ===== 作品目录 Content ===== */
.toc{min-height:calc(100vh - 140px);display:flex;align-items:center;justify-content:center;padding:var(--pad)}
.toc-inner{width:min(100%,max(340px,33.4vw))}
.toc-title{margin-bottom:1.3em}
.toc-title .hl{font-size:calc(1em + 4px)} /* 目录标题比正文大 4 号 */
.toc-list{list-style:none}
.toc-list li+li{margin-top:1.05em}
.toc-row{display:flex;justify-content:space-between;align-items:baseline;gap:1.5em;cursor:pointer}
.toc-row .hl{transition:background .18s,color .18s,box-shadow .18s}
.toc-row:hover .hl,.toc-row:focus-visible .hl{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.toc-row:focus-visible{outline:none}
.toc-row:hover .num{transform:translateX(-4px)}
.toc-row .num{display:inline-block;transition:transform .2s var(--ease)}

.work{padding:calc(var(--pad) * 2.5) var(--pad);scroll-margin-top:70px}
.work-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5em 2em;max-width:1200px;margin:0 auto 2.2em}
.work-head>.hl{justify-self:start;align-self:start}
.work-head>.hl+.hl{justify-self:end}
.work-head .meta{grid-column:1/-1;line-height:1.6}
.pages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2.2vw,34px);max-width:1200px;margin:0 auto}
.pages.full{grid-template-columns:1fr;max-width:1400px;gap:clamp(18px,2.5vw,40px)}
.pages.full .page{box-shadow:none}
.pages.full .page:first-child::after{content:none}
.page{position:relative;aspect-ratio:16/9;cursor:pointer;overflow:hidden;background:var(--paper);box-shadow:inset 0 0 0 1px var(--ink);outline:none;padding:0}
.page img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.page:hover img,.page:focus-visible img{transform:scale(1.03)}
.page::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 0 var(--ink);transition:box-shadow .2s;pointer-events:none}
.page:hover::after,.page:focus-visible::after{box-shadow:inset 0 0 0 5px var(--ink)}
.page .pno{position:absolute;left:8px;bottom:8px;font-size:.85em}
.work-foot{max-width:1200px;margin:2em auto 0}
.ph-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4em;background:repeating-linear-gradient(-45deg,transparent 0 14px,rgba(127,127,127,.12) 14px 15px)}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:200;background:var(--paper);visibility:hidden;opacity:0;transition:opacity .3s,visibility .3s;display:flex;flex-direction:column;padding:var(--pad)}
.lightbox.open{visibility:visible;opacity:1}
.lb-top{display:flex;justify-content:space-between;gap:1em}
.lb-stage{flex:1;display:flex;align-items:center;justify-content:center;gap:clamp(10px,2vw,30px);min-height:0}
.lb-media{flex:1;display:flex;align-items:center;justify-content:center;max-width:1300px;height:100%;min-height:0}
.lb-media img,.lb-media .page{max-height:78vh;width:100%;object-fit:contain;transition:opacity .2s,transform .3s var(--ease)}
.lb-media .page{cursor:default;max-width:calc(78vh * 16 / 9)}
.lb-media .swap{opacity:0;transform:translateX(var(--dx,0))}
.lb-arrow{white-space:nowrap}
.hint{text-align:center;font-size:.85em}

.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);opacity:0;transition:all .3s;z-index:300;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ===== 关于我 ===== */
.about{flex:1;display:grid;grid-template-columns:minmax(0,30fr) minmax(0,60fr);column-gap:0;align-content:center;padding:calc(var(--pad) * 2) 0 calc(var(--pad) * 1.5) 9.9%;line-height:1.5}
.about-left{width:clamp(150px,11.5vw,240px)}
.portrait{margin:0}
.portrait img{width:100%;aspect-ratio:295/393;object-fit:cover;filter:grayscale(1)}
.portrait figcaption{background:var(--ink);color:var(--paper);text-align:right;padding:0 .25em;margin-top:-1px}
.about-contact{margin-top:1.2em;white-space:nowrap}
.about-right{padding-right:var(--pad)}
.about-right .block+.block{margin-top:1.5em}
.about-back{grid-column:2;margin-top:3em}

/* 滚动显现 */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}


/* ===== 每页嵌入文字（真实 HTML 文本，可选中、可翻译） ===== */
.slide{margin:0;min-width:0}
.slide .page{display:block;width:100%}
.ptext{max-width:min(100%,860px);margin-top:.9em;line-height:1.75;user-select:text}
.ptext-h{display:flex;justify-content:space-between;align-items:baseline;gap:1em;max-width:none}
.ptext-h .pno{font-size:.85em;position:static}
.ptext-p{margin-top:1.1em}
.ptext-gap{display:inline-block;height:.4em}
.work-head .gapline{display:block;height:.6em}
/* Lightbox 内的页面文字 */
.lb-text{max-width:1000px;width:100%;margin:.8em auto 0;max-height:24vh;overflow:auto;line-height:1.7;font-size:.95em;overscroll-behavior:contain}
.lb-text .ptext-p{margin-top:.5em}
.lb-text:empty{display:none}
.lightbox .lb-media img{max-height:60vh}

@media (max-width:760px){
  .lb-text{max-height:30vh;font-size:.9em}
  .lightbox .lb-media img{max-height:46vh}
  .about{grid-template-columns:1fr;padding:var(--pad);row-gap:2.5em}
  .about-left{width:min(220px,60vw)}
  .about-right{padding-right:0}
  .about-back{grid-column:1;margin-top:0}
  .pages{grid-template-columns:1fr}
  .lb-stage{flex-wrap:wrap;align-content:center}
  .lb-media{order:-1;flex-basis:100%;height:auto}
  .toc-inner{width:100%}
  .home-art img{object-position:72% 100%}
  .footbar{font-size:.8em}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* 中文模式：略增行距与字距，保证中英混排可读 */
html:lang(zh-CN) body{line-height:1.65}
html:lang(zh-CN) .hl{letter-spacing:.02em}
html:lang(zh-CN) .home-labels{letter-spacing:.06em}

a.hl:focus-visible{outline:none}
/* 大图浏览：没有文字时图片恢复原尺寸 */
.lightbox:has(.lb-text:empty) .lb-media img{max-height:78vh}
/* 作品集内容页：中英切换与反色按钮放在顶部栏中间 */
.topbar .top-toggles{display:flex;gap:8px;position:absolute;left:50%;transform:translateX(-50%)}
.topbar{position:sticky}
/* 原二维码位置的外部链接按钮（works.js → slide.link，坐标为百分比） */
.slide-frame{position:relative;container-type:inline-size}
.lb-frame{position:relative;display:flex;justify-content:center;max-width:100%;max-height:100%;transition:opacity .2s,transform .3s var(--ease)}
.lb-frame img{width:auto;height:auto;max-width:100%}
.slide-link{position:absolute;z-index:3;right:calc((100 - var(--x) - var(--w)) * 1%);top:calc((var(--y) + var(--h) / 2) * 1%);transform:translateY(-50%);
  font-family:var(--mono);font-size:clamp(10px,1.15cqw,15px);line-height:1.25;padding:.5em .75em;white-space:nowrap;text-decoration:none;
  background:#000;color:#fff;box-shadow:inset 0 0 0 1px #000;transition:background .2s,color .2s}
.lb-frame .slide-link{font-size:clamp(10px,1vw,15px)}
.slide-link:hover,.slide-link:focus-visible{background:#fff;color:#000;outline:none;box-shadow:inset 0 0 0 2px #000}
/* 主页 ABOUT ME 下方的中英切换与反色按钮 */
.home-toggles{display:flex;gap:.35em;margin-top:.45em;font-size:.8em}
.home-toggles .sl.btn{border:0;font:inherit;text-transform:uppercase;cursor:pointer;animation-delay:.35s;transition:background .2s,color .2s,box-shadow .2s}
.home-toggles .sl.btn:hover,.home-toggles .sl.btn:focus-visible{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink);outline:none}
/* 竖屏（手机）：主视觉按宽度放大并贴右下，完整露出 Portfolio 字样 */
@media (max-aspect-ratio:1/1){
  .home-art img{position:absolute;right:0;bottom:0;width:170%;height:auto;max-width:none;object-fit:contain}
}