/* =================================================================
 * VOODOO VODKA — COMPONENTS
 *
 * The small reusable pieces. Buttons, cards, badges, flourishes,
 * form fields, the eyebrow and the rule.
 * ================================================================= */


/* -----------------------------------------------------------------
 * 1. EYEBROW
 * The small uppercase gold word above every headline.
 * --------------------------------------------------------------- */

.vv-eyebrow {
	display: inline-block;
	font-family: var(--vv-font-body);
	font-size: var(--vv-fs-eyebrow);
	font-weight: var(--vv-fw-semibold);
	letter-spacing: var(--vv-ls-eyebrow);
	text-transform: uppercase;
	color: var(--vv-gold);
	margin-bottom: var(--vv-space-4);
	line-height: 1;
}

body.vv-mode-parchment .vv-eyebrow {
	color: var(--vv-gold-deep);
}


/* -----------------------------------------------------------------
 * 2. RULE
 * The 60×1px gold line that opens every section.
 * --------------------------------------------------------------- */

.vv-rule {
	display: block;
	width: 60px;
	height: 1px;
	background: var(--vv-gold);
	margin-bottom: var(--vv-space-5);
	position: relative;
}

.vv-rule--center {
	margin-inline: auto;
}

.vv-rule--long {
	width: 100%;
	background: var(--vv-grad-rule);
}


/* -----------------------------------------------------------------
 * 3. FLOURISH
 * The ceremonial three-mark divider: ✦ ❦ ✦
 * --------------------------------------------------------------- */

.vv-flourish {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--vv-space-4);
	color: var(--vv-gold);
	margin: var(--vv-space-6) auto;
	width: 100%;
}

.vv-flourish span {
	width: 6px;
	height: 6px;
	background: var(--vv-gold);
	transform: rotate(45deg);
	display: block;
	box-shadow: 0 0 8px var(--vv-gold-glow);
}

.vv-flourish svg {
	color: var(--vv-gold);
	filter: drop-shadow(0 0 6px var(--vv-gold-glow));
}


/* -----------------------------------------------------------------
 * 4. BUTTONS
 *
 * Three flavors: primary (filled gold), ghost (outline), text (link).
 * Sharp corners. Generous letter-spacing. Slow gold halo on hover.
 * --------------------------------------------------------------- */

.vv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--vv-space-3);
	/* Rev5 push — button labels in Archivo (tracked caps), not the Abril
	   fat-face. At label size the fat-face read chunky/poster-ish; Archivo caps
	   match the eyebrows and read modern-luxury. */
	font-family: var(--vv-font-ui);
	font-size: var(--vv-fs-small);
	font-weight: var(--vv-fw-semibold);
	text-transform: uppercase;
	letter-spacing: 0.2em;   /* Rev5 — wide tracking; luxury buttons are mostly space */

	padding: var(--vv-space-4) var(--vv-space-7);   /* Rev5 — generous internal space */
	background: transparent;
	color: var(--vv-bone);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	background-image: none;
	/* Rev5 — flat hover only (no bounce) + a refined letter-spacing breath */
	transition:
		background var(--vv-dur-base) var(--vv-ease-out-expo),
		color var(--vv-dur-base) var(--vv-ease-out-expo),
		border-color var(--vv-dur-base) var(--vv-ease-out-expo),
		letter-spacing var(--vv-dur-base) var(--vv-ease-out-expo);
	position: relative;
	white-space: nowrap;
	line-height: 1;
}

.vv-btn:hover,
.vv-btn:focus-visible { background-image: none; letter-spacing: 0.24em; }   /* Phase A — tracking opens slightly on hover */

/* Rev5 — the beveled inner-outline ornament is retired (flat buttons only). */

/* Primary — Rev5: FLAT. A thin Bone hairline rule, transparent fill, no bevel,
   no bounce. The single primary action per screen. On Bone surfaces the rule is
   Ink (override below). Hover fills quietly to Bone with Ink text. */
.vv-btn--primary {
	background: transparent;
	color: var(--vv-bone);
	border-color: var(--vv-bone);
}

.vv-btn--primary:hover,
.vv-btn--primary:focus-visible {
	background: var(--vv-bone);
	border-color: var(--vv-bone);
	color: var(--vv-ink);
}

/* Ghost — Rev5: secondary/tertiary becomes text + hairline underline, no box. */
a.vv-btn--ghost,
.vv-btn--ghost {
	background: transparent;
	color: var(--vv-bone);
	border-color: transparent;
	padding-left: 0;
	padding-right: 0;
	border-bottom: 1px solid var(--vv-bone-50);
}

a.vv-btn--ghost:hover,
a.vv-btn--ghost:focus-visible,
.vv-btn--ghost:hover,
.vv-btn--ghost:focus-visible {
	background: transparent;
	color: var(--vv-bone);
	border-bottom-color: var(--vv-bone);
}

/* Parchment context — ghost button switches to dark text on cream backdrop.
   Applies to any section that uses the parchment palette (the Whisper,
   the Coven oath panel, the Legend chapters in parchment mode). */
body.vv-mode-parchment a.vv-btn--ghost,
body.vv-mode-parchment .vv-btn--ghost,
body.vv-page--bone #vv-main a.vv-btn--ghost,
body.vv-page--bone #vv-main .vv-btn--ghost,
.vv-whisper a.vv-btn--ghost,
.vv-whisper .vv-btn--ghost,
.vv-section--coven a.vv-btn--ghost,
.vv-section--coven .vv-btn--ghost,
.vv-section--parchment a.vv-btn--ghost,
.vv-section--parchment .vv-btn--ghost {
	color: var(--vv-cathedral-deep);
	border-color: transparent;
	border-bottom-color: var(--vv-cathedral-deep);  /* Rev5 — underline only on Bone */
}

body.vv-mode-parchment a.vv-btn--ghost:hover,
body.vv-mode-parchment .vv-btn--ghost:hover,
body.vv-page--bone #vv-main a.vv-btn--ghost:hover,
body.vv-page--bone #vv-main .vv-btn--ghost:hover,
.vv-whisper a.vv-btn--ghost:hover,
.vv-whisper .vv-btn--ghost:hover,
.vv-section--coven a.vv-btn--ghost:hover,
.vv-section--coven .vv-btn--ghost:hover,
.vv-section--parchment a.vv-btn--ghost:hover,
.vv-section--parchment .vv-btn--ghost:hover {
	background: transparent;
	color: var(--vv-cathedral-deep);
	border-color: transparent;
	border-bottom-color: var(--vv-cathedral-deep);
}

/* Text — underline link */
.vv-btn--text {
	padding: var(--vv-space-2) 0;
	color: var(--vv-bone);
	letter-spacing: var(--vv-ls-meta);
	position: relative;
}

.vv-btn--text::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: var(--vv-bone-50);   /* Rev5 — de-gold; neutral hairline */
	transition:
		transform var(--vv-dur-base) var(--vv-ease-out-expo),
		background var(--vv-dur-base) var(--vv-ease-out-expo);
	transform-origin: left center;
}

.vv-btn--text:hover::after {
	background: var(--vv-bone);
	transform: scaleX(1.04);
}

.vv-btn--text:hover {
	color: var(--vv-bone);
}

/* Rev5 — Bone reading surfaces: primary rule + text go Ink (Bone rule would
   vanish on Bone). Hover fills to Ink with Bone text. */
body.vv-page--bone #vv-main .vv-btn--primary,
body.vv-mode-parchment #vv-main .vv-btn--primary {
	color: var(--vv-ink);
	border-color: var(--vv-ink);
}
body.vv-page--bone #vv-main .vv-btn--primary:hover,
body.vv-page--bone #vv-main .vv-btn--primary:focus-visible,
body.vv-mode-parchment #vv-main .vv-btn--primary:hover,
body.vv-mode-parchment #vv-main .vv-btn--primary:focus-visible {
	background: var(--vv-ink);
	border-color: var(--vv-ink);
	color: var(--vv-bone);
}

/* Bottle cards always sit on a Bone panel regardless of page surface, so a
   Bone-ruled primary button vanishes (bone-on-bone). Force Ink here so the
   "View & Buy" CTA is visible AND keyboard/AT-reachable (the card media link is
   aria-hidden/decorative; this CTA is the accessible path to the PDP). */
.vv-bottle-card .vv-btn--primary {
	color: var(--vv-ink);
	border-color: var(--vv-ink);
}
.vv-bottle-card .vv-btn--primary:hover,
.vv-bottle-card .vv-btn--primary:focus-visible {
	background: var(--vv-ink);
	border-color: var(--vv-ink);
	color: var(--vv-bone);
}

/* Sizes */
.vv-btn--sm {
	padding: var(--vv-space-3) var(--vv-space-4);
	font-size: var(--vv-fs-meta);
}

.vv-btn--lg {
	padding: var(--vv-space-5) var(--vv-space-7);
	font-size: var(--vv-fs-body);
}

/* Wide — full width on mobile */
.vv-btn--block {
	display: flex;
	width: 100%;
}


/* -----------------------------------------------------------------
 * 5. ICON sizing utility
 * --------------------------------------------------------------- */

.vv-icon {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
}


/* -----------------------------------------------------------------
 * 6. CARDS
 * Base card pattern. Subclasses extend for recipe, product, story.
 * --------------------------------------------------------------- */

.vv-card {
	position: relative;
	background: var(--vv-midnight-2);
	border: 1px solid var(--vv-border);
	overflow: hidden;
	transition:
		border-color var(--vv-dur-base) var(--vv-ease-out-expo),
		transform var(--vv-dur-base) var(--vv-ease-out-expo),
		box-shadow var(--vv-dur-base) var(--vv-ease-out-expo);
}

.vv-card:hover {
	border-color: var(--vv-border-gold);
	transform: translateY(-4px);
	box-shadow: var(--vv-shadow-lg);
}

.vv-card__media {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	position: relative;
	background: var(--vv-midnight-3);
}

.vv-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--vv-dur-slow) var(--vv-ease-out-expo);
}

.vv-card:hover .vv-card__media img {
	transform: scale(1.04);
}

.vv-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 50%, rgba(11,5,16,0.65) 100%);
	pointer-events: none;
	opacity: 0.85;
}

.vv-card__body {
	padding: var(--vv-space-5);
}

.vv-card__title {
	font-family: var(--vv-font-display);
	font-size: var(--vv-fs-h4);
	letter-spacing: var(--vv-ls-headline);

	color: var(--vv-gold);
	margin-bottom: var(--vv-space-2);
	line-height: 1.2;
}

.vv-card__meta {
	font-family: var(--vv-font-ritual);
	font-style: italic;
	color: var(--vv-gold-bright);
	font-size: var(--vv-fs-small);
	margin-bottom: var(--vv-space-3);
}

.vv-card__desc {
	color: var(--vv-bone-70);
	font-size: var(--vv-fs-small);
	line-height: var(--vv-lh-normal);
}

.vv-card__link {
	position: absolute;
	inset: 0;
	background: transparent;
	background-image: none;
	z-index: 2;
}


/* Parchment-mode card variant */
.vv-card--parchment {
	background: var(--vv-candle);
	border-color: var(--vv-gold-tint-30);
	color: var(--vv-cathedral-deep);
}

.vv-card--parchment .vv-card__title { color: var(--vv-cathedral-deep); }
.vv-card--parchment .vv-card__meta  { color: var(--vv-cathedral); }
.vv-card--parchment .vv-card__desc  { color: var(--vv-cathedral-deep); opacity: 0.85; }


/* Gilded frame variant — used for the bottle lineup */
.vv-card--gilded {
	background: var(--vv-midnight);
	border: 1px solid var(--vv-gold-deep);
	padding: var(--vv-space-2);
}

.vv-card--gilded::before {
	content: "";
	position: absolute;
	inset: var(--vv-space-2);
	border: 1px solid var(--vv-gold);
	pointer-events: none;
	transition: border-color var(--vv-dur-base) var(--vv-ease-out-expo);
}

.vv-card--gilded:hover::before {
	border-color: var(--vv-gold-bright);
	box-shadow: inset 0 0 24px var(--vv-gold-tint-12);
}


/* -----------------------------------------------------------------
 * 7. RITUAL CARDS — the four categories on the homepage
 * --------------------------------------------------------------- */

.vv-ritual-card {
	position: relative;
	padding: var(--vv-space-6);
	min-height: 260px;
	border: 1px solid var(--vv-gold-deep);
	background: var(--vv-midnight);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	transition:
		border-color var(--vv-dur-base) var(--vv-ease-out-expo),
		transform var(--vv-dur-base) var(--vv-ease-out-expo),
		box-shadow var(--vv-dur-base) var(--vv-ease-out-expo);
}

.vv-ritual-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 0% 0%, var(--vv-gold-tint-08) 0%, transparent 60%);
	opacity: 0;
	transition: opacity var(--vv-dur-base) var(--vv-ease-out-expo);
	pointer-events: none;
}

.vv-ritual-card:hover::after { opacity: 1; }

.vv-ritual-card:hover {
	border-color: var(--vv-gold);
	transform: translateY(-6px);
	box-shadow: var(--vv-shadow-lg), var(--vv-shadow-glow-gold);
}

.vv-ritual-card__symbol {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--vv-cathedral-tint);
	color: var(--vv-gold);
	font-size: 22px;
	margin-bottom: var(--vv-space-5);
}

.vv-ritual-card__name {
	font-family: var(--vv-font-display);
	font-size: var(--vv-fs-h3);
	letter-spacing: var(--vv-ls-headline);

	color: var(--vv-gold-bright);
	margin-bottom: var(--vv-space-2);
}

.vv-ritual-card__tag {
	font-family: var(--vv-font-ritual);
	font-style: italic;
	color: var(--vv-bone);
	font-size: var(--vv-fs-small);
	margin-bottom: var(--vv-space-4);
}

.vv-ritual-card__desc {
	color: var(--vv-bone-70);
	font-size: var(--vv-fs-small);
	line-height: var(--vv-lh-normal);
	flex: 1;
}

.vv-ritual-card__examples {
	margin-top: var(--vv-space-4);
	font-family: var(--vv-font-body);
	font-size: var(--vv-fs-eyebrow);
	color: var(--vv-gold);
	letter-spacing: var(--vv-ls-eyebrow);
	text-transform: uppercase;
	line-height: var(--vv-lh-normal);
}

/* Category accent backgrounds */
.vv-ritual-card--blessings  { background: linear-gradient(135deg, #1a0d24 0%, var(--vv-midnight) 100%); }
.vv-ritual-card--summonings { background: linear-gradient(135deg, #1c0f30 0%, var(--vv-midnight) 100%); }
.vv-ritual-card--bindings   { background: linear-gradient(135deg, #240d22 0%, var(--vv-midnight) 100%); }
.vv-ritual-card--reckonings { background: linear-gradient(135deg, #14101a 0%, var(--vv-midnight) 100%); }


/* -----------------------------------------------------------------
 * 8. BADGES & TAGS
 * --------------------------------------------------------------- */

.vv-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--vv-space-2);
	padding: 4px var(--vv-space-3);
	font-family: var(--vv-font-body);
	font-size: var(--vv-fs-eyebrow);
	font-weight: var(--vv-fw-semibold);
	letter-spacing: var(--vv-ls-eyebrow);
	text-transform: uppercase;
	color: var(--vv-gold);
	border: 1px solid var(--vv-gold-deep);
	background: var(--vv-midnight-2);
}

.vv-badge--filled {
	background: var(--vv-gold);
	color: var(--vv-midnight);
	border-color: var(--vv-gold);
}

.vv-badge--garnet {
	color: var(--vv-bone);
	background: var(--vv-garnet);
	border-color: var(--vv-garnet);
}


/* -----------------------------------------------------------------
 * 9. PULL QUOTE — block style
 * --------------------------------------------------------------- */

.vv-pullquote {
	font-family: var(--vv-font-ritual);
	font-style: italic;
	font-size: var(--vv-fs-lead);
	line-height: var(--vv-lh-snug);
	color: var(--vv-gold-bright);
	text-align: center;
	padding: var(--vv-space-6) var(--vv-space-5);
	border-top: 1px solid var(--vv-gold);
	border-bottom: 1px solid var(--vv-gold);
	margin: var(--vv-space-7) auto;
	max-width: var(--vv-max-width-prose);
}

body.vv-mode-parchment .vv-pullquote {
	color: var(--vv-cathedral);
	border-color: var(--vv-gold-deep);
}


/* -----------------------------------------------------------------
 * 10. FORM ELEMENTS
 * --------------------------------------------------------------- */

.vv-field {
	display: flex;
	flex-direction: column;
	gap: var(--vv-space-2);
	margin-bottom: var(--vv-space-5);
}

.vv-field__label {
	font-family: var(--vv-font-ui);
	font-size: var(--vv-fs-eyebrow);
	font-weight: var(--vv-fw-semibold);
	letter-spacing: var(--vv-ls-eyebrow);
	text-transform: uppercase;
	color: var(--vv-silver);
}

.vv-field__input,
.vv-field__textarea,
.vv-field__select {
	width: 100%;
	font-family: var(--vv-font-ui);
	font-size: var(--vv-fs-body);
	color: var(--vv-bone);
	background: var(--vv-whisper);
	border: 1px solid var(--vv-border);
	padding: var(--vv-space-4);
	transition:
		border-color var(--vv-dur-fast) var(--vv-ease-out-expo),
		box-shadow var(--vv-dur-fast) var(--vv-ease-out-expo),
		background var(--vv-dur-fast) var(--vv-ease-out-expo);
}

.vv-field__input:focus,
.vv-field__textarea:focus,
.vv-field__select:focus {
	outline: none;
	border-color: var(--vv-gold);
	box-shadow: 0 0 0 3px var(--vv-gold-tint-12), inset 0 0 16px var(--vv-gold-tint-08);
	background: var(--vv-midnight-2);
}

.vv-field__textarea {
	min-height: 140px;
	resize: vertical;
	line-height: var(--vv-lh-normal);
}

.vv-field__hint {
	font-size: var(--vv-fs-meta);
	color: var(--vv-bone-50);
	font-style: italic;
}

.vv-field__error {
	font-size: var(--vv-fs-meta);
	color: var(--vv-garnet);
	font-weight: var(--vv-fw-semibold);
}

.vv-field--has-error .vv-field__input,
.vv-field--has-error .vv-field__textarea {
	border-color: var(--vv-garnet);
}


/* Inline email signup */
.vv-inline-form {
	display: flex;
	gap: 0;
	max-width: 480px;
	margin-inline: auto;
}

.vv-inline-form .vv-field__input {
	flex: 1;
	border-right: 0;
}

.vv-inline-form .vv-btn {
	flex-shrink: 0;
}


/* -----------------------------------------------------------------
 * 11. CHECKBOX & RADIO — branded
 * --------------------------------------------------------------- */

.vv-checkbox {
	display: inline-flex;
	align-items: flex-start;
	gap: var(--vv-space-3);
	cursor: pointer;
	font-size: var(--vv-fs-small);
	color: var(--vv-bone-70);
	line-height: var(--vv-lh-normal);
}

.vv-checkbox input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.vv-checkbox__box {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border: 1px solid var(--vv-gold-deep);
	background: var(--vv-midnight-2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all var(--vv-dur-fast) var(--vv-ease-out-expo);
	margin-top: 2px;
}

.vv-checkbox input:checked + .vv-checkbox__box {
	background: var(--vv-gold);
	border-color: var(--vv-gold);
}

.vv-checkbox input:checked + .vv-checkbox__box::after {
	content: "✓";
	color: var(--vv-midnight);
	font-size: 14px;
	font-weight: bold;
	line-height: 1;
}

.vv-checkbox input:focus-visible + .vv-checkbox__box {
	outline: 2px solid var(--vv-gold);
	outline-offset: 2px;
}


/* -----------------------------------------------------------------
 * 12. EMPTY STATE
 * --------------------------------------------------------------- */

.vv-empty-state {
	text-align: center;
	padding: var(--vv-space-9) var(--vv-space-5);
	max-width: 520px;
	margin-inline: auto;
}

.vv-empty-state__icon {
	display: inline-block;
	color: var(--vv-gold-deep);
	margin-bottom: var(--vv-space-5);
}

.vv-empty-state__icon svg { display: block; }

.vv-empty-state__action { margin-top: var(--vv-space-5); }

.vv-empty-state__title {
	font-family: var(--vv-font-display);
	color: var(--vv-gold);
	font-size: var(--vv-fs-h3);
	letter-spacing: var(--vv-ls-headline);

	margin-bottom: var(--vv-space-3);
}

.vv-empty-state__sub {
	color: var(--vv-bone-70);
	font-style: italic;
	font-family: var(--vv-font-ritual);
}


/* -----------------------------------------------------------------
 * 13. TOAST NOTIFICATIONS
 * --------------------------------------------------------------- */

.vv-toast {
	position: fixed;
	top: var(--vv-space-5);
	right: var(--vv-space-5);
	z-index: var(--vv-z-toast);
	padding: var(--vv-space-4) var(--vv-space-5);
	background: var(--vv-midnight-2);
	border: 1px solid var(--vv-gold);
	color: var(--vv-bone);
	font-size: var(--vv-fs-small);
	box-shadow: var(--vv-shadow-lg);
	transform: translateX(120%);
	transition: transform var(--vv-dur-base) var(--vv-ease-out-back);
	max-width: 360px;
}

.vv-toast.is-visible {
	transform: translateX(0);
}

.vv-toast--success { border-color: var(--vv-emerald); }
.vv-toast--error   { border-color: var(--vv-garnet); }


/* -----------------------------------------------------------------
 * 14. CONTAINER UTILITY
 * --------------------------------------------------------------- */

.vv-container {
	max-width: var(--vv-max-width);
	margin-inline: auto;
	padding-inline: var(--vv-space-5);
}

@media (min-width: 768px) {
	.vv-container { padding-inline: var(--vv-space-7); }
}

@media (min-width: 1024px) {
	.vv-container { padding-inline: var(--vv-space-8); }
}

.vv-container--prose {
	max-width: var(--vv-max-width-prose);
}

.vv-container--narrow {
	max-width: var(--vv-max-width-narrow);
}


/* -----------------------------------------------------------------
 * 15. CORNER BRACKETS
 * Used on key pages to frame the content like a label.
 * --------------------------------------------------------------- */

.vv-corner-frame {
	position: relative;
}

.vv-corner-frame::before,
.vv-corner-frame::after,
.vv-corner-frame > .vv-corner-tl,
.vv-corner-frame > .vv-corner-br {
	content: "";
	position: absolute;
	width: 32px;
	height: 32px;
	border: 1px solid var(--vv-gold);
	pointer-events: none;
	z-index: 1;
}

.vv-corner-frame::before  { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.vv-corner-frame::after   { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.vv-corner-frame > .vv-corner-tl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.vv-corner-frame > .vv-corner-br { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* Form submit feedback states */
.vv-newsletter-form__feedback.is-success,
.vv-form__feedback.is-success {
	color: var(--vv-gold-bright);
}

.vv-newsletter-form__feedback.is-error,
.vv-form__feedback.is-error {
	color: var(--vv-magenta);
}

[data-vv-form].is-submitting {
	opacity: 0.7;
	pointer-events: none;
}

[data-vv-form].is-sent .vv-field__input {
	opacity: 0.6;
}

.vv-spinner {
	display: inline-block;
	width: 12px;
	height: 12px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: vv-spin 0.6s linear infinite;
	vertical-align: -2px;
	margin-right: 4px;
}

@keyframes vv-spin {
	to { transform: rotate(360deg); }
}

/* ============================================================
   CONTACT FORM — Find Us
   ============================================================ */
.vv-contact-form {
	max-width: 680px;
	margin: var(--vv-space-7) auto var(--vv-space-8);
	display: flex;
	flex-direction: column;
	gap: var(--vv-space-5);
	text-align: left;
}

.vv-contact-form__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--vv-space-5);
}

@media (min-width: 640px) {
	.vv-contact-form__row { grid-template-columns: 1fr 1fr; }
}

.vv-contact-form__field {
	display: flex;
	flex-direction: column;
	gap: var(--vv-space-2);
}

.vv-contact-form__label {
	font-family: var(--vv-font-ui);
	font-size: var(--vv-fs-eyebrow);
	letter-spacing: var(--vv-ls-eyebrow);
	text-transform: uppercase;
	color: var(--vv-gold);
	opacity: 0.85;
}

.vv-contact-form input,
.vv-contact-form select,
.vv-contact-form textarea {
	width: 100%;
	padding: var(--vv-space-4) var(--vv-space-4);
	background: var(--vv-midnight-3);
	border: 1px solid var(--vv-gold-tint-12);
	border-radius: 2px;
	color: var(--vv-bone);
	font-family: var(--vv-font-ui);
	font-size: var(--vv-fs-body);
	transition: border-color var(--vv-dur-base) var(--vv-ease-out),
	            box-shadow var(--vv-dur-base) var(--vv-ease-out);
}

.vv-contact-form textarea { resize: vertical; min-height: 120px; }

.vv-contact-form input::placeholder,
.vv-contact-form textarea::placeholder {
	color: var(--vv-bone);
	opacity: 0.3;
}

.vv-contact-form input:focus,
.vv-contact-form select:focus,
.vv-contact-form textarea:focus {
	outline: none;
	border-color: var(--vv-gold);
	box-shadow: 0 0 0 3px var(--vv-gold-tint-12);
}

.vv-contact-form__actions {
	display: flex;
	align-items: center;
	gap: var(--vv-space-5);
	flex-wrap: wrap;
}

.vv-form__feedback {
	margin: 0;
	font-family: var(--vv-font-body);
	font-size: var(--vv-fs-small);
	min-height: 1.2em;
}

.vv-form__feedback.is-success { color: var(--vv-gold); }
.vv-form__feedback.is-error   { color: #C77; }

.vv-contact-form.is-sent input,
.vv-contact-form.is-sent select,
.vv-contact-form.is-sent textarea { opacity: 0.5; }

.vv-find-contact__or {
	text-align: center;
	margin: var(--vv-space-7) auto var(--vv-space-6);
	position: relative;
	max-width: 400px;
	color: var(--vv-bone);
	opacity: 0.4;
	font-family: var(--vv-font-body);
	font-size: var(--vv-fs-eyebrow);
	letter-spacing: var(--vv-ls-eyebrow);
	text-transform: uppercase;
}

.vv-find-contact__or::before,
.vv-find-contact__or::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 28%;
	height: 1px;
	background: var(--vv-gold-tint-12);
}
.vv-find-contact__or::before { left: 0; }
.vv-find-contact__or::after  { right: 0; }

/* =================================================================
 * REV6 COMPONENT LIBRARY — "One Evening at the House"
 * Build-once, reuse-everywhere. Each component is visible by default
 * (JS only ADDS reveal masks), responsive, and keyboard/reduced-motion
 * safe. Hour hues enter ONLY via the --vv-hour custom property on an
 * Hour Stamp rule or an ambient section; never on text, fills, buttons.
 * ================================================================= */

/* ---- Hour Stamp — staged-section opener (replaces plain eyebrows) --- */
.vv-hour-stamp {
	display: flex; align-items: center; justify-content: center; gap: 16px;
	font-family: var(--vv-font-ui);
	font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase;
	color: var(--vv-bone-70);
}
.vv-hour-stamp::before, .vv-hour-stamp::after {
	content: ""; flex: 1 1 auto; height: 1px; max-width: 120px;
	background: var(--vv-hour, var(--vv-brass-tint-30));
}
.vv-hour-stamp__num   { color: var(--vv-brass); font-style: normal; }
.vv-hour-stamp__glyph { color: var(--vv-hour, var(--vv-brass)); }
.vv-hour-stamp--on-bone { color: var(--vv-plum); }

/* ---- Ledger Entry — editorial block with a bleeding Didone numeral ---- */
.vv-ledger { position: relative; display: grid; gap: 18px; }
@media (min-width: 900px) { .vv-ledger { grid-template-columns: minmax(0,1fr) 180px; column-gap: 40px; } }
.vv-ledger__num {
	position: absolute; left: -0.08em; top: -0.32em; z-index: 0; pointer-events: none;
	font-family: var(--vv-font-display);
	font-size: var(--vv-size-numeral); line-height: 0.8;
	color: var(--vv-bone); opacity: 0.12;
}
.vv-ledger--on-bone .vv-ledger__num { color: var(--vv-ink); }
.vv-ledger__body { position: relative; z-index: 1; }
.vv-ledger__rule { height: 1px; background: var(--vv-border-gold); margin: 14px 0; }
.vv-ledger__marginalia {
	align-self: start;
	font-family: var(--vv-font-ui); font-size: 11px; letter-spacing: 0.16em;
	text-transform: uppercase; font-variant: small-caps; color: var(--vv-brass);
}
@media (max-width: 899px) {
	.vv-ledger__num { position: static; font-size: 4rem; opacity: 0.16; }
	.vv-ledger__marginalia { margin-top: 8px; }
}

/* ---- Spread Pair — two 4:5 portraits over a shared caption gutter ----- */
.vv-spread { display: grid; gap: clamp(20px, 4vw, 40px); }
@media (min-width: 900px) { .vv-spread { grid-template-columns: 5fr 2fr 5fr; align-items: center; } }
.vv-spread__fig { margin: 0; }
.vv-spread__img { aspect-ratio: 4/5; width: 100%; object-fit: cover; }
.vv-spread__cap {
	font-family: var(--vv-font-ui); font-size: 11px; letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--vv-bone-70); text-align: center;
}

/* ---- Object Theater — sticky media + scrolling text panels ------------ */
.vv-otheater { display: grid; gap: clamp(24px, 5vw, 64px); }
@media (min-width: 900px) {
	.vv-otheater        { grid-template-columns: 5fr 7fr; align-items: start; }
	.vv-otheater--right { grid-template-columns: 7fr 5fr; }
	.vv-otheater--right .vv-otheater__media { order: 2; }
}
.vv-otheater__media { position: sticky; top: 15vh; }
.vv-otheater__img { width: 100%; }
.vv-otheater__panel { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 899px) {
	.vv-otheater__media { position: static; }
	.vv-otheater__panel { min-height: auto; padding-block: clamp(32px, 8vh, 64px); }
}

/* ---- Lit-Door Card — tall 4:5 card with a doorway glow rising from base */
.vv-litdoor {
	position: relative; display: flex; flex-direction: column;
	aspect-ratio: 4/5; overflow: hidden; isolation: isolate;
	background: var(--vv-ink-2); color: var(--vv-bone); text-decoration: none;
	transition: transform 200ms var(--vv-ease-out-expo);
}
.vv-litdoor__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* Text-legibility scrim: now that photos sit behind the label text, this bottom
   gradient keeps the overlaid name/body copy at WCAG AA over any image (the frozen
   AA gate). Sits above the image (z0), below the label (z2). */
.vv-litdoor::before {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 68%; z-index: 1; pointer-events: none;
	background: linear-gradient(to top, rgba(21,16,14,0.92) 0%, rgba(21,16,14,0.55) 42%, rgba(21,16,14,0) 100%);
}
.vv-litdoor::after {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: radial-gradient(120% 80% at 50% 100%, var(--vv-brass-tint-12) 0%, transparent 60%);
	transition: background 200ms var(--vv-ease-out-expo);
}
.vv-litdoor__label { position: relative; z-index: 2; margin-top: auto; padding: clamp(16px, 3vw, 24px); }
.vv-litdoor:hover, .vv-litdoor:focus-visible { transform: translateY(-4px); }
.vv-litdoor:hover::after, .vv-litdoor:focus-visible::after {
	background: radial-gradient(120% 80% at 50% 100%, var(--vv-brass-glow) 0%, transparent 62%);
}
.vv-litdoor:focus-visible { outline: 2px solid var(--vv-marigold); outline-offset: 2px; }

/* ---- Type Moment — full-bleed quiet act (the "every third beat") ------ */
.vv-type-moment { text-align: center; }
.vv-type-moment__line {
	font-family: var(--vv-font-ritual); font-style: italic;
	font-size: var(--vv-size-display-xl); line-height: 1.05;
	color: var(--vv-bone); max-width: 20ch; margin-inline: auto;
}
.vv-type-moment__rule { width: 64px; height: 1px; background: var(--vv-brass); margin: clamp(24px,4vw,40px) auto 0; }
.vv-type-moment--on-bone .vv-type-moment__line { font-family: var(--vv-font-display); font-style: normal; color: var(--vv-ink); }

/* ---- Kept Toast — Maxima's ledger quote ------------------------------- */
.vv-kept { display: grid; gap: 12px; }
.vv-kept__quote { font-family: var(--vv-font-ritual); font-style: italic; font-size: clamp(1.4rem, 3vw, 2rem); color: var(--vv-bone); }
.vv-kept__rule  { width: 48px; height: 1px; background: var(--vv-brass); }
.vv-kept__margin { font-family: var(--vv-font-ui); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vv-brass); }
.vv-kept--on-bone .vv-kept__quote { color: var(--vv-ink); }

/* ---- Fact Slab — the verified-facts table, formalized ----------------- *
 * Fact register never mixes with myth: no italic anywhere inside. */
.vv-fact-slab { background: var(--vv-bone); color: var(--vv-ink); padding: clamp(24px, 4vw, 48px); border: 1px solid rgba(21,16,14,0.12); }
.vv-fact-slab, .vv-fact-slab * { font-style: normal; }
.vv-fact-slab__title { font-family: var(--vv-font-ui); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--vv-ink); margin-bottom: 16px; }

/* ---- Macro Band — full-bleed 21:9 macro image band -------------------- */
.vv-macro-band { position: relative; width: 100%; aspect-ratio: 21/9; overflow: hidden; background: var(--vv-ink-2); }
.vv-macro-band__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vv-macro-band__cap {
	position: absolute; left: clamp(16px,4vw,48px); bottom: clamp(16px,4vw,40px); z-index: 1;
	font-family: var(--vv-font-ui); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--vv-bone); text-shadow: 0 1px 12px rgba(0,0,0,0.6);
}
@media (max-width: 899px) { .vv-macro-band { aspect-ratio: 4/5; } }

/* ---- Image-slot placeholder — restrained branded dev treatment -------- *
 * Rendered at the exact final dimensions wherever an approved generated
 * asset has not yet arrived, so composition + spacing stay reviewable
 * without pretending to be finished art. Carries the asset ID as a label. */
.vv-imgslot--empty {
	display: flex; align-items: center; justify-content: center; text-align: center;
	background:
		repeating-linear-gradient(45deg, transparent 0 15px, var(--vv-border) 15px 16px),
		var(--vv-ink-2);
	border: 1px solid var(--vv-border-gold);
	color: var(--vv-bone-50);
	font-family: var(--vv-font-ui); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
}
.vv-imgslot--empty > span { padding: 8px 14px; max-width: 80%; line-height: 1.6; }
.vv-imgslot--empty::before { content: "\2726"; margin-right: 0.6em; color: var(--vv-brass); }


/* ---- Shared page furniture — used across all routes -------------------- */
.vv-eyebrow { font-family: var(--vv-font-ui); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--vv-bone-70); margin-bottom: 12px; }
.vv-btn--ink { color: var(--vv-ink); }
.vv-btn--ink:hover, .vv-btn--ink:focus-visible { color: var(--vv-marigold-deep); }
.vv-slot-img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Utility — hold a phrase together across wraps (e.g. the Poppet H1). */
.vv-nowrap { white-space: nowrap; }
.vv-raise { text-align: center; }
.vv-raise__toast { font-family: var(--vv-font-ritual); font-style: italic; font-size: clamp(1.8rem, 4vw, 3rem); color: var(--vv-bone); max-width: 22ch; margin: 0 auto; }
.vv-raise__rule { display: block; width: 64px; height: 1px; background: var(--vv-brass); margin: clamp(24px, 3vw, 36px) auto; }
/* Bone variant — used when the preceding chapter is already dark, so the
   closing CTA doesn't share one continuous dark field (final visual pass). */
.vv-raise--bone { background: var(--vv-bone); }
.vv-raise--bone .vv-raise__toast { color: var(--vv-ink); }
/* Owner catch: the primary button is bone-on-transparent, which vanished on
   the Bone ground — invert it here so the CTA actually reads. */
.vv-raise--bone .vv-btn--primary { color: var(--vv-ink); border-color: var(--vv-ink); }
.vv-raise--bone .vv-btn--primary:hover,
.vv-raise--bone .vv-btn--primary:focus-visible { background: var(--vv-ink); color: var(--vv-bone); }


/* ---- Reusable hero pattern — cinematic media + copy over the left ------ *
 * Used by Home Act I, Gifting, and future route heroes. */
.vv-arrival { position: relative; padding: 0; overflow: hidden; }
.vv-arrival__media { position: relative; }
.vv-arrival__media .vv-slot-img,
.vv-arrival__media .vv-imgslot--empty { width: 100%; aspect-ratio: 16 / 9; min-height: 82vh; }
.vv-arrival__media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(21,16,14,0.94) 0%, rgba(21,16,14,0.62) 40%, rgba(21,16,14,0) 74%); }
.vv-arrival__copy { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; max-width: 46%; padding: 0 clamp(20px, 6vw, 88px); }
.vv-arrival__title { font-family: var(--vv-font-display); font-weight: 400; font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1.02; color: var(--vv-bone); margin: 18px 0; }
.vv-arrival__sub { font-family: var(--vv-font-body); font-size: clamp(1.1rem, 2vw, 1.4rem); color: var(--vv-bone-70); max-width: 34ch; }
.vv-arrival__purpose { font-family: var(--vv-font-ritual); font-size: 1.2rem; color: var(--vv-brass); margin: 16px 0 28px; }
.vv-arrival__cta { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
@media (max-width: 899px) {
	.vv-arrival__media .vv-slot-img,
	.vv-arrival__media .vv-imgslot--empty { aspect-ratio: 4 / 5; min-height: 0; }
	.vv-arrival__media::after { background: linear-gradient(0deg, rgba(21,16,14,0.55), rgba(21,16,14,0) 55%); }
	.vv-arrival__copy { position: static; max-width: none; padding: clamp(28px, 7vw, 40px) clamp(20px, 6vw, 32px) clamp(8px, 3vw, 16px); }
}

/* ---- Reusable "Bone room" — copy + portrait on the Bone surface -------- */
.vv-door { background: var(--vv-bone); color: var(--vv-ink); }
.vv-door .vv-hour-stamp { color: var(--vv-plum); }
.vv-door__title { font-family: var(--vv-font-display); font-weight: 400; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.05; color: var(--vv-ink); margin: 14px 0 18px; }
.vv-door__body { font-family: var(--vv-font-body); font-size: 1.2rem; color: var(--vv-ink); max-width: 46ch; margin-bottom: 22px; }
.vv-door__img { aspect-ratio: 4 / 5; }