/* ============================================================
   ACG CLUB ANNUAL SURVEY — 视觉系统 v3
   定位：印刷品，不是网页
   骨架：纸白 + 墨黑 + 单一电光蓝 + 极少朱红
   手法：极端字阶 / 非对称栅格 / 发丝线 / 尺规标注 / 错位
   ============================================================ */
:root{
  --paper:#f3f1ec;
  --paper-2:#eae7e0;
  --ink:#111110;
  --ink-70:rgba(17,17,16,.70);
  --ink-45:rgba(17,17,16,.45);
  --ink-25:rgba(17,17,16,.25);
  --ink-10:rgba(17,17,16,.10);
  --rule:#cfcbc0;
  --blue:#1a3cff;
  --vermilion:#e8371f;
  --volt:#d8ff00;
  --cyan:#7fd8cc;
  --blue-90:rgba(26,60,255,.90);
  --blue-14:rgba(26,60,255,.14);
  --blue-06:rgba(26,60,255,.06);
  --half:"Songti SC","SimSun","Source Han Serif SC",serif;
  --heavy:"Arial Black","Helvetica Neue",Impact,"PingFang SC","Microsoft YaHei",sans-serif;
  --sans:"Helvetica Neue","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Consolas,"Cascadia Mono",monospace;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);line-height:1.55;min-height:100vh;
  padding:0 0 88px;position:relative;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* 纸纹 / 颗粒 */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:900;opacity:.32;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
.wrap{max-width:1180px;margin:0 auto;padding:0 40px;position:relative;z-index:2}

/* ---------- 顶栏 ---------- */
.topbar{
  position:relative;z-index:3;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:16px 40px;
  font-family:var(--mono);font-size:9px;letter-spacing:.22em;
  color:var(--ink-45);text-transform:uppercase;
  border-bottom:1px solid var(--rule);flex-wrap:wrap
}
.topbar .l,.topbar .r{display:flex;align-items:center;gap:20px}
.topbar b{color:var(--ink);font-weight:500}
.topbar .mark{color:var(--vermilion)}

/* ---------- 页头：极端字阶 + 构成图 ---------- */
header{padding:64px 0 0;position:relative;display:block}
.heroL{position:relative;z-index:3;min-width:0}
/* 构成图：绝对定位在右侧，字压图上 */
.heroArt{
  position:absolute;z-index:1;
  right:-46px;top:-34px;
  width:min(40%,430px);
  mix-blend-mode:multiply;
  opacity:.92;
  pointer-events:none
}
.heroArt img{width:100%;height:auto;display:block}
.tintwrap,.l2{white-space:nowrap}
.kicker{
  font-family:var(--mono);font-size:9px;letter-spacing:.36em;color:var(--ink-45);
  text-transform:uppercase;margin-bottom:30px;
  animation:riseIn .8s cubic-bezier(.2,.8,.2,1) both
}
.kicker span{color:var(--blue)}
h1{
  font-family:var(--heavy);font-weight:900;
  font-size:clamp(64px,15.2vw,196px);
  line-height:.80;letter-spacing:-.055em;
  color:var(--ink);margin-left:-6px;
  position:relative;z-index:2;
  animation:riseIn 1s cubic-bezier(.2,.8,.2,1) both
}
h1 .l2{
  display:block;color:transparent;-webkit-text-stroke:2px var(--ink);
  margin-left:11%;position:relative;z-index:2;
  animation:riseIn 1s cubic-bezier(.2,.8,.2,1) .12s both
}
h1 .l3{
  display:block;font-family:var(--half);font-weight:400;
  font-size:clamp(11px,1.15vw,14px);letter-spacing:.62em;
  color:var(--ink-45);margin:22px 0 0 auto;
  -webkit-text-stroke:0;line-height:1;text-align:right;
  padding-right:6%;z-index:2;
  animation:riseIn 1s cubic-bezier(.2,.8,.2,1) .26s both
}
/* 巨字后方的色带（不遮字） */
.slab{
  position:absolute;top:6%;right:2%;width:15%;height:62%;
  background:var(--blue);z-index:1;opacity:.92;
  animation:sweep 22s ease-in-out infinite alternate
}
/* ---- 动效（慢、克制）---- */
@keyframes riseIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes sweep{from{transform:translateX(-2.5%)}to{transform:translateX(2.5%)}}
@keyframes breathe{0%,100%{opacity:.6}50%{opacity:.92}}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}
/* ---- 层次：半透明色域（multiply 透出底下的黑线与纸纹）---- */
.wash{position:fixed;pointer-events:none;z-index:0;mix-blend-mode:multiply;
  animation:breathe 11s ease-in-out infinite}
.wash.a{top:-12%;right:-6%;width:52%;height:56%;
  background:radial-gradient(closest-side,rgba(26,60,255,.20),transparent 72%)}
.wash.b{top:38%;left:-12%;width:42%;height:48%;
  background:radial-gradient(closest-side,rgba(232,55,31,.09),transparent 70%)}
.wash.c{bottom:4%;right:8%;width:38%;height:42%;
  background:radial-gradient(closest-side,rgba(127,216,204,.20),transparent 72%)}
/* 标题被"染色"：局部蓝透叠，字还是黑的 */
h1 .tintwrap{position:relative;display:block}
h1 .tint{
  position:absolute;left:10%;bottom:6%;width:54%;height:38%;
  background:var(--blue);mix-blend-mode:multiply;opacity:.62;
  z-index:3;pointer-events:none
}

.lede{
  margin:56px 0 0;max-width:390px;
  font-family:var(--half);font-size:15px;line-height:2.05;color:var(--ink-70)
}
.lede b{font-family:var(--sans);font-weight:700;color:var(--ink)}

/* ---------- OOPZ 票据 ---------- */
.oopz{
  margin:78px 0 0;border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);position:relative;
  display:grid;grid-template-columns:112px 1fr auto;align-items:stretch
}
.oopz .ico{
  border-right:1px solid var(--rule);display:flex;align-items:center;
  justify-content:center;font-family:var(--mono);font-size:8px;
  letter-spacing:.2em;color:var(--ink-25);writing-mode:vertical-rl;
  padding:20px 0
}
.oopz .body{padding:30px 30px 28px 34px}
/* 荧光黄细条：全页唯一"电"色的点 */
.oopz::after{
  content:"";position:absolute;left:112px;top:0;bottom:0;width:3px;
  background:var(--volt);pointer-events:none
}
.oopz .k{
  font-family:var(--mono);font-size:8px;letter-spacing:.3em;
  color:var(--ink-45);text-transform:uppercase;margin-bottom:14px
}
.oopz .id{
  font-family:var(--heavy);font-weight:900;
  font-size:clamp(38px,7.4vw,66px);line-height:.86;
  letter-spacing:-.045em;color:var(--ink);
  font-variant-numeric:tabular-nums
}
.oopz .desc{
  font-family:var(--half);font-size:12.5px;color:var(--ink-70);
  margin-top:18px;line-height:1.95;max-width:430px
}
.copy{
  border:none;border-left:1px solid var(--rule);background:transparent;
  font-family:var(--mono);font-size:9px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink);cursor:pointer;
  padding:0 26px;transition:.18s;white-space:nowrap
}
.copy:hover{background:var(--blue);color:var(--paper)}

/* ---------- 分区标题（尺规） ---------- */
.sechead{
  display:flex;align-items:baseline;gap:16px;margin:96px 0 0;
  padding-bottom:12px;border-bottom:1px solid var(--ink);
  font-family:var(--mono);font-size:9px;letter-spacing:.28em;
  color:var(--ink-45);text-transform:uppercase
}
.sechead b{color:var(--ink);font-weight:500}
.sechead .right{margin-left:auto;color:var(--ink-25)}
.sechead::before{content:"";width:26px;height:3px;background:var(--blue);flex:0 0 auto}

/* ---------- 分类：Z 字下楼梯（左右交替踏步） ---------- */
.grid{display:block;position:relative;padding:14px 0 26px}
/* 两道虚线扶手，形成楼梯轮廓 */
.grid::before,.grid::after{
  content:"";position:absolute;top:0;bottom:0;width:1px;
  background:repeating-linear-gradient(180deg,var(--rule) 0 9px,transparent 9px 18px);
  opacity:.9
}
.grid::before{left:16%}
.grid::after{left:84%;opacity:.55}

.cat{
  position:relative;display:block;text-decoration:none;color:inherit;
  width:66%;padding:28px 28px 32px;
  background:var(--paper);border:1px solid var(--rule);
  box-shadow:
    0 3px 0 rgba(207,203,192,.55),
    0 7px 0 rgba(207,203,192,.30),
    0 26px 46px -20px rgba(17,17,16,.20);
  transition:transform .34s cubic-bezier(.2,.8,.2,1), box-shadow .34s, margin .34s;
  overflow:hidden;margin-bottom:-6px;
  opacity:0;   /* 由 IntersectionObserver 触发 */
}
.cat.in{animation:stepIn .78s cubic-bezier(.2,.8,.2,1) forwards}
/* 左踏步 */
.cat:nth-child(odd){margin-left:0;transform:rotate(-.7deg)}
/* 右踏步 */
.cat:nth-child(even){margin-left:34%;transform:rotate(.65deg)}

@keyframes stepIn{
  from{opacity:0;transform:translateX(-26px) rotate(-2.4deg) translateY(18px)}
  to{opacity:1}
}
.cat:nth-child(even).in{animation-name:stepInR}
@keyframes stepInR{
  from{opacity:0;transform:translateX(26px) rotate(2.4deg) translateY(18px)}
  to{opacity:1}
}
.cat:nth-child(odd).in{transform:rotate(-.7deg)}
.cat:nth-child(even).in{transform:rotate(.65deg)}

/* 踏步刻度（每张纸连到虚线扶手） */
.cat::before{
  content:"";position:absolute;top:50%;height:1px;width:34%;
  background:repeating-linear-gradient(90deg,var(--ink-25) 0 6px,transparent 6px 12px);
  pointer-events:none
}
.cat:nth-child(odd)::before{right:-34%}
.cat:nth-child(even)::before{left:-34%;width:34%}

.cat:hover{
  transform:rotate(0deg) translateY(-4px) scale(1.015);
  box-shadow:
    0 4px 0 rgba(207,203,192,.62),
    0 9px 0 rgba(207,203,192,.34),
    0 36px 62px -20px rgba(17,17,16,.26);
  z-index:6
}
.cat:hover .t{color:var(--blue)}
.cat:hover .go{color:var(--blue);transform:translate(3px,-3px)}

.cat .num{
  display:block;font-family:var(--mono);font-size:9px;letter-spacing:.24em;
  color:var(--ink-45);margin-bottom:24px
}
.cat .t{
  font-family:var(--heavy);font-weight:900;
  font-size:clamp(21px,3.1vw,34px);line-height:1.04;
  letter-spacing:-.03em;margin-bottom:9px;transition:color .2s
}
.cat .s{
  font-family:var(--half);font-size:12px;color:var(--ink-70);
  line-height:1.7;max-width:280px
}
.cat .go{
  position:absolute;right:24px;bottom:26px;font-family:var(--mono);
  font-size:11px;letter-spacing:.2em;color:var(--ink-25);transition:.22s
}
.cat .flag{
  position:absolute;top:0;right:0;background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:8px;letter-spacing:.2em;
  padding:4px 10px;z-index:2
}
.cat::after{
  content:attr(data-page);position:absolute;right:16px;top:14px;
  font-family:var(--mono);font-size:8px;letter-spacing:.2em;color:var(--ink-25)
}
.cat:has(.flag)::after{top:34px}

/* ---------- 特殊分栏：王者电竞（大活动，独立） ---------- */
.special{
  margin:70px 0 0;position:relative;
  background:#0f1923;color:#ece8e1;
  padding:44px 38px 40px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%);
  overflow:hidden;text-decoration:none;display:block;
  opacity:0
}
.special.in{animation:specialIn .9s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes specialIn{from{opacity:0;transform:translateY(30px)}to{opacity:1}}
.special::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(118deg,transparent 0 38%,rgba(255,70,85,.16) 38% 39.2%,transparent 39.2%),
    linear-gradient(118deg,transparent 0 58%,rgba(255,70,85,.10) 58% 59%,transparent 59%),
    radial-gradient(700px 340px at 88% -20%,rgba(255,70,85,.22),transparent 62%)
}
.special::after{
  content:"";position:absolute;top:0;bottom:0;left:-30%;width:22%;
  background:linear-gradient(100deg,transparent,rgba(255,70,85,.28),transparent);
  animation:scanX 6.5s ease-in-out infinite
}
@keyframes scanX{0%,100%{left:-30%}50%{left:112%}}
.special:hover{filter:brightness(1.06)}

.sp-top{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-family:var(--mono);font-size:9px;letter-spacing:.3em;
  text-transform:uppercase;color:#ff4655;margin-bottom:22px;position:relative;z-index:2
}
.sp-top .dot{width:7px;height:7px;background:#ff4655;display:inline-block;
  animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.sp-top .sep{flex:1;height:1px;background:rgba(255,70,85,.35)}
.sp-title{
  font-family:var(--heavy);font-weight:900;
  font-size:clamp(28px,5.4vw,64px);line-height:.94;letter-spacing:-.035em;
  text-transform:uppercase;margin-bottom:8px;position:relative;z-index:2
}
.sp-title em{font-style:normal;color:#ff4655;display:block}
.sp-sub{
  font-family:var(--half);font-size:12.5px;color:#8b98a5;
  margin:16px 0 26px;max-width:420px;line-height:1.9;position:relative;z-index:2
}
.sp-cta{
  display:inline-flex;align-items:center;gap:12px;
  padding:15px 34px;background:#ff4655;color:#fff;
  font-family:var(--mono);font-size:10px;letter-spacing:.26em;
  text-transform:uppercase;text-decoration:none;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  position:relative;z-index:2;transition:.2s
}
.sp-cta:hover{background:#ff5f6c;transform:translateX(3px)}
.sp-meta{
  margin-top:28px;display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid rgba(236,232,225,.14);position:relative;z-index:2
}
.sp-meta div{padding:16px 16px 0 0}
.sp-meta .k{
  font-family:var(--mono);font-size:8px;letter-spacing:.24em;
  color:#6b7a88;text-transform:uppercase;margin-bottom:6px
}
.sp-meta .v{font-family:var(--heavy);font-size:15px;letter-spacing:.01em}

/* 竞技角标 */
.sp-corner{
  position:absolute;top:0;right:0;z-index:3;
  background:#ff4655;color:#fff;
  font-family:var(--mono);font-size:8px;letter-spacing:.24em;
  padding:7px 16px;
  clip-path:polygon(12px 0,100% 0,100% 100%,0 100%)
}
/* 大括号（赛事转播感） */
.sp-bracket{
  position:absolute;top:44px;bottom:44px;width:26px;z-index:1;
  border:1px solid rgba(255,70,85,.34);pointer-events:none
}
.sp-bracket-l{left:22px;border-right:none}
.sp-bracket-r{right:22px;border-left:none}

/* ---------- 子页 ---------- */
.back{
  display:inline-block;margin-top:34px;text-decoration:none;
  font-family:var(--mono);font-size:9px;letter-spacing:.24em;
  color:var(--ink-45);text-transform:uppercase;transition:.18s
}
.back:hover{color:var(--blue)}
.pagehead{padding:30px 0 0;border-bottom:1px solid var(--ink);margin-bottom:0;position:relative}
.pagehead .eyebrow{
  font-family:var(--mono);font-size:9px;letter-spacing:.3em;
  color:var(--ink-45);text-transform:uppercase;margin-bottom:20px
}
.pagehead .eyebrow span{color:var(--blue)}
.pagehead h2{
  font-family:var(--heavy);font-weight:900;
  font-size:clamp(38px,7.8vw,88px);line-height:.86;
  letter-spacing:-.045em;display:inline;margin-bottom:20px;
  position:relative;z-index:2
}
/* 子页标题下的一道蓝：极细，作为"承重线" */
.pagehead::after{
  content:"";position:absolute;left:0;bottom:0;width:22%;height:3px;
  background:var(--blue)
}
.pagehead .tag{
  display:inline-block;font-family:var(--mono);font-size:8px;
  letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--ink-25);color:var(--ink-45);
  padding:4px 9px;vertical-align:middle;margin-left:18px;
  transform:translateY(-8px)
}
.pagehead .tag.multi{border-color:var(--vermilion);color:var(--vermilion)}
.pagehead .tag.ok{border-color:var(--blue);color:var(--blue)}
.pagehead p{
  font-family:var(--half);font-size:14px;color:var(--ink-70);
  margin:18px 0 26px;max-width:460px;line-height:1.9
}

/* ---------- 选项：细线表格 ---------- */
.sec{border-bottom:1px solid var(--rule)}
.opts{display:flex;flex-wrap:wrap}
.opt{
  position:relative;padding:22px 22px 24px;border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);cursor:pointer;transition:.15s;
  flex:1 1 auto;min-width:150px;display:flex;flex-direction:column;gap:8px;
  background:transparent
}
.opt::before{
  content:attr(data-idx);font-family:var(--mono);font-size:8px;
  letter-spacing:.22em;color:var(--ink-25);transition:.15s
}
.opt .nm{font-size:14px;color:var(--ink-70);font-weight:400;transition:.15s}
.opt:hover{background:var(--ink-10)}
.opt:hover .nm{color:var(--ink)}
.opt.on{background:var(--blue-90)}
.opt.on::before{color:rgba(255,255,255,.55)}
.opt.on .nm{color:#fff;font-weight:600}
.opt.dis{cursor:not-allowed;opacity:.42}

/* 少数选项挂一枚色标（图 7 的构成主义彩色块） */
.opt:nth-child(3n+1)::after{
  content:"";position:absolute;top:12px;right:12px;width:5px;height:5px;
  background:var(--vermilion);opacity:.55;transition:.15s
}
.opt.on:nth-child(3n+1)::after{background:var(--volt);opacity:1}

.other{padding:0 22px 22px;display:none}
.other.on{display:block}
.other input{
  width:100%;padding:15px 16px;border:none;border-bottom:1px solid var(--ink);
  background:transparent;color:var(--ink);font-size:14px;outline:none;
  font-family:var(--half)
}
.other input:focus{border-bottom-color:var(--blue)}
.other input::placeholder{color:var(--ink-25)}

.act{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:24px 0;border-top:1px solid var(--rule)
}
.btn{
  border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  padding:15px 34px;font-family:var(--mono);font-size:9px;letter-spacing:.24em;
  text-transform:uppercase;cursor:pointer;transition:.18s
}
.btn:hover:not(:disabled){background:var(--blue);border-color:var(--blue)}
.btn:disabled{background:transparent;color:var(--ink-25);border-color:var(--ink-10);cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--paper);border-color:var(--ink)}
.hint{font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--ink-25);text-transform:uppercase}

/* ---------- 结果 ---------- */
.reswrap{padding:32px 0 10px;border-bottom:1px solid var(--rule)}
.restitle{
  font-family:var(--mono);font-size:9px;letter-spacing:.28em;
  color:var(--ink-45);text-transform:uppercase;margin-bottom:26px
}
.resline{display:flex;align-items:center;gap:18px;margin-bottom:14px}
.resline .t{
  flex:0 0 168px;font-family:var(--half);font-size:13px;color:var(--ink-70);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.resline .bar{flex:1;height:3px;background:var(--ink-10)}
.resline .bar i{display:block;height:100%;width:0;background:var(--blue);transition:.7s}
.resline .n{
  flex:0 0 44px;text-align:right;font-family:var(--mono);font-size:10px;
  color:var(--ink-45)
}
.prank{
  font-family:var(--half);font-size:12px;color:var(--ink-70);
  margin-top:20px;line-height:2
}

/* ---------- 底栏 ---------- */
.bar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:rgba(243,241,236,.94);border-top:1px solid var(--ink);
  backdrop-filter:blur(10px)
}
.bar .in{
  max-width:1180px;margin:0 auto;padding:14px 40px;
  display:flex;align-items:center;gap:22px;flex-wrap:wrap
}
.bar .prog{
  flex:1;min-width:150px;font-family:var(--mono);font-size:8px;
  letter-spacing:.24em;color:var(--ink-45);text-transform:uppercase
}
.bar .prog b{color:var(--blue);font-weight:500}
.bar .pips{display:flex;gap:4px;margin-top:9px}
.bar .pips span{width:26px;height:2px;background:var(--ink-10)}
.bar .pips span.on{background:var(--blue)}
.wxin{
  flex:0 1 190px;min-width:130px;padding:11px 0;border:none;
  border-bottom:1px solid var(--ink-25);background:transparent;
  color:var(--ink);font-size:12px;outline:none;font-family:var(--half)
}
.wxin:focus{border-bottom-color:var(--blue)}
.wxin::placeholder{color:var(--ink-25)}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;top:0;transform:translate(-50%,-150%);z-index:999;
  padding:17px 34px;background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:9px;letter-spacing:.24em;
  text-transform:uppercase;transition:.32s;max-width:92vw;text-align:center
}
.toast.on{transform:translate(-50%,0)}
.toast.bad{background:var(--vermilion)}

/* ---------- 装饰：十字 / 竖排 / 图注 ---------- */
.cross{position:absolute;width:9px;height:9px;pointer-events:none;z-index:3;opacity:.4}
.cross::before,.cross::after{content:"";position:absolute;background:var(--ink)}
.cross::before{left:4px;top:0;width:1px;height:9px}
.cross::after{top:4px;left:0;height:1px;width:9px}
.vtext{
  position:absolute;right:-46px;top:0;writing-mode:vertical-rl;
  font-family:var(--mono);font-size:8px;letter-spacing:.34em;
  color:var(--ink-25);text-transform:uppercase;white-space:nowrap
}
.foot{
  margin-top:88px;padding:22px 0 0;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:8px;letter-spacing:.24em;
  color:var(--ink-25);text-transform:uppercase
}
.loading{
  padding:64px 0;text-align:center;font-family:var(--mono);
  font-size:9px;letter-spacing:.26em;color:var(--ink-25);text-transform:uppercase
}

/* ---------- 移动端 ---------- */
@media (max-width:820px){
  .wrap{padding:0 20px}
  .topbar{padding:14px 20px;font-size:8px;gap:10px}
  header{padding:40px 0 0;grid-template-columns:1fr}
  /* 构成图退为背景，半透明压在图后 */
  .heroArt{position:absolute;right:-24px;top:-10px;width:66%;
    margin:0;opacity:.40;z-index:0}
  .tintwrap,.l2{white-space:normal}
  h1{font-size:clamp(46px,15.5vw,90px);margin-left:-3px}
  h1 .l2{margin-left:4%}
  h1 .l3{margin:16px 0 0 26%;padding-right:0;text-align:left}
  .slab{opacity:.85;width:12%;height:52%;top:2%}
  .lede{margin-top:30px;max-width:none;font-size:14px}
  .oopz{grid-template-columns:1fr;margin-top:48px}
  .oopz .ico{display:none}
  .oopz .body{padding:22px 20px}
  .oopz::after{left:0;width:3px}   /* ← 修手机版黄条 */
  .copy{border-left:none;border-top:1px solid var(--rule);padding:15px 20px}
  .sechead{margin-top:52px}
  .grid{padding:10px 0 18px}
  /* 手机：楼梯收窄但仍左右交替 */
  .grid::before{left:8%}
  .grid::after{left:92%;opacity:.4}
  .cat{width:80%;padding:22px 20px 26px;margin-bottom:-4px}
  .cat:nth-child(odd){margin-left:0;transform:rotate(-.5deg)}
  .cat:nth-child(even){margin-left:20%;transform:rotate(.5deg)}
  .cat::before{display:none}
  .cat .num{margin-bottom:16px}
  .cat .t{font-size:21px}
  .cat .s{max-width:none;font-size:11.5px}
  .cat .go{bottom:20px;right:18px}
  .special{margin-top:44px;padding:30px 22px 30px}
  .sp-title{font-size:clamp(26px,8vw,40px)}
  .sp-meta{grid-template-columns:1fr;gap:10px;margin-top:22px}
  .sp-meta div{padding:10px 0 0}
  .pagehead h2{font-size:clamp(30px,9.5vw,48px)}
  .pagehead .tag{margin-left:10px;transform:translateY(-4px)}
  .opt{flex:1 1 50%;min-width:0;padding:17px 15px 19px}
  .resline .t{flex:0 0 108px;font-size:11.5px}
  .bar .in{padding:11px 20px;gap:14px}
  .vtext{display:none}
  .foot{flex-direction:column;gap:8px}
}