/* ==========================================================================
   VOODOO VODKA — routes/poppet.css
   Rev6 · Grand Design §4.8 — "macro cinema" (Candlelight).

   Loaded after pages.css on /the-poppet (vv_route_css_slug → 'poppet').
   Owns the full-bleed macro hero framing, the folk-craft copy, THE MATERIALS
   Macro Bands + captions, the La Catrina "why we make them" beat, KEEP IT,
   the honest #PourWithPurpose gallery, and the guarded keepsake cards. Reuses
   the shared .vv-arrival hero, .vv-macro-band, .vv-otheater, .vv-hour-stamp,
   .vv-raise; slow reveals ride the global .vv-st-reveal → .reveal hook.
   ========================================================================== */

.vv-pp { position: relative; }

/* --- 1 · Hero — reuse .vv-arrival; a touch more macro drama ------------- */
.vv-pp-hero .vv-arrival__media .vv-slot-img,
.vv-pp-hero .vv-arrival__media .vv-imgslot--empty { aspect-ratio: 4 / 5; min-height: 74vh; }
@media (min-width: 900px) {
	.vv-pp-hero .vv-arrival__media .vv-slot-img,
	.vv-pp-hero .vv-arrival__media .vv-imgslot--empty { aspect-ratio: 16 / 9; }
}

/* --- 2 · What a poppet is ----------------------------------------------- */
.vv-pp-what { text-align: center; }
.vv-pp-what .vv-measure { margin-inline: auto; }
.vv-pp-what__lede {
	font-family: var(--vv-font-body);
	font-size: clamp(1.35rem, 2.6vw, 1.9rem);
	line-height: 1.5;
	color: var(--vv-bone);
	margin: 0.6em auto 0;
}

/* --- 3 · The materials — Macro Bands + captions ------------------------- */
.vv-pp-materials > .vv-container { text-align: center; margin-bottom: clamp(24px, 4vw, 44px); }
.vv-pp-band { margin-bottom: 0; }
.vv-pp-band__cap {
	position: absolute; left: clamp(16px, 4vw, 48px); bottom: clamp(16px, 4vw, 40px); z-index: 1;
	max-width: 40ch; text-shadow: 0 1px 14px rgba(0,0,0,0.72);
}
.vv-pp-band__label {
	display: block; font-family: var(--vv-font-ui); font-size: 11px; letter-spacing: 0.2em;
	text-transform: uppercase; color: var(--vv-brass); margin-bottom: 8px;
}
.vv-pp-band__line {
	display: block; font-family: var(--vv-font-body);
	font-size: clamp(1.15rem, 2.2vw, 1.55rem); line-height: 1.3; color: var(--vv-bone);
}
/* The Twine band reads from the right, alternating the three bands
   (owner note, final visual pass). */
.vv-pp-band__cap--right { left: auto; right: clamp(16px, 4vw, 48px); text-align: right; }
.vv-pp-note {
	text-align: center; margin-inline: auto;
	margin-top: clamp(28px, 4vw, 48px);
	font-family: var(--vv-font-body); font-style: italic;
	font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--vv-bone-70);
}

/* --- 4 · Why we make them — La Catrina beside the in-hand keepsake ------ */
.vv-pp-why__media .vv-otheater__img,
.vv-pp-why__media .vv-imgslot--empty { aspect-ratio: 4 / 5; }
.vv-pp-why__para {
	font-family: var(--vv-font-body);
	font-size: clamp(1.25rem, 2.2vw, 1.7rem);
	line-height: 1.5;
	color: var(--vv-bone);
	max-width: 40ch;
	margin: 0.4em 0 0;
}

/* --- 5 · Keep it -------------------------------------------------------- */
.vv-pp-keep { text-align: center; }
.vv-pp-keep .vv-measure { margin-inline: auto; }
.vv-pp-keep .vv-hour-stamp { justify-content: center; margin-bottom: clamp(16px, 2.5vw, 24px); }
.vv-pp-keep__para {
	font-family: var(--vv-font-body);
	font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.5; color: var(--vv-bone);
	margin: 0 auto;
}
.vv-pp-keep__cta {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
	gap: 20px 28px; margin-top: clamp(24px, 3.5vw, 36px);
}

/* --- 6 · #PourWithPurpose gallery — honest empty state ------------------ */
.vv-pp-gallery { text-align: center; }
.vv-pp-gallery__head { margin-bottom: clamp(24px, 4vw, 40px); }
.vv-pp-gallery__title {
	font-family: var(--vv-font-display); font-weight: 400;
	font-size: clamp(2rem, 4.5vw, 3.4rem); color: var(--vv-bone); margin: 0.1em 0 0;
}
/* B3: six real gallery stills — 3×2 on desktop, 2-up on mobile. */
.vv-pp-gallery__grid {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: clamp(10px, 1.5vw, 18px);
	margin-bottom: clamp(24px, 3.5vw, 36px);
}
@media (max-width: 640px) { .vv-pp-gallery__grid { grid-template-columns: repeat(2, 1fr); } }
.vv-pp-gallery__img {
	aspect-ratio: 1 / 1; width: 100%; height: auto; object-fit: cover; display: block;
	background: var(--vv-ink-2); border: 1px solid var(--vv-border-gold);
}
/* legacy empty-tile placeholders (retired in B3) */
.vv-pp-gallery__tile {
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 1 / 1;
	background: var(--vv-ink-2);
	border: 1px solid var(--vv-border-gold);
}
.vv-pp-gallery__mark { color: var(--vv-bone-30); font-size: 1.3rem; }
.vv-pp-gallery__empty {
	margin-inline: auto;
	font-family: var(--vv-font-body); font-style: italic;
	font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.5; color: var(--vv-bone-70);
}
.vv-pp-gallery__empty strong { color: var(--vv-bone); font-style: normal; }

/* --- 7 · Keepsake cards — guarded (no live download until age-verified) - */
.vv-pp-cards { text-align: center; }
.vv-pp-cards .vv-measure { margin-inline: auto; }
.vv-pp-cards__intro {
	font-family: var(--vv-font-body);
	font-size: clamp(1.05rem, 1.7vw, 1.25rem); line-height: 1.55; color: var(--vv-bone-70);
	margin: 0.4em auto 0; max-width: 52ch;
}
.vv-pp-cards__row {
	list-style: none; margin: clamp(24px, 3.5vw, 36px) 0 0; padding: 0;
	display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 18px;
}
.vv-pp-card {
	font-family: var(--vv-font-ui); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--vv-bone-70);
	padding: 14px 22px; min-height: 44px;
	display: inline-flex; align-items: center;
	border: 1px solid var(--vv-border-gold);
	position: relative;
}
.vv-pp-card::after {  /* the guard mark — reads as "locked until verified" */
	content: "\2726"; margin-left: 10px; color: var(--vv-brass); opacity: 0.7; font-size: 0.8em;
}

@media (max-width: 899px) {
	.vv-pp-band__cap { max-width: 28ch; }
}