/* ============================================================
   山海有灵 · 关于页（V8）
   面向评委讲清价值：定位 / 功能导览 / 卖点 / 古籍活化 / 数据原创
   落在现有 tokens，版画国风
   ============================================================ */

/* —— 关于页主体 —— */
.about-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
}

/* —— 一句话定位 —— */
.about-lead {
  text-align: center;
  padding: var(--sp-6) var(--sp-4);
  border-top: var(--line-ink) solid var(--ink);
  border-bottom: var(--line-ink) solid var(--ink);
  background: rgba(227, 212, 179, 0.28);
}
.about-lead-text {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--ink);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
}
.about-lead-text .accent {
  color: var(--cinnabar);
  font-family: var(--font-display);
}

/* —— 分块卡片 —— */
.about-block {
  position: relative;
  min-width: 0;
}
.about-block-title {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 900;
  color: var(--ink);
  letter-spacing: var(--ls-normal);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: var(--line-hair) solid var(--ink-ghost);
}
.about-block-title .glyph {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: var(--cinnabar);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-seal);
  transform: rotate(-3deg);
  flex-shrink: 0;
}

/* —— 六大功能导览 —— */
.about-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}
.about-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: var(--line-hair) solid var(--ink-ghost);
  border-radius: var(--r-md);
  background: rgba(244, 236, 216, 0.5);
  min-width: 0;
}
.about-feat-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  color: var(--cinnabar);
}
.about-feat-body { min-width: 0; }
.about-feat-name {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.about-feat-desc {
  margin: 0;
  font-family: var(--font-sub);
  font-size: var(--fs-sm);
  color: var(--ink-faint);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
  word-break: break-word;
}

/* —— 三大卖点 —— */
.about-points {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: pts;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.about-point {
  position: relative;
  counter-increment: pts;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-8);
  border-left: var(--line-bold) solid var(--cinnabar);
  background: rgba(227, 212, 179, 0.22);
}
.about-point::before {
  content: counter(pts, cjk-decimal) "、";
  position: absolute;
  left: var(--sp-3);
  top: var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--cinnabar);
  font-weight: 700;
}
.about-point-name {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--sp-1);
}
.about-point-text {
  margin: 0;
  font-family: var(--font-sub);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-normal);
}

/* —— 古籍活化 / 数据原创 段落 —— */
.about-prose {
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  color: var(--ink-soft);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-normal);
}
.about-prose p { margin: 0 0 var(--sp-3); }
.about-prose p:last-child { margin-bottom: 0; }
.about-prose .accent { color: var(--cinnabar); font-weight: 600; }

/* —— 落款 —— */
.about-sign {
  margin-top: var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--ink-faint);
  font-family: var(--font-sub);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
}
.about-sign .seal { transform: rotate(-3deg); }

/* —— 响应式 —— */
@media (max-width: 640px) {
  .about-features { grid-template-columns: 1fr; }
  .about-lead-text { font-size: var(--fs-lg); }
  .about-block-title { font-size: var(--fs-md); }
}