:root {
	--color-page: #841d1d;
	--color-card: #fcf8d4;
	--color-text: #841d1d;
	--color-link: #456ec7;
	--color-link-hover: #ff6531;
	--font-stack: Verdana, Helvetica, Arial, sans-serif;
	--font-display: "Playfair Display", Georgia, serif;
	--max-width: 700px;
	--gutter: 1rem;
	--menu-width: 148px;
	--foto-overflow: 2rem;
}

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

html {
	background-color: var(--color-page);
}

body {
	margin: 0;
	padding: 0;
	color: var(--color-text);
	font-family: var(--font-stack);
	font-size: 16px;
	line-height: 1.5;
}

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

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

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

hr {
	border: 0;
	height: 2px;
	background-color: var(--color-page);
	margin: 1rem 0;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.layout {
	max-width: var(--max-width);
	margin: 0 auto;
	background-color: var(--color-card);
	display: grid;
	grid-template-columns: calc(var(--menu-width) + 2px) 1fr auto;
	grid-template-areas:
		"menu logo foto"
		"menu kop  foto"
		"content content content";
	align-items: center;
	column-gap: var(--gutter);
	padding: var(--gutter);
	position: relative;
}

.menu-toggle,
.menu-button {
	display: none;
}

.layout__menu {
	grid-area: menu;
	align-self: start;
}

.layout__logo {
	grid-area: logo;
	text-align: center;
	margin: 0;
}

.layout__kop {
	grid-area: kop;
	text-align: center;
	margin: 0;
	padding-bottom: 0.5rem;
}

.layout__foto {
	grid-area: foto;
	align-self: start;
	margin-right: calc(var(--foto-overflow) * -1);
}

.layout__foto img {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

.layout__content {
	grid-area: content;
	font-size: 0.85rem;
	padding: 1rem 0;
	clear: both;
}

.layout__content p {
	margin: 0 0 1rem;
}

.site-title {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: clamp(2.25rem, 6vw, 3.5rem);
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--color-text);
}

.page-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.25rem, 3.2vw, 1.875rem);
	line-height: 1.1;
	color: var(--color-text);
}

.menu {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--color-page);
	width: calc(var(--menu-width) + 2px);
}

.menu__link,
.menu__current {
	display: block;
	width: var(--menu-width);
	height: 21px;
	background-repeat: no-repeat;
	background-size: var(--menu-width) 21px;
	background-color: var(--color-card);
}

.menu__item--index .menu__link        { background-image: url("pic/menu-index.gif"); }
.menu__item--index   .menu__link:hover,
.menu__item--index   .menu__current   { background-image: url("pic/menu-index-over.gif"); }

.menu__item--biografie .menu__link    { background-image: url("pic/menu-biografie.gif"); }
.menu__item--biografie .menu__link:hover,
.menu__item--biografie .menu__current { background-image: url("pic/menu-biografie-over.gif"); }

.menu__item--repertoire .menu__link   { background-image: url("pic/menu-repertoire.gif"); }
.menu__item--repertoire .menu__link:hover,
.menu__item--repertoire .menu__current { background-image: url("pic/menu-repertoire-over.gif"); }

.menu__item--reacties .menu__link     { background-image: url("pic/menu-reacties.gif"); }
.menu__item--reacties .menu__link:hover,
.menu__item--reacties .menu__current  { background-image: url("pic/menu-reacties-over.gif"); }

.menu__item--audiovideo .menu__link   { background-image: url("pic/menu-audiovideo.gif"); }
.menu__item--audiovideo .menu__link:hover,
.menu__item--audiovideo .menu__current { background-image: url("pic/menu-audiovideo-over.gif"); }

.menu__item--contact .menu__link      { background-image: url("pic/menu-contact.gif"); }
.menu__item--contact .menu__link:hover,
.menu__item--contact .menu__current   { background-image: url("pic/menu-contact-over.gif"); }

.tabel {
	border-collapse: collapse;
	margin: 1rem auto;
	border: 1px solid var(--color-page);
}

.tabel th,
.tabel td {
	border: 1px solid var(--color-page);
	padding: 0.25rem 0.5rem;
	text-align: left;
	vertical-align: top;
}

.tabel th {
	background-color: var(--color-page);
	color: #fff;
	font-weight: bold;
}

.foto--left {
	float: left;
	margin: 0 1rem 0.5rem 0;
	max-width: 40%;
}

.foto--right {
	float: right;
	margin: 0 0 0.5rem 1rem;
	max-width: 40%;
}

.callout-card {
	border: 2px solid var(--color-page);
	padding: 1rem;
	margin: 1rem auto;
	max-width: 22rem;
	text-align: center;
}

.intro-list {
	font-size: 1.4em;
	margin: 1rem 0 0 4rem;
}

.intro-list ul {
	margin: 0;
	padding-inline-start: 1.5rem;
}

.media-section__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--color-text);
	margin: 1.5rem 0 0.5rem;
}

.media-list {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.media-item {
	margin: 0 0 1.5rem;
}

.media-item__caption {
	margin: 0.25rem 0 0;
	font-size: 0.85rem;
	max-width: 480px;
	color: var(--color-text);
}

.media-item__title {
	font-size: 1rem;
	font-weight: bold;
	margin: 0 0 0.25rem;
	color: var(--color-text);
}

.media-item__player {
	display: block;
	width: 100%;
	max-width: 480px;
}

video.media-item__player {
	background-color: #000;
}

.testimonial {
	margin: 0 0 1rem;
}

.testimonial__quote {
	margin: 0 0 0.5rem;
}

.testimonial__attribution {
	font-style: italic;
}

@media (max-width: 720px) {
	.layout {
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"button logo"
			"button kop"
			"menu   menu"
			"foto   foto"
			"content content";
		row-gap: 0.5rem;
	}

	.menu-button {
		display: inline-flex;
		grid-area: button;
		align-self: start;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 1px solid var(--color-page);
		background-color: var(--color-card);
		color: var(--color-text);
		cursor: pointer;
	}

	.menu-button:hover {
		background-color: var(--color-page);
		color: var(--color-card);
	}

	.menu-toggle:focus-visible ~ .menu-button {
		outline: 2px solid var(--color-link);
		outline-offset: 2px;
	}

	.layout__menu {
		grid-area: menu;
		overflow: hidden;
		max-height: 0;
		opacity: 0;
		transition: max-height 0.35s ease, opacity 0.25s ease;
	}

	.menu-toggle:checked ~ .layout__menu {
		max-height: 400px;
		opacity: 1;
	}

	.menu {
		width: 100%;
	}

	.menu__link,
	.menu__current {
		width: 100%;
		min-height: 48px;
		background-size: var(--menu-width) 21px;
		background-position: center;
	}

	.layout__foto {
		margin-right: 0;
		justify-self: center;
	}

	.intro-list {
		margin-left: 1rem;
	}
}