/* CASE BANG · 皮肤
   红 #E10A35 + 墨黑 + 纸白，三色以内；直角；标题字宽 70%；点缀黑。
   主手法：斜切。图片切出 8° 斜边（tan 8° ≈ .1405），相邻两张斜边互补，桌面上竖缝拼成 Λ / V，窄屏上横缝拼成折线。
   招牌动作：① 四个关键词 marquee 横穿开场（60s 一圈，scenes.js 原语；js/scene-casebang.js 把它挪进 .chero）
            ② 图片斜向揭开（data-reveal="slash"，沿 8° 斜线从左扫到右，只用一次 clip-path）。
   本页没有钉住场景；03 是两扇平行四边形窗口的同步 scrub（sticky，不整屏钉住）。 */

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


html[data-skin="casebang"]{
  --cb-red:#E10A35;
  --cb-ink:#141414;
  --cb-white:#FFFFFF;
  --cb-tan:.1405;
  --cb-gap:10px;
  --skin-stretch:70%;
  --skin-accent:var(--cb-ink);
  --skin-ground:var(--cb-red);
  --skin-ground-fg:var(--cb-white);
  --ba:var(--cb-red);
  /* Λ / V 纹样单元（CASE BANG 辅助图形：一个 Λ 接一个 V，等宽粗笔画），用作 mask，颜色由 background 决定 */
  --cb-av:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='100' viewBox='0 0 150 100'%3E%3Cpath d='M0 100 25 0h20l25 100H50L35 40 20 100zM75 0h20l15 60 15-60h20l-25 100h-20z'/%3E%3C/svg%3E");
  --cb-lam:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='100' viewBox='0 0 70 100'%3E%3Cpath d='M0 100 25 0h20l25 100H50L35 40 20 100z'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"])[data-skin="casebang"]{--skin-accent:var(--cb-red)}
}
:root[data-theme="dark"][data-skin="casebang"]{--skin-accent:var(--cb-red)}
@media (max-width: 699px){html[data-skin="casebang"]{--cb-gap:6px;--cb-tan:.1051}}   /* 窄屏收到 6°，宽图不至于被切掉太多 */

/* ---------- 开场：品牌名紧凑粗体；首图底边切成一个 8° 的 Λ ---------- */
html[data-skin="casebang"] .chero__brand{letter-spacing:-.025em}
html[data-skin="casebang"] .chero__fig{container-type:inline-size}
html[data-skin="casebang"] .chero__fig img{clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - 50cqw * var(--cb-tan)),0 100%)}   /* 首图收进版心后，Λ 的深度按图宽算，保持 8° */

/* ---------- 关键词 marquee ---------- */
.cb-mq{position:relative;background:var(--cb-red);color:var(--cb-white);padding:clamp(14px,1.6vw,22px) 0 clamp(26px,3vw,44px);font-family:"Archivo",var(--cn)}
.chero > .cb-mq{margin:calc(-1 * (50vw - var(--page)) * var(--cb-tan) + 4px) calc(var(--page) * -1) 0;padding-top:0;z-index:1}
.cb-mq .marquee__group{align-items:flex-start;padding-right:.32em}
.cb-mq__w{font-weight:800;font-stretch:70%;font-size:clamp(52px,8.6vw,140px);line-height:.86;letter-spacing:-.01em;text-transform:uppercase}
.cb-mq__w--o{color:transparent;-webkit-text-stroke:max(1.5px,.014em) var(--cb-white)}
.cb-mq__cn{margin:.3em 0 0 .5em;font-family:var(--cn);font-weight:700;font-size:clamp(12px,1.05vw,16px);letter-spacing:.12em;line-height:1;writing-mode:vertical-rl}
.cb-mq__sep{flex:none;width:clamp(30px,4.6vw,74px);height:clamp(44px,7.3vw,118px);margin:0 .32em 0 .5em;background:var(--cb-ink);-webkit-mask:var(--cb-lam) center / contain no-repeat;mask:var(--cb-lam) center / contain no-repeat}

/* ---------- 斜切拼图 ---------- */
/* 留：斜切拼图保持原来的出血宽度（gut 到 gut），折线不收窄；宽度按最扁的一行封顶，使每行不高过一屏 */
.cb-cuts{container-type:inline-size;display:flex;flex-direction:column;gap:var(--cb-gap);margin-inline:calc((var(--page) - var(--gut)) * -1);max-width:calc((100svh - 150px) * 3);}
.cb-row{display:grid;grid-template-columns:var(--cols);grid-template-rows:minmax(0,1fr);aspect-ratio:var(--row-ar);--S:calc(100cqw / var(--row-ar) * var(--cb-tan))}
.cb-cut{height:100%;--tag-x:14px}
.cb-cut:not(.cb-cut--first){margin-left:calc(var(--cb-gap) - var(--S))}
.cb-cut .pic__btn{height:100%;background:none;clip-path:polygon(calc(var(--tl,0) * var(--S)) 0,calc(100% - var(--tr,0) * var(--S)) 0,calc(100% - var(--br,0) * var(--S)) 100%,calc(var(--bl,0) * var(--S)) 100%)}
.cb-cut .pic__btn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.cb-cut figcaption{left:calc(var(--bl,0) * var(--S) + 14px);bottom:14px;max-width:calc(100% - var(--S) - 28px);transform:none}
.cb-cut .tag,.cb-duo .tag{background:var(--cb-ink);color:var(--cb-white)}
.cb-cut .tag b,.cb-duo .tag b{color:var(--cb-red)}
.cb-cut .tag > span,.cb-duo .tag > span{opacity:.86}

/* 斜向揭开：沿斜线从左扫到右。等待态写在后面：scenes.js 一开始同时加 rv-wait 与 rv-go，
   同权重时后写的赢，等待态才压得住终态（共享原语 data-reveal="clip" 正是这里写反了，见报告）。 */
.scn-m [data-reveal="slash"].rv-go{clip-path:polygon(-60% -48px,calc(114% + 48px) -48px,calc(100% + 48px) calc(100% + 48px),-60% calc(100% + 48px))}
.scn-m [data-reveal="slash"].rv-wait{opacity:1;clip-path:polygon(-60% -48px,0% -48px,-14% calc(100% + 48px),-60% calc(100% + 48px))}

/* ---------- 01 品牌书 ---------- */
.cb-book .gsec__head{margin-bottom:clamp(28px,3.4vw,48px)}

/* ---------- 02 应用：红色出血，顶边一条 Λ/V 纹样带 ---------- */
.cb-apps{padding-top:0}
.cb-band{height:clamp(30px,3.4vw,48px);margin:0 calc(var(--page) * -1) clamp(48px,6vw,88px);background:var(--cb-ink);-webkit-mask:var(--cb-av) 0 0 / auto 100% repeat-x;mask:var(--cb-av) 0 0 / auto 100% repeat-x}
.cb-apps .gsec__head{margin-bottom:clamp(28px,3.4vw,48px)}

/* ---------- 03 联名与专题：两扇平行四边形窗口，合起来是一个 Λ ---------- */
.cb-duo{--scrub-len:240vh;--win-h:min(74svh,calc(100svh - 150px),800px)}
.cb-duo .scrub__stage{grid-template-columns:minmax(0,1fr) auto}
.cb-duo__wins{container-type:inline-size;width:min(44vw,620px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--cb-gap);--S:calc((100cqw - var(--cb-gap)) / 2 * var(--cb-tan))}
.cb-duo__col{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0}
.cb-duo .scrub__win{width:100%;border-radius:0;background:color-mix(in srgb,currentColor 6%,transparent)}
.cb-duo__col--1 .scrub__win{clip-path:polygon(0 var(--S),100% 0,100% calc(100% - var(--S)),0 100%)}
.cb-duo__col--2 .scrub__win{clip-path:polygon(0 0,100% var(--S),100% 100%,0 calc(100% - var(--S)))}
.cb-duo__col--2 .tag{margin-left:auto}
.cb-duo__col--1 .scrub__bar{display:none!important}   /* 两扇窗同步滚动，进度条留一条就够 */
.cb-duo .scrub__bar{top:calc(var(--S) + 8px);bottom:calc(var(--S) + 8px)}
.cb-duo .scrub__notes li::before{border-radius:0;width:9px;height:9px;background:var(--cb-red);-webkit-mask:var(--cb-lam) center / contain no-repeat;mask:var(--cb-lam) center / contain no-repeat}
.cb-duo .scrub__notes{font-size:13px}

/* ---------- 窄屏：所有图竖排，横向斜缝 ---------- */
@media (max-width: 699px){
  .cb-cuts{gap:0}
  .cb-row{display:flex;flex-direction:column;aspect-ratio:auto;--Sm:calc(100cqw * var(--cb-tan))}
  .cb-cut{height:auto;margin-left:0!important;aspect-ratio:var(--m-ar,16 / 9)}
  .cb-cut:not(.cb-cut--mfirst){margin-top:calc(var(--cb-gap) - var(--Sm))}
  .cb-cut.cb-cut--mflat{margin-top:var(--cb-gap)}   /* 上沿是平的（挨着长方形那张）：不用往上叠，留正常间距 */
  .cb-cut .pic__btn{clip-path:polygon(0 calc(var(--lt,0) * var(--Sm)),100% calc(var(--rt,0) * var(--Sm)),100% calc(100% - var(--rb,0) * var(--Sm)),0 calc(100% - var(--lb,0) * var(--Sm)))}
  .cb-cut .pic__btn img{object-position:var(--m-pos,var(--pos,50% 50%))}
  .cb-cut figcaption{left:10px;bottom:calc(var(--lb,0) * var(--Sm) + 10px);max-width:calc(100% - 20px)}
  .cb-cut--mfirst figcaption,.cb-cut figcaption{z-index:2}
  .cb-cut .tag{font-size:10px;padding:5px 8px 4px}
  /* 单张成行的海报：标签挪到图外下沿，不压人物脸 */
  .cb-cut:only-child{margin-bottom:36px}
  .cb-cut:only-child figcaption{bottom:auto;top:calc(100% - var(--lb,0) * var(--Sm) + 8px)}
  .cb-mq__cn{display:none}
  .cb-duo{--win-h:min(54svh,520px);--scrub-len:260vh}
  .cb-duo .scrub__stage{grid-template-columns:minmax(0,1fr)}
  .cb-duo__wins{width:100%}
  .cb-duo .tag{font-size:10px;padding:5px 8px 4px;max-width:100%}
}
@media (prefers-reduced-motion: reduce){
  [data-reveal="slash"]{clip-path:none!important}
}
/* 静态退化时 03 不再 sticky，补回区块上沿的留白 */
html:not(.scn-m) .cb-duo{padding-top:clamp(56px,7vw,104px)}