:root {
	--page-background: #e9e5dc;
	--pattern-color: rgba(68, 54, 37, 0.035);
	--image-shadow: 0 12px 28px rgba(30, 24, 16, 0.4), 0 4px 10px rgba(30, 24, 16, 0.26);
	--image-corner-radius: 8px;
	--table-spacing: 40px;
	--audio-width: 400px;
	--gallery-width: 1500px;
	--gallery-image-height: 200px;
	--accent-font: "Exo", sans-serif;
}

body {
	background-color: var(--page-background);
	background-image:
		linear-gradient(45deg, var(--pattern-color) 25%, transparent 25%, transparent 75%, var(--pattern-color) 75%),
		linear-gradient(-45deg, var(--pattern-color) 25%, transparent 25%, transparent 75%, var(--pattern-color) 75%);
	background-size: 72px 72px;
	background-position: 0 0, 36px 36px;
}

img {
	border-radius: var(--image-corner-radius);
	box-shadow: var(--image-shadow);
}

.site-table {
	border-spacing: var(--table-spacing);
	margin: 0 auto;
}

.site-table td {
	text-align: center;
}

.event-image {
	width: 800px;
}

.flyer-image {
	display: block;
	width: 100%;
}

.flyer-link {
	position: relative;
	display: inline-block;
	width: min(400px, 100%);
	border-radius: var(--image-corner-radius);
	isolation: isolate;
}

.postponement-stamp {
	position: absolute;
	z-index: 1;
	top: 47%;
	left: 50%;
	box-sizing: border-box;
	width: max-content;
	max-width: 88%;
	padding: 0.75em 0.9em;
	transform: translate(-50%, -50%) rotate(-5deg);
	border: 4px double #9b2635;
	border-radius: 16px;
	outline: 1px dashed rgba(155, 38, 53, 0.8);
	outline-offset: 3px;
	background: rgba(255, 248, 231, 0.97);
	box-shadow:
		inset 2px 2px 3px rgba(255, 255, 255, 0.95),
		inset -3px -3px 5px rgba(132, 32, 46, 0.2),
		5px 5px 0 #6f1925,
		0 11px 22px rgba(20, 12, 24, 0.44);
	color: #84202e;
	font-family: var(--accent-font);
	font-size: clamp(1rem, 4vw, 1.2rem);
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
	pointer-events: none;
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.flyer-link:hover .postponement-stamp,
.flyer-link:focus-visible .postponement-stamp {
	transform: translate(-50%, -50%) rotate(-2deg) scale(1.04);
	box-shadow:
		inset 2px 2px 3px rgba(255, 255, 255, 0.95),
		inset -3px -3px 5px rgba(132, 32, 46, 0.2),
		6px 6px 0 #6f1925,
		0 15px 28px rgba(20, 12, 24, 0.5);
}

.flyer-link:focus-visible {
	outline: 3px solid #84202e;
	outline-offset: 5px;
}

.audio-controls {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 24px;
	padding: 20px;
}

.audio-track {
	padding: 16px;
}

.audio-label {
	margin-bottom: 10px;
	font-size: 1.6em;
	font-weight: bold;
	font-family: var(--accent-font);
	letter-spacing: 0.03em;
}

.copyright {
	position: relative;
	left: 50%;
	width: 100vw;
	box-sizing: border-box;
	margin: 20px 0 48px;
	transform: translateX(-50%);
	text-align: center;
	font-family: var(--accent-font);
	font-size: 1.6em;
	font-weight: bold;
	letter-spacing: 0.06em;
	color: #493a2a;
}

.audio-track audio {
	width: var(--audio-width);
	max-width: 100%;
}

.image-row {
	width: var(--gallery-width);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.image-row img {
	height: var(--gallery-image-height);
	width: auto;
}

.popup-image {
	cursor: zoom-in;
	transition: transform 160ms ease, box-shadow 160ms ease;
}

.popup-image:hover,
.popup-image:focus-visible {
	transform: scale(1.04);
	box-shadow: 0 14px 32px rgba(30, 24, 16, 0.48), 0 5px 12px rgba(30, 24, 16, 0.3);
}

.image-viewer {
	position: fixed;
	max-width: min(92vw, 1500px);
	max-height: 90vh;
	padding: 48px 20px 20px;
	overflow: visible;
	border: 0;
	border-radius: 12px;
	background: #f7f5f0;
	box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
}

.image-viewer::backdrop {
	background: rgba(15, 13, 12, 0.82);
}

.image-viewer-image {
	display: block;
	max-width: 88vw;
	max-height: calc(90vh - 68px);
	width: auto;
	height: auto;
	object-fit: contain;
}

.image-viewer-close {
	position: absolute;
	top: 8px;
	right: 12px;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: #493a2a;
	color: #fff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
	.popup-image,
	.postponement-stamp {
		transition: none;
	}
}

.concert-banner {
	width: 1200px;
	opacity: 1;
}

.kufa-image {
	width: 800px;
}

.band-image {
	width: 600px;
}

.egg-image {
	width: 600px;
	opacity: 1;
}

@media (max-width: 900px) {
	body {
		margin: 16px;
	}

	.site-table,
	.site-table tbody {
		display: block;
		width: 100%;
	}

	.site-table {
		border-spacing: 0;
	}

	.site-table tr {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-bottom: 16px;
	}

	.site-table td {
		box-sizing: border-box;
		width: 100%;
		padding: 8px;
	}

	.event-image,
	.concert-banner,
	.kufa-image,
	.band-image,
	.egg-image {
		width: auto;
		max-width: 100%;
		height: auto;
	}

	.audio-controls {
		gap: 12px;
		padding: 8px;
	}

	.audio-track {
		box-sizing: border-box;
		width: min(100%, var(--audio-width));
		padding: 8px;
	}

	.audio-label {
		font-size: clamp(1rem, 4vw, 1.3rem);
	}

	.image-row {
		box-sizing: border-box;
		width: 100%;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
	}

	.image-row img {
		max-width: 100%;
		height: min(28vw, 140px);
		object-fit: contain;
	}

	.copyright {
		left: auto;
		width: 100%;
		font-size: 1rem;
		transform: none;
	}
}