/*
||--------------------------------------------------||
||					SET VARIABLES					||
||--------------------------------------------------||
*/

/*  -- begin icon font -- */
@font-face {
	font-family: 'icons';
	src: url('../fonts/fontello.woff') format('woff'), url('../fonts/fontello.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	}

/*  -- begin interface font -- */
@font-face {
	font-family: 'int';
	src: url('../fonts/firasans-regular-webfont.woff') format('woff'), url('../fonts/firasans-regular-webfont.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	}

@font-face {
	font-family: 'int-it';
	src: url('../fonts/firasans-italic-webfont.woff') format('woff'), url('../fonts/firasans-italic-webfont.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	}

@font-face {
	font-family: 'int-bd';
	src: url('../fonts/firasans-bold-webfont.woff') format('woff'), url('../fonts/firasans-bold-webfont.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	}

@font-face {
	font-family: 'int-bd-it';
	src: url('../fonts/firasans-bolditalic-webfont.woff') format('woff'), url('../fonts./ firasans-bolditalic-webfont.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	}


/*  -- begin text font -- */
@font-face {
	font-family: 'text';
	src: url('../fonts/AvrileSerif-Regular.woff');
	font-weight: normal;
	font-style: normal;
	}

@font-face {
	font-family: 'text-it';
	src: url('../fonts/AvrileSerif-Italic.woff');
	font-weight: normal;
	font-style: normal;
	}

@font-face {
	font-family: 'text-bd';
	src: url('../fonts/AvrileSerif-SemiBold.woff');
	font-weight: normal;
	font-style: normal;
	}

@font-face {
	font-family: 'text-bd-it';
	src: url('../fonts/AvrileSerif-SemiBoldItalic.woff');
	font-weight: normal;
	font-style: normal;
	}


/* -- set colors and variables  -- */   
:root {
    --background:rgb(255,245,242);
	--bk10:rgb(228,228,228);	
	--bk20:rgb(204,204,204);	
	--bk30:rgb(179,179,179);
	--bk40:rgb(153,153,153);
	--bk40:rgb(128,128,128);
	--bk60:rgb(102,102,102);
	--bk80:rgb(51,51,51);
    --bk100:rgb(0,0,0);
	--trans:rgba(255,255,255,0);
	--white:rgb(255,255,255);
	--red:rgb(166,0,22);
	
	--1p-shadow-b0:1px 1px 1px var(--bk100);
	--3p-shadow-b6:3px 3px 3px var(--bk60);
	--3p-shadow-b4:3px 3px 3px var(--bk40);
	--6p-shadow-b6:6px 6px 6px var(--bk60);

	--trans-back-4:background-color .4s;
	--trans-color-2:color .2s;
	--trans-color-4:color .4s;
	--trans-filter-4:filter .4s;
	--trans-height-2:height .2s;	
	--trans-height-4:height .4s;
	--trans-opacity-2:opacity .2s;	
	--trans-opacity-4:opacity .4s;	
	}



/*
||--------------------------------------------------||
||				GLOBAL PAGE LAYOUTS					||
||--------------------------------------------------||
*/

html {
	height:100vh;
	padding:0em !important;
	background-color:var(--background);
    color:var(--black100);
    font-size:16px;
	line-height:1em;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing:antialiased;
	}

html * {
	margin:0px;
	padding:0px;
	outline:0;
	}



/*
||--------------------------------------------------||
||					PAGE TEMPLATES					||
||--------------------------------------------------||
*/

html.home body {
	display:grid;
	grid-template-rows:130px auto 2em;
	}

html:not(.home) body, html:not(.spotlight) body {
	display:grid;
	grid-template-rows:2em auto auto 2em;
	}
html.spotlight body {
	display:grid;
	grid-template-rows:1.6em 2em auto 2em;
	}


/* -- header -- */

header:not(.home) {
	display:grid;
	grid-template-columns:35% auto 35%;
	position:fixed;
	width:100%;
	z-index:10;
	background-color:var(--background);
	}


/* -- main -- */

main {
	grid-row-start: 3;
	grid-row-end: 4;
	width: 80%;
	min-height:100vh;
	margin: 1em auto 1em;
	}

main.blur {
	color:var(--bk20);
	filter:blur(1.25em);
	}

main.blur img {
	opacity:.2;
	}


/* -- footer  -- */

footer {
	display:grid;
	grid-template-columns:10% 80% 10%;	
	position:fixed;
	bottom:0px;
	width:100%;
	height:2em;
	z-index:10;
	color:var(--white);
	background-color:var(--bk100);
	font-family:'int';
	font-size:.9em;
	text-align:center;	
	}


/* -- overlay/menu/nav -- */

#ousd {
	display:none;
	}


/* -- grids for template content  -- */

.home main {
	display:grid;
	grid-template-rows:80px auto;
	grid-template-columns: auto 30%;
	}

.home > article, .home > #right {
	background-color:green;
	min-height:50vh;
	}

.landing div:nth-of-type(2):not(.mob-menu-close) {
	display:grid;
	grid-template-columns: auto 30%;
	}

.landing div:nth-of-type(2):not(.mob-menu-close) > * {
	min-height:50vh;
	}


/* -- news template -- */

.news article {
	display:grid;
	width:70% !important;
	margin:0em auto;
	column-count:1 !important;
	}

.news aside {
	width:86%;
	margin:0em auto;
	padding:0em .4em;
	}

.news h1 {
	margin-bottom:.1em;
	border-bottom:1px solid var(--bk20);
	padding:0em 0em .4em .4em;
	font-size:1.5em;
	}

.news article h2 {
	margin-bottom:.1em;
	padding:0em 0em .4em .4em;	
	font-size:1.2em;
	}

.news article li {
	margin-bottom:.5em;
	text-align:justify;
	}

.news p, .news ol {
	width:86%;
	margin:0em auto 1.3em;
	padding:0em .4em;
	}

.news p:last-child {
	margin-bottom:0em;
	}

.news section {
	margin-bottom:1.3em;
	}

.news time {
	display:block;
	padding-left:1em;
	color:var(--bk20);
	font-family:'int-bd';
	font-size:.7em;
	letter-spacing:.1em;
	text-transform:uppercase;
	}

.news #section-head {
	width: 100%;
	margin: .6em auto 1.2em;
	color: var(--bk80);
	font-family: var(--int-bd);
	font-size: 1.8em;
	letter-spacing: .1em;
	text-indent: .2em;
	text-transform: uppercase;
	text-align: center;
	}

.news article ul {
	margin-bottom:1.3em;
	padding:0em .4em;
	}


/* -- two col news stories -- */

.news.wide article {
	width:90% !important;
	}

.news.wide figure {
	width:90%;
	margin:1.25em auto;
	}

.news.wide h3 {
	padding:0em .4em;
	}

.news.wide h3, .news.wide p {
	width:calc(100% - .8em);
	}

.news.wide #bodycopy {
	column-count:2;
	}

.release article {
    display: grid;
    grid-template-rows: 8.5em auto;
	}

.release article div:nth-of-type(2) {
	display:grid;
	grid-template-columns: 35% auto;
	column-gap:5%;
	}

.release aside {
	min-height:80vh;
	}



/*
||--------------------------------------------------||
||				GENERAL ELEMENT STYLES				||
||--------------------------------------------------||
*/

a {
	color:var(--bk100);
	text-decoration-color:var(--bk20) !important;
	text-decoration-thickness:.05em !important;
	}

a:hover {
	text-decoration:none;	
	}

article {
	font-family:'text';
	font-size: 1em;
	font-variant: oldstyle-nums;
	line-height: 1.65em;
	}

article > p {
	orphans:2;
	widows:2;
	}

article figure {
	width:100%;
	margin:1.25em 0em;
	border-top:4px solid var(--bk60);
	border-bottom:1px solid var(--bk60);
	padding:1.25em 0em .38em;
	text-align:center;
	break-inside:avoid;
	}

article figure:hover {
	cursor:pointer;
	}

aside h3 {
	margin-bottom:.2em !important;
	}

b, strong {
	font-family:'text-bd';
	}

figure.no-border {
	margin:0em;
	border:unset;
	padding:0em;
	}

bockquote {
	break-inside:avoid;
	}

blockquote span.long-quote {
	display:block;
	width:76%;
	margin:0em auto 1.85em;
	color:var(--bk60);
	line-height:1.6em !important;
	}

blockquote span.long-quote:before {
	position:relative;
	float:left;
	top:.1em;
	text-indent:-.67em;
	color:var(--bk40);
	font-family:'text-bd';
	font-size:3em;
	text-shadow:var(--1p-shadow-b0); 
	content:"\201c";
	}

blockquote span.long-quote:last-child:after {
	content:"" !important;
	}

em, i {
	font-family:'text-it';
	font-style:normal;
	}

figcaption {
	display:block;
	margin:0em auto .4em;
	color:var(--bk60);
	font-family:'int';
	font-size:.85em;
	line-height:1.4em;
	text-align:center;
	break-before:avoid;
	}

figcaption > button {	
	position:relative;
	top:.08em;
	left:.5em;
	border:unset;
	background-color:unset;
	color:var(--bk40);
	font-family:'icons';
	font-size:1.2em;
	transition:var(--trans-color-4);
	}

figcaption > em {
	font-size:.9em;
	}

h1, h2, h3 {
	font-family:'text-bd';
	font-weight:normal !important;
	}

h1 > i, h1 > em, h2 > i, h2 > em, h3 > i, h3 > em {
	font-family:'text-bd-it';
	font-style:normal;
	}

hr {
	width: 86%;
	margin: 0em auto 1.3em;
	border-width: 0em;
	border-top: 1px solid var(--bk30);
	}

img {
	break-inside:avoid;
	filter: grayscale(100%);
	transition: filter .4s;
	}

img:hover, figure:hover img, #ousd img, img.full-color {
	filter: grayscale(0%);
	transition: filter .4s;
	}

img.fit {
	width:inherit;
	}

img.med-large {
	width:80%;
	margin:0em auto;
	}

img.med {
	width:60%;
	margin:0em auto;
	}

img.med-small {
	width:40%;
	margin:0em auto;
	}	

img.small {
	width:20%;
	margin:0em auto;
	}

img.w9 {
	width:90%;
	margin:0em auto;
	}

img.w8 {
	width:80%;
	margin:0em auto;
	}

img.w7 {
	width:70%;
	margin:0em auto;
	}

img.w6 {
	width:60%;
	margin:0em auto;
	}

img.w5 {
	width:50%;
	margin:0em auto;
	}

img.w4 {
	width:40%;
	margin:0em auto;
	}

li {
	display:inline-block;
	list-style-type:none;
	}

li.medium, p.medium {
	font-size:.85em;
	line-height:1.6em;
	}

li.small, p.small, span.small {
	font-size:.7em;
	}

ol {
	margin-bottom:1.3em;
	}

ol li {
	display:list-item;
	margin-left:20px;
	padding-left:.4em;
	list-style-type:decimal;
	}

ol li::marker {
	text-indent:-20px;
	}

p {
	font-family:'text';
	text-align:justify;
	}

picture.flex {
	display:flex;
	}

section + hr {
	margin:1em auto;
	}

section:last-of-type > p:last-of-type:after {
	display:inline-block;
	padding-left: .3em;
	color: var(--bk40);	
	font-family:'icons';
	font-size:1em;
	content:'\e800';
	}

section.columns {
	display:block;
	height:100%;
	border-left:1px solid var(--bk60);
	padding-left:3em;
	}

sup {
	margin-left:.1em;
	margin-right:.1em;	
	line-height:1em;
	}

ul.standard > li {
	display:list-item;
	}



/*
||--------------------------------------------------||
||					OBJECT STYLES					||
||--------------------------------------------------||
*/


/* -- footer layouts -- */

footer a {
	display:inline-block;
	margin:0em .35em;
	color:var(--white);
	} 

footer a#key-icon {
	grid-column:1 / 2;
	align-self:center;
	color:var(--white);
	font-family:'icons';
	font-size:1.8em;
	line-height:1em;
	text-decoration:none;
	}

footer a.scrolltop {
	grid-column-start:3;	
	align-self:center;
	padding-top:.2em;
	color:var(--white);	
	font-family:'int';
	font-size:.9em;
	text-decoration:none;
	}

footer a.scrolltop:hover {
	color:var(--bk40);
	}

footer li:not(:last-child):after {	
	display:inline-block;
	padding:0em .3em;
	content:"|";
	}

footer li:first-child:before {
	position:relative;
	top:.15em;
	right:.2em;
	display:inline-block;
	font-size:1.2em;
	content:'\00a9';
	}

footer li:nth-child(4){
	display:inline-block !important;
	}

footer ul {
	grid-column:2 / 3;
	align-self:center;
	font-family:'int';
	}


/* -- header layouts -- */

header {
	height:1em;
	border-bottom:2px solid var(--bk100);
	padding:.315em 1em;
	}

header li a {
	display:inline-block;
	position:relative;
	padding:0em .3em;
	color:var(--bk60);
	font-family:'int-bd';
	font-size:1em;
	transition:var(--trans-color-4), var(--trans-back-4);
	}

header li:last-child a {
	display: inline-block;
	top: .02em;
	padding-left: .3em;
	font-family:'icons';
	text-decoration: none;
	}

header li a:hover {
	background-color:var(--bk60);
	color:var(--white);
	transition:var(--trans-color-4), var(--trans-back-4);	
	}

header li:last-child a:hover {
	background-color:unset;
	color:var(--black);
	}

header li a.selected {
	color:var(--bk100);
	}

header li:not(:last-child):after {	
	font-family:'int';
	font-size:.75em;
	content:"|";
	}

header > span {
	display:inline-block;
	align-self:center;	
	width:max-content;
	height:inherit;
	font-family: 'int-it';
	font-size:.9em;
	}

header > span:nth-of-type(2) {
	grid-column:3/4;
	justify-self:end;
	margin-right:3em;
	}

header > span a {
	font-family:'int-bd-it';
	}

header ul {
	grid-column:2/3;
	margin-top:-.05em;
	text-align:center;
	}

header #bull {
	display:inline-block;
	width:1.4em;
	margin-left:.1em;
	color:var(--bk40);
	text-align:center;
	}


/* -- section pages nav menu -- */

nav {
	display:block;
	width:90%;
	height:0vh;	
	column-count:3;
	column-gap:3%;
	overflow:hidden;
	}

nav a {
	color:var(--bk80);
	font-size:.95em;
	transition:var(--trans-color-4);
	}

nav a:hover {
	color:var(--bk100);
	transition:var(--trans-color-4);
	}


nav h3 {
	display:block;
	margin:.8em auto .6em;
	column-span:all;
	color:var(--bk0);
	font-family:'int';
	font-size:1.4em;
	text-align:center;
	text-transform:uppercase;
	letter-spacing:.015em;
	}

nav li {
	display:block;
	margin:.15em 0em;
	font-family:"int-bd";
	font-size:.9em;
	text-align:center;
	}

nav#section-pages li {
	height:1.4em;
	}

nav.hide-nav {
	height:0vh;
	}

nav.show-nav {
	position:relative;
	z-index:14;
	height:max-content; 
	margin: 3em auto;
	border: 1px solid var(--bk20);
	border-radius: 10px;
	padding-bottom: 1.3em;
	background-color: var(--background);
	box-shadow:var(--3p-shadow-b4);
	}

nav.show-nav div#rec-menu {
	width: 80%;
	margin: .5em auto .3em;
	padding-top: .3em;
	text-align: center;
	column-span:all;
	}

nav.show-nav div#rec-menu select {
	width: 60%;
	margin: .2em auto 1em;
	font-family: 'int';
	font-size: .9em;
	}

div.mob-menu-close {
	display:none;
	}

#discogs-badge {
	display:inline-block;
	width:6em;
	height:2em;
	background:url(../svg/discogs.svg);
	background-repeat:no-repeat;
	background-size:6em auto;
	}


/* -- thumbnails across the bottom -- */

.bottom-images {
	display:grid;
	grid-template-rows:100%;
	grid-template-columns:20% 20% 20% 20% 20%;
	width:auto;
	height:auto;
	border-top:4px solid var(--bk60);
	border-bottom:1px solid var(--bk60);
	overflow:hidden;
	}

.bottom-images figure  {
	grid-row-start:1;
	grid-row-end:2;
	display:inline-block;
	height:calc(100% - 2em);	
	margin:0em .2em;
	border-width:0px;
	padding-top:1.35em;
	}

.bottom-images figcaption {
	width:80%;
	line-height:.9em;
	}

.article-discography > .bottom-images {
	grid-row-start:4 !important;
	grid-row-end:5 !important;
	}

.bottom-images img {
	width:60%;
	}


/* -- image overlay container -- */

#ousd {
	display:none;
	position:fixed;
	top:0em;
	left:0em;
	width:100vw;
	height:100vh;
	z-index:100;
	}

#ousd.show {
	display:flex;
	align-items:center;
	flex-direction:column;
	}

#ousd #ousd-comment {
	display:block;
	margin-top:1.8em;
	font-size:.9em;
	text-align:center;
	}

#ousd.show button {
	display: block;
	position: relative;
	left: 50%;
	top: 1.4em;
	z-index:110;
	width: 3em;
	height: 3em;
	margin: 3em auto 0em;
	border: unset;
	background-color: unset;
	background:url(../svg/close.svg);
	transition:var(--trans-filter-4);
	}

#ousd.show button:hover {
	cursor:pointer;
	filter:invert(100%);
	transition:var(--trans-filter-4);
	}

#ousd.show img {
	display:block;
	max-width:86vw;
	max-height:70vh;
	margin:0em auto;
	border:2px solid var(--bk100);
	padding:.75em;
	background-color:var(--bk20);
	box-shadow:.25em .25em 5em 1em var(--bk40);
	}

#ousd #gallery-caption {
	display:block;
	margin-top:1.1em;
	height:1em;
	padding-left:1em;
	font-family:'int';
	font-size:1.2em;
	text-align:center;
	}


/* -- keyboard menu overlay -- */

#ousd #keymenu {
	width:70vw;
	margin:10em auto;
	border:2px solid var(--bk40);
	padding:1em 2em;
	background-color:var(--bk10);
	box-shadow:4px 4px 80px 15px var(--bk40);
	font-family:'int';
	}

#ousd #keymenu div {
	margin:.5em auto .7em;
	font-size:1.4em;
	text-align:center;
	text-transform:capitalize;
	}

#ousd #keymenu input {
	display:block;
	width:calc(100% - .4em);
	height:2em;
	margin-bottom:.3em;
	border:unset;
	border-bottom:2px solid var(--bk60);
	padding:.2em;
	background-color:var(--bk20);
	text-align:center;
	}

#ousd #keymenu input:focus {
	background-color:var(--bk20);
	}

#ousd #keymenu li {
	display:list-item;
	list-style-position:inside;
	margin-bottom:.3em;
	padding:.1em .3em;
	font-size:.95em;
	}

#ousd #keymenu li.selected {
	background-color:var(--bk60);
	color:var(--white);
	}

#ousd #keymenu li.selected a {
	color:var(--white);
	}

#ousd #keymenu p {
	margin-bottom:.8em;
	font-size:.95em;
	line-height:1.4em;
	text-align:center;
	}

#ousd #keymenu span {
	display:block;
	position:unset;
	margin-bottom:.3em;
	padding-top:.4em;
	padding-bottom:.2em;	
	text-align:center;
	background-color:var(--bk100);
	color:var(--white);
	font-size: 1.1em;
	letter-spacing:.2em;
	}

#ousd #keymenu ol {
	column-count:2;
	column-gap: 3%;	
	}

#ousd #keymenu #search-results {
	font-size:1em;
	text-align:left;
	}

#ousd #keymenu #page-list, #ousd #keymenu div#rec-menu {
	width:100%;
	}

#ousd #keymenu #release-menu, #release-menu-1, #ousd #keymenu #release-menu-2 {
	width:100%;
	min-height:unset !important;
	font-size:1em;
	}

#ousd #rec-menu {
	font-size:1rem !important;
	}

#ousd #keymenu {
	max-height: 70%;
	overflow:scroll;
}


/* -- gallery styles -- */

#film {
	position:relative;
	text-align:center;
}

#film a + span {
	margin:2em 0px 1em;
}

#film img {
	display: inline-block;
	position: relative;
	width: 12vw;
	height: 12vw;
	margin: 1vw;
	border: 1vw solid var(--white);
	box-shadow: var(--3p-shadow-b6);
}

#film main {
	width:90%;
}

#film section {
	display:inline-block;
	position:absolute;
	top:-1495px;
	right:10000px;
}

#film section.current, #film div.current {
	display:grid;
	grid-template-columns:20% 20% 20% 20% 20%;
	grid-template-rows:50% 50%;
	gap:0em;
	position:relative;
	top:.3em;
	left:0px;
	width:80vw;
	max-width:90vw;
	margin:0em auto;
}

#film section.current a:nth-of-type(1), #film section.current a:nth-of-type(6) {
	grid-column:1/2;
}

#film section.current a:nth-of-type(2), #film section.current a:nth-of-type(7) {
	grid-column:2/3;
}

#film section.current a:nth-of-type(3), #film section.current a:nth-of-type(8) {
	grid-column:3/4;
}

#film section.current a:nth-of-type(4), #film section.current a:nth-of-type(9) {
	grid-column:4/5;
}

#film section.current a:nth-of-type(5), #film section.current a:nth-of-type(10) {
	grid-column:5/6;	
}

#film span {
	display:block;
	margin:1em auto .2em;
	border-bottom:1px solid var(--bk60);
	padding-bottom:.2em;
	font-size:.9em;
	text-align:center;
	text-transform:uppercase;
	letter-spacing:.05em;
}

#film span a {
	display:inline-block;
	position:relative;
	color:var(--bk20);
	transition:var(--trans-color-4);
	font-family:'icons';
	font-size:2em;
	text-decoration:none;
}

#film span a.next-pics {
	float:right;
	margin-right:.5em;
}

#film span a.prev-pics {
	float:left;
	margin-left:.5em;
}

#film span a.next-pics:hover, #film span a.prev-pics:hover {
	color:var(--bk100);
	transition:var(--trans-color-4);
}

#film ul {
	margin-top:.5em;
}

#film ul li {
	display:inline-block;
	width:20vw;
	min-width:240px;
	height:13vw;
	min-height:150px;
	margin:.5em 1em 1em;
	border: 10px solid var(--white);
	box-shadow: var(--3p-shadow-b6);
	background-color:var(--bk100);
}

#film li a {
	display:inline-block;
	color:var(--white) !important;
	font-family:'int-bd';
	font-size:1.1em;
	text-decoration:none;
}

#film li a:before {
	display:block;
	margin:.7em 0 .5em;
	font-family:'icons';
	font-size:4em;
	content:'\f313';
}



/*
||--------------------------------------------------||
||				TEMPLATE ELEMENT STYLES				||
||--------------------------------------------------||
*/

.article div#bodycopy {
	width: auto;
	padding-bottom:3em;
	column-count: 2;
	column-gap: 5%;
}

.article h1, .gallery h1 {
	margin-top:.3em;
	font-size: 3.2em;
	line-height: 1.3em;
}

.article h1:not(+ h2), .gallery h1:not(+ h2) {
	margin-bottom:.8em;
}

.article h2, .gallery h2, .lists h2 {
	margin-bottom: 1em;
	font-size: 2.1em;
	line-height: 1.5em;
}

.article h3 {
	display: block;
	width: 100%;
	margin: .4em .5em .4em 0em;
	font-size: 1.3em;
	line-height:1.5em;
}

.article p {
	margin-bottom: 1.3em;
	break-inside: auto;
}

.article section:nth-of-type(1) p:not(.normal):nth-of-type(1) {
	position: relative;
	margin-top: -.25em;
	line-height: 2.15em;
}

.article section:nth-of-type(1) p:not(.normal):first-child::first-letter {
	float: left;
	padding-top: .1em;
	padding-right: .15em;
	color: var(--bk40);
	font-family: 'text-bd';
	font-size: 5em;
	line-height: .7em;
	text-shadow: var(--1p-shadow-b0);
}

.block {
	display:block;
	margin-bottom:1.3em;
}

.block-mb3 {
	display:block;
	margin-bottom:.3em;
}

.block-mb6 {
	display:block;
	margin-bottom:.6em;
}



/*
||--------------------------------------------------||
||				TEXT TWEAKS AND CLASSES				||
||--------------------------------------------------||
*/

a.list {
	display: inline-block;
	margin-left: .4em;
	border: 1px solid var(--bk20);
	border-radius: .3em;
	padding: 0em .4em;
	font-size: .9em;
	line-height: 1.65em;
	text-transform: uppercase;
	transition:	var(--trans-back-4);
}

a.list:hover {
	background-color:var(--bk10);
	transition:	var(--trans-back-4);
	}

b.key {
	padding: 0em .35em;
	border: 1px solid var(--bk20);
	border-radius: .25em;
	}

.center {
	text-align:center;
	}

.g60 {
	color:var(--bk60);
	}

.icon {
	font-family:'icons';
	}

.span-cols {
	column-span:all;
	}

/* -- article class and id tweaks -- */

.article aside blockquote {
	margin-bottom:1.3em;
	padding: 0em;
	color:var(--bk60);
	font-family:'text-it';
	font-size:1.6em;
	line-height:2em;
	text-align:center;
	}

.article #film {
	min-width:inherit !important;
	margin-bottom:2em;
	}

.article #film li {
	display:block;
	margin:.5em auto 1em;
	}

.article #film span {
	margin-bottom:1em;
	}


/* -- contact page -- */

#contact fieldset {
	border:unset;
	}

#contact > #bodycopy {
	display:block;
	column-count:1 !important;
	}

#contact #email-cont {
	width:70vw;
	padding:.2em 0em;
	}

#contact input, #contact textarea {
	display:inline-block;
	width:70%;
	height:1.4em;
	margin:.5em 1em;
	border:1px solid var(--bk100);
	padding:.5em .3em;
	font-family:'int';
	font-size:.8em;
	transition:var(--trans-back-4);
	}

#contact input:focus, #contact textarea:focus {
	background-color:var(--bk10);
	transition:var(--trans-back-4);
	}

#contact input[type="submit"] {
	display:inline-block;
	position:relative;
	left:48%;
	width:15%;
	height:2.5em;
	}

#contact input[disabled] {
	opacity:.2;
	}

#contact p:after {
	content:unset;
	}

#contact textarea {
	position:relative;
	top:.5em;
	height:10em;
	margin-bottom:1.5em;
	resize:vertical;
	}

#contact label {
	display:inline-block;
	position:relative;
	top:.1em;
	width:20%;
	font-family:'int-bd';
	font-size:1em;
	text-align:right;
	}

#contact label[for="comments"] {
	position:relative;
	top:.7em;
	vertical-align:top;
	}

#contact p {
	display:inline-block;
	position:relative;
	left:20%;
	width:70%;
	height:2.5em;
	margin:1em;
	font-family:"text-bd";
	font-size:.9em;
	text-align:center;
	}



/*
||--------------------------------------------------||
||				   HOME PAGE STYLES					||
||--------------------------------------------------||
*/

header#home {
	display:grid;
	grid-template-rows: 100px 25px;
	width:100%;
	min-height:125px;
	max-height:130px;
	border-bottom:2px solid var(--bk100);
	padding:0em !important;
	}

#home > div:nth-of-type(1) {
	display:grid;
	grid-template-columns:30% 40% 30%;
	grid-row-start:1;
	grid-row-end:2;
	width:100vw;
	border-bottom:1px solid var(--bk100);
	}

#home > div:nth-of-type(2) {
	display:grid;
	grid-template-columns:30% 40% 30%;	
	grid-row-start:2;
	grid-row-end:3;
	align-items:stretch;
	width:100vw;
	padding:0px;
	font-family:'int-it';
	font-size: .875em;
	line-height:1.2em;	
	}

#home img:nth-of-type(1) {
	grid-column-start:1;
	grid-column-end:2;
	display:inline-block;
	margin:12px 56px 4px 80px;
	}
	
#home img:nth-of-type(2) {
	grid-column-start:2;
	grid-column-end:3;
	display:inline-block;	
	position:relative;
	left:-6vw;
	width:50vw;
	margin:auto auto !important;
	}

#home span {
	grid-row: 2/3;
	align-self:start;
	}

#home span.center {
	grid-column:2/3;
	letter-spacing:.13em;
	}

#home span#datepage {
	grid-column:1/2;	
	padding:0px 10%;
	}

#home span#pagecount {
	grid-column:3/4;		
	justify-self:end;
	max-width:250px;
	margin-right:8%;
	padding: 0px;
	text-align: right;
	}

	
/* -- sections box -- */

header#home #sections {
	grid-column-start:3;
	grid-column-end:4;
	justify-self:end;
	display:inline-block;
	max-width:18vw;
	min-width:200px;
	height:74px;
	margin:.5em 5%;
	border:1px solid var(--bk80);
	border-top-width:6px;
	padding:2px;
	}

header#home #sections h3 {
	display:block;
	width:100%;
	margin:.2em auto .05em;
	color:var(--bk80);
	font-family:'int-bd';
	font-size:1rem;
	line-height:1.1rem;
	text-align:center;
	letter-spacing:.05em;	
	}

header#home #sections ul {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	width:190px;
	min-width:180px;
	margin:0px .5em;
	}

header#home #sections ul li {
	position:relative;
	width:88px;
	margin:0px auto 0px 0px;
	background-image:url('../svg/dot.gif');
	background-repeat:repeat-x;
	background-position:30% 70%;
	transition:var(--trans-color-4);
	}

header#home #sections ul li:hover *, header#home #sections ul li:hover a:after {
	background-color:var(--bk80);
	color:white;
	transition:var(--trans-color-4);
	}

header#home #sections ul li:after {
	display:none;
	}

header#home #sections li > a {
	display:block;
	width:100%;
	padding-left:0em;
	padding-right:.1em;
	color:var(--bk80);
	font-family:'int-bd';
	font-size:.7rem;
	text-transform:uppercase;
	letter-spacing:.05em;
	text-align:left;
	text-decoration:underline;
		} 

header#home #sections li > a:after {
	position:absolute;
	right:0px;
	padding:0em .3em;
	font-size:.75rem;
	content:attr(data-page);
	background-color:var(--background);
	}

header#home #sections li > a:hover {
	text-decoration:none;
	}

header#home #sections li > a span {
	display:inline-block;
	width:max-content;
	background-color:var(--background);
	padding:0em .3em;
	font-family:inherit;
	font-style:normal;
	}


/* -- home page content styles -- */

#H main {
	display:grid;
	grid-template-rows: auto auto;
	grid-template-columns:65% 30%;
	grid-column-gap: 3%;
	margin-top:7.5em;
	padding:0em !important;
	}

#H article {
	width:100%;
	margin-top:0em;
	border-right:1px solid var(--bk30);
	padding-right:2em;
	}

#H article img {
	width:100% !important;
	filter: grayscale(0%) !important;
	}

#H div#right {
	width:calc(100% - 1em);
	margin-left:1em;
	}

#H div#right section {
	width:88%;
	margin:3%;
	padding:3%;
	}

#H div#right section:nth-of-type(1) {
	margin-top:0%;
	padding-top:0%;
	}

#H div#right div + h3.head {
	margin-top:3% !important;
	}


#H h1 {
	grid-column-start: span 2;
	grid-row: 1 /2;
	width:100%;
    margin: 0em auto .3em;
    font-size: 5vw;
    line-height: 100%;
    letter-spacing: .03em;
    text-align: center;
	}

#H article h2 {
	margin:.8em 0em .5em;
	font-size:2em;
	}

#H article p {
	margin-bottom:1.3em;
	}

#H div#right h3.head {
	width:100%;
	padding:.2em 1%;
	border-bottom:1px solid var(--bk60);
	margin-bottom:.5em;
	color:var(--bk60);
	font-size:1.2em;
	line-height:1.2em;
	}

#H div#right div + h3 {
	margin-top:-.75em !important;
	}

#H #search-site p {	
	line-height:1.6em;
	text-align:left;
	}

#H #search-site p + span {
	display:block;
	margin-top:.5em;
	text-align:center;
	}

#H #search-site a {
	color: var(--bk60);
	font-family: 'icons';
	font-size: 2em;
	line-height:1em;
	transition: var(--trans-color-4), var(--trans-back-4);
	}

#H #search-site a:hover {
	color:var(--bk100);
	transition: var(--trans-color-4), var(--trans-back-4);
	}

div#right #recent li {
	width:100%;
	margin:.2em 0em !important;
	padding:0em 3%;
	line-height:1.3em;
	}


/* -- landing page styles -- */

.landing main {
	display:grid;
	grid-template-rows:12em auto;
	grid-template-columns:100%;
	}

main #section-head {
	display:flex;
	flex-direction:row;
	align-items:stretch;
	position:relative;
	width:calc(100% - 10%);
	margin:2% 5%;
	border-bottom:1px solid var(--bk100);
	padding-bottom:2%;
	overflow:hidden;
	}

main #section-article-nav {
	display:grid;
	grid-template-columns:65% 30%;
	grid-column-gap: 3%;
	width:90%;
	margin:0% auto;
	padding:0em !important;
	}

.lists {
	column-rule:1px solid var(--bk60);
	border-left:1px solid var(--bk60);
	padding-left:1.44%;
	}

.lists li {
	display:list-item;
	}

#section-head span {
	padding:0px 2%;
	color:var(--bk20);
	font-family:'text-bd';
	font-size:7em;
	line-height:1.15em;
	}

#section-head img {
	width: 100%;
	filter: blur(2px) grayscale(100%) opacity(25%);
	}

#section-article-nav article {
	width:100%;
	height:100vh;
	border-right:1px solid var(--bk100);
	padding-right:2em;
	column-count:1;
	column-gap:5%;
	font-size:1.06em;
	line-height:1.75em;
	}

.landing div#right {
	width:calc(100% - 1em);
	margin-left:1em;
	}

.landing div#right section {
	width: 88%;
	margin: 3%;
	padding: 3%;
	}

.landing div#right section:first-of-type {
	margin-top:0em !important;
	padding-top:0em !important;
	}

.landing div#right div + h3.head {
	margin-top:3% !important;
	}

.landing h3.head {  
	width:100%;
	padding:.2em 1%;
	border-bottom:1px solid var(--bk60);
	margin-bottom:.5em;
	color:var(--bk60);
	font-size:1.2em;
	line-height:1.2em;
	}

#section-article-nav li {
	width:100%;
	margin:.2em 0em !important;
	padding:0em 1.5%;
	line-height:1.3em;
	}

#section-article-nav a#next {
	color:var(--bk20);
	font-family:icons;
	font-size:2em;
	text-decoration:none;
	transition:var(--trans-color-4);
	position:relative;
	bottom:0px;
	right:0px;
	}

#section-article-nav a#next:hover {
	color:var(--bk100);
	transition:var(--trans-color-4);
	}

#section-article-nav article div {
	text-align:right;
	}

#section-article-nav article div:before {
	display:inline-block;
	position:relative;
	top:-.45em;
	margin-right:.6em;
	color:var(--bk30);
	font-family:'int-bd';
	font-size:.8em;
	line-height:3em;
	letter-spacing:.1em;
	content:"READ MORE";
	}

#section-article-nav figure {
	width:50%;
	margin:0em auto;
	}

#section-article-nav figure img {
	margin:inherit !important;
	}

#section-article-nav img {
	max-width:50vh !important;
	}

#section-article-nav img.med-large {
	width:60% !important;
	margin:0em auto;
	}

#section-article-nav article h1 {
	padding:0em 1%;
	margin-bottom:.3em;
	font-size:1.6em;
	}

#section-article-nav article p:nth-of-type(1) {
	padding:0em 1%;
	margin-bottom:1.3em;
	}

#section-article-nav article p:last-of-type {
	margin-bottom:0px !important;
	}

#section-article-nav section + section {
	margin-top:1.3em;
	}


/* -- featured record box -- */

#featured-record-bottom h4 {
	margin-bottom:.6em;
	color:var(--bk60);
	font-family:'text-bd';
	font-size:.9em;
	line-height:1.2em;
	text-align:center;
	}

#featured-record-bottom img {
	display:block;
	width:80% !important;
	height:80% !important%;
	margin:.2em auto .4em;
	box-shadow:6px 6px 10px var(--bk40);	
	}

#featured-record-bottom #audio-controls {
	display:block;
	width:84%;
	margin:.8em auto 0em;;
	font-size:.85em;
	text-align:center;
	}

#featured-record-bottom #controls {
	display:block;
	margin:.2em auto;
	border-bottom:unset !important;
	padding:0em 0em .5em !important;
	font-size:1.3em;
	}

#featured-record-bottom #controls + span, #featured-record-bottom ul, #featured-record-bottom audio {
	display:none !important;
	}

#featured-record-bottom #controls button {
	display:inline-block;
	margin:0em .1em;
	border:unset;
	color: var(--bk20);
	background-color:var(--background);
	font-family: 'icons';
	font-size: .75em;
	font-weight: bold;
	transition:var(--trans-color-4);	
	}

#featured-record-bottom #controls button:hover {
	color:var(--bk60);
	transition:var(--trans-color-4);	
	}

#featured-record-bottom #audio-controls button.playing {
	color: var(--bk100);
	transition: var(--trans-color-4);
	}

#featured-record-bottom #rec-menu-inline {
	grid-template-columns:unset !important;
	}

#featured-record-bottom #release-menu {
	width:96% !important;
	min-height:unset !important;
	margin:0em auto;
	}


/* -- article discography styles -- */

.discography details[open] {
	margin-left:-1em;
	border:1px solid var(--bk20);
	padding-left:1em;
	padding-bottom:.3em;
	}

.discography details li {
	display:inline-block;
	font-size:.85em;
	line-height:1.2em;
	}

.discography details li:not(:last-child):after {
	display:inline-block;
	padding:0px 6px;
	content:'|';
	}

.discography details > span {
	display:block;
	margin-left:1.5em;
	font-size:.85em;
	line-height:1.3em;
	}

.discography details summary {
	padding-left:1.3em;
	text-indent:-1.3em;
	line-height:1.5em;
	}

.discography details summary:hover {
	cursor:pointer;
	}

.discography details summary::marker {
	color:var(--black60);
	}

.discography details ul {
	width:calc(100% - 1.5em);
	margin-top:-.2em;
	margin-left:1.3em;
	}

.discography h3:nth-of-type(1) {
	margin-top:0em !important;
	}

.discography section {
	margin-bottom:1.3em;
	}

.discography > ul {
	margin-bottom:.6em;
	}

.discography li {
	display:list-item;
	margin-bottom:.3em;
	}


/* -- sp discography page -- */

.sp-discography {
	column-count:1 !important;
	}

.sp-discography div {
	width:80%;
	margin: 0em auto;
	padding: 0em .2em;
	font-family:'int';
	font-size: .85em;
	line-height: 1.4em;
	text-align: center;
	}

.sp-discography div a {
	color:var(--bk40);
	transition:var(--trans-color-4);
	}

.sp-discography div a:hover {
	color:var(--bk100);
	transition:var(--trans-color-4);
	}

.sp-discography h3 {
	margin-bottom:1em;
	border-bottom:2px solid var(--bk100);
	padding-bottom:.2em;
	padding-left:.2em;
	}

.sp-discography ul {
	display:grid;
	grid-template-columns: repeat(4, 25%);
	}

.sp-discography {
	display:block !important;
	grid-columns: 1/2;
	}
	
.sp-discography ul li {
	width:100%;
	display:inline-block;
	margin:0em auto;
	border-right:1px solid var(--bk20);
	padding:.5em 0em 1em;
	}

.sp-discography ul li:nth-child(4n+0) {
	border-right:unset;
	}

.sp-discography ul li img {
	display:block;
	width:70%;
	margin:0em auto .6em;
	border:2px solid var(--bk40);
	}

.sp-discography ul + h3 {
	margin-top:1em;	
	}


/* -- release page styles -- */

.release aside {
	border:unset;
	padding:0em 0em 1em;
	}

.release aside * {
	width:inherit;
	text-align:center;
	}

.release aside ul li {
	display:list-item;
	margin:.2em 0em;
	color:var(--bk80);
	text-align:left !important;
	font-size:.85em;
	line-height:1.2em;
	}

.release aside li b {
	font-family:'int-bd';
	font-weight:normal;
	}

.release figure {
	border-bottom:unset;
	}

.release h1 {
	padding-left:.2em;
	font-size: 3em;
	line-height:1.4em;
	}

.release h2 {
	display:inline-block;
	width:fit-content;
	margin-right:.5em;
	padding-left:.4em;
	font-size:2em;
	line-height:1.5em;
	}

.release aside h3 {
	margin:.5em 0px .2em;
	border-bottom:2px solid var(--bk60);
	padding:.1em 0em .2em;
	color:var(--bk100);
	font-size:1em;
	line-height:1.1em;
	}

.release aside h3:nth-of-type(2) {
	border-bottom-color:var(--bk80);
	color:var(--bk80);
	}

.release aside h4 {
	width:100% !important;
	margin: .8em 0em .2em .8em;
	font-size:.9em;
	line-height: 1em;
	text-align:left;
	}

.release ol#tracks, .release ol#tracks2, .release aside ul {
	width:calc(100% - .8em);
	margin:0em .4em;
	padding-top:.2em;
	font-family:'int';
	font-size:.95em;
	line-height:1.4em;
	}

.release ol#tracks button, .release ol#tracks2 button {
	display: inline-block;
	width:20px;
	margin-left: .2em;
	border:unset;
	background-color:unset;
	color: var(--bk20);
	font-family:'icons';
	font-size: .95em;
	transition:var(--trans-color-4);
	}

.release ol#tracks button:hover, .release ol#tracks2 button:hover {
	color: var(--bk60);
	transition:var(--trans-color-4);
	}

.release ol#tracks.ep li, .release ol#tracks2.ep li {
	display:list-item;
	text-align:left;
	}

.release ol#tracks.ep li::marker, .release ol#tracks2.ep li::marker {
	color:var(--bk60);
	font-size:.9em;
	}

.release ol#tracks.single li {
	display:list-item;
	list-style-type:lower-alpha !important;
	text-align:left;
	}

.release ol#tracks.single li::marker {
	color:var(--bk60);
	font-size:1.2em;
	font-variant:small-caps;
	}

.release ol#tracks.album li, .release ol#tracks.ep li {
	display:list-item;
	list-style-type:decimal !important;
	}

.release audio {
	display:none;
	}

.release article p {
	margin-bottom:1.3em;
	font-size:1em;
	line-height:1.75em;
	}

.release section:first-child figure {
	margin-top:.6em;
	margin-bottom:0px;
	padding-bottom:10px;
	}

.release section:first-child figure img {
	width:70%;
	margin:0px auto;
	}

.release #discogs-badge {
	position:relative;
	top:.4em;
	}


/* -- interview styles -- */

.interview h3, .list h3 {
	margin-top:1em;
	margin-left:1.7em;
	}

.interview p {
	margin-bottom:.5em;
	margin-left:2.4em;
	line-height:1.75em;
	}

.interview p strong, .interview p b {
	display:inline-block;
	position: relative;
	width:0em;
	font-family:'text-bd';
	text-indent: -2.5em;
	}

.interview span {
	display:block;
	}


/* -- keyboard shortcuts page -- */

#keyshorts {
	width:calc(100%; - .8em);
	padding:0em .4em;
	}

#keyshorts p {
	width:inherit;
	}

#keyshorts table {
	width:inherit;
	height:max-content;
	border-collapse:collapse;
	font-size:.85em;
	line-height:1.4em;
	}

#keyshorts thead {
	background-color:var(--bk100);
	color:var(--white);
	font-family:'text-bd';
	text-align:left;
	}

#keyshorts tbody {
	font-family:'text';
	}

#keyshorts th, #keyshorts td {
	border-bottom:1px solid var(--bk20);
	padding:.4em .3em .4em .8em;
	vertical-align:top;
	}

#keyshorts th:first-of-type, #keyshorts td:first-of-type {
	width:20%;
	padding-left:1.2em;
	}

.links {
	display: grid;
	grid-template-rows: 100%;
	grid-template-columns: 20% 20% 20% 20% auto;
	}

.links section {
	grid-row-start:1;
	grid-row-end:2;
	margin-top:0em !important;
	border-left:1px solid var(--bk20);
	padding-left:2em;
	}

.links li {
	display:block;
	margin-bottom:.25em;
	}

section.side {
	border-top:4px solid var(--bk60);
	border-bottom:1px solid var(--bk60);
	}

.mb2 {
	margin-bottom:2em !important;
	}

section.side figure {
	display:inline-block;
	width:46%;
	margin:0em 1%;
	border:unset;
	padding-left:0em;
	padding-right:0em;
	}

.sc {
	font-variant:small-caps;
	font-size:1.1em;
	line-height:.91em;
	}

.span-all {
	column-span: all;
	}


/* -- spotlight related styles -- */

h2.spotlight {
	color: var(--bk60);
	font-family: 'text';
	font-size: 1.8em;
	text-transform: uppercase;
	letter-spacing: .08em;
	}

.spotlight aside + aside {
	margin-top:1.3em !important;
	}

.spotlight aside h3 {
	margin-bottom:.1em !important;
	font-size:1.2em;
	line-height:1em;
	}

#spotlight-nav {
	grid-row:2/3;
	position:fixed;
	margin-top:1.6em;
	border-right:4px solid black;
	z-index:5;
	width: 100%;
	height: 1.5em;
	padding-top:.5em;
	background-color:var(--bk10);
	text-align:center;
	}

#spotlight-nav.timeline {
	height:1.6em !important;
	padding-top:.5em;
	}

#spotlight-nav > strong {
	display:inline-block;
	color: var(--bk60);
	font-family: 'int-bd';
	font-size:.95em;
	text-transform: uppercase;
	letter-spacing: .02em;
	}

#spotlight-nav > ul {
	display:inline-block;
	}

#spotlight-nav.timeline > ul {
	width:60% !important;
	}


#spotlight-nav ul > li {
	display:inline-block !important;
	font-family:'int';
	font-size:.95em;	
	}

#spotlight-nav li:not(:last-child):after {	
	font-family:'int';
	font-size:.75em;
	content:" | ";
	}

#spotlight-nav ul > li a {
	display:inline-block;
	margin:0em .3em;
	}



/*
||--------------------------------------------------||
||				PAGE SPECIFIC TWEAKS				||
||--------------------------------------------------||
*/

#E1 #section-head img {
	filter:grayscale(100%) opacity(25%) !important;
	}

#E401 h1 {
	margin-bottom:.5em;
	}

#E510 aside {
	margin:1em 0em;
	padding:.5em 0em;
	background-color:var(--bk10);
	}

#E510 aside:nth-of-type(2) {
	background-color:unset !important;
	}
	
#E510 aside h4 {
	margin:.5em auto 0em;
	font-family:'int';
	font-weight:normal !important;
	font-size:1.4em;
	letter-spacing:.1em;
	text-align:center;
	}

#E510 aside ol {
	font-size:.9em;
	line-height:1.4em;	
	}

#E510 table {
	width:96%;
	margin:0em auto .5em;
	border-collapse:collapse;	
	font-family:'int';
	}

#E510 td {
	border-bottom:1px solid var(--bk30);
	text-align:left;
	vertical-align:top;
	}

#E510 td[colspan~="2"] {
	padding-top:1.1em !important;
	}

#E510 th {
	font-family:'int-bd';
	text-align:left;
	}

#E510 thead {
	border-bottom:2px solid var(--bk100);
	}

#H4 #tip {
	margin-bottom:.6em;
	color:var(--bk40);
	}


/* BEGIN BAND TIMEGRID STYLES */

#timegrid {
	display:grid;
	grid-template-columns: 10% 30% 30% 30%;
	width:80%;
	margin:0em auto;		
	border-left: 4px solid var(--bk20);
	}

#timegrid #years {
	display:grid;
	grid-auto-rows:2em;
	}

#timegrid #primary, #timegrid #secondary, #timegrid #side {
	display:grid;
	grid-auto-rows:2em;
	font-family:'int';
	font-size:1em;
	}


#timegrid a {
	text-decoration-color: var(--bk40) !important;
	}

#timegrid h3 {
	color:var(--bk60);
	font-family:'int-bd';
	font-size:1em;
	text-align:center;
	}


/* time grid  */
#timegrid #years span {
	display:grid;
	align-self:end;
	width:5em;
	border-top:1px solid var(--bk40);		
	color:var(--bk40);
	font-family:'int';
	font-size:.9em;
	text-indent:.5em;
	}

#timegrid #years span:empty {
	width:2em;
	height:1.6em;
	}


#timegrid #primary div, #timegrid #secondary div, #primary div, #timegrid #side div {
	display:grid;
	width:80%;
	margin:0em auto;
	border:1px solid var(--bk20);
	border-radius:.5em;
	background-color:var(--bk10);
	font-family:'int';
	text-align:center;
	}

#timegrid #primary div span, #timegrid #secondary div span #timegrid #side div span {
	font-size:.8em;
	}

#timegrid #primary h4, #timegrid #secondary h4, #timegrid #side h4 {	
	height:2em;
	border-radius:.5em .5em 0em 0em;
	background-color:var(--bk20);	
	font-family:'int' !important;
	font-size:.9em;
	letter-spacing:.1em;
	text-transform:uppercase;
	}


/* primary bands */
#timegrid #primary #early {
	grid-row-start:3;
	grid-row-end:9;
	grid-auto-rows:2em;
	}

#timegrid #primary #trodds {
	grid-row-start:10;
	grid-row-end:27;
	grid-auto-rows:2em;
	}

#timegrid #primary #cellars {
	grid-row-start:28;
	grid-row-end:32;
	grid-auto-rows:2em;
	}

#timegrid #primary #distortion {
	grid-row-start:32;
	grid-row-end:44;
	grid-auto-rows:2em;	
	}

#timegrid #primary #siecle {
	grid-row-start:74;
	grid-row-end:95;
	grid-auto-rows:2em;	
	}

#timegrid #primary #highlandvsk {
	grid-row-start:95;
	grid-row-end:110;
	grid-auto-rows:2em;	
	}

#timegrid #primary #crybabies {
	grid-row-start:113;
	grid-row-end:119;
	grid-auto-rows:2em;	
	}



/* secondary bands */
#timegrid #secondary #obscure {
	grid-row-start:33;
	grid-row-end:36;
	grid-auto-rows:2em;
	}

#timegrid #secondary #highlandclan {
	grid-row-start:39;
	grid-row-end:43;
	grid-auto-rows:2em;
	}

#timegrid #secondary #lig {
	grid-row-start:43;
	grid-row-end:45;
	grid-auto-rows:2em;
	}

#timegrid #secondary #storm {
	grid-row-start:84;
	grid-row-end:119;
	grid-auto-rows:2em;
	}


/* side bands */
#timegrid #side #psychreg {
	grid-row-start:25;
	grid-row-end:26;
	grid-auto-rows:2em;
	}

#timegrid #side #koolaids {
	grid-row-start:27;
	grid-row-end:28;
	grid-auto-rows:2em;
	}

#timegrid #side #acid {
	grid-row-start:29;
	grid-row-end:30;
	grid-auto-rows:2em;
	}

#timegrid #side #gizmos {
	grid-row-start:31;
	grid-row-end:32;
	grid-auto-rows:2em;
	}

#timegrid #side #plan {
	grid-row-start:33;
	grid-row-end:34;
	grid-auto-rows:2em;
	}

#timegrid #side #liars {
	grid-row-start:34;
	grid-row-end:35;
	grid-auto-rows:2em;
	}

#timegrid #side #arf {
	grid-row-start:35;
	grid-row-end:36;
	grid-auto-rows:2em;
	}

#timegrid #side #ladds {
	grid-row-start:37;
	grid-row-end:38;
	grid-auto-rows:2em;
	}

#timegrid #side #pidgins {
	grid-row-start:39;
	grid-row-end:40;
	grid-auto-rows:2em;
	}

#timegrid #side #movers {
	grid-row-start:41;
	grid-row-end:42;
	grid-auto-rows:2em;
	}

#timegrid #side #bellevue {
	grid-row-start:42;
	grid-row-end:43;
	grid-auto-rows:2em;
	}

#timegrid #side #plan9studio {
	grid-row-start:45;
	grid-row-end:46;
	grid-auto-rows:2em;
	}

#timegrid #side #heller {
	grid-row-start:46;
	grid-row-end:47;
	grid-auto-rows:2em;
	}

#timegrid #side #west {
	grid-row-start:49;
	grid-row-end:50;
	grid-auto-rows:2em;
	}

#timegrid #side #laddsod {
	grid-row-start:50;
	grid-row-end:51;
	grid-auto-rows:2em;
	}

#timegrid #side #laddslive {
	grid-row-start:53;
	grid-row-end:54;
	grid-auto-rows:2em;
	}

#timegrid #side #laddsstorm {
	grid-row-start:59;
	grid-row-end:60;
	grid-auto-rows:2em;
	}

#timegrid #side #psychopaths {
	grid-row-start:68;
	grid-row-end:69;
	grid-auto-rows:2em;
	}

#timegrid #side #liquid {
	grid-row-start:90;
	grid-row-end:91;
	grid-auto-rows:2em;
	}

#timegrid #side #kensington {
	grid-row-start:105;
	grid-row-end:106;
	grid-auto-rows:2em;
	}

#timegrid #side #adults {
	grid-row-start:108;
	grid-row-end:109;
	grid-auto-rows:2em;
	}

#timegrid #side #jingle {
	grid-row-start:126;
	grid-row-end:131;
	grid-auto-rows:2em;
	}

#timegrid #side #underdog {
	grid-row-start:136;
	grid-row-end:141;
	grid-auto-rows:2em;
	}


/* timeline detail page layout */

.timedetail #bodycopy {
	column-count:1 !important;
	}

.timedetail #info, .timedetail #film, .timedetail #timegrid {
	display:none;
	}

.timedetail #infoon:checked ~ section#info {
	display:grid !important;
	}

.timedetail #filmon:checked ~ section#film {
	display:grid !important;
	}

.timedetail #timeon:checked ~ section#timegrid {
	display:block !important;
	}


/* information section styles */
.timedetail #info {
	grid-template-columns:35% auto;
	column-gap: 3%;
	width:96%;
	margin:0em auto;
	}

.timedetail #info > div:first-child {
	width:inherit !important;
	}

.timedetail #info picture, .timedetail #info picture * {
	display:block;
	width:100% !important;
	}

.timedetail #info picture, .timedetail #info ul {
	margin-bottom:1em;
	}

.timedetail hr {
	display:block;
	width:100%;
	margin:0em;
	}

.timedetail input {
	display:none;
	}

.timedetail label {
	display:inline-block;
	margin:.5em;
	width:25%;
	background-color:var(--bk20);
	transition:var(--trans-back-4), var(--trans-color-4);
	font-family:'int-bd';
	font-family:.9em;
	text-align:center;
	}

.timedetail label:hover {
	cursor:pointer;
	background-color:var(--bk60);
	color: var(--white);
	transition:var(--trans-back-4), var(--trans-color-4);
	}

.timedetail label:first-of-type {
	margin-left:calc(12.5% - 1.2em);
	}

.timedetail label + hr {
	margin-bottom:1em;
	}

.timedetail #info h4, .timedetail #info ul, .timedetail #info span {
	margin-left:1em;
	}

.timedetail #info li {
	width:100%;
	}


/* discography styles */
.timedetail #discography {
	grid-column: 1/3;

	display:grid;
	grid-template-columns:47% 47%;
	column-gap: 6%;

	margin-top:1em;
	}

.timedetail #discography h3 {
	grid-column: 1/3;
	width: calc(100% - 2em);
	font-size:1.6em;
	text-align:center;
	}

.timedetail #discography h3, .timedetail #discography h4, .timedetail #discography ul  {
	width: calc(100% - 2em);
	margin:.5em auto;
	}

.timedetail #discography ul ul {
	display:inline;
	}

.timedetail #discography ul ul li {
	font-size:1em;
	}

.timedetail #discography h4 {
	font-family:'int';
	font-size:1em;
	text-transform:uppercase;
	letter-spacing:.2em;
	}

.timedetail #discography hr {
	grid-column: 1/3;
	width: 100%;
	}


.timedetail #discography li {
	display:list-item;
	margin:.5em auto;
	padding:.2em;
	list-style-type:none;
	background:linear-gradient(to right, var(--bk10), var(--trans));
	font-size:.9em;
	}

.timedetail #discography div.right li {
	background:linear-gradient(to left, var(--bk10), var(--trans));
	}

.timedetail #discography li > a, .timedetail #discography li > div, .timedetail #discography li > picture {
	display:inline-block;
	margin:.2em .5em;
	}

.timedetail #discography li > a {
	display:inline-block;
	width:8em !important;
	height:8em;
	vertical-align:top;
	}

.timedetail #discography li b, .timedetail #discography li span {
	display:block;
	margin-left:0em;
	margin-bottom:.1em;
	font-size:1.1em;
	line-height:1.4em;
	}

.timedetail #discography li > div {
	width:15em !important;
	height:auto !important;	
	vertical-align:top;
	}

.timedetail #discography li > picture {
	display:inline-block !important;
	max-width:115px !important;
	margin-top:.2em;
	}

.timedetail #discography ul + h4 {
	margin-top:1em;
	}

.timedetail h4.tracklist  {
	margin-bottom:0em !important
	}

.timedetail ul.tracklist  {
	margin-top:0em !important
	}

.timedetail .tracklist li {
	display:inline !important;
	padding:0em .5em 0em 0em;
	background:none !important;
	}


/* gallery tweaks  */
.timedetail #film span {
	width:100%;
	}


/* timegrid tweaks  */
.timedetail #timegrid {
  grid-template-columns: 10% 40% 40%;
  width: 80%;
  margin: 0em auto;
  border-left: 6px solid var(--bk20);
  }



/*
.timedetail ul#tabs li {
	display:inline-block;
	border:1px solid black;
	width:30%;
	
	}	
*/
/*
.timedetail ul#tabs {
	width:100%;
	margin-bottom:1em;
	}

*/

.timedetail ul#tabs + hr {
	width:100%;
	}



.timedetail #photo picture {
	width:100%;
	text-align:center;
	}


/* #timegrid #primary #trodds #t3 { */
/* 	grid-row-start:3; */
/* 	} */

/* #timegrid #primary #trodds #t8 { */
/* 	grid-row-start:8; */
/* 	} */

/* #timegrid #primary #trodds #t11 { */
/* 	grid-row-start:11; */
/* 	} */




/* timeline band detail grid */



.timedetail table {
	width:100%;
	margin:1em auto;
	border-collapse:collapse;	
	font-family:'int';
	font-size:.9em;
	line-height:1.4em;
	}

.timedetail td, .timedetail th {
	padding:.05em .5em;
	}

.timedetail td {
	width: 42%;
	border-bottom:1px solid var(--bk20);
	vertical-align:top;
	}

.timedetail td:nth-of-type(1) {
	width:12%;
	padding-top:.1em;
	}

.timedetail td:nth-of-type(2) {
	padding-right:4%;
	}

.timedetail td.year {
	color:var(--bk20);
	font-family:'int';
	font-size:2em;
	padding:.7em 0.1em .2em;
	}

.timedetail th {
	border-collapse:collapse;
	background-color:var(--bk100);
	color:var(--white);
	font-family:'int-bd';
	text-align:left;
	}

.timedetail #timegrid span {
	display:block;
	font-size:.9em;
	line-height:1.2em;
	}

.timedetail #timegrid span:first-child {
	font-size:1em;
	line-height:1.4em;
	}
	
.timedetail #timegrid span:nth-child(3) {
	padding-top:.4em;
	}

.timedetail #timegrid span:empty:nth-child(3) {
	padding-top:0em !important;
	}	

.timedetail #timegrid span:last-child {
	padding-bottom:.7em;
	}

.timedetail #timegrid aside.comment {
	font-size:.9em;
	text-align:center;
	}




/* END BAND TIMEGRID STYLES */




#H2 h1, #H4 h1, #H5 h1 {
	margin-bottom:.7em;
	}

#H2 #bodycopy b {
	font-size:1rem !important;
	}

#H2 #bodycopy li {
	margin-bottom:.8em;
	font-size:.95em;
	line-height:1.4em;
	}

#H2 #bodycopy ul {
	width:90%;
	margin:.8em auto;
	}

#H3 h1 {
	margin-bottom:1em;
	border-bottom:1px solid var(--bk20);
	padding:0em .4em .4em .4em;
	font-size:1.5em;
	}

#H4 h2 {
	display: block;
	width: 100%;
	margin: 0em .5em .2em 0em;
	font-size: 1.3em;
	}

#H4 section + section {
	margin-top:1.3em;
	}

#H99 #bodycopy {
	column-count:1 !important;
	}

#L14 img.med-large {
	width:100%;
	}

#L14 #bodycopy {
	display:grid;
	grid-template-columns: 1fr 1fr 45%;
	column-count:1;
	}

#L14 #bodycopy section:nth-of-type(1) {
	grid-column: 1/2;
	}

#L14 #bodycopy section:nth-of-type(2) {
	grid-column: 2/3;
	}

#L14 #bodycopy section:nth-of-type(3) {
	grid-column: 3/4;
	}

#L15 h4 {
	margin-bottom:.4em;
	}

#L311 p:first-child {
	position:relative;
	top:-.4em;
	}

#L313 .mb2 {
	min-height:fit-content;
	padding-bottom:5em;
	}

#L313 #bodycopy {
	height:40vh;
	}


#L201 h1 {
	font-size:2.5em !important;
	}

#L321 ul + h4 {
	margin-top:.6em;
	}



/* -- wsp discography styles -- */

#L333 #list li {
	text-align:center !important;
	}

#L333 #band {
	margin-bottom:100vh;
	border-right:1px solid var(--bk30);
	padding-right:5em;
	text-align:center;
	}

#L333 #band > div.band {
	display:none;
	min-height:40vh;
	padding-bottom:2em;
	text-align:left;
	}

#L333 #wsp figure {
	padding-top:.5em !important;
	}

#L333 h4 {
	margin:.6em 0em .3em !important;
	font-size:1.1em;
	line-height:1.2em;
	}

#L333 hr:nth-of-type(1) {
	margin-bottom:.4em;
	}

#L333 hr:nth-of-type(2) {
	margin-top:.4em;
	}

#L333 input[type="radio"] {
	display:none !important;
	}

#L333 label {
	display:inline-block;
	font-size:.9em;
	color:var(--bk100);
	text-decoration:underline;
	text-decoration-color:var(--bk20) !important;
	text-decoration-thickness:.05em !important;
	}

#L333 label:last-of-type {
	margin-bottom:.4em;
	}

#L333 label:not(:last-of-type):after {
	display:inline-block;
	padding:0em .1em;
	color:var(--bk40);
	content:"|";
	}

#L333 label:hover {
	text-decoration:none;
	cursor:pointer;
	}


/* -- show-hide wsp discography  -- */

#L333 #waon:checked ~ div#wa {
	display:block !important;
	}

#L333 #bhon:checked ~ div#bh {
	display:block !important;
	}

#L333 #dogon:checked ~ div#dog {
	display:block !important;
	}

#L333 #fcon:checked ~ div#fc {
	display:block !important;
	}

#L333 #gmson:checked ~ div#gms {
	display:block !important;
	}

#L333 #jjcon:checked ~ div#jjc {
	display:block !important;
	}

#L333 #mbon:checked ~ div#mb {
	display:block !important;
	}

#L333 #voon:checked ~ div#vo {
	display:block !important;
	}

#L333 #wsp {
	text-align:center;
	}

#L342 section:nth-of-type(1) > p:nth-of-type(1) {
	margin-top:.4em;
	}

#L342 section:nth-of-type(1) p:not(.normal):nth-of-type(1)::first-letter {
	float: left;
	padding-top: .1em;
	padding-right: .15em;
	color: var(--bk40);
	font-family: 'text-bd';
	font-size: 5em;
	line-height: .7em;
	text-shadow: var(--1p-shadow-b0);
	}

#L342 article h3 {
	line-height:1.5em;
	}

#N1 article div:last-of-type {
	margin-top:1em;
	border-top:1px solid var(--bk100);
	}

#N19 time, #N23 time, #N25 time {
	margin-bottom:1em;
	} 

#N20 img {
	display:block;
	margin:0em auto;
	}

#N20 strong.large {
	display:block;
	margin-bottom:.7em;
	padding-top:1em;
	font-size:1.3em;
	text-align:center;
	}

#N21 section.side {
	margin-top:1.3em;
	}

#N26 hr {
	border-color:var(--bk20);
	}

#N26 hr:nth-of-type(1) {
	margin-bottom:.4em;
	}

#N26 hr:nth-of-type(2) {
	margin-top:.4em;
	}

#N26 label {
	display:inline-block;
	padding:0em;
	font-size:1em; 
	}

#N26 label:hover {
	cursor:pointer;
	}

#N26 #list li {
	text-align:center !important;
	}

#N26 input[type="radio"] {
	display:none;
	}
#N26 input[type="radio"] + label:after {
	content:" |";
	}

#N26 #list {
	text-align:center;
	}

#N26 #list ul {
	columns:2;
	}

#N26 #list ul#bands li {
	display:none;
	}

/* these filter the bands by letters */
#all:checked ~* li, #aon:checked ~* li.a, #bon:checked ~* li.b, #con:checked ~* li.c,#don:checked ~* li.d, #eon:checked ~* li.e, #fon:checked ~* li.f, #gon:checked ~* li.g,#hon:checked ~* li.h,#ion:checked ~* li.i,#jon:checked ~* li.j,#kon:checked ~* li.k,#lon:checked ~* li.l,#mon:checked ~* li.m,#non:checked ~* li.n,#oon:checked ~* li.o,#pon:checked ~* li.p,#qon:checked ~* li.q,#ron:checked ~* li.r,#son:checked ~* li.s,#ton:checked ~* li.t,#uon:checked ~* li.u,#von:checked ~* li.v,#won:checked ~* li.w,#xon:checked ~* li.x,#yon:checked ~* li.y,#zon:checked ~* li.z {
	display:block !important;
	}

#N27 article h2 {
	width:86% !important;
	margin:0em auto .05em;
	}

#N27 article ul {
	width:86% !important;
	margin:0em auto 1.3em;
	}


#N27 article li {
	display:list-item !important;
	margin-bottom:.2em;
	}





/*
||--------------------------------------------------||
||			MEDIA QUERIES FOR OTHER DEVICES			||
||--------------------------------------------------||
*/


/* -- adjustments for phone screens -- */

@media only screen and (max-width:820px) {

	
/* overlay menus */
	
nav {
	column-count:unset;
	column-gap:unset	
	}

nav.show-nav {
	position: fixed !important;
	width: 90%;
	max-height:70vh;
	margin: 5em 5% !important;
	overflow-y:scroll;
	}

nav li {
	margin:.25em 0em;
	}

div.mob-menu-close {
	display:block !important;
	width:100%;
	font-family:'int-bd';
	}

div.mob-menu-close a {
	display:block;
	width:fit-content;
	margin:.5em auto;
	border:1px solid var(--bk80);
	padding:2% 5%;
	border-radius:.3em;
	}


/* -- footer styles -- */

footer {
	grid-template-columns:2% 83% 15%;
	}

footer #key-icon {
	display:none !important;
	}

footer ul {
	display:inline-block;
	position:absolute;
	left:1em;
	bottom:0em;
	margin:.4em 0em;
	}

footer ul li:nth-child(n+2){
	display:none;
	}

footer ul li:nth-child(4){
	display:inline-block !important;
	margin-left:.8em;
	}

footer li:nth-child(1):after, footer li:nth-child(4):after {
	content:"" !important;
	}


/* -- home page fixes -- */

.home main {
	display:block !important
	}

#home > div img {
	display:inline-block;
	height:90px
	}
	
#home img:nth-of-type(1) {
	grid-column-start:1;
	grid-column-end:2;
	margin:6px 6px 2px 6px;
	}

#home img:nth-of-type(2) {
	grid-column-start:2;
	grid-column-end:3;
	justify-self:center;
	left:-12vw;
	width:60vw;
	height:30px !important;
	}
	
@media only screen and (max-width:414px) {
	#home img:nth-of-type(2) {
		display:none;
		}
	}

#home > div:nth-of-type(2) {
	display:grid;
	grid-template-columns:100%;	
	grid-row-start:2;
	grid-row-end:3;
	width:100vw;
	padding:3px 0px;
	font-family:'int-it';
	font-size: .875em;
	}

#datepage, #pagecount {
	display:none !important;
	}

#home span.center {
	grid-column-start:1;
	grid-column-end:1;
	justify-self:center;
	text-align:center; 
	}

#home article {
	height:max-content;
	border-right:unset;
	}

#home div#right {
	width:100%;
	margin-left:unset;
	}

#home h1 {
	margin-bottom:.8em;
	font-size:2.2em;
	line-height:1.2em;
	}

#home h2 {
	font-size:1.6em !important;	
	}

#home main {
	display:block;
	height:max-content;
	margin:1em 4% !important;
	padding:0em !important;
	}


/* -- featured record -- */

#featured-record-bottom span {
	text-align:center;
	}

#featured-record-bottom #record-info {
	display:block;
	text-align:center;
	}


/* -- article pages -- */

.article aside blockquote {
	font-size:1.2em;
	}

.article body, .landing body {
	grid-template-rows: 4.2em auto 2em
	}

.article h1 {
	font-size:1.8em;
	}

.article h2 {
	font-size:1.6em;
	} 

.article h1 + h2.spotlight {
	margin:.5em 0em .3em;
	font-size:1.4em;
	}


/* --	main styles for articles -- */

.article main, .news main {
	margin-top:3em;
	}

.article main .bottom-images {
	display:block;
	}

.article main .bottom-images figure {
	display:block;
	width:100%;
	}


/* --	header styles for most pages -- */

.article header, .gallery header, .landing header, .news header, .release header {
	display:block;
	height:4em;
	padding:unset;
	}

.article header span:nth-child(1), .article header ul, .gallery header span:nth-child(1), .gallery header ul, .landing header span:nth-child(1), .landing header ul, .news header span:nth-child(1), .news header ul, .release header span:nth-child(1), .release header ul {
	display:block;
	width:100%;
	margin:0em auto;
	padding:.2em 0em;
	height:fit-content;
	text-align:center;
	}


header > span {
	margin-bottom:.6em !important;
	background-color:var(--bk100);
	color:var(--white);
	}

header > span > a {
	color:var(--white);
	}



.article header ul, .gallery header ul, .landing header ul, .news header ul, .release header ul {
	font-size:1.5em;
	}

.article h1 {
	width:100%;
	font-size:2em;
	}

.article .article-bottom-images-long {
	display:block !important;
	}

.article #bodycopy {
	column-count:1 !important;
	}

.article #bodycopy div:last-child, .article #bodycopy section:last-child {
	margin-bottom:4em;
	}

.article-discography-no-gallery {
	display:block;
	}

.article-discography-no-gallery section.columns {
	display:block;
	border:unset;
	padding-left:0em;
	}

#SLP003 h2.spotlight {
	margin-bottom:.2em;
	}

#contact label {
	display:block;
	width:100%;
	text-align:left;
	}

#contact input, #contact textarea {
	display: inline-block;
	width: calc(100% - .6em);
	margin: .5em 0em;
	}

#contact input[type="submit"] {
	display: inline-block;
	left:0em !important;
	width: 50%;
	height: 2.5em;
	margin:1em auto;	
	}

#contact p {
	left:0em !important;
	width:100%;
	margin:1em auto;
	}

#contact .submit {
	text-align:center;
	}

#keyshorts {
	margin-top:1em;
	margin-bottom:4em;
	}

#keyshorts p, #keyshorts table {
	width:100%;
	}

#site-map .lists {
	column-rule: unset;
	border-left: unset;
	padding-left: unset;
	}


/* --	landing page styles	-- */

.landing h1 {
	line-height:1.3em;
	}

.landing main {
	grid-template-rows:max-content auto;	
	}

.landing #section-pages {
	display:none;
	}

.landing #section-head {
	display:block;
	height:fit-content !important;
	margin-top:1.5em;
	padding-bottom:1em;
	}

.landing #section-head span {
	display:block;
	margin-bottom:.1em;
	font-size:6em;
	}

.landing #section-head h1 {
	display:block;
	width:100%;
	margin:.15em auto;
	border-right:unset;
	font-size:4em;
	line-height:1em;
	}

.landing h4 a {
	display:block;
	margin:1.2em auto .8em;
	line-height:1.5em;
	}

.landing #recent {
	margin-bottom:.7em;
	}

.landing #right {
	margin-top:1em;
	}

main #section-article-nav {
	display:block;
	}


/* -- teaser story -- */

.landing main #bodycopy {
	display:block;
	width:100% !important;
	border-right:unset;
	border-bottom: 1px solid var(--bk100);
	padding-bottom:.4em;
	}

.landing #section-article-nav figure{
	width:100%;
	margin:0em auto .5em;
	border:unset;
	padding:unset;
	}


/* -- landing page tweaks -- */
.landing div#right {
	width: 100%;
	height:max-content;
	margin-left:unset;
	margin-bottom:4em;
	}

.landing #section-article-nav article {
	disply:block !important;
	grid-template-columns:unset;
	height:max-content;
	margin-top:.8em;
	padding-right:unset;
	}


/* -- menu of other pages in section -- */

.landing #section-pages {
	width:100%;
	height:fit-content;
	}

.landing #section-pages h3, .landing #section-pages li {
	width:100%;
	text-align:center !important;
	}
	
.landing #section-pages ul {
	width:100%;
	}

.landing #rec-menu {
	height:6em;
	}

#rec-menu h3 {
	font-size:1.2em;
	}


/* -- detail page tweaks -- */

.detail #detail {
	grid-template-rows: auto auto !important;
	}

.detail #detail div#bodycopy {
	display:block !important;
	column-count:1;
	}

.detail #detail div#bodycopy section {
	display:block;
	width:100% !important;
	}

.detail #detail div#bodycopy section > figure {
	width:100%;
	}

.detail #detail div#bodycopy section > aside {
	width:100%;
	margin-bottom:.6em !important;
	padding-bottom:unset !important;
	}

.detail #detail div#bodycopy section > aside li {
	width:unset !important;
	}

.detail #release h1, .gallery h1 {
	font-size:2em;
	}

.detail #release h2, .detail h2 {
	font-size:1.5em;
	}

.detail main#content {
	margin-top:3.5em;
	}

.detail main.spotlight {
	margin-top:1em !important;
	padding-top:3em;
	}

.detail main.spotlight > #detail {
	margin-top:3.5em !important;
	}

.detail #discogs-badge {
	left: -1em;
	margin: .5em 0em !important;
	transform: scale(.8,.8);
	}

.detail section#normal *:last-child {
	margin-bottom:4em !important;
	}

.article #spotlight-nav, .release #spotlight-nav, .gallery #spotlight-nav {
	display:block;
	top:2.5em;
	left:0em;
	width:100vw;
	height:max-content;
	}

.article #spotlight-nav > ul li, .release #spotlight-nav > ul li, .gallery #spotlight-nav > ul li {
	display:inline-block;
	margin:0em;
	}

.article #spotlight-nav ul, .release #spotlight-nav ul, .gallery #spotlight-nav ul {
	width:90%;
	padding:.2em 5% .6em;
	text-align:center;
	}

#spotlight-nav + main article {
	margin-top:3.4em;
	}

.article .margin-top-4, .gallery .margin-top-4 {
	margin-top:4em !important;
	}

.article #bodycopy {
	padding-bottom:4em;
	}

#spotlight-nav li::after {
	font-family: 'int';
	font-size: .75em;
	content: " | ";
	}

#spotlight-nav li:nth-child(even)::after {
	content: "" !important;
	}

.gallery #content {
	margin-top:2.5em;
	}

.gallery.spotlight #content {
	margin-top:5.5em;
	}

.gallery section, .gallery #film section a {
	display:block !important;
	}

#film {
	width:100%;
	min-width: 100% !important;
	}

#film a + span {
	margin:2em 0px 1em;
	}

#film img {
	display: inline-block;
	position: relative;
	width: 60vw;
	height: 60vw;
	margin:2vw auto;
	border: 3vw solid var(--white);
	box-shadow: var(--3p-shadow-b6);
	}

#film section a.next-pics {
	right:.3em !important;
	}

#film section a.prev-pics {
	left:.3em !important;
	}

#film span {
	margin-bottom:2em;
	padding-bottom:.8em;
	line-height:1.5em;
	}

.gallery #film ul {
	margin-bottom:4em;
	}

.gallery #film ul > li {
	display:list-item;
	width:100% !important;
	max-width:80%;
	margin:1.5em auto;
	text-align:center;
	}

.gallery #film a.next-pics, .gallery #film a.prev-pics{
	position:fixed;
	top:50%;
	font-size:3em;
	}

#film a.next-pics {
	right:.3em !important;
	margin-right:0em !important;
	}

#film a.prev-pics {
  	left: .3em !important;
	margin-left:0em !important;	
	}

#ousd {
	transform:scale(90%);
	}

#ousd #gallery-caption {
	width:90%;
	margin:.2em auto;
	font-size:.9em;
	line-height:1.4em;
	}

#ousd #keymenu {
	width:80vw;
	max-height:calc(100% - 5em);
	margin-top:2.5em;
	overflow-y:auto;
	}

#ousd #keymenu a {
	display: inline-block;
	width: 90%;
	padding-left: .2em;
	padding-bottom: .2em;
	vertical-align: text-top;
	line-height:1.3em;
	}

#ousd #keymenu li {
	margin-bottom:.2em;
	}

#ousd #keymenu ol {
	column-count:1;
	column-gap:unset;
	}

#ousd #keymenu p {
	line-height:1.3em;
	}

#ousd #keymenu a {
	position:relative;
	margin-top:-.15em;
	}

#ousd.show button {
	background-size:2.8em 2.8em;
	background-repeat:no-repeat;
	}

.sp-discography img {
	width:unset !important;
   	height:unset;
	}

.timedetail #spotlight-nav {
	height: 1.4em !important;
	}

@media only screen and (max-width:414px) {
	.sp-discography img {
		width:70%;
	   	height:unset;
	   	}
	}

.sp-discography .break-after {
	margin-bottom:0em !important
	}

.sp-discography .standard {
	margin-bottom:4em !important;
	}

.gallery h1 {
	width:100%;
	margin-bottom:.2em !important;
	font-size:2.3em;
	text-align:center;
	}

.gallery h2 {
	width:100%;
	margin-bottom:.4em;
	font-size:1.8em;
	text-align:center;	
	}

.gallery .margin-top-4 h1 {
	width:90%;
	margin:0em auto 0em;
	font-size:2.5em;
	}

.gallery .margin-top-4 h2.spotlight {
	width:90%;
	margin:0em auto .2em;
	font-size:1.8em;
	line-height:1.8em;
	}

.release article {
	display:block;
	margin-top:2em;
	}

.release.spotlight article {
	display: block;
	margin-top:4.5em !important;	
	}

.release article div:nth-of-type(2) {
	display: block;
	}

.release aside {
	min-height:unset !important;
	}
.release aside h3:first-child {
	margin-top:0em !important;
	}

.release h1 {
	font-size:2.4em;
	line-height:1.3em;
	}

.release h2 {
	font-size:1.5em;
	line-height:1.3em;
	}


/* -- news story tweaks -- */

.news article {
	width:90% !important;
	}

.news figure, .news figure.col2 {
	display:block;
	min-width:unset;
	width:100% !important;
	margin:1em auto;
	}

.news figure img {
	width:inherit !important;
	}

.news figure.in-block img {
	height:100%;
	}

.news h1 {
	margin:0em auto 0em;
	line-height:1.4em;
	}

.news h2 {
	margin:1em .5em 0em 0em !important;
	}

.news h2 + ul, .news h2 + p {
	margin-top:.4em;
	}

.news section:last-of-type *:not(button, figure, figcaption, img):last-child {
	margin-bottom:4em !important;
	}

.news figure figcaption {
	margin-bottom:.8em !important;
	}

.news .ff-margin-break {
	display:none;
	}

.news figure.col2  {
	margin-bottom:4em;
	}

.news.wide #bodycopy {
	columns:1;
	}

.news #bodycopy h2:first-child {
	width:100% !important;
	}

.news #section-head {
	margin-bottom:.6em;
	}


/* -- bandography detail page specific tweaks for mobiles -- */
.timedetail #spotlight-nav, .timeline #spotlight-nav {
	height: 2.4em !important;
	padding: .3em 1em .5em;
	width: calc(100% - 2em);
	}


.timedetail #spotlight-nav span {
	line-height:1.2em;
	}

.timedetail #film .current {
	display:block;
	}

.timedetail #info div {		/* trick to make two col grid in desktop appear as one for mobiles*/
	grid-column-start:1;
	grid-column-end:3;
	}

.timedetail #info ul {
	margin-bottom:.4em;
	}

.timedetail #info ul + span {
	display:block;
	width:100%;
	text-align:left;
	margin-bottom:1.5em;
	}

.timedetail label {
	margin:.5em .3em;
	}

.timedetail main article {
	margin-top:2em !important;
	}

.timedetail label:first-of-type {
	margin-left:calc(12.5% - 1.2em);
	width:33%;
	}

.article section:nth-of-type(1) p:not(.normal):first-child::first-letter {
	padding-top:.15em;
	font-size:4em;
	}


/* timeline tables */
.timedetail #timegrid {
	width:100%;
	border-left:unset;
	}

.timedetail #timegrid table {
	margin-top:0em;
	}

.timedetail #timegrid thead {
	display:none;
	}

.timedetail #timegrid td {
	display:block;
	width:calc(100% - 1.2em);
	border:unset;
	padding:.3em .6em 0em;
	}
					  
.timedetail #timegrid td.year {
	width:100%;
	border-bottom:2px solid var(--bk60);
	padding:1em 0em .3em;
	}

.timedetail #timegrid td:empty {
	display:none;
	}

.timedetail #timegrid tr {
	border-bottom:1px solid var(--bk20);
	}

.timedetail #timegrid tr:first-child td {
	padding-top:.4em;
	}

.timeline #timegrid {
	width:110%;
	margin:1em -5%;
	}

#timegrid #primary div, #timegrid #secondary div, #primary div, #timegrid #side div {
	display: grid;
	width: 80%;
	margin: 0em auto;
	border: 1px solid var(--bk20);
	border-radius: .3em;
	background-color: var(--bk10);
	font-family: 'int';
	text-align: center;
	}


.timeline #timegrid h3, .timeline #timegrid h4 {
	font-size:.8em;
	}

.timeline #timegrid h4 {
	padding:.1em .3em 1em;
	font-size:.7em !important;
	line-height:1.3em;
	}

.timeline #timegrid #years span:empty {
	width: 1em;
	height: 1.6em;
	}

#timegrid #years span {
	width: 2em;
	font-size: .8em;
	text-indent: .5em;
	}	



/* -- page specfic tweaks - for mobiles -- */

#E401 h1 {
	margin-bottom:.2em;
	font-size:1.6em;
	text-align:center;
	}

#E401 h2 {
	display:none;
	}

#E401 div#bodycopy {
	display:block !important;
	}

#E401 div#bodycopy section {
	border:unset;
	padding:unset;
	text-align:center;
	}

#E401 section + section {
	margin-top:1.8em !important;
	}

#E401 .links li {
	display:list-item;
	}

#H article {
	border-right:unset;
	}

#H h1 {
	margin-bottom:.4em;
	}

#H h2 {
	line-height:1.2em;
	}

#H main {
	margin-top:7em;
	}

#L1 #section-head span {
	font-size:5em;
	}

#L11 .sp-discography li {
	height:260px;
	border:unset;
	padding-bottom:0em;
	}

#L11 .sp-discography ul {
	grid-template-columns:unset;	
	grid-template-rows:260px;
	}

#L14 :is(h1, h2, h3) {
	text-align:center;
	}

#L14 h1 + h2 {
	margin-top:0em;
	}

#L14 h3 {
	margin-bottom:.2em;
	}

#L14 section + section {
	margin-top:1.6em;
	}

#L14 #bodycopy {
	display:unset;
	text-align:center;
	}

#L301 img {
	width:80%;
	}

#L333 section + section {
	border-top:1px solid var(--bk100);
	padding-top:1em;
	}

#L333 .discography details ul {
	margin-top: .15em !important;
	}

#L333 #band > div.band {
	min-height: unset;
	padding-bottom:1em !important;
	}

#L333 #band {
	margin-bottom:unset;
	border-right:unset;
	padding-right:unset;
	}
	
#H4 .lists {
	border-left:unset;
	}

#H4 .lists li {
	display:list-item;
	}

#N1 #section-head span {
	font-size:5.5em;
	}

#N20 #bodycopy li, #N24 p {
	margin-bottom:.8em !important;
	}

#N26 #list ul {
	columns:1;
	}

}