@charset "utf-8";
/* forkknot.com · 皮：时刻表年鉴（芥末赭 + 近黑 + 左侧竖排索引条）
   零圆角、硬规则线、密排行表；不用等宽字体，数字走 tabular-nums */

/* ---------------- tokens ---------------- */
:root{
  --ochre:#C9862F;
  --ochre-dk:#9E6718;
  --ochre-wash:#F2E3C8;
  --black:#141210;
  --black-2:#241F1A;
  --off:#EDEAE3;
  --off-2:#E3DFD5;
  --card:#F6F4EF;
  --rule:#CFCAC0;
  --muted:#5D574F;
  --faint:#8A8378;
  --brick:#8C2F1E;
  --brick-wash:#F6E2DC;
  --rail-w:78px;
  --display:"Bricolage Grotesque","Schibsted Grotesk",Segoe UI,system-ui,sans-serif;
  --sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --pad:30px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--off);color:var(--black);
  font-family:var(--sans);font-size:16px;line-height:1.78;
  font-variant-numeric:tabular-nums;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--black);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--ochre-dk)}
:focus-visible{outline:3px solid var(--ochre-dk);outline-offset:2px}
hr{border:0;border-top:1px solid var(--rule);margin:34px 0}
table{border-collapse:collapse;width:100%}

.skip{position:absolute;left:-9999px;top:0;background:var(--black);color:var(--off);padding:12px 18px;z-index:200}
.skip:focus{left:0}

/* ---------------- 左侧竖排索引条 ---------------- */
.rail{
  position:fixed;left:0;top:0;bottom:0;width:var(--rail-w);z-index:50;
  background:var(--black);color:var(--off);
  display:flex;flex-direction:column;align-items:center;
  padding:20px 0 16px;gap:22px;
}
.rail-mark{
  writing-mode:vertical-rl;font-family:var(--display);font-weight:800;
  font-size:16px;letter-spacing:.34em;color:var(--off);text-decoration:none;
  padding:6px 0;
}
.rail-mark:hover{color:var(--ochre)}
.rail-badge{
  writing-mode:vertical-rl;font-size:11px;letter-spacing:.24em;color:var(--ochre);
  border-top:1px solid #3A342C;border-bottom:1px solid #3A342C;padding:14px 0;
}
.rail-foot{margin-top:auto;font-family:var(--display);font-size:11px;letter-spacing:.14em;color:#6B6459}
.col{margin-left:var(--rail-w);min-width:0}

/* ---------------- 顶部密排导航（时刻表表头形态） ---------------- */
.topbar{
  border-bottom:2px solid var(--black);background:var(--off);
  display:flex;align-items:stretch;flex-wrap:wrap;
}
.topbar nav{display:flex;flex-wrap:wrap}
.topbar nav a{
  display:flex;align-items:center;min-height:46px;padding:0 18px;
  font-size:13px;letter-spacing:.12em;text-decoration:none;color:var(--black);
  border-right:1px solid var(--rule);
}
.topbar nav a:hover{background:var(--ochre-wash)}
.topbar nav a[aria-current="page"]{background:var(--black);color:var(--off)}
.topbar .stamp{
  margin-left:auto;display:flex;align-items:center;padding:0 var(--pad);
  font-size:11px;letter-spacing:.2em;color:var(--faint);
}

/* ---------------- 赭色标题带 ---------------- */
.band{background:var(--ochre);color:var(--black);padding:26px var(--pad) 26px}
.band .kicker{font-size:11px;letter-spacing:.24em;opacity:.78;margin-bottom:12px}
.band h1{
  margin:0;font-family:var(--display);font-weight:800;letter-spacing:-.01em;
  font-size:clamp(26px,3.5vw,42px);line-height:1.16;max-width:19em;
}
.band .lede{margin:14px 0 0;font-size:16px;line-height:1.7;max-width:44em;opacity:.9}
.band .meta{
  margin-top:16px;padding-top:11px;border-top:1px solid rgba(20,18,16,.34);
  display:flex;flex-wrap:wrap;gap:8px 22px;font-size:11px;letter-spacing:.16em;opacity:.8;
}
.band--plain{background:var(--off-2)}
.band--plain .meta{border-top-color:var(--rule)}

/* ---------------- 披露条（每个对比页顶部一句） ---------------- */
.disclose{
  background:var(--black);color:#D9D4C9;font-size:13px;line-height:1.6;
  padding:11px var(--pad);border-bottom:3px solid var(--ochre);
}
.disclose a{color:var(--ochre)}

/* ---------------- 主体排版 ---------------- */
main{padding:0 0 10px}
.wrap{padding:0 var(--pad)}
.prose{max-width:44em;padding:30px var(--pad) 46px}
/* 工具页要放宽表和输入区，正文宽度放宽 */
.prose.roomy{max-width:66em}
.prose.roomy .lead-answer{max-width:44em}
.prose.roomy p,.prose.roomy ul,.prose.roomy ol{max-width:44em}
.catbar{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 10px}
.catbar button{
  font:inherit;font-size:13px;cursor:pointer;padding:10px 15px;min-height:44px;
  border:1px solid var(--rule);background:var(--card);color:var(--black);letter-spacing:.04em;
}
.catbar button[aria-pressed="true"]{background:var(--black);color:var(--off);border-color:var(--black)}
.catbar button:hover{border-color:var(--black)}
.count{font-size:12px;color:var(--faint);letter-spacing:.08em;margin:0 0 6px}
.term{border-top:1px solid var(--rule);padding:15px 0}
.term h3{margin:0 0 4px;font-family:var(--display);font-size:17px;font-weight:700}
.term .en{font-size:11px;letter-spacing:.14em;color:var(--faint);margin:0 0 6px}
.term p{margin:0;font-size:15px;line-height:1.7}
.article-cover{margin:0 0 30px}
.article-cover img{width:100%;border:2px solid var(--black);background:var(--off-2)}
/* 宽表在正文里允许探出一点，避免三栏对照被挤成两行 */
@media(min-width:1180px){.prose .tbl.wide{width:calc(100% + 190px)}}
.prose>*:first-child{margin-top:0}
.prose h2{
  font-family:var(--display);font-weight:800;font-size:24px;line-height:1.32;
  margin:52px 0 6px;padding-top:14px;border-top:2px solid var(--black);letter-spacing:-.005em;
}
.prose h3{font-family:var(--display);font-weight:700;font-size:18px;margin:34px 0 4px;letter-spacing:.005em}
.prose h4{font-size:15px;margin:26px 0 2px;color:var(--muted);letter-spacing:.06em}
.prose p{margin:14px 0}
.prose ul,.prose ol{margin:14px 0;padding-left:1.35em}
.prose li{margin:7px 0}
.prose strong{font-weight:700}
.prose blockquote{
  margin:22px 0;padding:2px 0 2px 20px;border-left:4px solid var(--ochre);
  color:var(--muted);font-size:15px;
}
/* 结论前置句：每个小标题下第一句可直接被引用 */
.lead-answer{
  margin:12px 0 16px;padding:14px 18px;background:var(--card);
  border-left:4px solid var(--black);font-size:16px;line-height:1.7;
}
.prose figure{margin:26px 0}
.prose figure img,.prose figure svg{width:100%;border:1px solid var(--rule)}
.prose figcaption{font-size:12px;color:var(--faint);margin-top:8px;letter-spacing:.04em}

/* 目录 */
.toc{border:2px solid var(--black);margin:26px 0 34px;background:var(--card)}
.toc h2{
  margin:0;font-family:var(--display);font-size:12px;letter-spacing:.22em;font-weight:700;
  background:var(--black);color:var(--off);padding:9px 16px;border:0;
}
.toc ol{margin:0;padding:10px 16px 14px 34px;font-size:14px;columns:2;column-gap:26px}
.toc li{margin:4px 0;break-inside:avoid}
.toc a{color:var(--black);text-decoration:none;border-bottom:1px solid var(--rule)}
.toc a:hover{border-color:var(--ochre-dk);color:var(--ochre-dk)}

/* 数据表 */
.tbl{margin:26px 0;overflow-x:auto;border:2px solid var(--black)}
.tbl table{min-width:520px;font-size:14px;background:var(--card)}
.tbl caption{
  caption-side:top;text-align:left;background:var(--black);color:var(--off);
  font-size:11px;letter-spacing:.2em;padding:9px 14px;
}
.tbl th,.tbl td{border-bottom:1px solid var(--rule);padding:11px 14px;text-align:left;vertical-align:top;line-height:1.6}
.tbl thead th{background:var(--off-2);font-size:12px;letter-spacing:.12em;border-bottom:2px solid var(--black)}
.tbl tbody th{font-weight:500;color:var(--muted);width:22%}
.tbl tr:last-child td,.tbl tr:last-child th{border-bottom:0}
.tbl .asof{font-size:11px;color:var(--faint);display:block;margin-top:4px;letter-spacing:.06em}

/* 提醒块 */
.note{border-left:5px solid var(--ochre);background:var(--ochre-wash);padding:16px 20px;margin:24px 0;font-size:15px}
.warn{border-left:5px solid var(--brick);background:var(--brick-wash);padding:16px 20px;margin:24px 0;font-size:15px}
.note p:first-child,.warn p:first-child{margin-top:0}
.note p:last-child,.warn p:last-child{margin-bottom:0}
.warn strong{color:var(--brick)}

/* FAQ */
.faq{border-top:2px solid var(--black);margin-top:44px;padding-top:6px}
.faq h2{border:0;padding:0;margin:14px 0 4px}
.faq .q{font-family:var(--display);font-weight:700;font-size:17px;margin:26px 0 6px}
.faq .a{margin:0 0 4px}

/* 作者行 */
.byline{
  display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:12px 0;margin:30px 0 0;font-size:13px;color:var(--muted);
}
.byline b{font-weight:600;color:var(--black)}

/* ---------------- 时刻表行（首页 / 列表页核心形态） ---------------- */
.rows{padding:0 var(--pad) 8px}
.rows-head{
  display:grid;grid-template-columns:46px 1.4fr 1fr 108px;gap:18px;
  font-size:10px;letter-spacing:.2em;color:var(--faint);
  padding:14px 0 8px;border-bottom:2px solid var(--black);
}
.row{
  display:grid;grid-template-columns:46px 1.4fr 1fr 108px;gap:18px;align-items:baseline;
  padding:12px 0;border-bottom:1px solid var(--rule);
  text-decoration:none;color:var(--black);min-height:46px;
}
.row:hover{background:var(--off-2)}
.row .n{font-family:var(--display);font-weight:800;font-size:13px;color:var(--ochre-dk)}
.row .t{font-size:15px;font-weight:500;line-height:1.55}
.row .d{font-size:13px;color:var(--muted);line-height:1.55}
.row .k{text-align:right;font-size:11px;letter-spacing:.1em;color:var(--faint)}

/* 分区小标题 */
.sect{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:34px var(--pad) 0;
}
.sect h2{
  font-family:var(--display);font-weight:800;font-size:19px;margin:0;letter-spacing:.01em;
}
.sect p{margin:0;font-size:13px;color:var(--muted)}

/* ---------------- 首屏转化区（形态 A：0 交易所直链） ---------------- */
.conv{
  background:var(--black);color:var(--off);border-top:5px solid var(--ochre);
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;padding:18px var(--pad);
}
.conv .code{
  font-family:var(--display);font-weight:800;letter-spacing:.14em;font-size:27px;
  line-height:1;color:var(--ochre);
}
.conv .copy{
  font:inherit;font-size:13px;letter-spacing:.06em;cursor:pointer;border:0;
  background:var(--ochre);color:var(--black);padding:12px 18px;font-weight:700;min-height:44px;
}
.conv .copy:hover{background:#DFA04A}
.conv .benefit{font-size:14px;line-height:1.5;max-width:30em}
.conv .fn{display:block;font-size:11px;color:#A79E90;margin-top:3px;line-height:1.5}
.conv .go{display:flex;gap:10px;margin-left:auto;flex-wrap:wrap}
.conv .go a{
  font-size:13px;letter-spacing:.04em;text-decoration:none;padding:12px 20px;
  min-height:44px;display:flex;align-items:center;white-space:nowrap;
}
.conv .go a:first-child{background:var(--off);color:var(--black)}
.conv .go a:last-child{background:transparent;color:var(--off);box-shadow:inset 0 0 0 2px rgba(237,234,227,.5)}
.conv .go a:hover{background:var(--ochre);color:var(--black);box-shadow:none}

/* ---------------- 工具页 ---------------- */
.tool{padding:26px var(--pad) 44px;max-width:62em}
.tool fieldset{border:2px solid var(--black);padding:18px 20px 22px;margin:0 0 24px;background:var(--card)}
.tool legend{font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.2em;padding:0 8px;background:var(--ochre)}
.field{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:14px 0}
.field label{font-size:14px;min-width:11em}
.field input[type=number],.field input[type=text],.field select{
  font:inherit;font-size:15px;padding:10px 12px;min-height:44px;
  border:2px solid var(--black);background:#fff;color:var(--black);min-width:9em;
}
.field .unit{font-size:13px;color:var(--muted)}
.tool .btnrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.tool button{
  font:inherit;font-size:14px;letter-spacing:.06em;cursor:pointer;border:0;
  padding:13px 22px;min-height:44px;background:var(--black);color:var(--off);font-weight:600;
}
.tool button.ghost{background:transparent;color:var(--black);box-shadow:inset 0 0 0 2px var(--black)}
.tool button:hover{background:var(--ochre);color:var(--black)}
.out{border:2px solid var(--black);background:var(--card);margin:24px 0}
.out h3{
  margin:0;font-family:var(--display);font-size:12px;letter-spacing:.2em;
  background:var(--black);color:var(--off);padding:9px 14px;font-weight:700;
}
.out .body{padding:16px 18px}
.out .verdict{font-family:var(--display);font-weight:800;font-size:20px;line-height:1.4;margin:0 0 10px}
.out .verdict.broker{color:var(--brick)}
.out .why{margin:0;font-size:15px;line-height:1.7}
.out ul{margin:12px 0 0;padding-left:1.3em;font-size:14px}
.qa{border-bottom:1px solid var(--rule);padding:16px 0}
.qa:last-of-type{border-bottom:0}
.qa p{margin:0 0 10px;font-size:15px;font-weight:500}
.qa .opts{display:flex;flex-wrap:wrap;gap:10px}
.qa .opts label{
  display:flex;align-items:center;gap:8px;font-size:14px;
  border:1px solid var(--rule);padding:10px 14px;min-height:44px;cursor:pointer;background:#fff;
}
.qa .opts label:hover{border-color:var(--black);background:var(--ochre-wash)}
.qa .opts input{accent-color:var(--ochre-dk);width:17px;height:17px}

/* 术语速查 */
.terms{margin:22px 0}
.terms dt{font-family:var(--display);font-weight:700;font-size:16px;margin-top:20px;padding-top:10px;border-top:1px solid var(--rule)}
.terms dd{margin:6px 0 0;font-size:15px;line-height:1.7;color:var(--black)}
.terms dd.en{color:var(--faint);font-size:12px;letter-spacing:.1em;margin-top:2px}

/* ---------------- 页脚 ---------------- */
footer.site{
  background:var(--black);color:#BDB6A9;margin-top:40px;
  padding:30px var(--pad) 36px;font-size:13px;line-height:1.75;
}
footer.site a{color:var(--off)}
footer.site h2{
  font-family:var(--display);font-size:11px;letter-spacing:.22em;color:var(--ochre);
  margin:0 0 10px;font-weight:700;
}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:26px 30px;margin-bottom:26px}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin:5px 0}
.foot-grid a{text-decoration:none;border-bottom:1px solid #3A342C}
.foot-grid a:hover{border-color:var(--ochre);color:#fff}
.foot-note{border-top:1px solid #3A342C;padding-top:18px;max-width:56em}
.foot-note p{margin:0 0 8px}

/* ---------------- 404 ---------------- */
.e404{padding:60px var(--pad)}
.e404 h1{font-family:var(--display);font-size:64px;margin:0;color:var(--ochre)}

/* ---------------- 响应式 ---------------- */
@media(max-width:900px){
  :root{--pad:18px}
  .rail{
    position:static;width:auto;flex-direction:row;align-items:center;
    padding:0 14px;gap:14px;min-height:48px;
  }
  .rail-mark{writing-mode:horizontal-tb;font-size:15px;letter-spacing:.26em;padding:0}
  .rail-badge{writing-mode:horizontal-tb;border:0;border-left:1px solid #3A342C;padding:0 0 0 14px}
  .rail-foot{margin-top:0;margin-left:auto}
  .col{margin-left:0}
  .topbar nav a{padding:0 13px;font-size:12px;letter-spacing:.06em}
  .topbar .stamp{display:none}
  .rows-head{grid-template-columns:34px 1fr;gap:10px}
  .rows-head span:nth-child(3),.rows-head span:nth-child(4){display:none}
  .row{grid-template-columns:34px 1fr;gap:10px}
  .row .d{grid-column:2;font-size:13px}
  .row .k{display:none}
  .toc ol{columns:1}
  .prose{padding:22px var(--pad) 34px}
  .conv .go{margin-left:0;width:100%}
  .conv .go a{flex:1;justify-content:center}
  .field label{min-width:0;width:100%}
}
@media(max-width:380px){
  .band h1{font-size:23px}
  .conv .code{font-size:23px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}