/*
Theme Name: pxlnv x
Theme URI: https://pxlnv.com/
Author: Nick Heer
Author URI: https://nickheer.com/
Description: 
Tags: proprietary
Version: 2023.1
Requires at least: 5.2
Tested up to: 6.1
Requires PHP: 7.0
License: GNU General Public License v3 or Later
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: pxlnv

Based on BlankSlate WordPress Theme, © 2011-2023 TidyThemes
BlankSlate is distributed under the terms of the GNU GPL
*/

/* config */

:root {
	--c-backdrop: #eff4f1; /* #eff4f2 */
	--c-brand: #d7350a; /* #e3380a */
	--c-text: #142621; /* #3b4346 */
	--c-border: #dce3e0;
	--c-tone: #577a6b;
	--f-plex: 'Inter', 'Helvetica Neue', Helvetica, 'Literally Anything Else', Arial, sans-serif;
	--f-plex-mono: 'SF Mono', 'Menlo', 'Source Code Pro', Monaco, 'Courier Prime', monospace;
}

@media (prefers-color-scheme: dark) {
	/* in the pines */

	:root {
		--c-backdrop: #142621;
		--c-brand: #ff6641;
		--c-text: #eff4f2;
		--c-border: #577a6b;
		--c-tone: #a2b4ac;
	}

}

/* normalize */

a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline}
html{scroll-behavior:smooth}
body{line-height:1}
a{text-decoration-skip-ink:auto;}
a[href^=tel]{color:inherit;text-decoration:none}
button{outline:0}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}
q{display:inline;font-style:italic}
q:before{content:'"';font-style:normal}
q:after{content:'"';font-style:normal}
input[type=button],input[type=password],input[type=reset],input[type=search],input[type=submit],input[type=text],textarea{-webkit-appearance:none;appearance:none;border-radius:0}
input[type=search]{-webkit-appearance:textfield}
table{border-collapse:collapse;border-spacing:0}
td,th{padding:2px}
big{font-size:120%}
small,sub,sup{font-size:80%}
sup{vertical-align:super}
sub{vertical-align:sub}
dd{margin-left:20px}
kbd,tt{font-family:courier;font-size:12px}
ins{text-decoration:underline}
del,s,strike{text-decoration:line-through}
dt{font-weight:700}
address,cite,var{font-style:italic}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal}
.screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;-webkit-clip-path:none;clip-path:none;color:#007acc;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline}
.skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;z-index:100000;right:auto}
.form-allowed-tags:not(:focus):not(:active),.visually-hidden:not(:focus):not(:active),.entry-content .search-submit{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* page */

body{
	font-family: var(--f-plex);
	color: var(--c-text);
	background: var(--c-backdrop);
}

h1,
h2,
h3,
h4,
p,
li,
table{
	/* text-rendering: optimizeLegibility; */
}

h1,
h2,
h3,
h4,
p,
li,
#sidebar{
	font-variant-numeric: oldstyle-nums;
	hanging-punctuation: first;
}

table,
td,
tr,
th{
	font-variant-numeric: tabular-nums; 
}

h1,
h2{
	margin-bottom: 1.5em;
	font-weight: bold;
}

p{
	margin-bottom: .75em;
	font-size: 1em;
	line-height: 1.6em;
}

blockquote{
	margin: 1.5em 2em;
	font-size: .9375em;
}

blockquote p{
	line-height: 1.70666em;
}

a{
	color: var(--c-brand);
	text-decoration: underline;
}

a:hover{
	color: var(--c-text);
}

@media (prefers-color-scheme: dark) {

	article a{
		color: var(--c-text);
	}
	
	article a:hover{
		color: var(--c-brand);
	}

}

pre,
code{
	font-family: var(--f-plex-mono);
	font-size: .875em;
	font-weight: normal;
	font-style: normal;
	background: var(--c-border);
}

pre{
padding: .25em;
	line-height: 1.1428571429em;
}

pre > code{
	font-size: 1em;
}

hr{
	width: 100%;
	margin: 2em 0;
	border: none;
	border-top: 1px solid var(--c-border);
}

#wrapper{
	width: 100%;
	max-width: 71.25em;
	margin: 0 auto;
	padding: 0 1em 3em;
	border-style: solid;
	border-color: var(--c-border);
	border-left-width: 1px;
	border-right-width: 1px;
}

#container{
	display: grid;
	grid-template-columns: 50.25em 8.3125em; 
	grid-template-rows: 1fr; 
	gap: .75em; 
	grid-template-areas: '. .'; 
	width: 100%;
	max-width: 948px;
	margin: 0 auto;
}

#content{
	position: relative;
	width: 44.25em;
}

article{
	margin-bottom: 3em;
}

/* universal header */

#header{
	width: 100%;
	max-width: 59.25em;
	margin: 0 auto 5em;
	padding: 5em 0 .5em;
	font-family: var(--f-plex-mono);
	border-bottom: 1px solid var(--c-border);
}

#header-items{
	display: grid;
	grid-template-columns: 1 1;
	grid-template-rows: 1;
	gap: .75em;
	grid-template-areas: '. .';
	height: 24px;
}

#branding{

}

#wordmark,
#wordmark svg{
	width: 132px;
	height: auto;
	vertical-align: bottom;
}

#site-title,
#site-description{
	display: inline-block;
}

#svg-glyph{
	fill: var(--c-brand);
}

#svg-wordmark{
	fill: var(--c-text);
}

#site-title{
	position: relative;
	top: 1px;
}

#branding a:hover #svg-wordmark{
	fill: var(--c-brand);
}

#site-description{
	font-size: .75em;
	color: var(--c-text);
}

#site-description br{
	display: none;
}

#menu-main-menu{
	margin-left: 0;
}

#menu{
	text-transform: uppercase;
	letter-spacing: .075em;
	text-align: right;
}

#menu li{
	display: inline;
	margin-left: 1em;
	font-size: .75em;
}

#menu a{
	text-decoration: none;
	border-bottom: 2px solid var(--c-brand);
}

#menu a:hover{
	border-color: var(--c-text);
}

/* universal footer */

#footer br{
	display: none;
}

#footer div{
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 3em 0;	
}

#footer span{
	display: block;
	width: 100%;
	margin: 5em 0 1em;
	padding: 2em 0;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-family: var(--f-plex-mono);
	font-size: .75em;
	color: var(--c-tone);
	/* border-top: 1px solid var(--c-border);
	border-bottom: 1px solid var(--c-border); */
}

#footer i{
	display: block;
	width: 37px;
	height: 20px;
	background: url('images/footer-light.svg') no-repeat;
}

@media (prefers-color-scheme: dark) {

	#footer i{
		background-image: url('images/footer-dark.svg');
	}

}

/* sidebar */

#sidebar{
	font-size: .8125em;
}

#sidebar > div{
	margin-bottom: 3em;
}

#sidebar a{
	color: var(--c-text);
}

#sidebar a:hover{
	color: var(--c-brand);
}

#sidebar p{
	font-size: 1em;
	line-height: 1.5384615385em;
}

#carbonads a{
	text-decoration: none;
}

#carbonads .carbon-wrap,
#carbonads .carbon-img{
	display: block;
	margin-bottom: 1em;
	line-height: 1.333em;
}

#carbonads .carbon-poweredby{
	display: block;
	font-family: var(--f-plex-mono);
	font-size: .7692307692em;
	text-transform: uppercase;
	letter-spacing: .075em;
	color: var(--c-tone);
}

input.search-field{
	padding: .5em .5em .5em 2em;
	font-size: 1em;
	font-family: var(--f-plex);
	background: url('images/search.svg') var(--c-backdrop);
	background-repeat: no-repeat;
	background-position: .5em .75em;
	border: 1px solid var(--c-tone);
	border-radius: .5em;
	box-shadow: 0 1px 0 #fff, inset 0 3px 5px var(--c-border);
}

#sidebar #search input[type="search"]{
	width: 100%;
}

input.search-field:focus{
	color: var(--c-text);
	background-color: #fff;
}

button{
	font-size: .875em;
	font-family: var(--f-plex);
}

@media (prefers-color-scheme: dark) {

	input.search-field{
		background-image: url('images/search-dark-mode.svg');
		box-shadow: none;
	}
	
	input.search-field:focus{
		color: var(--c-text);
		background-color: var(--c-backdrop);
	}
	
}

#sidebar .search-submit{
	clip: rect(0 0 0 0); 
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap; 
	width: 1px;
}

/* post universal */

article,
.articles section{
	display: grid;
	grid-template-columns: 11.25em 29.25em;
	column-gap: 3.75em;
	grid-template-rows: 1fr;
	grid-template-areas: ". .";
}

article.category-article header .sticker,
article.category-blog header .sticker{
	position: sticky;
	top: 3em;
}

article header h1,
article header h2{
	margin-bottom: .5em;
	font-weight: normal;
	font-size: 1.75em;
	line-height: 1.3333em;
}

article header h1 a,
article header h2 a{
	color: var(--c-text);
	text-decoration: none;
}

article header h2 a:hover{
	color: var(--c-brand);
	text-decoration: underline;
}

article header time,
section time{
	display: inline-block;
	margin-bottom: 2em;
	color: var(--c-tone);
	font-family: var(--f-plex-mono);
	text-transform: uppercase;
	font-size: .75em;
	letter-spacing: .075em;
}

article header time i{
	/* option glyph */
	font-style: normal;
	font-family: 'Lucida Grande', Helvetica, Arial, sans-serif;
}

article header time a{
	color: var(--c-tone);
	text-decoration: none;
}

article header time a:hover{
	color: var(--c-brand);
}

article .entry-content h1,
article .entry-content h2{
	line-height: 1.333em;
}

article .entry-content h2,
article .entry-content h3,
article .entry-content h4,
article .entry-content h5{
	margin-top: 2em;
	margin-bottom: 1em;
}

article h1.link-title,
article h2.link-title{
	margin-top: 0;
	margin-bottom: 1em;
}

.link-title em{
	font-weight: normal;
	color: var(--c-tone);
	white-space: nowrap;
}

.link-title em i{
	font-style: normal;
}

article b{
	font-size: .875em;
	font-family: var(--f-plex-mono);
	text-transform: uppercase;
	letter-spacing: .075em;
	font-weight: normal;
}

.tag-list a{
	margin: 0 .5em 0 0;
	padding: .25em .5em;
	background: var(--c-border);
	border-radius: .25em;
}

.post-edit-link{
	margin: 1em 0;
}

/* lists */

ol, ul{
	margin-left: 2em;
}

ol li{
	list-style: decimal outside;
}

ol li ol li{
	list-style: lower-latin outside;
}

ul li{
	list-style: square outside;
}

ul li ul li{
	list-style: circle outside;
}

article ol li,
article ul li{
	line-height: 1.6em;
}

article ol li > p,
article ul li > p{
	line-height: inherit;
}

/* footnotes */

sup{
	position: relative;
	top: -0.4em;
	left: 0.15em;
	font-size: .75em;
	white-space: nowrap;
	vertical-align: baseline;
}

sup a{
	padding: 0 .3em;
	font-variant-numeric: proportional-nums;
	color: var(--c-backdrop);
	text-decoration: none;
	background: var(--c-brand);
	border-radius: .3em;
}

sup a:hover{
	color: var(--c-border);
	background: var(--c-text);
}

sup,
sup a,
sup:before,
sup:after{
	z-index: 1;
}

.footnotes{
	margin: 3em 0;
	font-size: .875em;
}

.footnotes hr{
	width: 3em;
	margin: 0 0 3em;
	border: none;
	border-top: 1px solid var(--c-brand);
}

.footnotes ol{
	/* padding-left: 0; */
}

.footnotes a[rev="footnote"]{
	display: inline-block;
	padding: 0 .25em;
}

/* tables */

table{
	max-width: 100%;
	margin: 1em 0 2em;
	background: var(--c-backdrop);
}

th,
thead{
	vertical-align: bottom;
}

tr,
td{
	vertical-align: middle;
}

tr:nth-child(even){
	background: var(--c-border);
}

td, 
th{
	max-width: 100%;
	padding: 10px;
	font-size: 14px;
}

table.numerical{
	font-variant-numeric: tabular-nums;
	table-layout: fixed;
}

table.numerical tr,
td.numerical{
	text-align: right;
}

th{
	max-width: 100%;
	color: var(--c-tone);
	text-transform: uppercase;
	font-family: var(--f-plex-mono);
	font-weight: normal;
	font-size: .625em;
	border-bottom: 1px solid var(--c-border);
	text-align: right;
	letter-spacing: .125em;
}

th:first-child{
	text-align: left;
}

tr{
	max-width: 100%;
	/* border-bottom: 1px solid var(--c-border); */
}

table.thumbs{
	text-align: center;
	vertical-align: middle;
}

tr.highlight{
	background: #fcf1da;
}

@media (prefers-color-scheme: dark) {
	
	tr:nth-child(even){
		background: #1c3d2f;
	}

	tr.highlight{
		background: var(--c-border);
	}
	
}

/* post nav */

main footer,
.meta.post-navigation{
	display: grid;
	grid-template-columns: 11.25em 29.25em;
	column-gap: 3.75em;
	grid-template-rows: 1fr;
	grid-template-areas: ". .";
}

.post-navigation{
	position: relative;
	display: grid;
	grid-template-columns: 12em 12em; 
	grid-template-rows: 1fr;
	gap: 5.25em;
	grid-template-areas: ". ."; 
	font-family: var(--f-plex-mono);
}

.post-navigation:after{
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	display: block;
	width: 1px;
	height: 100%;
	background: var(--c-border);
}

.meta.post-navigation:after{
	display: none;
}

.meta.post-navigation .post-navigation:after{
	left: calc(50% + 0.5625em);
}

.post-navigation div{
	padding: .75em;
}

.post-navigation div:first-child{
	text-align: right;
}

.post-navigation span{
	display: block;
	margin-bottom: 1.5em;
	font-size: .75em;
	letter-spacing: .0625em;
	text-transform: uppercase;
}

.post-navigation a{
	text-decoration: none;
	line-height: 1.25em;
}

/* linked items */



/* search, archive, that jazz */

body.archive .header h1,
body.search .header h1{
	font-size: 1.5em;
	font-weight: normal;
	color: var(--c-tone);
}

main.archive.articles section{
	align-items: baseline;
}

main.archive.articles h2{
	hanging-punctuation: none;
}

/*
this will need to be category-blog
body.archive #content article.category-article,
body.search #content article.category-article{
	padding-bottom: 2em;
	border-bottom: 1px solid var(--c-border);
}
*/

/* articles archive */

.articles h2{
	font-size: 1.5em;
	line-height: 1.333;
}

.articles h2 a{
	color: var(--c-text);
}

.articles h2 a:hover{
	color: var(--c-brand);
}

/* 404 */

body.error404 h1{
	font-size: 1.5em;
}

/* longform */

/*  =======
	FIGURES
	=======
	
	Usage:
	
	<figure class="[[banner]+[fullwidth|overspan]]
				   [alignleft|alignright|alignseveral]
				   [withborders]
				   ">
				   <figcaption>optional caption</figcaption>
				   <img src="img.jpg" width="xyz" alt="alt">
	</figure> 
	
		* .banner treats image as inline, not block, and hides overflow (and
		  should be used in conjunction with one of the .height--- classes);
		* .fullwidth spans the 521px paragraph width; 
		* .overspan fully spans the 601px column;		
		* .alignseveral simply adds right and bottom margins, which is useful
		  for placing several <figure>s in one paragraph side by side;
		* <figcaption> *must* precede <img> - especially if class="withborders"
		  is set - to ensure borders draw correctly;
		* figures also support <audio> and <video>, not just images.

	Implementation note: figcaption is set using the hack above rather than
	placing at the end because some browsers render the caption outside of the
	figure if the figure gets borders (ie. figure.withborders{borders:x,y,z} rather
	than the current figure.withborders img{borders:x,y,z}).
	
	Asides *must* use either .alignleft or .alignright.
	
	Todo: Tidy section, condense classes.
	
	Ref: http://stackoverflow.com/questions/6534473/
	
*/
	
article aside {
	width: 8.3125em;
	padding: .75em;
	margin: 0 0 .75em;
	text-align: left;
	border: 1px solid var(--c-border);
}

article aside p {
	font-size: .875em;
	color: var(--c-tone);
	width: 8.3125em;
	margin: .5em 0;
	padding: 0;
}

article aside p:first-child,
article aside p:last-child{
	/* WordPress blank paragraph bullshit */
	margin: 0;
}

article figure {
	display: table;
	height: auto;
	margin: 0;
}

article figure p{
	margin: 0;
	padding: 0;
}

article figcaption {
	display: table-caption;
	caption-side: bottom;
	padding: .5em 0;
	font-size: .75em;
	line-height: 1.5em;
	font-family: var(--f-plex-mono);
	color: var(--c-tone);
}

article .aligncentre {
	text-align: center;
	width: 100%;
	display: block;
}

article .alignleft {
	float: left;
	margin: 0 .75em .75em 0;
}

article .alignright {
	float: right;
	margin: 0 0 .75em .75em;
}

article .alignseveral {
	float: left;
	margin: 0 .5em .5em 0;
}

article .norightmargin {
	margin: 0 0 .5em;
}

article .stacked {
	margin-bottom: .5em;
}

article .fullwidth {
	width: 100%;
	margin: .5em 0 1em;
}

article .overspan {
	width: 35.25em;
	margin: .5em 0 1em -3em;
}

article .overspan figcaption {
	width: 100%;
	padding: 0 8.5106383%;
}

article figure img {
	max-width: 100%;
	height: auto;
	vertical-align: top;
}

article figure.withborders img,
article figure.withborders audio,
article figure.withborders video {
	padding: .5em 0;
	border-top: 1px solid var(--c-border);
	border-bottom: 1px solid var(--c-border);
}

article figure.withborders figcaption {
	padding-bottom: 10px;
	border-bottom: 1px solid var(--c-border);
}

article figure.withborders figcaption+img,
article figure.withborders figcaption+p>img,
article figure.withborders figcaption+a img,
article figure.withborders figcaption+p>a img {
	border-bottom: 0;
}

article figure audio {
	width: 100%;
	height: 40px;
}

article figure a img {
	border-bottom:none;
}

/* THIS IS NEW */

article figure.video{
	position: relative;
	height: 0;
	padding: 0 0 56.25%;
}

article figure.video iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
	
article figure.overspan{
	border-top: 10px solid var(--c-backdrop);
	border-bottom: 10px solid var(--c-backdrop);
}

article figure.overspan img,
article figure.overspan iframe{
	overflow: hidden;
	border-radius: .5em;
	box-shadow: 0 2px 25px rgba(0,0,0,.2);
}

article figure.overspan.withborders img{
	padding: 0;
	border: none;
}

article figure.overspan figcaption{
	background: var(--c-backdrop);
	border: none;
}

@media(max-width:61.25em){
	
	#wrapper{
		border-left-width: 0;
		border-right-width: 0;
	}
	
	#container{
		grid-template-columns: minmax(11.25em, 44.25em) 8.3125em;
		column-gap: 6.8125em; 
	}
	
	#content{
		position: relative;
		max-width: 44.25em;
		width: 100%;
	}
	
	article,
	main footer,
	.articles section{
		grid-template-columns: 100%;
		grid-template-rows: 2fr;
		grid-template-areas: ".";
	}
	
	.post-navigation{
		grid-template-columns: 50% 50%;
		gap: .75em;
	}
	
	.post-navigation div:first-child{
		padding-right: 1.5em;
	}
	
	article .alignleft,
	article .alignright,
	article .alignseveral {
		max-width: 50%;
	}
	
	article .overspan {
		width: 100%;
		margin-left: 0;
	}
	
	article .overspan figcaption {
		padding: 0;
	}
	
}

@media(max-width:48em){
	
	
	
}

@media(max-width:45em){
	
	body{
		font-size: 18px;
	}
	
	#header{
		margin-bottom: 3em;
		padding: 1em 0 3em;
	}
	
	#header-items{
		height: auto;
		align-items: self-end;
	}
	
	#site-description br{
		display: initial;
	}
	
	#menu li{
		display: block;
		line-height: 2em;
	}
	
	#container{
		column-gap: 3em;
	}
	
	#footer br{
		display: initial;
	}
	
	article.category-linklog header{
		order: 1;
	}
	
}

@media(max-width:30em){
	
	#site-title{
		margin-bottom: 1.675em;
	}
	
	#container,
	.post-navigation,
	.meta.post-navigation{
		grid-template-columns: 100%; 
		grid-template-rows: 2fr; 
		gap: .75em; 
		grid-template-areas: "."; 
	}
	
	.post-navigation{
		margin-bottom: 3em;
		padding-bottom: 3em;
		border-bottom: 1px solid var(--c-border);
	}
	
	.post-navigation:after{
		display: none;
	}
	
	.post-navigation div:first-child{
		text-align: left;
		border-bottom: 1px solid var(--c-border);
	}
	
	blockquote{
		margin-right: 0;
	}
	
}

@media(max-width:340px){
	
	body{
		font-size: 16px;
	}
	
}