/*-  COLOR GUIDE
----------------------------------------------------------------------

DARK-BLUE/ BLACK		var(--color-dark)
LIGHT-BLUE/ GREY		var(--color-light-blue)
HOVER for LIGHT-BLUE	var(--color-hover)
LIGHT CREAM / WHITE		var(--color-cream)
LIGHT TAN / BORDER		var(--color-tan)

----------------------------------------------------------------------*/

/*----- TYPE --------------------------------------------------*/

p { font-size: var(--font-size-body); line-height: 1.2; }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }

/* Accessibility utilities */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.nowrap { white-space: nowrap; }
.sr-only-focusable:focus {
	position: fixed;
	top: 0;
	left: 0;
	width: auto;
	height: auto;
	padding: 1em 2em;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
	background: var(--color-dark);
	color: var(--color-cream);
	font-size: 1.6em;
	z-index: 9999;
}


a { color: var(--color-light-blue); text-decoration: none;}
a:hover, a:focus { color: var(--color-hover);}

/*----- BASE STYLES --------------------------------------------------*/

html { height: 100%; }
body {
	background: var(--color-bg) url(/img/bg/paper-bg.jpg) repeat;
	font-family: var(--font-serif);
	font-size: 62.5%;
	line-height: 1;
	min-height: 100%;
}
#root {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
#root > main {
	flex: 1;
}

#main, #featured-readers, #your-host, #past-events, .header-content, footer > div {
	width: var(--content-width);
	max-width: var(--max-width);
	margin-left: auto;
	margin-right: auto;
	margin-bottom: var(--spacing-lg);
	}

/*----- HEADER -------------------------*/

nav {
	padding: var(--spacing-xs) var(--spacing-sm);
	}

header nav {background: var(--color-dark-alt) url(/img/bg/NavBG.jpg) repeat-x bottom center; width: 100%;}

nav ol { list-style: none; padding: 0; margin: 0; text-align: center;}
nav li { display: inline-block; color: var(--color-nav-separator); font-size: var(--font-size-nav); padding: .3em 0;}
nav li a {
	color: var(--color-cream);
	font-family: var(--font-sans);
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
}
nav li a.active {
	color: var(--color-sidebar-active);
}
nav li:nth-child(odd) { padding-right: var(--spacing-xl);}
nav li a:hover, nav li a:focus { color: var(--color-nav-hover);}
nav li a.active:hover, nav li a.active:focus { color: var(--color-sidebar-active);}

header nav { margin-bottom: var(--spacing-lg);}

.header-logo { padding-bottom: var(--spacing-sm); text-align: center; margin-left: auto; margin-right: auto; display: flex; justify-content: center; height: fit-content;}

.header-arrow {
	background: url(/img/bg/LongArrow.png) right center no-repeat;
	font-family: var(--font-sans);
	font-size: 2.4em;
	font-weight: 100;
	text-transform: uppercase;
	text-align: right;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.header-logo img {
	max-width: 460px;
	width: 100%;
}

nav .quicksearch {
	position: relative;
}
nav .quicksearch .keywords {
	display: inline-block;
	position: relative;
	top: -3px;
	padding: var(--spacing-xs);
	border: none;
	color: var(--color-input);
	font-family: var(--font-system-sans);
	line-height: 1em;
	width: 180px;
	height: 30px;
	font-style: italic;
	border-radius: 6px;
	box-shadow: inset 0px 0px 3px 0px var(--color-black);
	transition: width 0.5s ease;
	z-index: 1;
}
nav .quicksearch .keywords:focus {
	width: 280px;
}
nav .quicksearch .submit {
	position: absolute;
	z-index: 2;
	width: 34px;
	height: 30px;
	top: 2px;
	right: 0;
	border: none;
	margin: 0;
	padding: 0;
	background: transparent url(/img/bg/magnify.png) no-repeat 8px 5px;
	font-size: 0;
	color: transparent;
}

nav .quicksearch { display: none; }
nav .quicksearch form { white-space: nowrap; }
nav .mobilesearch { display: inline-block; }

#next-show {
	width: 100%;
	background: url(/img/bg/AmpBG.png) no-repeat;
	overflow: hidden;
}
#next-show p {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 4.8em;
	color: var(--color-light-blue);
	text-transform: uppercase;
	text-align: right;
}
#next-show p span[aria-hidden] { position: relative; top: -8px; font-family: var(--font-system-sans); font-size: .5em; color: var(--color-dark); }

#next-show h2 {
	display: block;
	width: 100%;
	max-width: 451px;
	margin-left: auto;
	padding: .3em 0;
	background: url(/img/bg/BlockBG.png) top center no-repeat;
	font-family: var(--font-sans);
	font-size: 3.6em;
	font-weight: 700;
	color: var(--color-cream);
	text-align: center;
	text-transform: uppercase;
}

/*----- MAIN / STATIC PAGES -------------------------*/

#main {
	padding-top: var(--spacing-section);
}
#main h1 {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 4.8em;
	text-transform: uppercase;
	color: var(--color-dark-heading);
	margin-top: 0.46em;
	margin-bottom: var(--spacing-sm);
}
#main h2 {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 3em;
	text-transform: uppercase;
	color: var(--color-light-blue);
	margin-bottom: var(--spacing-sm);
}

#main h1 span,
#main h2 span {
	color: var(--color-light-blue);
}
#main p {
	font-size: 1.6em;
	line-height: 1.4;
	margin: 0 0 1.4em;
}
#main .profile-list {
	margin-top: var(--spacing-section);
}

#main .about-band-img {
	float: right;
	height: 30%;
	width: 30%;
	margin-left: var(--spacing-sm);
	margin-bottom: var(--spacing-sm);
}
#main .nw-logo {
	float: left;
	height: 15%;
	width: 15%;
	margin-right: 1em;
}

.empty-state {
	font-size: 1.6em;
	padding: 2em 0;
}

/* embedded video or audio iframes */
.divider {
	clear: both;
	margin-top: var(--spacing-md);
}

.embed {
	max-width: 100%;
	width: 100% !important;
	height: auto !important;
	margin: var(--spacing-md) 0;
	clear: both;
}

/*----- FEATURED READERS -------------------------*/

#featured-readers > h1,
#past-events > h1 { margin: var(--spacing-section) 0; }

.profile-card { padding-bottom: var(--spacing-xs); margin-bottom: var(--spacing-md); border-bottom: 1px solid var(--color-tan); overflow: hidden;}
.profile-card.full { margin-bottom: 0; padding-bottom: 0; border-bottom: none;}
.profile-card.full > img { width: 140px; height: 140px;}

.profile-card:last-child { border: none; padding-bottom: 0; }
.profile-card > img {
	float: left;
	margin-right: var(--spacing-md);
	margin-bottom: var(--spacing-sm);
	width: 140px;
	height: 140px;
	object-fit: cover;
	border: .5em solid var(--color-dark);
	background-color: var(--color-dark);
	box-shadow: 0px 0px 5px 0px var(--color-black);
}

.profile-card figcaption h3, .profile-card figcaption h4 {
	font-family: var(--font-display);
	font-weight: 400;
	text-transform: uppercase;
	margin: 0;
}
.profile-card figcaption h3 { color: var(--color-dark);}
.profile-card figcaption h4 { color: var(--color-light-blue);}
.profile-card p { font-size: 1.4em; margin: 0 0 1em 0; line-height: 1.3; }

#past-events .profile-card > img { width: 140px; height: 140px; }

#featured-readers > p {
	font-family: var(--font-sans);
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	color: var(--color-dark);
	margin-bottom: 0;
	line-height: 1.3;
	padding: .5em .5em .1em;
}
#featured-readers > p em {
	font-style: normal;
	color: var(--color-light-blue);
}

/*----- YOUR HOST -------------------------*/

#your-host h2 {
	margin: var(--spacing-md) 0;
}

/*----- PAST SHOWS -------------------------*/

#past-shows {
	background: var(--color-past-shows-bg) url(/img/bg/GreenTop.jpg) top left repeat-x;
	overflow: hidden;
	margin-top: var(--spacing-section);
	padding: 0 var(--spacing-section);
	width: 100%;
	}

#past-shows div {
	overflow: hidden;
	padding: var(--spacing-section) 0;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}

#past-shows h2 { width: 45%; margin: 0;}
#past-shows h2 img { max-width: 200px; width: 100%;}

#past-shows ul { list-style: none; padding: 0; width: 50%; margin-left: auto; }
#past-shows li {
	font-family: var(--font-serif);
	font-size: 1.3em;
	line-height: 1.2;
	color: var(--color-past-shows-text);
	margin-bottom: .6em;
}
#past-shows li a { color: var(--color-white);}
#past-shows li a:hover, #past-shows li a:focus { color: var(--color-dark);}
#past-shows li span { color: var(--color-past-shows-span);}

/* dotted bar is now inside an <li>, not a direct child of <ul> */
#past-shows li[aria-hidden] { list-style: none; margin-bottom: var(--spacing-sm); }
#past-shows li[aria-hidden]:after { display: none; }

/*----- PAST EVENTS -------------------------*/

#past-events {
	overflow: hidden;
	margin: 0 auto var(--spacing-section);
}
#past-events .content h2 {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: var(--font-size-h2);
	text-transform: uppercase;
	color: var(--color-dark-heading);
	margin-bottom: var(--spacing-md);
}
.sidebar ul {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--spacing-lg);
}
.sidebar li {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 3em;
	text-transform: uppercase;
	margin: 0;
	padding: var(--spacing-xs) 0;
}
.sidebar li a {
	color: var(--color-sidebar-link);
}
.sidebar li a:hover {
	color: var(--color-sidebar-link);
	opacity: 0.7;
}
.sidebar li.active a {
	color: var(--color-dark);
}
.sidebar li span {
	color: var(--color-past-shows-span);
}
.sidebar li a:hover span,
.sidebar li.active a span {
	color: var(--color-sidebar-hover-span);
}

/*----- SEARCH RESULTS ------------------*/

#main.search-results > h1 {
	margin-bottom: 0.4em;
}
#main.search-results li {
	margin: 0;
	padding: var(--spacing-md) 0;
	border-bottom: 3px double var(--color-tan);
	font-size: 1.4em;
}
#main.search-results li:last-child { border: none;}
#main.search-results li h2,
#main.search-results li .speaker-head {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 2.6em;
	text-transform: uppercase;
	color: var(--color-dark-heading);
	margin: 0;
}
#main.search-results li h2 a {
	color: var(--color-dark-heading);
}
#main.search-results li h2 a:hover {
	color: var(--color-light-blue);
}
#main.search-results li .speaker-head {
	font-size: 1.3em;
}
#main.search-results p {
	margin: 0;
	font-family: var(--font-serif);
	font-size: 1.6em;
}
#main.search-results p.excerpt {
	font-size: 1.2em;
	line-height: 1.3;
}

/*----- FORMS -------------------------*/

#your-stories form legend, #your-stories > div > h1 {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 3em;
	text-transform: uppercase;
	color: var(--color-dark);
	margin-bottom: var(--spacing-xs);
}
.chirp-form input, .chirp-form textarea {
	width: 100%;
	margin-bottom: var(--spacing-xs);
	padding: var(--spacing-xs);
	border: none;
	color: var(--color-input);
	font-family: var(--font-system-sans);
	font-style: italic;
	border-radius: 6px;
	box-shadow: inset 0px 0px 3px 0px var(--color-black);
}
.chirp-form input.input-large {
	font-size: 3em;
}
.button, .chirp-form input[type="submit"] {
	display: block;
	width: 222px;
	height: 62px;
	margin-bottom: .15em;
	padding: .03em 0;
	background: url(/img/bg/ButtonBlock.png) top;
	color: var(--color-cream);
	font-family: var(--font-sans);
	font-size: 4.8em;
	font-weight: 900;
	font-style: normal;
	text-transform: uppercase;
	text-shadow: none;
	text-align: center;
	border-radius: 0;
	box-shadow: none;
}

.button {
	width: 100%;
	max-width: 451px;
	background: url(/img/bg/BlockBG.png) top center no-repeat;
	background-size: contain;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding-right: var(--spacing-xl);
}

.button:hover, .button:focus, .chirp-form input[type="submit"]:hover, .chirp-form input[type="submit"]:focus { color: var(--color-nav-hover);}

.search-form {
	display: flex;
	gap: var(--spacing-xs);
	align-items: stretch;
}
.search-form .input-large {
	flex: 1;
}
.search-form input[type="submit"] {
	width: auto;
	padding: 0 var(--spacing-lg);
}

.chirp-form p {
	font-family: var(--font-system-sans);
	font-size: 1.1em;
}

/*----- PAGINATION -------------------------*/

.pagination {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: var(--spacing-lg);
}
.pagination > img {
	width: 100%;
	margin-bottom: var(--spacing-md);
}
.pagination .next {
	margin-left: auto;
}
.pagination .prev {
	margin-right: auto;
}
a.next, a.prev {
	display: block;
	overflow: hidden;
	width: 265px;
	height: 57px;
	background-repeat: no-repeat;
	background-position: 0 -57px;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 3em;
	text-transform: uppercase;
	color: var(--color-pagination-text);
}
a.next {
	background-image: url(/img/nav/righthand.png);
}
a.prev {
	text-align: right;
	background-image: url(/img/nav/lefthand.png);
}
a.next:hover, a.prev:hover {
	color: var(--color-pagination-text);
	background-position: 0 0px;
}
a.next span {
	display: block;
	padding: 15px 0 0 10px;
}
a.prev span {
	display: block;
	padding: 15px 10px 0;
}


/*----- FOOTER -------------------------*/

footer { background: var(--color-dark);}
footer nav { width: 100%; }
#default footer nav {background: url(/img/bg/FooterTop.jpg) top left repeat-x;}
footer nav {background: url(/img/bg/FooterTop2.jpg) top left repeat-x;}
footer > div {
	overflow: hidden;
}
footer .network {
	padding-top: var(--spacing-sm);
	padding-bottom: var(--spacing-lg);
	text-align: center;
}
footer .network > a > img {
	max-width: 340px;
	margin-left: auto;
	margin-right: auto;
}
footer .network > img {
	margin-left: auto;
	margin-right: auto;
	padding: 2em 1em;
	background: var(--color-bg);
}
footer .network p {
	margin: 20px auto;
	width: 60%;
	text-align: center;
	color: var(--color-cream);
}
footer .network p img {
	margin-top: 20px;
}
footer .network p a {
	color: var(--color-white);
}

footer .copyright {
	padding-top: var(--spacing-sm);
	padding-bottom: var(--spacing-lg);
	text-align: center;
	font-family: var(--font-footer);
	color: var(--color-white);
	font-size: .857142857em;
}
footer .credits {
	margin-top: 15px;
}
footer .copyright a, footer .credits a {
	color: var(--color-footer-credits);
}

/*----- MEDIA QUERIES --------------------------------------------------*/

@media screen and (min-width: 480px) {

	nav li a { font-size: 1.2em; }

	nav li.nav-item:after {
		content: '\22C6';
		color: var(--color-nav-separator);
		padding: 0 20px;
		font-size: 260%;
		line-height: 0;
		position: relative;
		top: 0.15em;
		pointer-events: none;
		transition: padding 0.5s ease;
	}
	nav:has(.keywords:focus) li.nav-item:after {
		padding: 0 8px;
	}
	nav li.nav-item:last-of-type:after {
		content: '';
		padding: 0;
	}
	nav li:nth-child(odd) { padding-right: 0;}

	#featured-readers > p { font-size: 1.8em; }

	#next-show { min-height: 219px;}
	#next-show p { font-size: 6em; }
	#next-show h2 { font-weight: 900; font-size: 4.8em; padding: .15em 0; }

	#past-shows li {
		font-family: league-gothic;
		font-weight: 400;
		font-size: 2.4em;
		text-transform: uppercase;
		line-height: 1;
		margin-bottom: 0.4em;
	}

}/*/mediaquery*/

@media screen and (min-width: 600px) {

	#your-stories { overflow: hidden;}

	#your-stories form {
		float: left;
		width: 47%;
	}

	#your-stories > div {
		float: right;
		width: 47%;
	}

	#past-shows > div { background: url(/img/bg/Circles.png) 20% center no-repeat;}
	#past-shows h2 { width: auto;}
	#past-shows li {
		font-size: 3em;
		margin-bottom: 0.4em;
	}

}/*/mediaquery*/

@media screen and (min-width: 768px) {

	header { padding-bottom: var(--spacing-md); overflow: hidden;}

	.header-content {
		display: flex;
		flex-wrap: wrap;
		overflow: hidden;
	}

	.header-arrow {
		order: -1;
		width: 100%;
	}

	.header-logo { width: 45%;}

	#next-show { width: 50%; margin-left: auto;}

	#next-show p { font-size: 4.8em; }
	#next-show h2 { font-size: 3.6em; }

	#featured-readers > h1,
	#past-events > h1 { margin: var(--spacing-lg) 0 var(--spacing-section); }

	.profile-list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: var(--spacing-xl);
		row-gap: 0;
	}
	.profile-card {
		border: none;
		padding-bottom: 0;
		margin: 0 0 var(--spacing-section) 0;
	}
	.profile-card:last-child,
	.profile-card:nth-last-child(2) {
		margin-bottom: 0;
	}

	.profile-card.full { grid-column: 1 / -1; }
	#past-events .profile-card {
		grid-column: 1 / -1;
		border-bottom: 1px solid var(--color-tan);
		padding-bottom: var(--spacing-xs);
		margin-bottom: var(--spacing-md);
	}
	#past-events .profile-card:last-child {
		border-bottom: none;
		padding-bottom: 0;
	}

	.profile-card.full h3 {
		font-family: var(--font-sans);
		font-weight: 900;
	}
	.profile-card.full p { font-size: 1.6em; }


	#your-stories > h1 { margin-bottom: var(--spacing-section);}

	#your-stories li { font-size: 2.4em; }

	#past-shows ul {
		width: calc(70% + (100vw - 768px) * 0.052);
		text-align: center;
		margin-top: 0;
	}
	#past-shows li {
		line-height: 1.2;
		display: inline-block;
		margin-bottom: 0;
	}
	#past-shows li:after {
		font-family: var(--font-system-sans);
		content: '\22C6';
		color: var(--color-dark);
		padding: 0 10px;
		font-size: 150%;
		line-height: 0;
		position: relative;
		top: 0.06em;
	}
	#past-shows li:last-child:after {
		content: '';
		padding: 0;
	}
	#past-events {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: var(--spacing-section);
	}
	.content {
		width: 65%;
		order: 2;
		margin-left: auto;
	}
	.sidebar {
		width: 30%;
		order: 1;
	}
	/* righthand.png sprite layout (each row 57px tall):
	   Y   0px = hover state (hand highlighted)
	   Y -57px = active/current page state
	   Y -114px = default/idle state
	   X offset: slides from -50px to 0 between 768–960px viewports */
	.sidebar li a {
		display: block;
		height: 57px;
		padding: 15px 0 0 10px;
		margin: 0 0 -20px;
		background-image: url(/img/nav/righthand.png);
		background-repeat: no-repeat;
		background-position: calc(-50px + (100vw - 768px) * 0.26) -114px;
	}
	.sidebar li a:hover {
		background-position: calc(-50px + (100vw - 768px) * 0.26) 0;
	}
	.sidebar li.active a {
		background-position: calc(-50px + (100vw - 768px) * 0.26) -57px;
	}

}/*/mediaquery*/

@media screen and (min-width: 930px) {
	nav .quicksearch { display: inline-block; }
	nav .mobilesearch { display: none; }
}/*/mediaquery*/

@media screen and (min-width: 960px) {

	.sidebar li a {
		background-position: 0 -114px;
	}
	.sidebar li a:hover {
		background-position: 0 0;
	}
	.sidebar li.active a {
		background-position: 0 -57px;
	}

	#featured-readers,
	#your-stories,
	#past-shows > div,
	#your-host,
	#past-events,
	#main,
	.header-content,
	header nav ol,
	footer > div,
	footer nav ol { max-width: var(--max-width); margin: 0 auto; padding: 0; }

	#past-events { margin-bottom: var(--spacing-section); }

	.header-logo { width: 51%; }

	.header-arrow { margin-bottom: .35em; }

	#next-show { width: 49%; }
	#next-show p {
		background: url(/img/bg/StarBar.png) top right no-repeat;
		padding-top: 36px;
		margin-bottom: 8px;
		font-size: 5.5em;
	}
	#next-show h2 { font-size: 4.8em; padding: .15em 0; }

	#featured-readers > p {
		font-family: var(--font-display);
		font-weight: 400;
		font-size: 3em;
		padding: .3em 0 .2em;
	}

	#your-stories form legend, #your-stories > div > h1 { font-size: 3.6em; }
	#your-stories form { overflow: hidden; }
	#your-stories form input[id="name"] { float: left; width: 49%; }
	#your-stories form input[id="email"] { float: right; width: 49%; }
	#your-stories form input[type="submit"] { float: left; }
	#your-stories form p { float: right; width: 48%; margin-top: .75em; }

	#past-shows div { padding: var(--spacing-lg) 0; }

}/*/mediaquery*/

@media screen and (min-width: 1000px) {

	nav li a { font-size: 1.4em; }

}/*/mediaquery*/