/* ═══════════════════════════════════════════════════════════════════
   迭代 15 · 事实带（首屏正下方那条数字）
   ───────────────────────────────────────────────────────────────────
   为什么挑它：它是整页第二个被看到的东西，而上一版只有 197px 高、
   数字 48px、五列等权、且**没有一句话说这是什么**——读起来像页脚
   的补充信息，不像一句主张。老叶要的四样里，这块同时欠 UI 和结构。

   这一版按「字即设计」来做，不加装饰：
     ① 数字放到 clamp(64px,7vw,116px) 衬线，金箔由亮到暗有方向
     ② 补一行眉标说清「这五条都能点开自己验」——一眼看懂
     ③ 单位行和说明行分成两级，不再是一坨小字
     ④ 分隔线做成上下渐隐的发丝线，不是四条硬边框
     ⑤ 它本来就是五个链接，但看不出来——补下划线扫入 + 箭头
     ⑥ 顺带把队列里 ④「数字滚动进场」做掉：滚动驱动，无 JS

   守住的：只动 transform / opacity；不支持 view() 的浏览器整条动画
   直接跑完，元素留在可见态，不会白屏。
   ═══════════════════════════════════════════════════════════════════ */

html body .qpb{
  position:relative;
  padding:clamp(52px,5.6vw,86px) 0 clamp(48px,5.2vw,78px);
  background:
    linear-gradient(180deg,
      rgba(24,19,10,.62) 0%,
      rgba(14,13,11,.96) 46%,
      var(--xh-bg) 100%);
  border-bottom:1px solid var(--xh-hair);
  overflow:hidden}

/* 顶上接首屏那道地平线的余光，避免和首屏硬切一刀 */
html body .qpb::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,
    transparent 0%, rgba(196,151,73,.10) 18%,
    rgba(226,192,121,.42) 50%,
    rgba(196,151,73,.10) 82%, transparent 100%)}

/* ── ① 眉标行：说清这条带子是干嘛的 ───────────────────────────── */
html body .qpb__lede{
  display:flex;align-items:baseline;gap:clamp(14px,1.8vw,26px);
  flex-wrap:wrap;
  margin:0 0 clamp(30px,3.4vw,50px)}
html body .qpb__eye{
  flex:none;
  font-family:var(--xh-mono,'JetBrains Mono','SF Mono',Menlo,monospace);
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--xh-gold);
  padding-inline-end:clamp(14px,1.8vw,26px);
  border-inline-end:1px solid var(--xh-hair)}
html body .qpb__say{
  font-size:clamp(14px,1.2vw,16px);line-height:1.7;
  color:var(--xh-fg2);
  word-break:auto-phrase;text-wrap:balance}

/* ── ② 五列 ─────────────────────────────────────────────────────── */
html body .qpb__grid{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:0}

html body .qpb__i{
  position:relative;display:block;
  padding:clamp(6px,.8vw,12px) clamp(18px,2.2vw,34px)
          clamp(18px,2vw,28px) 0;
  text-decoration:none;color:inherit;
  transition:transform .45s cubic-bezier(.16,1,.3,1)}
html body .qpb__i + .qpb__i{
  padding-inline-start:clamp(18px,2.2vw,34px)}

/* 分隔线：上下渐隐的发丝线，不是四条等亮硬边 */
html body .qpb__i + .qpb__i::before{
  content:"";position:absolute;left:0;top:4%;bottom:10%;width:1px;
  background:linear-gradient(180deg,
    transparent 0%, var(--xh-hair) 22%,
    var(--xh-hair) 74%, transparent 100%)}

/* ── ③ 数字：这一节的主角 ───────────────────────────────────────── */
html body .qpb__n{
  display:block;
  font-family:var(--xh-serif);font-weight:400;
  font-size:clamp(50px,7vw,116px);
  line-height:.86;letter-spacing:-.02em;
  margin:0 0 clamp(14px,1.6vw,24px);
  background:linear-gradient(168deg,
    var(--xh-gold-hi) 0%, var(--xh-gold) 52%, var(--xh-gold-lo) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--xh-gold);
  transition:filter .45s cubic-bezier(.16,1,.3,1)}

html body .qpb__u{
  display:block;
  font-size:clamp(14px,1.15vw,16px);line-height:1.55;font-weight:500;
  color:var(--xh-fg0);
  margin:0 0 6px;
  word-break:auto-phrase}
html body .qpb__d{
  display:block;
  font-size:clamp(12.5px,1vw,13.5px);line-height:1.72;
  color:var(--xh-fg2);
  word-break:auto-phrase}

/* ── ④ 它们本来就是链接，但看不出来 ─────────────────────────────── */
html body .qpb__go{
  display:inline-block;margin-top:10px;
  font-size:13px;color:var(--xh-gold);
  opacity:0;transform:translateX(-6px);
  transition:opacity .35s ease,transform .35s cubic-bezier(.16,1,.3,1)}
/* 金线从左扫入 */
html body .qpb__i::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:linear-gradient(90deg,
    var(--xh-gold-hi) 0%, var(--xh-gold) 70%, transparent 100%);
  transition:width .5s cubic-bezier(.16,1,.3,1)}
html body .qpb__i + .qpb__i::after{left:clamp(18px,2.2vw,34px)}
html body .qpb__i:hover::after,
html body .qpb__i:focus-visible::after{width:72%}
html body .qpb__i:hover .qpb__go,
html body .qpb__i:focus-visible .qpb__go{opacity:1;transform:none}
html body .qpb__i:hover .qpb__n{filter:brightness(1.18)}
html body .qpb__i:hover{transform:translateY(-3px)}
html body .qpb__i:focus-visible{
  outline:1px solid var(--xh-gold);outline-offset:6px;border-radius:2px}

/* ── ⑤ 数字滚动进场（队列 ④）· 滚动驱动，零 JS ─────────────────
   不支持 animation-timeline 的浏览器会把动画一次跑完并停在终态，
   也就是「可见」，所以不会重演 8/19 那次入场动效变白屏的事故。 */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    @keyframes qpbRise{
      from{opacity:0;transform:translateY(26px)}
      to  {opacity:1;transform:none}
    }
    html body .qpb__i{
      animation:qpbRise .01s linear both;
      animation-timeline:view();
      animation-range:entry 8% entry 88%}
    html body .qpb__i:nth-child(2){animation-range:entry 12% entry 90%}
    html body .qpb__i:nth-child(3){animation-range:entry 16% entry 92%}
    html body .qpb__i:nth-child(4){animation-range:entry 20% entry 94%}
    html body .qpb__i:nth-child(5){animation-range:entry 24% entry 96%}
  }
}

/* ── ⑥ 窄屏：五列排不开，落成两列，数字仍然是主角 ───────────────── */
@media (max-width:1000px){
  html body .qpb__grid{grid-template-columns:repeat(2,minmax(0,1fr));
    row-gap:clamp(26px,4vw,38px)}
  html body .qpb__i{padding-inline:0 clamp(14px,3vw,24px)}
  html body .qpb__i + .qpb__i{padding-inline-start:0}
  html body .qpb__i::before,
  html body .qpb__i + .qpb__i::before{display:none}
  html body .qpb__i + .qpb__i::after{left:0}
  html body .qpb__i:nth-child(odd){
    border-inline-end:1px solid var(--xh-hair);
    padding-inline-end:clamp(18px,4vw,28px)}
  html body .qpb__i:nth-child(even){
    padding-inline-start:clamp(18px,4vw,28px)}
  html body .qpb__n{font-size:clamp(46px,10vw,72px)}
  /* 最后一条落单，让它横跨两列，别孤零零挂在左边 */
  html body .qpb__i:nth-child(5){
    grid-column:1 / -1;border-inline-end:0;
    border-top:1px solid var(--xh-hair);
    padding-top:clamp(22px,4vw,30px)}
}
@media (max-width:560px){
  html body .qpb__lede{gap:10px}
  html body .qpb__eye{
    border-inline-end:0;padding-inline-end:0}
  html body .qpb__n{font-size:clamp(42px,13vw,60px)}
}


/* ── ⑧ 清掉旧层留下的框 ─────────────────────────────
   上一版是「1px 间隙 + 底色透出来」的格子做法：.qpb__grid 铺一层
   hair-soft 当底，每个 .qpb__i 自己铺 bg2 盖上去，缝隙就成了边框。
   新版靠发丝竖线分栏，不需要那层底，否则外面多出一圈方框。
   另外 qidian-mobile.css 里有一条 `.qpb__i{padding:22px 16px!important}`
   在所有宽度上生效，会把这一节的排版顶掉——底下那片空档就是它，
   所以这里必须同样用 !important 压回去。 */
html body .qpb__grid{background:none!important;gap:0!important}
html body .qpb__i{
  background:none!important;
  padding:clamp(6px,.8vw,12px) clamp(18px,2.2vw,34px)
          clamp(4px,.6vw,10px) 0!important}
html body .qpb__i + .qpb__i{
  padding-inline-start:clamp(18px,2.2vw,34px)!important}
html body .qpb__i:hover{background:none!important}

@media (max-width:1000px){
  html body .qpb__i{
    padding:0 clamp(14px,3vw,24px) clamp(4px,1vw,10px) 0!important}
  html body .qpb__i + .qpb__i{padding-inline-start:0!important}
  html body .qpb__i:nth-child(odd){
    padding-inline-end:clamp(18px,4vw,28px)!important}
  html body .qpb__i:nth-child(even){
    padding-inline-start:clamp(18px,4vw,28px)!important}
  html body .qpb__i:nth-child(5){
    padding-top:clamp(22px,4vw,30px)!important}
}


/* ── ⑨ 手机端：单列，左对齐，行间发丝线 ─────────────────────────
   实测 390px 下拍出来是「五项堆成一列，还一级一级往右错开」——
   因为 qidian-mobile.css 在窄断点强制了 1fr 单列，而我为两列写的
   奇偶缩进在单列下就变成了台阶。单列本身是对的，去掉台阶即可。
   另外它还有一条 `.qpb__i b{font-size:34px!important}` 把数字锁死，
   得同样用 !important 才顶得回来。 */
@media (max-width:700px){
  html body .qpb__grid{
    grid-template-columns:1fr!important;row-gap:0!important}
  html body .qpb__i,
  html body .qpb__i:nth-child(odd),
  html body .qpb__i:nth-child(even),
  html body .qpb__i:nth-child(5){
    grid-column:1 / -1!important;
    padding:clamp(20px,5vw,26px) 0 clamp(20px,5vw,26px)!important;
    border-inline:0!important;
    border-top:1px solid var(--xh-hair)!important}
  html body .qpb__i:first-child{border-top:0!important;padding-top:0!important}
  html body .qpb__i::before,
  html body .qpb__i + .qpb__i::before{display:none!important}
  html body .qpb__i::after,
  html body .qpb__i + .qpb__i::after{left:0!important}
  html body .qpb__n,
  html body .qpb__i b{
    font-size:clamp(46px,13vw,62px)!important;
    margin-bottom:10px!important}
  html body .qpb__u{font-size:15px!important}
  html body .qpb__d{font-size:13px!important}
  /* 手机上没有 hover，箭头就常驻，让人知道这条能点 */
  html body .qpb__go{opacity:1!important;transform:none!important;
    margin-top:8px!important}
}

/* 2026-08-26 修：原来这几条的终点写在 cover 区间里，而收口那一节下面只剩 953px 页脚，
   永远滚不到终点 —— 实测三项 opacity 卡在 0.88/0.78/0.69 不动。终点改到 entry 区间内，
   元素一进满视口动画就跑完，后面还有多少页都不影响。 */