/* topic.css —— 专题系统样式（一套通吃 L1 / L2 / L3）
   ─────────────────────────────────────────────────────────
   归属：① 是**专题自己的**一套样式 —— ⛔ 不直接引用主站 site.css
        ② 与工作流页的样式**互不混用**（两侧各自独立）
   引用：专题的页一律 <link rel="stylesheet" href="/assets/topic.css">
         —— L1 汇总页 · L2 封面页 · L3 内页 **三级引用同一套**
   色板：「快照」自主站 assets/site.css 的 :root（单一源在 site.css · 主站改色须同步这里）
   定义程度（小虾 09-18 定）：
     · L1 / L2 —— **完整体**（基础 + 骨架 + 组件 + 底边导航）
     · L3      —— **现在只定两条：字体 · 背景色**（与 L1/L2 同一份 ⇒ 见下面「基础」）
                 页内细节 ⛔ **现在不定**：历史页维持现状 · 新 L3 等主页改版办完再定
   ───────────────────────────────────────────────────────── */
:root{--bg:#fdf6e3;--card:#f5ead7;--text:#3e2f1e;--accent:#8b4513;--muted:#846b58;--border:#d4c4a8;--teal:#2c7a7b;--teal-bg:rgba(44,122,123,0.07)}

/* ═══════ 基础（三级共用）—— L3 要的那两条就在这里 ═══════ */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;background:var(--bg);color:var(--text);letter-spacing:.03em;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}

/* ═══════ L1 · 专题汇总页 ═══════ */
.ph{text-align:center;padding:1.4rem 0 1.8rem}
.ph h1{font-size:1.7rem;font-weight:800;color:var(--text);margin-bottom:.45rem;letter-spacing:.02em}
.ph p{font-size:.78rem;color:var(--muted);line-height:1.8}

/* 起步三件事（比 · 学 · 试）—— 新手入口 · ⛔ 不是专题（不进登记件）
   高度 = **专题卡的 60%**（.tc 是 56.52% ⇒ 这里 33.91%）
   底图 = assets/starter-bg.webp（一图 · 配方见 _烘起步图.py）· 保护层 veil 保证文字可读
   ⭐ 与下方专题列表之间划一条**显性分割线**（2px 实线 · 同更新流的块间分隔） */
.starter{padding-bottom:1.5rem;border-bottom:2px solid #d8c9a6;margin-bottom:1.5rem}
.starter-hd{font-size:.56rem;letter-spacing:.22em;color:var(--muted);margin:0 0 .55rem .1rem}
.starter-box{position:relative;border-radius:14px;overflow:hidden;isolation:isolate;
  border:1.5px solid var(--border);box-shadow:0 4px 18px rgba(62,47,30,.14)}
.starter-box::before{content:'';display:block;padding-top:33.91%}
.starter-bg{position:absolute;inset:0;background:url('starter-bg.webp') center/cover no-repeat}
.starter-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(253,246,227,.30) 0%,rgba(253,246,227,.44) 100%)}
.starter-row{position:absolute;inset:0;z-index:2;display:flex;gap:.3rem;padding:.7rem}
.starter-row a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;border-radius:10px;background:rgba(255,255,255,.18);
  transition:background .2s,transform .2s}
.starter-row a:hover{background:rgba(255,255,255,.42);transform:translateY(-1px)}
.starter .nm{font-size:1.6rem;font-weight:800;line-height:1;color:#0f6e56;
  text-shadow:0 1px 4px rgba(255,255,255,.9)}
.starter .ds{font-size:.62rem;color:#3e2f1e;line-height:1.4;margin-top:.3rem;
  text-shadow:0 1px 4px rgba(255,255,255,.95)}

.more{text-align:center;font-size:.7rem;color:var(--muted);padding:1.2rem 0;line-height:1.9}
.footer-back{margin-top:1.6rem;text-align:center;padding:1rem 0;border-top:1px solid var(--border)}
.footer-back a{display:inline-flex;align-items:center;gap:.3rem;color:var(--muted);font-size:.72rem;padding:.5rem 1rem;border:1px solid var(--border);border-radius:20px;transition:all .15s;margin:0 .2rem}
.footer-back a:hover{border-color:var(--accent);color:var(--accent)}

/* ═══════ L2 · 专题封面页（四块：封面卡 → 目录 → 说明行 → 底边）═══════ */
.page{max-width:460px;margin:0 auto;padding:1.6rem 1.2rem 3rem}

/* 专题内目录（成员清单）*/
.series-links{background:var(--card);border:1.5px solid var(--border);border-radius:14px;padding:1rem;margin-top:1.2rem}
.series-links .st{font-size:.68rem;font-weight:700;color:var(--teal);letter-spacing:.15em;margin-bottom:.6rem}
.series-links a{display:flex;align-items:center;gap:.5rem;padding:.45rem .4rem;font-size:.72rem;color:var(--text);border-radius:8px;transition:background .15s}
.series-links a:hover{background:rgba(44,122,123,.08)}
.series-links .t{flex:1;font-weight:600}
.series-links .t small{display:block;font-weight:400;color:var(--muted);font-size:.62rem;margin-top:.05rem}
.series-links .go{color:var(--muted);font-size:.66rem}

/* 说明行 */
.method-note{font-size:.7rem;color:var(--muted);text-align:center;line-height:1.8;padding:.8rem;border-top:1px solid var(--border);margin-top:1.2rem}

/* 底边（导航区 · 两个按钮）*/
.footer{text-align:center;margin-top:1.5rem}
.footer a{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;color:var(--muted);padding:.5rem 1rem;border:1px solid var(--border);border-radius:20px;transition:all .15s;margin:0 .2rem}
.footer a:hover{border-color:var(--accent);color:var(--accent)}

/* 专题卡（L1 列表 + 首页 hero 帧 + L2 封面 · 同一套）*/
/* ⚠️ 比例由宽度决定（⛔ 不写死高度）—— 窄屏下同比例缩放，不会变成又窄又高
   （用 padding 技巧而非 aspect-ratio：兼容性零风险） */
.tc{position:relative;margin-bottom:1rem;border-radius:14px;overflow:hidden;isolation:isolate;
    box-shadow:0 4px 18px rgba(62,47,30,.16),inset 0 0 24px rgba(255,252,245,.45);
    border:1.5px solid rgba(255,255,255,.6)}
.tc::before{content:'';display:block;padding-top:56.52%}
.tc-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.tc-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(128deg,rgba(253,246,227,.62) 0%,rgba(253,246,227,.34) 34%,rgba(253,246,227,.10) 56%,rgba(253,246,227,0) 76%)}
.tc-in{position:absolute;inset:0;z-index:2;display:block;padding:1.1rem 1.1rem 0}
.tc-top{display:flex;align-items:flex-start;gap:.7rem}
.tc-logo{width:46px;height:46px;flex-shrink:0;object-fit:contain;filter:drop-shadow(0 1px 3px rgba(255,255,255,.85))}
.tc-head{min-width:0;flex:1}
.tc-kind{font-size:.56rem;letter-spacing:.22em;color:#0b3637;display:block;margin-bottom:.2rem;text-shadow:0 1px 2px rgba(255,255,255,.85)}
.tc-name{font-size:1.3rem;font-weight:800;line-height:1.36;letter-spacing:.01em;color:#241e14;text-shadow:0 1px 3px rgba(255,255,255,.85),0 0 14px rgba(255,252,245,.7)}
.tc-name span{display:block}
.tc-sum{font-size:.8rem;font-weight:400;color:#262019;line-height:1.9;margin-top:.25rem;max-width:17em;text-shadow:0 1px 3px rgba(255,255,255,.9),0 0 12px rgba(255,252,245,.7)}
.tc-line{position:absolute;left:1.1rem;right:1.1rem;bottom:46px;height:1px;background:rgba(74,63,44,.38)}
.tc-meta{position:absolute;left:1.1rem;right:1.1rem;bottom:14px;text-align:right;font-size:.72rem;color:#3e2f1e;letter-spacing:.04em}
.tc-meta .go{color:#9c5f1c;font-weight:700;font-size:.78rem}
/* 封面页里的卡：卡下没有「进入专题」一行 ⇒ 线位下移 */
.page .tc-line{bottom:20px}

/* ═══════ L3 · 专题内页 ═══════
   现在**只定两条**：字体 · 背景色 —— 即上面「基础」那三条（与 L1/L2 同一份）
   页内布局 / 组件：⛔ 现在不定 · 历史页维持现状 · 新 L3 等主页改版办完再定
   用法（等办）：L3 页 <link rel="stylesheet" href="/assets/topic.css"> 即可拿到一致的字与底色 */