/* ============================================================
   anime / hub.css  —  聚合首页专用（/anime/）
   ------------------------------------------------------------
   版式取杂志目录跨页：超大压缩体序号、2px 实黑横线、双栏密排。
   一手独门装置：序号默认空心描边，hover 灌实成玫红 —— 网络里
   另外四个聚合页一个都不用描边字，认得出是这一页。

   和已经做完的两页的硬区别（别写串）：
     quiz    实心块 + 硬投影 + hover 位移
     fortune 罗马数字 + 发丝刻线 + 零色块零投影
     这里    空心描边数字 + 实黑粗线 + 一处玫红满灌

   命名全部带 mag- 前缀。anime/skin.css 已经占了 .index .masthead
   .feature .feat-meta .feat-rank .standfirst .sidelabel .cta-row
   .go .why .m .t —— 一个都不能碰。
   ============================================================ */

.mag {
  max-width: 74rem;
  margin-inline: auto;
  padding: var(--sp-6) var(--sp-5) var(--sp-8);
  display: grid;
  gap: var(--sp-6);
}

/* ---- 报头 ------------------------------------------------- */
.mag-top { display: grid; gap: var(--sp-4); }

.mag-kicker {
  margin: 0;
  display: flex; align-items: center; gap: .5em;
  font-size: var(--step--1);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.mag-kicker .icon { width: 1.1em; height: 1.1em; }

/* 压缩体、几乎贴死的行距、负字距 —— 杂志大标题的三件套。
   字号封在 --step-4：--step-5 在 1280 上是 91px，三行硬换行的标题
   会在 --measure 那一栏里折成八行，报头一个人占满 723px 首屏，
   主推块直接被挤到折线以下。 */
.mag-h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 700;
  line-height: .94;
  letter-spacing: -.025em;
  text-transform: uppercase;
  text-wrap: balance;
}
.mag-h1 em { font-style: normal; color: var(--accent); }

.mag-lede { margin: 0; max-width: var(--measure); color: var(--muted); }

/* ---- 分节标题：整条压在一根 2px 黑线上 -------------------- */
.mag-h2 {
  margin: 0 0 var(--sp-4);
  display: flex; align-items: center; gap: .5em;
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--ink);
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.mag-h2 .icon { width: 1.05em; height: 1.05em; color: var(--accent); }

/* .mag-part 把标题和它下面的东西锁进同一节：.mag 是 grid，
   直接子元素之间会吃一次 gap，标题再带 margin 就离得太远。 */
.mag-part { display: block; }

/* ---- 主推位：封面故事 --------------------------------------
   上下各一条 3px 黑线，中间不设背景 —— 杂志跨页上的「本期封面」
   就是靠两条重线圈出来的，不靠卡片。 */
.mag-cover {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-3) var(--sp-5);
  align-items: start;
  padding: var(--sp-5) 0;
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  color: inherit;
  text-decoration: none;
}
.mag-cover:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

/* 空心描边数字。@supports 兜底：不支持描边的浏览器里退回实心墨蓝，
   不能让 color:transparent 把数字整个吃掉。 */
.mag-cover-num, .mag-num {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: .8;
  letter-spacing: -.04em;
  color: var(--accent-soft);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur) ease, -webkit-text-stroke-color var(--dur) ease;
}
@supports (-webkit-text-stroke: 1px black) {
  .mag-cover-num, .mag-num {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--accent-soft);
  }
}
.mag-cover-num { font-size: var(--step-5); }
.mag-cover:hover .mag-cover-num,
.mag-cover:focus-visible .mag-cover-num {
  color: var(--accent);
  -webkit-text-stroke-color: var(--accent);
}

.mag-cover-body { display: grid; gap: var(--sp-3); }

/* 全页唯一一处满灌玫红。省着用，它才是重音。 */
.mag-cover-tag {
  justify-self: start;
  padding: .25em .8em;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.mag-cover-name {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.mag-cover-what { max-width: var(--measure); color: var(--muted); }

/* 规格行排成一条横向的小字带，用竖线分节 —— 杂志版权栏那一类。
   每条自己是一个 flex item，里面的 <b> 和文字不会被拆开。 */
.mag-cover-spec {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--ink);
  font-size: var(--step--1);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.mag-cover-spec > span { display: flex; align-items: baseline; gap: .4em; }
.mag-cover-spec > span + span { padding-left: var(--sp-4); border-left: 1px solid var(--rule); }
.mag-cover-spec b { font-weight: 700; color: var(--accent); }

.mag-cover-go {
  grid-column: 2;
  justify-self: start;
  display: inline-flex; align-items: center; gap: .6em;
  padding: var(--sp-3) var(--sp-5);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: background var(--dur) ease;
}
.mag-cover:hover .mag-cover-go { background: var(--accent); }

/* ---- 目录行 ------------------------------------------------ */
.mag-list { list-style: none; margin: 0; padding: 0; }
.mag-row + .mag-row { border-top: 1px solid var(--ink); }

.mag-row > a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--sp-2) var(--sp-5);
  align-items: start;
  padding: var(--sp-4) 0;
  color: inherit;
  text-decoration: none;
  transition: background var(--dur) ease;
}
/* hover 不位移、不长边线（那是另外两页的语汇）：整行浅浅上底，
   序号灌实成玫红。视线跟着数字走，这是目录页本来的读法。 */
.mag-row > a:hover, .mag-row > a:focus-visible { background: var(--sink); }
.mag-row > a:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.mag-num { font-size: var(--step-4); }
.mag-row > a:hover .mag-num, .mag-row > a:focus-visible .mag-num {
  color: var(--accent);
  -webkit-text-stroke-color: var(--accent);
}

.mag-row-main { display: grid; gap: var(--sp-2); }
.mag-row-name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.015em;
  text-transform: uppercase;
}
.mag-row-what { max-width: var(--measure); color: var(--muted); font-size: var(--step-0); }

/* 规格：一条一行竖排，不用「·」串成一句。窄列里点号分隔会把
   「3 / MIN」拆到两行读，看着像断了句。 */
.mag-row-spec {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--step--1);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.mag-row-spec > span + span { padding-left: var(--sp-4); border-left: 1px solid var(--rule); }
.mag-row-spec b { font-weight: 700; color: var(--accent); }

.mag-go { grid-column: 3; grid-row: 1; width: 1.2em; height: 1.2em; color: var(--faint); transition: color var(--dur) ease; }
.mag-row > a:hover .mag-go { color: var(--accent); }

/* ---- 延伸阅读：两栏，无序号，和上面的编号目录分得开 -------- */
.mag-reads { display: grid; gap: var(--sp-5); }
.mag-read {
  display: grid;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--ink);
  color: inherit;
  text-decoration: none;
}
.mag-read:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.mag-read-name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.015em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--dur) ease;
}
.mag-read:hover .mag-read-name { text-decoration-color: var(--accent); }
.mag-read-what { color: var(--muted); font-size: var(--step-0); }
.mag-read-go {
  justify-self: start;
  display: inline-flex; align-items: center; gap: .5em;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---- 说明段 ----------------------------------------------- */
.mag-notes { display: grid; gap: var(--sp-5); }
.mag-note h3 {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.mag-note p { margin: 0; color: var(--muted); font-size: var(--step--1); }
.mag-note em { font-style: italic; color: var(--ink); }
.mag-note a { color: var(--accent); text-underline-offset: 3px; }

/* ---- 宽屏：正文栏被 --measure 锁住，右边不能整列空着 --------
   报头分两栏、封面块的规格立成右列、目录行把规格挪到第三列、
   阅读和说明各排两 / 三栏。上一版 quiz 就栽在「断言全过、构建全
   绿、右边空一半」，所以这一段是必须的，不是可选的。 */
@media (min-width: 64rem) {
  .mag { gap: var(--sp-7); }

  .mag-top { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: var(--sp-7); align-items: end; }
  .mag-kicker { grid-column: 1 / -1; }
  .mag-lede { padding-left: var(--sp-5); border-left: 2px solid var(--ink); }

  .mag-cover { padding: var(--sp-6) 0; gap: var(--sp-4) var(--sp-6); }
  .mag-cover-body { grid-template-columns: minmax(0, 1fr) 16rem; column-gap: var(--sp-6); }
  .mag-cover-tag, .mag-cover-name { grid-column: 1 / -1; }
  .mag-cover-what { grid-column: 1; }
  /* 规格带到了右列就竖过来排，横向的竖分隔线要撤掉，
     否则每条左边都挂一根孤立的短线。 */
  .mag-cover-spec {
    grid-column: 2; grid-row: 3 / span 2;
    flex-direction: column;
    align-content: start;
    gap: var(--sp-2);
    padding: 0 0 0 var(--sp-5);
    border-top: 0;
    border-left: 2px solid var(--ink);
  }
  .mag-cover-spec > span + span { padding-left: 0; border-left: 0; }

  .mag-row > a { grid-template-columns: auto minmax(0, 1fr) 14rem auto; align-items: start; }
  /* 规格在右列就竖过来排，横向的竖分隔线撤掉，否则每条左边挂一根孤立短线。
     这一格也不能靠 flex 的 align-items 居中：它自己是 flex 容器，
     里面每条是独立 item，垂直位置要用 align-self 从外层 grid 给。 */
  .mag-row-spec {
    grid-column: 3; grid-row: 1;
    flex-direction: column;
    gap: var(--sp-2);
    padding-left: var(--sp-5);
    border-left: 1px solid var(--rule);
    align-self: center;
    line-height: 1.4;
  }
  .mag-row-spec > span + span { padding-left: 0; border-left: 0; }
  .mag-go { grid-column: 4; align-self: center; }

  .mag-reads { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
  /* 两篇的标题行数不一样，正文起点就会错开一行。subgrid 让两栏共用
     同一套行高，标题 / 正文 / 「读它」三条基线各自对齐。 */
  @supports (grid-template-rows: subgrid) {
    .mag-reads { grid-template-rows: auto; }
    .mag-read { grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
  }
  .mag-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-6); }
}

/* ---- 窄屏 ------------------------------------------------- */
@media (max-width: 40rem) {
  .mag { padding: var(--sp-5) var(--sp-4) var(--sp-6); gap: var(--sp-5); }

  /* 封面块必须留在首屏里：买量进来的人第一眼要看见能点的东西。 */
  .mag-cover { grid-template-columns: minmax(0, 1fr); }
  .mag-cover-num { font-size: var(--step-4); }
  .mag-cover-go { grid-column: 1; justify-self: stretch; justify-content: center; }

  /* 箭头在窄屏既没位置也没信息量，整行本来就是链接。 */
  .mag-row > a { grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-2) var(--sp-4); }
  .mag-num { font-size: var(--step-3); }
  .mag-go { display: none; }
}

/* 这一页的动效只有颜色和底色，本来就没有位移，关掉过渡即可，
   静态版面完全不变。 */
@media (prefers-reduced-motion: reduce) {
  .mag-cover-num, .mag-num, .mag-cover-go, .mag-row > a, .mag-go, .mag-read-name { transition: none; }
}