/* posts */
	
article {
	margin: 0 auto;
	width: 100%;
	}
	
#e {
	width: 4em;
	height: 4em;
	margin: 1em auto;
	margin-top: 1em;
	}
	@media all and (min-width: 32em) { #e {
		width: 5em;
		height: 5em;
		}}
	@media all and (min-width: 64em) { #e {
		width: 6em;
		height: 6em;
		}} 	

header {
	text-align: center;
	}
.big-h + time {
	display: block;
	margin-top: -0.5em;
	margin-bottom: 4em;
	}


/* MEDIA */

video, audio, img {
	display: block;
	margin: 2em auto;
}

.info-line + video, .info-line + audio, .info-line + img {
	margin-top: 0;
}

img { /* only expand image width beyond intrinsic dimensions when we support containing height, below */
	max-width: 100%;
}

audio, video[data-scalable] { /* scalable-video.js need a width to pick a src (audio just looks nice) */
	width: 100%;
}

a[data-supergif], video.wide {
	display: block;
	width: 100%;
}

/* fit-height */
@supports ( object-fit: contain ) and ( max-height: 100vh ) {

	img, video, object {
		object-fit: contain;
		width: 100%;
		max-width: none;
		max-height: 100vh;
	}

}

/* groups */
@supports ( display: flex ) {
	@media ( min-width: 36em ) {
		.group {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 2em auto; /* same as img */
		}
		.group > * {
			flex: 1 1 auto;
			padding-right: 1px;
		}
		.group img, .group video, .group audio {
			margin: 0 auto; /* undo 2em */
		}
		.group > *:last-child { padding-right: 0;   }
	}
}


/* amobil.se/2011/11/responsive-embeds/ */
.embed-container {
    position: relative;
    padding-bottom: 56.25%; /* 16/9 ratio */
    padding-top: 30px; /* IE6 workaround*/
    height: 0;
    overflow: hidden;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.video-sorry {
	background-color: #533;
	color: white;
	font-family: "Lucida Grande", Verdana, sans-serif;
	padding: 1em;
	}


	
/* new footer stuff */
footer nav {
	text-align: center;
	}

footer nav .post-thumb {
	font-size: 13px;
	height: 8em;
	width: 48%;
	display: inline-block;
	vertical-align: top;
	border-radius: 0.5em;
	}
	@media (min-width: 48em) {
		footer nav .post-thumb { width: 33%; }
	}
	
footer nav .thumb-link {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 1em;
	overflow: hidden;
	}
	
	@media (min-width: 80em) {
		footer nav .post-thumb {
			font-size: 18px;
			border-radius: 0.25em;
			}
	}

footer nav .thumb-h {
	padding: 0;
	}

footer nav .post-thumb.next .thumb-h:before {
	content: "← "
	}

footer nav .post-thumb.previous .thumb-h:after {
	content: " →"
	}

.back-to-index {
	margin-top: 3em;
}

footer:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
	}



/* shorts */

.short {
	padding: 3rem 0;
	}

.short header {
	text-align: left;
	}
	
.permalink-star {
	font-size: 150%;
	}

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