/* nothing-you-could-do-regular - latin */
@font-face {
  font-family: 'Nothing You Could Do';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/nothing-you-could-do-v10-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/nothing-you-could-do-v10-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
:root {
	--font-deco: 'Nothing You Could Do';
	--color-accent: #f29;
	--color-base: #0C2085;
	--color-grey: #456;
}
	*,*:before,*:after {
		box-sizing: border-box;
	}
	html {
		margin: 0; padding: 0;
		background-color: #fff;
		background-image: linear-gradient(to bottom,#eee 300px,#fff 600px);
		min-height: 100vh;
		scroll-margin-top: 4rem;
	}
	body {
		margin: 0;
		padding: 0 1rem 4rem;
		width: 96%;
		min-height: 100vh;
		max-width: 1100px;
		margin-left: auto;
		margin-right: auto;
		background-color: #FFF;
		background-image: url(../img/wondertom_splash.jpg);
		background-repeat: no-repeat;
		background-position: center 3rem;
		font-family: sans-serif;
		overflow-x: hidden;
	}
	body > header {
		margin-top: 3rem;
	}
	img {
		max-width: 100%;
		height: auto;
	}
	figcaption {
		font-size: 0.866em;
		line-height: 1.2;
		text-align: right;
		color: #666;
	}
	.vh:not(:focus):not(:active) {
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}
	.multiply {
		mix-blend-mode: multiply;
		/*background-blend-mode: multiply;*/
	}
	.light {
		color: #999;
	}
	.logo {
		text-align: center;
		margin-bottom: 3rem;
	}
	.logo a {
		transition: all ease-in-out 0.6s;
	}
	.logo a:hover,
	.logo a:focus,
	.logo a:focus-within,
	.logo a:active {
		filter: grayscale(0.7);
	}
	.thumb-info {
		display: flex;
		flex-flow: row wrap;
		align-items: flex-start;
		max-width: 400px;
		margin-left: auto;
		margin-right: auto;
	}
	.thumbnav-next,
	.thumbnav-prev {
		margin-top: auto;
	}
	.info-image {
		margin-left: auto;
	}
	.info-copyright {
		display: block;
		margin-left: auto;
	}

	.thumbs {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		display: flex;
		flex-flow: row wrap;
		justify-content: flex-start;
		align-items: flex-end;
	}
	.portfolio-item .thumbs {
		justify-content: center;
	}
	.portfolio-item .thumbs {
		max-width: 360px;
	}
	.thumb-wrap {
		position: relative;
		max-width: 58px;
	}
	.thumb-wrap:before {
		content: '';
		position: absolute;
		width: 100%;
		left: 0; top: 0; right: 0; bottom: 0;
		background-image: url(../img/border_thumb_1.png);
		background-size: cover;
		/*mix-blend-mode: multiply;*/
		z-index: 10;
		pointer-events: none;
	}
	.thumb-wrap:hover .thumb,
	.thumb-wrap:focus .thumb,
	.thumb-wrap:focus-within .thumb,
	.thumb-wrap:active .thumb,
	.thumb-wrap:hover:before,
	.thumb-wrap:focus:before,
	.thumb-wrap:focus-within:before,
	.thumb-wrap:active:before {
		transform: scale(1.1);
	}
	.thumb-wrap.active .thumb,
	.thumb-wrap.active:before {
		transform: scale(1.1);
		filter: grayscale(100%);
	}
	.thumb-wrap.active .thumb {
		opacity: 0.85;
	}
	.thumb {
		display: block;
		max-width: 100%;
		height: auto;
		mask-image: url(../img/mask_thumb_1.png);
		mask-size: 100% 100%;
			-webkit-mask-image: url(../img/mask_thumb_1.png);
			-webkit-mask-size: 100% 100%;
	}
	.thumb-wrap:nth-of-type(2n):before {
		background-image: url(../img/border_thumb_2.png);
	}
	.thumb-wrap:nth-of-type(2n) .thumb {
		mask-image: url(../img/mask_thumb_2.png);
			-webkit-mask-image: url(../img/mask_thumb_2.png);
	}
	.thumb-wrap:nth-of-type(3n):before {
		background-image: url(../img/border_thumb_3.png);
	}
	.thumb-wrap:nth-of-type(3n) .thumb {
		mask-image: url(../img/mask_thumb_3.png);
			-webkit-mask-image: url(../img/mask_thumb_3.png);
	}
	.thumb-wrap:nth-of-type(4n):before {
		background-image: url(../img/border_thumb_4.png);
	}
	.thumb-wrap:nth-of-type(4n) .thumb {
		mask-image: url(../img/mask_thumb_4.png);
			-webkit-mask-image: url(../img/mask_thumb_4.png);
	}
	.thumb-wrap:nth-of-type(5n):before {
		background-image: url(../img/border_thumb_5.png);
	}
	.thumb-wrap:nth-of-type(5n) .thumb {
		mask-image: url(../img/mask_thumb_5.png);
			-webkit-mask-image: url(../img/mask_thumb_5.png);
	}
	.thumb-wrap:nth-of-type(6n):before {
		background-image: url(../img/border_thumb_6.png);
	}
	.thumb-wrap:nth-of-type(6n) .thumb {
		mask-image: url(../img/mask_thumb_6.png);
			-webkit-mask-image: url(../img/mask_thumb_6.png);
	}
	.image-wrap {
		position: relative;
		max-width: 460px;
		margin-left: auto;
		margin-right: auto;
	}
	.image-wrap--rotate {
		max-width: 460px;
		transform: rotate(-2deg);
	}
	.image-wrap:before {
		content: '';
		position: absolute;
		width: 100%;
		left: 0; top: 0; right: 0; bottom: 0;
		background-image: url(../img/border_image.png);
		background-size: cover;
		background-size: 100% 100%;
		z-index: 10;
	}
	.text .image-wrap:before {
		background-image: none;
		pointer-events: none;
	}
	.image {
		display: block;
		max-width: 100%;
		height: auto;
		mask-image: url(../img/mask_image.png);
		mask-size: 100% 100%;
			-webkit-mask-image: url(../img/mask_image.png);
			-webkit-mask-size: 100% 100%;
	}
	.image-wrap figcaption {
		padding: 0.5em 1.1em 1.3em;
	}
/* thumb info */
.info-thumbs,
.info-image {
	transform: scale(0.9);
}

/* thumbnav */
.thumbnav-prev {
	float: left;
}
.thumbnav-next {
	float: right;
}

/* imagenav */
.imagenav-prev {
	float: left;
}
.imagenav-next {
	float: right;
}

.thumbnav-prev a:hover,
.thumbnav-prev a:focus,
.thumbnav-prev a:active,
.thumbnav-next a:hover,
.thumbnav-next a:focus,
.thumbnav-next a:active,
.imagenav-prev a:hover,
.imagenav-prev a:focus,
.imagenav-prev a:active,
.imagenav-next a:hover,
.imagenav-next a:focus,
.imagenav-next a:active {
	filter: grayscale(100%);
}

/* text */
.text {
	line-height: 1.3;
}
.small {
	font-size: 0.866em;
}
.text > .item {
	background-color: #FFF;
	background-color: rgba(255,255,255,0.8);
	padding: 1rem;
	margin-bottom: 1rem;
	max-width: 45em;
}
.text > .item > * {
	margin: 0;
}
.text > .item > * + * {
	margin-top: 0.5rem;
}
.text > .item > figure {
		margin-bottom: 1rem;
}
.text a {
	color: var(--color-grey);
}
.text a:hover,
.text a:focus,
.text a:active {
	color: var(--color-accent);
}
.text .heading,
.text h3 {
	/*letter-spacing: 0.03em;
	text-transform: uppercase;*/
	font-family: var(--font-deco);
	font-size: 1.7em;
	color: var(--color-accent);
	color: var(--color-base);
	font-weight: normal;
	background-image: linear-gradient(to right,var(--color-accent),var(--color-base));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
}
.text > .item > * + .heading,
.text > .item > * + h3 {
	margin-top: 1rem;
}
.text .heading {
	font-weight: bold;
}
.text h4 {
	color: #555;
}
.text hr {
	border: none;
	border-top: 1px solid #ccc;
}

.only > .item {
	margin-left: auto;
	margin-right: auto;
	min-height: 35em;
}


/* more-link */
* + .more-link {
	padding-top: 1rem;
}
.more-link > a {
	color: var(--color-grey) !important;
	font-size: 1.2em;
	font-family: var(--font-deco);
	font-weight: bold;
	text-decoration: none;
}
.more-link .eye {
	font-size: 1.3em;
	display: inline-block;
}
.more-link > a:hover > .eye,
.more-link > a:focus > .eye,
.more-link > a:active > .eye {
	transform: scale(-1,1);
}

/* edit-link */
.edit-link {
	text-align: center;
}
.edit-link > a {
	display: inline-block;
	padding: 0.5rem 1rem;
	background-color: var(--color-accent);
	color: #FFF;
	font-weight: bold;
	text-decoration: none;
}

/* news panel */
.news__kicker {
	text-transform: uppercase;
	display: inline-block;
	color: var(--color-grey);
	transform: rotate(-2deg);
}
.news__heading {
	font-weight: bold;
	color: var(--color-grey);
}
.news__heading > a {
	color: inherit;
	text-decoration: none;
}
.news-wrap {
	margin-left: 1rem;
	border-left: 4px solid var(--color-accent);
}
.news .list-heading {
	margin-left: -0.5rem;
	padding: 0.25rem 0.5rem;
	display: inline-block;
	background-color: #FFF;
	border: 2px solid var(--color-accent);
	border-bottom-width: 4px;
	border-right-width: 4px;

	background-clip: unset;
	background-image: none;
	-webkit-text-fill-color: initial;
}


/* info panel */
.image-info-icon {
	clear: both;
}
.info__heading,
.text h3.info__heading {
	font-family: sans-serif;
	font-weight: normal;
	color: #666;
	font-size: 1.1em;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}


/* navigation */
.nav-list {
	margin: 0; padding: 0;
	list-style-type: none;
}
.nav-list > li {
	margin: 0; padding: 0;
}
.nav-list > li > a {
	display: block;
	text-decoration: none;
}
.list--horizontal {
	display: flex;
	flex-flow: row wrap;
}

.main-nav {
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	z-index: 20;
	background-color: #567;
	line-height: 1.2;
	box-shadow: 0 2px 3px rgba(0,0,0,0.4);
	margin-left: calc( ( -100vw + 100% ) / 2 );
	margin-right: calc( ( -100vw + 100% ) / 2 );
}
.main-nav a {
	padding: 0.5rem;
	font-weight: bold;
	color: #ccc;
	letter-spacing: 0.02em;
	text-shadow: 0px 1px 0px rgba(0,0,0,1);
}
.main-nav a:hover,
.main-nav a:focus,
.main-nav a:active {
	color: var(--color-accent);
}
.main-nav .active a,
.main-nav a[aria-current="page"] {
	color: #FFF;
}
.main-nav .nav-list {
	justify-content: center;
}
.main-nav li {
	border-top: 4px solid #567;
	border-bottom: 5px solid #567;
}
.main-nav .active {
	border-top-color: var(--color-accent);
}

/* post prev next*/
.post-navigation {
	display: flex;
	justify-content: space-between;
}
	.post-navigation a {
		font-family: var(--font-deco);
		fon-weight: bold;
		font-size: 1.1em;
		text-decoration: none;
	}

/* foldout */
.foldout {
	margin: 0; padding: 0;
	list-style-type: none;
	width: auto;
}
.foldout ul {
	margin: 0; padding: 0;
	list-style-type: none;
	display: inline;
}
.foldout ul li {
	margin: 0; padding: 0;
	opacity: 0;
	color: var(--color-accent);
	display: inline;
	font-size: 0.9em;
		-moz-transition:	opacity 1s ease-in;
		-webkit-transition: opacity 1s ease-in;
		-o-transition:		opacity 1s ease-in;
	transition:				opacity 1s ease-in;
}
.foldout ul li:after {
	content: ", ";
}
.foldout ul li:nth-last-of-type(1):after {
	content: "";
}
.foldout > li:nth-of-type(1) {
	font-size: 1em;
	opacity: 1;
	margin-left: 0;
	color: #454545;
}
.foldout > li:nth-of-type(1) span {
	text-decoration: underline;
}
.foldout:hover li {
	opacity: 1;
}
.foldout:hover li.p90 {
	opacity: 0.9;
}
.foldout:hover li.p80 {
	opacity: 0.8;
}
.foldout:hover li.p70 {
	opacity: 0.7;
}
.foldout:hover li.p60 {
	opacity: 0.6;
}
.foldout:hover li.p50 {
	opacity: 0.5;
}
.foldout:hover li.p40 {
	opacity: 0.4;
}
.foldout:hover li.p30 {
	opacity: 0.3;
}

.footnotes {
	color: #333;
	line-height: 1.3;
	margin-top: 2em;
}
.nolist {
	margin: 0; padding: 0;
	list-style-type: none;
}
.nolist > li {
	margin: 0; padding: 0;
	display: inline;
}
.comma li:after {
	content: ", ";
	display: inline;
}
.comma li:nth-last-of-type(1):after {
	content: "";
}
.tags > li {
	margin: 0.12rem;
}
.tags > li  > a {
	/* button style */
	padding: 0.25rem;
	background-color: #eee;
	text-align: center;
}
.tags > li.active > a {
	background-color: #678;
	color: #fff;
}

.categories > li:nth-of-type(3n+1) {
	transform: rotate(-2deg)
}
.categories > li:nth-of-type(2n+2) {
	transform: rotate(1deg)
}
.categories > li > a {
	padding: 0.4rem;
}
.categories > li > a:hover,
.categories > li > a:focus,
.categories > li > a:active {
	color: #fff;
	background-color: var(--color-accent,#f29);
}
.image-info .tags > li > span {
	/* no button style */
	background-color: transparent;
}
.image-info .tags > li.active  > span {
	color: var(--color-accent);
	border: 1px solid currentColor;
}

.news-teaser {
	padding: 1rem;
	padding-left: 2rem;
}
	.news-teaser > * {
		margin: 0;
	}
	.news-teaser .heading > a {
		text-decoration: none;
	}

/**/
.text,
.thumbs-wrap,
.primary {
	max-width: 35em;
	margin-left: auto;
	margin-right: auto;
}
.thumbs {
	margin-bottom: 1rem;
}
.image-info {
	clear: both;
	max-width: 360px;
	margin-left: auto;
	margin-right: auto;
}
.image-info-icon {
	display: none;
}

@media ( min-width: 960px ) {

	.primary.only {
		max-width: none;
	}
	.image-info-icon {
		display: block;
	}

	/* grid, baby */
	.main-content {
		display: grid;
		grid-template-columns: 250px 40px 360px 40px 1fr;
		grid-template-rows: auto;
	}
	.main-content > .thumbs-wrap {
		grid-row: 1;
		grid-column: 2 / 5;
	}
	.main-content > .primary {
		grid-row: 2;
		grid-column: 2 / 6;
	}
	.main-content > .portfolio {
		grid-column: 2 / 6;
	}

	.portfolio-item .main-content > .portfolio {
		grid-column: 2 / 6;
	}
	.portfolio .main-content > .portfolio,
	.portfolio-item .main-content > .portfolio {
		display: grid;
		grid-template-columns: 40px 450px 40px;
		grid-template-rows: max-content;
	}
	.portfolio .main-content > .portfolio .image-wrap,
	.portfolio-item .main-content > .portfolio .image-wrap {
		max-width: 450px;
	}
	.main-content > .portfolio {
		display: grid;
		grid-template-columns: 40px 360px 40px;
		grid-template-rows: max-content;
	}
	.main-content > .portfolio > .image-wrap {
		grid-row: 1;
		grid-column: 2;
		align-self: flex-start;
	}
	.main-content > .portfolio > .imagenav-prev,
	.main-content > .portfolio > .imagenav-next {
		grid-row: 1;
		grid-column: 1;
		align-self: flex-end;
	}
	.main-content > .portfolio > .imagenav-next {
		grid-column: 3;
	}
	.main-content > .portfolio > .image-info-icon {
		grid-row: 2;
		grid-column: 1;
	}
	.main-content > .portfolio > .image-info {
		grid-column: 2;
	}
	.text {
		margin-left: 0;
		margin-right: 0;
	}

	.main-content > .secondary {
		grid-row: 2;
		grid-column: 1;
	}
	.home .main-content > .news,
	.portfolio-item .main-content > .news {
		grid-row: 2;
		grid-column: 5;
	}
	.portfolio-item .main-content > .news {
		margin: 1rem;
		grid-row: 2 / 3;
	}

	.portfolio .main-content > .news {
		grid-row: 2;
		grid-column: 5;
	}
	.portfolio .main-content > .secondary {
		grid-row: 1 / 3;
	}
	.portfolio .thumbs-wrap {
		grid-column: 3 / 6;
	}
	.portfolio-item .thumbs-wrap,
	.portfolio .thumbs-wrap,
	.portfolio-item .thumbs,
	.portfolio .thumbs {
		margin-left: 0;
		max-width: none;
	}
	.portfolio-item .thumb-info {
		margin-left: 0;
		margin-left: auto;
	}
	.portfolio-item .thumbs-wrap {
		grid-column: 1 / 6;
		margin-left: auto;
		margin-right: auto;
	}
	.portfolio-item .thumbs {
		margin-left: auto;
		margin-right: auto;
	}
	.portfolio .thumbs,
	.portfolio-item .thumbs {
		width: initial;
	}
}

@media (prefers-color-scheme: dark) {
	html {
		filter: invert(100%) hue-rotate(180deg);
		background-image: none;
	}
	.thumb,
	.image,
	.mfp-img,
	#sb-player {
		filter: invert(100%) hue-rotate(180deg);
	}
}