/* ECHOES OF ETERNITY — SHARED CHAPTER READING STYLE
   Include this file in the <head> of Chapter 1.html through Chapter 6.html.
   Class 'chapter-page' belongs on each chapter's <body> tag.
   Wrap the chapter's content in <main class="chapter-reading"> ... </main>.
   All rules are scoped so the index cover design stays unchanged.
*/

.chapter-page, .chapter-page * { box-sizing: border-box; }
.chapter-page {
  margin: 0;
  padding: 24px 16px;
  background: #f5f0e6;
  color: #29251f;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  line-height: 1.8;
  overflow-wrap: break-word;
}
.chapter-page .chapter-reading {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 36px clamp(20px, 5vw, 55px);
  background: #fffdf8;
  border-radius: 8px;
  box-shadow: 0 3px 20px rgba(40, 30, 20, 0.08);
}
.chapter-page h1, .chapter-page h2 {
  color: #604321;
  text-align: center;
  line-height: 1.3;
}
.chapter-page h1 { font-size: clamp(27px, 3vw, 38px); margin: 0 0 12px; }
.chapter-page h2 { font-size: clamp(21px, 2.4vw, 28px); margin: 0 0 30px; }
.chapter-page p { margin: 0 0 1.2em; }
.chapter-page a { color: #80511d; }
.chapter-page img { max-width: 100%; height: auto; }
.chapter-page .chapter-nav { margin-top: 30px; border-top: 1px solid #d5c8ac; padding-top: 15px; }
@media screen and (max-width: 600px) {
  .chapter-page { padding: 8px; font-size: 18px; line-height: 1.7; }
  .chapter-page .chapter-reading { padding: 24px 16px; border-radius: 4px; }
  .chapter-page h1 { font-size: 27px; }
  .chapter-page h2 { font-size: 22px; }
}