@layer design {
/* Imported story body only. No header, footer, body or shared token overrides. */
#main-content.story-import {
  --an-import-font: 'Animesis Story Barlow','Animesis Story Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  position: relative;
  display: block;
  width: 100%;
  background: #fff;
  color: #37414F;
  font-family: var(--an-import-font);
  overflow-wrap: break-word;
}
#main-content.story-import *,
#main-content.story-import *::before,
#main-content.story-import *::after {
  box-sizing: border-box;
}
#main-content.story-import ::selection {
  background: rgba(176,140,70,.24);
}
#main-content.story-import a {
  text-decoration: none;
}
#main-content.story-import :is(.zh,.en,.zh-Hant,.es,.pt-BR,.ja,.ko,.fr,.de) {
  font-family: inherit;
}
/* STORY READING ROLES — regular text follows the homepage's shared tokens.
   Matching imported font declarations were removed from component-layout.css.
   Display headings, chapter numbers, quotations and wordmarks stay independent.
   Attributes avoid triggering legacy p[class] / .an-body layout selectors. */
#main-content.story-import :is([data-story-type="body"], [data-story-type="lead"]) {
  font: var(--an-body-weight) var(--an-body-size)/var(--an-body-line) var(--an-font);
  letter-spacing: var(--an-body-tracking);
  text-wrap: pretty;
}
#main-content.story-import [data-story-type="lead"] {
  font-size: var(--an-lead-size);
  line-height: var(--an-lead-line);
}
#main-content.story-import [data-story-type="card"] {
  font: var(--an-card-weight) var(--an-card-size)/var(--an-card-line) var(--an-font);
  letter-spacing: var(--an-card-tracking);
}
#main-content.story-import [data-story-type="meta"] {
  font: var(--an-meta-weight) var(--an-meta-size)/var(--an-meta-line) var(--an-font);
  letter-spacing: 0;
}
#main-content.story-import :is([data-story-type="eyebrow"], [data-story-type="eyebrow-latin"]) {
  font: var(--an-eyebrow-weight) var(--an-eyebrow-size)/var(--an-eyebrow-line) var(--an-font);
  letter-spacing: var(--an-eyebrow-tracking);
}
#main-content.story-import [data-story-type="eyebrow-latin"] {
  /* Same Latin-label spacing as the homepage's .an-eyebrow--latin role. */
  letter-spacing: .14em;
}
/* END STORY READING ROLES */
/* Every locale uses the same inheritance subheading and paragraph roles. */
#main-content.story-import [data-story-inheritance-card] {
  --an-story-prose-gap: 16px;
}
#main-content.story-import [id^="ch-"] {
  scroll-margin-top: 0;
}
#main-content.story-import #ch-0 {
  min-height: calc(var(--an-hero-frame) - var(--an-header)) !important;
}
#main-content.story-import [data-import-principle-copy] {
  min-width: 0;
}
#main-content.story-import .an-import-rail {
  position: fixed;
  top: 50%;
  left: clamp(18px,2vw,34px);
  transform: translateY(-50%);
  display: none;
  flex-direction: column;
  gap: 8px;
  z-index: 20;
}
#main-content.story-import .an-import-rail-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 28px;
  padding: 3px 0;
  color: #B08C46;
  outline-offset: 4px;
}
#main-content.story-import .an-import-rail-line {
  width: 20px;
  height: 1px;
  background: currentColor;
  opacity: .28;
  transition: opacity var(--an-motion-feedback) var(--an-ease);
}
#main-content.story-import .an-import-rail-label {
  max-width: 132px;
  font: 500 .625rem/1.6 'Animesis Story Barlow',sans-serif;
  letter-spacing: .2em;
  opacity: 0;
  transition: opacity var(--an-motion-feedback) var(--an-ease);
}
#main-content.story-import .an-import-rail-link:is([aria-current="location"],:hover,:focus-visible) :is(.an-import-rail-line,.an-import-rail-label) {
  opacity: 1;
}
#main-content.story-import .an-import-rail[hidden] {
  display: none !important;
}
/* Keep the supplied rail only where it has room outside the text column. */
@media (min-width: 1680px) {
  #main-content.story-import .an-import-rail {
    display: flex;
  }
}
@media (max-width: 860px) {
  #main-content.story-import [data-import-principle-copy] {
    grid-column: 1 / -1 !important;
  }
  #main-content.story-import [data-import-principle] {
    grid-template-columns: minmax(0,1fr) !important;
  }
  #main-content.story-import a[href*="#beta"] {
    max-width: 100%;
    justify-content: center;
    padding: 14px 24px !important;
    line-height: 1.6 !important;
    text-align: center;
  }
}
@media (max-width: 360px) {
  #main-content.story-import h1 {
    font-size: clamp(2rem,10vw,2.75rem) !important;
  }
}
@keyframes anStoryImportFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes anStoryImportCue {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }
  45% {
    transform: scaleY(1);
    transform-origin: top;
  }
  55% {
    transform: scaleY(1);
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}
@media (prefers-reduced-motion: reduce) {
  #main-content.story-import *,#main-content.story-import *::before,#main-content.story-import *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
/* 章节正文对齐标题，而不是对齐章节号。
   章节号给定宽，正文块缩进 = 号宽 + 间距；窄屏标题会换行到号下方，缩进归零。 */
#main-content.story-import section[data-import-chapter]:not(#ch-0) > div > div[data-reveal]:first-child > span:first-child {
  flex: none;
  width: clamp(3.25rem, 7.2vw, 6.5rem);
  white-space: nowrap;
}
@media (min-width: 560px) {
  #main-content.story-import section[data-import-chapter]:not(#ch-0):not(#ch-6) > div > :is(div,p):not(:first-child) {
    padding-left: calc(clamp(3.25rem, 7.2vw, 6.5rem) + clamp(18px, 3vw, 48px));
  }
}
/* ============================================================
   字号收敛　—— 原来的问题
     章节号 82px  ＞ 章节标题 60px，序号盖过它标注的标题
     H2 60px : 正文 16px = 3.75:1，海报尺度而非阅读尺度
     60 → 19 → 16 中间断档，只剩「巨大标题 + 小字」
   收敛后（1376px 实测）
     H1 74 / 章节标题 44 / 章节号 38 / 停顿句 36 / 卡片题 19 / 正文 16
   ============================================================ */
/* H1：88 → 74 */
#main-content.story-import #ch-0 h1 {
  font-size: clamp(2.375rem, 5.4vw, 4.5rem) !important;
  line-height: 1.18 !important;
}
/* 章节标题：品牌首页、故事与研究站共用同一阅读刻度。 */
#main-content.story-import section[data-import-chapter] h2 {
  font-size: var(--an-section-size) !important;
  font-weight: var(--an-section-weight) !important;
  line-height: var(--an-section-line) !important;
  letter-spacing: var(--an-section-tracking) !important;
}
/* 章节号：82 → 38。它是序号，不是纪念碑 */
#main-content.story-import section[data-import-chapter]:not(#ch-0) > div > div[data-reveal]:first-child > span:first-child {
  font-size: clamp(1.625rem, 2.8vw, 2.5rem) !important;
  line-height: 1.1 !important;
  width: clamp(2.25rem, 3.6vw, 3.25rem);
  padding-top: .12em;
}
@media (min-width: 560px) {
  #main-content.story-import section[data-import-chapter]:not(#ch-0):not(#ch-6) > div > :is(div, p):not(:first-child) {
    padding-left: calc(clamp(2.25rem, 3.6vw, 3.25rem) + clamp(18px, 3vw, 48px));
  }
}
/* 停顿句：55 → 36，仍比正文大一倍有余，够撑住停顿 */
#main-content.story-import section:not([data-import-chapter]) p[class] ,
#main-content.story-import section:not([data-import-chapter]) > div > p {
  font-size: clamp(1.25rem, 2.6vw, 2.25rem) !important;
  line-height: 1.55 !important;
}
@media (max-width: 860px) {
  #main-content.story-import #ch-0 h1 {
    font-size: clamp(1.875rem, 8vw, 2.75rem) !important;
  }
  #main-content.story-import section:not([data-import-chapter]) > div > p {
    font-size: clamp(1.125rem, 5vw, 1.5rem) !important;
  }
}
/* ============================================================
   纵向间距收敛　—— 原来的问题
     章节 padding 163/163，两章之间 326px。这套间距是按 60px 标题
     调的，标题收到 44px 后没跟着收，显得松散而非从容。
     两处停顿句 padding 不一致（122 / 136）。
     眉标→标题 33px、标题→导语 35px，几乎相等，等于没有层级。
   收敛后的一套刻度
     14 / 30 / 76 / 126　（卡内 → 题下 → 章首下 → 章之间）
   ============================================================ */
/* 章节与停顿统一到同一个纵向刻度 */
#main-content.story-import > section[data-import-chapter]:not(#ch-0):not(#ch-6),
#main-content.story-import > section:not([data-import-chapter]) {
  padding-top: clamp(72px, 9.2vw, 128px) !important;
  padding-bottom: clamp(72px, 9.2vw, 128px) !important;
}
#main-content.story-import > section[data-screen-label="Closing"] {
  padding-bottom: clamp(80px, 10vw, 144px) !important;
}
/* 眉标是标题的标签，贴紧它 */
#main-content.story-import section[data-import-chapter] h2 {
  margin-top: clamp(12px, 1.4vw, 18px) !important;
}
/* 标题→导语 拉开，形成 18 / 30 的层级差 */
#main-content.story-import section[data-import-chapter] h2 + p {
  margin-top: clamp(20px, 2.2vw, 30px) !important;
}
/* 章首→内容区：95 → 76 */
#main-content.story-import section[data-import-chapter]:not(#ch-6) > div > div[data-reveal]:nth-child(2) {
  margin-top: clamp(48px, 5.6vw, 76px) !important;
}
/* 三章尾注 */
#main-content.story-import #ch-3 > div > p {
  margin-top: clamp(36px, 4.2vw, 60px) !important;
}
/* 章节号再放大一档：38 → 42，仍低于 44px 的章节标题 */
#main-content.story-import section[data-import-chapter]:not(#ch-0) > div > div[data-reveal]:first-child > span:first-child {
  font-size: clamp(1.75rem, 3.05vw, 2.625rem) !important;
  width: clamp(2.5rem, 3.9vw, 3.5rem);
}
@media (min-width: 560px) {
  #main-content.story-import section[data-import-chapter]:not(#ch-0):not(#ch-6) > div > :is(div, p):not(:first-child) {
    padding-left: calc(clamp(2.5rem, 3.9vw, 3.5rem) + clamp(18px, 3vw, 48px));
  }
}
/* The motto now belongs to the name signature, not a separate closing scene. */
#main-content.story-import section[data-screen-label="Closing"] {
  display: flow-root;
  padding-top: 0 !important;
}

/* NAME COMPOSITION — explicit roles, independent of child order.
   The existing header, reading tokens and term-card borders remain shared. */
#main-content.story-import .an-name-chapter {
  background: var(--an-navy-deep);
  padding: clamp(72px,9.2vw,128px) clamp(20px,4vw,48px) clamp(36px,4vw,56px);
}
#main-content.story-import .an-name-terms {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap: clamp(28px,4vw,56px);
  margin-top: clamp(32px,4vw,56px);
}
#main-content.story-import .an-name-term {
  font: italic 200 clamp(1.625rem,2.8vw,2.5rem)/1.15 'Animesis Story Barlow',sans-serif;
  color: #E4C687;
}
#main-content.story-import .an-name-letter {
  color: #fff;
}
#main-content.story-import .an-name-signature {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(64px,6.2vw,88px);
  text-align: center;
}
#main-content.story-import .an-name-ray {
  flex: none;
  width: 1px;
  height: clamp(44px,5vw,68px);
  margin-bottom: clamp(22px,2.2vw,30px);
  background: linear-gradient(180deg,rgba(228,198,135,0),#E4C687 74%,rgba(255,255,255,.88));
}
#main-content.story-import .an-name-wordmark {
  font: 200 clamp(1.375rem,4vw,3.5rem)/1.15 'Animesis Story Barlow',sans-serif;
  letter-spacing: .24em;
  text-indent: .24em;
  color: #fff;
}
#main-content.story-import .an-name-tagline {
  margin: clamp(32px,4vw,56px) 0 0;
  max-width: 860px;
  font: 200 clamp(1.25rem,2.6vw,2.25rem)/1.6 var(--an-import-font);
  letter-spacing: .04em;
  color: #E4C687;
  text-wrap: balance;
}
@media (min-width: 560px) {
  #main-content.story-import .an-name-terms {
    padding-left: calc(clamp(2.5rem,3.9vw,3.5rem) + clamp(18px,3vw,48px));
  }
}
@media (max-width: 860px) {
  #main-content.story-import .an-name-tagline {
    font-size: clamp(1.125rem,5vw,1.5rem);
  }
}

}