nav {
	align-items: center;
	background-color: var(--primary);
	display: flex;
	justify-content: space-between;
	height: var(--navbar-h);
	padding-inline: 2rem;
	position: sticky;
	top: 0;
	transition: background-color .2s;
	z-index: 9;
}

nav.sticking {
	background-color: var(--primary-light);
}

nav > a {
	background: url('/assets/img/logo.svg') no-repeat;
	font-family: 'Libre Caslon Text', serif;
	font-size: 1.25rem;
	letter-spacing: -.02rem;
	line-height: 2rem;
	margin-inline-start: -12px;
	padding-inline-start: 56px;
	text-transform: capitalize;
}

nav menu {
	align-items: center;
	display: flex;
	flex-direction: row;
	gap: 16px 32px;
	list-style: none;
	margin: 0;
}

nav menu li {
	display: contents;
}

nav menu a[aria-current="page"] {
	position: relative;
}

nav menu a[aria-current="page"]::after {
	background-color: var(--secondary-light);
	border-radius: var(--ri);
	bottom: -4px;
	content: '';
	height: 2px;
	left: 8px;
	position: absolute;
	width: calc(100% - 16px);
}

nav	button {
	align-items: center;
	background: #0000;
	border: none;
	box-sizing: content-box;
	color: inherit;
	display: none;
	height: 24px;
	margin: -16px;
	padding: 16px;
	width: 24px;
}
nav	button::before, nav	button::after {
	background-color: currentColor;
	content: '';
	grid-area: 1 / 1;
	height: 2px;
	transition: transform .2s;
	transform-origin: center;
	width: 24px;
}
nav	button::before { transform: translateY(-4px) }
nav	button::after { transform: translateY(4px) }
nav	button:has(+ menu[aria-expanded="true"])::before { transform: rotate(-30deg) }
nav	button:has(+ menu[aria-expanded="true"])::after { transform: rotate(30deg) }

body:has(menu[aria-expanded="true"]) {
	overflow: hidden;
}
body:has(menu[aria-expanded="true"]) :not(nav, nav *) {
	pointer-events: none;
	user-select: none;
}

@media (width < 60rem) {
	nav menu {
		background: inherit;
		flex-direction: column;
		gap: 16px 32px;
		left: 0;
		list-style: none;
		margin: 0;
		padding: 16px 0 32px;
		position: absolute;
		top: var(--navbar-h);
		transition: transform .3s cubic-bezier(.3, 0, .2, 1);
		translate: 0 -100%;
		width: 100%;
		z-index: -1;
	}

	nav menu a {
		font-size: 1.125rem;
		font-weight: 250;
		letter-spacing: .03rem;
	}

	nav button {
		display: grid;
	}

	nav::before,
	nav::after {
		content: '';
		position: fixed;
		z-index: -1;
	}

	nav::before {
		backdrop-filter: blur(0);
		background-color: #3230;
		inset: 0;
		pointer-events: none;
		top: var(--navbar-h);
		transition: backdrop-filter .5s, background-color .5s;
	}

	nav:has(menu[aria-expanded="true"])::before {
		backdrop-filter: blur(20px);
		background-color: #3232;
	}

	nav::after {
		background: inherit;
		height: var(--navbar-h);
		inset: 0;
		top: 0;
		transition: background-color .5s;
	}
}

footer {
	background-color: var(--primary-dark);
	gap: 32px 24px;
	display: grid;
	grid-template-columns: 3fr 2fr 2fr;
	margin-block-start: auto;
	padding: 32px max(calc(50% - 592px), 32px) 48px;
}

footer section {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	flex-direction: column;
}

footer .logo {
	font: 400 1.5rem / 1em 'Libre Caslon Text', serif;
	margin: 0;
}

footer .logo img {
	display: block;
	margin: 0 0 16px;
	min-height: 0;
	min-width: 0;
	width: 72px;
}

footer strong {
	font-size: .875rem;
	letter-spacing: .0625rem;
	text-transform: uppercase;
}

@media (width < 50rem) {
	footer {
		grid-template-columns: repeat(auto-fill, minmax(min(20ch, 100%), 1fr));
	}

	footer section:first-child {
		grid-column: 1 / -1;
	}
}