/* ==========================================================================
   VOODOO VODKA — routes/cocktail-single.css
   Rev6 · Grand Design §4.6 — "the kept recipe card."

   Loaded after pages.css on single vv_cocktail (vv_route_css_slug →
   'cocktail-single'). A 5/7 split on the Ink page ground: left is the still
   (sticky on desktop); right is a Bone recipe card — hairline-ruled, hour
   eyebrow, spec table, ruled ingredients, numbered method, twist marginalia,
   the zero-proof block, premium note, house-bottle chip, and the actions.

   Fresh .vv-cs namespace (the legacy .vv-recipe rules stay in pages.css and
   are no longer emitted by the template). Functional text is Ink on Bone for
   AA; the hour hue lands only as the card's top accent bar and small marks.
   ========================================================================== */

.vv-cs {
	--vv-cs-rule: color-mix(in srgb, var(--vv-ink) 14%, transparent);
	--vv-cs-rule-soft: color-mix(in srgb, var(--vv-ink) 8%, transparent);
	--vv-cs-ink-70: color-mix(in srgb, var(--vv-ink) 72%, transparent);
	/* Muted label ink — kept at 64% so small labels still clear WCAG AA (5.6:1)
	   on Bone; brass/marigold-deep fail as text on Bone, so warmth lives in the
	   dark-amber accent below (AA-safe at 5.5:1) and in decorative glyphs only. */
	--vv-cs-ink-55: color-mix(in srgb, var(--vv-ink) 64%, transparent);
	--vv-cs-accent: color-mix(in srgb, var(--vv-marigold-deep) 62%, var(--vv-ink));
	padding-block: clamp(1.5rem, 5vh, 3.5rem) 0;
}

.vv-cs__grid {
	display: grid;
	gap: clamp(24px, 4vw, 56px);
	align-items: start;
}
@media (min-width: 900px) {
	.vv-cs__grid { grid-template-columns: 5fr 7fr; }
}

/* --- Left: the still (sticky on desktop) --------------------------------- */
@media (min-width: 900px) {
	.vv-cs__still { position: sticky; top: calc(var(--vv-nav-height) + 24px); }
}
.vv-cs__still-media {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.vv-cs__still-img,
.vv-cs__still-media .vv-imgslot--empty {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}
.vv-cs__still-media::before {  /* film grain, like the rest of the imagery */
	content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
	background-image: var(--vv-grain); background-size: 160px 160px;
	opacity: 0.07; mix-blend-mode: overlay;
}

/* --- Right: the kept recipe card (Bone) --------------------------------- */
.vv-cs__card {
	background: var(--vv-bone);
	color: var(--vv-ink);
	border-top: 2px solid var(--vv-hour, var(--vv-brass));
	padding: clamp(24px, 4vw, 52px);
}

.vv-cs__back {
	display: inline-block;
	font-family: var(--vv-font-ui);
	font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--vv-cs-ink-55);
	text-decoration: none;
	margin-bottom: clamp(20px, 3vw, 32px);
	transition: color var(--vv-dur-fast) var(--vv-ease-out-expo);
}
.vv-cs__back:hover { color: var(--vv-cs-accent); }
.vv-cs__back:focus-visible { outline: 2px solid var(--vv-cs-accent); outline-offset: 3px; }

.vv-cs__eyebrow {
	font-family: var(--vv-font-ui);
	font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--vv-cs-ink-70);
	margin: 0 0 14px;
}
.vv-cs__eyebrow-hour { color: var(--vv-ink); font-weight: 600; }

.vv-cs__title {
	font-family: var(--vv-font-display);
	font-weight: 400;
	font-size: clamp(2.2rem, 4.5vw, 3.4rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--vv-ink);
	margin: 0;
}
.vv-cs__lede {
	font-family: var(--vv-font-body);
	font-style: italic;
	font-size: clamp(1.2rem, 2vw, 1.55rem);
	line-height: 1.4;
	color: var(--vv-cs-ink-70);
	max-width: 42ch;
	margin: 0.6em 0 0;
}

/* Spec table */
.vv-cs__spec {
	display: grid;
	grid-template-columns: repeat(3, auto);
	gap: 0;
	margin: clamp(24px, 3vw, 36px) 0;
	border-top: 1px solid var(--vv-cs-rule);
	border-bottom: 1px solid var(--vv-cs-rule);
}
.vv-cs__spec-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 24px 16px 0;
}
.vv-cs__spec-row + .vv-cs__spec-row { padding-left: clamp(16px, 3vw, 32px); border-left: 1px solid var(--vv-cs-rule); }
.vv-cs__spec dt {
	font-family: var(--vv-font-ui);
	font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
	color: var(--vv-cs-ink-55);
}
.vv-cs__spec dd {
	margin: 0;
	font-family: var(--vv-font-body);
	font-size: 1.15rem;
	color: var(--vv-ink);
}

/* Effort flowers on Bone */
.vv-cs__flowers { letter-spacing: 3px; font-size: 0.95rem; }
.vv-cs__flowers .vv-flower { color: color-mix(in srgb, var(--vv-ink) 22%, transparent); }
.vv-cs__flowers .vv-flower.is-on { color: var(--vv-marigold-deep); }

/* Serves stepper */
.vv-cs__yield { display: inline-flex; align-items: center; gap: 4px; }
.vv-cs__yield-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px;
	font-family: var(--vv-font-ui); font-size: 1.2rem; line-height: 1;
	color: var(--vv-ink);
	background: transparent;
	border: 1px solid var(--vv-cs-rule);
	border-radius: 50%;
	cursor: pointer;
	transition: border-color var(--vv-dur-fast) var(--vv-ease-out-expo), background var(--vv-dur-fast) var(--vv-ease-out-expo);
}
.vv-cs__yield-btn:hover { border-color: var(--vv-ink); background: color-mix(in srgb, var(--vv-ink) 5%, transparent); }
.vv-cs__yield-btn:focus-visible { outline: 2px solid var(--vv-cs-accent); outline-offset: 2px; }
.vv-cs__yield-val { min-width: 1.5ch; text-align: center; font-family: var(--vv-font-body); font-size: 1.15rem; color: var(--vv-ink); }

/* Section headings */
.vv-cs__h {
	font-family: var(--vv-font-ui);
	font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
	color: var(--vv-ink);
	margin: clamp(28px, 3.5vw, 40px) 0 14px;
}

/* Ingredients — ruled list */
.vv-cs__ingredients { list-style: none; margin: 0; padding: 0; }
.vv-cs__ingredient {
	display: flex; align-items: baseline; gap: 16px;
	padding: 11px 0;
	border-bottom: 1px solid var(--vv-cs-rule-soft);
	font-family: var(--vv-font-body);
	font-size: 1.15rem;
	color: var(--vv-ink);
}
.vv-cs__amt { flex: 0 0 6.5em; font-variant-numeric: tabular-nums; color: var(--vv-cs-accent); }
.vv-cs__item { flex: 1 1 auto; }

/* Method — numbered */
.vv-cs__method { margin: 0; padding: 0; list-style: none; counter-reset: vv-cs-step; }
.vv-cs__method li {
	position: relative;
	padding: 0 0 16px 44px;
	font-family: var(--vv-font-body);
	font-size: 1.15rem; line-height: 1.5;
	color: var(--vv-ink);
	counter-increment: vv-cs-step;
}
.vv-cs__method li::before {
	content: counter(vv-cs-step);
	position: absolute; left: 0; top: -0.1em;
	font-family: var(--vv-font-display);
	font-size: 1.4rem; line-height: 1;
	color: color-mix(in srgb, var(--vv-ink) 50%, transparent);
}

/* Signature twist — marginalia */
.vv-cs__twist {
	margin: clamp(24px, 3vw, 32px) 0;
	padding: 4px 0 4px 20px;
	border-left: 2px solid var(--vv-hour, var(--vv-brass));
}
.vv-cs__twist-label {
	display: block;
	font-family: var(--vv-font-ui);
	font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--vv-cs-ink-55);
	margin-bottom: 6px;
}
.vv-cs__twist p {
	margin: 0;
	font-family: var(--vv-font-body); font-style: italic;
	font-size: 1.15rem; line-height: 1.45; color: var(--vv-cs-ink-70);
}

/* Zero-proof, same toast */
.vv-cs__zero {
	margin: clamp(28px, 3.5vw, 40px) 0;
	padding: clamp(20px, 2.5vw, 28px) 0;
	border-top: 1px solid var(--vv-cs-rule);
	border-bottom: 1px solid var(--vv-cs-rule);
}
.vv-cs__zero-label {
	font-family: var(--vv-font-ui);
	font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
	color: var(--vv-cs-accent);
	margin: 0 0 8px;
}
.vv-cs__zero-sub {
	font-family: var(--vv-font-body); font-style: italic;
	font-size: 1.05rem; color: var(--vv-cs-ink-55);
	margin: 0 0 12px; max-width: 46ch;
}
.vv-cs__zero-line {
	font-family: var(--vv-font-body);
	font-size: 1.15rem; line-height: 1.45; color: var(--vv-ink);
	margin: 0; max-width: 46ch;
}

/* Premium note */
.vv-cs__premium {
	font-family: var(--vv-font-body);
	font-size: 1.1rem; color: var(--vv-cs-ink-70);
	margin: 0 0 clamp(24px, 3vw, 32px);
}
.vv-cs__premium-label { font-weight: 600; color: var(--vv-ink); }

/* Pour it from the house bottle — chip */
.vv-cs__chip {
	display: flex; align-items: center; gap: 16px;
	padding: 12px 18px 12px 12px;
	border: 1px solid var(--vv-cs-rule);
	text-decoration: none;
	color: var(--vv-ink);
	margin-bottom: clamp(20px, 3vw, 28px);
	transition: border-color var(--vv-dur-fast) var(--vv-ease-out-expo), transform var(--vv-dur-fast) var(--vv-ease-out-expo);
}
.vv-cs__chip:hover { border-color: var(--vv-ink); transform: translateY(-2px); }
.vv-cs__chip:focus-visible { outline: 2px solid var(--vv-cs-accent); outline-offset: 2px; }
.vv-cs__chip-media {
	flex: 0 0 auto; width: 48px; height: 60px;
	display: flex; align-items: center; justify-content: center;
	background: var(--vv-ink); overflow: hidden;
}
.vv-cs__chip-img { width: 100%; height: 100%; object-fit: cover; }
.vv-cs__chip-mark { color: var(--vv-brass); font-size: 1.2rem; }
.vv-cs__chip-body { display: flex; flex-direction: column; gap: 3px; }
.vv-cs__chip-kicker {
	font-family: var(--vv-font-ui);
	font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--vv-cs-ink-55);
}
.vv-cs__chip-name {
	font-family: var(--vv-font-ritual); font-style: italic;
	font-size: 1.2rem; color: var(--vv-ink);
}

/* Actions — override the dark-ground .vv-btn variants for the Bone card */
.vv-cs__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.vv-cs__actions .vv-btn { min-height: 44px; display: inline-flex; align-items: center; }
.vv-cs__card .vv-btn--primary { color: var(--vv-ink); border-color: var(--vv-ink); }
.vv-cs__card .vv-btn--primary:hover,
.vv-cs__card .vv-btn--primary:focus-visible { background: var(--vv-ink); color: var(--vv-bone); }
.vv-cs__card .vv-btn--ghost { color: var(--vv-cs-ink-70); border-bottom-color: var(--vv-cs-rule); }
.vv-cs__card .vv-btn--ghost:hover { color: var(--vv-ink); border-bottom-color: var(--vv-ink); }

/* --- Mobile: stack, still first, no sticky ------------------------------ */
@media (max-width: 899px) {
	.vv-cs__spec { grid-template-columns: 1fr 1fr; }
	.vv-cs__spec-row:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--vv-cs-rule); padding-left: 0; }
}
@media (max-width: 560px) {
	.vv-cs__still-img,
	.vv-cs__still-media .vv-imgslot--empty { aspect-ratio: 3 / 2; }
}

@media (prefers-reduced-motion: reduce) {
	.vv-cs__chip, .vv-cs__yield-btn, .vv-cs__back { transition: none; }
}

/* --- Print — the recipe card, clean on white --------------------------- */
@media print {
	.vv-nav, .vv-footer, #vv-progress, .vv-cs__actions, .vv-cs__back, .vv-cs__chip, .vv-raise { display: none !important; }
	.vv-cs__still { display: none !important; }
	.vv-cs__grid { display: block; }
	.vv-cs__card { background: #fff; color: #000; border: 0; padding: 0; }
}