/* Single happy-ending story (single-story.php). Mirrors the news article
   layout (article.css), with a big framed photo above the text and a
   handwritten caption — the .article-body typography rules are duplicated
   here because article.css only loads on posts. */

.page-hero .story-when {
  font-size: 13px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(26,20,16,0.6);
}

.story-photo {
  max-width: 720px; margin: 0 auto 36px;
  position: relative;
}
.story-photo img {
  width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block;
  border: 3px solid var(--ink); border-radius: 22px;
  box-shadow: 8px 8px 0 var(--ink);
}
.story-photo figcaption {
  position: absolute; right: 18px; bottom: -16px;
  transform: rotate(-3deg);
  background: var(--yellow); color: var(--ink);
  border: 2.5px solid var(--ink); border-radius: 6px;
  padding: 4px 12px 3px;
  font-size: 21px; line-height: 1;
  box-shadow: 2px 2px 0 var(--ink);
}

.story-body { max-width: 720px; margin: 0 auto; }
.story-body p { font-size: 17px; line-height: 1.7; max-width: none; color: rgba(26,20,16,0.85); }
.story-body h2 { font-size: 30px; margin: 40px 0 14px; }
.story-body blockquote {
  margin: 26px 0; padding: 20px 24px;
  background: var(--soft-purple);
  border: 3px solid var(--ink); border-radius: 22px;
}
.story-body blockquote p { font-family: 'Caveat', cursive; font-weight: 700; font-size: 24px; line-height: 1.4; }
.story-body blockquote p:last-child { margin-bottom: 0; }
.story-body blockquote cite {
  display: block; margin-top: 6px;
  font-family: 'Nunito', sans-serif; font-style: normal;
  font-size: 13px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(26,20,16,0.6);
}

.story-back { max-width: 720px; margin: 48px auto 0; }