/* 問易 · 读经 SEO 内容页样式。tokens 抄自 server/public/index.html。 */
:root{
  --paper:#F7F4EE; --paper-2:#FBF9F4; --ink:#1C1A17; --ink-soft:#5A554C; --ink-faint:#8B8578;
  --zhu:#A8322A; --zhu-soft:#C7564B; --line:rgba(28,26,23,.12); --line-2:rgba(28,26,23,.07);
  --bar:rgba(247,244,238,.82);
  --serif:"Songti SC","STSong","Source Han Serif SC","Noto Serif CJK SC",Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper); color:var(--ink); font-family:var(--serif);
  line-height:1.75; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
a{color:var(--zhu); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:760px; margin:0 auto; padding:0 20px}

header.bar{position:sticky; top:0; z-index:10; background:var(--bar);
  backdrop-filter:saturate(150%) blur(10px); -webkit-backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--line-2)}
header.bar .wrap{display:flex; align-items:center; justify-content:space-between; height:56px}
.brand{font-size:20px; letter-spacing:.06em; color:var(--ink); font-weight:600}
.brand span{color:var(--zhu); font-size:13px; letter-spacing:.28em; text-transform:uppercase; margin-left:4px}
.topnav a{font-size:14px; color:var(--ink-soft); margin-left:18px}
.topnav a:hover{color:var(--zhu)}

main.read{padding:26px 0 8px}
.crumb{font-size:12.5px; color:var(--ink-faint); margin-bottom:16px; line-height:1.8}
.crumb a{color:var(--ink-soft)}
h1{font-size:30px; line-height:1.25; letter-spacing:.02em; margin:.1em 0 .3em}
h2{font-size:15px; letter-spacing:.16em; color:var(--zhu); font-weight:600; margin:34px 0 14px;
  padding-bottom:6px; border-bottom:1px solid var(--line-2)}
h3{font-size:17px; margin:22px 0 8px; font-weight:600}
p{margin:0 0 14px}
.lead{font-size:16px; color:var(--ink-soft)}
.muted{color:var(--ink-soft); font-size:14px}
.faint{color:var(--ink-faint); font-size:13px}

.hexhead{display:flex; align-items:center; gap:18px; margin:6px 0 8px}
.hexhead .glyph{font-size:64px; line-height:1; color:var(--zhu)}
.hexhead .meta .py{font-size:14px; letter-spacing:.16em; color:var(--zhu); text-transform:uppercase}
.hexhead .meta .tri{font-size:14px; color:var(--ink-soft); margin-top:4px}

table.struct{width:100%; border-collapse:collapse; margin:6px 0 4px; font-size:14.5px}
table.struct th,table.struct td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--line-2)}
table.struct th{color:var(--ink-faint); font-weight:600; width:34%; white-space:nowrap}

.canon{font-size:17px; line-height:2; margin:2px 0 6px}
.canon .label{color:var(--ink-faint); font-size:13px; margin-right:8px}

.line{border:1px solid var(--line-2); border-radius:12px; padding:14px 16px; margin:12px 0;
  background:var(--paper-2)}
.line .yname{font-size:14px; color:var(--zhu); font-weight:600; letter-spacing:.06em}
.line .yao{font-size:16.5px; line-height:1.95; margin:6px 0 4px}
.line .xiang{font-size:14.5px; color:var(--ink-soft); margin:0 0 6px}
.line .bian{font-size:13px; color:var(--ink-faint)}
details.notes{margin-top:8px; border-top:1px dashed var(--line); padding-top:8px}
details.notes summary{cursor:pointer; font-size:13px; color:var(--ink-soft); list-style:none}
details.notes summary::-webkit-details-marker{display:none}
details.notes summary::before{content:"▸ "; color:var(--zhu)}
details.notes[open] summary::before{content:"▾ "}
.note{margin:10px 0 0; font-size:14px; line-height:1.9}
.note cite{display:block; font-style:normal; color:var(--ink-faint); font-size:12.5px; margin-top:2px}

blockquote.zhu{margin:0 0 14px; padding:12px 16px; border-left:3px solid var(--zhu-soft);
  background:var(--paper-2); border-radius:0 10px 10px 0; font-size:15px; line-height:1.95}
blockquote.zhu cite{display:block; font-style:normal; color:var(--ink-faint); font-size:12.5px; margin-top:6px}

.cta{margin:30px 0 10px; padding:22px 20px; border:1px solid var(--line); border-radius:16px;
  background:var(--paper-2); text-align:center}
.cta .big{font-size:18px; margin:0 0 6px}
.cta .btn{display:inline-block; margin-top:12px; background:var(--ink); color:var(--paper);
  border-radius:12px; padding:11px 22px; font-size:15px}
.cta .btn:hover{text-decoration:none; opacity:.92}

.catalog{margin:8px 0}
.catrow{display:block; padding:12px 0; border-bottom:1px solid var(--line-2)}
.catrow .t{font-size:16px; color:var(--ink)}
.catrow .t .g{color:var(--zhu); margin-right:8px}
.catrow .c{font-size:13.5px; color:var(--ink-soft); margin-top:3px}
.catrow.locked .t{color:var(--ink-soft)}
.applabel{float:right; color:var(--ink-faint); font-size:12px; letter-spacing:.08em}
.entrances{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:14px 0 6px}
.entrances a{display:block; padding:14px 16px; border:1px solid var(--line); border-radius:12px;
  background:var(--paper-2); color:var(--ink)}
.entrances a:hover{border-color:var(--zhu); text-decoration:none}
.entrances a .s{display:block; font-size:12.5px; color:var(--ink-faint); margin-top:4px}
.xscroll{overflow-x:auto; margin:16px -20px 4px; padding:0 20px 8px}
table.lookup{width:100%; min-width:720px; border-collapse:separate; border-spacing:0; font-size:13.5px}
table.lookup th,table.lookup td{border:1px solid var(--line-2); border-left:0; border-top:0; padding:9px 10px; text-align:center}
table.lookup th:first-child,table.lookup td:first-child{border-left:1px solid var(--line-2)}
table.lookup tr:first-child th{border-top:1px solid var(--line-2)}
table.lookup th{background:var(--paper-2); color:var(--ink-soft); font-weight:600; white-space:nowrap}
table.lookup a{display:block; color:var(--ink); line-height:1.45}
table.lookup a:hover{color:var(--zhu); text-decoration:none}
table.lookup .hg{display:block; color:var(--zhu); font-size:22px; line-height:1}
.builder{margin:18px 0 20px; padding:16px; border:1px solid var(--line); border-radius:16px; background:var(--paper-2)}
.builder-grid{display:grid; grid-template-columns:minmax(190px,240px) 1fr; gap:16px; align-items:stretch}
.linebuttons{display:flex; flex-direction:column; gap:7px}
.linebtn{width:100%; min-height:38px; border:1px solid var(--line); border-radius:9px; background:var(--paper);
  color:var(--ink); font:600 13px/1.2 var(--serif); cursor:pointer}
.linebtn[aria-pressed="false"]{color:var(--ink-soft)}
.linebtn:hover{border-color:var(--zhu)}
.resultcard{border-left:3px solid var(--zhu-soft); padding:8px 0 8px 16px}
.resultcard .rglyph{font-size:48px; color:var(--zhu); line-height:1; margin-bottom:6px}
.resultcard a{font-size:18px; color:var(--ink); font-weight:600}
.resultcard .rmeta{font-size:13.5px; color:var(--ink-soft); margin-top:4px}

.trigram{border:1px solid var(--line-2); border-radius:12px; padding:14px 16px; margin:12px 0;
  background:var(--paper-2)}
.trigram .th{display:flex; align-items:center; gap:14px}
.trigram .g{font-size:40px; line-height:1; color:var(--zhu)}
.trigram .attrs{font-size:13.5px; color:var(--ink-soft); margin:8px 0 4px}
.trigram .attrs b{color:var(--ink); font-weight:600}

.chapter{margin:22px 0 8px}
.chapter .ctitle{font-size:19px; font-weight:600; margin:0 0 10px}
.chapter p{font-size:16px; line-height:2; color:var(--ink-soft)}
.chapter .reson{font-size:14.5px; color:var(--ink-faint); border-left:3px solid var(--line);
  padding-left:14px; margin:12px 0 0; font-style:italic}
.reson{font-size:14.5px; color:var(--ink-faint); border-left:3px solid var(--line);
  padding-left:14px; margin:18px 0 0; font-style:italic}
.story-meta{display:flex; flex-wrap:wrap; gap:8px 18px; margin:12px 0 4px; color:var(--ink-soft); font-size:14px}
.chapter-body p{font-size:16.5px; line-height:2.05; color:var(--ink-soft)}
.toc{margin:8px 0; font-size:14.5px; columns:2; column-gap:28px}
.toc .row{break-inside:avoid; padding:5px 0; color:var(--ink-soft)}
.toc .row b{color:var(--ink-faint); font-weight:400; margin-right:6px}
.copyline{font-size:13px; color:var(--zhu-soft); margin:10px 0 4px}
.story-index{display:grid; grid-template-columns:1fr; gap:14px; margin:18px 0 8px}
.story-index .card{padding:16px 18px; border:1px solid var(--line); border-radius:12px; background:var(--paper-2)}
.story-index .card h3{margin-top:0}
.story-index .card-actions{display:flex; flex-wrap:wrap; gap:10px 16px; margin-top:10px; font-size:14px}

.disclaimer{margin:30px 0 6px; padding-top:14px; border-top:1px solid var(--line-2);
  font-size:12.5px; color:var(--ink-faint); line-height:1.8}
.prevnext{display:flex; justify-content:space-between; gap:12px; margin:18px 0 6px; font-size:14px}
.prevnext span{color:var(--ink-faint)}

footer{padding:40px 0 60px; border-top:1px solid var(--line-2); margin-top:26px;
  text-align:center; color:var(--ink-soft); font-size:13.5px}
footer .links a{margin:0 10px}
footer .fine{font-size:12px; opacity:.8; margin-top:10px}

@media (max-width:640px){
  h1{font-size:25px}
  .hexhead .glyph{font-size:52px}
  .entrances{grid-template-columns:1fr}
  .builder-grid{grid-template-columns:1fr}
  .toc{columns:1}
}
@media (prefers-color-scheme:dark){
  :root{--paper:#16140F; --paper-2:#1E1B15; --ink:#EDE8DD; --ink-soft:#A39C8C; --ink-faint:#7C7565;
    --zhu:#E0796C; --zhu-soft:#E0796C; --line:rgba(237,232,221,.16); --line-2:rgba(237,232,221,.09);
    --bar:rgba(22,20,15,.82)}
}