/* ==========================================================================
   story-sticker.css（homepage-v4 · 2026-10-19 · agent B）—— 衣服的家：三张房子贴纸 + 「读完整故事 ↗」白色标签贴纸，一个链接
   来源：spikes/10-story-visuals（round 2）版本 3 · a，Wanfang 10-19 选定。合入时去掉了：版本开关 html[data-s10]、切换条、
   栏宽模拟（v4 是等宽两列，见 content-wiring.css §3）、b 纸胶带 / c 气泡、月光湾虚线占位。版本 3 的规则改成无条件生效。
   只管 #home 正面的 .story-sticker 链接（js/story-sticker.js 负责圆卷）。最后加载（在 desktop-wide.css 之后）。
   ========================================================================== */

/* ---------- 一个链接：<a> 自己不接指针（空白处点了不算），只有每张贴纸接；字只在标签贴纸上出现，.ss-txt 留给读屏 ---------- */
#home .front .card-actions { flex-wrap: nowrap; }
.story-sticker.btn { display: flex; width: 100%; min-height: 0; align-items: flex-end; justify-content: flex-end; gap: 12px; padding: 0; pointer-events: none;
  text-decoration: none; }
.story-sticker .stk { pointer-events: auto; cursor: pointer; }
.story-sticker .ss-txt { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* 键盘焦点：和 v4 的小控件一致（墨色 35%、1.5px，只有键盘才出现） */
.story-sticker:focus { outline: none; }
.story-sticker:focus-visible { outline: 1.5px solid rgb(var(--ink-rgb) / .35); outline-offset: 6px; border-radius: 6px; }
/* 整组 252 × 118，靠右；标签贴纸在左下，房子往右挪 56px */
.ss-stickers { --hx: 56px; position: relative; display: block; flex: none; width: 252px; height: 118px; margin: -6px -4px -4px auto; }

/* ---------- 贴纸 ---------- */
.stk { position: absolute; display: block; width: var(--w); height: var(--h); left: var(--x); top: var(--y); transform: rotate(var(--r)); z-index: var(--zi, 1);
  -webkit-tap-highlight-color: transparent; }
.stk > * { position: absolute; pointer-events: none; }
.stk img { display: block; -webkit-user-drag: none; user-select: none; }

/* 贴着的部分：art 放在一个四周多出 10px 的盒子里（给投影留地方），开胶时沿接触线 clip 掉 */
.stk-body { inset: -10px; }
.stk-body > .stk-art { position: absolute; left: 10px; top: 10px; width: var(--w); height: var(--h);
  filter: drop-shadow(0 .5px .4px rgb(var(--stk-sh) / .30)) drop-shadow(0 1.4px 1.6px rgb(var(--stk-sh) / .13)); }

/* 卷起来的一角：16 段圆弧 + 1 段尾巴 + 弧顶垫条。每段只用 2D matrix()（正交投影），不建 3D 合成层 ——
   3D（matrix3d）时 Chrome 把每段放进单独的合成层、按层的栅格分辨率采样 clip-path，2× 下卷尖 / 背面轮廓出锯齿（10-19 修） */
.stk-flap { left: 0; top: 0; width: var(--w); height: var(--h); visibility: hidden; }
.stk.is-lifting .stk-flap { visibility: visible; }
.stk-flap .seg, .stk-flap .shp, .stk-flap .rim { position: absolute; inset: 0; transform-origin: 0 0; }
.stk-flap .seg > *, .stk-flap .shp > *, .stk-flap .rim > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.stk-flap .seg .bk { display: none; }
.stk-flap .seg.is-back .fr { display: none; }
.stk-flap .seg.is-back .bk, .stk-flap .rim > .bk { display: block; }
/* 卡面上的影子：所有段的影子在一个组里，组整体模糊、整体透明（不会叠深） */
.stk-flap .shg { position: absolute; inset: 0; }
/* 背面：贴纸背胶那一面 —— 暖灰纸色；形状 = 图片 alpha（房子）或同一个 HTML 形状（标签贴纸） */
.stk .bk.img, .stk .shp > .img { -webkit-mask: var(--src) center / 100% 100% no-repeat; mask: var(--src) center / 100% 100% no-repeat; }
.stk .bk { background: var(--stk-back) !important; }
.stk .shp > * { background: rgb(var(--stk-sh)) !important; }
.stk .bk.html, .stk .shp > .html { color: transparent !important; box-shadow: none !important; filter: none !important; }
.stk .bk.html *, .stk .shp > .html * { visibility: hidden; }

:root { --stk-sh: 62 44 26; --stk-back: #dcd6ca; }
:root[data-theme="night"] { --stk-sh: 0 0 0; }
/* 夜里（暗纸卡）：贴纸整体压暗一点、偏暖，像台灯下的纸，白边不刺眼；影子更深 */
:root[data-theme="night"] .ss-stickers { filter: brightness(.80) sepia(.10) saturate(.95); }
:root[data-theme="night"] .stk-body > .stk-art { filter: drop-shadow(0 .6px .5px rgb(0 0 0 / .55)) drop-shadow(0 1.6px 2px rgb(0 0 0 / .32)); }

/* ---------- 标签贴纸：字是真的 HTML 字（copy.js 填），DS 的字体；不随暗纸反色（贴纸本身是亮的纸） ---------- */
.stk-text .stk-art { display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  font: 500 14px/1 var(--font-text); letter-spacing: .02em; color: rgb(30 36 48); white-space: nowrap; text-decoration: none; }
.lab-a .stk-art { background: #fcfbf8; border-radius: 7px; box-shadow: inset 0 0 0 .5px rgb(62 44 26 / .10); }

/* ---------- 英文页：「Read the full story ↗」按 13px、字距 0 排约 126px（README：手机字 ≥ 13px），标签加宽到 138px，房子整体再往右 36px（整组 288；360 宽手机的链接区 289 放得下） ---------- */
html[lang|="en"] .ss-stickers { --hx: 92px; width: 288px; }
html[lang|="en"] .lab-a { --w: 138px !important; }
html[lang|="en"] .lab-a .stk-art { font-size: 13px; letter-spacing: 0; }