/* ==========================================================================
   品牌故事页（Our Story）· 画板 14:569
   --------------------------------------------------------------------------
   设计稿分段：14:583 Hero · 14:598 起源叙事 · 14:602 时间线 · 14:631 工艺
              14:660 数字 · 14:677 茶人引言 · 14:685 承诺 · 14:708 订阅CTA

   ★ 间距为什么写死数字、不进 8 档刻度
     设计稿这一页的内边距是 64 / 88 / 104 / 96 / 92 / 84，段内 gap 是
     64 / 72 / 34 / 22，全部落在 --sp-1..8（4…72）之间的空档上。
     按项目约定：就地写值 + 注明画板出处，不硬塞进 Token 刻度
     （刻度一旦为这一页破例，后面每页都会来破例）。

   ★ 字号为什么在 Token 里
     字号属于「设计稿有的必须在 tokens 里找得到」那一类，已补登
     --fs-story-* 一组（见 tokens.css 第 3 节末）。

   ★ 圆角
     画板 14:594 的 Hero 图 cornerRadius = 10，对应 --r-lg（大面板），
     站内图片默认是 --r-md(8)。这一页按画板取 --r-lg，只作用在 .lu-story__media
     上，不动站内其它页面的图片圆角。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 外壳
   -------------------------------------------------------------------------- */

.lu-story {
  background: var(--bg-page);
  color: var(--fg-body);
}

/* 这一页的眉标是 12px / 3px 字距（14:583 等实测），比全站 .lu-eyebrow
   （--fs-eyebrow 11px / 2.4px）大一级、字距更开。作用域锁在 main.lu-story
   内，不动全站眉标 —— 页头、卡片、页脚的眉标仍是 11px。 */
.lu-story .lu-eyebrow {
  font-size: var(--fs-story-eyebrow);
  letter-spacing: var(--ls-story-eyebrow);
}

.lu-story__inner {
  max-width: var(--bp-desktop);
  margin-inline: auto;
  padding-inline: var(--page-margin-mobile);   /* 375 画板：20 */
}

@media (min-width: 768px) {
  .lu-story__inner {
    padding-inline: var(--page-margin-desktop); /* 1440 画板：120 */
  }
}

/* 段与段之间不另加外边距 —— 每段自带 padding-bottom（14:583→14:708 实测），
   再加一层 margin 就会翻倍。 */

.lu-story__media {
  display: block;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--bg-surface-alt);   /* 图没加载出来时不出现白块 */
}

.lu-story__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hero 图上的产地标签 —— 画板 14:595（250×46 / 左 24 下 24 / 内边距 14 /
   gap 8 / r6 / 米白底）。字号与字距直接用表单字段标签那一档（10px + 1.2），
   与画板的 fontSize 10 / letterSpacing 1.2 完全一致，不另开 token。 */
.lu-story__pin {
  position: absolute;
  left: 24px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding-inline: 14px;
  border-radius: var(--r-sm);
  background: var(--bg-surface);   /* 画板 14:595 是 #FAF7F1，与 --c-card #FBF7F1 差 1 阶，取 Token */
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: var(--fs-field-label);
  letter-spacing: var(--ls-field-label);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  white-space: nowrap;
}

.lu-story__pin-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: var(--r-xs);
  background: var(--fg-accent);
}

/* --------------------------------------------------------------------------
   2. Hero —— 14:583（横向 / gap 64 / pt 64 / pb 88 / 垂直居中）
   -------------------------------------------------------------------------- */

.lu-story__hero {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding-block: var(--sp-6) var(--sp-7);
}

@media (min-width: 1024px) {
  .lu-story__hero {
    flex-direction: row;
    align-items: center;
    gap: 64px;
    padding-block: 64px 88px;
  }
}

.lu-story__hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  flex: 1 1 auto;
  min-width: 0;
}

.lu-story__hero-title {
  margin: 0;
  max-width: 520px;
  font-family: var(--font-display);
  font-size: var(--fs-display-1-mobile);
  line-height: var(--lh-display-1);
  font-weight: var(--fw-regular);
  color: var(--fg-primary);
  letter-spacing: var(--ls-normal);
}

@media (min-width: 1024px) {
  .lu-story__hero-title {
    font-size: var(--fs-display-1);   /* 56 / 1.06 */
    line-height: var(--lh-display-1);
  }
}

.lu-story__hero-lead {
  margin: 0;
  max-width: 470px;
  font-family: var(--font-body);
  font-size: var(--fs-story-body);    /* 15 */
  line-height: var(--lh-story-body);  /* 26 */
  color: var(--fg-body);
}

.lu-story__hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

.lu-story__hero-media {
  position: relative;   /* 产地标签的定位基准 */
  flex: none;
  width: 100%;
  aspect-ratio: 560 / 520;
}

@media (min-width: 1024px) {
  .lu-story__hero-media {
    width: 560px;
    height: 520px;
    aspect-ratio: auto;
  }
}

/* --------------------------------------------------------------------------
   3. 起源叙事 —— 14:598（纵向 / gap 22 / pt 104 / pb 96 / 居中）
   -------------------------------------------------------------------------- */

.lu-story__origin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding-block: var(--sp-7) var(--sp-7);
  text-align: center;
}

@media (min-width: 768px) {
  .lu-story__origin {
    padding-block: 104px 96px;
  }
}

.lu-story__origin-lead {
  margin: 0;
  max-width: 860px;
  font-family: var(--font-display);
  font-size: var(--fs-h3);            /* 移动端降档：22 */
  line-height: 1.35;
  font-weight: var(--fw-regular);
  color: var(--fg-primary);
}

@media (min-width: 768px) {
  .lu-story__origin-lead {
    font-size: var(--fs-story-lead);      /* 30 / 44 */
    line-height: var(--lh-story-lead);
  }
}

.lu-story__origin-body {
  margin: 0;
  max-width: 720px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-story-body-lg);   /* 15 / 28 */
  color: var(--fg-body);
}

@media (min-width: 768px) {
  .lu-story__origin-body {
    font-size: var(--fs-story-body-lg);
  }
}

/* --------------------------------------------------------------------------
   4. 时间线 —— 14:602（pb 88）
   -------------------------------------------------------------------------- */

.lu-story__timeline {
  padding-bottom: var(--sp-7);
}

@media (min-width: 768px) {
  .lu-story__timeline {
    padding-bottom: 88px;
  }
}

.lu-story__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-width: 680px;
  margin-bottom: var(--sp-6);
}

/* 时间线页头在设计稿里窄一档（14:610 是 640，工艺/承诺是 680）。
   差 40px 会改变主标的断行位置，所以照抄不合并。 */
.lu-story__head--timeline {
  max-width: 640px;
}

.lu-story__head--center {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}

.lu-story__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-section-title-mobile);  /* 28 */
  line-height: var(--lh-section-title);
  font-weight: var(--fw-regular);
  color: var(--fg-primary);
}

@media (min-width: 768px) {
  .lu-story__title {
    font-size: var(--fs-story-title);         /* 38 / 46 */
    line-height: var(--lh-story-title);
  }
}

.lu-story__timeline-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lu-story__node {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
  padding-block: var(--sp-5);
  border-top: 1px solid var(--border-default);   /* 14:604 线1 … 14:625 线4 */
}

.lu-story__node:first-child {
  border-top: 0;                /* 列表上方已有段标题留白，再加一条线就是双线 */
}

@media (min-width: 768px) {
  .lu-story__node {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: var(--sp-5);
    align-items: start;
    padding-block: var(--sp-6);
  }
}

.lu-story__year {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.1;
  font-weight: var(--fw-semibold);
  color: var(--fg-accent);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
  .lu-story__year {
    font-size: 30px;            /* 14:606 */
  }
}

.lu-story__node-title {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-story-sub);   /* 19 */
  line-height: 1.3;
  font-weight: var(--fw-semibold);
  color: var(--fg-primary);
}

.lu-story__node-desc {
  margin: 0;
  max-width: 660px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--fg-body);
}

@media (min-width: 768px) {
  .lu-story__node-desc {
    font-size: var(--fs-timeline-desc);    /* 14 / 24 */
    line-height: var(--lh-timeline-desc);
  }
}

/* --------------------------------------------------------------------------
   5. 工艺四步 —— 14:631（gap 34 / pb 92）
   -------------------------------------------------------------------------- */

.lu-story__craft {
  padding-bottom: var(--sp-7);
}

@media (min-width: 768px) {
  .lu-story__craft {
    padding-bottom: 92px;
  }
}

.lu-story__steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
}

@media (min-width: 600px) {
  .lu-story__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .lu-story__steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gutter-desktop);
  }
}

.lu-story__step-media {
  width: 100%;
  height: 200px;             /* 14:637 等四张步骤图 */
}

.lu-story__step-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-top: var(--sp-4);
}

.lu-story__step-no {
  margin: 0;
  font-family: var(--font-eyebrow);
  font-size: var(--fs-step-eyebrow);
  letter-spacing: var(--ls-step-eyebrow);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  color: var(--fg-accent);
}

.lu-story__step-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-step-title);   /* 18 */
  line-height: 1.32;
  font-weight: var(--fw-semibold);
  color: var(--fg-primary);
}

.lu-story__step-desc {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);      /* 13 / 22 */
  line-height: var(--lh-body-sm);
  color: var(--fg-body);
}

/* --------------------------------------------------------------------------
   6. 数字带 —— 14:660（pb 92 / 四个数 + 56px 竖分隔）
   -------------------------------------------------------------------------- */

.lu-story__figures {
  padding-bottom: var(--sp-7);
}

@media (min-width: 768px) {
  .lu-story__figures {
    padding-bottom: 92px;
  }
}

.lu-story__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5) var(--sp-4);
}

@media (min-width: 768px) {
  .lu-story__stats {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
  }
}

.lu-story__stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

@media (min-width: 768px) {
  .lu-story__stat {
    flex: 1 1 0;
  }
}

.lu-story__stat-value {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.1;
  font-weight: var(--fw-semibold);
  color: var(--fg-primary);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
  .lu-story__stat-value {
    font-size: var(--fs-stat);      /* 34 */
  }
}

.lu-story__stat-label {
  font-family: var(--font-body);
  font-size: var(--fs-micro);       /* 10 */
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-field-label);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* 竖分隔只存在于桌面；移动端两列布局里插竖线会把网格撑乱 */
.lu-story__stat-sep {
  display: none;
}

@media (min-width: 768px) {
  .lu-story__stat-sep {
    display: block;
    flex: none;
    width: 1px;
    height: 56px;
    background: var(--border-default);
  }
}

/* --------------------------------------------------------------------------
   7. 茶人引言 —— 14:677（横向 / gap 72 / pb 96 / 垂直居中）
   -------------------------------------------------------------------------- */

.lu-story__maker {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding-bottom: var(--sp-7);
}

@media (min-width: 1024px) {
  .lu-story__maker {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-8);           /* 72 */
    padding-bottom: 96px;
  }
}

.lu-story__maker-media {
  flex: none;
  width: 100%;
  aspect-ratio: 440 / 520;
  max-width: 440px;
}

@media (min-width: 1024px) {
  .lu-story__maker-media {
    width: 440px;
    height: 520px;
    aspect-ratio: auto;
  }
}

.lu-story__maker-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  flex: 1 1 auto;
  min-width: 0;
}

.lu-story__maker-quote {
  margin: 0;
  max-width: 600px;
  font-family: var(--font-display);
  font-size: var(--fs-h4);            /* 移动端：20 */
  line-height: 1.45;
  font-weight: var(--fw-regular);
  color: var(--fg-primary);
}

@media (min-width: 1024px) {
  .lu-story__maker-quote {
    font-size: var(--fs-story-quote);  /* 26 / 38 */
    line-height: var(--lh-story-quote);
  }
}

.lu-story__maker-sign {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.lu-story__maker-name {
  font-family: var(--font-display);
  font-size: var(--fs-story-sign);     /* 18 */
  font-weight: var(--fw-semibold);
  color: var(--fg-primary);
}

.lu-story__maker-role {
  font-family: var(--font-body);
  font-size: var(--fs-label);          /* 12 */
  line-height: var(--lh-label);
  color: var(--fg-muted);
}

/* --------------------------------------------------------------------------
   8. 承诺三项 —— 14:685（gap 34 / pb 96）
   -------------------------------------------------------------------------- */

.lu-story__promise {
  padding-bottom: var(--sp-7);
}

@media (min-width: 768px) {
  .lu-story__promise {
    padding-bottom: 96px;
  }
}

.lu-story__promises {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
}

@media (min-width: 768px) {
  .lu-story__promises {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-6) 40px;
  }
}

.lu-story__promise-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.lu-story__promise-icon {
  display: inline-flex;
  color: var(--fg-accent);
}

.lu-story__promise-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-promise-title);  /* 17 */
  line-height: 1.3;
  font-weight: var(--fw-semibold);
  color: var(--fg-primary);
}

.lu-story__promise-desc {
  margin: 0;
  max-width: 330px;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--fg-body);
}

/* --------------------------------------------------------------------------
   9. 批发询盘条（设计稿没有这一段）
   --------------------------------------------------------------------------
   页脚「Wholesale」链的是 /about/#wholesale，而设计稿这一页没有批发模块
   （批发只出现在设计提示词的 B2B 附录里，DTC 版没有）。两个选择：
   删掉页脚那条链接，或者给锚点一个真实落点。这里选后者，且**不写任何
   商务条款**（没有 MOQ、没有价格、没有时效承诺），只做一次收件箱路由，
   避免为一个不存在的承诺背书。
   -------------------------------------------------------------------------- */

.lu-story__trade {
  padding-block: 0;
}

.lu-story__trade .lu-story__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-block: var(--sp-6) var(--sp-7);
  border-top: 1px solid var(--border-soft);
}

.lu-story__trade-title {
  margin: 0;
  font-family: var(--font-eyebrow);
  font-size: var(--fs-story-eyebrow);
  letter-spacing: var(--ls-story-eyebrow);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  color: var(--fg-accent);
}

.lu-story__trade-text {
  margin: 0;
  max-width: 720px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body-lg);
  color: var(--fg-body);
}

.lu-story__trade-text a {
  color: var(--fg-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lu-story__trade-text a:hover {
  color: var(--fg-primary);
}

/* --------------------------------------------------------------------------
   10. 订阅 CTA —— 14:708（深底 / py 84 / gap 22）
   -------------------------------------------------------------------------- */

.lu-story__cta {
  background: var(--bg-inverse);
  color: var(--fg-on-inverse);
}

.lu-story__cta .lu-story__inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-block: var(--sp-7);
}

@media (min-width: 768px) {
  .lu-story__cta .lu-story__inner {
    padding-block: 84px;
  }
}

.lu-story__cta-title {
  margin: 0;
  max-width: 780px;
  font-family: var(--font-display);
  font-size: var(--fs-h2-mobile);      /* 26 */
  line-height: 1.25;
  font-weight: var(--fw-regular);
  color: var(--fg-on-inverse);
}

@media (min-width: 768px) {
  .lu-story__cta-title {
    font-size: var(--fs-h1);           /* 40 / 50 */
    line-height: 1.25;
  }
}

.lu-story__cta-lead {
  margin: 0;
  max-width: 660px;
  font-family: var(--font-body);
  font-size: var(--fs-story-body);
  line-height: var(--lh-story-body);
  color: #A9B8A6;                      /* 14:711 实测；深底上的弱文，非 Token 灰阶 */
}

.lu-story__cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

/* --------------------------------------------------------------------------
   11. 锚点落位修正
   --------------------------------------------------------------------------
   页头是 sticky，`#origins` / `#sourcing` / `#wholesale` 跳过来时目标标题会
   被压在页头下面。scroll-margin-top 用页头高度 + 一点呼吸。
   -------------------------------------------------------------------------- */

.lu-story__anchor {
  scroll-margin-top: 96px;
}