@font-face {
	font-family: 'Assistant-fallback-linux';
	size-adjust: 81.9%;
	ascent-override: 114%;
	src: local('DejaVu Sans');
	unicode-range: U+20-5F, U+61-7A, U+7C, U+A0, U+A7, U+A9, U+AB, U+B2-B3, U+BB, U+C0, U+C2, U+C6-CB,
		U+CE-CF, U+D4, U+D9, U+DB-DC, U+E0, U+E2, U+E6-EB, U+EE-EF, U+F4, U+F9, U+FB-FC, U+FF,
		U+152-153, U+178, U+2B3, U+2E2, U+1D48-1D49, U+2010-2011, U+2013-2014, U+2019, U+201C-201D,
		U+2020-2021, U+2026, U+202F-2030, U+20AC, U+2212;
}

@font-face {
	font-family: 'Assistant-fallback-linux';
	font-weight: 700;
	size-adjust: 79%;
	ascent-override: 106%;
	src: local('DejaVu Sans Bold');
	unicode-range: U+20-5F, U+61-7A, U+7C, U+A0, U+A7, U+A9, U+AB, U+B2-B3, U+BB, U+C0, U+C2, U+C6-CB,
		U+CE-CF, U+D4, U+D9, U+DB-DC, U+E0, U+E2, U+E6-EB, U+EE-EF, U+F4, U+F9, U+FB-FC, U+FF,
		U+152-153, U+178, U+2B3, U+2E2, U+1D48-1D49, U+2010-2011, U+2013-2014, U+2019, U+201C-201D,
		U+2020-2021, U+2026, U+202F-2030, U+20AC, U+2212;
}

@font-face {
	font-family: 'Assistant-fallback';
	size-adjust: 92.94%;
	ascent-override: 110%;
	src: local('Arial');
	unicode-range: U+20-5F, U+61-7A, U+7C, U+A0, U+A7, U+A9, U+AB, U+B2-B3, U+BB, U+C0, U+C2, U+C6-CB,
		U+CE-CF, U+D4, U+D9, U+DB-DC, U+E0, U+E2, U+E6-EB, U+EE-EF, U+F4, U+F9, U+FB-FC, U+FF,
		U+152-153, U+178, U+2B3, U+2E2, U+1D48-1D49, U+2010-2011, U+2013-2014, U+2019, U+201C-201D,
		U+2020-2021, U+2026, U+202F-2030, U+20AC, U+2212;
}

@font-face {
	font-family: 'Assistant-fallback';
	font-weight: 700;
	size-adjust: 80.4%;
	ascent-override: 124%;
	src: local('Arial Black');
	unicode-range: U+20-5F, U+61-7A, U+7C, U+A0, U+A7, U+A9, U+AB, U+B2-B3, U+BB, U+C0, U+C2, U+C6-CB,
		U+CE-CF, U+D4, U+D9, U+DB-DC, U+E0, U+E2, U+E6-EB, U+EE-EF, U+F4, U+F9, U+FB-FC, U+FF,
		U+152-153, U+178, U+2B3, U+2E2, U+1D48-1D49, U+2010-2011, U+2013-2014, U+2019, U+201C-201D,
		U+2020-2021, U+2026, U+202F-2030, U+20AC, U+2212;
}

@font-face {
	font-family: 'Assistant';
	font-weight: 200 800;
	font-display: swap;
	src: url(/fonts/Assistant.woff2) format('woff2');
	unicode-range: U+20-5F, U+61-7A, U+7C, U+A0, U+A7, U+A9, U+AB, U+B2-B3, U+BB, U+C0, U+C2, U+C6-CB,
		U+CE-CF, U+D4, U+D9, U+DB-DC, U+E0, U+E2, U+E6-EB, U+EE-EF, U+F4, U+F9, U+FB-FC, U+FF,
		U+152-153, U+178, U+2B3, U+2E2, U+1D48-1D49, U+2010-2011, U+2013-2014, U+2019, U+201C-201D,
		U+2020-2021, U+2026, U+202F-2030, U+20AC, U+2212;
}

:root {
	--weight-normal: 400;
	--weight-bold: 700;
	--weight-black: 800;
	--color-creme: #fff7f1;
	--color-primary: rgb(207 58 0);
	--color-primary-text: rgb(207 58 0);
	--container-max-width: 60rem;
	--container-padding: 0.5rem;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: Assistant, Assistant-fallback, Assistant-fallback-linux, system-ui, sans-serif;
	font-weight: var(--weight-normal);
	line-height: 1.5;
	word-break: normal;
	overflow-wrap: anywhere;
	scroll-behavior: smooth;
}

@media (max-width: 40rem) {
	.sr-only-mobile {
		border: 0 !important;
		clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
		-webkit-clip-path: inset(50%) !important;
		clip-path: inset(50%) !important; /* 2 */
		height: 1px !important;
		margin: -1px !important;
		overflow: hidden !important;
		padding: 0 !important;
		position: absolute !important;
		width: 1px !important;
		white-space: nowrap !important; /* 3 */
	}
}

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

a {
	color: var(--color-primary);
	font-weight: var(--weight-black);
}

.button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	background: var(--color-primary);
	border: none;
	color: white;
	font-weight: var(--weight-black);
	text-align: left;
	text-decoration: none;
	border-radius: 2rem;
}

h1 {
	line-height: 1.2;
}

.container {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding-left: var(--container-padding);
	padding-right: var(--container-padding);
}

.main-header {
	position: relative;
	width: 100%;
	margin-bottom: 2rem;
	/* on mobile iOS, the scale animation triggers some horizontal zoom */
	overflow: hidden;
}

.main-header::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	margin-top: min(40vh, min(300px, calc(140 / 375 * 100%)));
	margin-top: min(40lvh, min(300px, calc(140 / 375 * 100%)));
	height: 4rem;
	width: 100%;
	background: var(--color-creme);
}

@media (min-width: 40rem) {
	.main-header {
		margin-bottom: 2rem;
	}
}

.main-header__background {
	display: block;
	width: 100%;
	height: auto;
	max-height: min(40vh, 300px);
	max-height: min(40lvh, 300px);
	object-fit: cover;
	object-position: 50% 33%;
}

.author {
	--gutter-width: max(
		var(--container-padding),
		calc((100% - var(--container-max-width)) / 2 + var(--container-padding))
	);
	position: relative;
	left: 0;
	bottom: 0;
	z-index: 1;
	width: 100%;
	display: grid;
	grid-template-areas:
		'GutterLeft Avatar . . GutterRight'
		'GutterLeft Info Info Contact GutterRight';
	grid-template-columns: var(--gutter-width) 8rem 1fr auto var(--gutter-width);
	align-items: center;
	row-gap: 1rem;
	margin-top: -4rem;
	padding-bottom: 2rem;
}

@media (min-width: 40rem) {
	.author {
		row-gap: 1rem;
	}
}

.author__avatar {
	--small-size: 3rem;
	--small-border-width: 0.15rem;
	--ratio: calc(8 / 3); /* The goal is to have something that has a 8rem width when not sticky */
	--size: calc(var(--small-size) * var(--ratio));
	--border-width: calc(var(--small-border-width) * var(--ratio));

	grid-area: Avatar;
	width: var(--size);
	height: var(--size);
	margin: 0 0 0 0;
	background: white;
	border: var(--border-width) solid var(--color-creme);
	border-radius: 50%;
	object-fit: cover;
	object-position: 0 0;
}

@keyframes look-down {
	from {
		object-position: 0 0;
	}
	to {
		object-position: 100% 0;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.author--animating .author__avatar {
		animation: 0.4s steps(19) 0s 1 reverse forwards look-down;
	}
}

.author__info {
	grid-area: Info;
	margin-right: 2rem;
}

.author__name {
	width: fit-content;
	margin: 0 0 0 0;
}

.author__name > * {
	display: inline-block;
}

.author__contact {
	grid-area: Contact;
}

@media (max-width: 40rem) {
	.author__contact .button {
		padding: 0.5rem;
	}
}

.author__background {
	position: absolute;
	z-index: -1;
	top: 4rem;
	bottom: 0;
	left: 0;
	width: 100%;
	background: var(--color-creme);
}

.author--sticky {
	position: fixed;
	top: 0;
	bottom: auto;
	grid-template-areas: 'GutterLeft Avatar  Info Contact GutterRight';
	grid-template-columns: var(--gutter-width) 3rem 1fr auto var(--gutter-width);
	margin-top: 0;
	padding: 0.5rem;
	backdrop-filter: blur(2px);
}

.author--sticky .author__avatar {
	--ratio: 1;
	object-position: 100% 0;
}

@media (prefers-reduced-motion: no-preference) {
	.author--sticky.author--animating .author__avatar {
		animation-direction: normal;
	}
}

.author--sticky .author__info {
	margin-top: 0;
	margin-left: 1rem;
	margin-right: 1rem;
}

.author--sticky .author__name {
	font-size: 1.4rem;
}

.author--sticky .author__background {
	top: 0;
	bottom: 0;
	opacity: 0.5;
	background: var(--color-creme);
}

.author--sticky .author__address {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.article-list {
	margin-top: 2rem;
}

.article-skeleton {
	width: 100%;
	height: 10rem;
	background: #ede9e8;
}

.article-skeleton + .article-skeleton {
	margin-top: 2rem;
}