/* ============================================================
   story.css
   品牌故事长卷 · banner
   ============================================================ */

/* ============================================================
   下滑 · 品牌故事长卷
   编辑级排版：无照片，靠宋体大字 / 金色细线 / 数据图形撑起质感
   ============================================================ */

/* ---------- 长卷容器 ---------- */
.story{
  position:relative;
  z-index:1;
  text-align:left;
  padding:56px 22px 0;
  background:linear-gradient(180deg,#0C0C0E 0%,var(--bg) 260px);
}
.story__hair{ /* 长卷顶部金线，由 GSAP 横向展开 */
  position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,163,78,.28) 50%,transparent);
  transform:scaleX(var(--hair,1));
}

/* ---------- 章节 ---------- */
.chapter + .chapter{margin-top:64px}
.chapter__eyebrow{
  display:flex;align-items:baseline;gap:9px;
  font-family:var(--latin);
  font-size:10px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold);
}
.chapter__eyebrow b{font-weight:400;letter-spacing:.08em;color:var(--red)}
.chapter__title{
  margin-top:15px;
  font-family:var(--serif);
  font-size:clamp(25px,6.9vw,28px);
  font-weight:700;
  line-height:1.55;
  letter-spacing:.028em;
  color:#fff;
}
.chapter__rule{
  width:36px;height:1px;margin-top:19px;
  background:linear-gradient(90deg,var(--gold),rgba(201,163,78,.12));
}

/* ---------- 正文 ---------- */
.prose{
  margin-top:19px;
  font-size:14.5px;
  line-height:2.05;
  letter-spacing:.012em;
  color:var(--gray);
}
.prose + .prose{margin-top:12px}
.prose em{font-style:normal;color:#CBCBD1}

/* 法文原文 */
.fr{
  margin-top:20px;
  font-family:var(--latin);
  font-style:italic;
  font-size:12.5px;
  line-height:1.95;
  letter-spacing:.015em;
  color:#78787E;
}

/* 叙事短句：一句一行，字号提亮 */
.verse{
  margin-top:20px;
  font-family:var(--serif);
  font-size:clamp(15.5px,4.2vw,17px);
  line-height:2.05;
  letter-spacing:.025em;
  color:#B4B4BB;
}
.verse em{font-style:normal;color:var(--gold)}
.verse strong{font-weight:700;color:#fff}

/* ---------- 数据对比板 ---------- */
.bars{
  margin-top:26px;
  padding:22px 18px 13px;
  border-top:1px solid rgba(201,163,78,.26);
  border-bottom:1px solid rgba(201,163,78,.10);
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0) 78%);
}
.bars__cap{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--latin);
  font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;
  color:#7A7A80;
}
.bars__cap b{font-weight:400;letter-spacing:.12em;color:#95959B}
.bar{margin-top:21px}
.bar__head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.bar__name{font-size:12.5px;letter-spacing:.02em;color:#95959B}
.bar__val{
  font-family:var(--latin);
  font-size:19px;line-height:1;letter-spacing:.01em;
  color:#fff;
  font-variant-numeric:tabular-nums;
}
.bar__val small{font-size:10.5px;letter-spacing:.08em;color:var(--gray-dim);margin-left:2px}
.bar__track{
  margin-top:10px;height:5px;border-radius:3px;
  background:rgba(255,255,255,.075);
  overflow:hidden;
}
.bar__track i{
  display:block;height:100%;width:100%;
  border-radius:3px;
  transform:scaleX(var(--w));transform-origin:left;
}
.bar--wage i   {--w:.092;background:linear-gradient(90deg,#3E3E44,#5C5C64)}
.bar--basic i  {--w:.30; background:linear-gradient(90deg,#7A5F26,var(--gold))}
.bar--premium i{--w:1;    background:linear-gradient(90deg,#A8001E,var(--red) 55%,#FF4B67)}

/* 结论注脚 */
.note{
  margin-top:24px;
  padding-left:13px;
  border-left:1px solid var(--gold);
  font-size:13px;
  line-height:1.95;
  color:#A6A6AB;
}
.note em{font-style:normal;color:var(--gold)}

/* ---------- 收尾 ---------- */
.outro{
  margin-top:70px;
  padding:38px 0 calc(34px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,.055);
  text-align:center;
}
.outro__line{
  font-family:var(--serif);
  font-size:16px;
  line-height:2.05;
  letter-spacing:.035em;
  color:#C2C2C9;
}
.outro__mark{width:26px;height:auto;display:block;margin:28px auto 0;opacity:.85}
.outro__btn{
  display:inline-block;
  margin-top:26px;
  padding:12px 26px;
  border:1px solid var(--gold-line);
  border-radius:999px;
  font-size:12.5px;
  letter-spacing:.16em;text-indent:.16em;
  color:var(--gold);
  text-decoration:none;
  transition:background .28s ease,border-color .28s ease,transform .16s ease;
}
.outro__btn:hover{background:rgba(201,163,78,.10);border-color:rgba(201,163,78,.5)}
.outro__btn:active{transform:translateY(1px)}
.outro__btn:focus-visible{outline:2px solid rgba(201,163,78,.6);outline-offset:3px}
.outro__fr{
  margin-top:32px;
  font-family:var(--latin);
  font-style:italic;
  font-size:11.5px;
  letter-spacing:.02em;
  color:#6B6B71;
}