/* ============================================================
   fortune / hub.css  —  聚合首页专用（/fortune/）
   ------------------------------------------------------------
   版式取年历的目录页：编号的表、罗马数字、细刻线，全篇零色块、
   零投影、零位移。quiz 的货架靠实心块 + 硬投影 + hover 位移，
   这一页只靠刻线的粗细和墨色变化 —— 两套语汇不共用任何一样东西。

   命名全部带 eph- 前缀。fortune/skin.css 里已经有 .hub（刻度盘
   中心）、.entry（表单）、.systems、.top 这些名字，一个都不能碰 ——
   上一次 traits 的 .block 撞上 skin 的 .block，一页多出四条左边线。
   ============================================================ */

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

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

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

.eph-h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.eph-h1 em { font-style: italic; color: var(--accent); }

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

/* ---- 分节标题：标题后面拖一条通到页边的细线 ----------------
   这条线顺带把宽屏右边那片空填掉了 —— 标题不再是孤零零一截字。 */
.eph-h2 {
  margin: 0 0 var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
}
.eph-h2::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.eph-h2 .icon { color: var(--accent-soft); }

/* ---- 主推位：雕版双细线框 ----------------------------------
   外框一条线，::before 再往里缩 5px 画第二条 —— 印刷年历扉页的
   做法。不用 box-shadow 是因为这一站一个投影都不能有。 */
.eph-main {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-4) var(--sp-5);
  align-items: start;
  padding: var(--sp-6) var(--sp-5);
  background: var(--raise);
  border: 1px solid var(--ink);
  color: inherit;
  text-decoration: none;
  transition: background var(--dur) ease, border-color var(--dur) ease;
}
.eph-main::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--rule);
  pointer-events: none;
  transition: border-color var(--dur) ease;
}
.eph-main:hover, .eph-main:focus-visible { background: #fff; border-color: var(--accent); }
.eph-main:hover::before { border-color: var(--accent-soft); }
.eph-main:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* 罗马数字。衬线、赭石、下面压一条短线，像表头的编号。 */
.eph-main-num {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 400;
  line-height: 1;
  color: var(--accent-soft);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--accent-soft);
  transition: color var(--dur) ease, border-color var(--dur) ease;
}
.eph-main:hover .eph-main-num { color: var(--accent); border-bottom-color: var(--accent); }

.eph-main-body { display: grid; gap: var(--sp-3); }

.eph-main-tag {
  justify-self: start;
  font-size: var(--step--1);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--accent);
}

.eph-main-name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.01em;
}

.eph-main-what { max-width: var(--measure); color: var(--muted); }

/* 四条参数排成一张小规格表：每条一行，之间是点线 —— 年历里
   「日出 日落 月相」那种表。横排的胶囊是另一套语汇，不用。
   这里刻意不用 flex：每条里是「图标 + 一段带 <b> 的行内文字」，
   flex 会把 <b> 和它前后的文字各当成一个 item，「6 figures」之间
   的词距会变成 gap 的大小。改成悬挂缩进，折行也对得齐。 */
.eph-main-spec {
  display: grid;
  gap: 0;
  font-size: var(--step--1);
  color: var(--ink);
}
.eph-main-spec > span {
  display: block;
  padding: var(--sp-2) 0 var(--sp-2) 1.7em;
  text-indent: -1.7em;
  border-top: 1px dotted var(--rule);
  line-height: 1.5;
}
.eph-main-spec > span:first-child { border-top: 0; }
.eph-main-spec .icon {
  width: 1em; height: 1em;
  margin-right: .7em;
  vertical-align: -.13em;
  color: var(--accent-soft);
}
.eph-main-spec b { font-weight: 600; color: var(--accent); }

/* 唯一允许的实心：朱红是这一站的「此刻」标记，CTA 正好是那个此刻。
   它是 .eph-main-body 的子项，跟在正文后面 —— 放回外层就会被右边
   更长的规格列顶到下面去，正文和按钮之间空一大块。 */
.eph-main-go {
  grid-column: 1;
  justify-self: start;
  margin-top: var(--sp-3);
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: .02em;
  transition: background var(--dur) ease, color var(--dur) ease;
}
.eph-main:hover .eph-main-go { background: var(--accent); color: var(--accent-ink); }

/* ---- 编号表：目录页，不是卡片墙 ---------------------------- */
.eph-index { list-style: none; margin: 0; padding: 0; }
.eph-row { border-top: 1px solid var(--rule); }
.eph-row:last-child { border-bottom: 1px solid var(--rule); }

.eph-row > a {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--sp-2) var(--sp-5);
  padding: var(--sp-5) var(--sp-3) var(--sp-5) 0;
  color: inherit;
  text-decoration: none;
  transition: background var(--dur) ease, padding-left var(--dur) ease;
}
/* hover 不位移整块（位移是 quiz 的语汇），只让左边长出一条朱红边线，
   同时正文往右让一点位置 —— 像在目录上用指甲划了一道。 */
.eph-row > a::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: var(--accent);
  transition: width var(--dur) ease;
}
.eph-row > a:hover, .eph-row > a:focus-visible { background: var(--raise); padding-left: var(--sp-4); }
.eph-row > a:hover::before, .eph-row > a:focus-visible::before { width: 3px; }
.eph-row > a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.eph-num {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.1;
  color: var(--accent-soft);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur) ease;
}
.eph-row > a:hover .eph-num { color: var(--accent); }

.eph-row-main { display: grid; gap: var(--sp-2); }
.eph-row-name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.15;
}
.eph-row-what { max-width: var(--measure); color: var(--muted); font-size: var(--step-0); }

.eph-row-spec {
  grid-column: 2;
  padding-top: var(--sp-2);
  border-top: 1px dotted var(--rule);
  font-size: var(--step--1);
  color: var(--faint);
}
/* 三条规格各自成行，不拿「·」串成一句：右边那一栏只有 15rem，串起来
   会在「8 / characters」中间断开，读着像断了句而不是断了行。 */
.eph-row-spec > span { display: block; line-height: 1.5; }
.eph-row-spec > span + span { margin-top: 1px; }
.eph-row-spec b { font-weight: 600; color: var(--accent-soft); }

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

/* ---- 只有一篇的延伸阅读：横幅，不排网格 -------------------- */
.eph-read-one {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6);
  border-left: 3px solid var(--accent-soft);
  background: var(--sink);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur) ease, background var(--dur) ease;
}
.eph-read-one:hover, .eph-read-one:focus-visible { border-left-color: var(--accent); background: var(--raise); }
.eph-read-one:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.eph-read-name { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.12; }
.eph-read-what { max-width: var(--measure); color: var(--muted); }
.eph-read-go {
  justify-self: start;
  display: inline-flex; align-items: center; gap: .5em;
  font-size: var(--step--1);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---- 说明段 ----------------------------------------------- */
.eph-notes { display: grid; gap: var(--sp-5); }
.eph-notes > .eph-h2 { grid-column: 1 / -1; margin-bottom: 0; }

.eph-note h3 {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.25;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--rule);
}
.eph-note p { margin: 0; max-width: var(--measure); color: var(--muted); font-size: var(--step--1); }
.eph-note em { font-style: italic; color: var(--ink); }
.eph-note a { color: var(--accent); text-underline-offset: 3px; }

/* ---- 宽屏：每一块自己找到第二列的事做 ----------------------
   正文栏被 --measure 锁在 ~590px，1280 的屏上右边会空出一大片。
   一整页都靠左空右看着像没排完 —— 上一版 quiz 就栽在这，断言全
   过、构建全绿，看渲染图才发现。所以：报头把导语挪到右边并用一
   条竖线隔开，主推卡把规格表立成右列，目录行把规格挪到第三列。 */
@media (min-width: 64rem) {
  .eph-top {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    column-gap: var(--sp-7);
    align-items: start;
  }
  .eph-kicker { grid-column: 1 / -1; }
  .eph-lede {
    padding-left: var(--sp-6);
    border-left: 1px solid var(--rule);
    align-self: end;
  }

  .eph-main { padding: var(--sp-7) var(--sp-6); }
  .eph-main-body { grid-template-columns: minmax(0, 1fr) 17rem; column-gap: var(--sp-6); }
  .eph-main-tag, .eph-main-name { grid-column: 1 / -1; }
  .eph-main-what { grid-column: 1; }
  .eph-main-spec {
    grid-column: 2;
    grid-row: 3 / span 2;
    align-content: start;
    padding-left: var(--sp-5);
    border-left: 1px solid var(--rule);
  }

  /* 目录行四列：编号 | 名字+说明 | 规格 | 箭头。规格从正文底下挪到
     右边，一行就把整幅宽度占满，正好是目录页该有的样子。
     这一格垂直居中只能用 align-self：它自己是 grid 容器，里面的
     align-content 管的是三条规格之间的事，管不到它在行里的位置。 */
  .eph-row > a { grid-template-columns: 3rem minmax(0, 1fr) 15rem auto; align-items: center; }
  .eph-row-spec {
    grid-column: 3;
    grid-row: 1;
    padding-top: 0;
    border-top: 0;
    padding-left: var(--sp-5);
    border-left: 1px dotted var(--rule);
    align-self: center;
    line-height: 1.5;
  }
  .eph-go { grid-column: 4; align-self: center; }

  .eph-read-one { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .eph-read-name { grid-column: 1; }
  .eph-read-what { grid-column: 1; }
  .eph-read-go { grid-column: 2; grid-row: 1 / span 2; }

  .eph-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
}

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

  /* 导语在 390px 上按 --step-0 已经够克制；主推卡必须留在首屏里，
     买量进来的人第一眼要看见能点的东西，不是一段自我介绍。 */
  .eph-main { grid-template-columns: minmax(0, 1fr); padding: var(--sp-5) var(--sp-4); }
  .eph-main-num { justify-self: start; padding-inline: 0; }
  .eph-main-go { grid-column: 1; justify-self: stretch; justify-content: center; }

  /* 目录行：箭头在窄屏既没位置也没信息量，整行本来就是链接。 */
  .eph-row > a { grid-template-columns: 2.2rem minmax(0, 1fr); gap: var(--sp-2) var(--sp-4); padding-right: 0; }
  .eph-go { display: none; }
  .eph-read-one { padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5); }
}

/* 这一站的动效全部是刻线的粗细和墨色，本来就没有位移，
   reduce-motion 下把过渡关掉即可，静态版面完全不变。 */
@media (prefers-reduced-motion: reduce) {
  .eph-main, .eph-main::before, .eph-main-num, .eph-main-go,
  .eph-row > a, .eph-row > a::before, .eph-num, .eph-go, .eph-read-one { transition: none; }
  .eph-row > a:hover { padding-left: 0; }
}