@charset "utf-8";
/* CSS Document */

html, body {
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	animation: fadeIn 2s;
}
@keyframes fadeIn {
  0% {		opacity: 0 }
  100% {	opacity: 1 }
}
body { 
	font-family: "Assistant", "HelveticaNeue", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	font-size: 1em; /* 16 px */
	line-height: 1.45em;
  	font-style: normal;
	text-align: left;
}
*,
*::before,
*::after {
	position: relative;
	box-sizing: inherit;
	margin: 0;
	padding: 0;
	-webkit-transition: all .2s;
	-o-transition: all .2s;
	-moz-transition: all .2s;
	transition: all .2s ease-in-out;
}
a {
	font-weight: bold;
}
.center {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}





/** COLORS *************************************************/

body 						{ background-color: #ebebeb } 	/* 92% */

.num,
.alt,
blockquote::before			{ color: #cccccc } 				/* 80% */

a.button,
.image,
.box,
.gray						{ background-color: #cccccc } 	/* 80% */

.gray .num,
.gray blockquote::before	{ color: #b8b8b8 } 				/* 72% */

.box a.button,
.gray a.button,
.gray .box					{ background-color: #b8b8b8 }	/* 72% */

small.credit,
nav#bottom a:hover,
nav#bottom a:focus,
.dark .box					{ color: #8c8c8c } 				/* 55% */

.dark,
.dark a 					{ color: #727272 } 				/* 45% */

.dark a.button				{ background-color: #727272 }

.dark .num,
.dark blockquote::before 	{ color: #454545 } 				/* 27% */

.dark hr,
.dark .box,
.dark .divider				{ background-color: #454545 }	/* 27% */

body,
a,
a.button,
a.button:hover,
nav#middle menu a,
nav#middle menu a:hover,
span.note					{ color: #333333 } 				/* 20% */

hr,
.hole,
.dark 						{ background-color: #333333 }	/* 20% */

a:hover,
.color 						{ color: #a68f4b } 				/* GOLD */

a.button:hover,
nav#middle menu a:hover 		{ background-color: #a68f4b }





/** GENERAL ************************************************/

.box { 
	border-radius: .5em;
	padding: 1em 1.25em 1.25em;
}
p + .box {
	margin-top: 1.45em;
	margin-bottom: 1.35em;
}
.center { text-align: center }
.bold 	{ font-weight: bold }
.nobold { font-weight: normal }
.hide 	{ display: none }
.spacer 		{ content: '';
				  height: 2.5em }
p + .spacer 	{ margin-top: -.8em }
.spacer.thin	{ height: 1.5em }
.spacer.thinner	{ height: .75em }

hr {
	display: block;
    height: .65em;
    border-radius: .12em;
	margin-bottom: 1em;
	border: none;
}

hr.thin {
	height: .15em;
}

hr.fold {
	position: absolute;
	left: 0; right: 0;
    height: 1.5em;
    border-radius: 0;
	background-color: transparent;
	background-image: linear-gradient(black,rgba(0,0,0,.25),transparent);
    mask-image: linear-gradient(to right,transparent,black,transparent);
	-webkit-mask-image: linear-gradient(to right,transparent,black,transparent);
	margin: 0;
	opacity: .5;
}
hr.fold.inv {
	margin-top: -1.5em;
	background-image: linear-gradient(transparent,rgba(0,0,0,.25),black);	
}
hr.fold.left {
	right: 50%;
    mask-image: linear-gradient(to right,black,transparent);
	-webkit-mask-image: linear-gradient(to right,black,transparent);	
}
hr.fold.right {
	left: 50%;
    mask-image: linear-gradient(to right,transparent,black);
	-webkit-mask-image: linear-gradient(to right,transparent,black);	
}
/*
#black-cover {
	display: block;
	border-radius: .2em;
	width: 10.5em; height: 14em; 
	box-shadow: -.05em .2em .5em #111;
	background-image: linear-gradient(to bottom,rgba(255,255,255,0.1),transparent), url("/images/stmb-cover 675x900.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center
}
a#black-cover:hover,
a#black-cover:focus {
	filter: brightness(125%);
}
*/





/**	HEADER *************************************************/

header {
	width: 100%;
/*	overflow: hidden;*/
}
header section {
	aspect-ratio: 16 / 9;
	background-size: cover;
	mask-image: linear-gradient(90deg, transparent, white 5% 95%, transparent);
	margin: 0 auto;
}
/*
body#about2 header section {
	margin: 0 0 0 auto;
	mask-image: linear-gradient(90deg, transparent, white 5%)
}
*/
body#home2 header section {
	mask-image: linear-gradient(90deg, transparent, white 2% 95%, transparent)	
}
@supports not (aspect-ratio: 16 / 9) { 
	header section,
	.image { 
		height: 0;
		padding-bottom: 56.25%;
  	}
}

/* home header buttons ***************************/
/*
header menu {				
	position: absolute;
	display: none;
	left: 5%;
	bottom: 1.5em;
	z-index: 1000;
}
header menu a.icon {
	width: 5em;
	height: 5em;
	margin-right: .5em;
}
header menu a.button {
	float: left;
	font-size: 1em;
	margin-top: .5em;
	margin-right: 1em;
}
*/
header + #sitelogo {
	display: block;
	height: 3em;
	max-width: 56em;
	background: url("/images/headers/logo-site.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left bottom;
	filter: drop-shadow(0 -.3em .15em rgba(0,0,0,.8));
	margin: -3em auto 0;
	z-index: 1000;
}
body#home2 header menu 		{ display: block }
body#home2 header + #sitelogo 	{ display: none }





/** NAV (MID) *************************************************/

nav#middle {
	display: flex;
	align-items: stretch;
	flex-direction: row-reverse;
	height: 3em;
	width: 100%;
}
nav#middle menu {
	display: inline-flex;
	align-items: stretch;
	flex-direction: row;
	padding: 0 .75em;
}
nav#middle menu:after {
	content: '\0020';
	position: absolute;
	width: 100%;
	height: 1.5em;
	bottom: -1.5em;
	background-image: linear-gradient(black,rgba(0,0,0,.25),transparent);
    mask-image: linear-gradient(to right,transparent,black);
	-webkit-mask-image: linear-gradient(to right,transparent,black);
	opacity: .5;
	z-index: 1000;
}
/*article#top span,*/
nav#middle menu a {
	font-family: "IBM Plex Sans", sans-serif;
	font-size: .75em;
	font-weight: normal;
	letter-spacing: .175em;
	line-height: 1.175em;
	text-transform: uppercase;
	text-decoration: none;
}
nav#middle menu a {
	display: flex;
	align-items: center;
	text-align: center;
	padding: .1em 1em 0;
	border-left: .2em solid #ffffff;
	border-right: .15em solid #d0d0d0;
}
nav#middle menu a:first-of-type {	border-left: none }
nav#middle menu a:last-of-type {	border-right: none }
nav#middle menu a:hover {			border-left-color: #a68f4b }





/**	COLUMN *************************************************/

article { padding: 2.5em 2em }

nav#middle + article 			{ padding-top: 1.25em }

section 		{ max-width: 28em;				/* 28em	448px */
				  margin: 0 auto }

section.left,
section.right,
section.wide	{ max-width: 42em }				/* 42em	672px */

section.left 	{ padding-right: 7em }
section.right 	{ padding-left: 7em }

section.lefter,
section.righter,
/*header section#bg,*/
section.wider	{ max-width: 56em }				/* 56em	896px */

section.lefter 	{ padding-right: 14em }
section.righter	{ padding-left: 14em }

section.leftest,
section.rightest,
section.widest 	{ max-width: 70em } 			/* 70em 1120px */





/**	BUTTON *************************************************/

a.button {
    display: inline-block;
	font-family: "IBM Plex Sans", sans-serif;
	font-size: .8em;
	font-weight: bold;
	font-style: normal;
    letter-spacing: .075em;
	line-height: 1em;
	text-transform: uppercase;
    text-align: center;
    text-decoration: none;
/*	white-space: nowrap;*/
	word-break: keep-all;
	padding: .7em 1.25em;
    margin-left: -.2em;
	border-radius: 3em;
	transition: all .2s linear;
}
p + a.button,
p + p > a.button { margin-top: .4em } /* Add space over buttons if following text */






/**	AVATAR *************************************************/

.avatar {
	content: '';
/*	position: absolute;*/
	float: right;
	width: 15em;
	height: 15em;
	margin: .75em -7.5em .5em 1.2em;
	border-radius: 100%;
}
.avatar::before {
	content: '';
	position: absolute;
	width: 118%;
	height: 118%;
	left: -9%; top: -9%;
	box-shadow: inset -.3em .2em .3em 0 rgba(0,0,0,.15);
	border-radius: 100%;	
}
.dark .avatar::before {
	box-shadow: inset -.3em .2em .3em 0 rgba(0,0,0,.25);
}





/**	FONTS **************************************************/

h1 {											/* BEBAS */
	font-family: "Bebas Neue", sans-serif;
	font-size: 9em;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	line-height: 0.8em;
	word-wrap: break-word; 
 	left: -0.04em;
	margin-bottom: .04em;
}
body#home2 section#top h1 {
	font-size: 5em;
	margin-bottom: .06em;
}
body#home2 h1 {
	font-size: 2.5em;
	margin-bottom: .15em;
/*	background-color: aqua*/
}
small + h1 {
	margin-top: .15em;
}
h2,
blockquote {							/* PRAGATI */
	display: block;
	font-family: "Pragati Narrow", sans-serif;
	font-size: 1.5em;
	font-weight: bold;
	line-height: 1.125em;
}
h2 { 
	margin-bottom: .5em 
}
/*
body#home2 h2 {
	text-transform: uppercase;
	line-height: .9em;
	margin-bottom: .3em;
}
*/
blockquote {
	letter-spacing: normal;
	margin: 1.25em -4.66em 1.25em 4.66em;
}
blockquote::before {
	position: absolute;
	content: '\201C'; 
	font-size: 6.25em;
	font-weight: normal;
	margin: .153em 0 0 -.3em;
}
blockquote + small {
/*	font-size: .65em;*/
/*	letter-spacing: normal;*/
	margin: -1.75em -10.21897810218978em 2.45em 10.21897810218978em;
}
blockquote + small::before {
	content: '\2014\00a0';
	position: absolute;
	left: -1.4em;
}
body#home2 blockquote 					{ font-size: 2.25em;
										  margin: .5em 0 .5em }
body#home2 blockquote + small 			{ font-size: .8em;
										  padding-left: .08em;
										  margin: 1.2em 0 2em }
body#home2 blockquote + small::before 	{ left: -1.25em }

small {
	display: block;
	font-family: "IBM Plex Sans", sans-serif;
	font-size: .685em;
    font-weight: normal;
	letter-spacing: .05em;
	line-height: 1.15em;
	text-transform: uppercase;
	margin-bottom: .3em;
}
small.credit {
	font-size: .55em;
	text-align: center;
	margin-top: -2.5em;
	margin-bottom: 2.25em;
}
.byline		{
	display: inline-block;
	max-width: 25em;
	padding: .25em 5em .5em 0;
	border-top: .25em solid #333333;
	border-bottom: .15em solid #333333;
	margin: .35em 0 1.15em;
	white-space: nowrap;
	/*	margin-bottom: 1em;*/
}
.num {
	position: absolute;
	font-family: "Bebas Neue";
	font-size: 6.65em;
	letter-spacing: -0.045em;
	text-align: right;
	width: 1.1em;
	overflow: visible;
	left: -1.25em;
/*	left: -1.22em;*/
	margin-top: .04em; /* BASELINE SHIFT */
}
p {
	margin-top: 0;
	margin-bottom: .8em;
}
body#home2 p {
	line-height: 1.2em;
	margin-bottom: .5em;
}





/**	SPLIT **************************************************/

/*
.split {
	display: flex;
	flex-flow: row wrap;
	width: 100%;
}
*/





/**	NOTES **************************************************/

.script,
span.note {
	font-family: "Covered By Your Grace";
	font-size: 1.15em;
	font-weight: normal;
	letter-spacing: normal;
	text-transform: none;
}
span.note {
	position: absolute;
	text-transform: none;
	text-align: center;
	width: 5em;
	margin: .2em 0 0 -6em;
	transform: rotate(-11deg);
}
span.note::after {
	display: block;
	height: 1em;
	margin-top: .4em;
	background: url(/images/note_arrow.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 90% center;
	content: "";
}
.dark span.note::after
/*
,
span.note.dark::after 
*/
{
	background: url(/images/note_arrow_dark.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 90% center;
	content: "";
}
span.note.inv {
	left: auto;
	margin-top: 0;
	margin-right: 0;
	transform: rotate(2deg); 
	right: -5.75em;
}
span.note.inv::after {
    transform: scaleX(-1) rotate(5deg); 
	margin-top: .2em;
	margin-left: -.5em;
}
.box span.note { margin-left: -6.75em }
.box span.note.inv { right: -5.75em }




/**	IMAGE **************************************************/

.image {
	display: block;
	aspect-ratio: 16 / 9;
	background-size: cover;
	background-position: 50% 50%;
}
.image.mag {
	width: 50%;
	aspect-ratio: 3 / 4;
	margin-left: auto;
	margin-right: auto;
}
.image,
video { border-radius: .25em }
video { width: 100% }
p + p > .image 	{ margin-top: 1.7em }
p > .image 		{ margin-bottom: 1.5em }
p + p > video 	{ margin-top: .9em }
p > video 		{ margin-bottom: .325em }
body#home2 p > .image { margin-bottom: .8em }

a.image:hover {
	opacity: .85;
}
.dark a.image {
	opacity: .7;
}
.dark a.image:hover {
	opacity: 1;
}





/**	HEADER BGs **********************************************/

/* HOME */
body#home2 header section { 	background-image: url("/images/headers/logo-home.png"), url("/images/headers/home.jpg");
								background-repeat: no-repeat;
								background-size: 38%, cover;
								background-position: 2em 25%, center }
/* ABOUT */
body#about2 header section {	background-image: url("/images/headers/about.jpg") }
body#about2 .avatar {			background-image: url("/images/headers/about.jpg");
								background-size: 820%;
								background-position: 71% 47% }
/* CONTACT */
body#contact2 header section {	background-image: url("/images/headers/contact.jpg") }
body#contact2 .avatar {			background-image: url("/images/headers/contact.jpg");
								background-size: 185%;
								background-position: 60% 0% }
/* MAGAZINE */
body#magazine2 header {			background: linear-gradient(to right,#8e8e8e 50%, #b7b7b7 50% 100%) }
body#magazine2 header::before,
body#magazine2 header::after {	opacity: .25 }
body#magazine2 header + #sitelogo {	filter: drop-shadow(0 -.18em .15em rgba(0,0,0,.35)) }
body#magazine2 header section {	background-image: url("/images/headers/museum.jpg") }
body#magazine2 .avatar {		background-image: url("/images/headers/museum.jpg");
								background-size: 200%;
								background-position: 68% 35% }
/* COMICS */
body#comics header {			background: linear-gradient(to right,#8e8e8e 50%, #b7b7b7 50% 100%) }
body#comics header::before,
body#comics header::after {		opacity: .25 }
body#comics header + #sitelogo {	filter: drop-shadow(0 -.18em .15em rgba(0,0,0,.35)) }
body#comics header section {	background-image: url("/images/headers/museum.jpg") }
body#comics .avatar {			background-image: url("/images/headers/museum.jpg");
								background-size: 200%;
								background-position: 68% 35% }

.icon#home		{ background-image: url("/images/icons/home.png") }
.icon#about		{ background-image: url("/images/icons/about.png") }
.icon#contact	{ background-image: url("/images/icons/contact.png") }
.icon#magazine		{ background-image: url("/images/icons/black.png") }
.icon#muffin	{ background-image: url("/images/icons/muffin.png") }

.image#cover		{ background-image: url("/images/stmb-cover 675x900.jpg") }
.image#openmag		{ background-image: url("/images/header/header_openmag.jpg") }
.image#about		{ background-image: url("/images/1080/1080_nostalgia.jpg") }
.image2#openmag		{ background-image: url("/images/header/header_openmag.jpg") }
.image#studphotos	{ background-image: url("/images/stud-photos 750x1000.jpg") }
.image#stud			{ background-image: url("/images/header/header_stud.jpg") }
.image#speedwagon	{ background-image: url("/images/header/header_speedwagon.jpg") }
.image2#speedwagon	{ background-image: url("/images/header/header_speedwagon.jpg") }





/**	FLEX ***************************************************/

.flex {
    display: flex;               /* Use Flexbox layout */
    flex-wrap: wrap;            /* Allow items to wrap onto multiple lines */
	gap: 1.5em;
}
.flex > div {
    flex: 1 0;
}





/**	SHADE **************************************************/

.shade::before,
.shade::after {
	content: '';
	position: absolute;
	display: block;
	width: 100%;
	left: 0;
	height: 2.5em;
	background-image: linear-gradient(black,rgba(0,0,0,.40),transparent);
    mask-image: linear-gradient(to right,black,rgba(0,0,0,.40),black);
	-webkit-mask-image: linear-gradient(to right,black,rgba(0,0,0,.40),black);
	opacity: .25;
	z-index: 900;
}
.shade::before {
	 top: 0;
}
.shade::after {
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
	bottom: 0;
}
.dark.shade::before,
.dark.shade::after {
	opacity: .5;
}
footer.shade::after {
	display: none;
}





/**	HOLE ***************************************************/

.hole {
    content: "";
	display: inline-block;
	border-radius: 100%;
	box-shadow: inset -.3em .5em .45em 0 rgba(0,0,0,.35), -.05em .1em .1em rgba(255,255,255,.45), .05em -.1em .2em rgba(0,0,0,.4);
/*	box-shadow: inset -.5rem 1rem 1rem 0 rgba(0,0,0,.75), -.065rem .1rem .5rem rgba(255,255,255,.5), .065rem -.1rem .5rem rgba(0,0,0,.7);*/
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.dark .hole {
	box-shadow: inset -.3em .5em .45em 0 rgba(0,0,0,.5), -.05em .1em .1em rgba(255,255,255,.25), .05em -.1em .2em rgba(0,0,0,.4);	
}
/*
span.hole2 {
	float: right;
	width: 15em;
	height: 15em;
	top: -.25em;
	right: -7.5em;
}
span.hole2::before {
	content:'';
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 100%;
	background-color: rgba(51,51,51,.33);
}
*/





/** FOOTER *************************************************/

footer {
	padding: 1.25em;
	padding-bottom: 2.25em;
}
footer a {
	text-decoration: none;
}
footer h1 {
	font-size: 1.8em;
	margin: 0 0 .1em;
}
nav#bottom {
	display: flex;
/*	flex-basis: auto;*/
	justify-content: center;
	align-content: flex-start;
	flex-flow: row;
/*	flex-flow: row nowrap;*/
	text-align: center;
/*	padding: 1.2em 0 2em;*/
	overflow-x: hidden;
	margin: inherit auto;
}
nav#bottom a {
	position: relative;
	display: inline-flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
	line-height: 1.05em;
	width: 7.5em;
	padding: .8em .25em;
	border-radius: .75em;
}
nav#bottom a:hover,
nav#bottom a:focus {
	filter: brightness(125%);
	background-color: rgba(51,51,51,.2);
} 
.dark nav#bottom a:hover,
.dark nav#bottom a:focus {
	background-color: rgba(255,255,255,.1);
}
nav#bottom a .icon { /*
	display: flex; */
	width: 5em; 
	height: 5em;
	margin-bottom: 0.8em;
	filter: saturate(0);
}
/*
nav#bottom a .title {
	font-size: 1.65em;
	line-height: .85em;
	margin: 0 0 .08em;
}
nav#bottom a .desc {
	font-size: .65em; 
	letter-spacing: .05em;
	line-height: 1.1em;
	text-transform: uppercase;
	padding: 0 .2em;
	margin: 0;
}
*/
footer section small {
	text-transform: none;
}







/** RESIZE *************************************************/

@media screen and (max-width: 1200px) {	/* 75em */
	section.lefter	.note:not(.inv),
	section.righter	.note.inv,
	section.wider	.note   { display: none }
}
@media screen and (max-width: 1000px) {	/* 62.5em */
	header + #sitelogo,
	section.lefter,
	section.righter,
	section.wider 	{ max-width: 42em }
	section.lefter 	{ padding-right: 7em }
	section.righter { padding-left: 7em }
	
/*	header + #sitelogo 				{ margin-left: calc(50% - 21.25em) }*/
	header menu 	 		{ bottom: 1em }

/*
	body#home2 blockquote {
		position: relative;
		font-weight: normal;
		text-align: center;
		width: 100%;
		left: 0;
		padding: 0 1.5em;
		margin: 1.75em 0 1.2em;
	}
	body#home2 blockquote::before {
		display: block;
		width: 100%;
		text-align: center;
		margin-left: -.175em;
	}
*/
}
@media screen and (max-width: 900px) {	/* 56.25em */
	section.left	.note:not(.inv),
	section.right	.note.inv,
	section.wide	.note	{ display: none }
	header menu a.button 	{ font-size: .9em }
}
@media screen and (max-width: 736px) {	/* 46em */
	section.left,
	section.right, 
	section.wide,
	section.lefter, 
	section.righter, 
	section.wider {	
		max-width: 28em;
		padding: 0;
		margin: 0 auto }
/*
	article > section.lefter {
		max-width: none;
	}
*/
	header + #sitelogo { 
		margin-left: 2em;
		margin-right: 2em 
	}
	header menu { left: 1.25em	}
	.avatar {
		width: 12em;
		height: 12em;
		margin-right: -.5em;
	}
	h1 { 
		font-size: 6.5em;
		margin-bottom: .1em 
	}

	blockquote,
	blockquote + small 				{ margin-left: 1.8174em;
						  			  margin-right: 0 }
	blockquote + small 				{ margin-left: 4.2em }
	body#home2 blockquote 			{ font-size: 1.75em;
									  margin-left: 1.75em }
	body#home2 blockquote + small	{ margin-left: 3.8em }

	nav#middle + article { padding-top: 1.5em }

	.flex > div 	{ flex: 1 0 calc(50% - 1em)	}
	.flex#top > div	{ flex: 1 0	100% }
/*	.cell {	text-align: left } */
}
@media screen and (max-width: 680px) {	/* 42.5em */
	.num {
		position: relative;
		font-size: 3.9em;
		text-align: inherit;
		width: auto; height: auto;
		float: left;
		overflow: auto;
		left: -.03em;
		padding: .3em 0 .15em;
		margin: 0 .17em 0 0
	}
	.box .num {
		color: #b8b8b8
	}
	article span.note 	{ display: none }
	article a span.note { display: block}
}
@media screen and (max-width: 480px) {	/* 30em */
	header + #sitelogo		{ margin-left: 1.25em;
						  margin-right: 1.25em }
	article 			{ padding-left: 1.25em;
						  padding-right: 1.25em }
	a.button,
	nav#middle,
	footer 				{ font-size: .75em } 
	header menu 		{ max-width: 15em }
	header menu a.button{ font-size: .65em }
	.byline				{ min-width: 50% }
	.avatar 			{ width: 8.5em;
						  height: 8.5em }
	h1 					{ font-size: 5.25em }
	span.note 			{ font-size: .9em;
						  line-height: 1em }
}
@media screen and (min-width: 1385px) {	/* 86.5625em */
	body 				{ font-size: 1.16vw }
}
@media screen and (min-width: 1695px) {	/* 105.9375em */
	body 				{ font-size: 1.23em }
}