/* =========================================================
   01. TOKENS
   ========================================================= */
:root{
  --paper:#f3f2ee;
  --paper-2:#eae8e2;
  --ink:#121314;
  --ink-2:#4a4d50;
  --ink-3:#8b8d8f;
  --accent:#2b4a70;
  --line:rgba(18,19,20,.15);
  --line-2:rgba(18,19,20,.07);
  --grid:rgba(43,74,112,.075);
  --grid-2:rgba(43,74,112,.15);
  /* 目录 / 联系页：与深蓝主题同色；切到日间模式时整块回到纸白 */
  --solid-bg:#0c2036;
  --solid-fg:#f2f5f9;
  --solid-fg-2:rgba(226,236,248,.55);
  --solid-fg-3:rgba(226,236,248,.42);
  --solid-line:rgba(226,236,248,.16);
  --solid-line-2:rgba(226,236,248,.35);
  --solid-tint:rgba(255,255,255,.05);
  --solid-grid:rgba(168,202,242,.055);
  --solid-grid-2:rgba(168,202,242,.10);
  /* 以下变量由主题脚本插值改写 */
  --nav-bg:rgba(243,242,238,.88);
  --nav-fg:#121314;
  --nav-fg2:#4a4d50;
  --nav-fg3:#8b8d8f;
  --nav-line:rgba(18,19,20,.15);
  --mark:rgba(18,19,20,.26);
  --badge-bg:rgba(18,19,20,.78);
  --badge-fg:#ffffff;
  --glow:0;
  --mono:"Cascadia Mono","JetBrains Mono","SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --sans:"Inter","Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei Light","Microsoft YaHei",sans-serif;
  --pad:clamp(20px,5vw,80px);
  --p-gap:clamp(300px,92vh,1400px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* =========================================================
   02. BASE
   ========================================================= */
*,*::before,*::after{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(--sans);font-size:15px;line-height:1.78;font-weight:400;
  letter-spacing:.01em;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right,var(--grid) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid) 1px,transparent 1px),
    linear-gradient(to right,var(--grid-2) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid-2) 1px,transparent 1px);
  background-size:24px 24px,24px 24px,120px 120px,120px 120px;
  transition:opacity .45s var(--ease);
}
/* 深蓝底时叠一层极淡的冷光，让底色有纵深而不是死板的纯色 */
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 85% at 50% -18%,rgba(104,158,216,.20),rgba(104,158,216,0) 62%),
    radial-gradient(85% 65% at 102% 108%,rgba(58,108,168,.18),rgba(58,108,168,0) 60%);
  opacity:var(--glow,0);
}
main,.nav,.foot{position:relative;z-index:1}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3,h4,p,figure,dl,dd,figcaption{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--ink);color:var(--paper)}

.mono{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.wrap{max-width:1560px;margin:0 auto;padding:0 var(--pad)}

.marks{position:fixed;inset:14px;z-index:60;pointer-events:none}
.marks i{position:absolute;width:26px;height:26px;border:0 solid var(--mark)}
.marks i:nth-child(1){top:0;left:0;border-top-width:1px;border-left-width:1px}
.marks i:nth-child(2){top:0;right:0;border-top-width:1px;border-right-width:1px}
.marks i:nth-child(3){bottom:0;left:0;border-bottom-width:1px;border-left-width:1px}
.marks i:nth-child(4){bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--ink);z-index:70}

/* =========================================================
   03. NAV
   ========================================================= */
.nav{
  position:fixed;top:14px;left:14px;right:14px;z-index:55;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  height:56px;padding:0 clamp(12px,2.4vw,26px);
  background:var(--nav-bg);color:var(--nav-fg);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);
  border-bottom:1px solid var(--nav-line);
}
.brand{display:flex;align-items:baseline;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;white-space:nowrap}
.brand b{font-weight:600}
.brand span{color:var(--nav-fg3);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.nav-links{display:flex;align-items:center;gap:clamp(13px,2vw,28px)}
.nav-links a{font-size:12.5px;color:var(--nav-fg2);position:relative;padding:4px 0;transition:color .25s var(--ease)}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--nav-fg);transition:right .3s var(--ease)}
.nav-links a:hover,.nav-links a.on{color:var(--nav-fg)}
.nav-links a:hover::after,.nav-links a.on::after{right:0}
.nav-tools{display:flex;align-items:center;gap:8px}
/* 显示模式切换：默认 → 夜间 → 日间 → 默认，圆点表示当前态 */
.mode-btn{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  border:1px solid var(--nav-line);padding:5px 10px;color:var(--nav-fg2);
  transition:.25s var(--ease);white-space:nowrap;
}
.mode-btn:hover,.mode-btn:focus-visible{border-color:var(--nav-fg);color:var(--nav-fg);outline:none}
.mode-dot{width:9px;height:9px;border-radius:50%;border:1px solid currentColor;flex:0 0 auto;transition:background .3s var(--ease)}
.mode-btn[data-mode="auto"] .mode-dot{background:linear-gradient(90deg,currentColor 0 50%,transparent 50% 100%)}
.mode-btn[data-mode="night"] .mode-dot{background:currentColor}
.mode-btn[data-mode="day"] .mode-dot{background:transparent}

/* =========================================================
   04. HERO
   ========================================================= */
.hero{padding:clamp(96px,13vh,150px) 0 clamp(30px,5vh,60px);border-bottom:1px solid var(--line);position:relative}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.92fr) auto;
  gap:clamp(20px,3vw,52px);align-items:stretch;
}
.hero-eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:clamp(18px,2.6vw,30px)}
.hero-eyebrow span:not(:last-child)::after{content:"/";margin-left:14px;color:var(--ink-3)}
h1{font-size:clamp(56px,8vw,118px);line-height:.96;font-weight:300;letter-spacing:.06em;margin:0}
h1 .en{
  display:block;font-family:var(--mono);font-weight:300;
  font-size:clamp(11px,1.15vw,14px);letter-spacing:.34em;color:var(--ink-3);
  margin-top:clamp(14px,2vw,22px);text-transform:uppercase;
}
.hero-role{margin-top:clamp(16px,2.4vw,26px);font-size:clamp(14px,1.25vw,16px);color:var(--ink-2);max-width:34ch;line-height:1.9}
.hero-quote{
  margin-top:clamp(22px,3vw,34px);padding-left:16px;border-left:1px solid var(--ink);
  font-size:13px;color:var(--ink-2);line-height:1.85;max-width:40ch;
}
.hero-quote em{display:block;font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-top:8px}
.hero-fig{position:relative;min-height:clamp(280px,44vh,520px);overflow:hidden}
.hero-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06)}
.hero-fig::after{content:"";position:absolute;inset:0;border:1px solid var(--line);pointer-events:none}
.vtype{display:flex;flex-direction:row-reverse;gap:16px;align-items:flex-start;color:var(--ink)}
.vtype span{writing-mode:vertical-rl;text-orientation:mixed;white-space:nowrap}
.vtype .big{font-size:clamp(18px,2.3vw,32px);letter-spacing:.46em;font-weight:200}
.vtype .sub{font-family:var(--mono);font-size:9px;letter-spacing:.3em;color:var(--ink-3);text-transform:uppercase;padding-top:10px}
.hero-spec{
  margin-top:clamp(28px,4vw,48px);display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
}
.hero-spec div{padding:14px 14px 14px 0;border-right:1px solid var(--line-2)}
.hero-spec div:last-child{border-right:0}
.hero-spec dt{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.hero-spec dd{font-size:13px;line-height:1.5}

/* =========================================================
   05. SECTION
   ========================================================= */
.section{padding:clamp(56px,9vh,110px) 0;border-bottom:1px solid var(--line);position:relative}
.sec-head{display:flex;align-items:baseline;gap:clamp(12px,2vw,26px);padding-bottom:18px;margin-bottom:clamp(28px,4vw,48px);border-bottom:1px solid var(--ink);flex-wrap:wrap}
.sec-no{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-3)}
.sec-head h2{font-size:clamp(24px,3.2vw,40px);font-weight:300;line-height:1.1;letter-spacing:.04em}
.sec-en{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.sec-count{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--ink-3)}

/* =========================================================
   06. 目录（深蓝色场）
   ========================================================= */
.dark{background:var(--solid-bg);color:var(--solid-fg);border-bottom:0}
.dark::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right,var(--solid-grid) 1px,transparent 1px),
    linear-gradient(to bottom,var(--solid-grid) 1px,transparent 1px),
    linear-gradient(to right,var(--solid-grid-2) 1px,transparent 1px),
    linear-gradient(to bottom,var(--solid-grid-2) 1px,transparent 1px);
  background-size:24px 24px,24px 24px,120px 120px,120px 120px;
}
.dark .wrap{position:relative}
.dark .sec-head{border-bottom-color:var(--solid-line-2)}
.dark .sec-no,.dark .sec-en,.dark .sec-count{color:var(--solid-fg-2)}
.dark .sec-head h2{color:var(--solid-fg)}

.toc-row{
  display:grid;grid-template-columns:64px 108px minmax(0,1.5fr) minmax(0,1fr) 100px 24px;
  align-items:center;gap:clamp(12px,2vw,26px);
  padding:clamp(16px,2.2vw,24px) 8px clamp(16px,2.2vw,24px) 0;
  border-bottom:1px solid var(--solid-line);
  transition:.3s var(--ease);position:relative;
}
.toc-row::before{content:"";position:absolute;inset:0;background:var(--solid-tint);opacity:0;transition:opacity .3s var(--ease)}
.toc-row:hover::before{opacity:1}
.toc-row:hover .toc-cn{color:var(--solid-fg)}
.toc-row:hover .toc-arrow{opacity:1;transform:translateX(0)}
.toc-no{font-family:var(--mono);font-size:clamp(15px,1.6vw,20px);letter-spacing:.06em;color:var(--solid-fg-2)}
/* 目录里的缩略图：点整行直接进项目页，这里只作预览 */
.toc-thumb{display:block;width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--solid-tint);position:relative;z-index:1}
.toc-thumb img{width:100%;height:100%;object-fit:cover;opacity:.72;filter:saturate(.92);transition:opacity .35s var(--ease),transform .7s var(--ease)}
.toc-row:hover .toc-thumb img{opacity:1;transform:scale(1.04)}
.toc-cn{font-size:clamp(16px,1.9vw,24px);font-weight:300;letter-spacing:.04em;color:var(--solid-fg);transition:color .25s var(--ease);line-height:1.4}
.toc-cn em{display:block;font-style:normal;font-size:.62em;color:var(--solid-fg-3);letter-spacing:.06em;margin-top:5px;font-weight:300}
.toc-en{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--solid-fg-3);line-height:1.7}
.toc-yr{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--solid-fg-3);text-align:right}
.toc-arrow{opacity:.3;transform:translateX(0);transition:.3s var(--ease);color:var(--solid-fg);font-size:14px;text-align:right}
.toc-row:hover .toc-arrow{opacity:1;transform:translateX(3px)}

/* =========================================================
   07. PROJECT
   ========================================================= */
/* 项目之间的「换气带」：给主题渐变留出没有文字的空白区间 */
.project{padding:clamp(56px,8vw,96px) 0}
.project + .project{margin-top:var(--p-gap);position:relative}
.project + .project::before{
  content:"";position:absolute;left:0;right:0;top:calc(var(--p-gap) * -.5);
  height:1px;background:var(--line);pointer-events:none;
}
.p-head{
  display:grid;grid-template-columns:auto minmax(0,1fr) minmax(260px,.72fr);
  align-items:end;gap:clamp(14px,2.4vw,34px);
  padding-bottom:clamp(16px,2.4vw,26px);border-bottom:1px solid var(--line);
  margin-bottom:clamp(20px,3vw,34px);
}
.p-no{font-family:var(--mono);font-size:clamp(30px,4.4vw,58px);line-height:.82;font-weight:300;letter-spacing:-.02em}
.p-titles h2{font-size:clamp(20px,2.5vw,32px);font-weight:400;line-height:1.32;letter-spacing:.02em}
.p-titles .pen{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-top:8px}
.pmeta{display:grid;gap:0}
.pmeta>div{display:grid;grid-template-columns:66px minmax(0,1fr);gap:12px;padding:5px 0;font-size:12px;border-bottom:1px solid var(--line-2)}
.pmeta>div:last-child{border-bottom:0}
.pmeta dt{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.pmeta dd{color:var(--ink-2);line-height:1.6}

.frame{position:relative;display:block;overflow:hidden;background:var(--paper-2);border:1px solid var(--line);cursor:zoom-in;width:100%}
.frame::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(to right,var(--grid) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid) 1px,transparent 1px);
  background-size:20px 20px;
}
.frame img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--ease);position:relative;z-index:1}
.frame.is-loaded img{opacity:1}
.frame.is-loaded::before{opacity:0}
.frame:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.frame .zoom-badge{
  position:absolute;right:8px;bottom:8px;z-index:3;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  background:var(--badge-bg);color:var(--badge-fg);padding:4px 7px;opacity:0;transition:opacity .25s var(--ease);
}
.frame:hover .zoom-badge{opacity:1}

.p-hero{margin-bottom:10px}
.p-split{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(18px,3vw,42px);margin-bottom:clamp(18px,2.6vw,32px);align-items:start;
}
.p-text h3{font-size:clamp(15px,1.5vw,18px);font-weight:500;line-height:1.6;margin-bottom:14px;letter-spacing:.02em}
.p-text p{font-size:14px;line-height:1.95;color:var(--ink-2)}
.p-text p+p{margin-top:13px}
.p-text .role{margin-top:18px;padding-top:14px;border-top:1px solid var(--line-2);font-size:12.5px;color:var(--ink-3);line-height:1.8}
.p-text .role b{color:var(--ink-2);font-weight:500}

.gallery{columns:2;column-gap:clamp(12px,1.8vw,22px)}
.gallery .item{break-inside:avoid;margin-bottom:clamp(14px,2vw,24px)}
.gallery.g3{columns:3}
.gallery.g4{columns:4}
.gallery figure{display:block}

/* 图纸条：统一高度、宽度按比例，用于超长竖幅图纸 */
.sheet-row{display:flex;gap:clamp(12px,1.8vw,22px);align-items:flex-start;flex-wrap:wrap}
.sheet-row .item{flex:0 0 auto;max-width:100%}
.sheet-row .frame{width:auto;height:clamp(300px,42vh,440px)}
.sheet-row .cap{max-width:200px}

/* 分行网格：行内图片底部对齐，空出的高度用来放说明文字 */
.gal{display:grid;gap:clamp(18px,2.6vw,32px) clamp(14px,2vw,26px);align-items:stretch}
.gal.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.gal.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.gal.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.gal .item{display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
.gal .item>.frame{flex:0 0 auto}
.gal .span2{grid-column:span 2}
.gal .note{margin-bottom:auto;padding-bottom:clamp(14px,2vw,24px);max-width:30em}
.gal .note b{
  display:block;font-family:var(--mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);font-weight:400;margin-bottom:8px;
}
.gal .note p{font-size:12.5px;line-height:1.92;color:var(--ink-2)}
.gal .note p+p{margin-top:8px}
/* 相邻图组之间留出呼吸 */
.gal+.gal,.gal+.sheet-row,.sheet-row+.gal,.sheet-row+.sheet-row{margin-top:clamp(26px,3.6vw,48px)}
.gal .item.note-only{justify-content:center}
.gal .item.note-only .note{margin-bottom:0;padding-bottom:0;max-width:34em}
/* 等比方阵：统一裁切为正方形，用于成组的细节照片 */
.gal.sq .frame{aspect-ratio:1/1}

/* 图纸条末尾的说明栏，填满右侧空位 */
.sheet-row .note-item{flex:1 1 240px;min-width:220px;max-width:420px;padding-top:2px}
.sheet-row .note-item b{
  display:block;font-family:var(--mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);font-weight:400;margin-bottom:8px;
}
.sheet-row .note-item p{font-size:12.5px;line-height:1.92;color:var(--ink-2)}

.cap{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:8px;padding-left:11px;position:relative;line-height:1.6}
.cap::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:1px;background:var(--ink-3)}

.thumb-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,26px);align-items:start}
.thumb-grid figure{display:block}
.thumb-grid .frame{aspect-ratio:4/3}
.thumb-grid .frame img{object-fit:contain}
.thumb-grid h4{font-size:12.5px;font-weight:400;margin-top:10px;line-height:1.5}
.thumb-grid .cap{margin-top:3px}

/* =========================================================
   08. ABOUT
   ========================================================= */
.about-grid{display:block}
.about-copy{max-width:min(100%,860px)}
.about-lead{font-size:clamp(15px,1.4vw,17px);line-height:2;color:var(--ink-2)}
.about-lead strong{color:var(--ink);font-weight:500}
.sub-head{display:flex;align-items:baseline;gap:14px;margin:clamp(28px,3.6vw,44px) 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.sub-head h4{font-size:13px;font-weight:500;letter-spacing:.06em}
.sub-head span{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-left:auto}
.info-list li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;padding:11px 0;border-bottom:1px solid var(--line-2);font-size:13px}
.info-list .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding-top:3px}
.info-list .v{color:var(--ink-2);line-height:1.75}
.info-list .v b{color:var(--ink);font-weight:500}
.skills li{display:grid;grid-template-columns:1fr 92px;align-items:center;gap:14px;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:12.5px}
.bar{height:4px;background:var(--paper-2);position:relative;overflow:hidden}
.bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--ink);transition:width 1.1s var(--ease)}
.is-in .bar i{width:var(--v,70%)}
.tags{display:flex;flex-wrap:wrap;gap:7px}
.tags span{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line);padding:5px 9px;color:var(--ink-2)}

/* =========================================================
   09. CONTACT
   ========================================================= */
.contact{background:var(--solid-bg);color:var(--solid-fg);border-bottom:0;overflow:hidden}
.contact .sec-head{border-bottom-color:var(--solid-line-2)}
.contact .sec-no,.contact .sec-en,.contact .sec-count{color:var(--solid-fg-2)}
.contact .sec-head h2{color:var(--solid-fg)}
.contact-lead{font-size:clamp(26px,4.4vw,58px);font-weight:300;line-height:1.22;letter-spacing:.03em;max-width:14em}
.contact-lead .thin{color:var(--solid-fg-3)}
.contact-lines{display:flex;flex-wrap:wrap;gap:clamp(24px,5vw,80px);margin-top:clamp(26px,4vw,44px)}
.contact-lines div{min-width:180px}
.contact-lines dt{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--solid-fg-3);margin-bottom:8px}
.contact-lines dd{font-family:var(--mono);font-size:clamp(13px,1.5vw,16px);letter-spacing:.04em;color:var(--solid-fg);border-bottom:1px solid var(--solid-line);padding-bottom:6px;display:inline-block;transition:border-color .3s var(--ease)}
.contact-lines a:hover dd{border-bottom-color:var(--solid-fg)}
.titleblock{margin-top:clamp(32px,5vw,56px);border:1px solid var(--solid-line-2);display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;font-family:var(--mono)}
.titleblock>div{padding:13px 16px;border-right:1px solid var(--solid-line);border-bottom:1px solid var(--solid-line)}
.titleblock>div:nth-child(4n){border-right:0}
.titleblock>div:nth-last-child(-n+4){border-bottom:0}
.titleblock dt{font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--solid-fg-3);margin-bottom:5px}
.titleblock dd{font-size:12px;letter-spacing:.04em;color:var(--solid-fg);line-height:1.5}

/* =========================================================
   10. FOOTER
   ========================================================= */
.foot{padding:22px var(--pad);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;background:var(--paper)}
.foot .mono{font-size:9.5px}
.to-top{border-bottom:1px solid var(--line);transition:.25s}
.to-top:hover{border-color:var(--ink);color:var(--ink)}

/* =========================================================
   11. LIGHTBOX
   ========================================================= */
.lb{position:fixed;inset:0;z-index:100;background:rgba(14,15,16,.96);display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.lb.open{opacity:1;pointer-events:auto}
.lb-bar{
  display:flex;align-items:center;gap:14px;justify-content:space-between;
  padding:12px clamp(14px,3vw,28px);border-bottom:1px solid rgba(255,255,255,.12);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);
  flex-shrink:0;
}
.lb-bar .grp{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lb-bar button{border:1px solid rgba(255,255,255,.2);padding:7px 11px;color:rgba(255,255,255,.72);transition:.25s var(--ease);font-size:9.5px;letter-spacing:.14em}
.lb-bar button:hover{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.5)}
.lb-stage{flex:1;position:relative;overflow:hidden;cursor:grab;touch-action:none}
.lb-stage.dragging{cursor:grabbing}
.lb-stage img{
  position:absolute;left:50%;top:50%;max-width:100%;max-height:100%;
  transform:translate(-50%,-50%);transform-origin:center center;user-select:none;-webkit-user-drag:none;
  will-change:transform;
}
.lb-foot{
  padding:10px clamp(14px,3vw,28px);border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:20px;
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45);
  flex-shrink:0;
}

/* =========================================================
   12. REVEAL
   ========================================================= */
.rv{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.is-in{opacity:1;transform:none}
.rv.d1{transition-delay:.06s}.rv.d2{transition-delay:.12s}.rv.d3{transition-delay:.18s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .frame img{transition:none}
}

/* =========================================================
   13. RESPONSIVE
   ========================================================= */
@media (max-width:1100px){
  .hero-grid{grid-template-columns:1fr auto;grid-template-areas:"txt vtype" "fig vtype"}
  .hero-txt{grid-area:txt}
  .hero-fig{grid-area:fig;min-height:300px}
  .vtype{grid-area:vtype}
  .hero-spec{grid-template-columns:repeat(2,1fr)}
  .hero-spec div:nth-child(2n){border-right:0}
  .gal.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .thumb-grid{grid-template-columns:repeat(3,1fr)}
  .p-head{grid-template-columns:auto minmax(0,1fr)}
  .pmeta{grid-column:1/-1;margin-top:8px}
}
@media (max-width:820px){
  .p-split{grid-template-columns:1fr}
  .gallery.g4,.gallery.g3{columns:2}
  .gal.c2,.gal.c3,.gal.c4{grid-template-columns:1fr}
  .gal .span2{grid-column:auto}
  .gal .note{max-width:none}
  .sheet-row{display:block}
  .sheet-row .frame{height:auto;width:100%}
  .sheet-row .note-item{max-width:none;margin-top:clamp(16px,2.4vw,24px)}
  .sheet-row .item+.item{margin-top:clamp(14px,2vw,24px)}
  .sheet-row .cap{max-width:none}
  .toc-row{grid-template-columns:46px minmax(0,1fr) 24px}
  .toc-thumb{display:none}
  .toc-en,.toc-yr{display:none}
  .titleblock{grid-template-columns:1fr 1fr}
  .titleblock>div:nth-child(4n){border-right:1px solid var(--solid-line)}
  .titleblock>div:nth-child(2n){border-right:0}
  .titleblock>div:nth-last-child(-n+4){border-bottom:1px solid var(--solid-line)}
  .titleblock>div:nth-last-child(-n+2){border-bottom:0}
  .thumb-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .nav{flex-wrap:wrap;height:auto;padding:9px 12px;gap:8px}
  .brand span{display:none}
  .nav-links{gap:13px;flex:1;justify-content:flex-end}
  .nav-links a{font-size:11.5px}
    .nav-tools{gap:0}
  .mode-btn{padding:5px 8px;font-size:9px;letter-spacing:.1em}
  .hero-spec{grid-template-columns:1fr 1fr}
  .hero-spec div:nth-child(2n){border-right:0}
  .vtype{display:none}
  .hero-grid{grid-template-columns:1fr;grid-template-areas:"txt" "fig"}
  .gallery{columns:1}
  .gallery.g3,.gallery.g4{columns:2}
  .p-head{grid-template-columns:1fr;gap:10px}
  .info-list li{grid-template-columns:1fr;gap:3px}
  .marks{display:none}
}
/* =========================================================
   14. 项目页（作品拆成独立页面）
   ========================================================= */
/* 深蓝项目页的初始色板：脚本执行前也不会闪一下纸白 */
html.t-night{
  --paper:#0c2036;--paper-2:#122b46;
  --ink:#f2f5f9;--ink-2:#c6d4e4;--ink-3:#8298b4;
  --line:rgba(226,236,248,.17);--line-2:rgba(226,236,248,.09);
  --grid:rgba(168,202,242,.055);--grid-2:rgba(168,202,242,.10);
  --nav-bg:rgba(10,26,44,.82);--nav-fg:#f2f5f9;--nav-fg2:#c6d4e4;--nav-fg3:#8298b4;
  --nav-line:rgba(226,236,248,.17);
  --mark:rgba(226,236,248,.30);--badge-bg:rgba(242,245,249,.92);--badge-fg:#0c2036;
  --glow:.95;
}

.page-work .section{padding-top:clamp(84px,11vh,124px);padding-bottom:0}
.page-work .project{padding:0}

/* 顶部细条：返回目录 / 项目序号 / 该页固定色 */
.work-bar{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);padding-bottom:clamp(18px,2.6vw,28px);
}
.work-bar .back{color:var(--ink-2);display:inline-flex;gap:8px;transition:color .25s var(--ease)}
.work-bar .back:hover{color:var(--ink)}
.work-bar .wb-mid{color:var(--ink-2)}

/* 项目翻页 */
.pager{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;gap:clamp(14px,3vw,40px);
  border-top:1px solid var(--line);
  margin-top:clamp(44px,7vw,84px);padding:clamp(20px,3vw,32px) 0 clamp(40px,6vw,64px);
}
.pager a{display:block;min-width:0}
.pager .dir{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px;transition:color .25s var(--ease)}
.pager .ttl{display:block;font-size:clamp(14px,1.55vw,18px);font-weight:300;line-height:1.45;letter-spacing:.02em;color:var(--ink-2);transition:color .25s var(--ease)}
.pager .next{text-align:right}
.pager a:hover .dir,.pager a:hover .ttl{color:var(--ink)}
.pager .all{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--line);padding:10px 16px;color:var(--ink-2);white-space:nowrap;
  transition:border-color .25s var(--ease),color .25s var(--ease);
}
.pager .all:hover{border-color:var(--ink);color:var(--ink)}

@media (max-width:820px){
  .pager{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
  .pager .all{grid-column:1/-1;grid-row:2;justify-self:center;margin-top:6px}
  .pager .ttl{font-size:13px}
}