*, *::after, *::before { box-sizing: border-box; }

html {
		 -moz-text-size-adjust: none;
	  -webkit-text-size-adjust: none;
			  text-size-adjust: none;
}

blockquote, body, dd, dl, figure, h1, h2, h3, h4, p { margin: 0; }

ul[role='list'], ol[role='list'] { list-style: none; }

body {
						 width: 100%;
					min-height: 100vh;
				   line-height: 1.5;
}

button, h1, h2, h3, h4, input, label { line-height: 1.1; }

h1, h2, h3, h4 { text-wrap: pretty; }

a:not([class]) {
	  text-decoration-skip-ink: auto;
						 color: inherit;
}

button, input, select, textarea { font: inherit; }

textarea:not([rows]) { min-height: 10em; }

:target { scroll-margin-block: 5ex; }

:root {
/* @link https://utopia.fyi/type/calculator?c=320,18,1.125,1240,22,1.25,5,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l|2xs-s|s-s&g=s,l,xl,12 */
					 --step--3: clamp(0.7038rem, 0.8200rem + -0.1500vw, 0.7900rem);
					 --step--2: clamp(0.8800rem, 0.8918rem + -0.0152vw, 0.8888rem);
					 --step--1: clamp(1.0000rem, 0.9652rem +  0.1739vw, 1.1000rem);
					  --step-0: clamp(1.1250rem, 1.0380rem +  0.4348vw, 1.3750rem);
					  --step-1: clamp(1.2656rem, 1.1080rem +  0.7880vw, 1.7188rem);
					  --step-2: clamp(1.4238rem, 1.1716rem +  1.2609vw, 2.1488rem);
					  --step-3: clamp(1.6019rem, 1.2249rem +  1.8848vw, 2.6856rem);
					  --step-4: clamp(1.8019rem, 1.2610rem +  2.7043vw, 3.3569rem);
					  --step-5: clamp(2.0275rem, 1.2732rem +  3.7717vw, 4.1963rem);

			   --space-3xs-2xs: clamp(0.3750rem, 0.2446rem + 0.6522vw, 0.7500rem);
				--space-2xs-xs: clamp(0.8125rem, 0.7038rem + 0.5435vw, 1.1250rem);
				  --space-xs-s: clamp(1.1875rem, 1.0788rem + 0.5435vw, 1.5000rem);
				   --space-s-m: clamp(1.5625rem, 1.3234rem + 1.1957vw, 2.2500rem);
				   --space-m-l: clamp(2.3750rem, 2.1576rem + 1.0870vw, 3.0000rem);
				  --space-l-xl: clamp(3.1250rem, 2.6467rem + 2.3913vw, 4.5000rem);
				--space-xl-2xl: clamp(4.6875rem, 4.2310rem + 2.2826vw, 6.0000rem);
			   --space-2xl-3xl: clamp(6.2500rem, 5.2935rem + 4.7826vw, 9.0000rem);

				 --space-2xs-s: clamp(0.8125rem, 0.5734rem + 1.1957vw, 1.5000rem);
				   --space-s-l: clamp(1.5625rem, 1.0625rem + 2.5000vw, 3.0000rem);

					--page-pad: var(--space-2xs-s);
					  --gutter: var(--space-xs-s);
				  --main-width: 61vw;
				--margin-width: calc(100vw - var(--main-width) - var(--gutter) - var(--page-pad));

					   --fSans: "Avenir Next", "Trebuchet MS", Futura, Avenir, Helvetica, Arial, Tahoma, Verdana, sans-serif;
					  --fnSans: "Avenir Next", "Trebuchet MS", Futura, Avenir, Helvetica, Arial, Tahoma, Verdana, sans-serif;

						 --fSC: "Cormorant SC", "Cormorant Unicase", "Cormorant Infant", "Bodoni 72 Smallcaps", Cochin, Palatino, serif, "Everson Mono";
						--fnSC: "Cormorant SC", "Cormorant Unicase", "Cormorant Infant", "Bodoni 72 Smallcaps", Cochin, Palatino, serif, "Everson Mono";

					  --fSerif: "Cormorant Infant", Cormorant, Garamond, "EB Garamond", "Big Caslon", Georgia, Baskerville, Times, "Times New Roman", serif;
					 --fnSerif: "Cormorant Garamond", Cormorant, Garamond, "EB Garamond", "Big Caslon", Georgia, Baskerville, Times, "Times New Roman", serif;

						--fUni: "Cormorant Unicase", "Cormorant Infant", Palatino, Charter, serif;
					   --fnUni: "Cormorant Unicase", "Cormorant Infant", Palatino, Charter, serif;

/* For reference, these match the official ErikMH sweater-vest memoji */
				   --twilightL: 30.61%;	   --twilightC: 0.035;	   --twilightH: 257.11; /*	*/
					   --blueL: 71.92%;		   --blueC: 0.040;		   --blueH: 255.65; /* https://oklch.com/#71.92,0.04,255.65,100 */
						--redL: 42.91%;			--redC: 0.123;			--redH: 025.03;
					  --creamL: 98.14%;		  --creamC: 0.005;		  --creamH: 258.32;
					  --greenL: 42.91%;		  --greenC: 0.123;		  --greenH: 148.23;

			   --cLogoTwilight: oklch(var(--twilightL)	var(--twilightC)	var(--twilightH));
				   --cLogoBlue: oklch(var(--blueL)		var(--blueC)		var(--blueH));
					--cLogoRed: oklch(var(--redL)		var(--redC)			var(--redH));
				  --cLogoGreen: oklch(var(--greenL)		var(--greenC)		var(--greenH));

				 --cBackground: oklch(calc(1.00 * var(--creamL))	calc(1.00 * var(--creamC))		var(--creamH));
				--cBackground2: oklch(calc(0.97 * var(--creamL))	calc(1.00 * var(--creamC))		var(--creamH));
					--cPrimary: oklch(calc(1.00 * var(--twilightL)) calc(1.00 * var(--twilightC))	var(--twilightH));
				--cPrimaryPale: oklch(calc(1.00 * var(--twilightL)) calc(1.00 * var(--twilightC))	var(--twilightH) / 0.4);
				  --cSecondary: oklch(calc(1.00 * var(--greenL))	calc(1.00 * var(--greenC))		var(--greenH));
			  --cSecondaryDark: oklch(calc(0.80 * var(--greenL))	calc(1.50 * var(--greenC))		var(--greenH));
				   --cTertiary: oklch(calc(1.00 * var(--redL))		calc(1.00 * var(--redC))		var(--redH));
				 --cQuaternary: oklch(calc(1.00 * var(--blueL))		calc(1.00 * var(--blueC))		var(--blueH));
			--cQuaternaryLight: oklch(calc(1.50 * var(--blueL))		calc(0.67 * var(--blueC))		var(--blueH));
}

@media (prefers-color-scheme: dark) {
:root {
				   --cLogoBlue: oklch(var(--twilightL)	var(--twilightC)	var(--twilightH));
			   --cLogoTwilight: oklch(var(--blueL)		var(--blueC)		var(--blueH));
				 --cBackground: oklch(calc(0.15 * var(--creamL))	calc(1.00 * var(--creamC))		var(--creamH));
				--cBackground2: oklch(calc(0.22 * var(--creamL))	calc(0.67 * var(--creamC))		var(--creamH));
					--cPrimary: oklch(calc(1.50 * var(--twilightL)) calc(0.75 * var(--twilightC))	var(--twilightH));
				--cPrimaryPale: oklch(calc(0.67 * var(--twilightL)) calc(0.67 * var(--twilightC))	var(--twilightH));
				  --cSecondary: oklch(calc(0.95 * var(--greenL))	calc(1.00 * var(--greenC))		var(--greenH));
			  --cSecondaryDark: oklch(calc(1.00 * var(--greenL))	calc(0.80 * var(--greenC))		var(--greenH));
				   --cTertiary: oklch(calc(1.10 * var(--redL))		calc(1.33 * var(--redC))		var(--redH));
				 --cQuaternary: oklch(calc(1.50 * var(--blueL))		calc(1.00 * var(--blueC))		var(--blueH));
			--cQuaternaryLight: oklch(calc(1.67 * var(--blueL))		calc(0.50 * var(--blueC))		var(--blueH));
	}
	img { filter: brightness(85%); }
}

body {
				   font-family: var(--fSerif);
		  font-variant-numeric: oldstyle-nums proportional-nums;
			  background-color: var(--cBackground);
						 color: var(--cLogoTwilight);
}

body *.numbers { font-family: var(--fnSerif); }

.caps {
				   font-family: var(--fSC);
				text-transform: lowercase;
}

.cPrimary { color: var(--cPrimary); }

.cQuaternary { color: var(--cQuaternary); }

.cSecondary { color: var(--cSecondary); }

.cTertiary { color: var(--cTertiary); }

.images {
				   display: flex;
			   align-items: center;
}

img, picture {
					display: block;
				  max-width: 100%;
					 height: auto;
					 margin: 0 auto;
}

img.inline {
					   display: inline;
						height: 1.67ex;
}

nav picture {
	display: inline;
}

/* .margin-end makes room for the sticky footer if the right margin column extends below
	the main text flow of the left column.
*/

.margin-end {
	anchor-name: --margin-end;
}

.margin-end::after {
	content: "";
	position: absolute;
	top: calc(anchor(--margin-item bottom) + var(--space-s-m));
	left: calc(anchor(--main right) + var(--gutter));
	height: 2.5rem;
	width: 1px;
}

ul.MarkupPagerNav {
				   anchor-name: --pagenav;
					   display: flex;
					  position: fixed;
						bottom: 0;
						 right: var(--space-s-m);
				   line-height: 1;
					 min-width: 100vw;
						margin: var(--space-s-m) 0 var(--space-m-l) 0;
					   padding: 0;
				   font-family: var(--fSans);
			   justify-content: right;
}

ul.MarkupPagerNav li {
					   display: block;
			 margin-inline-end: 0.333em;
					   padding: 0;
					 font-size: var(--step--2);
				   font-weight: 600;
					text-align: center;
					background: var(--cPrimary);
						 color: var(--cBackground);
}

ul.MarkupPagerNav li a {
					   display: block;
					   padding: var(--space-3xs-2xs) var(--space-2xs-xs);
}

ul.MarkupPagerNav li:first-child a { text-align: left; }

ul.MarkupPagerNav li:last-child a { text-align: right; }

ul.MarkupPagerNav li.MarkupPagerNavOn,
ul.MarkupPagerNav li.MarkupPagerNavOn a,
ul.MarkupPagerNav li:hover,
ul.MarkupPagerNav li a:hover {
					background: var(--cSecondary);
			   text-decoration: none;
						 color: var(--cBackground);
}

ul.MarkupPagerNav li.MarkupPagerNavSeparator {
					   padding: var(--space-3xs-2xs) var(--space-3xs-2xs);
					 font-size: var(--step--2);
					background: var(--cPrimaryPale);
						 color: var(--cPrimary);
}

.micro {
					   display: block;
					margin-top: 0;
				   padding-top: 0;
					 font-size: var(--step--3);
				   font-weight: 400;
}

*.numbers {
					 font-size: 96%;
		  font-variant-numeric: oldstyle-nums proportional-nums;
}

.sc {
				   font-family: var(--fSC);
				text-transform: lowercase;
}

.lit {
				   font-weight: 600;
}

.thumb { display: inline-block; }

a {
	  text-decoration-skip-ink: auto;
		 text-decoration-color: var(--cSecondaryDark);
	 text-decoration-thickness: 0.5px;
		 text-underline-offset: 1.5px;
						 color: currentColor;
}

a.more {
				   font-family: var(--fSans);
					 font-size: var(--step--1);
				   font-weight: 600;
						 color: var(--cSecondary);
			   text-decoration: none;
}

a:hover, a:active { color: var(--cTertiary); }

abbr {
			   text-decoration: none;
						cursor: help;
}

span.note {/*
if viewport is wide & browser supports anchor positioning */
				   anchor-name: --sidenote;
					   display: block;
					  position: absolute;
						   top: max(anchor(top) , calc(anchor(--sidenote bottom) + var(--space-s-m)));
						  left: calc(anchor(--main right) + var(--space-xs-s));
						bottom: auto;
						 width: auto;
					 max-width: 37vw;
			padding-inline-end: var(--space-s-m);
					 font-size: var(--step--1);
}

figure {
	anchor-name:		--margin-item;
	display:			block;
	position:			absolute;
	top:				max(
							calc(anchor(top) - var(--space-s-m)),
							calc(anchor(--margin-item bottom, 0px) + var(--space-s-m))
						);
	left:				calc(anchor(--main right) + var(--gutter));
	max-width:			var(--margin-width);
	width:				auto;
	margin-block:		var(--space-s-m);
	margin-inline-end:	auto;
	padding:			0 var(--page-pad) 0 0;
	font-size:			var(--step--1);
	columns:			var(--img-count, 1) var(--margin-width);
	gap:				var(--space-xs-s);
}

figure.fig-s {
	columns:			var(--img-count, 1) 10rem;
}

figure.fig-m {
	position:			relative;
	anchor-name:		unset;
	top:				auto;
	left:				auto;
	width:				var(--main-width);
	max-width:			var(--main-width);
	margin-block:		var(--space-s-m);
	columns:			var(--img-count, 1) 15rem;
}

figure.fig-l {
	position:			relative;
	anchor-name:		unset;
	top:				auto;
	left:				auto;
	max-width:			none;
	margin-block:		var(--space-m-l);
	width:				calc(var(--main-width) + var(--gutter) + var(--margin-width) - var(--page-pad));
	margin-left:		0;
	padding-left:		0;
	padding-right:		0;
	box-sizing:			border-box;
	columns:			var(--img-count, 1) 15rem;
	gap:				var(--space-xs-s);
}

figure a {
	display:			contents;
}

figure img {
	width:				100%;
	height:				auto;
	min-width:			0;
	margin-bottom:		var(--space-xs-s);
	break-inside:		avoid;
}

figure img:last-of-type {
	margin-bottom:		0;
}

figure.fig-s img {
	max-width:			calc(var(--margin-width) / 2 - var(--space-xs-s));
}

/* === NARROW VIEWPORT === */
@media (max-width: 67rem) {
	figure {
		position:		relative;
		display:		block;
		width:			100%;
		max-width:		40rem;
		margin-block:	var(--space-s-m);
		margin-left:	auto;
		margin-right:	auto;
		padding:		0 var(--page-pad);
		columns:		var(--img-count, 1) 15rem;
	}

	figure.fig-s {
		max-width:		30rem;
		columns:		var(--img-count, 1) 8rem;
	}

	figure.fig-s img {
		min-width:		8rem;
	}

	figure.fig-m,
	figure.fig-l {
		max-width:		100%;
		margin-left:	auto;
		margin-right:	auto;
		padding-left:	var(--page-pad);
		padding-right:	var(--page-pad);
	}
}

main {
		anchor-name:	--main;
		  max-width:	var(--main-width);
			padding:	0 var(--page-pad) var(--space-m-l) var(--page-pad);
}

footer {
					  position: fixed;
						bottom: 0;
						 clear: both;
}

@media (max-width: 67rem) {/*
2023-11-30: if viewport is narrower */

	main { max-width: 100vw; }

	ul.MarkupPagerNav {
						bottom: 1rem;
						 right: 0;
	}

	span.note {
					   display: block;
					  position: relative;
					 max-width: fit-content;
			margin-block-start: var(--space-xs-s);
			  margin-block-end: var(--space-xs-s);
		   margin-inline-start: 0;
					   padding: 2px var(--space-2xs-xs);
					 font-size: var(--step--1);
			  background-color: var(--cBackground2);
	}
}

@supports not (anchor-name: --foo) {/*
2023-11-30: Anchor positioning today is supported only in Chrome Canary with a
			manual switch thrown; here’s the fallback for the remaining 99.99%: */
	span.note {
					   display: block;
					  position: relative;
					 max-width: fit-content;
			margin-block-start: var(--space-xs-s);
			  margin-block-end: var(--space-xs-s);
		   margin-inline-start: 0;
					   padding: 2px var(--space-2xs-xs);
					 font-size: var(--step--1);
			  background-color: var(--cBackground2);
	}

	figure {
					   display: grid;
					  position: relative;
					 max-width: 100%;
						 width: 100%;
			margin-block-start: var(--space-s-m);
			  margin-block-end: var(--space-s-m);
			 margin-inline-end: auto;
					   padding: 0 var(--space-xs-s) 0 0;
					 font-size: var(--step--1);
	}
}

@media (max-width: 400px) {
	ul.MarkupPagerNav {
						bottom: 2.75rem;
						 right: 0;
	}
	header nav {
						   padding: 0;
							margin: 0;
	}
}

aside.meta {
			margin-block-start: var(--space-3xs-2xs);
			  margin-block-end: 0;
		   margin-inline-start: var(--space-l-xl);
				   font-family: var(--fSans);
					 font-size: var(--step--3);
				   font-weight: 400;
						 color: var(--cPrimary);
}

aside.meta span.numbers { font-family: var(--fnSans); }

aside nav {
						margin: 0;
					   padding: 0 var(--space-xs-s) 0 0;
					 font-size: inherit;
						 color: inherit;
}

b { font-weight: 700; }

blockquote {
					 max-width: 92%;
						margin: 0 auto 0 var(--space-xs-s);
		   border-inline-start: 0.25em solid var(--cPrimaryPale);
}

blockquote p {
					   padding: var(--space-s-m) var(--space-m-l) 0 var(--space-xs-s);
					 font-size: var(--step-0);
}

blockquote p:first-child { padding-top: 0; }

blockquote ul, blockquote ol {
					 max-width: 85%;
						margin: 0 auto 0 var(--space-l-xl);
					   padding: 0 var(--space-m-l) 0 var(--space-s-m);
					 font-size: var(--step-0);
}

code {
					 font-size: var(--step--1);
				   font-weight: 500;
}

dd { padding: 0 0 0 var(--space-s-m); }

dl {
					   padding: var(--space-m-l);
					 font-size: var(--step-0);
}

dt { font-weight: 700; }

em, i {
				   font-family: var(--fSerif);
					font-style: oblique 10deg;
}

em.numbers, i.numbers { font-family: var(--fnSerif); }

figcaption {
	column-span:		all;
	text-align:			center;
	font-size:			var(--step--1);
	font-style:			oblique 10deg;
	padding-block-start: var(--space-2xs-xs);
}

figure em, figure i { font-style: normal; }

h1, h2, h3, h4 { font-family: var(--fUni); }

h2 {
					   padding: var(--space-s-l) var(--space-s-m) 0 var(--space-s-m);
					 font-size: var(--step-2);
						 color: var(--cTertiary);
}

h2 > a {
			   text-decoration: none;
						 color: var(--cSecondry);
}

h3 {
					   padding: var(--space-s-m) var(--space-s-m) 0 var(--space-l-xl);
					 font-size: var(--step-1);
						 color: var(--cTertiary);
}

h3 > a {
			   text-decoration: none;
						 color: var(--cTertiary);
}

h4 {
					 max-width: 55rem;
			  margin-block-end: -1ex;
		   margin-inline-start: var(--space-l-xl);
			 margin-inline-end: auto;
					   padding: var(--space-xs-s) var(--space-s-m) var(--space-s-m) var(--space-s-m);
					 font-size: var(--step-0);
						 color: var(--cQuaternary);
}

h1 span.numbers, h2 span.numbers, h3 span.numbers, h4 span.numbers { font-family: var(--fnUni); }

h4::before {
			padding-inline-end: 0.67em;
					   content: "❧";
}

h4 > a {
			   text-decoration: none;
						 color: var(--cQuaternary);
}

header { display: contents; }

header nav {
					   padding: 0 var(--space-xs-s) 0 var(--space-s-m);
						 color: var(--cPrimary);
}

hgroup p {
				  margin-block: 0;
		   padding-block-start: 0;
		  padding-inline-start: var(--space-s-l);
						 color: var(--cTertiary);
}

header hgroup {
					  position: absolute;
					   z-index: -101;
						   top: 0;
						 width: 100%;
						height: 160px;
					max-height: 160px;
					  overflow: hidden;
					   padding: var(--space-xs-s) 0 0 5rem;
				   font-family: var(--fUni);
					 font-size: var(--step-3);
				   font-weight: 400;
						 color: var(--cTertiary);
}

header hgroup p {
				  margin-block: 0;
		   padding-block-start: 0;
		  padding-inline-start: var(--space-s-l);
					  overflow: hidden;
				 text-overflow: ellipsis;
				   white-space: nowrap;
						 color: var(--cPrimary);
}

hgroup span.numbers { font-family: var(--fnUni); }

hgroup h1 {
		  padding-inline-start: var(--space-l-xl);
					  overflow: hidden;
				 text-overflow: ellipsis;
				   white-space: nowrap;
					 font-size: var(--step-3);
				   font-weight: 400;
}

hr {
					 max-width: 67%;
			margin-block-start: var(--space-s-m);
				  border-width: 0.5px;
				  border-color: var(--cLogoBlue);
}

hr.logo {
					   display: block;
					   z-index: 301;
					 max-width: 99dvw;
						height: 4px;
						margin: -4px 0 0 0;
						border: 0;
			  background-color: var(--cLogoBlue);
}

picture.logo, img.logo {
					   z-index: 201;
						height: var(--space-2xl-3xl);
					max-height: 160px;
						 width: var(--space-2xl-3xl);
					 max-width: var(--space-2xl-3xl);
						margin: 0;
						  fill: none;
}

img.memoji {
					   z-index: 101;
					  position: absolute;
						   top: -4px;
						 right: 1rem;
						 width: var(--space-2xl-3xl);
					 max-width: var(--space-2xl-3xl);
						height: var(--space-2xl-3xl);
					max-height: 160px;
						margin: 0;
						filter: drop-shadow(2px 2px 5px var(--cPrimaryPale));
}

main > p:first-of-type { padding-block-start: var(--space-2xs-xs); }

nav {
					   display: block;
		   margin-inline-start: var(--space-l-xl);
			 margin-inline-end: auto;
				   font-family: var(--fSans);
					 font-size: var(--step-0);
				   font-weight: 400;
}

nav span.numbers { font-family: var(--fnSans); }

nav a {
					   padding: 0 1em;
			   text-decoration: none;
}

nav a:hover { text-decoration: underline; }

nav a:first-child { padding: 0 1em 0 0; }

img.rss {
					display: inline-block;
					 border: 0;
					 margin: 0;
					padding: 0;
					 height: 1em;
					  width: 1em;
			 vertical-align: sub;
}

p {
					 max-width: 100%;
			margin-block-start: var(--space-s-m);
			  margin-block-end: var(--space-s-m);	
		   margin-inline-start: var(--space-l-xl);
			 margin-inline-end: auto;
					   padding: 0 var(--space-xs-s);
					 font-size: var(--step-1);
}

footer p {
						margin: 0 var(--space-xs-s);
					   padding: 0;
					 font-size: var(--step--2);
					font-style: oblique 10deg;
}

p.right {
						margin: 0;
					   padding: 0;
					text-align: right;
}

section#subfoot {
					   display: flex;
						 width: 98vw;
						height: fit-content;
						margin: 0;
					   padding: 1ex 1ex 1ex 0;
			   justify-content: space-between;
				   align-items: center;
			  background-color: var(--cBackground2);
}

#subfoot p {
				   font-family: var(--fSans);
					 font-size: var(--step--2);
					font-style: normal;
						 color: var(--cQuaternary);
}

p.subfooter span.numbers { font-family: var(--fnSans); }

ul, ol {
					 max-width: 100%;
		   margin-inline-start: var(--space-m-l);
			 margin-inline-end: auto;
					   padding: 0 var(--space-xs-s) 0 var(--space-m-l);
					 font-size: var(--step-0);
}

ul { list-style: circle; }

ol li, ul li {
		 padding-block-end: var(--space-xxs-xs);
				 font-size: var(--step-0);
}

ol ul, ul ul, ol ol, ul ol {
					 max-width: 100%;
		   margin-inline-start: var(--space-xxs-xs);
			 margin-inline-end: auto;
					   padding: 0 var(--space-xs-s) 0 var(--space-m-l);
					 font-size: var(--step-0);
}

ul { list-style: circle; }

ol li, ul li {
		 padding-block-end: 0;
				 font-size: var(--step-0);
}

table {
	width: 100%;
}

table.meta {
	width: fit-content;
	margin-left: var(--space-l-xl);
}

table.meta th {
	text-align: right;
	font-weight: 400;
	max-width: fit-content;
}

table.meta th::after {
	content: ": ";
}

table.meta td {
	text-align: left;
	font-weight: 600;
	max-width: none;
}

.small	{
	font-size: 67%;
}

/* FormBuilder CSS overrides */

.FormBuilder.InputfieldForm input:not([type=radio]):not([type=checkbox]):not([type=file]):not([type=range]), .FormBuilder.InputfieldForm select:not([multiple]) {
background: var(--cPrimaryPale);
border-color: var(--cPrimary);
color: var(--cLogoTwilight);
}

.FormBuilder.InputfieldForm input:not([type=radio]):not([type=checkbox]):not([type=file]):not([type=range]):focus, .FormBuilder.InputfieldForm select:not([multiple]):focus {
background: var(--cBackground); 
color: var(--cLogoTwilight);
}

.FormBuilder.InputfieldForm input:not([type=radio]):not([type=checkbox]):not([type=file]):not([type=range])::placeholder, .FormBuilder.InputfieldForm select:not([multiple])::placeholder {
color: var(--cLogoBlue);
}

.FormBuilder.InputfieldForm select[multiple], .FormBuilder.InputfieldForm textarea {
background: var(--cPrimaryPale);
border-color: var(--cPrimary);
color: var(--cLogoTwilight);
}

.FormBuilder.InputfieldForm select[multiple], .FormBuilder.InputfieldForm textarea:focus {
background: var(--cBackground); 
color: var(--cLogoTwilight);
}

.FormBuilder.InputfieldForm select[multiple]::placeholder, .FormBuilder.InputfieldForm textarea::placeholder {
color: var(--cLogoBlue);
}