:root {
	--roj-color-black: #080505;
	--roj-color-wine: #310006;
	--roj-color-wine-light: #5a0712;
	--roj-color-gold: #c9a46a;
	--roj-color-gold-light: #e1c18b;
	--roj-color-cream: #f0e4cf;
	--roj-color-white: #ffffff;
	--roj-color-muted: #b9ada4;
	--roj-font-display: "Bodoni 72", Didot, "Times New Roman", serif;
	--roj-font-body: Inter, "Helvetica Neue", Arial, sans-serif;
	--roj-container: 82.5rem;
	--roj-header-height: 5.5rem;
	--roj-transition: 220ms ease;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--roj-color-black);
	color: var(--roj-color-cream);
	font-family: var(--roj-font-body);
	font-size: 1rem;
	line-height: 1.7;
	text-rendering: optimizeLegibility;
}

body.roj-menu-open {
	overflow: hidden;
}

img,
video {
	display: block;
	height: auto;
	max-width: 100%;
}

button,
input,
select,
textarea {
	font: inherit;
}

a {
	color: inherit;
	text-decoration-thickness: 0.0625rem;
	text-underline-offset: 0.25em;
}

a,
button,
input,
select,
textarea {
	transition:
		border-color var(--roj-transition),
		color var(--roj-transition),
		background-color var(--roj-transition),
		opacity var(--roj-transition),
		transform var(--roj-transition);
}

:focus-visible {
	outline: 0.125rem solid var(--roj-color-gold-light);
	outline-offset: 0.25rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-block: 0 0.6em;
	color: var(--roj-color-white);
	font-family: var(--roj-font-display);
	font-weight: 400;
	letter-spacing: 0.025em;
	line-height: 1.08;
}

h1 {
	font-size: clamp(3rem, 8vw, 7.75rem);
}

h2 {
	font-size: clamp(2.25rem, 5vw, 5rem);
}

p {
	margin-block: 0 1.25rem;
}

.roj-container {
	margin-inline: auto;
	max-width: var(--roj-container);
	padding-inline: clamp(1.25rem, 4vw, 3.5rem);
	width: 100%;
}

.roj-eyebrow {
	align-items: center;
	color: var(--roj-color-gold-light);
	display: flex;
	font-size: 0.72rem;
	font-weight: 600;
	gap: 0.8rem;
	letter-spacing: 0.22em;
	margin-bottom: 1.2rem;
	text-transform: uppercase;
}

.roj-eyebrow::before {
	background: currentColor;
	content: "";
	height: 0.0625rem;
	width: 2.5rem;
}

.roj-button,
.roj-add-to-cart,
.woocommerce a.button,
.woocommerce button.button {
	align-items: center;
	background: var(--roj-color-gold);
	border: 0.0625rem solid var(--roj-color-gold);
	border-radius: 0;
	color: var(--roj-color-black);
	cursor: pointer;
	display: inline-flex;
	font-size: 0.75rem;
	font-weight: 700;
	justify-content: center;
	letter-spacing: 0.15em;
	min-height: 3.25rem;
	padding: 0.75rem 1.8rem;
	text-decoration: none;
	text-transform: uppercase;
}

.roj-button:hover,
.roj-add-to-cart:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background: var(--roj-color-gold-light);
	border-color: var(--roj-color-gold-light);
	transform: translateY(-0.125rem);
}

.roj-button--ghost {
	background: transparent;
	color: var(--roj-color-white);
}

.roj-button--ghost:hover {
	background: rgba(8, 5, 5, 0.45);
	color: var(--roj-color-gold-light);
}

.roj-text-link {
	border-bottom: 0.0625rem solid var(--roj-color-gold);
	color: var(--roj-color-gold-light);
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	padding-bottom: 0.3rem;
	text-decoration: none;
	text-transform: uppercase;
}

.roj-text-link:hover {
	color: var(--roj-color-white);
}

.roj-placeholder {
	background:
		radial-gradient(circle at 50% 38%, rgba(201, 164, 106, 0.2), transparent 12%),
		linear-gradient(135deg, #12090a 0%, #3b090f 48%, #090506 100%);
	overflow: hidden;
	position: relative;
}

.roj-placeholder::before,
.roj-placeholder::after {
	border: 0.0625rem solid rgba(201, 164, 106, 0.28);
	content: "";
	inset: 12%;
	position: absolute;
	transform: rotate(45deg);
}

.roj-placeholder::after {
	inset: 22%;
	transform: rotate(-45deg);
}

#primary:not(.roj-front-page) {
	margin-inline: auto;
	max-width: var(--roj-container);
	min-height: 55vh;
	padding: clamp(7rem, 12vw, 11rem) clamp(1.25rem, 4vw, 3.5rem) 5rem;
}

.widget-area {
	margin-inline: auto;
	max-width: var(--roj-container);
	padding: 2rem clamp(1.25rem, 4vw, 3.5rem) 5rem;
}

.screen-reader-text {
	clip: rect(0.0625rem, 0.0625rem, 0.0625rem, 0.0625rem);
	clip-path: inset(50%);
	height: 0.0625rem;
	overflow: hidden;
	position: absolute !important;
	width: 0.0625rem;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background: var(--roj-color-white);
	clip: auto !important;
	clip-path: none;
	color: var(--roj-color-black);
	display: block;
	height: auto;
	left: 1rem;
	padding: 1rem;
	top: 1rem;
	width: auto;
	z-index: 100000;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}