/* Benks 邦克仕 · 皮肤
   青 #28BCC6 + 墨蓝 #0B1F2A + 纸白，三色以内；直角。辅助图形是角括号：只用在两处——对比框里的取景角标、货架下沿的托架角。
   主手法：出血。图片贴到视口两侧，相邻两张零间距共享一条边，一大两小拼成整块 2:1；不加边框、阴影、底色。
   场景：「货架」——包装 5 张钉住横移（.rail[data-rail="scrub"]），本页唯一的钉住场景。
   招牌动作：标志前后对比拖拽分割（.compare 原语 + 本页的对齐缩放）。
   素材是 PPT 页：统一 object-fit: cover; object-position: center 55%; 容器 2.1:1，把页眉页脚裁掉。 */

/* 版心修正：site.css 的 --page 用了 100%，在 .scene 内部的子元素上会按父级内容宽解析（负 margin 出血会少拉出去），这里改用 100vw，数值同口径 */


html[data-skin="benks"]{
  --bk-teal:#28BCC6;
  --bk-ink:#0B1F2A;
  --bk-sheet:#F7F7F7;          /* 方案页自身的底色，只用来补齐对比图缩放后露出的边 */
  --skin-accent:var(--bk-teal);
  --skin-ground-fg:var(--bk-ink);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"])[data-skin="benks"]{--skin-accent:var(--bk-teal)}
}
:root[data-theme="dark"][data-skin="benks"]{--skin-accent:var(--bk-teal)}

/* 统一裁切：PPT 页眉页脚 */
html[data-skin="benks"] .pic{--pos:50% 55%}
html[data-skin="benks"] .chero__fig img{aspect-ratio:2.4;object-position:50% 30%}   /* 首图例外：这页内容偏上、下半是空白和说明，2.4:1 + 30% 才裁得干净 */

/* 浮动标签：墨蓝底白字，编号用青 */
html[data-skin="benks"] .pic .tag,.bk-cmp .tag,.bk-cmpfig .tag{background:var(--bk-ink);color:#fff}
html[data-skin="benks"] .pic .tag b,.bk-cmp .tag b,.bk-cmpfig .tag b{color:var(--bk-teal)}
html[data-skin="benks"] .pic .tag > span{opacity:.86}
/* 标签挂在图内左上：PPT 页上沿已裁成空白，下沿常有说明小字 */
html[data-skin="benks"] .pic--tag-in figcaption{left:14px;top:14px;bottom:auto;max-width:calc(100% - 28px)}

/* ---------- 出血拼块 ---------- */
/* 留：出血拼块拉到视口两侧；宽度同时按「高不超过一屏」封顶，超出时在版心中线两侧居中（% 取父级内容宽） */
.bk-bleed{--bk-w:min(calc(100% + 2 * var(--page)),var(--bk-cap,calc((100svh - 150px) / .32)));width:var(--bk-w);margin-inline:calc((100% - var(--bk-w)) / 2)}
.bk-duo{--bk-cap:calc((100svh - 150px) / .24)}
.bk-wall{--bk-cap:calc((100svh - 150px) / .16)}
.bk-band{--bk-cap:calc((100svh - 150px) / .34)}   /* 10-14 辅助图形换原图后按原比例 2200:739 整张显示 */
/* 收：前后对比进版心，最宽 720px（标志原图 1460 宽，正好 2x） */
.bk-cmpwrap{max-width:720px;margin-bottom:clamp(20px,2.4vw,32px)}
.bk-sec{padding-bottom:clamp(64px,7vw,104px)}
.bk-sec .gsec__head{margin-bottom:clamp(28px,3.4vw,48px)}
.bk-sec .pic .pic__btn{background:var(--bk-sheet)}
.bk-mosaic{display:grid;grid-template-columns:2fr 1fr;grid-auto-flow:row dense}
.bk-mosaic > :first-child{grid-row:span 2}
.bk-mosaic--r{grid-template-columns:1fr 2fr}
.bk-mosaic--r > :first-child{grid-column:2}
.bk-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.bk-wall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.bk-band{margin-top:0}
.bk-band .pic__btn{aspect-ratio:var(--ar)}

/* ---------- 01 标志前后对比 ---------- */
.bk-cmpfig{position:relative;margin:0;min-width:0}
.bk-cmp{background:var(--bk-sheet);--compare-c:var(--bk-teal);height:100%}
.bk-cmp .compare__b{background:var(--bk-sheet)}
/* 10-14：换成丘丘给的标志原图。两张已在同一张 21:10 画布上对齐（字形高 = 宽的 10%，水平垂直居中，底色 #F7F7F7），不再需要缩放和遮罩。 */
.bk-cmp img{object-fit:cover}
.bk-cmp .compare__handle::after{content:"‹›";display:grid;place-items:center;color:#fff;font-family:var(--mono);font-size:16px;letter-spacing:.1em;line-height:1;box-shadow:none}
.bk-cmp .compare__tag{top:14px}
.bk-cmp .compare__tag--b{left:14px}
.bk-cmp .compare__tag--a{right:14px}
/* 角括号取景框：框住字形 */
.bk-brk{position:absolute;inset:27% 24.5%;z-index:1;pointer-events:none;--l:clamp(10px,1.4vw,20px);--c:var(--bk-teal);
  background:
    linear-gradient(var(--c),var(--c)) 0 0 / var(--l) 2px,linear-gradient(var(--c),var(--c)) 0 0 / 2px var(--l),
    linear-gradient(var(--c),var(--c)) 100% 0 / var(--l) 2px,linear-gradient(var(--c),var(--c)) 100% 0 / 2px var(--l),
    linear-gradient(var(--c),var(--c)) 0 100% / var(--l) 2px,linear-gradient(var(--c),var(--c)) 0 100% / 2px var(--l),
    linear-gradient(var(--c),var(--c)) 100% 100% / var(--l) 2px,linear-gradient(var(--c),var(--c)) 100% 100% / 2px var(--l);
  background-repeat:no-repeat}
.bk-cmpfig figcaption{position:absolute;left:14px;bottom:14px;z-index:4;max-width:calc(100% - 28px);line-height:0;pointer-events:none}

/* ---------- 03 货架 ---------- */
.bk-shelf{--rail-len:210vh;--rail-w:min(60vw,940px);--rail-gap:0px;--rail-dim:.42}
.bk-shelf .rail__view{margin-right:calc(var(--page) * -1)}
.bk-shelf .rail__track{padding-bottom:22px;background:linear-gradient(var(--bk-teal),var(--bk-teal)) 0 calc(100% - 8px) / 100% 2px no-repeat}
.bk-shelf .rail__item{position:relative}
/* 托架：每格下沿一对角括号 */
.bk-shelf .rail__item::after{content:"";position:absolute;left:10%;right:10%;bottom:-22px;height:14px;pointer-events:none;
  background:linear-gradient(var(--bk-teal),var(--bk-teal)) 0 100% / 2px 100%,linear-gradient(var(--bk-teal),var(--bk-teal)) 100% 100% / 2px 100%;background-repeat:no-repeat}
.bk-step{display:grid;grid-template-columns:auto 1fr;align-items:end;column-gap:14px;row-gap:8px}
.bk-step__no{font-family:"Archivo",var(--cn);font-weight:800;font-stretch:80%;font-size:clamp(88px,10vw,168px);line-height:.8;letter-spacing:-.02em;color:var(--bk-teal);font-variant-numeric:tabular-nums}
.bk-step__of{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--mute);padding-bottom:.4em}
.bk-step__t{grid-column:1 / -1;font-family:var(--cn);font-weight:700;font-size:clamp(18px,1.6vw,24px);line-height:1.4}
.bk-step__s{grid-column:1 / -1;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--mute);margin-top:-4px}
.bk-shelf .rail__bar{color:var(--ink);opacity:.5}   /* 青留给货架线，进度条退成中性 */
/* 静态退化（无 JS / reduced-motion）：货架变成可横滑的一排，间距 0 也成立 */

/* ---------- 窄屏 ---------- */
@media (max-width: 899px){
  .bk-mosaic,.bk-mosaic--r{grid-template-columns:1fr 1fr}
  .bk-mosaic > :first-child,.bk-mosaic--r > :first-child{grid-column:1 / -1;grid-row:auto}
  .bk-wall{grid-template-columns:1fr 1fr}
  .bk-wall > :first-child{grid-column:1 / -1}
  html[data-skin="benks"] .pic .tag,.bk-cmp .tag{font-size:10px;padding:4px 7px 3px}
  html[data-skin="benks"] .pic--tag-in figcaption{left:8px;top:8px;max-width:calc(100% - 16px)}
  .bk-cmpfig figcaption{left:8px;bottom:8px;max-width:calc(100% - 16px)}
  .bk-cmp .compare__tag{top:8px}
  .bk-cmp .compare__tag--b{left:8px}
  .bk-cmp .compare__tag--a{right:8px}
  .bk-cmp .compare__handle::after{width:36px;height:36px;margin:-18px 0 0 -18px;font-size:13px}
  .bk-shelf{--rail-w:84vw;--rail-len:220vh}
  .bk-step{grid-template-columns:auto auto 1fr;align-items:baseline}
  .bk-step__no{font-size:clamp(52px,16vw,80px)}
  .bk-step__t{grid-column:auto;font-size:15px}
  .bk-step__s{display:none}
}
/* 辅助图形长带：标签挂右上，避开上方对比图的图注 */
html[data-skin="benks"] .bk-band__pic figcaption{left:auto;right:14px}
@media (max-width: 899px){html[data-skin="benks"] .bk-band__pic figcaption{right:8px}}