@charset "utf-8";
section {
  margin-bottom: 80px;
}
/* Centered Manuscript Column */
.manuscript {
  max-width: 820px;
  margin: auto;
  padding: 25px 15px;
  background: #fffdf7;

  /* Thin Double Gold Border */
  border: 1px solid #c9a437;
  box-shadow:
    0 0 0 6px #fffdf7,
    0 0 0 7px #c9a437;
}

.manuscript h2 {
  text-align: center;
}
.manuscript p:first-child::first-letter {
  float: left;
  font-size: 4rem;
  padding-right: 8px;
  color: #8c6a1c;
  font-weight: bold;
}
/* ============================= */
/* 2. Romantic Alternate Indent  */
/* ============================= */
.romantic {
  max-width: 650px;
  margin: auto;
  font-style: italic;
}

.romantic div:nth-child(even) {
  margin-left: 3rem;
}

/* ============================= */
/* 3. Minimal Modern Centered    */
/* ============================= */
.modern {
  text-align: center;
  max-width: 600px;
  margin: auto;
  font-family: "Helvetica Neue", sans-serif;
  letter-spacing: 0.5px;
}

/* ============================= */
/* 4. Dramatic Dark Lyrical      */
/* ============================= */
.dark-style {
  background: #111;
  color: #f0f0f0;
  padding: 50px;
  max-width: 700px;
  margin: auto;
  font-family: "Times New Roman", serif;
}

.dark-style h2 {
  text-align: center;
  color: #d4af37;
}

/* ============================= */
/* 5. Two Column Pairing Style   */
/* ============================= */
.columns {
  max-width: 650px;
  margin: auto;
}

.columns .right {
  margin-left: 4rem;
}
/* Title */
.title {
  text-align: center;
  font-size: 1.6rem;
  margin-bottom: 10px;
  letter-spacing: 1px;
}

/* Divider */
.divider {
  width: 60px;
  height: 2px;
  background: #b08d2f;
  margin: 15px auto 35px auto;
}

/* ================================================================== */
/*                 Poem Style                              */
/* ============================================================================= */
.poem-title {
  text-align: center;
  font-size: 1.6rem;
  margin-bottom: 8px;
}

.poem-author {
  text-align: center;
  font-size: 0.95rem;
  margin-bottom: 35px;
  color: #777;
}

.poem {
  font-size: 1.15rem;
  line-height: 1.9;
}

/* Drop Cap */
.poem-line:first-child::first-letter {
  float: left;
  font-size: 3.8rem;
  line-height: 0.9;
  padding-right: 8px;
  padding-top: 4px;
  font-weight: bold;
  color: #8c6a1c;
}
/* Standard verse */
.poem {
  margin-top: 20px;
}
/* Line spacing */
.poem-line {
  margin-bottom: 10px;
}

/* Alternate indentation */
.poem-line:nth-child(even) {
  margin-left: 1.8rem;
}
/* Exact spacing preservation */
pre {
  background: #fff;
  padding: 15px;
  border: 1px solid #ddd;
  font-size: 1rem;
}
/* Two vertical alignment columns */
.columns .right {
  margin-left: 12ch;
}
/* different spacing */
.poem .left {
  margin-left: 0;
}
.poem .right {
  margin-left: 10ch; /* ≈ 10 spaces */
}
.poem .right8 {
  margin-left: 8ch; /* ≈ 8 spaces */
}
.poem .right6 {
  margin-left: 6ch; /* ≈ 6 spaces */
}
.poem .right12 {
  margin-left: 12ch; /* ≈ 8 spaces */
}
.poem .right14 {
  margin-left: 14ch; /* ≈ 6 spaces */
}
.poem .right16 {
  margin-left: 16ch; /* ≈ 6 spaces */
}
.poem .right18 {
  margin-left: 18ch; /* ≈ 6 spaces */
}

/* Larger screens */
@media (min-width: 768px) {
  .poem {
    font-size: 1.25rem;
    line-height: 2;
  }

  .poem-line:first-child::first-letter {
    font-size: 4.8rem;
  }

  .poem-line:nth-child(even) {
    margin-left: 3rem;
  }
}

/* Responsive refinement */
@media (max-width: 600px) {
  .manuscript {
    padding: 35px 20px;
  }

  .poem {
    font-size: 1.05rem;
  }

  .poem p:first-child::first-letter {
    font-size: 3rem;
  }
}

/* Responsive  Back Button ------------------------------------------ */

.back-btn {
  background: none;
  border: none;
  font-family: Georgia, serif;
  font-size: 1rem;
  color: #8c6a1c;
  cursor: pointer;
  padding: 6px 0;
  margin-bottom: 20px;
}

.back-btn:hover {
  opacity: 0.8;
}