@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;
}
a {
	font-weight: bold;
}
.center {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
*,
*::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;
}




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

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

/*p.dropcap:first-letter,*/
.num,
.alt,
blockquote::before			{ color: #cccccc } 				/* 80% */

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

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

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

blockquote .attrib,
.image + small,
video + small,
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 blockquote .attrib	{ color: #595959 } 				/* 35% */

.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 }

h1, h2, h3, h4, h5, h6, p, blockquote, figure, hr, menu, ol, ul { margin-top: 0 }




/** 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 {
	width: 100%;
    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: 2em 0 1em;
	opacity: .25;
}
hr.fold.inv {
	margin: 1em 0 2em;
	background-image: linear-gradient(transparent,rgba(0,0,0,.25),black);	
}
hr.fold.left {
	right: 2em;
    mask-image: linear-gradient(to right,black,transparent);
	-webkit-mask-image: linear-gradient(to right,black,transparent);	
}
hr.fold.right {
	left: 2em;
    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("/img/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;
}
header + #sitelogo {
	display: block;
	height: 3em;
	max-width: 56em;
	background: url("/img/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#home header + #sitelogo 	{ display: none }

@supports not (aspect-ratio: 16 / 9) { 
	a.figure,
	header section,
	figure { 
		height: 0;
		padding-bottom: 56.25%;
  	}
}




/** 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;
}
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 }




/**	MAIN & SECTION *************************************************/

main 				{ padding: 2.5em 2em 3.5em }
nav#middle + main 	{ padding-top: 1.5em }

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

section.subtitle,
section.wide		{ max-width: 42em }		/* 42em	672px */
section.subtitle 	{ padding-right: 7em }
section.title,
section.wider	{ max-width: 56em }			/* 56em	896px */
section.title 	{ padding-right: 14em }
section.widest 	{ max-width: 70em } 		/* 70em 1120px */

/*section#top { margin: .8em auto 3em }*/

.tape {	position: absolute;
		aspect-ratio: 3 / 1;
		width: 15em;
		height: 5em;
		left:-1.75em;
		top: -.5em;
		rotate: -8deg;
		background-image: url("/img/tape_spotlight.png");
		background-size: contain;
		background-repeat: no-repeat;
		z-index: 100 }

.tape#featured 	{ background-image: url("/img/tape_featured.png") }
.tape#topitem 	{ background-image: url("/img/tape_topitem.png") }
.tape#free 		{ background-image: url("/img/tape_free.png") }




/**	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.825em;
	word-wrap: break-word; 
 	left: -0.04em;
	margin-bottom: .0375em;
}
body#home section#top h1 {
	font-size: 7em;
	margin-bottom: .015em;
}
body#home h1 {
	font-size: 2.25em;
	margin-bottom: .075em;
}
body#home .widest p {
	font-size: 1.35em;
}
h2,
blockquote {
	display: block;
	font-family: "Barlow Condensed", sans-serif;
	font-size: 1.75em;
	letter-spacing: -0.025em;
	font-weight: 500;
	line-height: 1em;
}
h2.chapter {
	font-size: 1.9em;
	letter-spacing: -0.0125em;
	line-height: .9em;
	font-weight: 700;
}

/** QUOTE ********/
blockquote {
	font-size: 2em;
	font-weight: 600;
	margin: 1.25em -4.66em 1.25em 4.66em;
}
blockquote::before {
	position: absolute;
	content: '\201C'; 
	font-size: 6.25em;
	font-weight: normal;
	margin: .15em 0 0 -.32em;
}
blockquote > .hole {
	float: right;
	width: 4em;
	height: 4em;
	margin-top: -.2em;
	margin-left: .5em;
}
blockquote > .attrib {
	text-transform: uppercase;
	font-size: .7em;
	font-weight: 500;
	letter-spacing: normal;
	line-height: 1em;
	margin-top: .35em;
	margin-bottom: -.25em;
}
body#home blockquote {
	margin: 0 0 -.5em;
}
/** /QUOTE ********/

p.dropcap:first-letter { 
    float: left;
    font-size: 6.1em;
	margin-left: -.075em;
    margin-right: .05em;
}
h2, p { 
	margin-bottom: .75em;
}
body#home p {
	line-height: 1.2em;
	margin-bottom: .5em;
}

.byline		{
	display: inline-block;
	max-width: 25em;
	padding: .25em 5em .5em 0;
	border-top: .25em solid #333333;
	border-bottom: .15em solid #333333;
	margin: .25em 0 1.25em;
	white-space: nowrap;
}
.num {
	position: absolute;
	font-family: "Bebas Neue";
	font-size: 6.7em;
	letter-spacing: -0.045em;
	text-align: right;
	width: 1.1em;
	overflow: visible;
	left: -1.25em;
	margin-top: .085em; /* BASELINE SHIFT */
}

small {
	display: block;
	font-family: "IBM Plex Sans", sans-serif;
    font-weight: normal;
	text-transform: uppercase;
	font-size: .685em;
	letter-spacing: .04em;
	line-height: 1.15em;
	margin-bottom: .3em;
}
.image + small,
video + small {
	font-size: .575em;
	letter-spacing: .05em;
	line-height: 1em;
	text-align: center;
	margin-bottom: 2.5em;
	margin-top: -2.5em 
}



/**	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;
}

body#home .widest a.button { 
	font-size: 1.15em;
	margin-top: .5em 
}

p + a.button,
p + p > a.button { margin-top: .4em } /* Add space over buttons if following text */




/**	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(/img/note_arrow.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 90% center;
	content: "";
}
.dark span.note::after {
	background: url(/img/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 }




/**	FIGURES **************************************************/

.image {
	display: block;
	aspect-ratio: 16 / 9;
	background-size: cover;
	background-position: 50% 50%;
}
.image.inv {
	aspect-ratio: 3 / 4;
}
.image.half {
	width: 50%;
	margin-left: auto;
	margin-right: auto;	
}
.image,
video {	width: 100%;
		border-radius: .25em }

p + .image,
section + section > .image {
	margin-top: 1.7em;
	margin-bottom: 1.7em }

p + video,
section + section > video {
	margin-top: 1.35em;
	margin-bottom: 1.35em }

body#home section:not(#top) .image { margin-bottom: .9em }

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

.image,
.avatar { pointer-events: none }





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

/* HOME */
body#home header section { 			background-image: url("/img/headers/logo-home.png"), url("/img/headers/home.webp");
									background-repeat: no-repeat;
									background-size: 38%, cover;
									background-position: 2em 25%, center }
/* ABOUT */
body#about header {					background: linear-gradient(to right,#8e8e8e 50%, #b7b7b7 50% 100%) }
body#about header::before,
body#about header::after {			opacity: .25 }
body#about header + #sitelogo {		filter: drop-shadow(0 -.18em .15em rgba(0,0,0,.35)) }
body#about header section {			background-image: url("/img/headers/about.webp") }
body#about .avatar {				background-image: url("/img/headers/about.webp");
									background-size: 200%;
									background-position: 65% 100% }
/* CONTACT */
body#contact header section {		background-image: url("/img/headers/contact.jpg") }
body#contact .avatar {				background-image: url("/img/headers/contact.jpg");
									background-size: 195%;
									background-position: 60% 0% }
/* COMICS */
body#comics header section {		background-image: url("/img/headers/comics.jpg") }
body#comics .avatar {				background-image: url("/img/headers/comics.jpg");
									background-size: cover;
									background-position: 95% 50% }
/* BLACK */
body#black header {					background: linear-gradient(to right,#333333 50%, #525252 50% 100%) }
body#black header section {			background-image: url("/img/headers/black.webp") }
body#black .avatar {				background-image: url("/img/headers/black.webp");
									background-size: 190%;
									background-position: 25% 0% }
/* NWOSPEEDWAGON */
body#nwospeedwagon header section {	background-image: url("/img/headers/nwospeedwagon.webp") }
body#nwospeedwagon .avatar {		background-image: url("/img/headers/nwospeedwagon.webp");
									background-size: 550%;
									background-position: 91% 25% }
/* FAMILY */
body#family header section {		background-image: url("/img/headers/family.webp") }
body#family .avatar {				background-image: url("/img/headers/family.webp");
									background-size: 600%;
									background-position: 98% 32% }

.icon#home		{ background-image: url("/img/icons/home.webp") }
.icon#about		{ background-image: url("/img/icons/about.webp") }
.icon#contact	{ background-image: url("/img/icons/contact.webp") }
.icon#black		{ background-image: url("/img/icons/black.webp") }

blockquote span.hole#corny		{ background-image: url("/img/quotes/corny.webp") }
blockquote span.hole#freddie	{ background-image: url("/img/quotes/freddie.webp") }
blockquote span.hole#goldberg	{ background-image: url("/img/quotes/goldberg.webp") }
blockquote span.hole#hausman	{ background-image: url("/img/quotes/hausman.webp") }
blockquote span.hole#kane		{ background-image: url("/img/quotes/kane.webp") }
blockquote span.hole#russo		{ background-image: url("/img/quotes/russo.webp") }

.image#about 				{ background-image: url("/img/hd/about-hd.jpg") }
.image#black 				{ background-image: url("/img/hd/black-hd.jpg") }
.image#contact 				{ background-image: url("/img/hd/contact-hd.jpg") }
.image#nwospeedwagon		{ background-image: url("/img/hd/nwospeedwagon-hd.jpg") }
.image#nwospeedwagon-logo 	{ background-image: url("/img/hd/nwospeedwagon-logo.png") }
.image#family 				{ background-image: url("/img/hd/family-hd.jpg") }
.image#family-pages 		{ background-image: url("/img/hd/family-pages-hd.jpg") }
.image#colton 				{ background-image: url("/img/comics/001_colton.jpg") }
.image#snme 				{ background-image: url("/img/comics/002_snme.jpg") }
.image#records 				{ background-image: url("/img/comics/003_records.jpg") }





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

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





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

.shade::before,
.shade::after {
	content: '';
	position: absolute;
	display: block;
	width: 100%;
	left: 0;
	height: 2em;
	background-image: linear-gradient(black,rgba(0,0,0,.30),transparent);
    mask-image: linear-gradient(to right,black,rgba(0,0,0,.30),black);
	-webkit-mask-image: linear-gradient(to right,black,rgba(0,0,0,.30),black);
	opacity: .2;
	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: .7;
}
footer.shade::after {
	display: none;
}





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

.hole {
    content: "";
	display: inline-block;
	border-radius: 100%;
	box-shadow: inset -.3rem .5rem .45rem 0 rgba(0,0,0,.35), -.05rem .1rem .1rem rgba(255,255,255,.45), .05rem -.1rem .2rem 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 -.3rem .5rem .45rem 0 rgba(0,0,0,.5), -.05rem .1rem .1rem rgba(255,255,255,.25), .05rem -.1rem .2rem rgba(0,0,0,.4);	
}





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

footer {
	padding: 1.25em;
	padding-bottom: 2.25em;
}
footer a {
	text-decoration: none;
}
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 h1 {
	font-size: 1.8em;
	margin: 0 0 .1em;
}
small.copyright {
	text-transform: none;
	text-align: center;
}







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

@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 }
}
@media screen and (max-width: 1200px) {	/* 75em */
	section.title	.note:not(.inv),
	section.wider	.note   { display: none }
/*	header + #sitelogo,*/
	section.widest 	{ max-width: 56em }
/*	section.title 	{ padding-right: 7em }*/

	body#home section#top h1 			{ font-size: 5.4em }
	body#home section#top p 			{ font-size: 1.1em }
	body#home section#top a.button 		{ font-size: .9em }
	body#home section#top p + a.button 	{ margin-top: .5em }
}
@media screen and (max-width: 1000px) {	/* 62.5em */
	header + #sitelogo,
	section.widest,
	section.title,
	section.wider 	{ max-width: 42em }
	section.title 	{ padding-right: 7em }

	body#home section#top p 			{ font-size: 1em }
	body#home section#top a.button 		{ font-size: .8em }
	body#home section#top p + a.button 	{ margin-top: .4em }


/*	header + #sitelogo 				{ margin-left: calc(50% - 21.25em) }*/
	header menu 	 		{ bottom: 1em }

	span#spotlight { 
		width: 12em;
		height: 4em;
		left: -1em;
		top: -.5em;
	}
	body#home section#top h1 	{ font-size: 4em }
/*	body#home .widest p,*/
	body#home p { font-size: .9em }
	
/*
	body#home blockquote {
		position: relative;
		font-weight: normal;
		text-align: center;
		width: 100%;
		left: 0;
		padding: 0 1.5em;
		margin: 1.75em 0 1.2em;
	}
	body#home blockquote::before {
		display: block;
		width: 100%;
		text-align: center;
		margin-left: -.175em;
	}
*/
}
@media screen and (max-width: 900px) {	/* 56.25em */
	section.subtitle	.note:not(.inv),
	section.wide	.note	{ display: none }
}
@media screen and (max-width: 736px) {	/* 46em */
	section.subtitle,
	section.wide,
	section.title,
	section.wider {	
/*		max-width: 28em;*/
		width: 100%;
		padding: 0;
		margin: 0 auto 
	}
	header + #sitelogo { 
		margin-left: 2em;
		margin-right: 2em;
	}
	header menu { left: 1.25em	}
	.avatar {
		width: 12em;
		height: 12em;
		margin-right: -.5em;
	}
	blockquote {
		margin-left: 1.8174em;
		margin-right: 0 
	}
	body#home blockquote {
		max-width: 24em;
		font-size: 1.35em;
		padding-left: 1em;
		margin: -.5em auto -1.25em auto;
	}

	.flex { 			row-gap: 2em;
						column-gap: 1.1em }
	.flex:not(#top) {	max-width: 30em }
	.flex > div { 		flex: 1 0 calc(50% - .75em)	}
}
@media screen and (max-width: 680px) {	/* 42.5em */
	h1 {			font-size: 6.5em;
					margin-bottom: .1em }
	h1 + h1.alt {	margin-top: -.1em }
	h2 {			font-size: 1.55em }
	h2.chapter {	font-size: 1.725em }

	body#home section#top h1 {
		font-size: 4em;
	}
	.num {
		position: relative;
		font-size: 4em;
		text-align: inherit;
		width: auto; height: auto;
		float: left;
		overflow: auto;
		left: -.03em;
		padding: .275em 0 .15em;
		margin: 0 .17em 0 0 }
	.box .num {
		color: #b8b8b8 
	}

	main span.note 	{ display: none }
	main a span.note { display: block }
}
@media screen and (max-width: 576px) {	/* 36em */
	body#home section#top h1 { font-size: 5.5em }
	.flex#top { 		row-gap: 1em }
	.flex#top > div	{ 	flex: 1 0 100% }
}
@media screen and (max-width: 480px) {	/* 30em */
	header + #sitelogo	{ margin-left: 1.25em;
						  margin-right: 1.25em }
	main 			{ padding-left: 1.25em;
						  padding-right: 1.25em }
	body#home section#top h1 { font-size: 4em }
	a.button,
	nav#middle,
	footer 				{ font-size: .75em } 
	
	span.tape { 
		width: 9em;
		height: 3em;
		left: -1em;
		top: -.25em;
	}
	.byline				{ min-width: 50% }
	.avatar 			{ width: 8.5em;
						  height: 8.5em }
	h1,
	h1.alt 				{ font-size: 5.15em }
	span.note 			{ font-size: .9em;
						  line-height: 1em }
}