@charset "utf-8";
/* 页面层：工作台双栏、参考卡、灵感图廊、响应式
 * 由 styles.css 拆分而来（W1 目录重构）；颜色一律使用 tokens.css / themes.generated.css 中的变量。
 */

/* ---------- 双栏 ---------- */
.builder{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:26px;align-items:start}
.stage{
  position:sticky;top:16px;
  background:linear-gradient(165deg,var(--panel),var(--bg-2) 60%);
  border:1px solid var(--line);
  border-radius:22px;
  padding:22px 22px 18px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.stage::before{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--primary),transparent);opacity:.5;
}
.stage-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.stage-head h2{font-family:var(--serif);margin:0;font-size:23px;letter-spacing:3px}
.stage-actions{display:flex;gap:8px}
.canvas{
  min-height:400px;display:flex;align-items:center;justify-content:center;
  padding:14px 0 4px;
}
.canvas svg{max-height:410px;max-width:100%;height:auto;width:auto}
.canvas svg .drop{filter:drop-shadow(0 14px 12px var(--fx-shadow-2))}
.canvas-note{text-align:center;color:var(--mut-2);font-size:11px;margin:0 0 12px}

/* 主预览：实拍标准照 / 回退 SVG / 占位说明（见 assets/js/preview.js） */
.stage-photo{
  max-height:410px;max-width:100%;width:auto;height:auto;object-fit:contain;
  border-radius:var(--radius);background:var(--media-bg);
}
.stage-composite{
  max-height:410px;max-width:100%;width:auto;height:auto;display:block;
  border-radius:var(--radius);background:var(--media-bg);
}
.stage-empty{
  display:flex;align-items:center;justify-content:center;min-height:220px;padding:24px;
  border:1px dashed var(--line);border-radius:var(--radius);
  font-size:12px;letter-spacing:1px;color:var(--mut-2);text-align:center;
}

/* 所选实物色卡条：实拍预览下，金属/宝石/工艺的选择必须在预览区可见
   （实拍图只能有一张，切换材质时主图不变，靠这条色卡把"已生效"表达出来） */
.spec-strip{
  display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;align-items:center;
  margin:12px 0 10px;padding:10px 14px;
  border:1px dashed var(--line-soft);border-radius:var(--radius);
  background:color-mix(in srgb, var(--primary) 4%, transparent);
}
.spec-strip:empty{display:none}
.spec-strip .spec-item{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text)}
.spec-strip .spec-item em{font-style:normal;color:var(--mut-2);font-size:11px;margin-right:2px}
.spec-strip .spec-item b{color:var(--primary-hi);font-weight:600}
.spec-strip .spec-dot{
  width:15px;height:15px;border-radius:50%;flex:none;
  border:1px solid color-mix(in srgb, var(--text) 22%, transparent);
  box-shadow:inset 0 -2px 4px var(--fx-inset);
}
.spec-strip .spec-dot.is-dash{
  background:repeating-linear-gradient(45deg,var(--panel-3),var(--panel-3) 3px,var(--panel-2) 3px,var(--panel-2) 6px);
  border-style:dashed;
}
/* ============ 高端改版：英雄区 / 参考图卡 / 灵感图廊 ============ */
.page-head{
  position:relative;
  margin:-44px -28px 34px;
  padding:clamp(58px,9vw,104px) 28px clamp(36px,6vw,64px);
  background:
    linear-gradient(180deg,color-mix(in srgb, var(--media-scrim) 42%, transparent) 0%,var(--fx-scrim) 55%,var(--bg) 100%),
    linear-gradient(90deg,color-mix(in srgb, var(--media-scrim) 55%, transparent),color-mix(in srgb, var(--media-scrim) 18%, transparent) 60%,var(--fx-scrim)),
    url("../img/craft/artisan-hands.jpg") center 30%/cover no-repeat;
  border-bottom:1px solid var(--line);
  text-align:center;
  overflow:hidden;
}
.page-head h1{text-shadow:0 4px 24px var(--fx-text-shadow)}
.page-head .lead{color:var(--on-media-mut)}
.hero-tags{
  display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:22px;
}
.hero-tags span{
  display:inline-flex;align-items:center;gap:8px;
  background:color-mix(in srgb, var(--media-scrim) 58%, transparent);border:1px solid color-mix(in srgb, var(--primary) 28%, transparent);
  backdrop-filter:blur(6px);
  border-radius:999px;padding:8px 16px;font-size:12.5px;color:var(--on-media);letter-spacing:.5px;
}
.tag-ico{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.tag-ico.gold{background:linear-gradient(135deg,var(--primary-hi),var(--primary-lo));box-shadow:0 0 8px color-mix(in srgb, var(--primary-hi) 80%, transparent)}
.tag-ico.gem{background:linear-gradient(135deg,var(--gem-1),var(--gem-2));box-shadow:0 0 8px color-mix(in srgb, var(--gem-1) 65%, transparent)}
.tag-ico.serv{background:linear-gradient(135deg,var(--metal-1),var(--metal-2));box-shadow:0 0 8px color-mix(in srgb, var(--metal-1) 60%, transparent)}
.page-head-credit{
  /* 原来 10px + 50% 透明度，在深色 banner 上几乎看不清（审图反馈） */
  margin:18px 0 -6px;font-size:11.5px;letter-spacing:1.5px;color:var(--on-media-mut);
  text-shadow:0 2px 10px var(--fx-text-shadow);
}

.refcard{
  display:flex;gap:12px;align-items:center;
  border:1px solid var(--line-soft);border-radius:14px;overflow:hidden;
  background:var(--panel-2);margin-bottom:14px;
}
.refcard-img{flex:none;width:108px;height:84px;overflow:hidden;position:relative}
.refcard-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 55%,color-mix(in srgb, var(--media-scrim) 85%, transparent));
}
.refcard-img img{width:100%;height:100%;object-fit:cover;display:block}
.refcard-txt{padding:6px 12px 6px 2px}
.refcard-label{margin:0;font-size:11px;letter-spacing:2px;color:var(--primary)}
.refcard-cap{margin:2px 0 0;font-size:11px;color:var(--mut);line-height:1.5}

.inspire{
  margin-top:56px;padding-top:44px;
  border-top:1px solid var(--line);
}
.inspire-head{text-align:center;max-width:680px;margin:0 auto 30px}
.inspire-head h2{font-family:var(--serif);font-size:clamp(24px,2.6vw,34px);letter-spacing:6px;margin:0 0 10px}
.inspire-head p{color:var(--mut);font-size:13px;margin:0}
.masonry{
  display:grid;grid-template-columns:repeat(5,1fr);gap:12px;
}
.masonry figure{
  margin:0;position:relative;border-radius:14px;overflow:hidden;
  border:1px solid var(--line-soft);background:var(--media-bg);
}
.masonry figure:nth-child(1){grid-row:span 2}
.masonry figure:nth-child(5){grid-row:span 2}
.masonry figure:nth-child(8){grid-row:span 2}
.masonry img{
  width:100%;height:100%;display:block;object-fit:cover;
  min-height:150px;max-height:420px;
  transition:transform .6s ease,filter .4s ease;
}
.masonry figure:hover img{transform:scale(1.05);filter:brightness(1.06)}
.masonry figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:26px 12px 10px;font-size:12px;letter-spacing:1px;color:var(--on-media);
  background:linear-gradient(180deg,transparent,color-mix(in srgb, var(--media-scrim) 86%, transparent));
}
.inspire-credit{text-align:center;color:var(--mut-2);font-size:11px;margin:18px 0 0}
.inspire-credit a{color:var(--mut);text-decoration:underline dotted}
.inspire-credit a:hover{color:var(--primary-hi)}

.stage::after{
  content:"";
  position:absolute;inset:auto -60px -90px auto;width:290px;height:290px;
  background:radial-gradient(circle,color-mix(in srgb, var(--primary) 8%, transparent),transparent 68%);
  pointer-events:none;
}

@media (max-width:1080px){
  .page-head{margin:-44px -14px 26px;padding:48px 14px 38px}
  .masonry{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  .page-head{margin:-28px -14px 22px}
  .masonry{grid-template-columns:repeat(2,1fr);gap:8px}
  .masonry figure:nth-child(n){grid-row:auto}
  .masonry img{max-height:none;min-height:120px}
  .refcard-img{width:92px;height:76px}
}

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .builder{grid-template-columns:1fr}
  /* 只取消吸顶，不能改成 static：.stage::after 是绝对定位的装饰光晕（inset 右侧 -60px），
     失去定位上下文后会以视口为基准，在窄屏多出 60px 横向滚动。 */
  .stage{position:relative;top:auto}
  .cat-grid,.craft-grid,.preset-grid{grid-template-columns:repeat(2,1fr)}
  .model-grid,.metal-grid,.stone-grid,.pattern-grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:640px){
  main{padding:28px 14px 100px}
  .topbar{padding:14px}
  .foot-top{flex-direction:column;gap:16px}
  .foot-links{justify-content:flex-start;gap:8px 16px}
  .page-foot{padding:26px 16px 36px}
  .controls{padding:18px 14px}
  .cat-grid,.craft-grid,.model-grid,.metal-grid,.stone-grid,.pattern-grid{grid-template-columns:repeat(2,1fr)}
  .preset-grid{grid-template-columns:1fr}
  .canvas{min-height:300px}
  .canvas svg{max-height:320px}
  .pricebox-row{flex-direction:column;align-items:stretch}
  .pricebox-row .btn-primary{width:100%}
  .spec-list{grid-template-columns:1fr}
  .stage-head{flex-direction:column}
  .modal{padding:24px 18px}
}

/* ==========================================================================
   成品展示页（products.html）
   原为页面内联样式；W1 迁入共享页面层，并把与原 .chip / .modal 冲突的类名改为
   .fchip（筛选芯片）与 .pmodal-*（详情弹层），避免与首页同名类互相覆盖。
   ========================================================================== */
.prod-hero{
  text-align:center;margin:18px 0 30px;
  padding:46px 24px;border-bottom:1px solid var(--line);
}
.prod-hero h1{font-family:var(--serif);font-size:clamp(28px,3.4vw,42px);letter-spacing:8px;margin:6px 0 10px}
.prod-hero p{color:var(--mut);max-width:620px;margin:0 auto;font-size:14.5px}

.filter-bar{
  display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;
  padding:16px 22px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);margin-bottom:26px;
}
.filter-group{display:flex;align-items:center;gap:8px}
.filter-group label{font-size:12px;color:var(--mut-2);letter-spacing:1px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.fchip{
  padding:6px 14px;font-size:13px;border-radius:var(--radius-pill);
  border:1px solid var(--line);background:transparent;color:var(--mut);
  cursor:pointer;transition:all var(--dur-fast);
}
.fchip:hover{color:var(--text);border-color:var(--primary)}
.fchip.active{background:color-mix(in srgb, var(--primary) 14%, transparent);color:var(--primary-hi);border-color:var(--primary)}
.filter-spacer{flex:1}
.sort{font-size:13px;color:var(--mut)}
.sort select{
  background:var(--panel-2);color:var(--text);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:6px 10px;font-size:13px;
}

.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:22px}
/* 成品墙空态：该栏目还没有真实成品时如实说明，不放虚构卡片 */
.prod-empty{
  text-align:center;color:var(--mut-2);font-size:13px;line-height:2;
  padding:34px 20px;border:1px dashed var(--line-soft);border-radius:var(--radius-lg);
  background:color-mix(in srgb, var(--text) 2%, transparent);margin:0;
}
.prod-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;transition:transform .22s,border-color .22s;cursor:pointer;
  display:flex;flex-direction:column;
}
.prod-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb, var(--primary) 50%, transparent)}
.prod-card .img-wrap{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--media-bg)}
.prod-card .img-wrap img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-slow)}
.prod-card:hover .img-wrap img{transform:scale(1.06)}
.badge{
  position:absolute;top:10px;left:10px;
  padding:3px 10px;border-radius:6px;font-size:11px;font-weight:600;letter-spacing:1px;
  color:var(--on-media);
}
.badge.master{background:color-mix(in srgb, var(--seal) 90%, transparent)}
.badge.supervised{background:color-mix(in srgb, var(--mut-2) 85%, transparent)}
.badge.sold{background:color-mix(in srgb, var(--mut-2) 90%, transparent)}
.badge-tag{
  position:absolute;top:10px;right:10px;
  padding:3px 9px;border-radius:6px;font-size:11px;
  background:var(--fx-scrim);color:var(--primary-hi);border:1px solid var(--line);
}
.prod-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.prod-cat{font-size:11px;color:var(--primary);letter-spacing:2px;margin:0}
.prod-name{font-family:var(--serif);font-size:17px;margin:0;color:var(--text)}
.prod-meta{font-size:12px;color:var(--mut);margin:0}
.prod-meta b{color:var(--text);font-weight:600}
.prod-foot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:auto;padding-top:8px}
.prod-price{font-family:var(--serif);font-size:20px;color:var(--primary-hi);font-weight:700}
.prod-price small{font-size:12px;color:var(--mut);font-weight:400;margin-right:2px}
.prod-cta{
  font-size:12px;color:var(--mut);text-decoration:none;padding:5px 12px;
  border:1px solid var(--line);border-radius:var(--radius-sm);transition:all var(--dur-fast);
}
.prod-cta:hover{color:var(--primary-hi);border-color:var(--primary)}

/* 注：作品详情已改为独立页面 works/{id}.html（2026-09-20），弹层样式一并移除 */
.spec-table{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:20px}
.spec-table th,.spec-table td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line-soft)}
.spec-table th{color:var(--mut-2);font-weight:500;width:38%}
.spec-table td{color:var(--text)}
.cert-row{display:flex;gap:10px;align-items:center;margin-top:16px;font-size:12.5px;color:var(--text);opacity:.85}
.cert-row svg{flex-shrink:0;color:var(--primary)}

/* ==========================================================================
   素材清单页（materials.html）
   ========================================================================== */
.mat-hero{text-align:center;margin:18px 0 30px;padding:40px 24px;border-bottom:1px solid var(--line)}
.mat-hero h1{font-family:var(--serif);font-size:clamp(26px,3.2vw,40px);letter-spacing:8px;margin:6px 0 10px}
.mat-hero p{color:var(--mut);max-width:680px;margin:0 auto;font-size:14.5px}

.toc{display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:center;margin-bottom:34px}
.toc a{
  font-size:13px;color:var(--primary);text-decoration:none;
  padding:6px 14px;border:1px solid var(--line);border-radius:var(--radius-pill);
  transition:all var(--dur-fast);
}
.toc a:hover{background:color-mix(in srgb, var(--primary) 12%, transparent);color:var(--primary-hi)}

.section{margin-bottom:44px}
.section h2{
  font-family:var(--serif);font-size:22px;margin:0 0 4px;
  padding-bottom:10px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px;
}
.section h2 .num{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  background:color-mix(in srgb, var(--primary) 14%, transparent);color:var(--primary);font-size:14px;font-family:var(--sans);
}
.section-sub{color:var(--mut);font-size:13px;margin:6px 0 18px}

table.mat{
  width:100%;border-collapse:collapse;font-size:13.5px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
}
table.mat thead th{
  background:var(--panel-2);color:var(--primary-hi);text-align:left;
  padding:12px 14px;font-weight:600;letter-spacing:1px;font-size:12px;
  border-bottom:1px solid var(--line);white-space:nowrap;
}
table.mat tbody td{
  padding:11px 14px;border-bottom:1px solid var(--line-soft);
  color:var(--text);vertical-align:top;line-height:1.6;
}
table.mat tbody tr:last-child td{border-bottom:none}
table.mat tbody tr:hover{background:color-mix(in srgb, var(--primary) 4%, transparent)}
table.mat td.idx{color:var(--mut-2);font-family:var(--serif);width:42px;text-align:center}
table.mat td.item{font-weight:600;color:var(--primary-hi);white-space:nowrap}
table.mat .pri{display:inline-block;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:600}
.pri.high{background:color-mix(in srgb, var(--seal) 25%, transparent);color:color-mix(in srgb, var(--seal) 72%, var(--text))}
.pri.mid{background:color-mix(in srgb, var(--primary) 16%, transparent);color:var(--primary-hi)}
.pri.low{background:color-mix(in srgb, var(--mut) 20%, transparent);color:var(--mut)}
.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:var(--mut);margin:12px 0 0;justify-content:center}

@media (max-width:820px){
  table.mat{font-size:12.5px}
  table.mat thead th,table.mat tbody td{padding:9px 10px}
}
@media (max-width:720px){
  .pmodal-body{grid-template-columns:1fr}
}
.series-empty{grid-column:1/-1;text-align:center;color:var(--mut);padding:40px 0;font-size:14px}

/* ==========================================================================
   新版块（2026-09-20 栏目调整）：首页 / 系列页 / 品牌故事 / 大师介绍
   ========================================================================== */

/* ---------- 首页主视觉 ---------- */
.home-hero{
  position:relative;min-height:min(78vh,640px);margin:-44px -28px 40px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:80px 24px;overflow:hidden;
  background:
    linear-gradient(180deg,color-mix(in srgb, var(--media-scrim) 62%, transparent) 0%,color-mix(in srgb, var(--media-scrim) 78%, transparent) 60%,var(--bg) 100%),
    url("../img/craft/artisan-hands.jpg") center 38%/cover no-repeat;
  border-bottom:1px solid var(--line);
}
.home-hero-inner{max-width:760px;position:relative}
.home-hero .eyebrow{color:var(--primary-hi)}
.home-hero h1{
  font-family:var(--serif);font-size:clamp(30px,4.6vw,54px);letter-spacing:10px;
  margin:0 0 14px;color:var(--on-media-strong);text-shadow:0 6px 30px var(--fx-text-shadow);
}
.home-hero .lead{color:var(--on-media);font-size:15.5px;max-width:620px;margin:0 auto 26px}
.home-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.home-cta .btn-primary{text-decoration:none}
.home-cta .btn-outline{background:color-mix(in srgb, var(--media-scrim) 45%, transparent);border-color:var(--primary);color:var(--primary-hi)}
.home-hero-note{position:absolute;left:0;right:0;bottom:14px;font-size:11px;color:color-mix(in srgb, var(--on-media) 55%, transparent)}

/* ---------- 首页三大入口 ---------- */
.home-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0 0 56px}
.quick-card{
  position:relative;display:block;text-decoration:none;color:var(--text);
  border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  background:var(--panel);transition:transform var(--dur),border-color var(--dur);
}
.quick-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb, var(--primary) 55%, transparent)}
.quick-card img{width:100%;height:200px;object-fit:cover;display:block;background:var(--media-bg)}
.quick-card-body{padding:16px 18px 20px}
.quick-card-body h3{font-family:var(--serif);font-size:19px;margin:0 0 6px;letter-spacing:2px}
.quick-card-body p{margin:0;color:var(--mut);font-size:13px}
.quick-card-tag{
  position:absolute;top:12px;left:12px;padding:3px 10px;border-radius:6px;font-size:11px;
  background:var(--fx-scrim);color:var(--primary-hi);border:1px solid var(--line);
}

/* ---------- 通用区块标题 ---------- */
.block-head{text-align:center;max-width:700px;margin:0 auto 26px}
.block-head h2{font-family:var(--serif);font-size:clamp(22px,2.6vw,32px);letter-spacing:6px;margin:0 0 8px}
.block-head p{color:var(--mut);font-size:13.5px;margin:0}
.block{margin-bottom:64px}
.block-foot{text-align:center;margin-top:22px}

/* ---------- 首页大师摘要 ---------- */
.home-master{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:26px;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px}
.home-master h3{font-family:var(--serif);font-size:24px;margin:0 0 4px;letter-spacing:3px}
.home-master .role{color:var(--primary);font-size:13px;letter-spacing:2px;margin:0 0 12px}
.home-master p{color:var(--mut);font-size:14px;margin:0 0 10px}

/* ---------- 系列页头 ---------- */
.series-hero{
  position:relative;margin:-44px -28px 30px;padding:64px 28px 48px;text-align:center;
  background:
    linear-gradient(180deg,color-mix(in srgb, var(--media-scrim) 68%, transparent),var(--bg) 100%),
    url("../img/product/collection.jpg") center 45%/cover no-repeat;
  border-bottom:1px solid var(--line);
}
.series-hero h1{font-family:var(--serif);font-size:clamp(28px,3.6vw,44px);letter-spacing:10px;margin:0 0 10px;color:var(--on-media-strong);text-shadow:0 4px 24px var(--fx-text-shadow)}
.series-hero p{color:var(--on-media);max-width:640px;margin:0 auto;font-size:14.5px}
.series-hero.crystal{
  background:
    linear-gradient(180deg,color-mix(in srgb, var(--media-scrim) 70%, transparent),var(--bg) 100%),
    url("../photos/necklaces-hanging-on-black.jpg") center 40%/cover no-repeat;
}
.series-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:18px}
.series-count{font-size:13px;color:var(--mut)}
.craft-block{margin:0 0 44px}
.craft-block-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:18px}
.craft-block-head h2{font-family:var(--serif);font-size:22px;margin:0;letter-spacing:3px}
.craft-block-head p{margin:0;color:var(--mut);font-size:13px}
.badge.tag{background:color-mix(in srgb, var(--primary) 22%, transparent);color:var(--primary-hi)}

/* ---------- 品牌故事 ---------- */
.story-lead{font-family:var(--serif);font-size:clamp(17px,2vw,21px);line-height:1.9;color:var(--text);
  border-left:3px solid var(--primary);padding-left:18px;margin:0 0 30px}
.story-body{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px;align-items:start;margin-bottom:56px}
.story-body p{color:var(--mut);font-size:14.5px;line-height:2;margin:0 0 16px}
.story-body img{width:100%;border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--media-bg)}
.timeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.timeline-item{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 16px}
.timeline-item .no{font-family:var(--serif);font-size:13px;color:var(--primary);letter-spacing:2px}
.timeline-item h4{margin:6px 0 6px;font-size:15px;font-family:var(--serif);letter-spacing:1px}
.timeline-item p{margin:0;color:var(--mut);font-size:12.5px}
.cert-row-list{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.cert-chip{
  border:1px dashed var(--line);border-radius:var(--radius);padding:12px 16px;font-size:12.5px;color:var(--mut);
  background:color-mix(in srgb, var(--primary) 4%, transparent);
}

/* ---------- 大师介绍 ---------- */
.artist-profile{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:28px;align-items:start;margin-bottom:52px}
.artist-facts{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:8px}
.artist-facts li{font-size:13.5px;color:var(--mut)}
.artist-facts b{color:var(--text);font-weight:600;margin-right:6px}
.artist-quote{border-left:3px solid var(--primary);padding-left:16px;color:var(--text);font-family:var(--serif);font-size:16px;line-height:1.9;margin:18px 0 0}
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.team-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.team-card h4{margin:0 0 4px;font-size:15px;font-family:var(--serif)}
.team-card .role{color:var(--primary);font-size:12px;margin:0 0 8px}
.team-card p{margin:0;color:var(--mut);font-size:12.5px}

/* ---------- 待提供素材占位（原型期用，替换真实素材后删除） ---------- */
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12.5px;color:var(--mut-2);margin:0 0 22px}
.breadcrumb a{color:var(--mut);text-decoration:none}
.breadcrumb a:hover{color:var(--primary-hi)}
.breadcrumb em{font-style:normal;color:var(--text)}

/* ---------- 作品详情页（works/*.html，由 tools/build-works.mjs 生成） ---------- */
.detail-wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:32px;align-items:start;margin-bottom:52px}
.detail-main{
  width:100%;border-radius:var(--radius-lg);border:1px solid var(--line);
  background:var(--media-bg);display:block;
}
/* 多角度图集：一排小图，图多横向滑动，不换行 */
.detail-thumbs{
  display:flex;gap:8px;margin-top:10px;align-items:center;
  overflow-x:auto;overscroll-behavior-x:contain;padding:2px 2px 6px;
  scrollbar-width:thin;
}
.detail-thumbs::-webkit-scrollbar{height:5px}
.detail-thumbs::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}
.detail-thumb{
  flex:0 0 auto;width:72px;height:72px;padding:0;cursor:pointer;
  border:1px solid var(--line-soft);border-radius:10px;overflow:hidden;background:var(--media-bg);
  transition:border-color .16s,transform .16s;
}
.detail-thumb:hover{transform:translateY(-2px);border-color:var(--line)}
.detail-thumb.is-active{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.detail-thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* 主图下方的角度说明：当前角度 + 序号 + 操作提示 */
.detail-shot-caption{
  display:flex;align-items:baseline;gap:10px;margin:2px 0 0;
  font-size:11.5px;color:var(--mut-2);letter-spacing:.5px;
}
.detail-shot-caption #shotLabel{color:var(--primary-hi);font-weight:600}
.detail-shot-hint{margin-left:auto;color:var(--mut-2);font-size:11px}
/* 无图集时的三个待补位：等宽一排虚线框 */
.detail-thumbs.is-placeholder{overflow:visible}
.detail-thumbs.is-placeholder .thumb-slot{flex:1 1 0;min-width:0}
.thumb-slot{
  min-height:84px;border:1px dashed var(--line);border-radius:var(--radius);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  font-size:11.5px;color:var(--mut-2);
  background:color-mix(in srgb, var(--primary) 4%, transparent);
}
.thumb-slot em{font-style:normal;color:var(--primary);font-size:11px}
.detail-info h1{font-family:var(--serif);font-size:clamp(24px,2.8vw,34px);letter-spacing:4px;margin:8px 0 8px}
.detail-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.detail-badges .badge{position:static}
.detail-theme{color:var(--primary);font-size:13px;letter-spacing:2px;margin:0 0 14px}
.detail-price{font-family:var(--serif);font-size:32px;color:var(--primary-hi);font-weight:700;margin:0 0 14px}
.detail-price small{font-size:14px;color:var(--mut);font-weight:400;margin-right:6px}
.detail-desc{color:var(--text);opacity:.92;font-size:14.5px;line-height:2;margin:0 0 20px}
.detail-actions{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 0}
.detail-section{margin:0 0 44px}
.detail-section h2{font-family:var(--serif);font-size:20px;letter-spacing:3px;margin:0 0 12px;
  padding-bottom:8px;border-bottom:1px solid var(--line)}
.detail-section p{color:var(--mut);font-size:14px;line-height:2;margin:0 0 12px}
.detail-tip{
  border:1px dashed var(--line);border-radius:var(--radius);padding:12px 16px;font-size:12.5px;color:var(--text);opacity:.85;
  background:color-mix(in srgb, var(--primary) 4%, transparent);
}

.placeholder-frame{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  min-height:260px;border:1px dashed var(--line);border-radius:var(--radius-lg);
  background:color-mix(in srgb, var(--primary) 5%, transparent);
  color:var(--mut);font-size:13px;text-align:center;padding:24px;
}
.placeholder-frame .ph-title{font-family:var(--serif);font-size:16px;color:var(--primary-hi);letter-spacing:2px}
.placeholder-frame .ph-note{font-size:11.5px;color:var(--mut-2)}
/* 「匠者风采」的人物/工作照：没有真实大师照之前用工作室实拍，不用占位框 */
.artist-photo{margin:0}
.artist-photo img{width:100%;border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--media-bg);display:block}
.artist-photo figcaption{margin-top:10px;font-size:11.5px;color:var(--mut);letter-spacing:.5px;text-align:center}
.todo-list{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:8px}
.todo-list li{font-size:13px;color:var(--mut);display:flex;gap:8px}
.todo-list li::before{content:"□";color:var(--primary)}

@media (max-width:900px){
  .home-quick{grid-template-columns:1fr}
  .home-master,.story-body,.artist-profile{grid-template-columns:1fr}
  .home-hero{margin:-28px -14px 28px;padding:56px 16px}
  .series-hero{margin:-28px -14px 24px;padding:48px 16px 36px}
}

/* ---------- 作品详情页 · 手机端（2026-10-04）----------
   客户口径：上方是多图相册，下方是参数与信息；同类推荐不再是一张大卡（改两列小卡）；
   两个按钮固定到底部。规则由 tools/build-works.mjs 按 .detail/.btn 白名单抽到 work-detail.css。 */
@media (max-width:768px){
  .detail-wrap{grid-template-columns:1fr;gap:16px;margin-bottom:30px}
  .detail-main{border-radius:var(--radius);max-height:56vh;object-fit:contain;background:var(--media-bg)}
  .detail-thumbs{gap:7px;margin-top:8px}
  .detail-thumb{width:58px;height:58px;border-radius:8px}
  .detail-shot-caption{font-size:11px}
  .detail-shot-hint{display:none}

  .detail-info h1{font-size:22px;letter-spacing:2px;margin:6px 0 4px}
  .detail-theme{font-size:12px;letter-spacing:1px;margin-bottom:10px}
  .detail-price{font-size:26px;margin-bottom:10px}
  .detail-price small{font-size:12.5px}
  .detail-desc{font-size:14px;line-height:1.95;margin-bottom:14px}
  .spec-table{font-size:12.5px;margin-bottom:14px}
  .spec-table th,.spec-table td{padding:7px 8px}
  .spec-table th{width:32%}
  .cert-row{font-size:12px;margin-top:12px}
  .detail-section{margin-bottom:28px}
  .detail-section h2{font-size:17px;letter-spacing:2px;margin-bottom:10px}
  .detail-section p{font-size:13.5px;line-height:1.9}
  .detail-tip{font-size:12px;padding:10px 12px}

  /* 同类推荐：两列小卡，文字跟着收一档 */
  .detail-section .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .detail-section .grid > a .p-5,.detail-section .grid > a .md\:p-6{padding:10px 11px}
  .detail-section .grid > a h3{font-size:13.5px;margin-bottom:3px;line-height:1.35}
  .detail-section .grid > a p{font-size:11px;margin-bottom:5px;letter-spacing:.5px}
  .detail-section .grid > a p:last-of-type{font-size:12.5px;margin-bottom:0}

  /* 两个按钮固定到底部（安全区留白），正文末尾留出空间避免被压住 */
  .detail-actions{
    position:fixed;left:0;right:0;bottom:0;z-index:80;margin:0;
    display:grid;grid-template-columns:1.15fr 1fr;gap:10px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--panel) 94%,transparent);
    backdrop-filter:blur(12px);border-top:1px solid var(--line);
  }
  .detail-actions .btn{width:100%;text-align:center;padding:12px 8px;font-size:14px;letter-spacing:1px;border-radius:10px}
  .detail-section:last-child{padding-bottom:74px}
}