:root { --gold: #a9b47d; }

.hero { background: #172019; }
.cover img { object-position: center center; }

.source-poem-link {
  display: grid;
  gap: 5px;
  margin: 28px 0 10px;
  padding: 18px 20px;
  border: 1px solid rgba(169, 180, 125, .52);
  color: inherit;
  text-decoration: none;
}

.source-poem-link span {
  color: #c5cab0;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.source-poem-link strong { color: #edf0df; font-weight: 500; }
.source-poem-link:hover { border-color: #edf0df; }

.story-poem {
  margin: 78px 0;
  padding: 52px 50px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--gold) 10%, transparent);
}

.story-poem h2 { margin: 16px 0 28px; }
.story-poem p { font-size: .96em; line-height: 1.75; }
.story-poem small { display: block; margin-top: 24px; color: var(--muted); text-align: right; }
.poem-page-link { display: inline-block; margin-top: 28px; color: #75834f; }

.gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery img { aspect-ratio: 2 / 3; object-fit: cover; }

@media (max-width: 760px) {
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .hero h1 { font-size: clamp(54px, 18vw, 78px); }
  .cover img { object-position: 52% center; }
  .story-poem { margin: 58px -8px; padding: 35px 25px; }
  .gallery-grid { grid-template-columns: 1fr; }
}