* {
	scroll-behavior: smooth;
}
main {
	max-width: var(--max-width-L);
	margin: var(--sp-L) 0 calc(2 * var(--nav-icon-width-L)) 0;
	padding: var(--sp-L) var(--sp-M);
	background: linear-gradient(#0000, #0009 var(--sp-L), var(--bg-norm) var(--sp-XL),
		var(--bg-norm) calc(100% - var(--sp-XL)), #0009 calc(100% - var(--sp-L)), #0000);
}
#navigation {
	padding-top: var(--sp-L);
	justify-content: space-evenly;
}
#navigation > a {
	font-size: 1.5rem;
	font-weight: bold;
	color: var(--fg-norm);
}
#selections {
	padding: var(--sp-XL) 0;
	gap: var(--sp-XL);
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
#selections > span {
	font-size: 1.25rem;
	color: var(--fg-dark);
}
.selection > input {
	position: absolute;
	z-index: -1;
	opacity: 0;
}
.selection > label {
	font-size: 1.5rem;
	font-weight: bold;
	color: var(--fg-dark);
	transition: all .1s;
}
.selection > input:focus-visible ~ label {
	outline: .125rem solid var(--fg-norm);
}
.selection > input:checked ~ label {
	text-decoration: underline;
	color: var(--fg-norm);
}
#events {
	padding-bottom: var(--sp-XL);
	gap: var(--sp-L);
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	grid-auto-rows: 250px;
}
.fade-out.htmx-swapping {
	opacity: 0;
	transition: opacity .4s ease-out;
}
.fade-in.htmx-added {
  opacity: 0;
}
.fade-in {
  opacity: 1;
  transition: opacity .4s ease-out;
}
.event {
	align-items: center;
}
.event:enabled, .event:enabled:hover, .event:enabled:focus {
	color: var(--fg-norm);
	background: none;
}
.event > img {
	flex: 1;
}
.event > h2 {
	font-size: 1.125rem;
}
dialog[open] {
	position: fixed;
	min-width: 100vw;
	min-height: 100vh;
	width: 100vw;
	height: 100vh;
	inset: 0;
	border: none;
	display: grid;
	place-items: center;
	color: inherit;
	background: #000A;
}
.dialog-box {
	max-width: var(--max-width-L);
	width: 100%;
	border: var(--sp-XS) solid var(--bg-acc3);
	padding: var(--sp-M);
	gap: var(--sp-L);
	color: inherit;
	background: var(--bg-norm);
}
.dialog-box > img {
	flex: 1;
}
.dialog-text {
	flex: 1;
}
.dialog-header {
	gap: var(--sp-M);
	font-size: 1.5rem;
	flex-wrap: nowrap;
}
.dialog-header > h2 {
	flex: 1;
	text-align: center;
}
.dialog-header > button {
	flex: 0 0 1rem;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: top;
	border: none;
	background: none;
}
.dialog-header > button:hover {
	border: none;
	background: none;
}
.dialog-close, .dialog-close::after {
	position: absolute;
	width: 1.5rem;
	height: .125rem;
	background: var(--fg-norm);
	transform: translateY(.5rem) rotate(-45deg);
}
.dialog-close::after {
	content: "";
	transform: translateX(-50%) rotate(90deg);
}
@media screen and (min-width: 50rem) {
	#navigation > a {
		font-size: 1.75rem;
	}
	.event > h2 {
		font-size: 1.5rem;
	}
}