header {
	width: 100%;
	max-width: 60rem;
	padding: var(--sp-M);
	gap: var(--sp-M);
	display: grid;
	place-items: center;
	grid-template-columns: 1fr 4fr 1fr;
}
header img {
	justify-self: start;
	width: 5rem;
	grid-area: 1 / 1 / 2 / 2;
	transform: scaleX(-1);
}
header h1 {
	font-size: 2rem;
	grid-area: 1 / 2 / 2 / 3;
}
header section {
	height: fit-content;
	display: block;
}
header input {
	display: none;
}
header label {
	width: 2rem;
	height: 2rem;
	display: grid;
	place-items: center;
	cursor: pointer;
}
#menu, #menu::before, #menu::after {
	position: absolute;
	width: 2rem;
	height: .25rem;
	background-color: var(--fg-emph);
	transition: transform .3s;
}
#menu::before {
	content: '';
	transform: translateY(-.625rem);
}
#menu::after {
	content: '';
	transform: translateY(.625rem);
}
header input:checked ~ label #menu {
	transform: rotate(45deg);
}
header input:checked ~ label #menu::before {
	transform: rotate(-90deg);
}
header input:checked ~ label #menu::after {
	transform: translate(0, 0) rotate(-90deg);
}
header nav {
	position: absolute;
	right: var(--sp-M);
	margin-top: 1rem;
	border: .25rem dashed var(--fg-norm);
	border-radius: var(--sp-S);
	padding: var(--sp-S) var(--sp-M);
	gap: var(--sp-M);
	font-size: 1.25rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 2;
	background: var(--bg-norm);
}
header nav a {
	text-decoration: none;
	font-size: 1.5rem;
	font-weight: bolder;
	color: var(--fg-norm);
	transition: color .3s ease-in-out;
}
header nav a svg {
	height: 2rem;
	fill: var(--fg-norm);
	transition: fill .3s ease-in-out;
}
header nav a:hover {
	color: var(--fg-emph);
}
header nav a:hover svg {
	fill: var(--fg-emph);
}
header input:not(:checked) ~ nav {
	display: none;
}
.banner {
	width: 100%;
	display: grid;
	place-items: center;
	grid-template-columns: 1fr 4fr 1fr;
}
.banner img {
	flex: 1 0 fit-content;
	height: 5rem;
}
.banner img:first-of-type {
	transform: scaleX(-1);
}
.banner div {
	width: 100%;
	overflow: hidden;
}
.banner ul {
	max-width: unset;
	min-width: fit-content;
	gap: var(--sp-S);
	font-size: 2rem;
	display: flex;
	justify-content: space-around;
	align-items: center;
	z-index: 1;
	animation: loop 15s linear infinite;
}
@keyframes loop {
	0% {transform: translateX(120%);}
	100% {transform: translateX(-160%);}
}
.banner li {
	flex-shrink: 0;
	min-width: fit-content;
}
h2 {
	text-align: center;
	font-weight: 300;
}
hr {
	margin: var(--sp-L) 0;
	border: .125rem dashed var(--fg-norm);
}
.fancy-border {
	width: 100%;
	background: linear-gradient(90deg, var(--bg-acc1) .5rem, transparent .5rem) 0 0,
				linear-gradient(270deg, var(--bg-acc1) .5rem, transparent .5rem) 100% 100%,
				linear-gradient(180deg, var(--bg-acc1) .5rem, transparent .5rem) 0 0,
				linear-gradient(0deg, var(--bg-acc1) .5rem, transparent .5rem) 100% 100%;
	background-repeat: no-repeat;
	background-size: 4rem 2rem;
	font-size: 1.25rem;
}
label {
	width: 100%;
	padding: var(--sp-S) var(--sp-M);
	gap: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
label > h2 {
	flex: 1 1 100%;
}
label > img {
	flex-shrink: 0;
	width: 1.5rem;
	transition: transform .4s;
}
article {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .4s;
}
input[type=checkbox] {
	display: none;
}
input[type=checkbox]:checked ~ label > img {
	transform: rotate(-90deg);
}
input[type=checkbox]:checked ~ article {
	grid-template-rows: 1fr;
}
article > section {
	gap: var(--sp-L);
	overflow: hidden;
}
#article-1 ~ article .keywords {
	justify-content: space-evenly;
	font-size: 1.5rem;
	gap: var(--sp-XS);
}
#article-1 ~ article .keywords > * {
	flex-shrink: 1;
	font-weight: normal;
}
@media (min-width: 54rem) {
	header section {
		position: relative;
		grid-area: 2 / 1 / 3 / 2;
	}
	header label {
		display: none;
	}
	header nav {
		position: absolute;
		margin: 0;
		margin-right: -1.25rem;
		margin-top: var(--sp-L);
		border: none;
		padding: 0 0 0 var(--sp-M);
		background: none;
	}
	header input:not(:checked) ~ nav {
		display: flex;
	}
	details {
		height: 6rem;
	}
}