@font-face {
	font-family: 'Ovo-fallback-linux';
	size-adjust: 85%;
	src: local('DejaVu Serif');
}

@font-face {
	font-family: 'Ovo-fallback';
	size-adjust: 109.1%;
	ascent-override: 72%;
	src: local('Times New Roman');
}

@font-face {
	font-family: 'Ovo';
	font-style: normal;
	font-display: fallback;
	src: url(/examples/webperf/Ovo-critical.woff2) format('woff2');
	unicode-range: U+9, U+A, U+20, U+27-29, U+2C-2E, U+3F, U+41-48, U+4A-4E, U+50, U+52, U+53,
		U+55-57, U+5A, U+5F, U+61-69, U+6B-7A, U+A0, U+E0, U+E8-EA, U+F4, U+F9, U+142, U+1F50E;
}

:root {
	--color-white: #fffdfd;
	--color-black: #000000;
	--color-creme: #fff7f1;
	--color-accent: rgb(207 58 0);
	--color-accent-light: #ff6c40;
	--color-border: rgb(24 23 22 / 15%);
	--color-shade: rgba(24, 14, 5, 0.7);
	--color-shade-transparent: rgba(24, 14, 5, 0);

	font-family: Ovo, Ovo-fallback, Ovo-fallback-linux, Arial, Helvetica, sans-serif;
}

* {
	box-sizing: border-box;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
	line-height: 1.5;
}

a {
	color: var(--color-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.background--dark {
	background: var(--color-black);
}

.background--dark a {
	color: var(--color-accent-light);
}

.content {
	max-width: 75rem; /* 120ch */
	padding-left: 1rem;
	padding-right: 1rem;
	margin: 3rem auto;
}

.paragraph {
	max-width: 56rem; /* 90ch */
	margin-left: auto;
	margin-right: auto;
}

.small {
	font-style: italic;
}

header,
footer {
	background: var(--color-creme);
	padding: 1rem 0rem;
}

header {
	position: sticky;
	top: 0;
	z-index: 1;
}

.header {
	margin-top: 0;
	margin-bottom: 0;
}

.header p {
	margin-top: 0;
	margin-bottom: 0.5rem;
	font-size: 1.25rem;
	font-weight: bold;
}

nav ul {
	display: block;
	padding: 0;
	margin: 0;
}

nav li {
	display: block;
}

.footer {
	text-align: right;
	margin-top: 0;
	margin-bottom: 0;
}

main {
	flex-grow: 1;
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}

.hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: min(50vh, 300px);
	color: var(--color-white);
	text-align: left;
}

.hero-background {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero h1 {
	font-size: 2rem;
	line-height: 1.3;
	margin: 0;
	padding-top: 5rem;
	padding-bottom: 0.5rem;
	padding-left: 1rem;
	padding-right: 1rem;
	background: linear-gradient(to top, var(--color-shade), var(--color-shade-transparent));
}

.hero p {
	margin: 0;
	padding-bottom: 1rem;
	padding-left: 1rem;
	padding-right: 1rem;
	background: var(--color-shade);
}

.hero p:not(.small) {
	font-size: 1.25rem;
}

.article-grid {
	display: grid;
	gap: 3rem;
	grid-template-columns: 1fr;
	grid-template-rows: masonry;
}

.article-preview h2 {
	font-size: 1.3rem;
	line-height: 1.4;
	margin: 1rem 0 0 0;
}
.article-preview p {
	margin: 0.25rem 0 0 0;
}

.article-preview img {
	width: 100%;
	height: auto;
}

.pswp__img {
	object-fit: contain;
	max-width: 100vw;
	max-height: 100vh;
	height: 100vh !important;
}

.newsletter {
	display: grid;
	grid-template-areas:
		'Title'
		'Image'
		'Content';
	gap: 2rem;
	padding: 1rem;
	background: var(--color-black);
	color: var(--color-white);
}

.newsletter__title {
	grid-area: Title;
	margin: 0;
}

.newsletter__image {
	grid-area: Image;
}

.newsletter__image img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 13rem;
	object-fit: cover;
}

.newsletter__content {
	grid-area: Content;
}

.newsletter__content > :first-child {
	margin-top: 0;
}

.newsletter__content > :last-child {
	margin-bottom: 0;
}

.newsletter .small {
	font-size: 0.9rem;
}

@media (min-width: 500px) {
	.content:not(.header, .footer) {
		margin-top: 3rem;
		margin-bottom: 3rem;
	}

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

	.header h1 {
		margin-bottom: 0;
	}

	nav ul {
		text-align: right;
	}

	.article-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 600px) {
	.newsletter {
		grid-template-areas:
			'Image .'
			'Image Title'
			'Image Content'
			'Image .';
		grid-template-columns: 15rem 1fr;
		grid-template-rows: 1fr min-content auto 1fr;
		gap: 1rem 1.5rem;
	}

	.newsletter__image img {
		max-height: none;
		height: 100%;
	}
}

@media (min-width: 1000px) {
	.hero {
		justify-content: center;
		text-align: left;
		min-height: min(50vh, 360px);
	}

	.hero h1,
	.hero p {
		padding-left: 60%;
		padding-right: 5%;
		background: none;
	}

	.hero h1 {
		padding-top: 1rem;
	}

	.article-grid {
		grid-template-columns: 1fr 1fr 1fr;
	}

	.newsletter {
		grid-template-columns: 1fr 2.24fr;
		column-gap: 3rem;
	}
	.newsletter__image {
		display: flex;
		align-items: center;
	}
	.newsletter__image img {
		max-height: 15rem;
	}
}

@media (min-width: 1200px) {
	.hero h1 {
		font-size: 3rem;
	}

	.hero p:not(.small) {
		font-size: 1.5rem;
	}
}