@layer layout {
	:root {
		--content-padding: calc(3vw + 1rem);
	}
	.skip-link {
		position: fixed;
		top: 1rem;
		left: 1rem;
		transform: translateY(-6rem);
		color: var(--color-fg1);

		&:focus {
			transform: translateY(0);
			transition: transform 0.2s ease-in-out;
		}
	}
	.cover {
		border: var(--stroke-width) solid var(--color-strokes);
		border-radius: var(--stroke-width);
	}

	.main {
		padding-top: calc(0.5 * var(--content-padding));
		padding-bottom: calc(1.2 * var(--content-padding));
		padding-inline: var(--content-padding);
		border: var(--stroke-width) solid var(--color-strokes);
		border-bottom: var(--stroke-width) solid var(--color-strokes);
		border-radius: var(--stroke-width);
		box-shadow: 0 -2rem 5rem -0.8rem hsl(50, 100%, 80%, 0.1);

		h1,
		h2,
		h3,
		h4,
		h5,
		h6 {
			margin-top: 1.75em;
			margin-bottom: 0.75em;
			text-decoration: underline;
			text-decoration-color: var(--color-strokes);
			text-decoration-thickness: var(--stroke-width);
			text-underline-offset: 0.2em;
		}

		h1,
		h2:first-child {
			margin-top: calc(1rem + 2vw);
			padding-inline: clamp(0rem, 2.5vw, 4rem);
			letter-spacing: 0.04em;
			text-align: center;
		}

		h1 {
			font-size: min(3rem, calc(2.5rem + 2vw));
		}

		h2:first-child {
			font-size: clamp(1.85rem, 5vw, 2.5rem);
		}
	}

	.content {
		margin-top: 2rem;
	}
}

@layer components {
	.nav {
		display: flex;
		flex-wrap: wrap;
		align-self: center;
		justify-content: center;
		margin-inline: auto;
		padding-top: 2rem;
		padding-bottom: 2rem;
		gap: calc(1.7vw + 0.1rem);

		view-transition-name: --vt-nav;

		@media (width > 380px) {
			letter-spacing: 0.05em;
		}

		a {
			padding: 0.25em 0.3em 0em;
			color: var(--color-fg2);
			font-weight: bold;
			text-decoration: underline;
			text-decoration-color: transparent;
			text-decoration-thickness: var(--stroke-width);
			text-underline-offset: 0.4em;
			white-space: nowrap;
			transition:
				text-decoration-color 0.15s ease,
				text-underline-offset 0.15s ease;

			&:hover {
				text-decoration-color: var(--color-accent);
			}
		}

		a[aria-current="page"] {
			text-decoration-color: var(--color-strokes);
		}
	}

	.logo-type {
		display: block;
		--logo-scale: 0.7;
		position: relative;
		width: fit-content;
		margin: calc(2rem + 6vw) auto;
		transform: scale(var(--logo-scale));
		font-weight: normal;
		font-size: 4.5rem;
		text-align: center;
		view-transition-name: --vt-logotype;
	}

	.logo-type-main {
		display: block;
		position: relative;
		padding-left: 0.15em; /* offset letter-spacing */
		color: var(--aged-brass-300);
		letter-spacing: 0.2em;
		text-shadow: 0 0 1rem #000;
		text-transform: uppercase;

		&::before,
		&::after {
			display: block;
			position: absolute;
			bottom: calc(-0.5 * var(--stroke-width));
			height: var(--stroke-width);
			transform: scaleX(1);
			background-color: var(--color-strokes);
			content: "";
		}
		&::before {
			right: calc(50% + 14px);
			left: 0;
			transform-origin: right center;
			view-transition-name: --vt-logotype-line-before;
		}
		&::after {
			right: 0;
			left: calc(50% + 14px);
			transform-origin: left center;
			view-transition-name: --vt-logotype-line-after;
		}
	}

	.logo-star {
		position: absolute;
		bottom: -15px;
		left: 50%;
		/* width: calc(2em * 0.14);
		height: calc(3em * 0.14); */
		stroke-width: var(--stroke-width);
		transform: translateX(-50%);
		fill: black;
		> ellipse {
			stroke: var(--color-strokes);
			vector-effect: non-scaling-stroke;
			fill: none;
		}
	}

	.logo-type-sub {
		display: block;
		position: relative;
		margin-top: 1em;
		color: var(--aged-brass-500);
		font-weight: bold;
		font-size: 0.4em;
		line-height: 1.1;
		letter-spacing: 0.15rem;
	}

	.skyline {
		display: flex;
		z-index: 3;
		position: relative;
		width: min(80%, 35rem);
		height: auto;
		margin: 0 auto;
		margin-top: calc(2rem + 5vw);
		margin-bottom: calc(
			-1 * var(--stroke-width) - 0.5px
		); /* not sure why extra -0.5px is needed */

		view-transition-name: --vt-skyline;

		.stroke {
			stroke: var(--color-strokes);
			stroke-width: var(--stroke-width);
		}
		.bg {
			fill: var(--color-bg-content);
		}
	}

	.content-image {
		margin-block: 2rem;
		border: var(--stroke-width) solid var(--color-strokes);
		filter: sepia(30%) grayscale(30%);

		&:last-child {
			margin-bottom: 0;
		}
		&:first-child {
			margin-top: 0;
		}
	}

	.table-wrapper {
		margin-inline: calc(-1 * (var(--content-padding) + var(--stroke-width)));
		padding-bottom: 1rem;
		overflow-x: auto;
	}
	.event-table {
		width: 100%;
		border-collapse: collapse;
		line-height: 1.25;
		text-align: left;
		table-layout: fixed;

		th {
			padding: calc(0.5rem + 1vw);
			background: none;
		}
		td {
			min-width: 12rem;
			padding: calc(0.35rem + 1vw);
			border: var(--stroke-width) solid var(--color-strokes);
			vertical-align: top;

			&:first-child {
				font-weight: bold;
			}
		}

		tr:nth-child(odd):not(:only-child) {
			background: color-mix(in srgb, var(--color-accent), transparent 95%);
		}
		tr:nth-child(even) {
			background: color-mix(in srgb, var(--color-strokes), transparent 95%);
		}
	}
}

[data-template="home"] {
	.nav {
		margin-top: calc(0.5rem + 4vh);
	}
	.logo-type {
		--logo-scale: 0.8;
		margin-block: calc(0.5rem + 15vh);
		/* font-size: min(calc(3rem + 2vw), 6rem); */

		@media (min-width: 32rem) {
			--logo-scale: 1;
		}
		@media (min-width: 56rem) {
			--logo-scale: 1.2;
		}

		@supports (animation-timeline: view()) {
			animation: anim-logo-type both;
			animation-timeline: view(auto auto);
		}
	}
	.logo-type-main::before,
	.logo-type-main::after {
		animation: 10s cubic-bezier(0.08, 0.63, 0.19, 0.81) 0s 1 anim-scale-line
			forwards;
	}
}

[data-template="content"] {
	.header {
		margin-top: calc(1rem + 2vw);
	}
	.logo-type {
		margin-block: 0;
	}
	.skyline {
		margin-top: 0;
	}
}

@keyframes anim-logo-type {
	0%,
	20% {
		transform: translateY(0) scale(var(--logo-scale));
	}
	30% {
		opacity: 1;
	}
	100% {
		transform: translateY(-25vh) scale(0.5);
		opacity: 0;
	}
}

@keyframes anim-scale-line {
	from {
		transform: scaleX(0);
	}
}