/* 第二层视觉语言：纸张错位、路线轨道与有限的前后层级。 */
:root{
  --paper-shadow:0 18px 46px rgba(28,29,35,.075);
  --paper-edge:#dddbe2;
}

/* 首页：以分区底色建立章节，不依赖大面积强调色。 */
#main>.section:nth-of-type(3),
#main>.section:nth-of-type(5),
#main>.section:nth-of-type(7),
#main>.section:nth-of-type(9){background:#fff}
.hero-inner{position:relative}
.hero-copy{position:relative;z-index:1}
.hero-copy .eyebrow{border-bottom:1px solid var(--paper-edge);padding-bottom:13px}
.hero-art{
  align-self:center;
  margin:30px 0 48px;
  border:1px solid #d5d3db;
  box-shadow:17px 17px 0 #dedce4;
}
.hero-art:before{
  content:"ROUTE / A—C";
  position:absolute;right:18px;top:16px;
  font-size:.65rem;font-weight:750;letter-spacing:.16em;color:var(--rose);
}
.section-head{position:relative;padding-bottom:24px;border-bottom:1px solid var(--line)}
.section-head:after{content:"";position:absolute;left:0;bottom:-2px;width:72px;height:3px;background:var(--pink)}
.section-head h2{max-width:750px}
.section-head .section-number{background:#fff}
.path-selector{box-shadow:12px 12px 0 #e0dee5,var(--paper-shadow)}
.path-item{position:relative;transition:background .2s,transform .2s}
.path-item:not(:first-child):hover{transform:translateY(-3px)}
.path-item:first-child:before{
  content:"";position:absolute;top:106px;bottom:45px;left:39px;width:1px;
  background:#67646d;
}
.path-item:first-child .path-n{position:relative;padding-left:20px}
.path-item:first-child .path-n:before{
  content:"";position:absolute;left:-5px;top:5px;width:11px;height:11px;
  background:var(--pink);border-radius:50%;box-shadow:0 0 0 5px var(--ink);
}
.note-box{box-shadow:9px 9px 0 var(--silver),var(--paper-shadow)}

/* 步骤真正沿一条轨道向下，而非四行孤立的列表。 */
.steps{position:relative;border-top:1px solid var(--ink)}
.steps:before{content:"";position:absolute;top:26px;bottom:26px;left:12px;width:1px;background:#c7c4ce}
.step{position:relative;padding-left:38px;transition:background .2s}
.step:before{
  content:"";position:absolute;left:6px;top:calc(50% - 7px);width:13px;height:13px;
  background:var(--pink);border:3px solid #fff;border-radius:50%;
  box-shadow:0 0 0 1px var(--pink);
}
.step:hover{background:#f5f1f4}
.diagram-card{box-shadow:0 8px 25px rgba(28,29,35,.05);transition:border-color .2s,box-shadow .2s,transform .2s}
.diagram-card:first-child{transform:translateY(-9px)}
.diagram-card:hover{box-shadow:var(--paper-shadow)}
.diagram-card:first-child:hover{transform:translateY(-13px)}
.diagram-card .card-copy{position:relative;background:#fff;margin:-18px 14px 0;border-top:2px solid var(--pink)}
.split-feature{box-shadow:11px 11px 0 var(--silver)}
.editorial{grid-template-rows:repeat(2,minmax(170px,auto))}
.editorial a{min-height:170px;box-shadow:0 6px 24px rgba(28,29,35,.045);transition:border-color .2s,box-shadow .2s,transform .2s}
.editorial a:first-child{grid-row:span 2;min-height:358px;padding:36px}
.editorial a:first-child strong{font-size:clamp(1.7rem,2.4vw,2.5rem)}
.editorial a:hover{box-shadow:var(--paper-shadow);transform:translateY(-3px)}
.safety-banner{box-shadow:12px 12px 0 var(--silver)}
.faq-list details[open]{box-shadow:inset 3px 0 0 var(--pink);background:#fbf9fb}

/* 栏目：插图覆在章节封面之上，内容区是另一张阅读纸。 */
.category-top{position:relative}
.category-header{padding-bottom:78px}
.category-header .index-mark{opacity:.62;letter-spacing:-.12em}
.category-illustration{
  position:relative;width:min(calc(100% - 64px),var(--wrap));
  margin:-31px auto 0;border:1px solid #d5d3db;
  box-shadow:13px 13px 0 #e0dee5;
}
.category-illustration img{width:100%;max-height:320px}
.category-special{
  background:#fff;border:1px solid var(--paper-edge);
  border-top:3px solid var(--ink);padding:34px 36px 38px;
  box-shadow:var(--paper-shadow);
}
.category-special .eyebrow{margin-bottom:8px}
.category-special h2{max-width:620px}
.content-index a:first-child{background:var(--ink);color:#fff}
.content-index a:first-child:hover{background:var(--lead)}
.content-index a:first-child strong{color:#fff}
.list-entry{border-left:3px solid transparent;padding-left:15px;transition:background .2s,border-color .2s}
.list-entry:hover{background:#fff;border-left-color:var(--pink)}
.category-aside{position:sticky;top:28px;align-self:start}
.category-aside .aside-block{background:#fff;border:1px solid var(--paper-edge);border-top:2px solid var(--ink);padding:20px;margin-bottom:18px}
.category-aside .aside-block h3{margin-bottom:10px}

/* 文章：正文与侧栏形成前后两张纸，章节编号只作阅读导向。 */
.article-shell{grid-template-columns:minmax(0,850px) minmax(220px,280px);gap:clamp(36px,5vw,70px)}
.article-shell>article{
  min-width:0;background:#fff;border:1px solid var(--paper-edge);
  padding:0 clamp(27px,3vw,42px) 42px;box-shadow:var(--paper-shadow);
}
.article-header{border-bottom:1px solid var(--line);padding:39px 0 30px}
.article-header .eyebrow{padding-bottom:12px;border-bottom:1px solid var(--paper-edge)}
.article-hero{box-shadow:9px 9px 0 var(--silver);margin-top:31px}
.prose{counter-reset:chapter}
.prose h2{counter-increment:chapter;display:flex;align-items:baseline;gap:16px}
.prose h2:before{
  content:counter(chapter,decimal-leading-zero);flex:none;
  color:var(--rose);font:800 .76rem/1.3 "Noto Sans SC","Microsoft YaHei",sans-serif;
  letter-spacing:.08em;
}
.prose h3{padding-left:19px;border-left:2px solid var(--pink)}
.prose .editor-note{box-shadow:5px 5px 0 #dedbe2}
.article-aside{background:#fff;border:1px solid var(--paper-edge);box-shadow:var(--paper-shadow);padding:23px 25px 15px;top:28px}
.article-aside .aside-block:first-child{border-top:0}
.article-aside .aside-block a:hover{padding-left:5px}
.prev-next a{background:#fff;transition:border-color .2s,transform .2s,box-shadow .2s}
.prev-next a:hover{transform:translateY(-2px);box-shadow:0 7px 20px rgba(28,29,35,.07)}
.search-large{box-shadow:9px 9px 0 var(--silver)}

@media(max-width:1024px){
  .hero-art{margin:25px 0 35px;box-shadow:10px 10px 0 #dedce4}
  .article-shell{grid-template-columns:minmax(0,1fr) 210px;gap:30px}
  .article-aside{padding:18px}
}
@media(max-width:768px){
  .hero-art{margin:0 12px 30px 0;box-shadow:10px 10px 0 #dedce4}
  .path-selector{box-shadow:8px 8px 0 #e0dee5}
  .path-item:first-child:before{top:73px;bottom:28px}
  .editorial a:first-child{grid-row:auto;min-height:225px}
  .category-illustration{width:min(calc(100% - 36px),var(--wrap));margin-top:-20px;box-shadow:8px 8px 0 #e0dee5}
  .category-aside{position:static}
  .article-shell{display:block}
  .article-aside{position:static;margin-top:25px}
}
@media(max-width:540px){
  .hero-art{margin:0 8px 25px 0;box-shadow:7px 7px 0 #dedce4}
  .hero-art:before{font-size:.55rem;right:10px;top:8px}
  .section-head{padding-bottom:17px}
  .path-selector{box-shadow:6px 6px 0 #e0dee5}
  .path-item:first-child:before{left:22px;top:60px;bottom:20px}
  .path-item:first-child .path-n{padding-left:18px}
  .steps:before{left:8px}
  .step{padding-left:28px}
  .step:before{left:2px}
  .diagram-card:first-child,.diagram-card:first-child:hover{transform:none}
  .diagram-card .card-copy{margin:-10px 8px 0}
  .split-feature,.safety-banner{box-shadow:7px 7px 0 var(--silver)}
  .editorial a:first-child{min-height:220px;padding:27px}
  .category-illustration{width:min(calc(100% - 30px),var(--wrap))}
  .category-special{padding:23px 18px 26px;box-shadow:0 10px 28px rgba(28,29,35,.05)}
  .category-aside .aside-block{margin-bottom:0}
  .article-shell>article{background:transparent;border:0;padding:0;box-shadow:none}
  .article-header{padding-top:25px}
  .article-hero{box-shadow:5px 5px 0 var(--silver)}
  .prose h2{gap:10px}
  .article-aside{box-shadow:none;padding:15px}
}
@media(prefers-reduced-motion:reduce){
  .path-item,.diagram-card,.editorial a,.prev-next a{transition:none}
}