:root {
	--white              : #f8f8f8;
	--ivory              : #fffff0;
	--cream              : #f5f0e1;
	--light-blue         : #cfe3f5;
	--gray-blue          : #8f9bb3;
	--bright-blue        : #3cb6f7;
	--midnight-blue      : #191970;
	--dark-midnight-blue : #003366;
	--copper             : #b87333;
	--burnt-orange       : #cc5500;
	--coral              : #ff7f50;
	--amber              : #ffa500;
	--orange             : #ff8c00;
	--gold               : #ffd700;

	--black-translucent  : oklch(0 0 0 / 42%);
	--height-button      : 44px;
	--box-shadow         : 1px 1px 5px #000;
	--border-radius      : 10px;
	--corner-shape       : squircle;
	--max-width-page     : 1024px;
}

@media ( width < 1024px ) {
	:root {
		--max-width-page : 100%;
	}
}

/* START GLOBAL */

html {
	overflow-y : scroll;
	min-height : 100%;
}

body {
	display           : block;
	min-height        : 100%;
	margin            : 0;
	padding           : 1rlh;
	background-color  : var(--dark-midnight-blue);
	background-image  : linear-gradient(to bottom, var(--dark-midnight-blue) 0%, var(--dark-midnight-blue) 40%, var(--gray-blue) 100%);
	background-repeat : no-repeat;
	color             : var(--ivory);
	font-family       : Verdana, Geneva, sans-serif;
	line-height       : 1.6;
}

h1, h2, h3 {
	color          : #eee;
	font-weight    : normal;
	letter-spacing : -0.02em;
	line-height    : 1.4;
	margin-block   : 1rlh;
}

h1 {
	margin-block-start : 0;
}

@media ( width <= 768px ) {
	h1 {
		margin-block-start : 1rlh;
	}
}

h1, h2, h3, h4, p, li, figcaption {
	max-width : 56ch;
}

img {
	/*border        : none;*/
	/*box-shadow    : var(--box-shadow);*/
	border-radius : var(--border-radius);
	corner-shape  : var(--corner-shape);
	/*border: 4px solid var(--black-translucent);*/
}

a, a:link, a:visited {
	color           : var(--ivory);
	outline         : none;
	text-decoration : underline;
}

a:visited {
	color : var(--ivory) !important;
}

ul {
	list-style-type      : square;
	padding-inline-start : 1.25rlh;

	li {
	}
}

a:hover {
	color : var(--amber);
}

/* END GLOBAL */

/* START CLASSES */

.resize {
	width  : 100%;
	height : auto;
}

/* END CLASSES */

/* START HEADER */

header {
	max-width  : var(--max-width-page);
	margin     : 1rlh auto 2rlh;
	text-align : center;

	a {
		display : block;
	}

	figure {
		margin : 0;

		img {
			display         : block;
			width           : 100%;
			height          : 196px;
			object-fit      : cover;
			object-position : center;
			/*border: 1px solid #cc550033;*/
		}

		figcaption {
			visibility : hidden;
			height     : 0;
		}
	}
}

/* END HEADER */

@media ( width <= 768px ) {
	header {
		margin : 0 auto 1rlh;
	}
}


/* START NAV */

nav {
	grid-area : nav;

	menu {
		list-style-type : none;
		padding-inline  : 0;
		padding-block   : 0;
		margin-block    : 0;

		li {
			display          : flex;
			margin-block-end : 4px;

			a, a:link, a:visited {
				display          : inline-block;
				width            : 100%;
				min-width        : 180px;
				max-width        : 180px;
				height           : var(--height-button);
				padding-inline   : 1rlh;
				align-content    : center;
				text-align       : center;
				background-color : var(--black-translucent);
				border-radius    : var(--border-radius);
				corner-shape     : var(--corner-shape);
				text-decoration  : none;
				/*background-image  : linear-gradient(to bottom, #003366 0%,  #829bb4 100%);*/
				/*background-repeat : no-repeat;*/
			}
		}
	}
}

.this-one-moment nav menu li:nth-of-type(1) a,
.duo-sessions nav menu li:nth-of-type(6) a,
.contact nav menu li:nth-of-type(8) a,
.live-in-juneau nav menu li:nth-of-type(3) a,
.jesse-lynch-trio nav menu li:nth-of-type(4) a,
.kate-wolf nav menu li:nth-of-type(5) a,
.sunlight nav menu li:nth-of-type(2) a,
.video nav menu li:nth-of-type(7) a {
	color : var(--amber) !important;
}

@media ( width <= 768px ) {
	nav {
		menu {
			li {
				a, a:link, a:visited {
					max-width : unset;
				}
			}
		}
	}
}

/* END NAV */

/* START MAIN */

main {
	display               : grid;
	grid-template-areas   : 'nav copy' 'nav songs';
	grid-template-columns : auto 1fr;
	grid-gap              : 0 2rlh;
	max-width             : var(--max-width-page);
	margin                : 1rlh auto;
}

@media ( width <= 768px ) {
	main {
		display : block;
	}
}

/* END MAIN (.container) */

.copy {
	grid-area : copy;

	img {
		float  : right;
		margin : 0 0 2rlh 2rlh;
	}
}

@media ( width <= 768px ) {
	.copy {
		img {
			float         : none;
			margin-inline : auto;
			margin-block  : 0;
		}
	}
}

section .musicians, section .credits, section .recordings, section .video {
	list-style-type      : square;
	padding-inline-start : 1.25rlh;
	line-height          : 1.3;
}

.video .songs {
	.grid {
		display               : grid;
		grid-template-columns : repeat(auto-fit, minmax(304px, 1fr));
		grid-gap              : 1rlh;
		max-width             : 628px;
	}

	li {
		margin-block : 0;
		width        : 304px;

		.video {
			display              : block;
			padding-inline-start : 0;
		}
	}
}

.copyright {
	margin-block-start : 2rlh;
}

::marker {
	font-size : 20px;
	color     : var(--white);
}

/* START PLAYER */

.songs {
	display          : flow-root;
	grid-area        : songs;
	margin-block-end : 2rlh;

	ol {
		list-style-type : none;
		padding         : 0;
	}

	li {
		display          : inline-block;
		margin-block-end : 4px;

		figure {
			width            : max-content;
			padding          : 14px 12px 10px 12px;
			margin-inline    : 0;
			margin-block     : 0;
			background-color : var(--black-translucent);
			border-radius    : var(--border-radius);
			corner-shape     : var(--corner-shape);

			figcaption {
				max-width     : 283px;
				margin-inline : .5rlh;
				margin-block  : .25rlh 0;
			}
		}
	}
}

/* START AUDIO */

/*noinspection CssInvalidPseudoSelector*/
audio::-webkit-media-controls-panel {
	background-color : transparent;
}

.player {
	overflow      : hidden;
	display       : flex; /* or block, with a set width */
	width         : fit-content;
	height        : 31px;
	/*margin-inline: auto;*/
	/*background: oklch(0 0 0 / 42%);     !* match the controls so the corners don't look cut off *!*/
	border-radius : var(--border-radius);
	corner-shape  : var(--corner-shape);

	audio {
		display   : inline-block;
		width     : 380px;
		max-width : 400px;
		height    : auto;
	}
}

@media ( width <= 768px ) {
	.songs {
		margin-block-start : 2rlh;
	}

	.player {
		width : fit-content;

		audio {
			width : 300px;
		}
	}
}

/* END AUDIO */

/* END PLAYER */

/* START FOOTER */

footer {
	width         : var(--max-width-page);
	height        : 26px;
	padding-block : 1rlh;
	margin        : 1rlh auto;
	color         : var(--ivory);
	text-align    : center;
	font-size     : small;
	border-top    : 1px solid var(--light-blue);
}

/* END FOOTER */