/* ===== 案例详情页 · 配称系统版 =====================================
   作用域：main.case-detail--system
   本文件不定义任何全局样式，不覆盖 common.css 的导航与页脚。
=================================================================== */

.case-detail--system{
  --paper:#FFFFFF;
  --ink:#111312;
  --ink-70:rgba(17,19,18,.70);
  --ink-45:rgba(17,19,18,.45);
  --ink-30:rgba(17,19,18,.30);
  --line:rgba(17,19,18,.13);
  --line-soft:rgba(17,19,18,.08);
  --brand:#218F82;
  --brand-deep:#12463A;
  --cd-gut:clamp(20px,4vw,64px);
  --cd-sticky-top:120px;   /* = 导航高度 72px + 48px 呼吸 */
  background:var(--paper);
  color:var(--ink);
  display:block;
}

/* --- 作用域内归零，避免继承 common.css 的段落与列表默认值 --- */
.case-detail--system h1,
.case-detail--system h2,
.case-detail--system h3,
.case-detail--system p,
.case-detail--system ul,
.case-detail--system li,
.case-detail--system blockquote,
.case-detail--system figure{margin:0;padding:0}
.case-detail--system ul{list-style:none}
.case-detail--system h1,
.case-detail--system h2,
.case-detail--system h3,
.case-detail--system strong{font-weight:500}
.case-detail--system .wrap{
  width:min(1240px,100% - var(--cd-gut)*2);
  margin-inline:auto;
}

/* --- 动效原语（若 common.css 已有同名规则，删除此段，勿重复定义） --- */
html.js .case-detail--system [data-reveal]{
  opacity:0;
  transform:translateY(var(--motion-shift,20px));
  transition:opacity var(--motion-dur,700ms) var(--motion-ease,cubic-bezier(.16,1,.3,1)),
             transform var(--motion-dur,700ms) var(--motion-ease,cubic-bezier(.16,1,.3,1));
  transition-delay:var(--reveal-delay,0ms);
}
html.js .case-detail--system [data-reveal].is-visible{opacity:1;transform:none}
.case-detail--system .reveal-mask{overflow:hidden;display:block}
html.js .case-detail--system .reveal-mask>span{
  display:block;transform:translateY(110%);
  transition:transform var(--motion-dur-l,900ms) var(--motion-ease,cubic-bezier(.16,1,.3,1));
  transition-delay:var(--reveal-delay,0ms);
}
html.js .case-detail--system .reveal-mask.is-visible>span{transform:none}
html.js .case-detail--system [data-rule]{
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--motion-dur,700ms) var(--motion-ease,cubic-bezier(.16,1,.3,1));
  transition-delay:var(--reveal-delay,0ms);
}
html.js .case-detail--system [data-rule].is-visible{transform:none}
@media (prefers-reduced-motion:reduce){
  html.js .case-detail--system [data-reveal],
  html.js .case-detail--system .reveal-mask>span,
  html.js .case-detail--system [data-rule]{
    opacity:1!important;transform:none!important;transition:none!important;
  }
}
@media (max-width:768px){
  .case-detail--system{--motion-shift:12px}
}

/* --- 1. 首屏：证言压场 --- */
.cd-hero{padding:clamp(72px,10vw,132px) 0 clamp(64px,8vw,104px)}
.cd-eyebrow{display:block;font-size:11.5px;letter-spacing:.18em;color:var(--ink-45);line-height:1.6}
.cd-hero-id{display:flex;align-items:baseline;gap:18px;margin-top:20px}
.cd-hero-id h1{font-size:clamp(30px,4.4vw,44px);line-height:1.2;letter-spacing:.02em}
.cd-hero-id .cd-cat{font-size:14px;color:var(--ink-45);letter-spacing:.06em}
.cd-hero-rule{height:1px;background:var(--line);margin:clamp(34px,5vw,56px) 0 clamp(34px,5vw,52px)}
.cd-hero-quote{
  max-width:23em;
  font-size:clamp(22px,2.9vw,36px);
  line-height:1.62;letter-spacing:.005em;font-weight:500;
  text-indent:-.5em;
}
.cd-hero-sign{display:flex;align-items:baseline;gap:14px;margin-top:clamp(28px,4vw,40px)}
.cd-hero-sign .cd-bar{width:26px;height:1px;background:var(--ink);transform:translateY(-6px)}
.cd-hero-sign strong{font-size:16px}
.cd-hero-sign small{font-size:13px;color:var(--ink-45)}

/* 证言行：照片 + 引言 + 署名 并排（grid 200px + 1fr）。 */
.cd-hero-quote-row{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:40px;
  align-items:start;
  margin-top:clamp(28px,4vw,40px);
}
.cd-hero-ph{
  margin:0;
  aspect-ratio:4/5;
  overflow:hidden;
}
.cd-hero-ph img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.cd-hero-quote-block blockquote,
.cd-hero-quote-block .cd-hero-sign{margin-top:0}
.cd-hero-quote-block .cd-hero-sign{margin-top:clamp(20px,2.4vw,28px)}

/* --- 2. 合作背景 --- */
.cd-section{padding:clamp(64px,8vw,104px) 0}
.cd-context{border-top:1px solid var(--line)}
.cd-context-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(28px,6vw,80px);
}
.cd-context h2{font-size:clamp(22px,2.6vw,31px);line-height:1.45;margin-top:16px}
.cd-context p{color:var(--ink-70);font-size:16px;line-height:1.75}
.cd-context p+p{margin-top:14px}
@media (max-width:860px){.cd-context-grid{grid-template-columns:1fr}}

/* --- 3. 配称系统 --- */
.cd-system{
  border-top:1px solid var(--line);
  padding-top:clamp(56px,7vw,88px);
  padding-bottom:clamp(64px,8vw,120px);
}
.cd-system-grid{
  display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  gap:clamp(32px,6vw,88px);align-items:start;
}

/* 左栏：常驻战略定位 */
.cd-anchor{position:sticky;top:var(--cd-sticky-top)}
.cd-anchor-claim{font-size:clamp(20px,2.2vw,27px);line-height:1.55;font-weight:500;margin-top:18px}
.cd-anchor-note{font-size:14px;color:var(--ink-45);line-height:1.75;margin-top:18px}
.cd-anchor-rule{height:1px;background:var(--line);margin:clamp(26px,3vw,34px) 0 22px}
.cd-anchor-caption{font-size:11.5px;letter-spacing:.18em;color:var(--ink-45);margin-bottom:16px}
.cd-index{display:flex;flex-direction:column}
.cd-index li{border-top:1px solid var(--line-soft)}
.cd-index li:last-child{border-bottom:1px solid var(--line-soft)}
.cd-index a{
  display:flex;align-items:center;gap:14px;padding:11px 0;
  font-size:14px;color:var(--ink-30);
  transition:color 240ms var(--motion-ease,cubic-bezier(.16,1,.3,1));
}
.cd-index a:hover{color:var(--ink-70)}
.cd-index .cd-num{font-size:11.5px;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.cd-index .cd-tick{
  width:0;height:1px;background:var(--brand);margin-left:auto;
  transition:width 240ms var(--motion-ease,cubic-bezier(.16,1,.3,1));
}
.cd-index li.is-active a{color:var(--ink)}
.cd-index li.is-active .cd-tick{width:22px}

/* 右栏：六项配称挂在同一根主干上 */
.cd-branches{position:relative;padding-left:clamp(24px,3.4vw,44px)}
.cd-branches::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--line-soft);
}
.cd-spine{
  position:absolute;left:0;top:0;width:1px;background:var(--ink);
  height:0;transition:height 120ms linear;
}
.cd-branch{padding:clamp(30px,3.6vw,42px) 0;border-top:1px solid var(--line)}
.cd-branch:first-of-type{border-top:0;padding-top:0}
.cd-branch-head{display:flex;align-items:baseline;gap:16px}
.cd-branch-head .cd-num{
  font-size:11.5px;letter-spacing:.1em;color:var(--ink-45);font-variant-numeric:tabular-nums;
}
.cd-branch-head h3{
  font-size:clamp(17px,1.6vw,20px);letter-spacing:.02em;
  transition:color 240ms var(--motion-ease,cubic-bezier(.16,1,.3,1));
}
.cd-branch:hover .cd-branch-head h3{color:var(--brand)}
.cd-branch-lead{font-size:clamp(16px,1.5vw,19px);line-height:1.7;margin-top:14px;max-width:30em}
.cd-branch-list{margin-top:18px;max-width:34em}
.cd-branch-list li{
  position:relative;padding:9px 0 9px 20px;
  font-size:15px;line-height:1.75;color:var(--ink-70);
  border-top:1px solid var(--line-soft);
}
.cd-branch-list li::before{
  content:"";position:absolute;left:0;top:19px;width:8px;height:1px;background:var(--ink-30);
}

@media (max-width:900px){
  .cd-system-grid{grid-template-columns:1fr}
  .cd-anchor{position:static}
  .cd-anchor-rule{margin-bottom:0}
  .cd-anchor-caption,.cd-index{display:none}
}

/* --- 4. 战略成果（全页唯一深绿填充） --- */
.cd-results{background:var(--brand-deep);color:#fff;padding:clamp(64px,8vw,112px) 0}
.cd-results-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,6vw,80px);align-items:end;
}
.cd-results .cd-eyebrow{color:rgba(255,255,255,.6)}
.cd-result-num{
  display:block;font-size:clamp(60px,10vw,124px);line-height:1;font-weight:500;
  letter-spacing:-.02em;margin-top:22px;font-variant-numeric:tabular-nums;
}
.cd-result-den{font-size:15px;color:rgba(255,255,255,.72);margin-top:20px;line-height:1.75}
.cd-result-list li{
  padding:16px 0;border-top:1px solid rgba(255,255,255,.18);
  font-size:16px;line-height:1.75;color:rgba(255,255,255,.88);
}
/* 双数字变体（锡笼记专用） */
.cd-results-grid--dual{grid-template-columns:minmax(0,.55fr) minmax(0,.55fr) minmax(0,1fr)}
.cd-results-grid--dual .cd-result-num{font-size:clamp(48px,7vw,88px)}
@media (max-width:860px){
  .cd-results-grid,
  .cd-results-grid--dual{grid-template-columns:1fr}
}

/* --- 5. 返回 --- */
.cd-back{padding:clamp(56px,7vw,88px) 0}
.cd-btn-outline{
  display:inline-block;padding:14px 30px;border:1px solid var(--line);
  font-size:14px;letter-spacing:.06em;border-radius:0;
  transition:border-color 200ms var(--motion-ease,cubic-bezier(.16,1,.3,1)),
             color 200ms var(--motion-ease,cubic-bezier(.16,1,.3,1));
}
.cd-btn-outline:hover{border-color:var(--brand);color:var(--brand)}