/* ============================================
   陶记 · 个人站  v1
   文字优先 · 信息密度高 · 手机自适应
   ============================================ */
*{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#eef0f2;
  --card:#ffffff;
  --ink:#14181c;
  --ink-2:#3c454b;
  --ink-3:#5d686f;
  --ink-4:#8b959c;
  --ink-5:#a8b1b7;
  --line:#e5e8ea;
  --line-2:#f0f2f4;
  --accent:#2f7c8f;
  --accent-2:#eaf2f4;
  --warm:#b4532a;
  --warm-2:#fbf1ea;
  --r:16px;
  --shadow:0 1px 2px rgba(20,24,28,.04);
  --shadow-h:0 4px 16px rgba(20,24,28,.09);
}

html{scroll-behavior:smooth}
body{
  font-family:-apple-system,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased;
  display:flex;min-height:100vh;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ---------- 侧栏 ---------- */
aside{
  width:236px;flex:none;padding:30px 24px;
  position:sticky;top:0;height:100vh;overflow-y:auto;
  background:#fff;border-right:1px solid var(--line);
  display:flex;flex-direction:column;
}
.side-top{display:flex;justify-content:space-between;align-items:flex-start}
.ava{width:60px;height:60px;border-radius:50%;overflow:hidden;flex:none;
  background:linear-gradient(140deg,#8fa3b0,#3f5560);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:20px;font-weight:600;letter-spacing:.06em}
.name{font-size:16.5px;font-weight:700;margin-top:16px;letter-spacing:.02em}
.name small{display:block;font-size:10px;font-weight:400;color:var(--ink-4);
  letter-spacing:.14em;margin-top:5px}
.bio{font-size:11.5px;color:var(--ink-4);line-height:1.65;margin-top:10px}
.side-nav{margin-top:22px}
.side-nav a{display:block;font-size:13.5px;color:var(--ink-3);padding:8.5px 0;
  letter-spacing:.03em;transition:color .15s}
.side-nav a:hover{color:var(--ink)}
.side-nav a.on{color:var(--ink);font-weight:600}
.side-nav a.on::before{content:"—";margin-right:8px;color:var(--accent)}
.side-nav .sub{font-size:11.5px;padding-left:16px;color:var(--ink-4)}
.side-foot{margin-top:auto;padding-top:20px;border-top:1px solid var(--line-2)}
.side-foot h5{font-size:10px;letter-spacing:.16em;color:var(--ink-5);margin-bottom:8px}
.side-foot a{display:block;font-size:11.5px;color:var(--ink-3);padding:4px 0}
.side-foot a:hover{color:var(--accent)}

/* ---------- 主区 ---------- */
.wrap{
  flex:1;min-width:0;padding:28px 32px 64px;
  display:grid;grid-template-columns:repeat(6,1fr);
  gap:16px;align-content:start;
}
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:20px 22px}
.card.pad0{padding:0;overflow:hidden}

/* 跨列工具类（⛔ 不用内联样式，否则手机端媒体查询赢不过它） */
.s1{grid-column:span 1}.s2{grid-column:span 2}.s3{grid-column:span 3}
.s4{grid-column:span 4}.s5{grid-column:span 5}.s6{grid-column:span 6}

/* ---------- 页头 ---------- */
.pagehead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.pagehead h1{font-size:21px;letter-spacing:.01em}
.pagehead p{font-size:12px;color:var(--ink-4);letter-spacing:.02em}

/* ---------- 首页 hero ---------- */
.hero h2{font-size:19px;line-height:1.5;letter-spacing:.01em;font-weight:700}
.hero p{font-size:13px;color:var(--ink-3);line-height:1.85;margin-top:12px}
.hero .meta{font-size:11.5px;color:var(--ink-4);margin-top:14px;
  padding-top:14px;border-top:1px solid var(--line-2);line-height:1.8}

/* ---------- 栏目块 ---------- */
.blk h3{font-size:13px;letter-spacing:.02em;display:flex;align-items:center;gap:8px}
.blk h3 .n{font-size:10.5px;color:var(--ink-5);font-weight:400;letter-spacing:.08em}
.blk .more{font-size:11px;color:var(--accent);margin-top:12px;display:inline-block}
.blk .more:hover{text-decoration:underline}

/* ---------- 新闻条目（文字优先） ---------- */
.item{display:block;padding:11px 0;border-bottom:1px solid var(--line-2)}
.item:last-child{border-bottom:0;padding-bottom:2px}
.item:hover .it-t{color:var(--accent)}
.it-t{font-size:13.5px;font-weight:600;line-height:1.5;transition:color .15s}
.it-m{font-size:10.5px;color:var(--ink-5);margin-top:3px;letter-spacing:.02em}
.it-s{font-size:12px;color:var(--ink-3);line-height:1.7;margin-top:5px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.tag{font-size:10.5px;color:var(--ink-3);background:var(--line-2);
  border-radius:4px;padding:2px 7px;letter-spacing:.02em}
.tag.hot{background:var(--warm-2);color:var(--warm)}

/* ---------- 筛选条（纯文字） ---------- */
.filters{display:flex;flex-wrap:wrap;gap:4px}
.filters button{
  font-family:inherit;font-size:12px;color:var(--ink-3);letter-spacing:.02em;
  background:transparent;border:1px solid var(--line);border-radius:999px;
  padding:5px 13px;cursor:pointer;transition:all .15s;
}
.filters button:hover{border-color:var(--ink-4);color:var(--ink)}
.filters button.on{background:var(--ink);border-color:var(--ink);color:#fff}

/* 分段（国内/国际） */
.seg{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.seg button{font-family:inherit;font-size:12.5px;padding:6px 18px;border:0;
  background:transparent;color:var(--ink-3);cursor:pointer;letter-spacing:.04em}
.seg button.on{background:var(--ink);color:#fff}

/* ---------- 分区标题 ---------- */
.sec-h{font-size:12px;letter-spacing:.06em;color:var(--ink-4);
  padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:4px;
  display:flex;justify-content:space-between;align-items:baseline}
.sec-h b{color:var(--ink);font-size:13.5px;font-weight:600;letter-spacing:.02em}

/* ---------- 创作卡 ---------- */
.work{border:1px solid var(--line);border-radius:12px;padding:14px 16px;
  transition:box-shadow .15s,border-color .15s;display:block;height:100%}
.work:hover{border-color:#d6dce0;box-shadow:var(--shadow-h)}
.work .k{font-size:10.5px;letter-spacing:.1em;color:var(--accent)}
.work .t{font-size:14px;font-weight:600;margin-top:6px;line-height:1.45}
.work .d{font-size:12px;color:var(--ink-3);line-height:1.7;margin-top:7px}
.work .m{font-size:10.5px;color:var(--ink-5);margin-top:9px}

/* ---------- 话题 ---------- */
.topic{border-left:3px solid var(--accent);padding:2px 0 2px 14px}
.topic.q{border-left-color:var(--ink-5)}
.topic .t{font-size:14px;font-weight:600;line-height:1.5}
.topic .d{font-size:12px;color:var(--ink-3);line-height:1.75;margin-top:6px}
.topic .m{font-size:10.5px;color:var(--ink-5);margin-top:7px}

/* ---------- 提示 ---------- */
.note{font-size:11.5px;color:var(--ink-4);line-height:1.75}
.note b{color:var(--ink-3);font-weight:600}
footer{grid-column:span 6;font-size:11px;color:var(--ink-5);
  text-align:center;padding:18px 0 0;line-height:1.8}

/* ============================================
   手机自适应 —— 用通配覆盖，避免漏元素
   ⛔ 一律 !important + min-width:0（Grid 项默认 min-width:auto 会被内容撑宽）
   ============================================ */
@media (max-width:900px){
  body{display:block}
  aside{width:auto;height:auto;position:static;border-right:0;
    border-bottom:1px solid var(--line);padding:20px 18px}
  .side-nav{display:flex;flex-wrap:wrap;gap:2px 18px;margin-top:16px}
  .side-nav a{padding:6px 0}
  .side-nav a.on::before{content:"";margin:0}
  .side-nav .sub{display:none}
  .side-foot{margin-top:14px;padding-top:14px;display:flex;
    flex-wrap:wrap;gap:4px 16px;align-items:center}
  .side-foot h5{margin:0}
  .side-foot a{padding:3px 0}
  .wrap{grid-template-columns:repeat(2,1fr) !important;padding:20px 18px 48px}
  .wrap > *{grid-column:span 2 !important;min-width:0}
  footer{grid-column:span 2 !important}
}
@media (max-width:560px){
  .wrap{grid-template-columns:1fr !important;padding:16px 14px 40px}
  .wrap > *{grid-column:span 1 !important;min-width:0}
  footer{grid-column:span 1 !important}
  .card{padding:16px 16px;border-radius:14px}
  .pagehead h1{font-size:18px}
  .hero h2{font-size:16.5px}
  .seg{width:100%}
  .seg button{flex:1;padding:9px 0}
  .filters button{padding:6px 12px}
}

/* ---------- 条目「查看详情」 ---------- */
.it-more{font-size:10.5px;color:var(--accent);margin-top:6px;letter-spacing:.02em;opacity:.85}
.item:hover .it-more{opacity:1}

/* ---------- 详情页 ---------- */
.crumb{font-size:11.5px;color:var(--ink-4);margin-bottom:14px}
.crumb a{color:var(--ink-3);text-decoration:none}
.crumb a:hover{color:var(--accent)}
.crumb span{margin:0 6px;color:var(--ink-5)}
.detail{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 28px;box-shadow:var(--shadow)}
.d-meta{font-size:11px;color:var(--accent);letter-spacing:.06em}
.d-title{font-size:21px;line-height:1.45;margin:10px 0 10px;font-weight:700}
.d-src{font-size:11.5px;color:var(--ink-4);padding-bottom:14px;border-bottom:1px solid var(--line-2)}
.d-body{margin-top:16px}
.d-body p{font-size:14.5px;line-height:1.95;color:var(--ink-2);margin-bottom:13px}
.d-body p:last-child{margin-bottom:0}
.d-link{margin-top:18px}
.d-link a{display:inline-block;font-size:12.5px;color:#fff;background:var(--accent);
  padding:8px 16px;border-radius:8px;text-decoration:none}
.d-link a:hover{opacity:.9}
.d-note{font-size:11.5px;color:var(--ink-5);margin-top:16px}
.d-back{margin-top:22px;padding-top:16px;border-top:1px solid var(--line-2)}
.d-back a{font-size:12.5px;color:var(--ink-3);text-decoration:none}
.d-back a:hover{color:var(--accent)}
.empty{font-size:13px;color:var(--ink-4);line-height:1.9;padding:8px 0}
@media (max-width:760px){
  .detail{padding:18px 16px}
  .d-title{font-size:17.5px}
  .d-body p{font-size:14px;line-height:1.9}
}

/* ---------- 个人创作 · 作品网格 ---------- */
.wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:980px){.wgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.wgrid{grid-template-columns:1fr}}

.wcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;
  overflow:hidden;background:#fff;transition:border-color .15s,box-shadow .15s}
.wcard:hover{border-color:var(--accent);box-shadow:var(--shadow-h)}
.wc-img{aspect-ratio:4/3;background:var(--line-2);display:flex;align-items:center;justify-content:center;overflow:hidden}
.wc-img img{width:100%;height:100%;object-fit:contain}
.wc-noimg{background:linear-gradient(140deg,#f6f8f9,#e7eef1)}
.wc-noimg span{font-size:12px;color:var(--ink-4);letter-spacing:.1em}
.wc-body{padding:11px 13px 13px;display:flex;flex-direction:column;flex:1}
.wc-k{font-size:10px;color:var(--accent);letter-spacing:.1em}
.wc-t{font-size:13.5px;font-weight:600;margin-top:5px;line-height:1.45}
.wc-s{font-size:11px;color:var(--ink-4);margin-top:4px;line-height:1.5}
.wc-m{font-size:10.5px;color:var(--ink-5);margin-top:auto;padding-top:8px}

/* ---------- 作品详情 ---------- */
.w-figs{margin:4px 0 18px}
.w-fig{margin:0 0 20px}
.w-fig img{width:100%;border:1px solid var(--line);border-radius:10px;background:#fff}
.w-fig figcaption{font-size:11px;color:var(--ink-4);margin-top:7px;line-height:1.6}
.w-dl{margin:18px 0 4px;border-top:1px solid var(--line-2);padding-top:12px}
.w-dl dt{font-size:10.5px;color:var(--ink-5);letter-spacing:.1em;margin-top:10px}
.w-dl dd{font-size:12.5px;color:var(--ink-2);line-height:1.75;margin-top:4px}
.w-mini{display:flex;gap:10px;align-items:center;margin-bottom:10px;padding-bottom:10px;
  border-bottom:1px solid var(--line-2)}
.w-mini:last-child{border-bottom:0;padding-bottom:0}
.w-mini img{width:54px;height:42px;object-fit:contain;border-radius:6px;flex:none;border:1px solid var(--line)}
.w-mini .t{font-size:12.5px;font-weight:600;line-height:1.4}
.w-mini .m{font-size:10.5px;color:var(--ink-4);margin-top:3px}
.sec-h{font-size:11px;letter-spacing:.14em;color:var(--ink-5);margin-bottom:12px}

/* ============ 阅读（长文） ============ */
.rd-h1{font-size:23px;line-height:1.35;letter-spacing:.01em;margin-bottom:6px}
.rd-meta{font-size:11.5px;color:var(--ink-4);letter-spacing:.02em}
.rd{padding:22px 26px 26px}
.rd-tocbox{border:1px solid var(--line);border-radius:12px;background:#fafbfb;padding:12px 16px;margin-bottom:20px}
.rd-tocbox summary{font-size:12px;color:var(--ink-3);cursor:pointer;letter-spacing:.04em;outline:none}
.rd-toc{list-style:none;margin:10px 0 2px;columns:2;column-gap:26px}
@media (max-width:640px){.rd-toc{columns:1}}
.rd-toc li{font-size:12.5px;line-height:1.9;break-inside:avoid}
.rd-toc li.l0{font-weight:600}
.rd-toc li.l1{padding-left:14px}
.rd-toc li.l2{padding-left:28px;color:var(--ink-3)}
.rd-toc li.l3{padding-left:42px;color:var(--ink-4)}
.rd-toc a:hover{color:var(--accent)}
.rd-art{max-width:760px;font-size:14.5px;line-height:1.9;color:var(--ink-2)}
.rd-art h2{font-size:18px;color:var(--ink);margin:30px 0 10px;letter-spacing:.01em;scroll-margin-top:16px}
.rd-art h3{font-size:15.5px;color:var(--ink);margin:22px 0 8px;scroll-margin-top:16px}
.rd-art h4{font-size:14px;color:var(--ink-3);margin:16px 0 6px;scroll-margin-top:16px}
.rd-art p{margin:11px 0}
.rd-art b{color:var(--ink);font-weight:600}
.rd-art code{font-size:12.5px;background:var(--line-2);padding:1px 5px;border-radius:4px}
.rd-art blockquote.rd-q{border-left:3px solid var(--accent-2);background:#f8fafa;
  padding:10px 14px;margin:14px 0;color:var(--ink-3);border-radius:0 8px 8px 0}
.rd-hr{border:0;border-top:1px solid var(--line);margin:24px 0}
.rd-ul{margin:11px 0 11px 4px;padding-left:18px}
.rd-ul li{margin:5px 0;line-height:1.85}
.rd-fig{margin:20px 0;text-align:center}
.rd-fig img{width:100%;max-width:560px;margin:0 auto;border-radius:10px;
  border:1px solid var(--line);background:#fff}
.rd-fig figcaption{font-size:11.5px;color:var(--ink-4);line-height:1.7;margin-top:8px;
  max-width:560px;margin-left:auto;margin-right:auto;text-align:left}
.rd-cr{display:block;font-size:10.5px;color:var(--ink-5);margin-top:2px}
.rd-miss{font-size:12px;color:var(--ink-4);border:1px dashed var(--line);border-radius:8px;padding:8px 12px}
.rd-tag{font-size:12.5px;color:var(--accent);letter-spacing:.02em}
.tw{overflow-x:auto;margin:16px 0;-webkit-overflow-scrolling:touch}
.tw table{border-collapse:collapse;font-size:12.5px;line-height:1.6;min-width:100%}
.tw th,.tw td{border:1px solid var(--line);padding:6px 10px;text-align:left;vertical-align:top}
.tw th{background:#f6f7f8;font-weight:600;color:var(--ink);white-space:nowrap}
.tw tbody tr:nth-child(even){background:#fcfcfd}
.rd-nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;padding-top:16px;border-top:1px solid var(--line)}
.rd-nav a{font-size:12.5px;color:var(--ink-3);border:1px solid var(--line);border-radius:999px;padding:6px 14px}
.rd-nav a:hover{border-color:var(--ink-4);color:var(--ink)}

/* 阅读首页 */
.rd-rank{display:grid;gap:12px}
.rd-item{display:block;border:1px solid var(--line);border-radius:12px;padding:16px 18px;transition:box-shadow .15s,border-color .15s}
.rd-item:hover{box-shadow:var(--shadow-h);border-color:var(--line)}
.rd-it-t{font-size:15px;font-weight:600;color:var(--ink)}
.rd-item:hover .rd-it-t{color:var(--accent)}
.rd-it-d{font-size:12.5px;color:var(--ink-3);line-height:1.8;margin-top:6px}
.rd-it-m{font-size:11px;color:var(--ink-5);margin-top:8px;letter-spacing:.02em}

/* 全书总目录 */
.rd-vol{padding:16px 0;border-bottom:1px solid var(--line-2)}
.rd-vol:last-child{border-bottom:0}
.rd-volh{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.rd-volh b{font-size:14.5px;color:var(--ink)}
.rd-volh span{font-size:11.5px;color:var(--ink-4)}
.rd-chap{list-style:none;margin-top:10px;padding-left:2px}
.rd-chap li{margin:6px 0}
.rd-chap a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:13.5px;color:var(--ink-2);padding:6px 10px;border-radius:8px}
.rd-chap a:hover{background:var(--accent-2);color:var(--accent)}
.rd-n{font-size:10.5px;color:var(--ink-5);flex:none}
@media (max-width:560px){
  .rd{padding:18px 16px 20px}
  .rd-h1{font-size:19px}
  .rd-art{font-size:15px;line-height:1.95}
  .rd-art h2{font-size:16.5px}
  .rd-chap a{flex-direction:column;gap:2px}
  .rd-fig img{max-width:100%}
}

/* 作品卡「在线阅读」标记 */
.w-more{font-size:10.5px;color:var(--accent);margin-top:6px}

/* 作品详情「阅读全文」 */
.d-read{margin:14px 0 4px}
.d-read a{display:inline-block;font-size:13px;font-weight:600;color:#fff;background:var(--accent);
  border-radius:999px;padding:8px 20px;letter-spacing:.02em}
.d-read a:hover{background:#26636f}

/* 总目录 · 章条目 + 小节折叠 */
.rd-cli{margin:6px 0}
.rd-sub{margin:2px 0 8px 10px}
.rd-sub>summary{font-size:11px;color:var(--ink-5);cursor:pointer;letter-spacing:.03em;padding:2px 0}
.rd-sub>summary:hover{color:var(--accent)}
.rd-subul{list-style:none;margin:4px 0 4px 8px}
.rd-subul li{font-size:12px;line-height:1.85;color:var(--ink-3)}
.rd-subul li.l1{padding-left:0}
.rd-subul li.l2{padding-left:14px;color:var(--ink-4)}
.rd-subul li.l3{padding-left:28px;color:var(--ink-5)}
.rd-subul a:hover{color:var(--accent)}

/* flex 项的 min-width:auto 会让宽表格顶破容器（视觉不可滚，但 scrollWidth 虚高） */
.wrap{min-width:0}
.wrap>*{min-width:0}

/* ---------------- X 热搜（趋势榜） ---------------- */
.xt-seg{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.xt-seg button{border:1px solid #d8dde3;background:#fff;color:#3c4652;border-radius:999px;
  padding:6px 15px;font-size:13px;cursor:pointer;transition:.15s}
.xt-seg button:hover{border-color:#16807d;color:#16807d}
.xt-seg button.on{background:#16807d;border-color:#16807d;color:#fff;font-weight:600}
.xt-list{display:grid;grid-template-columns:1fr 1fr;gap:2px 22px}
.xt-it{display:flex;align-items:baseline;gap:10px;padding:8px 4px;border-radius:6px;
  text-decoration:none;color:#2b3542;border-bottom:1px solid #f0f2f5;min-width:0}
.xt-it:hover{background:#f4f8f8}
.xt-n{flex:0 0 22px;text-align:right;font-size:12px;color:#9aa5b1;font-variant-numeric:tabular-nums}
.xt-t{font-size:13.5px;line-height:1.4;word-break:break-word;min-width:0;overflow-wrap:anywhere}
.xt-v{flex:0 0 auto;font-size:11px;color:#9aa5b1;margin-left:auto}
@media (max-width:640px){
  .xt-list{grid-template-columns:1fr;gap:0}
  .xt-it{padding:10px 2px}
  .xt-t{font-size:14px}
}