/* STORY PAIR — .db-story-pair   (about = 1)
   Prototype .ab-story. Two columns, each holding BOTH copy and an image, split
   by a full-height rule — and the two columns are deliberately asymmetric:

     left   text on top, 588px image below, space-between
     right  515px image on top, text below ending in the signature, flush top

   NOT .db-story, which is one image beside one text column. Both are "the story
   section" by name, which is how a 5rem single-column layout ended up standing in
   for a 3rem two-column one. The title here is 3rem, not 5rem.

   The section is its own wrap: no background, so it stays a plain constrained
   child of post-content and lands on the 1360px page column. */
/* Top rule, 1px #B5AEA6 [Figma 368:3604 strokeWeight "1px 0px 0px"]. Missing
   entirely — the section ran straight into the one above it. */
.db-story-pair { display: flex; flex-direction: column; gap: 24px; padding-block: 40px; border-top: 1px solid var(--line2); }

.db-story-pair .db-story-pair__col  { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.db-story-pair .db-story-pair__text { display: flex; flex-direction: column; gap: 16px; }

.db-story-pair__title { font-size: clamp(1.5rem, 6vw, 3rem); line-height: 1.1; }
.db-story-pair__text p { font-size: 16px; line-height: 1.75; color: var(--muted); margin: 0; }

.db-story-pair__media { margin: 0; }
.db-story-pair__media img { width: 100%; height: 320px; object-fit: cover; }

.db-story-pair__sign { margin: 4px 0 0; }
.db-story-pair__sign img { width: 124px; height: auto; }

.db-story-pair__divider { height: 1px; width: 100%; background: var(--line); }

@media (min-width: 861px) {
	.db-story-pair { flex-direction: row; align-items: stretch; gap: 60px; padding-block: 120px; }

	.db-story-pair .db-story-pair__col { flex: 1; gap: 60px; justify-content: space-between; }
	/* the right column hugs the top instead of distributing, so its shorter
	   image lines up with the left column's copy */
	.db-story-pair .db-story-pair__col--right { justify-content: flex-start; }

	.db-story-pair__title { font-size: 3rem; }

	.db-story-pair__media img { height: 588px; }
	.db-story-pair__col--right .db-story-pair__media img { height: 515px; }

	.db-story-pair__sign { margin-top: 0; }
	.db-story-pair__sign img { width: 200px; }

	.db-story-pair__divider {
		width: 1px;
		height: auto;
		align-self: stretch;
		background: var(--line2);
		flex: 0 0 1px;
	}
}