:root {
  --ink: #121017;
  --paper: #eee8df;
  --paper-dark: #ddd5ca;
  --muted: #706972;
  --red: #a6262b;
  --red-light: #c84145;
  --gold: #9a7a45;
  --display: "Forum", "Times New Roman", serif;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--serif); font-size: clamp(19px,1.6vw,22px); line-height: 1.72; }
a { color: inherit; }
.reading-progress { position: fixed; inset: 0 0 auto; z-index: 100; height: 3px; background: rgba(166,38,43,.12); }
.reading-progress span { display: block; width: 0; height: 100%; background: var(--red); }
.reader-toolbar { position: sticky; top: 0; z-index: 90; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 64px; padding: 0 clamp(18px,4vw,60px); border-bottom: 1px solid rgba(18,16,23,.12); background: rgba(238,232,223,.94); box-shadow: 0 8px 30px rgba(18,16,23,.06); backdrop-filter: blur(14px); }
.reader-toolbar > span { font: 400 clamp(19px,2vw,25px)/1 var(--display); letter-spacing: .03em; }
.reader-toolbar i { font-family: var(--serif); }
.reader-toolbar a { color: var(--muted); font: 600 10px var(--sans); letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
.reader-toolbar a:last-child { justify-self: end; }
main { width: min(100%,960px); margin: 0 auto; }
.story { width: min(calc(100% - 44px),720px); margin: 0 auto; padding: clamp(75px,10vw,130px) 0; }
.story h1 { margin: 0; color: var(--red); font: 400 clamp(15px,1.3vw,18px)/1 var(--sans); letter-spacing: .24em; text-align: center; text-transform: uppercase; }
.story h2 { margin: 22px auto 16px; font: 400 clamp(48px,7vw,82px)/.96 var(--display); text-align: center; }
.story h2 span { display: block; }
.story h2 .chapter-number { margin-bottom: 13px; color: var(--gold); font: 600 11px var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.story .author { margin: 0 0 clamp(60px,9vw,100px); color: var(--muted); font-style: italic; text-align: center; }
.story > p:not(.author):not(.scenebreak) { margin: 0 0 .92em; }
.story .scenebreak { margin: 3.5em 0; color: var(--red); font: 600 12px var(--sans); letter-spacing: .35em; text-align: center; }
.reader-end { margin-top: 25px; padding: clamp(75px,10vw,120px) 35px; border-top: 1px solid rgba(18,16,23,.15); text-align: center; }
.end-moon { display: block; width: 54px; height: 54px; margin: 0 auto 30px; border: 1px solid var(--gold); border-radius: 50%; box-shadow: inset 17px -1px 0 var(--paper); background: var(--ink); }
.eyebrow { margin: 0 0 18px; color: var(--red); font: 600 10px var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.reader-end h2 { margin: 0; font: 400 clamp(50px,7vw,82px)/.95 var(--display); }
.reader-end h2 em { color: var(--red); font-family: var(--serif); font-weight: 500; }
.reader-end > p:not(.eyebrow) { max-width: 590px; margin: 26px auto 0; color: var(--muted); }
.reader-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.reader-actions a { min-width: 190px; padding: 13px 20px; border: 1px solid var(--red); background: var(--red); color: #fff; font: 600 10px var(--sans); letter-spacing: .11em; text-decoration: none; text-transform: uppercase; }
.reader-actions a:last-child { border-color: var(--ink); background: transparent; color: var(--ink); }
.reader-copyright { width: min(calc(100% - 44px),620px); margin: 0 auto; padding: 75px 0 90px; border-top: 1px solid rgba(18,16,23,.12); color: var(--muted); font: 13px/1.55 var(--sans); text-align: center; }
.reader-copyright .logo { width: 58px; height: auto; }
.reader-copyright a { color: var(--red); }

@media (max-width: 600px) {
  .reader-toolbar { grid-template-columns: 1fr 1fr; min-height: 58px; }
  .reader-toolbar > span { display: none; }
  .story { width: min(calc(100% - 36px),720px); padding-top: 65px; }
  .story h2 { font-size: clamp(45px,13vw,66px); }
  .reader-end { padding-inline: 18px; }
  .reader-actions { flex-direction: column; }
}

@media (prefers-color-scheme: dark) {
  body { background: #121017; color: #e8e1d7; }
  .reader-toolbar { border-color: rgba(232,225,215,.13); background: rgba(18,16,23,.94); }
  .story .author, .reader-toolbar a, .reader-end > p:not(.eyebrow), .reader-copyright { color: #a9a1a7; }
  .end-moon { background: #e8e1d7; box-shadow: inset 17px -1px 0 #121017; }
  .reader-end, .reader-copyright { border-color: rgba(232,225,215,.14); }
  .reader-actions a:last-child { border-color: #e8e1d7; color: #e8e1d7; }
}

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