/* ============================================================
   ELIO STUDIO · 亦里设计 —— 作品详情页版式层 (work-detail.css)
   抽取自 work-cangyuxian.html 原内联样式，作为 8 个作品详情页
   （work-p01 ~ work-p08）与案例研究页 work-cangyuxian.html 的
   单一版式来源。参考图四~图七：左文右图双栏 / 多图并列 /
   九宫格细节 / 长文解析材质与光影；无圆角、统一留白。
   令牌依赖品牌单一事实源 brand.css。
   ============================================================ */

/* 工作页不加载 styles.css，缺少其 *{margin:0;padding:0} 复位：
   浏览器默认 body margin 8px 会让整页留白与主页不一致（实测 main 左缘 8px）。 */
html,body{margin:0;padding:0;}
body.wd-body{background:var(--brand-ink);}
.wd-body img{max-width:100%;display:block;}
/* 页面容器 · 全站同一口径（与主页 .section / 资源库 .res-wrap 完全对齐）
   口径定义：内容列 = min(1280px, 视口 − 2×gutter)，左缘 = max(gutter, (视口 − 1280)/2)。
   旧写法 .wd-wrap{max-width:1280;padding:max(gutter,(100%-1280)/2)} 会在 1440 视口
   叠加两层留白（元素已被限宽到 1280，再加 80 内距），实测内容列仅 1120、左缘 160，
   比主页内容列(1280/80)窄 160 且右移 80。现改用「限宽 + 同式外距、内距归零」：
   元素自身即内容列，1440 视口实测 1280 / 左 80，与主页一致；375 视口 335 / 左 20。 */
.wd-wrap{
  width:auto;max-width:var(--w-page);box-sizing:border-box;
  margin-left:max(var(--gutter), calc((100% - var(--w-page)) / 2));
  margin-right:max(var(--gutter), calc((100% - var(--w-page)) / 2));
  padding-left:0;padding-right:0;
}
.wd-body a{text-decoration:none;}

/* ── 一级导视：顶部细长导航（参考 ref3 顶部细导航条） ───────────── */
.wd-nav{position:fixed;top:0;left:0;right:0;height:62px;z-index:60;display:flex;align-items:center;gap:28px;
  /* 全站口径：左缘 = max(gutter, (视口 − 1280)/2)（1440 视口实测 80，与正文内容列左缘一致） */
  padding:0 max(var(--gutter), calc((100% - var(--w-page)) / 2));background:linear-gradient(180deg,rgba(10,10,10,.9),rgba(10,10,10,.55));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--brand-line-soft);}
.wd-brand{display:flex;align-items:baseline;gap:10px;color:var(--brand-almond);}
.wd-brand b{font-family:var(--font-cin);font-size:13px;letter-spacing:var(--track-wide);font-weight:400;text-transform:uppercase;}
.wd-brand i{font-style:normal;font-size:11px;letter-spacing:.12em;color:var(--brand-tx-mute);}
.wd-nav-menu{display:flex;gap:26px;margin-left:auto;}
.wd-nav-menu a{font-family:var(--font-mono);font-size:10.5px;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--brand-tx-dim);}
.wd-nav-menu a:hover{color:var(--brand-gold);}
.wd-nav-back{font-family:var(--font-mono);font-size:10.5px;letter-spacing:var(--track-caps);text-transform:uppercase;
  color:var(--brand-tx-dim);border:1px solid var(--brand-line);padding:7px 14px;border-radius:0;transition:color var(--tx-fast),border-color var(--tx-fast);}
.wd-nav-back:hover{color:var(--brand-gold);border-color:var(--brand-gold);}

/* ── 二级导视：面包屑 + 章节锚点（ref1 的左侧固定导视在详情页转为顶部粘性导视） ── */
.wd-guide{position:fixed;top:62px;left:0;right:0;z-index:55;display:flex;align-items:center;gap:22px;height:46px;
  /* 全站口径：与 .wd-wrap 内容列左缘对齐（1440 视口 80） */
  padding:0 max(var(--gutter), calc((100% - var(--w-page)) / 2));background:rgba(10,10,10,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--brand-line);}
.wd-crumb{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand-tx-mute);white-space:nowrap;overflow:hidden;min-width:0;flex:0 1 auto;}
.wd-crumb a{color:var(--brand-tx-mute);flex:0 0 auto;}
.wd-crumb a:hover{color:var(--brand-gold);}
.wd-crumb .sep{color:var(--brand-tx-ghost);flex:0 0 auto;}
/* 末级面包屑可省略号收口：375/430 视口下原来直接硬裁（文字右缘被导视条裁切 1~2 字宽） */
.wd-crumb .cur{color:var(--brand-almond);min-width:0;overflow:hidden;text-overflow:ellipsis;}
.wd-subnav{display:flex;gap:20px;margin-left:auto;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;}
.wd-subnav::-webkit-scrollbar{display:none;}
.wd-subnav a{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;color:var(--brand-tx-mute);
  padding:4px 0;border-bottom:1px solid transparent;white-space:nowrap;transition:color var(--tx-fast),border-color var(--tx-fast);}
.wd-subnav a:hover{color:var(--brand-tx);}
.wd-subnav a.on{color:var(--brand-gold);border-bottom-color:var(--brand-gold);}

/* ── 封面（ref3：全幅沉浸图 + 左下角标题，无边框） ────────────── */
.wd-hero{position:relative;height:min(90vh,880px);min-height:520px;display:flex;align-items:flex-end;
  overflow:hidden;margin-top:108px;background:var(--brand-ink-2);}
.wd-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.96) contrast(1.02);}
.wd-hero::after{content:'';position:absolute;inset:0;background:var(--brand-scrim);}
/* 封面内层：直接采用 .wd-wrap 的内容列（不再自加左右内距，避免二次缩进到 1120/160） */
.wd-hero-in{position:relative;z-index:2;width:100%;max-width:none;margin:0;padding:0 0 clamp(40px,5vw,80px);}
.wd-hero-kicker{font-family:var(--font-cin);font-size:clamp(11px,1.1vw,13px);letter-spacing:var(--track-wide);
  text-transform:uppercase;color:var(--brand-gold);margin-bottom:16px;}
.wd-hero h1{margin:0 0 10px;font-size:clamp(38px,6.4vw,88px);font-weight:300;line-height:1.05;
  letter-spacing:-.03em;color:var(--brand-almond);}
.wd-hero .wd-hero-en{font-family:var(--font-serif);font-style:italic;font-size:clamp(14px,1.6vw,20px);
  color:var(--brand-tx-dim);letter-spacing:.02em;margin-bottom:22px;}
.wd-hero-meta{display:flex;flex-wrap:wrap;gap:10px 26px;font-family:var(--font-mono);font-size:11px;
  letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--brand-tx-dim);}
.wd-hero-meta span{display:inline-flex;gap:8px;align-items:center;}
.wd-hero-meta b{color:var(--brand-tx-mute);font-weight:400;}

/* ── 通用区块骨架 ─────────────────────────────────────────── */
.wd-sec{padding:var(--sec-y) 0 0;scroll-margin-top:120px;}
.wd-sec-head{display:flex;align-items:baseline;gap:18px;border-bottom:1px solid var(--brand-line);padding-bottom:16px;margin-bottom:clamp(32px,4vw,56px);}
.wd-no{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--track-caps);color:var(--brand-gold);}
.wd-sec-head h2{margin:0;font-size:clamp(22px,2.6vw,34px);font-weight:300;letter-spacing:var(--track-tight);color:var(--brand-almond);}
.wd-sec-head .en{margin-left:auto;font-family:var(--font-cin);font-size:11px;letter-spacing:var(--track-caps);
  text-transform:uppercase;color:var(--brand-tx-mute);text-align:right;}

/* ── 项目信息表 ───────────────────────────────────────────── */
.wd-meta{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;border-top:1px solid var(--brand-line);border-left:1px solid var(--brand-line);}
.wd-meta-cell{border-right:1px solid var(--brand-line);border-bottom:1px solid var(--brand-line);padding:22px 20px 24px;}
.wd-meta-cell dt{font-family:var(--font-mono);font-size:9.5px;letter-spacing:var(--track-caps);text-transform:uppercase;
  color:var(--brand-tx-mute);margin:0 0 10px;}
.wd-meta-cell dd{margin:0;font-family:var(--font-serif);font-size:16px;color:var(--brand-tx);letter-spacing:.01em;}
.wd-note{margin:26px 0 0;padding:16px 20px;border-left:2px solid var(--brand-gold);background:var(--brand-gold-dim);
  font-size:12.5px;line-height:1.9;color:var(--brand-tx-dim);letter-spacing:.01em;max-width:var(--w-text,720px);}

/* ── 模块 A：左文右图双栏（ref4） ─────────────────────────── */
.wd-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(28px,4vw,64px);align-items:start;}
.wd-split--rev{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);}
.wd-col-txt{padding-top:6px;}
.wd-col-txt .wd-lead{font-family:var(--font-serif);font-size:clamp(17px,1.6vw,21px);line-height:1.9;color:var(--brand-almond);margin:0 0 26px;}
.wd-col-txt p{margin:0 0 22px;}
.wd-cn{font-size:var(--fs-body);line-height:2.05;color:var(--brand-tx-dim);font-weight:300;letter-spacing:.01em;}
.wd-en{font-family:var(--font-serif);font-size:12.5px;line-height:1.95;color:var(--brand-tx-mute);font-weight:300;
  border-left:2px solid var(--brand-line-strong);padding-left:16px;margin-top:6px !important;}
.wd-quote{font-family:var(--font-serif);font-size:clamp(20px,2.4vw,30px);line-height:1.7;color:var(--brand-almond);
  border-left:1px solid var(--brand-gold);padding-left:24px;margin:0 0 28px;font-weight:300;}
.wd-fig{position:relative;overflow:hidden;background:var(--brand-ink-2);border-radius:0;}
.wd-fig img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out);}
.wd-fig:hover img{transform:scale(1.03);}
.wd-fig figcaption{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand-tx-mute);padding:12px 0 0;}
.wd-fig--tall{aspect-ratio:3/4;}
.wd-fig--wide{aspect-ratio:4/3;}
.wd-fig--pan{aspect-ratio:16/10;}

/* ── 模块 B：横向多图并列（ref5 上方多图 + 下方说明 + 特写小图） ── */
.wd-strip{display:grid;gap:clamp(12px,1.4vw,20px);}
.wd-strip--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.wd-strip--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.wd-strip .wd-fig{aspect-ratio:4/3;}
.wd-strip--portrait .wd-fig{aspect-ratio:3/4;}
.wd-below{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(24px,3vw,40px);}
.wd-below .wd-fig{aspect-ratio:1/1;}

/* ── 模块 C：九宫格 + 长文（ref6） ─────────────────────────── */
.wd-grid9{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1vw,14px);}
.wd-grid9 .wd-fig{aspect-ratio:1/1;}
.wd-grid9 .wd-fig img{filter:saturate(.94);}
.wd-grid9 .wd-fig:hover img{filter:saturate(1.02);}
.wd-long{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);margin-top:clamp(36px,4.5vw,64px);}
.wd-long h3{margin:0 0 18px;font-size:clamp(19px,1.9vw,24px);font-weight:300;color:var(--brand-almond);}

/* ── 模块 D：材质与光影细节解析 ─────────────────────────────── */
.wd-mat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,26px);}
.wd-mat-card{border:1px solid var(--brand-line);background:var(--brand-ink-2);padding:0 0 24px;border-radius:0;
  transition:background-color var(--tx),border-color var(--tx);}
.wd-mat-card:hover{background:var(--brand-ink-3);border-color:var(--brand-line-strong);}
.wd-mat-card .wd-fig{aspect-ratio:4/3;}
.wd-mat-in{padding:20px 20px 0;}
.wd-mat-in h4{margin:0 0 4px;font-family:var(--font-serif);font-size:16.5px;font-weight:400;color:var(--brand-tx);}
.wd-mat-in .k{font-family:var(--font-mono);font-size:9.5px;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--brand-gold);}
.wd-mat-in p{margin:12px 0 0;font-size:12.5px;line-height:1.9;color:var(--brand-tx-dim);font-weight:300;}
.wd-mat-in .en{margin:8px 0 0;font-family:var(--font-serif);font-size:11px;line-height:1.8;color:var(--brand-tx-mute);font-style:italic;}

/* ── 模块 E：说明条目（藏/显对照） ─────────────────────────── */
.wd-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,36px);}
.wd-pair-card{border-top:2px solid var(--brand-gold);padding:26px 0 0;}
.wd-pair-card:last-child{border-top-color:var(--brand-copper);}
.wd-pair-card b{display:block;font-family:var(--font-serif);font-size:clamp(28px,3.4vw,44px);font-weight:300;color:var(--brand-almond);line-height:1;margin-bottom:14px;}
.wd-pair-card .lb{font-family:var(--font-mono);font-size:10px;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--brand-tx-mute);display:block;margin-bottom:16px;}

/* ── 页脚 / 前后作品 ──────────────────────────────────────── */
.wd-next{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--brand-line);margin-top:var(--sec-y);}
.wd-next a{padding:clamp(26px,3vw,44px) 0;border-bottom:1px solid var(--brand-line);display:block;transition:background-color var(--tx);}
.wd-next a:first-child{border-right:1px solid var(--brand-line);padding-right:clamp(20px,3vw,44px);}
.wd-next a:last-child{padding-left:clamp(20px,3vw,44px);text-align:right;}
.wd-next a:hover{background:var(--brand-ink-2);}
.wd-next .lb{font-family:var(--font-mono);font-size:10px;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--brand-tx-mute);}
.wd-next b{display:block;margin-top:10px;font-family:var(--font-serif);font-size:clamp(17px,1.8vw,22px);font-weight:300;color:var(--brand-tx);}
.wd-next a:hover b{color:var(--brand-gold);}
.wd-foot{padding:56px 0 72px;border-top:1px solid var(--brand-line);margin-top:0;}
.wd-foot-in{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-tx-mute);}
.wd-foot-in a{color:var(--brand-tx-dim);}
.wd-foot-in a:hover{color:var(--brand-gold);}

/* ── 响应式（四列 → 三列 → 两列 → 单列，留白比例统一） ───────── */
@media (max-width:1200px){
  .wd-meta{grid-template-columns:repeat(3,minmax(0,1fr));}
  .wd-mat{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:980px){
  .wd-nav-menu{display:none;}
  .wd-split,.wd-split--rev,.wd-long,.wd-pair,.wd-below{grid-template-columns:minmax(0,1fr);}
  /* 导视条在 ≤980 保持单行 46px：原 flex-wrap:wrap 在 375 实测把条高撑到 77px，
     与 62px 的 .wd-nav 合成 139px 固定遮挡带——锚点跳转落点（scroll-margin 120）
     与首屏起始（margin-top 132）都被压在条下。此处改为不换行：面包屑限宽省略号、
     章节锚点条横向可滚，固定遮挡带回到 108px（62 + 46）。 */
  .wd-guide{height:46px;flex-wrap:nowrap;padding:0 max(var(--gutter), calc((100% - var(--w-page)) / 2));gap:12px;}
  /* 窄屏面包屑只保留「首级 + 当前页」：中间层级锚点为 flex:0 0 auto 无法收缩，
     实测 375/430 下把末级 .cur 挤成 0 宽、且在第 3~4 个字处硬裁（cangyuxian 内容盒
     右缘 363 > 内容列 355，超列 8px）。收起中间级后 .cur 获得宽度并用省略号收口。 */
  .wd-crumb{flex:0 1 auto;max-width:46%;overflow:hidden;}
  .wd-crumb > a:not(:first-child),
  .wd-crumb > .sep{display:none;}
  .wd-crumb > .cur{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;}
  .wd-crumb > .cur::before{content:"/";margin-right:8px;color:var(--brand-tx-ghost);}
  .wd-subnav{flex:1 1 auto;min-width:0;}
  .wd-sec{scroll-margin-top:126px;}
  .wd-hero{margin-top:132px;}
}
@media (max-width:700px){
  .wd-meta{grid-template-columns:repeat(2,minmax(0,1fr));}
  .wd-strip--3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .wd-grid9{grid-template-columns:repeat(2,minmax(0,1fr));}
  .wd-next{grid-template-columns:minmax(0,1fr);}
  .wd-next a:first-child{border-right:0;padding-right:0;}
  .wd-next a:last-child{padding-left:0;text-align:left;}
}

/* ── 375 / 430 移动端收口（本轮复测新增） ──────────────────────────
   ① 可读文字下限统一到 10.5px：面包屑 10→10.5、信息表标签 9.5→10.5、
      材质卡键名 9.5→10.5、图注 10→10.5、前后作品标签 10→10.5、页脚 10.5 保持。
      装饰性英文眉标（.wd-sec-head .en / .wd-hero-kicker 等）本身 ≥11px，不在此列。
   ② 导视条在 ≤980 已换行（height:auto），窄屏再收 gap，避免与正文标题贴边。 */
@media (max-width:430px){
  .wd-crumb{font-size:10.5px;letter-spacing:.1em;}
  .wd-subnav a{font-size:10.5px;letter-spacing:.1em;}
  .wd-meta-cell dt{font-size:10.5px;letter-spacing:.1em;}
  .wd-mat-in .k{font-size:10.5px;letter-spacing:.1em;}
  .wd-fig figcaption{font-size:10.5px;letter-spacing:.08em;}
  .wd-next .lb{font-size:10.5px;}
  .wd-pair-card .lb{font-size:10.5px;}
  .wd-foot-in{font-size:10.5px;letter-spacing:.1em;}
  .wd-guide{gap:12px;}
}

/* ═══════════════════════════════════════════════════════════════
   §5.17 作品图片灯箱（work-p01~p08 + work-cangyuxian 共用）
   动机：详情页 20+ 张作品图此前不可放大，材质/细节无法看清。
   设计：固定深色遮罩（图片查看器惯例，深浅两态一致），图注/控件用
   浅色文字，实测对比度 > 12:1；按钮热区 44×44 满足移动端。
   ═══════════════════════════════════════════════════════════════ */
.wd-lb{
  position:fixed; inset:0; z-index:320; display:none;
  align-items:center; justify-content:center;
  background:rgba(8,8,10,.965);
  padding:
    max(18px, env(safe-area-inset-top, 0px) + 14px)
    max(18px, 4vw)
    max(18px, env(safe-area-inset-bottom, 0px) + 14px);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.wd-lb.on{ display:flex; animation:wd-lb-in .18s ease-out; }
@keyframes wd-lb-in{ from{opacity:0} to{opacity:1} }
html.wd-lb-lock, html.wd-lb-lock body{ overflow:hidden; }
.wd-lb-img{
  max-width:min(1400px, 100%); max-height:76vh; width:auto; height:auto;
  object-fit:contain; display:block; cursor:zoom-out;
  box-shadow:0 24px 64px rgba(0,0,0,.62);
}
.wd-lb-btn{
  position:absolute; z-index:2; width:44px; height:44px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(237,234,228,.22); border-radius:999px;
  background:rgba(20,20,22,.72); color:#EDEAE4; cursor:pointer;
  transition:background .16s ease, border-color .16s ease, color .16s ease;
}
.wd-lb-btn:hover{ background:rgba(237,234,228,.14); border-color:rgba(237,234,228,.45); }
.wd-lb-btn:focus-visible{ outline:2px solid #C9A57B; outline-offset:2px; }
.wd-lb-close{ top:max(16px, env(safe-area-inset-top, 0px) + 12px); right:max(16px, 3vw); }
.wd-lb-prev{ left:max(12px, 2.2vw); top:50%; transform:translateY(-50%); }
.wd-lb-next{ right:max(12px, 2.2vw); top:50%; transform:translateY(-50%); }
.wd-lb-bar{
  position:absolute; left:0; right:0; bottom:max(14px, env(safe-area-inset-bottom, 0px) + 10px);
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:0 max(20px,5vw); text-align:center; pointer-events:none;
}
.wd-lb-cap{ font-size:12.5px; line-height:1.5; color:#EDEAE4; max-width:min(880px,92vw); }
.wd-lb-cnt{ font-size:11.5px; letter-spacing:.1em; color:#B4AFA6; font-variant-numeric:tabular-nums; }
.wd-zoomable{ cursor:zoom-in; }
.wd-zoomable:focus-visible{ outline:2px solid #C9A57B; outline-offset:3px; }
@media (max-width:640px){
  .wd-lb-img{ max-height:68vh; }
  .wd-lb-prev{ left:6px; } .wd-lb-next{ right:6px; }
  .wd-lb-bar{ bottom:max(10px, env(safe-area-inset-bottom, 0px) + 8px); }
}
@media (prefers-reduced-motion:reduce){ .wd-lb.on{ animation:none; } }