/* 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
	}

	.page-hero-copy {
		margin-top: 24px
	}

	.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: 720px) {
	.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: 2px solid var(--rust);
		padding: 22px 28px;
		flex-direction: column;
		gap: 8px
	}

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

	.site-nav a {
		padding-left: 14px
	}

	.site-nav a:after {
		top: 8px;
		bottom: 8px;
		left: 0;
		right: auto;
		width: 2px;
		height: auto;
		transform: scaleY(0);
		transform-origin: top;
		transition: transform .2s
	}

	.site-nav a:hover:after,
	.site-nav a:focus-visible:after,
	.site-nav a[aria-current=page]:after {
		right: auto;
		transform: scaleY(1)
	}

	.hero,
	.page-hero {
		padding-top: 50px;
	}

	.hero {
		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: 100px minmax(0, 1fr);
		gap: 14px;
		padding-left: 0;
		padding-right: 0
	}

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

	.show-status {
		display: none
	}

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

	.show-when {
		grid-template-columns: 58px 34px;
		column-gap: 6px;
		width: 100px
	}

	.show-date .month {
		grid-column: 1;
		width: 58px
	}

	.show-date .day {
		grid-column: 2;
		width: 34px
	}

	.show-date .year {
		grid-column: 1/-1;
		grid-row: 2;
		justify-self: start;
		font-size: 11px;
		writing-mode: horizontal-tb;
		transform: none
	}

	.show-when .show-time {
		grid-row: 3;
		font-size: 13px;
		text-align: left
	}

	.contact-methods {
		grid-template-columns: 1fr
	}

	.contact-method:first-child {
		border-right: 0
	}

	.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
	}
}