/* Cleat typography
----------------------------------------------------------------------------- */
body {
	font-size: var(--font-size-3);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

section {
	padding: 7% 5%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	letter-spacing: var(--letter-spacing-4);
	line-height: var(--line-height-1);
	margin-block-end: var(--space-3);
	text-wrap: balance;
}

h1,
.h1 {
	font-size: var(--font-size-9);
}

h2,
.h2 {
	font-size: var(--font-size-8);
}

h3,
.h3 {
	font-size: var(--font-size-7);
}

h4,
.h4 {
	font-size: var(--font-size-6);
}

h5,
.h5 {
	font-size: var(--font-size-5);
}

h6,
.h6 {
	font-size: var(--font-size-4);
}

p,
ul,
ol,
dl,
blockquote,
table,
details {
	margin-block-end: var(--space-6);
	line-height: var(--line-height);
	font-size: inherit;
	color: var(--black-5);
}

.kicker {
	display: inline-block;
	font-size: var(--font-size-3);
	letter-spacing: var(--letter-spacing-4);
	color: var(--yellow);
	font-weight: 700;
	margin-block-end: var(--space-2);
}

a:not([class]) {
	text-decoration-skip-ink: auto;
	color: currentColor;
}

li {
	margin-block: var(--space-4);
}

hr {
	margin-block: var(--hr-margin);
	border: none;
	border-top: 1px solid var(--hr-color);
}

kbd {
	border: 1px solid rgb(0 0 0 / .2);
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
	border-radius: 3px;
	padding: 1px 5px;
	font-weight: 700;
	background: linear-gradient(to bottom, white, ghostwhite);
}

table {
	width: 100%;

	th {
		text-align: left;
	}
}

nav ul {
	list-style: none;
	padding: 0;
}

/* Typography utility classes
----------------------------------------------------------------------------- */
.small {
	font-size: var(--font-size-1);
}

.meta {
	font-size: var(--font-size-2);
}

.p {
	font-size: var(--font-size-3);
}

.intro {
	font-size: var(--font-size-4);
}

.display {
	font-size: var(--font-size-10);
}

/* Variables
----------------------------------------------------------------------------- */
:root {
	font-family: var(--font-inter);
}

/* Site header
----------------------------------------------------------------------------- */
header {
	background: var(--header-bg);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	height: 80px;
	border-bottom: 1px solid var(--hr-color);
	position: sticky;
	top: 0;
	width: 100%;
	z-index: 50;
}

.header__flex {
	padding-inline: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
}

.header__logo {
	display: flex;
	justify-content: center;
	align-items: center;
	column-gap: 16px;
	text-decoration: none;
	color: var(--body-color);
}

.header__logo svg,
.header__logo img {
	width: var(--space-9);
	height: auto;
}

.header__logo span {
	diplay: block;
	color: var(--body-color);
	font-weight: 700;
}

.header__button {
	display: block;
	color: var(--nav-link);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: var(--letter-spacing-4);
	text-decoration: none;
	padding: var(--space-3) var(--space-5);
	border-radius: var(--border-radius-6);
	background: transparent;
	border: none;
	transition-property: color, background;
	transition-duration: 300ms;
}

.header__button:hover {
	color: var(--body-color);
	background: var(--button-bg-hover);
}

#menu-open {
	font-size: 24px;
	padding: 8px 14px 9px;
	line-height: 1;
}

#menu-close {
	display: none;
	font-size: 24px;
	padding: 8px 14px 9px;
	line-height: 1;
	position: fixed;
	top: 16px;
	right: 16px;
}

/* Page layout
----------------------------------------------------------------------------- */
.layout {
	display: flex;
	width: 100%;
}

.nav-primary {
	flex-shrink: 0;
	height: 100dvh;
	width: 18%;
}

.nav-primary nav {
	position: fixed;
	overflow-y: scroll;
	overscroll-behavior: contain;
	height: calc(100dvh - 80px);
	width: 18%;
	padding: 80px 10px 80px 100px;
	padding: 4% 10px 4% 5%;
}

.content {
	flex: 1 1 0%;
	padding: 80px 0;
	padding: 4% 5%;
	width: 100%;
	min-width: 300px;
	max-width: 1000px;
	margin-inline: auto;
}

.nav-secondary {
	flex-shrink: 0;
	height: 100dvh;
	width: 18%;
}

.nav-secondary nav {
	position: fixed;
	overflow-y: scroll;
	overscroll-behavior: contain;
	height: calc(100dvh - 80px);
	width: 18%;
	padding: 80px 10px 80px 100px;
	padding: 4% 10px 4% 4%;
}

#menu-open {
	display: none;
}

/* Primary nav
----------------------------------------------------------------------------- */
.primary-nav h3 {
	font-size: 17px;
}

.primary-nav a {
	color: var(--nav-color);
	text-decoration: none;
	font-size: 15px;
	font-weight: 500;
}

.primary-nav a:hover {
	color: var(--body-color);
}

.primary-nav a.current {
	color: var(--accent-color);
	font-weight: 700;
}

.primary-nav ul {
	padding: 0;
	list-style: none;
}

/* Secondary nav
----------------------------------------------------------------------------- */
.secondary-nav h4 {
	font-size: 16px;
}

.secondary-nav a {
	color: var(--nav-color);
	text-decoration: none;
	font-size: 15px;
	font-weight: 500;
}

.secondary-nav a:hover {
	color: var(--body-color);
}

.secondary-nav ul {
	padding: 0;
	list-style: none;
}

.secondary-nav .h3-anchor {
	padding-inline-start: 10px;
}

/* Content area
----------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--heading-color);
}

.content h1 {
	font-size: 65px;
}

.content a {
	text-decoration: none;
	color: var(--accent-color);
	font-weight: 600;
	text-underline-offset: 2px;
}

.content a:hover {
	text-decoration: underline;
}

.content p {
	color: var(--body-color);
	font-size: 18px;
	line-height: var(--line-height-5);
}

.content .lead {
	font-size: 26px;
	line-height: var(--line-height-3);
}

.content h2 {
	margin-block-start: 70px;
}

.content p code {
	padding: 2px 5px;
	background: var(--code-bg-color);
	border-radius: var(--border-radius-4);
	letter-spacing: var(--letter-spacing-2);
	font-size: 16px;
	white-space: nowrap;
}

.content a code {
	background: var(--accent-color-light);
	font-weight: 400;
}

.content pre {
	margin-block-end: var(--space-6);
}

.content hr {
	margin-block: 50px;
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid var(--hr-color);
	padding: 0;
}

/* Footer
----------------------------------------------------------------------------- */
.content footer hr {
	margin-block-start: var(--space-5);
}

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

.content footer p {
	font-size: var(--font-size-2);
	color: var(--footer-color);
}

.content footer a {
	color: var(--footer-color);
	font-weight: 300;
}

.content footer a:hover {
	color: var(--body-color);
}

/* Media queries
----------------------------------------------------------------------------- */
@media screen and (max-width: 1750px) {
	.nav-secondary {
		display: none;
	}
}

@media screen and (max-width: 1050px) {
	.layout {
		display: block;
	}

	.nav-primary {
		position: fixed;
		z-index: 100;
	}

	#menu-open {
		display: block;
	}

	#menu-close {
		display: block;
	}

	.nav-primary nav {
		display: none;
		transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		transition-duration: 300ms;
		transform: translateX(-100%);
	}

	.nav-primary nav.on-screen {
		display: block;
		top: 0;
		height: 100vh;
		padding-block-start: 60px;
		background: var(--fly-out-bg-color);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		width: 100%;
		transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		transition-duration: 300ms;
		transform: translateX(0px);
	}

	.content {
		padding-block-start: 50px;
	}

	.content h1 {
		font-size: var(--font-size-10);
	}

	.content h2 {
		font-size: var(--font-size-8);
	}

	.content .lead {
		font-size: var(--font-size-6);
	}

	.content p {
		font-size: var(--font-size-4);
	}
}