:root {
  --paper: #f5f0e8;
  --paper-light: #fbf8f3;
  --ink: #17211d;
  --muted: #6d726b;
  --pine: #173a32;
  --red: #a94732;
  --gold: #b68a4d;
  --line: rgba(23,33,29,.15);
  --serif: "Noto Serif CJK SC", "Source Han Serif SC", "Songti SC", SimSun, serif;
  --sans: "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--serif); -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .16; z-index: 10; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { color: #fff; background: var(--red); }
.reading-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 30; background: transparent; }
.reading-progress span { display: block; width: 0; height: 100%; background: var(--red); }
.reader-nav { position: sticky; top: 0; z-index: 20; height: 70px; padding: 0 max(28px, calc((100vw - 1180px)/2)); display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.76); background: rgba(23,58,50,.96); backdrop-filter: blur(12px); font: 11px var(--sans); letter-spacing: .12em; }
.reader-nav a { color: #e5c08a; }
.reader-shell { width: min(900px, calc(100vw - 50px)); margin: 0 auto; padding: 105px 0 80px; }
.reader-shell article { padding: 0 70px 80px; border-bottom: 1px solid var(--line); }
.reader-kicker { color: var(--red); font: 700 10px var(--sans); letter-spacing: .2em; }
.reader-shell h1, .archive-shell h1 { margin: 24px 0 22px; font: 400 clamp(42px, 7vw, 72px)/1.2 var(--serif); letter-spacing: .05em; }
.reader-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; color: var(--muted); font: 11px var(--sans); }
.reader-ornament { margin: 54px auto; color: var(--gold); text-align: center; font-size: 10px; }
.article-body { font-size: 19px; line-height: 2.25; letter-spacing: .035em; }
.article-body p { margin: 0 0 1.45em; text-align: justify; }
.article-body p:first-child::first-letter { float: left; margin: .11em .18em 0 0; color: var(--red); font-size: 4.7em; line-height: .74; }
.reader-shell footer { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 32px 70px 0; color: var(--muted); font: 11px var(--sans); }
.reader-shell footer a { color: var(--red); }

.archive-body { background: #ece4d8; }
.archive-shell { width: min(1420px, calc(100vw - 60px)); margin: 0 auto; padding: 80px 0 120px; }
.archive-intro { max-width: 720px; color: var(--muted); font-size: 16px; line-height: 2; }
.archive-grid { margin-top: 60px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.page { position: relative; aspect-ratio: .72; padding: 0; border: 0; overflow: hidden; background: #fff; cursor: zoom-in; box-shadow: 0 8px 20px rgba(32,27,20,.08); }
.page img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.page:hover img { transform: scale(1.025); }
.page span { position: absolute; right: 7px; bottom: 7px; padding: 3px 7px; color: #fff; background: rgba(23,58,50,.76); font: 9px var(--sans); }
#page-dialog { max-width: calc(100vw - 30px); max-height: calc(100vh - 30px); padding: 18px; border: 0; background: #102d27; }
#page-dialog::backdrop { background: rgba(5,14,11,.9); backdrop-filter: blur(7px); }
#page-dialog img { max-width: 100%; max-height: calc(100vh - 70px); object-fit: contain; }
#page-dialog button { position: fixed; right: 22px; top: 18px; z-index: 2; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; color: #fff; background: rgba(16,45,39,.8); cursor: pointer; font-size: 28px; }
@media (max-width: 900px) { .archive-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) {
  .reader-nav { padding-inline: 16px; }
  .reader-shell { width: calc(100vw - 28px); padding-top: 70px; }
  .reader-shell article { padding-inline: 12px; }
  .article-body { font-size: 17px; line-height: 2.15; }
  .reader-shell footer { padding-inline: 12px; flex-direction: column; align-items: flex-start; }
  .archive-shell { width: calc(100vw - 28px); padding-top: 60px; }
  .archive-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}