@charset "UTF-8";

.mobile-only {
	display: none;
}

* {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

@media (max-width: 70em) {

	body {
		margin: auto;
		padding: 5rem;
	}

	.articles > .article {
		width: 80%;
	}
	
	.page.single,
	.article.single {
		width: 90%;
	}	

}




@media (max-width: 50em) {
	
	body {
		padding: 4rem
	}
	
	[role="banner"] .branding {
		width: 12rem;
	}
	
	[role="banner"] .navigation {
		margin-top: 0;
	}
	
	.navigation .menu-item + .menu-item {
		margin-left: 1.5rem;
	}

	.articles > .article {
		width: 100%;
		float: none;
	}
	
	.page.single,
	.article.single {
		width: 100%;
	}
	
	.article.single .text figure {
		width: 80%
	}
	
}




@media (max-width: 46em) {
	
	.large-screen {
		display: none;
	}
	
	.mobile-only {
		display: block;
	}

	.navigation .menu {
		position: fixed;
		top:0;bottom:0;left:0;right: 0;
		z-index: 9;
		
		background: #FFF;
		
		display: flex;
		flex-direction: column;
		justify-content: center;
		
		opacity: 0;
		pointer-events: none;
	}
	.navigation .menu .menu-item {
		display: block;
		margin: 0;
	}
	.navigation .menu .menu-item a {
		display: block;
		padding: 1.5em;
		text-align: center;
	}

	.mobile-menu-open {
		overflow: hidden;
	}
	
	.mobile-menu-open .navigation .menu {
		opacity: 1;
		pointer-events: auto;
	}
	
	.mobile-menu-open .menu-trigger {
		position: relative;
		z-index: 9;
	}

	
	body {
		padding: 5%;
	}
	
	[role="banner"] {
		margin-top: 2rem;
		margin-bottom: 2rem;
	}
	
	.page-title,
	.article .article-title {
		font-size: 1.75rem;
	}
	
	.article > .article-image {
		margin-bottom: 2rem; 
	}
	
	.article .article-more {
		
		margin-top: 1.75rem;
	}
	
	.article.single .text p {
		font-size: 1rem;
		line-height: 1.45em;
	}

	.article.single .text figure {
		width: 90%
	}
	
	.articles > * + * {
		margin-top: 6rem;
	}

}



@media (max-width: 40em) {
	
	html {
		font-size: 17px;
		line-height: 1.35em;
	}
	
	.text blockquote {
		width: 95%;
		padding: 1em;
	}	
	
	.text blockquote:before {
		top: .9em;
		font-size: 80%;
	}
	
	.text blockquote.me {
		padding-left: 3em;
	}
		.text blockquote.me:before {
			left: 1em;
		}
	
	.text blockquote.him,
	.text blockquote.dick,
	.text blockquote.shit {	
		margin-left: 5%;	
		padding-left: 1.25em;
		padding-right: 3em;
	}
		.text blockquote.him:before,
		.text blockquote.dick:before,
		.text blockquote.shit:before {
			right: 1em;
		}

	
	.article.single .text blockquote p {
		font-size: 0.85rem;
		line-height: 1.35em;		
	}
	
}