/* ============================================================
   关于我页 · 专属样式（仅 site.css 未覆盖的页面级选择器）
   来源：UI 设计定稿 about.html
   ============================================================ */

/* ============ 页头 ============ */
.page-hero {
  position: relative; overflow: hidden; padding: 88px 0 72px;
  background:
    radial-gradient(900px 380px at 15% -20%, rgba(168, 50, 45, .05), transparent 55%),
    radial-gradient(900px 380px at 85% -20%, rgba(46, 71, 86, .07), transparent 60%),
    var(--paper);
}
.page-hero .eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; letter-spacing: .3em; color: var(--ink-50); margin-bottom: 22px;
}
.page-hero .eyebrow::before { content: ""; width: 36px; height: 1px; background: var(--faint); }
.page-hero h1 {
  font-family: var(--serif); font-weight: 900;
  font-size: clamp(34px, 5vw, 52px); letter-spacing: .05em; line-height: 1.3;
  margin-bottom: 20px;
}
.page-hero h1 em { font-style: normal; color: var(--cinnabar); }
.page-hero .lede { font-size: 16.5px; color: var(--ink-70); max-width: 620px; }
.page-hero .hero-no {
  position: absolute; right: 6%; top: 44px;
  font-family: "Zhi Mang Xing", var(--serif); font-weight: 400; font-size: 190px; line-height: 1;
  color: rgba(168, 50, 45, .09); pointer-events: none;
}
.page-hero .mountains { position: absolute; left: 0; right: 0; bottom: -4px; pointer-events: none; }
.page-hero .mountains svg { display: block; width: 100%; height: 120px; }

/* ============ 章节通用（编号 + 英文角标） ============ */
.sec { padding: 88px 0; }
.sec.alt { background: var(--paper-2); border-top: 1px solid var(--faint-2); border-bottom: 1px solid var(--faint-2); }
.sec-no {
  font-family: "Zhi Mang Xing", var(--serif); font-weight: 400; font-size: 60px; line-height: 1;
  color: var(--cinnabar); opacity: .92; transform: translateY(6px);
}
.sec-head .en { font-size: 12px; letter-spacing: .3em; color: var(--ink-50); }

/* ============ 壹 个人陈述 ============ */
.intro-layout { display: grid; grid-template-columns: 380px 1fr; gap: 64px; align-items: start; }
.portrait-card {
  position: relative; background: var(--paper-2);
  border: 1px solid var(--faint); border-radius: 4px; padding: 18px 18px 22px;
}
.portrait-frame {
  aspect-ratio: 4/5; background: linear-gradient(160deg, #2E4756 0%, #1C1C1C 100%);
  border-radius: 2px; position: relative; overflow: hidden;
}
.portrait-frame .portrait-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.portrait-frame::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(200px 160px at 50% 32%, rgba(247, 244, 237, .16), transparent 70%);
}
.portrait-frame .zi {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: "Ma Shan Zheng", var(--serif); font-weight: 400; font-size: 120px;
  color: rgba(247, 244, 237, .9); letter-spacing: .1em;
}
.portrait-frame .cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 18px;
  background: linear-gradient(transparent, rgba(28, 28, 28, .72));
  color: rgba(247, 244, 237, .92); font-size: 12px; letter-spacing: .2em;
  display: flex; justify-content: space-between;
}
.portrait-card .note { margin-top: 14px; text-align: center; font-size: 12.5px; color: var(--ink-50); letter-spacing: .08em; }
.intro-text h2 { font-family: var(--serif); font-size: 30px; font-weight: 900; letter-spacing: .04em; margin-bottom: 24px; }
.intro-text h2 em { font-style: normal; color: var(--cinnabar); }
.intro-text p { font-size: 15.5px; color: var(--ink-70); margin-bottom: 16px; line-height: 2.05; }
.intro-quote {
  background: var(--ink); color: var(--paper); border-radius: 4px;
  padding: 30px 30px 26px; margin-top: 10px;
  font-family: var(--serif); font-size: 17px;
  line-height: 2; letter-spacing: .03em; position: relative;
}
.intro-quote::before {
  content: "「"; position: absolute; top: -22px; left: 12px;
  font-size: 44px; color: #E8B4B0; opacity: .5; line-height: 1;
}

/* ============ 贰 履历时间线 ============ */
.timeline { position: relative; padding-left: 36px; }
.timeline::before {
  content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(var(--faint) 60%, transparent);
}
.tl-item { position: relative; padding-bottom: 44px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -36px; top: 8px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--cinnabar);
}
.tl-item.now::before { background: var(--cinnabar); }
.tl-time { font-family: var(--serif); font-size: 14px; letter-spacing: .12em; color: var(--cinnabar); font-weight: 700; margin-bottom: 6px; }
.tl-item h3 {
  font-family: var(--serif); font-size: 19px; font-weight: 700; margin-bottom: 6px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.tl-item h3 .org { font-size: 13px; color: var(--ink-50); font-family: var(--serif); font-weight: 400; letter-spacing: .04em; }
.tl-item p { font-size: 15.5px; color: var(--ink-70); max-width: 720px; }
.tl-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tl-tags span {
  font-size: 12px; color: var(--indigo); background: rgba(46, 71, 86, .08);
  padding: 3px 12px; border-radius: 2px; letter-spacing: .05em;
}

/* ============ 叁 能力矩阵 ============ */
.skill-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.skill-card {
  background: var(--paper); border: 1px solid var(--faint); border-radius: 4px;
  padding: 28px; transition: border-color .2s, transform .2s var(--ease);
}
.skill-card:hover { border-color: var(--cinnabar); transform: translateY(-3px); }
.skill-card h3 { font-family: var(--serif); font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.skill-lead { font-size: 14px; color: var(--ink-70); line-height: 1.9; margin-bottom: 16px; }
.skill-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.skill-chips .chip {
  font-size: 12.5px; color: var(--ink-70); background: var(--faint-2);
  border: 1px solid var(--faint); border-radius: 2px; padding: 5px 12px; letter-spacing: .03em;
}
.skill-chips .chip::before { content: "·"; color: var(--cinnabar); margin-right: 6px; font-weight: 700; }

/* ============ 肆 服务理念 ============ */
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.value-card {
  background: var(--paper); border: 1px solid var(--faint); border-radius: 4px;
  padding: 30px 24px; text-align: center;
  transition: border-color .2s, transform .2s var(--ease);
}
.value-card:hover { border-color: var(--cinnabar); transform: translateY(-4px); }
.value-card .zi {
  font-family: "Ma Shan Zheng", var(--serif); font-weight: 400; font-size: 52px;
  color: var(--cinnabar); line-height: 1.2; display: block; margin-bottom: 10px;
}
.value-card p { font-size: 13px; color: var(--ink-50); line-height: 1.9; }

/* ============ 伍 FAQ（details/summary，静态无 JS） ============ */
.faq-list { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq-item { background: var(--paper-2); border: 1px solid var(--faint); border-radius: 4px; overflow: hidden; }
.faq-q {
  width: 100%; display: flex; align-items: center; gap: 14px; padding: 18px 22px;
  font-family: var(--serif); font-size: 16px; font-weight: 700; text-align: left;
  background: none; border: none; cursor: pointer; color: var(--ink);
  letter-spacing: .02em; list-style: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q .no { font-family: "Zhi Mang Xing", var(--serif); font-weight: 400; color: var(--cinnabar); font-size: 26px; flex: none; line-height: 1; }
.faq-q .sign { margin-left: auto; font-size: 20px; color: var(--ink-50); transition: transform .25s var(--ease); flex: none; }
.faq-item[open] .faq-q .sign { transform: rotate(45deg); }
.faq-a-inner { padding: 0 22px 20px 62px; font-size: 15.5px; color: var(--ink-70); line-height: 2; }

/* ============ 尾部 CTA（区别于 site.css 的 .cta 深色版） ============ */
.page-cta { position: relative; overflow: hidden; padding: 100px 0; background: var(--paper-2); border-top: 1px solid var(--faint-2); }
.page-cta-inner {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 18px; position: relative; z-index: 2;
}
.page-cta-inner::before {
  content: "同道者行"; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Ma Shan Zheng", var(--serif); font-weight: 400; font-size: 150px;
  color: rgba(28, 28, 28, .045); letter-spacing: .2em; white-space: nowrap;
  pointer-events: none;
}
.page-cta h2 { font-family: var(--serif); font-size: clamp(28px, 4vw, 40px); font-weight: 900; letter-spacing: .06em; }
.page-cta p { color: var(--ink-70); font-size: 16px; max-width: 520px; }

/* ============ 响应式 ============ */
@media (max-width: 960px) {
  .intro-layout { grid-template-columns: 1fr; gap: 40px; }
  .portrait-card { max-width: 360px; }
  .skill-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr 1fr; }
  .page-hero .hero-no { font-size: 130px; right: 4%; }
}
@media (max-width: 640px) {
  .page-hero { padding: 56px 0 48px; }
  .sec { padding: 56px 0; }
  .sec-no { font-size: 46px; }
  .values-grid { grid-template-columns: 1fr; }
  .sbar { grid-template-columns: 100px 1fr; }
  .faq-a-inner { padding-left: 22px; }
  .page-cta-inner::before { font-size: 80px; }
}