jakevan/jvb-theme.git

			@@ -6,8 +6,8 @@
			Description: A base theme for Jake Van clients
			Requires at least: 6.4
			Tested up to: 6.4
			Requires PHP: 7.0
			Version: 1.5.92
			Requires PHP: 8.0
			Version: 1.6.0
			License: GNU General Public License v2 or later
			License URI: http://www.gnu.org/licenses/gpl-2.0.html
			Text Domain: jv
			@@ -79,51 +79,79 @@
			--mix-blend-mode: darken;
			--coverBlend: overlay;
			--coverIndex: 2;
			--light-0: #fafafa;
			--light-50: #fcfbfb;
			--light-100: #f1eded;
			--light-200: #e6dfdf;
			--light-rgb: 250,250,250;
			--dark-0: #201313;
			--dark-50: #261717;
			--dark-100: #2d1b1b;
			--dark-200: #331e1e;
			--dark-rgb: 16,4,4;
			--action-0: #B7332E;
			--action-50: #a32d29;
			--action-100: #8e2824;
			--action-200: #7a221f;
			--action-contrast: var(--light-0);
			--action-rgb: 183,51,46;
			--secondary-0: #E8A737;
			--secondary-50: #e59d20;
			--secondary-100: #d48f18;
			--secondary-200: #bd7f16;
			--secondary-contrast: var(--light-0);
			--secondary-rgb: 232,167,55;
			--light-0: 239,239,239; /* #efefef; */
			--light-50: 226,226,226; /* #e2e2e2; */
			--light-100: 213,213,213; /* #d5d5d5; */
			--light-200: 201,201,201; /* #c9c9c9; */

			--success: #22C55E;
			--successBack: #d4edda;
			--successText:#155724;
			--warning: #E8A737;
			--error: #EF4444;
			--errorBack: #f8d7da;
			--errorText: #721c24;
			--dark-0: 21,21,21; /* #151515; */
			--dark-50: 34,34,34; /* #222222; */
			--dark-100: 46,46,46; /* #2e2e2e; */
			--dark-200: 59,59,59; /* #3b3b3b; */

			--action-0: 255,0,128; /* #ff0080; */
			--action-50: 255,38,146; /* #ff2492; */
			--action-100: 255,71,164; /* #ff47a4; */
			--action-200: 255,107,181; /* #ff6bb5; */
			--action-contrast: var(--light-0);

			--action-comp: oklch(from rgb(var(--action-0)) .8 .26 h);
			--action-tri: oklch(from rgb(var(--action-0)) .82 .2 calc(h - 120));
			--action-mono: oklch(from rgb(var(--action-0)) .3 .04 h);
			--secondary-0: 214,145,33; /* #D69121; */
			--secondary-50: 255,196,33; /* #ffc421; */
			--secondary-100: 255,205,68;/* #ffcd44; */
			--secondary-200: 255,215,104;/* #ffd768; */
			--secondary-contrast: var(--light-0);
			--secondary-comp: oklch(from rgb(var(--secondary-0)) .8 .26 h);
			--secondary-tri: oklch(from rgb(var(--secondary-0)) .82 .2 calc(h - 120));
			--secondary-mono: oklch(from rgb(var(--secondary-0)) .3 .04 h);

			--success: 76,175,80; /* #4CAF50; */
			--successLight: 234,246,235; /* #eaf6eb; */
			--successDark: 14,33,15; /* #0e210f; */
			--successBack: var(--successLight);
			--successText: var(--successDark);
			--warning: 232,167,55; /* #E8A737; */
			--warningLight: 253,247,238;/* #fdf7ee; */
			--warningDark: 52,35,6; /* #342306; */
			--warningBack: var(--warningLight);
			--warningText: var(--warningDark);
			--error: 183,51,46; /* #B7332E; */
			--errorLight: 250,235,234; /* #faebea; */
			--errorDark: 40,11,10; /* #280b0a; */
			--errorBack: var(--errorLight);
			--errorText: var(--errorDark);

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

			--shimmer: rgba(var(--dark-rgb),0) 0%,
			rgba(var(--dark-rgb),.05) 50%,
			rgba(var(--dark-rgb),0) 100%;


			--contrast-comp: oklch(from rgb(var(--contrast)) .8 .26 h);
			--contrast-tri: oklch(from rgb(var(--contrast)) .82 .2 calc(h - 120));
			--contrast-mono: oklch(from rgb(var(--contrast)) .3 .04 h);
			--base-comp: oklch(from rgb(var(--base)) .8 .26 h);
			--base-tri: oklch(from rgb(var(--base)) .82 .2 calc(h - 120));
			--base-mono: oklch(from rgb(var(--base)) .3 .04 h);


			--tone-a: rgb(var(--contrast));
			--tone-b: rgb(var(--base));

			--duo-dark: oklch(from var(--tone-a) .22 c h);
			--duo-light: oklch(from var(--tone-b) .78 c h);

			--shimmer: rgba(var(--contrast),0) 0%,
			rgba(var(--contrast),.05) 50%,
			rgba(var(--contrast),0) 100%;

			--op-1: .05;
			--op-2: .15;
			@@ -166,8 +194,8 @@
			--radius: 4px;
			--p-outer: 1rem;
			--radius-outer: calc(var(--radius) + var(--p-outer));
			--p-y: 1rem;
			--p-x: 1rem;
			--p-y: var(--sp1);
			--p-x: var(--sp1);
			/*****************************
			Transitions
			*****************************/
			@@ -196,10 +224,10 @@
			Scrollbar
			*****************************/
			--sb-width: 8px;
			--sb-track: var(--base-100);
			--sb-thumb: var(--action-0);
			--sb-thumb-hover: var(--action-50);
			--sb-thumb-border: 2px solid var(--base-50);
			--sb-track: rgb(var(--base-100));
			--sb-thumb: rgb(var(--action-0));
			--sb-thumb-hover: rgb(var(--action-50));
			--sb-thumb-border: 2px solid rgb(var(--base-50));
			--sb-radius: 4px;

			--details: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="%232b1a0d" viewBox="0 0 256 256"><path d="M212.24,100.24l-80,80a6,6,0,0,1-8.48,0l-80-80a6,6,0,0,1,8.48-8.48L128,167.51l75.76-75.75a6,6,0,0,1,8.48,8.48Z"></path></svg>');
			@@ -215,34 +243,37 @@
			--coverBlend: multiply;
			--coverIndex: 0;

			--action-50: #cb3933;
			--action-100: #d14c47;
			--action-200: #d6605c;
			--action-50: 219,0,110; /* #db006e; */
			--action-100: 184,0.92; /* #b8005c; */
			--action-200: 148,0,74; /* #94004a; */

			--secondary-50: #ebb14e;
			--secondary-100: #edbb65;
			--secondary-200: #f0c57c;
			--secondary-50: 216,159,0; /* #d89f00; */
			--secondary-100: 181,133,0; /* #b58500; */
			--secondary-200: 145,106,0; /* #916a00; */

			--contrast: var(--light-0);
			--contrast-50: var(--light-50);
			--contrast-100: var(--light-100);
			--contrast-200: var(--light-200);
			--contrast-rgb: var(--light-rgb);
			--contrast: 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);
			--base: var(--dark-rgb);

			--successBack: #155724;
			--successText:#d4edda;
			--errorBack: #721c24;
			--errorText: #f8d7da;

			--shimmer: rgba(var(--c),0) 0%,
			rgba(var(--c),.05) 50%,
			rgba(var(--c),0) 100%;
			--successBack: var(--successDark);
			--successText: var(--successLight);
			--warningBack: var(--warningDark);
			--warningText: var(--warningLight);
			--errorBack: var(--errorDark);
			--errorText: var(--errorLight);

			--shimmer: rgba(var(--light-0),0) 0%,
			rgba(var(--light-0),.05) 50%,
			rgba(var(--light-0),0) 100%;
			}
			/* https://frontendmasters.com/blog/the-coyier-css-starter/ */
			@layer reset {
			@@ -344,9 +375,17 @@
			inline-size: fit-content;
			margin-inline: auto;
			}
			figure img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			}
			figcaption {
			contain: inline-size;
			font-size: 90%;
			background-color: rgba(var(--base),var(--op-3));
			text-align: center;
			font-style: italic;
			}

			input,
			@@ -421,13 +460,70 @@
			padding: 1.5rem;
			}

			hr.logo::after,
			hr {
			--margin: 12.5%; /* Half of the remaining 25% */
			--baseWidth: 75%;
			border-style: solid;
			border-width: 1px 0 0;
			border-color: rgb(var(--contrast));
			color: inherit;
			height: 0;
			height: 1px;
			overflow: visible;
			margin-block: 2.5rem;
			width: var(--baseWidth);
			}

			hr.logo {
			--width: calc((rgb(var(--baseWidth)) / 2) - var(--half));
			--half: calc(var(--btn) / 2);
			width: var(--width);
			position: relative;
			margin-left: var(--margin);
			}
			hr.logo::before {
			content: '';
			--circ: calc(var(--btn) + (var(--btn) / 2));
			--rad: calc(var(--circ) / 2);
			background-color: rgb(var(--contrast-100));
			mask-image: var(--icon);
			-webkit-mask-image: var(--icon);
			mask-size: var(--btn);
			-webkit-mask-size: contain;
			mask-repeat: no-repeat;
			-webkit-mask-repeat: no-repeat;
			mask-position: center;
			-webkit-mask-position: center;
			display: block;
			width: var(--circ);
			height: var(--circ);
			position: absolute;
			border-radius: 50%;
			right: calc(-1 * (var(--circ)));
			top: 0;
			transform: translateY(-50%);

			}
			hr.logo::after {
			content: '';
			display: block;
			width: 100%;
			position: absolute;
			z-index: 0;
			top: 0;
			transform: translateY(050%);
			background-color: rgb(var(--contrast));
			height: 1px;
			right: calc((100% + var(--btn_) + 1rem) * -1);
			margin: 0;
			}
			hr.dots {
			border-color: transparent;
			display:flex;
			}
			hr.dots::before {
			content: '.\2003.\2003.';
			margin: 0 auto;
			}

			:target {
			@@ -513,8 +609,8 @@
			BASE
			*************************************************************/
			body {
			background-color: var(--base-50);
			color: var(--contrast);
			background-color: rgb(var(--base-50));
			color: rgb(var(--contrast));
			margin: 0;
			font-family: var(--body);
			font-weight: var(--fw-b);
			@@ -553,19 +649,23 @@
			/}/

			main {
			--gapNarrow: calc((var(--content) - var(--narrow)) / 2);
			--gapContent: calc((var(--wider) - var(--content)) / 2);
			--gapWide: calc((var(--wide) - var(--wider)) / 2);

			display: grid;
			grid-template-columns:
			[full-start] minmax(1rem, 1fr)
			[wide-start] minmax(0, calc((100% - var(--content)) / 2))
			[wider-start] minmax(0, calc((var(--wide) - var(--wider)) / 2))
			[content-start] minmax(0, calc((var(--wider) - var(--content)) / 2))
			[narrow-start] min(100% - 2rem, var(--narrow)) [narrow-end]
			minmax(0, calc((var(--content) - var(--narrow)) / 2)) [content-end]
			minmax(0, calc((var(--wider) - var(--content)) / 2)) [wider-end]
			minmax(0, calc((var(--wide) - var(--wider)) / 2)) [wide-end]
			minmax(0, calc((100% - var(--content)) / 2))
			minmax(1rem, 1fr) [full-end];
			[wide-start] minmax(0, var(--gapWide))
			[wider-start] minmax(0, var(--gapContent))
			[content-start] minmax(0, var(--gapNarrow))
			[narrow-start] min(calc(100% - 2rem), var(--narrow)) [narrow-end]
			minmax(0, var(--gapNarrow)) [content-end]
			minmax(0, var(--gapContent)) [wider-end]
			minmax(0, var(--gapWide)) [wide-end]
			minmax(1rem, 1fr) [full-end];
			min-height: var(--maxHeight);
			grid-auto-rows: max-content;
			}
			main > * {
			grid-column: content;
			@@ -577,6 +677,15 @@
			main > section > * {
			width: 100%;
			max-width: var(--content);
			margin: var(--sp1) auto;
			}
			ul {
			max-width: var(--narrow);
			margin: 1rem auto 1rem 3rem;
			}
			ul ul {
			padding: .25rem 0 .25rem 1rem;
			margin: 0;
			}

			/* Nested items can use any width */
			@@ -590,10 +699,12 @@

			main .align-wider {
			grid-column: wider;
			width: 100%;
			}

			main .align-wide {
			grid-column: wide;
			width: 100%;
			}

			main .align-full {
			@@ -611,8 +722,8 @@
			position: sticky;
			top: 0;
			z-index: var(--z-8);
			background-color: var(--base);
			box-shadow: rgba(var(--base-rgb), var(--op-45)) var(--shdw-down);
			background-color: rgb(var(--base));
			box-shadow: rgba(var(--base), var(--op-45)) var(--shdw-down);
			transition: top var(--trans-base);
			}
			header a[rel="home"] {
			@@ -620,9 +731,8 @@
			align-items: center;
			max-height:var(--btn);
			overflow:hidden;
			margin: 0 auto;
			}


			.scroll-progress {
			position: absolute;
			inset-inline: 0;
			@@ -632,7 +742,7 @@
			align-items: center;
			pointer-events: none;
			z-index: var(--z-3);
			background-color: var(--base-200);
			background-color: rgb(var(--base-200));
			overflow: hidden;
			}

			@@ -641,52 +751,21 @@
			height: 1px;
			transform-origin: left center;
			transform: scaleX(0);
			background: var(--action-0);
			background: rgb(var(--action-0));
			}

			aside.pre-header,
			aside.sub-header,
			aside.pre-footer,
			aside.sub-footer {
			height: var(--chip_);
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 1rem;
			font-size: var(--txt-x-small);
			background-color:var(--base-50);
			z-index: var(--z-7);
			}
			.pre-header p {
			width: max-content;
			}
			.pre-header {
			position: sticky;
			top: -2rem;
			transition: top var(--trans-base);
			}
			.scroll-up .pre-header {
			top: 0;
			}
			.scroll-up .pre-header ~ header {
			top: calc(var(--chip_) - 2px);
			}
			/.pre-header.stuck ~ #breadcrumbs {/
			/* margin-top: var(--chip_);*/
			/}/

			footer {
			padding: 1rem;
			background-color: var(--base-200);
			color: var(--contrast-200);
			background-color: rgb(var(--base));
			color: rgb(var(--contrast-200));
			text-align: center;
			margin: 4rem 0 0;
			position: relative;
			z-index: var(--z-7);
			}
			footer p {
			margin: 0 auto;
			}
			footer p {
			margin: 0 auto;
			}

			body:has(nav.fixed.bottom,nav.on-this-page) footer {
			padding-bottom: var(--btn_);
			@@ -696,20 +775,61 @@
			padding: 1rem 2rem var(--btn_);
			}
			}

			*:target {
			scroll-snap-margin-top: var(--btnbtn);
			scroll-margin-top: var(--btnbtn);
			outline: double var(--action-200);
			background-color: var(--base);
			outline: double rgb(var(--action-200));
			background-color: rgb(var(--base));
			}

			/*************************************************************
			/***********************
			PRE/SUB HEADER
			***********************/
			aside.header,
			aside.footer {
			padding: 0 1rem;
			font-size: var(--txt-x-small);
			z-index: var(--z-7);
			background-color: rgb(var(--base-50));
			}
			aside.header {
			height: var(--chip_);
			--wrap: nowrap;
			}
			aside.footer p,
			aside.header p {
			width: max-content;
			}
			aside.footer {
			--dir: column;
			background-color:rgb(var(--base-50));
			padding: 1rem;
			border-top: 1px solid rgb(var(--base-200));
			}
			aside.footer + footer {
			margin-top: 0;
			}
			aside.header p ,aside.footer p {
			margin: 0.125rem 0;
			}
			aside.pre {
			position: sticky;
			top: -2rem;
			transition: top var(--trans-base);
			}
			.scroll-up aside.pre {
			top: 0;
			}
			.scroll-up .pre ~ header {
			top: calc(var(--chip_) - 2px);
			}
			/***********************************************************
			TYPOGRAPHY
			*************************************************************/
			***********************************************************/
			body :is(b, strong) {
			font-weight: var(--fw-b-bold);
			}

			:is(h1, h2, h3, h4, h5, h6) {
			font-family: var(--heading);
			text-transform: uppercase;
			@@ -721,6 +841,10 @@
			:is(h1,h2,h3,h4,h5,h6), p {
			width: 100%;
			}
			.group :is(h1,h2,h3,h4,h5,h6), p {
			width: max-content;
			max-width: 100%;
			}

			:is(h1, h2, h3, h4, h5, h6) :is(b, strong) {
			font-weight: var(--fw-h-bold);
			@@ -739,7 +863,7 @@

			:is(h1, h2, h3, h4, h5, h6).inline {
			font-size: 1.2rem;
			font-weight: 600;
			font-weight: var(--fw-h-bold);
			display: inline-block;
			margin: 0 2rem 0 0;
			letter-spacing: .05em;
			@@ -750,29 +874,11 @@
			margin: .5rem 0;
			}

			:is(h1, h2, h3, h4, h5, h6).inline + .term-list {
			display: inline-flex;
			margin: .5rem 0;
			}

			h1 {
			font-size: var(--txt-xxx-large);
			font-weight: var(--fw-h);
			line-height: 1;
			margin: 0 auto .25em;
			}

			h1:first-of-type {
			margin-top: 10vh;
			}

			h1 small {
			display: block;
			font-size: var(--txt-x-small);
			font-weight: var(--fw-b);
			line-height: 1;
			margin-bottom: .75em;
			font-family: var(--body);
			margin: 10vh auto .25em;
			}

			h1 small + small {
			@@ -795,6 +901,23 @@
			p {
			line-height: 1.6;
			}
			.drop-cap::first-letter {
			font-family: var(--heading);
			font-size: var(--btn);
			line-height: 1;
			background-color: rgb(var(--action-0));
			color: rgb(var(--action-contrast));
			float: left;
			font-weight: var(--fw-h-bold);
			margin: 0.1em 0.1em 0.2em 0;
			padding: 0.1em;
			}
			:not(.row >) p:has(+p) {
			margin-bottom: 0;
			}
			:not(.row >) p + p {
			margin-top: 0;
			}

			.hint {
			line-height: 1.2;
			@@ -802,52 +925,192 @@
			font-size: var(--txt-small);
			}

			/main > :is(h1, h2, h3, h4, h5, h6, p) {*/
			/* width: 100%;*/
			/}/

			main > * p {
			margin: .5rem 0;
			mark {
			background-color: rgba(var(--action-0), var(--op-45))!important;
			color: rgb(var(--action-contrast))!important;
			border-top-left-radius: .5em;
			border-bottom-right-radius: .5em;
			padding: 0 .5em;
			corner-shape: bevel;
			}

			/******************************************************
			LINKS
			******************************************************/
			a {
			color: var(--action-0);
			color: rgb(var(--action-0));
			border-radius: 4px;
			padding: .125rem;
			}
			a:visited {
			color: rgb(var(--action-100));
			}
			a:hover,
			a:visited:hover {
			color: rgb(var(--contrast-50));
			text-decoration: none;
			}

			ul a {
			display: inline-flex;
			:is(p, li, h1,h2,h3,h4,h5,h6, small) a:hover {
			color: var(--action-contrast);
			background-color: rgb(var(--action-0));
			}

			a.logo {
			display: inline-flex;
			}
			.logo img {
			max-width: 150px;
			}
			/*****************************************************
			ICONS
			*****************************************************/
			i.icon {
			width: var(--w);
			height: var(--w);
			display: inline-block;
			background-color: currentColor;
			mask-image: var(--icon);
			-webkit-mask-image: var(--icon);
			mask-size: contain;
			-webkit-mask-size: contain;
			mask-repeat: no-repeat;
			-webkit-mask-repeat: no-repeat;
			mask-position: center;
			-webkit-mask-position: center;
			vertical-align: middle;
			}

			a:visited {
			color: var(--action-50);
			/ SWITCHING ICONS /
			/** If, say, a button has two icons, one gets hidden on one state, and one gets shown on another, add it here /

			.favourite:not(.favourited) .heart-fill,
			.favourite.favourited .heart,
			.notifications:not(.has) .bell-ringing,
			.notifications.has .bell,
			.vote button:not(.voted) .upvoted,
			.vote button:not(.voted) .downvoted,
			.vote .voted .upvote,
			.vote .voted .downvote {
			display: none;
			}

			a:hover {
			color: var(--contrast-50);
			text-decoration: none;
			.favourite:not(.favourited) .heart,
			.favourite.favourited .heart-fill,
			.notifications:not(.has) .bell,
			.notifications.has .bell-ringing,
			.vote button:not(.voted) .upvote,
			.vote button:not(.voted) .downvote,
			.vote .voted .upvoted,
			.vote .voted .downvoted {
			display: block;
			}

			p a:hover,
			li a:hover,
			:is(h1, h2, h3, h4, h5, h6) a:hover {
			color: var(--action-contrast);
			background-color: var(--action-0);
			}

			/*******************************************************
			LISTS
			*******************************************************/
			ol {
			list-style-type:decimal;
			list-style-type: decimal;
			}

			ul.terms {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			}
			ul.terms li {
			list-style: none;
			}

			.term-list.cloud {
			display: flex;
			gap: .25rem;
			margin: var(--sp2) auto;
			}
			.term-list.cloud a {
			border-radius: var(--radius);
			background-color: transparent;
			color: rgb(var(--action-0));
			border: 2px solid rgb(var(--action-0));
			padding: 4px 8px;
			position: relative;
			}
			.term-list.cloud a:hover,
			.term-list.cloud a:focus {
			color: var(--action-contrast);
			background-color: rgb(var(--action-0));
			}
			.term-list a:has(.count) {
			padding-right: 1rem;
			}
			.term-list .count {
			position: absolute;
			top: .25rem;
			right: .25rem;
			/border-radius: 50%;/
			/aspect-ratio: 1;/
			font-size: var(--txt-small);
			/background-color: rgb(var(--action-0));/
			/color: var(--action-contrast);/
			}

			.term-list li {
			list-style: none;
			}
			.term-list a {
			display: inline-flex;
			width: max-content;
			}
			/******************************************************
			UTILITY
			******************************************************/
			.rounded { border-radius: var(--radius-outer); }
			.font-small { font-size: var(--txt-x-small); }
			.font-medium { font-size: var(--txt-medium); }
			.font-large { font-size: var(--txt-large); }
			.font-x-large { font-size: var(--txt-x-large); }
			/**************************************************************
			UTILITY CLASSES - SPACING
			**************************************************************/
			/ PADDING /

			.text-center {text-align: center;}
			.text-right {text-align: right;}
			.text-left {text-align: left;}
			.align-center { text-align: center; margin: 0 auto;}
			.align-left { text-align: left; margin: 0 auto 0 0;}
			.align-right { text-align: right; margin: 0 0 0 auto;}


			*[hidden] { display: none!important; }

			@media (max-width: 767px){
			.hide-small { display: none; }
			}

			.width-33,
			.width-66,
			.width-50,
			.width-25,
			.width-75 {
			width: 100%;
			}

			.w-full{
			width: 100%;
			}
			@media (min-width: 768px){
			.width-50 {
			max-width: 50%;
			}
			.width-25 {
			max-width: 25%;
			}
			.width-75 {
			max-width: 75%;
			}
			.width-33 {
			max-width: 33.333%;
			}
			.width-66 {
			max-width: 66.666%
			}
			}
			/ SPACING TODO: maybe scan our files for which we actually use? /
			.p-1 {padding: var(--sp1);}
			.p-2 {padding: var(--sp2);}
			.p-3 {padding: var(--sp3);}
			@@ -956,51 +1219,204 @@
			.ml-7 { margin-left: var(--sp7); }
			.mb-7 { margin-bottom: var(--sp7); }

			/**************************************************************
			UTILITY CLASSES - TEXT & VISIBILITY
			**************************************************************/
			.align-center { text-align: center; }
			.align-left { text-align: left; }
			.align-right { text-align: right; }

			*[hidden] {
			display: none!important;
			/******************************************************
			COLORS
			******************************************************/
			.base {
			--color: rgb(var(--base));
			}

			@media (max-width: 767px){
			.hide-small {
			display: none;
			.base-50 {
			--color: rgb(var(--base-50));
			}
			.base-100 {
			--color: rgb(var(--base-100));
			}
			.base-200 {
			--color: rgb(var(--base-200));
			}
			.contrast {
			--color: rgb(var(--contrast));
			}

			.width-50,
			.width-25,
			.width-75 {
			width: 100%;
			.contrast-50 {
			--color: rgb(var(--contrast-50));
			}
			.contrast-100 {
			--color: rgb(var(--contrast-100));
			}
			.contrast-200 {
			--color: rgb(var(--contrast-200));
			}
			.action {
			--color: rgb(var(--action-0));
			}

			.w-full{
			width: 100%;
			.action-50 {
			--color: rgb(var(--action-50));
			}
			.action-100 {
			--color: rgb(var(--action-100));
			}
			.action-200 {
			--color: rgb(var(--action-200));
			}
			.action-comp {
			--color: oklch(from rgb(var(--action-0)) l c calc(h + 180));
			}
			.action-tri {
			--color: oklch(from rgb(var(--action-0)) .82 .2 calc(h - 120));
			}
			.action-tri-alt {
			--color: oklch(from rgb(var(--action-0)) .82 .2 calc(h + 120));
			}
			.secondary {
			--color: rgb(var(--secondary-0));
			}

			@media (min-width: 768px){
			.buttons li.width-50,
			.width-50 {
			width: calc(50% - .3em);
			.secondary-50 {
			--color: rgb(var(--secondary-50));
			}
			.width-25 {
			width: calc(25% - .3em);
			.secondary-100 {
			--color: rgb(var(--secondary-100));
			}
			.width-75 {
			width: calc(75% - .3em);
			.secondary-200 {
			--color: rgb(var(--secondary-200));
			}
			.secondary-comp {
			--color: oklch(from rgb(var(--secondary-0)) l c calc(h + 180));
			}
			.secondary-tri {
			--color: oklch(from rgb(var(--secondary-0)) .82 .2 calc(h - 120));
			}
			.secondary-tri-alt {
			--color: oklch(from rgb(var(--secondary-0)) .82 .2 calc(h + 120));
			}
			.hvr-bck:hover,
			.hvr-bck:focus,
			.bck {
			background-color: var(--color);
			}
			.bck:not(.overlay).op-1 {
			background-color: rgba(var(--color), var(--op-1));
			}
			.bck:not(.overlay).op-2 {
			background-color: rgba(var(--color), var(--op-2));
			}
			.bck:not(.overlay).op-3 {
			background-color: rgba(var(--color), var(--op-3));
			}
			.bck:not(.overlay).op-4 {
			background-color: rgba(var(--color), var(--op-4));
			}
			.bck:not(.overlay).op-45 {
			background-color: rgba(var(--color), var(--op-45));
			}
			.bck:not(.overlay).op-5 {
			background-color: rgba(var(--color), var(--op-5));
			}
			.bck:not(.overlay).op-6 {
			background-color: rgba(var(--color), var(--op-6));
			}
			.hvr-clr:hover,
			.hvr-clr:focus,
			.clr {
			color: var(--color);
			}
			.hvr-brdr:hover,
			.hvr-brdr:focus,
			.brdr {
			border-color: var(--color);
			}

			/******************************************************************
			DUOTONE
			***************************************************************//****************************************************************/
			.duotone {
			isolation: isolate;
			position: relative;
			overflow: hidden;
			background: rgb(var(--contrast));
			}

			.cover img,
			.cover video,
			.duotone img,
			.duotone video {
			filter: grayscale(1) sepia(1) contrast(1.1) brightness(1.05);
			mix-blend-mode: multiply;
			z-index: 1;
			position: relative;
			}
			/.duotone::after,/
			.duotone::before {
			content: '';
			position: absolute;
			inset: 0;
			pointer-events: none;
			z-index: 2;
			}
			.duotone::before {
			mix-blend-mode: color;
			background-color: var(--duo-dark);
			opacity: var(--op-5);
			/z-index: 1;/
			}
			.duotone:not(.cover)::after {
			mix-blend-mode: screen;
			background-color: var(--duo-light);
			/z-index: 2;/
			}


			.duotone.action {
			--tone-a: rgb(var(--action-0));
			--duo-dark: oklch(from rgb(var(--base)) .18 .02 h);
			--duo-light: oklch(from rgb(var(--action-0)) .72 .28 h);
			}

			.duotone.secondary {
			--tone-a: rgb(var(--secondary-0));
			--duo-dark: oklch(from rgb(var(--base)) .2 .03 h);
			--duo-light: oklch(from rgb(var(--secondary-0)) .82 .18 h);
			}

			.duotone.complement {
			--duo-dark: oklch(from var(--tone-a) .22 .08 calc(h + 180));
			--duo-light: oklch(from var(--tone-a) .8 .26 h);
			}
			.duotone.triadic {
			--duo-dark: oklch(from var(--tone-a) .24 .1 calc(h + 120));
			--duo-light: oklch(from var(--tone-a) .82 .2 calc(h - 120));
			}
			.duotone.monochrome {
			--duo-dark: oklch(from var(--tone-a) .3 .04 h);
			--duo-light: oklch(from var(--tone-a) .88 .08 h);
			}
			.duotone.film {
			--duo-dark: oklch(from var(--tone-a) .35 .1 h);
			--duo-light: oklch(from var(--dark-0) .96 .02 h);
			}


			/****************************************************************//****************************************************************
			LAYOUT UTILITIES
			******************************************************************/
			.row,
			.col {
			/ Buttons /
			button,
			[type=submit],
			a.btn,
			.btn + label,
			li.btn,
			.buttons a,
			.buttons li,
			/ Item Grid /
			.item-grid .item,
			/ popups /
			aside.main,
			/ asides /
			aside.header,
			aside.footer,
			/ Defaults, of course /

			.row.row,
			.col.col {
			display: flex;
			justify-content: var(--justify);
			align-items: var(--align);
			@@ -1011,12 +1427,16 @@
			--justify: center;
			--gap: .5rem;
			--wrap: wrap;
			width: 100%;
			}
			.stretch.stretch > * {
			flex: 1;
			}

			.col { --dir: column; }
			.row { --dir: row; }
			.col.rev { --dir: column-reverse; }
			.row.rev { --dir: row-reverse; }
			.col.col { --dir: column; }
			.row.row { --dir: row; }
			.col.col.rev.rev { --dir: column-reverse; }
			.row.row.rev.rev { --dir: row-reverse; }

			.nowrap.nowrap { --wrap: nowrap; }
			.nowrap.nowrap.stack-small { --wrap: wrap;}
			@@ -1024,28 +1444,39 @@
			.nowrap.nowrap.stack-small { --wrap: nowrap;}
			}

			.col.start,
			.row.a-start { --align: flex-start; }
			.col.end,
			.row.a-end { --align: flex-end; }
			.row.row.top,
			.col.col.left { --align: flex-start; }
			.col.col.top,
			.row.row.left { --justify: flex-start; }

			.col.a-start,
			.row.start { --justify: flex-start; }
			.col.a-end,
			.row.end { --justify: flex-end; }
			.row.row.btm,
			.col.col.right { --align: flex-end; }
			.col.col.btm,
			.row.row.right { --justify: flex-end; }

			.col.btw,
			.row.btw {
			--justify: space-between;
			width: 100%;
			}
			.row.row.x-mid,
			.col.col.y-mid { --justify: center; }
			.row.row.y-mid,
			.col.col.x-mid { --align: center; }

			.col.even,
			.row.even { --justify: space-evenly; }
			.row.row.x-btw,
			.col.col.y-btw { --justify: space-between; }
			.row.row.y-btw,
			.col.col.x-btw { --align: space-between; }

			/******************************************************************
			.row.row.x-even,
			.col.col.y-even { --justify: space-evenly; }
			.row.row.y-even,
			.col.col.x-even { --align: space-evenly; }

			.row.row.x-around,
			.col.col.y-around { --justify: space-around; }
			.row.row.y-around,
			.col.col.x-around { --align: space-around; }

			/*************************************************
			POSITION UTILITIES
			******************************************************************/
			*************************************************/
			.abs { position: absolute; }
			*:has(>.abs) { position: relative; }

			@@ -1073,972 +1504,222 @@
			}

			/******************************************************************
			THEME SWITCHER & TOGGLE
			THEME SWITCHER
			******************************************************************/
			.toggle-switch input {
			opacity: 0;
			width: 0;
			height: 0;
			position: absolute;
			left: var(--offScreen);
			.field .switch {
			display: inline-flex;
			}

			.toggle-switch .slider {
			.switch .slider {
			--trans-t: .0125s;
			position: relative;
			width: 2rem;
			height: 1rem;
			background-color: var(--base-200);
			width: var(--chipchip);
			height: var(--chip);
			background-color: rgb(var(--base-200));
			border-radius: .75rem;
			overflow: hidden;
			display: flex;
			justify-content: space-evenly;
			justify-content: space-between;
			align-items: center;
			border: 4px solid transparent;
			transition: var(--trans-t);
			box-shadow: 0 0 .25rem 0 rgba(var(--contrast-rgb), .125) inset;
			box-shadow: 0 0 .25rem 0 rgba(var(--contrast), .125) inset;
			cursor: pointer;
			margin: 5px;
			transition: var(--trans-color);
			}
			.switch .slider::before {
			content: '';
			display: block;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background-color: rgb(var(--base));
			transform: translateX(-1.5rem); /* NOTE: Tied to half of the width defined above */
			border-radius: .75rem;
			transition: var(--trans-transform);
			box-shadow: 0 0 .25rem 3px rgba(var(--contrast), .125);
			}
			.switch :checked ~ .slider::before {
			transform: translateX(1.5rem);
			box-shadow: 0 0 .25rem 3px rgba(var(--base), .25);
			}
			.switch :checked ~ .slider {
			background-color: rgb(var(--action-0));
			}

			.toggle-switch .slider::before {
			content: '';
			display: block;
			width: 100%;
			height: 100%;
			position: absolute;
			top:0;
			left: 0;
			background-color: var(--base);
			transform: translateX(-1rem);
			border-radius: .75rem;
			transition: var(--trans-transform);
			box-shadow: 0 0 .25rem 3px rgba(var(--contrast-rgb), .125);
			}

			.toggle-switch input:checked ~ .slider::before {
			transform: translateX(1rem);
			box-shadow: 0 0 .25rem 3px rgba(var(--base-rgb), .25);
			}

			.toggle-switch input:checked ~ .slider {
			background-color: var(--action-0);
			}

			.toggle-switch input:active ~ .slider::before {
			transform: translate(0);
			}

			#theme-switch {
			z-index: 99;
			margin: 0;
			--wrap: nowrap;
			--gap: 1rem;
			}

			#theme-switch .slider {
			width: var(--chipchip);
			height: var(--chip);
			}

			#theme-switch .slider::before {
			transform: translateX(-1.5rem);
			}

			#theme-switch input:checked ~ .slider::before {
			transform: translateX(1.5rem);
			}

			@media (max-width: 600px) {
			.switch :active ~ .slider::before {
			transform: translateX(0);
			}
			#theme-switch {
			left: 1rem;
			z-index: var(--z-6);
			margin: 0;
			--wrap: nowrap;
			--gap: 1rem;
			}
			.wp-site-blocks > header {
			padding: 0!important;
			}
			#theme-switch [type=checkbox] {
			position: absolute;
			left: var(--offScreen);
			}
			@media (max-width: 600px) {
			#theme-switch {
			left: 1rem;
			}
			}
			:checked ~ .slider .icon-sun-dim {
			--w: .75em;
			margin-top: .25em;
			}
			.slider .icon-moon {
			--w: .666em;
			margin-top: .333em;
			}
			.slider .icon-sun-dim,
			:checked ~ .slider .icon-moon {
			--w: 1em;
			margin-top: 0;
			}
			:not(:checked) ~ .slider .icon-sun-dim {
			color: rgb(var(--action-0));
			}

			/*********************************************************
			GRIDS
			*********************************************************/
			.grid-view,
			.item-grid {
			/************************************************
			GRIDS/ROWS/TABLES
			************************************************/
			/ GRID VIEW (default) /
			.item-grid{
			--columns: repeat(2, 1fr);
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-template-columns: var(--columns);
			gap: 10px;
			}
			.item-grid.stats {
			grid-template-columns: repeat(2, 1fr);
			.item-grid:empty {
			display: none;
			}
			@media (min-width: 768px){
			.grid-view,
			.item-grid {
			--width: 250px;
			grid-template-columns: repeat(auto-fill, minmax(var(--width), 1fr));
			.no-results,
			.item-grid .empty {
			height: 15vh;
			background-color: rgb(var(--base-50));
			border-radius: var(--radius);
			border: 2px dashed rgb(var(--base-200));
			font-style: italic;
			}
			}
			.item-grid.stats {
			--columns: repeat(2, 1fr);
			}
			@media (min-width: 768px) {
			.item-grid {
			--width: 250px;
			--columns: repeat(auto-fill, minmax(var(--width), 1fr));
			}
			.item-grid.split-2 {
			--columns: repeat(2, 1fr);
			}
			.item-grid.split-3 {
			--columns: repeat(3, 1fr);
			}
			.item-grid.split-4 {
			--columns: repeat(4, 1fr);
			}
			.item-grid.split-5 {
			--columns: repeat(5, 1fr);
			}
			.item-grid.split-6 {
			--columns: repeat(6, 1fr);
			}
			.item-grid.split-7 {
			--columns: repeat(7, 1fr);
			}
			.item-grid.split-8 {
			--columns: repeat(8, 1fr);
			}
			.item-grid.split-9 {
			--columns: repeat(9, 1fr);
			}
			}

			.grid-view .item,
			.item-grid .item {
			border-radius: var(--radius-outer);
			display:flex;
			filter: none;
			position: relative;
			}
			.item-grid.list-view {
			gap: 0;
			}
			.item-grid.list-view .item {
			aspect-ratio: unset;
			align-items: flex-start;
			border-radius: 4px;
			padding: 1rem 0;
			}
			.list-view .item:nth-of-type(even) {
			background-color: var(--base);
			}
			.list-view .item-select {
			display: flex;
			align-items: center;
			justify-content: center;
			min-height: 18vh;
			}
			.list-view .item .col {
			padding: 0 var(--chip_) 0 1rem;
			}
			.list-view .abs {
			right:0;
			top:0;
			width:max-content;
			--dir:column-reverse;
			justify-content: flex-end;
			}
			.item.col {
			--wrap: nowrap;
			}
			.votes,
			.favourite {
			.item-grid .item .item-actions {
			--gap: .125rem;
			z-index: 1;
			position: absolute;
			z-index: var(--z-1);
			box-shadow: rgba(var(--base-rgb),var(--op-2)) var(--shdw);
			background-color: rgba(var(--base-rgb),var(--op-2));
			top: 0;
			right: 0;
			width: calc(100% - var(--btn));
			}
			.favourite .icon-heart-fi,
			.favourited .icon-heart {
			display: none;
			.item-actions button,
			.item-actions .btn + label {
			min-height: var(--chipchip);
			width: var(--chipchip);
			z-index: var(--z-1);
			}
			.favourited .icon-heart-fi,
			.favourite .icon-heart {
			display: block;
			}
			.votes {
			bottom: 0;
			right: 0;
			}
			.favourite {
			top: 0;
			left: 0;
			}
			.item-grid .item .images,
			.item-grid .item .images a{
			.item-grid .item .images a {
			aspect-ratio: 1;
			width: 100%;
			height: 100%;
			display: flex;
			}


			.item-grid button {
			--height: max-content;
			aspect-ratio: 1;
			}

			.grid-view img,
			.item-grid img {
			border-radius: var(--radius);
			}
			.item-grid .item-actions button {
			min-height: var(--chipchip);
			width: var(--chipchip);
			}

			/ LIST VIEW /
			.item-grid.list-view {
			display: flex;
			flex-direction: column;
			gap: 0;
			}

			.item-grid.list-view .item .col {
			--gap: .5rem;
			}

			.item-grid.list-view img {
			width: 20%;
			}

			@media (min-width: 768px) {
			.item-grid,
			.grid-view {
			grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
			.item-grid.list-view .item {
			aspect-ratio: unset;
			align-items: flex-start;
			border-radius: var(--radius);
			padding: 1rem 0;
			}
			}
			.list-view .item:nth-of-type(even) {
			background-color: rgb(var(--base));
			}
			.list-view img {
			width: 20%;
			}
			.item.col {
			--wrap: nowrap;
			}

			/******************************************************************
			INTERACTIVE ELEMENTS - BASE
			******************************************************************/
			li.btn,
			button,
			[type=submit],
			a.button,
			.buttons a,
			.btn + label {
			--justify: center;
			--align: center;
			--dir: row;
			width: fit-content;
			text-transform: uppercase;
			text-decoration: none;
			text-align: center;
			background-color: var(--base-100);
			color: var(--contrast-50);
			border: 1px solid var(--base-200);
			border-radius: var(--radius);
			padding: .25rem 1rem;
			font-family: var(--heading);
			cursor: pointer;
			outline: 0;
			min-height: var(--btn);
			display: inline-flex;
			justify-content: var(--justify);
			align-items: var(--align);
			gap: var(--gap);
			flex-wrap: var(--wrap);
			flex-direction: var(--dir);
			position: relative;
			box-shadow: rgba(var(--base-rgb),var(--op-6)) var(--shdw-inset);
			}

			[data-filter], .btn + label {
			width: var(--chipchip);
			height: var(--chipchip);
			min-height: var(--chipchip);
			}
			select[data-filter] {
			width: max-content;
			height: auto;
			min-height: 0;
			}

			ul.socials a {
			background-color: var(--base-100);
			color: var(--contrast-50);
			border: 1px solid var(--base-200);
			border-radius: var(--radius);
			padding: .25rem 1rem;
			cursor: pointer;
			min-height: var(--btn);
			display: inline-flex;
			.empty-state {
			--w: 1.2em;
			grid-column: 1 / span 2;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			box-shadow: rgba(var(--base-rgb),var(--op-6)) var(--shdw-inset);
			}

			/******************************************************************
			INTERACTIVE ELEMENTS - STATES
			******************************************************************/
			li.btn:hover,
			li.btn:focus,
			button:hover,
			button:focus,
			[type=submit]:hover,
			[type=submit]:focus,
			a.button:hover,
			a.button:focus,
			ul.socials a:hover,
			ul.socials a:focus,
			.buttons a:hover,
			.buttons a:focus,
			.btn + label:hover,
			.btn + label:focus {
			background-color: var(--action-0);
			color: var(--action-contrast);
			box-shadow: var(--shdw-none);
			}

			button:disabled,
			[type=submit]:disabled,
			a.button:disabled,
			ul.socials a:disabled,
			.btn:disabled + label,
			button:disabled:hover,
			button:disabled:focus,
			[type=submit]:disabled:hover,
			[type=submit]:disabled:focus,
			a.button:disabled:hover,
			a.button:disabled:focus,
			ul.socials a:disabled:hover,
			.btn:disabled + label:hover {
			opacity: .5;
			cursor: not-allowed;
			background-color: var(--base-200);
			color: var(--contrast-200);
			}

			/******************************************************************
			BUTTONS
			******************************************************************/
			.buttons {
			--wrap: wrap;
			--justify: flex-start;
			text-align: center;
			margin: 1rem auto;
			width: 100%;
			padding: 0;
			max-width: 66%;
			background-color: rgb(var(--base-100));
			border: 2px dashed rgb(var(--base-50));
			padding: 1rem;
			}

			.buttons.fit {
			width: fit-content;
			margin: 1rem 2rem;
			}

			.buttons li {
			--justify: stretch;
			--align: stretch;
			padding: 0;
			list-style: none;
			overflow:hidden;
			width: 100%;
			}

			.list-none {
			list-style: none;
			}

			@media (min-width: 768px){
			.buttons {
			max-width: var(--content);
			margin: 3rem auto;
			}
			}

			.buttons .outline a {
			background-color: transparent;
			color: var(--action-0);
			border: 2px solid var(--action-0);
			}

			.buttons .outline a:hover,
			.buttons .outline a:focus {
			background-color: var(--action-0);
			color: var(--action-contrast);
			border-color: var(--action-0);
			}

			.buttons a {
			width: 100%;
			}

			details .icon {
			--w: 1.5em;
			}
			details .filters .icon {
			--w: 1em;
			}
			button.voted .icon,
			button.favourite.favourited {
			animation: favourite-pop .4s cubic-bezier(.25, .46, .45, .94);
			}

			@keyframes favourite-pop {
			0% { transform: scale(1); }
			50% { transform: scale(1.3); }
			75% { transform: scale(.9); }
			100% { transform: scale(1); }
			}

			button.filter-toggle {
			border: 1px solid var(--base-200);
			background-color: transparent;
			white-space: nowrap;
			font-size: 1rem;
			height: var(--chip_);
			width: var(--chip_);
			min-height: 0;
			padding: .35em;
			--w: 1.2em;
			}

			.filter-toggle:hover {
			border-color: var(--action-50);
			color: var(--action-50);
			}

			.filter-toggle:focus {
			background-color: var(--action-50);
			color: var(--action-contrast);
			}

			button.favourite:not(.favourited) .heart-fill,
			button.favourite.favourited .heart,
			.toggle.notifications:not(.has) .bell-ringing,
			.toggle.notifications.has .bell,
			.vote button:not(.voted) .upvoted,
			.vote button:not(.voted) .downvoted,
			.vote .voted .upvote,
			.vote .voted .downvote {
			display: none;
			}

			button.favourite:not(.favourited) .heart,
			button.favourite.favourited .heart-fill,
			.toggle.notifications:not(.has) .bell,
			.toggle.notifications.has .bell-ringing,
			.vote button:not(.voted) .upvote,
			.vote button:not(.voted) .downvote,
			.vote .voted .upvoted,
			.vote .voted .downvoted {
			display: block;
			}

			/******************************************************************
			ICONS
			******************************************************************/
			i.icon {
			width: var(--w);
			height: var(--w);
			display: inline-block;
			background-color: currentColor;
			mask-image: var(--icon);
			-webkit-mask-image: var(--icon);
			mask-size: contain;
			-webkit-mask-size: contain;
			mask-repeat: no-repeat;
			-webkit-mask-repeat: no-repeat;
			mask-position: center;
			-webkit-mask-position: center;
			vertical-align: middle;
			}
			.icon-colour {
			background: rgb(183, 51, 46);
			background: linear-gradient(180deg, rgba(255,0,128,1) 0%, rgba(250,71,101,1) 14%, rgba(251,121,35,1) 28%, rgba(176,190,19,1) 42%, rgba(14,204,0,1) 56%, rgba(14,225,166,1) 70%, rgba(63,152,253,1) 84%, rgba(166,90,196,1) 100%);
			}
			.icon.grab {
			cursor: grab;
			}
			main a .icon {
			margin-right: .5rem;
			}
			/** TODO: Reintegrate this; currently svg is in .css
			path#refresh {
			transform-origin: center;
			transform-box: fill-box;
			animation: spin 1s var(--trans-fn) infinite;
			}**/

			/******************************************************************
			ACCESSIBILITY
			******************************************************************/
			.screen-reader-text {
			border: 0;
			clip: rect(1px, 1px, 1px, 1px);
			clip-path: inset(50%);
			height: 1px;
			margin: -1px;
			overflow: hidden;
			padding: 0;
			position: absolute !important;
			width: 1px;
			word-wrap: normal !important;
			}

			input[type=checkbox]:focus + label,
			input[type=checkbox]:focus-visible + label,
			input[type=radio]:focus + label,
			input[type=radio]:focus-visible + label,
			input:focus,
			input:focus-within {
			outline: 2px solid var(--action-0) !important;
			outline-offset: 2px !important;
			box-shadow: 0 0 0 4px rgba(var(--action-rgb), var(--op-3))!important;
			}

			[aria-busy="true"] {
			cursor: progress;
			}

			[aria-disabled="true"],
			[disabled] {
			cursor: not-allowed;
			opacity: .7;
			}

			/******************************************************************
			DETAILS
			******************************************************************/
			details {
			padding: .25rem 0;
			border-top: 1px solid var(--base-200);
			border-bottom: 1px solid var(--base-200);
			}

			details[open] {
			background-color: var(--base-50);
			}

			details summary {
			--wrap: nowrap;
			list-style: none;
			text-transform: uppercase;
			cursor: pointer;
			border: 0;
			position: relative;
			padding: .5rem 2.5rem .5rem .5rem;
			gap: .5rem;
			}

			details summary:hover {
			background-color: var(--base-100);
			border-color: var(--base-100);
			color: var(--contrast);
			}

			details[open] > summary {
			background-color: var(--base-50);
			}

			details summary::after {
			position: absolute;
			right: .5rem;
			top: .5rem;
			--icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik0yMTIuMjQsMTAwLjI0bC04MCw4MGE2LDYsMCwwLDEtOC40OCwwbC04MC04MGE2LDYsMCwwLDEsOC40OC04LjQ4TDEyOCwxNjcuNTFsNzUuNzYtNzUuNzVhNiw2LDAsMCwxLDguNDgsOC40OFoiLz48L3N2Zz4=');
			content: "";
			background-color: var(--contrast-100);
			-webkit-mask-repeat: no-repeat;
			-webkit-mask-size: contain;
			-webkit-mask-image: var(--icon);
			mask-image: var(--icon);
			mask-repeat: no-repeat;
			mask-size: contain;
			width: 1.25rem;
			height: 1.25rem;
			margin-left: auto;
			transition: var(--trans-color), var(--trans-transform);
			}

			details summary:hover::after {
			background-color: var(--action-0);
			}

			details[open] > summary::after {
			background-color: var(--contrast);
			}

			details[open] > summary::after {
			transform: rotate(-540deg);
			transition: background-color var(--trans-base);
			transition-property: background-color, transform;
			}

			details::details-content {
			opacity: 0;
			block-size: 0;
			overflow-y: clip;
			transition: content-visibility var(--trans-t) allow-discrete, opacity var(--trans-t), block-size var(--trans-t);
			}

			details[open]::details-content {
			opacity: 1;
			block-size: auto;
			}

			@media (prefers-reduced-motion: no-preference){
			details {
			interpolate-size: allow-keywords;
			}
			}

			/**************************************************
			LIST OVERRIDES
			**************************************************/
			.term-list {
			--justify: flex-start;
			--align: center;
			--wrap: nowrap;
			--gap: 1.5rem;
			--dir: row;
			--w: 1em;
			list-style: none;
			padding: 0;
			height: var(--btn);
			display: flex;
			justify-content: var(--justify);
			align-items: var(--align);
			gap: var(--gap);
			flex-wrap: var(--wrap);
			flex-direction: var(--dir);
			position: relative;
			overflow: auto hidden;
			touch-action: pan-x;
			text-transform: lowercase;
			}
			.term-list small {
			vertical-align: baseline;
			margin-left: .5rem;
			font-style: italic;
			}
			.term-list li {
			display: flex;
			align-items: center;
			}
			.term-list a {
			align-items: center;
			}


			.directory-list > ul
			{
			max-width: 100%;
			}
			.directory-list img {
			width: 70px;
			}
			.directory-list .image {
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			}
			.directory-list h3 {
			margin: 0;
			text-align: center;
			font-weight: var(--fw-h-bold);
			font-family: var(--heading);
			position: sticky;
			font-size: var(--txt-enormous);
			width: 100%;
			top: 0;
			left: 0;
			color: var(--base);
			text-shadow: var(--base-200) 1px 1px 0;
			user-select:none;
			}
			.directory-list > ul > li {
			padding: 2rem;
			align-items: center;
			}
			.directory-list > ul > li:nth-of-type(even) {
			background-color: var(--base-100);
			}
			.directory-list ul ul {
			width: 100%;
			}
			.directory-list ul ul li {
			padding: .35rem .5rem;
			}
			.directory-list ul ul li:nth-of-type(even) {
			background-color:var(--base);
			}

			@media (min-width: 768px) {
			.directory-list h3 {
			width: 20vw;
			}
			.directory-list > ul {
			width: 100%;
			}
			.directory-list ul ul {
			min-height: var(--txt-enormous);
			}
			.directory-list > ul > li {
			padding: 2rem 10vw;
			}
			}
			/**************************************************
			COVER BLOCK
			**************************************************/
			.cover {
			position: relative;
			overflow: hidden;
			min-height: 60vh;
			padding: var(--btn);
			}

			.cover::before {
			z-index: var(--coverIndex);
			background-color: var(--action-0);
			mix-blend-mode: var(--coverBlend);
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			content: '';
			}

			.cover::before,
			.cover > video,
			.cover > img {
			position: absolute;
			inset: 0;
			width: 100%;
			max-width: 100%;
			height: 100%;
			margin: 0;
			}


			.cover .content {
			z-index: 5;
			position: relative;
			overflow: hidden auto;
			width: max-content;
			height: max-content;
			max-width:100%;
			max-height: 100%;
			}

			.cover > img {
			z-index: 1;
			opacity: .5;
			mix-blend-mode: luminosity;
			object-fit: cover;
			}

			@media (min-width: 768px) {
			.cover > img {
			opacity: .33;
			}
			}

			/**************************************************
			BLOCKQUOTE
			**************************************************/
			blockquote {
			--background: var(--base-100);
			--border: var(--action-0);
			line-height: 1.2;
			padding: var(--btn);
			border-radius: 4rem;
			background-color: var(--background);
			}

			blockquote .content {
			margin: 12px auto;
			max-width: min(680px, 80vw);
			position: relative;
			font-family: var(--heading);
			font-weight: var(--fw-h-bold);
			padding: 3rem 2.5rem;
			border-radius: var(--radius-outer);
			border: 2px solid var(--border);
			}

			blockquote .content::before,
			blockquote .content::after {
			position: absolute;
			content: '';
			left: 50px;
			}

			blockquote .content::before {
			width: 80px;
			border: 6px solid var(--background);
			bottom: -3px;
			z-index: 2;
			}

			blockquote .content::after {
			border: 2px solid var(--border);
			border-radius: 0 100% 0 0;
			width: 60px;
			height: 60px;
			bottom: -60px;
			border-bottom: 0;
			border-left: 0;
			z-index: 3;
			}

			blockquote cite {
			padding: 15px 0 0 12px;
			margin: 0 0 0 150px;
			z-index: 1;
			}

			blockquote.pull {
			background-color: unset;
			border-radius: 0;
			margin: 4rem auto;
			padding: 3rem;
			box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-down), rgba(var(--base-rgb),var(--op-45)) var(--shdw-up);;
			}

			blockquote.pull cite {
			margin: 0;
			}

			/******************************************************************
			OVERLAYS - BASE PATTERN
			******************************************************************/
			dialog[open],
			aside.expanded {
			background-color: var(--base);
			box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
			z-index: var(--z-5);
			}

			dialog::backdrop {
			backdrop-filter: blur(5px);
			background-color: rgba(var(--base-rgb),var(--op-4));
			}

			dialog[open],
			aside.main {
			border-radius: var(--radius-outer);
			overflow: hidden;
			}

			/**************************************************
			MODALS DIALOGUE
			**************************************************/
			dialog[open] {
			z-index:999;
			--padding: 0;
			top: 5vh;
			width: min(500px, 95vw);
			height: fit-content;
			max-height: 90vh;
			padding: var(--padding);
			background-color: var(--base-50);
			color: var(--contrast);
			border: 1px solid var(--base-200);
			}

			dialog > .wrap,
			dialog > form {
			max-height: var(--maxHeight);
			overflow: hidden auto;
			margin: 0 0 0 1.5rem;
			padding-right: 1.2rem;
			padding-bottom: var(--btn);
			width: calc(100% - 1.5rem);
			}

			dialog label {
			font-weight: normal;
			}

			dialog :is(h2, h3) {
			margin: 0 0 .5rem 0;
			font-size: var(--txt-large);
			}

			dialog:has(.m-actions){
			padding-bottom: var(--btn);
			}

			.m-actions {
			--w: 1.15em;
			--justify: flex-end;
			--wrap: nowrap;
			--gap: 0;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			width: 100%;
			z-index: var(--z-6);
			background-color: var(--action-100);
			box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-up);
			}

			.m-actions button {
			width: 100%;
			height: var(--chipchip);
			border-radius: 0;
			font-size: var(--txt-x-small);
			--gap: .75rem;
			color: var(--action-contrast);
			background-color: var(--action-50);
			border: 2px solid var(--action-50);
			box-shadow:none;
			}

			.m-actions button:hover,
			.m-actions button:focus {
			background-color: var(--base);
			color: var(--contrast);
			}

			.m-actions button:first-of-type {
			border-bottom-left-radius: 1rem;
			}

			.m-actions button:last-of-type {
			border-bottom-right-radius: 1rem;
			}

			dialog ul {
			list-style: none;
			}

			dialog .search-container {
			padding-top: 1rem;
			width: 100%;
			gap: .5rem;
			}

			/****************
			QUERY BLOCK
			****************/
			.loop .item-grid {
			grid-template-columns: repeat(1, 1fr);
			}

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

			.loop .item-grid .progress {
			aspect-ratio: 3/2;
			position: relative;
			}

			.loop .item-grid .progress figure {
			width: 100%;
			height: 100%;
			display: flex;
			gap: .125rem;
			background-color: var(--action-0);
			position: relative;
			}

			.loop .item-grid .progress figure span {
			position: absolute;
			width: 50%;
			text-transform: uppercase;
			background-color: rgba(var(--action-rgb),var(--op-4));
			color: var(--action-contrast);
			padding: 0 .25rem;
			}

			.loop .progress figure img {
			max-width: 50%;
			object-fit: cover;
			}

			figure .after {
			top: 0;
			right:0;
			}

			figure .before {
			bottom: 0;
			left: 0;
			}

			/**************************************************
			/***********************************************
			TABLES
			**************************************************/
			***********************************************/
			table {
			white-space: nowrap;
			width: 100%;
			display: block;
			display: table;
			margin: 0 0 2rem;
			border-radius: 4px;
			height: var(--maxHeight);
			height: min(100%, var(--maxHeight));
			color: rgb(var(--contrast));
			overflow: auto;
			position: relative;
			}
			@@ -2046,7 +1727,7 @@
			thead,tfoot {
			position: sticky;
			z-index: 10;
			background-color: var(--base);
			background-color: rgb(var(--base));
			text-transform: uppercase;
			padding: .5rem 0;
			line-height: 2;
			@@ -2054,7 +1735,7 @@
			}

			tr:nth-of-type(even){
			background-color: var(--base-200);
			background-color: rgb(var(--base-200));
			}

			tfoot th {
			@@ -2066,16 +1747,16 @@
			}

			thead tr, tfoot tr {
			background-color: rgba(var(--base-rgb),var(--op-6));
			box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
			background-color: rgba(var(--base),var(--op-6));
			box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);
			}

			thead tr {
			border-bottom: 1px solid var(--contrast-200);
			border-bottom: 1px solid rgb(var(--contrast-200));
			}

			tfoot tr {
			border-top: 1px solid var(--contrast-200);
			border-top: 1px solid rgb(var(--contrast-200));
			}

			thead {
			@@ -2128,16 +1809,16 @@
			}

			tbody tr:focus-within {
			background-color: var(--base-100);
			border-color: var(--action-50)
			background-color: rgb(var(--base-100));
			border-color: rgb(var(--action-50))
			}

			[data-stuck] {
			background-color: rgba(var(--base-rgb),var(--op-4));
			background-color: rgba(var(--base),var(--op-4));
			position: sticky;
			left: -1rem;
			z-index: 15;
			box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-subtle-right);
			box-shadow: rgba(var(--base),var(--op-45)) var(--shdw-subtle-right);
			}

			tbody [data-stuck] {
			@@ -2146,135 +1827,1677 @@

			thead [data-stuck],
			tfoot [data-stuck] {
			background: var(--base);
			background: rgb(var(--base));
			}

			/**************************************************
			TOOLTIP
			**************************************************/
			[role=tooltip],
			.hide-tooltip.hide-tooltip.hide-tooltip + [role="tooltip"] {
			visibility: hidden;
			position: absolute;
			bottom: 2rem;
			left: 1rem;
			width: max-content;
			height:fit-content;
			max-width: 50vw;
			padding: .5rem;
			figure:has(table) {
			width: 100%;
			height: max-content;
			}
			/***********************************************
			BUTTONS
			***********************************************/
			button,
			[type=submit],
			a.btn,
			.btn + label,
			li.btn,
			.buttons a {
			--justify:center;
			--align: center;
			--dir: row;
			--wrap: nowrap;
			width: fit-content;
			text-transform: uppercase;
			text-decoration: none;
			background-color: rgb(var(--base-100));
			color: rgb(var(--contrast-50));
			border: 1px solid rgb(var(--base-200));
			border-radius: var(--radius);
			box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
			background: var(--action-0);
			color: var(--action-contrast);
			}

			body.menu_item [role=tooltip] {
			left: auto;
			right: 100%;
			top: -200%;
			z-index: var(--z-4);
			}

			[role=tooltip] p {
			margin: 0;
			}

			[role=tooltip] p + p {
			margin-top: .5rem;
			}

			.field:has([aria-describedby]:focus) [role=tooltip],
			[aria-describedby]:hover ~ .has-tooltip [role="tooltip"],
			[aria-describedby]:focus ~ .has-tooltip[role="tooltip"] {
			visibility: visible;
			display: block;
			}

			.has-tooltip {
			display: inline-flex;
			justify-content: flex-end;
			position: absolute;
			top: 0;
			left: 0;
			--w: 1.5rem
			}

			.tt-toggle {
			padding: .25rem 1rem;
			font-family: var(--heading);
			cursor: pointer;
			display: flex;
			border-radius: 50%;
			outline: 0;
			min-height: var(--btn);
			display: inline-flex;
			position: relative;
			box-shadow: rgba(var(--base),var(--op-6)) var(--shdw-inset);
			}
			.btn.chip {
			min-height: var(--chip);
			}
			.buttons.left a {
			--justify: flex-start;
			}
			.buttons.right a {
			--justify: flex-end;
			}
			.buttons.x-btw a {
			--justify: space-between;
			}
			button.outline,
			[type=submit].outline,
			a.btn.outline,
			.filters .btn + label,
			.buttons .outline a {
			--color: rgb(var(--contrast));
			background-color: transparent;
			color: var(--color);
			border: 1px solid var(--color);
			}

			.tt-toggle:hover,
			.tt-toggle:focus {
			background-color: var(--action-0);
			button:hover,
			button:focus,
			[type=submit]:hover,
			[type=submit]:focus,
			a.btn:hover,
			a.btn:visited:hover,
			a.btn:focus,
			.btn + label:hover,
			.btn:focus + label,
			.btn:checked + label,
			li.btn:hover,
			li.btn:focus,
			.buttons a:hover,
			.buttons a:visited:hover,
			.buttons a:focus {
			background-color: rgb(var(--action-0));
			color: var(--action-contrast);
			box-shadow: var(--shdw-none);
			}

			.tt-toggle:hover + [role=tooltip],
			.tt-toggle:focus + [role=tooltip] {
			visibility: visible;
			button.outline:hover,
			button.outline:focus,
			[type=submit].outline:hover,
			[type=submit].outline:focus,
			a.btn.outline:hover,
			a.btn.outline:visited:hover,
			a.btn.outline:focus,
			.filters .btn + label:hover,
			.filters .btn:focus + label,
			.buttons .outline a:hover,
			.buttons .outline a:visited:hover,
			.buttons .outline a:focus {
			background-color: rgb(var(--action-0));
			color: var(--action-contrast);
			border-color: rgb(var(--action-0));
			}

			button:disabled,
			button:disabled:focus,
			button:disabled:hover,
			[type=submit]:disabled,
			[type=submit]:disabled:focus,
			[type=submit]:disabled:hover,
			.btn:disabled + label,
			.btn:disabled:hover + label,
			.btn:disabled:focus + label {
			opacity: .5;
			cursor: not-allowed;
			background-color: rgb(var(--base-200));
			color: rgb(var(--contrast-200));
			}

			/************************************************************
			SELECTOR
			************************************************************/
			dialog[open]#jvb-selector {
			height: 70vh;
			top: 15vh;
			display: flex;
			[type=submit] {
			margin: 1rem 0;
			}

			#jvb-selector > .wrap {
			flex: 1;
			.filters .btn + label,
			.filters button {
			min-height:var(--chip);
			}
			.filters .btn + label {
			background-color: rgb(var(--base-100));
			border: 1px solid rgb(var(--base-200));
			color: rgb(var(--contrast-200));
			}
			.filters .btn:checked + label {
			border-color: rgb(var(--contrast));
			color: rgb(var(--contrast));
			}

			/** WP BLOCK BUTTONS **/
			.buttons {
			--wrap: wrap;
			--justify: flex-start;
			margin: 1rem auto;
			width: 100%;
			padding: 0;
			}
			.buttons li {
			--justify: stretch;
			--align: stretch;
			padding: 0;
			list-style: none;
			overflow: hidden;
			}
			.buttons a {
			width: 100%;
			}
			.buttons.fit {
			width: fit-content;
			margin: 1rem 2rem;
			}
			@media (min-width: 768px) {
			.buttons {
			max-width: var(--content);
			margin: 3rem auto;
			}
			}
			a.sticky,
			button.sticky,
			.main-actions .buttons {
			z-index: var(--z-6);
			position: fixed;
			bottom: var(--btn_);
			}
			body:has(.on-this-page) a.sticky,
			body:has(.on-this-page) button.sticky,
			body:has(.on-this-page) .main-actions .buttons {
			bottom: calc(var(--btn_) + var(--chip_));
			}
			.main-actions .buttons button,
			button.sticky {
			width: var(--btn);
			height: var(--btn);
			background-color: rgba(var(--base),var(--op-4));
			color: rgb(var(--contrast));
			box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);
			transition: var(--trans-size), var(--trans-color);
			}
			.main-actions .buttons button:hover,
			.main-actions .buttons button:focus,
			a.sticky:hover,
			a.sticky:focus,
			button.sticky:hover,
			button.sticky:focus {
			background-color: rgba(var(--action-0),var(--op-6));
			color: var(--action-contrast);
			}
			.main-actions .buttons button:disabled,
			.main-actions .buttons button:disabled:hover,
			.main-actions .buttons button:disabled:focus,
			button.sticky:disabled,
			button.sticky:disabled:hover,
			button.sticky:disabled:focus {
			opacity: .5;
			background-color: rgba(var(--base),var(--op-3));
			color: rgb(var(--contrast));
			}

			.qtoggle {
			left: 0;
			transition: left var(--trans-base), width var(--trans-base), border var(--trans-base), var(--trans-color);
			}
			.main .m-actions .refresh {
			width: var(--btn);
			border-radius: 0;
			background-color: rgb(var(--base-50));
			color: rgb(var(--contrast));
			}
			.main .m-actions .refresh:hover,
			.main .m-actions .refresh:focus {
			background-color: rgb(var(--action-0));
			color: var(--action-contrast);
			}
			.main .refresh .indicator {
			background-color: rgba(var(--base), var(--op-3));
			top: 0;
			right: 0;
			height: 1.1em;
			width: 1.1em;
			}
			.refresh .countdown:not(.counting) {
			display: none;
			}

			.main h2 {
			margin: .5em 0;
			font-size: var(--txt-medium);
			}



			#back-to-top {
			min-height: var(--chip);
			bottom: -3rem;
			right: 0;
			transition: bottom var(--trans-base);
			}
			body:has(.main-actions) #back-to-top {
			right: calc(var(--btn_) + .5rem);
			}
			.scroll-up #back-to-top {
			bottom: 0;
			}
			body:has(.fixed.bottom).scroll-up #back-to-top {
			bottom: var(--btn);
			}

			body:has(.on-this-page).scroll-up.scroll-up #back-to-top {
			bottom: calc(var(--btn) + var(--chip_));
			}
			/******************************************************************
			ACCESSIBILITY
			******************************************************************/
			.screen-reader-text {
			border: 0;
			clip: rect(1px, 1px, 1px, 1px);
			clip-path: inset(50%);
			height: 1px;
			margin: -1px;
			overflow: hidden;
			padding: 0;
			position: absolute !important;
			width: 1px;
			word-wrap: normal !important;
			}

			input[type=checkbox]:focus + label,
			input[type=checkbox]:focus-visible + label,
			input[type=radio]:focus + label,
			input[type=radio]:focus-visible + label,
			input:focus,
			input:focus-within {
			outline: 2px solid rgb(var(--action-0)) !important;
			outline-offset: 2px !important;
			box-shadow: 0 0 0 4px rgba(var(--action-0), var(--op-3))!important;
			}

			[aria-busy="true"] {
			cursor: progress;
			}

			[aria-disabled="true"],
			[disabled] {
			cursor: not-allowed;
			opacity: .7;
			}

			[type=checkbox][hidden] + label,
			[type=radio][hidden] + label,
			.btn[hidden] + label {
			display: none!important;
			}

			/**************************************************************
			FORM ELEMENTS
			**************************************************************/
			label {
			display: inline-flex;
			align-items: center;
			gap: .5em;
			}
			[type=radio],
			[type=checkbox] {
			position: absolute;
			opacity: 0;
			left: var(--offScreen);
			}
			[type=radio] + label,
			[type=checkbox] + label {
			cursor: pointer;
			}
			.field:is(.radio,.checkbox) fieldset {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: .5rem;
			}
			@media(min-width: 768px) {
			.field:is(.radio,.checkbox) fieldset {
			grid-template-columns: repeat(3, 1fr);
			}
			}
			.field:is(.radio,.checkbox,.true-false) label {
			position: relative;
			top: unset;
			left: unset;
			padding: 0 0 0 var(--chip);
			display: inline-flex;
			border: 1px solid transparent;
			font-weight: var(--fw-b);
			font-size: var(--txt-medium);
			}
			[type=radio] + label:hover,
			[type=radio]:focus + label,
			[type=checkbox] + label:hover,
			[type=checkbox]:focus + label {
			color: rgb(var(--action-0));
			}

			[type=radio] + label::before,
			[type=radio] + label::after,
			[type=checkbox] + label::before,
			[type=checkbox] + label::after {
			content: '';
			position: absolute;
			z-index: var(--z-2);
			}
			[type=checkbox] + label::before,
			[type=radio] + label::before {
			z-index: var(--z-1);
			}
			[type=checkbox] + label::after {
			left: .666em;
			top: .125em;
			transform: rotate(45deg);
			width: .25em;
			height: .75em;
			border: solid var(--action-contrast);
			border-width: 0 2px 2px 0;
			display: none;
			}
			[type=checkbox] + label::before,
			[type=radio] + label::before {
			display: block;
			top: .3em;
			left: .3em;
			width: .75rem;
			height: .75rem;
			border: 2px solid rgb(var(--contrast-200));
			background-color: transparent;
			border-radius: var(--radius);
			}
			[type=radio] + label::before {
			border-radius: 50%;
			}

			[type=checkbox]:checked + label::before {
			background-color: rgb(var(--action-0));
			border-color: rgb(var(--base-50));
			}
			[type=checkbox]:checked + label::after {
			display: block;
			}

			[type=radio]:checked + label::before {
			background-color: rgb(var(--action-0));
			box-shadow: rgba(var(--base), var(--op-45)) var(--shdw-inset);
			}
			/ Button checkboxes and radios /
			input.btn + label::before,
			input.btn + label::after {
			display: none;
			}



			textarea,
			input:is([type=date], [type=number], [type=text], [type=url],
			[type=email], [type=tel], [type=password], [type=search],
			[type=datetime-local], [type=time]) {
			font-family: var(--body);
			font-size: var(--txt-medium);
			color: rgb(var(--contrast));
			padding: var(--p-y) var(--p-x);
			border-radius: var(--radius);
			background-color: rgb(var(--base));
			outline: 0;
			border: 1px solid rgb(var(--base-100));
			border-bottom: 2px solid rgb(var(--contrast-200));
			width: 100%;
			max-width: 100%;
			margin: 0 4px;
			}

			textarea:focus,
			input:is([type=date], [type=number], [type=text], [type=url],
			[type=email], [type=tel], [type=password], [type=search],
			[type=datetime-local], [type=time]):focus {
			outline: rgb(var(--action-50));
			background-color: rgb(var(--base-100));
			color: rgb(var(--contrast));
			}
			textarea::placeholder,
			input::placeholder {
			font-family: var(--body);
			color: rgb(var(--base-200));
			}

			.field > label {
			position: relative;
			z-index: var(--z-1);
			display:inline-block;
			top: .75em;
			left: 1em;
			padding: 0 .5em;
			background-color:rgb(var(--base));
			font-size:var(--txt-small);
			font-weight: var(--fw-b-light);
			text-transform:uppercase;
			border: 1px solid transparent;
			}
			.field.selector > label {
			top: 2.25em;
			}
			.field.selector .filter-toggle {
			width: var(--chipchip);
			min-height: var(--chipchip);
			padding: 0;
			}
			.field:not(.radio):not(.checkbox):not(.true-false):not(.taglist):focus-within > label {
			background-color:rgb(var(--action-0));
			color: var(--action-contrast);
			border-radius: 4px;
			}

			.field.taglist, .field.taglist .field {
			border: none;
			}

			.field li.btn {
			min-height: var(--chip);
			}
			/******************************************************************
			SELECT
			******************************************************************/
			select {
			background: rgb(var(--base));
			border: 2px solid rgb(var(--base-100));
			border-radius: var(--radius);
			color: rgb(var(--contrast));
			cursor: pointer;
			font-family: var(--body);
			font-size: var(--txt-small);
			padding: var(--sp1);
			width: 100%;
			}

			select:disabled {
			background-color: rgb(var(--base-50));
			border-color: rgb(var(--base-100));
			color: rgb(var(--base-200));
			cursor: not-allowed;
			}

			select option {
			background: rgb(var(--base));
			color: rgb(var(--contrast));
			padding: var(--sp1);
			}

			select option:hover,
			select option:focus,
			select option:active,
			select option:checked {
			background: rgb(var(--action-0));
			color: rgb(var(--base));
			box-shadow: 0 0 0 100px rgb(var(--action-0)) inset;
			}

			select option:checked {
			background: rgb(var(--action-0)) linear-gradient(0deg, rgb(var(--action-0)) 0%, rgb(var(--action-0)) 100%);
			color: rgb(var(--base));
			}

			select:hover {
			border-color: rgb(var(--action-0));
			}

			select:focus {
			border-color: rgb(var(--action-0));
			}

			/******************************************************************
			STATUS INDICATORS
			SEARCH & SPECIAL INPUTS
			******************************************************************/
			.status,
			.item .status,
			.status-badge {
			input[type=search]:focus + .clear-search {
			opacity: 1;
			cursor: pointer;
			}

			.search-container .clear-search {
			opacity: 0;
			cursor: default;
			max-width: 0;
			padding: 0;
			flex-shrink: 0;
			transition: width var(--trans-base), flex-shrink var(--trans-base);
			}
			.search-container [type="search"]:focus + .clear-search {
			max-width: unset;
			padding: .25rem 1rem;
			flex-shrink: unset;
			}

			.search-container.open.open [hidden] {
			display: block!important;
			}

			.search-container .icon.search {
			padding: 4px 8px;
			color: rgb(var(--contrast-200));
			--w: 3rem;
			}

			input[type="search"]::-moz-search-clear-button,
			input[type="search"]::-ms-clear,
			input[type="search"]::-ms-reveal,
			input[type="search"]::search-cancel-button {
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
			display: none;
			visibility: hidden;
			}

			input[type="search"]::-webkit-search-decoration,
			input[type="search"]::-webkit-search-cancel-button,
			input[type="search"]::-webkit-search-results-button,
			input[type="search"]::-webkit-search-results-decoration {
			-webkit-appearance:none;
			}

			input[type=url] {
			background: var(--icon);
			background-position: .5em;
			background-size: 1em;
			background-repeat: no-repeat;
			padding-left: 2em;
			}
			/**************************************************
			TABS
			**************************************************/
			.tab-content[hidden] {
			display: block!important;
			transform: scaleY(0);
			max-height: 0;
			overflow: hidden;
			}

			.tab-content[hidden]:focus-within {
			transform: scaleY(1);
			max-height: max-content;
			}
			/**************************************************
			CARD
			**************************************************/
			.item-grid.stats {
			margin: 1rem 0;
			}
			.card {
			background-color: rgb(var(--base-100));
			border-radius: var(--radius);
			font-size: 0.875rem;
			font-weight: 500;
			text-transform: capitalize;
			box-shadow: rgba(var(--base), var(--op-45)) var(--shdw);
			aspect-ratio: 3/2;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-align: center;
			}
			.card h4 {
			margin: 0;
			text-transform: uppercase;
			}
			.stat-number {
			font-family: var(--heading);
			font-weight: var(--fw-h-bold);
			color: rgb(var(--action-0));
			font-size: var(--txt-xx-large);
			}
			/**************************************************
			PROGRESS
			**************************************************/
			.progress {
			width: 100%;
			}
			.progress .bar {
			height: 6px;
			display: block;
			border-radius: 6px;
			overflow: hidden;
			background: rgb(var(--base-200));
			position: relative;
			}

			[data-status="pending"],
			.status.pending,
			.status-badge.pending,
			#queue .item .status.pending {
			background: var(--base-100);
			color: var(--contrast-200);
			.progress .fill {
			height: 100%;
			background: rgb(var(--action-0));
			border-radius: 6px;
			width: 0;
			transition: width .3s ease;
			}
			.completed .fill {
			background: rgb(var(--action-200));
			}

			.progress .details {
			margin-top: 5px;
			font-size: var(--txt-x-small);
			color: rgb(var(--contrast));
			text-align: center;
			padding: .25rem 0;
			}

			[data-status="processing"],
			.status.processing,
			.status-badge.processing,
			#queue .item .status.processing {
			background: var(--base-200);
			color: var(--contrast-100);
			animation: pulse-color 2s infinite;
			.progress .details:empty {
			display: none;
			}
			.queued .fill::after,
			.pending .fill::after,
			.processing .fill::after,
			.uploading .fill::after {
			--delay: 0s;
			content: '';
			position: absolute;
			top: 0;
			left: -50%;
			width: 30%;
			height: 100%;
			background: linear-gradient(
			90deg,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, .225) 50%,
			rgba(255, 255, 255, 0) 100%
			);
			animation: shimmer 2.5s infinite linear var(--delay);
			}
			/**************************************************************
			DETAILS
			**************************************************************/
			details {
			padding: .25rem 0;
			border-top: 1px solid rgb(var(--base-200));
			border-bottom: 1px solid rgb(var(--base-200));
			}
			details[open] {
			background-color: rgb(var(--base-50));
			}

			details summary {
			list-style: none;
			text-transform: uppercase;
			cursor: pointer;
			border: 0;
			position: relative;
			padding: .5rem 2.5rem .5rem .5rem;
			gap: .5rem;
			}
			details summary:hover {
			background-color: rgb(var(--base-100));
			border-color: rgb(var(--base-100));
			color: rgb(var(--contrast));
			}
			details[open] > summary {
			background-color: rgb(var(--base-50));
			}
			details summary::after {
			content: '';
			position: absolute;
			right: .5rem;
			top: .5rem;
			background-color: rgb(var(--contrast-100));
			-webkit-mask-repeat: no-repeat;
			-webkit-mask-size: contain;
			-webkit-mask-image: var(--icon);
			mask-image: var(--icon);
			mask-repeat: no-repeat;
			mask-size: contain;
			width: 1.25rem;
			height: 1.25rem;
			margin-left: auto;
			transition: var(--trans-color), var(--trans-transform);
			}
			details summary:hover::after {
			background-color: rgb(var(--action-0));
			}
			details[open]:not(.all-filters) > summary::after {
			background-color: rgb(var(--contrast));
			transform: rotate(-540deg);
			transition: background-color var(--trans-base);
			transition-property: background-color, transform;
			}
			details::details-content {
			opacity: 0;
			block-size: 0;
			overflow-y: clip;
			transition: content-visibility var(--trans-t) allow-discrete, opacity var(--trans-t), block-size var(--trans-t);
			}

			details[open]::details-content {
			opacity: 1;
			block-size: auto;
			}

			@media (prefers-reduced-motion: no-preference){
			details {
			interpolate-size: allow-keywords;
			}
			}

			/********************************************************
			CODE
			********************************************************/

			code {
			width: 100%;
			margin: .5rem;
			padding: .5rem;
			user-select: all;
			text-align: center;
			border-radius: 4px;
			background-color: rgb(var(--base-200));
			}
			/********************************************************
			OVERLAYS
			********************************************************/
			dialog[open],
			aside.expanded {
			background-color: rgb(var(--base));
			box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);
			z-index: var(--z-5);
			}
			dialog::backdrop {
			backdrop-filter: blur(5px);
			background-color: rgba(var(--base),var(--op-4));
			}
			dialog[open],
			aside.main {
			border-radius: var(--radius-outer);
			overflow: hidden;
			}
			/ DIALOG /
			dialog[open] {
			z-index: var(--z-10);
			--padding: 0;
			top: 5vh;
			width: min(500px, 95vw);
			height: fit-content;
			max-height: 90vh;
			padding: var(--padding);
			background-color: rgb(var(--base-50));
			color: rgb(var(--contrast));
			border: 1px solid rgb(var(--base-200));
			}
			dialog:is(.create,.edit,.bulkEdit)[open] {
			width: 98vw;
			max-height: 98vh;
			top: 1vh;
			}
			dialog > .wrap {
			max-height: var(--maxHeight);
			overflow: hidden auto;
			margin: 0 0 0 1.5rem;
			padding-right: 1.5rem;
			padding-bottom: var(--btn);
			width: calc(100% - 1.5rem);
			}
			dialog label {
			font-weight: normal;
			}
			dialog h2,
			dialog h3 {
			margin: 0 0 .5rem 0;
			font-size: var(--txt-large);
			}

			dialog:has(.m-actions) {
			padding-bottom: var(--btn);
			}

			.m-actions {
			--w: 1.15em;
			--justify: flex-end;
			--wrap: nowrap;
			--gap: 0;
			position: absolute;
			bottom: 0;
			right: 0;
			left: 0;
			height: var(--btn);
			width: 100%;
			z-index: var(--z-6);
			background-color: rgb(var(--action-100));
			box-shadow: rgba(var(--base),var(--op-45)) var(--shdw-up);
			}
			.m-actions button {
			--wrap: nowrap;
			box-shadow: none;
			width: 100%;
			background-color: rgb(var(--action-0));
			color: var(--action-contrast);
			--gap: .75rem;
			font-size: var(--txt-x-small);
			border-radius: 0;
			height: var(--chipchip);
			}
			.m-actions button:hover,
			.m-actions button:focus {
			background-color: rgb(var(--base));
			color: rgb(var(--contrast));
			}
			.m-actions button:first-of-type {
			border-bottom-left-radius: 1rem;
			}
			.m-actions button:last-of-type {
			border-bottom-right-radius: 1rem;
			}
			dialog ul {
			list-style: none;
			}
			dialog .search-container {
			padding-top: 1rem;
			width: 100%;
			gap: .5rem;
			}

			/ GALLERY /
			img[data-gallery] {
			cursor: pointer;
			}
			dialog.gallery[open] {
			--max: calc(100% - 2rem);
			inset: 1rem;
			margin: 0;
			border: none;
			width: 100%;
			height: 100%;
			max-height: var(--max);
			max-width: var(--max);
			border-radius: 0;
			/background-color: rgba(var(--base), var(--op-6));/
			background-color: transparent;
			}
			dialog.gallery > .wrap {
			--wrap: nowrap;
			position: relative;
			overflow: hidden;
			max-height: none;
			margin: 0;
			padding: 0;
			height: 100%;
			width: 100%;
			inset: 0;
			}
			.gallery .hint {
			position: absolute;
			top: 1rem;
			left: 50%;
			transform: translateX(-50%);
			letter-spacing: .12em;
			pointer-events: none;
			z-index: 2;
			animation: hint-fade 3s ease forwards;
			}
			@keyframes hint-fade {
			0% { opacity: 1; }
			60% { opacity: 1; }
			100% { opacity: 0; }
			}
			.gallery .controls {
			--wrap: nowrap;
			--align: flex-end;
			--justify: space-between;
			--gap: 0;
			position: absolute;
			inset: 0;
			padding: 1rem;
			z-index: 3;
			pointer-events: none;
			}
			.gallery .controls button {
			min-height: var(--chipchip);
			pointer-events: all;
			background: rgba(var(--base), var(--op-45));
			border: 1px solid rgba(var(--contrast), var(--op-1));
			color: rgba(var(--contrast), var(--op-5));
			}
			.gallery .controls button:hover,
			.gallery .controls button:focus {
			background: rgba(var(--base), var(--op-5));
			color: rgb(var(--contrast));
			}
			.gallery .controls .cancel {
			position: absolute;
			top: 1rem;
			right: 1rem;
			}



			dialog.gallery .cancel:focus,
			dialog.gallery .cancel:hover {
			background: rgba(var(--base),var(--op-4));
			}


			dialog.gallery .content {
			position: relative;
			overflow: hidden;
			flex: 1;
			display: flex;
			}
			dialog.gallery .image-left,
			dialog.gallery .image-right {
			position: absolute;
			width: 0;
			height: 0;
			opacity: 0;
			pointer-events: none;
			left: var(--offScreen);
			}

			dialog.gallery .content .image {
			max-width: 100%;
			max-height: 100%;
			object-fit: contain;
			display: block;
			transform-origin: center center;
			will-change: transform;
			transition: transform 0.15s ease-out;
			touch-action: none;
			user-select: none;
			-webkit-user-drag: none;
			cursor: default;
			}
			.gallery .image[style*="scale(1)"],
			.gallery .image:not([style]) {
			cursor: default;
			}

			dialog.gallery details {
			position: absolute;
			width: 100%;
			max-width: none;
			bottom: 0;
			left: 0;
			right: 0;
			background: rgba(var(--base),var(--op-45));
			color: rgb(var(--contrast));
			border-radius: 4px;
			overflow: hidden;
			z-index: 3;
			}
			dialog.gallery details:has(.item-info:empty) {
			display: none;
			}

			dialog.gallery details summary {
			padding: 0.75rem 1rem;
			cursor: pointer;
			user-select: none;
			}

			dialog.gallery details[open] .item-info {
			padding: 0.75rem 1rem 1rem;
			font-size: var(--txt-x-small);
			}

			dialog.gallery .counter {
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			background: rgba(var(--base),var(--op-4));
			color: rgba(var(--contrast), var(--op-3));
			padding: .4rem .8rem;
			border-radius: 3px;
			font-size: var(--txt-small);
			letter-spacing: .1em;
			z-index: 3;
			}

			dialog.gallery .favourite {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 3;
			}

			dialog.gallery .image {
			opacity: 0;
			transition: opacity .2s ease, transform .15s ease-out;
			}

			dialog.gallery .image[src] {
			opacity: 1;
			}

			ul.gallery {
			display: flex;
			flex-wrap: wrap;
			margin: .2em;
			padding: 0;
			list-style-type: none;
			}
			ul.gallery::after {
			content: '';
			display: block;
			flex-grow: 10;
			}

			ul.gallery li {
			flex-grow: 1;
			height: 40vh;
			margin: .2em;
			overflow: hidden;
			}

			ul.gallery figure {
			min-width: 100%;
			height: 100%;
			}
			ul.gallery figure.duotone img {
			mix-blend-mode: multiply;
			}



			@media (max-aspect-ratio: 1/1) and (max-width: 480px) {
			ul.gallery {
			flex-direction: row;
			}
			ul.gallery li {
			height: auto;
			width: 100%;
			}
			ul.gallery figure {
			width: 100%;
			max-height: 75vh;
			min-width: 0;
			}
			}
			@media (max-aspect-ratio: 1/1) {
			ul.gallery li {
			height: 30vh;
			}
			}
			@media (max-height: 480px) {
			ul.gallery li {
			height: 80vh;
			}
			}
			/* POPUPS: notifications, cart, queue */
			aside.main.main {
			--wrap: nowrap;
			--align: stretch;
			--dir: column;
			position: fixed;
			top: var(--btnbtn);
			bottom: var(--btn_);
			width: min(500px, calc(100vw - 2rem));
			padding: 0 0 var(--btn);
			}
			aside.main.left {
			border-radius: 0 var(--radius-outer) var(--radius-outer) 0;
			left: var(--offScreen);
			transition: left var(--trans-base);
			}
			aside.main.left.expanded {
			left: 0;
			}
			aside.main.right {
			border-radius: var(--radius-outer) 0 0 var(--radius-outer);
			right: var(--offScreen);
			transition: right var(--trans-base);
			}
			aside.main.right.expanded {
			right: 0;
			}
			aside.main nav.tabs {
			--gap: 0;
			flex-shrink: 0;
			}
			aside.main > .wrap {
			max-height: 100%;
			overflow: hidden auto;
			}
			aside.main header {
			--w: 2em;
			background-color: rgb(var(--action-0));
			color: var(--action-contrast);
			padding: 1rem;
			}
			.tab-content header {
			width: calc(100% + 2rem);
			left: -1rem;
			top: -1rem;
			position: relative;
			}
			.main header .icon {
			margin-right: 1em;
			}
			.main h3 {
			font-size: var(--txt-large);
			margin: .5rem 0;
			}
			aside.main nav.share {
			--dir: row;
			--align: center;
			margin: 0;
			border-bottom: 1px solid rgb(var(--base-200));
			}
			nav.share ul,
			nav.share li,
			nav.share a {
			height: var(--chipchip);
			}
			nav.share a:hover {
			background-color: rgb(var(--action-0));
			color: var(--action-contrast);
			}
			aside.main h4,
			aside.main .hint {
			text-align: center;
			}
			aside.main .tab-content {
			flex-shrink: 0;
			}
			aside.main .tab-content.active {
			flex: 1;
			overflow: hidden auto;
			padding: 1rem;
			}
			.main section {
			padding: 1rem;
			}
			.main section + section {
			border-top: 1px solid rgb(var(--base-200));
			}

			.qtoggle .count,
			.indicator {
			position: absolute;
			top: -.5em;
			right: -.5em;
			width: .75em;
			height: .75em;
			border-radius: 50%;
			}
			.qtoggle .indicator {
			top: 0;
			right: 0;
			}
			.qtoggle .count {
			right:unset;
			left: .25rem;
			top: .25rem;
			font-size: var(--txt-small);
			}
			#queue.synced + .qtoggle .indicator {
			background-color: rgb(var(--success));
			}

			#queue.pending + .qtoggle .indicator {
			background-color: rgb(var(--warning));
			animation: pulse 2s infinite;
			}

			.refresh.fetching .icon,
			#queue.pending:not(.expanded) + .qtoggle .icon {
			background-color: rgb(var(--action-0));
			animation: spin 1s var(--trans-fn) infinite;
			}
			.main.expanded + .qtoggle {
			width: calc(min(500px, calc(100vw - 2rem)) - var(--btn));
			}

			[data-status="completed"],
			.status.completed,
			.status-badge.consulted,
			.status-badge.treated,
			#queue .item .status.completed {
			background: var(--success);
			color: var(--successText);
			.main-actions .buttons:has(.expanded) {
			width: calc(min(500px, calc(100vw - 2rem)));
			}
			.main.expanded + .qtoggle {
			left: var(--btn);
			border-bottom-right-radius: var(--radius-outer);
			}
			.main-actions .buttons:has(.expanded) {
			right: 0;
			}
			.main-actions button.expanded {
			border-bottom-left-radius: var(--radius-outer);
			width: 100%;
			}
			.buttons:has(.expanded) > button:not(.expanded) {
			display: none;
			}

			[data-status="failed"],
			.status.failed,
			.status-badge.error,
			#queue .item .status.failed {
			background: var(--error);
			color: var(--errorText);
			.main nav.filters {
			width: 100%;
			height: var(--chipchip);
			--justify: flex-start;
			--align: flex-end;
			}
			.main nav.filters li {
			overflow: visible;
			}
			.main .btn + label {
			min-height: var(--chip);
			min-width: var(--chip);
			overflow: visible;
			}
			.btn + label .indicator:not(:empty) {
			font-size: var(--txt-small);
			background-color: rgb(var(--base));
			border: 1px solid rgb(var(--contrast));
			width: 1.75em;
			height: 1.75em;
			padding: .3em;
			}

			.main > .header {
			border-bottom: 1px solid rgb(var(--base-200));
			padding: 1rem 0;
			flex-shrink: 0;
			}
			.main .item-grid {
			flex: 1;
			overflow: hidden auto;
			overflow-anchor: none;
			padding: .5rem 2rem;
			--gap: .5rem;
			}
			.queue-actions {
			flex-shrink: 0;
			border-top: 1px solid rgb(var(--base-200));
			}
			.queue-actions button {
			width: 100%;
			}

			.main .item {
			background-color: rgb(var(--base-50));
			padding: 15px;
			border-radius: var(--radius);
			box-shadow: var(--shdw-none);
			font-size: var(--txt-x-small);
			}
			.main .item .header {
			position: relative;
			padding: .25rem 0;
			}
			.main .item .actions {
			width: 100%;
			}
			.main .item button {
			min-height: var(--chip);
			font-size: var(--txt-x-small);
			--w: var(--txt-x-small);
			}
			.main .item .time {
			padding: .5rem 0;
			font-size: var(--txt-small);
			border: 1px solid rgb(var(--base-200));
			border-width: 1px 0;
			margin: .25rem 0;
			}
			.main .item .progress .details {
			text-align: right;
			font-size: var(--txt-small);
			width: 100%;
			}
			/* MAIN ACTIONS */
			.main-actions .buttons {
			transition: width var(--trans-base), right var(--trans-base);
			right: .5rem;
			width: var(--btn);
			margin: 0;
			}
			.attn {
			animation: pulse-color 5s infinite;
			animation-delay: 1s;
			}
			.attn.expanded {
			animation: none;
			}

			/********************************************************
			CALLOUTS
			********************************************************/
			.callalt.callalt,
			.callout.callout {
			padding: 2rem;
			margin: 0;
			max-width: none;
			grid-column: full;
			}

			@media (min-width: 768px){
			.callout.callout {
			padding: 2rem 20vw;
			}
			}

			.callout.callout {
			background-color: rgb(var(--action-0));
			color: var(--action-contrast);
			}

			.callalt.callalt {
			background-color: rgb(var(--secondary-0));
			color: var(--secondary-contrast);
			}

			.callalt :is(h1, h2, h3, h4, h5, h6),
			.callout :is(h1, h2, h3, h4, h5, h6) {
			font-family: var(--body);
			font-weight: var(--fw-b-bold);
			margin: 1rem 0 0;
			width: 100%;
			}

			.callout a {
			background-color: var(--action-contrast);
			padding: 0 .125rem;
			border-radius: 4px;
			}
			/********************************************************
			WP BLOCKS
			********************************************************/
			/ MEDIA TEXT /
			.media-text > * {
			flex: 1;
			}
			/ COVER /
			.cover {
			--color: rgba(var(--action-0), var(--op-5));
			position: relative;
			overflow: hidden;
			min-height: 60vh;
			padding: var(--btn);
			}

			.cover:not(.duotone)::before {
			content: '';
			/z-index: var(--coverIndex);/
			background-color: var(--dark-0);
			/mix-blend-mode: var(--coverBlend);/
			/background-position: center;/
			/background-repeat: no-repeat;/
			/background-size: cover;/
			}
			.cover .overlay {
			background-color: var(--dark-0);
			}
			.overlay.op-1 {
			opacity: var(--op-1);
			}
			.overlay.op-2 {
			opacity: var(--op-2);
			}
			.overlay.op-3 {
			opacity: var(--op-3);
			}
			.overlay.op-4 {
			opacity: var(--op-4);
			}
			.overlay.op-45 {
			opacity: var(--op-45);
			}
			.overlay.op-5 {
			opacity: var(--op-5);
			}
			.overlay.op-6 {
			opacity: var(--op-6);
			}
			.cover:has(.overlay)::before {
			display: none;
			}
			.cover .overlay,
			.cover:not(.duotone)::before,
			.cover > video,
			.cover > img {
			position: absolute;
			inset: 0;
			width: 100%;
			max-width: none!important;
			height: 100%;
			margin: 0;
			}
			.cover > img,
			.cover > video {
			mix-blend-mode: luminosity;
			max-width: none!important;
			width: 100%!important;
			}
			.cover .overlay,
			.cover:not(.duotone)::before {
			z-index: 2;
			background-color: var(--color);
			mix-blend-mode: color;
			}


			.cover .content {
			z-index: 5;
			position: relative;
			overflow: hidden auto;
			width: max-content;
			height: max-content;
			max-width:100%;
			max-height: 100%;
			}

			.cover > img {
			/z-index: 1;/
			/opacity: .5;/
			/mix-blend-mode: luminosity;/
			object-fit: cover;
			}

			@media (min-width: 768px) {
			.cover > img {
			/opacity: .33;/
			}
			}
			/ IMAGE /
			figure {
			overflow: hidden;
			position: relative;
			}
			figure:is(.op-1,.op-2,.op-3,.op-4,.op-5,.op-6,.op-45)::before {
			position: absolute;
			inset: 0;
			pointer-events: none;
			content: '';
			}
			figure.op-1::before {
			opacity: var(--op-1);
			}
			figure.op-2::before {
			opacity: var(--op-2);
			}
			figure.op-3::before {
			opacity: var(--op-3);
			}
			figure.op-45::before {
			opacity: var(--op-45);
			}
			figure.op-4::before {
			opacity: var(--op-4);
			}
			figure.op-5::before {
			opacity: var(--op-5);
			}
			figure.op-6::before {
			opacity: var(--op-6);
			}

			figure.action-0::before {
			background-color: rgb(var(--action-0));
			}
			figure.action-50::before {
			background-color: rgb(var(--action-50));
			}
			figure.action-100::before {
			background-color: rgb(var(--action-100));
			}
			figure.action-200::before {
			background-color: rgb(var(--action-200));
			}
			figure.secondary-0::before {
			background-color: rgb(var(--secondary-0));
			}
			figure.secondary-50::before {
			background-color: rgb(var(--secondary-50));
			}
			figure.secondary-100::before {
			background-color: rgb(var(--secondary-100));
			}
			figure.secondary-200::before {
			background-color: rgb(var(--secondary-200));
			}
			figure.base::before {
			background-color: rgb(var(--base));
			}
			figure.base-50::before {
			background-color: rgb(var(--base-50));
			}
			figure.base-100::before {
			background-color: rgb(var(--base-100));
			}
			figure.base-200::before {
			background-color: rgb(var(--base-200));
			}
			figure.contrast::before {
			background-color: rgb(var(--contrast));
			}
			figure.contrast-50::before {
			background-color: rgb(var(--contrast-50));
			}
			figure.contrast-100::before {
			background-color: rgb(var(--contrast-100));
			}
			figure.contrast-200::before {
			background-color: rgb(var(--contrast-200));
			}

			.bg-fixed {
			background-attachment: fixed;
			}
			.bg-repeat.bg-repeat {
			background-repeat: repeat;
			background-size: 33vw;
			}
			[data-bg-img] {
			background-size: cover;
			background-repeat: no-repeat;
			}
			/ BLOCKQUOTE /
			blockquote {
			margin-left: 10vw;
			position: relative;
			padding: var(--btn);
			}
			blockquote .icon {
			position: absolute;
			top: var(--btn);
			left: calc((10vw + var(--btn)) * -1);
			--w: 10vw;
			opacity: var(--op-1);
			}

			blockquote cite {
			padding: 15px 0 0 12px;
			margin: 0 0 0 150px;
			z-index: 1;
			}

			blockquote.pull {
			background-color: unset;
			border-radius: 0;
			margin: 4rem auto;
			padding: 3rem;
			box-shadow: rgba(var(--base),var(--op-45)) var(--shdw-down), rgba(var(--base),var(--op-45)) var(--shdw-up);;
			}

			blockquote.pull cite {
			margin: 0;
			}
			/ QUERY /
			.loop {
			padding: var(--sp4) var(--sp1);
			}
			.loop :is(h1,h2,h3,h4,h5,h6) {
			margin: .5em 0;
			}
			.loop :is(h1,h2,h3,h4,h5,h6):has(+ time) {
			margin-bottom: 0;
			}
			.loop :is(h1,h2,h3,h4,h5,h6) + time {
			font-size: var(--txt-x-small);
			margin-top: 0;
			}
			.loop li {
			list-style: none;
			}
			.loop p:has(.read-more) {
			text-align: right;
			}

			.loop li > figure {
			float: left;
			margin-right: var(--chip_);
			margin-top: 0;
			max-width: 30%;
			aspect-ratio: 1;
			}

			.no-results p,
			.no-results {
			display: flex;
			justify-content: center;
			align-items: center;
			}


			/ TODO: LIST OVERRIDES /
			/*********************************************************
			DIRECTORY
			*********************************************************/
			.directory-list > ul {
			max-width: none;
			}
			.directory-list .image {
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			}
			.directory-list img {
			width: 70px;
			}
			.directory-list h3 {
			margin: 0;
			text-align: center;
			font-weight: var(--fw-h-bold);
			position: sticky;
			font-size: var(--txt-enormous);
			width: 100%;
			top: var(--btn);
			left: 0;
			color: rgb(var(--base));
			text-shadow: rgb(var(--base-200)) 1px 1px 0;
			user-select: none;
			}
			.directory-list >ul > li {
			padding: 2rem;
			align-items: flex-start;
			}
			.directory-list >ul > li:nth-of-type(even) {
			background-color: rgb(var(--base-100));
			}

			/ The letter's list /
			.directory-list ul ul {
			width: 100%;
			}
			.directory-list ul ul li {
			padding: .35rem .5rem;
			}
			.directory-list ul ul li:nth-of-type(even) {
			background-color: rgb(var(--base-100));
			}
			.directory-list ul li:nth-of-type(even) ul li:nth-of-type(even) {
			background-color: rgb(var(--base-50));
			}
			@media (min-width: 768px) {
			.directory-list h3 {
			width: 20vw;
			}
			.directory-list ul ul {
			min-height: var(--txt-enormous);
			}
			.directory-list >ul > li {
			padding: 2rem 10vw;
			}
			}

			/******************************************************************
			LOADING
			@@ -2308,9 +3531,9 @@
			height: fit-content;
			width: min(400px, 60vw);
			border-radius: var(--radius-outer);
			background-color: rgba(var(--base-rgb),var(--op-4));
			background-color: rgba(var(--base),var(--op-4));
			padding: 2rem;
			box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
			box-shadow: rgba(var(--base),var(--op-45)) var(--shdw);
			position: relative;
			}

			@@ -2325,7 +3548,7 @@
			}

			.loading[open] i.icon {
			background-color: var(--action-0);
			background-color: rgb(var(--action-0));
			}

			dialog.loading[open] i.icon {
			@@ -2333,7 +3556,7 @@
			}

			dialog.loading[open] h3 {
			color: var(--contrast);
			color: rgb(var(--contrast));
			margin: 2rem 1rem auto !important;
			font-size: var(--txt-large);
			width: -moz-fit-content;
			@@ -2357,1697 +3580,12 @@
			width: 12px;
			height: 12px;
			border: 2px solid transparent;
			border-top: 2px solid var(--action-50);
			border-top: 2px solid rgb(var(--action-50));
			border-radius: 50%;
			animation: spin 1s var(--trans-fn) infinite;
			}

			/*****************************************************************************
			MENU
			*****************************************************************************/
			.toggle-details {
			gap: 2px;
			}

			body.menu_item #top {
			z-index: var(--z-4);
			position: relative;
			}

			section .toggle-details {
			position: absolute;
			right: 0;
			top: 5rem;
			}

			[data-toggle=all] {
			position: fixed;
			bottom: calc(var(--btn_) + var(--btn) + .5rem);
			right: 0;
			z-index: var(--z-4);
			background-color: var(--action-0);
			color: var(--action-contrast);
			}

			[data-toggle] {
			z-index: var(--z-1);
			}

			body:has(#queue[hidden]) [data-toggle=all] {
			left: 1rem;
			}

			dialog:not([open]).col,
			dialog:not([open]).row {
			display: none;
			}

			@media (min-width:768px) {
			section .toggle-details {
			right: -10%;
			}
			}

			/********************************************
			TYPE TEXT
			********************************************/
			.typeText::after {
			content: '\|';
			display: inline-block;
			margin-left: 0;
			animation: blink .75s step-end infinite;
			}

			@keyframes blink {
			from, to { opacity: 1; }
			50% { opacity: 0; }
			}

			/**************************************************
			POPUPS: toast, cart, queue
			**************************************************/
			aside.main {
			--wrap: nowrap;
			--align: stretch;
			position: fixed;
			top: var(--btnbtn);
			bottom: var(--btn_);
			width: min(500px, calc(100vw - 2rem));
			background-color: var(--base);
			z-index: var(--z-5);
			box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
			padding: 1rem 1rem var(--btn);
			overflow: hidden auto;
			}
			aside.main.referral {
			padding-top: 0;
			}
			aside.main.referral nav.tabs {
			padding: 1rem 0;
			background-color:var(--base);
			height: max-content;
			min-height: var(--btn);
			}

			.qtoggle {
			z-index: var(--z-6);
			position: fixed;
			bottom: var(--btn_);
			width: var(--btn);
			height: var(--btn);
			background-color: rgba(var(--base-rgb),var(--op-4));
			color: var(--contrast);
			box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
			transition: var(--trans-size), var(--trans-color);
			}

			.qtoggle:hover,
			.qtoggle:focus {
			background-color: rgba(var(--action-rgb),var(--op-6));
			color: var(--action-contrast);
			}

			.qtoggle:disabled,
			.qtoggle:disabled:hover,
			.qtoggle:disabled:focus {
			opacity: .5;
			background-color: rgba(var(--base-rgb),var(--op-3));
			color: var(--contrast);
			}

			/******************
			CART
			******************/
			.toggle-cart {
			right: 0;
			border-radius: 4px 4px 4px var(--radius-outer);
			}

			body:has(#cart.expanded) .toggle-cart .icon {
			display: none;
			}

			aside#cart {
			padding-bottom: 6rem;
			}

			#cart form {
			max-height: 100%;
			overflow: hidden auto;
			}

			#cart nav.tabs {
			z-index: var(--z-6);
			top: 0;
			}

			#cart table {
			height: auto;
			}

			#cart th {
			padding: 0 1.5rem;
			}

			#cart table th:first-of-type {
			width: 100%;
			}

			#cart nav.tabs {
			position: sticky;
			box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
			}

			#cart button[data-tab] {
			flex: 1;
			border-radius: 0;
			}

			#cart form > *:not(.tabs) {
			max-width: 90%;
			margin: 0 auto;
			}

			#cart form .empty p {
			margin: .5rem 0!important;
			}

			#cart .cart-total.cart-total {
			--gap: 0 1rem;
			padding-right: 1rem;
			position: absolute;
			bottom: var(--btn);
			width: 100%;
			max-width: 100%;
			background-color: rgba(var(--base-rgb),var(--op-6));
			z-index: var(--z-6);
			box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw-up);
			}

			.cart-total p {
			--gap: 2rem;
			max-width: 100%;
			margin: 0;
			}

			.cart-total p span {
			width: 6rem;
			display: inline-block;
			text-align: right;
			}

			.cart-total p + p {
			font-weight: bold;
			}

			.cart-items .total {
			font-weight: bold;
			}

			#cart .restored {
			background-color: rgba(var(--action-rgb), var(--op-3));
			border-radius: var(--radius-outer);
			padding: 1rem;
			}

			.restored h3 {
			font-size: var(--txt-medium);
			margin: 0;
			}

			.restored p {
			margin: 0;
			}

			.restored .row {
			--gap: 0;
			--wrap:nowrap;
			--w: 1em;
			}

			/******************
			TOAST
			******************/
			.toasts {
			position: fixed;
			top: 4rem;
			right: -350px;
			z-index: 1000;
			width: 350px;
			}

			.toast {
			background-color: rgba(var(--base-rgb),var(--op-6));
			border-left: 4px solid var(--action-0);
			padding: 1rem;
			box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
			left: 0;
			position: relative;
			opacity: 0;
			transition: left .3s, opacity .3s;
			}

			.toast.success {
			border-left-color: var(--success);
			}

			.toast.error {
			border-left-color: var(--error);
			}

			.toast.info {
			border-left-color: var(--warning);
			}

			.toast.show {
			left: calc(-350px - 1rem);
			opacity: 1;
			}

			.toast.hiding {
			left: 0;
			opacity: 0;
			}

			.toast-content p {
			margin: 0;
			}

			.close-toast {
			background: none;
			border: none;
			font-size: 1.25rem;
			cursor: pointer;
			opacity: .5;
			transition: opacity .2s;
			color: inherit;
			}

			.close-toast:hover {
			opacity: 1;
			}

			/******************
			QUEUE
			******************/
			#queue#queue {
			width: min(500px, calc(100vw - 2rem));
			}

			#queue > * {
			max-width: 100%;
			}

			.qtoggle {
			left: 0;
			border-radius: 4px 4px var(--radius-outer) 4px;
			}

			.qtoggle.expanded {
			left: var(--btn);
			width: min(calc(500px - var(--btn)), calc(100vw - 2rem - var(--btn)));
			}

			.qtoggle.saving .icon {
			background-color: var(--action-0);
			animation: spin .87s var(--trans-fn) infinite;
			}

			#queue .status-actions {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: var(--z-2);
			}

			#queue .status-actions .popup {
			position: absolute;
			z-index: -1;
			width: max-content;
			max-width: 300px;
			background-color: var(--action-50);
			color: var(--action-contrast);
			border-radius: var(--radius);
			padding: .25em .75em;
			top: 1rem;
			left: -100vw;
			transition: left var(--trans-base);
			}

			aside#queue .popup::before{
			content: '';
			width: 10px;
			height: 10px;
			transform: rotate(-45deg);
			background-color: var(--action-50);
			z-index: -1;
			left: -5px;
			position: absolute;
			top: calc(50% - 5px);
			}

			.expanded#queue .status-actions .popup.showing {
			left: calc(100% + 1em);
			}

			#queue .status-actions .popup.showing {
			left: calc(200vw + var(--btn_));
			max-width: 75vw;
			}

			/ BADGES /
			.refresh .countdown,
			#queue .item .status,
			.filter .count,
			.qtoggle .count,
			.qtoggle .indicator {
			z-index: var(--z-3);
			--offset: 0;
			position: absolute;
			top: var(--offset);
			background-color: rgba(var(--base-rgb),var(--op-3));
			}

			.expanded + .qtoggle .indicator,
			.expanded + .qtoggle .count {
			--offset: .25rem;
			}

			/* Status indicator */
			.qtoggle .indicator {
			right: var(--offset);
			width: .75rem;
			height: .75rem;
			border-radius: 50%;
			}

			aside#queue.synced + .qtoggle .indicator {
			background-color: var(--success);
			}

			aside#queue.pending + .qtoggle .indicator {
			background-color: var(--warning);
			animation: pulse 2s infinite;
			}

			.refreshNow.fetching .icon,
			aside#queue.pending:not(.expanded) + .qtoggle .icon {
			background-color: var(--action-0);
			animation: spin 1s var(--trans-fn) infinite;
			}

			/* Status count badge */

			/.refresh .countdown {/
			/* --justify:center;*/
			/* --align: center;*/
			/* --offset: 0;*/
			/* left: .25rem;*/
			/* margin: 0 3px;*/
			/* border-radius: 50%;*/
			/* background-color: var(--base);*/
			/* width: 1em;*/
			/* height: 1em;*/
			/}/
			.refresh .countdown,
			.qtoggle .count {
			--align: center;
			--justify: center;
			left: var(--offset);
			min-width: 1.25rem;
			height: 1.25rem;
			padding: 0 4px;
			color: var(--contrast);
			border-radius: var(--radius);
			font-size: var(--txt-x-small);
			}

			#queue:has(.empty-queue) + .qtoggle .count {
			display: none;
			}

			aside#queue .header {
			padding: 15px;
			border-bottom: 1px solid var(--base-200);
			flex-shrink: 0;
			--height: max-content;
			width: 100%;
			}

			.qitems {
			flex: 1;
			width: 100%;
			overflow: hidden auto;
			overflow-anchor: none;
			padding: .5rem 2rem;
			--gap: .5rem;
			}

			.qitems .item {
			width: 100%;
			}

			.qitems button {
			--height: max-content;
			}

			aside#queue h3 {
			margin: 0;
			font-size: 16px;
			color: var(--contrast);
			}

			#queue .filters {
			padding: 1rem 0 0;
			width: 100%;
			}
			#queue .filters .btn + label {
			width: max-content;
			position: relative;
			height: var(--chip_);
			font-size: var(--txt-x-small);
			font-weight: var(--fw-h-light);
			box-shadow: var(--shdw-none);
			}
			#queue .filters label .count {
			width: 1em;
			height: 1em;
			position: absolute;
			top: -8px;
			right: -4px;
			background: var(--base-100);
			border-radius: 50%;
			z-index: 5;
			}
			#queue .filters label .count:empty {
			display: none;
			}
			#queue .failed .bar,
			#queue .failed_permanent .bar {
			background-color: var(--error);
			opacity: .2;
			}
			#queue span.completed {
			margin-left: auto;
			}

			#queue .filters .filter {
			background-color: transparent;
			white-space: nowrap;
			font-size: var(--txt-x-small);
			}

			#queue .filters .filter.active {
			background: var(--base-200);
			border-color: transparent;
			}

			#queue .filter:hover,
			#queue .filter:focus {
			background-color: var(--action-0);
			color: var(--action-contrast);
			}

			#queue .progress .row.btw {
			--justify: flex-end;
			}
			#queue .progress .details {
			font-size: var(--txt-small);
			}

			/* Filter count badge */
			.filter .count {
			--offset: -8px;
			right: var(--offset);
			background: var(--base-200);
			color: var(--contrast-200);
			border-radius: 10px;
			min-width: 18px;
			height: 18px;
			font-size: 10px;
			}

			.filter .count:empty {
			display: none;
			}

			/* Empty state */
			.empty-queue {
			height: 100px;
			color: var(--contrast-200);
			font-size: var(--txt-x-small);
			font-style: italic;
			}

			.refresh .countdown:not(.counting),
			aside#queue:has(.empty-queue) .refresh .count {
			display: none;
			}

			/* Queue items */
			#queue .item {
			padding: 15px;
			background: var(--base-100);
			border-radius: var(--radius);
			transition: all .2s ease;
			box-shadow: var(--shdw-none);
			}

			#queue .item:hover {
			box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
			}

			#queue .item .header {
			position: relative;
			padding: .25rem 0;
			}

			#queue .item .type {
			font-size: var(--txt-x-small);
			}

			#queue .item .status {
			--w: 1.3em;
			--gap: 0;
			--justify:center;
			--align: center;
			--offset: -1.2rem;
			aspect-ratio: 1;
			right: var(--offset);
			border-radius: 50%;
			color: var(--contrast-200);
			background-color: var(--base-50);
			border: 1px solid var(--base-200);
			width: 2em;
			height: 2em;
			}


			#queue .item .status.completed:hover {
			color: var(--contrast-200);
			}

			#queue .item button {
			font-size: 16px;
			padding: 0;
			line-height: 1;
			opacity: .5;
			min-height: 0;
			transition: opacity .2s;
			}

			#queue .item button:hover {
			opacity: 1;
			}

			/* Item details */
			#queue .item .info {
			margin-top: 8px;
			font-size: var(--txt-x-small);
			}

			#queue .item .info .time {
			--gap: 7px;
			font-size: 10px;
			}

			/* Item actions */
			#queue .item .actions {
			--gap: 8px;
			margin-top: 1rem;
			}

			#queue .item .actions button {
			padding: 6px 12px;
			font-size: 12px;
			background: var(--base-200);
			border: none;
			border-radius: 4px;
			cursor: pointer;
			transition: all .2s;
			color: var(--contrast);
			}

			#queue .item .actions .retry {
			background-color: var(--secondary-200);
			color: var(--secondary-contrast);
			}

			#queue .item .actions button:hover {
			opacity: .9;
			}

			/* Queue actions footer */
			.queue-actions {
			padding: .5rem 0;
			border-top: 1px solid var(--base-200);
			flex-shrink: 0;
			}

			.queue-actions button {
			--height: max-content;
			padding: .75rem;
			width: 100%;
			font-size: var(--txt-x-small);
			}

			/* Refresh area */
			.status-actions > .refresh {
			position: relative;
			font-size: var(--txt-x-small);
			}


			.refreshNow {
			width: var(--btn);
			height: var(--btn);
			}

			.refreshNow:hover {
			background: var(--base-200);
			color: var(--contrast-200);
			}

			.icon.refresh {
			--w: 18px;
			}

			/**************************************************
			DELAY
			**************************************************/
			.item-grid, #queue {
			counter-reset: delay-counter;
			}

			.item {
			counter-increment: delay-counter;
			}

			.item .progress .fill::after {
			--delay: calc(counter(delay-counter) * .1s);
			}

			/**************************************************
			PROGRESS
			**************************************************/
			.progress .bar {
			height: 6px;
			display: block;
			border-radius: 6px;
			overflow: hidden;
			background: var(--base-200);
			position: relative;
			}

			.progress .fill {
			height: 100%;
			background: var(--action-0);
			border-radius: 6px;
			width: 0;
			transition: width .3s ease;
			}

			.progress .details {
			margin-top: 5px;
			font-size: var(--txt-x-small);
			color: var(--contrast);
			text-align: center;
			padding: .25rem 0;
			}

			.progress .details:empty {
			display: none;
			}

			.queued .fill::after,
			.pending .fill::after,
			.processing .fill::after,
			.uploading .fill::after {
			--delay: 0s;
			content: '';
			position: absolute;
			top: 0;
			left: -50%;
			width: 30%;
			height: 100%;
			background: linear-gradient(
			90deg,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, .225) 50%,
			rgba(255, 255, 255, 0) 100%
			);
			animation: shimmer 2.5s infinite linear var(--delay);
			}

			/**************************************************
			ACTIONS
			**************************************************/
			.additional-actions.additional-actions {
			padding: 0;
			background-color: transparent;
			}

			.additional-actions .buttons {
			position: fixed;
			bottom: var(--btn_);
			right: 1rem;
			margin: 0;
			--gap: 1rem;
			z-index: var(--z-6);
			width: fit-content;
			}

			.additional-actions .buttons button {
			height: var(--btn);
			width: var(--btn);
			background-color: rgba(var(--base-rgb),var(--op-4));
			color: var(--contrast);
			box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
			}

			.additional-actions .buttons button:hover {
			background-color: var(--action-0);
			color: var(--action-contrast);
			}

			.additional-actions .buttons button:disabled,
			.additional-actions .buttons button:disabled:hover,
			.additional-actions .buttons button:disabled:focus {
			opacity: .5;
			background-color: rgba(var(--base-rgb),var(--op-3));
			color: var(--contrast);
			}

			.additional-actions .buttons button:last-of-type {
			border-radius: 4px 4px 4px var(--radius-outer);
			}

			aside.left {
			transition: left var(--trans-base);
			left: var(--offScreen);
			border-radius: 0 var(--radius-outer) var(--radius-outer) 0;
			}

			aside.left.expanded {
			left: 0;
			}

			aside.right {
			transition: right var(--trans-base);
			right: var(--offScreen);
			border-radius: var(--radius-outer) 0 0 var(--radius-outer);
			}

			aside.right.expanded {
			right: 0;
			}

			aside.right.expanded button.close {
			position: sticky;
			bottom: calc(var(--btn) * -1);
			left: 0;
			border-bottom-left-radius: var(--radius-outer);
			width: var(--btn);
			height: var(--btn);
			}

			.additional-actions .buttons:has(.expanded) button:not(.expanded) {
			display: none;
			}

			.additional-actions .buttons:has(.expanded){
			right: 0;
			}
			.additional-actions .buttons button {
			transition: right var(--trans-base), var(--trans-size);
			}
			.additional-actions .buttons .expanded {
			width: calc(min(500px, calc(100vw - 2rem)));
			background-color: var(--base);
			}

			.additional-actions .buttons button:hover,
			.additional-actions .buttons .expanded:hover {
			background-color: var(--action-0);
			color: var(--action-contrast);
			}

			[type=submit] {
			width: 100%;
			height: var(--btn);
			background-color: var(--action-0);
			color: var(--action-contrast);
			box-shadow: var(--shdw-none);
			font-weight: bold;
			}

			[type=submit]:hover {
			box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
			border: 2px solid var(--action-0);
			color: var(--action-0);
			background-color: var(--action-contrast);
			}

			aside nav.tabs {
			position: sticky;
			bottom: unset;
			top: 0;
			left: 0;
			right: 0;
			}

			aside .tab-content.active {
			padding: 1rem;
			min-height: 100%;
			}

			aside header h3 {
			font-size: var(--txt-medium);
			margin: 1rem 0;
			text-align: center;
			}

			aside header p {
			margin: .25rem 0;
			text-align: center;
			}

			aside h4 {
			font-size: var(--txt-x-small);
			margin: 1rem 0 0 0;
			}

			code {
			width: 100%;
			margin: .5rem;
			padding: .5rem;
			user-select: all;
			text-align: center;
			border-radius: 4px;
			background-color: var(--base-200);
			border: 1px solid var(--contrast-200);
			}

			.restore-form {
			background-color: rgba(var(--action-rgb), var(--op-3));
			border: 1px solid var(--action-200);
			padding: .5rem;
			border-radius: var(--radius-outer);
			margin: 1rem 2rem;
			}

			.restore-form h3 {
			text-align: center;
			margin: 1rem 0 0;
			font-size: var(--txt-medium);
			}

			.restore-form p {
			margin: .5rem 0;
			}

			.fstatus {
			z-index: var(--z-5);
			background-color: rgba(var(--base-rgb),var(--op-6));
			border-radius: 4px;
			padding: 0 .5rem;
			position: fixed;
			top: var(--btnbtn);
			right: 1rem;
			--w: 1em;
			box-shadow:var(--shdw);
			display:flex;
			flex-wrap: nowrap;
			gap: 1rem;
			}
			@media (min-width: 768px) {
			.fstatus {
			right:calc(var(--btn_) + 1rem);
			bottom: 0;
			top: unset;
			}
			body:has(.fixed.bottom) .fstatus {
			bottom: var(--btn_);
			}
			}

			.fstatus .spinner {
			display: none;
			}

			.fstatus.loading .spinner {
			display: inline-block;
			}

			.fstatus p {
			margin: 0;
			padding: .25rem;
			}

			/**************************************************
			CALLOUT SECTIONS
			**************************************************/
			.callalt.callalt,
			.callout.callout {
			padding: 2rem;
			margin: 0;
			max-width: none;
			grid-column: full;
			}

			@media (min-width: 768px){
			.callout.callout {
			padding: 2rem 20vw;
			}
			}

			.callout.callout {
			background-color: var(--action-0);
			color: var(--action-contrast);
			}

			.callalt.callalt {
			background-color: var(--secondary-0);
			color: var(--secondary-contrast);
			}

			.callalt :is(h1, h2, h3, h4, h5, h6),
			.callout :is(h1, h2, h3, h4, h5, h6) {
			font-family: var(--body);
			font-weight: var(--fw-b-bold);
			margin: 1rem 0 0;
			width: 100%;
			}

			.callout a {
			background-color: var(--action-contrast);
			padding: 0 .125rem;
			border-radius: 4px;
			}

			.attn {
			animation: pulse-color 5s infinite;
			animation-delay: 1s;
			}
			.media-text > div,
			.media-text figure {
			width: 100%;
			margin: 0;
			}

			@media (min-width:768px ){
			.media-text {
			--wrap: nowrap;
			}
			}

			.media-text > div {
			max-width: var(--content);
			margin: 0 auto;
			padding: 2rem;
			}

			.timeline.terms ul,
			.timeline.terms {
			list-style: none;
			display: inline-flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: flex-start;
			}
			.timeline.terms ul {
			gap: 1rem;
			}

			.timeline.terms > li {
			width: 100%;
			}

			@media (min-width: 768px) {
			.timeline.terms > li {
			width: 50%;
			}
			}

			/**********************************
			GALLERY
			**********************************/
			dialog.gallery[open] {
			position: fixed;
			inset: 1rem;
			margin: 0;
			border: none;
			width: calc(100% - 2rem);
			height: calc(100% - 2rem);
			padding: 0;
			background: rgba(var(--base-rgb),var(--op-6));
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			backdrop-filter: blur(3px);
			z-index: var(--z-9);
			max-height: 100vh;
			max-width: 100vw;
			}

			.gallery .controls {
			order: 3;
			justify-content: flex-end;
			--height: 2rem;
			}

			.gallery .controls .cancel {
			order: 3;
			}

			dialog.gallery::backdrop {
			background: rgba(var(--base-rgb), var(--op-4));
			}

			dialog.gallery .wrap {
			position: relative;
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			overflow: hidden;
			}

			dialog.gallery .cancel:hover {
			background: rgba(var(--base-rgb),var(--op-4));
			}

			dialog.gallery .content {
			position: relative;
			flex: 1 1 auto;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			}

			dialog.gallery .content .image {
			max-width: 90vw;
			max-height: 85vh;
			object-fit: contain;
			transition: transform 0.15s ease-out;
			touch-action: none;
			}

			dialog.gallery .image-left,
			dialog.gallery .image-right {
			position: absolute;
			opacity: 0;
			pointer-events: none;
			}

			dialog.gallery details {
			position: absolute;
			bottom: 2rem;
			left: 50%;
			transform: translateX(-50%);
			width: calc(100% - 2rem);
			max-width: 600px;
			background: rgba(0,0,0,0.45);
			color: #fff;
			border-radius: 4px;
			overflow: hidden;
			z-index: 10;
			}

			dialog.gallery details summary {
			padding: 0.75rem 1rem;
			cursor: pointer;
			user-select: none;
			}

			dialog.gallery details[open] .item-info {
			padding: 1rem;
			}

			dialog.gallery .counter {
			position: absolute;
			bottom: 1rem;
			left: 1rem;
			background: rgba(var(--base-rgb),var(--op-4));
			color: var(--contrast);
			padding: 0.4rem 0.8rem;
			border-radius: 3px;
			font-size: 0.85rem;
			z-index: 10;
			}

			dialog.gallery .favourite {
			position: absolute;
			top: 1rem;
			left: 1rem;
			z-index: 10;
			}

			dialog.gallery .image {
			opacity: 0;
			transition: opacity .2s ease, transform .15s ease-out;
			}

			dialog.gallery .image[src] {
			opacity: 1;
			}

			/**************************************************
			REFERRAL SYSTEM
			**************************************************/
			.referral-reward-banner {
			background: var(--base-100);
			color: var(--action-0);
			border: 2px dashed var(--action-0);
			padding: 1.5rem;
			border-radius: 8px;
			text-align: center;
			margin-bottom: 1.5rem;
			display: flex;
			justify-content: center;
			align-items: center;
			}

			.referral-reward-banner .icon {
			--w: 3rem;
			}

			.referral-reward-banner h4 {
			margin: 0;
			font-size: 1.25rem;
			font-weight: 700;
			color: var(--contrast);
			}

			.check-code-btn {
			width: 100%;
			margin-top: 0.5rem;
			background: var(--base-100);
			color: var(--contrast-100);
			border: 1px solid var(--contrast-200);
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 0.5rem;
			}

			.code-status {
			padding: 0.75rem;
			border-radius: 4px;
			margin-top: 0.5rem;
			font-size: 0.875rem;
			}

			.code-status.loading {
			background: var(--base-200);
			color: var(--contrast-200);
			}

			.code-status.success {
			background: var(--successBack);
			color: var(--successText);
			border: 1px solid var(--successBack);
			}

			.code-status.error {
			background: var(--errorBack);
			color: var(--errorText);
			border: 1px solid var(--errorBack);
			}

			.referral-footer {
			text-align: center;
			padding: 1rem 0;
			border-top: 1px solid var(--base-200);
			margin-top: 1rem;
			}

			.referral-footer .text-link {
			color: var(--contrast-200);
			text-decoration: none;
			font-size: 0.875rem;
			}

			.referral-footer .text-link:hover {
			color: var(--action-0);
			text-decoration: underline;
			}

			.share-section {
			margin-bottom: 1.5rem;
			}

			.share-section h4 {
			margin: 0 0 0.75rem;
			font-size: 0.875rem;
			text-transform: uppercase;
			letter-spacing: 0.5px;
			color: var(--contrast-200);
			}

			.copy-section {
			margin-bottom: 1.5rem;
			}

			.copy-section h4 {
			margin: 0 0 0.5rem;
			font-size: 0.875rem;
			text-transform: uppercase;
			letter-spacing: 0.5px;
			color: var(--contrast-200);
			}

			.copy-group {
			--gap: 0 .5rem;
			margin-bottom: 0;
			}
			.copy-group + .hint {
			margin: .25rem 1rem 1rem;
			}

			.copy-target {
			flex: 1;
			padding: 0.75rem;
			background: var(--base-100);
			border: 1px solid var(--base-200);
			border-radius: 4px;
			font-family: 'Monaco', 'Courier New', monospace;
			font-size: 0.875rem;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			user-select: all;
			}

			.copy-btn {
			flex-shrink: 0;
			width: var(--chipchip);
			height: var(--chipchip);
			min-height: 0;
			padding: 0;
			}
			.copy-btn.success .icon-copy,
			.copy-btn .icon-check-circle {
			display: none;
			}
			.copy-btn.success .icon-check-circle {
			display: inline-block;
			}

			.copy-btn.success {
			background: var(--successBack);
			color: var(--success);
			}

			.recent-referrals-section {
			margin-bottom: 1.5rem;
			padding-bottom: 1.5rem;
			border-bottom: 1px solid var(--contrast-200);
			}

			.recent-referrals-section h4 {
			margin: 0 0 0.75rem;
			font-size: 0.875rem;
			text-transform: uppercase;
			letter-spacing: 0.5px;
			color: var(--contrast-200);
			}

			.recent-referrals-list {
			display: flex;
			flex-direction: column;
			gap: 0.5rem;
			}

			.referral-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0.75rem;
			background: var(--base-100);
			border-radius: 4px;
			font-size: 0.875rem;
			}

			.referral-info {
			display: flex;
			align-items: center;
			gap: 0.5rem;
			}

			.referral-info strong {
			color: var(--contrast-200);
			}

			.referral-date {
			font-size: 0.75rem;
			}

			.no-referrals,
			.loading,
			.message {
			text-align: center;
			padding: 1rem;
			color: var(--contrast-200);
			font-size: 0.875rem;
			}

			.stats-summary {
			margin-bottom: 1.5rem;
			}

			.stat-row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0.75rem;
			border-bottom: 1px solid var(--base-200);
			}

			.stat-row:last-child {
			border-bottom: none;
			}

			.stat-row.highlight {
			background: var(--base-100);
			border-radius: 4px;
			border: 1px solid var(--base);
			font-weight: 600;
			}

			.stat-label {
			color: #666;
			font-size: 0.875rem;
			}

			.stat-value {
			color: #333;
			font-weight: 600;
			font-size: 1rem;
			}

			.stat-row.highlight .stat-value {
			color: var(--action-0);
			font-size: 1.25rem;
			}

			.view-dashboard-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 0.5rem;
			width: 100%;
			padding: 0.875rem;
			background: var(--action-0);
			color: var(--action-contrast);
			text-decoration: none;
			border-radius: 8px;
			font-weight: 600;
			transition: all 0.2s ease;
			}
			aside button:not(.button, .qtoggle),
			aside a.button{
			position: relative;
			top: 0;
			box-shadow: var(--shdw-none);
			transition: top var(--trans-base), box-shadow var(--trans-base);
			}

			aside button:not(.button, .qtoggle, :disabled):hover,
			aside a.button:hover {
			top: -4px;
			box-shadow: rgba(var(--contrast-rgb),var(--op-45)) var(--shdw-down);
			}

			.view-dashboard-btn:visited {
			color: var(--action-contrast);
			}
			.view-dashboard-btn:hover {
			transform: translateY(-2px);
			box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
			}

			.success-content {
			padding: 2rem 1rem;
			text-align: center;
			}

			.success-content h3 {
			color: var(--success);
			margin-bottom: 1rem;
			}

			.success-content p {
			margin-bottom: 0.75rem;
			color: var(--base-200);
			}

			.success-content .hint {
			font-size: 0.875rem;
			color: var(--base-200);
			font-style: italic;
			}

			.code-status.loading::before {
			/.loading::before {/
			content: '';
			display: inline-block;
			width: 1rem;
			height: 1rem;
			border: 2px solid var(--action-200);
			border-top: 2px solid var(--action-0);
			border-radius: 50%;
			animation: spin 1s linear infinite;
			margin-right: 0.5rem;
			vertical-align: middle;
			}
			.share-buttons-grid a {
			padding: 0;
			min-height: 0;
			width: var(--chipchip);
			height: var(--chipchip);
			}
			.share-buttons-grid a .icon {
			margin-right: 0;
			}
			@media (max-width: 768px) {
			.share-buttons-grid {
			grid-template-columns: repeat(3, 1fr);
			}

			.referral-item {
			flex-direction: column;
			align-items: flex-start;
			gap: 0.5rem;
			}
			}
			/***************
			TOGGLE TEXT
			***************/
			.toggle-text input {
			display: none;
			}

			.toggle-text input + label {
			font-weight: normal;
			color: var(--contrast)!important;
			text-transform: none;
			cursor: pointer;
			position: relative;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			}

			.toggle-text label::before,
			.toggle-text label::after {
			display: none!important;
			}

			.toggle-text label {
			padding-left: 0!important;
			}

			.toggle-text input + label .text {
			position: relative;
			margin: 0;
			--gap: 0;
			font-weight: bold;
			width: fit-content;
			padding: 2px 4px;
			border: 1px solid var(--action-50);
			border-radius: 4px;
			color: var(--action-50)!important;
			}

			table .toggle-text input+label .text {
			color: var(--contrast)!important;
			border-color: var(--contrast);
			}

			.toggle-text:hover .text,
			table .toggle-text:hover .text {
			background-color: var(--action-50);
			color: var(--light-0)!important;
			border-color: var(--action-50);
			}

			.toggle-text input + label .off,
			.toggle-text input + label .on {
			transition: var(--trans-transform), opacity var(--trans-base);
			}

			.toggle-text input + label .off {
			opacity: 1;
			max-width: 100%;
			transform: none;
			}

			.toggle-text input + label .on {
			opacity: 0;
			max-width: 0;
			transform: translate3d(0, 100%, 0);
			}

			.toggle-text input:checked + label .off {
			opacity: 0;
			max-width: 0;
			transform: translate3d(0, -100%, 0);
			}

			.toggle-text input:checked + label .on {
			max-width: 100%;
			opacity: 1;
			transform: none;
			}

			/******************************************************************
			TAXONOMY SELECTOR
			******************************************************************/
			.items-container {
			margin: 0;
			padding: 0;
			width: 100%;
			}

			details.create-term {
			margin-top: auto;
			width: 100%;
			}
			#jvb-selector .search-wrapper {
			margin-top: auto;
			width:100%;
			}
			.search-wrapper:not(.open) .search {
			margin-left: auto;
			}
			.search-wrapper + details.create-term {
			margin-top: 0;
			}

			details.create-term .field,
			.create-term[open] summary {
			margin-bottom: 1rem;
			}

			details.create-term .field {
			max-width: 100%;
			}

			#jvb-selector > .wrap {
			--wrap: nowrap;
			--justify: flex-start;
			}

			#jvb-selector .items-wrap {
			width: 100%;
			padding: 1rem 0;
			border-top: 1px solid var(--base-200);
			}

			#jvb-selector .items-container {
			display: grid;
			grid-template-columns: repeat(2, 1fr)
			}
			#jvb-selector li {
			list-style: none;
			}
			#jvb-selector li label {
			padding-left: 0!important;
			}

			/.auto-wrapper {/
			/* position: absolute;*/
			/* bottom: -105%;*/
			/* background-color: rgba(var(--base-rgb), var(--op-5));*/
			/* backdrop-filter: blur(2px);*/
			/* border-radius: var(--radius);*/
			/* z-index: 1;*/
			/}/
			.autocomplete-dropdown {
			width: 100%;
			background-color: var(--base-100);
			padding: .5rem;
			box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
			}
			li.autocomplete {
			list-style: none;
			display: inline-flex;
			margin: 0.25rem;
			min-height: var(--chip);
			}

			.submit-term {
			gap: 0;
			}
			.submit-term strong {
			padding-right: 1rem;
			}
			.selected-items {
			width:100%;
			padding: .5rem;
			border-radius: var(--radius);
			background-color:var(--base);
			--justify: flex-start;
			--gap: .5rem;
			margin-bottom: .5rem;
			}

			.selected-items.selected-items:empty {
			padding:0;
			background-color:transparent;
			margin: 0;
			}

			.selected-item {
			padding: .25rem .5rem;
			margin: .125em;
			background: var(--base-100);
			border-radius: .25rem;
			font-size: var(--txt-medium);
			border: 1px solid var(--base-200);
			position: relative;
			}
			.remove-term.remove-term {
			min-height: 0;
			height: var(--chip);
			width: var(--chip);
			padding: 0;
			--w: .75em;
			}

			.clear-filters {
			margin-left: auto;
			border: 1px solid var(--base-200);
			}
			/**************************************************
			ANIMATIONS
			**************************************************/
			/ ANIMATIONS /
			@keyframes shimmer {
			0% {
			left: -50%;
			@@ -4062,13 +3600,13 @@

			@keyframes pulse-color {
			0% {
			box-shadow: 0 0 0 0 rgba(var(--action-rgb), .4);
			box-shadow: 0 0 0 0 rgba(var(--action-0), .4);
			}
			30% {
			box-shadow: 0 0 0 .75rem rgba(var(--action-rgb), 0);
			box-shadow: 0 0 0 .75rem rgba(var(--action-0), 0);
			}
			100% {
			box-shadow: 0 0 0 0 rgba(var(--action-rgb), 0);
			box-shadow: 0 0 0 0 rgba(var(--action-0), 0);
			}
			}

			@@ -4107,3 +3645,8 @@
			transform: rotate(5deg) scale(1.1);
			}
			}

			/.group {/
			/* background-color: rgb(var(--base));*/
			/* margin: 1rem 0;*/
			/}/