/* 丘嘉明 · 作品集 B 版 · 皮肤与场景原语
   ------------------------------------------------------------------
   骨架统一（site.css，原样不动），皮肤随项目（这里 + css/skin-<id>.css）。
   每个案例页是 <html class="case" data-skin="<案例 id>">；scenes.js 运行后在 <html> 上加：
     .scn    脚本已运行（分段切换、拖拽对比等交互可用）
     .scn-m  且允许动效（没有 prefers-reduced-motion: reduce）。所有滚动驱动、钉住、进场都只在 .scn-m 下生效；
             没有 JS 或 reduced-motion 时，一切退化为静态、完整可读的版式。

   动效只用方向书 §2 的 5 个动作；只动 transform / opacity（clip-path 只在 data-reveal="clip" 进场时用一次）。
   CSS 滚动驱动动画一律包在 @supports (animation-timeline: view()) 里；不支持时由 scenes.js 写 --p / --q 回落。

   ==================================================================
   HTML 结构约定（后续页面照着写；build 里用 helpers 的 h.pic / h.tag / h.head / h.count 可以少写一半）
   ==================================================================

   ▍皮肤变量（写在 css/skin-<id>.css 的 html[data-skin="<id>"]{…} 里，默认值 = A 版）
     --skin-radius   图片与色块圆角               默认 0
     --skin-accent   点缀色（标签点、进度条等）   默认 var(--ink)
     --skin-stretch  开场品牌名字宽 font-stretch  默认 74%
     --skin-paper    正文底色                     默认 var(--paper)
     --skin-ground   开场 / 出血区块底色          默认 var(--b)
     --skin-ground-fg  出血区块上的字色           默认 var(--bf)
     --skin-mask     .pic--mask 用的 clip-path    默认 none（例：url(#neh-leaf)，clipPath 内联在页面里）
     --skin-pop      「长出来」的回弹曲线         默认 cubic-bezier(.34,1.3,.64,1)

   ▍.scene  内容区块（替代 A 版 .gsec）
     <section class="scene [scene--bleed]" aria-label="…">
       <header class="gsec__head scene__head">…</header>          ← h.head('01','标题','一句说明')
       …
     </section>
     scene--bleed：整块铺 --skin-ground 出血，字色 --skin-ground-fg。

   ▍.pic  图片（无边框 / 无阴影 / 无底色；点开进灯箱；图注是浮在图边的 .tag）
     <figure class="pic [pic--fill] [pic--mask]" style="--ar:4/3" data-reveal="up">
       <button class="fig__btn pic__btn" type="button" data-full="src" data-cap="图注" data-long="0" aria-label="放大查看：图注">
         <img src width height loading="lazy" alt>
       </button>
       <figcaption><span class="tag"><b>01</b><span>图注</span></span></figcaption>
     </figure>
     pic--fill：按 --ar 裁切（object-fit:cover，--pos 控制 object-position）；pic--mask：套 --skin-mask。
     --tag-x：标签离左边距离（默认随圆角）。.pic--tag-top 把标签挂到上边。

   ▍.tag  浮动 mono 小标签：<span class="tag"><b>01</b><span>文字</span></span>（<b> 可省）
     .tag.is-lit / 父级 .is-on 时点亮（用于 scrub 注释）。

   ▍[data-reveal]  揭开进场：up | clip | grow | fade
     同一批进入视口的元素自动按 DOM 顺序错开（--stagger，默认 70ms）。只给首屏以下的元素加等待态。

   ▍.count  计数：<span class="count" data-count="8356443" data-count-prefix="HK$" data-count-dur="1400">HK$8,356,443</span>
     进入视口触发一次，ease-out；HTML 里写终值。最近的 [data-count-scope] 会同步得到 --count-p（0→1），
     配合 <span class="meter"><i></i></span> 做进度条。

   ▍.scrub  sticky 窗口 + 长图随滚动位移（不是整屏钉住：窗口和注释在区块内停住）
     <section class="scene scrub" data-scrub style="--scrub-len:240vh">
       <div class="scrub__stage">
         <div class="scrub__side">
           <header class="gsec__head scene__head">…</header>
           <ol class="scrub__notes">
             <li data-at="0"><b>01</b><span>品牌故事</span><small>可选一行说明</small></li>
             <li data-at=".3">…</li>                                       ← 进度到 data-at（0–1）时点亮
           </ol>
         </div>
         <div class="scrub__win">
           <button class="fig__btn scrub__btn" data-full=… data-long="1" …><img class="scrub__img" …></button>
           <span class="scrub__bar" aria-hidden="true"><i></i></span>
         </div>
       </div>
     </section>
     变量：--scrub-len 区块高（≤300vh）、--win-h 窗口高、--win-w 窗口宽。.scrub--flip 窗口在左。
     静态退化：窗口变成可内部滚动的盒子，注释全部点亮。

   ▍.rail  钉住的横向序列（每页最多一个）
     <section class="scene rail" data-rail="scrub|step" style="--rail-len:300vh">
       <div class="rail__stage">
         <span class="rail__flood" aria-hidden="true"></span>              ← 可选：到最后一帧时整屏铺 --rail-flood
         <div class="rail__aside">
           <header class="gsec__head scene__head">…</header>               ← 可选，常显
           <div class="rail__steps" aria-hidden="true">                     ← 仅动效模式显示；与条目一一对应
             <div data-rail-step>D-5</div><div data-rail-step>D-3</div>…
           </div>
         </div>
         <div class="rail__view">
           <ol class="rail__track"><li class="rail__item">…</li>…</ol>
         </div>
         <span class="rail__bar" aria-hidden="true"><i></i></span>
       </div>
     </section>
     data-rail="scrub"：轨道随滚动连续位移（CSS scroll-timeline，回落 scrollY）；头 10% 与尾 15% 停住。
     data-rail="step" ：一格一格切换（索引由滚动决定，位移用 transition），适合多页翻阅。
     当前条目 .is-on、之前 .is-past；最后一帧 .rail.is-end；[data-rail-step] 同步 .is-on。
     变量：--rail-w 条目宽、--rail-gap 间距、--rail-dim 非当前条目透明度、--rail-flood 出血色。
     静态退化：轨道变成可横向滑动的条带（scroll-snap），.rail__steps 隐藏。

   ▍.tabs  分段切换
     <div class="tabs" data-tabs>
       <div class="tabs__list" role="tablist" aria-label="…">
         <button class="tabs__tab" role="tab" id="t-a" aria-controls="p-a" aria-selected="true">FlipGo</button>…
       </div>
       <div class="tabs__panels">
         <div class="tabs__panel" role="tabpanel" id="p-a" aria-labelledby="t-a">…</div>…
       </div>
     </div>
     无 JS：面板依次排开全部可见。有 JS：面板叠在同一格里交叉淡入；← → Home End 切换。

   ▍.compare  前后对比拖拽分割（鼠标 / 键盘 / 触屏都走原生 range）
     <div class="compare" data-compare style="--ar:16/9">
       <img class="compare__a" …>                                          ← 前（底层）
       <div class="compare__b"><img …></div>                               ← 后（上层，只露出左边 --pos）
       <input class="compare__range" type="range" min="0" max="100" value="50" aria-label="前后对比">
       <span class="compare__handle" aria-hidden="true"></span>
       <span class="tag compare__tag compare__tag--a">BEFORE</span><span class="tag compare__tag compare__tag--b">AFTER</span>
     </div>

   ▍.marquee  慢速横移（hover 不停；reduced-motion 静止；离开视口暂停）
     <div class="marquee" data-marquee style="--marquee-dur:60s">
       <div class="marquee__track"><div class="marquee__group">…</div></div>   ← 脚本会复制一份 group 接成无缝循环
     </div>
   ================================================================== */

/* ---------- 皮肤默认值（= A 版） ---------- */
html[data-skin]{
  --skin-radius:0px;
  --skin-accent:var(--ink);
  --skin-stretch:74%;
  --skin-paper:var(--paper);
  --skin-ground:var(--b);
  --skin-ground-fg:var(--bf);
  --skin-mask:none;
  --skin-pop:cubic-bezier(.34,1.3,.64,1);
  --stagger:70ms;
}
html[data-skin] body{background:var(--skin-paper)}
html[data-skin] .chero,
html[data-skin] .cbar{color:var(--skin-ground-fg)}
html[data-skin] .chero{background:var(--skin-ground)}
html[data-skin] .chero__brand{font-stretch:var(--skin-stretch)}
html[data-skin] .cnav{background:color-mix(in srgb,var(--skin-paper) 86%,transparent)}

/* ---------- .scene ---------- */
.scene{position:relative;padding:0 var(--page,var(--gut)) clamp(72px,9vw,128px)}
.scene--bleed{background:var(--skin-ground);color:var(--skin-ground-fg);padding-top:clamp(56px,7vw,104px);--tag-bg:var(--skin-ground);--tag-fg:var(--skin-ground-fg)}
.scene--bleed .gsec__head{border-top-color:currentColor}
.scene--bleed .gsec__head h2 .mono,.scene--bleed .gsec__head p{color:inherit;opacity:.72}
.scene__lead{font-size:clamp(18px,1.6vw,22px);line-height:1.75;max-width:36em}

/* ---------- .tag ---------- */
.tag{display:inline-flex;align-items:baseline;gap:8px;max-width:100%;padding:6px 11px 5px;border-radius:min(var(--skin-radius),999px);background:var(--tag-bg,var(--skin-paper));color:var(--tag-fg,var(--ink));font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.06em;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tag b{font-weight:500;font-variant-numeric:tabular-nums}
.tag > span{overflow:hidden;text-overflow:ellipsis;opacity:.72}

/* ---------- .pic ---------- */
.pic{position:relative;margin:0;min-width:0;--tag-x:calc(var(--skin-radius) * .75)}
.pic .pic__btn{position:relative;display:block;width:100%;padding:0;border:0;margin:0;border-radius:var(--skin-radius);overflow:clip;background:color-mix(in srgb,currentColor 6%,transparent);color:inherit}
.pic .pic__btn img{width:100%;height:auto}
.pic--fill .pic__btn{aspect-ratio:var(--ar,4 / 3)}
.pic--fill .pic__btn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.pic--mask .pic__btn{border-radius:0;clip-path:var(--skin-mask);background:none}
.pic figcaption{position:absolute;left:var(--tag-x);bottom:0;z-index:1;max-width:calc(100% - var(--tag-x) * 2);transform:translateY(50%);line-height:0}
.pic--tag-top figcaption{bottom:auto;top:0;transform:translateY(-50%)}
.pic--tag-in figcaption{bottom:12px;left:12px;transform:none;max-width:calc(100% - 24px)}
@media (hover: hover) and (pointer: fine){
  .pic .fig__btn img{transition:transform .6s var(--out)}
  .pic .fig__btn:hover img{transform:scale(1.02)}
  .pic--fill .fig__btn:hover img{transform:scale(1.02)}
}

/* ---------- [data-reveal] 揭开进场（只在 .scn-m 且元素在首屏以下时才有等待态） ---------- */
.scn-m [data-reveal].rv-wait{opacity:0}
.scn-m [data-reveal="up"].rv-wait{transform:translateY(28px)}
.scn-m [data-reveal="grow"].rv-wait{transform:translateY(40px) scale(.96)}
.scn-m [data-reveal="grow"]{transform-origin:50% 100%}
.scn-m [data-reveal="clip"].rv-wait{opacity:1;clip-path:inset(-48px -48px 100% -48px)}
.scn-m [data-reveal="clip"].rv-go:not(.rv-wait){clip-path:inset(-48px)}
.scn-m [data-reveal].rv-go{transition:opacity .8s ease,transform .85s var(--out),clip-path .9s var(--out);transition-delay:var(--rv-d,0ms)}
.scn-m [data-reveal="grow"].rv-go{transition:opacity .5s ease,transform .8s var(--skin-pop);transition-delay:var(--rv-d,0ms)}

/* ---------- .count / .meter ---------- */
.count{display:inline-block;white-space:nowrap;font-variant-numeric:tabular-nums}
.meter{position:relative;display:block;height:2px;overflow:hidden;background:color-mix(in srgb,currentColor 16%,transparent)}
.meter i{position:absolute;inset:0;background:var(--meter-c,currentColor);transform-origin:0 50%;transform:scaleX(var(--count-p,1))}

/* ---------- .scrub ---------- */
.scrub{--scrub-len:240vh;--win-h:min(80svh,calc(100svh - 150px),860px);--win-w:min(38vw,540px)}
.scrub__stage{display:grid;grid-template-columns:minmax(0,1fr) var(--win-w);gap:clamp(24px,5vw,96px);align-items:start}
.scrub--flip .scrub__stage{grid-template-columns:var(--win-w) minmax(0,1fr)}
.scrub--flip .scrub__win{order:-1}
.scrub__side{display:flex;flex-direction:column;gap:clamp(24px,3vw,40px);min-width:0}
.scrub__side .gsec__head{grid-template-columns:minmax(0,1fr);margin-bottom:0}
.scrub__side .gsec__head h2,.scrub__side .gsec__head p{grid-column:1 / -1}
.scrub__notes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.scrub__notes li{display:grid;grid-template-columns:8px auto minmax(0,1fr);align-items:center;gap:2px 12px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;line-height:1.5}
.scrub__notes li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--skin-accent)}
.scrub__notes b{font-weight:500;font-variant-numeric:tabular-nums}
.scrub__notes small{grid-column:3;font-size:11px;letter-spacing:.04em;color:var(--mute)}
.scrub__win{position:relative;width:var(--win-w);height:var(--win-h);border-radius:var(--skin-radius);overflow:hidden auto;background:color-mix(in srgb,currentColor 5%,transparent)}
.scrub__win .scrub__btn{position:relative;display:block;width:100%;padding:0;border:0;margin:0;background:none;overflow:visible}
.scrub__img{width:100%;height:auto;transition:none!important}
.scrub__bar{position:absolute;right:10px;top:12px;bottom:12px;width:2px;border-radius:2px;background:color-mix(in srgb,var(--ink) 14%,transparent);overflow:hidden;display:none}
.scrub__bar i{position:absolute;inset:0;background:var(--skin-accent);transform-origin:50% 0;transform:scaleY(var(--p,0))}

/* 钉住的区块：内容盒必须等于整个高度（sticky 只在内容盒里停），区块间距改用 margin */
.scn-m .scrub,.rail-pin .rail{padding-bottom:0;margin-bottom:var(--scene-after,clamp(40px,5vw,80px))}
.scn-m .scrub{height:var(--scrub-len)}
.scn-m .scrub__stage{position:sticky;top:0;height:100svh;padding-block:calc(56px + 3svh) 3svh}
.scn-m .scrub__win{overflow:clip}
.scn-m .scrub__btn{height:100%}
.scn-m .scrub__img{will-change:transform;transform:translateY(calc((var(--win-h) - 100%) * var(--p,0)))}
.scn-m .scrub__bar{display:block}
.scn-m .scrub__notes li{opacity:.3;transition:opacity .45s ease}
.scn-m .scrub__notes li::before{transform:scale(.4);transition:transform .45s var(--skin-pop)}
.scn-m .scrub__notes li.is-on{opacity:1}
.scn-m .scrub__notes li.is-on::before{transform:none}
@supports (animation-timeline: view()){
  .scn-m .scrub{view-timeline:--scrub block}
  .scn-m .scrub__img{animation:qq-scrub-y linear both;animation-timeline:--scrub;animation-range:contain 0% contain 100%}
  .scn-m .scrub__bar i{animation:qq-scrub-bar linear both;animation-timeline:--scrub;animation-range:contain 0% contain 100%}
}
@keyframes qq-scrub-y{from{transform:translateY(0)}to{transform:translateY(calc(var(--win-h) - 100%))}}
@keyframes qq-scrub-bar{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* ---------- .rail ---------- */
.rail{--rail-len:300vh;--rail-w:min(46vw,640px);--rail-gap:clamp(16px,2vw,32px);--rail-dim:.32;--rail-flood:var(--b);position:relative;overflow-x:clip}
.rail__stage{position:relative;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,3vw,48px);align-items:center;isolation:isolate}
.rail__flood{position:absolute;inset:0;z-index:-1;background:var(--rail-flood);opacity:0;pointer-events:none;margin-inline:calc(var(--page,var(--gut)) * -1)}
.rail__aside{display:flex;flex-direction:column;gap:24px;min-width:0;align-self:stretch;justify-content:space-between}
.rail__aside .gsec__head{grid-template-columns:minmax(0,1fr);margin-bottom:0}
.rail__aside .gsec__head h2,.rail__aside .gsec__head p{grid-column:1 / -1}
.rail__steps{display:none}
.rail__view{min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;padding-bottom:20px}
.rail__track{list-style:none;margin:0;padding:0;display:flex;gap:var(--rail-gap);width:max-content}
.rail__item{flex:none;width:var(--rail-w);scroll-snap-align:start;min-width:0}
.rail__bar{display:none}

.rail-pin .rail{height:var(--rail-len)}
.rail-pin .rail__stage{position:sticky;top:0;height:100svh;padding-block:calc(56px + 4svh) 5svh}
.rail-pin .rail__view{overflow:visible;overflow-x:clip;overflow-clip-margin:0px;padding-bottom:0;scroll-snap-type:none}
.rail-pin .rail__track{will-change:transform}
.rail-pin .rail__steps{display:grid}
.rail-pin .rail__steps > *{grid-area:1 / 1;opacity:0;transform:translateY(.12em);transition:opacity .45s ease,transform .6s var(--out)}
.rail-pin .rail__steps > .is-on{opacity:1;transform:none}
.rail-pin .rail__item{opacity:var(--rail-dim);transition:opacity .5s ease}
.rail-pin .rail__item.is-on{opacity:1}
.rail-pin .rail__flood{transition:opacity .6s ease}
.rail-pin .rail.is-end .rail__flood{opacity:1}
.rail-pin .rail__bar{display:block;position:absolute;left:0;right:0;bottom:2svh;height:2px;background:color-mix(in srgb,currentColor 14%,transparent)}
.rail-pin .rail__bar i{position:absolute;inset:0;background:currentColor;transform-origin:0 50%}
/* 连续模式：scrollY 回落写 --q（0–1，已扣除头尾停留） */
.rail-pin [data-rail="scrub"] .rail__track{transform:translateX(calc(var(--rail-shift,0px) * -1 * var(--q,0)))}
.rail-pin [data-rail="scrub"] .rail__bar i{transform:scaleX(var(--q,0))}
@supports (animation-timeline: view()){
  .rail-pin [data-rail="scrub"]{view-timeline:--rail block}
  .rail-pin [data-rail="scrub"] .rail__track{animation:qq-rail-x linear both;animation-timeline:--rail;animation-range:contain 0% contain 100%}
  .rail-pin [data-rail="scrub"] .rail__bar i{animation:qq-rail-bar linear both;animation-timeline:--rail;animation-range:contain 0% contain 100%}
}
@keyframes qq-rail-x{0%,10%{transform:translateX(0)}85%,100%{transform:translateX(calc(var(--rail-shift,0px) * -1))}}
@keyframes qq-rail-bar{0%,10%{transform:scaleX(0)}85%,100%{transform:scaleX(1)}}
/* 一格一格：索引由滚动决定，位移交给 transition */
.rail-pin [data-rail="step"] .rail__track{transform:translateX(calc(var(--rail-stepw,0px) * -1 * var(--rail-i,0)));transition:transform .7s var(--out)}
.rail-pin [data-rail="step"] .rail__item.is-past{opacity:0}
.rail-pin [data-rail="step"] .rail__bar i{transform:scaleX(calc((var(--rail-i,0) + 1) / var(--rail-n,1)));transition:transform .5s var(--out)}

/* ---------- .tabs ---------- */
.tabs__list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(16px,2vw,28px)}
.tabs__tab{min-height:44px;padding:0 18px;border:1px solid currentColor;border-radius:999px;background:transparent;color:inherit;font-family:var(--mono);font-size:12px;letter-spacing:.08em;cursor:pointer;transition:background-color .4s ease,color .4s ease}
.tabs__tab[aria-selected="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tabs__tab:hover{background:color-mix(in srgb,currentColor 10%,transparent)}
.tabs__tab[aria-selected="true"]:hover{background:var(--ink)}
.tabs__list{display:none}
.tabs__panels{display:flex;flex-direction:column;gap:clamp(24px,3vw,40px)}
.scn .tabs__list{display:flex}
.scn .tabs__panels{display:grid}
.scn .tabs__panel{grid-area:1 / 1;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s .5s}
.scn .tabs__panel.is-on{opacity:1;visibility:visible;transition:opacity .5s ease}

/* ---------- .compare ---------- */
.compare{--pos:50%;position:relative;overflow:clip;border-radius:var(--skin-radius);aspect-ratio:var(--ar,16 / 9);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--obj-pos,50% 50%);pointer-events:none}
.compare__b{position:absolute;inset:0;overflow:clip;transform:translateX(calc(var(--pos) - 100%))}
.compare__b img{transform:translateX(calc(100% - var(--pos)))}
.compare__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:3;-webkit-appearance:none;appearance:none;background:none}
.compare__handle{position:absolute;inset:0;z-index:2;pointer-events:none;transform:translateX(calc(var(--pos) - 50%))}
.compare__handle::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:var(--compare-c,#fff)}
.compare__handle::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:var(--compare-c,#fff);box-shadow:0 0 0 1px color-mix(in srgb,#000 12%,transparent)}
.compare__range:focus-visible ~ .compare__handle::after{outline:2px solid var(--ink);outline-offset:3px}
.compare__tag{position:absolute;top:12px;z-index:2;pointer-events:none}
.compare__tag--a{right:12px}
.compare__tag--b{left:12px}

/* ---------- .marquee ---------- */
.marquee{--marquee-dur:60s;overflow:clip;white-space:nowrap}
.marquee__track{display:flex;width:max-content}
.marquee__group{display:flex;flex:none}
.scn-m .marquee__track{animation:qq-marquee var(--marquee-dur) linear infinite}
.scn-m .marquee.is-paused .marquee__track{animation-play-state:paused}
@keyframes qq-marquee{to{transform:translateX(-50%)}}

/* ---------- 窄屏 ---------- */
@media (max-width: 899px){
  .scrub{--win-w:100%;--win-h:min(62svh,620px)}
  .scrub__stage,.scrub--flip .scrub__stage{grid-template-columns:minmax(0,1fr);gap:16px;align-content:start}
  .scrub--flip .scrub__win{order:0}
  .scrub__win{width:100%}
  .scrub__notes{flex-direction:row;flex-wrap:wrap;gap:6px 16px}
  .scrub__notes li{grid-template-columns:6px auto auto;gap:0 6px;font-size:11px;letter-spacing:.04em}
  .scrub__notes li::before{width:6px;height:6px}
  .scrub__notes small{display:none}
  .scn-m .scrub__stage{padding-block:calc(56px + 12px) 12px}
  .scn-m .scrub__side .gsec__head p{display:none}

  .rail{--rail-w:84vw}
  .rail__stage{grid-template-columns:minmax(0,1fr);gap:20px;align-content:start}
  .rail__aside{gap:12px}
}

/* ---------- reduced-motion：全部静态 ---------- */
@media (prefers-reduced-motion: reduce){
  .marquee__track{animation:none!important;transform:none!important}
}

/* ===== 2026-10-13 版心变量改用视口宽 =====
   site.css 的 --page 写的是 100%：自定义属性里的百分比在「使用处」才解析，
   B 版大量在子元素里用 calc(var(--page) * -1) 出血，100% 会变成父盒宽、算错。
   这里改成视口宽：scenes.js 写 --vw（不含滚动条的 clientWidth），没有 JS 时退回 100vw。 */
html.case{--page:max(var(--gut),calc((var(--vw,100vw) - 1200px) / 2))}
@media (min-width: 1920px){html.case{--page:max(var(--gut),calc((var(--vw,100vw) - 1360px) / 2))}}

/* ===== 2026-10-13 版心 · 高度封顶 · 手机端（B 版共享层）=====
   版心变量 --page 来自 site.css（html.case，1200px，≥1920 放宽到 1360）。
   .scene 左右 padding 已改成 --page：底色仍铺满整宽，内容进版心。
   要「留」全宽的区块在 skin-<id>.css 里用 margin-inline:calc(var(--page) * -1) 拉出去，或把 padding-inline 改回 --gut。 */

/* 1 · 高度封顶：单独站着的图不超过一屏，看图时还能看到字 */
html.case .pic:not(.pic--fill) .pic__btn img{max-height:calc(100svh - 150px);object-fit:contain}
html.case .pic--fill .pic__btn{max-height:calc(100svh - 150px)}
.scn-m .scene--bleed.scrub{padding-top:0}

/* 2 · 窄屏 */
@media (max-width: 899px){
  html.case .pic:not(.pic--fill) .pic__btn img{max-height:calc(100svh - 120px)}
  html.case .pic--fill .pic__btn{max-height:calc(100svh - 120px)}

  /* 长图窗口：占满整宽；标题在上，窗口居中，注释在窗口下方一行横滑 */
  html.case .scrub{--win-w:100%;--win-h:min(70svh,calc(100svh - 120px))}
  html.case .scrub__win{width:100%;margin-inline:0}
  .scrub__side{display:contents}
  .scrub__side > .gsec__head{order:0}
  .scrub__win{order:1}
  .scrub__notes{order:2;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
  .scrub__notes::-webkit-scrollbar{display:none}
  .scrub__notes li{flex:none}
  .scn-m .scrub__stage{gap:12px}

  /* 横向序列：不钉住（见 scenes.js 的 rail-pin），原生横滑 + 吸附 */
  .rail__view{scroll-padding-inline:var(--gut);-webkit-overflow-scrolling:touch}
}
@media (max-width: 599px){
  /* 浮动标签：只留编号，文字进灯箱的 data-cap */
  .tag{font-size:10px;padding:5px 9px 4px}
  .tag:has(> b) > span{display:none}
}

/* ===== 2026-10-13 长图注释可点击跳转（丘丘第 1 轮意见） ===== */
.scrub__notes li[role="button"]{cursor:pointer;border-radius:6px;margin-inline:-6px;padding:4px 6px;transition:opacity .45s ease,background-color .25s ease}
.scrub__notes li[role="button"]:hover{opacity:1;background:color-mix(in srgb,currentColor 7%,transparent)}
.scrub__notes li[role="button"]:focus-visible{outline:2px solid currentColor;outline-offset:2px;opacity:1}
@media (max-width: 899px){.scrub__notes li[role="button"]{margin-inline:0;min-height:36px}}
.chero__meta .nw{white-space:nowrap}


/* ---------- .rail--y 纵向一页一页（10-14，NehNehBaby 手册）：钉住后页面上下换，当前页在正中，上下页压暗，框边上下渐隐 ---------- */
.rail-pin .rail--y .rail__stage{grid-template-rows:minmax(0,1fr)}
.rail-pin .rail--y .rail__view{align-self:stretch;height:100%;min-height:0;overflow:clip;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 84%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 84%,transparent 100%)}
.rail-pin .rail--y .rail__track{flex-direction:column;width:auto}
.rail-pin [data-rail="step"].rail--y .rail__track{transform:translateY(calc(var(--rail-y0,0px) - var(--rail-steph,0px) * var(--rail-i,0)))}
.rail-pin .rail--y .rail__item{width:100%}
.rail-pin [data-rail="step"].rail--y .rail__item.is-past{opacity:var(--rail-dim)}
/* 进度条改成竖的，贴在右边 */
.rail-pin .rail--y .rail__bar{left:auto;right:calc(var(--page,var(--gut)) * -.5);top:calc(56px + 4svh);bottom:5svh;width:2px;height:auto}
.rail-pin .rail--y .rail__bar i{transform-origin:50% 0}
.rail-pin [data-rail="step"].rail--y .rail__bar i{transform:scaleY(calc((var(--rail-i,0) + 1) / var(--rail-n,1)))}