jakevan/jvb-theme-child.git

			@@ -21,122 +21,128 @@
			--fw-b-bold: 900;
			--fw-b-light: 200;

			--txt-small: clamp(0.75rem, calc(0.682rem + 0.341vw), 0.90rem);
			--txt-x-small: clamp(0.88rem, calc(0.809rem + 0.355vw), 1.05rem);
			--txt-medium: clamp(1.00rem, calc(0.920rem + 0.400vw), 1.20rem);
			--txt-x-medium: clamp(1.13rem, calc(1.036rem + 0.466vw), 1.40rem);
			--txt-large: clamp(1.35rem, calc(1.227rem + 0.614vw), 1.70rem);
			--txt-x-large:clamp(1.62rem, calc(1.455rem + 0.830vw), 2.10rem);
			--txt-xx-large: clamp(1.94rem, calc(1.714rem + 1.143vw), 2.60rem);
			--txt-xxx-large: clamp(2.33rem, calc(2.014rem + 1.591vw), 3.30rem);
			--txt-enormous: calc(26vh - 4rem);

			/* 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;
			--light-0: 237,237,244; /* #ededf4; */
			--light-50: 227,227,238; /* #e3e3ee; */
			--light-100: 218,218,232; /* #dadae8; */
			--light-200: 209,209,227; /* #d1d1e3; */

			--dark-0: #2a2b2a;
			--dark-50: #2f302f;
			--dark-100: #393a39;
			--dark-200: #3e403e;
			--dark-rgb: 42,43,42;
			--dark-0: 42,43,42; /* #2a2b2a; */
			--dark-50: 47,48,47; /* #2f302f; */
			--dark-100: 57,58,57; /* #393a39; */
			--dark-200: 62,64,62; /* #3e403e; */

			--action-0: #ef767a;
			--action-50: #f28d90;
			--action-100: #f4a4a6;
			--action-200: #f7bbbd;
			--action-rgb: 239,118,122;
			--action-0: 239,118,122; /* #ef767a; */
			--action-50: 242,141,144; /* #f28d90; */
			--action-100: 244,164,166; /* #f4a4a6; */
			--action-200: 247,187,189; /* #f7bbbd; */
			--action-contrast: var(--light-0);

			--secondary-0: #329dcb;
			--secondary-50: #5ab1d6;
			--secondary-100: #83c4e0;
			--secondary-200: #acd8ea;
			--secondary-rgb: 50,157,203;
			--secondary-0: 50,157,203; /* #329dcb; */
			--secondary-50: 90,177,214; /* #5ab1d6; */
			--secondary-100: 131,196,224;/* #83c4e0; */
			--secondary-200: 172,216,234;/* #acd8ea; */
			--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);
			--success: 34,197,94; /* #22C55E; */
			--successLight: 212,237,218;/* #d4edda; */
			--successDark: 21,87,36; /* #155724; */

			--warning: 232,167,55; /* #E8A737; */
			--warningLight: 246,229,203;/* #F6E5CB; */
			--warningDark: 35,24,6; /* #231806; */

			--error: 239,68,68; /* #EF4444; */
			--errorLight: 248,215,218; /* #f8d7da; */
			--errorDark: 114,28,36; /* #721c24; */


			--red-0: #ef767a;
			--red-50: #ec5f64;
			--red-100: #ea484e;
			--red-200: #e73238;
			--red-rgb: 239,118,122;
			--red-0: 239,118,122; /* #ef767a; */
			--red-50: 236,95,100; /* #ec5f64; */
			--red-100: 234,72,78; /* #ea484e; */
			--red-200: 231,50,56; /* #e73238; */
			--red-contrast: var(--dark-0);

			--orange-0: #ef9e76;
			--orange-50: #f2ae8d;
			--orange-100: #f4bea4;
			--orange-200: #f7cfbb;
			--orange-rgb: 239,158,118;
			--orange-0: 239,158,118; /* #ef9e76; */
			--orange-50: 242,174,141; /* #f2ae8d; */
			--orange-100: 244,190,164; /* #f4bea4; */
			--orange-200: 247,207,187; /* #f7cfbb; */
			--orange-contrast: var(--dark-0);

			--yellow-0: #E3BE39;
			--yellow-50: #e9cd66;
			--yellow-100: #f0db92;
			--yellow-200: #f6eabf;
			--yellow-rgb: 227,190,57;
			--yellow-0: 227,190,57; /* #E3BE39; */
			--yellow-50: 233,205,102; /* #e9cd66; */
			--yellow-100: 240,219,146; /* #f0db92; */
			--yellow-200: 246,234,191; /* #f6eabf; */
			--yellow-contrast: var(--dark-0);

			--green-0: #32cb82;
			--green-50: #5ad69b;
			--green-100: #83e0b4;
			--green-200: #aceacc;
			--green-rgb: 50,203,130;
			--green-0: 50,203,130; /* #32cb82; */
			--green-50: 90,214,155; /* #5ad69b; */
			--green-100: 131,224,180; /* #83e0b4; */
			--green-200: 172,234,204; /* #aceacc; */
			--green-contrast: var(--dark-0);

			--blue-0: #329dcb;
			--blue-50: #5ab1d6;
			--blue-100: #83c4e0;
			--blue-200: #acd8ea;
			--blue-rgb: 50,157,203;
			--blue-0: 50,157,203; /* #329dcb; */
			--blue-50: 90,177,214; /* #5ab1d6; */
			--blue-100: 131,196,224; /* #83c4e0; */
			--blue-200: 172,216,234; /* #acd8ea; */
			--blue-contrast: var(--dark-0);

			--purple-0: #ba76ef;
			--purple-50: #c58df2;
			--purple-100: #d1a4f4;
			--purple-200: #dcbbf7;
			--purple-rgb: 186,118,239;
			--purple-0: 186,118,239; /* #ba76ef; */
			--purple-50: 197,141,242; /* #c58df2; */
			--purple-100: 209,164,244; /* #d1a4f4; */
			--purple-200: 220,187,247; /* #dcbbf7; */
			--purple-contrast: var(--dark-0);


			--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);

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

			body:has(#theme-switcher:checked){
			--action-50: #ec5f64;
			--action-100: #ea484e;
			--action-200: #e73238;
			--action-50: 236,95,100; /* #ec5f64; */
			--action-100: 234,72,78; /* #ea484e; */
			--action-200: 231,50,56; /* #e73238; */

			--secondary-50: #287da2;
			--secondary-100: #1e5e79;
			--secondary-200: #143e50;
			--secondary-50: 40,125,162; /* #287da2; */
			--secondary-100: 30,94,121; /* #1e5e79; */
			--secondary-200: 20,62,80; /* #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);
			@@ -145,33 +151,39 @@
			--errorBack: var(--errorDark);
			--errorText: var(--errorLight);

			--red-50: #ec5f64;
			--red-100: #ea484e;
			--red-200: #e73238;
			--red-50: 236,95,100; /* #ec5f64; */
			--red-100: 234,72,78; /* #ea484e; */
			--red-200: 231,50,56; /* #e73238; */
			--red-contrast: var(--light-0);

			--orange-50: #ec8e5f;
			--orange-100: #ea7e48;
			--orange-200: #e76e32;
			--orange-50: 236,142,95; /* #ec8e5f; */
			--orange-100: 234,126,72; /* #ea7e48; */
			--orange-200: 231,110,50; /* #e76e32; */
			--orange-contrast: var(--light-0);

			--yellow-50: #cca61d;
			--yellow-100: #9f8217;
			--yellow-200: #735d10;
			--yellow-50: 204,166,29; /* #cca61d; */
			--yellow-100: 159,130,23; /* #9f8217; */
			--yellow-200: 115,93,16; /* #735d10; */
			--yellow-contrast: var(--light-0);

			--green-50: #28a268;
			--green-100: #1e794e;
			--green-200: #145033;
			--green-50: 40,162,104; /* #28a268; */
			--green-100: 30,121,78; /* #1e794e; */
			--green-200: 20,80,51; /* #145033; */
			--green-contrast: var(--light-0);

			--blue-50: #287da2;
			--blue-100: #1e5e79;
			--blue-200: #143e50;
			--blue-50: 40,125,162; /* #287da2; */
			--blue-100: 30,94,121; /* #1e5e79; */
			--blue-200: 20,62,80; /* #143e50; */
			--blue-contrast: var(--dark-0);

			--purple-50: #a348ea;
			--purple-100: #8c1be4;
			--purple-200: #7015b7;
			--purple-50: 163,72,234; /* #a348ea; */
			--purple-100: 140,27,228; /* #8c1be4; */
			--purple-200: 112,21,183; /* #7015b7; */
			--purple-contrast: var(--light-0);
			}

			body {
			overflow-x: hidden;
			overflow-x: clip;
			}
			/* FONTS START /
			/** Download your Fonts from: https://gwfh.mranftl.com/
			@@ -269,42 +281,64 @@
			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 */
			body.art.art, .art {
			--action-0: var(--blue-0);
			--action-50: var(--blue-50)!important;
			--action-100: var(--blue-100)!important;
			--action-200: var(--blue-200)!important;
			--action-contrast: var(--blue-contrast)!important;
			}
			body.design.design, .design {
			--action-0: var(--red-0);
			--action-50: var(--red-50)!important;
			--action-100: var(--red-100)!important;
			--action-200: var(--red-200)!important;
			--action-contrast: var(--red-contrast)!important;
			}
			body.development.development, .development {
			--action-0: var(--orange-0);
			--action-50: var(--orange-50)!important;
			--action-100: var(--orange-100)!important;
			--action-200: var(--orange-200)!important;
			--action-contrast: var(--orange-contrast)!important;
			}
			body.strategy.strategy, .strategy {
			--action-0: var(--green-0);
			--action-50: var(--green-50)!important;
			--action-100: var(--green-100)!important;
			--action-200: var(--green-200)!important;
			--action-contrast: var(--green-contrast)!important;
			}
			body.writing.writing, .writing {
			--action-0: var(--purple-0);
			--action-50: var(--purple-50)!important;
			--action-100: var(--purple-100)!important;
			--action-200: var(--purple-200)!important;
			--action-contrast: var(--purple-contrast)!important;
			}
			body.project.project, .project {
			--action-0: var(--yellow-0);
			--action-50: var(--yellow-50)!important;
			--action-100: var(--yellow-100)!important;
			--action-200: var(--yellow-200)!important;
			--action-contrast: var(--yellow-contrast)!important;
			}

			.design a, a.design{
			color: var(--red-0);
			a {
			color: rgb(var(--action-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);
			}
			a:visited {
			color: rgb(var(--action-100));
			}
			a.current.current,
			a:hover,
			a:focus,
			a:visited:hover,
			a:visited:focus {
			background-color: rgb(var(--action-0));
			color: rgb(var(--action-200));
			}


			li {
			list-style: inside;
			@@ -317,40 +351,27 @@
			}

			.condensed.condensed a {
			color: var(--contrast);
			color: rgb(var(--contrast));
			border-radius: 0;
			border-bottom: 2px solid var(--action-0);
			border-bottom: 2px solid rgb(var(--action-0));
			padding: .25rem 1rem;
			}
			.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);
			}
			.condensed.condensed a:hover,
			.condensed.condensed a:focus {
			color: var(--action-contrast);
			}

			.intro + nav {
			grid-column: full;
			margin: 0!important;
			}
			.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%;
			}
			/* .intro + nav ul {*/
			/* width: 100%;*/
			/* }*/
			/* .intro + nav li,*/
			/* .intro + nav a {*/
			/* min-height: var(--chip_);*/
			/* }*/


			:is(h1, h2, h3, h4, h5, h6) {
			@@ -360,15 +381,15 @@
			margin: 0 auto .25em 1.5rem;
			}
			.pre-footer {
			background: var(--base);
			background: rgb(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);
			background-color: rgb(var(--action-0));
			color: rgb(var(--action-contrast));
			}

			footer {
			@@ -389,8 +410,8 @@
			margin-bottom: 1rem;
			}

			header {
			justify-content: center;
			.wp-site-blocks.wp-site-blocks > header {
			--justify: center;
			gap: 1rem;
			}
			header .icon-logo {
			@@ -439,25 +460,31 @@
			font-size: var(--txt-x-large);
			}
			}
			@media (max-width: 768px) {
			footer, .pre-footer {
			padding-right: var(--btn_);
			footer {
			z-index: var(--z-9);
			padding: 1rem 2rem!important;
			}
			@media (min-width:768px) {
			.w-50 {
			max-width: calc(50% - 3rem)!important;
			margin: 0 1rem!important;
			}
			}

			main > section:nth-of-type(even) {
			background-color: var(--base-100);
			main > * {
			margin-left: var(--btn)!important;
			}
			main > section {
			max-width: 100vw;
			padding: 3rem 0;
			padding: 3rem var(--btn) 3rem 1.5rem;
			margin-left: 0!important;
			}
			main > section:nth-of-type(even) {
			background-color: rgb(var(--base-100));
			}
			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);
			margin-left: 1.5rem!important;
			}

			main > section.callout:last-of-type {
			@@ -472,553 +499,70 @@
			transition: var(--trans-size);
			}

			.cover.alt {
			overflow: visible;
			height: 45vh;
			min-height: 45vh;
			padding:0;
			.cover {
			padding: 0;
			color: rgb(var(--action-0));
			background-color: rgb(var(--action-200));
			}
			.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.alt {
			min-height: 0;
			}

			.cover.art .has-img:first-child {
			grid-row: 2 / span 2;
			.cover > .content {
			background-color: rgba(var(--base), var(--op-6));
			width: 100%;
			margin: 0 !important;
			color: rgb(var(--contrast));
			padding: 2rem var(--btn) 2rem 2rem;
			}
			.cover h1 {
			margin: 0;
			}
			.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 > img {
			margin-left: 0!important;
			}
			.cover.alt > svg {
			max-width: none;
			margin: 0 auto!important;
			}
			.cover.alt + header#top {
			margin: 0!important;
			grid-column: full;
			padding-right: var(--btn_);
			}
			.cover.alt + header h1 {
			line-height: .75;
			margin: 0 0 0 .5rem;
			}
			.cover.alt + #top h1 small {
			line-height: 1;
			}

			@media (min-width: 768px) {
			.cover.alt > svg {
			max-width: 40vw;
			margin: 0!important;
			}

			.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.alt + #top {
			flex-direction: column;
			position: absolute;
			right: 0;
			top: 35vw;
			max-width: 60vw;
			grid-column: narrow;
			z-index: 10;
			color: rgb(var(--action-contrast));
			padding: 0 var(--btn_) 0 0!important;
			}

			.cover.writing div:nth-of-type(3),
			.cover.writing div:nth-of-type(5) {
			width: var(--first);
			z-index: 3;
			margin: 0 -4vw;
			.cover.alt + #top a {
			background-color: rgba(var(--action-0),var(--op-5));
			color: rgb(var(--action-contrast));
			}
			.cover.alt + #top a:hover,
			.cover.alt + #top a:focus {
			background-color: rgb(var(--action-contrast));
			color: rgb(var(--action-0));
			}
			}
			.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: '';
			@@ -1031,75 +575,13 @@
			}
			.halftone::after {
			z-index: 1;
			background: var(--base-50);
			background: rgb(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;
			@@ -1110,21 +592,6 @@
			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;
			@@ -1140,7 +607,7 @@
			}
			.loading[open] i.icon {
			--w: var(--txt-enormous);
			background-color: var(--action-0);
			background-color: rgb(var(--action-0));
			animation: spin .36s var(--trans-fn) infinite;
			}

			@@ -1205,7 +672,14 @@

			.needs-wants.needs-wants {
			max-width: var(--wide);
			margin: 0!important;
			}
			details.info {
			max-width: var(--wider);
			}
			.needs-wants .info{
			max-width: var(--content);
			}
			.needs-wants li {
			list-style: none;
			padding:0;
			@@ -1216,13 +690,156 @@
			.needs-wants h3 {
			margin: 4rem 0 2rem;
			}
			.needs-wants img {
			max-width: 45%;
			margin-right: 4%;
			position:sticky;
			top: var(--btnbtn);
			@media (min-width: 768px) {

			.needs-wants img {
			max-width: 45%;
			margin-right: 4%;
			position:sticky;
			top: var(--btnbtn);
			}
			.needs-wants img + .info {
			max-width: 50%;
			display: inline-block;
			}
			}
			.needs-wants img + .info {
			max-width: 50%;
			display: inline-block;

			.term-list .title {
			text-transform: none;
			padding: 0;
			}

			#summary .summary {
			display: grid;
			grid-template-columns: repeat(1, 1fr);
			max-width: var(--wide);
			}
			#summary .summary .term-list {
			height: var(--chipchip);
			}
			#summary .summary > li {
			list-style: none;
			height: var(--chipchip)
			}
			#summary .summary .icon {
			--w: 1.5em;
			margin-right: 1rem;
			}

			#summary .summary > li span:first-of-type {
			margin-right: 1.5rem;
			}

			.project-list.item-grid.list-view img {
			width: 100%;
			}
			.project-list h3 {
			font-size: var(--txt-large);
			margin: 0;
			}

			@media (min-width: 768px) {
			#summary .summary {
			grid-template-columns: repeat(2, 1fr);
			}
			}

			body:has(.on-this-page) .qtoggle {
			bottom: calc(var(--btn_) + var(--btn_));
			}


			.index.open.open {
			max-height: var(--maxHeight);
			height: max-content;
			}

			.development .item-grid .item .images {
			aspect-ratio: 16/9;
			}

			.main-actions.main-actions .buttons.buttons {
			bottom: unset;
			top: var(--btn_);
			right: 0!important;
			}

			aside.main.right {
			padding-bottom: 0;
			padding-top: var(--btn);
			}
			aside.main.right.expanded {
			right: var(--btn);
			}
			.main-actions button.expanded {
			border-top-left-radius: var(--radius-outer);
			border-bottom-left-radius: var(--radius);
			right: var(--btn);
			}


			/****************************************************************
			CONTENT LIST
			****************************************************************/
			ul.content-term-list {
			margin-left:0!important;
			margin-right: 0!important;
			grid-column: full;
			max-width: var(--full);
			}
			ul.content-term-list > li {
			padding: var(--sp3) var(--btn_) var(--sp3) 0;
			list-style: none;
			}
			ul.content-term-list > li:nth-of-type(even) {
			background-color: rgb(var(--base-100));
			}
			ul.content-term-list img {
			width: 40vw;
			max-inline-size: none;
			}

			.content-term-list .cover {
			padding-bottom: 0;
			min-height: 40vh;
			}
			.content-term-list .cover::before {
			display: none;
			}
			.content-term-list .cover .content {
			background-color: rgba(var(--base), var(--op-6));
			width: 100%;
			border-radius: 1rem 1rem 0 0;
			padding: 1rem;
			}
			.content-term-list .cover h2 {
			margin: 0;
			}


			.feed-block .item-grid {
			padding-right: var(--btnbtn);
			}


			div.poster {
			height: 20vh;
			grid-column: full;
			max-width: 100vw;
			margin: 0!important;
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center;
			background-attachment: fixed;
			}

			@media (min-width: 768px) {
			div.poster {
			height: 35vh;
			background-size: cover;
			}
			}

			.cover.cover {
			padding: 0;
			}