/* ============================================================
   anime. 皮肤  —  杂志排行内页（纯白纸 + 硬黑线 + 玫红）
   ------------------------------------------------------------
   和另外两个站的区别：
     quiz   = 暖砂纸、粗描边、硬投影、网点   → 实心、吵
     fortune= 冷灰蓝、细曲线、衬线、径向     → 线条、静
     这里   = 纯白、硬直线、压缩体、密集网格 → 排版、密
   三个站的骨架不一样，不只是换色。

   只重新赋值 tokens.css 已有变量名，不新增。首屏零 web font。
   ============================================================ */

:root, :root[data-theme="light"], :root[data-theme="dark"] {
  --paper: #fbfaf8;
  --raise: #ffffff;
  --sink:  #eceae6;

  --ink:   #0a0a0a;        /* 接近纯黑，杂志油墨 */
  --muted: #56544f;
  --faint: #9a978f;

  --accent:      #d81b60;  /* 玫红：整块灌，不做点缀 */
  --accent-ink:  #ffffff;
  --accent-soft: #1c2c8c;  /* 墨蓝：第二油墨色，用在序号和边注 */

  --pos: #1c2c8c; --neg: #d81b60; --warn: #8a6212;
  --rule: #0a0a0a;         /* 分隔线就是黑的，杂志不用灰线 */

  --radius-s: 0; --radius-m: 0; --radius-l: 0;
  --dur: 260ms;

  /* 压缩体标题。系统自带，不请求字体文件。 */
  --font-display: "Arial Narrow", "Helvetica Neue", "Roboto Condensed",
                  "Yu Gothic UI", Arial, sans-serif;
}

/* 底纹：极淡的竖向栏线，杂志分栏的暗示，不是装饰性网格 */
body {
  background:
    repeating-linear-gradient(90deg,
      transparent 0 calc(12.5% - 1px), rgba(10,10,10,.05) calc(12.5% - 1px) 12.5%),
    var(--paper);
}

/* 报头：压缩体大标题 + 引言并排，不居中 */
.masthead {
  display: grid; gap: var(--sp-4) var(--sp-6);
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: end;
  padding-bottom: var(--sp-4);
  border-bottom: 6px solid var(--ink);
}
.masthead .eyebrow { grid-column: 1 / -1; }
.hero-title {
  font-size: var(--step-5); font-weight: 700;
  letter-spacing: -.045em; line-height: .82;
  text-transform: uppercase;
}
.standfirst {
  max-width: 34rem; font-size: var(--step-0); color: var(--muted);
  border-left: 3px solid var(--accent); padding-left: var(--sp-4);
}
.standfirst.big { font-size: var(--step-1); color: var(--ink); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  align-self: start; justify-self: start;
  font-size: var(--step--1); font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--ink);
  padding: var(--sp-1) var(--sp-3);
}

/* 竖排侧标：杂志的书眉。英文竖排用 mixed，字母不会躺倒。 */
.sidelabel {
  writing-mode: vertical-rl; text-orientation: mixed;
  justify-self: end; max-height: 22rem;
  font-size: var(--step--1); font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--accent-soft);
  padding: var(--sp-3) var(--sp-2);
  border-left: 1px solid var(--rule);
}
@media (max-width: 720px) { .sidelabel { display: none; } }
/* 手机上报头必须拆成上下两行。并排时标题那一栏是 auto，压缩体大标题
   吃掉约 200px，390 的屏只剩 180px 给引言 —— 一行两三个单词，
   读起来像被撕开的。落地率是整条漏斗最贵的一段，首屏不能这样。 */
@media (max-width: 640px) {
  .masthead { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .standfirst { max-width: none; }
}

/* ---- 排行榜：这个站的主体 ----------------------------------
   四列网格：空心序号 / 标题 / 元信息 / 分数。
   悬停整行反白，序号从空心填实 —— 密集列表里唯一需要的反馈。 */
.index { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--rule); }
.index li {
  display: grid; align-items: center;
  gap: var(--sp-2) var(--sp-4);
  grid-template-columns: 3.6rem minmax(0, 1fr) minmax(0, auto) 3.6rem;
  padding: var(--sp-3) var(--sp-3) var(--sp-3) 0;
  border-bottom: 1px solid var(--rule);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              padding-left var(--dur) var(--ease);
}
.index li b {
  font-family: var(--font-display); font-size: var(--step-4);
  font-weight: 700; line-height: .8; letter-spacing: -.06em;
  color: transparent; -webkit-text-stroke: 1.5px var(--ink);
  transition: color var(--dur) var(--ease), -webkit-text-stroke-color var(--dur) var(--ease);
}
.index .t {
  font-family: var(--font-display); font-size: var(--step-2);
  font-weight: 700; letter-spacing: -.02em; text-transform: uppercase;
}
.index .m { font-size: var(--step--1); color: var(--muted); white-space: nowrap; }
.index em {
  font-style: normal; font-size: var(--step-1); font-weight: 700;
  text-align: right; color: var(--accent-soft);
}
.index li:hover {
  background: var(--ink); color: var(--raise);
  padding-left: var(--sp-3);
}
.index li:hover b { color: var(--accent); -webkit-text-stroke-color: var(--accent); }
.index li:hover .m { color: var(--faint); }
.index li:hover em { color: var(--raise); }
@media (max-width: 620px) {
  .index li { grid-template-columns: 2.8rem minmax(0, 1fr) 3rem; }
  .index .m { grid-column: 2; }
  .index em { grid-row: 1; grid-column: 3; }
}

/* 主按钮：整块玫红，悬停时黑块从下方推上来盖住 */
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
.go {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6);
  font-family: var(--font-display); font-size: var(--step-1); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent);
}
.go::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform var(--dur) var(--ease);
}
.go:hover::before { transform: none; }
.go:active { transform: translateY(2px); }
.fineprint { font-size: var(--step--1); color: var(--faint); }

/* ---- 选项：四张硬边卡片，悬停时玫红从左灌入 ---------------- */
.sec-title {
  font-family: var(--font-display); font-size: var(--step-3); font-weight: 700;
  letter-spacing: -.035em; line-height: .95; text-transform: uppercase;
}
.sec-title.small { font-size: var(--step-1); letter-spacing: .04em; }

.picks {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  border-top: 2px solid var(--rule);
}
.pick {
  position: relative; isolation: isolate; text-align: left;
  padding: var(--sp-5) var(--sp-4);
  border-bottom: 2px solid var(--rule); border-right: 1px solid var(--rule);
  transition: color var(--dur) var(--ease);
}
.pick::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.pick b {
  display: block; font-family: var(--font-display);
  font-size: var(--step-2); font-weight: 700; letter-spacing: -.02em;
  text-transform: uppercase;
}
.pick span { display: block; font-size: var(--step--1); color: var(--muted); margin-top: var(--sp-2); }
.pick i {
  position: absolute; top: var(--sp-3); right: var(--sp-4);
  font-style: normal; font-size: var(--step--1); font-weight: 700;
  color: var(--accent-soft); letter-spacing: .1em;
}
.pick:hover { color: var(--accent-ink); }
.pick:hover::before { transform: scaleX(1); }
.pick:hover span, .pick:hover i { color: var(--accent-ink); }

/* ---- 结果：整版特稿 ---------------------------------------- */
.feature {
  display: grid; gap: var(--sp-4);
  border-top: 6px solid var(--ink); border-bottom: 6px solid var(--ink);
  padding: var(--sp-5) 0;
}
.feat-rank { display: flex; align-items: baseline; gap: var(--sp-3); }
.feat-rank b {
  font-family: var(--font-display); font-size: var(--step-4); font-weight: 700;
  line-height: .8; letter-spacing: -.06em; color: var(--accent);
}
.feat-rank span { font-size: var(--step--1); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

.verdict {
  font-family: var(--font-display); font-size: var(--step-5); font-weight: 700;
  letter-spacing: -.05em; line-height: .84; text-transform: uppercase;
}
.feat-meta { display: flex; flex-wrap: wrap; gap: 0; }
.feat-meta span {
  font-size: var(--step--1); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--rule); margin: -.5px;
}
.feat-meta span:last-child { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-soft); }

.why { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.why li {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--sp-4);
  padding: var(--sp-3) 0; border-top: 1px solid var(--rule);
}
.why b { font-size: var(--step--1); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.why span { color: var(--muted); }

.ad {
  background: var(--sink);
  border-top: 2px solid var(--rule); border-bottom: 2px solid var(--rule);
  color: var(--faint); letter-spacing: .24em; text-transform: uppercase;
  font-size: var(--step--1); font-weight: 700;
}

/* 交叉导航：目录条，整条黑底翻转 */
.more { display: grid; gap: 0; border-top: 2px solid var(--rule); }
.more a {
  display: grid; align-items: center; gap: 0 var(--sp-4);
  grid-template-columns: minmax(0, 1fr) auto;
  padding: var(--sp-4) var(--sp-3) var(--sp-4) 0;
  text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--rule);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              padding-left var(--dur) var(--ease);
}
.more b {
  font-family: var(--font-display); font-size: var(--step-2); font-weight: 700;
  letter-spacing: -.02em; text-transform: uppercase;
}
.more span { font-size: var(--step--1); color: var(--muted); }
.more .icon { grid-row: 1 / span 2; grid-column: 2; color: var(--accent); }
.more a:hover { background: var(--ink); color: var(--raise); padding-left: var(--sp-3); }
.more a:hover span { color: var(--faint); }

.back {
  align-self: start;
  font-size: var(--step--1); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  border-bottom: 2px solid transparent; padding-bottom: 2px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.back:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ---- 入场：整块从左侧推入，像翻页时内容甩进版心 ------------
   fill 用 backwards：跑完把 transform 还给 CSS，
   否则 .go:active / .index li:hover 的位移全被终态吃掉。 */
.screen[data-active] > * { animation: slidein .55s var(--ease) backwards; }
.screen[data-active] > :nth-child(2) { animation-delay: .07s }
.screen[data-active] > :nth-child(3) { animation-delay: .13s }
.screen[data-active] > :nth-child(n+4) { animation-delay: .19s }
@keyframes slidein { from { opacity: 0; transform: translateX(-22px) } to { opacity: 1; transform: none } }

/* 榜单逐行落位，密集列表用这个才不会一次糊一片。
   延迟选择器必须带上 .screen[data-active]：不带的话特异度输给上面那条
   简写，animation-delay 会被简写里的 0s 覆盖，六行同时冒出来。 */
.screen[data-active] .index li { animation: row .4s var(--ease) backwards; }
.screen[data-active] .index li:nth-child(1){animation-delay:.20s}
.screen[data-active] .index li:nth-child(2){animation-delay:.26s}
.screen[data-active] .index li:nth-child(3){animation-delay:.32s}
.screen[data-active] .index li:nth-child(4){animation-delay:.38s}
.screen[data-active] .index li:nth-child(5){animation-delay:.44s}
.screen[data-active] .index li:nth-child(6){animation-delay:.50s}
@keyframes row { from { opacity: 0; clip-path: inset(0 100% 0 0) } to { opacity: 1; clip-path: inset(0) } }

@media (prefers-reduced-motion: reduce) {
  .screen[data-active] > *, .screen[data-active] .index li { animation: none; }
}