/* @import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&text=%E2%86%92|%E2%86%97|%E2%9D%A4');
//css-tricks.com/getting-the-most-out-of-variable-fonts-on-google-fonts/#aa-getting-a-full-variable-font-with-the-google-fonts-api */

@font-face {
	font-family: 'Work Sans';
	font-style: normal;
	font-weight: 200 900;
	src: url('/fonts/WorkSans-VariableFont_wght.ttf') format('truetype');
}
@font-face {
	font-family: 'Work Sans';
	font-style: italic;
	font-weight: 200 900;
	src: url('/fonts/WorkSans-Italic-VariableFont_wght.ttf') format('truetype');
}

/* { outline: 1px solid magenta; }

/*------ SCREEN BREAKPOINTS ------ //testsigma.com/blog/css-breakpoints/#Which_CSS_breakpoints_to_use

     Smallest:								@media (max-width: 599.99px) {}
     S (portrait tablets, large phones):	@media (min-width: 600px) {}
     M (landscape tablets):					@media (min-width: 768px) {}
     L (smaller laptops/desktops):			@media (min-width: 992px) {}
     Largest:								@media (min-width: 1200px) {} */


/*------ PRESETS ------*/

:root {
	--text: #fffffc;
		--textrgb: 255, 255, 253;
	--background: #080806;
		--backgroundrgb: 8, 8, 6;
	--blue: #485cc7;	/* PMS 2726 C / GFS Royal Blue */
		--bluergb: 72, 92, 199;
	--red: #f9423a;		/* PMS Warm Red C / GFS Bright Red */
		--redrgb: 249, 66, 58;
	--yellow: #fbe122;	/* PMS 107 C / GFS Factory Yellow */
		--yellowrgb: 251, 225, 34;
	
	--margin: 1.5em; /* 27px */
	--logowidth: calc(10em / 3); /* 60px */	
	--border: 0.1rem;
}


/*------ TEXT DEFAULTS ------*/

html {
	font-size: 100%;
	font-size: 1em;
	font-size: 1.125rem; /* 1.125 x 16px = 18px */
}
body {
	/* text-rendering: optimizeLegibility; */
	text-rendering: geometricPrecision;
	--webkit-font-smoothing: antialiased;
	font-size: calc(7em / 6); /* 21px */
	font-family: Work Sans, sans-serif;
	font-feature-settings: "case" on, "ordn" on, "titl" on, "tnum" on, "ss01" on, "ss04" on, "ss05" on;
	/* ss01 = g, ss02 = l, ss03 = R, ss04 = G, ss05 = IJ, ss06 = a. See //beautifulwebtype.com/work-sans/ */
	line-height: calc(5 / 3);
	font-weight: 475;
	font-stretch: 100%;
}
/* body .dlig { font-feature-settings: "dlig" on; } */
h1, h2, h3, h4, h5, h6, ul, ol, p { max-width: 60ch; /* //medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939#:~:text=Defining%20paragraph%20widths */ }
p + p, p + ol, p + ul, ol + p, ol + ol, ol + ul, ul + p, ul + ol, ul + ul, li + li { margin-top: 1em; }
p br { content: ''; margin-top: var(--margin); display: block; }

h1 { font-size: 2em; }

body.standard h1 { line-height: calc(2 / 3); }
body.landing h1, body.showcase h1 {
	font-size: 3em;
	max-width: 16ch;
	line-height: 1;
	font-weight: 375;
	letter-spacing: -.025em;
}
body.landing h1 a { text-decoration: none; }
@media (min-width: 600px) { body.landing h1, body.showcase h1 { font-size: 4em; } }

details { margin: var(--margin) 0; border: solid var(--text); border-width: var(--border) 0; }
details + details { margin-top: calc(-1 * var(--margin)); border-top-width: 0; }
details:last-child { margin-bottom: 0; }
details summary { cursor: pointer;  padding: var(--margin) 0; position: relative; /* position: -webkit-sticky; position: sticky; top: 0; z-index: 10; background: rgba(8,8,6,.5); -webkit-backdrop-filter: blur(0.5em); backdrop-filter: blur(0.5em); */ }
details summary h2 { display: inline-block; position: absolute; left: 1.5em; right: 0; /* text-align: right; */ }
details[open] { padding-bottom: calc(var(--margin) * 1); }

strong { font-weight: 575; }
em { font-style: italic; }

header nav li a[href^="mailto"] span:after,
main a[href^="https://"]:after,
main a[href^="//"]:after,
main a[href^="mailto"]:after { content: '\2197'; display: inline; margin-left: -0.01em; /* Negative margin keeps a neat underline */ }
main a { text-decoration: underline; text-decoration-thickness: var(--border); text-underline-offset: var(--border); }

main li { padding-left: 1.5em; }
main li:before { content: '\2192'; display: inline-block; width: 1.5em; margin-left: -1.5em; }


/*------ COLOUR/SCROLLBAR DEFAULTS ------*/

body {
	background: var(--background);
	color: var(--text);
}
a {
	color: inherit;
}
::selection {
	background: var(--text);
	color: var(--background);
}
html { scrollbar-color: var(--text) var(--background); }
::-webkit-scrollbar {
	width: 0.5em;
	height: 0.5em;
	border-radius: 0 !important;
}
::-webkit-scrollbar-track {
	background: black;
	background: var(--background);
	background: transparent;
}
::-webkit-scrollbar-thumb {
	background: white;
	background: var(--text);
}
main a.blue:hover, main a.blue:focus, main a.blue:active { text-decoration-color: var(--blue); }
main a.yellow:hover, main a.yellow:focus, main a.yellow:active { text-decoration-color: var(--yellow); }
main a.red:hover, main a.red:focus, main a.red:active { text-decoration-color: var(--red); }


/*------ SITE LOGO ------*/

a.site-logo { will-change: transform; transform-origin: center left; transition: transform 0.15s ease 0s; }
a.site-logo { position: relative; }
a.site-logo { display: inline-block; width: var(--logowidth); line-height: 1; vertical-align: top; }
a.site-logo > span {
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;
	box-sizing: border-box;
	height: calc(4em / 3);
	width: calc(1em / 3);
	margin: 0;
	vertical-align: top;
	transform: rotate(0deg);
	text-align: center;
}
a.site-logo > span { will-change: transform; }
a.site-logo > span,
a.site-logo:hover > span,
a.site-logo:focus > span,
a.site-logo:active > span {
	color: var(--background);
	background: var(--text);
}
a.site-logo > span > span {
	display: inline-block;
	position: relative;
	width: 1em;
	height: 1.5em;
	padding: 0.25em 0;
	margin: 0 0.5em;
}
a.site-logo > span > span { transition: all 0.2s 0s; }
a.site-logo > span:nth-of-type(2),
a.site-logo > span:nth-of-type(4) {
	margin-left: 0.5em;
}
a.site-logo > span:nth-of-type(2) {
	transform: rotate(-45deg);
}
a.site-logo > span:nth-of-type(3) {
	margin-left: 1em; transform: rotate(45deg);
}
@keyframes logoHover1 {
	0%, 24.99% { background: var(--blue); }
	25%, 49.99% { background: var(--text); }
	50%, 74.99% { background: var(--red); }
	75%, 99.99% { background: var(--yellow); }
}
@keyframes logoHover2 {
	0%, 24.99% { background: var(--yellow); }
	25%, 49.99% { background: var(--blue); }
	50%, 74.99% { background: var(--text); }
	75%, 99.99% { background: var(--red); }
}
@keyframes logoHover3 {
	0%, 24.99% { background: var(--red); }
	25%, 49.99% { background: var(--yellow); }
	50%, 74.99% { background: var(--blue); }
	75%, 99.99% { background: var(--text); }
}
@keyframes logoHover4 {
	0%, 24.99% { background: var(--text); }
	25%, 49.99% { background: var(--red); }
	50%, 74.99% { background: var(--yellow); }
	75%, 99.99% { background: var(--blue); }
}
a.site-logo:hover > span:nth-of-type(1), a.site-logo:focus > span:nth-of-type(1), a.site-logo:active > span:nth-of-type(1), body.landing a.site-logo > span:nth-of-type(1) {
	background: var(--blue);
	animation: logoHover1 3s linear 0s infinite;
}
a.site-logo:hover > span:nth-of-type(2), a.site-logo:focus > span:nth-of-type(2), a.site-logo:active > span:nth-of-type(2), body.landing a.site-logo > span:nth-of-type(2) {
	background: var(--yellow);
	animation: logoHover2 3s linear 0s infinite;
}
a.site-logo:hover > span:nth-of-type(3), a.site-logo:focus > span:nth-of-type(3), a.site-logo:active > span:nth-of-type(3), body.landing a.site-logo > span:nth-of-type(3) {
	background: var(--red);
	animation: logoHover3 3s linear 0s infinite;
}
a.site-logo:hover > span:nth-of-type(4), a.site-logo:focus > span:nth-of-type(4), a.site-logo:active > span:nth-of-type(4), body.landing a.site-logo > span:nth-of-type(4) {
	background: var(--text);
	animation: logoHover4 3s linear 0s infinite;
}


/*------ LAYOUT DEFAULTS ------*/

div[style="position: static !important;"] { width: 0; height: 0; }
html {
	min-height: 100%;
	display: flex;
	flex-direction: column;
}
body {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}
header, main { position: relative; box-sizing: content-box; margin: var(--margin); }
@media (min-width: 768px) { header, main { margin: calc(var(--margin) * 2); } }
header {
	align-self: start;
	margin-bottom: 0;
}
main {
	align-self: stretch;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}
header nav ul li { display: inline-block; }
img { pointer-events: none; user-select: none; }
div.lede.img-container {
	display: block;
	position: relative;
	z-index: -10;
}
div.lede.img-container img, div.gallery-item img { height: 100%; width: 100%; position: relative; display: block; object-fit: cover; object-position: center; transition: opacity 0.3s ease-in-out; }
div.lede.img-container img.top, div.gallery-item img.top { object-position: top; }
div.lede.img-container img.bottom, div.gallery-item img.bottom { object-position: bottom; }
h1:hover + div.lede.img-container img, div.gallery-item a:hover img, div.gallery-item a:focus img, div.gallery-item a:active img { opacity: calc(1 / 3); transition: opacity 0.1s ease-in-out; }
div.gallery-item {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
}
@media (min-width: 768px) {
	div.gallery-item { width: calc(50% - (var(--margin) / 2)); }
}
div.gallery-item a {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
div.gallery-item p {
	font-size: 2em;
	line-height: 1;
	position: absolute;
	max-width: none;
	width: calc(100% - (1 * var(--margin)));
	display: block;
	text-align: center;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
}


	/*------ BODY.STANDARD ------*/

	body.standard main {
		margin-top: calc((2 * var(--margin)) + (4em / 3));
		flex-flow: row wrap;
		gap: var(--margin);
	}
	body.standard h1 {
		display: inline-block;
		position: fixed;
		z-index: 9;
		top: calc(var(--margin) / 2);
		right: calc(var(--margin) / 2);
	}
	@media (min-width: 768px) {
		body.standard main { margin-top: calc((4 * var(--margin)) + (4em / 3)); }
		body.standard h1 { top: var(--margin); right: var(--margin); }
	}
	body.standard div.standard-text { margin: 0 auto; }
	body.standard:not(.icons) div.gallery-item a { background: rgba(255,255,255,0.2); transition: background 0s 0.3s; }
	body.standard:not(.icons) div.gallery-item a:hover,
	body.standard:not(.icons) div.gallery-item a:focus,
	body.standard:not(.icons) div.gallery-item a:active { background: rgba(255,255,255,0); transition: background 0s 0s; }
	@media (min-width: 1494px /* non-standard! */) { body.standard div.standard-text:not(:last-child) { margin: 0 auto 0 0; } }
	body.standard div.standard-text:last-child { margin-bottom: calc(4 * var(--margin)); }
	@media (min-width: 1200px) { body.standard div.standard-text:last-child { margin-bottom: 0; } }


		/*------ BODY.STANDARD.ICONS ------*/

		body.standard.icons div.gallery-item { aspect-ratio: 1 / 1; width: 100%; }
		body.standard.icons div.gallery-item:last-child { margin-bottom: calc(4 * var(--margin)); }
		@media (min-width: 768px) {
			body.standard.icons div.gallery-item { width: calc((100% / 2) - (var(--margin) * (1 / 2))); }
			body.standard.icons div.gallery-item:last-child { margin-bottom: 0; }
		}
		@media (min-width: 992px) { body.standard.icons div.gallery-item { width: calc((100% / 3) - (var(--margin) * (2 / 3))); } }
		@media (min-width: 1350px){ body.standard.icons div.gallery-item { width: calc((100% / 4) - (var(--margin) * (3 / 4))); } }
		body.standard.icons div.gallery-item figure {
			position: relative;
			width: 100%;
			height: 100%;
			border-bottom: var(--border) solid var(--text);
		}
		body.standard.icons div.gallery-item figcaption { position: absolute; right: 0; bottom: 0; left: 0; }
		body.standard.icons div.gallery-item figcaption,
		body.standard.icons div.gallery-item figcaption > a,
		body.standard.icons div.gallery-item figcaption > label {
			display: grid;
			grid-template-rows: auto auto;
			grid-template-columns: 1fr auto;
			grid-gap: 0;			
		}
		body.standard.icons div.gallery-item figcaption > a,
		body.standard.icons div.gallery-item figcaption > a:hover,
		body.standard.icons div.gallery-item figcaption > a:focus,
		body.standard.icons div.gallery-item figcaption > a:active {
			background: none; text-decoration: none;
		}
		body.standard.icons main div.gallery-item figcaption a[href^="//"]::after { content: ''; display: none; }
		body.standard.icons div.gallery-item figcaption > a > span:first-child:after { content: ' \2192'; display: inline; }
		body.standard.icons div.gallery-item figcaption > a[href^="//"] > span:first-child:after { content: ' \2197'; }

		body.standard.icons main div.gallery-item figcaption a.blue:hover > span:first-child::after,
		body.standard.icons main div.gallery-item figcaption a.blue:focus > span:first-child::after,
		body.standard.icons main div.gallery-item figcaption a.blue:active > span:first-child::after { color: var(--blue); }
		body.standard.icons main div.gallery-item figcaption a.yellow:hover > span:first-child::after,
		body.standard.icons main div.gallery-item figcaption a.yellow:focus > span:first-child::after,
		body.standard.icons main div.gallery-item figcaption a.yellow:active > span:first-child::after { color: var(--yellow); }
		body.standard.icons main div.gallery-item figcaption a.red:hover > span:first-child::after,
		body.standard.icons main div.gallery-item figcaption a.red:focus > span:first-child::after,
		body.standard.icons main div.gallery-item figcaption a.red:active > span:first-child::after { color: var(--red); }

		body.standard.icons div.gallery-item figcaption span > a { display: inline; }
		body.standard.icons div.gallery-item figcaption span > span { font-size: calc(4em / 9); text-transform: uppercase; font-weight: 675; letter-spacing: 0.05em; display: inline-block; text-align: center; width: 6em; height: 1.5em; transform: translateY(calc(-1em / 3)); background: var(--text); color: var(--background); }


	/*------ BODY.LANDING ------*/

	body.landing { overflow: hidden; }
	body.landing main { justify-content: center; }
	body.landing main p { display: none; position: absolute; bottom: 0; line-height: calc(2 / 3); max-width: none; }
	body.landing main p:before { content: '\2192'; display: inline-block; width: var(--margin); }
	@media (min-width: 880px /* non-standard! */) { body.landing main p { display: block; } }
	body.landing div.lede.img-container {
		display: flex;
		flex-direction: row;
		position: absolute;
		z-index: -10;
		top: 0;
		right: 0;
		width: calc(100% - var(--logowidth));
		width: calc(800% / 9);
		height: auto;
		aspect-ratio: 1 / 1;
	}
	body.landing div.lede.img-container span {
		display: inline-block;
		position: relative;
		margin: 0;
		width: 25%;
		height: 100%;
		background: no-repeat center center;
		-webkit-background-size: auto 100%;
		-moz-background-size: auto 100%;
		-o-background-size: auto 100%;
		background-size: auto 100%;
		/* background-image: url('/img/TheSquareBall01.jpg'); This is being taken care of by JS - add a colour for fallback, though! */
		background-color: dimgray;
	}
	@keyframes slidedown01 { 0% { top: 0; }
		100% { top: calc((calc(100vh - var(--logowidth)) - calc(100vw - var(--logowidth))) * (2 / 3)); } }
	@keyframes slidedown02 { 0% { top: 0; }
		100% { top: calc(((calc(100vh - var(--logowidth)) - calc(100vw - var(--logowidth))) * (2 / 3)) * (1 / 3)); } }
	@keyframes slidedown03 { 0% { top: 0; }
		100% { top: calc(((calc(100vh - var(--logowidth)) - calc(100vw - var(--logowidth))) * (2 / 3)) * (2 / 3)); } }
	@keyframes slidedown04 { 0% { top: 0; } 100% { top: 0; } }
	body.landing div.lede.img-container span:nth-child(1) {
		animation: slidedown01 1s cubic-bezier(.67,-0.1,.67,1.15) 0s 1;
		top: calc((calc(100vh - var(--logowidth)) - calc(100vw - var(--logowidth))) * (2 / 3));
		background-position: 15.5% 50%; }
	body.landing div.lede.img-container span:nth-child(2) {
		animation: slidedown02 1s cubic-bezier(.67,-0.1,.67,1.15) 0s 1;
		top: calc(((calc(100vh - var(--logowidth)) - calc(100vw - var(--logowidth))) * (2 / 3)) * (1 / 3));
		background-position: 38.5% 50%; }
	body.landing div.lede.img-container span:nth-child(3) {
		animation: slidedown03 1s cubic-bezier(.67,-0.1,.67,1.15) 0s 1;
		top: calc(((calc(100vh - var(--logowidth)) - calc(100vw - var(--logowidth))) * (2 / 3)) * (2 / 3));
		background-position: 61.5% 50%; }
	body.landing div.lede.img-container span:nth-child(4) {
		animation: slidedown04 1s cubic-bezier(.67,-0.1,.67,1.15) 0s 1;
		top: 0;
		background-position: 84.5% 50%; }
	@media (min-aspect-ratio: 1/1) {
		@keyframes slideleft01 { 0% { right: 0; } 100% { right: 0; } }
		@keyframes slideleft02 { 0% { right: 0; }
			100% { right: calc((-1 * ((calc(100vh - var(--logowidth)) - calc(100vw - var(--logowidth))) * (2 / 3))) * (2 / 3)); } }
		@keyframes slideleft03 { 0% { right: 0; }
			100% { right: calc((-1 * ((calc(100vh - var(--logowidth)) - calc(100vw - var(--logowidth))) * (2 / 3))) * (1 / 3)); } }
		@keyframes slideleft04 { 0% { right: 0; }
			100% { right: calc(-1 * ((calc(100vh - var(--logowidth)) - calc(100vw - var(--logowidth))) * (2 / 3))); } }
		body.landing div.lede.img-container {
			flex-direction: column;
			width: auto;
			height: calc(100% - (var(--margin) * 2));
			height: calc(800% / 9);
		}
		body.landing div.lede.img-container span {
			width: 100%; height: 25%;
			will-change: right;
			-webkit-background-size: auto 400%;
			-moz-background-size: auto 400%;
			-o-background-size: auto 400%;
			background-size: auto 400%;
		}
		body.landing div.lede.img-container span:nth-child(1) {
			animation: none;
			animation: slideleft01 1s cubic-bezier(.67,-0.1,.67,1.15) 0s 1;
			top: auto;
			background-position: 50% 0%; }
		body.landing div.lede.img-container span:nth-child(2) {
			animation: none;
			animation: slideleft02 1s cubic-bezier(.67,-0.1,.67,1.15) 0s 1;
			top: auto; right: calc((-1 * ((calc(100vh - var(--logowidth)) - calc(100vw - var(--logowidth))) * (2 / 3))) * (2 / 3));
			background-position: 50% 33.33333%; }
		body.landing div.lede.img-container span:nth-child(3) {
			animation: none;
			animation: slideleft03 1s cubic-bezier(.67,-0.1,.67,1.15) 0s 1;
			top: auto; right: calc((-1 * ((calc(100vh - var(--logowidth)) - calc(100vw - var(--logowidth))) * (2 / 3))) * (1 / 3));
			background-position: 50% 66.66667%; }
		body.landing div.lede.img-container span:nth-child(4) {
			animation: none;
			animation: slideleft04 1s cubic-bezier(.67,-0.1,.67,1.15) 0s 1;
			top: auto; right: calc(-1 * ((calc(100vh - var(--logowidth)) - calc(100vw - var(--logowidth))) * (2 / 3)));
			background-position: 50% 100%; }
	}


	/*------ BODY.SHOWCASE ------*/

	body.showcase h1 { position: absolute; top: var(--margin); }
	body.showcase main { display: block; }
	body.showcase main > *:not(:last-child) { margin-bottom: var(--margin); }
	body.showcase div.lede.img-container {
		width: calc(100% + (var(--margin) * 2));
		height: auto;
		aspect-ratio: 4 / 3;
		margin: calc(-1 * var(--margin)) 0 calc(var(--margin) * 1) calc(-1 * var(--margin));
		overflow: hidden;
	}
	body.showcase main p:last-child { margin-bottom: calc(4 * var(--margin)); }
	@media (min-width: 1200px) { body.showcase main p:last-child { margin-bottom: 0; } }
	@media (min-width: 600px) { body.showcase div.lede.img-container { width: calc(100% - (var(--margin) * 2) - var(--logowidth)); margin: 0 0 calc(var(--margin) * 1) auto; } }
	@media (min-width: 768px) {
		body.showcase main > *:not(:last-child) { margin-bottom: calc(var(--margin) * 2); }
		body.showcase div.lede.img-container { width: calc(100% - (var(--margin) * 4) - var(--logowidth)); margin: 0 0 calc(var(--margin) * 2) auto; }
	}
	@media (min-width: 992px) { body.showcase div.lede.img-container { aspect-ratio: 3 / 2; width: calc(100% - (var(--margin) * 6) - var(--logowidth)); } }
	@media (min-width: 1200px) { body.showcase div.lede.img-container { aspect-ratio: 2 / 1; width: calc(100% - (var(--margin) * 8) - var(--logowidth)); } }

	body.showcase div.gallery-item.one-img, body.showcase div.gallery-item.two-img, body.showcase div.gallery-item.three-img {
		display: flex;
		flex-direction: column;
		gap: var(--margin);
		width: 100%;
		aspect-ratio: auto;
	}
	body.showcase div.gallery-item:not(:last-child) { margin-bottom: var(--margin);	}
	body.showcase div.gallery-item img, body.showcase div.gallery-item a { aspect-ratio: 4 / 3; width: 100%; }
	@media (min-width: 992px) {
		body.showcase div.gallery-item.two-img, body.showcase div.gallery-item.three-img { flex-direction: row; }
		body.showcase div.gallery-item.one-img img, body.showcase div.gallery-item.one-img a { aspect-ratio: 2 / 1; }
		body.showcase div.gallery-item.two-img img, body.showcase div.gallery-item.two-img a { aspect-ratio: 3 / 2;
			width: calc((100% - var(--margin)) / 2); }
		body.showcase div.gallery-item.three-img img, body.showcase div.gallery-item.three-img a { aspect-ratio: 1 / 1;
			width: calc((100% - (var(--margin) * 2)) / 3); }
	}
	body.showcase div.gallery-item a img,
	body.showcase div.gallery-item.two-img a img,
	body.showcase div.gallery-item.three-img a img { width: 100%; }
	@keyframes bounce-top-right {
		0% { top: 0; right: 0; }
		45% { top: 0; right: 0; }
		55% { top: 0.5em; right: 0.5em; }
		65% { top: 0.5em; right: 0.5em; }
		70% { top: 0; right: 0; }
		75% { top: 0.25em; right: 0.25em; }
		80% { top: 0; right: 0; }
		85% { top: 0.125em; right: 0.125em; }
		90% { top: 0; right: 0; }
		95% { top: 0.0625em; right: 0.0625em; }
		100% { top: 0; right: 0; }
	}
	body.showcase div.gallery-item > a:after {
		content: '\2192';
		display: block;
		position: absolute;
		text-align: center;
		width: 1.5em;
		height: 1.5em;
		top: 0; right: 0;
		background: var(--text);
		color: var(--background);
	}
	body.showcase div.gallery-item > a[href^="//"]:after, body.showcase div.gallery-item > a[href^="mailto"]:after {
		content: '\2197';
		animation: bounce-top-right 3s ease-in-out 0s infinite;
	}