/* reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video, picture {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	fill: var(--foreground-color);
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

svg {
	position: relative;
}

/* css variables **/

body {
	--foreground-color: white;
	--background-color: black;
	--gutter: 10px;
	--item-margin-bottom: 30px;
	--section-margin-top: 30px;
	--top-layer: 999999;
	--max-width: 1920px;
}

/* color scheme */

body.dark {
	color: var(--foreground-color);
	background-color: var(--background-color);
}

body.light {
	color: var(--background-color);
	background-color: var(--foreground-color);
}


body.white {
	--foreground-color: #111111; 
	--background-color: #FFFFFF;

	color: var(--foreground-color);
	background-color: var(--background-color);
}


body.grey {
	--foreground-color: #aaaaaa; 
	--background-color: #000000;

	color: var(--foreground-color);
	background-color: var(--background-color);
}


body.bpblue {
	--foreground-color: #66DDEE; 
	--background-color: #000021;

	color: var(--foreground-color);
	background-color: var(--background-color);
/* 
	color: #DDEEFF;
	background-color: #000022; */
}


body.ohi {
	--foreground-color: #00ffff; 
	--background-color: #000021;

	color: var(--foreground-color);
	background-color: var(--background-color);
}


body.citizens {
	--foreground-color: #ccffee; 
	--background-color: #000000;

	color: var(--foreground-color);
	background-color: var(--background-color);
}

body.pharrell {
	--foreground-color: #ffd602; 
	--background-color: #000000;

	color: var(--foreground-color);
	background-color: var(--background-color);
}


body.tse {
	--foreground-color: #eeeedd; 
	--background-color: #000000;

	color: var(--foreground-color);
	background-color: var(--background-color);
}


body.sting {
	--foreground-color: #888866; 
	--background-color: #000000;

	color: var(--foreground-color);
	background-color: var(--background-color);
}

body.iegok {
	--foreground-color: #FFDDDD; 
	--background-color: #000000;

	color: var(--foreground-color);
	background-color: var(--background-color);
}



body.chnda17 {
	--foreground-color: #ffffff;
	--background-color: #0073DD;

	color: var(--foreground-color);
	background-color: var(--background-color);
}


body.fordhub {
	--foreground-color: #1100bb;
	--background-color: #eeeef3;

	color: var(--foreground-color);
	background-color: var(--background-color);
}


body.lnx {
	--foreground-color: #d6d6b6; 
	--background-color: #1c1a13;

	color: var(--foreground-color);
	background-color: var(--background-color);
}


body.sidewire {
	--foreground-color: #00ddff;
	--background-color: #003758;

	color: var(--foreground-color);
	background-color: var(--background-color);
}

body.oblong {
	--foreground-color: #697975;
	--background-color: #e6faf0;

	color: var(--foreground-color);
	background-color: var(--background-color);
}

body.oblong2 {
	--foreground-color: #697975;
	--background-color: #374237;

	color: var(--foreground-color);
	background-color: var(--background-color);
}


body.sh {
	--foreground-color: #E9FF00;
	--background-color: #212C0B;

	color: var(--foreground-color);
	background-color: var(--background-color);
}


body.thnkr {
	--foreground-color: #00ff66;
	--background-color: #000000;

	color: var(--foreground-color);
	background-color: var(--background-color);
}


body.stadia {
	--foreground-color: #ee4433; 
	--background-color: #ffffff;

	color: var(--foreground-color);
	background-color: var(--background-color);
}


body.mountgay {
	--foreground-color: #3c3a36; 
	--background-color: #ddccbb;

	color: var(--foreground-color);
	background-color: var(--background-color);
}

body.thbingo {
	--foreground-color: #ef4d2a;
	--background-color: #ffffff;

	color: var(--foreground-color);
	background-color: var(--background-color);
}


body.tsmia {
	--foreground-color: #00ccdd;
	--background-color: #f6fff0;

	color: var(--foreground-color);
	background-color: var(--background-color);
}



body.greygoose {
	--foreground-color: #112288; 
	--background-color: #f6f9ff;

	color: var(--foreground-color);
	background-color: var(--background-color);
}



body.momi {
	--foreground-color: #ff00ee; 
	--background-color: #000000;

	color: var(--foreground-color);
	background-color: var(--background-color);
}


body.nba {
	--foreground-color: #ff7700; 
	--background-color: #000000;

	color: var(--foreground-color);
	background-color: var(--background-color);
}


body.natgeo {
	--foreground-color: #aa9977; 
	--background-color: #000000;

	color: var(--foreground-color);
	background-color: var(--background-color);
}



body.fe {
	--foreground-color: #ddbb22;
	--background-color: #fffcdd;

	color: var(--foreground-color);
	background-color: var(--background-color);
}


body.germs {
	--foreground-color: #faff00; 
	--background-color: #000300;

	color: var(--foreground-color);
	background-color: var(--background-color);
}


body.tjmaxx {
	--foreground-color: #ffffff;
	--background-color: #cc0011;

	color: var(--foreground-color);
	background-color: var(--background-color);
}

body.pw {
	--foreground-color: #FF4D33;
	--background-color: #ffffff;

	color: var(--foreground-color);
	background-color: var(--background-color);
}



body.red {
	--foreground-color: #dd0000;
	--background-color: #ffffff;

	color: var(--foreground-color);
	background-color: var(--background-color);
}

body.swell {
	--foreground-color: #ff0000;
	--background-color: #ffffff;

	color: var(--foreground-color);
	background-color: var(--background-color);
}


body.hsr {
	--foreground-color: #ff6600;
	--background-color: #ffffff;

	color: var(--foreground-color);
	background-color: var(--background-color);
}



body.sos {
	--foreground-color: #b3aa7e;
	--background-color: #000000;

	color: var(--foreground-color);
	background-color: var(--background-color);
}



body.wild {
	--foreground-color: #ff9900;
	--background-color: #1b012c;

	color: var(--foreground-color);
	background-color: var(--background-color);

	h0{
		font: 0px "Helvetica Neue", HelveticaNeue, Helvetica, NeueHaasGroteskText Pro, Arial, sans-serif;
		font-size: 5.5em;
		font-size: 11vw;
		font-weight: 700;
		line-height: 0.9em;
		letter-spacing: -0.05em;
		color: #ff9900;
		text-decoration: none; 
		padding-top: 0.5em;
		padding-bottom:0.1em;  
		background: -webkit-linear-gradient(#ff6600, #ffCC00);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		}	
		

}




/* body gets color from vars: */

body {
	color: var(--forground-color);
	background-color: var(--background-color);
}

/* end color schemes */




/* main styles and text */

body {
	font-family: helvetica, sans-serif;
	font-size: 1em;
}

a {
	color: inherit;
}
a:hover {
	color: inherit;
	text-decoration: none;
}
a:active {
	color: inherit;
}
a:visited {
	/* color: inherit; */
}

h1, h2, h3, h4, h5, h6, p {
	font-weight: 800;
}
h1 {font-size: 7.2vw; font-weight: 900; letter-spacing: -0.08em; line-height: 0.8em;  }
h2 {font-size: 3.3vw; font-weight: 800; letter-spacing: -0.05em; line-height: 1.0em; padding-bottom: 0.6em; padding-top: 0px;  }
h3 {font-size: 2.1vw; letter-spacing: -0.03em; line-height: 1.1em; padding-bottom: 1em; margin-bottom: 2em; margin-top: 2em; }
h4 {font-size: 1.2em; padding-bottom: 0.5em;}
h5 {font-size: 1.2vw; letter-spacing: -0.02em; padding-top: 5px;}
h6 {font-size: 0.75em;}
p {font-size: 1.4em; letter-spacing: -0.02em; line-height: 1.1em; }
dt {font-size: 1em; font-weight: 800; line-height: 1em; letter-spacing: -0.02em; padding-top: 15px;}
dd {font-size: 1em; font-weight: 500; line-height: 1em; padding-bottom: 0px; opacity: 66%;}


hr {
	border: 2px solid;
	margin-top: 3em;
	margin-bottom: 0.2em;
	color: var(--foreground-color);
  }



sup {
	vertical-align: +1.4em;
	font-size: 33%;
	letter-spacing: 0em;
}


sub {
	vertical-align: 0em;
	font-size: 33%;
	letter-spacing: 0em;
}


.highlight-white {
	background-color: #EEEEEE;
	color: #000;
	padding: 0 2px;
  }


.difference {
	mix-blend-mode: difference;
}

.clear {
	clear: both;
}
br.clear {
	display: block;
	content: "";
	margin: 0;
	padding: 0;
	clear: both;
	height: 0;
	width: 0;
}

.left {
	float: left;
}
.right {
	float: right;
}

/* header styles */

header h1 {
	font-size: 1.45em; /* override so it doesn't bork the SVG layout */
}


.large-scaling-type h1 {
	font-size: 8.8vw; 
	font-weight: 900; 
	letter-spacing: -0.08em; 
	line-height: 0.75em; 
	margin-bottom: 20px;
}


.large-scaling-type h2 {
	/* font-size: 4em; */
	font-size: 4.4vw;
	font-weight: 800;
	letter-spacing: -.04em;
	line-height: 0.9em;
	margin-bottom: 0px;
}

.large-scaling-type h3 {
	/* font-size: 2.5em; */
	font-size: 1.8vw;
	letter-spacing: -.02em;
	margin-bottom: 10px;
	margin-top: 5px;
	
}

/* this is the //// from the design */

.spacer {
	/* this element has no style of its own - just adds pseudo element so we can avoid having //// in the source / scraped for SEO etc
	also we can change the content of the pseudo element to change the //// to something else, like  | or whatever
	*/
}
.spacer:after {
	display: inline-block;
	font-size: 1em;
	white-space: pre;
	content: "////";
}

/* scsreen reader only - hides text from view */

.screenreaderonly {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.swap-colors {
	/* filter: invert(1); */
	color: var(--background-color);
	background-color: var(--foreground-color);
}

/* wraps - these center the content, provide a maximum width, and padding */

.header-wrap,
.content-wrap,
.footer-wrap {
	margin: 0 auto;
	max-width: var(--max-width);
}
.content-wrap,
.footer-wrap {
	padding: 30px 0;
}


/* special case for the header layout and style */

.fixed-header-offset { /* add to pages with the fixed header to avoid top conetnt overlap */
	margin-top: 8em;
}

header {
	position: fixed;
	width: 100%;
	top: 0; left: 0;
	min-height: 2.5em;
	padding-top: 10px;
	/* filter: invert(1); */
	/* background-color: var(--background-color); */

	/* remove this if you don't want the crazy invert filter :) */

	
}
header h1 {
	float: left;
	color: var(--background-color);
	/* background-color: var(--forground-color); */
	margin-left: -10px;
}

header h1:hover {
	filter: invert(0);
	background-color: var(--foreground-color);
}

header h1.svg-logo svg,
header h1.svg-close svg {
	/* background-color: var(--foreground-color); */
	fill: var(--background-color);
}
	/* cases where we have a close -> link to work page */
	.close-to-work {
		color: var(--foreground-color);
	}
	.close-to-work svg {
		color: var(--foreground-color);
		fill:  var(--foreground-color);
	}
	.close-to-work:hover svg {
		color: var(--background-color);
		fill:  var(--background-color);
		background: var(--foreground-color);
	}


header h1 a {
	display: block;
	padding: 10px;
}

header nav {
	float: right;
}
/* 
header nav ul li {
	display: inline-block;
}
 */
header nav ul {
	margin-top: 5em;
}

header nav ul li a {
	display: inline-block;
	min-width: 180px;
	/* padding: 0.175em; */
	text-decoration: none;
	font-weight:  800;
	font-size: 1.55em;
	color: var(--background-color);
	padding: 0.30em;
}

header nav ul li a:hover,
header nav ul li a.selected{
	color: var(--foreground-color);
	fill:  var(--foreground-color);
	background: var(--background-color);
}


.hidden {
	display: none;
}


/* the grid(s) */

.grid.column5 {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--gutter);
	align-items: start;
}

.grid.column6 {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--gutter);
	align-items: start;
}

.grid.column12 {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--gutter);
	align-items: start;
}

.grid.work div.image {
	aspect-ratio: 1 / 1;
}

.grid.work figure .normal {
	display: block;
}
.grid.work figure .rollover {
	display: none;
}
.grid.work figure:hover .normal {
	display: none;
}
.grid.work figure:hover .rollover {
	display: block;
}
.grid.work figure video {
	overflow: hidden;
	max-width: 100%;
}

.grid div.image {

	 /* @todo -- remove this 
	background-color: #333333; */
	  

	display: flex; /* Center the child element horizontally and vertically */
	justify-content: center; /* Center horizontally */
	align-items: center; /* Center vertically */
	overflow: hidden; /* Clip any overflow */
	max-width: 100%;
}

/* special case for full width images in this context */
	.grid .aspect-auto .image {
		display: block;
		width: 100%;
	}
	.grid .aspect-auto .image img {
		width: 100%;
	}


.grid div.image picture {
	margin: 0; padding: 0;
}
.grid div.image picture img {
	max-width: 100%; /* Ensure the image doesn't exceed the container's width */
	max-height: 100%; /* Ensure the image doesn't exceed the container's height */
	width: auto; /* Allow the image to adjust its width while maintaining aspect ratio */
	height: auto; /* Allow the image to adjust its height */
	margin: 0; padding: 0;	
}

.grid.work .span-1, .grid.work .span-2, .grid.work .span-3, .grid.work .span-4, .grid.work .span-5, .grid.work .span-6,
.grid.work .span-7, .grid.work .span-8, .grid.work .span-9, .grid.work .span-10, .grid.work .span-11, .grid.work .span-12 {
	margin: 0 0 0 0;
	padding: 0;
	border: 0;
}


/* optionally align a 1x1 aspect item to top or bottom -- this is for the 5 column grid layout */
.grid.work .span-1.bottom,
.grid.work .span-2.bottom {
	align-self: end;
}

.span-1 {grid-column: span 1;}
.span-2 {grid-column: span 2;}
.span-3 {grid-column: span 3;}
.span-4 {grid-column: span 4;}
.span-5 {grid-column: span 5;}
.span-6 {grid-column: span 6;}
.span-7 {grid-column: span 7;}
.span-8 {grid-column: span 8;}
.span-9 {grid-column: span 9;}
.span-10 {grid-column: span 10;}
.span-11 {grid-column: span 11;}
.span-12 {grid-column: span 12;}



/* Text box styles */


h2.homepage {
	margin-bottom: 0px;
	padding-bottom: 0;
	text-decoration: none;
}





.pageintrotextbox h1 {
	padding-top: 0em;
	padding-bottom: 0.2em;
	margin-bottom: 0;

}


.pageintrotextbox h3 {
	padding-top: 0em;
	padding-bottom: 0em;
	margin-top: 0;

}



.sectiontextbox h2 {
	padding-top: 0em;
	padding-bottom: 0.4em;
	line-height: 0.9em;
	margin-bottom: 0;

}


.sectiontextbox h3 {
	padding-top: 0em;
	padding-bottom: 0em;
	margin-top: 0;
}


.sectiontextbox p {
	padding-top: 0em;
	padding-bottom: 0em;
	margin-top: 0;
}



.textbox h2 {
	padding-top: 2em;
	padding-bottom: 0;
	line-height: 0.95em;
	font-size: 4vw;
}


.textbox p {
	padding: 3em;
}



.credittext p {
	font-size: 1.0em; 
	letter-spacing: -0.01em; 
	line-height: 1.2em; 
	padding-right: 2em; 
	padding-top: 15px;}




/* items */

.item {
	padding: var(--gutter);
	margin: 0;
	background-color: var(--background-color);
	color: var(--foreground-color);
}

.itemlink,
.itemlink {
	display: block;
	text-decoration: none;
	color: var(--foreground-color);
}

.itemlink:hover,
.itemlink:hover {
	background-color: var(--background-color);
	color: var(--foreground-color);
}


/* special wrap for items on the grid whcih are also links, and need special treatment of their text and hover style */

.itemlink:hover,
.itemlink:hover {
	padding: var(--gutter);
	margin: calc( -1 * var(--gutter));
	background-color: var(--foreground-color);
	color: var(--background-color);
}
.itemlink a {
	text-decoration: none;
}




/* footer styles */

div.footer-group {
	margin-top: var(--section-margin-top);
	border-top: 5px solid ;
	padding-top: var(--gutter);
}


.svgcolor svg {
	fill: var(--foreground-color);
	opacity: 0.2;
}



/* breakpoints */

@media only screen and (max-width: 1920px) {

	/*
	body {
		background: red !important;
	}
	*/

	
	
	h5 {font-size: 1.2vw; }

	.header-wrap {
		padding: 0 30px;
	}
	.content-wrap {
		padding: 0 30px;
	}
	.footer-wrap {
		padding: 0 30px;
	}

}

@media only screen and (max-width: 600px) {

	.grid,
	.grid.column5,
	.grid.column6,
	.grid.column12 {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
	}

	.span-1, .span-2, .span-3,  .span-4, .span-5, .span-6,
	.span-7, .span-8, .span-9, .span-10, .span-11, .span-12 {
		grid-column: span 1;
	}

}



/* inline SVG icon wraps */

.svg-close {
	margin: 0;
	padding: 10px;
	height: 1.45em;
	height: 1.45em;
}

.svg-logo {
	fill: var(--foreground-color);
	/* filter: invert(1); */
	width: 270px;
}

.svg-down-arrow {
	width: 10em;
	height: 10em;
	margin: 2em auto;
	display: block;
}

.svg-down-arrow.small {
	width: 5em;
	height: 5em;
}


.svg-down-arrow svg {
	width: 100%;
	height: 100%;
	fill: var(--foreground-color);
}

.svg-right-arrow-inline {
	display: inline-block;
	width: 1em;
	height: 0.8em;
	margin: -0.2em 0 0 0;
	padding: 0;
}

.svg-right-arrow-inline svg {
	display: inline-block;
	transform:
		rotate(-90deg)
		translateX(-.15em);
	fill: inherit;
}






.svg-hugelogo {
	fill: var(--foreground-color);
	opacity: 11%;
	
}




/* aspect ratio classes */

.video iframe,
.video video {
	width: 100%;
	max-height: 100%;
	margin-bottom: 0em;
}

.aspect-auto {
	max-width: 100%;
}

.aspect-16x9 {
	aspect-ratio: 16 / 9;
}

.aspect-4x1 {
	aspect-ratio: 4 / 1;
}

.aspect-3x1 {
	aspect-ratio: 3 / 1;
}

.aspect-2x1 {
	aspect-ratio: 2 / 1;	
}

.aspect-1x1 {
	aspect-ratio: 1 / 1;
}

.aspect-4x3 {
	aspect-ratio: 4 / 3;
	/* background: orange; remove this */
}

.aspect-9x16 {
	aspect-ratio: 9 / 16;
}


.aspect-2x3 {
	aspect-ratio: 2 / 3;
}


.aspect-1x2 {
	aspect-ratio: 1 / 2;
}


.aspect-precise-bp1 {
		aspect-ratio: 4096 / 1074;
}

/* border modifiers */ 

.border-top {
	border-top: 5px solid var(--foreground-color);
	height: 2.15em;
}

button.menu {
	background-color: transparent;
	border: none;
	color: inherit;
	margin: 0;
	padding: 0;
	/* background-color: var(--background-color); */
}
button.menu svg,
button.menu img {
	/* color: var(--foreground-color);
	fill: var(--foreground-color); */
	margin: 0;
	padding: 10px;
	height: 1.45em;
	height: 1.45em;
}

button.menu:hover {
	background-color: var(--background-color);
	color: var(--foreground-color);
	fill: var(--foreground-color);
}
button.menu:hover {
	background-color: var(--background-color);
	fill: var(--foreground-color);
	color: var(--foreground-color);
}
button.menu:hover svg {
	fill: inherit;
}

.topnav {
	position: relative;;
	min-width: 233px;
	min-height: 266px;
	background-color: var(--foreground-color);
	padding: 0 0 1em 1em;
	min-height: calc(33vh - 10px);
	z-index: var(--top-layer);

	fill: var(--background-color);
	color: var(--background-color);

}

.navfooter {
	position: absolute;
	bottom: 0;

}

.menulogo {
	position: absolute;
	bottom: 20px;
	left: 20px;
	width: 120px;
}

.menulogo svg {
	/* fill: var(--foreground-color); */
}





/*
	style for the work menu list ------------------------------

*/

.worklist {
	/* want to use em for the boxes but things get a little funky when sizing -  */
	/* font-size: 6em; */
	/* fixed size: */
	font-size: 3.2em;
	letter-spacing: -0.04em;
	text-transform: uppercase;
}

.worklist li,
.worklist a {
	display: block;
}

.worklist a {
	border-top: 0.1em solid var(--foreground-color);
	padding-top: 0.3em; /* relative to our font size */
	padding-bottom: 0.15em; /* relative to our font size */
	padding-left: 0.25em; /* relative to our font size */
	padding-right: 0.25em; /* relative to our font size */
	font-weight: 800;

	/* scaling w/ maxes: */
	font-size: clamp(.1em, 3.2vw, 1em);

	text-decoration: none;
	color: var(--foreground-color);
	fill: var(--foreground-color);
	background-color: var(--background-color);
}
/* nah this sucked -> 
.worklist a .title {
	font-size: clamp(.1em, -.2em + 8.333vw, 1em);
}
.worklist a svg {
	width: clamp(.1em, -.2em + 8.333vw, 1em);
	height: clamp(.1em, -.2em + 8.333vw, 1em);
}
*/

.worklist a:hover {
	color: var(--background-color);
	fill: var(--background-color);
	background-color: var(--foreground-color);
	
}

.worklist a:hover .preview {
	opacity: 1;
	transition:
		opacity 0.01s ease-in-out,
		transform 0.01s ease-in-out;
	transform: translatex(0) translatey(0);
}

.worklist a svg {
	color: inherit;
	fill: inherit;
}

.worklist .preview {
	pointer-events: none;
	opacity: 0;
	/* transform: translatex(200%) translatey(20%); */
	transition:
		opacity 0.1s ease-in-out,
		transform 0.1s ease-in-out;
		position: fixed;
	top: calc(50% - (calc( clamp(.1em, -.2em + 8.333vw, 1em) * 4.25) / 2 ));
	/* ^^ this is close but not quite right -- was trying to keep things fully dynamic so they are relative to the scale of the vw calculated font size */
	width: calc( clamp(.1em, -.2em + 8.3333vw, 1em) * 12);
	height: calc( clamp(.1em, -.2em + 8.333vw, 1em) * 6);
	/* preview box dims */
	/* height: 4em;
	width: 4em; */
	background-color: rgb(255, 255, 255);
	overflow: hidden;
	z-index: var(--top-layer);

	/*
		right-align with 1920px container for viewports wider than 1920px
		I futzed with this until I got the right number -- 1942px seems to account for the scrollbar width on chrome macOS
		may run into some slightly diff behaviors on other browsers
	*/
	right: calc((100vw - 1942px) / 2);

	/* quick internal breakpoint here to handle the case where viewport is 1920px or narrower, align to the right edge of the viewport */
	@media (max-width: 1920px) {
		right: 0;
	}
}

/* need this to allow us to do the abs positioning on the preview text / image */
.worklist .preview-inner  {
	position: relative;
	width: 100%;
	height: 100%;
}

.worklist .preview-inner img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: calc(var(--top-layer) + 1);
	/*
	Note can add image-rendering: pixelated; to this if we want to force pixelated rendering
	https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
	*/
}

.worklist .preview-inner .preview-label {
	position: absolute;
	bottom: 0;
	left: 0;
	font-size: 0.5em;
	letter-spacing: -0.04em;
	padding: 0.5em;
	z-index: calc(var(--top-layer) + 2);
	color: --foreground-color;
}