/**
 * Single Village page (single-villages.php)
 *
 * Editorial layout that matches the "villages-hero" / "villages-map" block style:
 *   1. Hero      - breadcrumb + centered display title + intro + full-bleed image
 *   2. Story     - alternating text <-> image rows (The family / region / process)
 *   3. Result    - dark forest closing section with a product bottle + CTA
 * The "Mezcales from <village>" slider reuses shop-mezcales.css (.dm-shop), the
 * "Shaped by the Land" carousel reuses the other/our-villages block, and the
 * community CTA reuses blocks/content/newsletter.php - so only 1-3 are styled here.
 */

/* Flat cream across both sections, so they read as one continuous surface.
   These used to carry the site's dotted texture; it was dropped here to match
   the Villages archive hero, which now renders with its --flat modifier. */
.dm-vs-hero,
.dm-vs-story {
	background-color: var(--color-cream);
}

/* ==== 1. Hero ========================================================= */
.dm-vs-hero {
	padding-top: clamp(0.25rem, 3vw, 0.6rem);
	overflow: hidden;
}

.dm-vs-hero__crumb {
	margin-inline: auto;
	padding-inline: 16px;
}

.dm-vs-hero__head {
	margin-top: clamp(2rem, 5vw, 4rem);
	text-align: center;
	padding-inline: 16px;
}

.dm-vs-hero__title {
	margin: 0 auto;
	max-width: 60rem;                                /* wide enough for "…, Oaxaca" */
	color: var(--dm-bg-default-tertiary);                                  /* Semantics/fg/default/primary */
	text-align: center;
	font-family: var(--font-display, "IM Fell Double Pica", serif);
	font-weight: 400;
	font-style: normal;
	font-size: clamp(2.25rem, 4.4vw, 3.5rem);        /* Figma h1 mobile 40px -> ~56px */
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.dm-vs-hero__title em {
	font-style: italic;
}

.dm-vs-hero__intro {
	margin: clamp(1.7rem, 2.6vw, 2.1rem) auto 0;
	max-width: 34rem;
	color: var(--dm-fg-default-primary);
	text-align: center;
	font-family: var(--font-display, "IM Fell Double Pica", serif);
	font-size: clamp(1.125rem, 1.6vw, 1.25rem);      /* 18px mobile -> 20px desktop */
	font-weight: 400;
	line-height: 1.2;
}

.dm-vs-hero__figure {
	position: relative;
	margin: clamp(2.5rem, 5.5vw, 4.5rem) 0 0;
	width: 100%;
}

.dm-vs-hero__img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 78vh;
	object-fit: cover;
}

/* Decorative "view full image" affordance, bottom-right of the hero photo. */
.dm-vs-hero__expand {
	position: absolute;
	right: clamp(1rem, 3vw, 2.5rem);
	bottom: clamp(1rem, 3vw, 2.5rem);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border: 0;
	border-radius: 999px;
	background: var(--dm-bg-default-white);
	color: var(--dm-fg-default-primary);
	box-shadow: 0 10px 30px color-mix(in srgb, var(--color-forest) 25%, transparent);
	cursor: pointer;
	transition: transform 0.2s ease, background 0.2s ease;
}

.dm-vs-hero__expand:hover,
.dm-vs-hero__expand:focus-visible {
	transform: scale(1.06);
	background: var(--dm-bg-default-white);
}

/* ==== 2. Story rows (The family / region / process) ================== */
.dm-vs-story {
	padding-block: clamp(3rem, 7vw, 6rem);
}

.dm-vs-story__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	margin-inline: auto;
}

.dm-vs-story__row + .dm-vs-story__row {
	margin-top: clamp(3rem, 8vw, 7rem);
}

.dm-vs-story__media {
	width: 100%;
	border-radius: 6px;
	overflow: hidden;
}

.dm-vs-story__media img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 5 / 4;
	object-fit: cover;
}

.dm-vs-story__title {
	margin: 0 0 clamp(0.9rem, 2vw, 1.4rem);
	color: var(--dm-fg-default-primary);
	font-family: var(--font-display, "IM Fell Double Pica", serif);
	font-weight: 400;
	font-size: clamp(2rem, 3.4vw, 3rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.dm-vs-story__title em {
	font-style: italic;
}

.dm-vs-story__text {
	margin: 0 0 1rem;
	max-width: 34rem;
	color: var(--dm-ext-pine);
	font-family: var(--font-sans, "Roboto Condensed", sans-serif);
	font-size: clamp(1rem, 1.3vw, 1.0625rem);
	line-height: 1.45;
}

.dm-vs-story__text:last-child {
	margin-bottom: 0;
}

@media (min-width: 768px) {
	.dm-vs-story__row {
		grid-template-columns: 1fr 1fr;
		gap: clamp(2.5rem, 6vw, 6rem);
	}

	/* Even rows: text left, image right (default). Reversed rows swap them, while
	   keeping the text block's reading order in the DOM. */
	.dm-vs-story__row--reverse .dm-vs-story__body {
		order: 2;
	}

	.dm-vs-story__row--reverse .dm-vs-story__media {
		order: 1;
	}
}

/* Rows with no usable image (missing in the backend, or the file failed to load
   - JS adds this class on error): collapse the two-column layout to one centred
   text column instead of leaving an empty half or a broken-image box. */
.dm-vs-story__row--noimage {
	text-align: center;
}

.dm-vs-story__row--noimage .dm-vs-story__body {
	max-width: 44rem;
	margin-inline: auto;
}

.dm-vs-story__row--noimage .dm-vs-story__text {
	margin-inline: auto;
}

@media (min-width: 768px) {
	.dm-vs-story__row--noimage {
		grid-template-columns: 1fr;
	}
}

/* ---- Mobile type scale (Figma phone specs) -------------------------- */
/* Desktop/tablet keep the fluid clamp() sizes above; these lock the phone
   sizes to the Figma mobile design and never apply at >= 768px. */
@media (max-width: 767px) {
	.dm-vs-hero__head {
		margin-top: 3rem;                /* more breathing room above the title */
	}

	.dm-vs-hero__title {
		font-size: 40px;                 /* heading-mobile/h1-M */
	}

	/* Hero image locks to the Figma phone ratio (430 x 360). */
	.dm-vs-hero__img {
		aspect-ratio: 43 / 36;           /* 430 x 360 */
		max-height: none;
	}

	/* Bigger tap target for the gallery/expand affordance on phones. */
	.dm-vs-hero__expand {
		width: 64px;
		height: 64px;
	}

	.dm-vs-hero__expand svg {
		width: 14px;
		height: 14px;
	}

	.dm-vs-story__title {
		font-size: 36px;                 /* heading-mobile/h2-M */
		letter-spacing: -0.72px;
	}

	.dm-vs-story__text {
		font-size: 18px;                 /* body/lg */
	}

	/* Phone: image always sits above the copy, regardless of row parity. */
	.dm-vs-story__media {
		order: -1;
	}
}

/* ==== 3. Result (dark closing section) =============================== */
.dm-vs-result {
	position: relative;
	background: var(--dm-bg-default-tertiary);
	background-size: cover;
	background-position: center;
	overflow: hidden;
	isolation: isolate;
}

/* Scrim so text stays legible if a background photo is set. */
.dm-vs-result::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, color-mix(in srgb, var(--dm-ext-forest-deep) 82%, transparent) 0%, color-mix(in srgb, var(--dm-ext-forest-deep) 55%, transparent) 60%, color-mix(in srgb, var(--dm-ext-forest-deep) 35%, transparent) 100%);
	z-index: 0;
}

.dm-vs-result__inner {
	position: relative;
	z-index: 1;
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
	padding-block: clamp(3rem, 7vw, 6rem);
	padding-inline: 16px;
}

.dm-vs-result__title {
	margin: 0 0 clamp(1rem, 2vw, 1.5rem);
	color: var(--color-cream);
	font-family: var(--font-display, "IM Fell Double Pica", serif);
	font-weight: 400;
	font-size: clamp(2rem, 3.4vw, 3rem);
	line-height: 1.1;
}

.dm-vs-result__title em {
	font-style: italic;
}

.dm-vs-result__text {
	margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
	max-width: 34rem;
	color: color-mix(in srgb, var(--color-cream) 86%, transparent);
	font-family: var(--font-sans, "Roboto Condensed", sans-serif);
	font-size: clamp(1rem, 1.3vw, 1.0625rem);
	line-height: 1.6;
}

.dm-vs-result__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	height: 48px;
	padding: 0 1.75rem;
	border-radius: 999px;
	background: var(--dm-bg-default-white);
	color: var(--dm-fg-default-primary);
	font-family: var(--font-sans, "Roboto Condensed", sans-serif);
	font-size: 16px;
	text-decoration: none;
}

.dm-vs-result__media {
	display: flex;
	justify-content: center;
}

.dm-vs-result__media img {
	max-height: 30rem;
	width: auto;
	object-fit: contain;
	filter: drop-shadow(0 24px 44px color-mix(in srgb, var(--dm-ext-black) 40%, transparent));
}

@media (min-width: 768px) {
	.dm-vs-result__inner {
		grid-template-columns: 1.1fr 0.9fr;
	}

	/* Bottle on the right, text on the left. */
	.dm-vs-result__media {
		order: 2;
	}
}

/* ==== Shaped by the Land (reuses the .dm-shop peek slider) ============ */
/* Green village cards sit in the shared shop-mezcales slider (heading + intro +
   progress + arrows on the left, peek slider on the right). Only the cards are
   styled here; the layout + slider chrome come from shop-mezcales.css. */
.dm-shop__track > .dm-vcard {
	flex: 0 0 clamp(300px, 26vw, 372px);
	scroll-snap-align: start;
}

/* Few cards: keep the trailing card reachable past the viewport-edge bleed. */
.dm-map--villages .dm-shop__track {
	scroll-snap-type: none;
	padding-right: calc(50vw - 50%);
}

.dm-vcard {
	position: relative;            /* anchors the stretched card link */
	display: flex;
	flex-direction: column;
	background: var(--dm-bg-default-tertiary);     /* Figma: bg/default/tertiary #062D20 */
	border-radius: 4px;                            /* Figma: radius/r-xs */
	overflow: hidden;
	color: var(--dm-fg-default-white);
	padding: 16px;
}

/* Fixed-width cards, matching the product slider's peek behaviour. Without a
   basis these were sized by their own text, so a card with a long excerpt came
   out narrow and over-tall instead of holding the design's proportions. */
.dm-shop__track > .dm-vcard {
	flex: 0 0 clamp(280px, 21vw, 342px);
	scroll-snap-align: start;
}

.dm-vcard__media {
	width: 100%;
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: clamp(1rem, 1.6vw, 1.4rem);
}

.dm-vcard__media img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.dm-vcard__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding-inline: 0.35rem;
}

.dm-vcard__title {
	margin: 0 0 0.7rem;
	color: var(--dm-fg-accent-yellow);                          /* Figma: #FCEE1D */
	font-family: var(--font-display, "IM Fell Double Pica", serif);
	font-weight: 400;
	font-size: clamp(1.35rem, 1.9vw, 1.6rem);
	line-height: 1.15;
}

.dm-vcard__desc {
	margin: 0 0 1.5rem;
	color: var(--dm-fg-default-white);
	font-family: var(--font-sans, "Roboto Condensed", sans-serif);
	font-size: 15px;
	line-height: 1.5;
	/* The board gives every tile four lines of copy. The excerpts here run to
	   ~55 words, which stretched the cards well past the design height, and
	   since the track stretches all cards to the tallest one, a single long
	   excerpt inflated the whole row. Clamping on rendered lines rather than
	   trimming words in PHP keeps the cut correct at every card width. */
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.dm-vcard__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: auto;              /* pin to the card bottom so links align */
	align-self: flex-end;          /* Figma anchors it to the content right edge */
	padding-bottom: 3px;
	color: var(--dm-fg-default-white);
	font-family: var(--font-sans, "Roboto Condensed", sans-serif);
	font-size: 14px;               /* Figma: body/sm/regular */
	line-height: 1.4;              /* Figma: 140% -> 19.6px */
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--dm-fg-default-white) 60%, transparent);
	transition: border-color 0.2s ease;
}

/* The whole card is one link target. The real anchor keeps the accessible
   name and the focus ring; this overlay just hands it the card's full area,
   so no extra markup or JS is needed and screen readers still hear one link. */
.dm-vcard__link::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Hovering anywhere on the card lights the link, since the card now acts as
   a single target. */
.dm-vcard:hover .dm-vcard__link,
.dm-vcard__link:focus-visible {
	border-color: var(--dm-fg-default-white);
}

/* Mobile: widen the cards into a proper one-up peek slider. */
@media (max-width: 900px) {
	.dm-shop__track > .dm-vcard {
		flex-basis: 80vw;
		max-width: 340px;
	}
}

/* ==== The result: full-width per-village scene ====================== */
/* The approved composite fills the entire section. Only the live HTML copy uses
   the standard content container; the image itself is never container-bound. */
.dm-vs-result--composed {
	min-height: clamp(28rem, 39.7vw, 47rem);
	background: var(--dm-ext-charcoal);
}

.dm-vs-result--composed::before {
	z-index: 1;
	background: linear-gradient(90deg, color-mix(in srgb, var(--dm-ext-espresso) 68%, transparent) 0%, color-mix(in srgb, var(--dm-ext-espresso) 34%, transparent) 34%, color-mix(in srgb, var(--dm-ext-espresso) 8%, transparent) 58%, color-mix(in srgb, var(--dm-ext-espresso) 3%, transparent) 100%);
}

.dm-vs-result__background {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.dm-vs-result--composed .dm-vs-result__inner {
	position: relative;
	z-index: 3;
	display: flex;
	grid-template-columns: none;
	align-items: center;
	min-height: inherit;
	padding-block: clamp(3rem, 6vw, 5rem);
}

.dm-vs-result--composed .dm-vs-result__body {
	width: min(39%, 34rem);
}

.dm-vs-result--composed .dm-vs-result__title {
	margin-bottom: clamp(0.75rem, 1.5vw, 1.25rem);
	color: var(--dm-fg-default-white);
	font-size: clamp(2rem, 3vw, 3rem);
}

.dm-vs-result--composed .dm-vs-result__text {
	margin-top: clamp(0.75rem, 1.5vw, 1.25rem);
	margin-bottom: clamp(1rem, 2vw, 1.75rem);
	max-width: 34rem;
	color: var(--dm-fg-default-white);
	font-size: clamp(0.875rem, 1.2vw, 1.0625rem);
	line-height: 1.4;
}

.dm-vs-result--composed .dm-vs-result__btn {
	height: 48px;
	border: 1px solid currentColor;
	background: transparent;
	color: var(--dm-fg-default-white);
}

.dm-vs-result--composed .dm-vs-result__btn:hover,
.dm-vs-result--composed .dm-vs-result__btn:focus-visible {
	background: var(--dm-bg-default-white);
	color: var(--dm-ext-charcoal);
}

@media (max-width: 767px) {
	.dm-vs-result--composed {
		min-height: 600px;               /* Figma phone result frame (430 x 600) */
	}

	.dm-vs-result--composed::before {
		background: linear-gradient(0deg, color-mix(in srgb, var(--dm-ext-espresso) 94%, transparent) 0%, color-mix(in srgb, var(--dm-ext-espresso) 78%, transparent) 42%, color-mix(in srgb, var(--dm-ext-espresso) 10%, transparent) 76%, color-mix(in srgb, var(--dm-ext-espresso) 4%, transparent) 100%);
	}

	.dm-vs-result__background {
		object-position: 58% center;
	}

	.dm-vs-result--composed .dm-vs-result__inner {
		align-items: flex-end;
		padding-block: 2rem;
	}

	.dm-vs-result--composed .dm-vs-result__body {
		width: 100%;
	}

	.dm-vs-result--composed .dm-vs-result__title {
		font-size: clamp(1.875rem, 8vw, 2.75rem);  /* heading-mobile/h3-M: 30px floor */
	}

	.dm-vs-result--composed .dm-vs-result__text {
		max-width: 34rem;
		font-size: 1.125rem;                       /* body/lg: 18px */
	}
}

/* ==== Hero gallery lightbox (native <dialog>) ======================== */
.dm-vs-lightbox {
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--dm-ext-black-soft);
	color: var(--color-cream);
	overflow: hidden;
	/* Clicking the arrows quickly counts as a double/triple click, which
	   selected the photo and tinted it with the blue selection highlight.
	   Nothing in the gallery is meant to be copied, so turn selection off,
	   along with the native image drag and the mobile tap flash. */
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.dm-vs-lightbox img {
	-webkit-user-drag: none;
}

.dm-vs-lightbox::backdrop {
	background: color-mix(in srgb, var(--dm-ext-black) 90%, transparent);
}

/* <dialog> is display:none until opened; lay it out only when [open]. */
.dm-vs-lightbox[open] {
	display: flex;
	align-items: center;
	justify-content: center;
}

.dm-vs-lightbox__stage {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: min(92vw, 1120px);
	max-height: 86vh;
}

.dm-vs-lightbox__img {
	max-width: 100%;
	max-height: 86vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 4px;
}

.dm-vs-lightbox__close {
	position: absolute;
	top: clamp(1rem, 3vw, 2rem);
	right: clamp(1rem, 3vw, 2rem);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 999px;
	background: var(--dm-bg-default-white);
	color: var(--dm-ext-near-black);
	cursor: pointer;
	z-index: 2;
	transition: transform 0.2s ease;
}

.dm-vs-lightbox__close:hover,
.dm-vs-lightbox__close:focus-visible {
	transform: scale(1.06);
}

.dm-vs-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1px solid var(--dm-bg-default-white);
	border-radius: 999px;
	background: transparent;
	color: var(--dm-bg-default-white);
	cursor: pointer;
	z-index: 2;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.dm-vs-lightbox__nav:hover,
.dm-vs-lightbox__nav:focus-visible {
	background: var(--dm-bg-default-white);
	border-color: var(--dm-bg-default-white);
	color: var(--dm-ext-near-black);
}

.dm-vs-lightbox__nav--prev {
	left: clamp(0.75rem, 3vw, 2.5rem);
}

.dm-vs-lightbox__nav--next {
	right: clamp(0.75rem, 3vw, 2.5rem);
}

/* Phone: both arrows move together into the bottom-right corner instead of
   sitting vertically centred at the left/right edges. */
@media (max-width: 767px) {
	.dm-vs-lightbox__nav {
		top: auto;
		bottom: clamp(1rem, 4vw, 2rem);
		transform: none;
	}

	.dm-vs-lightbox__nav--prev {
		left: auto;
		right: calc(48px + 0.75rem + clamp(1rem, 4vw, 2rem));
	}

	.dm-vs-lightbox__nav--next {
		right: clamp(1rem, 4vw, 2rem);
	}
}

/* ---- Small desktop (1024-1280): match the Figma board ---------------- *
 * Figma "Village - Small Desktop" (2024:29073):
 *   breadcrumbs (2024:29102)   py-16
 *   Header (2024:29103)        py-64, 60px title, 32 to a 500-wide 20px intro
 *   image (2024:29107)         full bleed, 500 tall, 64px white expand button
 *                              24 in from the bottom-right corner
 *   The family (2024:29109)    py-80; text px-64 py-40 | 1:1 image, 24 apart
 *   region + process (2024:29114)
 *                              py-80; region = 720-tall image | text p-64 at
 *                              the top; process overlaps it by 120 (mb -120)
 *                              with text p-64 at the bottom | a 550 square
 *                              image on the right
 *   The result (2024:29128)    600 tall, px-100 py-80, flat 35% black, copy
 *                              bottom-left: 40px title, 500-wide 18px text,
 *                              48px outline pill, 32 apart
 *   Shaped by the Land         320 cards, p-16 pb-24, 24 under the 3/2 image,
 *                              24px yellow title, 14px copy in a 100 box, 16
 *                              apart, link right-aligned
 * The Mezcales slider is the shared .dm-shop (matched in shop-mezcales.css).
 * Must stay at the end of the file: a media query adds no specificity. */
@media (min-width: 1024px) and (max-width: 1280.98px) {
	/* ---- Hero ---- */
	.dm-vs-hero {
		padding-top: 16px;
	}

	/* Two classes so this outranks the inline px-4 utility. */
	.dm-vs-hero__crumb.breadcrumbs {
		padding-inline: 0;
	}

	/* Breadcrumb as on every board: 8 between items, pipes full strength,
	   current page at 70% (style.css defaults to 0.4 / 0.5). */
	.dm-vs-hero__crumb.breadcrumbs.text-forest li + *::before {
		opacity: 1;
		margin: 0 8px;
	}

	.dm-vs-hero__crumb.breadcrumbs.text-forest li:last-child {
		opacity: 0.7;
	}

	/* 16 under the breadcrumb + the header's 64 top padding. */
	.dm-vs-hero__head {
		margin-top: 80px;
		padding-inline: 0;
	}

	.dm-vs-hero__title {
		font-size: 60px;                /* heading/h1 */
	}

	.dm-vs-hero__intro {
		margin-top: 32px;
		max-width: 500px;
		font-size: 20px;
	}

	.dm-vs-hero__figure {
		margin-top: 64px;
	}

	.dm-vs-hero__img {
		height: 500px;
		max-height: none;
	}

	.dm-vs-hero__expand {
		right: 24px;
		bottom: 24px;
		width: 64px;
		height: 64px;
	}

	.dm-vs-hero__expand svg {
		width: 24px;
		height: 24px;
	}

	/* ---- Story rows ---- */
	.dm-vs-story {
		padding-block: 80px;
	}

	.dm-vs-story > .container {
		padding-inline: 0;
	}

	.dm-vs-story__row {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 24px;
		align-items: stretch;
	}

	/* The family -> region: each closes its own py-80 section on the board. */
	.dm-vs-story__row + .dm-vs-story__row {
		margin-top: 160px;
	}

	.dm-vs-story__body {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 64px;
	}

	.dm-vs-story__title {
		margin-bottom: 24px;
		font-size: 52px;                /* heading/h2 */
		letter-spacing: -0.02em;        /* -1.04px at 52px */
	}

	.dm-vs-story__text {
		margin-bottom: 16px;
		max-width: none;
		color: var(--dm-fg-default-primary);
		font-size: 18px;                /* body/lg/regular */
		line-height: 1.4;
	}

	.dm-vs-story__media {
		align-self: center;
		border-radius: 4px;
	}

	/* The family: text px-64 py-40 beside a square photo. */
	.dm-vs-story__row:nth-child(1) .dm-vs-story__body {
		padding: 40px 64px;
	}

	.dm-vs-story__row:nth-child(1) .dm-vs-story__media img {
		aspect-ratio: 1 / 1;
	}

	/* The region: a tall 720 photo, copy hanging from the top. */
	.dm-vs-story__row:nth-child(2) .dm-vs-story__body {
		justify-content: flex-start;
	}

	.dm-vs-story__row:nth-child(2) .dm-vs-story__media img {
		aspect-ratio: auto;
		height: 720px;
	}

	/* The process: tucked 120 up under the region row, copy sitting at the
	   bottom, a 550 square photo against the right edge. */
	.dm-vs-story__row:nth-child(2) + .dm-vs-story__row:nth-child(3) {
		margin-top: -120px;
	}

	.dm-vs-story__row:nth-child(3) .dm-vs-story__body {
		justify-content: flex-end;
	}

	.dm-vs-story__row:nth-child(3) .dm-vs-story__media {
		justify-self: end;
		width: min(550px, 100%);
	}

	.dm-vs-story__row:nth-child(3) .dm-vs-story__media img {
		aspect-ratio: 1 / 1;
	}

	/* No-image rows keep their single centred column. */
	.dm-vs-story__row--noimage {
		grid-template-columns: 1fr;
	}

	/* ---- The result ---- */
	.dm-vs-result--composed {
		min-height: 600px;
	}

	.dm-vs-result--composed::before {
		background: color-mix(in srgb, var(--dm-ext-black) 35%, transparent);
	}

	.dm-vs-result--composed .dm-vs-result__inner {
		align-items: flex-end;
		padding: 80px 0;
	}

	.dm-vs-result--composed .dm-vs-result__body {
		width: 500px;
	}

	.dm-vs-result--composed .dm-vs-result__title {
		margin-bottom: 32px;
		font-size: 40px;                /* heading/h3 */
		letter-spacing: -0.01em;        /* -0.4px at 40px */
	}

	.dm-vs-result--composed .dm-vs-result__text {
		margin: 0 0 32px;
		max-width: none;
		font-size: 18px;                /* body/lg/regular */
	}

	.dm-vs-result--composed .dm-vs-result__btn {
		gap: 8px;
		padding: 0 24px;
	}

	/* ---- Shaped by the Land: village cards ---- */
	.dm-shop__track > .dm-vcard {
		flex-basis: 320px;
	}

	.dm-vcard {
		padding: 16px 16px 24px;
	}

	.dm-vcard__media {
		margin-bottom: 24px;
	}

	.dm-vcard__body {
		padding-inline: 0;
	}

	.dm-vcard__title {
		margin-bottom: 16px;
		font-size: 24px;                /* heading/h5 */
		line-height: 1.2;
	}

	/* body/sm in a fixed 100px box (five lines). */
	.dm-vcard__desc {
		margin-bottom: 16px;
		height: 100px;
		font-size: 14px;
		line-height: 1.4;
		-webkit-line-clamp: 5;
	}

	.dm-vcard__link {
		gap: 4px;
	}
}