/* ============================================================
   Clash入门指南 · clashrumen.com
   base.css —— 设计令牌 / 基础 / 排版 / 页头 / 页脚 / Hero 图幅
   风格:「工程蓝图开工图」——普鲁士蓝纸面 + 粉笔白线稿 + 信号红审图章
   全站直角、1px 细白描边分层,零投影 / 零发光 / 零渐变色块
   ============================================================ */

/* ---------- 设计令牌 ---------- */
:root{
  /* 纸面层次(由亮到暗:纸面 → 浮起面板 → 下沉面板) */
  --paper:#10395E;
  --paper-raise:#14446C;
  --paper-sink:#0C2C4A;
  /* 线稿 */
  --rule:#3D6486;
  /* 粉笔白文字两级 */
  --chalk:#EAF3F8;
  --chalk-dim:#A9C4D6;
  /* 全站唯一强调色:信号红(审图章 / 修订云线 / 主按钮) */
  --seal:#E8402F;
  --seal-deep:#C22A1C;
  /* 语义色 */
  --ok:#6FD3A0;
  --warn:#F2B441;
  --bad:#E8402F;
  /* 纸面纹理 */
  --grid-coarse:rgba(234,243,248,.09);
  --grid-fine:rgba(234,243,248,.045);
  --crease:rgba(234,243,248,.06);
  --hit:rgba(234,243,248,.08);
  /* 形状与节奏 */
  --radius:0;
  --gutter:64px;
  --head-h:64px;
  /* 字体 */
  --font-display:'Inter','Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --font-body:'Inter','Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --font-mono:'JetBrains Mono','SFMono-Regular',Consolas,'Liberation Mono',monospace;
}

/* ---------- Reset ---------- */
*{margin:0;padding:0;box-sizing:border-box;}
html{font-size:16px;scroll-behavior:smooth;}
html.nav-open{overflow:hidden;}
body{
  font-family:var(--font-body);
  color:var(--chalk);
  background-color:var(--paper);
  background-image:
    linear-gradient(var(--grid-coarse) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-coarse) 1px,transparent 1px),
    linear-gradient(var(--grid-fine) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-fine) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* 两道斜向纸面折痕高光 */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image:
    linear-gradient(108deg,transparent 0,transparent 33.4%,var(--crease) 33.4%,var(--crease) calc(33.4% + 2px),transparent calc(33.4% + 2px)),
    linear-gradient(64deg,transparent 0,transparent 71.2%,var(--crease) 71.2%,var(--crease) calc(71.2% + 2px),transparent calc(71.2% + 2px));
}
main{position:relative;z-index:1;}
a{color:inherit;text-decoration:none;}
img,svg{max-width:100%;}
button{font-family:inherit;}
pre{font-family:var(--font-mono);overflow-x:auto;max-width:100%;}
code,kbd,samp{font-family:var(--font-mono);}
ul,ol{padding-left:1.3em;}
::selection{background:var(--seal);color:var(--chalk);}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:1px dashed var(--chalk);outline-offset:3px;}

/* ---------- 工具类 ---------- */
.mono{font-family:var(--font-mono);}
.t-dim{color:var(--chalk-dim);}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:var(--gutter);}
.cols{display:grid;gap:18px;}
.cols > *{min-width:0;}
.cols--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.cols--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.cols--4{grid-template-columns:repeat(4,minmax(0,1fr));}

/* 区块节奏:只声明纵向,横向留白交给 .wrap */
.sec{padding-top:76px;padding-bottom:76px;}
.sec-head{display:flex;align-items:baseline;gap:16px;margin-bottom:36px;flex-wrap:wrap;}
.sec-no{font-family:var(--font-mono);font-size:12px;color:var(--chalk-dim);letter-spacing:.14em;border:1px solid var(--rule);padding:4px 10px;flex-shrink:0;}
.sec-title{font-size:clamp(24px,2.6vw,34px);font-weight:800;letter-spacing:.06em;}
.sec-sub{width:100%;margin-top:6px;font-size:14px;color:var(--chalk-dim);line-height:1.85;max-width:52em;}

/* ---------- 排版 ---------- */
h1,h2,h3,h4{font-family:var(--font-display);}
p{line-height:1.85;}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 28px;
  font-size:15px;
  font-weight:700;
  letter-spacing:.1em;
  border-radius:var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  background:transparent;
  color:var(--chalk);
}
.btn-primary{background:var(--seal);border-color:var(--seal);color:var(--chalk);}
.btn-primary:hover{background:var(--seal-deep);border-color:var(--seal-deep);}
.btn-ghost{background:transparent;border-color:var(--rule);color:var(--chalk);}
.btn-ghost:hover{border-color:var(--chalk);}
.btn-sm{padding:10px 16px;font-size:13px;letter-spacing:.06em;}

/* ---------- 页头(header.js 注入) ---------- */
.site-head{
  position:relative;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  height:var(--head-h);
  padding-inline:var(--gutter);
  border-bottom:1px solid var(--rule);
}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.brand-mark{display:block;width:30px;height:30px;flex-shrink:0;}
.brand-name{font-size:17px;font-weight:800;letter-spacing:.05em;white-space:nowrap;}
.brand-no{font-family:var(--font-mono);font-size:11px;color:var(--chalk-dim);letter-spacing:.08em;border-left:1px solid var(--rule);padding-left:12px;white-space:nowrap;}
.head-tools{display:flex;align-items:center;gap:32px;margin-left:auto;min-width:0;}
.site-nav{display:flex;align-items:center;gap:26px;}
.site-nav a{font-size:14px;color:var(--chalk-dim);letter-spacing:.03em;}
.site-nav a:hover{color:var(--chalk);}
.site-nav a[aria-current="page"]{color:var(--chalk);font-weight:700;}

/* 语言切换 */
.lang-box{position:relative;flex-shrink:0;}
.lang-switch{
  font-family:var(--font-body);
  font-size:13px;
  color:var(--chalk-dim);
  background:transparent;
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:6px 12px;
  cursor:pointer;
  letter-spacing:.03em;
  white-space:nowrap;
}
.lang-switch:hover{color:var(--chalk);border-color:var(--chalk);}
.lang-menu{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  min-width:164px;
  background:var(--paper-sink);
  border:1px solid var(--rule);
  list-style:none;
  padding:4px 0;
  z-index:60;
}
.lang-menu[hidden]{display:none;}
.lang-menu li{list-style:none;}
.lang-menu a{display:block;padding:10px 16px;font-size:13px;color:var(--chalk-dim);letter-spacing:.03em;}
.lang-menu a:hover{background:var(--hit);color:var(--chalk);}
.lang-menu a[aria-current="true"]{color:var(--chalk);font-weight:700;}

/* 汉堡按钮(窄屏显示) */
.nav-burger{
  display:none;
  min-width:44px;
  min-height:44px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  background:transparent;
  border:1px solid var(--rule);
  cursor:pointer;
  flex-shrink:0;
}
.nav-burger span{display:block;width:18px;height:2px;background:var(--chalk);transition:transform .2s ease,opacity .2s ease;}
html.nav-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
html.nav-open .nav-burger span:nth-child(2){opacity:0;}
html.nav-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- 页脚(footer.js 注入) ---------- */
.site-foot{position:relative;z-index:1;margin-top:72px;border-top:1px solid var(--rule);background:var(--paper-sink);}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1.3fr 1fr;gap:40px;padding:56px var(--gutter) 44px;}
.foot-grid > *{min-width:0;}
.foot-brandline{display:flex;align-items:center;gap:10px;}
.foot-brandline img{width:26px;height:26px;flex-shrink:0;}
.foot-name{font-size:15px;font-weight:800;letter-spacing:.05em;}
.foot-no-inline{font-family:var(--font-mono);font-size:10.5px;color:var(--chalk-dim);letter-spacing:.1em;border-left:1px solid var(--rule);padding-left:10px;}
.foot-desc{margin-top:14px;font-size:13px;line-height:1.9;color:var(--chalk-dim);max-width:30em;}
.foot-h{font-family:var(--font-mono);font-size:11px;font-weight:400;letter-spacing:.18em;color:var(--chalk-dim);margin-bottom:16px;}
.foot-col ul{list-style:none;padding:0;}
.foot-col li{margin-bottom:9px;}
.foot-col a{font-size:13px;color:var(--chalk-dim);letter-spacing:.02em;}
.foot-col a:hover{color:var(--chalk);}
.foot-col a[aria-current="true"]{color:var(--chalk);font-weight:700;}
.foot-kw{display:flex;flex-wrap:wrap;gap:8px;}
.foot-kw a{
  border:1px solid var(--rule);
  padding:5px 10px;
  font-size:12px;
  color:var(--chalk-dim);
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}
.foot-kw a:hover{color:var(--chalk);border-color:var(--chalk);}
.foot-bottom{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--rule);
  padding:18px var(--gutter);
}
.foot-copy{font-size:12.5px;color:var(--chalk-dim);letter-spacing:.03em;}
.foot-no{font-family:var(--font-mono);font-size:11px;color:var(--chalk-dim);letter-spacing:.12em;}

/* ---------- Hero(首页 / design-preview 首屏) ---------- */
.hero{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:46fr 54fr;
  gap:56px;
  align-items:center;
  padding-inline:var(--gutter);
  min-height:calc(100vh - 116px);
}
.hero > *{min-width:0;}
.hero-copy{max-width:600px;}
.kicker{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--chalk-dim);
  letter-spacing:.14em;
}
.kicker::before{
  content:"";
  display:inline-block;
  width:8px;
  height:8px;
  border:1px solid var(--chalk);
  flex-shrink:0;
}
.hero h1{margin-top:22px;}
.h1-brand{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(52px,4.75vw,68px);
  font-weight:900;
  letter-spacing:.07em;
  line-height:1.12;
}
.h1-sub{
  display:block;
  margin-top:16px;
  font-size:clamp(17px,1.6vw,23px);
  font-weight:600;
  letter-spacing:.24em;
  color:var(--chalk);
}
.hero-lead{
  margin-top:24px;
  max-width:520px;
  font-size:16px;
  line-height:1.9;
  color:var(--chalk-dim);
}
.hero-lead strong{color:var(--chalk);font-weight:700;}
.hero-cta{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-top:32px;}
.chips{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:30px;
}
.chips-label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--chalk-dim);
  margin-right:4px;
}
.chip{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:7px 12px;
  font-size:12.5px;
  color:var(--chalk);
  max-width:100%;
  overflow:hidden;
}
.chip:hover{border-color:var(--chalk);}
.chip .idx{font-family:var(--font-mono);font-size:11px;color:var(--chalk-dim);letter-spacing:.06em;flex-shrink:0;}

/* ---------- 剖面图装置(内联 SVG 图幅) ---------- */
.board{margin:0;min-width:0;}
.board svg{display:block;width:100%;height:auto;max-height:calc(100vh - 180px);}

.f-line{stroke:var(--chalk);stroke-width:1.3;fill:none;}
.f-thin{stroke:var(--chalk);stroke-width:.8;fill:none;opacity:.7;}
.f-dim{stroke:var(--chalk-dim);stroke-width:.8;fill:none;}
.f-dash{stroke-dasharray:5 4;}
.f-red{stroke:var(--seal);stroke-width:1.4;fill:none;}
.mkf{fill:var(--chalk);}
.dot{fill:var(--chalk);}
.t{fill:var(--chalk);font-family:var(--font-mono);letter-spacing:.05em;}
.t-cn{font-family:var(--font-body);letter-spacing:.12em;}
.t-m{fill:var(--chalk-dim);}
.s8{font-size:8.5px;}
.s9{font-size:9.5px;}
.s10{font-size:10.5px;}
.s11{font-size:11px;}
.s12{font-size:12px;}
.s13{font-size:13px;font-weight:700;}
.stamp-c{stroke:var(--seal);fill:none;}
.stamp-t{fill:var(--seal);font-family:var(--font-display);font-weight:800;letter-spacing:.16em;font-size:19px;}
.stamp-s{fill:var(--seal);font-family:var(--font-mono);font-size:8px;letter-spacing:.2em;}
.stamp-l{stroke:var(--seal);stroke-width:1;}
.rowhit{fill:transparent;}
.board a:hover .rowhit{fill:var(--hit);}
.board a:hover .row-name{fill:var(--chalk);}

/* 一次性描线动画(加载后即静止) */
.flow{stroke-dasharray:1;stroke-dashoffset:1;animation:drawline .55s linear forwards;}
.d0{animation-delay:.05s;}
.d1{animation-delay:.3s;}
.d2{animation-delay:.6s;}
.d3{animation-delay:.68s;}
.d4{animation-delay:.76s;}
@keyframes drawline{to{stroke-dashoffset:0;}}

/* ---------- 首屏下缘露边条 ---------- */
.peek{
  position:relative;
  z-index:1;
  border-top:1px solid var(--rule);
  padding:18px var(--gutter) 64px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
}
.peek h2{font-size:16px;font-weight:700;letter-spacing:.12em;}
.peek-note{font-family:var(--font-mono);font-size:11.5px;color:var(--chalk-dim);letter-spacing:.08em;}

/* ---------- 面板(图框语言) ---------- */
.plate{background:var(--paper-raise);border:1px solid var(--rule);padding:24px;}
.plate--sink{background:var(--paper-sink);}
.plate--corners{
  position:relative;
  border:none;
  background:transparent;
  padding:32px 30px;
}
.plate--corners::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(var(--chalk) 0 0),linear-gradient(var(--chalk) 0 0),
    linear-gradient(var(--chalk) 0 0),linear-gradient(var(--chalk) 0 0),
    linear-gradient(var(--chalk) 0 0),linear-gradient(var(--chalk) 0 0),
    linear-gradient(var(--chalk) 0 0),linear-gradient(var(--chalk) 0 0);
  background-size:26px 1px,1px 26px,26px 1px,1px 26px,26px 1px,1px 26px,26px 1px,1px 26px;
  background-position:left top,left top,right top,right top,right bottom,right bottom,left bottom,left bottom;
  background-repeat:no-repeat;
}
.plate-tag{
  position:absolute;
  top:0;
  right:0;
  border-left:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:7px 14px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.12em;
  color:var(--chalk-dim);
  max-width:70%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ---------- 滚动淡入 ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease;}
.reveal.shown{opacity:1;transform:none;}

/* ---------- 动效降级 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .flow{animation:none;stroke-dashoffset:0;}
  .reveal{opacity:1;transform:none;transition:none;}
  .nav-burger span{transition:none;}
}

/* ---------- 响应式 ---------- */
@media (max-width:1100px){
  :root{--gutter:32px;}
  .hero{
    grid-template-columns:1fr;
    min-height:0;
    padding-top:48px;
    padding-bottom:48px;
  }
  /* 导航收进抽屉 */
  .site-nav{
    position:fixed;
    top:var(--head-h);
    left:0;
    right:0;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--paper-sink);
    border-bottom:1px solid var(--rule);
    max-height:calc(100dvh - var(--head-h));
    overflow-y:auto;
    overscroll-behavior:contain;
    z-index:50;
    padding:6px 0 10px;
  }
  html.nav-open .site-nav{display:flex;}
  .site-nav a{
    display:flex;
    align-items:center;
    width:100%;
    min-height:48px;
    padding:12px var(--gutter);
    font-size:15px;
    border-bottom:1px solid var(--rule);
  }
  .site-nav a:last-child{border-bottom:none;}
  .nav-burger{display:inline-flex;}
  /* 窄屏工具区必须仍贴最右 */
  .head-tools{gap:14px;margin-left:auto;}
  .cols--4{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:900px){
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cols--3{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:640px){
  :root{--gutter:20px;}
  .sec{padding-top:56px;padding-bottom:56px;}
  /* 窄屏:较长的站名允许收缩截断,避免撑破页头 */
  .site-head{gap:12px;}
  .brand{flex-shrink:1;min-width:0;}
  .brand-name{min-width:0;overflow:hidden;text-overflow:ellipsis;}
  .brand-no{display:none;}
  .cols--2,.cols--3,.cols--4{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;gap:32px;}
  .h1-sub{letter-spacing:.14em;}
}
@media (max-width:380px){
  :root{--gutter:16px;}
  .brand-name{font-size:15px;}
}