:root {
	--color-background: #ffffff;
	--color-foreground: #1a1a1a;
	--color-primary: #de3707;
	--font-body: "Jost", sans-serif;
	--font-heading: "Saira Condensed", sans-serif;
	--spacing-outer: max(1.25rem, 4vw);
	--spacing-large: clamp(2.5rem, 8vw, 6rem);
}

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

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background-color: var(--color-background);
	color: var(--color-foreground);
	font-family: var(--font-body);
	font-size: clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.208), 1rem);
	font-weight: 400;
	line-height: 1.6;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25ch;
}

a:hover,
a:focus {
	text-decoration-style: dashed;
}

a:active {
	text-decoration: none;
}

.site {
	padding-left: var(--spacing-outer);
	padding-right: var(--spacing-outer);
}

.site-header {
	padding: clamp(1.5rem, 5vw, 2rem) 0;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	text-decoration: none;
	color: inherit;
}

.brand:hover,
.brand:focus {
	text-decoration: none;
}

.brand img {
	width: 120px;
	height: auto;
	max-width: 100%;
	filter: url(#logo-duotone);
}

.site-name {
	font-family: var(--font-heading);
	font-size: clamp(1.125rem, 0.07rem + ((1vw - 3.2px) * 1.966), 1.25rem);
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
}

.site-main {
	padding-top: var(--spacing-large);
	padding-bottom: var(--spacing-large);
	max-width: 42rem;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.site-main h1 {
	margin: 0 0 1rem;
	font-family: var(--font-heading);
	font-size: clamp(3rem, 3rem + ((1vw - 0.2rem) * 1.25), 3.75rem);
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
	text-wrap: balance;
}

.site-main p {
	margin: 0 0 1rem;
}

.instagram-link {
	display: inline-block;
	margin: 0.5rem 0 1rem;
	line-height: 0;
}

.instagram-link img {
	width: 64px;
	height: 64px;
	vertical-align: bottom;
}

.site-footer {
	padding: clamp(2.5rem, 8vw, 4rem) 0 clamp(2.5rem, 8vw, 6rem);
	text-align: center;
}

.site-footer p {
	margin: 0;
	font-family: var(--font-heading);
	font-size: clamp(1.125rem, 0.07rem + ((1vw - 3.2px) * 1.966), 1.25rem);
	font-weight: 400;
	line-height: 1.15;
}