:root {
	--bg: #f6f7f4;
	--panel: #ffffff;
	--line: #e1e5de;
	--text: #1d211d;
	--muted: #6d746d;
	--accent: #2f9e44;
	--display: "Jost", Futura, "Century Gothic", sans-serif;
}

body{
	background:var(--bg);
	font:normal 16px/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	color:var(--text);
	text-align:center;
	margin: 0;
}

/* film grain over everything */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 10;
	opacity: .035;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

* {
	box-sizing:border-box;
}

html {
	scroll-behavior: smooth;
}

a {
	color:var(--text);
}

h1 {
	margin: 0;
}

/* hero */
.hero {
	position: relative;
	min-height: 88vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 4rem 1rem;
	overflow: hidden;
	isolation: isolate;
	border-bottom: 1px solid var(--line);

	/* fade the paint out at the edges and into the page */
	&::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background:
			radial-gradient(ellipse at center, transparent 15%, var(--bg) 75%),
			linear-gradient(transparent 60%, var(--bg));
	}

	h1 {
		font-family: var(--display);
		font-weight: 200;
		font-size: clamp(3.5rem, 14vw, 10rem);
		line-height: .9;
		letter-spacing: -.02em;

		span {
			font-weight: 500;
		}
	}

	nav {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 1rem 2rem;
		margin-top: 2.5rem;
		font-family: var(--display);
		font-weight: 500;
		text-transform: uppercase;
		letter-spacing: .2em;

		a {
			text-decoration: none;
			padding-bottom: .25rem;
			border-bottom: 2px solid transparent;
			transition: border-color .2s, color .2s;
		}

		a:hover, a:focus-visible {
			color: var(--accent);
			border-color: var(--accent);
		}
	}
}

.tagline {
	margin: 1.25rem 0 0;
	font-family: var(--display);
	font-weight: 300;
	font-size: clamp(1rem, 2vw, 1.35rem);
	text-transform: uppercase;
	letter-spacing: .35em;
	color: var(--accent);
}

/* soft green glow behind the title */
.paint {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: -2;
	width: 60vmax;
	aspect-ratio: 1;
	margin: -30vmax 0 0 -30vmax;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(47,158,68,.28), transparent);
	animation: drift 20s ease-in-out infinite alternate;
}

@keyframes drift {
	0%   { transform: translate(-4vw, 2vh) scale(1); }
	100% { transform: translate(4vw, -2vh) scale(1.12); }
}

/* sections */
main {
	max-width: 80rem;
	margin: 0 auto;
	padding: 0 1rem;
}

main > section {
	padding: 4rem 0 1rem;
}

h2 {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0 0 2rem;
	font-family: var(--display);
	font-weight: 500;
	font-size: 2rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	text-align: left;

	span {
		color: var(--accent);
		font-size: 1rem;
		letter-spacing: 0;
	}

	&::after {
		content: "";
		flex: 1;
		height: 1px;
		background: var(--line);
	}
}

figure {
	margin: 0;
}

iframe{
	display: block;
	width: 100%;
	border:none;
	overflow:hidden;
	border-radius:.625rem;
	background: var(--panel);
}

.listen, .singles {
	display: grid;
	gap: 1rem;

	iframe {
		height: 28.25rem;
	}
}

.listen {
	grid-template-columns: repeat(2, 1fr);
}

.singles {
	grid-template-columns: repeat(3, 1fr);
}

.videos {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem 1rem;

	iframe.yt {
		aspect-ratio: 16/9;
		height: auto;
	}

	figcaption {
		margin-top: .75rem;
		font-family: var(--display);
		text-transform: uppercase;
		letter-spacing: .1em;
		color: var(--muted);

		a {
			color: var(--accent);
			text-decoration: none;
		}

		a:hover, a:focus-visible {
			text-decoration: underline;
		}
	}
}


.band {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;

	li {
		padding: 2rem 1rem;
		background: var(--panel);
		border-top: 3px solid var(--line);
		transition: border-color .2s;
	}

	li:hover {
		border-color: var(--accent);
	}

	.role {
		display: block;
		margin-bottom: .5rem;
		font-size: .8rem;
		text-transform: uppercase;
		letter-spacing: .2em;
		color: var(--accent);
	}

	a {
		font-family: var(--display);
		font-size: 1.5rem;
		text-transform: uppercase;
		text-decoration: none;
	}

	a:hover {
		text-decoration: underline;
	}

	.note {
		display: block;
		margin-top: .5rem;
		font-size: .85rem;
		color: var(--muted);
	}
}

h3.former {
	margin: 2rem 0 1rem;
	font-family: var(--display);
	font-weight: 500;
	font-size: .9rem;
	text-transform: uppercase;
	letter-spacing: .2em;
	text-align: left;
	color: var(--muted);
}

/* lyrics page */
.song {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 4rem;
	max-width: 80rem;
	margin: 0 auto;
	padding: 2rem 1rem 0;
	text-align: left;

	.media {
		position: sticky;
		top: 2rem;
		align-self: start;
	}

	.back {
		font-family: var(--display);
		text-transform: uppercase;
		letter-spacing: .2em;
		font-size: .85rem;
		color: var(--muted);
		text-decoration: none;

		&:hover, &:focus-visible {
			color: var(--accent);
		}
	}

	h1 {
		margin: 1.5rem 0;
		font-family: var(--display);
		font-weight: 200;
		font-size: clamp(3rem, 7vw, 5.5rem);
		line-height: .95;
		letter-spacing: -.02em;

		span {
			font-weight: 500;
			color: var(--accent);
		}
	}

	iframe.yt {
		aspect-ratio: 16/9;
		height: auto;
	}
}

.lyrics {
	padding-top: 4.5rem;
	font-size: 1.1rem;
	line-height: 1.7;

	p {
		margin: 0 0 2rem;
	}

	.chorus {
		padding-left: 1.25rem;
		border-left: 2px solid var(--accent);
		color: #4a514a;
	}
}

.to-top {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 5;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 .25rem 1rem rgba(0,0,0,.15);
	opacity: 0;
	pointer-events: none;
	transform: translateY(1rem);
	transition: opacity .25s, transform .25s, background .2s;

	&.show {
		opacity: 1;
		pointer-events: auto;
		transform: none;
	}

	&:hover, &:focus-visible {
		background: #258a38;
	}

	svg {
		width: 1.4rem;
		fill: none;
		stroke: #fff;
		stroke-width: 2.5;
		stroke-linecap: round;
		stroke-linejoin: round;
	}
}

footer {
	padding: 4rem 1rem 2rem;
	color: var(--muted);
	font-size: .85rem;

	a {
		color: var(--muted);
	}

	a:hover {
		color: var(--accent);
	}
}

@media( max-width: 64rem ) {
	.listen, .singles { grid-template-columns: 1fr; max-width: 40rem; margin: 0 auto; }
	.song { grid-template-columns: 1fr; gap: 0; }
	/* stacked: unwrap .media so the video can pin to the top while the lyrics scroll */
	.song .media { display: contents; }
	.song iframe.yt {
		position: sticky;
		top: 0;
		z-index: 1;
		width: calc(100% + 2rem);
		margin: 0 -1rem;
		border-radius: 0;
	}
	.videos, .band { grid-template-columns: repeat(2, 1fr); }
	.lyrics { padding-top: 3rem; }
}

@media( max-width: 30rem ) {
	.hero nav { gap: 1rem 1.25rem; letter-spacing: .12em; }
	.videos, .band { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.paint { animation: none; }
	.to-top { transition: none; }
}