*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}

body {
	margin: 0;
	background: var(--rpp-color-warm-white);
	color: var(--rpp-color-text);
	font-family: var(--rpp-font-sans);
	font-size: var(--rpp-fs-body);
	font-weight: 400;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	color: var(--rpp-color-gold);
}

:focus-visible {
	outline: 2px solid var(--rpp-color-focus);
	outline-offset: 3px;
}

.rpp-skip-link {
	position: absolute;
	left: var(--rpp-space-2);
	top: -100px;
	z-index: 1000;
	background: var(--rpp-color-gold);
	color: var(--rpp-color-charcoal);
	padding: var(--rpp-space-1) var(--rpp-space-2);
	font-weight: 600;
}

.rpp-skip-link:focus {
	top: var(--rpp-space-2);
}

.rpp-wrap {
	width: min(100% - 48px, var(--rpp-width-content));
	margin-inline: auto;
}

.rpp-wrap--wide {
	width: min(100% - 48px, var(--rpp-width-header));
}

.rpp-eyebrow {
	margin: 0 0 var(--rpp-space-2);
	color: var(--rpp-color-gold);
	font-family: var(--rpp-font-sans);
	font-size: var(--rpp-fs-eyebrow);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

h1,
h2,
h3,
.rpp-h1,
.rpp-h2,
.rpp-h3 {
	font-family: var(--rpp-font-serif);
	font-weight: 600;
	line-height: 1.15;
	margin: 0 0 var(--rpp-space-3);
	color: var(--rpp-color-text);
}

h1,
.rpp-h1 {
	font-size: var(--rpp-fs-h1);
}

h2,
.rpp-h2 {
	font-size: var(--rpp-fs-h2);
}

h3,
.rpp-h3 {
	font-size: var(--rpp-fs-h3);
}

p {
	margin: 0 0 var(--rpp-space-3);
}

.rpp-main {
	min-height: 50vh;
}

.rpp-page {
	padding: var(--rpp-space-7) 0;
}

.rpp-page__content {
	max-width: 760px;
}

.rpp-empty {
	padding: var(--rpp-space-6) var(--rpp-space-4);
	background: var(--rpp-color-surface);
	border: 1px solid var(--rpp-color-border);
	color: var(--rpp-color-text-muted);
	text-align: center;
}

.screen-reader-text,
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 768px) {
	.rpp-wrap,
	.rpp-wrap--wide {
		width: min(100% - 32px, var(--rpp-width-content));
	}
}
