:root {

	/* COLOR PALETTE */
	--ink-black-oklch                      : oklch(0.169 0.0314 222.65);
	--ink-black-oklch-transparent          : oklch(0.169 0.0314 222.65 / 17.96%);
	--dark-teal-oklch                      : oklch(0.448474 0.080961 218.7343);
	--dark-cyan-oklch                      : oklch(0.6024 0.101 197.4);
	--pearl-aqua-oklch                     : oklch(0.8157 0.0701 171.43);
	--vanilla-custard-light-oklch          : oklch(0.9588 0.0677 91.51);
	--vanilla-custard-oklch                : oklch(0.884 0.0677 91.51);
	--golden-orange-oklch                  : oklch(0.7547 0.1621 71.4);
	--burnt-caramel-oklch                  : oklch(0.6189 0.1537 54.41);
	--rusty-spice-oklch                    : oklch(0.5378 0.1703 39.15);
	--oxidized-iron-oklch                  : oklch(0.4865 0.179 30.2);
	--brown-red-oklch                      : oklch(0.4544 0.1568 24.59);
	--white                                : oklch(100% 0 0);

	/* WEST AFRICAN */
	--background-color-td                  : oklch(97% 0 0 / 100%);
	--slap                                 : oklch(81% 0.075 90  / 100%);
	--tone                                 : oklch(81% 0.075 135 / 100%);
	--bass                                 : oklch(81% 0.075 180 / 100%);
	--shadow-darker                        : 1px 1px 2px oklch(55% 0 0);

	/* FONT FAMILIES & STYLES */
	--color-text-base                      : var(--ink-black-oklch);
	--font-family                          : system-ui;
	--font-weight-normal                   : normal;
	--line-height-base                     : 1.5;
	--line-height-base-heading             : 1.3;

	/* GLOBAL */
	--background-color-body                : var(--pearl-aqua-oklch);
	--color-outline                        : var(--oxidized-iron-oklch);
	--max-width-universal                  : 1024px;
	--max-width-universal-420              : 420px;
	--height-target                        : 50px;

	/* HEADER */
	--background-color-nav                 : var(--pearl-aqua-oklch);
	--background-color-nav-a               : var(--dark-teal-oklch);
	--color-nav-a                          : var(--vanilla-custard-oklch);
	--color-nav-a-bright                   : var(--vanilla-custard-light-oklch);
	--color-nav-a-selected                 : var(--vanilla-custard-light-oklch);

	/* NOTATION */
	--background-color-notation            : var(--white);
	--background-color-notation-active     : var(--white);
	--background-color-notation-button     : var(--ink-black-oklch);
	--background-color-notation-number     : var(--vanilla-custard-oklch);
	--color-notation-hand                  : var(--dark-teal-oklch);
	--color-notation-label                 : var(--ink-black-oklch);
	--color-notation                       : var(--color-text-base);
	--border-color-notation                : transparent;
	--fill-notation-svg                    : var(--vanilla-custard-oklch);
	--fill-notation-svg-visible            : var(--vanilla-custard-oklch);

	/* TABLE & BORDERS */
	--border-color                         : var(--ink-black-oklch-transparent);
	--border-table                         : 1px solid var(--border-color);
	--background-color-benefit             : oklch(0.9588 0.0677 91.51 / 40%);

	--linear-gradient-rainbow              : linear-gradient(
			to bottom,
			var(--pearl-aqua-oklch),
			var(--vanilla-custard-oklch),
			var(--golden-orange-oklch));

	--linear-gradient                      : linear-gradient(
			to bottom,
			oklch(99% 0 0 / 38%) 0%,
			oklch(99% 0 0 / 28%) 70%,
			oklch(99% 0 0 / 18%) 100%);

	--linear-gradient-notation             : linear-gradient(
			to bottom,
			oklch(0.9588 0.0677 91.51 / 40%) 0%,
			oklch(0.9588 0.0677 91.51 / 40%) 70%,
			oklch(0.884 0.0677 91.51 / 40%) 100%);

	--linear-gradient-button               : linear-gradient(
			to bottom,
			var(--burnt-caramel-oklch) 0%,
			var(--rusty-spice-oklch) 70%,
			var(--oxidized-iron-oklch) 100%);

	--linear-gradient-nav-a                : linear-gradient(
			to bottom,
			var(--dark-teal-oklch) 0%,
			var(--ink-black-oklch) 70%,
			var(--ink-black-oklch) 100%);

	--background-color-documentation-hover : transparent;

	/* LINKS */
	--color-link                           : var(--brown-red-oklch);

	/* BOX-SHADOW */
	--box-shadow                           : none;
	--box-shadow-larger                    : 1px 1px 5px oklch(0 0 0 / 60%);
	--drop-shadow                          : drop-shadow(4px 4px 12px oklch(0 0 0 / 20%));

	/* BORDER-RADIUS */
	--border-radius                        : 8px;

	/* TEXT HORIZONTAL MARGIN */
	--margin-horizontal                    : 7px;

	/* BUTTONS */
	--background-color-button              : var(--burnt-caramel-oklch);
	--color-button                         : var(--color-nav-a);
	--color-button-secondary               : var(--ink-black-oklch);

	--arrow-right                          : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='closed' width='12px' height='12px' viewBox='0 0 10 10'%3E%3Ctitle%3Eclosed%3C/title%3E%3Cg stroke='none' stroke-width='1' fill='%23001219' fill-rule='evenodd'%3E%3Cg transform='translate(-14.000000 -5.000000)' fill-rule='nonzero'%3E%3Cpolygon transform='translate(19.000000 10.000000) rotate(-270.000000) translate(-19.000000 -10.000000) ' points='19 5 24 15 14 15'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	--arrow-down                           : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='expand' width='12px' height='12px' viewBox='0 0 10 10'%3E%3Ctitle%3EExpand%3C/title%3E%3Cg stroke='none' stroke-width='1' fill='%23001219' fill-rule='evenodd'%3E%3Cg transform='translate(-14.000000 -5.000000)' fill-rule='nonzero'%3E%3Cpolygon transform='translate(19.000000 10.000000) rotate(-180.000000) translate(-19.000000 -10.000000) ' points='19 5 24 15 14 15'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

	--scrollbar-thumb-background-color     : oklch(0 0 0 / 40%);
	--scrollbar-thumb-border               : 1px solid var(--ink-black-oklch);

	--corner-shape                         : unset;
	--box-shadow-nav                       : 0 18px 48px 0 oklch(0% 0 0 / 100%);

}

/* BREAKPOINTS */
/* 360px;  */
/* 768px;  */
/* 1024px; */
/* 1366px; */
/* 1920px; */
/* 55–75 characters per line */

/* START HTML & BODY */

button {
	font-family : inherit;
	font-size   : 100%;
	line-height : 1.15;
	margin      : 0;
}

html {
	min-height        : 100vh;
	padding           : 0;
	margin            : 0;
	background-color  : var(--background-color-body);
	background-image  : var(--linear-gradient-rainbow);
	background-repeat : no-repeat;
	background-size   : 100%;

}

body {
	padding                  : 0;
	margin                   : 0 auto;
	color                    : var(--color-text-base);
	font-family              : var(--font-family), sans-serif;
	font-kerning             : none;
	font-weight              : var(--font-weight-normal);
	font-style               : normal;
	font-size                : 16px;
	line-height              : var(--line-height-base);
	-webkit-text-size-adjust : 100%;
	overflow-y               : scroll;
	scrollbar-gutter         : stable both-edges;
}

* {
	box-sizing      : border-box;
	scrollbar-color : var(--scrollbar-thumb-background-color) transparent;
	scrollbar-width : thin;
}

::-webkit-scrollbar {
	width  : 9px;
	height : 9px;
}

::-webkit-scrollbar-thumb {
	background-color : var(--scrollbar-thumb-background-color);
	border           : var(--scrollbar-thumb-border);
	border-radius    : 3px;
}

::-webkit-scrollbar-track {
	background : transparent;
}

/* END HTML & BODY */

/* START HEADINGS */

h1, h2, h3, h4 {
	line-height  : var(--line-height-base-heading);
	text-wrap    : balance;
	margin-block : 1rlh;
}

/* END HEADINGS */

/* START LINKS */

a,
a:link,
a:visited,
a:active {
	color : var(--color-link);
}

/* END LINKS */

:focus-visible {
	outline-width : 2px;
	outline-style : dashed;
	position      : relative;
	z-index       : 1;
}

button:focus-visible, .button:focus-visible, a.button:focus-visible, header a:focus-visible {
	outline-color  : var(--vanilla-custard-oklch);
	outline-offset : -4px;
}

.button.secondary:focus-visible, a.button.secondary:focus-visible {
	outline-color  : var(--color-outline);
	outline-offset : -4px;
}

a.footer:focus-visible, summary:focus-visible {
	outline-color  : var(--color-outline);
	outline-offset : -3px;
}

a:focus-visible {
	outline-color  : var(--color-outline);
	outline-offset : 2px;
}

/* START PARAGRAPHS */

p {
	max-width    : 60ch;
	text-wrap    : pretty;
	margin-block : 1rlh;
}

/* END PARAGRAPHS */

/* START LISTS */

ul {
	padding-inline-start : 1.4rem;
	margin-block         : 1rlh 1.2rlh;
	margin-inline        : 0;
	list-style-type      : disc;

	li {
		max-width : 55ch;
		text-wrap : pretty;
	}
}

ol {
	list-style-type : decimal;
}

/* END LISTS */

hr {
	height       : 0;
	border-style : solid;
	border-color : var(--color-text-base);
	margin       : 2em 0;
}

section {
	margin-block : 2rlh;
}

iframe {
	border-radius    : calc(var(--border-radius) * 2);
	background-color : var(--vanilla-custard-oklch);
}

body > footer {
	position : sticky;
	top      : 100vh;
}

header, nav, main, footer {
	max-width : var(--max-width-universal);
	margin    : 0 auto;
}

footer {
	container  : footer / inline-size;
	padding    : 2rlh 0 1rlh 0;
	text-align : center;

	small {
		display     : block;
		line-height : 1.5;
	}

	menu {
		display         : block;
		width: fit-content;
		justify-content : center;
		list-style-type : none;
		margin-inline   : auto;
		margin-block    : 0 2rlh;
		padding         : 0;

		li {
			display            : flow-root;
			min-height         : var(--height-target);
			place-items        : center;
			border-width       : 0 0 1px 0;
			border-style       : solid;
			border-color       : oklch(0.4544 0.1568 24.59 / 42%);

			a {
				display        : flow-root;
				width          : 100%;
				line-height    : var(--height-target);
				padding-inline : 1rlh;
				font-weight    : bold;
				font-size      : 1.1em;
				/*line-height    : calc(var(--height-target) - 6px);*/
				border-radius  : var(--border-radius);
				corner-shape   : var(--corner-shape);
			}
		}

		li:last-of-type {
			border : none;
		}
	}
}

main {
	padding : 0 1rlh;
}

[popover] {
	opacity             : 0;
	transform           : scale(0.8);
	transition-property : opacity, transform, overlay, display, box-shadow;
	transition-duration : 0.3s;
	transition-behavior : allow-discrete;
}

[popover]:popover-open {
	opacity    : 1;
	transform  : scale(1);
	box-shadow : var(--box-shadow-nav);
}

@starting-style {
	[popover]:popover-open {
		opacity    : 0;
		transform  : scale(0.8);
		box-shadow : none;
	}
}

/* START MEDIA QUERY MOBILE */

@container ( max-width : 1024px ) {
	p {
		max-width : none;
	}

	section {
		margin-block : 1rlh;
	}

	footer {
	}
}

/* END MEDIA QUERY MOBILE */

/* START CLASSES */

a.button, a.button:visited, a.button:hover, a.button:focus, a.button:active, #intentions button, button.button {
	display          : block;
	width            : fit-content;
	padding          : 0 3rlh;
	margin           : 1rlh 0;
	min-height       : var(--height-target);
	align-content    : center;
	text-align       : center;
	font-size        : 1.1rem;
	font-weight      : bold;
	text-decoration  : none;
	background-color : var(--background-color-button);
	background-image : var(--linear-gradient-button);
	color            : var(--color-button);
	box-shadow       : var(--box-shadow);
	border-radius    : var(--border-radius);
	corner-shape     : var(--corner-shape);
	appearance       : none;
	border           : none;
}

a.button.secondary, a.button.secondary:visited, a.button.secondary:hover, a.button.secondary:focus, a.button.secondary:active, #intentions .button.secondary, button.button.secondary {
	color            : var(--color-button-secondary);
	background-color : transparent;
	background-image : var(--linear-gradient);
	border-width     : 1px;
	border-style     : solid;
	border-color     : oklch(0.4544 0.1568 24.59 / .15);
}

.important {
	color : var(--rusty-spice-oklch);
}

.calendar {
	section {
		margin-block : 1rlh;
		border-width : 0 0 0 0;
		border-style : solid;
		border-color : var(--oxidized-iron-oklch);

		h2 {
			margin-block-start : 0;
		}

		h3 {
			color : var(--oxidized-iron-oklch);
		}

		p:last-of-type {
			margin-block-end : 0;
		}

		/* Links often sit on their own line: give them a 24px tap target (WCAG 2.5.8) */

		a {
			display       : inline-block;
			padding-block : 3px;
		}
	}
}

.monospace {
	font-family    : 'Courier New', monospace;
	letter-spacing : -.5px;
}

.inline-block {
	display : inline-block;
}

.section-highlighted {
	background-color : transparent;
	background-image : var(--linear-gradient);
	padding          : 1rlh;
	margin-block     : 0;
	border-radius    : var(--border-radius);
}

.highlight {
	color       : var(--ink-black-oklch);
	font-weight : bold;
}

.two-columns {
	column-count : 2;
	column-gap   : 2rlh;

	p:first-child {
		margin-block-start : 0;
	}
}

.hide {
	display : none !important;
}

/* START MEDIA QUERY MOBILE */

@media ( max-width : 768px ) {
	a.button, a.button:visited, a.button:hover, a.button:focus, a.button:active, #intentions button, #intentions .button.secondary {
		width     : 100%;
		font-size : 1.2em;
	}

	.two-columns {
		column-count : 1;
	}
}

/* END MEDIA QUERY MOBILE */

/* END CLASSES */

/* START HEADER */

header.main {
	display               : grid;
	grid-area             : div;
	grid-template-areas   : 'logo title button';
	grid-template-columns : 4rlh 1fr 4rlh;
	grid-template-rows    : auto;
	max-width             : calc(var(--max-width-universal) - 1rlh);
	height                : var(--height-target);
	margin-block          : 1rlh;
	background-color      : var(--background-color-nav-a);
	background-image      : var(--linear-gradient-nav-a);
	border-radius         : var(--border-radius);
	corner-shape          : var(--corner-shape);

	> a {
		grid-area       : logo;
		display         : flex;
		justify-content : center;
		position        : relative;
		margin-inline   : 0;
		margin-block    : 0;
		border-width    : 0 1px 0 0;
		border-style    : solid;
		border-color    : var(--dark-teal-oklch);
		border-radius   : var(--border-radius) 0 0 var(--border-radius);
		corner-shape    : var(--corner-shape);

		figure {
			display       : flex;
			margin-inline : 0;
			margin-block  : 0;

			svg {
				position   : absolute;
				left       : 5px;
				top        : -15px;
				width      : calc(var(--height-target) * 1.25);
				height     : calc(var(--height-target) * 1.25);
				place-self : center;
				filter     : var(--drop-shadow);
			}
		}
	}

	div {
		grid-area       : title;
		display         : flex;
		justify-content : center;
		border-width    : 0 1px 0 0;
		border-style    : solid;
		border-color    : var(--dark-teal-oklch);

		strong {
			place-self   : center self-start;
			margin-block : 0;
			color        : var(--color-nav-a);
			font-size    : 1.3em;
		}
	}

	button {
		grid-area             : button;
		display               : grid;
		grid-template-columns : auto;
		grid-template-rows    : 4px 4px 4px;
		grid-gap              : 3px;
		align-content         : center;
		justify-content       : center;
		margin                : 0 0 0 0;
		padding               : 0;
		appearance            : none;
		background-color      : transparent;
		corner-shape          : var(--corner-shape);
		border-radius         : 0 var(--border-radius) var(--border-radius) 0;
		border                : 0;

		span {
			background-color : var(--color-nav-a);
			width            : 28px;
			height           : 4px;
			border-radius    : 2px;
			corner-shape     : var(--corner-shape);
		}
	}

	nav {
		width            : 310px;
		padding          : 1rlh;
		margin-top       : 5rlh;
		background-color : var(--background-color-nav);
		border           : none;
		border-radius    : var(--border-radius);
		corner-shape     : var(--corner-shape);

		menu {
			display          : grid;
			grid-gap         : 3px;
			align-items      : center;
			list-style-type  : none;
			padding          : 0;
			margin           : auto;
			background-color : transparent;

			li {
				height        : var(--height-target);
				font-weight   : bold;
				text-align    : center;
				align-content : center;

				a.button, a.button:visited, a.button:active, #intentions button, button.button {
					width            : auto;
					margin           : 0;
					background-color : var(--background-color-nav-a);
					background-image : var(--linear-gradient-nav-a);
					color            : var(--color-nav-a-bright);
				}
			}
		}
	}
}

/* The current page's menu link, marked by aria_current() in menu.php */
header.main nav menu li a[aria-current="page"] {
	text-decoration : none;
	cursor          : default;
	color           : var(--color-nav-a-selected);
}

footer menu li a[aria-current="page"] {
	text-decoration : none;
	cursor          : default;
}

/* START MEDIA QUERY MOBILE */

@media ( width <= 1024px ) {
	header.main {
		margin-block-start : 3px;
		margin-inline      : 3px;

		> a {
			figure {

				svg {
					position : relative;
					left     : unset;
					top      : unset;
					width    : calc(var(--height-target) - 8px);
					height   : calc(var(--height-target) - 8px);
				}
			}
		}

		nav {
			margin-top : 4rlh;
		}
	}
}

/* END MEDIA QUERY MOBILE */

/* END HEADER */

/* START DOCUMENTATION */

details.documentation {
	margin            : .7rlh auto 0;
	max-width         : var(--max-width-universal-420);
	border-width      : 0;
	border-style      : solid;
	border-color      : var(--border-color);
	background-color  : transparent;
	background-image  : var(--linear-gradient);
	scroll-margin-top : 1rlh;
	box-shadow        : var(--box-shadow);
	border-radius     : var(--border-radius);
	clear             : both;

	&:first-of-type {
		margin-block-start : 3rlh;
	}

	&:last-of-type {
		margin-block-end : 3rlh;
	}

	summary {
		font-weight   : bold;
		font-size     : 1.1rem;
		cursor        : default;
		border-radius : var(--border-radius);
		height        : var(--height-target);
		align-content : center;
	}

	summary:hover {
		background-color : var(--background-color-documentation-hover);
	}

	section {
		margin-block   : .5rlh;
		padding-inline : 1rlh;

		h3 {
			margin-block-start : .5rlh;
		}
	}

	.detail-caveat {
		border-width      : 0 0 1px 0;
		border-style      : solid;
		border-color      : var(--border-color);
		padding-block-end : 0;
		margin-block-end  : 1.25rlh;
	}

	.detail-grid {
		display               : block;
		grid-template-areas   : 'col-1 col-2 col-3';
		grid-template-columns : 1fr 1fr 1fr;
		grid-gap              : 1rlh;
		margin                : 0;
		padding               : 0 0 2rlh 0;

		.col-1 {
			grid-area : col-1;
		}

		.col-2 {
			grid-area : col-2;
		}

		.col-3 {
			grid-area : col-3;
		}
	}

	.detail-legend {
		margin-top : .25rem;

		.col-2 {
			color : var(--color-notation-hand);
		}

		.detail-grid {
			border-width   : 0 0 1px 0;
			border-style   : solid;
			border-color   : var(--border-color);
			padding-bottom : 1rlh;
		}

		ul {
			padding       : 0;
			margin-block  : 1rlh;
			margin-inline : 1rlh;
			width         : fit-content;
		}

		strong {
			font-size : 1.2rem;
		}

		small {
			margin  : 0 1rem 1rem 1rem;
			display : inline-block;
		}
	}

	.detail-counting {
		padding-top : .5rlh;
	}

	p {
		margin : 1rlh 0;
	}

	ul {
		list-style-type : none;
		padding-left    : 0;
	}

	li {
		max-width : none;

		span {
			margin-block : 1em;
		}

		.groups {
			display     : block;
			font-weight : bold;
			text-align  : center;
		}

		.signature {
			display    : block;
			text-align : center;

			span {
				margin-inline : .25rlh;
			}
		}

		.count-aloud {
			display    : none;
			margin     : .75rlh auto;
			font-size  : small;
			text-align : center;
		}
	}

	.counting {
		display     : block;
		margin      : 1rlh 0;
		font-weight : bold;
		font-size   : 1rem;
		text-align  : center;

		.quarter-note {
			display      : block;
			margin-block : .25em;
		}
	}

	.notation {
		padding               : 10px 15px;
		margin                : .5rlh 0 1rlh 0;
		grid-template-columns : 1fr;
		grid-template-rows    : 1fr;
		grid-template-areas   : 'hand' 'sound';
		height                : auto;
	}

	.detail-counting .notation {
		grid-template-areas : 'sound';
		height              : auto;
	}
}

details[open].documentation {
	summary:hover {
		background-color : transparent;
	}
}

summary {
	user-select           : none;
	display               : grid;
	grid-template-columns : 38px auto min-content;
	grid-template-rows    : 44px;
	align-items           : center;
}

summary::-webkit-details-marker {
	display : none;
}

summary::marker {
	display : none;
}

summary > * {
	display : inline;
}

details > summary::before {
	content       : var(--arrow-right);
	line-height   : 0;
	align-self    : center;
	justify-self  : center;
	padding       : 0;
	width         : 38px;
	height        : 38px;
	display       : grid;
	place-content : center;
}

details > summary:dir(rtl)::before {
	rotate : 180deg;
}

details[open] > summary::before {
	content : var(--arrow-down);
}

details[open] > summary:dir(rtl)::before {
	rotate : none;
}

details#use_offline.documentation,
details#did_you_know.documentation {
	ul, ol {
		padding-inline-start : 1.2rlh;
	}

	ul {
		list-style-type : initial;
	}

	section {
		padding-block-end : 1rlh;

		p {
			margin-block-start : .5rlh
		}
	}
}

/* START MEDIA QUERY MOBILE */

@media ( max-width : 768px ) {
	details.documentation {
		section {
			padding-inline : 1rlh;
		}

		.detail-legend {
			.detail-grid {
				.col-2 {
					margin-block : 0 1.5rlh;
				}
			}
		}

		.detail-counting {
			padding-top : 1rem;
		}

		.detail-counting > p {
			max-width : initial;
		}

		.detail-counting li {
			margin-bottom : 3rem;
		}

		.detail-counting li:last-child {
			margin-bottom : 0;
		}

		.detail-grid {
			display : block;
		}

		.notation {
			margin : 1rlh 0;
		}
	}
}

/* END MEDIA QUERY MOBILE */

/* END DOCUMENTATION */

/* START MUSICAL NOTATION */

.music-notation-list {
	width           : auto;
	padding-left    : 0;
	margin-block    : 1rlh;
	list-style-type : none;

	li {
		display       : flex;
		margin-bottom : .75rlh;
		text-align    : center;
		border-style  : solid;
		border-color  : var(--border-color);
		border-width  : 0 0 0 0;
	}

	li:last-child {
		border         : none;
		padding-bottom : 0;
		margin-bottom  : 0;
	}

	/* Beats without audio get the same end cap, without a button */

	li button, li .audio-placeholder {
		grid-area        : play-button;
		display          : flex;
		justify-content  : center;
		align-items      : center;
		padding          : 0;
		margin           : 0 auto;
		width            : 43px;
		font-size        : 1rem;
		background-color : var(--background-color-notation-button);
		background-image : var(--linear-gradient-nav-a);
		border-width     : 0 0 0 1px;
		border-style     : solid;
		border-color     : var(--border-color-notation);
		border-radius    : 0 var(--border-radius) var(--border-radius) 0;
	}

	li button:focus-visible {
		z-index : 5;

		svg {
			fill : var(--fill-notation-svg-visible);
		}
	}

	li button svg {
		width  : 24px;
		height : 24px;
		fill   : var(--fill-notation-svg);
	}

	li button .button-play {
		display : block;
	}

	li button .button-pause {
		display : none;
	}

	li button.play .button-play {
		display : none;
	}

	li button.play .button-pause {
		display : block;
	}
}

.notation:focus, .notation:focus-visible, .notation.active {
	position         : relative;
	z-index          : 1;
	background-color : var(--background-color-notation-active);
	background-image : none;
	box-shadow       : var(--box-shadow-larger);
	outline          : 5px solid var(--color-outline);
}

.notation {
	position              : relative;
	display               : grid;
	grid-template-columns : 28px 1fr 43px;
	grid-template-rows    : 1fr .9fr;
	grid-template-areas   : 'number hand play-button' 'number sound play-button';
	flex-basis            : 100%;
	height                : 4rlh;
	margin                : 0;
	white-space           : nowrap;
	background-color      : var(--background-color-notation);
	background-image      : var(--linear-gradient-notation);
	border                : 0 solid var(--border-color);
	scroll-margin-top     : 1rem;
	box-shadow            : var(--box-shadow);
	border-radius         : var(--border-radius);
	color                 : var(--color-notation);
	user-select           : none;
	-webkit-user-select   : none;

	.number {
		grid-area        : number;
		color            : var(--vanilla-custard-oklch);
		background-color : var(--background-color-notation-number);
		background-image : var(--linear-gradient-nav-a);
		font-size        : .8rem;
		font-weight      : bold;
		line-height      : 4rlh;
		text-align       : center;
		border-width     : 0 1px 0 0;
		border-style     : solid;
		border-color     : var(--border-color-notation);
		border-radius    : var(--border-radius) 0 0 var(--border-radius);
	}

	.label {
		position             : absolute;
		top                  : 0;
		left                 : 28px;
		right                : 43px;
		width                : fit-content;
		padding-inline-start : .25rlh;
		font-size            : x-small;
		color                : var(--color-notation-label);
	}

	.hand {
		grid-area    : hand;
		align-self   : end;
		justify-self : start;
		color        : var(--color-notation-hand);
	}

	.sound {
		grid-area    : sound;
		align-self   : start;
		justify-self : start;
	}

	.hand, .sound {
		position       : relative;
		display        : block;
		font-family    : "Courier New", monospace;
		font-weight    : bold;
		font-size      : 1.1rem;
		line-height    : 1.25;
		letter-spacing : 3px;
		margin         : 0 auto;
		width          : max-content;
		text-align     : left;
	}

	.tight {
		line-height : 1em;
	}
}

/* END MUSICAL NOTATION */

/* START NOTES */

.notes {
	display               : grid;
	grid-template-columns : auto;
	grid-gap              : 18px;
	width                 : calc(100vw - 18px);
	max-width             : var(--max-width-universal-420);
	margin                : 18px auto 0 auto;
	padding               : 0;

	h2 {
		margin : 0 var(--margin-horizontal);
	}

	.note__section {
		margin            : 0;
		padding           : 0;
		word-break        : break-word;
		height            : auto;
		counter-increment : note;

		dl {
			display               : grid;
			grid-template-columns : max-content auto;
			gap                   : 0 .5rlh;
			font-size             : smaller;
			margin-block          : .5rlh 1rlh;
			margin-inline         : var(--margin-horizontal);

			dt, dd {
				margin : 0;
			}

			dt::after {
				content : ':';
			}
		}
	}

	section:last-of-type .music-notation-list {
		margin-block-end : 0;
	}
}

/* START MEDIA QUERY MOBILE */

@media ( max-width : 768px ) {
	.note__section {
		height : fit-content;
	}
}

/* END MEDIA QUERY MOBILE */

/* END NOTES */

/* START PRACTICE BEATS */

@keyframes fadeOut {
	0% {
		visibility : visible;
		opacity    : 1;
	}

	50% {
		visibility : visible;
		opacity    : 0;
	}

	100% {
		visibility : hidden;
		opacity    : 0;
	}
}

.practice {

	h1 {
		width          : calc(100vw - 18px);
		max-width      : var(--max-width-universal-420);
		padding-inline : var(--margin-horizontal);
		margin-inline  : auto;
	}

	.clear-selections {
		align-items       : center;
		scroll-margin-top : .5rem;

		button {
			margin-inline : auto;
			margin-block  : 2rlh 1rlh;
		}

		span {
			text-align        : center;
			display           : flex;
			justify-content   : center;
			padding-block-end : 2px;
			margin            : 0 13px;
			line-height       : 1;
			font-size         : .6rem;

			code {
				display          : flex;
				align-items      : center;
				visibility       : hidden;
				opacity          : 0;
				background-color : var(--background-color-notation);
				background-image : var(--linear-gradient-notation);
				box-shadow       : none;
				border           : none;
				border-radius    : calc(var(--border-radius) / 2);
				height           : 28px;
				width            : auto;
				padding          : 0;
				font-size        : .7rem;
				font-weight      : normal;
				line-height      : normal;
				color            : var(--color-text-base);

				span {
					width            : 1rlh;
					height           : 100%;
					margin-inline    : 0 1rlh;
					border-radius    : calc(var(--border-radius) / 2) 0 0 calc(var(--border-radius) / 2);
					background-color : var(--background-color-notation-button);
					background-image : var(--linear-gradient-nav-a);
				}

				span:last-of-type {
					margin-inline : 1rlh 0;
					border-radius : 0 calc(var(--border-radius) / 2) calc(var(--border-radius) / 2) 0;
				}
			}

			code.show {
				opacity         : 1;
				visibility      : visible;
				animation       : fadeOut .5s ease-in;
				animation-delay : 3s;
			}

			code.highlight {
				background-color : var(--white);
				background-image : none;
				outline          : 5px solid var(--color-outline);
				box-shadow       : var(--box-shadow-larger);
			}
		}
	}
}

/* START MEDIA QUERY MOBILE */

@media ( max-width : 768px ) {
	body.practice {
		main {
			padding : 0 9px;
		}
	}
}

/* END PRACTICE BEATS */

/* START LEARN */

.instructors {

	h1 {
		margin-block : 1rlh 1.3rlh;
	}

	.grid-instructors {
		display               : grid;
		grid-template-areas   : 'wade joe jim' 'calendar calendar calendar';
		grid-template-columns : 1fr 1fr 1fr;
		grid-gap              : 1rlh;

		h2 {
			margin-block : 0;
		}

		section {
			max-width : 60ch;

			&.wade {
				grid-area : wade;
			}

			&.joe {
				grid-area : joe;
			}

			&.jim {
				grid-area : jim;
			}

			&.calendar {
				grid-area    : calendar;
				justify-self : center;
				max-width    : unset;
				width        : 100%;
				margin-block : 0;
				text-align   : center;

				h3 {
					margin-block : 0;
				}
			}
		}

		.location {
			a {
				text-decoration : none;
			}
		}
	}

	.grid-alternative-instructors {
		section:first-child {
			margin-block-start : 2rlh;

			h2 {
				margin-block-end : revert;
			}
		}
	}

	ul {
		list-style-type : none;
		padding         : 0;
		line-height     : 1.4;

		li {
			margin-block : .5rlh;

			strong {
				color            : var(--dark-teal-oklch);
				display          : block;
				font-size        : 1.2em;
				margin-block-end : .25rlh;
			}
		}
	}

	.two-columns {
		p:first-child {
			margin-block-start : 0;
		}

		p:nth-child(3) {
			break-inside : avoid;
		}
	}
}

/* START MEDIA QUERY MOBILE */

@media ( max-width : 768px ) {
	.instructors {
		.grid-instructors {
			grid-template-areas   : 'wade' 'joe' 'jim' 'calendar';
			grid-template-columns : 1fr;
			grid-gap              : 1rlh 0;

			section {
				max-width : none;
			}
		}
	}
}

/* END MEDIA QUERY MOBILE */

/* END LEARN */

/* START JOIN */

.join {

	h1 {
		margin-block : 1rlh 1.3rlh;
	}

	main > div {
		display               : grid;
		grid-template-areas   : 'join what_to_bring' 'maps what_to_bring';
		grid-template-columns : 1.35fr 2fr;
		grid-template-rows    : auto auto;
		grid-gap              : 0 3rlh;

		section {

			h2 {
				margin-block-start : 0;
			}
		}
	}

	#join {
		display       : flow-root;
		grid-area     : join;
		padding-block : 0;
		margin-block  : 0;

		ul {
			margin-block-start : 0;

			li {
				max-width : unset;

				a {
					margin-block : .69rlh;
					width        : auto;
				}

				&:first-of-type a {
					margin-block-start : 0;
				}

				&:last-of-type a {
					margin-block-end : 0;
				}
			}
		}
	}

	#calendar {
		grid-area        : calendar;
		margin-block-end : 0 !important;
	}

	#maps {
		grid-area     : maps;
		padding-block : 0;
		margin-block  : 0;

		ul {
			margin-block : 0;

			li {
				max-width : unset;

				a {
					margin-block : .69rlh;
					width        : auto;
				}

				&:first-of-type a {
					margin-block-start : 0;
				}

				&:last-of-type a {
					margin-block-end : 0;
				}
			}
		}
	}

	#what_to_bring {
		grid-area    : what_to_bring;
		margin-block : 0;

		ul {
			list-style-type      : disc;
			padding-inline-start : revert;

			li::marker {
				color : var(--brown-red-oklch);
			}
		}
	}

	ul {
		list-style-type : none;
		padding-inline  : 0;
	}

}

.intentions {

	main {
		max-width : var(--max-width-universal-420);
	}

	ul {

		li::marker {
			color : var(--brown-red-oklch);
		}
	}

	p {
		margin-block : 1rlh;
	}

	a.button, a.button:visited, a.button:hover, a.button:focus, a.button:active, #intentions button, button.button {
		width : auto;
	}

}

/* START MEDIA QUERY MOBILE */

@media ( max-width : 768px ) {

	.join {

		main > div {
			display : block;
		}

		#join, #maps, #what_to_bring, #guidelines, #intentions {
			margin-block-start : 1rlh;
		}

		#what_to_bring {
			padding-block-start : 0;
			margin-block        : 2rlh;

			h2 {
				margin-block : 0;
			}
		}
	}
}

/* END MEDIA QUERY MOBILE */

/* END JOIN */

/* START BUY */

.buy {

	section {
		margin-block-start : 1rlh;
	}

	.store {
		display : block;

		.button {
			margin : 1rlh 0;
		}
	}

	.djembe-comparison {
		border-collapse  : collapse;
		border-spacing   : 1px;
		width            : 100%;
		margin           : 2rlh 0;
		border           : var(--border-table);
		background-color : transparent;
		word-break       : initial;

		th {
			font-weight : bold;
			text-align  : left;
			padding     : 5px;
			border      : var(--border-table);
		}

		tr {
			border : var(--border-table);
		}

		tr:last-child {
			border : none;
		}

		tr td:first-child {
			font-weight : bold;
		}

		td {
			padding : 5px;
			border  : var(--border-table);
		}

		td:last-child {
			border : none;
		}

		.benefit {
			background-color : var(--background-color-benefit);
		}
	}
}

/* START MEDIA QUERY MOBILE */

@media ( max-width : 768px ) {
	.buy {
		.djembe-comparison {
			margin-block-start : 1rlh;
		}
	}
}

/* END MEDIA QUERY MOBILE */

/* END BUY */

/* START HIRE */

.hire {
	h2 {
		display      : inline-block;
		margin-block : 0;
	}

	main {
		div {
			display               : grid;
			grid-template-columns : 1fr 1fr;
			grid-template-rows    : auto;
			grid-gap              : 1rlh;
			margin-block          : 1.3rlh;

			.section-highlighted {

				h3 {
					margin-block-start : 0;
				}
			}
		}
	}

	p {
		max-width : none;
	}

	p:last-child {
		margin-block : 0;
	}

	ul {

		li::marker {
			color : var(--brown-red-oklch);
		}
	}
}

/* START MEDIA QUERY MOBILE */

@media ( max-width : 768px ) {
	.hire {

		main {
			div {
				grid-template-columns : 1fr;
				grid-template-rows    : auto;
				grid-gap              : 1rlh;
			}

			section {
				display : flow-root;
			}
		}
	}
}

/* END MEDIA QUERY MOBILE */

/* END HIRE */

/* START HI */

.hello {
	main {
		max-width     : var(--max-width-universal-420);
		margin-inline : auto;
	}

	section:first-of-type {
		margin-block : 1rlh;
	}
}

/* END HI */

/* START CONNECT */

.connect {
	main {
		max-width     : var(--max-width-universal-420);
		margin-inline : auto;

		h2, h3 {
			font-size: 1.2rem;
			text-align: center;
		}
	}

	section:first-of-type {
		margin-block-start : 1rlh;
	}

	section {
		a.button, a.button:visited, a.button:hover, a.button:focus, a.button:active {
			min-width : 338px;
			width     : auto;
		}
	}
}

/* END CONNECT */

/* START WEST AFRICAN */

.west-african {
	dl {
		display               : grid;
		grid-template-columns : max-content;
		grid-gap              : 0 .5rlh;
		align-content         : center;
		justify-content       : center;
		width                 : fit-content;
		margin-inline         : 1rlh;
		line-height           : 1.5;
		white-space           : nowrap;

		dt {
			min-width      : 20px;
			padding        : 2px 6px;
			margin         : 0 0 8px 0;
			font-size      : smaller;
			font-weight    : bold;
			text-align     : center;
			vertical-align : middle;
			border-radius  : 3px;
		}

		dd {
			grid-column-start : 2;
			padding           : 2px 6px;
			margin            : 0;
			font-size         : smaller;
			text-align        : start;
			border-radius     : 3px;
		}
	}

	details.legend {
		summary {
			font-weight : bold;
		}

		dt {
			background-color : var(--background-color-td);
			min-width        : 20px;
			padding          : 0 6px;
			line-height      : 1.5;
			text-align       : center;
			vertical-align   : middle;
			place-content    : baseline;
		}
	}

	section:first-of-type {
		margin-block-start : 1rlh;
	}

	.photocopies {
		display               : grid;
		grid-template-columns : repeat(auto-fit, minmax(150px, max-content));
		gap                   : 1rem;
		list-style-type       : none;
		padding               : 0;
		margin-block          : 2rlh 2rlh;

		&:last-of-type {
			margin-block-end : 3rlh;
		}

		li {
			text-align : center;
		}

		figure {
			display : inline-block;
			margin  : 0 0 0 0;

			img {
				width         : 150px;
				height        : 150px;
				object-fit    : cover;
				border-radius : var(--border-radius);
				corner-shape  : var(--corner-shape);
				border        : 2px solid var(--ink-black-oklch-transparent);
			}

			figcaption {
				font-weight : bold;
			}
		}
	}

	.PA, .TA {
		background-color : var(--slap) !important;
		box-shadow       : var(--shadow-darker) !important;
	}

	.GO, .DO {
		background-color : var(--tone) !important;
		box-shadow       : var(--shadow-darker) !important;
	}

	.GN, .DN {
		background-color : var(--bass) !important;
		box-shadow       : var(--shadow-darker) !important;
	}
}

/* END WEST AFRICAN */

/* START OPEN-HANDS */

.open-hands {

	details.documentation {
		display   : flow-root;
		margin    : 2rlh 0 2rlh 0;
		max-width : 75ch;

		header {
			p {
				margin-inline : 1rlh;
				margin-block  : 0 1rlh;
			}
		}
	}

	a.button {
		margin-block-end : 3rlh;
	}
}

/* END OPEN-HANDS */

.error {
	main {
		max-width : var(--max-width-universal-420);
	}
}