@charset "UTF-8";
/*
　　样式之布 · 报章
　　一匹长卷，不落机，故不分页。素白是主，字是客。
　　本色作底（未漂白的布），靛作记（染坊里蓝到腕子的手），山外的笔另作一色。
*/

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

:root {
  --bg: #f1ede2;   /* 本色布，未漂白 */
  --ink: #2b2721;  /* 墨 */
  --dian: #33456a; /* 靛：染坊的蓝、山中的记 */
  --ruo: #6f695b;  /* 弱：题辞、布边、辅助（对本色底 4.7:1，过 AA；再淡便不达标） */
  --chao: #6d6a61; /* 山外文书之色，比正文冷、淡 */
  --xian: #cfc7b4; /* 淡线 */
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Source Han Serif SC", "Noto Serif CJK SC", "Noto Serif SC",
    "Songti SC", STSong, SimSun, serif;
  font-size: clamp(1.05rem, 0.92rem + 0.5vw, 1.2rem);
  line-height: 2.05;
  overflow-wrap: break-word;
}

a { -webkit-tap-highlight-color: transparent; }

::selection { background: var(--dian); color: #f3efe3; }

a:focus-visible {
  outline: 2px solid var(--dian);
  outline-offset: 3px;
}

/* ———— 一匹长卷 ———— */

main {
  max-width: 34em;
  margin: 0 auto;
  padding: 0 1.4em 6em;
  padding-inline: max(1.4em, env(safe-area-inset-left))
    max(1.4em, env(safe-area-inset-right));
}

p {
  margin: 0;
  text-indent: 2em;
  text-align: justify;
  text-justify: inter-character;
  hanging-punctuation: allow-end;
}

/* 章：一日七迁其位。 */
.zhang {
  margin-top: 6em;
  scroll-margin-top: 2rem;
}

h2 {
  margin: 0 0 2.8em;
  font-size: 1.3em;
  font-weight: 600;
  text-align: center;
  text-indent: 0;
  letter-spacing: 0.08em;
}

/* 场景之间：断线盘成一环，像蜕了一层雪。 */
hr {
  width: 0.5em;
  height: 0.5em;
  margin: 3em auto;
  border: 1px solid var(--ruo);
  border-radius: 50%;
  background: none;
  opacity: 0.7;
}

/* 山外文书：官册、验单、案卷、木签——山外的笔。
   做工的女人在这些字里被抄成“妇人”“若干”“祷祝”。抹除自在其中，不必点破。 */
em.chao {
  font-style: normal;
  color: var(--chao);
  letter-spacing: 0.02em;
}
/* 独占一段的山外文书：像贴上来的一纸官帐 */
p:has(> em.chao:only-child) {
  text-indent: 0;
  margin: 1.8em 0 1.8em 1.6em;
  padding-left: 1em;
  border-left: 2px solid var(--xian);
  font-size: 0.9em;
  line-height: 1.95;
}

/* 门边木牌：结绳，三十文。织布，不要钱。 */
b.pai {
  font-weight: 600;
  letter-spacing: 0.12em;
}
p:has(> b.pai:only-child) {
  text-indent: 0;
  text-align: center;
  margin: 2.4em auto;
  padding: 0.8em 0;
  border-top: 1px solid var(--xian);
  border-bottom: 1px solid var(--xian);
  max-width: 20em;
}

/* ———— 卷首 ———— */

.juanshou {
  padding-top: 5rem;
}

h1 {
  margin: 0;
  font-size: 2rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.18em;
}

.tici {
  text-indent: 0;
  text-align: center;
  color: var(--ruo);
  font-size: 0.95em;
  margin: 1.8em auto 0;
  max-width: 26em;
}

/* 章目：织在布边的记号，帐册一样朴素 */
.mulu {
  margin: 3.5em auto 0;
  max-width: 22em;
}
.mulu ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mulu li + li { margin-top: 0.7em; }
.mulu a {
  display: block;
  color: var(--ink);
  text-decoration: none;
  text-align: center;
  letter-spacing: 0.06em;
  padding: 0.2em 0;
  border-bottom: 1px solid transparent;
}
.mulu a:hover,
.mulu a:focus-visible {
  color: var(--dian);
  border-bottom-color: var(--xian);
}

/* 卷次：三卷并列，本卷不作链。环上题辞相衔，环不自道。 */
.juanci {
  margin: 3.2em auto 0;
  text-align: center;
  font-size: 0.88em;
  letter-spacing: 0.1em;
  color: var(--ruo);
}
.juanci .dang,
.juanci a { margin: 0 0.9em; }
.juanci .dang { color: var(--ink); }
.juanci a {
  color: var(--ruo);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 0.15em;
}
.juanci a:hover,
.juanci a:focus-visible { color: var(--dian); border-bottom-color: var(--xian); }

/* ———— 布边：一列极淡的襄位，随卷而立 ———— */

.bianma {
  position: fixed;
  top: 50%;
  /* 用 em（随正文缩放），与 main 的 34em 布宽同尺——正文放大时布边随之外让，
     不像 rem 那样固定在 16px 而被涨宽的正文盖住。 */
  left: max(1.1rem, calc(50% - 21.5em));
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  z-index: 2;
}
.bianma a {
  color: var(--ruo);
  text-decoration: none;
  font-size: 0.82rem;
  line-height: 1;
  padding: 0.15em;
}
.bianma a:hover,
.bianma a:focus-visible { color: var(--dian); }
@media (max-width: 54em) {
  .bianma { display: none; }
}

/* ———— 径入正文 ———— */

.tiao {
  position: absolute;
  left: -200vw;
  top: 1rem;
  z-index: 3;
  background: var(--dian);
  color: #f3efe3;
  text-decoration: none;
  padding: 0.4em 1em;
}
.tiao:focus { left: 1rem; }

/* ———— 卷尾 ———— */

.juanwei {
  max-width: 34em;
  margin: 7em auto 0;
  padding: 3em 1.4em 5em;
  text-align: center;
}
.fanhui { text-indent: 0; margin: 0 0 2.4em; }
.fanhui a {
  color: var(--ruo);
  text-decoration: none;
  letter-spacing: 0.14em;
  border-bottom: 1px solid var(--xian);
  padding-bottom: 0.2em;
}
.fanhui a:hover,
.fanhui a:focus-visible { color: var(--dian); border-color: var(--dian); }
.dizhu {
  text-indent: 0;
  color: var(--ruo);
  letter-spacing: 0.16em;
  font-size: 0.92em;
  margin: 0;
}

/* ———— 素白之处（无字页）———— */

.kong {
  min-height: 62vh;
  max-width: 34em;
  margin: 0 auto;
  padding: 0 1.4em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.6em;
  text-align: center;
}
.kong p { text-indent: 0; margin: 0; }
.kong .fanhui { margin-top: 2em; }

/* ———— 窄幅 ———— */

@media (max-width: 40em) {
  .juanshou { padding-top: 3.5rem; }
  .zhang { margin-top: 4.5em; }
  h1 { font-size: 1.7rem; }
  h2 { margin-bottom: 2.2em; }
  hr { margin: 2.6em auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* 求高对比者，弱色让位于墨；染色只深不改相 */
@media (prefers-contrast: more) {
  :root { --ruo: #55503f; --chao: #4f4c44; --xian: #a89e87; }
  .hualou { --ran: #713f2e; }
  .beigui { --gumo: #59492f; }
}

/* ———— 花楼大机·之二皮 ————
   之一是素机：布边（selvage）作记、素白本色。
   之二是花楼大机：布边转花本（脚子线上的结），
   色只染州机——山外文书着一缕染，山中正文仍守本色素白。 */

.hualou { --ran: #8a5340; }  /* 染：州机的一缕（朱赭），别于山中的靛 */

/* 布边 → 花本：一束脚子线自花楼垂下，章各一结 */
.hualou .bianma {
  align-items: center;
  gap: 1.6em;
  padding: 0.5em 0;
}
.hualou .bianma::before {          /* 脚子线：垂直的花本线 */
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  margin-left: -0.5px;
  background: var(--xian);
  z-index: -1;
}
.hualou .bianma a {
  display: grid;
  place-items: center;
  width: 1.3em;
  height: 1.3em;
  padding: 0;
  color: var(--ruo);
}
.hualou .bianma a span {           /* 结：脚子线上的一个结 */
  display: block;
  width: 0.44rem;                  /* rem，不用 em——结上无字（font-size:0），em 会算成 0 */
  height: 0.44rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: var(--bg);
  font-size: 0;
  line-height: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.hualou .bianma a:hover,
.hualou .bianma a:focus-visible { color: var(--dian); }
.hualou .bianma a:hover span,
.hualou .bianma a:focus-visible span { background: var(--dian); }

/* 色是州机染的：官册·案卷·验单着一缕染；山中正文不染 */
.hualou em.chao { color: var(--ran); }
.hualou p:has(> em.chao:only-child) { border-left-color: var(--ran); }

/* ———— 北柜·之三皮 ————
   之三仍是那匹长布，帐自此由活人来记。布边转骨签（北柜纪年之签，
   每折一枚，有年月）；故牍之墨淡到发褐——山外文书作故墨色，
   山中正文仍守本色素白。 */

.beigui { --gumo: #75634c; }  /* 故墨：两百年狱牍，墨淡到发褐（对本色底 4.9:1，过 AA） */

.beigui .bianma {
  align-items: center;
  gap: 1.4em;
}
.beigui .bianma a {
  display: grid;
  place-items: center;
  width: 1.3em;
  padding: 0;
  color: var(--ruo);
}
.beigui .bianma a span {           /* 签：北柜一折一枚 */
  display: block;
  width: 0.5rem;                   /* rem，同花本之结——签上无字（font-size:0） */
  height: 1.2rem;
  border: 1px solid currentColor;
  border-radius: 2px;
  background: var(--bg);
  font-size: 0;
  line-height: 0;
  transition: border-color 0.15s ease;
}
.beigui .bianma a span::before {   /* 穿签的孔 */
  content: "";
  display: block;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: currentColor;
  margin: 0.22rem auto 0;
}
.beigui .bianma a:hover,
.beigui .bianma a:focus-visible { color: var(--dian); }

/* 故牍：定罪的笔留了全名。墨旧，不与州机同色 */
.beigui em.chao { color: var(--gumo); }
.beigui p:has(> em.chao:only-child) { border-left-color: var(--gumo); }

/* ———— 付梓 ———— */

@media print {
  .tiao, .bianma, .fanhui { display: none; }
  :root {
    --bg: #fff; --ink: #000; --dian: #2a3a5c;
    --ruo: #444; --chao: #333; --xian: #bbb;
  }
  body { background: #fff; color: #000; font-size: 11pt; }
  p { orphans: 2; widows: 2; }
}