/*!
Theme Name: SIMPLE
Theme URI: https://thoughtandfound.co/
Author: Thought & Found
Author URI: https://thoughtandfound.co/
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
Text Domain: simple
 */

@media screen and (min-width: 0) {
	html {
		-webkit-text-size-adjust: 100%;
	}

	body {
		background: black;
		padding: 15px;
		margin: 0;
	}

	body, html, a, p, h1, h2, h3, h4, h5, h6, span {
		font-family: 'Helvetica', sans-serif;
		font-size: 13px;
		line-height: 14px;
		font-weight: bold;
		text-decoration: none;
		color: white;
	}

	body {
		transition: background-color 500ms ease;
	}

	.beige-bg {
		background-color: #c7c0b4;
	}

	a {
		transition: color 500ms ease;
	}

	a:hover {
		color: #c7c0b4;
		/* text-decoration: underline; */
	}

	.prev-img {
		background: #c7c0b4;
	}

	.prev-img img {
		transition: filter 500ms ease;
	}

	.prev-img img:hover {
/* 		filter: grayscale(1) contrast(.75) brightness(2.5);
		mix-blend-mode: multiply; */
		cursor: pointer;
	}

	span.pr-close:hover {
		cursor: pointer;
	}
	
	span.pr-close {
    position: absolute;
    top: 15px;
    right: 15px;
	}

	.col.head, .col.contact {
    margin-bottom: 15px;
  }

	.aside {
    margin-bottom: 60px;
  }

	img {
		display: block;
		width: 100%;
	}

	.col, header.entry-header {
		text-transform: uppercase;
	}

	.preview {
    font-size: 0;
    margin-bottom: 30px;
	}

	.prev-col {
		font-size: 13px;
		line-height: 14px;
		vertical-align: top;
		font-size: 0;
		margin-bottom: 10px;
  }

	.prev-img {
		font-size: 0;
	}

	header.entry-header {
		font-size: 13px;
		line-height: 14px;
		width: 75%;
		display: inline-block;
	}

	.year {
		font-size: 13px;
		line-height: 14px;
		width: 25%;
		display: inline-block;
		vertical-align: top;
		text-align: right;
		font-family: 'ibm-plex-mono', monospace;
		font-weight: 300;
	}

	.mono, .mono span {
		font-family: 'ibm-plex-mono', monospace;
		font-weight: 300;
	}

	.mono.cat {
		margin-left: -3px;
	}

	.inner-prev-col {
    text-transform: uppercase;
		margin-bottom: 15px;
		width: calc(100% - 70px);
  }

	.pr-bar {
		clear: both;
		overflow: hidden;
		margin-top: 7.5px;
	}

	.meta-close {
		float: right;
	}

	.meta-year {
    float: left;
		font-family: 'ibm-plex-mono', monospace;
		font-weight: 300;
  }

	.entry-content {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: black;
		padding: 15px;
		height: 100vh;
    overflow-y: scroll;
		z-index: 10;
		display: none;
  }

	.pr-info, .pr-credits {
    margin-bottom: 60px;
		margin-top: 60px;
  }
	
	.pr-credits {
		color: white;
	font-family: 'ibm-plex-mono';
    font-size: 10px;
    font-weight: 300;
    line-height: 12px;
	}

	.pr-info p {
		line-height: 15px;
	}
	
	.pr-hide {
		display: none;
		height: 0;
		width: 0;
	}

	.iframe-container {
		position: relative;
		padding-bottom: 56.25%;
		height: 0;
		overflow: hidden;
		max-width: 100%;
	}

	.iframe-container iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	footer#colophon {
    margin-top: 60px;
  }
}

@media screen and (min-width: 768px) {
	header#masthead {
    width: 35%;
		position: fixed;
		left: 15px;
		top: 15px;
		font-size: 13px;
		line-height: 14px;
		z-index: 1;
  }

	main#primary {
    width: 65%;
		padding-left: 35%;
  }
	
	.pr-hide {
		width: 34%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		display: block;
	}

	div#page {
    font-size: 0;
  }

	article:first-child {
		margin-top: 0;
	}

	article {
		margin-top: 15px;
	}

	header.entry-header {
		padding-left: 1px;
	}

	.pr-info, .pr-credits {
		margin-bottom: 28px;
	}

	.inner-prev-col {
		margin-left: -1px;
	}

	.inner-prev-col, .meta-year {
		font-size: 13px;
		line-height: 14px;
	}

	.entry-content {
		left: 34%;
	}

	.preview {
		margin: 0;
		position: relative;
		clear: both;
		overflow: hidden;
	}

	.year {
		position: absolute;
		left: 1px;
		bottom: 0;
		text-align: left;
	}

	.prev-col {
    width: 25%;
		float: left;
  }

	.prev-col header.entry-header {
		width: 80%;
		max-width: 137px;
	}

	.prev-img {
		width: 75%;
		float: right;
	}

	footer#colophon {
		font-size: 13px;
		line-height: 14px;
		left: 15px;
    bottom: 15px;
		position: fixed;
	}

}

@media screen and (min-width: 1024px) {
	main#primary {
    width: 50%;
    padding-left: 50%;
  }

	.pr-info {
    margin-bottom: 28px;
/*     column-count: 3;
    column-gap: 15px; */
	width: 33%;
	display: inline-block;
	vertical-align: top;
  }
	
	.pr-credits {
    width: 33%;
	display: inline-block;
		margin-left: 33%;
	}

	.pr-info p {
    margin-top: 0;
		display: inline-block;
  }
}