:root {
	color-scheme: dark;
	background: var(--rv-color-neutral-0);
	color: var(--rv-font-color-normal);
	font-family: var(--rv-font-sans);
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	min-inline-size: 280px;
	min-block-size: 100svh;
}

header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rv-spacing-2x-large);
	padding: var(--rv-spacing-x-large) var(--rv-spacing-2x-large);
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
	text-underline-offset: var(--rv-spacing-3x-small);
}

a:focus-visible,
.gallery:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: var(--rv-spacing-x-small);
}

.wordmark {
	display: flex;
	align-items: center;
	min-block-size: 40px;
}

.wordmark svg {
	display: block;
	inline-size: 96px;
}

nav {
	display: flex;
	gap: var(--rv-spacing-3x-large);
	font-size: var(--rv-font-size-x-large);
	font-weight: 500;
}

nav a {
	display: flex;
	align-items: center;
	min-block-size: 40px;
}

.hero {
	padding: clamp(40px, 7svh, 88px) var(--rv-spacing-x-large) clamp(56px, 8svh, 104px);
	text-align: center;
}

.hero h1,
.hero p {
	margin: 0;
	font-family: var(--rv-font-display);
	font-size: clamp(32px, 3.3vw, 56px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: var(--rv-letter-spacing-display-4x-large);
}

.hero p {
	margin-block-start: var(--rv-spacing-small);
	color: var(--rv-color-gray-500);
}

.gallery {
	display: flex;
	gap: var(--rv-spacing-medium);
	block-size: clamp(360px, 56svh, 800px);
	padding-inline: var(--rv-spacing-medium);
	padding-block-end: var(--rv-spacing-4x-large);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
}

.gallery img {
	flex: 0 0 auto;
	block-size: 100%;
	inline-size: auto;
	border-radius: var(--rv-border-radius-medium);
	scroll-snap-align: center;
}

@media (max-width: 600px) {
	header {
		padding: var(--rv-spacing-medium) var(--rv-spacing-x-large);
	}

	nav {
		gap: var(--rv-spacing-x-large);
		font-size: var(--rv-font-size-medium);
	}

	.wordmark svg {
		inline-size: 80px;
	}

	.hero {
		padding-block: var(--rv-spacing-4x-large);
	}

	.hero h1,
	.hero p {
		font-size: clamp(24px, 6.8vw, 40px);
	}
}