/* ============================================================
   site.css — 全站视觉系统(章节骨架 / 排印尺度 / 导航 / 进度)
   所有章节继承这套 primitive,保证「杂志感 + 编号章节」一致。
   仅纯黑白 + 单跳色 #E32B16。章节交替深浅底,clip-path 揭示。
   ============================================================ */

/* ---------------- 章节基座 ---------------- */
.chapter{
  position:relative;
  width:100%;
  padding:clamp(80px,12vh,160px) var(--fx-pad);
  overflow:clip;
}
.chapter--dark{ background:var(--fx-k); color:var(--fx-w); --ink-soft:rgba(255,255,255,.72); --ink-mute:rgba(255,255,255,.5); }
.chapter--light{ background:var(--fx-w); color:var(--fx-k); --ink-soft:rgba(0,0,0,.62); --ink-mute:rgba(0,0,0,.46); }
.chapter--dark ::selection{ background:var(--fx-w); color:var(--fx-k); }
.chapter--light ::selection{ background:var(--fx-k); color:var(--fx-w); }

/* 内容宽度容器 */
.wrap{ max-width:1280px; margin:0 auto; width:100%; }
.wrap--narrow{ max-width:880px; }

/* ---------------- 章节头(编号 + kicker + 标题) ---------------- */
.chead{ position:relative; margin-bottom:clamp(40px,7vh,90px); }
.chead__top{
  display:flex; align-items:baseline; gap:1.2em;
  font-family:var(--fx-mono); font-size:clamp(11px,1.1vw,13px);
  letter-spacing:.22em; text-transform:uppercase;
}
.chead__num{ color:var(--fx-r); font-weight:700; }
.chead__kick{ color:var(--fx-g); }
.chead__rule{ flex:1; height:1px; background:currentColor; opacity:.16; align-self:center; }
.chead__title{
  margin:.32em 0 0;
  font-family:var(--fx-sans); font-weight:900;
  font-size:clamp(2.9rem,9.5vw,8.4rem);
  letter-spacing:-.045em; line-height:1.0;
}
.chead__title .red{ color:var(--fx-r); }

/* 巨型水印编号(可选,衬在章节角) */
.bignum{
  font-family:"Archivo",var(--fx-sans); font-weight:900;
  font-size:clamp(8rem,34vw,30rem); line-height:.8;
  letter-spacing:-.06em; pointer-events:none;
  font-variant-numeric:tabular-nums;
}

/* ---------------- 排印尺度 ---------------- */
.lede{
  font-size:clamp(1.15rem,2.1vw,1.7rem); line-height:1.55;
  letter-spacing:-.01em; max-width:min(620px,100%); font-weight:400;
}
.body{ font-size:clamp(1rem,1.25vw,1.18rem); line-height:1.65; max-width:min(720px,100%); }
.dim{ color:var(--ink-soft,var(--fx-g)); }
.mono{ font-family:var(--fx-mono); letter-spacing:.04em; }
.mono-label{
  font-family:var(--fx-mono); font-size:clamp(10px,1vw,12px);
  letter-spacing:.2em; text-transform:uppercase; color:var(--fx-g);
}

/* 金句=第二焦点:大气来自「尺度+字重」一起给,900 压场;红字靠颜色再分一层焦点。
   原则:凡是大的都重,没有「又大又虚」的 400 巨字(那是不大气的根源)。 */
.quote{
  font-family:var(--fx-text); font-weight:900;
  font-size:clamp(1.85rem,4.2vw,3.25rem);
  letter-spacing:-.035em; line-height:1.18; max-width:min(15.5em,100%);
}
.quote--full{ max-width:min(760px,100%); }
.quote .red{ color:var(--fx-r); font-weight:900; }
.quote__mark{ color:var(--fx-r); font-family:var(--fx-mono); display:block; margin-bottom:.3em; font-size:.4em; letter-spacing:.2em; }

/* 数字大字 */
.stat__v{ font-family:"Archivo",var(--fx-sans); font-weight:900; letter-spacing:-.04em; font-variant-numeric:tabular-nums; line-height:.9; }
.stat__l{ font-family:var(--fx-mono); font-size:clamp(10px,1vw,12px); letter-spacing:.16em; text-transform:uppercase; color:var(--fx-g); }

/* 红点 / 细线 工具 */
.reddot{ display:inline-block; width:.5em; height:.5em; border-radius:50%; background:var(--fx-r); }
.hr-thin{ height:1px; background:currentColor; opacity:.14; border:0; width:100%; }

/* ---------------- 进场:clip-path 揭示 + 升起 ---------------- */
.fx-motion .reveal{ opacity:0; transform:translateY(24px); }
.fx-motion .reveal.is-in{ opacity:1; transform:none; transition:opacity .9s var(--fx-ease), transform .9s var(--fx-ease); }
.fx-motion .reveal.d1.is-in{ transition-delay:.08s; }
.fx-motion .reveal.d2.is-in{ transition-delay:.16s; }
.fx-motion .reveal.d3.is-in{ transition-delay:.24s; }
.fx-motion .reveal.d4.is-in{ transition-delay:.32s; }
.fx-reduced .reveal{ opacity:1; transform:none; }

/* ---------------- 核心要义 / 记住这一句(让重点砸进脑子) ---------------- */
.corebox{ margin:clamp(40px,7vh,96px) 0; border-top:2px solid var(--fx-r); padding-top:1.1em; }
.corebox__label{ display:flex; align-items:center; gap:.6em; font-family:var(--fx-mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--fx-r); margin-bottom:.4em; }
.corebox__label::before{ content:""; width:.5em; height:.5em; background:var(--fx-r); border-radius:50%; }
/* 瑞士「窄编号列 + 阅读列」:编号钉在固定窄列,正文齐头到第二列起 */
.coreitem{ display:grid; grid-template-columns:clamp(2.6em,6vw,4.2em) 1fr; gap:clamp(.7em,2.2vw,1.7em); align-items:baseline; padding:clamp(.75em,1.8vh,1.15em) 0; }
.coreitem + .coreitem{ border-top:1px solid rgba(138,138,138,.28); }
.coreitem__n{ font-family:"Archivo",var(--fx-sans); font-weight:900; color:var(--fx-r); font-size:clamp(1rem,1.8vw,1.45rem); line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.coreitem__t{ font-weight:400; font-size:clamp(1.1rem,2.2vw,1.75rem); letter-spacing:-.015em; line-height:1.32; max-width:38em; }
.coreitem__t .red{ color:var(--fx-r); font-weight:900; }
.coreitem--solo .coreitem__t{ font-size:clamp(1.2rem,2.6vw,2rem); max-width:min(680px,100%); }

.remember{ margin-top:clamp(44px,7vh,96px); display:flex; gap:1.1em; align-items:baseline; flex-wrap:wrap; }
.remember__tag{ font-family:var(--fx-mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--fx-r); white-space:nowrap; }
.remember__t{ font-weight:900; font-size:clamp(1.5rem,3vw,2.35rem); letter-spacing:-.03em; line-height:1.2; max-width:min(14em,100%); }
.remember__t .red{ color:var(--fx-r); font-weight:900; }

/* 补充料:被压缩掉的好东西(金句/细节/案例) */
.extras{ display:grid; gap:clamp(20px,2.6vw,40px); grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr)); margin-top:1.4em; }
.extra{ border-top:1px solid rgba(138,138,138,.30); padding-top:1.1em; }
.extra__k{ font-weight:400; font-size:clamp(1.05rem,1.55vw,1.32rem); letter-spacing:-.012em; margin-bottom:.5em; color:var(--fx-w); }
.extra__d{ font-size:clamp(.98rem,1.25vw,1.16rem); line-height:1.62; }
.chapter--dark .extra__d{ color:#c2c2c2; }
.chapter--light .extra__d{ color:#444; }

/* sticky 舞台:章内固定一屏演出 */
.stage{ position:sticky; top:0; height:100vh; display:flex; align-items:center; justify-content:center; overflow:clip; }
.stage__pin{ position:relative; width:100%; height:100%; }

/* ---------------- 全站导航 / 进度 ---------------- */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:820;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--fx-pad);
  pointer-events:none; isolation:isolate;
}
/* 顶部柔性遮罩:内容从页眉下穿过时不再与导航文字糊成一团(消除破相) */
.site-nav::before{
  content:""; position:absolute; left:0; right:0; top:0;
  height:clamp(76px,11vh,120px); z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.5) 46%, transparent);
}
body.is-light .site-nav::before{
  background:linear-gradient(to bottom, rgba(255,255,255,.92), rgba(255,255,255,.52) 46%, transparent);
}
.site-nav__right{ display:flex; align-items:center; gap:clamp(.9em,2vw,1.6em); pointer-events:auto; }
.site-nav__menu{
  font-family:var(--fx-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:inherit; background:transparent; border:1px solid currentColor; border-radius:100px;
  padding:.5em 1.15em; cursor:pointer; transition:background .3s,color .3s,border-color .3s;
}
.site-nav__menu:hover,body.menu-open .site-nav__menu{ background:var(--fx-r); border-color:var(--fx-r); color:var(--fx-w); }

/* 目录全屏菜单 */
.navmenu{
  position:fixed; inset:0; z-index:780; background:rgba(8,8,8,.98);
  display:flex; align-items:center; opacity:0; visibility:hidden;
  transition:opacity .45s var(--fx-ease), visibility .45s;
}
.navmenu.is-open{ opacity:1; visibility:visible; }
.navmenu__inner{ width:100%; max-width:1100px; margin:0 auto; padding:0 var(--fx-pad); }
.navmenu__kicker{ font-family:var(--fx-mono); font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--fx-r); margin-bottom:clamp(18px,4vh,40px); }
.navmenu__list{ list-style:none; margin:0; padding:0; }
.navmenu__item{
  display:grid; grid-template-columns:2.6em 1fr auto; gap:1.2em; align-items:baseline;
  padding:clamp(.4em,1.3vh,.66em) 0; cursor:pointer; color:#7a7a7a;
  border-top:1px solid rgba(255,255,255,.09); transition:color .3s var(--fx-ease), padding-left .35s var(--fx-ease);
}
.navmenu__item:last-child{ border-bottom:1px solid rgba(255,255,255,.09); }
.navmenu__item:hover,.navmenu__item.is-active{ color:var(--fx-w); padding-left:.6em; }
.navmenu__n{ font-family:var(--fx-mono); color:var(--fx-r); font-size:clamp(12px,1.2vw,14px); }
.navmenu__name{ font-weight:900; font-size:clamp(1.3rem,3.6vw,2.6rem); letter-spacing:-.03em; line-height:1; color:inherit; }
.navmenu__en{ font-family:var(--fx-mono); font-size:10px; letter-spacing:.18em; color:#5a5a5a; text-transform:uppercase; }
@media (max-width:680px){ .navmenu__en{ display:none; } .navmenu__item{ grid-template-columns:2.2em 1fr; } }
/* 主题翻色:深色章白色 chrome,浅色章黑色 chrome */
.site-nav,.rail{ color:var(--fx-w); transition:color .45s var(--fx-ease); }
body.is-light .site-nav,body.is-light .rail{ color:var(--fx-k); }

.site-nav__brand{
  font-family:var(--fx-mono); font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; pointer-events:auto;
}
.site-nav__brand b{ font-weight:700; }
.site-nav__pos{
  font-family:var(--fx-mono); font-size:12px; letter-spacing:.14em;
  font-variant-numeric:tabular-nums; pointer-events:auto;
}
.site-nav__pos .cur{ color:var(--fx-r); font-weight:700; }

/* 右侧章节圆点进度 */
.rail{
  position:fixed; right:max(18px,2vw); top:50%; transform:translateY(-50%);
  z-index:600; display:flex; flex-direction:column; gap:13px;
  isolation:isolate;
}
.rail__dot{
  width:9px; height:9px; border-radius:50%;
  border:1.5px solid currentColor; opacity:.5;
  cursor:pointer; position:relative; transition:opacity .3s, transform .3s;
  background:transparent; padding:0;
}
.rail__dot:hover{ opacity:1; transform:scale(1.25); }
.rail__dot.is-active{ background:var(--fx-r); border-color:var(--fx-r); opacity:1; }
.rail__dot::after{
  content:attr(data-label);
  position:absolute; right:20px; top:50%; transform:translateY(-50%);
  font-family:var(--fx-mono); font-size:10px; letter-spacing:.14em;
  white-space:nowrap; opacity:0; transition:opacity .3s; text-transform:uppercase;
  color:currentColor;
}
.rail__dot:hover::after{ opacity:.8; }

/* 顶部细进度条 */
.scrollbar{ position:fixed; top:0; left:0; height:2px; background:var(--fx-r); width:0; z-index:700; }

/* ---------------- 网格脚手架 + 可叠加参考网格(按 G / 点按钮) ---------------- */
:root{ --cols:12; --gutter:clamp(14px,1.6vw,26px); }
.site-nav__grid{ font-family:var(--fx-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:inherit; background:transparent; border:1px solid currentColor; border-radius:100px; padding:.5em 1.05em; cursor:pointer; transition:background .3s,color .3s,border-color .3s; }
.site-nav__grid:hover,body.grid-on .site-nav__grid{ background:var(--fx-r); border-color:var(--fx-r); color:var(--fx-w); }
.gridguides{ position:fixed; inset:0; z-index:610; pointer-events:none; opacity:0; transition:opacity .3s var(--fx-ease); }
body.grid-on .gridguides{ opacity:1; }
.gridguides__wrap{ max-width:1280px; height:100%; margin:0 auto; padding:0 var(--fx-pad);
  display:grid; grid-template-columns:repeat(var(--cols),1fr); column-gap:var(--gutter); }
.gridguides__col{ position:relative; background:rgba(227,43,22,.05); box-shadow:inset 1px 0 0 rgba(227,43,22,.42),inset -1px 0 0 rgba(227,43,22,.42); }
.gridguides__col span{ position:absolute; top:64px; left:0; right:0; text-align:center; font-family:var(--fx-mono); font-size:10px; color:var(--fx-r); }

@media (max-width:680px){
  .rail{ gap:9px; right:12px; }
  .rail__dot::after{ display:none; }
  .chead__title{ font-size:clamp(2.3rem,12vw,4rem); }
}

/* reduced-motion */
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  .stage{ position:relative; height:auto; }
}