/* 知否知否 · "文"板块的样式（黛紫藕荷，本轮调淡调亮）
   由 ziyu.css 的骨架换色而来；页面底、页头是深色（和"字·语""艺"同一类做法）。
   只在 body.theme-wen 的页面生效，不影响其他板块和首页。请先加载 ziyu.css，再加载本文件。 */
body.theme-wen {
  --zy-bg: #12091d;
  --zy-bg-2: #0a0613;
  --zy-paper: #1e1630;
  --zy-paper-2: #291f42;
  --zy-ink: #f7f0f9;
  --zy-ink-2: #f3e9f5;
  --zy-muted: #ded0e6;
  --zy-line: rgba(230, 190, 215, 0.34);
  --zy-green: #c589ac;
  --zy-green-2: #d7a0c0;
  --zy-gold: #f0cde3;
  --zy-gold-d: #fdf0f8;
  --zy-seal: #cd8cae;
  --zy-cream: #faf6fb;
  --zy-soft: #f2e5f3;
  background: var(--zy-bg);
  background-image: linear-gradient(180deg, #150e22 0%, #0a0613 100%);
  color: var(--zy-cream);
}
.theme-wen a { color: var(--zy-gold); }
.theme-wen [hidden] { display: none !important; }
.theme-wen a:hover { color: #fff0f8; }
.theme-wen a:focus-visible, .theme-wen button:focus-visible, .theme-wen summary:focus-visible {
  outline: 2px solid var(--zy-gold); outline-offset: 3px;
}

/* 页头页脚：和页面同为黛紫（页头不另设底色，透出页面的底） */
.theme-wen .site-header { border-bottom-color: rgba(230, 190, 215, 0.3); }
.theme-wen .brand, .theme-wen .brand:hover { color: #f6eff5; }
.theme-wen .brand-tagline { color: #ddd0e2; border-left-color: #7a6c8c; }
.theme-wen .site-nav a { color: #ece0ee; }
.theme-wen .site-nav a:hover, .theme-wen .site-nav a[aria-current="page"] { color: #fef4fb; }
.theme-wen .site-nav a[aria-current="page"] { box-shadow: inset 0 -1px 0 var(--zy-gold); }
.theme-wen .sub-nav { border-bottom-color: rgba(230, 190, 215, 0.3); background: rgba(10, 6, 19, 0.65); }
.theme-wen .sub-nav-mark { color: var(--zy-gold); border-right-color: #7a6c8c; }
.theme-wen .sub-nav a { color: #ece0ee; }
.theme-wen .sub-nav a:hover, .theme-wen .sub-nav a[aria-current="page"] { color: #fef4fb; }
.theme-wen .sub-nav a[aria-current="page"] { box-shadow: inset 0 -1px 0 var(--zy-gold); }
.theme-wen .footer-inner { border-top-color: rgba(230, 190, 215, 0.3); color: #ddd0e2; }
.theme-wen .empty-note { color: #ddd0e2; }

/* 页面骨架、标签页：把 ziyu.css 里偏竹绿的点缀色换成藕荷，并整体调亮 */
.theme-wen .zy-answer { color: #f6eef7; }
.theme-wen .zy-lead { color: var(--zy-soft); }
.theme-wen .zy-sec-title { color: var(--zy-gold); }
.theme-wen .zy-sec-title::after { background: rgba(230, 190, 215, 0.35); }
.theme-wen .zy-remind { color: #fbe4f2; }
.theme-wen .zy-callout { border-color: rgba(230, 190, 215, 0.6); color: #f9eff6; }
.theme-wen .zy-tab { color: #f3e8f2; border-color: rgba(230, 190, 215, 0.55); }
.theme-wen .zy-tab:hover { background: rgba(230, 190, 215, 0.15); }
.theme-wen .zy-tab[aria-selected="true"] { background: var(--zy-gold); border-color: var(--zy-gold); color: #2b2140; }
.theme-wen .zy-see a { border-color: rgba(230, 190, 215, 0.5); }
.theme-wen .zy-see a:hover { background: rgba(230, 190, 215, 0.15); }
.theme-wen .zy-tip { border-color: rgba(230, 190, 215, 0.6); }
.theme-wen .zy-tip p { color: #f9eff6; }
.theme-wen .zy-notes { border-left-color: var(--zy-gold); }
.theme-wen .zy-notes summary, .theme-wen .zy-notes-body p { color: #ece0ee; }
.theme-wen .zy-btn { color: var(--zy-green); border-color: var(--zy-green-2); }
.theme-wen .zy-btn:hover { background: var(--zy-green); color: var(--zy-paper); }

/* 卡片（这一页目前只有页头和"书"，卡片规则留着给以后的内容页用） */
.theme-wen .zy-card { border-color: var(--zy-line); }
.theme-wen .zy-card-name { color: #fbeaf5; }
.theme-wen .zy-kv .is-remind dd { background: var(--zy-paper); }
.theme-wen .zy-kv .is-quote dd { color: #fbeaf5; font-size: 16px; line-height: 1.85; }

/* ============================================================
   入口页：开卷两页式
   跟其它板块"并排卡片挑一个"的入口不一样：这里做成一本摊开的书——
   左边是窄窄一条目录（五个时代竖排的书脊，一直都看得见），
   右边是一大块摊开的书页；点目录里哪个时代，右边整页换成对应内容，
   中间一道书脊阴影，换页时右边会有一个轻微的翻页过渡。
   小屏幕上放不下"两页并排"，目录改成顶部一条可以横滑的书签栏，书页在下面。
   ============================================================ */
.theme-wen .wen-book {
  position: relative; display: flex; align-items: stretch; min-height: 380px;
  border-radius: 6px; overflow: hidden; perspective: 900px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--zy-line);
}
.theme-wen .wen-toc {
  flex: 0 0 230px; background: var(--zy-bg-2); padding: 22px 14px 22px 28px; overflow-y: auto; position: relative;
}
/* 目录左边一排线装书的"穿线孔"，暗示这一整本是"线装"起来的 */
.theme-wen .wen-toc::before {
  content: ''; position: absolute; top: 18px; bottom: 18px; left: 12px; width: 2px;
  background-image: radial-gradient(circle, rgba(237, 194, 222, 0.55) 1.6px, transparent 1.7px);
  background-size: 2px 22px; background-repeat: repeat-y;
}
.theme-wen .wen-book-spine {
  position: absolute; top: 0; bottom: 0; left: 230px; width: 26px; margin-left: -13px; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.04) 42%, rgba(255, 255, 255, 0.05) 58%, rgba(0, 0, 0, 0.22));
}
.theme-wen .wen-page-wrap {
  position: relative; flex: 1 1 auto; min-width: 0; padding: 36px 42px; display: flex; align-items: flex-start;
  transition: opacity 0.16s ease, transform 0.16s ease; transform-origin: left center;
  /* 底色不再是纯色，叠一层很淡的宣纸颗粒感 + 顶部微光，让书页有点纸的质地 */
  background-color: var(--zy-paper);
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 45%);
  background-size: 5px 5px, auto;
}
/* 右上角一道淡淡的折角阴影，暗示这是摊开的"一页"而不是一块平板 */
.theme-wen .wen-page-wrap::before {
  content: ''; position: absolute; top: 0; right: 0; width: 96px; height: 96px; pointer-events: none;
  background: linear-gradient(225deg, rgba(0, 0, 0, 0.16), transparent 60%);
}
.theme-wen .wen-page-wrap.is-flipping { opacity: 0; transform: translateX(8px) rotateY(5deg); }

.theme-wen .wen-toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.theme-wen .wen-toc-item { min-width: 0; }
.theme-wen .wen-toc-btn {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 10px;
  background: none; border: 0; border-radius: 6px; color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: background 0.18s ease;
}
.theme-wen .wen-toc-btn:hover { background: rgba(255, 255, 255, 0.07); }
.theme-wen .wen-toc-btn[aria-current="true"] { background: rgba(237, 194, 222, 0.18); box-shadow: inset 3px 0 0 var(--zy-gold); }
.theme-wen .wen-toc-dot {
  flex: none; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #f0bede, #cf8fb2 70%, #a5688e 100%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.theme-wen .wen-toc-mark { font-family: var(--display); font-size: 16px; line-height: 1; color: #fdf1f8; }
.theme-wen .wen-toc-label { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.theme-wen .wen-toc-era { font-size: 11px; letter-spacing: 0.16em; color: var(--zy-gold); }
.theme-wen .wen-toc-name { font-family: var(--display); font-size: 16.5px; line-height: 1.3; color: #f6eef6; }
.theme-wen .wen-toc-btn[aria-current="true"] .wen-toc-name { color: var(--zy-gold-d); }
.theme-wen .wen-toc-soon {
  margin-left: auto; flex: none; font-size: 10px; color: #fbe4f2;
  border: 1px dashed rgba(230, 190, 215, 0.55); border-radius: 8px; padding: 0 6px; line-height: 16px;
}

.theme-wen .wen-page { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.theme-wen .wen-page-idx { font-size: 12px; letter-spacing: 0.25em; color: var(--zy-gold); }
.theme-wen .wen-page-name { position: relative; margin: 0; padding-bottom: 14px; font-family: var(--display); font-size: 36px; line-height: 1.25; color: #fbeef7; }
/* 标题下的双线，是古籍、老报纸标题下常见的装饰，加一点"书卷气" */
.theme-wen .wen-page-name::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 84px; height: 5px;
  background-image: linear-gradient(var(--zy-gold), var(--zy-gold)), linear-gradient(var(--zy-gold), var(--zy-gold));
  background-size: 100% 1px; background-position: top, bottom; background-repeat: no-repeat; opacity: 0.75;
}
.theme-wen .wen-page-line { margin: 0; font-size: 16.5px; line-height: 1.95; color: var(--zy-soft); max-width: 46em; }
.theme-wen .wen-page-detail { margin: 0; font-size: 16px; line-height: 1.95; color: #f1e6f0; max-width: 46em; }
.theme-wen .wen-page-picks { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.theme-wen .wen-page-pick { display: flex; align-items: baseline; gap: 8px; font-size: 15px; color: #f5e6f4; }
.theme-wen .wen-pick-mark { font-size: 9px; color: var(--zy-gold); }
.theme-wen .wen-page-tags { margin: 0; font-size: 14px; letter-spacing: 0.06em; color: #f5e6f4; }
/* 右上角的印章：用数据里本来就有的那个"标记字"（诗/唐/宋/元/说），刻成一枚朱红小印 */
.theme-wen .wen-page-seal {
  position: absolute; top: 2px; right: 4px; z-index: 2; width: 46px; height: 46px; flex: none;
  display: flex; align-items: center; justify-content: center; border-radius: 4px; transform: rotate(-3deg);
  background: linear-gradient(160deg, #d24d6c, #a3283f);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.theme-wen .wen-page-seal span { font-family: 'Ma Shan Zheng', var(--display); font-size: 24px; line-height: 1; color: #fbe3e8; }
.theme-wen .wen-page-cta {
  align-self: flex-start; margin-top: 6px; display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px;
  font-size: 14.5px; letter-spacing: 0.05em; color: #2b2140; background: var(--zy-gold); border-radius: 3px; text-decoration: none;
}
.theme-wen .wen-page-cta:hover { background: #fff5fb; color: #2b2140; }
.theme-wen .wen-page-soon {
  align-self: flex-start; margin-top: 6px; font-size: 13px; letter-spacing: 0.12em; color: #fbe4f2;
  border: 1px dashed rgba(230, 190, 215, 0.55); border-radius: 10px; padding: 8px 18px;
}

@media (max-width: 760px) {
  .theme-wen .wen-book { flex-direction: column; min-height: 0; }
  .theme-wen .wen-book-spine { display: none; }
  .theme-wen .wen-toc { flex: none; width: 100%; overflow-x: auto; overflow-y: visible; padding: 14px 12px; }
  .theme-wen .wen-toc::before { display: none; }
  .theme-wen .wen-page-wrap::before { width: 64px; height: 64px; }
  .theme-wen .wen-page-seal { width: 36px; height: 36px; top: -2px; right: -2px; }
  .theme-wen .wen-page-seal span { font-size: 18px; }
  .theme-wen .wen-toc-list { flex-direction: row; gap: 8px; }
  .theme-wen .wen-toc-item { flex: none; }
  .theme-wen .wen-toc-btn { flex-direction: column; align-items: center; text-align: center; min-width: 96px; gap: 6px; padding: 10px 10px 8px; }
  .theme-wen .wen-toc-btn[aria-current="true"] { box-shadow: inset 0 -3px 0 var(--zy-gold); }
  .theme-wen .wen-toc-label { align-items: center; }
  .theme-wen .wen-toc-name { font-size: 13px; max-width: 84px; }
  .theme-wen .wen-toc-soon { margin-left: 0; }
  .theme-wen .wen-page-wrap {
    padding: 24px 20px; border-top: 1px solid var(--zy-line);
    box-shadow: inset 0 8px 14px -12px rgba(0, 0, 0, 0.6);
  }
  .theme-wen .wen-page-name { font-size: 27px; }
  .theme-wen .wen-page-line { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-wen .wen-page-wrap { transition: none; }
}
.theme-wen .wen-page-stat { margin: 0 0 10px; font-size: 13.5px; letter-spacing: 0.08em; color: var(--zy-gold); }

/* 入口页某一段下面的"更多篇目"链接（比如"诗经到魏晋"下面的诗经、楚辞两页） */
.theme-wen .wen-page-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 4px 0 0; font-size: 14px; letter-spacing: 0.05em; color: #f5e6f4; }
.theme-wen .wen-page-links .wen-links-label { color: var(--zy-gold); }
.theme-wen .wen-page-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; color: #fbeef7; text-decoration: none; border: 1px solid var(--zy-gold); border-radius: 3px; }
.theme-wen .wen-page-links a:hover, .theme-wen .wen-page-links a:focus-visible { background: rgba(84, 48, 120, 0.7); }