/* =================================================================
 * routes/vodka.css — The Vodka "the liquid as a numbered process" (§4.3)
 *
 * Ink page. Reuses .vv-act, .vv-split, .vv-ledger, .vv-fact-slab,
 * .vv-macro-band, .vv-hour-stamp, .vv-raise; the .vv-st-reveal / -reveal-img
 * hooks (scroll-fx) carry the slow reveals. This file holds the route's
 * typography, the Four Pourings grid, the materiality band captions, the
 * hours strip, and The Pour wipe on the hero.
 * ================================================================= */

.vv-vodka6 { position: relative; z-index: var(--vv-z-raised); }
.vv-vodka6 .vv-ledger { display: block; }   /* no marginalia rail; ghost numeral still bleeds */

/* Shared route type — Didone display, Cormorant body (matches Our Story) */
.vv-vd-title {
	font-family: var(--vv-font-display); font-weight: 400;
	font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.05; color: var(--vv-bone);
	text-transform: none; margin: 0 0 clamp(16px, 2.2vw, 26px);
}
.vv-vd-lead {
	font-family: var(--vv-font-body); font-size: clamp(1.15rem, 2vw, 1.4rem);
	line-height: 1.7; color: var(--vv-bone-70); margin: 0 auto; max-width: 60ch;
}

/* ---- HERO — packshot + The Pour wipe ---------------------------------- */
.vv-vd-hero { padding-top: clamp(7rem, 12vh, 10rem); }
.vv-vd-hero__copy { align-self: center; }
.vv-vd-hero__title {
	font-family: var(--vv-font-display); font-weight: 400;
	font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1.02; color: var(--vv-bone);
	margin: 10px 0 clamp(18px, 2.4vw, 28px);
}
.vv-vd-hero__lead {
	font-family: var(--vv-font-body); font-size: clamp(1.1rem, 1.9vw, 1.3rem);
	line-height: 1.7; color: var(--vv-bone-70); max-width: 46ch; margin: 0 0 1em;
}
.vv-vd-hero__purpose { font-family: var(--vv-font-ritual); font-style: italic; font-size: 1.25rem; color: var(--vv-brass); margin: 0 0 clamp(22px, 3vw, 32px); }
.vv-vd-hero__cta { display: flex; flex-wrap: wrap; gap: clamp(14px, 2vw, 22px); align-items: center; }

.vv-vd-hero__frame { position: relative; overflow: hidden; }
.vv-vd-hero__img, .vv-vd-hero__frame .vv-imgslot--empty { aspect-ratio: 4 / 5; width: 100%; }
/* A2-fix (v2): the live packshot is a 3:2 landscape master with the bottle set
   left-of-centre and wide dark negative space. A plain cover-crop centred on the
   frame sliced the bottle's left edge ("half the bottle"); an object-fit:contain
   letterbox left a visible seam above the photo. Cover with object-position pulled
   toward the bottle fills the 4:5 slot edge-to-edge (no seam) and keeps the whole
   bottle — the empty shadow crops off the right. */
.vv-vd-hero__img { object-fit: cover; object-position: 30% center; }
/* The Pour — a plum/ink curtain sweeps up off the packshot once on load. The
   image paints underneath at t=0 (LCP-safe); under reduced-motion --vv-dur-pour
   is 0ms, so it resolves instantly with no motion. */
.vv-vd-hero__wipe {
	position: absolute; inset: 0; z-index: 2; pointer-events: none;
	background: linear-gradient(180deg, var(--vv-ink) 0%, var(--vv-plum) 100%);
	animation: vv-pour var(--vv-dur-pour) cubic-bezier(0.83, 0, 0.17, 1) both;
}
.vv-vd-hero__wipe::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
	background: linear-gradient(to right, transparent, var(--vv-brass), transparent);
}
@keyframes vv-pour { from { transform: translateY(0); } to { transform: translateY(-100%); } }

/* ---- FACT SLAB -------------------------------------------------------- */
.vv-vd-facts__slab { max-width: 720px; margin: 0 auto; }
.vv-vd-facts__list { margin: 0; }
.vv-vd-facts__row {
	display: flex; justify-content: space-between; gap: 16px;
	padding: 13px 0; border-bottom: 1px solid rgba(21,16,14,0.12);
}
.vv-vd-facts__row:last-child { border-bottom: 0; }
.vv-vd-facts__row dt {
	font-family: var(--vv-font-ui); font-size: 11px; letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--vv-ink); opacity: 0.7;
}
.vv-vd-facts__row dd { margin: 0; font-family: var(--vv-font-body); font-size: clamp(1rem, 1.6vw, 1.15rem); color: var(--vv-ink); text-align: right; }

/* ---- THE FOUR POURINGS ------------------------------------------------ */
.vv-vd-pourings__head { text-align: center; max-width: 62ch; margin: 0 auto clamp(40px, 6vw, 72px); }
.vv-vd-pourings__list {
	list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(36px, 5vw, 64px);
}
@media (min-width: 760px) { .vv-vd-pourings__list { grid-template-columns: 1fr 1fr; column-gap: clamp(48px, 7vw, 96px); } }
.vv-vd-pouring { position: relative; }
.vv-vd-pouring__step {
	font-family: var(--vv-font-ui); font-size: 11px; letter-spacing: 0.18em;
	text-transform: uppercase; font-variant: small-caps; color: var(--vv-brass); margin: 0 0 12px;
}
.vv-vd-pouring__copy { font-family: var(--vv-font-body); font-size: clamp(1.1rem, 1.8vw, 1.3rem); line-height: 1.7; color: var(--vv-bone-70); margin: 0; }

/* Then, charcoal. — band caption block */
.vv-vd-charcoal { margin-top: clamp(48px, 7vw, 88px); }
.vv-vd-charcoal__cap {
	position: absolute; left: clamp(16px, 4vw, 48px); bottom: clamp(16px, 4vw, 40px);
	right: clamp(16px, 4vw, 48px); z-index: 1; max-width: 46ch;
	text-shadow: 0 1px 12px rgba(0,0,0,0.7);
}
.vv-vd-charcoal__lead { display: block; font-family: var(--vv-font-display); font-size: clamp(1.4rem, 3vw, 2rem); color: var(--vv-bone); margin-bottom: 8px; }
.vv-vd-charcoal__body { display: block; font-family: var(--vv-font-body); font-size: clamp(0.95rem, 1.6vw, 1.1rem); line-height: 1.6; color: var(--vv-bone-70); }

/* ---- TASTING NOTES ---------------------------------------------------- */
.vv-vd-notes__head { text-align: center; margin-bottom: clamp(32px, 5vw, 56px); }
.vv-vd-notes__grid { display: grid; gap: clamp(28px, 4vw, 48px); }
@media (min-width: 760px) { .vv-vd-notes__grid { grid-template-columns: repeat(3, 1fr); } }
.vv-vd-note__title { font-family: var(--vv-font-display); font-weight: 400; font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: var(--vv-bone); margin: 0 0 12px; }
.vv-vd-note__copy { font-family: var(--vv-font-body); font-size: clamp(1rem, 1.7vw, 1.15rem); line-height: 1.7; color: var(--vv-bone-70); margin: 0; }

/* ---- MATERIALITY BANDS ------------------------------------------------ */
.vv-vd-material { display: grid; gap: 0; }
.vv-vd-material__band { }
.vv-vd-material__cap {
	position: absolute; left: clamp(16px, 4vw, 48px); bottom: clamp(16px, 4vw, 40px); z-index: 1;
	max-width: 40ch; text-shadow: 0 1px 12px rgba(0,0,0,0.7);
}
.vv-vd-material__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-vd-material__line { display: block; font-family: var(--vv-font-display); font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.2; color: var(--vv-bone); }
/* The Glass band reads from the right (owner note, final visual pass). */
.vv-vd-material__cap--right { left: auto; right: clamp(16px, 4vw, 48px); text-align: right; }

/* ---- HOURS STRIP ------------------------------------------------------ */
.vv-vd-hours__head { text-align: center; margin-bottom: clamp(28px, 4vw, 44px); }
.vv-vd-hours__list {
	list-style: none; margin: 0 0 clamp(28px, 4vw, 40px); padding: 0;
	display: grid; gap: clamp(16px, 2vw, 24px);
}
@media (min-width: 760px) { .vv-vd-hours__list { grid-template-columns: repeat(5, 1fr); } }
.vv-vd-hour { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--vv-border-gold); }
.vv-vd-hour__dot { width: 8px; height: 8px; border-radius: 50%; }
.vv-vd-hour__name { font-family: var(--vv-font-ui); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vv-bone); }
.vv-vd-hour__note { font-family: var(--vv-font-body); font-size: 0.95rem; line-height: 1.5; color: var(--vv-bone-70); }
.vv-vd-hours .vv-btn--text { display: inline-block; }

@media (max-width: 759px) {
	.vv-vd-hero__lead, .vv-vd-lead { max-width: none; }
	.vv-vd-material__cap { right: clamp(16px, 4vw, 48px); }
}