:root {
  --paper: #f1e5cb;
  --paper-deep: #e5d2ad;
  --paper-light: #f8f0df;
  --ink: #2b241d;
  --ink-soft: #665747;
  --cinnabar: #a33b2c;
  --cinnabar-dark: #7f2e25;
  --gold: #b78d3f;
  --jade: #416b61;
  --line: rgba(73, 54, 34, 0.22);
  --shadow: rgba(63, 42, 25, 0.12);
  --serif: "Noto Serif CJK SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --old-song: "KingHwa_OldSong", "京華老宋体", "京华老宋体", "Songti SC Black", "STSongti-SC-Black", "Noto Serif CJK SC", "Songti SC", serif;
  --sans: "Noto Sans CJK SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 14% 8%, rgba(255, 250, 232, 0.6), transparent 34rem),
    linear-gradient(135deg, #ead9b9 0%, var(--paper) 36%, #ead7b4 100%);
  font-family: var(--sans);
}

.paper-noise {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.2;
  background-image:
    repeating-linear-gradient(0deg, rgba(79, 55, 29, 0.045) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(79, 55, 29, 0.035) 0 1px, transparent 1px 7px);
  mix-blend-mode: multiply;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem clamp(1rem, 4vw, 3.5rem);
  background: rgba(241, 229, 203, 0.9);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}

.brand { display: flex; align-items: center; gap: 0.8rem; color: inherit; text-decoration: none; }
.brand-seal {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  color: #f8e7c7;
  background: var(--cinnabar);
  border: 1px solid rgba(120, 38, 28, 0.55);
  box-shadow: inset 0 0 0 3px rgba(250, 226, 185, 0.12);
  font-family: var(--serif);
  font-size: 0.72rem;
  line-height: 1.1;
  writing-mode: vertical-rl;
  letter-spacing: 0.15em;
}
.brand-text { display: grid; gap: 0.12rem; }
.brand-text strong { font-family: var(--serif); font-size: 1.18rem; font-weight: 600; letter-spacing: 0.12em; }
.brand-text small { color: var(--ink-soft); font-size: 0.68rem; letter-spacing: 0.06em; }
.header-actions { display: flex; align-items: center; gap: 0.75rem; }
.script-switch { display: flex; border: 1px solid var(--line); background: rgba(255, 250, 238, 0.38); }
.script-button, .menu-button {
  border: 0;
  color: var(--ink);
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.script-button { width: 2.3rem; height: 2.1rem; font-family: var(--serif); }
.script-button + .script-button { border-left: 1px solid var(--line); }
.script-button.is-active { color: #fff8e8; background: var(--cinnabar); }
.menu-button { display: none; border: 1px solid var(--line); padding: 0.5rem 0.75rem; }

.page-shell {
  display: grid;
  grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
  gap: clamp(1.4rem, 3vw, 3.4rem);
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 2.5rem 0 4rem;
}

.toc-panel { position: sticky; top: 5.6rem; align-self: start; max-height: calc(100vh - 7rem); overflow: auto; padding-right: 0.3rem; background-color: transparent; background-image: linear-gradient(180deg, rgba(241, 229, 203, 0.62) 0%, rgba(241, 229, 203, 0.69) 42%, rgba(241, 229, 203, 0.78) 100%), url("assets/sidebar-reference.png"); background-position: 40% 18%, 40% 18%; background-repeat: no-repeat, no-repeat; background-size: cover, cover; }
.toc-heading { padding: 0 0 1rem; border-bottom: 1px solid var(--line); }
.eyebrow { color: var(--cinnabar); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase; }
.toc-heading h1 { margin: 0.4rem 0 0.2rem; font-family: var(--serif); font-size: 2rem; font-weight: 500; }
.toc-heading p { margin: 0; color: var(--ink-soft); font-size: 0.76rem; }
.toc-list { display: grid; gap: 0.15rem; margin: 1rem 0; padding: 0; list-style: none; counter-reset: toc; }
.toc-list a { display: grid; grid-template-columns: 1.75rem 1fr; gap: 0.45rem; align-items: baseline; padding: 0.5rem 0.35rem; color: var(--ink-soft); border-bottom: 1px dotted rgba(86, 63, 34, 0.2); text-decoration: none; }
.toc-list a:hover, .toc-list a.is-active { color: var(--cinnabar-dark); background: rgba(163, 59, 44, 0.05); }
.toc-list .toc-number { color: var(--gold); font-family: var(--serif); font-size: 0.72rem; }
.toc-list .toc-title { font-family: var(--serif); font-size: 0.84rem; }
.toc-note { display: flex; gap: 0.6rem; margin-top: 1.2rem; padding: 0.85rem; color: var(--ink-soft); border: 1px solid var(--line); background: rgba(255, 250, 238, 0.25); font-size: 0.7rem; line-height: 1.6; }
.seal-dot { flex: 0 0 auto; width: 0.7rem; height: 0.7rem; margin-top: 0.25rem; background: var(--cinnabar); border-radius: 50%; }

.reading-column { min-width: 0; }
.chapter-intro { position: relative; overflow: hidden; margin-bottom: 2.2rem; padding: clamp(1.4rem, 4vw, 3.1rem); border: 1px solid var(--line); background: linear-gradient(145deg, rgba(255, 249, 232, 0.63), rgba(229, 207, 165, 0.45)); box-shadow: 0 1.5rem 3rem var(--shadow); }
.chapter-intro::before, .chapter-intro::after { position: absolute; content: ""; pointer-events: none; border: 1px solid rgba(163, 59, 44, 0.22); }
.chapter-intro::before { inset: 0.65rem; }
.chapter-intro::after { inset: 0.95rem; border-color: rgba(183, 141, 63, 0.24); }
.chapter-kicker { position: relative; color: var(--cinnabar); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.18em; }
.chapter-title-row { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-top: 1.35rem; }
.chapter-overline { margin: 0 0 0.4rem; color: var(--ink-soft); font-size: 0.78rem; letter-spacing: 0.06em; }
.chapter-intro h2 { margin: 0; font-family: var(--serif); font-size: clamp(2.5rem, 7vw, 5.6rem); font-weight: 500; line-height: 0.95; letter-spacing: 0.05em; }
.chapter-intro h2 span { color: var(--cinnabar-dark); font-size: 0.45em; letter-spacing: 0.12em; }
.intro-seal { display: grid; place-items: center; width: 4.2rem; height: 4.2rem; color: var(--cinnabar-dark); border: 2px solid var(--cinnabar); font-family: var(--serif); font-size: 1.5rem; line-height: 0.8; text-align: center; transform: rotate(3deg); }
.chapter-lead { position: relative; max-width: 38rem; margin: 2rem 0 1.3rem; font-family: var(--serif); font-size: 1rem; line-height: 2; }
.chapter-meta { position: relative; display: flex; flex-wrap: wrap; gap: 0.45rem 1.2rem; color: var(--ink-soft); font-size: 0.7rem; }
.chapter-meta span { letter-spacing: 0.02em; }

.article-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 2rem 0 1rem; }
.toolbar-actions { display: flex; align-items: center; gap: 0.75rem; }
.article-toolbar h2 { margin: 0.25rem 0 0; font-family: var(--serif); font-size: 1.8rem; font-weight: 500; }
.view-note { color: var(--ink-soft); font-size: 0.72rem; }

.reading-list { display: grid; gap: 1rem; }
.passage { scroll-margin-top: 6rem; padding: clamp(1rem, 2.5vw, 1.65rem); border: 1px solid var(--line); background: rgba(255, 251, 239, 0.47); box-shadow: 0 0.7rem 1.8rem rgba(70, 49, 27, 0.06); }
.passage-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(163, 59, 44, 0.24); }
.passage-number { color: var(--cinnabar); font-family: var(--serif); font-size: 0.75rem; letter-spacing: 0.12em; }
.passage-title {
  display: inline-block;
  margin: 0.25rem 0 0;
  padding: 0.24em 0.56em 0.2em;
  color: #201a14;
  background: #ead4a5;
  border-radius: 1rem;
  box-shadow: inset 0 -1px 0 rgba(116, 80, 26, 0.05);
  font-family: var(--old-song);
  font-size: clamp(1.65rem, 3.2vw, 2.25rem);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.3;
  letter-spacing: 0.025em;
}
.passage-status { color: var(--ink-soft); font-size: 0.64rem; white-space: nowrap; }
.passage-body { padding-top: 1.25rem; }
.original-block { min-width: 0; }
.block-label { margin: 0 0 0.55rem; color: var(--cinnabar-dark); font-size: 0.8rem; font-weight: 700; line-height: 1.25; letter-spacing: 0.1em; }
.original-line { position: relative; }
.original-text {
  display: inline;
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 2.08;
  letter-spacing: 0.045em;
}
.annotated-term {
  position: relative;
  display: inline-block;
  isolation: isolate;
  margin: 0;
  padding: 0 0.05em 0.24em;
  color: inherit;
  background: transparent;
  border: 0;
  font: inherit;
  line-height: 1.1;
  vertical-align: baseline;
  cursor: pointer;
}
.annotated-term::before {
  content: "";
  position: absolute;
  z-index: 0;
  right: -0.05em;
  bottom: 0.16em;
  left: -0.05em;
  height: 0.38em;
  background: rgba(183, 141, 63, 0.25);
}
.annotated-term::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: -0.05em;
  bottom: 0.01em;
  left: -0.05em;
  border-top: 1px dashed var(--cinnabar);
}
.term-text { position: relative; z-index: 1; }
.annotated-term:hover,
.annotated-term:focus-visible { color: var(--cinnabar-dark); outline: none; }
.annotated-term:hover::before,
.annotated-term:focus-visible::before { background: rgba(163, 59, 44, 0.11); }
.translate-toggle {
  display: inline-grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  margin: 0 0 0 0.45rem;
  padding: 0;
  color: var(--cinnabar-dark);
  background: var(--paper-light);
  border: 1px solid rgba(163, 59, 44, 0.42);
  border-radius: 50%;
  font-family: var(--old-song);
  font-size: 0.8rem;
  line-height: 1;
  vertical-align: super;
  cursor: pointer;
}
.translate-toggle[aria-expanded="true"] { color: #fff8e8; background: var(--cinnabar); }
.vernacular-panel {
  margin-top: 1.2rem;
  padding: 0.9rem 1rem;
  border-left: 3px solid var(--jade);
  background: rgba(65, 107, 97, 0.065);
}
.vernacular-heading,
.english-heading { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.vernacular-heading > span { color: var(--ink-soft); font-size: 0.64rem; }
.vernacular-text { margin: 0; color: #4d4032; font-family: var(--serif); font-size: 1.12rem; line-height: 2.02; }
.english-panel,
.knowledge-panel {
  margin-top: 2rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(183, 141, 63, 0.34);
}
.manual-badge { padding: 0.2rem 0.48rem; color: var(--jade); border: 1px solid rgba(65, 107, 97, 0.28); background: rgba(65, 107, 97, 0.07); font-size: 0.62rem; }
.english-editor,
.knowledge-editor {
  display: block;
  width: 100%;
  min-height: 6.8rem;
  margin-top: 0.2rem;
  padding: 0.9rem 1rem;
  color: var(--ink);
  background: rgba(255, 251, 239, 0.54);
  border: 1px solid rgba(86, 63, 34, 0.22);
  border-radius: 0.2rem;
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.85;
  resize: vertical;
}
.english-editor:focus,
.knowledge-editor:focus { border-color: var(--cinnabar); outline: 2px solid rgba(163, 59, 44, 0.09); }
.editor-note { margin: 0.45rem 0 0; color: var(--ink-soft); font-size: 0.64rem; }
.passage-footer { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; padding-top: 0.7rem; color: var(--ink-soft); border-top: 1px dotted rgba(86, 63, 34, 0.22); font-size: 0.65rem; }
.passage-footer a { margin-left: auto; color: var(--cinnabar-dark); text-decoration: none; }

/* 可编辑的小标题 */
.is-editable { cursor: text; outline: none; }
.is-editable:hover { text-decoration: underline dotted rgba(163, 59, 44, 0.5); text-underline-offset: 0.22em; }
.is-editable:focus { text-decoration: underline dotted var(--cinnabar); text-underline-offset: 0.22em; }

/* 编辑控制台 */
.editor-console { padding: clamp(1.1rem, 3vw, 1.8rem); border: 1px solid var(--line); background: rgba(255, 251, 239, 0.5); box-shadow: 0 0.7rem 1.8rem rgba(70, 49, 27, 0.06); }
.console-field { display: grid; gap: 0.35rem; color: var(--ink-soft); font-size: 0.72rem; }
.console-field--token { padding-bottom: 0.9rem; border-bottom: 1px solid var(--line); }
.console-fields { display: grid; gap: 0.85rem; margin: 1.1rem 0; }
.console-field input { padding: 0.5rem 0.6rem; color: var(--ink); background: rgba(255, 253, 246, 0.92); border: 1px solid var(--line); font: inherit; font-size: 0.8rem; }
.console-field input:focus { border-color: var(--cinnabar); outline: none; }
.console-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.console-status { margin: 0.9rem 0 0; min-height: 1.2em; color: var(--ink-soft); font-size: 0.72rem; }
.console-status.is-error { color: var(--cinnabar-dark); }
.console-status.is-ok { color: var(--jade); }
.export-button { padding: 0.45rem 0.68rem; color: var(--cinnabar-dark); background: transparent; border: 1px solid rgba(163, 59, 44, 0.3); font: inherit; font-size: 0.68rem; cursor: pointer; }
.export-button:hover { background: rgba(163, 59, 44, 0.07); }

.selection-menu { position: fixed; z-index: 70; padding: 0.2rem; background: var(--paper-light); border: 1px solid rgba(86, 63, 34, 0.22); box-shadow: 0 0.7rem 1.8rem rgba(49, 31, 17, 0.18); }
.selection-menu button { padding: 0.38rem 0.62rem; color: var(--cinnabar-dark); background: transparent; border: 0; font: inherit; font-size: 0.7rem; cursor: pointer; }
.selection-menu button:hover { background: rgba(163, 59, 44, 0.08); }
.annotation-backdrop { position: fixed; inset: 0; z-index: 55; background: transparent; }
.annotation-popover.is-editor {
  top: 0.75rem !important;
  right: auto;
  bottom: 0.75rem;
  left: 50% !important;
  width: min(64rem, calc(100vw - 1.5rem));
  max-height: none;
  transform: translateX(-50%) !important;
}

.annotation-popover {
  position: fixed;
  z-index: 60;
  width: min(64rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow: auto;
  color: var(--ink);
  background: var(--paper-light);
  border: 1px solid rgba(86, 63, 34, 0.3);
  box-shadow: 0 1.4rem 3rem rgba(49, 31, 17, 0.23);
}
.annotation-close { position: absolute; top: 0.5rem; right: 0.65rem; z-index: 2; width: 1.8rem; height: 1.8rem; color: var(--ink-soft); background: transparent; border: 0; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.annotation-view-inner { padding: 1.3rem 1.35rem 1.2rem; }
.annotation-kicker { color: var(--cinnabar); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.14em; }
.annotation-title-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.3rem; }
.annotation-title-row h2 { margin: 0; font-family: var(--old-song); font-size: 2.5rem; font-weight: 400; line-height: 1.15; }
.annotation-seal { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; color: var(--cinnabar-dark); border: 1px solid var(--cinnabar); font-family: var(--serif); font-size: 1rem; }
.annotation-title { margin: 0.15rem 0 0.8rem; color: var(--ink-soft); font-family: var(--serif); font-size: 0.98rem; }
.annotation-source { padding: 0.55rem 0; border-top: 1px solid var(--cinnabar); border-bottom: 1px solid var(--cinnabar); color: var(--cinnabar-dark); font-size: 0.74rem; font-weight: 700; }
.annotation-view blockquote { margin: 1.05rem 0; padding: 0.7rem 0.9rem; color: #3e342a; background: rgba(183, 141, 63, 0.1); border-left: 3px solid var(--gold); font-family: var(--serif); font-size: 1.02rem; line-height: 1.9; }
.annotation-explanation { margin: 0; font-family: var(--serif); font-size: 0.96rem; line-height: 2; }
.annotation-example { margin-top: 0.9rem; padding-top: 0.75rem; color: var(--ink-soft); border-top: 1px dotted var(--line); font-family: var(--serif); font-size: 0.82rem; line-height: 1.8; }
.annotation-example span { display: inline-block; margin-right: 0.45rem; color: var(--cinnabar-dark); font-size: 0.66rem; font-weight: 700; }
.annotation-actions { display: flex; align-items: center; gap: 0.65rem; margin-top: 1.15rem; padding-top: 0.85rem; border-top: 1px solid var(--line); }
.annotation-editor { padding: 1.3rem 1.35rem 0; }
.annotation-form-grid { display: grid; grid-template-columns: minmax(12rem, 0.72fr) minmax(16rem, 1fr); gap: 0.85rem 1rem; margin-top: 1rem; }
.annotation-form-grid label { display: grid; gap: 0.28rem; color: var(--ink-soft); font-size: 0.68rem; }
.annotation-form-grid label.wide { grid-column: 1 / -1; }
.annotation-form-grid input,
.annotation-form-grid textarea { width: 100%; padding: 0.55rem 0.65rem; color: var(--ink); background: rgba(255, 251, 239, 0.72); border: 1px solid rgba(86, 63, 34, 0.22); font: inherit; font-size: 0.82rem; }
.annotation-form-grid textarea { resize: vertical; }
.annotation-form-actions { position: sticky; bottom: 0; z-index: 4; display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem; margin: 1rem -1.35rem 0; padding: 0.85rem 1.35rem 1rem; background: linear-gradient(to bottom, rgba(248, 240, 223, 0.75), var(--paper-light) 30%); border-top: 1px solid rgba(86, 63, 34, 0.14); }
.save-hint { margin-right: auto; color: var(--ink-soft); font-size: 0.64rem; }
.annotation-image-field { display: grid; gap: 0.35rem; }
.field-label { color: var(--ink-soft); font-size: 0.68rem; }
.annotation-image-tools { display: flex; align-items: center; gap: 0.6rem; }
.file-button { display: inline-flex; align-items: center; padding: 0.48rem 0.72rem; color: var(--cinnabar-dark); background: transparent; border: 1px solid rgba(163, 59, 44, 0.35); font-size: 0.72rem; cursor: pointer; }
.file-button input { display: none; }
.annotation-image-preview { margin-top: 0.25rem; padding: 0.55rem; background: rgba(255, 251, 239, 0.62); border: 1px dashed rgba(86, 63, 34, 0.22); }
.annotation-image-preview img { display: block; max-width: 100%; max-height: 18rem; margin: 0 auto; }
.annotation-image { margin: 1rem 0; padding: 0.6rem; background: rgba(255, 251, 239, 0.65); border: 1px solid rgba(86, 63, 34, 0.16); }
.annotation-image img { display: block; max-width: 100%; max-height: 26rem; margin: 0 auto; }
.primary-button,
.secondary-button,
.text-button { padding: 0.52rem 0.75rem; font: inherit; font-size: 0.72rem; cursor: pointer; }
.primary-button { color: #fff8e8; background: var(--cinnabar); border: 1px solid var(--cinnabar); }
.secondary-button { color: var(--cinnabar-dark); background: transparent; border: 1px solid rgba(163, 59, 44, 0.35); }
.text-button { color: var(--ink-soft); background: transparent; border: 0; text-decoration: underline; }

.site-footer { display: flex; justify-content: space-between; gap: 1rem; width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: 1.2rem 0 2.2rem; color: var(--ink-soft); border-top: 1px solid var(--line); font-size: 0.68rem; }

@media (max-width: 820px) {
  .menu-button { display: inline-block; }
  .page-shell { display: block; width: min(100% - 1.25rem, 720px); padding-top: 1.3rem; }
  .toc-panel { position: fixed; top: 4.9rem; right: 0.6rem; left: 0.6rem; z-index: 30; display: none; max-height: min(75vh, 38rem); padding: 1rem; border: 1px solid var(--line); background-color: var(--paper-light); background-image: linear-gradient(180deg, rgba(241, 229, 203, 0.64), rgba(241, 229, 203, 0.8)), url("assets/sidebar-reference.png"); background-position: 40% 18%, 40% 18%; background-repeat: no-repeat, no-repeat; background-size: cover, cover; box-shadow: 0 1.5rem 3rem rgba(49, 31, 17, 0.22); }
  .toc-panel.is-open { display: block; }
  .site-header { padding-inline: 0.75rem; }
  .brand-text small { display: none; }
  .chapter-title-row { align-items: center; }
  .intro-seal { width: 3.2rem; height: 3.2rem; font-size: 1.1rem; }
  .passage-header { align-items: flex-start; flex-direction: column; gap: 0.35rem; }
}
@media (max-width: 480px) {
  .brand-seal { width: 2.25rem; height: 2.25rem; font-size: 0.6rem; }
  .brand-text strong { font-size: 1rem; }
  .chapter-intro h2 { font-size: 3.3rem; }
  .article-toolbar { align-items: flex-start; flex-direction: column; }
  .toolbar-actions { flex-wrap: wrap; }
  .annotation-popover { left: 1rem !important; right: 1rem; width: auto; transform: none !important; }
  .annotation-popover.is-editor { top: 0.75rem !important; right: 0.75rem; bottom: 0.75rem; left: 0.75rem !important; width: auto; }
  .annotation-form-grid { grid-template-columns: 1fr; }
  .annotation-form-grid label.wide { grid-column: auto; }
  .site-footer { align-items: flex-start; flex-direction: column; }
}

/* ---------- 全站导航、通用内页与页脚 ---------- */
.site-header { flex-wrap: wrap; }
.site-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 0.15rem 0.9rem; }
.site-nav a {
  padding-bottom: 0.12rem;
  color: var(--ink-soft);
  border-bottom: 1px solid transparent;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-decoration: none;
}
.site-nav a:hover { color: var(--cinnabar-dark); border-bottom-color: rgba(163, 59, 44, 0.35); }
.site-nav a.is-active { color: var(--cinnabar-dark); border-bottom-color: var(--cinnabar); }

.page-shell--single { grid-template-columns: minmax(0, 1fr); }
.page-placeholder {
  padding: clamp(1.4rem, 4vw, 2.2rem);
  color: var(--ink-soft);
  border: 1px dashed rgba(86, 63, 34, 0.28);
  background: rgba(255, 251, 239, 0.42);
  font-size: 0.82rem;
  line-height: 1.9;
}
.page-placeholder p { margin: 0; }

.footer-block { display: grid; gap: 0.22rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; }
.footer-legal { text-align: right; }
.site-footer a {
  color: var(--ink-soft);
  border-bottom: 1px solid rgba(86, 63, 34, 0.28);
  text-decoration: none;
}
.site-footer a:hover { color: var(--cinnabar-dark); border-bottom-color: var(--cinnabar); }

@media (max-width: 560px) {
  .site-nav { display: none; }
}
@media (max-width: 480px) {
  .footer-legal { text-align: left; }
}

/* ---------- 单站视图切换 ---------- */
.view { animation: view-in 0.26s ease both; }
@keyframes view-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

html[data-route="read"] .view:not(#view-read),
html[data-route="home"] .view:not(#view-home),
html[data-route="timeline"] .view:not(#view-timeline),
html[data-route="admin"] .view:not(#view-admin) { display: none; }

html:not([data-route="read"]) .header-actions { display: none; }

@media (prefers-reduced-motion: reduce) {
  .view { animation: none; }
}