:root {
	--paper: #f7f3ec;
	--surface: #fbf8f3;
	--sand: #efe7da;
	--line: #ddd0bc;
	--line-soft: #e4daca;
	--accent: #b8442a;
	--accent-hover: #8f3320;
	--ink: #1c1917;
	--muted: #57504a;
	--quiet: #8a8177;
	--dark: #211d1a;
	--success-bg: #e5ead8;
	--success-border: #c8d2b2;
	--success: #3f4a2c;
	--error: #a5301b;
	--gutter: clamp(1.25rem, 4vw, 4rem);
	--section-space: clamp(3.5rem, 7vw, 6.5rem);
	--serif: 'Prata', serif;
	--sans: 'Manrope', system-ui, sans-serif;
	font-family: var(--sans);
	font-synthesis: none;
	color: var(--ink);
	background: var(--paper);
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 5.5rem;
}

body {
	margin: 0;
	min-width: 320px;
	background: var(--paper);
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
}

body:has(dialog[open]) {
	overflow: hidden;
}

button,
input,
select {
	font: inherit;
}

button,
a {
	-webkit-tap-highlight-color: transparent;
}

a {
	color: inherit;
}

img {
	display: block;
	max-width: 100%;
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

.container {
	width: min(100%, 90rem);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

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

@keyframes fade-up {
	from {
		opacity: 0;
		transform: translateY(1.125rem);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes frame-in {
	from {
		opacity: 0;
		transform: translateY(1.625rem) scale(0.97);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes carousel {
	to {
		transform: translate3d(-50%, 0, 0);
	}
}

@keyframes booth-flash {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

@keyframes strip-pulse {
	0% {
		box-shadow:
			0 0 0 0 rgb(98 112 68 / 65%),
			0 2rem 3rem rgb(33 29 26 / 20%);
	}
	70% {
		box-shadow:
			0 0 0 8px rgb(98 112 68 / 0%),
			0 2rem 3rem rgb(33 29 26 / 20%);
	}
	100% {
		box-shadow:
			0 0 0 0 rgb(98 112 68 / 0%),
			0 2rem 3rem rgb(33 29 26 / 20%);
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	/* The photo booth feed replaces its marquee with a plain scroller. Jaspr's
	   typed media queries cannot express prefers-reduced-motion, so these
	   component rules live here rather than in the component's @css block. */
	.photobooth .feed-wrap {
		overflow-x: auto;
		mask-image: none;
	}

	.photobooth .strip-track {
		animation: none;
	}

	.photobooth .strip-set[aria-hidden='true'] {
		display: none;
	}

	.photobooth .strip-card.just-added {
		animation: none;
		box-shadow: 0 0 0 2px var(--accent);
	}
}