/* ==========================================================
   loner · NOTES 判断手册 / 文章页样式
   与首页共用同一套 token 与自托管字体，去掉动效，拉窄版心
   ========================================================== */
@font-face{font-family:'Noto Serif SC';font-style:normal;font-weight:600 700;font-display:swap;src:url(fonts/NotoSerifSC-var.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/SpaceGrotesk-var.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/JetBrainsMono-var.woff2) format('woff2')}

:root{
  --ink:#0b0a09; --ink-2:#131110; --ink-3:#1b1815;
  --paper:#ede7dc; --muted:#8b837a; --faint:#56504a;
  --line:rgba(237,231,220,.09); --line-2:rgba(237,231,220,.16);
  --gold:#c9a26b; --gold-deep:#8a6a3f;
  --ok:#5dcaa5; --warn:#b8695c;
  --serif:'Noto Serif SC','Songti SC','STSong','SimSun',serif;
  --sans:'Space Grotesk','PingFang SC','Microsoft YaHei',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;
  --ease:cubic-bezier(.19,1,.22,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--ink); color:var(--paper);
  font-family:var(--sans); font-size:16px; line-height:1.9;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
  background-image:
    repeating-linear-gradient(90deg,rgba(237,231,220,.014) 0 1px,transparent 1px 110px),
    radial-gradient(1200px 620px at 78% -12%,rgba(201,162,107,.075),transparent 62%);
  background-attachment:fixed;
}
::selection{background:rgba(201,162,107,.28);color:#fff}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--paper)}

/* ---------- 顶栏 ---------- */
.nav{position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(20px,5vw,56px);height:62px;
  background:rgba(11,10,9,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.nav .logo{font-family:var(--sans);font-size:19px;font-weight:600;letter-spacing:-.6px;color:var(--paper);position:relative}
.nav .logo em{position:absolute;right:-7px;bottom:6px;width:4px;height:4px;border-radius:50%;background:var(--gold)}
.nav .crumb{font-family:var(--mono);font-size:10px;letter-spacing:2.4px;color:var(--faint);margin-left:16px;text-transform:uppercase}
.nav .r{display:flex;align-items:center;gap:22px;font-family:var(--mono);font-size:11px;letter-spacing:.5px}
.nav .r a{color:var(--muted)}
.nav .r a:hover{color:var(--paper)}
.nav .r .go{color:var(--ink);background:var(--gold);padding:8px 18px;border-radius:99px;font-weight:600;
  font-family:var(--sans);font-size:12.5px;letter-spacing:.3px}
.nav .r .go:hover{background:var(--paper);color:var(--ink)}

/* ---------- 版心 ---------- */
.wrap{max-width:712px;margin:0 auto;padding:0 clamp(20px,5vw,28px)}
.wide{max-width:1000px}

/* ---------- 文章头 ---------- */
.art-head{padding:clamp(48px,7vw,84px) 0 clamp(30px,4vw,44px)}
.eyebrow{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:10px;
  letter-spacing:2.6px;color:var(--gold);text-transform:uppercase;margin-bottom:22px}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line-2)}
h1{font-family:var(--serif);font-weight:700;font-size:clamp(27px,4.4vw,40px);line-height:1.36;
  letter-spacing:-.4px;margin-bottom:22px}
h1 em{font-style:normal;color:var(--gold)}
.lede{font-size:clamp(15.5px,1.7vw,17.5px);line-height:1.95;color:#b9b0a5;
  padding-left:16px;border-left:2px solid rgba(201,162,107,.55)}
.lede b{color:var(--paper);font-weight:500}
.art-meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:28px;padding-top:20px;
  border-top:1px solid var(--line);font-family:var(--mono);font-size:10.5px;
  letter-spacing:1px;color:var(--faint)}
.art-meta span b{color:var(--muted);font-weight:400}

/* ---------- 正文 ---------- */
.art-body{padding-bottom:0}
.art-body h2{font-family:var(--serif);font-weight:600;font-size:clamp(19px,2.4vw,22.5px);
  line-height:1.55;margin:clamp(40px,5vw,54px) 0 18px;letter-spacing:-.2px}
.art-body h2 .no{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:2.4px;
  color:var(--gold);padding-top:13px;border-top:1px solid var(--line-2);margin-bottom:13px}
.art-body h3{font-family:var(--sans);font-weight:600;font-size:16px;margin:30px 0 10px;color:#fff}
.art-body p{margin-bottom:20px;color:#ded6c9}
.art-body p b,.art-body li b{color:#fff;font-weight:600}
.art-body p em{font-style:normal;color:var(--gold);font-weight:500}
.art-body ul,.art-body ol{margin:0 0 22px;padding-left:0;list-style:none}
.art-body li{position:relative;padding-left:20px;margin-bottom:11px;color:#ded6c9}
.art-body ul>li::before{content:"";position:absolute;left:2px;top:12px;width:7px;height:1px;background:var(--gold)}
.art-body ol{counter-reset:n}
.art-body ol>li{counter-increment:n;padding-left:26px}
.art-body ol>li::before{content:counter(n);position:absolute;left:0;top:1px;
  font-family:var(--mono);font-size:11px;color:var(--gold);font-weight:500}
.art-body hr{border:0;border-top:1px solid var(--line);margin:40px 0}

/* 引用 / 判断块 */
.pull{margin:26px 0;padding:20px 22px;background:rgba(201,162,107,.05);
  border-left:2px solid var(--gold);border-radius:0 10px 10px 0}
.pull p{margin:0;font-family:var(--serif);font-size:16.5px;line-height:1.85;color:#f2ece2}
.pull .who{display:block;margin-top:11px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.6px;color:var(--muted);line-height:1.6}

/* 反例 / 注意 */
.warnbox{margin:26px 0;padding:18px 20px;background:rgba(184,105,92,.07);
  border:1px solid rgba(184,105,92,.28);border-radius:10px}
.warnbox .t{font-family:var(--mono);font-size:10px;letter-spacing:2px;color:#d09b90;
  text-transform:uppercase;margin-bottom:8px}
.warnbox p{margin:0;font-size:14.5px;line-height:1.85;color:#ddd0c9}

/* 表格 */
.tbl{width:100%;border-collapse:collapse;margin:24px 0 26px;font-size:13.5px}
.tbl caption{caption-side:top;text-align:left;font-family:var(--mono);font-size:10px;
  letter-spacing:2px;color:var(--faint);text-transform:uppercase;padding-bottom:10px}
.tbl th{text-align:left;font-family:var(--mono);font-size:9.5px;letter-spacing:1.6px;
  color:var(--gold);text-transform:uppercase;font-weight:400;
  padding:0 12px 9px 0;border-bottom:1px solid var(--line-2);vertical-align:bottom}
.tbl td{padding:13px 12px 13px 0;border-bottom:1px solid var(--line);vertical-align:top;
  color:#ded6c9;line-height:1.72}
.tbl td:first-child{color:#fff;font-weight:500}
.tbl tr:hover td{background:rgba(237,231,220,.02)}
.tbl .g{color:var(--gold);font-family:var(--mono);font-size:12px;white-space:nowrap}

/* 三句话 / 带走 */
.take{margin:clamp(38px,5vw,52px) 0;padding:28px clamp(20px,3vw,30px);
  background:linear-gradient(180deg,rgba(201,162,107,.075),rgba(201,162,107,.02));
  border:1px solid rgba(201,162,107,.26);border-radius:14px}
.take .h{font-family:var(--mono);font-size:10.5px;letter-spacing:2.6px;color:var(--gold);
  text-transform:uppercase;margin-bottom:18px;opacity:.92}
.take ol{list-style:none;counter-reset:t;margin:0;padding:0}
.art-body .take li,.take li{counter-increment:t;position:relative;padding-left:38px;margin-bottom:16px;
  font-family:var(--serif);font-size:15.5px;line-height:1.8;color:#f2ece2}
.art-body .take li:last-child,.take li:last-child{margin-bottom:0}
.art-body .take li::before{content:"0" counter(t);position:absolute;left:0;top:2px;
  font-family:var(--mono);font-size:12px;color:var(--gold);opacity:.8}

/* 文末 CTA */
.cta{margin:clamp(30px,4vw,44px) 0 0;padding:clamp(24px,3.4vw,34px);
  border:1px solid var(--line-2);border-radius:14px;background:rgba(19,17,16,.7)}
.cta .h{font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.5;margin-bottom:10px}
.cta p{font-size:14px;line-height:1.8;color:var(--muted);margin-bottom:20px}
.cta .btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:99px;
  font-size:13.5px;font-weight:600;letter-spacing:.3px;transition:transform .25s var(--ease),background .25s}
.btn.solid{background:var(--gold);color:var(--ink)}
.btn.solid:hover{background:var(--paper);color:var(--ink);transform:translateY(-2px)}
.btn.ghost{border:1px solid var(--line-2);color:var(--paper)}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}

/* 上下篇 */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:clamp(34px,4vw,44px) 0 0}
.pager a{display:block;padding:18px 20px;border:1px solid var(--line);border-radius:12px;
  transition:border-color .3s,background .3s}
.pager a:hover{border-color:rgba(201,162,107,.45);background:rgba(201,162,107,.045)}
.pager .k{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:2px;
  color:var(--muted);text-transform:uppercase;margin-bottom:7px}
.pager .t{font-family:var(--serif);font-size:14.5px;font-weight:600;line-height:1.55;color:var(--paper)}
.pager .nx{text-align:right}

/* 页脚 */
.foot{margin-top:clamp(48px,6vw,70px);border-top:1px solid var(--line);
  padding:26px 0 54px;font-family:var(--mono);font-size:10.5px;letter-spacing:.8px;
  color:var(--faint);display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between}
.foot a{color:var(--muted)}
.foot a:hover{color:var(--gold)}

/* ==========================================================
   手册索引页
   ========================================================== */
.hub-head{padding:clamp(52px,7vw,92px) 0 clamp(26px,3.4vw,38px)}
.hub-head h1{font-size:clamp(30px,5vw,46px);line-height:1.3}
.hub-lede{font-size:clamp(15.5px,1.7vw,17px);line-height:1.95;color:#b9b0a5;max-width:600px}
.hub-lede b{color:var(--paper);font-weight:500}
.hub-note{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px;font-family:var(--mono);
  font-size:10px;letter-spacing:1.2px;color:var(--faint)}
.hub-note span{border:1px solid var(--line-2);border-radius:99px;padding:5px 12px}

.list{border-top:1px solid var(--line-2);margin-top:clamp(30px,4vw,44px)}
.item{display:grid;grid-template-columns:64px 1fr 108px;gap:clamp(14px,3vw,28px);
  padding:clamp(24px,3vw,32px) 0;border-bottom:1px solid var(--line);
  text-decoration:none;position:relative;transition:background .3s}
.item::before{content:"";position:absolute;left:-12px;top:0;bottom:0;width:2px;background:var(--gold);
  transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)}
.item:hover{background:rgba(237,231,220,.022)}
.item:hover::before{transform:scaleY(1)}
.item .n{font-family:var(--mono);font-size:11px;color:var(--gold);letter-spacing:1px;padding-top:6px}
.item .t{font-family:var(--serif);font-size:clamp(17px,2.2vw,20px);font-weight:600;
  line-height:1.5;color:var(--paper);margin-bottom:9px;transition:color .25s;display:block}
.item:hover .t{color:#fff}
.item .d{font-size:13.5px;line-height:1.78;color:var(--muted);display:block;max-width:56ch}
.item .m{text-align:right;font-family:var(--mono);font-size:9.5px;letter-spacing:1.2px;
  color:var(--faint);line-height:1.95;padding-top:7px;white-space:nowrap}
.item .m>span{display:block}
.item .m>span:last-child{color:var(--muted);margin-top:7px;letter-spacing:1.4px}

/* 移动端 */
@media (max-width:720px){
  .nav{padding:0 18px;height:56px}
  .nav .crumb,.nav .r .txt{display:none}
  .nav .r{gap:14px}
  h1{font-size:26px}
  .item{grid-template-columns:34px 1fr;gap:12px}
  .item .m{grid-column:2;text-align:left;padding-top:2px;display:flex;gap:14px}
  .pager{grid-template-columns:1fr}
  .pager .nx{text-align:left}
  .tbl{font-size:12.5px}
  .tbl th,.tbl td{padding-right:8px}
  .art-body p{font-size:15.5px}
  .pull p{font-size:15.5px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}