/* WRITING · 文字成册 —— 私人杂志室
   系统:纸面 + 墨 + 细线;每本刊一条书脊签色(--accent)贯穿书架/展刊/阅读三态。
   字体三角色:界面无衬线 / 题名粗宋 / 长文宋体。 */

:root {
  /* 与 DailyPoster 的 styles.css / appearance.css 共用同一组主题色值。 */
  --paper: #f6f6f3;
  --paper-2: #fff;
  --ink: #20211f;
  --ink-2: #686b64;
  --ink-3: #686b64;
  --hairline: #dcded7;
  --brand: #d74832;
  --surface-hover: #e8eae4;
  --sans: -apple-system, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --serif: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", "SimSun", serif;
  --accent: #d74832;
  --soft-fill: #eceee8;
  --quote-fill: #eceee8;
  --quote-ink: #20211f;
  --selection: #f3baae;
  --paper-rule-ink: #dcded7;
  --paper-margin-ink: #f3baae;
  --book-paper: #fff;
  --inner-cover-start: #eceee8;
  --inner-cover-end: #f6f6f3;
}

html[data-theme="dark"] {
  --paper: #171918;
  --paper-2: #212422;
  --ink: #eceee8;
  --ink-2: #a8afa5;
  --ink-3: #a8afa5;
  --hairline: #383e38;
  --brand: #ed8d77;
  --surface-hover: #2b312b;
  --soft-fill: #212622;
  --quote-fill: #212622;
  --quote-ink: #eceee8;
  --selection: #526044;
  --paper-rule-ink: #383e38;
  --paper-margin-ink: #526044;
  --book-paper: #212422;
  --inner-cover-start: #212622;
  --inner-cover-end: #171918;
}

* { box-sizing: border-box; }

html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
[hidden] { display: none !important; }
main, .shelf-item { --accent-ink: var(--accent); }
html[data-theme="dark"] main, html[data-theme="dark"] .shelf-item {
  --accent-ink: color-mix(in srgb, var(--accent) 38%, #eceee8);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

::selection { background: var(--selection); }
html[data-theme="dark"] ::selection { color: #fff; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ---------- 页顶(内页静头部)与页脚 ---------- */

.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1080px;
  margin: 0 auto;
  padding: 1.15rem clamp(1.2rem, 4vw, 2.5rem) 1rem;
  border-bottom: 1px solid var(--hairline);
}

.site-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--ink);
  text-decoration: none;
  flex-shrink: 0;
}
.brand-icon { width: 38px; height: 38px; color: var(--brand); flex: none; }
.brand-wordmark { display: grid; gap: 3px; }
.brand-wordmark b { font: 700 1rem/1.2 var(--serif); letter-spacing: 0.14em; }
.brand-wordmark small { font: 9px/1.2 var(--sans); letter-spacing: 0.32em; color: var(--ink-2); }
.site-mark:hover .brand-icon { transform: rotate(-4deg); }
.brand-icon { transition: transform 180ms ease; }

.site-all {
  font-size: 0.82rem;
  color: var(--ink-2);
  text-decoration: none;
  letter-spacing: 0.12em;
}
.site-all:hover { color: var(--ink); }

.site-actions { display: flex; align-items: center; gap: 1.35rem; }
:is(.appearance-toggle, .immersive-entry, .immersive-exit) { background: none; border: 0; cursor: pointer; font: inherit; }
:is(.appearance-toggle, .immersive-entry, .immersive-exit){display:inline-flex;align-items:center;justify-content:center;width:44px;min-height:44px;padding:8px;border-radius:6px;color:var(--ink-2);flex:none;transition:background-color .15s,color .15s,scale .15s cubic-bezier(.23,1,.32,1)}
:is(.appearance-toggle, .immersive-entry, .immersive-exit):hover{background:var(--hairline);color:var(--ink)}
:is(.appearance-toggle, .immersive-entry, .immersive-exit):active{scale:.96}
:is(.appearance-toggle, .immersive-entry, .immersive-exit) svg{width:16px;height:16px;flex:none}
:is(.appearance-toggle, .immersive-entry, .immersive-exit){position:relative}
.appearance-tooltip{position:absolute;top:calc(100% + 7px);right:0;z-index:50;width:max-content;max-width:calc(100vw - 40px);padding:5px 9px;border:1px solid var(--hairline);border-radius:10px;background:var(--paper-2);color:var(--ink);box-shadow:0 3px 12px #00000014;font:12px/1.5 var(--sans);white-space:nowrap;pointer-events:none;visibility:hidden;opacity:0;transform:translateY(-3px);transition:opacity .15s,transform .2s,visibility .15s}
:is(.appearance-toggle, .immersive-entry, .immersive-exit):focus-visible .appearance-tooltip{visibility:visible;opacity:1;transform:translateY(0)}
@media(hover:hover){:is(.appearance-toggle, .immersive-entry, .immersive-exit):hover .appearance-tooltip{visibility:visible;opacity:1;transform:translateY(0);transition-delay:.2s}}
@media(prefers-reduced-motion:reduce){.appearance-tooltip{transition:none;transform:none}}

.site-foot {
  max-width: 1080px;
  margin: 4.5rem auto 0;
  padding: 0 clamp(1.2rem, 4vw, 2.5rem);
  border-top: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 110px;
  font-family: "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
}
.footer-brand { display: inline-flex; align-items: center; gap: 8px; flex: none; font-size: 23px; font-weight: 750; letter-spacing: -1.3px; white-space: nowrap; text-decoration: none; }
.footer-wordmark { display: inline-flex; align-items: baseline; }
.footer-star { width: 28px; height: 28px; flex: none; color: #873c42; }
.footer-dot { color: #873c42; }
.footer-name { font-weight: 400; font-size: 0.78em; color: var(--ink-2); letter-spacing: -1px; }
.footer-name > span { opacity: 0.45; }
.site-foot > p { font-size: 11px; color: var(--ink-2); white-space: nowrap; margin: 0; }
.footer-top { font-size: 10px; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.site-foot a:hover { color: var(--brand); }
html[data-theme="dark"] :is(.footer-dot, .footer-star) { color: var(--brand); }
@media (max-width: 760px) {
  .site-foot { padding: 24px clamp(12px, 3.6vw, 24px); flex-wrap: nowrap; gap: clamp(5px, 1.5vw, 12px); min-height: 0; }
  .footer-brand { font-size: clamp(13px, 4.1vw, 21px); letter-spacing: -0.8px; gap: 5px; }
  .footer-star { width: clamp(16px, 5vw, 25px); height: clamp(16px, 5vw, 25px); }
  .footer-name { letter-spacing: -0.6px; }
  .site-foot > p { font-size: clamp(7px, 2.05vw, 10px); }
  .footer-top { font-size: clamp(8px, 2.2vw, 10px); }
}

main { min-height: 62vh; }

/* ---------- 封面:真实图像 + 轻厚度 + 书脊签 ---------- */

.cover {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  border-radius: 2px;
  overflow: hidden;
  background: var(--paper-2);
  box-shadow:
    inset -1px 0 0 rgba(35, 39, 32, 0.16),
    2px 3px 8px rgba(35, 39, 32, 0.1),
    7px 11px 20px -14px rgba(35, 39, 32, 0.22);
}

/* 书脊签:每刊左缘一道颜色,是全站唯一的识别元素 */
.cover::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--accent);
  z-index: 2;
  opacity: 0.94;
}

.cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 封面图缺失时的排版底(不替代正式封面) */
.cover-typo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10%;
}

.cover-typo i {
  font-family: var(--serif);
  font-style: normal;
  writing-mode: vertical-rl;
  letter-spacing: 0.3em;
  font-size: 1.05rem;
  color: var(--ink);
  max-height: 78%;
  overflow: hidden;
}

.cover-football-tactics { background: linear-gradient(165deg, #28402f, #1c2a21); }
.cover-football-tactics .cover-typo i { color: #e9f0e2; }
.cover-on-the-pitch { background: linear-gradient(170deg, #434a54, #2a3038); }
.cover-on-the-pitch .cover-typo i { color: #f4efe2; }
.cover-old-letters { background: #eee9db; border: 1px solid var(--hairline); }
.cover-between-pages { background: linear-gradient(200deg, #3b3831, #282520); }
.cover-between-pages .cover-typo i { color: #ece7d8; }
.cover-life-notes { background: linear-gradient(170deg, #6a7880, #525f66); }
.cover-life-notes .cover-typo i { color: #f2efe6; }

/* ---------- 书架 ---------- */

.shelf {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(2rem, 6vh, 4rem) clamp(1.2rem, 4vw, 2.5rem) 1rem;
}

.shelf-masthead {
  position: relative;
  margin-bottom: clamp(2.2rem, 6vh, 3.4rem);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 1.8rem;
}

.edition-label { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1.2rem; font-size: 0.62rem; letter-spacing: 0.18em; color: var(--ink-2); }
.edition-label::before { content: ""; width: 18px; height: 3px; background: var(--brand); }
.edition-label span { letter-spacing: 0.1em; }
.collection-seal { position: absolute; right: 0; top: 1.5rem; width: 74px; height: 86px; display: grid; align-content: center; justify-content: center; border: 1px solid var(--brand); color: var(--brand); transform: rotate(5deg); outline: 1px solid var(--brand); outline-offset: -5px; }
.collection-seal span { font: 700 1.1rem/1.55 var(--serif); letter-spacing: 0.2em; padding-left: 0.2em; }
.collection-seal small { font-size: 8px; letter-spacing: 0.12em; text-align: center; margin-top: 4px; }

.masthead-cn {
  font-family: var(--serif);
  font-size: clamp(2rem, 4.2vw, 2.7rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.15;
  margin: 0 0 1rem;
}

.shelf-intro {
  font-family: var(--serif);
  font-size: 0.98rem;
  color: var(--ink-2);
  margin: 0;
  line-height: 2;
  max-width: 34em;
}

.shelf-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: clamp(1.1rem, 2.6vw, 2rem);
}

.shelf-item { margin: 0; }

.cover-link { text-decoration: none; display: block; }

.cover-link .cover {
  transition: transform 240ms cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 240ms ease;
}

.cover-link:hover .cover,
.cover-link:focus-visible .cover {
  transform: translateY(-4px);
  box-shadow:
    inset -1px 0 0 rgba(35, 39, 32, 0.16),
    3px 5px 10px rgba(35, 39, 32, 0.12),
    10px 15px 26px -16px rgba(35, 39, 32, 0.28);
}

/* 每本封面立在各自的一条标签线上 */
.shelf-meta {
  position: relative;
  display: block;
  margin-top: 0.95rem;
  border-top: 1px solid var(--hairline);
  padding-top: 0.75rem;
}

.shelf-number { display: block; margin: 0 0 0.5rem; color: var(--brand); font: 0.66rem/1.2 "Menlo", monospace; letter-spacing: 0.12em; }
.shelf-number::after { content: ""; display: inline-block; vertical-align: middle; width: 16px; height: 1px; background: var(--hairline); margin-left: 8px; }

.shelf-title {
  display: block;
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
}

.shelf-note {
  display: block;
  font-size: 0.74rem;
  color: var(--ink-3);
  margin-top: 0.3rem;
  letter-spacing: 0.04em;
  transition: color 200ms ease;
}

.cover-link:hover .shelf-note,
.cover-link:focus-visible .shelf-note { color: var(--accent-ink, var(--accent)); }

/* ---------- 面包屑 ---------- */

.crumb {
  max-width: 1080px;
  margin: 0 auto;
  padding: 1rem clamp(1.2rem, 4vw, 2.5rem) 0;
  font-size: 0.8rem;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
}
.crumb a { text-decoration: none; color: var(--ink-2); }
.crumb a:hover { color: var(--ink); }

/* ---------- 展刊:同一本刊物被翻开 ---------- */

.issue-spread {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(1.4rem, 4vh, 2.8rem) clamp(1.2rem, 4vw, 2.5rem) 2rem;
  display: grid;
  grid-template-columns: minmax(230px, 285px) minmax(0, 1fr);
  gap: clamp(2.4rem, 5.5vw, 5.5rem);
  perspective: 1600px;
  align-items: start;
}

.issue-side .cover-big {
  margin: 0 0 1.7rem;
  transform-origin: left center;
}

.issue-side .cover-big::before { width: 8px; }

.issue-kicker {
  font-size: 0.74rem;
  color: var(--ink-2);
  letter-spacing: 0.14em;
  margin: 0 0 0.5rem;
}

.issue-title {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0 0 1rem;
  line-height: 1.3;
}

.issue-desc {
  font-family: var(--serif);
  font-size: 0.92rem;
  line-height: 2.05;
  color: var(--ink-2);
  margin: 0 0 1.6rem;
  max-width: 30em;
}

.issue-start {
  display: inline-block;
  text-decoration: none;
  font-family: var(--serif);
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  color: var(--accent-ink, var(--accent));
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.18rem;
}
.issue-start:hover { color: var(--ink); }

.toc-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--serif);
  font-size: 0.86rem;
  letter-spacing: 0.34em;
  color: var(--ink-2);
  margin: 0.4rem 0 0.6rem;
}
.toc-label span { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--ink-3); }

.toc-list { list-style: none; margin: 0; padding: 0; }

.toc-item a {
  display: grid;
  grid-template-columns: 2.7rem 1fr;
  gap: 0.9rem;
  padding: 0.95rem 0.6rem;
  text-decoration: none;
  border-left: 2px solid transparent;
  border-radius: 1px;
  transition: background 160ms ease;
}

.toc-item a:hover { background: var(--soft-fill); }

.toc-no {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--accent-ink, var(--accent));
  letter-spacing: 0.06em;
  padding-top: 0.1rem;
}

.toc-body { display: flex; flex-direction: column; gap: 0.28rem; min-width: 0; }

.toc-title { font-size: 0.98rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1.55; }

.toc-excerpt {
  font-size: 0.8rem;
  color: var(--ink-2);
  line-height: 1.8;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.toc-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.7rem;
  color: var(--ink-3);
  letter-spacing: 0.06em;
}

/* 当前篇:书脊签落在条目左缘 */
.toc-item.current a {
  border-left-color: var(--accent-ink, var(--accent));
  background: var(--soft-fill);
}
.toc-item.current .toc-title { font-weight: 700; }

/* ---------- 阅读 ---------- */

.article-layout {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(1.2rem, 3.5vh, 2.2rem) clamp(1.2rem, 4vw, 2.5rem) 2rem;
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
}

.article-layout-single { grid-template-columns: minmax(0, 1fr); max-width: 760px; }

.article-rail { position: relative; }

.rail-issue { text-decoration: none; display: block; margin-bottom: 1.5rem; }

.cover-mini { max-width: 108px; }
.cover-mini::before { width: 4px; }
.cover-mini .cover-typo i { font-size: 0.66rem; letter-spacing: 0.22em; }

.rail-issue-name {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--serif);
  font-size: 0.88rem;
  margin-top: 0.7rem;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.rail-issue-name b { font-family: var(--sans); font-weight: 400; font-size: 0.7rem; color: var(--ink-3); white-space: nowrap; }
.rail-issue:hover .rail-issue-name b { color: var(--accent-ink, var(--accent)); }

.rail-toc {
  border-top: 1px solid var(--hairline);
  position: sticky;
  top: 6.5rem;
  max-height: calc(100vh - 7.5rem);
  overflow: auto;
}

.rail-toc summary {
  cursor: pointer;
  list-style: none;
  padding: 0.75rem 0.15rem;
  font-size: 0.74rem;
  letter-spacing: 0.3em;
  color: var(--ink-3);
}
.rail-toc summary::-webkit-details-marker { display: none; }
.rail-toc summary::after { content: "+"; float: right; color: var(--ink-3); }
.rail-toc[open] summary::after { content: "–"; }

.rail-list { list-style: none; margin: 0; padding: 0 0.15rem 1rem; }

.rail-list a {
  display: block;
  text-decoration: none;
  font-size: 0.8rem;
  line-height: 1.65;
  padding: 0.38rem 0.5rem;
  color: var(--ink-2);
  border-left: 2px solid transparent;
}
.rail-list a:hover { color: var(--ink); background: var(--soft-fill); }

/* 当前章:细书签线 */
.rail-list li.current a {
  color: var(--ink);
  font-weight: 600;
  border-left-color: var(--accent-ink, var(--accent));
}

.article { min-width: 0; }

.article-head { margin-bottom: 2.4rem; }

.article-title {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.45;
  margin: 0;
}

/* 题名下的一小道书脊色,与目录当前项呼应;挂在题名上,工具行落在其后 */
.article-title::after {
  content: "";
  display: block;
  width: 2.1rem;
  height: 3px;
  background: var(--accent);
  margin-top: 1.35rem;
}

.collected-note { font-size: 0.8rem; color: var(--ink-2); margin: 1.2rem 0 0; }
.collected-note a { color: var(--accent-ink, var(--accent)); }

.article-body {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.95;
  max-width: 35em;
}

.article-body p { margin: 0 0 1.25em; }

/* 小节层级:一二级带书脊色短线的节拍,三四级靠字号与行内细签区分 */
.article-body h1, .article-body h2, .article-body h3,
.article-body h4, .article-body h5, .article-body h6 {
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.5;
}
.article-body h1 { font-size: 1.32em; margin: 2.5em 0 0.9em; }
.article-body h2 { font-size: 1.2em; margin: 2.5em 0 0.9em; }
.article-body h3 { font-size: 1.08em; margin: 2.1em 0 0.8em; }
.article-body h4 { font-size: 1.02em; margin: 1.8em 0 0.7em; }
.article-body h5 { font-size: 0.98em; margin: 1.7em 0 0.65em; }
.article-body h6 { font-size: 0.95em; margin: 1.6em 0 0.6em; color: var(--ink-2); }

/* 节题上方一道短书脊色细线,像刊物里的小节起讫 */
.article-body h1::before, .article-body h2::before {
  content: "";
  display: block;
  width: 1.7rem;
  height: 3px;
  border-radius: 1px;
  background: var(--accent);
  opacity: 0.72;
  margin-bottom: 0.55rem;
}

/* 更深的小节:行内细签,不再另起装饰 */
.article-body h4::before, .article-body h5::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 0.78em;
  border-radius: 1px;
  background: var(--accent);
  opacity: 0.8;
  margin-right: 0.5em;
  vertical-align: -0.06em;
}
.article-body h6::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 0.72em;
  border-radius: 1px;
  background: var(--ink-3);
  margin-right: 0.5em;
  vertical-align: -0.05em;
}

/* 开篇的第一个小节不必先空一大截 */
.article-body > h1:first-child, .article-body > h2:first-child,
.article-body > h3:first-child, .article-body > h4:first-child { margin-top: 0.4em; }

.article-body a {
  color: var(--ink);
  text-decoration-color: var(--ink-3);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
}
.article-body a:hover { color: var(--ink); text-decoration-color: var(--ink); }

.article-body a[data-zoom] { display: block; text-decoration: none; }

.article-body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.7em auto;
  cursor: zoom-in;
  background: var(--paper-2);
  box-shadow: 0 1px 2px rgba(35, 39, 32, 0.07), 0 8px 18px -14px rgba(35, 39, 32, 0.22);
}

.article-body hr {
  border: none;
  border-top: 1px solid var(--hairline);
  margin: 2.6em auto;
  width: 36%;
}

.article-body li { margin: 0.3em 0; }

/* ---------- 正文修饰:引用 / 加粗 / 着重 / 列表 / 表格 / 代码 ---------- */

/* 引用:细书脊线 + 浅纸底 + 引号细节;多段与嵌套仍可读,不砌卡片墙 */
.article-body blockquote {
  position: relative;
  margin: 1.9em 0;
  padding: 0.8em 1.35em 0.9em 1.7em;
  border-left: 3px solid var(--accent-ink, var(--accent));
  border-radius: 0 2px 2px 0;
  background: var(--quote-fill);
  color: var(--quote-ink);
}
.article-body blockquote::before {
  content: "“";
  position: absolute;
  left: 0.42em;
  top: 0.44em;
  font-family: var(--serif);
  font-size: 1.3em;
  line-height: 1;
  color: var(--accent-ink, var(--accent));
  opacity: 0.55;
}
.article-body blockquote > p { margin: 0 0 0.55em; }
.article-body blockquote > p:last-child { margin-bottom: 0; }
.article-body blockquote > ul,
.article-body blockquote > ol { margin: 0.2em 0 0.6em; }
.article-body blockquote li { margin: 0.18em 0; }
.article-body blockquote blockquote { margin: 0.7em 0; background: none; }

/* 加粗:更足的字重与墨色,衬一条极浅书脊色底纹(逐行),长段加粗不刺眼 */
.article-body strong {
  font-weight: 700;
  color: var(--ink);
  background-image: linear-gradient(
    to top,
    color-mix(in srgb, var(--accent-ink, var(--accent)) 14%, transparent) 0,
    color-mix(in srgb, var(--accent-ink, var(--accent)) 14%, transparent) 0.46em,
    transparent 0.46em
  );
}

/* 中文强调:着重号,不强行斜体(不支持着重号的浏览器退回原样) */
.article-body em {
  font-style: normal;
  -webkit-text-emphasis: filled dot;
  text-emphasis: filled dot;
  -webkit-text-emphasis-color: var(--accent-ink, var(--accent));
  text-emphasis-color: var(--accent-ink, var(--accent));
  -webkit-text-emphasis-position: under;
  text-emphasis-position: under;
}

/* 列表:书脊色的安静标记 */
.article-body ul, .article-body ol { margin: 1.1em 0 1.25em; padding-left: 1.5em; }
.article-body li::marker { color: var(--accent-ink, var(--accent)); }
.article-body ol li::marker { font-family: var(--serif); }
.article-body li > ul, .article-body li > ol { margin: 0.3em 0 0.35em; }

/* 表格与代码:暂无真实用例,给出与纸面协调的安全底 */
.article-body table {
  display: block;
  border-collapse: collapse;
  margin: 1.7em 0;
  font-size: 0.92em;
  line-height: 1.6;
  max-width: 100%;
  overflow-x: auto;
}
.article-body th, .article-body td {
  border: 1px solid var(--hairline);
  padding: 0.42em 0.75em;
  text-align: left;
}
.article-body th {
  font-family: var(--sans);
  font-size: 0.88em;
  font-weight: 600;
  background: var(--soft-fill);
}
.article-body code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.86em;
  background: var(--soft-fill);
  padding: 0.12em 0.38em;
  border-radius: 3px;
}
.article-body pre {
  margin: 1.6em 0;
  padding: 1em 1.2em;
  overflow-x: auto;
  background: var(--soft-fill);
  border: 1px solid var(--hairline);
  border-radius: 3px;
}
.article-body pre code { background: none; padding: 0; font-size: 0.9em; }

.article-end {
  max-width: 35em;
  margin-top: 3.2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: center;
}

.end-prev, .end-next { text-decoration: none; display: flex; flex-direction: column; gap: 0.25rem; }
.end-prev span, .end-next span { font-size: 0.7rem; color: var(--ink-3); letter-spacing: 0.2em; }
.end-prev b, .end-next b { font-family: var(--serif); font-size: 0.95rem; font-weight: 700; line-height: 1.5; }
.end-next { text-align: right; margin-left: auto; }
.end-prev:hover b, .end-next:hover b { color: var(--accent-ink, var(--accent)); }
.end-back {
  font-size: 0.78rem;
  color: var(--ink-2);
  text-decoration: none;
  letter-spacing: 0.14em;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  white-space: nowrap;
}
.end-back:hover { border-color: var(--ink-2); color: var(--ink); }
.end-blank { display: block; }

/* ---------- 文章工具行与沉浸按钮(由 JS 创建,禁用 JS 不出现死控件) ---------- */

.article-tools { margin: 1.2rem 0 0; }


/* 退出沉浸:页面级固定按钮,始终可见,不依赖 hover */
.reading-dock {
  position: fixed;
  z-index: 40;
  right: clamp(1rem, 3vw, 1.6rem);
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  padding: 0;
  gap: 0.35rem;
  background: var(--paper);
}
.reading-dock .appearance-tooltip { top: auto; bottom: calc(100% + 7px); }

/* ---------- 沉浸阅读(页面级:不支持/拒绝原生全屏时同样完整可用) ---------- */

html.reading .site-head,
html.reading .site-foot,
html.reading .crumb,
html.reading .article-rail,
html.reading .article-tools { display: none; }

html.reading main { min-height: 100vh; }

html.reading .article-layout {
  display: block;
  max-width: 760px;
  padding-top: clamp(2.2rem, 6vh, 3.6rem);
  padding-bottom: 3rem;
}
html.reading .article-end { margin-top: 3.4rem; margin-bottom: 1.6rem; }
html.reading .article { max-width: 35em; margin-inline: auto; font-size: 18px; }
html.reading .article-body { max-width: 100%; }

/* ---------- 全部文字 ---------- */

.all-articles { max-width: 760px; margin: 0 auto; padding: clamp(2rem, 5vh, 3.5rem) clamp(1.2rem, 4vw, 2.5rem) 2rem; }

.all-title { font-family: var(--serif); font-size: 1.6rem; letter-spacing: 0.14em; margin: 0 0 0.6rem; }

.all-intro { font-size: 0.84rem; color: var(--ink-2); margin: 0 0 2.5rem; }

.all-group { margin-bottom: 2.4rem; }

.all-group h2 {
  font-family: var(--serif);
  font-size: 1rem;
  letter-spacing: 0.2em;
  font-weight: 700;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.all-count { font-size: 0.7rem; color: var(--ink-3); font-family: var(--sans); letter-spacing: 0.08em; }

.all-group ul { list-style: none; margin: 0; padding: 0; }

.all-group li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
  padding: 0.55rem 0.2rem;
  border-bottom: 1px dashed var(--hairline);
  flex-wrap: wrap;
}
.all-group li > a { text-decoration: none; font-family: var(--serif); font-size: 0.98rem; }
.all-group li > a:hover { color: var(--ink-2); }
.all-date { font-size: 0.74rem; color: var(--ink-3); white-space: nowrap; }
.all-date a { color: inherit; }
.all-date a:hover { color: var(--ink); }

/* ---------- 404 ---------- */

.notfound { max-width: 760px; margin: 0 auto; padding: 5rem clamp(1.2rem, 4vw, 2.5rem); text-align: center; }
.notfound h1 { font-family: var(--serif); letter-spacing: 0.2em; }
.notfound a { color: var(--ink-2); }

/* ---------- 图片放大 ---------- */

.lightbox {
  border: none;
  background: transparent;
  padding: 0;
  max-width: 94vw;
  max-height: 94vh;
}
.lightbox::backdrop { background: rgba(35, 39, 32, 0.85); }
.lightbox img { display: block; max-width: 94vw; max-height: 86vh; width: auto; height: auto; margin: 0 auto; }
.lightbox-close {
  display: block;
  margin: 0.9rem auto 0.2rem;
  background: none;
  border: 1px solid rgba(244, 241, 232, 0.4);
  border-radius: 999px;
  color: #f4f1e8;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  padding: 0.4rem 1.2rem;
  cursor: pointer;
}
.lightbox-close:hover { border-color: #f4f1e8; }
.lightbox .lightbox-hint {
  display: block;
  text-align: center;
  color: rgba(244, 241, 232, 0.55);
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  padding: 0.7rem 0 0.2rem;
}

/* ---------- 取书/翻开动画的临时场景(结束即拆除,无交互元素) ---------- */

html.book-hold { overflow: hidden; }

.book-scene {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  perspective: 1500px;
}

.book-dim {
  position: absolute;
  inset: 0;
  background: rgba(35, 39, 32, 0.3);
  opacity: 0;
}

.book {
  position: absolute;
  transform-style: preserve-3d;
  will-change: transform;
}

/* 右侧纸页:横线与行高对齐的手记纸(借鉴 MarkdownPoster 的做法) */
.book-paper {
  position: absolute;
  inset: 0;
  border-radius: 0 2px 2px 0;
  background: var(--book-paper);
  box-shadow:
    inset 2px 0 8px -4px rgba(35, 39, 32, 0.28),
    inset 0 0 0 1px rgba(35, 39, 32, 0.05),
    3px 5px 16px -8px rgba(35, 39, 32, 0.38);
  overflow: hidden;
}

.book-paper-in {
  --paper-rule: 26px;
  position: absolute;
  inset: 0;
  padding: 1.15rem 1.25rem 0.9rem 1.5rem;
  opacity: 0;
  transform: translateY(6px);
  line-height: var(--paper-rule);
  background-image: linear-gradient(to bottom, transparent calc(var(--paper-rule) - 1px), var(--paper-rule-ink) calc(var(--paper-rule) - 1px));
  background-size: 100% var(--paper-rule);
  background-origin: content-box;
}

/* 一条页边线,像手记本的边栏 */
.book-paper-in::after {
  content: "";
  position: absolute;
  left: 1rem;
  top: 0.65rem;
  bottom: 0.55rem;
  width: 1px;
  background: rgba(51, 86, 124, 0.2);
}

.book-paper-in::before {
  content: "目 录";
  display: block;
  font-family: var(--sans);
  font-size: 0.58rem;
  letter-spacing: 0.5em;
  color: var(--ink-3);
}

.bp-title {
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink);
  margin: 0.2rem 0 0;
}

.bp-toc {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  counter-reset: bp;
}

.bp-toc li {
  font-family: var(--serif);
  font-size: 0.76rem;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bp-toc li::before {
  counter-increment: bp;
  content: counter(bp, decimal-leading-zero);
  color: var(--accent-ink, var(--accent));
  margin-right: 0.55em;
  letter-spacing: 0.08em;
}

/* 翻转的封面:正面为原封面克隆,反面为内封 */
.book-fly {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform-style: preserve-3d;
  will-change: transform;
}

.bf-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 2px;
}

.bf-front {
  box-shadow:
    inset -1px 0 0 rgba(35, 39, 32, 0.16),
    5px 9px 22px -10px rgba(35, 39, 32, 0.42);
}

.book-scene .cover.book-cover-clone {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 2px;
  box-shadow: none;
}

.bf-back {
  transform: rotateY(180deg);
  background: linear-gradient(100deg, var(--inner-cover-start), var(--inner-cover-end));
  box-shadow: inset -6px 0 0 0 var(--accent, var(--ink-3)), inset 0 0 0 1px rgba(35, 39, 32, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10%;
  font-family: var(--serif);
  font-size: 1rem;
  letter-spacing: 0.34em;
  color: var(--ink-2);
  writing-mode: vertical-rl;
}

/* ---------- 《旧日来信》两首诗:横线手记纸阅读区 ---------- */

.article-body.ruled-paper {
  --rule-step: 34px;
  --rule-ink: var(--paper-rule-ink);
  padding: 0 0.4rem 1.7rem 2.3rem;
  line-height: var(--rule-step);
  background-image:
    linear-gradient(to right, transparent 1.45rem, var(--paper-margin-ink) 1.45rem, var(--paper-margin-ink) calc(1.45rem + 1px), transparent calc(1.45rem + 1px)),
    linear-gradient(to bottom, transparent calc(var(--rule-step) - 1px), var(--rule-ink) calc(var(--rule-step) - 1px));
  background-size: 100% 100%, 100% var(--rule-step);
  background-origin: padding-box, content-box;
}

/* 段落间距取整到行距,多行段落都与横线对齐 */
.article-body.ruled-paper p { margin: 0 0 var(--rule-step); }
.article-body.ruled-paper a[data-zoom] { margin: var(--rule-step) auto; }
.article-body.ruled-paper img { margin: 0 auto; background: #fff; }

/* ---------- 同页切换过渡 ---------- */

/* 展刊:封面 400ms 小角度转动 + 位移,刊名与目录随后浮现 */
main.enter[data-view="issue"] .issue-side .cover-big {
  animation: cover-open 400ms cubic-bezier(0.22, 0.68, 0.32, 1) both;
}
main.enter[data-view="issue"] .issue-side > *:not(.cover-big) {
  animation: side-in 340ms ease 160ms both;
}
main.enter[data-view="issue"] .issue-toc {
  animation: toc-in 360ms ease 140ms both;
}

@keyframes cover-open {
  from { opacity: 0.4; transform: perspective(1200px) translateX(40px) rotateY(-13deg) scale(0.955); }
  to { opacity: 1; transform: perspective(1200px) translateX(0) rotateY(0) scale(1); }
}
@keyframes side-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes toc-in {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: none; }
}

/* 阅读:轻淡入 */
main.enter[data-view="article"] .article,
main.enter[data-view="all"] .all-articles,
main.enter[data-view="notfound"] .notfound {
  animation: view-in 200ms ease both;
}
@keyframes view-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* 回到书架:封面回落 */
main.enter[data-view="shelf"] .shelf-item {
  animation: shelf-back 280ms ease both;
}
main.enter[data-view="shelf"] .shelf-item:nth-child(2) { animation-delay: 40ms; }
main.enter[data-view="shelf"] .shelf-item:nth-child(3) { animation-delay: 80ms; }
main.enter[data-view="shelf"] .shelf-item:nth-child(4) { animation-delay: 120ms; }
main.enter[data-view="shelf"] .shelf-item:nth-child(5) { animation-delay: 160ms; }
@keyframes shelf-back {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .cover-link .cover { transition: none; }
}

/* ---------- 手机 ---------- */

@media (max-width: 1100px) {
  .shelf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2.4rem; }
}

@media (max-width: 960px) {
  .issue-spread { grid-template-columns: 1fr; }
  .issue-side .cover-big { max-width: 205px; }
  .issue-side, .issue-toc { max-width: 560px; margin-left: auto; margin-right: auto; width: 100%; }

  .article-layout { grid-template-columns: 1fr; }
  .article-rail {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
    border-bottom: 1px solid var(--hairline);
    padding-bottom: 1.1rem;
    margin-bottom: 1.6rem;
  }
  .rail-issue { margin-bottom: 0; flex-shrink: 0; }
  .cover-mini { max-width: 82px; }
  .rail-issue-name { flex-direction: column; gap: 0.15rem; margin-top: 0; }
  .rail-toc {
    position: static;
    max-height: none;
    flex: 1;
    border-top: none;
    overflow: visible;
  }
  .rail-toc summary { padding-top: 0.3rem; padding-bottom: 0.55rem; min-height: 44px; }
  .rail-list a { padding: 0.42rem 0.5rem; }
  .article-body { font-size: 16.5px; }
}

@media (max-width: 640px) {
  .shelf { padding-top: 1.6rem; }
  .masthead-cn { letter-spacing: 0.1em; }
  .shelf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; column-gap: 1.1rem; }
  .shelf-title { font-size: 0.95rem; }
  .shelf-note { font-size: 0.7rem; }
  .article-body { font-size: 17px; }
  .article-body.ruled-paper {
    --rule-step: 32px;
    padding-left: 1.75rem;
    padding-right: 0.2rem;
    background-image:
      linear-gradient(to right, transparent 1rem, var(--paper-margin-ink) 1rem, var(--paper-margin-ink) calc(1rem + 1px), transparent calc(1rem + 1px)),
      linear-gradient(to bottom, transparent calc(var(--rule-step) - 1px), var(--rule-ink) calc(var(--rule-step) - 1px));
  }
  .article-layout { padding-left: 1.1rem; padding-right: 1.1rem; }
  .article-end { grid-template-columns: 1fr; gap: 0.9rem; }
  .end-next { text-align: left; margin-left: 0; }
  .end-back { justify-self: start; }
  .brand-icon { width: 30px; height: 30px; }
  .site-mark { gap: 0.45rem; }
  .brand-wordmark b { font-size: 0.85rem; }
  .brand-wordmark small { font-size: 8px; letter-spacing: 0.22em; }
  .collection-seal { width: 48px; height: 62px; top: 2.2rem; }
  .collection-seal span { font-size: 0.8rem; }
  .collection-seal small { font-size: 6px; }
  .shelf-intro { max-width: calc(100% - 60px); }
  .edition-label { font-size: 0.56rem; gap: 0.4rem; }
  .site-head { padding-top: 1rem; padding-bottom: 0.9rem; }

  /* 手机:引用与节题更紧凑,退出按钮底部居中,拇指可及 */
  .article-body blockquote { margin: 1.5em 0; padding: 0.7em 1em 0.8em 1.45em; }
  .article-body blockquote::before { font-size: 1.1em; left: 0.32em; }
  .article-body h1, .article-body h2 { margin-top: 2em; }
  .article-body ul, .article-body ol { padding-left: 1.35em; }
  .reading-dock { white-space: nowrap; max-width: calc(100vw - 1rem); }
  .site-actions { gap: 0.65rem; }


}

/* ---------- 打印:移除纸纹,只留文字 ---------- */

@media print {
  .article-body.ruled-paper { background: none !important; }
  .book-scene { display: none !important; }
  .article-tools, .reading-dock, [data-theme-slot] { display: none !important; }
  html[data-theme] { --paper: white; --paper-2: #f4f4f4; --ink: #222; --ink-2: #444; --ink-3: #555; --hairline: #ddd; --quote-ink: #333; --quote-fill: #f5f5f5; color-scheme: light; }
}

@media(prefers-reduced-motion:reduce){:is(.appearance-toggle, .immersive-entry, .immersive-exit){transition:none}}

/* 阅读页固定工具栏，入口随滚动始终可用。 */
body[data-view="article"] .site-head {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--paper);
}

.article-body :is(h1,h2,h3,h4,h5,h6) { scroll-margin-top: 100px; }
@media (max-width: 960px) {
  .article-layout { row-gap: 1.2rem; padding-top: 1rem; }
  .article-rail { align-items: center; gap: 1rem; padding-bottom: 0.8rem; margin-bottom: 0; }
  .rail-issue { display: flex; align-items: center; gap: 0.65rem; flex: 1; min-width: 0; }
  .cover-mini { width: 34px; max-width: 34px; flex: none; }
  .rail-issue-name { font-size: 0.8rem; line-height: 1.5; min-width: 0; }
  .rail-toc { flex: 0 0 90px; align-self: flex-start; }
  .rail-toc summary { padding: 0.8rem 0; letter-spacing: 0.12em; }
  .article-rail:has(.rail-toc[open]) { flex-wrap: wrap; }
  .rail-toc[open] { flex-basis: 100%; }
  .rail-toc[open] .rail-list { max-height: 45vh; overflow: auto; }
  .article-head { margin-bottom: 1.5rem; }
}
@media (max-width: 640px) {
  body[data-view="article"] .site-head { padding-block: 0.5rem; gap: 0.5rem; }
  body[data-view="article"] .site-actions { gap: 0.35rem; }
  body[data-view="article"] .site-all { display: none; }

  .article-title::after { margin-top: 0.9rem; }
  .article-body :is(h1,h2,h3,h4,h5,h6) { scroll-margin-top: 78px; }
}
@media print { .site-head .immersive-entry { display: none !important; } }