@charset "utf-8";
/* ===========================================================================
   核心叙事章节「信息是散的，你的处境只有一个」
   用在 index.html（完整版）与 solutions.html（精简版）。
   排版意图：不是三张等宽卡片，而是一段有序号的编辑式对照 ——
     · 序号 ①②③ 抬成悬挂在版心左侧的大字，本身就是版面骨架；
     · 三段左右错位，第二段整体右移，第三段回到左侧并压一条实线，读起来有推进；
     · 第三段谈的是「现场出纸」，边线用纸麦琥珀 --am（全站只给纸质产出用）。
   加载顺序在 mobile.css 之后，因此本文件的 ≤720px 块可以覆盖移动层默认值。
   =========================================================================== */

.nr{position:relative}

/* ---------- 单段 ---------- */
.nr-i{
  position:relative;
  display:grid;grid-template-columns:minmax(0,1fr);
  padding:44px 0 46px;
  border-top:1px solid var(--hair);
}
.nr-i:first-child{border-top:0;padding-top:6px}

.nr-i h3{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:0 20px;
  font-size:clamp(22px,2.9vw,36px);font-weight:660;letter-spacing:var(--tr-h2);
  line-height:1.24;text-wrap:balance;
}
/* 序号：抬到 62px 的展示字号，负字距压紧，颜色只到 ink-3，不喧宾夺主 */
.nr-i h3 .nr-mark{
  font-size:clamp(38px,5.4vw,64px);line-height:.86;font-weight:400;
  letter-spacing:-.04em;color:var(--ink-3);
  font-variant-numeric:tabular-nums;transition:color .5s var(--ease);
}
.nr-i:hover h3 .nr-mark{color:var(--cy)}

.nr-i p{
  color:var(--ink-2);font-size:16.5px;line-height:1.92;margin-top:22px;
  max-width:41em;padding-left:calc(clamp(38px,5.4vw,64px) + 20px);
}
.nr-i p b{color:var(--ink);font-weight:560}

/* ---------- 左右错位 ---------- */
/* ① 贴左，最宽；② 整体右移一个索引轨；③ 回到左侧但压一条实线收口 */
.nr-i--b{margin-left:clamp(0px,7vw,124px)}
.nr-i--b p{max-width:38em}

.nr-i--c{margin-top:8px;padding-left:26px;border-left:1px solid var(--am-30)}
.nr-i--c::before{
  content:"";position:absolute;left:-1px;top:44px;width:1px;height:46px;background:var(--am);
}
.nr-i--c h3 .nr-mark{color:var(--am)}
.nr-i--c:hover h3 .nr-mark{color:var(--am)}
.nr-i--c p{max-width:43em}

/* ---------- 收口引用 ---------- */
.nr-end{margin-top:62px}

/* ---------- 精简版（solutions.html 顶部）---------- */
.nr--lite .nr-i{padding:30px 0 30px}
.nr--lite .nr-i:first-child{padding-top:0}
.nr--lite .nr-i h3{font-size:clamp(18px,1.9vw,22px);gap:0 15px}
.nr--lite .nr-i h3 .nr-mark{font-size:clamp(28px,3.4vw,40px)}
.nr--lite .nr-i p{
  font-size:15px;line-height:1.86;margin-top:14px;max-width:52em;
  padding-left:calc(clamp(28px,3.4vw,40px) + 15px);
}
.nr--lite .nr-i--b{margin-left:clamp(0px,4vw,68px)}
.nr--lite .nr-i--c{padding-left:20px}
.nr--lite .nr-i--c::before{top:30px;height:34px}
.nr--lite .nr-end{margin-top:38px}

/* 精简版所在的通栏区：不用编号轨，直接给一个小标 */
.nr-lite-head{max-width:960px}
.nr-lite-head h2{
  font-size:clamp(23px,3vw,38px);line-height:1.2;font-weight:660;letter-spacing:var(--tr-h2);
  text-wrap:balance;
}
.nr-lite-head h2 .thin{font-weight:280;color:var(--ink-2)}
.nr-lite-head p{color:var(--ink-2);font-size:16px;line-height:1.84;margin-top:18px;max-width:52em}

/* ---------- 中间档 ---------- */
@media (max-width:1080px){
  .nr-i--b{margin-left:clamp(0px,4vw,64px)}
}
@media (max-width:900px){
  .nr-i--b{margin-left:0}
  .nr--lite .nr-i--b{margin-left:0}
}

/* ---------- 移动端（≤720px）---------- */
@media (max-width:720px){
  .nr-i,.nr--lite .nr-i{padding:24px 0 26px}
  .nr-i:first-child,.nr--lite .nr-i:first-child{padding-top:0}

  /* 窄屏不再把序号做成悬挂大字：改成一行「序号 + 标题」的紧凑刻度，
     正文回到满宽 —— 393px 上每行仍是 21–23 个汉字。 */
  .nr-i h3,.nr--lite .nr-i h3{
    display:flex;align-items:center;gap:11px;flex-wrap:nowrap;
    font-size:clamp(18px,4.9vw,21px);line-height:1.32;letter-spacing:-.024em;
  }
  .nr-i h3 .nr-mark,.nr--lite .nr-i h3 .nr-mark{
    font-size:26px;line-height:1;flex:none;color:var(--cy);
  }
  .nr-i--c h3 .nr-mark{color:var(--am)}
  .nr-i p,.nr--lite .nr-i p{
    font-size:14.8px;line-height:1.8;margin-top:11px;padding-left:0;max-width:none;
  }
  .nr-i--c,.nr--lite .nr-i--c{margin-top:0;padding-left:14px}
  .nr-i--c::before,.nr--lite .nr-i--c::before{top:24px;height:26px}
  .nr-end,.nr--lite .nr-end{margin-top:30px}

  .nr-lite-head h2{font-size:clamp(20.5px,5.6vw,25px);line-height:1.28}
  .nr-lite-head h2 .thin{font-size:.82em}
  .nr-lite-head p{font-size:15px;line-height:1.74;margin-top:11px;max-width:none}
}