/* MASKARIA 官网 · 构成与动效
 *
 * 这一版把页面当成「一张会动的大海报」来排，不再是「一个个区块往下列」：
 *
 *   1. 固定舞台（.stage）——压在各章底色之上、正文之下的一层，整页不随滚动离开视口，
 *      里面是半调网点带、右侧一块出血的墨斜块、一颗慢慢转的四角星。四层的滚动速度
 *      各不相同，所以「底」和「面」之间始终有相对运动。
 *   2. 板块系统（.slab / .pbtn / .photo / .word）——一切「斜着贴上去的东西」都从这三样
 *      派生：手撕边的纸板块、能滑动的按钮、白框相纸、赎金信字母块。
 *   3. 每一章有各自的编排——擦除、拍上、钉住推进、交叉换人，不是同一条淡入。
 *
 * 素材与文案全部是 MASKARIA 自己的；主题 token 在 theme.css，五套皮肤照旧。
 * 没有 JS / 关了动效时，这一份就是完成态：所有东西都在该在的位置上，只是不动。
 */

/* ── 基础 ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--f1-fg);
  font-family:var(--face-text); font-weight:500;
  font-size:var(--s-body); line-height:1.55;
  overflow-x:clip;
}
img{display:block; max-width:100%; height:auto}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0; list-style:none}
button{font:inherit; color:inherit; border:0; background:none; cursor:pointer}
a{color:inherit}
summary{cursor:pointer}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:-9999px; top:0; z-index:99; padding:12px 18px; background:var(--f2); color:var(--f2-fg)}
.skip:focus{left:12px; top:12px}
:focus-visible{outline:3px solid var(--key); outline-offset:3px}
::selection{background:var(--dark); color:var(--f2)}

/* 每个章节自己是一块满幅色场，上边压一条上家的撕边，章节之间是咬合的。
   关键：.band 用 position:relative 但不给 z-index——给了 z-index 就自成层叠上下文，
   固定舞台（z-index:1）就再也压不到它的底色上去了。所以这里靠「不给」来分层：
   .band 的底色 < .stage < .band 的每个直接子元素（z-index:2）。 */
[data-field="1"]{background:var(--f1); color:var(--f1-fg); --fg:var(--f1-fg); --bg:var(--f1);
  --sfg:var(--f1-sfg); --slab:var(--s1); --slab-ink:var(--s1i)}
[data-field="2"]{background:var(--f2); color:var(--f2-fg); --fg:var(--f2-fg); --bg:var(--f2);
  --sfg:var(--f2-sfg); --slab:var(--s2); --slab-ink:var(--s2i)}
[data-field="3"]{background:var(--f3); color:var(--f3-fg); --fg:var(--f3-fg); --bg:var(--f3);
  --sfg:var(--f3-sfg); --slab:var(--s3); --slab-ink:var(--s3i)}

main{counter-reset:sec}
.band,.hero,.foot{position:relative; overflow:clip}
.band{counter-increment:sec; padding:var(--sect) var(--gut)}
.band>*,.hero>*,.foot>*{position:relative; z-index:2}
/* 撕边：一条锯齿遮罩，颜色由 --tear-c 给。它落在底色之上、固定舞台之下，属于「底」的一部分。 */
.band::before,.foot::before{
  content:''; position:absolute; left:0; right:0; top:-1px; height:34px; z-index:0;
  background:var(--tear-c,transparent);
  -webkit-mask-image:var(--tear); mask-image:var(--tear);
  -webkit-mask-repeat:repeat-x; mask-repeat:repeat-x;
  -webkit-mask-size:220px 34px; mask-size:220px 34px;
  pointer-events:none;
}
.band--about{--tear-c:var(--f1)}
.band--attrs{--tear-c:var(--f3)}
.band--flow{--tear-c:var(--f1)}
.band--say{--tear-c:var(--f3)}
.band--list{--tear-c:var(--f1)}
.band--skins{--tear-c:var(--f3)}
.band--rules{--tear-c:var(--f1)}
.band--thanks{--tear-c:var(--f3)}
.band--stats{--tear-c:var(--f1)}
.band--get{--tear-c:var(--f3)}
.foot{--tear-c:var(--f1)}

.plane{stroke:none}
.plane--ink{fill:var(--dark)}
.plane--paper{fill:var(--f2)}
.plane--hot{fill:var(--hot)}

/* ── 文字档位 ───────────────────────────────────────────────────────── */
.kicker{
  display:inline-flex; align-items:center; gap:12px; margin-bottom:clamp(14px,2vh,26px);
  font-size:var(--s-kick); font-weight:900; letter-spacing:.22em;
}
.kicker::before{content:''; width:clamp(34px,4vw,70px); height:8px; background:var(--accent); flex:none}
.lead{font-size:var(--s-lead); line-height:1.5; max-width:34em; margin-top:22px}
.body{font-size:var(--s-body); line-height:1.62; max-width:38em; text-wrap:pretty}
.body+.body{margin-top:18px}
.body--quiet{color:var(--sfg)}
.note{font-size:var(--s-cap); line-height:1.7; color:var(--sfg); max-width:44em}
.cmd{font-weight:900; padding:.1em .35em; background:var(--slab); color:var(--slab-ink)}
.tail-note{margin-top:clamp(30px,4.6vh,58px); max-width:34em; font-size:var(--s-small); line-height:1.6; color:var(--sfg)}
.hl{
  font-style:normal;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 18' preserveAspectRatio='none'%3E%3Cpath d='M1 12 199 5v9L2 18z' fill='%23ffe600' fill-opacity='0.72'/%3E%3C/svg%3E")
    center 92% / 100% .66em no-repeat;
  padding-inline:.1em;
}

/* ── 板块一 · 手撕纸的牌子（slab）──────────────────────────────────────
   全站所有「贴上去的一块」都从这三样派生：纸牌、墨牌、猩红牌。
   撕边用 --q* 那组不规则多边形（左右基本平直、上下是撕口），
   白描边靠外面再垫一层同形的白块（.slab 的 padding 就是那一圈）。 */
.slab{
  position:relative; display:block; width:fit-content; max-width:100%;
  padding:var(--key-w); background:var(--key); clip-path:var(--jag);
  transform:rotate(var(--rot,0deg));
}
.slab__in{
  display:block; padding:.05em .28em .1em;
  font-family:var(--face-display); font-style:var(--display-style); font-weight:900;
}
.slab--paper .slab__in{background:var(--f2); color:var(--f2-fg)}
.slab--ink   .slab__in{background:var(--dark); color:var(--dark-ink)}
.slab--hot   .slab__in{background:var(--hot); color:var(--hot-ink)}
.slab--accent .slab__in{background:var(--accent); color:var(--on-accent)}
/* 只有纸牌是「手撕」的：这四块是正文的落点，撕口让它们看起来是贴上去的 */
.slab--paper{clip-path:var(--q3)}
.slab--paper .slab__in{clip-path:var(--q5)}

/* ── 板块二 · 按钮：白描边的斜块，鼠标压上去有一层色从左推进来 ───────── */
.pbtn{
  display:inline-block; padding:var(--key-w); background:var(--key);
  clip-path:var(--jag); text-decoration:none; vertical-align:middle;
  transition:transform var(--t-press) var(--ease-out);
}
.pbtn>span{
  position:relative; display:block; overflow:hidden;
  padding:.72em 1.7em .8em; background:var(--btn); color:var(--btn-fg);
  font-size:var(--s-lead); font-weight:900; font-style:var(--display-style); letter-spacing:.02em;
  clip-path:var(--jag);
}
.pbtn>span::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:var(--btn-hover); transform:translateX(-101%);
  transition:transform var(--t-hover) var(--ease-out);
}
/* 字得压在滑动层上面，所以给它自己一个相对定位 */
.pbtn>span{isolation:isolate}
.pbtn>span::after{content:''; position:absolute; inset:0; z-index:-1; background:transparent}
.pbtn:hover>span::before,.pbtn:focus-visible>span::before{transform:none}
.pbtn:active{transform:scale(.965)}
.pbtn--hot>span{background:var(--hot); color:var(--hot-ink)}
.pbtn--hot>span::before{background:color-mix(in srgb,var(--hot) 70%,var(--dark))}
.pbtn--mini>span{padding:.42em 1.1em .5em; font-size:var(--s-small)}

.link{
  text-decoration:underline; text-decoration-thickness:.06em; text-underline-offset:.22em;
  text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);
  transition:text-decoration-color var(--t-hover) ease;
}
.link:hover{text-decoration-color:currentColor}

/* ── 板块三 · 相纸：截图一律装进白框，硬偏移的实心影子，微微歪着 ────── */
.photo{
  position:relative; display:block; background:var(--f2); color:var(--dark);
  padding:var(--key-w); border:var(--key-w) solid var(--key);
  box-shadow:12px 12px 0 color-mix(in srgb,var(--dark) 72%,transparent);
  transition:transform var(--t-ui) var(--ease-out), box-shadow var(--t-ui) var(--ease-out);
}
.photo img{
  width:100%; display:block; background:var(--dark);
  aspect-ratio:4/5; object-fit:cover; object-position:top center;
}
.photo figcaption{
  padding:.5em .6em .35em; font-size:var(--s-cap); font-weight:900; line-height:1.2;
}
.photo--get img,.photo--say img{aspect-ratio:9/16; object-position:center 12%}

/* ── 板块四 · 标题：赎金信字母块 ───────────────────────────────────────
   每个字单独一块，三色交替、角度和高低都错开——一排字母块绝不对齐。
   没脚本时它就是一整块墨带上的白字（.word 自己的兜底样式）。 */
.word{
  margin-top:.12em;
  font-family:var(--face-display); font-style:var(--display-style); font-weight:900;
  font-size:var(--s-word); line-height:.94; letter-spacing:-.03em; max-width:24em;
  width:fit-content; padding:.06em .26em .12em;
  background:var(--slab); color:var(--slab-ink);
  clip-path:var(--jag); transform:rotate(var(--tilt));
}
.word--giant{font-size:var(--s-giant); border-bottom:clamp(8px,1vw,16px) solid var(--accent); padding-bottom:.1em}
.word[data-tiles]{background:none; color:inherit; padding:0; clip-path:none; transform:none}
.word[data-tiles]{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:.05em;
}
.word[data-tiles] .tile{
  display:block; padding:.04em .16em .1em; line-height:1.02; letter-spacing:-.01em;
  transform-origin:50% 60%;
}
.word[data-tiles] .tile:nth-child(3n+1){
  background:var(--tilebg1); color:var(--tilefg1);
  clip-path:polygon(5% 16%,96% 0,100% 80%,60% 100%,0 86%);
  --tr:rotate(-4.5deg) translateY(3px);
}
.word[data-tiles] .tile:nth-child(3n+2){
  background:var(--tilebg2); color:var(--tilefg2);
  clip-path:polygon(0 6%,86% 2%,100% 72%,90% 100%,8% 94%);
  --tr:rotate(3.4deg) translateY(-4px);
}
.word[data-tiles] .tile:nth-child(3n){
  background:var(--tilebg3); color:var(--tilefg3);
  clip-path:polygon(2% 0,100% 12%,92% 96%,12% 100%,0 58%);
  --tr:rotate(-2deg) translateY(1px);
}
.word[data-tiles] .tile{transform:var(--tr)}

.head{margin-bottom:clamp(30px,5vh,62px)}
.head--giant{margin-bottom:clamp(22px,3.4vh,44px)}
.head--flow{margin-bottom:clamp(16px,2.4vh,30px)}

/* ── 板块五 · 抠像（deco）────────────────────────────────────────────
   就是那张面具图，放大、歪着、从边上出血，压在字的后面当画面；
   不是随手画的几何图形——整站出现的「图像」全部来自 App 自己的素材。
   换肤时 main.js 把 src 换成对应主题的那一张。 */
.deco{position:absolute; z-index:1; pointer-events:none; user-select:none; height:auto}
.deco--attrs{right:-8vw; bottom:-4vh; width:min(30vw,380px); transform:rotate(-8deg); opacity:.22}
.deco--flow{right:1vw; top:50%; width:min(26vw,340px); translate:0 -50%; transform:rotate(9deg); opacity:.2}
.deco--thanks{right:-6vw; top:4%; width:min(30vw,400px); transform:rotate(-9deg); opacity:.26}
.deco--stats{left:-8vw; bottom:2%; width:min(26vw,340px); transform:rotate(7deg); opacity:.2}

/* ── 固定舞台 ─────────────────────────────────────────────────────────
   z-index:1 —— 比各章底色高（底色在 band 自己的层上），比正文低（正文是 z-index:2）。
   四层各走各的滚动速度，所以整页「底」和「面」之间一直在相对运动。 */
.stage{position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden}
.stage__ghost{
  position:absolute; left:-3vw; top:48%; margin:0;
  font-family:var(--face-display); font-style:var(--display-style); font-weight:900;
  font-size:clamp(80px,14vw,262px); line-height:.86; letter-spacing:-.02em; white-space:nowrap;
  color:var(--dark); opacity:.07;
}
.stage__dots{
  position:absolute; inset:auto 0 0 0; height:52vh;
  background-image:var(--dots); background-size:16px 16px; opacity:.72;
  clip-path:polygon(0 22%,100% 0,100% 100%,0 100%);
  animation:dottravel 24s linear infinite;
}
@keyframes dottravel{to{background-position:32px 32px}}
.stage__slash{position:absolute; right:-17vw; top:-6%; width:42vw; height:112%; opacity:.3}
.stage__star{position:absolute; right:8vw; top:12%; width:clamp(64px,6vw,104px); color:var(--hot); opacity:.85}
.stage__star svg{width:100%; height:auto; display:block}

/* ── 开场幕 ───────────────────────────────────────────────────────────
   默认不显示：它只在「允许动效 + 脚本跑起来」的时候才被 main.js 打开，
   所以没脚本/关了动效时页面上根本不存在这一层。 */
.curtain{display:none; position:fixed; inset:0; z-index:90}
.curtain__band{position:absolute; left:0; right:0; z-index:0; background:var(--f3); will-change:transform}
.curtain__band[data-band="0"]{top:0; height:34%}
.curtain__band[data-band="1"]{top:34%; height:33%}
.curtain__band[data-band="2"]{top:67%; height:33%}
.curtain__core{
  position:absolute; inset:0; z-index:2; display:grid; place-content:center; justify-items:center;
  gap:clamp(14px,2.4vh,26px); color:var(--f3-fg); text-align:center;
}
.curtain__splash{position:absolute; width:min(58vw,540px); color:var(--accent); opacity:.85; z-index:-1}
.curtain__splash svg{width:100%; height:auto; display:block}
.curtain__mark{display:flex; gap:3px}
.curtain__mark span{
  display:block; padding:.06em .16em .12em;
  font-family:var(--face-display); font-style:var(--display-style); font-weight:900;
  font-size:clamp(30px,4.4vw,62px); line-height:1.05;
  background:var(--f2); color:var(--f2-fg); clip-path:var(--jag);
}
.curtain__mark span:nth-child(2n){background:var(--accent); color:var(--on-accent)}
.curtain__note{
  padding:.1em .5em .16em; background:var(--hot); color:var(--hot-ink);
  font-size:var(--s-h3); font-weight:900; font-style:var(--display-style);
  clip-path:var(--q5); transform:rotate(-2deg);
}
.curtain__rail{position:relative; width:min(70vw,460px); height:26px}
.curtain__rail::before{
  content:''; position:absolute; left:0; right:0; bottom:6px; height:3px;
  background:color-mix(in srgb,currentColor 45%,transparent);
}
.curtain__fill{
  position:absolute; left:0; bottom:6px; height:3px; width:0;
  background:var(--accent);
}
.curtain__van{position:absolute; left:0; bottom:6px; width:52px; height:22px; margin-left:-20px}
.curtain__van svg{width:100%; height:auto; display:block; overflow:visible}
.curtain__van .van__body{fill:var(--f2)}
.curtain__van .van__win{fill:var(--accent)}
.curtain__van .van__stripe{fill:var(--hot)}
.curtain__van .van__lamp{fill:var(--accent)}
.curtain__van .van__tyre{fill:var(--f2)}
.curtain__van .van__rim{fill:var(--accent)}
.van__wheel{transform-box:fill-box; transform-origin:center; animation:wheel 260ms linear infinite}
.van__shell{transform-box:fill-box; transform-origin:bottom center; animation:bump 190ms steps(2,end) infinite}
@keyframes wheel{to{transform:rotate(360deg)}}
@keyframes bump{
  0%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-2px) rotate(-.8deg)}
  100%{transform:translateY(1px) rotate(.6deg)}
}
.curtain__pct{
  font-family:var(--face-display); font-style:var(--display-style); font-weight:900;
  font-size:var(--s-small); letter-spacing:.24em; opacity:.7;
}

/* ── 顶栏 ─────────────────────────────────────────────────────────────
   一排斜贴的牌子：每块的倾角和高低都不同（官方站的导航就是错开的），
   压上去它立正、抬起来、翻色。滚过首屏之后整条栏才从上方滑进来。 */
.hdr{
  position:fixed; inset:0 0 auto; z-index:40;
  display:flex; align-items:center; gap:clamp(14px,2vw,30px);
  padding:12px var(--gut);
  background:var(--bar-bg,var(--f3)); color:var(--bar-ink,var(--f3-fg));
  transition:background-color var(--t-ui) var(--ease-out), color var(--t-ui) var(--ease-out),
    translate var(--t-ui) var(--ease-out);
}
/* 底栏那条撕边：让顶栏看起来也是「贴上去的一张纸」 */
.hdr::after{
  content:''; position:absolute; left:0; right:0; bottom:-16px; height:17px;
  background:currentColor; opacity:.14;
  -webkit-mask-image:var(--tear); mask-image:var(--tear);
  -webkit-mask-repeat:repeat-x; mask-repeat:repeat-x;
  -webkit-mask-size:220px 17px; mask-size:220px 17px;
  pointer-events:none; transform:scaleY(-1);
}
.hdr__mark{display:flex; gap:2px; text-decoration:none; margin-right:auto}
.hdr__mark span{
  display:block; padding:3px 7px 4px; font-size:var(--s-small); font-weight:900; line-height:1;
  background:currentColor;
  color:var(--hdr-solid,var(--f3));
}
.hdr__mark span:nth-child(3n){background:none; color:inherit; padding-inline:2px}
.hdr__nav{display:flex; align-items:flex-start; gap:clamp(6px,1vw,14px)}
.hdr__nav a,.hdr__act{
  display:block; padding:.34em .8em .42em; text-decoration:none;
  font-size:var(--s-small); font-weight:900; letter-spacing:.02em;
  background:var(--f2); color:var(--f2-fg); clip-path:var(--jag);
  transition:transform 130ms var(--ease-out), background-color 130ms ease, color 130ms ease;
}
/* 每块牌子自己的倾角与高低，谁都跟谁不一样 */
.hdr__nav a:nth-child(1){transform:rotate(-3.4deg) translateY(3px)}
.hdr__nav a:nth-child(2){transform:rotate(2.2deg) translateY(-4px)}
.hdr__nav a:nth-child(3){transform:rotate(-1.6deg) translateY(4px)}
.hdr__nav a:nth-child(4){transform:rotate(3.1deg) translateY(-3px)}
.hdr__nav a:nth-child(5){transform:rotate(-2.6deg) translateY(2px)}
.hdr__nav a:nth-child(6){transform:rotate(1.8deg) translateY(-5px)}
.hdr__nav a:hover,.hdr__nav a:focus-visible,.hdr__act:hover,.hdr__act:focus-visible{
  transform:rotate(0deg) translateY(-4px) scale(1.06);
  background:var(--accent); color:var(--on-accent);
}
.hdr__nav a.is-here{background:var(--accent); color:var(--on-accent); transform:rotate(0deg)}
.hdr__act{
  margin-left:4px; padding:.5em 1.2em .56em; background:var(--btn); color:var(--btn-fg);
  transform:rotate(-2deg);
}
.hdr__act.is-here{background:var(--accent); color:var(--on-accent)}
/* 首屏里顶栏是浮在画上的：换成半透明的墨带，滚过首屏再变实 */
.hdr.is-over{
  background:color-mix(in srgb,var(--dark) 66%,transparent); color:var(--f2);
  --hdr-solid:var(--dark);
}
.hdr.is-hidden{translate:0 -130%}

/* ── 一 · 头版 ────────────────────────────────────────────────────────
   网格两行：上面是标题与滚动提示，下面是压在底部的信息带。
   面具、相纸、溅射、半调盘、幽灵字标全部绝对定位叠在右侧——它们是「前景」，
   幽灵字标与溅射是「后景」，滚动时两组速度不同，画面就有纵深。 */
.hero{
  min-height:100svh; display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:clamp(10px,1.8vh,22px);
  padding:clamp(86px,11.5vh,132px) var(--gut) clamp(14px,2.2vh,26px);
}
.hero__splash{position:absolute; z-index:1; right:-8%; top:22%; width:min(44vw,600px); color:var(--hot);
  transform:rotate(9deg)}
.hero__splash svg{width:100%; height:auto; display:block}
.hero__disc{
  position:absolute; z-index:1; left:24%; bottom:3%; width:min(26vw,360px); aspect-ratio:1;
  border-radius:50%; opacity:.5;
  background-image:var(--dots); background-size:14px 14px;
}
.hero__art{
  position:absolute; z-index:3; right:-1vw; bottom:clamp(84px,11.5vh,116px);
  width:min(35vw,470px); margin:0; transform:rotate(-5deg);
}
.hero__art img{width:100%; height:auto}
.art__ink{position:absolute; inset:0; z-index:0; filter:brightness(0); transform:translate(16px,16px)}
.art__key{position:absolute; inset:0; z-index:1; filter:brightness(0) invert(1); transform:scale(1.035)}
.art__face{position:relative; z-index:2}
.hero__shots{position:absolute; inset:0; z-index:4; pointer-events:none}
.hero__shots .photo{pointer-events:auto; position:absolute}
.photo--a{left:58%; bottom:16%; width:clamp(124px,12vw,178px); transform:rotate(-7deg)}
.photo--b{right:3%; top:23%; width:clamp(96px,9.6vw,142px); transform:rotate(7.5deg)}
.hero__lead{
  grid-row:1; max-width:100%;
}
.hero__kicker{
  display:flex; align-items:center; gap:12px; margin-bottom:clamp(8px,1.4vh,16px);
  font-size:var(--s-small); font-weight:900; letter-spacing:.16em;
}
.hero__kicker::before{content:''; width:clamp(30px,4vw,64px); height:7px; background:var(--dark); flex:none}
.hero__h{display:grid; gap:clamp(10px,1.7vh,20px); justify-items:start}

/* ── 字标：MASKARIA 八个字母块 ─────────────────────────────────────────
   跟 App 首页那颗字标同一套做法：三色轮着来（猩红 / 纸白 / 墨黑），
   每块自己的角度与高低都不同，边缘是斜切的不规则多边形，底下压一层硬偏移的墨影子，
   右上角咬一颗星，下面挂一条「面具庭园」的黑牌。整张海报的主角就是它。 */
.wm{position:relative; display:flex; align-items:flex-end; gap:clamp(2px,.32vw,6px); padding-bottom:.04em}
.wm__l{
  display:block; padding:.03em .17em .1em;
  font-family:var(--face-display); font-style:var(--display-style); font-weight:900;
  font-size:clamp(26px,10.2vw,146px); line-height:1;
  transform-origin:50% 78%;
  filter:drop-shadow(.032em .04em 0 var(--dark));
  transform:rotate(var(--rot,0deg)) translateY(var(--up,0px));
}
.wm__l:nth-child(3n+1){
  background:var(--hot); color:var(--hot-ink);
  clip-path:polygon(4% 12%,97% 0,100% 78%,62% 100%,0 88%);
}
.wm__l:nth-child(3n+2){
  background:var(--key); color:var(--dark);
  clip-path:polygon(0 6%,88% 2%,100% 70%,92% 100%,6% 94%);
}
.wm__l:nth-child(3n){
  background:var(--dark); color:var(--key);
  clip-path:polygon(2% 0,100% 14%,94% 96%,10% 100%,0 56%);
}
/* 每块自己的角度与高低：一排字母块绝不对齐 */
.wm__l:nth-child(1){--rot:-3.6deg; --up:4px}
.wm__l:nth-child(2){--rot:2.4deg; --up:-5px}
.wm__l:nth-child(3){--rot:-1.6deg; --up:2px}
.wm__l:nth-child(4){--rot:3.2deg; --up:-3px}
.wm__l:nth-child(5){--rot:-2.6deg; --up:5px}
.wm__l:nth-child(6){--rot:2deg; --up:-4px}
.wm__l:nth-child(7){--rot:-3deg; --up:3px}
.wm__l:nth-child(8){--rot:2.8deg; --up:-2px}
.wm__star{
  position:absolute; left:calc(100% + .12em); top:6%; width:clamp(22px,2.8vw,46px);
  color:var(--hot); filter:drop-shadow(2px 3px 0 var(--dark)); pointer-events:none;
}
.wm__star svg{width:100%; height:auto; display:block}
.wm__sub{
  display:inline-flex; align-items:center; gap:.42em; width:fit-content;
  margin-left:clamp(16px,2.4vw,46px);
  padding:.2em .68em .3em; background:var(--dark); color:var(--key);
  font-family:var(--face-text); font-style:normal;
  font-size:clamp(15px,2.05vw,31px); font-weight:900; letter-spacing:.08em;
  clip-path:var(--jag); transform:rotate(-2deg); filter:drop-shadow(.09em .12em 0 var(--hot));
}
.wm__sub i{font-style:normal; color:var(--hot)}

/* 第二行：标语「没人看见的 / 也算数」——名字之下的第二重音 */
.hero__say{grid-row:2; position:relative; align-self:start; padding-top:clamp(4px,1vh,14px)}
.hero__tagline{display:grid; gap:clamp(6px,.9vw,12px); justify-items:start}
.hero__tagline .slab{font-size:clamp(26px,4.6vw,68px); line-height:.9; letter-spacing:-.03em; white-space:nowrap}
.slab--paper{--rot:-2.2deg}
.slab--hot{--rot:1.6deg; margin-left:clamp(10px,2.6vw,48px)}
.hero__foot{
  grid-row:3; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,17em);
  align-items:end; gap:clamp(16px,2.4vw,34px);
  margin-inline:calc(var(--gut) * -1); padding:clamp(16px,2.6vh,26px) var(--gut) clamp(14px,2vh,22px);
  background:var(--dark); color:var(--dark-ink);
}
.hero__foot::after{
  content:''; position:absolute; left:0; right:0; top:-17px; height:18px;
  background:var(--dark); transform:scaleY(-1);
  -webkit-mask-image:var(--tear); mask-image:var(--tear);
  -webkit-mask-repeat:repeat-x; mask-repeat:repeat-x;
  -webkit-mask-size:220px 18px; mask-size:220px 18px;
  pointer-events:none;
}
.hero__tag{max-width:30em; font-size:var(--s-small); line-height:1.6; font-weight:600}
.hero__mini{text-align:right; font-size:var(--s-cap); opacity:.78}
.hero__cue{
  position:absolute; right:var(--gut); bottom:clamp(96px,14vh,132px); z-index:5;
  display:grid; justify-items:center; gap:8px;
  font-size:var(--s-cap); font-weight:900; letter-spacing:.2em;
}
.hero__cue i{display:block; width:16px; height:16px; border-right:5px solid currentColor; border-bottom:5px solid currentColor;
  transform:rotate(45deg); animation:cue 1.6s var(--ease-in-out) infinite}
@keyframes cue{0%,60%{opacity:0; translate:0 -6px}80%{opacity:1}100%{opacity:0; translate:0 6px}}

/* ── 二 · 没人看见的那些事 ───────────────────────────────────────────── */
.band--about .say{margin:clamp(10px,2vh,22px) 0 clamp(34px,6vh,84px)}
.about__rest{
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(34px,4.5vw,84px); align-items:start;
}
.about__cols{max-width:44em}
.photo--tilt{width:100%; transform:rotate(-4deg)}

/* 声明块：全页最大的话，白描边 + 手撕边 + 微微歪着 */
.say{
  display:block; width:fit-content; max-width:26em;
  padding:.05em .3em .12em; background:var(--slab); color:var(--slab-ink);
  clip-path:var(--q5); transform:rotate(var(--tilt));
  font-family:var(--face-display); font-style:var(--display-style); font-weight:900;
  font-size:var(--s-say); line-height:.98; letter-spacing:-.02em; text-wrap:pretty;
  box-shadow:9px 9px 0 color-mix(in srgb,var(--accent) 70%,transparent);
}
.say--s{font-size:var(--s-h2); line-height:1.1; max-width:22em; box-shadow:none; padding:.14em .34em .2em}
.say__row{display:block}

/* 擦除揭示：一行一条，从左边擦过来（不是整块淡入） */
.wipe{display:block}
.wipe__row{display:block; width:fit-content; max-width:100%}
.say .wipe__row,.say__row{overflow:hidden}

/* ── 三 · 五个属性 ───────────────────────────────────────────────────
   三个量级：一级是巨数字（坐在纸白面上，是整节的焦点），二级降一档，
   三级是三条方点账目。阅读顺序就是大小顺序。 */
.attrs{
  display:grid; gap:clamp(24px,3.4vw,56px);
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  align-items:start; margin-top:clamp(18px,3vh,44px);
}
.fig{position:relative}
.fig--big{
  grid-row:span 2; padding:clamp(24px,3vw,44px) clamp(24px,3.4vw,48px) clamp(28px,3.4vw,48px);
  background:var(--f2); color:var(--f2-fg); --sfg:var(--f2-sfg);
  clip-path:var(--q3); box-shadow:14px 14px 0 color-mix(in srgb,var(--accent) 62%,transparent);
}
.fig--big::after{content:''; position:absolute; left:0; top:0; width:clamp(70px,9vw,140px); height:12px; background:var(--accent)}
.fig__no{
  font-family:var(--face-display); font-style:var(--display-style); font-weight:900;
  font-size:var(--s-num); line-height:.8; letter-spacing:-.06em; margin-top:.08em;
}
.fig__name{margin-top:.3em; font-size:var(--s-h3); font-weight:900; line-height:1.14}
.fig__name span{font-size:var(--s-cap); font-weight:800; color:var(--sfg)}
.fig__gain{margin-top:.55em; font-size:var(--s-small); font-weight:900}
.fig__cap{margin-top:1.1em; font-size:var(--s-small); line-height:1.6; max-width:26em; color:var(--sfg)}
.fig__bar{position:relative; height:14px; margin-top:1.5em; background:color-mix(in srgb,currentColor 16%,transparent)}
.fig__bar i{position:absolute; inset:0 auto 0 0; width:12%; background:var(--accent); transform-origin:left center}
.fig--mid{
  background:var(--dark); color:var(--dark-ink); clip-path:var(--q6);
  box-shadow:12px 12px 0 color-mix(in srgb,var(--accent) 55%,transparent);
  padding:clamp(22px,2.6vw,38px);
}
.fig--mid .fig__no{font-size:var(--s-say)}
.fig--mid .fig__name{font-size:var(--s-small)}
.fig--mid .fig__name span,.fig--mid .fig__cap{color:var(--dark-ink); opacity:.78}
.fig--mid .fig__gain{color:var(--dark-ink); opacity:.9}
.ledger{grid-column:2; display:grid; align-content:start; gap:4px}
.ledger li{
  position:relative; display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 16px;
  padding:11px 0 12px; border-bottom:2px solid color-mix(in srgb,currentColor 22%,transparent);
}
.ledger li::before{content:''; align-self:center; width:12px; height:12px; background:var(--accent); flex:none;
  transform-origin:center}
.ledger b{font-size:var(--s-h3); font-weight:900; line-height:1.1}
.ledger span{font-size:var(--s-cap); font-weight:800; color:var(--sfg)}
.ledger i{font-style:normal; font-weight:900; font-size:var(--s-small)}
.ledger em{margin-left:auto; font-style:normal; font-size:var(--s-small); line-height:1.5; color:var(--sfg); max-width:30em}

.specimen{display:grid; grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr);
  gap:clamp(22px,3.2vw,58px); align-items:start; margin-top:clamp(34px,5.4vh,72px)}
.spec{position:relative}
.spec--a{transform:rotate(-1.1deg)}
.spec--b{transform:rotate(1.3deg); margin-top:clamp(6px,1.6vh,22px)}
.specimen .frag{display:block; padding:clamp(18px,2vw,26px); background:var(--card); color:var(--card-ink);
  border:var(--key-w) solid var(--key); box-shadow:10px 10px 0 color-mix(in srgb,var(--dark) 30%,transparent)}
.spec__cap{margin-top:16px; font-size:var(--s-small); line-height:1.55; color:var(--sfg); max-width:36em}

/* App 自己的界面片段：卡面一律保留 App 那一套，本站只给它外框与位置 */
.frag{font-family:var(--face-text); font-size:19px}
.frag--row,.frag--ledger,.frag--entry{display:block}
.frag__row{display:flex; align-items:center; gap:.6em; flex-wrap:wrap}
.frag__name{display:inline-block; padding:.22em .7em .28em; background:var(--card-chip); color:var(--card-chip-ink);
  font-size:.84em; font-weight:900; transform:skewX(-6deg)}
.frag__lv{font-size:.74em; font-weight:800; color:var(--card-sfg)}
.frag__big2{display:block; font-family:var(--face-display); font-style:var(--display-style); font-weight:900;
  font-size:1.37em; margin-top:.4em}
.frag__gain{display:block; margin-top:.3em; font-size:.84em; font-weight:700; color:var(--card-hot)}
.frag__quote{font-size:1.15em; font-weight:800; text-wrap:pretty}
.frag--ledger,.frag--entry{display:block; padding:24px; background:var(--card); color:var(--card-ink);
  border:var(--key-w) solid var(--key)}
.frag--ledger{max-width:440px}
.frag__btn{display:inline-block; margin-top:.9em; padding:.45em 1.2em; background:var(--card-chip);
  color:var(--card-chip-ink); font-size:.84em; font-weight:900; transform:skewX(-6deg)}

/* ── 四 · 记一笔的四步：钉住的舞台 + 滚动推着走的时间线 ─────────────────
   整节拉成 340vh，里面那层钉在视口里；滚动进度直接把四步横着推过去，
   红带子同时从左边画过去。这一节是整页唯一「滚动即进度」的地方，
   跟前后几节的「一次镜头」形成对比。 */
.band--flow{padding-inline:0}
.flow__pin{
  padding:clamp(78px,11vh,120px) 0 clamp(40px,6vh,70px);
  min-height:100svh; display:grid; gap:clamp(18px,3vh,36px); align-content:center;
}
.flow__pin .head{padding-inline:var(--gut)}
.flow__ribbon{
  position:relative; height:18px; margin-inline:var(--gut);
  background:color-mix(in srgb,currentColor 16%,transparent);
}
.flow__ribbon i{
  position:absolute; inset:0; transform-origin:left center; background:var(--accent); display:block;
}
.flow{display:flex; gap:clamp(20px,2.6vw,44px); padding-inline:var(--gut); width:max-content; align-items:start}
.flow__p{
  flex:0 0 auto; width:min(42vw,470px); display:grid; gap:14px; align-content:start;
  padding-top:18px; border-top:5px solid currentColor;
}
.flow__lbl{
  display:block; width:fit-content; padding:.06em .3em .12em;
  background:var(--slab); color:var(--slab-ink); clip-path:var(--jag);
  font-family:var(--face-display); font-style:var(--display-style); font-weight:900;
  font-size:var(--s-h2); line-height:1.02;
}
.flow__card{display:block; padding:clamp(14px,1.6vw,22px); background:var(--card); color:var(--card-ink);
  border:var(--key-w) solid var(--key); box-shadow:10px 10px 0 color-mix(in srgb,var(--dark) 28%,transparent)}
.flow__card .frag{font-size:15px}
.flow__clause{font-size:var(--s-body); font-weight:900; line-height:1.4; text-wrap:balance; max-width:20em}

/* ── 五 · 一句话进去，一张卡出来 ─────────────────────────────────────── */
.band--say{padding-bottom:0}
.say2{display:grid; grid-template-columns:1fr 1fr; margin-inline:calc(var(--gut) * -1)}
.say2__in,.say2__out{padding:clamp(40px,5vw,84px) var(--gut) clamp(72px,9vw,140px);
  display:flex; flex-direction:column; gap:26px}
.say2__in{background:var(--f3); color:var(--f3-fg)}
.say2__out{background:var(--f2); color:var(--f2-fg)}
.say2__q{font-family:var(--face-display); font-style:var(--display-style); font-weight:900;
  font-size:clamp(30px,3.6vw,58px); line-height:1.04; text-wrap:pretty; max-width:15em}
.body--on{max-width:30em}
.photo--say{position:absolute; z-index:4; right:6vw; bottom:6%; width:min(23vw,250px); transform:rotate(6deg)}

/* ── 六 · 功能 ─────────────────────────────────────────────────────── */
.list{max-width:1240px; margin:0 auto; display:grid; gap:clamp(24px,3.6vh,52px)}
.list__rows{display:grid; counter-reset:feat}
.row{position:relative; overflow:hidden}
.row+.row{border-top:2px solid color-mix(in srgb,currentColor 20%,transparent)}
.row::before{
  content:''; position:absolute; inset:0 auto 0 0; width:8px; z-index:0;
  background:var(--accent); transform:scaleX(0); transform-origin:left center;
  transition:transform var(--t-ui) var(--ease-out);
}
.row__sum{display:flex; align-items:center; gap:clamp(14px,2vw,28px);
  padding:clamp(16px,2.2vh,26px) 4px; list-style:none; position:relative; z-index:1}
.row__sum::-webkit-details-marker{display:none}
.row__sum::before{
  counter-increment:feat; content:counter(feat,decimal-leading-zero);
  font-family:var(--face-display); font-weight:900; font-size:var(--s-small);
  letter-spacing:.1em; opacity:.55; min-width:2.6em;
  transition:transform var(--t-ui) var(--ease-out), opacity var(--t-ui) ease;
}
.row__name{font-size:var(--s-h2); font-weight:900; line-height:1.05; letter-spacing:-.02em;
  transition:translate var(--t-ui) var(--ease-out)}
.row__plus{position:relative; margin-left:auto; width:24px; height:24px; flex:0 0 auto}
.row__plus::before,.row__plus::after{
  content:''; position:absolute; left:0; right:0; top:50%; height:4px; background:currentColor;
  transform:translateY(-50%); transition:transform var(--t-ui) var(--ease-out);
}
.row__plus::after{transform:translateY(-50%) rotate(90deg)}
.row[open] .row__plus::after{transform:translateY(-50%) rotate(0deg)}
.row[open]{background:var(--accent); color:var(--on-accent)}
.row__panel{display:grid; grid-template-rows:0fr; transition:grid-template-rows 340ms var(--ease-out);
  position:relative; z-index:1}
.row[open] .row__panel{grid-template-rows:1fr}
.row__panel>div{overflow:hidden; padding-left:calc(2.6em + clamp(14px,2vw,28px))}
.row__panel p{font-size:var(--s-body); line-height:1.68; max-width:54em; padding-bottom:16px}
.row[open] .row__panel p:last-child{padding-bottom:32px}

/* ── 七 · 五套设计语言 ─────────────────────────────────────────────── */
.sel{display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(26px,4vw,68px); margin-top:clamp(28px,4.6vh,58px); align-items:start}
.sel__hint{padding-bottom:12px; font-size:var(--s-small); font-weight:900}
.sel__tabs{display:grid; counter-reset:skin; gap:8px}
.stab{
  display:flex; align-items:baseline; gap:12px; width:100%; text-align:left;
  padding:clamp(11px,1.5vh,17px) 14px;
  background:var(--f2); color:var(--f2-fg); clip-path:var(--jag);
  font-size:clamp(18px,1.8vw,25px); font-weight:900; line-height:1.14;
  transition:transform 130ms var(--ease-out), background-color 130ms ease, color 130ms ease;
}
.sel__tabs .stab:nth-child(odd){transform:rotate(-1.2deg)}
.sel__tabs .stab:nth-child(even){transform:rotate(1deg) translateX(10px)}
.stab::before{
  counter-increment:skin; content:counter(skin,decimal-leading-zero);
  font-family:var(--face-display); font-weight:900; font-size:var(--s-cap);
  letter-spacing:.1em; opacity:.55; flex:none;
}
.stab em{margin-left:auto; text-align:right; font-style:normal; font-size:var(--s-cap);
  font-weight:800; letter-spacing:.14em; opacity:.6}
.stab:hover,.stab:focus-visible{transform:rotate(0deg) translateX(6px); background:var(--accent); color:var(--on-accent)}
.stab[data-on="true"]{background:var(--hot); color:var(--hot-ink); transform:rotate(0deg) translateX(17px)}
.stab[data-on="true"] em{opacity:.95}
.sel__stage{position:relative}
/* 舞台上的「静音色」要跟着纸面走，不能沿用所在章节的色——不然白纸上的说明字是白粉色的 */
.kv{display:none; --sfg:var(--f2-sfg)}
html[data-skin="red"] .kv[data-skin-show="red"],
html[data-skin="water-blue"] .kv[data-skin-show="water-blue"],
html[data-skin="water-pink"] .kv[data-skin-show="water-pink"],
html[data-skin="yellow"] .kv[data-skin-show="yellow"],
html[data-skin="custom"] .kv[data-skin-show="custom"]{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(22px,3.4vw,58px); align-items:center;
  padding:clamp(26px,3.4vw,52px); min-height:56svh;
  background:var(--f2); color:var(--f2-fg); clip-path:var(--q6);
  box-shadow:16px 16px 0 color-mix(in srgb,var(--accent) 60%,transparent);
}
.kv__txt{display:flex; flex-direction:column; gap:14px; max-width:34em}
.kv__name{font-family:var(--face-display); font-style:var(--display-style); font-weight:900;
  font-size:var(--s-h2); line-height:1.06; letter-spacing:-.03em; padding-bottom:.12em; border-bottom:6px solid var(--accent)}
.kv__line{font-size:var(--s-body); line-height:1.6}
.kv__sample{margin-top:8px; font-size:var(--s-cap); font-weight:900; color:var(--sfg)}
.kv__sw{display:flex; gap:10px; flex-wrap:wrap}
.pick{width:42px; height:42px; padding:0; background:var(--sw);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  transition:transform var(--t-press) var(--ease-out)}
.pick:hover{transform:scale(1.18) rotate(45deg)}
.pick:active{transform:scale(.9)}
.kv__art{position:relative; width:min(100%,420px); margin:0}
.kv__art img{width:100%; height:auto}
.sel__desc{grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(24px,3.4vw,62px); margin-top:clamp(30px,4.6vh,62px); padding-top:20px;
  border-top:2px solid color-mix(in srgb,currentColor 40%,transparent)}
.sel__desc .kv__line{font-size:var(--s-small); color:var(--sfg); max-width:38em}

/* ── 八 · 两条硬规矩 ───────────────────────────────────────────────── */
.rules{display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(30px,5vw,84px); align-items:start}
.rules__a,.rules__b{position:relative; padding-top:clamp(16px,2.4vh,28px)}
.rules__mark{font-family:var(--face-display); font-weight:900; line-height:.7;
  font-size:var(--s-say); color:var(--accent); margin-bottom:-.04em}
.rules__a .say--s{background:var(--f2); color:var(--f2-fg)}
.rules__b .say--s{background:var(--accent); color:var(--on-accent)}
.rules__a .say--s,.rules__b .say--s{margin-top:.5em}
.rules__sub{margin-top:clamp(20px,3vh,36px); max-width:34em}
.tape{height:20px; background-image:var(--stripes); background-size:22px 22px;
  border-top:var(--key-w) solid var(--key); border-bottom:var(--key-w) solid var(--key);
  transform:skewX(var(--ui-skew))}
.rules__tape{grid-column:1/-1; margin-top:clamp(22px,3.4vh,46px); transform-origin:left center}
.stamp{display:inline-block; margin-top:26px; padding:8px 14px; border:3px solid currentColor;
  border-radius:10px; font-size:var(--s-small); font-weight:900; line-height:1.25;
  letter-spacing:.04em; transform:rotate(-6deg); opacity:.92}

/* ── 九 · 致谢清单 ─────────────────────────────────────────────────── */
.names{margin-top:clamp(34px,5.6vh,76px); font-family:var(--face-text); font-weight:800;
  font-size:clamp(19px,1.9vw,26px); line-height:1.62; max-width:60em}
.names li{display:inline; color:var(--sfg); transition:color 400ms var(--ease-out)}
.names li::after{content:'、'; color:var(--sfg)}
.names li:last-child::after{content:'。'}
.names li.is-lit{color:inherit}
.band--thanks .body{margin-top:clamp(34px,5vh,74px); max-width:44em}

/* ── 十 · 完成到哪一步 ─────────────────────────────────────────────── */
.stats{display:grid; gap:clamp(20px,3vw,50px); grid-template-columns:repeat(12,1fr);
  align-items:start; margin-top:clamp(18px,3vh,46px)}
.stat{position:relative; display:flex; flex-direction:column; justify-content:space-between;
  gap:clamp(20px,3.4vh,50px)}
.stat__fig{font-family:var(--face-display); font-style:var(--display-style); font-weight:900;
  line-height:.82; letter-spacing:-.06em; font-variant-numeric:tabular-nums}
.stat__cap{font-size:var(--s-small); line-height:1.5; max-width:22em; font-weight:600}
.stat--tall{grid-column:1/8; padding:clamp(24px,3vw,46px); background:var(--f2); color:var(--f2-fg);
  --sfg:var(--f2-sfg); clip-path:var(--q6);
  box-shadow:14px 14px 0 color-mix(in srgb,var(--accent) 60%,transparent)}
.stat--tall .stat__fig{font-size:var(--s-num)}
.stat--ink{grid-column:8/13; padding:clamp(22px,2.6vw,38px); margin-top:clamp(40px,11vh,140px);
  background:var(--accent); color:var(--on-accent); transform:rotate(-1.4deg)}
.stat--ink .stat__fig{font-size:var(--s-say)}
.stat--mid{grid-column:3/9; margin-top:clamp(30px,6vh,90px)}
.stat--mid .stat__fig{font-size:var(--s-word)}

/* ── 十一 · 拿一份 ─────────────────────────────────────────────────── */
.get{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.24fr);
  gap:clamp(30px,4.6vw,88px); align-items:end; margin-top:clamp(18px,3vh,46px)}
.get__l{display:flex; flex-direction:column; gap:22px}
.get__act{margin-top:6px}
.get__r{display:flex; flex-direction:column; align-items:flex-start; gap:clamp(18px,2.6vh,32px)}
.note--c{opacity:.85}
.photo--get{width:min(100%,300px); transform:rotate(-3deg)}
.frag--entry{max-width:360px; box-shadow:10px 10px 0 color-mix(in srgb,var(--dark) 30%,transparent)}
.navfrag{
  display:flex; align-items:flex-end; justify-content:space-between; gap:8px;
  width:min(100%,520px); padding:14px 12px 10px;
  background:var(--f2); color:var(--f2-fg); outline:var(--key-w) solid var(--key);
}
.navfrag__i{display:flex; flex-direction:column; align-items:center; gap:6px;
  font-size:var(--s-cap); font-weight:800; opacity:.6; width:5em}
.navfrag__i--on{opacity:1; color:var(--card-chip)}
.navfrag__d{display:block; width:34px; height:34px; background:var(--card-chip);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.navfrag__o{display:block; width:26px; height:26px; background:currentColor; transform:skewX(-6deg); opacity:.85}

/* ── 十二 · 页脚 ───────────────────────────────────────────────────── */
.foot{padding:clamp(56px,8vh,98px) var(--gut) clamp(48px,7vh,84px);
  display:flex; flex-direction:column; gap:clamp(34px,4.6vh,66px)}
.foot__notes{display:grid; grid-template-columns:1fr 1fr auto; gap:24px; font-size:var(--s-small)}
.foot__notes .link{justify-self:end}
.foot__big{
  display:block; width:fit-content; padding:.1em .28em .18em;
  background:var(--f2); color:var(--f2-fg);
  font-family:var(--face-display); font-style:var(--display-style); font-weight:900;
  font-size:var(--s-say); line-height:1.12; letter-spacing:-.03em;
  text-decoration:none; text-wrap:balance; clip-path:var(--jag2); transform:rotate(-1deg);
}
.foot__big span{display:block}
.foot__meta{display:grid; grid-template-columns:1fr 2fr auto; gap:28px; font-size:var(--s-cap); color:var(--sfg)}
.foot__links{display:flex; gap:18px; flex-wrap:wrap}
.foot__credits{max-width:44em; line-height:1.6}
.foot__place{text-align:right; white-space:nowrap}

/* ── 换肤时整页一起走：颜色与字面在 400ms 里一起换过去 ───────────────── */
html.skinning :is(.hdr,.hdr__nav a,.hdr__act,.stab,.kv,.row,.fig,.stat,.say,.slab,.slab__in,
  .flow__lbl,.flow__card,.specimen .frag,.pbtn>span,.photo,.band,.hero,.foot){
  transition:background-color 420ms var(--ease-out), color 420ms var(--ease-out),
    box-shadow 420ms var(--ease-out);
}

/* ── 鼠标用户的悬停镜头 ─────────────────────────────────────────────── */
@media (hover:hover) and (pointer:fine){
  .photo:hover{transform:rotate(0deg) scale(1.035); box-shadow:16px 16px 0 color-mix(in srgb,var(--dark) 72%,transparent)}
  .row:hover::before{transform:scaleX(1)}
  .row:hover .row__sum::before{transform:translateX(6px); opacity:1}
  .row:hover .row__name{translate:8px 0}
  .row:not([open]):hover{background:color-mix(in srgb,currentColor 9%,transparent)}
  .hero__art:hover{transform:rotate(-2deg) scale(1.02)}
}

/* ── 窄窗口 ────────────────────────────────────────────────────────── */
@media (max-width:1100px){
  :root{--s-say:46px; --s-h2:34px; --s-h3:24px; --s-lead:20px; --s-body:18px;
    --s-giant:clamp(96px,26vw,200px); --s-word:clamp(38px,6.4vw,78px); --s-num:clamp(72px,11vw,140px)}
  .band{padding:clamp(78px,10vh,124px) 20px}
  .attrs{grid-template-columns:1fr; gap:clamp(22px,3.4vw,42px)}
  .fig--big{grid-row:auto}
  .ledger{grid-column:1}
  .specimen{grid-template-columns:1fr 1fr}
  .rules{grid-template-columns:1fr; gap:clamp(30px,5vw,58px)}
  .get{grid-template-columns:1fr; gap:clamp(30px,4.4vw,54px)}
  .say2{grid-template-columns:1fr}
  .about__rest{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:36px}
  .sel{grid-template-columns:1fr; gap:clamp(24px,3.4vw,42px)}
  .sel__tabs{grid-template-columns:1fr 1fr; column-gap:clamp(18px,3vw,42px)}
  .kv{min-height:0}
  .stats{grid-template-columns:1fr 1fr}
  .stat--tall{grid-column:1/3; margin-top:0}
  .stat--ink{grid-column:1/2; margin-top:0}
  .stat--mid{grid-column:2/3; margin-top:0}
  .foot__notes,.foot__meta{grid-template-columns:1fr}
  .foot__notes .link{justify-self:start}
  .foot__place{text-align:left}
  .foot__big{font-size:var(--s-h3)}
  .hero__art{width:min(46vw,420px); right:2vw; bottom:clamp(80px,11vh,120px)}
  .photo--a{left:20%; bottom:18%}
  /* 视口不够高的时候，头版的右侧叠层会互相压住：索性收成一列，
     顺序写死成「先读字 → 再看图 → 最后信息带」，不靠自动排版去猜 */
  .hero{min-height:0; display:flex; flex-direction:column;
    gap:clamp(20px,4vh,40px); padding-bottom:clamp(16px,3vh,28px)}
  .hero__lead{order:1}
  .hero__say{order:2}
  .hero__shots{order:3}
  .hero__art{order:4}
  .hero__foot{order:5}
  .hero__lead{max-width:none}
  .hero__say{align-self:auto; padding-top:0}
  .hero__art{position:relative; top:auto; right:auto; translate:none; margin-left:auto;
    width:min(62%,380px)}
  .hero__shots{position:relative; inset:auto; display:grid; grid-template-columns:1fr 1fr;
    gap:clamp(14px,3vw,26px); align-items:start}
  .hero__shots .photo{position:relative; width:auto; left:auto; right:auto; top:auto; bottom:auto}
  .photo--a{transform:rotate(-3deg)}
  .photo--b{transform:rotate(3deg); margin-top:clamp(20px,6vh,48px)}
  .hero__splash{width:min(58vw,420px); top:16%; right:-12%}
  .hero__disc{display:none}
  .hero__cue{display:none}
  .wm__l{font-size:clamp(24px,9.4vw,84px)}
  .wm__sub{font-size:clamp(14px,2.6vw,24px); margin-left:clamp(10px,3vw,26px)}
  .hero__tagline .slab{font-size:clamp(30px,8.6vw,58px)}
}

/* ── 手机 ────────────────────────────────────────────────────────────
   手机不缩桌面版：头版收成一条竖排的阅读顺序（先读字 → 再看图 → 最后信息带），
   钉住的那一节拆掉钉住，改成一摞依次拍上来的牌子。 */
@media (max-width:760px){
  :root{--s-display:11.6vw; --s-giant:22vw; --s-say:28px; --s-h2:27px; --s-h3:21px;
    --s-lead:19px; --s-body:17px; --s-small:15px; --s-cap:13px;
    --s-word:clamp(32px,9vw,46px); --s-num:clamp(64px,20vw,110px); --gut:16px}
  .band{padding:clamp(58px,9vh,84px) var(--gut)}
  .hdr{gap:10px; padding:10px var(--gut)}
  .hdr__nav{
    display:flex; gap:8px; overflow-x:auto; padding:6px 2px 8px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .hdr__nav::-webkit-scrollbar{display:none}
  .hdr__nav a{flex:0 0 auto; font-size:var(--s-cap); transform:none}
  .hdr__act{flex:0 0 auto; padding:.45em 1em .5em; font-size:var(--s-cap); white-space:nowrap}
  .hdr__mark span{padding:2px 5px 3px; font-size:var(--s-cap)}
  .stage__slash{width:70vw; right:-24vw}
  .stage__ghost{font-size:38vw; top:20%}

  .hero{padding-top:clamp(96px,15vh,126px); gap:clamp(18px,3.4vh,30px)}
  .hero__splash{width:64vw; top:4%; right:-16%; opacity:.85}
  .hero__art{width:min(70%,300px); margin-inline:auto}
  .wm__l{font-size:clamp(22px,8.9vw,60px); padding:.02em .15em .09em}
  .wm__sub{font-size:clamp(13px,3.6vw,20px); margin-left:8px}
  .wm__star{width:20px; top:-26%}
  .hero__tagline .slab{font-size:clamp(28px,9vw,52px)}
  .hero__tagline{justify-items:start; gap:8px}
  .hero__foot{grid-template-columns:1fr; align-items:start; gap:14px}
  .hero__mini{text-align:left}
  .hero__act .pbtn{width:100%}
  .hero__act .pbtn>span{text-align:center}
  .hero__tag{font-size:var(--s-cap)}
  .say{box-shadow:6px 6px 0 color-mix(in srgb,var(--accent) 70%,transparent)}
  .say--s{padding:.16em .3em .22em}

  .about__rest{grid-template-columns:1fr; gap:clamp(26px,5vh,44px)}
  .photo--tilt{width:min(100%,320px); margin-left:auto}
  .specimen{grid-template-columns:1fr; gap:clamp(20px,4vh,34px)}
  .fig--big{box-shadow:8px 8px 0 color-mix(in srgb,var(--accent) 62%,transparent)}
  .fig--mid{box-shadow:8px 8px 0 color-mix(in srgb,var(--accent) 55%,transparent)}
  .ledger em{margin-left:0; width:100%}

  /* 四步：竖着一摞，每块自己拍上来 */
  .flow{flex-direction:column; width:auto; padding-inline:var(--gut); gap:clamp(20px,4vh,32px)}
  .flow__p{width:auto}
  .flow__ribbon{display:none}
  .flow__pin{padding:clamp(58px,9vh,84px) 0 clamp(40px,7vh,70px)}

  .say2__in,.say2__out{padding:clamp(30px,6vw,46px) var(--gut) clamp(46px,9vw,72px)}
  .photo--say{position:relative; right:auto; bottom:auto; width:min(62%,240px);
    margin:clamp(24px,5vh,40px) auto 0; transform:rotate(4deg)}

  .row__name{font-size:clamp(22px,6.4vw,30px)}
  .row__sum{gap:10px}
  .row__panel>div{padding-left:0}

  .sel__tabs{grid-template-columns:1fr}
  .sel__tabs .stab:nth-child(even){transform:rotate(1deg)}
  .stab[data-on="true"]{transform:rotate(0deg) translateX(8px)}
  .kv{box-shadow:8px 8px 0 color-mix(in srgb,var(--accent) 60%,transparent)}
  html[data-skin="red"] .kv[data-skin-show="red"],
  html[data-skin="water-blue"] .kv[data-skin-show="water-blue"],
  html[data-skin="water-pink"] .kv[data-skin-show="water-pink"],
  html[data-skin="yellow"] .kv[data-skin-show="yellow"],
  html[data-skin="custom"] .kv[data-skin-show="custom"]{grid-template-columns:1fr; padding:20px}
  .kv__art{width:min(100%,260px)}
  .sel__desc{grid-template-columns:1fr}

  .rules{grid-template-columns:1fr}
  .rules__mark{font-size:var(--s-h2)}
  .stats{grid-template-columns:1fr; gap:clamp(26px,5vh,44px)}
  .stat,.stat--tall,.stat--ink,.stat--mid{grid-column:1; margin-top:0}
  .stat--ink{transform:rotate(-1deg)}
  .get{grid-template-columns:1fr}
  .photo--get{width:min(100%,260px)}
  .navfrag{width:100%}
  .navfrag__i{width:auto; flex:1 1 0; font-size:11px}
  .navfrag__d{width:26px; height:26px}
  .navfrag__o{width:20px; height:20px}
  .foot__big{font-size:var(--s-h3)}
  .tape{height:14px}
  .curtain__rail{width:min(78vw,300px)}
}

/* ── 动了会难受的人：一切动画都不发生，页面就是完成态 ───────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition-duration:.01ms !important}
  .curtain{display:none !important}
  .hero__cue i{opacity:1; translate:0}
  .stage__dots{animation:none}
}