/* ────── Vehicle Detail Page · Design tokens scoped to .vdp ──────
Inherits root tokens from global Custom CSS — locally fall back
to literals so this widget renders even if global CSS is missing. */
.vdp {
–bg: var(–c-noir, #0a0a0d);
–surface: var(–c-noir-soft, #14141a);
–raise: var(–c-noir-raise, #1c1c24);
–border: var(–c-noir-line, rgba(255,255,255,0.07));
–border-s: var(–c-noir-line-strong, rgba(255,255,255,0.14));
–text: var(–c-ivory, #f4eade);
–muted: var(–c-ivory-soft, rgba(244,234,222,0.65));
–dim: var(–c-ivory-dim, rgba(244,234,222,0.40));
–brass: var(–c-brass, #c69b3c);
–brass-h: var(–c-brass-hover, #d9b057);
–champagne: var(–c-champagne, #ebdab0);
–ease: var(–ease-luxury, cubic-bezier(0.16, 1, 0.3, 1));
–radius: 8px;
background: var(–bg);
color: var(–text);
font-family: ‘Inter Tight’, ‘Inter’, -apple-system, sans-serif;
line-height: 1.55;
margin: 0 auto;
width: 100%;
}
.vdp * { box-sizing: border-box; }
/* ────── Hero ────── */
.vdp__hero {
max-width: 1240px;
margin: 0 auto;
padding: clamp(48px, 8vw, 120px) clamp(20px, 4vw, 64px) 28px;
}
.vdp__eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(–brass);
margin: 0 0 22px;
}
.vdp__eyebrow::before {
content: ”;
width: 32px;
height: 1px;
background: var(–brass);
opacity: 0.6;
}
.vdp__title {
font-family: ‘Inter Tight’, ‘Inter’, -apple-system, sans-serif;
font-weight: 300;
font-size: clamp(40px, 6.5vw, 86px);
letter-spacing: -0.045em;
line-height: 0.95;
margin: 0 0 18px;
color: var(–text);
}
.vdp__tagline {
font-family: ‘Fraunces’, ‘Times New Roman’, serif;
font-style: italic;
font-weight: 400;
font-size: clamp(18px, 2.4vw, 26px);
color: var(–muted);
margin: 0;
max-width: 720px;
font-variation-settings: ‘SOFT’ 80, ‘WONK’ 1;
}
/* ────── Photo gallery (hero + 2 stacked thumbnails) ────── */
.vdp__gallery-wrap {
max-width: 1240px;
margin: 0 auto;
padding: 0 clamp(20px, 4vw, 64px);
}
.vdp__gallery-grid {
display: grid;
grid-template-columns: 1.82fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 10px;
height: clamp(300px, 40vw, 520px);
}
.vdp__gallery-hero {
grid-row: 1 / 3;
border-radius: var(–radius);
overflow: hidden;
border: 1px solid var(–border);
background: var(–surface);
}
.vdp__gallery-thumb {
border-radius: var(–radius);
overflow: hidden;
border: 1px solid var(–border);
background: var(–surface);
}
.vdp__gallery-hero img,
.vdp__gallery-thumb img {
width: 100% !important;
height: 100% !important;
display: block !important;
object-fit: cover !important;
object-position: center !important;
transition: transform 1.2s var(–ease);
}
.vdp__gallery-hero:hover img,
.vdp__gallery-thumb:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
.vdp__gallery-hero img,
.vdp__gallery-thumb img { transition: none; }
.vdp__gallery-hero:hover img,
.vdp__gallery-thumb:hover img { transform: none; }
}
@media (max-width: 640px) {
.vdp__gallery-grid {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
height: auto;
}
.vdp__gallery-hero { grid-row: auto; aspect-ratio: 16/9; }
.vdp__gallery-thumb { aspect-ratio: 16/9; }
}
/* ────── Two-column body ────── */
.vdp__body {
max-width: 1240px;
margin: 0 auto;
padding: 64px clamp(20px, 4vw, 64px) 32px;
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 72px;
}
@media (max-width: 880px) {
.vdp__body { grid-template-columns: 1fr; gap: 32px; padding-top: 48px; }
}
.vdp__section-title {
font-family: ‘Inter Tight’, ‘Inter’, sans-serif;
font-weight: 400;
font-size: clamp(22px, 2.4vw, 30px);
letter-spacing: -0.012em;
margin: 0 0 18px;
color: var(–text);
}
.vdp__blurb p {
font-size: 17px;
line-height: 1.7;
color: var(–text);
margin: 0 0 20px;
}
.vdp__blurb p:last-child { margin-bottom: 0; }
/* Specs — accordion on mobile (