/* =================================================================
 * routes/home.css — Home: "One Evening at the House" (Rev6)
 * Home-specific staging only. Shared components (Hour Stamp, Object
 * Theater, Lit-Door, Type Moment) live in components.css; grid/act
 * utilities in layout.css. Loaded after pages.css by vv_route_css_slug().
 * ================================================================= */

/* Shared small helpers used across the acts */
.vv-home .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-home .vv-btn--ink { color: var(--vv-ink); }
.vv-home .vv-btn--ink:hover, .vv-home .vv-btn--ink:focus-visible { color: var(--vv-marigold-deep); }
.vv-slot-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vv-home .vv-hour-stamp { margin-bottom: clamp(16px, 2vw, 24px); justify-content: flex-start; }
.vv-home .vv-clock__head .vv-eyebrow { text-align: center; }

/* ---- ACT I · DUSK — Arrival hero ------------------------------- */
.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);
	}
}

/* ---- ACT II · CANDLELIGHT — The Door (Bone) -------------------- */
.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; }
/* The two teaser links sat flush on one line — give them a real gap
   and let them wrap on narrow widths (owner note, final visual pass). */
.vv-door__links { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 0; }

/* ---- THE CLOCK — five hour cards + mobile snap-rail ------------ */
.vv-clock__head { text-align: center; margin-bottom: clamp(28px, 4vw, 48px); }
.vv-clock__title { font-family: var(--vv-font-display); font-weight: 400; font-size: clamp(2rem, 4vw, 3rem); color: var(--vv-bone); }
.vv-clock__rail {
	display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(12px, 1.5vw, 20px);
	max-width: 1360px; margin: 0 auto; padding-inline: clamp(20px, 6vw, 88px);
}
.vv-clock__card .vv-litdoor__label { padding: clamp(14px, 2vw, 20px); }
.vv-clock__hour { display: block; font-family: var(--vv-font-display); font-size: 1.25rem; color: var(--vv-bone); }
/* Owner catch: only Dusk's note wraps to two lines, which pushed its title
   up out of line with the other four cards. Every note now reserves two
   lines, so all five hour titles sit level. */
.vv-clock__note { display: block; font-family: var(--vv-font-ui); font-size: 11px; letter-spacing: 0.06em; color: var(--vv-bone-70); margin-top: 6px; line-height: 1.4; min-height: 2.8em; }
.vv-clock__all { display: block; text-align: center; margin-top: clamp(24px, 3vw, 40px); }
@media (max-width: 899px) {
	.vv-clock__rail {
		display: flex; overflow-x: auto; gap: 14px;
		scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
		padding-inline: clamp(20px, 6vw, 32px);
	}
	.vv-clock__card { flex: 0 0 78%; scroll-snap-align: center; }
}

/* ---- ACT III · Object Theater panels -------------------------- */
.vv-object__lead { font-family: var(--vv-font-body); font-size: 1.2rem; color: var(--vv-bone-70); max-width: 44ch; }
.vv-object__links { display: flex; gap: 24px; margin-top: 16px; flex-wrap: wrap; }
.vv-object__img { aspect-ratio: 4 / 5; }

/* ---- ACT IV · STRING LIGHT — Evenings ------------------------- */
.vv-evenings { padding: 0; }
.vv-evenings__scene { position: relative; }
.vv-evenings__scene .vv-slot-img,
.vv-evenings__scene .vv-imgslot--empty { width: 100%; aspect-ratio: 16 / 9; }
.vv-evenings__scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(21,16,14,0.72), rgba(21,16,14,0) 56%); }
/* Clear the polaroids' negative pull-up (-72px at its deepest) so the
   title's descenders never sit behind the frames (owner note). */
.vv-evenings__copy { position: absolute; left: clamp(20px, 6vw, 88px); bottom: clamp(96px, 10vw, 132px); z-index: 1; }
.vv-evenings__title { font-family: var(--vv-font-display); font-weight: 400; font-size: clamp(2rem, 4vw, 3.4rem); color: var(--vv-bone); }
.vv-evenings__polaroids { display: flex; gap: clamp(16px, 3vw, 40px); justify-content: flex-end; margin-top: clamp(-72px, -6vw, -44px); }
.vv-evenings__polaroid { width: min(36%, 320px); background: var(--vv-bone); padding: 10px 10px 20px; box-shadow: var(--vv-lift); }
.vv-evenings__polaroid--a { transform: rotate(-2deg); }
.vv-evenings__polaroid--b { transform: rotate(1.5deg); margin-top: clamp(24px, 4vw, 64px); }
@media (max-width: 899px) {
	.vv-evenings__polaroids { justify-content: center; flex-wrap: wrap; margin-top: 24px; }
	.vv-evenings__polaroid { width: 44%; }
}

/* ---- THE LAST TOAST — plum ceremony surface ------------------- */
.vv-lasttoast { background: var(--vv-plum-deep); color: var(--vv-bone); }
.vv-lasttoast__title { font-family: var(--vv-font-display); font-weight: 400; font-size: clamp(2rem, 4vw, 3rem); color: var(--vv-bone); margin: 12px 0 16px; }
.vv-lasttoast__body { font-family: var(--vv-font-body); font-size: 1.15rem; color: var(--vv-bone-70); max-width: 44ch; margin-bottom: 22px; }
.vv-lasttoast__img { aspect-ratio: 21 / 9; }
.vv-lasttoast__consent { font-family: var(--vv-font-ui); font-size: 12px; color: var(--vv-bone-50); margin-top: 12px; }
.vv-lasttoast__consent a { color: var(--vv-bone); text-decoration: underline; }
/* A1-fix: .vv-inline-form is centered (margin-inline:auto) for standalone use, but
   here it sits in the left-aligned copy column — left-align it so the input lines
   up with the eyebrow/title/body above it. */
.vv-lasttoast__form { margin-top: 8px; margin-inline: 0; }

/* ---- THE RAISE ------------------------------------------------ */
.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: 20ch; margin: 0 auto; }
.vv-raise__rule { display: block; width: 64px; height: 1px; background: var(--vv-brass); margin: clamp(24px, 3vw, 36px) auto; }