/* ===========================================================
   活字编程 · 复活我们的图书馆
   架构页 architecture.css —— 依赖 styles.css 的基础 token
   只新增本页特有组件：三层栈 / 引擎库 / 作品矩阵 / 训练营填格
   =========================================================== */

/* —— 页内强调色（仅本页，低饱和）—— */
:root{
  --c-method:#9a5b2e;   /* 复活方法 · 暖褐 */
  --c-form:#2e6b7a;     /* 交互形态 · 青蓝 */
  --c-case:#7a5a2e;
  --tint-method:#F3ECE3;
  --tint-form:#E8EEF0;
}

/* ============ HERO ============ */
.ar-hero{
  background:var(--grad-hero);
  border-bottom:1px solid var(--line);
  padding:clamp(48px,9vw,104px) 0 clamp(36px,6vw,64px);
}
.ar-codename{
  font-family:var(--display);
  font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 18px;
}
.ar-hero h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(2rem,6vw,3.6rem);line-height:1.08;
  letter-spacing:-.02em;margin:0 0 22px;max-width:16ch;
}
.ar-hero h1 span{
  background:linear-gradient(120deg,var(--c-method),var(--c-form));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ar-hero .lede{
  font-size:clamp(1.05rem,2.4vw,1.3rem);color:var(--ink-soft);
  max-width:62ch;margin:0 0 26px;line-height:1.6;
}
.eqbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font-family:var(--display);font-weight:600;
}
.eqbar .t{
  padding:8px 14px;border-radius:var(--r-pill);font-size:.92rem;
  border:1px solid var(--line-2);background:var(--bg-soft);
}
.eqbar .t.m{background:var(--tint-method);border-color:#e3d3c1}
.eqbar .t.f{background:var(--tint-form);border-color:#cfe0e4}
.eqbar .op{color:var(--ink-soft);font-size:1.1rem}

/* ============ 通用 section 间距 ============ */
.ar-sec{padding:clamp(40px,7vw,84px) 0;border-bottom:1px solid var(--line)}
.ar-sec .eyebrow{
  font-family:var(--display);font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 12px;
}

/* ============ 三层栈 ============ */
.stack{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.layer{
  position:relative;border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:clamp(18px,3vw,26px);background:var(--bg-soft);
  display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,3vw,26px);
  align-items:center;
}
.layer .badge{
  width:44px;height:44px;border-radius:var(--r-pill);
  display:grid;place-items:center;font-family:var(--display);font-weight:700;
  font-size:1.2rem;color:#fff;flex:none;
}
.layer.a{background:var(--grad-cool)}
.layer.a .badge{background:var(--c-form)}
.layer.b{background:var(--bg-soft)}
.layer.b .badge{background:var(--c-case)}
.layer.c{background:var(--grad-warm)}
.layer.c .badge{background:var(--c-method)}
.layer h3{font-family:var(--display);font-size:1.15rem;margin:0 0 4px}
.layer .role{font-size:.82rem;color:var(--ink-soft);font-weight:600;letter-spacing:.02em}
.layer p{margin:8px 0 0;font-size:.98rem;color:var(--ink-soft)}
.layer .sub{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.layer .sub span{
  font-size:.82rem;padding:5px 11px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.6);border:1px solid var(--line-2);
}
.stack .flow-note{
  text-align:center;font-size:.85rem;color:var(--ink-soft);
  font-family:var(--display);letter-spacing:.04em;margin:0;
}

/* ============ 引擎库 ============ */
.lib{display:grid;gap:18px;grid-template-columns:1fr;margin-top:10px}
.libcard{
  border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:clamp(18px,3vw,24px);background:var(--card,#fff);
  transition:box-shadow var(--t-small) var(--ease),transform var(--t-small) var(--ease);
}
.libcard:hover{box-shadow:var(--sh-2),var(--sh-ring);transform:translateY(-2px)}
.libcard .num{
  font-family:var(--display);font-weight:700;font-size:.78rem;
  letter-spacing:.1em;padding:4px 10px;border-radius:var(--r-pill);display:inline-block;
}
.lib.method .libcard{background:linear-gradient(180deg,#fff, #fdfaf6)}
.lib.method .num{background:var(--tint-method);color:var(--c-method)}
.lib.form .libcard{background:linear-gradient(180deg,#fff,#f7fafb)}
.lib.form .num{background:var(--tint-form);color:var(--c-form)}
.libcard h3{font-family:var(--display);font-size:1.12rem;margin:12px 0 4px}
.libcard .gloss{font-size:.88rem;color:var(--ink-soft);margin:0 0 12px;font-style:italic}
.libcard ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:7px}
.libcard ul li{
  font-size:.82rem;padding:5px 11px;border-radius:var(--r-pill);
  background:var(--bg-quiet);border:1px solid var(--line-2);white-space:nowrap;
}

/* ============ 作品矩阵 ============ */
.mx-filter{display:flex;flex-wrap:wrap;gap:9px;margin:6px 0 22px}
.mx-filter .fchip{
  font-size:.85rem;font-family:var(--display);font-weight:600;
  padding:7px 14px;border-radius:var(--r-pill);cursor:pointer;
  border:1px solid var(--line-2);background:var(--bg-soft);color:var(--ink);
  transition:all var(--t-micro) var(--ease);user-select:none;
}
.mx-filter .fchip:hover{border-color:var(--c-method)}
.mx-filter .fchip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.matrix{display:grid;gap:16px;grid-template-columns:1fr}
.mx-cell{
  border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:20px;background:var(--bg-soft);
  transition:opacity var(--t-small) var(--ease),box-shadow var(--t-small) var(--ease),transform var(--t-small) var(--ease);
}
.mx-cell:hover{box-shadow:var(--sh-2),var(--sh-ring);transform:translateY(-2px)}
.mx-cell.dim{opacity:.28}
.mx-cell .combo{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 12px}
.mx-cell .combo span{
  font-size:.76rem;font-weight:600;padding:4px 10px;border-radius:var(--r-pill);
}
.mx-cell .combo .m{background:var(--tint-method);color:var(--c-method)}
.mx-cell .combo .f{background:var(--tint-form);color:var(--c-form)}
.mx-cell h3{font-family:var(--display);font-size:1.08rem;margin:0 0 6px;line-height:1.25}
.mx-cell p{margin:0;font-size:.92rem;color:var(--ink-soft)}
.mx-cell .res{
  display:inline-block;margin-top:12px;font-size:.78rem;color:var(--ink-soft);
  padding-top:10px;border-top:1px dashed var(--line-2);width:100%;
}
.mx-empty{
  text-align:center;color:var(--ink-soft);font-size:.95rem;
  padding:30px;display:none;
}

/* ============ 训练营填格 ============ */
.camp{display:grid;gap:18px;grid-template-columns:1fr;margin-top:8px}
.weekcard{
  border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;
  background:var(--bg-soft);
}
.weekcard .top{
  padding:18px 22px;border-bottom:1px solid var(--line-2);
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
}
.weekcard.w1 .top{background:var(--grad-warm)}
.weekcard.w2 .top{background:var(--grad-cool)}
.weekcard .wtag{font-family:var(--display);font-weight:700;font-size:1.05rem}
.weekcard .wsub{font-size:.85rem;color:var(--ink-soft)}
.weekcard .body{padding:18px 22px}
.weekcard .body p{margin:0 0 12px;font-size:.95rem;color:var(--ink-soft)}
.weekcard .mods{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.weekcard .mods span{
  font-size:.82rem;padding:6px 12px;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--line-2);
}

/* ============ 平台沉淀 ============ */
.pipe{display:grid;gap:14px;grid-template-columns:1fr;margin-top:8px;counter-reset:step}
.pstep{
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:18px 20px;background:var(--bg-soft);
}
.pstep::before{
  counter-increment:step;content:counter(step);
  width:34px;height:34px;border-radius:var(--r-pill);background:var(--c-form);
  color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:700;
}
.pstep h3{font-family:var(--display);font-size:1.05rem;margin:0 0 4px}
.pstep p{margin:0;font-size:.93rem;color:var(--ink-soft)}

/* ============ 全球案例参照 ============ */
.cases-ref{display:grid;gap:16px;grid-template-columns:1fr;margin-top:10px}
.refcard{
  display:block;text-decoration:none;color:inherit;
  border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:clamp(18px,3vw,24px);background:linear-gradient(180deg,#fff,#fbfaf7);
  transition:box-shadow var(--t-small) var(--ease),transform var(--t-small) var(--ease),border-color var(--t-small) var(--ease);
}
.refcard:hover{box-shadow:var(--sh-2),var(--sh-ring);transform:translateY(-2px);border-color:var(--c-case)}
.refcard .rtop{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;align-items:baseline}
.refcard .org{font-family:var(--display);font-weight:600;font-size:.82rem;color:var(--c-case)}
.refcard .yr{font-size:.74rem;color:var(--ink-soft);letter-spacing:.03em}
.refcard h3{font-family:var(--display);font-size:1.1rem;margin:10px 0 6px;line-height:1.25}
.refcard p{margin:0 0 12px;font-size:.92rem;color:var(--ink-soft)}
.refcard .combo{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 12px}
.refcard .combo span{font-size:.76rem;font-weight:600;padding:4px 10px;border-radius:var(--r-pill)}
.refcard .combo .m{background:var(--tint-method);color:var(--c-method)}
.refcard .cite{
  display:inline-block;font-size:.76rem;color:var(--ink-soft);
  padding-top:10px;border-top:1px dashed var(--line-2);width:100%;
}
.ref-foot{
  margin:22px 0 0;font-size:.92rem;color:var(--ink-soft);
  padding:16px 18px;border-left:3px solid var(--c-method);background:var(--bg-soft);
  border-radius:0 var(--r-md,10px) var(--r-md,10px) 0;
}

/* ============ CTA ============ */
.ar-cta{padding:clamp(44px,8vw,88px) 0}
.ar-cta .box{
  background:var(--grad-warm);border:1px solid var(--line-2);
  border-radius:var(--r-lg);padding:clamp(28px,5vw,52px);text-align:center;
}
.ar-cta h2{margin:0 0 12px}
.ar-cta p{max-width:54ch;margin:0 auto 22px;color:var(--ink-soft)}
.btnrow{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ============ 响应式 ============ */
@media (min-width:680px){
  .lib{grid-template-columns:repeat(2,1fr)}
  .matrix{grid-template-columns:repeat(2,1fr)}
  .camp{grid-template-columns:repeat(2,1fr)}
  .cases-ref{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1000px){
  .lib.method{grid-template-columns:repeat(3,1fr)}
  .lib.form{grid-template-columns:repeat(3,1fr)}
  .matrix{grid-template-columns:repeat(3,1fr)}
  .cases-ref{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:520px){
  .layer{grid-template-columns:1fr}
  .layer .badge{width:38px;height:38px;font-size:1rem}
}