/* 任户兰 · 站点样式
   首页是左右两扇门：左边 Cycle Radar（深海军蓝，取自看板），右边看懂系列（纸墨，取自交互页）。
   两个板块页分别沿用各自那扇门的主题。 */

:root{
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",system-ui,sans-serif;
  --serif:"Source Han Serif SC","Noto Serif SC","Songti SC","STSong","SimSun",Georgia,serif;
  --mono:ui-monospace,"SFMono-Regular","JetBrains Mono",Consolas,monospace;
  /* 首页顶栏、页脚用的中性色 */
  --chrome-bg:#fafaf8; --chrome-ink:#16171a; --chrome-muted:#6b6c72; --chrome-line:#e4e2dc;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--chrome-bg:#0f1013;--chrome-ink:#ecebe7;--chrome-muted:#9a9ba2;--chrome-line:#26272c;color-scheme:dark}
}
:root[data-theme="dark"]{--chrome-bg:#0f1013;--chrome-ink:#ecebe7;--chrome-muted:#9a9ba2;--chrome-line:#26272c;color-scheme:dark}

/* 两套主题：深蓝和纸墨不随深浅色模式变，它们本身就是子项目的样子 */
.theme-radar{
  --bg:#06101f; --panel:#0b1a31; --panel-2:#10233f; --line:#1a3053; --line-2:#25416b;
  --ink:#e6eefc; --ink-2:#b9c7de; --muted:#8ea3c3; --accent:#4cc3ff; --gold:#f2b84b;
  --face:var(--sans);
}
.theme-kandong{
  --bg:#f1efea; --panel:#fbfaf7; --panel-2:#f6f4ef; --line:#e0ddd5; --line-2:#c8c4ba;
  --ink:#1d1d20; --ink-2:#44454c; --muted:#7c7d85; --accent:#a3342b; --gold:#97621f;
  --face:var(--serif);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);background:var(--chrome-bg);color:var(--chrome-ink);line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-wrap:break-word}
body.theme-radar,body.theme-kandong{background:var(--bg);color:var(--ink)}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent,#2a78ff);outline-offset:3px}

/* 双语：同时输出两种，按 html[data-lang] 显示一种 */
html:not([data-lang="en"]) .en, html[data-lang="en"] .zh{display:none}

/* ---------- 顶栏 ---------- */
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 16px;height:60px;
  border-bottom:1px solid var(--line,var(--chrome-line));font-size:14px}
@media (min-width:760px){.bar{padding:0 32px}}
.bar .brand{font-weight:600;letter-spacing:.04em;text-decoration:none;white-space:nowrap}
.bar .brand .en{letter-spacing:.02em}
.bar nav{display:flex;align-items:center;gap:18px;min-width:0}
.bar nav a{text-decoration:none;color:var(--muted,var(--chrome-muted));white-space:nowrap}
.bar nav a:hover{color:var(--ink,var(--chrome-ink))}
.lang{font:inherit;font-size:13px;cursor:pointer;background:transparent;color:var(--muted,var(--chrome-muted));
  border:1px solid var(--line-2,var(--chrome-line));border-radius:999px;padding:4px 11px;min-height:32px;white-space:nowrap}
.lang b{font-weight:600;color:var(--ink,var(--chrome-ink))}

/* ---------- 首页 ---------- */
.home{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.home-head{text-align:center;padding:26px 16px 22px;border-bottom:1px solid var(--chrome-line);position:relative}
.home-head h1{margin:0;font-size:clamp(26px,4.4vw,38px);font-weight:600;letter-spacing:.06em;line-height:1.25}
.home-head h1 .sep{color:var(--chrome-muted);font-weight:400;margin:0 .35em}
.home-head h1 .latin{letter-spacing:.01em}
.home-head p{margin:6px 0 0;color:var(--chrome-muted);font-size:clamp(15px,1.8vw,17px)}
.home-head .lang{position:absolute;top:16px;right:16px}
@media (min-width:760px){.home-head .lang{top:22px;right:32px}}

.split{flex:1;display:flex;min-height:560px}
.door{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:26px;
  padding:clamp(28px,4.5vw,64px) clamp(20px,4.5vw,64px);background:var(--bg);color:var(--ink);font-family:var(--face);
  transition:flex-grow .45s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover) and (min-width:760px){.split:hover .door:hover{flex-grow:1.16}}
@media (prefers-reduced-motion:reduce){.door{transition:none}}
.door .kick{font-family:var(--sans);font-size:13px;letter-spacing:.14em;color:var(--accent)}
.door .kick b{font-weight:600;letter-spacing:.04em;margin-right:.6em}
.door h2{margin:6px 0 0;font-size:clamp(26px,3.2vw,38px);line-height:1.25;font-weight:600}
.theme-kandong.door h2{font-weight:700}
.door .go{margin-top:6px;font-family:var(--sans);font-size:15px;font-weight:600;color:var(--accent);text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start}
.door .go::after{content:"";position:absolute;inset:0}           /* 整扇门可点 */
.door .go span.arrow{transition:transform .2s}
.door:hover .go span.arrow{transform:translateX(4px)}
.door .over{position:relative;z-index:1}                       /* 门里单独的链接浮在整门链接之上 */

/* 左门：迷你雷达 + 数字 */
.radar-fig{display:flex;flex-direction:column;align-items:center;margin:0}
.radar-fig svg{width:min(100%,460px);height:auto;overflow:visible}
.radar-fig .cap{font-family:var(--sans);font-size:12.5px;color:var(--muted);text-align:center;margin-top:4px}
.stats{display:flex;flex-wrap:wrap;gap:10px 28px;font-family:var(--sans)}
.stats div{display:flex;flex-direction:column}
.stats b{font-family:var(--mono);font-size:26px;font-weight:500;color:var(--ink);line-height:1.2}
.stats span{font-size:13px;color:var(--muted)}

/* 右门：五篇目录 */
.toc{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.toc li{border-bottom:1px solid var(--line)}
.toc a{display:flex;align-items:baseline;gap:12px;padding:11px 0;text-decoration:none}
.toc a:hover .t{color:var(--accent)}
.toc .t{font-size:18px;font-weight:600;white-space:nowrap}
.toc .s{font-size:14.5px;color:var(--ink-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toc .n{font-family:var(--mono);font-size:12px;color:var(--muted);flex:none;width:1.6em}

.home-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;padding:14px 16px;
  border-top:1px solid var(--chrome-line);font-size:13px;color:var(--chrome-muted)}
@media (min-width:760px){.home-foot{padding:14px 32px}}

@media (max-width:759px){
  .home-head{padding-top:56px}
  .home-head .lang{top:14px}
  .split{flex-direction:column;min-height:0}
  .door{flex:1 0 auto}
  .toc .s{white-space:normal}
}

/* ---------- 板块页 ---------- */
.page{max-width:1080px;margin:0 auto;padding:0 16px 72px;font-family:var(--face)}
@media (min-width:760px){.page{padding:0 32px 88px}}
.sec-head{padding:52px 0 8px}
.sec-head .kick{font-family:var(--sans);font-size:13px;letter-spacing:.14em;color:var(--accent)}
.sec-head h1{margin:6px 0 0;font-size:clamp(32px,5.4vw,48px);line-height:1.2;font-weight:700}
.sec-head .q{margin:6px 0 0;font-size:clamp(18px,2.4vw,22px);color:var(--ink-2)}
.sec-head .intro{margin:18px 0 0;max-width:40em;color:var(--ink-2);font-size:16.5px;line-height:1.85}

/* Cycle Radar 板块页：一张大卡 */
.feature{margin-top:40px;display:grid;grid-template-columns:1fr;gap:28px;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:clamp(20px,3.5vw,40px)}
@media (min-width:860px){.feature{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.feature h2{margin:0;font-size:clamp(24px,3vw,30px);line-height:1.3}
.feature .sub{margin:6px 0 0;color:var(--ink-2)}
.feature .sum{margin:14px 0 0;color:var(--ink-2);font-size:15.5px;line-height:1.8}
.feature .stats{margin-top:22px}
.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;font-family:var(--sans)}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:9px 18px;border-radius:10px;font-size:15px;
  font-weight:600;text-decoration:none;border:1px solid var(--line-2);color:var(--ink)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.btn:hover{filter:brightness(1.08)}
.meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:16px;font-family:var(--sans);font-size:13px;color:var(--muted)}

/* 看懂系列板块页：杂志目录 */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:34px 0 6px;font-family:var(--sans);font-size:14px}
.filters button{font:inherit;color:var(--ink-2);background:transparent;border:1px solid var(--line-2);border-radius:999px;
  padding:5px 14px;cursor:pointer;min-height:36px}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.list{list-style:none;margin:14px 0 0;padding:0;border-top:2px solid var(--ink)}
.entry{position:relative;display:grid;grid-template-columns:2.6em minmax(0,1fr);gap:4px 16px;padding:24px 0;border-bottom:1px solid var(--line-2)}
.entry[hidden]{display:none}
.entry .no{font-family:var(--mono);font-size:14px;color:var(--accent);padding-top:6px}
.entry h2{margin:0;font-size:clamp(22px,2.8vw,28px);line-height:1.35;font-weight:700}
.entry h2 a{text-decoration:none}
.entry h2 a::after{content:"";position:absolute;inset:0}
.entry:hover h2 a{color:var(--accent)}
.entry .sub{margin:2px 0 0;font-size:17px;color:var(--ink-2)}
.entry .sum{margin:10px 0 0;font-size:15.5px;line-height:1.85;color:var(--ink-2);max-width:44em}
.entry .meta{margin-top:12px}
.entry .meta .tag{color:#2d5878}
.entry .meta .fmt{color:var(--gold)}
.entry .meta .cn{border:1px solid var(--line-2);border-radius:4px;padding:0 6px}
@media (min-width:760px){.entry{grid-template-columns:3.4em minmax(0,1fr)}}

.vw{display:none}.vw.on{display:inline}

.page-foot{max-width:1080px;margin:0 auto;padding:18px 16px 36px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;font-size:13px;color:var(--muted)}
@media (min-width:760px){.page-foot{padding:18px 32px 40px}}

/* 404 */
.nf{padding:120px 16px;text-align:center}
.nf h1{font-size:36px;margin:0}
.nf a{color:var(--accent,#2a78ff)}