/* ============================================================
   prose.css — long-form reading layout
   Used by writing/chapter-one.html and any future chapter pages.

   Key decision: prose uses a serif body font instead of Inter.
   Serifs (the small strokes at the ends of letterforms) significantly
   improve readability at length — this is why books and long-form
   journalism use them. Inter is excellent for UI and short copy,
   but for 5,000+ words of fiction a serif makes a real difference.

   We import a single serif here rather than adding it to style.css
   because nothing else on the site needs it.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;1,400&display=swap');

/*
  Lora: a well-crafted serif with good screen rendering, designed
  for body text. The italic variant is included because fiction
  uses italics frequently. If you want something more classic,
  "Merriweather" is a solid alternative — same import pattern.
*/

/* --- Override main width for prose ---
   Your global .main has max-width: 860px which is fine for a
   project page or homepage but too wide for comfortable reading.
   65 characters per line is the typographic sweet spot for prose.
   The .prose-main class narrows it without touching other pages.
*/
.prose-main {
  max-width: 680px;
}

/* --- Book title block --- */
.book-title-block {
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}

.book-title {
  font-family: 'Lora', serif;
  font-size: 2.2rem;
  font-weight: 500;
  color: var(--accent);           /* cyan — consistent with your h1 style */
  letter-spacing: 0.01em;
  margin-bottom: 0.4rem;
  line-height: 1.2;
}

.book-meta {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0;
}

/* --- Chapter header --- */
.chapter-header {
  margin-bottom: 2.5rem;
}

/*
  .chapter-label is the "chapter one" line above the chapter title.
  Displayed in monospace, muted — acts as a label/eyebrow,
  not a heading. Keeps the hierarchy clear: book title > chapter label > chapter title.
*/
.chapter-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: lowercase;
  margin-bottom: 0.5rem;
}

.chapter-title {
  font-family: 'Lora', serif;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--text);             /* white, not cyan — subordinate to book title */
  margin: 0;
  line-height: 1.3;
}

/* --- Prose body --- */
.prose-body {
  font-family: 'Lora', serif;
  font-size: 1.05rem;             /* slightly larger than UI text for reading comfort */
  line-height: 1.85;              /* generous leading — critical for long text */
  color: var(--text);
}

/*
  First-letter drop cap on the opening paragraph.
  The ::first-letter pseudo-element targets only the very first
  letter of the first <p> inside .prose-body.
  This is a small typographic touch that signals intentional design
  and is common in literary publishing. Remove if you dislike it.
*/
.prose-body > p:first-child::first-letter {
  font-size: 3.2em;
  font-weight: 500;
  line-height: 0.85;
  float: left;
  margin-right: 0.08em;
  margin-top: 0.05em;
  color: var(--accent);
}

.prose-body p {
  margin-bottom: 1.4em;           /* more breathing room between paragraphs than UI text */
  color: var(--text);
}

/* Italic — used for emphasis, internal thought, titles within prose */
.prose-body em {
  font-style: italic;
  color: var(--text);             /* don't change color for em in prose */
}

/* --- Scene break ---
   The ::after pseudo-element inserts "* * *" as CSS-generated
   content. This means it won't appear if someone copies the text,
   which is actually correct behavior — scene breaks are formatting,
   not content.
*/
.scene-break {
  text-align: center;
  margin: 2.5rem 0;
}

.scene-break::after {
  content: '* * *';
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-muted);
  letter-spacing: 0.3em;
}

/* --- Chapter footer --- */
.chapter-footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  text-align: center;
}

.epigraph {
  margin: 0 0 2.5rem 2rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--accent);
  font-family: 'Lora', serif;
  font-style: italic;
  color: var(--text-muted);
}

.epigraph p {
  margin-bottom: 0.4rem;
}

.epigraph cite {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.03em;
}