/* ============================================================
   教程频道 / 详情页 共享样式 · Ink & Seal
   供 tutorials.html(列表频道) 与 tutorial.html(详情) 复用
   头部/底部由 header.js / footer.js 自带样式，此处不重复
   ============================================================ */
:root{
  --ink-deep:#13160e; --ink:#1f2719; --ink-2:#2a3320; --ink-3:#3a4630;
  --paper:#f4ecd8; --paper-2:#ebe0c4; --cream:#fbf6ea; --cream-2:#f3ead6;
  --sage-50:#f4f6f3;--sage-100:#e6ebe1;--sage-200:#ccd6c4;--sage-300:#a8b89c;
  --sage-400:#859875;--sage-500:#687c5a;--sage-600:#506144;--sage-700:#404d36;--sage-800:#2e3927;--sage-900:#1f2719;
  --seal:#c8392b; --seal-2:#9e2a1e; --seal-soft:#e06a5c;
  --gold:#b89545; --gold-2:#8f6f30;
  --muted:#6b7461;
  --font-display:'Fraunces','Georgia',serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --radius-lg:16px; --radius-xl:20px;
  --shadow-sm:0 4px 14px -8px rgba(31,39,25,.18);
  --shadow-md:0 18px 40px -20px rgba(31,39,25,.32);
}
*{box-sizing:border-box;-webkit-font-smoothing:antialiased}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--paper);
  background-image:
    radial-gradient(at 8% 4%,rgba(168,184,156,0.10) 0,transparent 40%),
    radial-gradient(at 92% 96%,rgba(184,149,69,0.07) 0,transparent 45%);
  min-height:100vh}
a{color:inherit}

/* ---------- 通用容器(全站 1480) ---------- */
.tw-wrap{max-width:1480px;margin:0 auto;padding:0 28px}
@media(max-width:640px){.tw-wrap{padding:0 16px}}

/* ---------- 频道 Hero ---------- */
.tw-hero{position:relative;overflow:hidden;
  background:linear-gradient(160deg,#13160e 0%,#1f2719 55%,#2a3320 100%);color:#fbf6ea}
.tw-hero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(circle at 16% 30%,rgba(232,217,176,0.10) 0,transparent 40%),
    radial-gradient(circle at 86% 10%,rgba(200,57,43,0.12) 0,transparent 42%)}
.tw-hero-in{position:relative;max-width:1480px;margin:0 auto;padding:46px 28px 40px}
.tw-eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(232,217,176,.62);margin-bottom:12px}
.tw-hero h1{margin:0;font-family:var(--font-display);font-weight:600;font-size:38px;line-height:1.12;letter-spacing:-.01em}
.tw-hero h1 .accent{font-style:italic;color:var(--seal-soft)}
.tw-hero p{margin:14px 0 0;max-width:680px;font-size:15px;line-height:1.7;color:rgba(251,246,234,.74)}
@media(max-width:640px){.tw-hero h1{font-size:28px}.tw-hero-in{padding:34px 16px 30px}}

/* ---------- 分类筛选 ---------- */
.tw-filter{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 22px}
.tw-chip{font-family:var(--font-body);font-size:13px;font-weight:600;padding:8px 18px;border-radius:99px;cursor:pointer;
  color:var(--sage-700);background:rgba(255,255,255,.55);border:1px solid rgba(31,39,25,.10);transition:all .2s}
.tw-chip:hover{background:#fff;border-color:rgba(184,149,69,.42);transform:translateY(-1px)}
.tw-chip.on{color:#fbf6ea;background:linear-gradient(135deg,#506144,#2e3927);border-color:transparent;box-shadow:0 8px 18px -10px rgba(46,57,39,.6)}

/* ---------- 文章列表(标准列表行,非卡片堆叠) ---------- */
.tw-list{display:flex;flex-direction:column;margin:0 0 60px;padding:0;list-style:none;
  background:linear-gradient(160deg,#fbf6ea 0%,#f5ecd6 100%);border:1px solid rgba(31,39,25,.09);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);overflow:hidden}
.tw-row{display:flex;gap:22px;align-items:center;padding:22px 26px;cursor:pointer;text-decoration:none;color:inherit;
  border-bottom:1px solid rgba(31,39,25,.08);transition:background .2s}
.tw-row:last-child{border-bottom:0}
.tw-row:hover{background:linear-gradient(135deg,rgba(200,57,43,.05),rgba(184,149,69,.045))}
.tw-thumb{flex:0 0 168px;width:168px;height:104px;border-radius:12px;overflow:hidden;position:relative;
  background:linear-gradient(135deg,#e9e4d6,#d7d0be);border:1px solid rgba(31,39,25,.06)}
.tw-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.tw-thumb .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:34px;opacity:.45}
.tw-main{flex:1;min-width:0}
.tw-cat{display:inline-block;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:3px 10px;border-radius:99px;color:var(--seal-2);background:rgba(200,57,43,.07);border:1px solid rgba(200,57,43,.26);margin-bottom:9px}
.tw-title{font-family:var(--font-display);font-size:19px;font-weight:600;line-height:1.35;color:var(--ink);margin:0 0 7px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tw-row:hover .tw-title{color:var(--seal-2)}
.tw-sum{font-size:13.5px;line-height:1.65;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tw-meta{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:6px;
  font-family:var(--font-mono);font-size:11.5px;color:var(--gold-2);white-space:nowrap;align-self:flex-start;padding-top:2px}
.tw-meta .arrow{margin-top:auto;font-size:16px;color:var(--sage-400);transition:transform .2s,color .2s}
.tw-row:hover .tw-meta .arrow{transform:translateX(3px);color:var(--seal)}
.tw-empty{padding:60px 20px;text-align:center;color:var(--muted);font-size:14px;font-family:var(--font-mono)}
@media(max-width:720px){
  .tw-row{gap:14px;padding:16px 16px}
  .tw-thumb{flex-basis:96px;width:96px;height:70px}
  .tw-title{font-size:16px}
  .tw-sum{display:none}
  .tw-meta{display:none}
}

/* ---------- 详情页布局(article + sidebar,1480) ---------- */
.tw-detail{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:40px;padding:34px 0 70px;align-items:start}
.tw-article{min-width:0;background:linear-gradient(160deg,#fbf6ea 0%,#f6eeda 100%);border:1px solid rgba(31,39,25,.09);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);padding:40px 48px 52px}
.tw-crumb{font-family:var(--font-mono);font-size:12px;color:var(--muted);margin-bottom:20px}
.tw-crumb a{color:var(--sage-600);text-decoration:none}
.tw-crumb a:hover{color:var(--seal-2)}
.tw-crumb .sep{margin:0 8px;opacity:.5}
.tw-art-cat{display:inline-block;font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 12px;border-radius:99px;color:#fff;background:linear-gradient(135deg,#6b8e6b,#506144);margin-bottom:14px}
.tw-art-title{font-family:var(--font-display);font-weight:600;font-size:32px;line-height:1.22;letter-spacing:-.01em;color:var(--ink);margin:0 0 16px}
.tw-art-meta{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--font-mono);font-size:12.5px;color:var(--gold-2);
  padding-bottom:22px;margin-bottom:26px;border-bottom:1px solid rgba(31,39,25,.12)}
.tw-cover{width:100%;border-radius:14px;margin:0 0 26px;display:block}

/* 正文 prose(渲染 CKEditor HTML) */
.tw-body{color:#33402f;font-size:16px;line-height:1.9}
.tw-body>*:first-child{margin-top:0}
.tw-body h1,.tw-body h2,.tw-body h3,.tw-body h4{font-family:var(--font-display);color:var(--ink);line-height:1.3;margin:1.5em 0 .55em;font-weight:600}
.tw-body h1{font-size:26px}.tw-body h2{font-size:23px;padding-bottom:.3em;border-bottom:1px solid rgba(31,39,25,.1)}
.tw-body h3{font-size:20px}.tw-body h4{font-size:17px}
.tw-body p{margin:0 0 1.15em}
.tw-body a{color:var(--seal-2);text-decoration:underline;text-underline-offset:2px}
.tw-body ul,.tw-body ol{margin:0 0 1.15em;padding-left:1.5em}
.tw-body li{margin:.4em 0}
.tw-body img{max-width:100%;height:auto;border-radius:12px;margin:.6em 0;box-shadow:var(--shadow-sm)}
.tw-body blockquote{margin:1.3em 0;padding:.6em 1.2em;border-left:3px solid var(--seal);background:rgba(200,57,43,.05);
  border-radius:0 10px 10px 0;color:var(--sage-700);font-style:italic}
.tw-body pre{background:#1f2719;color:#eae2cf;padding:16px 18px;border-radius:12px;overflow:auto;font-family:var(--font-mono);font-size:13.5px;line-height:1.6;margin:1.2em 0}
.tw-body code{font-family:var(--font-mono);font-size:.9em;background:rgba(31,39,25,.07);padding:.15em .4em;border-radius:5px}
.tw-body pre code{background:none;padding:0}
.tw-body table{width:100%;border-collapse:collapse;margin:1.3em 0;font-size:14.5px}
.tw-body th,.tw-body td{border:1px solid rgba(31,39,25,.14);padding:9px 12px;text-align:left}
.tw-body th{background:var(--sage-100);font-weight:600}
.tw-body hr{border:0;border-top:1px solid rgba(31,39,25,.12);margin:1.8em 0}

/* 侧栏 */
.tw-side{position:sticky;top:22px;display:flex;flex-direction:column;gap:18px}
.tw-card{background:linear-gradient(160deg,#fbf6ea 0%,#f5ecd6 100%);border:1px solid rgba(31,39,25,.09);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:20px 22px}
.tw-card-h{font-family:var(--font-display);font-style:italic;font-size:16px;font-weight:600;color:var(--ink);
  margin:0 0 14px;padding-bottom:11px;border-bottom:1px solid rgba(31,39,25,.08);position:relative}
.tw-card-h::after{content:'';position:absolute;left:0;bottom:-1px;width:30px;height:2px;background:var(--seal);border-radius:99px}
.tw-side-item{display:block;text-decoration:none;color:inherit;padding:11px 0;border-bottom:1px solid rgba(31,39,25,.07);transition:all .18s}
.tw-side-item:last-child{border-bottom:0}
.tw-side-item:hover{margin:0 -8px;padding:11px 8px;background:rgba(200,57,43,.05);border-radius:8px}
.tw-side-item .st{font-family:var(--font-display);font-size:14px;font-weight:600;line-height:1.4;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tw-side-item:hover .st{color:var(--seal-2)}
.tw-side-item .sm{font-family:var(--font-mono);font-size:10.5px;color:var(--gold-2);margin-top:4px}
.tw-back{display:inline-flex;align-items:center;gap:8px;justify-content:center;width:100%;padding:11px;border-radius:11px;
  font-size:13.5px;font-weight:600;text-decoration:none;color:#fbf6ea;
  background:linear-gradient(135deg,#2e3927,#506144);transition:transform .18s,box-shadow .18s}
.tw-back:hover{transform:translateY(-1px);box-shadow:0 10px 22px -10px rgba(46,57,39,.6)}
.tw-loading{color:var(--muted);font-family:var(--font-mono);font-size:13px;padding:20px 0}

@media(max-width:960px){
  .tw-detail{grid-template-columns:1fr;gap:26px}
  .tw-side{position:static;flex-direction:row;flex-wrap:wrap}
  .tw-side .tw-card{flex:1;min-width:240px}
  .tw-article{padding:28px 22px 36px}
  .tw-art-title{font-size:26px}
}