/* ===== 工艺叙事页 ===== */

.story-open {
  min-height: 78vh;
  display: grid; place-items: center;
  text-align: center; position: relative;
  padding: 80px 24px;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.story-open::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("/img/craft-journey-panorama.png") center calc(58% + 34px) / min(2160px, calc(100vw + 320px)) auto no-repeat;
  -webkit-mask-image: radial-gradient(ellipse at center,
    #000 0,
    #000 50%,
    rgba(0, 0, 0, .72) 68%,
    rgba(0, 0, 0, .18) 86%,
    rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(ellipse at center,
    #000 0,
    #000 50%,
    rgba(0, 0, 0, .72) 68%,
    rgba(0, 0, 0, .18) 86%,
    rgba(0, 0, 0, 0) 100%);
}
.story-open::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to right,
      rgba(247, 241, 228, .90) 0,
      rgba(247, 241, 228, .54) 7%,
      rgba(247, 241, 228, .12) 18%,
      rgba(247, 241, 228, 0) 30%,
      rgba(247, 241, 228, 0) 70%,
      rgba(247, 241, 228, .12) 82%,
      rgba(247, 241, 228, .54) 93%,
      rgba(247, 241, 228, .90) 100%),
    radial-gradient(circle at center, rgba(253, 250, 243, .48) 0, rgba(253, 250, 243, .32) 32%, rgba(247, 241, 228, .08) 58%, rgba(247, 241, 228, .72) 100%),
    linear-gradient(to bottom, rgba(247, 241, 228, .82), rgba(247, 241, 228, .06) 40%, rgba(247, 241, 228, .62));
}
.story-open > * {
  position: relative;
  z-index: 1;
}
.story-open > div {
  isolation: isolate;
  transform: translateY(-126px);
}
.story-open > div::before {
  content: "";
  position: absolute;
  inset: -120px -280px -150px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(253, 250, 243, .94) 0,
    rgba(253, 250, 243, .88) 30%,
    rgba(253, 250, 243, .62) 56%,
    rgba(253, 250, 243, .28) 78%,
    rgba(253, 250, 243, 0) 100%);
  filter: blur(14px);
}
.story-open .vert-l, .story-open .vert-r {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 18px; color: var(--ink-faint);
}
.story-open .vert-l { left: 6vw; }
.story-open .vert-r { right: 6vw; }
.story-open h1 {
  font-family: var(--brush); font-weight: 400;
  font-size: clamp(46px, 8vw, 96px); line-height: 1.3;
  text-shadow: 0 2px 18px rgba(253, 250, 243, .92), 0 0 2px rgba(253, 250, 243, .78);
}
.story-open h1 em { font-style: normal; color: var(--seal); }
.story-open p {
  margin: 20px auto 0; font-size: 17px; color: var(--ink-soft); max-width: 520px;
  text-shadow: 0 1px 12px rgba(253, 250, 243, .92), 0 0 1px rgba(253, 250, 243, .8);
}
.story-open .down {
  margin-top: 46px; font-size: 13px; letter-spacing: .4em; color: var(--ink-faint);
  text-shadow: 0 1px 10px rgba(253, 250, 243, .9);
}
@media (prefers-reduced-motion: no-preference) {
  .story-open .down { animation: bob 2.4s ease-in-out infinite; }
  @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
}

/* 章节侧标 */
.chapter-rail {
  position: fixed; right: 28px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 14px; z-index: 40;
}
.chapter-rail a {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--brush); font-size: 16px;
  color: var(--ink-faint); border: 1px solid transparent;
  transition: all .25s;
}
.chapter-rail a.on { color: #fdfaf3; background: var(--seal); transform: rotate(-4deg); }

/* 章节锚点偏移，避免被 sticky header 遮挡 */
.chapter { padding: 110px 0 0; scroll-margin-top: 84px; }
.chapter-in {
  max-width: var(--maxw); margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center;
}
.chapter:nth-of-type(even) .chapter-in > .ch-img { order: 2; }
.ch-num {
  display: flex; align-items: center; gap: 18px; margin-bottom: 22px;
}
.ch-num .yh-seal { width: 50px; height: 50px; font-size: 21px; }
.ch-num small { font-size: 12.5px; letter-spacing: .4em; color: var(--ink-faint); }
.chapter h2 {
  font-size: clamp(28px, 3.6vw, 40px); font-weight: 900; letter-spacing: .06em; line-height: 1.5;
}
.chapter h2 .brush { font-family: var(--brush); font-weight: 400; color: var(--seal); font-size: 1.25em; }
.chapter .body { margin-top: 18px; font-size: 15.5px; color: var(--ink-soft); max-width: 460px; text-wrap: pretty; }
.ch-fact {
  margin-top: 26px; display: inline-flex; align-items: baseline; gap: 14px;
  border-top: 1px solid var(--line-strong); padding-top: 16px;
}
.ch-fact b { font-family: var(--brush); font-size: 38px; color: var(--gold-deep); line-height: 1; }
.ch-fact span { font-size: 13px; color: var(--ink-faint); letter-spacing: .1em; }
.ch-img { position: relative; }
.ch-img image-slot {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: transparent;
}
.ch-img image-slot[fit="contain"]::part(frame) { background: transparent; border-radius: 10px; }
.ch-img .tag {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  background: rgba(36, 26, 15, .78); color: #efe5d0;
  font-size: 12px; letter-spacing: .25em; padding: 7px 16px; border-radius: 4px;
  backdrop-filter: blur(4px);
}

/* 滚动浮现 */
.reveal { }
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(36px); transition: opacity .8s ease, transform .8s ease; }
  .reveal.in { opacity: 1; transform: none; }
}

/* 工序流程条 */
.flow {
  margin-top: 130px;
  background: var(--paper-deep);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 72px 0;
}
.flow-track {
  max-width: var(--maxw); margin: 44px auto 0; padding: 0 24px;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; position: relative;
}
.flow-step { text-align: center; position: relative; padding: 0 8px; }
.flow-step::before {
  content: ""; position: absolute; top: 26px; left: -50%; width: 100%; height: 1px;
  background: var(--line-strong);
}
.flow-step:first-child::before { display: none; }
.flow-step i {
  position: relative; z-index: 1;
  display: inline-grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--paper-card); border: 1px solid var(--line-strong);
  font-family: var(--brush); font-size: 22px; color: var(--gold-deep);
  font-style: normal;
}
.flow-step h3 { margin-top: 14px; font-size: 15px; letter-spacing: .15em; }
.flow-step p { font-size: 12.5px; color: var(--ink-faint); line-height: 1.7; margin-top: 4px; }

/* 关于烨鸿 */
.about { padding: 110px 0 0; scroll-margin-top: 84px; }
.about-in {
  max-width: var(--maxw); margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: start;
}
.about-side { position: relative; }
.about-side image-slot { width: 100%; height: 460px; }
.about-side .yh-seal { position: absolute; right: -14px; top: -14px; }
.about p.graf { font-size: 15.5px; color: var(--ink-soft); margin-top: 18px; text-wrap: pretty; }
.about-vals { margin-top: 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.about-val { border: 1px solid var(--line); border-radius: 8px; padding: 20px 18px; background: var(--paper-card); }
.about-val:hover { transform: none; box-shadow: none; }
.about-val b { font-family: var(--brush); font-size: 24px; color: var(--seal); display: block; }
.about-val span { font-size: 13px; color: var(--ink-soft); line-height: 1.7; display: block; margin-top: 6px; }

/* 尾部 CTA */
.story-cta { margin-top: 120px; text-align: center; padding: 0 24px 110px; }
.story-cta h2 { font-family: var(--brush); font-weight: 400; font-size: clamp(32px, 5vw, 54px); }
.story-cta .yh-btn { margin-top: 30px; }

@media (max-width: 920px) {
  .chapter { padding-top: 72px; }
  .chapter-in { grid-template-columns: 1fr; gap: 32px; }
  .chapter:nth-of-type(even) .chapter-in > .ch-img { order: 0; }
  .ch-img image-slot { height: auto; }
  .story-open {
    min-height: 70vh;
    padding: 72px 20px;
  }
  .story-open::before {
    background-position: center calc(62% + 30px);
    background-size: auto 68vh;
  }
  .story-open > div::before {
    inset: -92px -108px -124px;
    filter: blur(12px);
  }
  .story-open > div {
    transform: translateY(-78px);
  }
  .chapter-rail { display: none; }
  .story-open .vert-l, .story-open .vert-r { display: none; }
  .flow-track { grid-template-columns: repeat(3, 1fr); row-gap: 36px; }
  .flow-step:nth-child(4)::before { display: none; }
  .about-in { grid-template-columns: 1fr; gap: 40px; }
  .about-side image-slot { height: 320px; }
  .about-vals { grid-template-columns: 1fr; }
}