:root{
  --ink:#0E1420;
  --ink-mid:#121C2A;
  --ink-deep:#0A0F17;
  --clay:#C8552B;
  --clay-lit:#D96234;
  --bone:#EDE6DA;
  --line:rgba(237,230,218,.14);
  --line-soft:rgba(237,230,218,.07);
  --muted:rgba(237,230,218,.66);
  --body-text:rgba(237,230,218,.86);
  --maxw:1160px;
  --bar:72px;
}

*,*::before,*::after{box-sizing:border-box}

html{
  background:var(--ink);
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:'Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif;
  font-size:17px;
  line-height:1.78;
  font-weight:400;
  letter-spacing:.012em;
  overflow-x:hidden;
}

a{color:inherit}
svg{display:block}
.ic{width:16px;height:16px;flex:0 0 auto}
img{max-width:100%}

/* ---------- 顶部细条 ---------- */
.topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.35rem clamp(1rem,4vw,2.5rem);
  background:var(--ink-deep);
  border-bottom:1px solid var(--line);
  font-size:.84rem;
  letter-spacing:.22em;
  color:var(--muted);
}
.topline-brand{display:inline-flex;align-items:center;min-height:40px}
.topline-sub{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:0 .2rem;
  color:var(--clay);
  text-decoration:none;
  letter-spacing:.18em;
}
.topline-sub:hover{color:var(--clay-lit)}

/* ---------- 主导航 ---------- */
.masthead{
  position:sticky;
  top:0;
  z-index:60;
  display:flex;
  align-items:center;
  gap:1rem;
  padding:.4rem clamp(1rem,4vw,2.5rem);
  background:rgba(10,15,23,.95);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  flex:0 0 auto;
  min-height:44px;
  color:var(--bone);
  text-decoration:none;
}
.brand-mark{width:30px;height:30px;color:var(--clay)}
.brand-name{font-weight:700;font-size:.96rem;letter-spacing:.18em;white-space:nowrap}
.brand:hover .brand-mark{color:var(--clay-lit)}

.topnav{
  display:flex;
  align-items:center;
  gap:.12rem;
  flex:1 1 auto;
  min-width:0;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.topnav::-webkit-scrollbar{display:none}
.nav-link{
  display:inline-flex;
  align-items:center;
  gap:.42rem;
  min-height:44px;
  padding:.3rem .68rem;
  border:1px solid transparent;
  color:var(--muted);
  text-decoration:none;
  font-size:.9rem;
  white-space:nowrap;
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.nav-link .ic{color:var(--clay);opacity:.85}
.nav-link:hover,
.nav-link:focus-visible{
  color:var(--bone);
  border-color:var(--clay);
  background:rgba(200,85,43,.14);
}

/* ---------- 首屏 ---------- */
.hero{
  position:relative;
  display:grid;
  place-items:center;
  min-height:70vh;
  overflow:hidden;
  isolation:isolate;
  border-bottom:1px solid var(--line);
  background:var(--ink);
}
.hero-layers{position:absolute;inset:0;z-index:0;overflow:hidden}
.layer{position:absolute;left:-8%;right:-8%;top:-16%;bottom:-16%;will-change:transform}
.l1{
  background-image:radial-gradient(rgba(237,230,218,.14) 1px,transparent 1.4px);
  background-size:24px 24px;
  opacity:.5;
}
.l2{background-image:radial-gradient(62% 55% at 20% 28%,rgba(200,85,43,.45),transparent 72%)}
.l3{background-image:radial-gradient(58% 52% at 82% 76%,rgba(200,85,43,.24),transparent 74%)}
.l4{background-image:linear-gradient(180deg,rgba(14,20,32,.55),rgba(14,20,32,.08) 44%,var(--ink))}

.hero-inner{
  position:relative;
  z-index:2;
  max-width:44rem;
  padding:clamp(3rem,12vh,6.5rem) 1.25rem;
  text-align:center;
}
.hero-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  margin-bottom:1.4rem;
  border:1px solid var(--clay);
  color:var(--clay);
}
.hero-mark svg{width:26px;height:26px}
.hero h1{
  margin:0 0 1rem;
  font-size:clamp(1.85rem,5.2vw,3.3rem);
  line-height:1.24;
  font-weight:700;
  letter-spacing:.02em;
}
.hero-sub{
  max-width:34rem;
  margin:0 auto;
  color:var(--muted);
  font-size:1rem;
  line-height:1.8;
}

/* ---------- 正文骨架 ---------- */
main{display:block}

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(2rem,5vw,4rem) clamp(1rem,4vw,2.5rem);
  display:grid;
  grid-template-columns:236px minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3.5rem);
  align-items:start;
}

.rail{
  position:sticky;
  top:calc(var(--bar) + .6rem);
  padding:1.05rem 1rem;
  border:1px solid var(--line);
  border-left:3px solid var(--clay);
  background:var(--ink-mid);
}
.rail-h{
  margin:0 0 .6rem;
  font-size:.86rem;
  font-weight:500;
  letter-spacing:.24em;
  color:var(--bone);
}
hr{
  height:1px;
  margin:0 0 .9rem;
  border:0;
  background:linear-gradient(90deg,var(--clay),rgba(200,85,43,0));
}
.rail-list{
  display:grid;
  gap:.05rem;
  margin:0;
  padding:0;
  list-style:none;
}
.rail-list a{
  display:flex;
  align-items:center;
  min-height:40px;
  padding:.15rem .1rem;
  border-bottom:1px solid var(--line-soft);
  color:var(--muted);
  text-decoration:none;
  font-size:.9rem;
  transition:color .2s ease,padding-left .2s ease;
}
.rail-list a:hover{color:var(--clay);padding-left:.35rem}

.story{min-width:0}
.prose{font-size:1.02rem}
.prose > section{
  padding-bottom:.4rem;
  scroll-margin-top:calc(var(--bar) + 1.2rem);
}
.prose > section + section{
  margin-top:3rem;
  padding-top:3rem;
  border-top:1px solid var(--line);
}
.prose [id]{scroll-margin-top:calc(var(--bar) + 1.2rem)}

.prose h2{
  margin:0 0 .8rem;
  font-size:clamp(1.35rem,3vw,1.85rem);
  line-height:1.36;
  letter-spacing:.015em;
}
.prose h3{
  margin:1.8rem 0 .55rem;
  font-size:1.15rem;
  line-height:1.5;
  color:var(--clay);
}
.prose p{margin:0 0 1.05rem;color:var(--body-text)}
.prose ul,.prose ol{margin:0 0 1.1rem;padding-left:1.35rem;color:var(--body-text)}
.prose li{margin:.35rem 0}
.prose a{color:var(--clay);text-underline-offset:3px}
.prose strong{color:var(--bone);font-weight:700}
.prose blockquote{
  margin:1.4rem 0;
  padding:.9rem 1.1rem;
  border-left:3px solid var(--clay);
  background:var(--ink-mid);
  color:var(--bone);
}
.prose blockquote p:last-child{margin:0}
.prose figure{margin:1.4rem 0}
.prose img{border:1px solid var(--line)}
.prose figcaption{padding-top:.5rem;font-size:.88rem;color:var(--muted)}
.prose table{width:100%;border-collapse:collapse;font-size:.95rem}
.prose th,.prose td{padding:.5rem .7rem;border:1px solid var(--line);text-align:left}
.prose hr{margin:1.6rem 0}
.prose code{
  padding:.1rem .35rem;
  border:1px solid var(--line);
  background:var(--ink-mid);
  font-size:.9em;
}

/* ---------- 滚动揭示 ---------- */
.rv{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .72s cubic-bezier(.2,.7,.3,1),transform .72s cubic-bezier(.2,.7,.3,1);
  will-change:transform,opacity;
}
.rv.is-in{opacity:1;transform:none}

/* ---------- 页脚 ---------- */
.foot{
  margin-top:clamp(2rem,6vw,4rem);
  border-top:1px solid var(--line);
  background:var(--ink-deep);
}
.foot-grid{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(2rem,4vw,3rem) clamp(1rem,4vw,2.5rem);
  display:grid;
  grid-template-columns:1.1fr 1.2fr 1fr;
  gap:clamp(1.5rem,4vw,3rem);
}
.addr{
  display:block;
  margin:0 0 .9rem;
  font-style:normal;
}
.addr-brand{
  display:block;
  margin-bottom:.4rem;
  font-size:1rem;
  font-weight:700;
  letter-spacing:.2em;
}
.foot-links{display:grid;gap:.1rem;margin:0;padding:0;list-style:none}
.foot-links a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  color:var(--muted);
  text-decoration:none;
  font-size:.92rem;
}
.foot-links a:hover{color:var(--clay)}

.sub-label{
  display:block;
  margin-bottom:.6rem;
  font-size:.88rem;
  letter-spacing:.2em;
  color:var(--bone);
}
.sub-row{display:flex;flex-wrap:wrap;gap:.5rem}
.sub-input{
  flex:1 1 9rem;
  min-width:0;
  min-height:44px;
  padding:.5rem .7rem;
  border:1px solid var(--line);
  background:transparent;
  color:var(--bone);
  font:inherit;
  font-size:.95rem;
}
.sub-input:focus-visible{outline:2px solid var(--clay);outline-offset:1px}
.sub-btn{
  min-height:44px;
  padding:.5rem 1.2rem;
  border:1px solid var(--clay);
  background:var(--clay);
  color:#14100d;
  font:inherit;
  font-size:.95rem;
  font-weight:500;
  letter-spacing:.12em;
  cursor:pointer;
  transition:background .2s ease;
}
.sub-btn:hover{background:var(--clay-lit);border-color:var(--clay-lit)}

.foot-dl{display:grid;gap:.05rem;margin:0}
.foot-dl dt{margin:0}
.foot-dl dd{margin:0}
.foot-dl a{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  min-height:40px;
  color:var(--muted);
  text-decoration:none;
  font-size:.9rem;
}
.foot-dl a .ic{width:14px;height:14px;color:var(--clay)}
.foot-dl a:hover{color:var(--bone)}

.foot-base{
  max-width:var(--maxw);
  margin:0 auto;
  padding:1rem clamp(1rem,4vw,2.5rem) 2rem;
  border-top:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:1rem;
  text-align:center;
}
.copyright{
  margin:0;
  font-size:.88rem;
  letter-spacing:.14em;
  color:var(--muted);
}
.to-top{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:0 .55rem;
  color:var(--clay);
  text-decoration:none;
  font-size:.88rem;
}
.to-top:hover{color:var(--clay-lit)}

/* ---------- 断点 ---------- */
@media (max-width:900px){
  .wrap{grid-template-columns:minmax(0,1fr)}
  .rail{
    position:static;
    border-left:1px solid var(--line);
    border-top:3px solid var(--clay);
  }
  .rail-list{grid-template-columns:1fr 1fr;gap:.05rem .9rem}
  .foot-grid{grid-template-columns:minmax(0,1fr)}
  .prose > section + section{margin-top:2.4rem;padding-top:2.4rem}
}

@media (max-width:560px){
  :root{--bar:66px}
  .hero{min-height:64vh}
  .brand-name{font-size:.9rem;letter-spacing:.12em}
  .nav-link{padding:.3rem .55rem}
  .hero-sub{font-size:.98rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none;will-change:auto}
  .layer{will-change:auto;transform:none!important}
  .nav-link,.rail-list a,.sub-btn{transition:none}
}

button[aria-expanded]{min-width:44px;min-height:44px}