/* About page only. Warmer, redder palette than the rest of the site, kept
   scoped to .vvt-about so it cannot leak into other pages. */

/* Same palette as the rest of the site, no exceptions. The artwork used to be
   drawn on its own warmer paper, so this page had to be painted that colour and
   never matched the header; the pictures were re-issued on --vv-cream instead
   (scripts/09-about-cream.ps1), which lets the whole page sit on one tone. */
.vvt-about {
	--ab-red: var(--vv-navy);
	--ab-red-deep: var(--vv-navy-deep);
	--ab-brown: var(--vv-ink);
	--ab-ink: var(--vv-muted);
	--ab-cream: var(--vv-cream);
	--ab-cream-2: var(--vv-cream-deep);
	--ab-gold: var(--vv-gold);
	--ab-line: var(--vv-line);

	background: var(--ab-cream);
	color: var(--ab-ink);
}

/* ---------------------------------------------------- shared bits ----- */

.vvt-about__band {
	display: block;
	height: 26px;
	background:
		repeating-linear-gradient(90deg, var(--vv-gold-light) 0 2px, transparent 2px 26px) center/26px 100%,
		linear-gradient(90deg, var(--vv-navy), var(--vv-navy-deep));
	background-blend-mode: soft-light, normal;
	opacity: .95;
}

.vvt-about .vvt-divider { justify-content: flex-start; margin: .8rem 0 1.4rem; color: var(--ab-gold); }
.vvt-about .vvt-divider svg { width: var(--vv-divider-w); }

.vvt-ab-eyebrow {
	display: inline-block; margin-bottom: 1.1rem;
	font-size: var(--vv-eyebrow); font-weight: 700; letter-spacing: var(--vv-eyebrow-track);
	text-transform: uppercase; color: var(--vv-gold-deep);
}

.vvt-ab-kicker {
	display: inline-block; margin-bottom: .7rem;
	font-family: var(--vv-serif); font-size: 1.02rem; font-weight: 700;
	color: var(--ab-brown);
}

.vvt-ab-title {
	margin: 0;
	font-family: var(--vv-serif); font-weight: 700;
	font-size: var(--vv-h1);
	line-height: 1.16;
	color: var(--ab-brown);
}

.vvt-ab-title em { display: block; font-style: normal; color: var(--ab-red); }
.vvt-ab-title span { display: block; }
.vvt-ab-title--red { color: var(--ab-red); }
.vvt-ab-title--sm { font-size: var(--vv-h2); color: var(--ab-brown); }

.vvt-about p { color: var(--ab-ink); line-height: 1.75; }

/* Medallion icon frame */
.vvt-med { position: relative; display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 auto; color: var(--ab-gold); }
.vvt-med__ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.vvt-med__ico { display: grid; place-items: center; color: var(--ab-brown); }
.vvt-med__ico svg { width: 20px; height: 20px; }

/* ------------------------------------------------------- 1 · intro ---- */

.vvt-ab-intro { position: relative; overflow: hidden; }

.vvt-ab-intro__grid {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
	padding: clamp(2rem, 3.5vw, 3rem) 0 0;
}

.vvt-ab-intro__copy { padding-bottom: clamp(2rem, 3.5vw, 3rem); }
.vvt-ab-lede { max-width: 42ch; margin-bottom: 2rem; }
.vvt-ab-lede p { margin-bottom: .8rem; font-size: .95rem; }

.vvt-ab-marks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.vvt-ab-marks li { display: grid; justify-items: center; gap: .55rem; text-align: center; }
.vvt-ab-marks span { font-size: .76rem; font-weight: 700; line-height: 1.4; color: var(--ab-brown); }

.vvt-ab-intro__media { position: relative; margin: 0; align-self: end; }
.vvt-ab-intro__media img { width: 100%; max-width: 540px; height: auto; margin-inline: auto; }


/* ------------------------------------------------------- 2 · story ---- */

.vvt-ab-story {
	display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
	align-items: stretch;
	border-block: 3px solid var(--ab-gold);
	background: var(--ab-cream-2);
}

.vvt-ab-story__media { margin: 0; overflow: hidden; }
.vvt-ab-story__media img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; }

.vvt-ab-story__copy { display: grid; align-items: center; padding: clamp(2rem, 4vw, 3.5rem); }
.vvt-ab-story__inner { max-width: 44rem; }
.vvt-ab-story__copy p { max-width: 46ch; font-size: .95rem; margin: 0; }

/* The two lines that close the story. Set in the serif so they read as a
   couplet and not as one more body paragraph. */
.vvt-ab-story__copy .vvt-ab-story__couplet {
	margin-top: 1.25rem;
	font-family: var(--vv-serif);
	font-size: 1.02rem;
	font-style: italic;
	line-height: 1.55;
	color: var(--ab-red-deep);
}

/* ------------------------------------------------------- 3 · trade ---- */

.vvt-ab-trade { overflow: hidden; }

.vvt-ab-trade__grid {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
	padding: clamp(2rem, 3.5vw, 3rem) 0;
}

.vvt-ab-trade__copy p { max-width: 46ch; font-size: .95rem; margin-bottom: 1.75rem; }

.vvt-ab-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.vvt-ab-points li { display: flex; align-items: center; gap: .7rem; }
.vvt-ab-points span { font-size: .82rem; font-weight: 600; line-height: 1.4; color: var(--ab-brown); }

/* Arch-topped photo, like the reference. */
/* No border-radius: the artwork is supplied with its own arch. */
.vvt-ab-trade__media { margin: 0; }
.vvt-ab-trade__media img { width: 100%; max-width: 540px; height: auto; margin-inline: auto; }

/* -------------------------------------------------- 4 · difference ---- */

.vvt-ab-diff { position: relative; overflow: hidden; padding: clamp(2.25rem, 4.5vw, 3.25rem) 0; background: linear-gradient(180deg, var(--vv-navy), var(--vv-navy-deep)); color: var(--ab-cream); }

.vvt-ab-diff__weave { position: absolute; inset: 0; background-image: var(--vv-weave); background-size: 58px 58px; opacity: .12; }

.vvt-ab-diff .vvt-shell { position: relative; z-index: 2; }

.vvt-ab-diff__title {
	margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
	text-align: center;
	font-family: var(--vv-serif); font-weight: 700;
	font-size: var(--vv-h3);
	color: var(--ab-cream);
}

.vvt-ab-diff__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin: 0; padding: 0; list-style: none; }

.vvt-ab-diff__list li {
	display: grid; justify-items: center; gap: .6rem; text-align: center;
	padding: 0 1.25rem;
	border-right: 1px solid rgba(255, 255, 255, .28);
}

.vvt-ab-diff__list li:last-child { border-right: 0; }
.vvt-ab-diff .vvt-med { color: rgba(255, 255, 255, .75); }
.vvt-ab-diff .vvt-med__ico { color: var(--ab-cream); }

.vvt-ab-diff h3 { margin: 0; font-family: var(--vv-serif); font-size: 1rem; font-weight: 700; line-height: 1.35; color: var(--ab-cream); }
.vvt-ab-diff p { margin: 0; font-size: .78rem; line-height: 1.6; color: rgba(255, 255, 255, .82); }

/* ----------------------------------------------------- 5 · promise ---- */

.vvt-ab-promise { overflow: hidden; }

.vvt-ab-promise__grid {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .52fr);
	gap: clamp(1.5rem, 4vw, 3rem); align-items: end;
	padding: clamp(2.25rem, 4.5vw, 3.25rem) 0 0;
}

.vvt-ab-promise__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 0; padding: 0 0 clamp(2rem, 4vw, 3rem); list-style: none; }
.vvt-ab-promise__list li { display: grid; gap: .5rem; padding-right: 1.25rem; border-right: 1px solid var(--ab-line); }
.vvt-ab-promise__list li:last-child { border-right: 0; }
.vvt-ab-promise h3 { margin: 0; font-family: var(--vv-serif); font-size: 1rem; font-weight: 700; color: var(--ab-brown); }
.vvt-ab-promise p { margin: 0; font-size: .8rem; line-height: 1.6; }

.vvt-ab-promise__media { margin: 0; align-self: end; color: var(--ab-gold); }
.vvt-ab-promise__media img { width: 100%; max-width: 350px; height: auto; margin-inline: auto; }
.vvt-ab-promise__media .vvt-motif { position: static; opacity: .8; width: 100%; }

/* --------------------------------------------------------- 6 · cta ---- */

.vvt-ab-cta { padding: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(3rem, 6vw, 4.5rem); text-align: center; }
.vvt-ab-cta .vvt-ab-kicker { display: block; font-family: var(--vv-sans); font-size: .84rem; font-weight: 500; color: var(--ab-ink); }
.vvt-ab-cta .vvt-ab-title { margin: .3rem 0 .4rem; }
.vvt-ab-cta p { margin: 0 0 1.6rem; font-size: .92rem; }

/* Closing invitation, one step quieter than the partner line above it. */
.vvt-ab-cta .vvt-ab-cta__invite {
	max-width: 46ch; margin: -.9rem auto 1.6rem;
	font-style: italic; color: var(--ab-ink);
}

.vvt-ab-btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: .85rem 2.1rem;
	background: var(--ab-red-deep); color: #fff !important;
	font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
	transition: background .22s var(--vv-ease), transform .22s var(--vv-ease);
}

.vvt-ab-btn:hover { background: var(--ab-red); color: #fff !important; transform: translateY(-2px); }

/* ------------------------------------------------------ responsive ---- */

@media (max-width: 1000px) {
	.vvt-ab-intro__grid,
	.vvt-ab-trade__grid,
	.vvt-ab-promise__grid { grid-template-columns: 1fr; }

	.vvt-ab-story { grid-template-columns: 1fr; }
	.vvt-ab-intro__media { max-width: 560px; margin-inline: auto; }
	.vvt-ab-trade__media { max-width: 560px; margin-inline: auto; }
	.vvt-ab-promise__media { max-width: 330px; margin-inline: auto; }
	.vvt-ab-diff__list { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
	.vvt-ab-diff__list li:nth-child(2) { border-right: 0; }
	.vvt-ab-promise__list { grid-template-columns: 1fr; }
	.vvt-ab-promise__list li { border-right: 0; padding-right: 0; padding-bottom: 1.25rem; border-bottom: 1px solid var(--ab-line); }
	.vvt-ab-promise__list li:last-child { border-bottom: 0; padding-bottom: 0; }
}

@media (max-width: 620px) {
	.vvt-ab-marks { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; }
	.vvt-ab-points { grid-template-columns: 1fr; }
	.vvt-ab-diff__list { grid-template-columns: 1fr; }
	.vvt-ab-diff__list li { border-right: 0; padding: 0; }
	.vvt-about .vvt-divider svg { width: 140px; }
}