@charset "UTF-8";
/* TF3 Fieldnotes — 暗黑武侠 skin (single visual file). Loaded after style.css.
   Default = dark wuxia. The light toggle keeps working, restyled as warm paper wuxia. */

:root{
  color-scheme:dark;
  --paper:#0B0D0B;   /* page background (site uses --paper as bg in dark) */
  --ink:#EAE6DA;     /* text */
  --muted:#ADADA0;
  --line:#2E342C;
  --orange:#CE4B3E;  /* blade red */
  --mint:#191D18;    /* panel / card surface */
  --serif:'Iowan Old Style','Palatino Linotype','Songti SC','Noto Serif SC',Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --blade:#CE4B3E;
  --bronze:#D3AE62;
  --radius:14px;
}
html[data-theme=light]{
  --paper:#FBFAF6; --ink:#1B1A16; --muted:#5E5A50; --line:#E3DFD5; --orange:#A8391F; --mint:#F4F2EC;
  --blade:#A8391F; --bronze:#8A6A2F;
}
html[data-theme=light] header,html[data-theme=light] footer{background:#F1EFE8;color:var(--ink);border-color:var(--line)}
html[data-theme=light] .editionbar{background:#EAE7DF;color:var(--muted)}
html[data-theme=light] .card,html[data-theme=light] .factstrip,html[data-theme=light] .manifesto,html[data-theme=light] .searchbar,html[data-theme=light] #empty{background:#FFFEF9;border-color:var(--line)}
html[data-theme=light] .sourcebox,html[data-theme=light] .diagram{background:#EFEDE6;color:var(--ink);border-color:var(--line)}
html[data-theme=light] .sourcebox .eyebrow,html[data-theme=light] .sourcebox small,html[data-theme=light] .diagram figcaption{color:var(--muted)}
html[data-theme=light] th{background:#E6E3DA}html[data-theme=light] td{background:#FFFEF9}html[data-theme=light] th,html[data-theme=light] td{border-color:var(--line)}

/* ---------- base ---------- */
body{font-family:var(--sans);font-size:17px;line-height:1.75;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.015em;color:var(--ink)}
p{color:var(--muted)}
a{color:inherit}
::selection{background:var(--blade);color:#fff}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--bronze);outline-offset:4px}

/* eyebrow: seal label */
.eyebrow{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:2px;color:var(--bronze);text-transform:uppercase}
.eyebrow:before{content:'';display:inline-block;width:16px;height:1px;background:var(--blade);vertical-align:middle;margin-right:10px;margin-bottom:3px}

/* ---------- header ---------- */
header{background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
header .wrap.nav{width:min(1180px,calc(100% - 56px));gap:28px}
.brand{font-size:15px;letter-spacing:1.6px}
.brandmark{color:var(--blade)}
header nav a{font-size:14px;font-weight:500;color:var(--muted)}
header nav a:hover,header nav a.active{color:var(--ink)}
header nav a.active:after{background:var(--blade);height:2px;border-radius:2px}
.site-preferences button,.navsearch{border:1px solid var(--line);border-radius:8px;color:var(--muted);font-size:13px;padding:8px 12px;background:transparent}
.site-preferences button:hover,.navsearch:hover{border-color:var(--blade);color:var(--blade)}

/* ---------- hero ---------- */
.hero{min-height:560px}
.herocopy h1{font-family:var(--serif);font-size:clamp(40px,6vw,78px);letter-spacing:-.03em;line-height:1.02;color:var(--ink)}
.herocopy h1 span{color:var(--blade)}
.hero-description{font-size:18px;color:var(--ink);line-height:1.5}
.hero-detail{font-size:14px;line-height:1.8;max-width:46ch}
.actions{gap:18px;margin-top:26px}
.button{background:var(--blade);border:1px solid var(--blade);color:#fff;border-radius:10px;font-size:14px;font-weight:600;padding:13px 22px;box-shadow:0 8px 26px rgba(206,75,62,.28)}
.button:hover{background:#B83F33;border-color:#B83F33}
.textlink{font-size:14px;font-weight:500;color:var(--bronze);border-bottom:1px solid color-mix(in srgb,var(--bronze) 45%,transparent);padding-bottom:3px}
.departure{border-left:2px solid var(--blade);padding-left:14px}
.departure strong{font-family:var(--serif);font-size:22px;letter-spacing:1px}
.image-credit{font-size:11px;color:var(--muted);opacity:.8}
.editionbar{background:var(--mint);border-bottom:1px solid var(--line);font-size:11px;letter-spacing:1.6px}

/* ---------- factstrip / library ---------- */
.factstrip>div{background:var(--mint);border:1px solid var(--line);border-radius:var(--radius);position:relative;overflow:hidden}
.factstrip>div:before{content:'';position:absolute;top:0;left:0;width:46px;height:2px;background:var(--blade)}
.factstrip span{font-size:11px;letter-spacing:1.6px;color:var(--bronze)}
.factstrip a{font-family:var(--serif);font-size:22px;color:var(--ink)}
.factstrip p{font-size:14px;line-height:1.75}
.sectionhead h2{font-family:var(--serif);font-size:clamp(28px,3.4vw,40px)}
.searchbar input{background:var(--mint);border:1px solid var(--line);border-radius:10px;color:var(--ink);font-size:15px;padding:12px 14px}
.filters button{border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--muted);font-size:13px;padding:8px 15px}
.filters button[aria-pressed=true]{border-color:var(--blade);color:var(--blade)}

/* ---------- cards ---------- */
.grid{gap:20px}
.card{background:var(--mint);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .18s,border-color .18s}
.card:hover{transform:translateY(-3px);border-color:var(--line)}
.cardbody{padding:20px 22px 18px}
.card h3{font-size:22px;line-height:1.3}
.card h3 a{color:var(--ink)}
.card p{font-size:14px;line-height:1.75}
.cardmeta{font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px}
.art-index{font-size:11px;letter-spacing:1.4px;background:color-mix(in srgb,var(--blade) 85%,black)}

/* ---------- article ---------- */
.breadcrumb{font-size:12px;color:var(--muted)}
.articleintro h1{font-size:clamp(32px,4.2vw,52px);letter-spacing:-.025em;max-width:22ch}
.dek{font-size:18px;line-height:1.7;color:var(--muted);max-width:62ch}
.articlemeta{font-size:12px;color:var(--muted)}
.articlelayout{gap:48px}
.prose{max-width:70ch;font-size:17px;line-height:1.85}
.prose h2{font-size:clamp(24px,2.6vw,31px);margin-bottom:14px}
.prose p{font-size:17px;line-height:1.85}
.prose a{color:var(--bronze);text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--bronze) 45%,transparent)}
.sourcebox{background:var(--mint);border:1px solid var(--line);border-left:3px solid var(--blade);border-radius:0 var(--radius) var(--radius) 0;padding:22px 26px}
.sourcebox p{font-size:16px;color:var(--ink)}
.sourcebox small{font-size:12px;color:var(--muted)}
.tablewrap table{border-color:var(--line);border-radius:var(--radius);overflow:hidden}
th{background:var(--mint);color:var(--ink);font-size:14px}
td{background:transparent;color:var(--muted);font-size:15px}
th,td{border-color:var(--line);padding:12px 14px}
.diagram{background:var(--mint);border:1px solid var(--line);border-radius:var(--radius)}
.article-end{border-top:1px solid var(--line);margin-top:40px;padding-top:24px}
.article-end strong{color:var(--ink);font-family:var(--serif);font-size:20px}
.toc a{font-size:13px;color:var(--muted)}
.toc a:hover{color:var(--bronze)}
.page-scene figcaption{font-size:11px;color:var(--muted)}

/* ---------- info pages / topics / footer ---------- */
.topiclinks a{border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-size:13px;color:var(--muted)}
.topiclinks a[aria-current]{border-color:var(--blade);color:var(--blade)}
.manifesto{background:var(--mint);border:1px solid var(--line);border-radius:var(--radius)}
footer{border-top:1px solid var(--line)}
footer .wrap.foot{width:min(1180px,calc(100% - 56px));padding-block:36px}
.foot .brand{color:var(--ink);font-family:var(--serif);font-size:19px}
.foot a{color:var(--muted);font-size:14px}
.foot a:hover{color:var(--bronze)}
.foot small{font-size:12px;color:var(--muted)}

/* ---------- ads ---------- */
.ad-slot,.ad-banner,.sponsor{margin:34px 0;padding:16px;border:1px dashed var(--line);border-radius:var(--radius);background:var(--mint)}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  header .wrap.nav,.foot .wrap{width:calc(100% - 40px)}
  .herocopy h1{font-size:clamp(34px,8vw,56px)}
  .articlelayout{grid-template-columns:1fr;gap:28px}
  .prose{max-width:none}
}
@media (max-width:650px){
  body{font-size:16px}
  header .wrap.nav,.foot .wrap{width:calc(100% - 32px)}
  .grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}

/* ============================================================
   v2 打磨（2026-09-22）· 氛围光 / 滚动条 / 代码 / 图片 / 表格层次
   ============================================================ */

/* 1. 顶部氛围光：刀锋红与铜金薄晕 */
body{
  background:
    radial-gradient(58% 460px at 88% -110px,rgba(206,75,62,.1),transparent 70%),
    radial-gradient(52% 540px at -6% 280px,rgba(211,174,98,.07),transparent 72%),
    var(--paper);
  background-attachment:fixed;
}
html[data-theme=light] body{
  background:
    radial-gradient(58% 460px at 88% -110px,rgba(168,57,31,.05),transparent 70%),
    radial-gradient(52% 540px at -6% 280px,rgba(138,106,47,.07),transparent 72%),
    var(--paper);
  background-attachment:fixed;
}

/* 2. 滚动条 */
html{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px;border:2px solid var(--paper)}
::-webkit-scrollbar-thumb:hover{background:var(--bronze)}

/* 3. 卡片悬浮落地阴影 */
.card:hover,.factstrip>div:hover{box-shadow:0 14px 34px -16px rgba(0,0,0,.5)}
html[data-theme=light] .card:hover,html[data-theme=light] .factstrip>div:hover{box-shadow:0 14px 30px -16px rgba(78,62,38,.24)}

/* 4. 正文细节：图片收边、行内代码、代码块 */
.prose img{border-radius:10px;border:1px solid var(--line)}
.prose code{background:var(--mint);border:1px solid var(--line);border-radius:5px;padding:.08em .38em;font-size:.88em;color:var(--bronze)}
.prose pre{background:var(--mint);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.prose pre code{background:none;border:0;padding:0;color:inherit}

/* 5. 表格行悬浮 / 分隔线 / 折叠块 / 按钮按压 */
.tablewrap tbody tr:hover td{background:color-mix(in srgb,var(--blade) 8%,transparent)}
hr{border:0;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
details>summary{cursor:pointer}
details>summary::marker{color:var(--bronze)}
.button:active{transform:translateY(1px)}