/* =================================================================
 * routes/story.css — Our Story "One evening at the house" (Rev6 §4.2)
 *
 * Six-chapter cinema on Ink, one Bone inset (the verified-craft chapter),
 * the Evening Line advancing Dusk → After Dark. Reuses .vv-act, .vv-split,
 * .vv-ledger, .vv-spread, .vv-macro-band, .vv-fact-slab, .vv-hour-stamp,
 * .vv-raise; this file only carries the route's typography + spacing.
 * ================================================================= */

.vv-story6 { position: relative; z-index: var(--vv-z-raised); }


/* Ledgers here run single-column — no marginalia rail; the ghost numeral
   is absolutely positioned so it still bleeds into the margin. */
.vv-story6 .vv-ledger { display: block; }
.vv-ledger--centered { text-align: center; }
.vv-ledger--centered .vv-ledger__num { left: 50%; transform: translateX(-50%); }
.vv-ledger--centered .vv-hour-stamp { justify-content: center; }

.vv-st-ch__copy { align-self: center; }
.vv-st-stamp { justify-content: flex-start; margin-bottom: 18px; }
.vv-st-stamp::before { display: none; }        /* left rule off — stamp reads as a label, not a divider */
.vv-st-company__head .vv-st-stamp { justify-content: center; margin-bottom: 20px; }
.vv-st-company__head .vv-st-stamp::before { display: block; }

/* ---- Type scale — Didone display, Cormorant body, Playfair pulls ------ */
.vv-st-title {
	font-family: var(--vv-font-display); font-weight: 400;
	font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.04; letter-spacing: 0.01em;
	color: var(--vv-bone); text-transform: none; margin: 0 0 clamp(18px, 2.4vw, 28px);
}
.vv-st-title--ink { color: var(--vv-ink); }

.vv-st-lead {
	font-family: var(--vv-font-body); font-size: clamp(1.25rem, 2.3vw, 1.6rem);
	line-height: 1.55; color: var(--vv-bone); margin: 0 0 1em; max-width: 42ch;
}
.vv-st-body {
	font-family: var(--vv-font-body); font-size: clamp(1.1rem, 1.9vw, 1.35rem);
	line-height: 1.75; color: var(--vv-bone-70); margin: 0 0 1em; max-width: 46ch;
}
.vv-st-body:last-child { margin-bottom: 0; }
.vv-st-body strong { color: var(--vv-bone); font-weight: 600; }
.vv-st-body em { color: var(--vv-brass); font-style: italic; }
.vv-st-body--ink { color: var(--vv-ink); }
.vv-st-body--ink strong { color: var(--vv-ink); }

.vv-st-lead + .vv-st-body { margin-top: 0; }
/* A4-fix: lead/body carry a max-width but no auto side-margins, so inside a
   centered ledger (the Baron & Catrina spread intro) the block pinned left and
   read as off-center under its centered heading. Center the block when centered. */
.vv-ledger--centered .vv-st-lead,
.vv-ledger--centered .vv-st-body { margin-inline: auto; }
/* A4-fix (v2): the "A good host…" pull-quote WRAP has a max-width but margin:0, so
   it sat left-shifted inside the centered note (the inner <p> centered within a
   left-aligned box → landed left of page-centre). Centre the centered-pull wrap.
   Doubled class beats the later base `.vv-st-pull { margin: … 0 0 }` in the cascade. */
.vv-st-pull.vv-st-pull--center { margin-inline: auto; }

/* Playfair-italic pull quote — one warm brass note, generous air.
   Final-pass fix: the pull had no bottom margin, so the next paragraph sat
   flush against it (owner note on the "Why choose one…" quote). */
.vv-st-pull { margin: clamp(24px, 3vw, 36px) 0 clamp(24px, 3vw, 36px); padding: 0; border: 0; }
.vv-st-pull p {
	font-family: var(--vv-font-ritual); font-style: italic;
	font-size: clamp(1.4rem, 2.8vw, 2rem); line-height: 1.2; color: var(--vv-brass);
	max-width: 24ch; margin: 0;
}
.vv-st-pull--center { text-align: center; }
.vv-st-pull--center p { margin-inline: auto; }

.vv-st-ch__copy .vv-btn--text { margin-top: clamp(20px, 2.6vw, 30px); }

/* ---- Figures — exact ratios, editorial clip-reveal handles the mask ---- */
.vv-st-figure { margin: 0; overflow: hidden; }
.vv-st-figure__cap {
	font-family: var(--vv-font-ui); font-size: 12px; letter-spacing: 0.04em;
	line-height: 1.6; color: var(--vv-silver); margin-top: 10px;
}
.vv-st-figure--wide .vv-st-figure__img,
.vv-st-figure--wide .vv-imgslot--empty { aspect-ratio: 3 / 2; }
.vv-st-figure--tall .vv-st-figure__img,
.vv-st-figure--tall .vv-imgslot--empty { aspect-ratio: 4 / 5; }
.vv-st-figure__img { width: 100%; height: 100%; object-fit: cover; }

.vv-st-ch--hero { padding-top: clamp(7rem, 12vh, 10rem); }   /* clear the floating nav */

/* ---- III · The Company — spread pair + gutter ampersand --------------- */
.vv-st-company__head { max-width: 62ch; margin: 0 auto clamp(40px, 6vw, 72px); }
.vv-st-company__head .vv-st-lead { max-width: none; margin-inline: auto; }
.vv-st-spread { margin-bottom: clamp(36px, 5vw, 60px); }
.vv-st-spread__gutter { display: flex; align-items: center; justify-content: center; }
.vv-st-amp {
	font-family: var(--vv-font-display); font-style: italic;
	font-size: clamp(2rem, 4vw, 3.2rem); color: var(--vv-brass); opacity: 0.7;
}
@media (max-width: 899px) { .vv-st-spread__gutter { display: none; } }

.vv-st-company__prose {
	display: grid; gap: clamp(24px, 4vw, 48px); max-width: 64ch; margin: 0 auto;
}
@media (min-width: 900px) { .vv-st-company__prose { grid-template-columns: 1fr 1fr; } }
.vv-st-company__prose .vv-st-body { max-width: none; }
.vv-st-company__note { margin-top: clamp(32px, 5vw, 56px); text-align: center; }
.vv-st-company__note .vv-st-body { max-width: 60ch; margin-inline: auto; }

/* blood-moon interstitial — the band sits full-width, one italic line under */
.vv-st-interstitial { margin-top: clamp(48px, 7vw, 88px); }
.vv-st-interstitial__line {
	position: static; margin: clamp(20px, 3vw, 32px) auto 0; padding-inline: var(--vv-space-6);
	max-width: 52ch; text-align: center;
	font-family: var(--vv-font-ritual); font-size: clamp(1.1rem, 2.2vw, 1.5rem);
	line-height: 1.4; color: var(--vv-brass);
}

/* ---- IV · The Keeper — main pour + small ledger inset ----------------- */
.vv-st-keeper__media { display: grid; gap: clamp(16px, 2vw, 24px); }
.vv-st-inset { width: min(58%, 320px); margin-left: auto; }
.vv-st-inset .vv-st-figure__img,
.vv-st-inset .vv-imgslot--empty { aspect-ratio: 3 / 2; }

/* ---- IV · The Founder's Note — a letter card on the Ink field --------- */
.vv-st-note__stamp { justify-content: center; margin-bottom: clamp(20px, 3vw, 32px); }
.vv-st-note__card {
	background: var(--vv-bone); color: var(--vv-ink);
	max-width: 640px; margin-inline: auto;
	padding: clamp(32px, 5vw, 56px) clamp(28px, 5vw, 64px);
	box-shadow: var(--vv-lift);
}
.vv-st-note__title { font-size: clamp(1.7rem, 3.4vw, 2.4rem); text-align: center; }
.vv-st-note__body {
	font-family: var(--vv-font-body); font-size: clamp(1.1rem, 1.9vw, 1.3rem);
	line-height: 1.8; color: var(--vv-ink); margin: 0 0 1.1em;
}
.vv-st-note__sig {
	font-family: var(--vv-font-ritual); font-style: italic;
	font-size: clamp(1.5rem, 2.8vw, 2rem); color: var(--vv-ink); margin: 0.4em 0 0;
}
.vv-st-note__rule { display: block; width: 56px; height: 1px; background: var(--vv-brass); margin: clamp(20px, 3vw, 28px) 0; }
.vv-st-note__link { margin: 0; font-family: var(--vv-font-ui); font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; }
.vv-st-note__link a { color: var(--vv-ink); }

/* ---- V · The Craft, Verified — the Bone inset chapter ----------------- */
.vv-st-craft { background: var(--vv-bone); color: var(--vv-ink); }
.vv-st-craft .vv-st-craft__copy { align-self: center; }
.vv-st-facts { align-self: center; }
.vv-st-facts__list { margin: 0; }
.vv-st-facts__row {
	display: flex; justify-content: space-between; gap: 16px;
	padding: 14px 0; border-bottom: 1px solid rgba(21,16,14,0.12);
}
.vv-st-facts__row:last-child { border-bottom: 0; }
.vv-st-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-st-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;
}

/* ---- Disclosure + closing -------------------------------------------- */
/* A3-fix: this is now the single, quiet fiction/invented note for the page, sitting
   just before the footer. Small Archivo fine-print register — kept at --vv-silver
   (AA-legible on Ink; --vv-bone-50 sits borderline for legal text). */
.vv-st-disclosure__note {
	font-family: var(--vv-font-ui); font-style: normal;
	font-size: 12px; line-height: 1.65; letter-spacing: 0.01em; color: var(--vv-silver);
	text-align: center; max-width: 72ch; margin-inline: auto;
}

@media (max-width: 899px) {
	.vv-st-inset { width: 70%; }
	.vv-st-body, .vv-st-lead { max-width: none; }
}