:root {
  --paper: #f5f4ef;
  --ink: #0b0b0b;
  --muted: #6b6a65;
  --red: #ff2d22;
  --measure: 720px;
  --reader-size: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, "PingFang SC", "Microsoft YaHei", sans-serif; transition: background .2s ease, color .2s ease; }
body.dark { --paper: #111; --ink: #eee; --muted: #aaa; }
.reading-progress { position: fixed; inset: 0 0 auto; z-index: 10; height: 4px; background: transparent; }
.reading-progress span { display: block; width: 0; height: 100%; background: var(--red); }
.reader-header { position: sticky; top: 0; z-index: 9; min-height: 52px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 22px; border-bottom: 1px solid var(--ink); background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(10px); }
.reader-header > a { font-family: Arial Black, sans-serif; font-size: 12px; letter-spacing: .08em; text-decoration: none; }
.reader-header > span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.reader-tools { justify-self: end; display: flex; gap: 4px; }
.reader-tools button { min-width: 34px; height: 30px; border: 1px solid var(--ink); background: transparent; color: var(--ink); font-weight: 800; cursor: pointer; }
.reader-tools button:hover { background: var(--red); color: #0b0b0b; }
main { padding: 0 20px; }
.story-heading { max-width: 980px; margin: 0 auto; padding: 12vh 0 9vh; border-bottom: 1px solid var(--ink); }
.story-heading > p:first-child { margin: 0 0 24px; color: var(--red); font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.story-heading h1 { max-width: 950px; margin: 0; font-family: Arial Black, "PingFang SC", sans-serif; font-size: clamp(70px, 15vw, 180px); line-height: .78; letter-spacing: -.09em; }
.story-honor { margin: 32px 0 0; font-family: Georgia, "Songti SC", serif; font-size: 15px; }
.story-body { max-width: var(--measure); margin: 0 auto; padding: 10vh 0 14vh; }
.story-body p { margin: 0 0 1.45em; font-family: Georgia, "Noto Serif CJK SC", "Songti SC", serif; font-size: var(--reader-size); line-height: 2; text-align: justify; text-indent: 2em; overflow-wrap: anywhere; }
.story-body p:first-child::first-letter { float: left; margin: .05em .12em 0 0; color: var(--red); font-family: Arial Black, sans-serif; font-size: 4.8em; line-height: .75; }
.story-nav { max-width: 980px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; margin: 0 auto 80px; padding: 20px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.story-nav a { font-size: 12px; font-weight: 800; text-decoration: none; }
.story-nav a:last-child { text-align: right; }
.story-nav .all-works { padding: 8px 14px; border: 1px solid var(--ink); }
.story-nav a:hover { color: var(--red); }
footer { padding: 28px 22px; background: var(--red); color: #0b0b0b; font-size: 10px; font-weight: 900; letter-spacing: .13em; text-align: center; }

@media (max-width: 640px) {
  .reader-header { padding: 0 12px; }
  .story-heading { padding: 70px 0 55px; }
  .story-heading h1 { font-size: 25vw; }
  .story-body { padding: 60px 0 90px; }
  .story-body p { line-height: 1.9; }
  .story-nav { grid-template-columns: 1fr 1fr; }
  .story-nav .all-works { grid-column: 1 / -1; grid-row: 1; text-align: center; }
}

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