/* Vedic Art 108 Hero: a field of light.
 * Tokens follow the site design block (va108-design); fallbacks keep it right without it.
 * 25920 proportions: 432px painting column, 72px gap, 108px landing, 216px dust overhang. */

/* The WPBakery row that holds the hero: full-bleed, no padding, above the next section so the dust can drift into it. */
html body .vc_row.va-hero-row,
html body .vc_row.va-hero-row > .full_section_inner,
html body .vc_row.va-hero-row .vc_column_container,
html body .vc_row.va-hero-row .vc_column-inner,
html body .vc_row.va-hero-row .wpb_wrapper {
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	max-width: none !important;
	float: none !important;
	background: transparent !important;
	overflow: visible !important;
}
html body .vc_row.va-hero-row { position: relative !important; z-index: 2 !important; }
html body .vc_row.va-hero-row + .vc_row { position: relative; z-index: 1; }

html body .va-hero {
	--vah-ink: var(--va-ink, #3F2B26);
	--vah-muted: var(--va-ink-muted, #7A655D);
	--vah-saffron: var(--va-saffron, #F9A11D);
	--vah-saffron-deep: var(--va-saffron-deep, #EE9512);
	--vah-gold: var(--va-gold-text, #9A5B08);
	--vah-line: var(--va-gold-line, rgba(249, 161, 29, .38));
	--vah-ivory: var(--va-ivory, #FFFCF5);
	--vah-cream: var(--va-cream, #FCF5E5);
	--vah-sans: var(--va-sans, 'VA Lato', Lato, 'Helvetica Neue', Arial, sans-serif);
	--vah-serif: var(--va-serif, 'VA Playfair', 'Playfair Display', Georgia, serif);
	--vah-ease: cubic-bezier(.111, .666, .333, 1);
	position: relative;
	isolation: isolate;
	display: block;
	width: 100%;
	color: var(--vah-ink);
	background: radial-gradient(ellipse 60% 70% at 72% 46%, rgba(249, 161, 29, .2), rgba(249, 161, 29, 0) 70%), var(--vah-ivory);
	text-align: left;
}
html body .va-hero .va-hero__field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
html body .va-hero .va-hero__dust { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% + 216px); display: block; z-index: 1; pointer-events: none; }
html body .va-hero .va-hero__wrap {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	/* Same frame as the header (va108-header): 1332px wide with 54px sides, so the copy starts under "Prints" and the
	   painting ends under "Cart". */
	max-width: 1332px;
	margin: 0 auto;
	padding: 72px max(54px, env(safe-area-inset-right, 0px)) 108px max(54px, env(safe-area-inset-left, 0px));
	display: grid;
	grid-template-columns: minmax(0, 1fr) 432px;
	gap: 72px;
	align-items: center;
}
html body .va-hero .va-hero__copy { min-width: 0; }
html body .va-hero .va-hero__eyebrow {
	margin: 0 0 18px !important;
	padding: 0 !important;
	font: italic 400 18px/30px var(--vah-serif) !important;
	color: var(--vah-muted) !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}
html body .va-hero .va-hero__title {
	margin: 0 !important;
	padding: 0 !important;
	max-width: 540px;
	font: 300 36px/48px var(--vah-sans) !important;
	letter-spacing: -.005em !important;
	text-transform: none !important;
	color: var(--vah-ink) !important;
	text-wrap: balance;
}
html body .va-hero .va-hero__title::after { content: none !important; display: none !important; }
html body .va-hero .va-hero__title em {
	font-family: var(--vah-serif) !important;
	font-style: italic !important;
	font-weight: 400 !important;
	color: var(--vah-gold) !important;
}
html body .va-hero .va-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; margin-top: 36px; }
html body .va-hero a.va-hero__pill {
	display: inline-flex !important;
	align-items: center;
	min-height: 54px;
	padding: 0 36px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--vah-saffron) !important;
	color: var(--vah-ink) !important;
	-webkit-text-fill-color: var(--vah-ink) !important;
	font: 400 16px/1 var(--vah-sans) !important;
	letter-spacing: .02em !important;
	text-transform: none !important;
	text-decoration: none !important;
	transition: background-color 216ms var(--vah-ease);
}
html body .va-hero a.va-hero__pill:hover { background: var(--vah-saffron-deep) !important; }
html body .va-hero a.va-hero__quiet {
	font: 300 16px/24px var(--vah-sans) !important;
	color: var(--vah-gold) !important;
	-webkit-text-fill-color: var(--vah-gold) !important;
	text-decoration: none !important;
	border-bottom: 1px solid var(--vah-line) !important;
	transition: border-color 216ms var(--vah-ease);
}
html body .va-hero a.va-hero__quiet:hover { border-bottom-color: var(--vah-gold) !important; }

html body .va-hero .va-hero__art { margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; align-items: center; gap: 18px; min-width: 0; }
html body .va-hero .va-hero__box { position: relative; width: 432px; max-width: 100%; aspect-ratio: 4 / 5; perspective: 1296px; }
html body .va-hero .va-hero__tilt { position: absolute; inset: 0; will-change: transform; }
html body .va-hero .va-hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
html body .va-hero .va-hero__still { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity 432ms var(--vah-ease); }
html body .va-hero .va-hero__still img {
	display: block;
	max-width: 100% !important;
	max-height: 100%;
	width: auto !important;
	height: auto !important;
	box-sizing: border-box;
	padding: 24px;
	background: var(--vah-cream);
	outline: 1px solid var(--vah-line);
	outline-offset: -12px;
	border-radius: 0 !important;
}
html body .va-hero.is-gl .va-hero__still { opacity: 0; pointer-events: none; }

html body .va-hero .va-hero__caption { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; margin: 0; padding: 0; }
html body .va-hero .va-hero__cap { display: flex; flex-direction: column; align-items: center; transition: opacity 432ms var(--vah-ease); }
html body .va-hero .va-hero__cap.is-out { opacity: 0; }
html body .va-hero a.va-hero__name {
	font: italic 400 18px/24px var(--vah-serif) !important;
	color: var(--vah-ink) !important;
	-webkit-text-fill-color: var(--vah-ink) !important;
	text-decoration: none !important;
	border: 0 !important;
}
html body .va-hero a.va-hero__name:hover { color: var(--vah-gold) !important; -webkit-text-fill-color: var(--vah-gold) !important; }
html body .va-hero .va-hero__series { font: 300 14px/24px var(--vah-sans) !important; color: var(--vah-muted) !important; }
html body .va-hero .va-hero__controls { display: flex; align-items: center; }
html body .va-hero .va-hero__controls button {
	display: grid !important;
	place-items: center;
	width: 36px !important;
	height: 36px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: var(--vah-gold) !important;
	cursor: pointer;
}
html body .va-hero .va-hero__dot::before {
	content: "";
	width: 7px;
	height: 7px;
	transform: rotate(45deg);
	border: 1px solid var(--vah-saffron);
	background: transparent;
	transition: background-color 216ms var(--vah-ease);
}
html body .va-hero .va-hero__dot[aria-pressed="true"]::before { background: var(--vah-saffron); }
html body .va-hero .va-hero__dot:hover::before { background: var(--vah-line); }
html body .va-hero .va-hero__dot[aria-pressed="true"]:hover::before { background: var(--vah-saffron); }
html body .va-hero .va-hero__pause svg { width: 14px; height: 14px; }
html body .va-hero :focus-visible { outline: 2px solid var(--vah-gold); outline-offset: 3px; border-radius: 3px; }

html body .va-hero .va-hero__thread {
	position: absolute;
	left: 50%;
	bottom: -72px;
	z-index: 3;
	width: 1px;
	height: 144px;
	margin-left: -.5px;
	background: linear-gradient(to bottom, rgba(249, 161, 29, 0), var(--vah-line) 50%, var(--vah-line));
	pointer-events: none;
}

@media (max-width: 864px) {
	html body .va-hero .va-hero__wrap { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: 36px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); text-align: center; }
	html body .va-hero .va-hero__art { order: -1; }
	html body .va-hero .va-hero__box { width: min(300px, 100%); }
	html body .va-hero .va-hero__title { margin-inline: auto !important; font-size: 30px !important; line-height: 40px !important; }
	html body .va-hero .va-hero__actions { justify-content: center; }
	html body .va-hero .va-hero__still img { padding: 18px; outline-offset: -9px; }
	/* The next section's top padding is 72px here (54px on phones): the thread stops 36px (30px) short of its heading. */
	html body .va-hero .va-hero__thread { bottom: -36px; height: 108px; }
}
@media (max-width: 648px) {
	html body .va-hero .va-hero__wrap { padding-bottom: 72px; }
	html body .va-hero .va-hero__thread { bottom: -24px; height: 72px; }
}