:root {
	--color-bg: #fff;
	--color-accent: #86d7af;
	--max-width: 1236px;
}

@font-face {
	font-family: 'berthold_akzidenz_grotesk_bIt';
	src: url('fonts/berthold-akzidenz-grotesk-be-italic.woff') format('woff');
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	background-color: var(--color-bg);
	color: var(--color-accent);
	text-align: center;
	font-family: 'berthold_akzidenz_grotesk_bIt', Helvetica, sans-serif;
	font-style: italic;
	font-weight: bold;
	letter-spacing: .2em;
}

a, a:visited {
	color: var(--color-accent);
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
a:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
	text-decoration: underline;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

.wrap {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 clamp(1em, 2vw, 2em);
}

/* Header ============================================================= */

.banner {
	padding-block: 0 .5em;
}
.wordmark {
	margin: 0 auto;
	height: 9em;
	width: auto;
}
@media (max-width: 985px) {
	.wordmark {
		height: 7em;
	}
}

/* Main row: quote + events ============================================ */

.row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2em 0;
	align-items: start;
	padding-block: 1em;
}
@media (min-width: 720px) {
	.row {
		grid-template-columns: 1fr 1fr;
		gap: 0;
	}
}

.quote-col {
	text-align: right;
	margin: 0;
	padding: 0;
}
@media (min-width: 720px) {
	.quote-col {
		position: sticky;
		top: 1.5em;
	}
}
/* Closing note. Sits under the wordmark, above the quote. Prose at the body's
   .2em tracking is unreadable, so it gets tighter spacing and a measure cap.
   Centered, overriding the column's right alignment. */
.history {
	max-width: 34em;
	margin: 1.25em 0 2em auto;
	padding: 0 1.5em 0 2em;
	font-size: 1em;
	letter-spacing: .06em;
	line-height: 1.6;
	text-align: center;
}
@media (max-width: 985px) {
	.history {
		font-size: .9em;
	}
}
/* Single column: the note no longer sits against the flyer divider, so center
   the block itself the way the flyers are centered, not just its text. */
@media (max-width: 719px) {
	.history {
		margin-inline: auto;
		padding: 0 4em;
	}
}
@media (max-width: 420px) {
	.history {
		padding: 0 2em;
	}
}
.history-heading {
	margin: 0 0 .6em;
	font-size: 1.3em;
	letter-spacing: .12em;
}
.history p {
	margin: 0 0 .8em;
}
.history p:last-child {
	margin-bottom: 0;
	opacity: .8;
}

.quote {
	margin: 0;
	font-size: 1.75em;
	padding: 0 1.5em 1em 2em;
	line-height: 1.3em;
}
@media (max-width: 1235px) {
	.quote {
		font-size: 1.4em;
	}
}
@media (max-width: 985px) {
	.quote {
		font-size: 1.2em;
	}
}
@media (max-width: 719px) {
	.quote {
		padding: 0 4em 1em 4em;
	}
}
@media (max-width: 420px) {
	.quote {
		font-size: 1em;
		padding: 0 2em 1em 2em;
	}
}
.quote p {
	margin: 0;
}
.quote cite {
	display: block;
	margin-top: .6em;
	font-style: italic;
}

.events-col {
	text-align: center;
	margin: 0 0 0 1em;
	padding: 0;
	border-left: .15em solid var(--color-accent);
}
@media (max-width: 985px) {
	.events-col {
		margin-left: .6em;
		padding-left: .4em;
	}
}
@media (max-width: 719px) {
	.events-col {
		border: none;
		margin: 0;
		padding: 0;
	}
}

.show-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.show {
	width: 100%;
}
.show + .show {
	margin-top: .2em;
}

.show img {
	width: 80%;
	margin: .2em auto;
	background-color: color-mix(in srgb, var(--color-accent) 12%, white);
}
@media (max-width: 719px) {
	.show img {
		width: 90%;
	}
}

.show--text {
	width: 80%;
	margin: .6em auto;
	padding: 1.5em 1em;
	border-top: 1px solid var(--color-accent);
	border-bottom: 1px solid var(--color-accent);
}
@media (max-width: 719px) {
	.show--text {
		width: 90%;
	}
}
.show-title {
	margin: 0 0 .5em;
	font-size: 1.1em;
}
.show-desc {
	margin: 0;
	opacity: .85;
}
.show-meta {
	margin: .35em 0 0;
	font-size: .8em;
	letter-spacing: .05em;
}
.show-artist {
	opacity: .85;
}
.show-date {
	opacity: .6;
}

/* Footer ============================================================== */

.site-footer {
	padding-top: clamp(1.5em, 1em + 2vw, 3em);
	padding-bottom: 2em;
	text-align: center;
}
.address {
	margin: 0;
}
.address a {
	display: inline-block;
}
.monogram {
	height: clamp(4em, 3em + 2vw, 7em);
	width: auto;
	margin: 1em auto 0;
}