/* Shared readable paper treatment for individual poem pages. */
:root {
  --poem-paper: #eadfca;
  --poem-paper-deep: #d7c39d;
  --poem-paper-edge: #b99a62;
  --poem-ink: #30283b;
  --poem-ink-soft: #5b4f62;
  --poem-coffee-dark: rgba(78, 47, 24, 0.20);
}

.poem-journal {
  color: var(--poem-ink);
  background: var(--poem-paper);
  background-image:
    radial-gradient(ellipse at 83% 16%, rgba(102, 65, 32, 0.18) 0 5%, rgba(102, 65, 32, 0.08) 9%, transparent 20%),
    radial-gradient(ellipse at 74% 23%, rgba(84, 50, 25, 0.12) 0 3%, transparent 11%),
    radial-gradient(ellipse at 88% 31%, rgba(116, 74, 37, 0.10) 0 2.5%, transparent 9%),
    radial-gradient(ellipse at 18% 88%, rgba(129, 86, 43, 0.18), transparent 34%),
    radial-gradient(ellipse at 23% 78%, rgba(72, 44, 23, 0.10), transparent 18%),
    radial-gradient(ellipse at 42% 6%, rgba(158, 116, 62, 0.10), transparent 22%),
    linear-gradient(135deg, rgba(255, 250, 238, 0.55), rgba(206, 181, 132, 0.28)),
    repeating-linear-gradient(35deg, rgba(92, 70, 45, 0.035) 0 1px, transparent 1px 13px);
  border: 1px solid rgba(183, 154, 214, 0.42);
  border-top: 2px solid rgba(185, 154, 98, 0.72);
  border-radius: 18px 5px 18px 5px;
  padding: 52px 56px 50px;
  box-shadow: 0 24px 42px -18px rgba(0, 0, 0, 0.58), inset 0 0 0 1px rgba(255, 250, 230, 0.55);
}

.poem-journal::before {
  inset: -7px 10px auto 14px;
  height: 16px;
  background:
    linear-gradient(to bottom, rgba(234, 223, 202, 0.96), rgba(215, 195, 157, 0.26)),
    repeating-linear-gradient(104deg, transparent 0 7px, rgba(106, 79, 46, 0.20) 7px 12px, transparent 12px 21px);
  clip-path: polygon(0 58%, 4% 28%, 9% 63%, 14% 34%, 20% 72%, 26% 38%, 33% 62%, 40% 30%, 47% 68%, 55% 36%, 63% 74%, 70% 32%, 78% 64%, 86% 26%, 94% 58%, 100% 36%, 100% 100%, 0 100%);
  opacity: 0.95;
  z-index: 3;
}

.poem-journal::after {
  content: "";
  position: absolute;
  inset: auto 18px -8px 8px;
  height: 18px;
  background:
    linear-gradient(to top, rgba(215, 195, 157, 0.46), rgba(234, 223, 202, 0.92)),
    repeating-linear-gradient(96deg, transparent 0 9px, rgba(106, 79, 46, 0.18) 9px 14px, transparent 14px 25px);
  clip-path: polygon(0 0, 100% 0, 100% 46%, 96% 70%, 90% 42%, 84% 78%, 78% 44%, 71% 68%, 64% 39%, 57% 75%, 50% 44%, 42% 66%, 35% 36%, 28% 72%, 21% 40%, 14% 68%, 7% 42%, 0 72%);
  opacity: 0.88;
  pointer-events: none;
  z-index: 3;
}

.coffee-stain-main {
  background:
    radial-gradient(ellipse at 31% 42%, var(--poem-coffee-dark) 0 10%, rgba(78, 47, 24, 0.10) 24%, transparent 58%),
    radial-gradient(circle at 62% 26%, rgba(87, 52, 25, 0.16) 0 8%, transparent 23%),
    radial-gradient(circle at 73% 58%, rgba(126, 78, 35, 0.12) 0 7%, transparent 22%);
  filter: blur(7px);
  border-radius: 57% 43% 66% 34% / 44% 61% 39% 56%;
  z-index: 1;
}

.coffee-stain-second {
  background:
    radial-gradient(ellipse at 44% 46%, rgba(95, 58, 29, 0.18) 0 18%, rgba(95, 58, 29, 0.08) 38%, transparent 70%),
    radial-gradient(circle at 22% 72%, rgba(74, 44, 22, 0.13) 0 8%, transparent 25%);
  filter: blur(7px);
  border-radius: 43% 57% 51% 49% / 60% 35% 65% 40%;
  z-index: 1;
}

.coffee-drip {
  background:
    radial-gradient(ellipse at 54% 18%, rgba(80, 48, 24, 0.17) 0 12%, rgba(80, 48, 24, 0.07) 48%, transparent 83%),
    radial-gradient(circle at 36% 68%, rgba(122, 76, 35, 0.12) 0 9%, transparent 24%);
  filter: blur(4px);
  border-radius: 48% 52% 46% 54% / 68% 34% 66% 32%;
  z-index: 1;
}

.age-speckles {
  background-image:
    radial-gradient(circle at 15% 70%, rgba(93, 63, 37, 0.09) 1.2px, transparent 1.2px),
    radial-gradient(circle at 85% 25%, rgba(83, 58, 35, 0.07) 1px, transparent 1px),
    radial-gradient(circle at 45% 45%, rgba(74, 51, 32, 0.06) 1.5px, transparent 1.5px);
  z-index: 1;
}

.manuscript-lines {
  background: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 32px,
    rgba(48, 40, 59, 0.075) 32px,
    rgba(48, 40, 59, 0.075) 33px
  );
  z-index: 1;
}

.poem-text {
  color: var(--poem-ink);
  line-height: 2.38rem;
  letter-spacing: 0;
  text-shadow: none;
  max-width: 38rem;
  margin: 0 auto 34px;
}

.poem-text strong {
  color: #3c314f;
}

.section-title {
  max-width: 38rem;
  margin: 30px auto 18px;
  padding-left: 16px;
  color: #46384f;
  border-left: 3px solid rgba(164, 132, 194, 0.70);
}

.section-divider {
  color: #745d34;
}

.section-divider span {
  background: rgba(255, 250, 238, 0.52);
  border-color: rgba(116, 93, 52, 0.25);
}

.archival-note {
  max-width: 40rem;
  margin: 34px auto 0;
  color: var(--poem-ink-soft);
  background: rgba(255, 250, 238, 0.54);
  padding: 18px 20px 16px;
  border: 1px solid rgba(164, 132, 194, 0.28);
  border-left: 3px solid rgba(164, 132, 194, 0.66);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.archival-note,
.archival-note p,
.archival-note div {
  color: var(--poem-ink-soft) !important;
}

.archival-note span {
  color: #7a6339 !important;
}

.archival-note div[style*="italic"] {
  color: #46384f !important;
}

.signature {
  color: #6f5a2e !important;
}

.page-count {
  color: #745d34;
  border-top-color: rgba(48, 40, 59, 0.14);
}

@media (max-width: 720px) {
  .poem-journal {
    padding: 32px 28px;
  }

  .poem-text {
    font-size: 1.25rem;
    line-height: 2rem;
  }

  .archival-note {
    font-size: 0.85rem;
  }
}