body {
  font-family: 'Helvetica Neue', sans-serif;
  background: #fdfdfd;
  color: #222;
  margin: 0;
  padding: 0 1rem;
  line-height: 1.6;
}

header {
  text-align: center;
  padding: 3rem 1rem 2rem;
}

.subtitle {
  color: #666;
  font-size: 1.2rem;
  margin-top: -1rem;
}

main {
  max-width: 700px;
  margin: 0 auto;
  padding: 2rem 0;
}

h1, h2 {
  font-weight: 700;
  color: #111;
}

.chapter {
  margin-bottom: 4rem;
}

footer {
  text-align: center;
  padding: 2rem;
  font-size: 0.9rem;
  color: #aaa;
}

.intro-image {
  max-width: 600px;
  width: 100%;
  height: auto;
  display: block;
  margin: 2rem auto;
}

.charlie-image {
    max-width: 300px;
    width: 100%;
    height: auto;
    display: block;
    margin: 2rem auto;
}

.saypizza-image {
  max-width: 300px;
  width: 100%;
  height: auto;
  display: block;
  margin: 2rem auto;
}

.center-text {
  text-align: center;
}

.center-text {
  text-align: center;
}

/* Global rhythm */
body { line-height: 1.7; }

/* Page sections */
header, footer { margin-block: 2rem; }
main { padding-block: 1rem; }

/* Blocks */
.introduction, .chapter { margin-block: 2rem; }

/* Paragraph flow: add a little air between lines */
.chapter p + p,
.introduction p + p { margin-top: 0.5rem; }

/* === Dialogue coloring helpers === */
:root {
  --dialogue-green: #0a7a2a; /* deep green with good contrast */
  --dialogue-red:   #b00020; /* deep red with good contrast */
}

/* Use on a whole <p> or a <span> inside a <p> */
/*.dialogue { font-style: italic; } */
.dialogue--green { color: var(--dialogue-green); }
.dialogue--red { color: var(--dialogue-red); }

/* Extra cue for high-contrast users */
@media (prefers-contrast: more) {
  .dialogue--green,
  .dialogue--red { text-decoration: underline; text-decoration-thickness: 2px; }
}

/* Print fallback so red/green differences aren’t lost */
@media print {
  .dialogue--green,
  .dialogue--red { color: #000; }
  .dialogue--green::before { content: "[green] "; }
  .dialogue--red::before { content: "[red] "; }
}