/* ============================================================
   home.css —— 根域导航页的皮，第六套。
   ------------------------------------------------------------
   跟五个站的关系：只读 tokens.css 的变量名，不读 engine.css
   （engine.css 是多屏流程的引擎，这一页是一张静态页，引进来只会
   跟版式打架）。规则跟 skin.css 一样：只重新赋值，不新增变量名，
   局部参数走 --_ 前缀。

   为什么长得跟五个站都不一样：
   五个站的强调色全是暖色（红 #e5104c / 朱 #b4231f / 玫 #d81b60 /
   橙 #ff5b2e / 琥珀 #ffb020），底色是两浅一冷两深。这一页反过来
   ——底色是唯一一块偏绿的灰，页面自己不带彩，**全部彩色都借五个
   站自己的强调色**。所以这页的配色不是挑出来的，是五个站的色票表。
   用户扫一眼就知道等会儿要进哪种画风，颜色在这里是导航，不是装饰。
   版面同理：全站只有这一页能把五个强调色摆在一起，所以主装置就是
   「五条色带并排连成一条」—— 五个聚合页各自只有一个强调色，做不出。

   2026-09-15 重排，手机优先。旧版是五行一览表，一行一个站跟一段
   四十字介绍，手机第一屏只看得到大标题和第一行。我们的人从 TikTok
   来，基本全是手机 —— 第一眼看不到能点的东西就走了。现在报头压到
   三行，工具做成方块直接铺在色带下面，成段的文字全部沉到页尾。
   ============================================================ */

:root {
  --paper: #e4e6e1;        /* 淡鼠尾草灰，比 quiz 的纸冷、比 fortune 的蓝纸绿 */
  --raise: #eef0ec;
  --sink:  #d3d6cf;

  --ink:   #10120f;        /* 绿黑，不是中性黑也不是蓝黑 */
  --muted: #4d514a;
  --faint: #7f857b;

  --accent:      #1b4d3a;  /* 深常春藤：只用在焦点环和页脚的线上 */
  --accent-ink:  #ffffff;
  --accent-soft: #d5e2da;

  --rule: #c6cac0;

  /* 展平的人文无衬线：Windows 有 Candara，macOS 有 Optima。
     刻意避开五个站用过的 system-ui / Georgia / Arial Narrow /
     Bahnschrift / 等宽，声音要能一眼听出不同。 */
  --font-display: Candara, Optima, "Gill Sans", "Gill Sans MT",
                  "Trebuchet MS", sans-serif;

  --radius-s: 0; --radius-m: 0; --radius-l: 0;   /* 索引页不要圆角 */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0d120f; --raise: #141b17; --sink: #0a0f0c;
    --ink: #e8ece6; --muted: #9aa89f; --faint: #6a7a70;
    --accent: #7fd6a6; --accent-ink: #0d120f; --accent-soft: #152a20;
    --rule: #242e28;
  }
}
:root[data-theme="dark"] {
  --paper: #0d120f; --raise: #141b17; --sink: #0a0f0c;
  --ink: #e8ece6; --muted: #9aa89f; --faint: #6a7a70;
  --accent: #7fd6a6; --accent-ink: #0d120f; --accent-soft: #152a20;
  --rule: #242e28;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--wide);
  margin: 0 auto;
  /* 手机上顶部不留大边距：那 56px 换算下来就是第一屏少看见一行工具。 */
  padding: var(--sp-5) var(--sp-4) var(--sp-7);
}
@media (min-width: 46rem) { .wrap { padding: var(--sp-7) var(--sp-5) var(--sp-7); } }

.icon {
  width: 1em; height: 1em;
  fill: none; stroke: currentColor;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  flex: none;
}

:where(a):focus-visible, :where(button):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---- 报头：只许三行 ---------------------------------------- */
/* 旧版这里是大标题 + 四行说明 + 一张色票图例，手机上把工具全顶出了
   第一屏。我们的人从 TikTok 来，基本全是手机 —— 第一眼看不到能点的
   东西就走了。所以报头压到最短，图例删掉（下面的色板就是图例）。 */
.idx-top { display: grid; gap: var(--sp-3); }

.idx-kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.idx-h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.015em;
  text-wrap: balance;
}
/* 末行用重量拉开层级，不靠加字号 —— 展平体加粗之后骨架变化很大，
   一轻一重本身就是这套字的性格。 */
.idx-h1 b { font-weight: 700; }

.idx-lede {
  max-width: var(--measure);
  margin: 0;
  font-size: var(--step-0);
  color: var(--muted);
}

/* ---- 五块色板 ---------------------------------------------- */
/* gap 就是分隔线：容器铺 --rule，每块自己铺 --raise，缝里透出来的
   那 1px 就是格线。宽屏五块并排的时候，五条色带首尾相接连成一条
   横贯整页的色标 —— 全站只有这一页能同时摆出五个强调色，五个聚合页
   各自只有一个，做不出这一手。 */
.idx-planks {
  margin-top: var(--sp-6);
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

/* flex 纵向不是 grid：要让「Reading」那一行贴着块底，宽屏五列的
   底边才对得齐，而 margin-top:auto 在 grid 项上推不动。 */
.idx-plank {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: 0 var(--sp-4) var(--sp-4);
  background: var(--raise);
}

/* 色带：这一页唯一的大块彩色。载入时从左往右画一次，只动 transform。 */
.idx-bar {
  flex: none;
  height: 10px;
  margin-inline: calc(var(--sp-4) * -1);
  background: var(--_c);
  transform-origin: left;
  animation: bar var(--dur-slow) var(--ease) both;
  animation-delay: calc(var(--_i) * 80ms);
}
@keyframes bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.idx-door {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  color: inherit;
  text-decoration: none;
}
.idx-mark { font-size: 1.2rem; color: var(--_c); }
.idx-name { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.15; }
.idx-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--faint);
  white-space: nowrap;
}
.idx-go { font-size: 1rem; color: var(--faint); transition: transform var(--dur-fast) var(--ease); }
.idx-door:hover .idx-name { color: var(--_c); }
.idx-door:hover .idx-go { transform: translateX(3px); color: var(--_c); }


/* ---- 工具方块 ---------------------------------------------- */
/* 手机上两列。方块上只有工具名加两三个词，没有一句完整的话 ——
   这一页的任务是让人一眼看见有什么能点，成段的文字全在页尾。 */
.idx-chips { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }

.idx-chip {
  display: grid;
  align-content: start;
  gap: 2px;
  padding: var(--sp-3);
  background: var(--paper);
  border: 1px solid var(--rule);
  color: inherit;
  text-decoration: none;
  font-size: var(--step-0);
  line-height: 1.2;
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.idx-chip b {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 400;
  line-height: 1.3;
  color: var(--faint);
}
.idx-chip:hover { border-color: var(--_c); background: var(--raise); }

/* 主推：占满一整行，左边压一条本站色。不加图标不加箭头 ——
   宽度和那条色边已经把它跟其他方块分开了。 */
.idx-pick {
  grid-column: 1 / -1;
  border-left: 4px solid var(--_c);
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.05;
}

/* 读物不是工具，所以不做成方块 —— 一行文字链接带过，免得跟上面
   那排能点出结果的东西抢眼。贴块底，宽屏五列底边才对得齐。 */
.idx-reads {
  margin: auto 0 0;
  padding-top: var(--sp-1);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-1) var(--sp-3);
  font-size: var(--step--1);
}
.idx-reads span {
  font-family: var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}
.idx-reads a { color: var(--muted); text-underline-offset: 3px; }
.idx-reads a:hover { color: var(--_c); }

/* ---- 页脚：成段的文字全在这儿，工具下面 -------------------- */
.colophon {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 2px solid var(--ink);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--sp-5);
}
.colophon h2 {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
}
.colophon p { margin: 0; font-size: var(--step--1); color: var(--muted); }
.colophon a { color: var(--ink); text-underline-offset: 3px; }

/* ---- 由窄到宽，三档 ---------------------------------------- */
/* 平板：块还是一竖排（色带保持整页宽，那一条横色带是这页的主装置），
   只把方块从两列放到三列。 */
@media (min-width: 46rem) {
  .idx-chips { grid-template-columns: repeat(3, 1fr); }
}

/* 桌面：五块并排，五条色带首尾相接连成一条横贯整页的色标。
   这时每块只有 200px 出头，方块改成一列竖排才放得下工具名。 */
@media (min-width: 72rem) {
  .idx-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    align-items: end;
    gap: var(--sp-4) var(--sp-6);
  }
  .idx-kicker { grid-column: 1 / -1; }
  .idx-lede { font-size: var(--step-1); padding-bottom: .35em; }

  .idx-planks { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .idx-bar { height: 14px; }
  /* 窄到 200px 的一列里，站名和件数并排会挤成两行还对不齐，
     所以件数换到第二行 —— 图标和箭头留在站名那一行。 */
  .idx-door { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px var(--sp-2); }
  .idx-mark { grid-area: 1 / 1; }
  .idx-name { grid-area: 1 / 2; }
  .idx-go { grid-area: 1 / 3; }
  .idx-count { grid-area: 2 / 2 / 2 / 4; margin-left: 0; }

  .idx-chips { grid-template-columns: 1fr; }
  .idx-pick { font-size: var(--step-1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}