/* ===========================================================
   活字 LIVETYPE · 同学手册 / 课堂讲义
   复用 styles.css 的设计令牌（ElevenLabs 迁移版）
   仅补充手册专用组件：品牌活字墙、步骤、路线、评分、清单、FAQ
   =========================================================== */

/* ---------- Hero：活字品牌 ---------- */
.hb-hero{
  position:relative;overflow:hidden;
  background:var(--grad-hero),var(--bg);
  border-bottom:1px solid var(--line);
  padding-block:clamp(56px,11vw,120px) clamp(40px,7vw,72px);
}
.hb-hero .wrap{position:relative;z-index:2;max-width:920px}
.hb-codename{
  font-family:var(--display);font-weight:600;
  font-size:.8125rem;letter-spacing:2px;text-transform:uppercase;
  color:var(--ink-soft);
  display:inline-flex;align-items:center;gap:8px;
  background:var(--bg-soft);border:1px solid var(--line-2);
  padding:7px 14px;border-radius:var(--r-pill);margin:0 0 22px;
}

/* 活字墙 —— 像一排活字印刷的字模 */
.typewall{display:flex;flex-wrap:wrap;gap:clamp(8px,2vw,14px);margin:0 0 26px}
.typewall span{
  font-family:var(--display);font-weight:700;
  width:clamp(56px,16vw,92px);height:clamp(56px,16vw,92px);
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(1.8rem,7vw,3rem);
  color:#fff;background:#221f1c;
  border-radius:var(--r-md);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.35),var(--sh-2);
  transition:transform var(--t-small) var(--ease);
}
.typewall span:nth-child(2){background:#3a342d}
.typewall span:nth-child(3){background:#5b5248}
.typewall span:nth-child(4){background:#7a6f60}
.typewall span:hover{transform:translateY(-4px)}

.hb-hero h1{
  font-family:var(--display);font-weight:500;
  font-size:clamp(2.1rem,6.5vw,3.1rem);line-height:1.06;letter-spacing:-1px;
  margin:0 0 18px;
}
.hb-hero .slogan{
  font-family:var(--display);font-weight:600;
  background:linear-gradient(100deg,#1a1a1a,#6b6258);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hb-hero .lede{max-width:var(--paragraph);font-size:clamp(1.0625rem,2.4vw,1.25rem);color:var(--ink-soft);margin:0 0 26px}

/* ---------- 关键信息条 ---------- */
.factbar{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line-2);
  border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;
}
.factbar div{background:var(--bg);padding:16px 18px}
.factbar dt{font-size:.75rem;letter-spacing:.4px;text-transform:uppercase;color:var(--ink-soft);margin:0 0 4px}
.factbar dd{margin:0;font-family:var(--display);font-weight:600;font-size:1.0625rem;letter-spacing:-.2px}

/* ---------- 名字由来卡 ---------- */
.namecard{
  background:var(--grad-warm);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(22px,4vw,34px);box-shadow:var(--sh-1);
}
.namecard h3{margin-top:0}
.namecard p{color:var(--ink-soft);margin:0 0 12px;max-width:var(--paragraph)}
.namecard p:last-child{margin-bottom:0}
.namecard b{color:var(--ink)}

/* ---------- 步骤 / 你要做的事 ---------- */
.steps{counter-reset:s;display:grid;gap:16px}
.step{
  position:relative;background:var(--bg-soft);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px 22px 22px 70px;box-shadow:var(--sh-1);
}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:20px;top:20px;
  width:34px;height:34px;border-radius:var(--r-pill);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:600;font-size:1rem;
  color:#fff;background:var(--ink);
}
.step h3{margin:0 0 6px;font-size:1.0625rem}
.step p{margin:0;color:var(--ink-soft);font-size:.9688rem}

/* ---------- 两周路线 ---------- */
.weekmap{display:grid;gap:20px;grid-template-columns:1fr}
.week{
  background:var(--bg-soft);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(22px,4vw,30px);box-shadow:var(--sh-1);
}
.week.w2{background:var(--grad-warm)}
.week .wk-tag{
  display:inline-block;font-family:var(--display);font-weight:600;font-size:.8125rem;
  letter-spacing:.3px;color:#fff;background:var(--ink);
  padding:5px 12px;border-radius:var(--r-pill);margin-bottom:14px;
}
.week.w2 .wk-tag{background:#5b5248}
.week h3{margin:0 0 4px}
.week .wk-sub{color:var(--ink-soft);margin:0 0 16px;font-size:.9688rem}
.daylist{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.daylist li{
  display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline;
  padding:10px 0;border-top:1px solid var(--line);color:var(--ink-soft);font-size:.9375rem;
}
.daylist li .d{font-family:var(--display);font-weight:600;color:var(--ink);white-space:nowrap}

/* ---------- 评分 rubric ---------- */
.rubric{display:grid;gap:16px;grid-template-columns:1fr}
.crit{
  background:var(--bg-soft);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:22px;box-shadow:var(--sh-1);
}
.crit .pct{font-family:var(--display);font-weight:700;font-size:1.6rem;letter-spacing:-1px;color:var(--ink)}
.crit h3{margin:6px 0 6px;font-size:1.0625rem}
.crit p{margin:0;color:var(--ink-soft);font-size:.9375rem}

/* ---------- 自检清单 ---------- */
.checklist{max-width:var(--paragraph);margin:0;padding:0;list-style:none;display:grid;gap:12px}
.checklist li{
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  background:var(--bg-soft);border:1px solid var(--line);
  border-radius:var(--r-md);padding:16px 18px;color:var(--ink-soft);line-height:1.6;
}
.checklist li b{color:var(--ink)}
.checklist .box{
  width:24px;height:24px;border-radius:6px;border:2px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;color:var(--ink);font-size:.95rem;flex:none;margin-top:1px;
}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:12px;max-width:840px}
.faq details{
  background:var(--bg-soft);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;
}
.faq summary{
  list-style:none;cursor:pointer;
  padding:16px 52px 16px 20px;position:relative;
  font-family:var(--display);font-weight:600;font-size:1rem;color:var(--ink);
  min-height:44px;display:flex;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);
  font-family:var(--display);font-weight:500;font-size:1.4rem;color:var(--ink-soft);
  transition:transform var(--t-small) var(--ease);
}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq .ans{padding:0 20px 18px;color:var(--ink-soft);font-size:.9688rem;line-height:1.65}
.faq .ans a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}

/* ---------- CTA ---------- */
.cta{
  background:var(--grad-cool);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(28px,5vw,44px);text-align:center;box-shadow:var(--sh-1);
}
.cta h2{margin:0 0 10px}
.cta p{max-width:560px;margin:0 auto 22px;color:var(--ink-soft)}
.btnrow{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.btn-ghost{
  font-family:var(--sans);font-weight:500;font-size:1rem;
  color:var(--ink);background:var(--bg);border:1px solid var(--line-2);
  border-radius:var(--r-pill);padding:13px 26px;min-height:48px;
  display:inline-flex;align-items:center;cursor:pointer;
  transition:transform var(--t-micro) var(--ease),box-shadow var(--t-micro) var(--ease);
}
.btn-ghost:hover{transform:translateY(-1px);box-shadow:var(--sh-2)}

/* ---------- 响应式 ---------- */
@media (min-width:720px){
  .factbar{grid-template-columns:repeat(4,1fr)}
  .weekmap{grid-template-columns:1fr 1fr}
  .rubric{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1024px){
  .rubric{grid-template-columns:repeat(4,1fr)}
}