.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
}

.site-header {
	color: var(--ink);
	background: var(--banner-paper);
	border-bottom: 1px solid rgba(39, 40, 35, .08)
}

.hero-carousel {
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 116px 2.35vw 34px;
	background: var(--banner-paper);
	color: var(--ink)
}

.carousel-viewport {
	width: min(calc(100vw - 72px), 1435px);
	aspect-ratio: 1435/887;
	height: auto;
	margin: 0 auto;
	overflow: hidden;
	background: #d8d4ca;
	cursor: grab;
	touch-action: pan-y
}

.carousel-viewport:active,
.carousel-viewport.is-dragging {
	cursor: grabbing
}

.carousel-track {
	height: 100%;
	display: flex;
	transition: transform .78s cubic-bezier(.22, .67, .16, 1);
	will-change: transform
}

.carousel-track.is-dragging {
	transition: none
}

.carousel-slide {
	width: 100%;
	height: 100%;
	min-width: 100%;
	margin: 0;
	user-select: none
}

.carousel-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none
}

.carousel-controls {
	width: min(calc(100vw - 72px), 1435px);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 20px;
	padding: 20px 7px 0
}

.carousel-controls button {
	appearance: none;
	border: 0;
	padding: 0;
	background: transparent;
	color: var(--ink);
	font: 300 17px/1 Georgia, "Times New Roman", serif;
	cursor: pointer
}

.carousel-controls button:not(.carousel-count) {
	width: 16px;
	font-size: 16px;
	transition: transform .2s
}

.carousel-controls button:not(.carousel-count):hover {
	transform: translateX(3px)
}

.carousel-controls [data-carousel-prev]:hover {
	transform: translateX(-3px)
}

.carousel-count {
	margin-right: 6px;
	letter-spacing: .08em
}

.carousel-count b,
.carousel-count em {
	font-weight: 400;
	font-style: normal
}

.carousel-count span {
	margin: 0 3px;
	color: #7d7c75
}

@media(max-width:740px) {
	.site-header {
		background: var(--banner-paper)
	}

	.hero-carousel {
		padding: 84px 12px 20px
	}

	.carousel-viewport,
	.carousel-controls {
		width: 100%
	}

	.carousel-viewport {
		min-height: 0
	}

	.carousel-controls {
		padding: 16px 4px 0;
		gap: 16px
	}

	.carousel-controls button {
		font-size: 15px
	}
}