:root {
	--paper: #fbfaf6;
	--ink: #252522;
	--yellow: #fec73e;
	--muted: #6a6a63;
	--line: #e6e5de;
	font-family: 'Manrope', 'Segoe UI', sans-serif;
	font-synthesis: none;
	color: var(--ink);
	background: var(--paper);
	scrollbar-gutter: stable;
}

* {
	box-sizing: border-box;
}

body,
h1,
h2,
h3,
p {
	margin: 0;
}

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

.container {
	width: min(1200px, calc(100% - 96px));
	margin-inline: auto;
}

.header {
	border-bottom: 1px solid var(--line);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.eyebrow {
	display: flex;
	align-items: center;
	gap: 9px;
	font-weight: 800;
	letter-spacing: 1.5px;
}

.eyebrow > span {
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: var(--yellow);
	transform: rotate(-10deg);
}

h1 {
	font-family: 'Arsenal', sans-serif;
	font-style: italic;
	font-weight: 700;
}

h1 > span {
	position: relative;
	z-index: 0;
	white-space: nowrap;
}

h1 > span::after {
	position: absolute;
	z-index: -1;
	height: 18%;
	border-radius: 3px;
	background: var(--yellow);
	content: '';
	transform: rotate(-1.5deg);
}

.description {
	color: var(--muted);
}

.footer {
	border-top: 1px solid var(--line);
}

.footer-inner {
	display: flex;
	justify-content: space-between;
	color: var(--muted);
}

@media (max-width: 1100px) {
	.container {
		width: calc(100% - 64px);
	}
}

@media (max-width: 600px) {
	.container {
		width: calc(100% - 40px);
	}
}

@media (max-width: 360px) {
	.container {
		width: calc(100% - 32px);
	}
}