/*!
Theme Name:     Jake Van Extension
Theme URI:      https://jakevan.ca
Description:    Jvb-theme child theme, for Jake.
Author:         Jake
Author URI:     https://jakevan.ca/
Template:       jvb-theme
Version:        0.1.5
!*/
:root{
	--filter: grayscale(.3) sepia(.4);

	/** Download your Fonts from: https://gwfh.mranftl.com/ **/
	--font-base: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
	--heading: 'Open Sans', var(--font-base);
	--body: 'Montserrat', var(--font-base);
	--fw-h: 900;
	--fw-h-light: 400;
	--fw-h-bold: 800;
	--fw-b: 400;
	--fw-b-bold: 900;
	--fw-b-light: 200;

	/* Colours
	For best results, generate colours from base colours using: https://uicolors.app/generate/
	or sass darken/lighten by 5%: http://scg.ar-ch.org/
	*/
	--light-0: #ededf4;
	--light-50: #e3e3ee;
	--light-100: #dadae8;
	--light-200: #d1d1e3;
	--light-rgb: 237,237,244;

	--dark-0: #2a2b2a;
	--dark-50: #2f302f;
	--dark-100: #393a39;
	--dark-200: #3e403e;
	--dark-rgb: 42,43,42;

	--action-0: #ef767a;
	--action-50: #f28d90;
	--action-100: #f4a4a6;
	--action-200: #f7bbbd;
	--action-rgb: 239,118,122;
	--action-contrast: var(--light-0);

	--secondary-0: #329dcb;
	--secondary-50: #5ab1d6;
	--secondary-100: #83c4e0;
	--secondary-200: #acd8ea;
	--secondary-rgb: 50,157,203;
	--secondary-contrast: var(--light-0);

	--success: #22C55E;
	--successLight: #d4edda;
	--successDark: #155724;
	--successBack: var(--successLight);
	--successText: var(--successDark);
	--warning: #E8A737;
	--warningLight: #F6E5CB;
	--warningDark: #231806;
	--warningBack: var(--warningLight);
	--warningText: var(--warningDark);
	--error: #EF4444;
	--errorLight: #f8d7da;
	--errorDark: #721c24;
	--errorBack: var(--errorLight);
	--errorText: var(--errorDark);


	--red-0: #ef767a;
	--red-50: #ec5f64;
	--red-100: #ea484e;
	--red-200: #e73238;
	--red-rgb: 239,118,122;

	--orange-0: #ef9e76;
	--orange-50: #f2ae8d;
	--orange-100: #f4bea4;
	--orange-200: #f7cfbb;
	--orange-rgb: 239,158,118;

	--yellow-0: #E3BE39;
	--yellow-50: #e9cd66;
	--yellow-100: #f0db92;
	--yellow-200: #f6eabf;
	--yellow-rgb: 227,190,57;

	--green-0: #32cb82;
	--green-50: #5ad69b;
	--green-100: #83e0b4;
	--green-200: #aceacc;
	--green-rgb: 50,203,130;

	--blue-0: #329dcb;
	--blue-50: #5ab1d6;
	--blue-100: #83c4e0;
	--blue-200: #acd8ea;
	--blue-rgb: 50,157,203;

	--purple-0: #ba76ef;
	--purple-50: #c58df2;
	--purple-100: #d1a4f4;
	--purple-200: #dcbbf7;
	--purple-rgb: 186,118,239;

	--base: var(--light-0);
	--base-50: var(--light-50);
	--base-100: var(--light-100);
	--base-200: var(--light-200);
	--base-rgb: var(--light-rgb);

	--contrast: var(--dark-0);
	--contrast-50: var(--dark-50);
	--contrast-100: var(--dark-100);
	--contrast-200: var(--dark-200);
	--contrast-rgb: var(--dark-rgb);
}

body:has(#theme-switcher:checked){
	--action-50: #ec5f64;
	--action-100: #ea484e;
	--action-200: #e73238;

	--secondary-50: #287da2;
	--secondary-100: #1e5e79;
	--secondary-200: #143e50;

	--contrast: var(--light-0);
	--contrast-50: var(--light-50);
	--contrast-100: var(--light-100);
	--contrast-200: var(--light-200);
	--contrast-rgb: var(--light-rgb);

	--base: var(--dark-0);
	--base-50: var(--dark-50);
	--base-100: var(--dark-100);
	--base-200: var(--dark-200);
	--base-rgb: var(--dark-rgb);

	--successBack: var(--successDark);
	--successText: var(--successLight);
	--warningBack: var(--warningDark);
	--warningText: var(--warningLight);
	--errorBack: var(--errorDark);
	--errorText: var(--errorLight);

	--red-50: #ec5f64;
	--red-100: #ea484e;
	--red-200: #e73238;

	--orange-50: #ec8e5f;
	--orange-100: #ea7e48;
	--orange-200: #e76e32;

	--yellow-50: #cca61d;
	--yellow-100: #9f8217;
	--yellow-200: #735d10;

	--green-50: #28a268;
	--green-100: #1e794e;
	--green-200: #145033;

	--blue-50: #287da2;
	--blue-100: #1e5e79;
	--blue-200: #143e50;

	--purple-50: #a348ea;
	--purple-100: #8c1be4;
	--purple-200: #7015b7;
}

body {
	overflow-x: hidden;
}
/*** FONTS START **/
/** Download your Fonts from: https://gwfh.mranftl.com/
use ./assets/fonts/ as a base
**/
/* open-sans-regular - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	src: url('./assets/fonts/open-sans-v44-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	url('./assets/fonts/open-sans-v44-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* open-sans-italic - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 400;
	src: url('./assets/fonts/open-sans-v44-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	url('./assets/fonts/open-sans-v44-latin-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* open-sans-800 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 800;
	src: url('./assets/fonts/open-sans-v44-latin-800.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	url('./assets/fonts/open-sans-v44-latin-800.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* open-sans-800italic - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 800;
	src: url('./assets/fonts/open-sans-v44-latin-800italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	url('./assets/fonts/open-sans-v44-latin-800italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* montserrat-200 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 200;
	src: url('./assets/fonts/montserrat-v31-latin-200.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	url('./assets/fonts/montserrat-v31-latin-200.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* montserrat-200italic - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Montserrat';
	font-style: italic;
	font-weight: 200;
	src: url('./assets/fonts/montserrat-v31-latin-200italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	url('./assets/fonts/montserrat-v31-latin-200italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* montserrat-regular - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400;
	src: url('./assets/fonts/montserrat-v31-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	url('./assets/fonts/montserrat-v31-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* montserrat-italic - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Montserrat';
	font-style: italic;
	font-weight: 400;
	src: url('./assets/fonts/montserrat-v31-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	url('./assets/fonts/montserrat-v31-latin-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* montserrat-900 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 900;
	src: url('./assets/fonts/montserrat-v31-latin-900.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	url('./assets/fonts/montserrat-v31-latin-900.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* montserrat-900italic - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Montserrat';
	font-style: italic;
	font-weight: 900;
	src: url('./assets/fonts/montserrat-v31-latin-900italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
	url('./assets/fonts/montserrat-v31-latin-900italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/*** FONTS END ***/

.design a, a.design{
	color: var(--red-0);
}
.design a:hover, a.design:hover {
	background-color: var(--red-0);
	color: var(--red-200);
}
.development a, a.development {
	color: var(--orange-0);
}
.development a:hover, a.development:hover {
	background-color: var(--orange-0);
	color: var(--orange-200);
}
.strategy a, a.strategy {
	color: var(--green-0);
}
.strategy a:hover, a.strategy:hover {
	background-color: var(--green-0);
	color: var(--green-200);
}
.art a, a.art {
	color: var(--blue-0);
}
.art a:hover, a.art:hover {
	background-color: var(--blue-0);
	color: var(--blue-200);
}
.writing a, a.writing {
	color: var(--purple-0);
}
.writing a:hover, a.writing:hover {
	background-color: var(--purple-0);
	color: var(--purple-200);
}

li {
	list-style: inside;
	padding-left: 1em;
}

.dashboard li {
	list-style: none;
	padding-left: 0;
}

.condensed.condensed a {
	color: var(--contrast);
	border-radius: 0;
	border-bottom: 2px solid var(--action-0);
}
.condensed .design a {
	border-color: var(--red-0);
}
.condensed .development a {
	border-color: var(--orange-0);
}
.condensed .strategy a {
	border-color: var(--green-0);
}
.condensed .art a {
	border-color: var(--blue-0);
}
.condensed .writing a {
	border-color: var(--purple-0);
}

.intro + nav {
	grid-column: full;
}
	.intro + nav ul {
		width: 100%;
	}
	.intro + nav li,
	.intro + nav a {
		min-height: var(--chip_);
		border-radius: 8px 0 8px 0!important;
	}
	.intro + nav li{
		width: 23%;
	}


:is(h1, h2, h3, h4, h5, h6) {
	margin: 1.5em auto .25em 1.5rem;
}
h1 {
	margin: 0 auto .25em 1.5rem;
}
.pre-footer {
	background: var(--base);
	padding: 3rem 0 2rem;
}
.pre-footer p {
	margin: 0 auto .25rem 1rem;
}
.pre-footer a {
	background-color: var(--action-0);
	color: var(--action-contrast);
}

footer {
	margin: 0;
	padding: 1rem 2rem;
}
footer p {
	text-align: left;
}

.buttons {
	margin: 1rem auto 1rem 1.5rem;
}

footer nav.condensed ul {
	--justify: flex-start;
	--gap: 0 .5rem;
	margin-bottom: 1rem;
}

header {
	justify-content: center;
	gap: 1rem;
}
header .icon-logo {
	--w: var(--chipchip);
}
header .icon-jakevan {
	--w: var(--btn_);
	margin-left: 1rem;
}
header p {
	width: max-content;
}
#theme-switch {
	position: absolute;
	left: 1rem;
}
section.intro {
	--w: min(40vw, 350px);
	height: max-content;
}
	section.intro .icon {
		margin: 0;
	}
	section.intro h1 {
		max-width: var(--w);
	}
.home .media-text {
	--w: min(40vw, 350px);
	height: max-content;
}
.home .media-text figure,
.home .media-text >div {
	margin: 0;
	width: var(--w);
	padding: 2rem 0 2rem 2rem;
}
.home h1 {
	font-size: var(--txt-medium);
	font-family: var(--body);
	font-weight: var(--fw-b-light);
	text-transform: none;
	margin: 0;
}
@media (min-width:768px) {
	.home h1 {
		font-size: var(--txt-x-large);
	}
}
@media (max-width: 768px) {
	footer, .pre-footer {
		padding-right: var(--btn_);
	}
}

main > section:nth-of-type(even) {
	background-color: var(--base-100);
	max-width: 100vw;
	padding: 3rem 0;
}
main > section > * {
	width: 100%;
	max-width: var(--content);
	margin-left: 1.5rem;
	margin-right: auto;
}
main > section:nth-of-type(even) > * {
	max-width: var(--content);
}

main > section.callout:last-of-type {
	margin-bottom: 0;
}

nav.fixed.bottom {
	transition: var(--trans-size);
}
.drawer.open + .fixed.bottom {
	width: calc(100% - 240px);
	transition: var(--trans-size);
}

.cover.alt {
	overflow: visible;
	height: 45vh;
	min-height: 45vh;
	padding:0;
}
.cover.alt::before {
	display: none;
}

.cover.alt + #top {
	max-width: 100%;
	margin: 0 var(--btn_) 0 0!important;
	width: 100%;
	z-index: var(--z-1);
}

.cover.alt + #top#top h1 {
	margin: 1rem 0 0;
	padding-right: 1rem;
	text-align: right;
}

.cover.alt img {
	object-fit: cover;
	width:100%;
	height: 100%;
	border-radius: 0 0 10rem 10rem;
	transition: var(--trans-transform);
}
.cover.alt div {
	max-width: none;
	overflow:hidden;
}

.cover.art {
	--color-0: var(--blue-0);
	--color-1: var(--blue-50);
	--color-2: var(--blue-100);
	--color-3: var(--blue-200);
}
.cover.design {
	--color-0: var(--red-0);
	--color-1: var(--red-50);
	--color-2: var(--red-100);
	--color-3: var(--red-200);
}
.cover.development {
	--color-0: var(--orange-0);
	--color-1: var(--orange-50);
	--color-2: var(--orange-100);
	--color-3: var(--orange-200);
}
.cover.strategy {
	--color-0: var(--green-0);
	--color-1: var(--green-50);
	--color-2: var(--green-100);
	--color-3: var(--green-200);
}
.cover.writing {
	--color-0: var(--purple-0);
	--color-1: var(--purple-50);
	--color-2: var(--purple-100);
	--color-3: var(--purple-200);
}

.cover.art >div:nth-of-type(4n+1) img,
.cover.writing div:nth-of-type(4),
.cover.design div:nth-of-type(4n+1) div,
.cover.development div:nth-of-type(4n+1) div{
	background-color: var(--color-0);
	border-color: var(--color-2);
}

.cover.art >div:nth-of-type(4n+2) img,
.cover.writing div:nth-of-type(3),
.cover.writing div:nth-of-type(5),
.cover.design div:nth-of-type(4n+2) div,
.cover.strategy div:nth-of-type(3n+1),
.cover.development div:nth-of-type(4n+2) div{
	background-color: var(--color-1);
	border-color: var(--color-3);
}
.cover.art >div:nth-of-type(4n+3) img,
.cover.writing div:nth-of-type(2),
.cover.writing div:nth-of-type(6),
.cover.design div:nth-of-type(4n+3) div,
.cover.strategy div:nth-of-type(3n+2) {
	background-color: var(--color-2);
	border-color: var(--color-0);
}
.cover.art >div:nth-of-type(4n+4) img,
.cover.writing div:nth-of-type(1),
.cover.writing div:nth-of-type(7),
.cover.design div:nth-of-type(4n+4) div,
.cover.strategy div:nth-of-type(3n+3) {
	background-color: var(--color-3);
	border-color: var(--color-1);
}


.cover.strategy div,
.cover.development div div,
.cover.art div {
	z-index: 0;
	overflow: hidden;
	background-color: var(--base);
	border: 1vw solid var(--base-100);
}

/*.cover.art {*/
/*	display: flex;*/
/*	flex-direction: column;*/
/*	align-items: center;*/
/*	position: relative;*/
/*	--width: 48vh;*/
/*	--half: calc(var(--width) / 2);*/
/*	--quarter: calc(var(--half) / 2);*/
/*	--offHalf: calc(var(--half) - 3vw);*/
/*}*/
/*	.cover.art .img {*/
/*		min-height: var(--width);*/
/*		width: var(--half);*/
/*		overflow: hidden;*/
/*		background-color: transparent!important;*/
/*		border: none;*/
/*	}*/
/*	.cover.art .img:nth-child(1) {*/

/*	}*/
/*	.cover.art .img div {*/
/*		aspect-ratio: 1;*/
/*		width: var(--width);*/
/*		border-radius: 50%;*/
/*		min-height: var(--width);*/
/*	}*/
/*		.cover.art > div:nth-child(2),*/
/*		.cover.art > div:nth-child(4) {*/
/*			border-radius: 50%;*/
/*			position: absolute;*/
/*			width: 25vw;*/
/*			min-height: 25vw;*/
/*			border-width: .5vw;*/
/*		}*/
/*			.cover.art > div:nth-child(2) {*/
/*				left: 10vw;*/
/*				top: 10vw;*/
/*			}*/
/*			.cover.art > div:nth-child(4) {*/
/*				right: var(--btn_);*/
/*				top: 48vh;*/
/*			}*/
/*			@media (min-width: 768px) {*/

/*				.cover.art > div:nth-child(2),*/
/*				.cover.art > div:nth-child(4) {*/
/*					width: 15vw;*/
/*					min-height: 15vw;*/
/*				}*/
/*				.cover.art > div:nth-child(2) {*/
/*					left: var(--half);*/
/*					top: var(--quarter);*/
/*				}*/
/*				.cover.art > div:nth-child(4) {*/
/*					right: calc(var(--quarter) + 6vw);*/
/*					top: calc(var(--half) + 12vw);*/
/*				}*/
/*			}*/
/*		.cover.art > div:nth-child(1),*/
/*		.cover.art > div:nth-child(3) {*/
/*			position:relative;*/
/*		}*/
/*			.cover.art > div:nth-child(1) {*/
/*				left: var(--quarter);*/
/*			}*/
/*				.cover.art > div:nth-child(1) div {*/
/*					position: absolute;*/
/*					right: 0;*/
/*				}*/
/*			.cover.art > div:nth-child(3) {*/
/*				top: calc(var(--half) * -1);*/
/*				right: var(--quarter);*/
/*			}*/
/*.cover.art .halftone +.halftone {*/
/*	transform: rotate(180deg);*/
/*	top: var(--width);*/
/*	left: 0;*/
/*	right: unset;*/
/*}*/

/*.cover.art .img::before {*/
/*	content: '';*/
/*	filter: invert(1) brightness(0.75) invert(1) saturate(2);*/
/*	width:100%;*/
/*	height: 50%;*/
/*	position:absolute;*/
/*	bottom: 0;*/
/*}*/
/*.cover.art .img ~ .img::before {*/
/*	bottom: unset;*/
/*	top: 0;*/
/*}*/
/*.cover.art .halftone {*/
/*	width:50%;*/
/*	height: var(--half);*/
/*	position: absolute;*/
/*	top: 0;*/
/*	right: 0;*/
/*	background-color:transparent!important;*/
/*	border: 1px solid var(--base-50)!important;*/
/*	border-top-width: 0!important;*/
/*	border-right-width:0!important;*/
/*}*/

.cover.art.alt {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(3, 25vw);
	gap: 0;
	height: max-content;
	padding: 2rem 0 0;
}
.cover.art div {
	background-color: transparent;
	border: none;
}
.cover.art img {
	border-radius: 50%;
	padding: .25rem;
	border: .36em solid var(--blue-0);
	position: relative;
}
	.cover.art .has-img {
		grid-row: span 2;
		grid-column: span 2;
		overflow:hidden;
		position: relative;
		background: transparent!important;
	}

		.cover.art .has-img:first-child {
			grid-row: 2 / span 2;
		}
			.cover.art .has-img img {
				aspect-ratio:1;
				z-index: 0;
				mix-blend-mode: darken;
			}
			.cover.art .has-img:first-child img {
				left: 50%;
			}
			.cover.art .has-img:nth-child(3) img {
				left: -50%;
			}
			.has-img:nth-child(1) .halftone::before {
				background: radial-gradient(#fff 0%,#fff 15%, #888 65%) 0 0 / 1.2em 1.2em, radial-gradient(circle at top right, #fff, #000);
			}
			.has-img:nth-child(3) .halftone::before {
				background: radial-gradient(#fff 0%,#fff 15%, #888 65%) 0 0 / 1.2em 1.2em, radial-gradient(circle at bottom left, #fff, #000);
			}
			.cover.art img {
				border: .36em solid var(--blue-50);
			}
			.has-img:nth-child(1) .halftone::before,
			.has-img:nth-child(1) .halftone::after {
				top:50%;
				z-index: 1;
			}
			.has-img:nth-child(3) .halftone::before,
			.has-img:nth-child(3) .halftone::after {
				bottom:50%;
				z-index: 1;
			}
		.cover.art .has-img .img,
		.cover.art .halftone {
			/*position:absolute;*/
			/*inset: 0;*/
			/*left: 50%;*/
			/*min-width: 50vw;*/
			/*min-height: 50vw;*/
		}

	.cover.art > div:nth-child(2) {
		grid-column: 2;
		left:-2rem;
		bottom: -1.4rem;
		position: relative;
		aspect-ratio: 1;
		/*aspect-ratio: 1;*/
	}
	.cover.art > div:last-of-type {
		grid-column: 3;
		top: -1.6rem;
		right:-2rem;
		position: relative;
		aspect-ratio: 1;
		/*aspect-ratio: 1;*/
	}


.cover.development {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	--width: 75vh;
	--third: calc(var(--width) / 3);
	--half: calc(var(--width) / 2);
	--quarter: calc(var(--half) / 2);
}
@media (min-width:768px) {
	.cover.development {
		align-items: center;
	}

	.cover.development > div:nth-of-type(1) {
		left: 50%;
	}

	.cover.development div:nth-of-type(2) {
		top:var(--half);
		right: 50%;
		left: unset;
	}
}

.cover.development div div,
.cover.development div {
	width: var(--third);
	height: var(--third);
	min-height: var(--third);
	aspect-ratio: 1;
	border-radius: 50%;
}

.cover.development div {
	background-color: transparent;
	margin: 0;
	border: 0;
}
.cover.development > div:nth-of-type(1),
.cover.development > div:nth-of-type(2) {
	position: absolute;
	width: var(--quarter);
	height: var(--half);
	border-radius: 0;
	overflow: hidden;
}


.cover.development div:nth-of-type(3),
.cover.development div:nth-of-type(4),
.cover.development div:nth-of-type(5) {
	background-color: transparent;
	background-image: repeating-radial-gradient(circle, var(--base-50) 0, var(--base-50) 16px, var(--orange-200) 16px, var(--orange-200) 17px);
	border: 1px solid var(--orange-200);
}

.cover.development div div {
	width: var(--half);
	height: var(--half);
}
.cover.development div:nth-of-type(1) div {
	position: absolute;
	right: 0;
}
.cover.development > div:nth-of-type(1) {
	left: calc(var(--third) / 2);
}

.cover.development div:nth-of-type(2) {
	top:var(--half);
	left: -2.5rem;
}


.cover.design {
	--width: 50vw;
	--half: calc(var(--width) / 2);
	--negHalf: calc(var(--half) * -1);
	display: flex;
	flex-direction: column;
	overflow:visible;
	padding-left:5vw;
	/*transform: rotate(30deg);*/
}
@media (min-width: 768px) {
	.cover.design {
		--width: 27vw;
	}
}
	.cover.design::before {
		content: '';
		position: absolute;
		left: calc(var(--half) + 5vw); /* same as padding-left above */
		width: 2px;
		background-color: var(--base);
		display:block;
		top: 0;
		height: calc(var(--width) * 2.75);
	}
.cover.design > div {
	min-height: var(--width);
	margin: 0;
	background:transparent;
	border: none;
	position:relative;
	mix-blend-mode:soft-light;
}
	.cover.design > div:nth-of-type(2),
	.cover.design > div:nth-of-type(3) {
		width:var(--half);
		overflow:hidden;
	}
	.cover.design div:nth-of-type(3){
		margin-left: var(--half);
	}
	.cover.design > div:nth-of-type(3) div {
		position: absolute;
		right: 0;
		top:0;
	}
	.cover.design > div:nth-of-type(2){
		top: var(--negHalf);
	}
	.cover.design > div:nth-of-type(3){
		top: calc(var(--negHalf) * 2);
	}
	.cover.design > div:nth-of-type(4){
		top: calc(var(--negHalf) * 3);
	}
.cover.design div div {
	aspect-ratio: 1;
	width: var(--width);
	border-radius:50%;
}
.cover.design img {
	mix-blend-mode: overlay;
}


/*.cover.strategy {*/
/*	display: flex;*/
/*	flex-wrap: wrap;*/
/*	justify-content:space-evenly;*/
/*	align-items:flex-start;*/
/*}*/
/*.cover.strategy .item {*/
/*	width: 30vw;*/
/*	aspect-ratio: 1;*/
/*	border-radius: 0 50% 50%;*/
/*	transform: rotate(45deg);*/
/*	box-shadow: rgba(var(--base-rgb), var(--op-5)) var(--shdw);*/
/*}*/
/*	.cover.strategy .item img {*/
/*		transform: rotate(-45deg);*/
/*	}*/

/*.cover.strategy .crowd {*/
/*	width: 100%;*/
/*	padding: 3vw 0;*/
/*	display: flex;*/
/*	flex-wrap: nowrap;*/
/*	max-width:none;*/
/*	background-color:var(--base-50)!important;*/
/*	border: none;*/
/*	overflow:visible;*/
/*	margin-bottom: 5vw;*/
/*}*/
/*	.cover.strategy .crowd div {*/
/*		aspect-ratio: 1;*/
/*		border-radius: 50%;*/
/*		!*border-radius: 0 50% 0 50%;*!*/
/*		!*transform: rotate(30deg);*!*/
/*		min-width: 8vw;*/
/*	}*/
/*		.cover.strategy .crowd div {*/
/*			background-color:var(--base-100);*/
/*			border-color: var(--base-50);*/
/*			mix-blend-mode: overlay;*/
/*			position:relative;*/
/*			flex: 1;*/
/*			margin: 0 -2vw;*/
/*		}*/
/*		.cover.strategy .crowd div:nth-of-type(odd){*/
/*			top: 1vw;*/
/*		}*/
/*		.cover.strategy .crowd div:nth-of-type(even){*/
/*			top: -3vw;*/
/*		}*/
.cover.writing {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 40vh;
	--width: 33.3vw;
	--first: calc(var(--width) * .666);
	--second: calc(var(--first) * .666);
	--third: calc(var(--second) * .666);
}
	.cover.writing div {
		width: var(--width);
		aspect-ratio: 1;
		transform: rotate(45deg);
		z-index: 4;
		margin: 0 -6vw;
		box-shadow: rgba(var(--base-rgb),var(--op-5)) var(--shdw);
	}
		.cover.writing div img {
			transform: rotate(-45deg);
		}

	.cover.writing div:nth-of-type(3),
	.cover.writing div:nth-of-type(5) {
		width: var(--first);
		z-index: 3;
		margin: 0 -4vw;
	}
	.cover.writing div:nth-of-type(2),
	.cover.writing div:nth-of-type(6) {
		width: var(--second);
		z-index: 2;
		margin: 0 -3vw;
	}
	.cover.writing div:nth-of-type(1),
	.cover.writing div:nth-of-type(7) {
		width: var(--third);
		z-index: 1;
		margin: 0 -2vw;
	}

/*.halftone {*/
/*	background: !* 1 *!*/
/*		var(--pattern,*/
/*		radial-gradient(closest-side, #777, #fff)*/
/*		.25rem/ 1em 1em space),*/
/*		var(--map,*/
/*		linear-gradient(0deg, #888, #fff));*/
/*	background-blend-mode: multiply !* 2 *!;*/
/*	filter: contrast(21) !* 3 *!*/
/*}*/

/*** THIS ONE WORKS WELL **/

/*.halftone {*/
/*	background: linear-gradient(90deg, var(--blue-0), transparent);*/
/*	background-blend-mode: color;*/
/*}*/

.halftone::before {
	content: '';
	position:absolute;
	inset:0;
	background: radial-gradient(#fff, #888) 0 0 / 1em 1em, radial-gradient(circle at bottom left, #fff, #000);
	background-blend-mode: multiply;
	filter: contrast(50) blur(2px) contrast(4);
	mix-blend-mode: darken;
}
.halftone::after {
	z-index: 1;
	background: var(--base-50);
	mix-blend-mode: lighten;
	content: '';
	position:absolute;
	inset:0;
}
/**** END THIS ONE WORKS WELL **/
.cover.strategy {
	overflow:visible;
	display: flex;
	justify-content: center;
	--radi: 10vw 10vw;
}
.cover.strategy div {
	height: 30vh;
	min-width: 18vw;
	margin: 0 -.5vw;
	border-color: var(--green-0)!important;
}
	.cover.strategy > div:first-of-type,
	.cover.strategy > div:last-of-type {
		display: none;
	}
	.cover.strategy div:nth-of-type(odd){
		border-radius: 0 0 var(--radi);
		border-top:0;
		z-index: 1;
	}
	.cover.strategy div:nth-of-type(even){
		z-index: 0;
		height:40vh;
		border-bottom: 0;
		position: relative;
		top: 19vh;
		border-radius: var(--radi) 0 0;
	}

.cover.strategy  div:nth-of-type(2) {
	height: 60vh;
}
.cover.strategy  div:nth-of-type(6) {
	height: 30vh;
}


@media (min-width:768px) {
	.cover.writing {
		height: 55vh;
	}
	.cover.strategy {
		--radi: 7.5vw;
	}
	.cover.strategy div {
		min-width: 15vw;
	}
	.cover.strategy div:nth-of-type(even) {
		top: 15vh;
	}

	.cover.strategy > div:first-of-type,
	.cover.strategy > div:last-of-type {
		display: block;
	}
}

.feed-block .item-grid {
	max-width:var(--wider);
	padding:0;
}

#top h1 small {
	margin: 0;
	line-height: .5;
}
#top p {
	margin-left: auto;
	font-size:var(--txt-x-small);
}

.cover {
	padding: 1rem;
}
.cover h1 {
	font-size: var(--txt-xxx-large);
	line-height: .75;
	mix-blend-mode: luminosity;
	margin: 0 0 .5rem;
}
.cover .content {
	padding: 1rem 0;
	text-align: right;
	margin-right: var(--btn);
}

h2.subtitle {
	font-weight: var(--fw-h-light);
	text-transform: none;
	font-size: var(--txt-medium);
	margin: .5rem 0;
}

figure {
	margin: 0;
}
.loading[open] .spinner {
	display: none;
}
.loading[open] i.icon {
	--w: var(--txt-enormous);
	background-color: var(--action-0);
	animation: spin .36s var(--trans-fn) infinite;
}


.row.services {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	padding-bottom: 2rem;
}
	.row.services h2 {
		margin: 1.5em 0 .25rem;
		font-size: var(--txt-x-medium);
	}

section#gallery div {
	max-width: var(--wide);
	display: grid;
	gap: 5px;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	grid-auto-rows: 200px;
}
#gallery div figure img {
	width:100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transition: var(--trans-transform);
}
	#gallery div figure:hover img {
		transform: scale(1.05);
	}

#gallery div figure:nth-of-type(3n+1) {
	padding: 15px;
}
#gallery div figure:nth-of-type(5n+1) {
	padding: 25px;
}
/*section#gallery div img:nth-of-type(3n+1) {*/
/*	padding: 1rem;*/
/*}*/

#gallery div figure:nth-of-type(6n + 1),
#gallery div figure:nth-of-type(6n + 5){
	grid-row: span 2;
}

#gallery div figure:nth-of-type(6n + 0),
#gallery div figure:nth-of-type(6n + 6){
	grid-column: span 2;
}
#gallery div figure:nth-of-type(6n+4) {
	grid-column: span 2;
	grid-row: span 2;
}

/*#gallery div img:nth-of-type(3n+2) {*/
/*	grid-row: span 1;*/
/*	grid-column: span 2;*/
/*}*/


.needs-wants.needs-wants {
	max-width: var(--wide);
}
	.needs-wants li {
		list-style: none;
		padding:0;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
	}
	.needs-wants h3 {
		margin: 4rem 0 2rem;
	}
	.needs-wants img {
		max-width: 45%;
		margin-right: 4%;
		position:sticky;
		top: var(--btnbtn);
	}
	.needs-wants img + .info {
		max-width: 50%;
		display: inline-block;
	}