/* KnowSelf 成长画像 · 三页共用样式
 *
 * persona.html（此刻 + 两个入口）、persona-archetype.html（相似原型）、
 * persona-analysis.html（分析）共用这一份。各页只在自己 <style> 里写本页特有的版式。
 *
 * 墨色收敛：数据区统一「纸 · 墨 · 印」三色——去彩、去行楷、去卡片底纹。
 * 区块标题一律宋体细字 + 双发丝线，朱砂仅印章一处。
 */

/* 纸底：整页暖纸色打底，白卡浮在其上——「地面」是这一版不再死气的关键 */
body { background: #FBF9F5; }
.hero-ink { display: none; }
.hero-bg { display: none; }
.hero-bg { background-image: url("assets/feitian-relief-redrawn.jpg"); }
.ink-veil {
  background: linear-gradient(180deg,
    #FFFFFF 0%,
    rgba(255, 255, 255, 0.8) 30%,
    rgba(255, 255, 255, 0.35) 55%,
    rgba(255, 255, 255, 0.05) 75%,
    transparent 90%);
}
.page { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; padding: 2rem 1.5rem 6rem; overflow: hidden; }
/* 标题区不叠任何装饰层（飞天画曾在标题上字压图）：靠留白与字号分层 */
/* 页头工具条：返回（左）· 教程（右），居中留白——不再与刊头抢行 */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  max-width: 1080px;
  padding: 0.5rem 1.5rem 0;
}
.nav-enter {
  /* 不能是 static：全站 hover 下划线（.nav-enter::after，见 style.css）靠最近的
     positioned 祖先定位，static 会把它改锚到整条 .nav —— 一滑入就是横贯页头的
     1080px 金线（实测）。relative 的 flex 子项照常参与排布，一举两得。 */
  position: relative;
  flex-shrink: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-family: var(--serif-sc);
  font-size: 0.92rem;
  letter-spacing: 0.08em;
}
.kst-guide {
  flex-shrink: 0;
  margin-left: auto;
}
.brand { display: none; }      /* 刊头已由主标题区承担 */
.brand-zh { display: none; }
.nav::after { display: none; } /* 金线移至标题区下方 */
/* 刊头：西文刊名 + 中文主题 + 发丝线，三段式居中 */
.masthead {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin: 0.9rem auto 0.4rem;
}
.masthead-en {
  font-family: var(--garamond);
  font-size: 0.95rem;
  letter-spacing: 0.28em;
  text-indent: 0.28em;   /* 抵消末字后多出的一份字距，左右留白才对称 */
  color: #A08A5C;
}
.masthead-zh {
  font-family: var(--serif-sc);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  color: #6E634F;
}
.masthead-rule {
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #C8B98F, transparent);
}
/* 主标题：细中带骨的宋体大字，收紧行高，字距半开 */
.page-title {
  text-align: center;
  font-family: var(--serif-sc);
  font-weight: 600;
  font-size: clamp(2rem, 5.6vw, 2.9rem);
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  line-height: 1.3;
  color: #211D18;
  margin: 0.3rem 0 0.4rem;
}
/* 印章：暗朱细边素印，不倾斜、不抢戏 */
.seal {
  display: inline-block;
  font-family: 'STXingkai', '华文行楷', 'KaiTi', 'STKaiti', serif;
  font-size: 0.78rem;
  line-height: 1;
  font-weight: 400;
  color: #9E2E22;
  border: 1px solid #9E2E22;
  border-radius: 2px;
  padding: 0.14rem 0.26rem;
  transform: none;
  vertical-align: 0.38rem;
  margin-left: 0.7rem;
  letter-spacing: 0.18em;
  opacity: 0.92;
  background: rgba(158, 46, 34, 0.05);
}
/* 窄屏刊头：只留中文主题一句，两侧短规则收边，不再让三段硬挤一行 */
@media (max-width: 560px) {
  .masthead {
    gap: 0.6rem;
    margin: 0.7rem auto 0.2rem;
  }
  .masthead .masthead-en { display: none; }
  .masthead-zh {
    font-size: 0.92rem;
    letter-spacing: 0.3em;
    text-indent: 0.3em;
    white-space: nowrap;
  }
  .masthead-rule { width: 14px; }
  .page-title {
    font-size: clamp(1.9rem, 8.5vw, 2.6rem);
    margin: 0.55rem 0 0.4rem;
  }
}
.page-lede {
  text-align: center;
  font-family: var(--sans-sc); font-weight: 300;
  font-size: 0.88rem; letter-spacing: 0.22em; text-indent: 0.22em;
  color: #7A6A48;
  margin: 0.4rem 0 2.1rem;
}
/* text-wrap: pretty 让最后一行不再只剩一两个字（孤字） */
.persona-wrap { position: relative; z-index: 1; margin-top: 1.7rem; text-wrap: pretty; }

/* ---------- 空态：没攒够日记 / 还没生成过 ---------- */
.persona-empty { text-align: center; font-family: var(--serif-sc); font-size: 1.15rem; line-height: 2; color: #454F57; padding: 2.5rem 0; }
.persona-empty b { font-family: var(--serif-sc); color: #2E2A22; font-weight: 600; font-size: 1.5rem; display: block; }
.persona-empty p { font-size: 1rem; color: #8A8172; margin-top: 0.7rem; }
.persona-progress { max-width: 260px; margin: 1.4rem auto 0; }
.persona-progress-track { height: 4px; background: #E6E3DE; border: none; border-radius: 2px; overflow: hidden; }
.persona-progress-fill { height: 100%; background: #1F1C17; border-radius: 2px; transition: width 0.6s ease; }
.persona-progress-text { font-family: var(--sans-sc); font-weight: 300; font-size: 0.8rem; letter-spacing: 0.12em; color: #8A8172; margin-top: 0.5rem; }
.persona-go {
  display: inline-block;
  margin-top: 1.3rem;
  font-family: var(--serif-sc); font-weight: 600;
  font-size: 1.08rem; letter-spacing: 0.1em;
  color: #4A4438;
  border: none;
  padding: 0.3rem 0.5rem;
  text-decoration: none;
  transition: color 0.25s;
}
.persona-go:hover { color: #283E53; }
.persona-loading { font-family: var(--sans-sc); font-weight: 300; color: var(--muted); font-size: 1.1rem; line-height: 2; text-align: center; padding: 2rem 0; }
.persona-retry { color: #5C4250; cursor: pointer; }

/* ---------- 统计四格：数字加大压场，标签小字距拉开 ---------- */
.persona-wrap .persona-stats { border-bottom-color: #E5DFD2; }
.persona-wrap .p-stat b { color: #1F1C17; font-size: 2.55rem; font-weight: 500; letter-spacing: 0.01em; }
/* 四格各一色，与五维共用同一套色系（深一档，大字也读得清） */
.persona-wrap .p-stat.s1 b { color: #A8842A; }
.persona-wrap .p-stat.s2 b { color: #3E7A5E; }
.persona-wrap .p-stat.s3 b { color: #2F6A96; }
.persona-wrap .p-stat.s4 b { color: #8A5578; }
.persona-wrap .p-stat span { color: #9C9386; font-size: 0.74rem; letter-spacing: 0.2em; }


/* ---------- 区块小标题：朱砂大号序号 + 宋体粗标题 + 短发丝线收边 ---------- */
.persona-wrap { counter-reset: persona-sec persona-li; }
.persona-wrap .fb-label::before {
  content: "◆";
  font-size: 0.8rem;
  color: var(--gold);
  margin-right: 0.15rem;
}
.persona-wrap .fb-label {
  position: relative;
  display: flex; align-items: baseline; justify-content: center; gap: 1rem;
  font-family: var(--serif-sc);
  font-size: 1.16rem; font-weight: 700;
  letter-spacing: 0.24em; text-indent: 0.24em;
  color: #2E2A22;
  /* 底部留白要容下绝对定位的英文副题，否则正文贴到副题上 */
  margin: 3.9rem 0 2.5rem;
}
.persona-wrap .fb-label span { position: static; padding: 0; display: inline-block; }
/* 英文副题：中文标题下的西文小注，杂志栏目的味道。
   绝对定位，免得撑高标题行、把两侧细线的基线带跑 */
.persona-wrap .fb-label .fb-en {
  position: absolute; left: 0; right: 0; top: 100%;
  text-align: center;
  font-family: var(--garamond); font-style: italic; font-weight: 400;
  font-size: 0.74rem; letter-spacing: 0.26em; text-indent: 0.26em;
  color: #B3A992; margin-top: 0.42rem;
}
.persona-wrap .fb-label span::before {
  counter-increment: persona-sec;
  content: counter(persona-sec, decimal-leading-zero);
  display: inline-block; vertical-align: baseline;
  font-family: var(--garamond); font-style: italic;
  font-size: 1.72rem; font-weight: 400; letter-spacing: 0; text-indent: 0;
  line-height: 1;
  color: var(--sec-c, #A9842D);
  margin-right: 0.42em;
}
.persona-wrap .fb-label::before,
.persona-wrap .fb-label::after {
  content: "";
  flex: none;
  width: 30px; height: 1px;
  background: var(--sec-c, #C9BFA8);
  opacity: 0.42;
}

/* ---------- 关键词：实心墨底纸白字——全页唯一的实色块，一眼可辨 ---------- */
.persona-wrap .persona-kw { gap: 0.5rem; margin: 2.1rem 0 1rem; }
.persona-wrap .p-kw {
  background: #1F1C17;
  color: #FCFBF7;
  border: 1px solid #1F1C17;
  font-size: 0.82rem;
  letter-spacing: 0.26em; text-indent: 0.26em;
  padding: 0.34rem 0.9rem;
  border-radius: 1px;
}
.persona-wrap .p-kw.k1, .persona-wrap .p-kw.k2, .persona-wrap .p-kw.k3,
.persona-wrap .p-kw.k4, .persona-wrap .p-kw.k5 { background: #1F1C17; border-color: #1F1C17; }
.persona-wrap .p-kw:hover { transform: none; background: #3E382C; border-color: #3E382C; }

/* ---------- 人物对照：杂志人物特写——纸底成块 + 顶部金线 + 大引号 + 中文小字 ---------- */
.persona-wrap .persona-fig {
  position: relative;
  background: #FFFFFF;
  border: none;
  border-top: 1px solid #E8E1D2;
  border-bottom: 1px solid #E8E1D2;
  padding: 1.9rem 1.6rem 1.5rem;
  margin-bottom: 0;
  text-align: center;
}
.persona-wrap .persona-fig::before {
  content: "";
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 30px; height: 2px;
  background: #A9842D; opacity: 0.9;
}
.persona-wrap .persona-fig.fig1, .persona-wrap .persona-fig.fig2 { border-top-color: #E8E1D2; }
/* 人物圆形字标：金细圈素印，给人物卡一个视觉锚点 */
.persona-wrap .persona-fig-badge {
  display: flex;
  align-items: center; justify-content: center;
  flex: none;
  width: 46px; height: 46px;
  background: transparent;
  border: 1px solid #A9842D;
  border-radius: 50%;
  color: #A9842D;
  font-family: var(--garamond); font-style: italic; font-weight: 400;
  font-size: 1.42rem;
  line-height: 1;
}
.persona-wrap .persona-fig-head {
  justify-content: center;
  margin-bottom: 1.1rem;
}
.persona-wrap .persona-fig-name {
  font-family: var(--serif-sc); font-weight: 700;
  font-size: 1.32rem; letter-spacing: 0.06em;
  color: #1F1B16; line-height: 1.5;
}
/* 英文原名：Garamond 斜体小字，给中文名一个西文注脚 */
.persona-wrap .persona-fig-en {
  font-family: var(--garamond); font-style: italic;
  font-size: 1.02rem; letter-spacing: 0.1em;
  color: #A9842D; margin-top: 0.2rem;
}
.persona-wrap .persona-fig-meta { color: #9C9386; font-size: 0.82rem; letter-spacing: 0.08em; margin-top: 0.3rem; }
.persona-wrap .persona-fig-quote {
  font-family: var(--garamond); font-style: italic;
  font-size: 1.68rem; line-height: 1.72;
  color: #2B2720; padding: 0; margin: 0 auto;
  max-width: 22em;
  text-wrap: balance;   /* 两行长度拉近，不再断成「…wealthy / and wise」的孤行 */
}
.persona-wrap .persona-fig-quote::before {
  content: "“";
  display: block;
  font-family: var(--garamond);
  font-size: 4.2rem; line-height: 0.4;
  color: #A9842D; opacity: 0.42;
  margin-bottom: 0.6rem;
}
.persona-wrap .persona-fig-quote-zh {
  font-family: var(--serif-sc); font-weight: 400;
  font-size: 1.04rem; color: #7A7264; letter-spacing: 0.08em;
  margin: 1rem auto 0; padding: 0;
}
/* 「为什么是你」：贴着条目左缘左对齐。曾带 max-width: 32em + margin auto——
   在素材条目的宽度里会被居中缩进，唯独这一段和上下文都不对齐；条目内不该再起第二套栏宽 */
.persona-wrap .persona-fig-why {
  text-align: left;
  font-size: 0.99rem; line-height: 2;
  color: #615A4C; margin: 0.1rem 0 0;
  border-left: 2px solid #E0D9C9;
  padding-left: 0.95rem;
}
/* 条文式卡片：hover 只加深顶线，不再浮起投影 */
.persona-wrap .persona-fig { transition: none; }
.persona-wrap .persona-fig:hover { transform: none; box-shadow: none; border-top-color: #BFB5A0; }

/* ---------- 性格分析：散文体——首字下沉，正文左排 ---------- */
.persona-wrap .persona-para {
  font-size: 1.06rem; line-height: 2.08;
  color: #3E3A30;
}
.persona-wrap .persona-para.lead::first-letter {
  font-family: var(--serif-sc);
  font-size: 2.9em; font-weight: 600;
  line-height: 1;
  float: left;
  margin: 0.04em 0.16em 0 0;
  color: #4A8A6A;
}

/* ---------- 编号清单：斜体序号 + 悬挂缩进（与「建议」明确分家） ---------- */
.persona-wrap .persona-li {
  position: relative;
  font-size: 1.06rem; line-height: 1.9;
  color: #45403A;
  padding-left: 2.5rem;
  margin-bottom: 1.45rem;
}
.persona-wrap .persona-li::before {
  counter-increment: persona-li;
  content: counter(persona-li, decimal-leading-zero);
  position: absolute; left: 0.1rem; top: 0.12em;
  width: auto; height: auto;
  font-family: var(--garamond); font-style: italic;
  font-size: 1.15rem; color: #2E5A78; opacity: 0.9;
  background: none; transform: none;
}
.persona-wrap .persona-li-en {
  font-family: var(--garamond); font-style: italic;
  font-size: 1.14rem; line-height: 1.7;
  color: #322D25;
  text-wrap: balance;
}
.persona-wrap .persona-li-zh {
  font-family: var(--serif-sc);
  font-size: 0.97rem; line-height: 1.9;
  color: #8A8172;
  margin-top: 0.5rem;
  /* 不用 balance：它会为凑行宽把「旧日记」拆成「旧日／记」 */
  text-wrap: pretty;
}
/* 建议：可勾选行动卡——纸底 + 细方框，形式上是「待办」而非「清单」 */
.persona-wrap .persona-li.advice {
  background: #FFFFFF;
  border-left: 2px solid #E0D9C9;
  padding: 1.1rem 1.15rem 1.1rem 3.1rem;
  margin-bottom: 1.1rem;
}
.persona-wrap .persona-li.advice::before {
  counter-increment: none;
  content: "";
  position: absolute; left: 1.25rem; top: 1.28rem;
  width: 15px; height: 15px;
  border: 1.5px solid #9B6B8E;
  border-radius: 2px;
  background: #FFFFFF;
  opacity: 1;
}

/* ---------- 座右铭：细宋 + 大字距，金线收回纸色 ---------- */
.persona-wrap .persona-motto { margin-top: 3.8rem; }
.persona-wrap .persona-motto-line {
  width: 64px;
  background: linear-gradient(90deg, transparent, #D8D1BF, transparent);
}
.persona-wrap .persona-motto-text {
  font-family: var(--serif-sc); font-weight: 500;
  font-size: clamp(1.7rem, 4.2vw, 2.3rem);
  letter-spacing: 0.3em; text-indent: 0.3em;
  color: #1F1C17;
}

/* ---------- 页脚动作：细线框操作（去金色文字） ---------- */
.persona-wrap .persona-foot { border-top-color: #E5DFD2; color: #7A7264; }
.persona-wrap .persona-regen {
  color: #6B6353; font-size: 0.92rem; letter-spacing: 0.16em;
  min-height: 44px; padding: 0 0.4rem;
}
.persona-wrap .persona-regen:hover { color: #1F1C17; }
.persona-wrap .persona-share-btn {
  font-family: var(--serif-sc); font-size: 0.9rem; font-weight: 600;
  letter-spacing: 0.12em; color: #4A4438;
  border: 1px solid #CFC7B2; border-radius: 1px;
  background: #FFFFFF;
  padding: 0 1.1rem; min-height: 44px;
  transition: border-color 0.25s, color 0.25s;
}
.persona-wrap .persona-share-btn:hover { color: #1F1C17; border-color: #1F1C17; }

/* ---------- 状态行：这段话是什么时候说的、之后你又写了多少 ---------- */
.persona-wrap .persona-status {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin: 1.5rem 0 0;
  font-family: var(--sans-sc); font-weight: 300;
  font-size: 0.84rem; letter-spacing: 0.05em;
  color: #9C9386;
}
/* 动作紧跟在说明后面读成一句「上次照于…，要不要重新照？」，不甩到右端去 ——
   1440 视口下两端对齐会在中间空出 700 多像素，两半就散了。
   底下垫一条细线：390px 下这行放不下会折成两行，按钮单独吊在第二行，
   不划线就读不出是可点的动作，只当是句子的一部分。 */
.persona-wrap .persona-status .persona-regen {
  white-space: nowrap; color: #6B6353;
  border-bottom: 1px solid #C9BFA8; padding-bottom: 1px;
}
.persona-wrap .persona-status .persona-regen:hover { color: #1F1C17; border-bottom-color: #1F1C17; }

/* ---------- 待生成：单独成行的实心按钮 ---------- */
/* 不能沿用 .persona-regen —— 那是内联文字式（专给状态行里用的），跟在说明句尾
   会读成句子的一部分，看不出能点。版式与 .persona-share-btn 对齐：
   这页的「要按下去的东西」长一个样。 */
.persona-wrap .persona-cta {
  /* block + width:fit-content 才既单独成行又只包住自己的字（祖先 text-align:center
     管不到 block 的宽度，得靠 margin:auto 居中） */
  display: block; width: fit-content; margin: 1.3rem auto 0;
  font-family: var(--serif-sc); font-size: 0.94rem; font-weight: 600;
  letter-spacing: 0.14em; text-indent: 0.14em;
  color: #4A4438; background: #FFFFFF;
  border: 1px solid #CFC7B2; border-radius: 1px;
  padding: 0.58rem 1.6rem; cursor: pointer;
  transition: border-color 0.25s, color 0.25s;
}
.persona-wrap .persona-cta:hover { color: #1F1C17; border-color: #1F1C17; }
.persona-wrap .persona-hint {
  margin: 1.5rem 0 0;
  font-family: var(--sans-sc); font-weight: 300;
  font-size: 0.94rem; line-height: 1.9;
  color: var(--muted);
  text-align: center;
  padding: 1.2rem 0 0.4rem;
}
/* 失败：一行小字挂在已有内容末尾，不遮挡任何已有内容 */
.persona-wrap .persona-err {
  margin: 1.8rem 0 0; text-align: center;
  font-family: var(--sans-sc); font-weight: 300;
  font-size: 0.88rem; letter-spacing: 0.03em; color: #9E2E22;
}
.persona-wrap .persona-err .persona-retry { border-bottom: 1px solid currentColor; }

/* ---------- 窄屏 ---------- */
@media (max-width: 560px) {
  /* 手机是主场景：正文与标注整体上调一档，别让小字拖后腿 */
  .persona-wrap .fb-label { font-size: 1.1rem; letter-spacing: 0.24em; text-indent: 0.24em; gap: 0.7rem; }
  .persona-wrap .fb-label span::before { font-size: 1.5rem; }
  .persona-wrap .fb-label::before, .persona-wrap .fb-label::after { width: 18px; }
  /* 四格压成一行，别在窄屏挤成 3+1 */
  .persona-wrap .p-stat { flex: 1 1 0; min-width: 0; padding: 0.85rem 0.15rem 1rem; }
  .persona-wrap .p-stat b { font-size: 2.05rem; }
  .persona-wrap .p-stat span { font-size: 0.9rem; letter-spacing: 0.1em; }
  .persona-wrap .p-kw { font-size: 0.9rem; }
  .persona-wrap .persona-fig { padding: 1.5rem 1rem 1.2rem; }
  .persona-wrap .persona-fig-name { font-size: 1.26rem; }
  .persona-wrap .persona-fig-meta { font-size: 0.9rem; }
  .persona-wrap .persona-fig-quote { font-size: 1.45rem; line-height: 1.65; }
  .persona-wrap .persona-fig-quote::before { font-size: 2.2rem; margin-bottom: 0.4rem; }
  .persona-wrap .persona-fig-quote-zh { font-size: 1.06rem; }
  .persona-wrap .persona-fig-why { font-size: 1.06rem; line-height: 1.95; }
  .persona-wrap .persona-para { font-size: 1.13rem; }
  .persona-wrap .persona-para.lead::first-letter { font-size: 2.4em; }
  .persona-wrap .persona-li { font-size: 1.13rem; padding-left: 2.1rem; }
  .persona-wrap .persona-li-en { font-size: 1.2rem; }
  .persona-wrap .persona-li-zh { font-size: 1.05rem; }
  .persona-wrap .persona-li.advice { padding: 0.9rem 0.95rem 0.9rem 2.6rem; }
  .persona-wrap .persona-li.advice::before { left: 1rem; top: 1.15rem; }
  .persona-wrap .persona-regen, .persona-wrap .persona-share-btn, .persona-wrap .persona-cta { font-size: 1rem; }
}