/* Innova Premium — site styles */

@font-face {
	font-family: Commissioner;
	font-weight: 400;
	font-display: fallback;
	src: url('/assets/fonts/commissioner-400.otf') format('opentype');
}
@font-face {
	font-family: Commissioner;
	font-weight: 500;
	font-display: fallback;
	src: url('/assets/fonts/commissioner-500.otf') format('opentype');
}
@font-face {
	font-family: Commissioner;
	font-weight: 700;
	font-display: fallback;
	src: url('/assets/fonts/commissioner-700.otf') format('opentype');
}
@font-face {
	font-family: Commissioner;
	font-weight: 800;
	font-display: fallback;
	src: url('/assets/fonts/commissioner-800.otf') format('opentype');
}

:root {
	--color-base: #fff50e;
	--color-contrast: #000000;
	--color-primary: #2d2d03;

	--fs-x-small: 0.833rem;
	--fs-small: clamp(0.833rem, 0.833rem + ((1vw - 0.2rem) * 0.304), 1rem);
	--fs-medium: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.364), 1.2rem);
	--fs-large: clamp(1.2rem, 1.2rem + ((1vw - 0.2rem) * 0.436), 1.44rem);
	--fs-x-large: clamp(1.44rem, 1.44rem + ((1vw - 0.2rem) * 0.524), 1.728rem);
	--fs-xx-large: clamp(1.728rem, 1.728rem + ((1vw - 0.2rem) * 0.629), 2.074rem);
	--fs-huge: clamp(1.728rem, 1.728rem + ((1vw - 0.2rem) * 8.116), 6.192rem);

	--content-width: 600px;
	--wide-width: 1200px;
	--gap: 1.5rem;
}

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

body {
	margin: 0;
	background-color: var(--color-base);
	color: var(--color-contrast);
	font-family: Commissioner, sans-serif;
	font-size: var(--fs-small);
	line-height: 1.5;
}

a {
	color: inherit;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

h1, h2, h3, h4 {
	font-weight: 700;
	line-height: 1.2;
	margin: 2rem 0 1rem;
}
h1 { font-size: var(--fs-xx-large); }
h2 { font-size: var(--fs-x-large); }
h3 { font-size: var(--fs-large); }
h4 { font-size: var(--fs-medium); }

p, ul, ol {
	margin: 0 0 1rem;
}

.text-small {
	font-size: var(--fs-x-small);
}

/* Layout */

.site {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.site-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.wrap {
	max-width: var(--wide-width);
	margin: 0 auto;
	padding: 0 var(--gap);
}

.content {
	max-width: var(--content-width);
}

/* Header */

.site-header {
	padding: 3rem var(--gap);
	text-align: center;
}

.site-header img {
	width: 246px;
	height: auto;
}

.hero {
	text-align: center;
	font-size: var(--fs-huge);
	font-weight: 800;
	letter-spacing: 0.25em;
	line-height: 0.8;
	text-transform: uppercase;
	margin: 0 0 3rem;
}

/* Main */

.site-main {
	padding-bottom: 3rem;
}

/* Home: post list */

.post-list {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: var(--wide-width);
	text-align: center;
}

.post-list li + li {
	margin-top: 1rem;
}

.post-list a {
	font-size: var(--fs-small);
	font-weight: 500;
}

/* Single post */

.post-title {
	text-align: center;
	font-weight: 700;
	margin-bottom: 0;
}

.post-date {
	text-align: center;
	font-size: var(--fs-x-small);
	margin: 0.75rem 0 3rem;
}

.post-content {
	margin: 0 auto;
}

.post-nav {
	display: flex;
	justify-content: space-between;
	margin: 4rem auto 0;
	font-size: var(--fs-small);
}

/* Page (About us) */

.page-title {
	text-align: center;
	font-weight: 700;
	margin-bottom: 3rem;
}

.page-content {
	margin: 0 auto;
}

/* Footer */

.site-footer {
	padding: 0 var(--gap) var(--gap);
	text-align: center;
	font-size: var(--fs-x-small);
}

.site-footer nav {
	font-weight: 500;
	margin-bottom: 1rem;
}

@media (max-width: 600px) {
	.post-content, .page-content, .content {
		max-width: 100%;
	}
}