:root { --gold: #9daec1; }
.hero { background: #111923; }
.cover img { object-position: center center; }
.opening-poem {
  margin: 0 0 80px;
  padding: 55px 50px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--gold) 9%, transparent);
}
.opening-poem h2 { margin: 18px 0 28px; }
.opening-poem p { font-size: .95em; line-height: 1.7; }
.opening-poem small { display: block; margin-top: 24px; color: var(--muted); text-align: right; }
.source-poem-link {
  display: grid;
  gap: 5px;
  margin: 28px 0 10px;
  padding: 18px 20px;
  border: 1px solid rgba(157, 174, 193, .5);
  color: inherit;
  text-decoration: none;
}
.source-poem-link span { color: #b9c2cc; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.source-poem-link strong { color: #d5e0ed; font-weight: 500; }
.source-poem-link:hover { border-color: #d5e0ed; }
.poem-page-link { display: inline-block; margin-top: 26px; color: #637f9c; }
@media (max-width: 600px) {
  .opening-poem { margin: 0 -8px 55px; padding: 35px 25px; }
  .hero h1 { font-size: clamp(54px, 18vw, 78px); }
  .cover img { object-position: 56% center; }
}