.roj-home-showcase {
	--roj-showcase-gap: 0.4rem;
	display: grid;
	gap: var(--roj-showcase-gap);
	grid-template-columns: minmax(0, 1fr);
	padding-block: var(--roj-showcase-gap) 1.5rem;
	perspective: 120rem;
}

.roj-section-density--compact .roj-home-showcase {
	--roj-showcase-gap: 0.2rem;
}

.roj-section-density--editorial .roj-home-showcase {
	--roj-showcase-gap: 0.6rem;
	padding-block: 0.6rem 2rem;
}

.roj-featured-product {
	background:
		radial-gradient(circle at 15% 30%, rgba(90, 7, 18, 0.42), transparent 35%),
		var(--roj-color-black);
	padding-block: clamp(5rem, 10vw, 10rem);
}

.roj-home-showcase > .roj-featured-product {
	grid-column: 1 / -1;
	grid-row: auto;
	height: 100%;
	min-width: 0;
	order: 2;
	padding: 0;
	width: 100%;
}

.roj-home-showcase > .roj-story-section {
	min-width: 0;
	order: 1;
	width: 100%;
}

.roj-home-showcase > .roj-featured-product:only-child {
	grid-column: 1 / -1;
}

.roj-home-showcase > .roj-featured-product > .roj-container {
	height: 100%;
	padding-inline: 0;
}

.roj-home-showcase .roj-featured-product__grid,
.roj-home-showcase .roj-featured-product__empty {
	align-content: start;
	gap: 0;
	grid-template-columns: 1fr;
	height: 100%;
	padding: 0.5rem;
}

.roj-home-showcase .roj-product-gallery__main,
.roj-home-showcase .roj-product-placeholder {
	aspect-ratio: 4 / 5;
	max-height: 48rem;
}

.roj-featured-product__grid,
.roj-featured-product__empty {
	align-items: center;
	display: grid;
	gap: clamp(3rem, 8vw, 8rem);
	grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 0.9fr);
}

.roj-featured-product__empty {
	border-block: 0.0625rem solid rgba(201, 164, 106, 0.25);
	padding-block: clamp(3rem, 6vw, 6rem);
}

.roj-product-placeholder {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	width: 100%;
}

.roj-product-placeholder__picture,
.roj-product-placeholder__picture img {
	height: 100%;
	width: 100%;
}

.roj-product-placeholder__picture img {
	object-fit: cover;
}

.roj-product-gallery__main {
	aspect-ratio: 4 / 5;
	background: linear-gradient(150deg, rgba(49, 0, 6, 0.7), rgba(8, 5, 5, 0.3));
	overflow: hidden;
}

.roj-product-gallery__image {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.roj-product-gallery__main > picture,
.roj-product-gallery__main > picture img {
	height: 100%;
	width: 100%;
}

.roj-product-gallery__main > picture img {
	object-fit: cover;
}

.roj-product-gallery__thumbs {
	display: flex;
	gap: 0.75rem;
	margin-top: 0.75rem;
	overflow-x: auto;
	padding-bottom: 0.5rem;
}

.roj-product-gallery__thumbs button {
	background: transparent;
	border: 0.0625rem solid rgba(201, 164, 106, 0.25);
	cursor: pointer;
	flex: 0 0 4.5rem;
	height: 5.5rem;
	padding: 0;
}

.roj-product-gallery__thumbs button.is-active {
	border-color: var(--roj-color-gold-light);
}

.roj-product-gallery__thumbs img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.roj-product-summary h2 {
	max-width: 12ch;
}

.roj-product-summary__description {
	color: var(--roj-color-muted);
	max-width: 36rem;
}

.roj-product-meta {
	border-block: 0.0625rem solid rgba(201, 164, 106, 0.2);
	display: grid;
	margin-block: 2rem;
	padding-block: 1rem;
}

.roj-product-meta > div {
	display: grid;
	font-size: 0.78rem;
	grid-template-columns: 7rem 1fr;
	padding-block: 0.35rem;
}

.roj-product-meta dt {
	color: var(--roj-color-gold-light);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.roj-product-meta dd {
	margin: 0;
}

.roj-story-section {
	background: var(--roj-section-bg, var(--roj-color-wine));
	color: var(--roj-section-text, var(--roj-color-cream));
	min-height: 0;
	overflow: hidden;
	position: relative;
}

.roj-story-section:nth-child(even) {
	--roj-section-bg: var(--roj-color-black);
}

.roj-story-section__inner {
	align-items: stretch;
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding-inline: 0;
}

.roj-home-showcase .roj-story-section__inner {
	grid-template-columns: minmax(0, 1fr);
	height: 100%;
}

.roj-story-section__media {
	min-height: 38rem;
	overflow: hidden;
}

.roj-home-showcase .roj-story-section__media {
	min-height: clamp(16rem, 24vw, 24rem);
}

.roj-story-section__picture,
.roj-story-section__picture img {
	height: 100%;
	width: 100%;
}

.roj-story-section__picture img {
	object-fit: cover;
	transition: transform 900ms cubic-bezier(0.2, 0.75, 0.2, 1), filter 500ms ease;
}

.roj-story-section__content {
	align-self: center;
	padding: clamp(4rem, 9vw, 9rem);
}

.roj-home-showcase .roj-story-section__content {
	order: 1;
	padding: 1.5rem 1.25rem 1.75rem;
}

.roj-home-showcase .roj-story-section__content h2 {
	font-size: clamp(1.7rem, 3vw, 3.1rem);
}

.roj-home-showcase .roj-story-section__description {
	font-size: 0.85rem;
	line-height: 1.65;
}

.roj-story-section__content h2 {
	color: inherit;
	max-width: 10ch;
}

.roj-story-section__description {
	color: color-mix(in srgb, currentColor 75%, transparent);
	max-width: 35rem;
}

.roj-story-section--right .roj-story-section__media {
	order: 2;
}

.roj-home-showcase .roj-story-section--right .roj-story-section__media {
	order: 0;
}

.roj-story-section--small .roj-story-section__media {
	min-height: 28rem;
}

.roj-story-section--large .roj-story-section__media {
	min-height: 50rem;
}

.roj-home-showcase .roj-story-section--small .roj-story-section__media,
.roj-home-showcase .roj-story-section--large .roj-story-section__media {
	min-height: clamp(16rem, 24vw, 24rem);
}

/*
 * Homepage layout is mobile-first. Two columns are enabled only when there is
 * enough desktop space, so missing or delayed responsive styles cannot leave a
 * narrow viewport in the desktop grid.
 */
@media (min-width: 62rem) {
	.roj-home-showcase {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		padding-block: var(--roj-showcase-gap) clamp(4rem, 8vw, 8rem);
	}

	.roj-section-density--editorial .roj-home-showcase {
		--roj-showcase-gap: 1.25rem;
		padding-block: 1.25rem clamp(6rem, 12vw, 12rem);
	}

	.roj-home-showcase > .roj-featured-product {
		grid-column: auto;
		grid-row: span 3;
		order: initial;
	}

	.roj-home-showcase > .roj-story-section {
		order: initial;
	}

	.roj-home-showcase .roj-featured-product__grid,
	.roj-home-showcase .roj-featured-product__empty {
		gap: clamp(2rem, 4vw, 4rem);
		padding: clamp(1.25rem, 3vw, 2.75rem);
	}

	.roj-home-showcase .roj-story-section__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.roj-home-showcase .roj-story-section__content {
		order: initial;
		padding: clamp(1.75rem, 3.2vw, 3.5rem);
	}

	.roj-home-showcase .roj-story-section--right .roj-story-section__media {
		order: 2;
	}
}

/* Responsive 3D experience. */
.roj-depth-card {
	--roj-rotate-x: 0deg;
	--roj-rotate-y: 0deg;
	--roj-reveal-y: 0rem;
	--roj-depth-z: 1.6rem;
	position: relative;
	transform-origin: center;
}

.roj-js .roj-3d-enabled .roj-depth-card {
	opacity: 0;
	transform:
		perspective(100rem)
		translate3d(0, var(--roj-reveal-y, 2rem), 0)
		rotateX(var(--roj-rotate-x))
		rotateY(var(--roj-rotate-y));
	transform-style: preserve-3d;
	transition:
		transform 500ms cubic-bezier(0.2, 0.75, 0.2, 1),
		opacity 650ms ease,
		box-shadow 500ms ease;
	will-change: transform;
}

.roj-js .roj-3d-enabled .roj-depth-card.is-in-view {
	--roj-reveal-y: 0rem;
	opacity: 1;
}

.roj-js .roj-3d-enabled .roj-depth-card::after {
	background: radial-gradient(
		circle at var(--roj-light-x, 50%) var(--roj-light-y, 50%),
		rgba(225, 193, 139, 0.14),
		transparent 34%
	);
	content: "";
	inset: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transform: translateZ(calc(var(--roj-depth-z) + 0.2rem));
	transition: opacity 350ms ease;
	z-index: 4;
}

.roj-js .roj-3d-enabled .roj-depth-card:hover::after,
.roj-js .roj-3d-enabled .roj-depth-card.is-touch-active::after {
	opacity: 1;
}

.roj-js .roj-3d-enabled .roj-depth-media {
	transform: translateZ(var(--roj-depth-z));
	transform-style: preserve-3d;
}

.roj-js .roj-3d-enabled .roj-depth-card .roj-product-summary,
.roj-js .roj-3d-enabled .roj-depth-card .roj-story-section__content {
	position: relative;
	transform: translateZ(calc(var(--roj-depth-z) * 0.7));
	z-index: 2;
}

.roj-js .roj-3d-enabled .roj-depth-card:hover .roj-story-section__picture img,
.roj-js .roj-3d-enabled .roj-depth-card.is-touch-active .roj-story-section__picture img {
	filter: saturate(1.08) contrast(1.04);
	transform: scale(1.035);
}

.roj-motion-intensity--subtle .roj-depth-card {
	--roj-depth-z: 0.75rem;
}

.roj-motion-intensity--cinematic .roj-depth-card {
	--roj-depth-z: 2.5rem;
}

.roj-js .roj-motion-intensity--cinematic.roj-3d-enabled .roj-depth-card {
	transition-duration: 700ms;
}

.roj-surface-style--framed .roj-depth-card {
	border: 0.0625rem solid rgba(201, 164, 106, 0.46);
	box-shadow:
		inset 0 0 0 0.3rem rgba(8, 5, 5, 0.55),
		inset 0 0 0 0.36rem rgba(201, 164, 106, 0.16),
		0 1.5rem 4rem rgba(0, 0, 0, 0.28);
}

.roj-surface-style--glass .roj-depth-card {
	backdrop-filter: blur(0.8rem);
	background: linear-gradient(145deg, rgba(90, 7, 18, 0.72), rgba(8, 5, 5, 0.86));
	border: 0.0625rem solid rgba(225, 193, 139, 0.22);
	box-shadow: 0 1.8rem 5rem rgba(0, 0, 0, 0.36);
}

.roj-surface-style--clean .roj-depth-card {
	border: 0;
	box-shadow: none;
}