/* Responsive layout overrides. */
@media (max-width: 900px) {
	.hero {
		grid-template-columns: 1fr;
		min-height: auto
	}

	.hero-copy {
		padding-bottom: 30px
	}

	.about-section {
		grid-template-columns: 1fr
	}

	.compact-hero {
		grid-template-columns: 1fr
	}

	.compact-hero .eyebrow {
		margin: 0
	}

	.compact-hero p:last-child {
		margin-top: 20px
	}

	.shows-section {
		grid-template-columns: 1fr
	}

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

/* Keep the landing layout side by side through tablet widths. */
@media (min-width: 821px) {
	.hero {
		grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr)
	}
}

@media (max-width: 820px) {
	.hero {
		grid-template-columns: 1fr;
		min-height: auto
	}
}

@media (max-width: 640px) {
	.site-header {
		height: 76px
	}

	.brand-name {
		font-size: 20px
	}

	.nav-toggle {
		display: block;
		position: relative;
		z-index: 2
	}

	.site-nav {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 76px;
		background: #11110f;
		border-bottom: 1px solid var(--line);
		padding: 22px 28px;
		flex-direction: column;
		gap: 8px
	}

	.site-nav.is-open {
		display: flex
	}

	.hero {
		padding-top: 50px;
		grid-template-columns: 1fr
	}

	.hero h1,
	.page-hero h1 {
		font-size: 68px
	}

	.band-facts {
		grid-template-columns: 1fr
	}

	.band-facts li:nth-child(odd) {
		border-right: 0
	}

	.member-grid,
	.former-grid {
		grid-template-columns: 1fr
	}

	.show-card {
		grid-template-columns: max-content minmax(0, 1fr);
		gap: 20px
	}

	.show-card.past {
		grid-template-columns: max-content minmax(0, 1fr)
	}

	.show-status {
		display: none
	}

	.show-date .month,
	.show-date .day {
		font-size: 40px
	}

	.page-section {
		padding-top: 70px;
		padding-bottom: 70px
	}

	.site-footer {
		align-items: flex-start;
		flex-direction: column;
		gap: 20px
	}

	.site-footer>div {
		align-items: flex-start;
		flex-direction: column;
		gap: 6px
	}
}