/* ==========================================================================
   VARIFYO — editorial retail stylesheet
   Palette: ivory / charcoal / stone, one bronze accent. Fonts: Bodoni Moda, Jost.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
	--ivory: #f4efe6;
	--paper: #faf7f1;
	--sand: #e6ddcf;
	--sand-2: #d9cfbf;
	--stone: #625b51;
	--stone-2: #8a8176;
	--ink: #1c1b19;
	--ink-2: #343230;
	--ink-3: #4d4a46;
	--bronze: #8a6a40;
	--bronze-2: #b08d5e;
	/* The bronze reads at 4.35:1 on ivory, just under the 4.5:1 that small text needs, so text uses a darker
	   mix (5.4:1 on ivory, 4.6:1 on sand) while rules, dots and marks keep the lighter one. */
	--bronze-text: #7a5c35;
	--hair: rgba(28, 27, 25, 0.16);
	--hair-strong: rgba(28, 27, 25, 0.38);

	--bg: var(--ivory);
	--bg-2: var(--sand);
	--fg: var(--ink);
	--fg-2: var(--ink-3);
	--muted: var(--stone);
	--line: var(--hair);
	--line-strong: var(--hair-strong);
	--accent: var(--bronze);
	--accent-text: var(--bronze-text);

	--serif: 'Bodoni Moda', 'Didot', 'Bodoni 72', 'Times New Roman', serif;
	--sans: 'Jost', 'Futura', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;

	--gutter: clamp(20px, 4vw, 64px);
	--max: 1440px;
	--header-h: 76px;
	/* Space a page must leave for the header: the editorial header is fixed, the storefront header sits in the flow. */
	--header-pad: var(--header-h);
	/* Height of whatever stays pinned while scrolling, used by sticky offsets and scroll padding. */
	--header-stick: var(--header-h);
	--radius: 2px;

	--t-fast: 220ms;
	--t-med: 520ms;
	--t-slow: 1100ms;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);

	--fs-eyebrow: 0.6875rem;
	--fs-small: 0.875rem;
	--fs-body: 1.0625rem;
	--fs-lead: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
	--fs-h3: clamp(1.5rem, 1.3rem + 1vw, 2.125rem);
	--fs-h2: clamp(2.125rem, 1.6rem + 2.2vw, 3.75rem);
	--fs-h1: clamp(2.5rem, 1.7rem + 3.6vw, 5.25rem);
	--fs-hero: clamp(2.75rem, 1.6rem + 5.4vw, 6.75rem);
	--fs-giant: clamp(3.25rem, 1rem + 9vw, 10rem);

	color-scheme: light;
}

.vf-dark,
.vf-ink {
	--bg: var(--ink);
	--bg-2: #262522;
	--fg: var(--ivory);
	--fg-2: #cfc7ba;
	--muted: #9b9185;
	--line: rgba(244, 239, 230, 0.16);
	--line-strong: rgba(244, 239, 230, 0.42);
	--accent: var(--bronze-2);
	--accent-text: var(--bronze-2);
	color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-stick) + 16px);
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--sans);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

img,
svg,
video { display: block; max-width: 100%; height: auto; }
img { background: var(--bg-2); color: var(--muted); font-size: var(--fs-small); }
.vf-dark img,
.vf-ink img { background: #262522; }

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em;
	font-family: var(--serif);
	font-weight: 400;
	line-height: 1.04;
	letter-spacing: -0.01em;
	text-wrap: balance;
	color: var(--fg);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: 1.375rem; }
h5 { font-size: 1.125rem; font-family: var(--sans); font-weight: 500; }
h6 { font-size: var(--fs-eyebrow); font-family: var(--sans); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; }

p { margin: 0 0 1.25em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 500; }
em { font-style: italic; }
hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }
small { font-size: var(--fs-small); }
ul, ol { padding-left: 1.25em; }
blockquote { margin: 0; }
address { font-style: normal; }
figure { margin: 0; }
figcaption { font-size: var(--fs-small); color: var(--muted); margin-top: 0.75em; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 0.75em 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 500; }

a {
	color: inherit;
	text-decoration-color: var(--line-strong);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: text-decoration-color var(--t-fast), color var(--t-fast), opacity var(--t-fast);
}
a:hover { text-decoration-color: currentColor; }

:focus { outline: none; }
:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 4px;
	border-radius: 1px;
}

::selection { background: var(--sand-2); color: var(--ink); }
.vf-dark ::selection,
.vf-ink ::selection { background: var(--bronze); color: var(--ivory); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%);
	white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
	clip: auto; clip-path: none;
	width: auto; height: auto;
	left: var(--gutter); top: 12px;
	padding: 0.75em 1.25em;
	background: var(--ink); color: var(--ivory);
	z-index: 1000;
	font-size: var(--fs-small);
	letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.vf-wrap {
	width: 100%;
	max-width: var(--max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.vf-wrap--narrow { max-width: 820px; }
.vf-wrap--text { max-width: 720px; }

.vf-section { padding-block: clamp(4rem, 8vw, 9rem); }
.vf-section--tight { padding-block: clamp(2.5rem, 5vw, 5rem); }
.vf-section--flush-top { padding-top: 0; }
.vf-section--band { background: var(--bg-2); }
.vf-section--ink { background: var(--ink); }

.vf-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: clamp(16px, 2.5vw, 40px);
	row-gap: clamp(32px, 4vw, 64px);
}

.vf-eyebrow {
	font-family: var(--sans);
	font-size: var(--fs-eyebrow);
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 1.25rem;
}
.vf-eyebrow--light { color: rgba(244, 239, 230, 0.86); }

.vf-lead {
	font-size: var(--fs-lead);
	line-height: 1.45;
	font-weight: 300;
	color: var(--fg-2);
	max-width: 36em;
}
.vf-prose { max-width: 62ch; color: var(--fg-2); }
.vf-prose p { margin-bottom: 1.35em; }
.vf-prose a { color: var(--fg); }

.vf-note {
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 1.25rem 0 0;
}

.vf-rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* Hairline link with arrow */
.vf-link {
	display: inline-flex;
	align-items: center;
	gap: 0.75em;
	font-family: var(--sans);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--fg);
	padding-bottom: 0.45em;
	position: relative;
	transition: color var(--t-fast);
}
.vf-link::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 1px;
	background: currentColor;
	opacity: 0.35;
	transform-origin: left;
	transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.vf-link svg { transition: transform var(--t-med) var(--ease); flex: none; }
.vf-link:hover::after,
.vf-link:focus-visible::after { opacity: 1; }
.vf-link:hover svg { transform: translateX(4px); }
.vf-link--light { color: var(--ivory); }
.vf-link--quiet { font-size: 0.75rem; letter-spacing: 0.18em; }

/* Solid button (used sparingly: forms, commerce) */
.vf-button,
.wp-block-button__link,
button.button,
input[type='submit'] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 1.05em 2.1em;
	border: 1px solid var(--fg);
	background: var(--fg);
	color: var(--bg);
	font-family: var(--sans);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	border-radius: 0;
	cursor: pointer;
	transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.vf-button:hover,
.wp-block-button__link:hover,
button.button:hover,
input[type='submit']:hover { background: transparent; color: var(--fg); }
.vf-button--ghost { background: transparent; color: var(--fg); }
.vf-button--ghost:hover { background: var(--fg); color: var(--bg); }

/* Frames with fixed ratios so lazy images never shift the layout */
.vf-frame {
	position: relative;
	overflow: hidden;
	background: var(--bg-2);
}
.vf-frame > img,
.vf-frame > picture > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--pos, 50% 50%);
}
.vf-frame--45 { aspect-ratio: 4 / 5; }
.vf-frame--34 { aspect-ratio: 3 / 4; }
.vf-frame--23 { aspect-ratio: 2 / 3; }
.vf-frame--32 { aspect-ratio: 3 / 2; }
.vf-frame--11 { aspect-ratio: 1 / 1; }
.vf-frame--169 { aspect-ratio: 16 / 9; }
.vf-frame--wide { aspect-ratio: 21 / 9; }
.vf-frame--54 { aspect-ratio: 5 / 4; }
.vf-page-hero--short { min-height: 62svh; }

/* Subtle zoom-on-hover for linked frames */
a.vf-frame img,
.vf-frame--hover img { transition: transform var(--t-slow) var(--ease); }
a.vf-frame:hover img,
a:hover > .vf-frame img,
.vf-frame--hover:hover img { transform: scale(1.025); }

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */
.vf-header {
	position: absolute;
	top: 0; left: 0; right: 0;
	z-index: 60;
	height: var(--header-h);
	background: var(--bg);
	color: var(--fg);
	border-bottom: 1px solid var(--line);
	transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease), border-color var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.js .vf-header { position: fixed; }
.vf-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	height: 100%;
}
.vf-header__left { justify-self: start; }
.vf-header__right { justify-self: end; display: flex; align-items: center; gap: clamp(20px, 2.2vw, 36px); }

/* Over the hero: transparent and light until the page scrolls. */
.vf-header-over .vf-header {
	background: transparent;
	color: var(--ivory);
	border-bottom-color: transparent;
}
.vf-header-over .vf-header.is-scrolled {
	background: var(--bg);
	color: var(--fg);
	border-bottom-color: var(--line);
}
.vf-header.is-hidden { transform: translateY(-100%); }
.vf-header.is-hidden:focus-within { transform: none; }

.vf-brand { margin: 0; font-size: 1rem; line-height: 1; letter-spacing: 0; }
.vf-brand__link { text-decoration: none; display: inline-block; }
.vf-brand__word {
	font-family: var(--serif);
	font-weight: 500;
	font-size: 1.5rem;
	letter-spacing: 0.26em;
	text-indent: 0.26em; /* visually centers tracked caps */
	line-height: 1;
	display: inline-block;
	transform: translateY(1px);
}
.vf-brand .custom-logo { max-height: 40px; width: auto; }

.vf-menu {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	gap: clamp(20px, 2.2vw, 36px);
}
.vf-menu a {
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.5em 0;
	position: relative;
	display: inline-block;
}
.vf-menu a::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0.1em;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--t-med) var(--ease);
}
.vf-menu a:hover::after,
.vf-menu .current-menu-item > a::after,
.vf-menu .current_page_item > a::after { transform: scaleX(1); transform-origin: left; }

.vf-bag { display: inline-flex; align-items: center; gap: 0.4em; text-decoration: none; }
.vf-bag__count { font-size: 0.75rem; letter-spacing: 0.1em; }

/* Menu toggle (phone) */
.vf-toggle {
	display: none;
	appearance: none;
	background: none;
	border: 0;
	color: inherit;
	padding: 0.5rem 0;
	cursor: pointer;
	font: inherit;
	font-size: 0.75rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	align-items: center;
	gap: 0.75em;
}
.vf-toggle__lines {
	width: 22px; height: 10px;
	position: relative;
	display: block;
}
.vf-toggle__lines::before,
.vf-toggle__lines::after {
	content: '';
	position: absolute;
	left: 0; right: 0;
	height: 1px;
	background: currentColor;
	transition: transform var(--t-med) var(--ease), top var(--t-med) var(--ease);
}
.vf-toggle__lines::before { top: 0; }
.vf-toggle__lines::after { top: 9px; }
.vf-toggle[aria-expanded='true'] .vf-toggle__lines::before { top: 4.5px; transform: rotate(45deg); }
.vf-toggle[aria-expanded='true'] .vf-toggle__lines::after { top: 4.5px; transform: rotate(-45deg); }

/* Full-screen phone menu */
.vf-drawer {
	position: fixed;
	inset: 0;
	z-index: 55;
	background: var(--ivory);
	color: var(--ink);
	padding: calc(var(--header-stick) + 24px) var(--gutter) 40px;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	transform: translateY(-4%);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease), visibility 0s linear var(--t-med);
}
.vf-drawer.is-open {
	transform: none;
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}
.vf-drawer__menu,
.vf-drawer__secondary { list-style: none; margin: 0; padding: 0; }
.vf-drawer__menu li { border-bottom: 1px solid var(--hair); }
.vf-drawer__menu a {
	display: block;
	padding: 1.1rem 0;
	font-family: var(--serif);
	font-size: clamp(2rem, 9vw, 3rem);
	line-height: 1.05;
	text-decoration: none;
}
.vf-drawer__secondary { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; }
.vf-drawer__secondary a {
	font-size: 0.8125rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
}
.vf-drawer__foot {
	margin-top: auto;
	padding-top: 2.5rem;
	font-size: var(--fs-small);
	color: var(--stone);
}
body.vf-menu-open { overflow: hidden; }
body.vf-menu-open .vf-header,
body.vf-menu-open .vf-header.is-scrolled,
body.vf-header-over.vf-menu-open .vf-header.is-scrolled { background: var(--ivory); color: var(--ink); border-bottom-color: var(--hair); }

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */
/* Cover hero (home) — ivory panel beside a tall photograph; the header sits on ivory, never on the image. */
.vf-cover {
	display: grid;
	grid-template-columns: 1fr;
	padding-top: var(--header-pad);
	background: var(--bg);
}
.vf-cover__media {
	position: relative;
	height: 72svh;
	min-height: 420px;
	overflow: hidden;
	background: var(--bg-2);
}
.vf-cover__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--pos, 50% 30%);
}
.vf-cover__panel {
	padding: clamp(2rem, 5vw, 4rem) var(--gutter) clamp(2.5rem, 5vw, 4rem);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.vf-cover__title {
	font-size: var(--fs-hero);
	line-height: 0.96;
	letter-spacing: -0.015em;
	margin: 0 0 1.5rem;
	max-width: 11ch;
}
.vf-cover__title em { font-style: italic; }
.vf-cover__lead {
	font-size: var(--fs-lead);
	font-weight: 300;
	line-height: 1.42;
	color: var(--fg-2);
	max-width: 32ch;
	margin: 0 0 2rem;
}
.vf-cover__actions { display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; }
@media (min-width: 1024px) {
	.vf-cover {
		grid-template-columns: 6fr 6fr;
		min-height: 100svh;
		max-height: 1080px;
	}
	.vf-cover__media { order: 2; height: auto; min-height: 0; }
	.vf-cover__panel { order: 1; padding-right: clamp(2rem, 5vw, 6rem); padding-bottom: clamp(3rem, 7vw, 6rem); }
	.vf-cover__title { max-width: 10ch; }
}
@media (min-width: 1280px) {
	.vf-cover { grid-template-columns: 5fr 7fr; }
}
.js .vf-cover__panel > * { animation: vf-rise 1.1s var(--ease) both; }
.js .vf-cover__panel > :nth-child(2) { animation-delay: 80ms; }

/* Hero carousel — the cover hero, repeated per campaign. Scroll-snap does the moving; the script only adds
   the controls and the slow rotation, so it degrades to a swipeable strip without JavaScript. */
.vf-hero { position: relative; background: var(--bg); padding-top: var(--header-pad); }
.vf-hero__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.vf-hero__track::-webkit-scrollbar { display: none; }
.vf-hero__slide { scroll-snap-align: start; display: grid; grid-template-columns: 1fr; min-width: 0; }
.vf-hero__media { position: relative; height: 68svh; min-height: 400px; overflow: hidden; background: var(--bg-2); }
.vf-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 30%); }
.vf-hero__panel { padding: clamp(2rem, 5vw, 4rem) var(--gutter) clamp(3.5rem, 6vw, 5rem); display: flex; flex-direction: column; justify-content: flex-end; }
.vf-hero__title { font-family: var(--serif); font-weight: 400; font-size: var(--fs-hero); line-height: 0.96; letter-spacing: -0.015em; margin: 0 0 1.5rem; max-width: 11ch; }
.vf-hero__title em { font-style: italic; }
.vf-hero__lead { font-size: var(--fs-lead); font-weight: 300; line-height: 1.42; color: var(--fg-2); max-width: 32ch; margin: 0 0 2rem; }
.vf-hero__actions { display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; }
@media (min-width: 1024px) {
	.vf-hero__track { grid-auto-columns: 100%; }
	.vf-hero__slide { grid-template-columns: 5fr 7fr; min-height: calc(100svh - var(--header-stick)); max-height: 1080px; }
	.vf-hero__media { order: 2; height: auto; min-height: 0; }
	.vf-hero__panel { order: 1; padding-right: clamp(2rem, 5vw, 6rem); padding-bottom: clamp(3.5rem, 7vw, 6rem); }
	.vf-hero__title { max-width: 10ch; }
}
.js .vf-hero__slide .vf-hero__text > * { animation: vf-rise 1.1s var(--ease) both; }
.js .vf-hero__slide .vf-hero__text > :nth-child(2) { animation-delay: 80ms; }

.vf-hero__controls { position: absolute; left: var(--gutter); bottom: clamp(1rem, 2.5vw, 2rem); display: flex; align-items: center; gap: 0.5rem; z-index: 2; }
.vf-hero__controls[hidden] { display: none; }
.vf-hero__arrow, .vf-hero__pause {
	appearance: none; width: 34px; height: 34px; display: inline-grid; place-items: center;
	border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg); color: var(--fg); cursor: pointer;
	transition: background var(--t-fast), color var(--t-fast);
}
.vf-hero__arrow:hover, .vf-hero__pause:hover { background: var(--fg); color: var(--bg); }
.vf-hero__dots { list-style: none; margin: 0; padding: 0 0.35rem; display: flex; gap: 0.4rem; }
.vf-hero__dot { appearance: none; width: 28px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.vf-hero__dot::before { content: ''; width: 22px; height: 2px; background: var(--line-strong); transition: background var(--t-fast); }
.vf-hero__dot[aria-current='true']::before { background: var(--fg); }
.vf-hero__pause-icon { width: 10px; height: 11px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.vf-hero__pause[aria-pressed='true'] .vf-hero__pause-icon { width: 0; height: 0; border: 6px solid transparent; border-left: 10px solid currentColor; border-right: 0; }
@media (min-width: 1024px) {
	.vf-hero__controls { left: var(--gutter); bottom: clamp(1.5rem, 3vw, 2.5rem); }
}
@media (prefers-reduced-motion: reduce) {
	.vf-hero__track { scroll-behavior: auto; }
}
.js .vf-cover__panel > :nth-child(3) { animation-delay: 160ms; }
.js .vf-cover__panel > :nth-child(4) { animation-delay: 240ms; }
.js .vf-cover__media img { animation: vf-settle 2.4s var(--ease) both; }

/* Page hero — collection, story, contact, FAQ */
.vf-page-hero {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	min-height: 70svh;
	background: var(--ink);
	color: var(--ivory);
	isolation: isolate;
}
.vf-page-hero__media { position: absolute; inset: 0; z-index: -1; }
.vf-page-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.vf-page-hero__media::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(0deg, rgba(28, 27, 25, 0.78) 0%, rgba(28, 27, 25, 0.2) 50%, rgba(28, 27, 25, 0.1) 100%);
}
.vf-page-hero--light { color: var(--ink); background: var(--sand); }
.vf-page-hero--light .vf-page-hero__media::after {
	background:
		linear-gradient(180deg, rgba(244, 239, 230, 0.82) 0%, rgba(244, 239, 230, 0.35) 18%, rgba(244, 239, 230, 0) 36%),
		linear-gradient(0deg, rgba(244, 239, 230, 0.92) 0%, rgba(244, 239, 230, 0.55) 38%, rgba(244, 239, 230, 0.08) 70%, rgba(244, 239, 230, 0) 100%);
}
.vf-page-hero--deep .vf-page-hero__media::after {
	background:
		linear-gradient(180deg, rgba(28, 27, 25, 0.45) 0%, rgba(28, 27, 25, 0) 30%),
		linear-gradient(0deg, rgba(28, 27, 25, 0.9) 0%, rgba(28, 27, 25, 0.66) 42%, rgba(28, 27, 25, 0.25) 100%);
}
.vf-page-hero--light .vf-page-hero__lead { color: var(--ink-3); }
.vf-page-hero--light .vf-eyebrow--light { color: var(--ink-3); }
.vf-header-over.vf-hero-light .vf-header { color: var(--ink); }
.vf-page-hero__content {
	align-self: end;
	padding-top: calc(var(--header-pad) + 14vh);
	padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.vf-page-hero__title { font-size: var(--fs-h1); margin: 0 0 1rem; color: inherit; max-width: 14ch; }
.vf-page-hero__lead { max-width: 44ch; color: rgba(244, 239, 230, 0.88); font-size: var(--fs-lead); font-weight: 300; line-height: 1.4; margin: 0; }

/* Split hero — text panel + tall image side by side (used by Fashion) */
.vf-split-hero {
	display: grid;
	grid-template-columns: 1fr;
	min-height: 100svh;
	padding-top: var(--header-pad);
}
.vf-split-hero__text {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: clamp(2.5rem, 5vw, 5rem) var(--gutter);
}
.vf-split-hero__media { position: relative; min-height: 60svh; }
.vf-split-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 30%); }
.vf-split-hero__title { font-size: var(--fs-hero); line-height: 0.96; margin: 0 0 1.25rem; max-width: 10ch; }
.vf-split-hero__title em { font-style: italic; }
@media (min-width: 1024px) {
	.vf-split-hero { grid-template-columns: 5fr 7fr; }
	.vf-split-hero__text { padding-left: var(--gutter); padding-right: clamp(2rem, 4vw, 5rem); }
	.vf-split-hero__media { min-height: 0; }
}

/* --------------------------------------------------------------------------
   6. Home sections
   -------------------------------------------------------------------------- */

/* Intro line under the hero */
.vf-intro {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: clamp(16px, 2.5vw, 40px);
	row-gap: 2rem;
	align-items: start;
}
.vf-intro__eyebrow { grid-column: 1 / span 12; }
.vf-intro__text { grid-column: 1 / span 12; }
.vf-intro__text h2 { font-size: var(--fs-h2); max-width: 16ch; margin-bottom: 1.5rem; }
.vf-intro__text h2 em { font-style: italic; }
.vf-intro__meta { grid-column: 1 / span 12; font-size: var(--fs-small); color: var(--muted); }
.vf-intro__meta dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.5rem; }
.vf-intro__meta dt { letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.6875rem; padding-top: 0.2em; }
.vf-intro__meta dd { margin: 0; color: var(--fg-2); }
@media (min-width: 1024px) {
	.vf-intro__eyebrow { grid-column: 1 / span 3; }
	.vf-intro__text { grid-column: 4 / span 6; }
	.vf-intro__meta { grid-column: 10 / span 3; }
}

/* Collection entrances — two worlds, staggered */
.vf-worlds {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2.5rem, 5vw, 4rem) clamp(16px, 2.5vw, 40px);
	align-items: start;
}
.vf-world { position: relative; text-decoration: none; display: block; }
.vf-world__frame { margin-bottom: 1.5rem; }
.vf-world__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	border-top: 1px solid var(--line);
	padding-top: 1.25rem;
}
.vf-world__title { font-size: var(--fs-h2); margin: 0; }
.vf-world__title em { font-style: italic; }
.vf-world__index { font-family: var(--serif); font-style: italic; color: var(--muted); font-size: 1.125rem; }
.vf-world__desc { color: var(--fg-2); max-width: 36ch; margin: 1rem 0 1.5rem; }
.vf-world .vf-link { pointer-events: none; }
.vf-world:hover .vf-link::after { opacity: 1; }
.vf-world:hover .vf-link svg { transform: translateX(4px); }
@media (min-width: 768px) {
	.vf-worlds { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.vf-world--fashion { grid-column: 1 / span 7; }
	.vf-world--fragrance { grid-column: 8 / span 5; margin-top: clamp(4rem, 10vw, 9rem); }
}

/* Editorial feature — three-up stagger on a sand band */
.vf-feature {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: clamp(16px, 2.5vw, 40px);
	row-gap: 2.5rem;
	align-items: start;
}
.vf-feature__text { grid-column: 1 / span 12; }
.vf-feature__text h2 { max-width: 14ch; }
.vf-feature__text h2 em { font-style: italic; }
.vf-feature__a { grid-column: 1 / span 12; }
.vf-feature__b { grid-column: 1 / span 12; }
.vf-feature__caption { font-size: var(--fs-small); color: var(--muted); margin-top: 0.9rem; display: flex; justify-content: space-between; gap: 1rem; }
@media (min-width: 768px) {
	.vf-feature__a { grid-column: 1 / span 6; }
	.vf-feature__b { grid-column: 8 / span 5; margin-top: 6rem; }
	.vf-feature__text { grid-column: 1 / span 12; }
}
@media (min-width: 1024px) {
	.vf-feature__text { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-stick) + 2rem); }
	.vf-feature__a { grid-column: 5 / span 5; }
	.vf-feature__b { grid-column: 10 / span 3; margin-top: 10rem; }
}

/* Dark fragrance band on home */
.vf-dusk {
	color: var(--ivory);
	position: relative;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: clamp(16px, 2.5vw, 40px);
	row-gap: 2.5rem;
	align-items: center;
}
.vf-dusk__media { grid-column: 1 / span 12; }
.vf-dusk__text { grid-column: 1 / span 12; }
.vf-dusk__text h2 { color: inherit; font-size: var(--fs-h1); max-width: 10ch; }
.vf-dusk__text h2 em { font-style: italic; }
.vf-dusk__text p { color: #cfc7ba; max-width: 40ch; }
.vf-dusk__notes { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 36rem; }
.vf-dusk__notes li { border-top: 1px solid rgba(244, 239, 230, 0.2); padding-top: 0.8rem; font-size: var(--fs-small); color: #cfc7ba; }
.vf-dusk__notes b { display: block; font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 1.25rem; color: var(--ivory); margin-bottom: 0.2rem; }
@media (min-width: 1024px) {
	.vf-dusk__media { grid-column: 1 / span 6; }
	.vf-dusk__text { grid-column: 8 / span 5; }
}

/* Story strip */
.vf-strip {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: clamp(16px, 2.5vw, 40px);
	row-gap: 2.5rem;
	align-items: center;
}
.vf-strip__media { grid-column: 1 / span 12; }
.vf-strip__text { grid-column: 1 / span 12; }
.vf-strip__quote {
	font-family: var(--serif);
	font-size: var(--fs-h2);
	line-height: 1.1;
	margin: 0 0 1.5rem;
	max-width: 18ch;
}
.vf-strip__quote em { font-style: italic; }
@media (min-width: 768px) {
	.vf-strip__media { grid-column: 1 / span 5; }
	.vf-strip__text { grid-column: 7 / span 6; }
	.vf-strip--reverse .vf-strip__media { grid-column: 8 / span 5; order: 2; }
	.vf-strip--reverse .vf-strip__text { grid-column: 1 / span 6; }
}

/* Section heads */
.vf-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--line);
}
.vf-head h2 { margin: 0; }
.vf-head h2 em { font-style: italic; }

/* --------------------------------------------------------------------------
   7. Catalog structure, houses, scent families
   -------------------------------------------------------------------------- */
.vf-catalog__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.vf-catalog__item {
	display: grid;
	grid-template-columns: 2.5rem 1fr auto;
	grid-template-areas: 'index name state' 'index desc state';
	column-gap: 1rem;
	align-items: baseline;
	padding: 1.35rem 0;
	border-bottom: 1px solid var(--line);
}
.vf-catalog__index { grid-area: index; font-family: var(--serif); font-style: italic; color: var(--muted); font-size: 1.125rem; }
.vf-catalog__name { grid-area: name; font-family: var(--serif); font-size: var(--fs-h3); line-height: 1.1; }
.vf-catalog__desc { grid-area: desc; color: var(--fg-2); font-size: var(--fs-small); max-width: 52ch; margin-top: 0.35rem; }
.vf-catalog__state {
	grid-area: state;
	align-self: start;
	font-size: 0.6875rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--muted);
	white-space: nowrap;
	padding-top: 0.6rem;
}
.vf-catalog__note { margin-top: 1.5rem; font-size: var(--fs-small); color: var(--muted); max-width: 60ch; }
@media (min-width: 768px) {
	.vf-catalog__item {
		grid-template-columns: 3.5rem 2fr 3fr auto;
		grid-template-areas: 'index name desc state';
	}
	.vf-catalog__desc { margin-top: 0; }
}

.vf-houses__empty { color: var(--fg-2); max-width: 56ch; font-size: var(--fs-small); margin: 0; }
.vf-houses__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem 2rem; }
.vf-houses__list a { font-family: var(--serif); font-size: 1.5rem; text-decoration: none; }

/* Scent families — a quiet grid of notes */
.vf-families { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
.vf-families li { display: grid; grid-template-columns: 1fr; gap: 0.5rem 2rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.vf-families b { font-family: var(--serif); font-weight: 400; font-size: var(--fs-h3); line-height: 1.1; }
.vf-families span { color: var(--fg-2); font-size: var(--fs-small); max-width: 48ch; }
.vf-families i { font-style: italic; color: var(--muted); font-size: var(--fs-small); }
@media (min-width: 768px) {
	.vf-families li { grid-template-columns: 2fr 3fr 2fr; align-items: baseline; }
}

/* Two-column text block */
.vf-cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem clamp(32px, 6vw, 96px);
}
@media (min-width: 900px) {
	.vf-cols { grid-template-columns: 5fr 7fr; }
	.vf-cols--even { grid-template-columns: 1fr 1fr; }
	.vf-cols--sticky > :first-child { position: sticky; top: calc(var(--header-stick) + 2rem); align-self: start; }
}

/* Mosaic — images with different heights */
.vf-mosaic {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: clamp(16px, 2.5vw, 40px);
	row-gap: 2rem;
	align-items: start;
}
.vf-mosaic > * { grid-column: span 12; }
@media (min-width: 768px) {
	.vf-mosaic__a { grid-column: 1 / span 7; }
	.vf-mosaic__b { grid-column: 9 / span 4; margin-top: 8rem; }
	.vf-mosaic__c { grid-column: 3 / span 5; margin-top: -4rem; }
	.vf-mosaic__d { grid-column: 8 / span 5; margin-top: 2rem; }
}

/* --------------------------------------------------------------------------
   8. Content pages, FAQ, contact
   -------------------------------------------------------------------------- */
.vf-page-head { padding-top: calc(var(--header-pad) + clamp(3rem, 8vw, 7rem)); padding-bottom: clamp(2rem, 4vw, 4rem); }
.vf-page-head h1 { max-width: 16ch; }

.vf-entry { color: var(--fg-2); }
.vf-entry > * { max-width: 720px; margin-left: auto; margin-right: auto; }
.vf-entry > .alignwide { max-width: var(--max); padding-inline: var(--gutter); }
.vf-entry > .alignfull { max-width: none; width: 100%; }
.vf-entry > p + h2,
.vf-entry > figure + h2,
.vf-entry > ul + h2,
.vf-entry > ol + h2,
.vf-entry > .wp-block-group + h2 { margin-top: 2.5em; }
.vf-entry > h2 { margin-top: 2em; font-size: var(--fs-h3); color: var(--fg); }
.vf-entry > h3 { margin-top: 1.75em; font-size: 1.5rem; color: var(--fg); }
.vf-entry ul, .vf-entry ol { padding-left: 1.2em; }
.vf-entry li { margin-bottom: 0.5em; }
.vf-entry figure { margin: 2.5rem auto; }
.vf-entry > .wp-block-image:not(.alignwide):not(.alignfull) img { width: 100%; }
.vf-entry .wp-block-columns { gap: clamp(16px, 2.5vw, 40px); }
.vf-entry .wp-block-table td, .vf-entry .wp-block-table th { padding: 0.75em 0.5em; }

/* Image ratio styles */
.wp-block-image.is-style-portrait img,
.wp-block-image.is-style-landscape img,
.wp-block-image.is-style-tall img { width: 100%; object-fit: cover; }
.wp-block-image.is-style-portrait img { aspect-ratio: 4 / 5; }
.wp-block-image.is-style-landscape img { aspect-ratio: 3 / 2; }
.wp-block-image.is-style-tall img { aspect-ratio: 2 / 3; }

/* Block styles */
p.is-style-lead { font-size: var(--fs-lead); line-height: 1.45; font-weight: 300; }
p.is-style-eyebrow { font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.25rem; }
p.is-style-note { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.is-style-display { font-family: var(--serif); font-size: var(--fs-h2) !important; font-weight: 400; }
.is-style-italic { font-family: var(--serif); font-style: italic; font-weight: 400; }
.wp-block-quote.is-style-editorial {
	border: 0;
	padding: 0;
	margin: 3rem auto;
	text-align: center;
	max-width: 24ch;
}
.wp-block-quote.is-style-editorial p { font-family: var(--serif); font-size: var(--fs-h2); line-height: 1.12; color: var(--fg); margin-bottom: 1rem; }
.wp-block-quote.is-style-editorial cite { font-style: normal; font-size: var(--fs-eyebrow); letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
.wp-block-quote:not(.is-style-editorial) { border-left: 1px solid var(--line-strong); padding-left: 1.5rem; margin: 2rem 0; }
.wp-block-quote:not(.is-style-editorial) p { font-family: var(--serif); font-size: 1.5rem; line-height: 1.25; }
.wp-block-separator.is-style-hairline { border: 0; border-top: 1px solid var(--line); width: 100%; margin: 3rem auto; }
.wp-block-separator:not(.is-style-hairline) { border: 0; border-top: 1px solid var(--line-strong); width: 4rem; margin: 3rem auto; }
.wp-block-group.is-style-ink { background: var(--ink); color: var(--ivory); padding: clamp(2rem, 5vw, 4rem); }
.wp-block-group.is-style-ink h2, .wp-block-group.is-style-ink h3 { color: inherit; }
.wp-block-group.is-style-sand { background: var(--sand); padding: clamp(2rem, 5vw, 4rem); }
ul.is-style-index { list-style: none; padding: 0; border-top: 1px solid var(--line); }
ul.is-style-index li { padding: 1rem 0; border-bottom: 1px solid var(--line); margin: 0; font-family: var(--serif); font-size: 1.375rem; }

/* vf-split (pattern) */
.vf-split .wp-block-columns { gap: clamp(24px, 4vw, 72px); }
.vf-split .is-style-display { margin-bottom: 1.25rem; }
.vf-split--reverse .wp-block-columns { flex-direction: row-reverse; }
@media (max-width: 781px) {
	.vf-split .wp-block-columns { flex-direction: column; }
	.vf-split .wp-block-column { flex-basis: 100% !important; }
}
.vf-triptych .wp-block-columns { gap: clamp(16px, 2.5vw, 40px); align-items: start; }
.vf-triptych .wp-block-column:nth-child(2) { margin-top: 4rem; }
@media (max-width: 781px) { .vf-triptych .wp-block-column:nth-child(2) { margin-top: 0; } }

/* FAQ — details */
.wp-block-details.is-style-faq,
.vf-faq details {
	border-top: 1px solid var(--line);
	padding: 0;
	margin: 0;
	max-width: 760px;
}
.wp-block-details.is-style-faq:last-of-type,
.vf-faq details:last-of-type { border-bottom: 1px solid var(--line); }
.wp-block-details.is-style-faq summary,
.vf-faq summary {
	list-style: none;
	cursor: pointer;
	padding: 1.35rem 3rem 1.35rem 0;
	font-family: var(--serif);
	font-size: var(--fs-h3);
	line-height: 1.15;
	position: relative;
	color: var(--fg);
}
.wp-block-details.is-style-faq summary::-webkit-details-marker,
.vf-faq summary::-webkit-details-marker { display: none; }
.wp-block-details.is-style-faq summary::after,
.vf-faq summary::after {
	content: '';
	position: absolute;
	right: 0.25rem;
	top: 50%;
	width: 14px; height: 14px;
	margin-top: -7px;
	background:
		linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat,
		linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat;
	transition: transform var(--t-med) var(--ease);
	opacity: 0.6;
}
.wp-block-details.is-style-faq[open] summary::after,
.vf-faq details[open] summary::after { transform: rotate(45deg); }
.wp-block-details.is-style-faq > :not(summary),
.vf-faq details > :not(summary) { color: var(--fg-2); max-width: 60ch; padding-bottom: 1.5rem; }
.wp-block-details.is-style-faq > p:last-child,
.vf-faq details > p:last-child { margin-bottom: 0; }

/* Contact */
.vf-contact {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem clamp(32px, 6vw, 96px);
}
.vf-contact__block { border-top: 1px solid var(--line); padding-top: 1.5rem; }
.vf-contact__block h2 { font-size: var(--fs-h3); margin-bottom: 0.75rem; }
.vf-contact__block p { color: var(--fg-2); max-width: 44ch; }
.vf-contact__email { font-family: var(--serif); font-size: var(--fs-h3); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.vf-contact__pending { font-size: var(--fs-small); color: var(--muted); }
@media (min-width: 768px) { .vf-contact { grid-template-columns: 1fr 1fr; } }

/* --------------------------------------------------------------------------
   9. Journal
   -------------------------------------------------------------------------- */
.vf-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 4vw, 3rem) clamp(16px, 2.5vw, 40px);
}
@media (min-width: 640px) { .vf-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .vf-cards { grid-template-columns: repeat(3, 1fr); } }
.vf-card__media { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-2); margin-bottom: 1.25rem; }
.vf-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.vf-card:hover .vf-card__media img { transform: scale(1.025); }
.vf-card__body .vf-eyebrow { margin-bottom: 0.6rem; }
.vf-card__title { font-size: var(--fs-h3); margin-bottom: 0.6rem; }
.vf-card__title a { text-decoration: none; }
.vf-card__title a:hover { text-decoration: underline; text-decoration-color: var(--line-strong); }
.vf-card__excerpt { color: var(--fg-2); font-size: var(--fs-small); max-width: 36ch; margin: 0; }

.vf-article__head { padding-top: calc(var(--header-pad) + clamp(3rem, 8vw, 7rem)); text-align: center; }
.vf-article__head h1 { max-width: 18ch; margin-inline: auto; }
.vf-article__meta { font-size: var(--fs-small); color: var(--muted); margin-top: 1rem; }
.vf-article__hero { margin: clamp(2rem, 5vw, 4rem) auto 0; max-width: 820px; padding-inline: var(--gutter); }
.vf-article__hero img { width: 100%; height: auto; }
.vf-article__body { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.vf-article__foot { border-top: 1px solid var(--line); padding-top: 2rem; display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }

.vf-pagination { display: flex; gap: 1rem; justify-content: center; margin-top: 4rem; }
.vf-pagination .page-numbers { font-size: var(--fs-small); letter-spacing: 0.12em; text-decoration: none; padding: 0.5rem 0.75rem; border-bottom: 1px solid transparent; }
.vf-pagination .page-numbers.current { border-bottom-color: currentColor; }
.vf-pagination a.page-numbers:hover { border-bottom-color: var(--line-strong); }

/* --------------------------------------------------------------------------
   10. Search, empty states, 404
   -------------------------------------------------------------------------- */
.vf-search-form { display: flex; gap: 0; border-bottom: 1px solid var(--fg); max-width: 560px; }
.vf-search-form input[type='search'] {
	flex: 1;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: var(--fs-lead);
	font-family: var(--serif);
	padding: 0.75rem 0;
	color: var(--fg);
	min-width: 0;
}
.vf-search-form input[type='search']::placeholder { color: var(--muted); }
.vf-search-form button {
	appearance: none;
	border: 0;
	background: none;
	color: var(--fg);
	cursor: pointer;
	padding: 0 0 0 1rem;
	display: inline-flex;
	align-items: center;
	font: inherit;
	font-size: 0.75rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}
.vf-empty { padding-block: clamp(3rem, 6vw, 6rem); }
.vf-empty__title { font-size: var(--fs-h1); max-width: 12ch; }
.vf-empty__title em { font-style: italic; }
.vf-empty p { color: var(--fg-2); max-width: 44ch; }
.vf-empty__links { display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; margin-top: 2rem; }

/* Header search: a link to the search page without script, a panel under the header with it. */
.vf-search-toggle { display: inline-flex; align-items: center; color: inherit; text-decoration: none; padding: 0.25rem 0; }
.vf-search {
	position: fixed;
	inset: 0;
	z-index: 58;
	background: rgba(28, 27, 25, 0.38);
}
.vf-search[hidden] { display: none; }
.vf-search__inner {
	position: relative;
	background: var(--ivory);
	color: var(--ink);
	padding-top: calc(var(--header-stick) + clamp(1.5rem, 4vw, 3rem));
	padding-bottom: clamp(2rem, 4vw, 3rem);
	max-width: none;
	border-bottom: 1px solid var(--hair);
}
.admin-bar .vf-search__inner { padding-top: calc(var(--header-stick) + 32px + clamp(1.5rem, 4vw, 3rem)); }
.vf-search__inner .vf-search-form { max-width: 820px; margin-inline: auto; }
.vf-search__inner .vf-search-form input[type='search'] { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); }
.vf-search__close {
	position: absolute;
	right: var(--gutter);
	top: calc(var(--header-stick) + 0.75rem);
	appearance: none; background: none; border: 0; cursor: pointer; color: var(--stone);
	font: inherit; font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase;
}
.vf-search__results { max-width: 820px; margin: 1.5rem auto 0; }
.vf-search__results:empty { display: none; }
.vf-suggest__label { font-size: var(--fs-eyebrow); letter-spacing: 0.24em; text-transform: uppercase; color: var(--stone); margin: 1.25rem 0 0.5rem; }
.vf-suggest__brands { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.vf-suggest__brands a { font-family: var(--serif); font-size: 1.25rem; text-decoration: none; }
.vf-suggest__note { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); margin-left: 0.4em; }
.vf-suggest__products { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.vf-suggest__products a { display: grid; grid-template-columns: 52px 1fr auto; gap: 1rem; align-items: center; text-decoration: none; padding: 0.4rem 0; border-bottom: 1px solid var(--hair); }
.vf-suggest__products img { width: 52px; height: 65px; object-fit: contain; background: #efebe4; mix-blend-mode: multiply; }
.vf-suggest__products b { display: block; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); }
.vf-suggest__products span { font-size: var(--fs-small); }
.vf-suggest__price { font-size: var(--fs-small); color: var(--ink-3); white-space: nowrap; }
.vf-suggest__all { display: inline-block; margin-top: 1.25rem; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; }
.vf-suggest__none { color: var(--stone); font-size: var(--fs-small); margin: 1rem 0 0; }
body.vf-search-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   Storefront header: utility bar, search header, catalog navigation, mega panels
   -------------------------------------------------------------------------- */
.vf-utility { background: var(--ink); color: var(--ivory); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; }
.vf-utility__inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 2.5rem; padding-block: 0.6rem; }
.vf-utility__item { margin: 0; }
.vf-utility a { color: inherit; text-underline-offset: 3px; }
@media (max-width: 767px) {
	.vf-utility__inner { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
	.vf-utility__inner::-webkit-scrollbar { display: none; }
	.vf-utility__item { white-space: nowrap; }
}

/* The storefront header sits in the document flow and pins itself while scrolling, so pages below it need no
   top offset but sticky elements must clear the pinned height. */
.vf-shopping { --header-pad: 0px; --header-stick: calc(var(--header-h) + 45px); }
@media (max-width: 1023px) { .vf-shopping { --header-stick: var(--header-h); } }
.vf-header--shop,
.js .vf-header--shop { position: sticky; top: 0; height: auto; transform: none; }
.admin-bar .vf-header--shop { top: 32px; }
@media (max-width: 782px) { .admin-bar .vf-header--shop { top: 46px; } }
@media (max-width: 600px) { .admin-bar .vf-header--shop { top: 0; } }
.vf-header--shop .vf-header__inner { grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(16px, 3vw, 48px); height: var(--header-h); }
.vf-header--shop .vf-header__left { order: 1; }
.vf-header--shop .vf-header__search { order: 2; justify-self: center; width: 100%; max-width: 560px; }
.vf-header--shop .vf-header__right { order: 3; gap: clamp(14px, 1.6vw, 24px); }
.vf-header--shop .vf-header__search .vf-search-form { border: 1px solid var(--line-strong); border-radius: 999px; padding: 0 0.4rem 0 1.1rem; max-width: none; }
.vf-header--shop .vf-header__search .vf-search-form:focus-within { border-color: var(--fg); box-shadow: none; }
.vf-header--shop .vf-header__search input[type='search'] { font-family: var(--sans); font-size: 0.875rem; padding: 0.7rem 0; }
.vf-header--shop .vf-header__search button { padding: 0 0.75rem; }
.vf-header--shop .vf-search-toggle { display: none; }
@media (max-width: 1023px) {
	.vf-header--shop .vf-header__search { display: none; }
	.vf-header--shop .vf-search-toggle { display: inline-flex; }
	/* Below the navigation row the header returns to menu | wordmark | tools, with the wordmark centred. */
	.vf-header--shop .vf-header__inner { grid-template-columns: auto auto auto; justify-content: space-between; gap: 4px; }
	.vf-header--shop .vf-brand__word { font-size: 1.0625rem; letter-spacing: 0.2em; text-indent: 0.2em; }
}
/* Narrow phones: the header row carries five controls, so it keeps its own tighter gutter. */
@media (max-width: 420px) {
	.vf-header--shop .vf-header__inner { padding-inline: 12px; }
	.vf-header--shop .vf-util__link, .vf-header--shop .vf-bag { min-width: 36px; }
	.vf-header--shop .vf-brand__word { font-size: 1rem; letter-spacing: 0.16em; text-indent: 0.16em; }
	.vf-bag__count { font-size: 0.6875rem; }
	.vf-header--shop .vf-header__left { order: 2; justify-self: center; }
	.vf-header--shop .vf-header__right { order: 3; justify-self: end; }
	.vf-header--shop .vf-toggle { order: 1; justify-self: start; }
}

.vf-util__link { display: inline-flex; align-items: center; gap: 0.3em; color: inherit; text-decoration: none; position: relative; padding: 0.25rem 0; }
.vf-util__count { position: absolute; top: -2px; right: -10px; min-width: 16px; height: 16px; padding: 0 4px; display: grid; place-items: center; border-radius: 999px; background: var(--accent); color: var(--ivory); font-size: 0.625rem; letter-spacing: 0; font-weight: 500; }
.vf-util__count[hidden] { display: none; }

.vf-nav { border-top: 1px solid var(--line); }
.vf-header--shop { height: auto; }
.vf-nav__list { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: clamp(16px, 2.4vw, 40px); }
.vf-nav__item { position: static; }
.vf-nav__link {
	display: inline-flex; align-items: center; gap: 0.4em; padding: 0.9rem 0; background: none; border: 0; cursor: pointer;
	font-family: var(--sans); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
	text-decoration: none; color: inherit; position: relative;
}
.vf-nav__link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0.55rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--t-med) var(--ease); }
.vf-nav__item:hover > .vf-nav__link::after, .vf-nav__link[aria-expanded='true']::after, .vf-nav__link:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.vf-nav__item--sale > .vf-nav__link { color: var(--accent-text); }
@media (max-width: 1023px) { .vf-nav { display: none; } }

.vf-mega {
	position: absolute; left: 0; right: 0; z-index: 50;
	background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
	box-shadow: 0 18px 40px rgba(28, 27, 25, 0.08);
}
.vf-mega[hidden] { display: none; }
.vf-mega__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: clamp(20px, 2.5vw, 48px); padding-block: clamp(1.75rem, 3vw, 2.75rem); }
.vf-mega__title { font-family: var(--sans); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.9rem; }
.vf-mega__title--spaced { margin-top: 1.75rem; }
.vf-mega__title a { color: var(--fg); text-decoration: none; }
.vf-mega__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.vf-mega__list a { font-size: var(--fs-small); text-decoration: none; color: var(--fg-2); }
.vf-mega__list a:hover { color: var(--fg); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.vf-mega__all { font-style: italic; }
.vf-mega__col--discover { border-left: 1px solid var(--line); padding-left: clamp(20px, 2.5vw, 48px); }
.vf-mega__list--designers { columns: 2; column-gap: 1.5rem; display: block; }
.vf-mega__list--designers li { padding: 0.2rem 0; break-inside: avoid; }

/* Phone navigation */
.vf-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.vf-drawer__title { font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--stone); }
.vf-drawer__close { appearance: none; background: none; border: 0; cursor: pointer; color: var(--stone); font: inherit; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; padding: 0.5rem 0; }
.vf-mnav__list, .vf-mnav__types, .vf-mnav__secondary { list-style: none; margin: 0; padding: 0; }
.vf-mnav__item { border-bottom: 1px solid var(--hair); }
.vf-mnav__link {
	display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem;
	padding: 1rem 0; background: none; border: 0; cursor: pointer; text-align: left; text-decoration: none;
	font-family: var(--serif); font-size: clamp(1.5rem, 6vw, 2rem); line-height: 1.15; color: inherit;
}
.vf-mnav__chev { width: 10px; height: 10px; flex: none; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--t-fast) var(--ease); }
.vf-mnav__link--toggle[aria-expanded='true'] .vf-mnav__chev { transform: rotate(45deg); }
.vf-mnav__panel { padding-bottom: 1rem; }
.vf-mnav__panel[hidden], .vf-mnav__types[hidden] { display: none; }
.vf-mnav__all { display: inline-block; font-size: var(--fs-small); font-style: italic; margin-bottom: 0.75rem; }
.vf-mnav__sub {
	display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem;
	padding: 0.7rem 0; background: none; border: 0; border-top: 1px solid var(--hair); cursor: pointer; text-align: left; text-decoration: none;
	font: inherit; font-size: 0.8125rem; letter-spacing: 0.16em; text-transform: uppercase; color: inherit;
}
.vf-mnav__types { padding: 0.25rem 0 0.75rem 1rem; display: grid; gap: 0.1rem; }
.vf-mnav__types a { display: block; padding: 0.4rem 0; font-size: var(--fs-small); text-decoration: none; color: var(--stone); }
.vf-mnav__secondary { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; }
.vf-mnav__secondary a { font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; }
@media (max-width: 1023px) { .vf-toggle__text { display: none; } }

/* Touch targets: a control a finger has to hit needs room around it, even when its ink is small. */
@media (pointer: coarse), (max-width: 767px) {
	.vf-utility__inner { padding-block: 0.85rem; }
	.vf-util__link { min-width: 40px; min-height: 44px; justify-content: center; }
	.vf-header__right { gap: 0; }
	.vf-header--shop .vf-bag { min-width: 40px; min-height: 44px; justify-content: center; }
	.vf-brand__link { display: inline-flex; align-items: center; min-height: 44px; }
	.vf-toggle { min-height: 44px; min-width: 44px; justify-content: center; }
	.vf-crumb a, .vf-crumb span { padding-block: 0.35rem; }
}

/* Save control */
.vf-wish { display: inline-flex; align-items: center; gap: 0.5em; color: inherit; text-decoration: none; cursor: pointer; background: none; border: 0; }
.vf-wish__icon path { transition: fill var(--t-fast), stroke var(--t-fast); }
.vf-wish[aria-pressed='true'] .vf-wish__icon path { fill: var(--accent); stroke: var(--accent); }
.vf-wish--card { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 3; width: 36px; height: 36px; justify-content: center; border-radius: 999px; background: rgba(250, 247, 241, 0.86); backdrop-filter: blur(2px); }
.vf-wish--card .vf-wish__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vf-wish--card:hover { background: var(--paper); }
.vf-wish--pdp { font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.4rem 0; }
.vf-pdp__save { margin: -0.75rem 0 1.5rem; }

/* Product rails (more from this designer, recently viewed) */
.vf-rail { grid-column: 1 / -1; margin-top: clamp(3rem, 6vw, 5rem); }
.vf-rail__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.75rem 2rem; margin-bottom: 1.75rem; }
.vf-rail__head h2 { font-size: var(--fs-h3); margin: 0; }

/* Primary menu panels (second menu level). Hover on pointers; focus-within for keyboards. */
.vf-menu .menu-item-has-children { position: relative; }
.vf-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: -1.5rem;
	z-index: 5;
	min-width: 240px;
	margin: 0;
	padding: 1.25rem 1.5rem;
	list-style: none;
	display: grid;
	gap: 0.15rem;
	background: var(--ivory);
	color: var(--ink);
	border: 1px solid var(--hair);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility 0s linear var(--t-fast);
}
.vf-menu .menu-item-has-children:hover > .sub-menu,
.vf-menu .menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.vf-menu .sub-menu a { font-size: 0.75rem; letter-spacing: 0.16em; padding: 0.45em 0; white-space: nowrap; }
.vf-menu .sub-menu a::after { bottom: 0.25em; }
.vf-drawer__menu .sub-menu { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.vf-drawer__menu .sub-menu li { border: 0; }
.vf-drawer__menu .sub-menu a { font-family: var(--sans); font-size: 0.8125rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.35rem 0; }

.vf-404 { min-height: 100svh; display: grid; align-items: center; padding-top: var(--header-pad); }
.vf-404__num { font-family: var(--serif); font-style: italic; font-size: var(--fs-giant); line-height: 0.9; color: var(--stone-2); margin: 0 0 1rem; }

/* --------------------------------------------------------------------------
   11. Forms
   -------------------------------------------------------------------------- */
input[type='text'], input[type='email'], input[type='url'], input[type='tel'], input[type='number'],
input[type='password'], input[type='search'], textarea, select {
	font: inherit;
	color: var(--fg);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--line-strong);
	padding: 0.7em 0;
	width: 100%;
	border-radius: 0;
	transition: border-color var(--t-fast);
}
input:focus-visible, textarea:focus-visible, select:focus-visible { border-bottom-color: var(--fg); }
.vf-search-form:focus-within { border-bottom-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }
label { font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
.vf-footer {
	background: var(--ink);
	color: var(--ivory);
	padding-top: clamp(4rem, 8vw, 8rem);
	padding-bottom: 2.5rem;
	--line: rgba(244, 239, 230, 0.16);
	--muted: #9b9185;
}
.vf-footer a { text-decoration: none; }
.vf-footer a:hover { text-decoration: underline; text-decoration-color: rgba(244, 239, 230, 0.5); }
.vf-footer__brand { border-bottom: 1px solid var(--line); padding-bottom: clamp(2rem, 4vw, 3rem); margin-bottom: clamp(2.5rem, 5vw, 4rem); display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem; }
.vf-footer__brand .vf-brand__word { font-size: clamp(2.5rem, 8vw, 7rem); letter-spacing: 0.2em; text-indent: 0; }
.vf-footer__tag { font-family: var(--serif); font-style: italic; font-size: var(--fs-lead); color: #cfc7ba; max-width: 24ch; margin: 0; }
.vf-footer__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2.5rem clamp(16px, 2.5vw, 40px);
}
@media (min-width: 900px) { .vf-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.vf-footer__col h2 { font-family: var(--sans); font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.25rem; }
.vf-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.vf-footer__col a { font-size: var(--fs-small); letter-spacing: 0.04em; }
.vf-footer__about { grid-column: 1 / -1; color: #cfc7ba; font-size: var(--fs-small); max-width: 44ch; }
@media (min-width: 900px) { .vf-footer__about { grid-column: auto; } }
.vf-footer__about p { margin-bottom: 1rem; }
.vf-footer__pending { margin: 0; font-size: var(--fs-small); color: #cfc7ba; max-width: 28ch; }
.vf-footer__bottom {
	margin-top: clamp(3rem, 6vw, 5rem);
	padding-top: 1.5rem;
	border-top: 1px solid var(--line);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.75rem 2rem;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	color: var(--muted);
}
.vf-footer__bottom p { margin: 0; }

/* --------------------------------------------------------------------------
   13. Motion
   -------------------------------------------------------------------------- */
.js [data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
	transition-delay: var(--delay, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
@keyframes vf-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes vf-settle { from { transform: scale(1.04); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	.js [data-reveal] { opacity: 1; transform: none; }
	a.vf-frame:hover img, .vf-card:hover .vf-card__media img, .vf-frame--hover:hover img { transform: none; }
}

/* --------------------------------------------------------------------------
   14. Responsive header
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
	:root { --header-h: 64px; }
	.vf-header__inner { grid-template-columns: 1fr auto 1fr; }
	.vf-header__left { order: 2; justify-self: center; }
	.vf-header__nav { display: none; }
	.vf-header__right > nav { display: none; }
	.vf-header__right { order: 3; justify-self: end; }
	.vf-toggle { display: inline-flex; order: 1; }
	.vf-header__inner > .vf-toggle { justify-self: start; }
	.vf-brand__word { font-size: 1.25rem; }
}
@media (min-width: 1024px) {
	.vf-drawer { display: none; }
}

/* --------------------------------------------------------------------------
   15. Admin bar, print
   -------------------------------------------------------------------------- */
.admin-bar .vf-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .vf-header { top: 46px; } }
.admin-bar .vf-drawer { padding-top: calc(var(--header-stick) + 24px + 32px); }
@media (max-width: 782px) { .admin-bar .vf-drawer { padding-top: calc(var(--header-stick) + 24px + 46px); } }
@media (max-width: 600px) { .admin-bar .vf-header { top: 0; } .admin-bar .vf-drawer { padding-top: calc(var(--header-stick) + 24px); } }

@media print {
	.vf-header, .vf-drawer, .vf-search, .vf-footer, .vf-filters, .vf-filter-toggle { display: none !important; }
	body { background: #fff; color: #000; }
	.vf-page-hero { min-height: 0; color: #000; }
	[data-reveal], .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
	.vf-section--ink, .vf-dusk, .vf-dusk__text p, .vf-dusk__notes li, .vf-dusk__notes b, .vf-page-hero__lead,
	.vf-eyebrow--light, .vf-footer__tag, .vf-dark, .vf-ink { color: #000 !important; background: none !important; }
}

/* ------------------------------------------------------------------------
   A campaign built on a product photograph.

   The houses shoot on white. Cropping that to fill a panel cuts the piece in
   half and looks like a mistake, so the photograph is shown whole on a soft
   field and given room to breathe, the way a window display works.
   ------------------------------------------------------------------------ */
.vf-hero__media--product {
	background: linear-gradient(160deg, #f7f4ef 0%, #efe9e1 100%);
}

.vf-hero__media--product img {
	object-fit: contain;
	object-position: center;
	padding: clamp(1.5rem, 5vw, 4.5rem);
	mix-blend-mode: multiply;   /* lifts the shot's own white off the field */
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .vf-hero__media--product {
		background: linear-gradient(160deg, #f4f1ec 0%, #e8e2da 100%);
	}
}

/* ------------------------------------------------------------------------
   The designer strip, directly under the hero.

   One line of names, scrolling sideways on a phone rather than stacking into
   a column the visitor has to scroll past. Its job is recognition in the
   first seconds, so it stays short and gives up height to the pieces below.
   ------------------------------------------------------------------------ */
.vf-section--strip {
	padding-block: clamp(1rem, 2.5vw, 1.75rem);
	border-bottom: 1px solid var(--rule, #e3ded7);
}

.vf-strip__title {
	margin: 0 0 0.6rem;
	font-family: inherit;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted-text, #5f5a53);
}

.vf-designer-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vf-designer-strip a,
.vf-designer-strip span {
	display: inline-block;
	padding-block: 0.15rem;
	font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
	letter-spacing: 0.01em;
	text-decoration: none;
	color: inherit;
	white-space: nowrap;
}

.vf-designer-strip a:hover,
.vf-designer-strip a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.vf-designer-strip__all a {
	color: var(--bronze-text, #7a5c35);
}

@media (max-width: 700px) {
	/* One sideways line beats a tall stack: the names stay in the first screen. */
	.vf-designer-strip {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		gap: 1.25rem;
		padding-bottom: 0.25rem;
		-webkit-overflow-scrolling: touch;
	}

	.vf-designer-strip::-webkit-scrollbar {
		display: none;
	}
}

/* ------------------------------------------------------------------------
   Who is selling, in one band at the foot of the storefront.

   What used to be four editorial sections. With real merchandise on the page
   the visitor needs one honest paragraph about the operator, not a tour.
   ------------------------------------------------------------------------ */
.vf-about-strip__inner {
	display: grid;
	gap: clamp(1.25rem, 3vw, 3rem);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 820px) {
	.vf-about-strip__inner {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	}
}

.vf-about-strip__title {
	margin: 0.25rem 0 0.75rem;
	font-size: clamp(1.5rem, 3vw, 2.125rem);
}

.vf-about-strip__facts {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.45rem 1.25rem;
	margin: 0;
	font-size: 0.9375rem;
}

.vf-about-strip__facts dt {
	color: var(--muted-text, #5f5a53);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	align-self: center;
}

.vf-about-strip__facts dd {
	margin: 0;
}

/* ------------------------------------------------------------------------
   The first screen on a phone.

   Measured on production at 390x844: the hero stood 1,184px tall, which put
   the primary action at y=1294 and the designer names at y=1414. A visitor
   had to scroll one and a half screens past an empty-looking field before
   anything told them whose pieces these are or gave them somewhere to go.

   Below 700px the photograph takes about a third of the screen, the panel
   gives up its padding and its lead paragraph, and the title is capped, so
   the eyebrow, the designer names, the button and the top of the designer
   strip all land inside the first 844px.
   ------------------------------------------------------------------------ */
@media (max-width: 1023px) {
	/*
	 * Everything below the two-column breakpoint stacks the photograph above the words, so the taller
	 * the photograph the further down the words go. At 768x1024 the default 68svh put the buttons off
	 * the screen entirely; the clamp keeps the image generous on a tablet and modest on a phone.
	 */
	.vf-hero__media {
		height: clamp(230px, 33svh, 380px);
		min-height: 0;
	}

	.vf-hero__media--product img {
		padding: 1rem 1.25rem;
	}

	.vf-hero__panel {
		padding-block: 1.5rem 1.75rem;
		justify-content: flex-start;
		gap: 0;
	}

	.vf-hero__title {
		font-size: clamp(1.9rem, 1.1rem + 4.2vw, 2.6rem);
		line-height: 1.04;
		margin-bottom: 0.85rem;
		max-width: none;
	}

	/* The accent line carries the promise; the paragraph under it repeats the
	   announcement bar and costs a third of the screen. */
	.vf-hero__lead {
		font-size: 0.9375rem;
		line-height: 1.35;
		margin-bottom: 1.1rem;
		max-width: none;
	}

	.vf-hero__lead--long {
		display: none;
	}

	.vf-hero__actions {
		gap: 0.75rem 1.75rem;
	}
}

/* The short lead exists only where the hero stacks; above that the full sentence runs. */
.vf-hero__lead--short {
	display: none;
}

@media (max-width: 1023px) {
	.vf-hero__lead--short {
		display: block;
	}
}

/* A headline that names houses is a sentence, not a poster: smaller, wider, fewer lines. */
.vf-hero__title--names {
	font-size: clamp(1.9rem, 1.1rem + 2.1vw, 3.5rem);
	line-height: 1.06;
	max-width: 20ch;
}

@media (min-width: 1024px) {
	.vf-hero__title--names {
		max-width: 16ch;
	}
}

/* The ordering-closed line, beside the hero's own button. */
.vf-hero__status {
	margin: 0 0 0.9rem;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted-text, #5f5a53);
}

/* ------------------------------------------------------------------------
   Height.

   On the audited desktop the first priced piece sat about 2,200px down. The
   rails and the tiles each carried a full section's padding, and four of
   them in a row is most of a screen in air. These are tighter, without
   taking the breathing room out of the editorial sections below.
   ------------------------------------------------------------------------ */
.vf-home-rail {
	padding-block: clamp(1.5rem, 3vw, 2.75rem);
}

.vf-home-rail .vf-head {
	margin-bottom: clamp(0.75rem, 1.5vw, 1.25rem);
}

.vf-section--strip + .vf-section--tight {
	padding-top: clamp(1rem, 2vw, 1.5rem);
}