:root{
  --ink:#1B1F3B;
  --ink-deep:#101324;
  --amber:#E0A458;
  --sand:#F2EFE6;
  --line:rgba(224,164,88,.22);
  --glass:rgba(242,239,230,.055);
  --bar-h:64px;
}
*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  background:var(--ink);
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  padding-bottom:calc(var(--bar-h) + 34px);
  font-family:"Noto Sans Arabic","Segoe UI",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:17px;
  line-height:1.78;
  color:var(--sand);
  background:var(--ink);
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--amber)}
a:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
h1,h2,h3{text-wrap:balance}

/* 视差层 */
.layers{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;perspective:1px}
.layers span{position:absolute;inset:-25% -12%;display:block;will-change:transform}
.layers .l1{
  background:radial-gradient(58% 42% at 78% 6%,rgba(224,164,88,.22),transparent 70%);
  transform:translate3d(0,calc(var(--scroll,0px) * -.06),0);
}
.layers .l2{
  background:radial-gradient(52% 40% at 14% 54%,rgba(224,164,88,.11),transparent 74%);
  transform:translate3d(0,calc(var(--scroll,0px) * .045),0);
}
.layers .l3{
  background:linear-gradient(180deg,transparent 0%,rgba(16,19,36,.85) 72%);
  transform:translate3d(0,calc(var(--scroll,0px) * -.014),0);
}

/* 底部固定条 */
.bar{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:60;
  background:rgba(16,19,36,.92);
  border-top:1px solid var(--line);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.bar-nav{display:block}
.bar-nav p{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:.1rem;
  max-width:1180px;
  margin:0 auto;
  padding:.4rem .8rem;
}
.bar-nav a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:.4rem .55rem;
  border-radius:4px;
  color:rgba(242,239,230,.88);
  font-size:.95rem;
  text-decoration:none;
}
.bar-nav a::before{
  content:"";
  width:5px;height:5px;
  margin-right:.42rem;
  border:1px solid currentColor;
  transform:rotate(45deg);
  opacity:.55;
  flex:none;
}
.bar-nav a:hover,.bar-nav a:focus-visible{color:var(--amber);background:rgba(224,164,88,.14)}
.brand{
  margin-inline:auto;
  padding-inline:.9rem;
  font-family:"Noto Naskh Arabic",serif;
  font-weight:700;
  font-size:1.02rem;
  letter-spacing:.12em;
  color:var(--amber);
}
.brand::before{display:none}

/* 首屏 */
.hero{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  align-items:center;
  gap:clamp(1.5rem,4vw,3rem);
  min-height:70vh;
  max-width:1180px;
  margin:0 auto;
  padding:clamp(3rem,7vh,5.5rem) 1.4rem clamp(2rem,5vh,3.5rem);
}
.hero-copy{text-align:center}
.eyebrow{
  margin:0 0 1rem;
  font-size:.86rem;
  letter-spacing:.28em;
  color:var(--amber);
}
h1{
  margin:0 0 1.1rem;
  font-family:"Noto Naskh Arabic",serif;
  font-size:clamp(1.8rem,4.4vw,2.9rem);
  line-height:1.34;
  font-weight:700;
}
.hero-lede{
  max-width:34rem;
  margin:0 auto 1.6rem;
  color:rgba(242,239,230,.78);
}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin:0}
.btn{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:.6rem 1.1rem;
  border:1px solid var(--amber);
  border-radius:4px;
  background:var(--amber);
  color:#1B1F3B;
  font-weight:600;
  text-decoration:none;
  font-size:.98rem;
}
.btn.ghost{background:transparent;color:var(--amber)}
.btn:hover{background:#eab26e;color:#1B1F3B}
.btn.ghost:hover{background:rgba(224,164,88,.16);color:var(--amber)}
.hero-art{
  position:relative;
  margin:0;
  min-height:clamp(220px,38vh,400px);
  border:1px solid var(--line);
  border-radius:4px;
  overflow:hidden;
  background:var(--glass);
}
.hero-art img{width:100%;height:100%;min-height:inherit;object-fit:cover}

/* 主体骨架 */
main{
  display:grid;
  grid-template-columns:246px minmax(0,1fr);
  gap:clamp(1.5rem,3vw,2.6rem);
  align-items:start;
  max-width:1180px;
  margin:0 auto;
  padding:1rem 1.4rem 3rem;
}
.doc{min-width:0}
.doc article{scroll-margin-top:1.6rem}

/* 左侧索引 */
.rail{
  position:sticky;
  top:1.2rem;
  padding:1.1rem 1rem;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--glass);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.rail-title{
  margin:0 0 .7rem;
  font-family:"Noto Sans Arabic",sans-serif;
  font-size:.9rem;
  font-weight:600;
  letter-spacing:.2em;
  color:var(--amber);
}
.rail ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.15rem}
.rail li a{
  display:flex;
  align-items:center;
  gap:.55rem;
  min-height:42px;
  padding:.35rem .4rem;
  border-radius:4px;
  color:var(--sand);
  font-size:.97rem;
  text-decoration:none;
}
.rail li a:hover{background:rgba(224,164,88,.14);color:var(--amber)}
.num{
  font-size:.76rem;
  letter-spacing:.14em;
  color:var(--amber);
  opacity:.85;
  flex:none;
}
.rail-note{
  margin:.85rem 0 0;
  padding-top:.7rem;
  border-top:1px solid var(--line);
  font-size:.85rem;
  line-height:1.7;
  color:rgba(242,239,230,.62);
}

/* 玻璃区块 */
.lead,.outro{
  padding:1.5rem clamp(1rem,2.5vw,1.8rem);
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--glass);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.lead{margin-bottom:1.6rem}
.outro{margin-top:2rem}
.sec-title{
  margin:0 0 .8rem;
  font-family:"Noto Naskh Arabic",serif;
  font-size:clamp(1.3rem,2.5vw,1.7rem);
  line-height:1.45;
}
.sec-title span,.body-content h2>span,.body-content h3>span{
  display:inline-block;
  padding-bottom:.13rem;
  border-bottom:2px solid rgba(224,164,88,.45);
}

/* 正文 */
.body-content{counter-reset:chap}
.body-content>article{
  position:relative;
  counter-increment:chap;
  padding:clamp(1.8rem,4vw,3rem) 0;
  border-top:1px solid var(--line);
}
.body-content>article:first-child{border-top:0;padding-top:.6rem}
.body-content>article::before{
  content:"第 " counter(chap) " 节";
  display:block;
  margin-bottom:.7rem;
  font-size:.8rem;
  letter-spacing:.24em;
  color:var(--amber);
}
.body-content h2{
  margin:0 0 1rem;
  font-family:"Noto Naskh Arabic",serif;
  font-size:clamp(1.45rem,3vw,2rem);
  line-height:1.4;
}
.body-content h3{
  margin:1.6rem 0 .6rem;
  font-family:"Noto Naskh Arabic",serif;
  font-size:1.15rem;
  line-height:1.5;
}
.body-content p{max-width:62ch;margin:0 0 1.05rem;color:rgba(242,239,230,.9)}
.body-content ul,.body-content ol{margin:0 0 1.1rem;padding-left:1.25rem}
.body-content li{margin:.35rem 0}
.body-content a{text-decoration:underline;text-underline-offset:3px}
.body-content figure{margin:1.4rem 0}
.body-content img{border:1px solid var(--line);border-radius:4px}
.body-content blockquote{
  margin:1.3rem 0;
  padding:.85rem 1.1rem;
  border-left:3px solid var(--amber);
  border-radius:0 4px 4px 0;
  background:rgba(224,164,88,.07);
}
.body-content blockquote p:last-child{margin-bottom:0}
.body-content strong{color:#fff}
.body-content table{width:100%;border-collapse:collapse;font-size:.95rem}
.body-content th,.body-content td{border:1px solid var(--line);padding:.55rem .7rem;text-align:left}

/* 页脚 */
.foot{
  margin-top:3rem;
  padding:clamp(2rem,5vw,3rem) 1.4rem 1.6rem;
  border-top:1px solid var(--line);
  background:rgba(14,17,34,.78);
}
.foot-grid{
  display:grid;
  grid-template-columns:1.5fr .9fr .9fr .9fr;
  gap:clamp(1.2rem,3vw,2.2rem);
  max-width:1180px;
  margin:0 auto;
}
.foot-brand-name{
  margin:0 0 .5rem;
  font-family:"Noto Naskh Arabic",serif;
  font-size:1.1rem;
  letter-spacing:.08em;
  color:var(--amber);
}
.foot-desc{max-width:22rem;margin:0;font-size:.9rem;line-height:1.7;color:rgba(242,239,230,.66)}
.foot dl{margin:0}
.foot dt{margin-bottom:.5rem;font-size:.82rem;letter-spacing:.2em;color:var(--amber)}
.foot dd{margin:0}
.foot dd a,.foot dd span{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  font-size:.94rem;
  color:rgba(242,239,230,.85);
  text-decoration:none;
}
.foot dd a:hover{color:var(--amber)}
.foot-end{
  max-width:1180px;
  margin:2rem auto 0;
  padding-top:1.2rem;
  border-top:1px solid var(--line);
  text-align:center;
  font-size:.86rem;
  color:rgba(242,239,230,.6);
}
.foot-end p{margin:.25rem 0}

/* 滚动显现 */
.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.25,1);
  will-change:opacity,transform;
}
.reveal.in{opacity:1;transform:none}
.reduce .reveal{opacity:1;transform:none;transition:none}
.reduce .layers span{transform:none}

@media (max-width:860px){
  main{grid-template-columns:minmax(0,1fr)}
  .rail{position:static;padding:.9rem}
  .rail ol{flex-direction:row;flex-wrap:wrap;gap:.3rem}
  .rail li a{min-height:40px;padding:.3rem .55rem;background:rgba(242,239,230,.05)}
  .rail-note{margin-top:.6rem}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  :root{--bar-h:138px}
  body{font-size:16.5px}
  .hero{grid-template-columns:minmax(0,1fr);min-height:0;padding-top:2.6rem}
  .hero-copy{order:1}
  .hero-art{order:2;min-height:200px}
  .brand{
    flex:1 0 100%;
    order:-1;
    justify-content:center;
    min-height:44px;
    border-bottom:1px solid var(--line);
  }
  .foot-grid{grid-template-columns:1fr}
}
@media (max-width:420px){
  main{padding-inline:1rem}
  .hero{padding-inline:1rem}
  .bar-nav a{font-size:.9rem;padding:.35rem .45rem}
  .bar-nav p{padding:.35rem .5rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

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