/*FONTS START*/
@font-face {
	font-family: "Xolonium";
	src: url("fonts/woff2/Xolonium-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Xolonium";
	src: url("fonts/woff2/Xolonium-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Meteora";
	src: url("fonts/ttf/Meteora-Light.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Meteora";
	src: url("fonts/ttf/Meteora-Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "SpaceMono";
	src: url("fonts/ttf/SpaceMono-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "SpaceMono";
	src: url("fonts/ttf/SpaceMono-Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "ApfelGrotezk";
	src: url("fonts/woff2/ApfelGrotezk-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "ApfelGrotezk";
	src: url("fonts/woff2/ApfelGrotezk-Fett.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "ApfelGrotezk";
	src: url("fonts/woff2/ApfelGrotezk-Brukt.woff2") format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Sentient";
	src: url("fonts/woff2/Sentient-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Sentient";
	src: url("fonts/woff2/Sentient-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Sentient";
	src: url("fonts/woff2/Sentient-BoldItalic.woff2") format("woff2");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "DMMono";
	src: url("fonts/ttf/DMMono-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "DMMono";
	src: url("fonts/ttf/DMMono-Medium.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "DMMono";
	src: url("fonts/ttf/DMMono-MediumItalic.ttf") format("truetype");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Runescape Plain 12";
	src: url("fonts/woff2/runescape_plain_12.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/*Xolonium     (NORMAL TITLE    / 400/700)*/
/*ApfelGrotezk (NORMAL TEXT     / 400/700)*/

/*Meteora      (SERIF TITLE     / 400/700)*/
/*Sentient     (SERIF TEXT      / 400/700)*/

/*SpaceMono    (MONOSPACE TITLE / 400/700)*/
/*DMMono       (MONOSPACE TEXT  / 400/700)*/

/*Runescape Plain 12       (NORMAL TEXT  / 400)*/

/*FONTS END*/

/*JQUERY UI RESET START*/
.ui-tabs .ui-tabs-panel {
	padding: unset;
}
/*JQUERY UI RESET END*/

/*HEADER HTML START*/
[data-type="skip-to-main"] {
	position: absolute;
	top: -200px;
	left: 50%;
	transform: translate(-50%, 0);
	width: fit-content;
	min-width: 540px;
	height: auto;
	z-index: -999;
	opacity: 0;
	visibility: hidden;
}

[data-type="skip-to-main"]:focus,
[data-type="skip-to-main"]:focus-visible,
[data-type="skip-to-main"]:active {
	top: var(--spacing-large);
	transform: scale(1) translate(-50%, 0);
	z-index: 9999;
	opacity: 1;
	visibility: visible;
}

[data-type="skip-to-main"]:hover {
	transform: scale(1) translate(-50%, 0);
	transition-duration: 250ms;
}

@media only screen and (max-width: 40rem) {
	[data-type="skip-to-main"] {
		min-width: unset;
		opacity: 0;
		visibility: hidden;
	}

	[data-type="skip-to-main"]:focus,
	[data-type="skip-to-main"]:focus-visible,
	[data-type="skip-to-main"]:active {
		opacity: 0;
		visibility: hidden;
	}
}

header {
	position: relative;
	z-index: 9999;
}

header > nav > ul {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding-inline-start: 0;
	list-style-type: none;
	width: 100%;
}

header > nav > ul > li {
	display: flex;
	column-gap: var(--spacing-medium);
	align-items: flex-start;
	width: 100%;
	white-space: nowrap;
}

header > nav > ul > li:nth-child(2) {
	width: fit-content;
}

header > nav > ul > li > a {
	width: 100%;
	text-decoration: none;
}

header > nav > ul > li > a > p {
	visibility: hidden;
	opacity: 0;
	transition:
		visibility 0s,
		opacity 0.25s linear;
	font-family: "Xolonium", sans-serif;
	color: var(--primary-color);
	transition-duration: 250ms;
}

[data-accessibility~="serif"] header > nav > ul > li > a > p {
	font-family: Meteora, serif;
}

[data-accessibility~="monospace"] header > nav > ul > li > a > p {
	font-family: SpaceMono, sans-serif;
}

header > nav > ul > li > a:hover > p,
header > nav > ul > li > a:focus-visible > p {
	visibility: visible;
	opacity: 1;
	transition-duration: 250ms;
}

header > nav > ul > li > a:first-child {
	align-self: flex-start;
}

img[data-type="back-button"] {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	transition-duration: 250ms;
}

img[data-type="back-button"]:hover {
	transform: scale(1.05);
	transition-duration: 250ms;
}

header > nav > ul > li > a:first-child img {
	width: 100%;
	max-width: 300px;
}

[data-accessibility~="dark"] header > nav > ul > li > a:first-child img {
	filter: invert(1);
}

[data-accessibility~="high-contrast"]
	header
	> nav
	> ul
	> li
	> a:first-child
	img {
	filter: invert(1) contrast(200%);
}

header > nav > ul > li:nth-child(2) {
	display: grid;
	grid-template-columns: auto auto;
	column-gap: var(--spacing-medium);
	font-family: "ApfelGrotezk", sans-serif;
}

[data-accessibility~="serif"] header > nav > ul > li:nth-child(2) {
	font-family: "Sentient", serif;
}

[data-accessibility~="monospace"] header > nav > ul > li:nth-child(2) {
	font-family: "DMMono", sans-serif;
}

header > nav > ul > li:nth-child(2) div:first-child {
	display: inherit;
	text-align: end;
}

header > nav > ul > li:nth-child(2) div:first-child p,
header > nav > ul > li:nth-child(2) div:first-child a {
	font-size: 16px;
	font-weight: 700;
	text-align: end;
	text-decoration: none;
	color: var(--primary-color);
	letter-spacing: 1.5px;
}

header > nav > ul > li:nth-child(2) div:nth-child(2) p {
	font-size: 16px;
	color: var(--focus-color);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

[data-type="SAlogo"] {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	width: fit-content;
	gap: var(--spacing-x-small);
}

[data-type="SAlogo"] p {
	line-height: 1;
}

[data-type="backButton"] {
	width: 100%;
	max-width: 75px;
	height: auto;
}

[data-logo="brand"] + p {
	display: none;
}

header > nav > ul > li:nth-child(2) div:first-child a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media only screen and (max-width: 40rem) {
	header > nav > ul {
		flex-direction: column;
		row-gap: var(--spacing-medium);
	}

	header > nav > ul > li:nth-child(2) {
		align-self: flex-end;
	}

	[data-type="SAlogo"] p,
	header > nav > ul > li > a > p {
		display: none;
	}
}

@media only screen and (max-width: 51.2rem) {
	header > nav > ul > li:nth-child(2) div {
		display: none;
	}

	header > nav > ul > li:nth-child(2) {
		column-gap: 0;
	}
}

@media only screen and (max-width: 38.4rem) {
	[data-type="backButton"] {
		display: none;
	}
}

/* Portfolio START */
[data-type="portfolio"],
[data-type="games"] {
	display: grid;
	gap: var(--spacing-normal);
	margin-top: var(--spacing-medium);
	margin-bottom: var(--spacing-large);
}

[data-type="portfolio"][data-category~="brand"] {
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

[data-type="games"] {
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

@media only screen and (min-width: 24rem) {
	[data-accessibility~="narrow"]
		[data-type="portfolio"][data-category~="brand"],
	[data-accessibility~="narrow"] [data-type="games"] {
		grid-template-columns: 1fr;
	}
}

@media only screen and (min-width: 38.4rem) {
	[data-accessibility~="narrow"]
		[data-type="portfolio"][data-category~="brand"],
	[data-accessibility~="narrow"] [data-type="games"] {
		grid-template-columns: 1fr 1fr;
	}
}

@media only screen and (min-width: 64rem) {
	[data-accessibility~="narrow"]
		[data-type="portfolio"][data-category~="brand"],
	[data-accessibility~="narrow"] [data-type="games"] {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

@media only screen and (min-width: 96rem) {
	[data-accessibility~="extra-wide"]
		[data-type="portfolio"][data-category~="brand"],
	[data-accessibility~="extra-wide"] [data-type="games"] {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	}
}

@media only screen and (min-width: 96rem) {
	[data-accessibility~="unlimited"]
		[data-type="portfolio"][data-category~="brand"],
	[data-accessibility~="unlimited"] [data-type="games"] {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	}
}

@media only screen and (min-width: 128rem) {
	[data-accessibility~="unlimited"]
		[data-type="portfolio"][data-category~="brand"] {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	}
}

[data-accessibility~="button"] [data-type="portfolio"][data-category~="brand"] {
	grid-template-columns: 1fr 1fr 1fr;
}

[data-type="portfolio"][data-category="beyond"] {
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

[data-accessibility~="button"] [data-type="portfolio"][data-category="beyond"] {
	grid-template-columns: 1fr 1fr 1fr;
}

@media only screen and (max-width: 68.3rem) {
	[data-type="portfolio"][data-category~="brand"],
	[data-type="portfolio"][data-category="beyond"],
	[data-type="games"] {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

@media only screen and (max-width: 38.4rem) {
	[data-type="portfolio"][data-category~="brand"],
	[data-type="portfolio"][data-category="beyond"],
	[data-type="games"] {
		grid-template-columns: 1fr 1fr;
	}

	nav ul {
		display: none;
	}
}

@media only screen and (max-width: 24rem) {
	[data-type="portfolio"][data-category~="brand"],
	[data-type="portfolio"][data-category="beyond"],
	[data-type="games"] {
		grid-template-columns: 1fr;
	}
}
/* Portfolio END */
[data-type="portfolio-item"] a {
	position: relative;
}

[data-type="portfolio-item"] img,
[data-type="games"] img {
	border-radius: 15px;
}

[data-type="games"] img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

[data-accessibility~="dark"] [data-type="portfolio-item"] img {
	filter: invert(1);
}

[data-accessibility~="high-contrast"] [data-type="portfolio-item"] img {
	filter: invert(1) contrast(200%);
	border: 2px solid var(--primary-color);
}

[data-poster] a,
[data-type="portfolio-item"] a {
	cursor: pointer;
}

[data-type="portfolio"] img,
[data-type="games"] img {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

[data-type="portfolio"] a:focus-visible img {
	transform: scale(1.02);
	outline: 2px solid var(--focus-color);
	outline-offset: var(--spacing-xx-small);
	border-radius: 17px;
	transition-duration: 250ms;
}

.contact-container p,
.contact-container a {
	font-family: "ApfelGrotezk", sans-serif;
	font-size: var(--font-size);
	font-weight: 400;
	letter-spacing: 1px;
}

.contact-container a {
	color: var(--focus-color);
	text-decoration: none;
}

.contact-container {
	padding: var(--spacing-normal);
	text-align: right;
	margin-right: var(--spacing-x-small);
}

@media only screen and (max-width: 48rem) {
	.contact-container {
		display: none;
	}
}

.footer-contact-container p,
.footer-contact-container a {
	font-family: "ApfelGrotezk", sans-serif;
	font-size: var(--font-size);
	font-weight: 400;
	letter-spacing: 1px;
}

.footer-contact-container a {
	color: var(--focus-color);
	text-decoration: none;
}

.footer-contact-container {
	text-align: left;
	padding: var(--spacing-normal);
	margin-bottom: var(--spacing-medium);
	margin-left: var(--spacing-x-small);
}

@media only screen and (min-width: 961px) {
	.footer-contact-container {
		display: none;
	}
}

@media only screen and (max-width: 460px) {
	.footer-contact-container {
		text-align: center;
		margin-left: 0;
	}
}

[data-type="footer-credits"] {
	display: flex;
	flex-direction: column;
	gap: 0;
	text-align: center;
}

[data-type="footer-credits"] span {
	white-space: nowrap;
}

@media only screen and (max-width: 460px) {
	[data-type="footer-credits"] {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
}

[data-type="info-box"] {
	text-align: center;
}

[data-button="back-to-top"][data-active="true"] {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease;
}

[data-button="back-to-top"][data-active="false"] {
	opacity: 0;
	visibility: hidden;
}

[data-button="back-to-top"] {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	bottom: var(--spacing-medium);
	right: var(--spacing-x-large);
	gap: var(--spacing-x-small);
	padding: var(--spacing-x-small) var(--spacing-medium) var(--spacing-x-small)
		var(--spacing-medium);
	width: fit-content;
	height: fit-content;
	font-size: 16px;
	letter-spacing: 1px;
	cursor: pointer;
	background-color: #252525;
	color: #f4f3f2;
	border: 2px solid #f4f3f2;
	border-radius: 5px;
}

[data-button="back-to-top"]::before {
	content: "TOP";
}

[data-button="back-to-top"]::after {
	content: "↑";
}

[data-accessibility~="button"] [data-button="back-to-top"] {
	padding: var(--spacing-small) var(--spacing-x-large) var(--spacing-small)
		var(--spacing-x-large);
}

@media only screen and (max-width: 86rem) {
	[data-button="back-to-top"] {
		right: var(--spacing-medium);
		padding: var(--spacing-x-small) var(--spacing-small)
			var(--spacing-x-small) var(--spacing-small);
		width: 50px;
		height: 50px;
	}

	[data-button="back-to-top"]::before {
		display: none;
	}
}

[data-type="logo-image"] {
	width: 100%;
	border-radius: unset;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

[data-accessibility~="dark"] [data-type="logo-image"] {
	filter: invert(1);
}

[data-accessibility~="high-contrast"] [data-type="logo-image"] {
	filter: invert(1) contrast(200%);
}

[data-logo~="sa"] {
	height: 62px;
	width: auto;
	max-width: fit-content;
}

[data-logo~="saplus"] {
	height: 84px;
	width: auto;
	max-width: fit-content;
}

[data-logo~="saplustop"] {
	height: 80px;
	width: auto;
	max-width: fit-content;
	margin-top: -18px;
}

[data-type="explore-further"] {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin-bottom: 25px;
}

footer hr:first-child {
	margin-top: var(--spacing-x-large);
	margin-bottom: var(--spacing-medium);
}

footer hr:nth-of-type(2) {
	margin-top: 32px;
	margin-bottom: 45px;
}

[data-type="explore-further"] span {
	font-size: 50px;
	font-family: "Xolonium", sans-serif;
	padding-left: 10px;
	padding-right: 10px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

@media only screen and (max-width: 38.4rem) {
	[data-type="explore-further"] {
		flex-direction: column;
		gap: 25px;
	}

	[data-type="explore-further"] a {
		width: 100%;
	}

	[data-type="explore-further"] span {
		display: none;
	}

	.ui-helper-clearfix:before,
	.ui-helper-clearfix:after {
		display: none;
	}
}

[data-type="footer"] {
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--spacing-medium);
	margin-bottom: 50px;
}

[data-type="footer"] [data-footer="buttons"] {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	gap: 25px;
}

[data-button~="icon"] {
	padding: 0;
	margin: 0;
	background-color: unset;
	border: none;
	cursor: pointer;
	transition-duration: 250ms;
	width: 50px;
	height: auto;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

[data-accessibility~="dark"] [data-button~="icon"] {
	filter: invert(1);
}

[data-accessibility~="high-contrast"] [data-button~="icon"] {
	filter: invert(1) contrast(200%);
}

[data-type="title"] {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	gap: 25px;
	position: relative;
	width: 100%;
}

[data-type="title"] h1 {
	text-indent: -5px;
	text-indent: -5px each-line;
}

[data-project="summary"] p:has(+ figure) {
	margin-bottom: 0;
}

[data-type="main-accessibility"] {
	display: flex;
	flex-direction: row;
	gap: 25px;
	width: fit-content;
	margin-top: 15px;
}

[data-type="main-accessibility"] [data-button~="icon"]:hover,
[data-type="main-accessibility"] [data-button~="icon"]:focus-visible {
	transform: scale(1.05);
	transition-duration: 250ms;
}

@media only screen and (max-width: 48rem) {
	[data-type="main-accessibility"] [data-button~="icon"]:hover,
	[data-type="main-accessibility"] [data-button~="icon"]:focus-visible {
		transform: scale(1);
	}
}

[data-type="main-accessibility"] [data-button~="icon"]:focus-visible {
	outline: 2px solid var(--focus-color);
	outline-offset: 2px;
	border-radius: 10px;
}

@media only screen and (max-width: 48rem) {
	[data-type="title"] {
		align-items: flex-start;
	}

	[data-type="main-accessibility"] [data-button~="icon"] {
		width: 40px;
	}
}

@media only screen and (max-width: 38.4rem) {
	[data-type="title"] #main {
		order: 2;
		border-top: 1px solid rgba(37, 37, 37, 0.25);
		padding-top: 10px;
		width: 100%;
	}

	[data-type="title"] [data-type="main-accessibility"] {
		order: 1;
		justify-content: flex-end;
		width: 100%;
	}

	[data-page~="project"] [data-type="main-accessibility"] {
		border-top: 1px solid rgba(37, 37, 37, 0.25);
		border-bottom: 1px solid rgba(37, 37, 37, 0.25);
		margin-top: 0;
		margin-bottom: var(--spacing-small);
		padding-top: var(--spacing-small);
		padding-bottom: var(--spacing-small);
	}

	[data-type="title"] {
		flex-direction: column;
		gap: 0;
	}

	[data-type="main-accessibility"] {
		gap: 15px;
	}
}

[data-accessibility~="button"] [data-button~="icon"] {
	width: 80px;
	height: auto;
}

[data-type="footer"] > a:hover {
	color: var(--bg-color);
}

[data-type="footer"] button:focus-visible,
[data-type="footer"] a:focus-visible {
	outline: 2px solid var(--focus-color);
	outline-offset: 2px;
	border-radius: 1px;
	transition-duration: 250ms;
}

[data-type="footer"] a,
[data-type="navigation-explore"],
[data-type="navigation-deeper"],
[data-type="navigation-reverse"],
[data-type="navigation-forward"] {
	transition-duration: 250ms;
}

[data-type="footer"] a:hover,
[data-type="footer"] a:focus-visible,
[data-type="footer"] button:hover,
[data-type="footer"] button:focus-visible,
[data-type="navigation-explore"]:hover,
[data-type="navigation-deeper"]:hover,
[data-type="navigation-reverse"]:hover,
[data-type="navigation-forward"]:hover {
	transform: scale(1.05);
	transition-duration: 250ms;
}

@media only screen and (max-width: 48rem) {
	[data-type="footer"] a:hover,
	[data-type="footer"] a:focus-visible,
	[data-type="footer"] button:hover,
	[data-type="footer"] button:focus-visible,
	[data-type="navigation-explore"]:hover,
	[data-type="navigation-deeper"]:hover,
	[data-type="navigation-reverse"]:hover,
	[data-type="navigation-forward"]:hover {
		transform: scale(1);
	}
}

[data-type="footer"] a[data-type="contacts"]::before {
	content: "🌍 ";
	font-family: "Xolonium", sans-serif;
}

[data-type="navigation-reverse"]::before {
	content: "← 😃";
	font-family: "Xolonium", sans-serif;
	margin-right: var(--spacing-xx-small);
}

[data-type="navigation-forward"]::after {
	content: "😛 →";
	font-family: "Xolonium", sans-serif;
	margin-left: var(--spacing-xx-small);
}

[data-type="navigation-explore"]::before {
	content: "← 😃";
	font-family: "Xolonium", sans-serif;
	margin-right: var(--spacing-xx-small);
}

[data-type="navigation-deeper"]::after {
	content: "😊 →";
	font-family: "Xolonium", sans-serif;
	margin-left: var(--spacing-xx-small);
}

[data-type="navigation-explore"]:hover::before,
[data-type="navigation-explore"]:focus-visible::before {
	content: "← 😇";
	font-family: "Xolonium", sans-serif;
}

[data-type="navigation-deeper"]:hover::after,
[data-type="navigation-deeper"]:focus-visible::after {
	content: "😁 →";
	font-family: "Xolonium", sans-serif;
}

[data-type="footer"] a[data-type="contacts"]:hover::before,
[data-type="footer"] a[data-type="contacts"]:focus-visible::before {
	content: "🌎 ";
	font-family: "Xolonium", sans-serif;
}

[data-type="navigation-reverse"]:hover::before,
[data-type="navigation-reverse"]:focus-visible::before {
	content: "← 😉";
	font-family: "Xolonium", sans-serif;
}

[data-type="navigation-forward"]:hover::after,
[data-type="navigation-forward"]:focus-visible::after {
	content: "😝 →";
	font-family: "Xolonium", sans-serif;
}

[data-type="flex-row-wrap"] {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--spacing-medium);
}

[data-type="contact"] {
	margin-top: 10px;
}

[data-type="contact-grid"] {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xx-small);
}

[data-type="contact-item"] {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-medium);
}

[data-type="contact-item"] p {
	font-size: 18px;
	width: fit-content;
	margin: 0 !important;
}

[data-type="contact-item"] p:first-child {
	color: var(--focus-color);
	width: 150px;
	text-align: end;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

[data-type="contact-item"] p:last-child {
	font-weight: 700;
	letter-spacing: 1.2px;
	text-align: start;
}

@media only screen and (max-width: 48rem) {
	[data-type="contact-item"] {
		display: block;
	}

	[data-type="contact-item"] p:first-of-type {
		text-align: start;
	}
}

#scrollAccess,
#accessibilityButton a,
#accessibilityButtonFooter a {
	cursor: pointer;
}

/*EASY-TO-CONSUME START*/
[data-type~="easy-to-consume"] {
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
	padding: 0 !important;
	margin-bottom: 40px;
}

[data-type~="easy-to-consume"] ul {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 25px;
	padding: 0 !important;
}

[data-type~="easy-to-consume"] > ul > li::before {
	display: none;
}

[data-type~="easy-to-consume"] > ul > li > a {
	padding: 0 !important;
}

[data-accessibility~="dark"] [data-type~="easy-to-consume"] > ul > li > a {
	filter: invert(1);
}

[data-accessibility~="high-contrast"]
	[data-type~="easy-to-consume"]
	> ul
	> li
	> a {
	filter: invert(1) contrast(200%);
}

[data-type~="easy-to-consume"] > ul > li:focus-visible {
	outline: 2px solid var(--focus-color);
	outline-offset: 2px;
	border-radius: 7px;
}

[data-type~="easy-to-consume"] > ul > li > a {
	background-color: #252525;
	border-radius: 15px;
	cursor: pointer;
}

[data-type~="easy-to-consume"] > ul > li > a > img {
	height: 80px;
	width: auto;
	border-radius: 15px;
}

[data-type~="easy-to-consume"] > ul > li {
	margin: 0;
}

@media only screen and (max-width: 38.4rem) {
	[data-type~="easy-to-consume"] ul {
		flex-direction: column-reverse;
	}

	[data-type~="easy-to-consume"] > ul > li {
		display: flex;
		justify-content: center;
		width: 100%;
	}

	[data-type~="easy-to-consume"] > ul > li > a {
		background-color: #252525;
		border-radius: 15px;
		cursor: pointer;
		width: 100%;
		display: flex;
		justify-content: center;
	}

	[data-type~="easy-to-consume"] > ul > li::before {
		display: none;
	}
}

[data-type~="easy-content"] {
	padding: var(--spacing-medium) !important;
	border: 2px solid #252525 !important;
	border-radius: 15px;
	width: fit-content;
	margin-top: var(--spacing-x-large);
}

[data-type~="easy-content"] ul {
	display: block;
}

[data-type~="easy-to-listen"] {
	width: 100%;
}

[data-type~="easy-to-listen"] h3 {
	margin-bottom: 20px;
	margin-top: 0;
}

[data-type~="easy-to-listen"] .essential_audio {
	opacity: 1;
	visibility: visible;
	margin-bottom: 20px;
}
/*EASY-TO-CONSUME END*/

/*BREADCRUMBS START*/
nav[aria-label="breadcrumb"] {
	margin-bottom: var(--spacing-xx-small);
}

nav[aria-label="breadcrumb"] ul {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--spacing-small);
	row-gap: 0;
	line-height: 1;
	margin: 0;
	padding: 0;
}

nav[aria-label="breadcrumb"] ul li {
	font-size: 18px;
	line-height: 1;
}

nav[aria-label="breadcrumb"] ul li a {
	text-decoration: none;
	line-height: 1;
}

nav[aria-label="breadcrumb"] ul li.breadcrumb-separator {
	font-size: var(--font-size-medium);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
/*BREADCRUMBS END*/

/*SITEMAP START*/
[data-type="sitemap"] {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

[data-type="sitemap"] li {
	padding-left: 35px;
	text-indent: -27px;
	line-height: 1.55;
}

[data-type="sitemap"] li:before {
	font-family: "Xolonium", sans-serif;
	content: "●";
	padding-right: 10px;
}

[data-type="sitemap"] li a {
	text-decoration: none;
}
/*SITEMAP END*/

#scrollAccess {
	display: flex;
	flex-direction: column;
	gap: 8px;
	position: fixed;
	right: var(--spacing-medium);
	top: var(--spacing-medium);
	opacity: 0;
	visibility: hidden;
	z-index: 9998;
}

#scrollAccess img {
	width: 50px;
	height: auto;
	border: 2px solid #f4f3f2;
	background: #252525;
	border-radius: 15px;
}

#scrollAccess.show {
	opacity: 1;
	visibility: visible;
}

.ui-tooltip {
	font-size: 16px;
	text-wrap: wrap;
	text-transform: uppercase;
	text-align: center;
	color: var(--primary-text-color);
	background-color: var(--bg-color);
	padding: 10px 15px;
	border: 2px solid var(--primary-color);
	border-radius: 5px;
}

ul {
	list-style-type: none;
}

sitemap ul li:before {
	width: 24px;
	height: 24px;
	padding: 5px;
	position: relative;
	counter-increment: item;
	content: "▶";
	color: #252525;
	font-size: 20px;
	line-height: 16px;
	font-weight: 400;
}

@media only screen and (max-width: 48rem) {
	.ui-tooltip {
		display: none !important;
		visibility: hidden;
		opacity: 0;
	}
}

[data-accessibility~="button"] .ui-tooltip {
	font-size: var(--font-size);
	z-index: 9997;
}

[data-type="accessibility"] {
	display: none;
	position: fixed;
	z-index: 9998;
	background-color: var(--bg-color);
	overflow: auto;
}

[data-type="accessibility"] #accessibility-heading {
	display: block;
	font-size: var(--title-2-size);
	font-weight: 700;
	line-height: var(--title-2-line);
	margin-bottom: var(--spacing-x-small);
}

[data-accessibility~="navbar"] [data-type="accessibility"] {
	bottom: 0;
	left: 0;
	width: 100vw;
	height: fit-content;
	max-height: 100vh;
	border-top: 2px solid var(--primary-color);
}

[data-accessibility~="sidebar"] [data-type="accessibility"] {
	top: 0;
	right: 0;
	width: fit-content;
	max-width: 690px;
	height: 100vh;
	max-height: 100vh;
	border-left: 2px solid var(--primary-color);
}

[data-type="accessibility"] > div {
	width: 100%;
	max-width: var(--content-width);
	padding: var(--spacing-medium);
	margin-block-start: 1em;
	margin-inline-end: 10px;
}

[data-type="accessibility"] > div > div {
	padding-bottom: 40px;
}

[data-type="accessibility"] label {
	font-family: "ApfelGrotezk", sans-serif;
	font-size: var(--font-size);
	letter-spacing: 1px;
}

[data-type="accessibility"] [data-type="accessibility-content"] > span,
[data-type="accessibility"] [data-type="accessibility-category"] > span {
	display: block;
	font-size: var(--font-size);
	font-weight: 400;
	letter-spacing: var(--letter-spacing-normal);
	margin-top: var(--spacing-small);
	margin-bottom: var(--spacing-xx-small);
}

[data-accessibility~="button"] .ui-button {
	font-size: var(--font-size-medium);
	padding: var(--spacing-small) var(--spacing-x-large);
}

.ui-checkboxradio-icon-space {
	margin-left: 0;
	margin-right: 0;
}

[data-accessibility~="button"] .ui-checkboxradio-icon-space {
	margin-left: 2px;
	margin-right: 2px;
}

[data-type~="banner"] {
	background-color: #252525;
	color: #f4f3f2;
	padding: 25px 15px;
	text-align: center;
	border: 2px solid #f4f3f2;
	border-radius: 15px;
	line-height: 1;
}

[data-type~="pref"] {
	position: fixed;
	left: 35px;
	bottom: 25px;
	width: 400px;
	color: #f4f3f2;
	background-color: var(--info-color);
}

@media only screen and (max-width: 48rem) {
	[data-type~="pref"] {
		left: 0;
		bottom: 0;
		width: 100%;
		border-radius: 0;
	}
}

[data-type~="pref"] p {
	margin-bottom: 25px !important;
}

#sa-pref-bar[data-type*="disabled"] {
	display: none;
}

#sa-pref-bar[data-type*="available"] {
	display: block;
}

#sa-pref-bar > div {
	display: flex;
	flex-direction: row;
	gap: 25px;
	justify-content: center;
}

#rssContainer {
	display: none;
}

.feed-item {
	display: flex;
	gap: 25px;
	margin-bottom: 20px;
	border-bottom: 1px solid #ccc;
	padding-bottom: 10px;
}

.feed-title {
	font-size: var(--font-size);
	font-weight: bold;
}

.feed-date {
	font-size: 12px;
	color: gray;
}

.feed-description {
	margin: 10px 0;
}

.feed-image {
	width: fit-content;
}

.feed-content {
	width: 100%;
}

.feed-image img {
	width: 480px;
	max-width: 480px;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.checkbox-container {
	margin-bottom: 20px;
}

.checkbox-container label {
	margin-right: 10px;
}

.ui-button {
	border: 2px solid var(--primary-color);
	border-radius: 5px;
	padding: 11px 15px;
	margin-right: unset;
}

.ui-checkboxradio-label .ui-icon-background {
	box-shadow: unset;
	border: 2px solid var(--primary-color);
}

.ui-icon-background {
	background-color: var(--bg-color);
	width: 16px !important;
	height: 16px !important;
	color: green;
}

.ui-state-active .ui-icon-background {
	color: var(--focus-color);
}

.ui-checkboxradio-label {
	background-color: var(--bg-color);
	color: var(--primary-color);
}

.ui-checkboxradio-label.ui-checkboxradio-checked {
	background-color: var(--primary-color);
	color: var(--bg-color);
}

.ui-checkboxradio-radio-label.ui-checkboxradio-checked {
	background-color: var(--primary-color);
	color: var(--bg-color);
}

.ui-checkboxradio-checked .ui-icon-background {
	color: var(--bg-color);
	background-color: var(--primary-color);
	border: unset;
}

.ui-icon-check {
	position: relative;
}

.ui-icon-check::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	color: green;
	width: 16px;
	height: 16px;
	border: 2px solid var(--bg-color);
}

.ui-button .ui-icon {
	background-image: url("checked.svg");
	background-size: 50%;
	background-repeat: no-repeat;
	background-position: center;
}

[data-type="accessibility-container"] {
	display: flex;
	flex-wrap: wrap;
	column-gap: 10px;
	row-gap: 10px;
}

.essential_audio {
	opacity: 0;
	visibility: hidden;
	margin-top: 0;
	margin-bottom: 0;
}

[data-img~="blurOnLoad"] {
	filter: blur(10px);
	transition: filter 0.5s ease-out;
	margin: -5px -10px -10px -5px;
	background-color: #252525;
	transition-duration: 1000ms;
}

[data-img~="square"] {
	width: 100%;
	aspect-ratio: 1 / 1;
}

[data-img~="banner"] {
	width: 100%;
	aspect-ratio: 4 / 1;
	object-fit: cover;
}

[data-img~="banner"] {
	width: 100%;
	aspect-ratio: 4 / 1;
	object-fit: cover;
}

@media only screen and (max-width: 48rem) {
	[data-img~="banner"] {
		width: 100%;
		aspect-ratio: 4 / 2;
		object-fit: cover;
	}
}

[data-img~="landscape"] {
	width: 100%;
	height: auto;
}

[data-img~="imgLoaded"] {
	filter: unset;
	background-color: unset;
	margin: unset;
	transition-duration: 1000ms;
}

.sl-wrapper .sl-close {
	right: 25px;
	top: 25px;
	height: 50px;
	width: 50px;
	border: 2px solid var(--focus-color);
	background-color: var(--bg-color);
	border-radius: 15px;
	padding: 10px;
	margin-top: 0;
	margin-right: 0;
}

table {
	border: 1px solid #000;
}

table,
tr {
	height: fit-content;
}

[data-type="image-set"][data-layout="multi"] {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	gap: 25px;
}

[data-type="image-set"][data-layout="dual"] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 25px;
}

[data-type="image-set"][data-layout="triple"] {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 25px;
}

[data-type="image-set"][data-layout="quad"] {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 25px;
}

@media only screen and (max-width: 48rem) {
	[data-type="image-set"][data-layout="dual"],
	[data-type="image-set"][data-layout="triple"] {
		display: flex;
		flex-direction: column;
		gap: unset;
	}

	[data-type="image-set"][data-layout="multi"],
	[data-type="image-set"][data-layout="quad"] {
		grid-template-columns: 1fr 1fr;
	}
}

[data-type="main-title-navigation"] {
	display: flex;
	gap: 25px;
}

@media only screen and (max-width: 38.4rem) {
	[data-type="main-title-navigation"] {
		display: flex;
		gap: 15px;
	}
}

hr[data-type="dark"] {
	border-top: 2px solid var(--primary-color);
}

hr[data-type="light"] {
	border-top: 1px solid rgba(37, 37, 37, 0.25);
}

[data-type="link-tooltip"],
[data-tooltip="status-bar"] {
	visibility: hidden;
	opacity: 0;
	position: fixed;
	bottom: 0;
	left: 0;
	width: fit-content;
	padding: 10px;
	background-color: #f4f3f2;
	border-top: 2px solid #252525;
	border-right: 2px solid #252525;
	border-top-right-radius: 15px;
	z-index: 9999;
	color: #252525;
	transition:
		opacity 200ms,
		transform 200ms;
	transform: translateY(10px); /* Optional for a slide-in effect */
	margin-bottom: 0 !important;
	font-weight: 400;
}

[data-tooltip="status-bar"] span:not([data-info="links"]),
[data-type="link-tooltip"] span {
	text-decoration: underline;
	text-underline-offset: 6px;
}

[data-tooltip="status-bar"] span:not([data-info="links"]):after,
[data-type="link-tooltip"] span:after {
	content: " ↗";
}

[data-anchor="button"] > li:hover > [data-tooltip="status-bar"],
[data-type="portfolio"] a:hover > [data-type="link-tooltip"],
[data-type="portfolio"] a:hover > [data-tooltip="status-bar"],
[data-type="portfolio"] a:focus-visible > [data-type="link-tooltip"],
[data-type="explore-further"] a:hover + [data-type="link-tooltip"],
[data-type="main-title-navigation"] a:hover + [data-type="link-tooltip"],
[data-type="games"] a:hover > [data-type="link-tooltip"],
[data-type="entertainment-poster"] a:hover > [data-tooltip="status-bar"],
[data-type="games"] a:hover > [data-tooltip="status-bar"] {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

[data-accessibility~="tooltipsOFF"] [data-type="link-tooltip"] {
	display: none !important;
}

@media only screen and (max-width: 48rem) {
	[data-type="link-tooltip"] {
		display: none !important;
	}
}

[data-anchor="button"] {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 20px;
	row-gap: 20px;
}

[data-anchor="button"] li {
	display: flex;
	flex-direction: row;
	align-items: center;
	background-color: #252525;
	border-radius: 5px;
	text-indent: unset;
	padding-left: unset;
}

[data-anchor="button"] li a {
	height: 100%;
	padding: 0 14px;
	color: rgba(37, 37, 37, 0.5);
	cursor: default;
	border: 2px solid #252525;
	border-left: unset;
	background-color: #f4f3f2;
	border-radius: 5px;
	border-top-left-radius: unset;
	border-bottom-left-radius: unset;
	display: block;
	text-decoration: none;
}

[data-anchor="button"] li label {
	border-top-right-radius: unset;
	border-bottom-right-radius: unset;
}

[data-anchor="button"] li label.ui-checkboxradio-checked + a {
	color: #252525;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

[data-anchor="button"] li::before {
	display: none;
}

nav a {
	cursor: pointer;
}

[data-type="search"] {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 16px;
}

[data-type="search"] input {
	flex: 1;
	border: 1px solid #252525;
	padding: 9px 17px;
	border-radius: 5px;
}

[data-type="search"] input:focus-visible {
	outline: unset;
	border: 2px solid #252525;
	padding: 8px 16px;
}

[data-type="search"] button {
	outline: unset;
	padding: 8px 16px;
	border-radius: 5px;
	cursor: pointer;
}

[data-type="search"] button {
	color: #f4f3f2;
	background-color: #252525;
	border: 2px solid #252525;
}

[data-type="search"] button#clearSearch {
	color: #252525;
	background-color: #f4f3f2;
	border: 2px solid #252525;
}

[data-type="search"] button:hover {
	color: #252525;
	background-color: #f4f3f2;
}

[data-type="search"] button#clearSearch:hover {
	color: #f4f3f2;
	background-color: #252525;
}

[data-type="upcoming-shows"] {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 20px;
}

@media only screen and (max-width: 72rem) {
	[data-type="upcoming-shows"] {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

@media only screen and (max-width: 48rem) {
	[data-type="upcoming-shows"] {
		grid-template-columns: 1fr 1fr;
	}
}

@media only screen and (max-width: 38.4rem) {
	[data-type="upcoming-shows"] {
		grid-template-columns: 1fr;
	}
}

[data-type="favorite-shows"] {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	gap: 20px;
}

@media only screen and (max-width: 72rem) {
	[data-type="favorite-shows"] {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
}

@media only screen and (max-width: 48rem) {
	[data-type="favorite-shows"] {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

@media only screen and (max-width: 38.4rem) {
	[data-type="favorite-shows"] {
		grid-template-columns: 1fr 1fr;
	}
}

[data-type="upcoming-shows"] li,
[data-type="favorite-shows"] li {
	padding-left: unset;
	text-indent: unset;
	line-height: unset;
}

[data-type="upcoming-shows"] li::before,
[data-type="favorite-shows"] li::before {
	content: unset;
}

/* ── Grid / list view (assets/includes/view_mode.php) ──────────────────────
   The switch is a two-button segmented control, one per section. In list view
   each poster tile becomes a row: the poster, then the tile's own status-bar
   tooltip shown inline instead of docked at the bottom of the viewport. Wide
   screens put two rows side by side — each item still reads as a row. */
/* The section heading and its switch share a row, switch on the right. The
   right padding keeps the switch clear of the fixed #scrollAccess buttons
   (a 2.5rem column pinned near the right edge) when a jump link scrolls the
   heading to the top of the screen. */
[data-view-head] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-small) var(--spacing-normal);
}

[data-view-switch] {
	display: inline-flex;
	flex: 0 0 auto;
}

/* A page-wide switch (collections, wishlist) has the row to itself. */
[data-view-head] > [data-view-switch]:only-child {
	margin-left: auto;
}

[data-view-switch] button {
	font: inherit;
	font-size: var(--font-size-small);
	padding: var(--spacing-xx-small) var(--spacing-x-small);
	border: 0.1rem solid var(--primary-color);
	background-color: var(--bg-color);
	color: var(--primary-text-color);
	cursor: pointer;
}

[data-view-switch] button:first-child {
	border-radius: var(--spacing-xx-small) 0 0 var(--spacing-xx-small);
}

[data-view-switch] button:last-child {
	border-left: 0;
	border-radius: 0 var(--spacing-xx-small) var(--spacing-xx-small) 0;
}

[data-view-switch] button[aria-pressed="true"] {
	background-color: var(--primary-color);
	color: var(--bg-color);
}

[data-view="list"] :is([data-type="favorite-shows"], [data-type="games"]) {
	grid-template-columns: 1fr;
	gap: var(--spacing-normal);
}

@media only screen and (min-width: 72rem) {
	[data-view="list"] :is([data-type="favorite-shows"], [data-type="games"]) {
		grid-template-columns: 1fr 1fr;
	}
}

/* One shade-2 card per item: the poster flush on the left, the text beside
   it. The poster stretches to the card's height and crops to fill, so the two
   always meet edge to edge — on desktop the card is the poster's height and
   nothing is cut; on phones, where the text is taller, the poster loses a
   little at its sides. The card's corner is the poster radius, so the badges'
   corners (which read --poster-radius) match it. */
[data-view="list"] :is([data-type="favorite-shows"], [data-type="games"]) > [data-poster] {
	display: grid;
	grid-template-columns: var(--list-poster-w) 1fr;
	align-items: stretch;
	background-color: var(--shade-2);
	color: var(--primary-text-color);
	border-radius: var(--poster-radius);
	overflow: hidden;
	transition: transform 250ms ease;
}

/* The poster column follows the tile's own shape (data-ratio from the badge
   manager, or images flagged square), at widths that keep the card about the
   same height — so square art is not forced into a portrait slot and cropped. */
[data-view="list"] [data-poster] {
	--list-poster-w: 7.5rem;
	--list-poster-w-sm: 5.5rem;
}

[data-view="list"] [data-poster][data-ratio="portrait"] {
	--list-poster-w: 8.5rem;
	--list-poster-w-sm: 6rem;
}

[data-view="list"] [data-poster][data-ratio="square"],
[data-view="list"] [data-poster]:has(img[data-img~="square"]) {
	--list-poster-w: 10rem;
	--list-poster-w-sm: 5.5rem;
}

[data-view="list"] [data-poster][data-ratio="landscape"] {
	--list-poster-w: 13rem;
	--list-poster-w-sm: 8rem;
}

[data-view="list"] [data-poster][data-ratio="wide"] {
	--list-poster-w: 16rem;
	--list-poster-w-sm: 9rem;
}

/* The whole card lifts on hover, like a poster tile does in the grid. */
[data-view="list"] :is([data-type="favorite-shows"], [data-type="games"]) > [data-poster]:hover,
[data-view="list"] :is([data-type="favorite-shows"], [data-type="games"]) > [data-poster]:focus-within {
	transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
	[data-view="list"] :is([data-type="favorite-shows"], [data-type="games"]) > [data-poster] {
		transition: none;
	}
	[data-view="list"] :is([data-type="favorite-shows"], [data-type="games"]) > [data-poster]:hover,
	[data-view="list"] :is([data-type="favorite-shows"], [data-type="games"]) > [data-poster]:focus-within {
		transform: none;
	}
}

/* The image keeps its own shape at the top of the card, never stretched to
   the card's height (that cropped it whenever the text ran taller). Where the
   card does run taller, its colour continues below and the image's free
   corner is rounded; badges on that edge follow. */
[data-view="list"] [data-poster] [data-poster-frame] {
	display: block;
	align-self: start;
}

[data-view="list"] [data-poster] [data-poster-frame] > a:not([data-badge]) {
	display: block;
}

[data-view="list"] [data-poster] [data-poster-frame] img {
	height: auto;
	border-radius: 0 0 var(--poster-radius) 0;
}

[data-view="list"] :is([data-type="favorite-shows"], [data-type="games"]) [data-poster] [data-badge][data-pos="bottom-left"] {
	border-radius: 0 var(--poster-radius) 0 0;
}

[data-view="list"] :is([data-type="favorite-shows"], [data-type="games"]) [data-poster] [data-badge][data-pos="bottom-right"],
[data-view="list"] :is([data-type="favorite-shows"], [data-type="games"]) [data-type="entertainment-poster"] [data-upcoming]::before {
	border-radius: var(--poster-radius) 0 var(--poster-radius) 0;
}

@media only screen and (max-width: 38.4rem) {
	[data-view="list"] :is([data-type="favorite-shows"], [data-type="games"]) > [data-poster] {
		grid-template-columns: var(--list-poster-w-sm) 1fr;
	}

	/* Too narrow to share a line: the title gets the full width and the logos
	   sit under it as their own row. */
	[data-view="list"] [data-poster] [data-info="head"] {
		flex-wrap: wrap;
		row-gap: var(--spacing-x-small);
	}

	[data-view="list"] [data-poster] [data-info="links"] {
		flex-basis: 100%;
		margin-left: 0;
		padding-left: 0;
	}
}

[data-view="list"] [data-poster]:hover [data-poster-frame],
[data-view="list"] [data-poster]:focus-within [data-poster-frame] {
	transform: none;
}

[data-view="list"] [data-poster] a {
	pointer-events: auto;
}

/* Badges sized for a small poster, not a grid tile. */
[data-view="list"] [data-poster] [data-badge] {
	height: 1.5rem;
}

[data-view="list"] [data-poster] [data-badge][data-badge-style="icon"] {
	width: 1.5rem;
}

[data-view="list"] [data-poster] [data-badge][data-badge-style="text"] {
	min-width: 0;
	padding: 0 0.35rem;
	font-size: 0.6rem;
}

/* The poster's right edge meets the text, not the card's edge, so badges on
   that side keep only their rounded inner corner. */
[data-view="list"] [data-poster] [data-badge][data-pos="top-right"] {
	border-radius: 0 0 0 var(--poster-radius);
}

[data-view="list"] [data-poster] [data-badge][data-pos="bottom-right"] {
	border-radius: var(--poster-radius) 0 0 0;
}

[data-view="list"] [data-type="entertainment-poster"] [data-upcoming]::before {
	width: 1.5rem;
	height: 1.5rem;
	background-size: contain;
	border-radius: var(--poster-radius) 0 0 0;
}

[data-view="list"] [data-poster] > [data-tooltip="status-bar"] {
	position: static;
	visibility: visible;
	opacity: 1;
	transform: none;
	width: auto;
	padding: var(--spacing-normal);
	background: none;
	border: 0;
	border-radius: 0;
	z-index: auto;
	transition: none;
}

/* Header at the top, details at the bottom, level with the poster's foot:
   the block stretches to the row's height and space-between pushes the
   details down. */
[data-view="list"]
	:is([data-type="favorite-shows"], [data-type="games"])
	> [data-poster]
	> [data-tooltip="status-bar"] {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

[data-view="list"] [data-poster] > [data-tooltip="status-bar"] hr {
	display: none;
}

[data-view="list"] [data-poster] > [data-tooltip="status-bar"] > div {
	flex-direction: column;
	gap: var(--spacing-x-small);
	margin-top: var(--spacing-small);
}

[data-view="list"] [data-poster] > [data-tooltip="status-bar"] small {
	max-width: none;
}

/* Items with many details (a moomin mug has seven) would make a very tall
   card; from four details up they take two columns. */
@media only screen and (min-width: 38.4rem) {
	[data-view="list"] [data-poster] > [data-tooltip="status-bar"] > div:has(> small:nth-child(4)) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Upcoming episodes as a list: one shade-2 card per episode — the show's
   poster flush left, the show, episode and description in the middle, the
   episode still on the right. Rows stay one per line: the description needs
   the width. The still's column collapses when an episode has none. */
[data-view="list"] [data-type="upcoming-shows"] {
	grid-template-columns: 1fr;
	gap: var(--spacing-normal);
}

[data-view="list"] [data-type="upcoming-shows"] > li {
	display: grid;
	grid-template-columns: 7.5rem 1fr auto;
	grid-template-rows: auto 1fr;
	grid-template-areas:
		"poster head still"
		"poster desc still";
	column-gap: var(--spacing-normal);
	background-color: var(--shade-2);
	color: var(--primary-text-color);
	border-radius: var(--spacing-x-small);
	overflow: hidden;
	transition: transform 250ms ease;
}

[data-view="list"] [data-type="upcoming-shows"] > li:hover,
[data-view="list"] [data-type="upcoming-shows"] > li:focus-within {
	transform: scale(1.01);
}

@media (prefers-reduced-motion: reduce) {
	[data-view="list"] [data-type="upcoming-shows"] > li {
		transition: none;
	}
	[data-view="list"] [data-type="upcoming-shows"] > li:hover,
	[data-view="list"] [data-type="upcoming-shows"] > li:focus-within {
		transform: none;
	}
}

[data-view="list"] [data-type="upcoming-shows"] > li > figure {
	margin: 0;
	padding: 0;
}

[data-view="list"] [data-type="upcoming-shows"] > li > figure:first-of-type {
	grid-area: poster;
}

[data-view="list"] [data-type="upcoming-shows"] > li > figure[data-img="episode"] {
	grid-area: still;
	width: 16rem;
}

/* Poster and still keep their own shapes at the top of the card, as in the
   other lists; each rounds the corner that ends inside the card. */
[data-view="list"] [data-type="upcoming-shows"] > li > figure {
	align-self: start;
}

[data-view="list"] [data-type="upcoming-shows"] > li > figure > a {
	display: block;
}

[data-view="list"] [data-type="upcoming-shows"] > li > figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0 0 var(--spacing-x-small) 0;
}

[data-view="list"] [data-type="upcoming-shows"] > li > figure[data-img="episode"] img {
	border-radius: 0 0 0 var(--spacing-x-small);
}

[data-view="list"] [data-type="upcoming-shows"] > li > h3 {
	grid-area: head;
	margin: 0;
	padding-top: var(--spacing-normal);
}

[data-view="list"] [data-type="upcoming-shows"] > li > p {
	grid-area: desc;
	padding-block: var(--spacing-x-small) var(--spacing-normal);
}

/* Without a still the text would run to the card's edge. */
[data-view="list"] [data-type="upcoming-shows"] > li:not(:has(> figure[data-img="episode"])) > :is(h3, p) {
	padding-right: var(--spacing-normal);
}

/* Phones: poster and text side by side, the still across the foot of the
   card. The poster keeps its own shape, as in the other lists. */
@media only screen and (max-width: 38.4rem) {
	[data-view="list"] [data-type="upcoming-shows"] > li {
		grid-template-columns: 5.5rem 1fr;
		grid-template-rows: auto 1fr auto;
		grid-template-areas:
			"poster head"
			"poster desc"
			"still still";
		column-gap: var(--spacing-small);
	}

	[data-view="list"] [data-type="upcoming-shows"] > li > figure:first-of-type {
		align-self: start;
	}

	[data-view="list"] [data-type="upcoming-shows"] > li > figure:first-of-type img {
		height: auto;
		border-radius: 0 0 var(--spacing-x-small) 0;
	}

	[data-view="list"] [data-type="upcoming-shows"] > li > figure[data-img="episode"] {
		width: auto;
	}

	[data-view="list"] [data-type="upcoming-shows"] > li > figure[data-img="episode"] img {
		border-radius: 0;
	}

	[data-view="list"] [data-type="upcoming-shows"] > li > :is(h3, p) {
		padding-right: var(--spacing-small);
	}
}

[data-type="upcoming-shows"] h3 {
	line-height: 1.2;
	margin-bottom: 15px;
}

[data-type="upcoming-shows"] h3 span {
	font-family: "ApfelGrotezk";
	font-size: 20px;
}

[data-type="upcoming-shows"] p {
	font-size: 16px;
	margin-bottom: unset !important;
}

[data-type="upcoming-shows"] figure:first-of-type {
	padding-top: 10px;
}

[data-img="episode"] img {
	width: 100%;
	height: auto;
}

[data-type="episode-date"] {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-left: 60px;
	font-weight: 700;
}

[data-type="episode-date"] span {
	font-weight: 400;
}

[data-type="episode-date"]:first-of-type {
	margin-top: 30px;
}

[data-type="episode-date"]::before {
	content: "";
	background: url("../img/icons/calendar.svg");
	width: 50px;
	height: 50px;
	position: absolute;
	left: 0;
}

@media only screen and (max-width: 48rem) {
	[data-mobile="false"] {
		display: none;
	}
}

[data-type="entertainment-poster"],
[data-type="games"] {
	position: relative;
}

[data-type="entertainment-poster"] a,
[data-type="games"] a {
	display: flex;
	position: relative;
	cursor: pointer;
	pointer-events: auto;
	object-fit: cover;
}

[data-type="entertainment-poster"] img {
	aspect-ratio: 2 / 3;
	object-fit: cover;
}

#owned-mugs [data-type="entertainment-poster"] img,
#all-mugs [data-type="entertainment-poster"] img,
#favorite-artists [data-type="entertainment-poster"] img,
#favorite-tracks [data-type="entertainment-poster"] img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* Collections & Wishlist opt into square tiles via data-img="square" */
[data-type="entertainment-poster"] img[data-img~="square"] {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* ═══════════════════════════════════════════════════════════════
   Poster component (assets/includes/poster.php)
   Every image-grid tile renders through renderPoster(), which stamps
   [data-poster] + [data-ratio] on the wrapper and emits badges as
   [data-badge][data-pos] siblings of the link. Both the ratio and the
   badge corners come from the DB (migration 050, local/badge-manager).
═══════════════════════════════════════════════════════════════ */

[data-poster] {
	position: relative;
	/* One source of truth for the tile's corner. base.css gives every img a
	   10px radius; the games/tools grids override their imgs to 15px. Badges
	   read this so their inner corner always matches the image. */
	--poster-radius: 10px;
}

[data-poster][data-type="portfolio-item"] {
	--poster-radius: 15px;
}

/* The frame wraps the link, image and badges. Hover scales the FRAME so the
   badges grow with the poster and stay glued to its corners — scaling only the
   image left the badges behind and let the image ride over them.
   The status-bar tooltip is deliberately OUTSIDE the frame: it is position:fixed,
   and a transformed ancestor would become its containing block and trap it. */
[data-poster-frame] {
	position: relative;
	display: block;
	transition: transform 250ms ease;
}

[data-poster]:hover [data-poster-frame],
[data-poster]:focus-within [data-poster-frame] {
	transform: scale(1.02);
}

/* Lift the hovered tile above its grid neighbours while it is scaled up. */
[data-poster]:hover,
[data-poster]:focus-within {
	z-index: 2;
}

/* Hover is tracked on the tile, so crossing onto a badge no longer drops it. */
[data-poster]:hover > [data-tooltip="status-bar"],
[data-poster]:focus-within > [data-tooltip="status-bar"] {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	[data-poster-frame] {
		transition: none;
	}
	[data-poster]:hover [data-poster-frame],
	[data-poster]:focus-within [data-poster-frame] {
		transform: none;
	}
}

[data-poster] img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

[data-poster][data-ratio="square"] img {
	aspect-ratio: 1 / 1;
}
[data-poster][data-ratio="poster"] img {
	aspect-ratio: 2 / 3;
}
[data-poster][data-ratio="portrait"] img {
	aspect-ratio: 3 / 4;
}
[data-poster][data-ratio="landscape"] img {
	aspect-ratio: 4 / 3;
}
[data-poster][data-ratio="wide"] img {
	aspect-ratio: 16 / 9;
}

/* ── Badges: corner, colour and icon all come from config ─────────────── */
[data-poster] [data-badge] {
	position: absolute;
	z-index: 3;
	height: var(--spacing-xx-large);
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--primary-color);
	color: var(--bg-color);
	pointer-events: none;
}

/* The review badge is the only interactive one */
[data-poster] a[data-badge] {
	pointer-events: auto;
	text-decoration: none;
}
[data-poster] a[data-badge]:hover,
[data-poster] a[data-badge]:focus {
	filter: brightness(1.12);
	color: var(--bg-color);
}

[data-poster] [data-badge][data-badge-style="icon"] {
	width: var(--spacing-xx-large);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 60%;
}

[data-poster] [data-badge][data-badge-style="text"] {
	min-width: 50px;
	padding: 0 0.5rem;
	font-size: var(--font-size-small);
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
}

[data-poster] [data-badge][data-pos="top-left"] {
	top: 0;
	left: 0;
	border-radius: var(--poster-radius) 0 var(--poster-radius) 0;
}
[data-poster] [data-badge][data-pos="top-right"] {
	top: 0;
	right: 0;
	border-radius: 0 var(--poster-radius) 0 var(--poster-radius);
}
[data-poster] [data-badge][data-pos="bottom-left"] {
	bottom: 0;
	left: 0;
	border-radius: 0 var(--poster-radius) 0 var(--poster-radius);
}
[data-poster] [data-badge][data-pos="bottom-right"] {
	bottom: 0;
	right: 0;
	border-radius: var(--poster-radius) 0 var(--poster-radius) 0;
}

/* Collections & Wishlist: de-emphasise disliked tiles */
#disliked [data-type="entertainment-poster"] img {
	filter: grayscale(0.4);
}

@media only screen and (max-width: 48rem) {
	[data-type="entertainment-poster"] a,
	[data-type="games"] a {
		pointer-events: none;
	}

	[data-type="entertainment-poster"] [data-tooltip="status-bar"],
	[data-type="games"] [data-tooltip="status-bar"] {
		pointer-events: auto;
	}

	[data-type="entertainment-poster"][data-status="active"]
		[data-tooltip="status-bar"],
	[data-type="games"][data-status="active"] [data-tooltip="status-bar"] {
		visibility: visible;
		opacity: 1;
		transform: translateY(0);
	}
}

[data-type="entertainment-poster"] [data-upcoming]::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: var(--spacing-xx-large);
	height: var(--spacing-xx-large);
	border-radius: 10px 0 10px 0;
	background-color: var(--primary-color);
}

[data-upcoming="true"]::before {
	background: url("../img/icons/upcoming-episodes.svg");
	border-top: 2px solid #ffd700;
	border-left: 2px solid #ffd700;
}

[data-upcoming="false"]::before {
	background: url("../img/icons/full-season.svg");
	border-top: 2px solid var(--success-color);
	border-left: 2px solid var(--success-color);
}

@media only screen and (max-width: 48rem) {
	[data-tooltip="status-bar"] {
		width: 100%;
		border-top: 2px solid var(--primary-color);
		border-right: unset;
		border-top-right-radius: unset;
	}
}

[data-type="entertainment-poster"] [data-tooltip="status-bar"] small,
[data-type="games"] [data-tooltip="status-bar"] small {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	margin-left: 3.75rem;
	max-width: 16rem;
	line-height: 1.2;
}

/* Config-driven tooltips (managed via local/tooltip-manager): the icon is a real
   <img> per line, laid out as a simple row (no position-based ::before icons). */
[data-tooltip="status-bar"][data-icons="managed"] small {
	margin-left: 0;
	gap: 0.5rem;
	flex-wrap: nowrap;
}
[data-tooltip="status-bar"][data-icons="managed"] small img {
	width: var(--spacing-xx-large);
	height: var(--spacing-xx-large);
	flex: 0 0 auto;
	object-fit: contain;
}

/* Status-bar header (tooltips.php): the title, then — on the right — small
   logo links (the item on TMDB, a search on EXT). Logo selectors match the
   specificity of the poster image rules ([data-poster][data-ratio] img),
   which would force them to 2:3, and win by coming later; base.css's img
   radius is taken off too. */
/* One line: a long title wraps inside its own box, the logos stay top-right.
   Baseline alignment sits the logos' foot on the title's first-line baseline,
   and at cap height (0.7em) their letters line up with the title's. */
[data-tooltip="status-bar"] [data-info="head"] {
	display: flex;
	flex-wrap: nowrap;
	align-items: baseline;
	column-gap: 0.4em;
	margin: 0;
}

/* A plain-text source ("Title — Steam ↗") has no logos to keep beside the
   title, so the line simply wraps; the source stays in one piece. */
[data-tooltip="status-bar"] [data-info="head"]:not(:has([data-info="links"])) {
	flex-wrap: wrap;
}

[data-tooltip="status-bar"] [data-info="source"] {
	white-space: nowrap;
}

/* …except where a long host would not fit the narrow text column at all. */
@media only screen and (max-width: 38.4rem) {
	[data-view="list"] [data-tooltip="status-bar"] [data-info="source"] {
		white-space: normal;
		overflow-wrap: anywhere;
	}
}

[data-tooltip="status-bar"] [data-info="title"] {
	min-width: 0;
}

[data-tooltip="status-bar"] [data-info="links"] {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: baseline;
	gap: var(--spacing-x-small);
	margin-left: auto;
	padding-left: var(--spacing-normal);
}

/* Poster status bars share the list rows' shade-2 card colour. The text
   colour is the theme's, so dark mode (shade-2 = #525252) stays readable. */
[data-poster] > [data-tooltip="status-bar"] {
	background-color: var(--shade-2);
	color: var(--primary-text-color);
}

/* One width for every poster on desktop, so the docked bar does not jump
   between items; long titles wrap inside it. Phones keep the full-width bar. */
@media only screen and (min-width: 48rem) {
	[data-poster] > [data-tooltip="status-bar"] {
		width: 24rem;
	}
}

[data-tooltip="status-bar"] [data-info="link"] {
	display: inline-flex;
	line-height: 0;
	transition: transform 150ms ease;
}

/* A small lift says "this is a link" without underlines or tooltips. */
[data-tooltip="status-bar"] [data-info="link"]:hover,
[data-tooltip="status-bar"] [data-info="link"]:focus-visible {
	transform: scale(1.15);
}

@media (prefers-reduced-motion: reduce) {
	[data-tooltip="status-bar"] [data-info="link"] {
		transition: none;
	}
}

[data-tooltip="status-bar"] [data-info="link"] img {
	display: block;
	width: auto;
	height: 0.75em;
	aspect-ratio: auto;
	object-fit: contain;
	border-radius: 0;
}

/* EXT's letters read smaller than the TMDB wordmark at the same
   height, so it gets a little more. */
[data-tooltip="status-bar"] [data-info="link"] img[src$="ext-to.svg"] {
	height: 0.85em;
}

/* Tile links are switched off on touch (first tap opens the status bar), but
   the status bar's own links must stay tappable. */
[data-type="entertainment-poster"]
	[data-tooltip="status-bar"]
	[data-info="link"] {
	pointer-events: auto;
}

[data-type="entertainment-poster"] [data-tooltip="status-bar"] div,
[data-type="games"] [data-tooltip="status-bar"] div {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

[data-type="entertainment-poster"] hr,
[data-type="games"] hr {
	margin-top: var(--spacing-x-small);
	margin-bottom: var(--spacing-x-small);
}

[data-type="loader"] {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: #f4f3f2;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 19999;
}

[data-type="loader"] img {
	width: fit-content;
	height: auto;
}

[data-page="preview"] [data-type="loader"] {
	position: relative;
	top: unset;
	left: unset;
	width: 100%;
	height: 400px;
}

[data-page="preview"] [data-type="loader"] img {
	width: 400px;
	height: auto;
}

/* "Show duplicates only" filter on the games page: hide non-duplicate tiles
   and any library section that ends up with nothing left to show. */
main:has(#duplicate-filter:checked)
	[data-type="games"]
	> [data-type="portfolio-item"]:not([data-duplicate]) {
	display: none;
}
main:has(#duplicate-filter:checked)
	section[data-type="category"]:not(
		:has([data-type="portfolio-item"][data-duplicate])
	) {
	display: none;
}

[data-type="category"] > p {
	color: var(--shade-5);
}

[data-info="platforms"] {
	display: none;
}
main:has(#duplicate-filter:checked) [data-info="platforms"] {
	display: revert;
}

[data-tooltip="status-bar"][data-dup-tooltip] {
	display: none;
}
main:has(#duplicate-filter:checked)
	[data-tooltip="status-bar"][data-dup-tooltip] {
	display: revert;
}
main:has(#duplicate-filter:checked)
	[data-type="games"]
	[data-type="link-tooltip"] {
	display: none;
}

[data-type="notification"] {
	padding: 20px;
	border: 2px solid #252525;
	border-radius: 10px;
	width: fit-content;
}

figure[data-type="img-icon-banner"] {
	padding-top: unset;
}

figure[data-type="img-icon-banner"]:hover {
	transform: scale(1.0125);
}

figure[data-type="img-icon-banner"]:has(img) {
}

figure[data-type="img-icon-banner"] a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	border-radius: 1rem;
}

figure[data-type="img-icon-banner"] a[href="/assets/img/icons/design.webp"] {
	background-color: var(--focus-color);
}

figure[data-type="img-icon-banner"]
	a[href="/assets/img/icons/development.webp"] {
	background-color: #7ea16b;
}

figure[data-type="img-icon-banner"]
	a[href="/assets/img/icons/communications.webp"] {
	background-color: #9395d3;
}

figure[data-type="img-icon-banner"] img {
	height: 100%;
	width: auto;
	max-height: 10rem;
}

[data-type="hero"] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 1.25rem;
	padding: 1.25rem 0;
	border-radius: 1rem;
}

[data-accessibility~="narrow"] [data-type="hero"] {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

[data-accessibility~="narrow"] [data-type="hero-img"] {
	display: none;
}

@media (max-width: 80rem) {
	[data-type="hero"] {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		width: fit-content;
	}
}

[data-type="hero"] h1 {
	line-height: 0.8;
	margin-bottom: 1.5rem;
}

[data-type="hero"] p {
	margin-bottom: 2rem !important;
}

[data-type="hero-img"] {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 1rem;
	height: 20rem;
	width: 100%;
}

[data-type="hero-content"] br {
	margin-bottom: 0;
	margin-top: 0;
}

@media (max-width: 80rem) {
	[data-type="hero-img"] {
		gap: 1.5rem;
		order: 1;
		margin-top: 0;
		margin-bottom: 0;
		height: unset;
	}

	[data-type="hero-img"] div {
		border-radius: 1rem;
	}

	[data-type="hero-img"]
		div:has(img[src="assets/img/icons/development.svg"]) {
		background-color: #7ea16b;
	}

	[data-type="hero-img"] div:has(img[src="assets/img/icons/design.svg"]) {
		background-color: var(--focus-color);
	}

	[data-type="hero-img"]
		div:has(img[src="assets/img/icons/communications.svg"]) {
		background-color: #9395d3;
	}

	[data-type="hero-content"] {
		order: 2;
	}

	[data-type="hero-content"] br {
		display: none;
	}
}

@media (max-width: 48rem) {
	[data-type="hero-img"] {
		gap: unset;
		order: 2;
	}

	[data-type="hero-img"] > div:first-child > img {
		border-top-right-radius: unset;
		border-bottom-right-radius: unset;
	}

	[data-type="hero-img"] > div:nth-child(2) > img {
		border-radius: unset;
	}

	[data-type="hero-img"] > div:last-child > img {
		border-top-left-radius: unset;
		border-bottom-left-radius: unset;
	}

	[data-type="hero"] h1 {
		line-height: var(--title-1-line);
	}

	[data-type="hero-content"] br {
		display: none;
	}
}

@media (max-width: 30rem) {
	[data-type="hero-content"] br {
		display: none;
	}
}

[data-type="hero-img"] div {
	display: flex;
	justify-content: center;
	position: relative;
	width: 100%;
	height: 100%;
}

[data-type="hero-img"] div img {
	width: 100%;
	height: auto;
	max-width: 12rem;
	aspect-ratio: 1 / 1;
}

@media (max-width: 80rem) {
	[data-type="hero-img"] div img {
		max-width: unset;
	}
}

[data-top-small],
[data-top-medium],
[data-top-large],
[data-bottom-small],
[data-bottom-medium],
[data-bottom-large] {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

/* Top variants */
[data-top-small] {
	top: 30%;
	transform: translate(-50%, -50%);
}
[data-top-medium] {
	top: 40%;
	transform: translate(-50%, -50%);
}
[data-top-large] {
	top: 50%;
	transform: translate(-50%, -50%);
}

/* Bottom variants */
[data-bottom-small] {
	bottom: 35%;
	transform: translate(-50%, 50%);
}
[data-bottom-medium] {
	bottom: 45%;
	transform: translate(-50%, 50%);
}
[data-bottom-large] {
	bottom: 55%;
	transform: translate(-50%, 50%);
}

[data-type="hero-content"] > div {
	display: flex;
	flex-direction: row;
	gap: 24px;
	flex-wrap: wrap;
}

@media (max-width: 80rem) {
	[data-top-small],
	[data-top-medium],
	[data-top-large],
	[data-bottom-small],
	[data-bottom-medium],
	[data-bottom-large] {
		position: relative;
		top: unset;
		bottom: unset;
		left: unset;
		transform: unset;
	}
}

[data-type="site-status-group"] {
	display: flex;
	flex-direction: column;
	margin-top: 25px;
}

[data-type="site-statuses"] {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 25px;
}

@media only screen and (max-width: 60rem) {
	[data-type="site-statuses"] {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media only screen and (max-width: 40rem) {
	[data-type="site-statuses"] {
		grid-template-columns: repeat(1, 1fr);
	}
}

[data-type="site-status"] {
	border: 2px solid #252525;
	border-radius: 5px;
	padding: 0 20px 20px;
	background-color: #ebeae9;
	height: fit-content;
}

[data-type="site-status"] a {
	font-size: 18px;
	word-wrap: break-word;
	word-break: break-all;
	white-space: normal;
	display: block;
}

[data-status="up"] {
	border: 2px solid #7ea16b;
	border-top: 10px solid #7ea16b;
}

[data-status="down"] {
	border: 2px solid #c1292e;
	border-top: 10px solid #c1292e;
}

.up {
	color: #7ea16b;
}

.down {
	color: #c1292e;
}

.login-error {
	padding: 5px 10px;
	margin-top: 10px;
	background-color: var(--focus-color);
	color: #252525;
	letter-spacing: 0.8px;
	border-radius: 10px;
	width: 488px;
	text-align: center;
	font-weight: 700;
}

[data-page="login"] {
	height: 100vh;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

[data-type="login-container"] {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: center;
	gap: 20px;
}

[data-type="login-container"] > img {
	height: 100%;
	object-fit: cover;
	grid-column: 1;
}

[data-type="login-container"] > div {
	width: 100%;
	grid-column: span 2;
}

@media only screen and (max-width: 68.3rem) {
	[data-page="login"] {
		height: auto;
		justify-content: flex-start;
	}

	[data-type="login-container"] > img {
		aspect-ratio: 2 / 1;
		object-fit: cover;
	}

	[data-type="login-container"] {
		display: flex;
		flex-direction: column;
	}
}

/*********************************************************/
/*CHAT START**********************************************/
/*********************************************************/

/*CHAT EFFECTS START**************************************/
[data-text-mode="wave"] .char1 {
	display: inline-block;
	animation: wave 0.66s linear infinite -50ms;
}
[data-text-mode="wave"] .char2 {
	display: inline-block;
	animation: wave 0.66s linear infinite -100ms;
}
[data-text-mode="wave"] .char3 {
	display: inline-block;
	animation: wave 0.66s linear infinite -150ms;
}
[data-text-mode="wave"] .char4 {
	display: inline-block;
	animation: wave 0.66s linear infinite -200ms;
}
[data-text-mode="wave"] .char5 {
	display: inline-block;
	animation: wave 0.66s linear infinite -250ms;
}
[data-text-mode="wave"] .char6 {
	display: inline-block;
	animation: wave 0.66s linear infinite -300ms;
}
[data-text-mode="wave"] .char7 {
	display: inline-block;
	animation: wave 0.66s linear infinite -350ms;
}
[data-text-mode="wave"] .char8 {
	display: inline-block;
	animation: wave 0.66s linear infinite -400ms;
}
[data-text-mode="wave"] .char9 {
	display: inline-block;
	animation: wave 0.66s linear infinite -450ms;
}
[data-text-mode="wave"] .char10 {
	display: inline-block;
	animation: wave 0.66s linear infinite -500ms;
}
[data-text-mode="wave"] .char11 {
	display: inline-block;
	animation: wave 0.66s linear infinite -550ms;
}
[data-text-mode="wave"] .char12 {
	display: inline-block;
	animation: wave 0.66s linear infinite -600ms;
}
[data-text-mode="wave"] .char13 {
	display: inline-block;
	animation: wave 0.66s linear infinite -650ms;
}
[data-text-mode="wave"] .char14 {
	display: inline-block;
	animation: wave 0.66s linear infinite -700ms;
}
[data-text-mode="wave"] .char15 {
	display: inline-block;
	animation: wave 0.66s linear infinite -750ms;
}
[data-text-mode="wave"] .char16 {
	display: inline-block;
	animation: wave 0.66s linear infinite -800ms;
}
[data-text-mode="wave"] .char17 {
	display: inline-block;
	animation: wave 0.66s linear infinite -850ms;
}
[data-text-mode="wave"] .char18 {
	display: inline-block;
	animation: wave 0.66s linear infinite -900ms;
}
[data-text-mode="wave"] .char19 {
	display: inline-block;
	animation: wave 0.66s linear infinite -950ms;
}
[data-text-mode="wave"] .char20 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1000ms;
}
[data-text-mode="wave"] .char21 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1050ms;
}
[data-text-mode="wave"] .char22 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1100ms;
}
[data-text-mode="wave"] .char23 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1150ms;
}
[data-text-mode="wave"] .char24 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1200ms;
}
[data-text-mode="wave"] .char25 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1250ms;
}
[data-text-mode="wave"] .char26 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1300ms;
}
[data-text-mode="wave"] .char27 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1350ms;
}
[data-text-mode="wave"] .char28 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1400ms;
}
[data-text-mode="wave"] .char29 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1450ms;
}
[data-text-mode="wave"] .char30 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1500ms;
}
[data-text-mode="wave"] .char31 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1550ms;
}
[data-text-mode="wave"] .char32 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1600ms;
}
[data-text-mode="wave"] .char33 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1650ms;
}
[data-text-mode="wave"] .char34 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1700ms;
}
[data-text-mode="wave"] .char35 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1750ms;
}
[data-text-mode="wave"] .char36 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1800ms;
}
[data-text-mode="wave"] .char37 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1850ms;
}
[data-text-mode="wave"] .char38 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1900ms;
}
[data-text-mode="wave"] .char39 {
	display: inline-block;
	animation: wave 0.66s linear infinite -1950ms;
}
[data-text-mode="wave"] .char40 {
	display: inline-block;
	animation: wave 0.66s linear infinite -2000ms;
}
[data-text-mode="wave"] .char41 {
	display: inline-block;
	animation: wave 0.66s linear infinite -2050ms;
}
[data-text-mode="wave"] .char42 {
	display: inline-block;
	animation: wave 0.66s linear infinite -2100ms;
}
[data-text-mode="wave"] .char43 {
	display: inline-block;
	animation: wave 0.66s linear infinite -2150ms;
}
[data-text-mode="wave"] .char44 {
	display: inline-block;
	animation: wave 0.66s linear infinite -2200ms;
}
[data-text-mode="wave"] .char45 {
	display: inline-block;
	animation: wave 0.66s linear infinite -2250ms;
}
[data-text-mode="wave"] .char46 {
	display: inline-block;
	animation: wave 0.66s linear infinite -2300ms;
}
[data-text-mode="wave"] .char47 {
	display: inline-block;
	animation: wave 0.66s linear infinite -2350ms;
}
[data-text-mode="wave"] .char48 {
	display: inline-block;
	animation: wave 0.66s linear infinite -2400ms;
}
[data-text-mode="wave"] .char49 {
	display: inline-block;
	animation: wave 0.66s linear infinite -2450ms;
}
[data-text-mode="wave"] .char50 {
	display: inline-block;
	animation: wave 0.66s linear infinite -2500ms;
}

@keyframes wave {
	0% {
		transform: translateY(0);
	}
	25% {
		transform: translateY(5px);
	}
	50% {
		transform: translateY(0);
	}
	75% {
		transform: translateY(-5px);
	}
	100% {
		transform: translateY(0);
	}
}

@keyframes scroll {
	0% {
		text-indent: 100%;
	}
	100% {
		text-indent: 0;
	}
}

@keyframes slide {
	0% {
		top: -1.5em;
	}
	10%,
	90% {
		top: 0;
	}
	100% {
		top: 1.5em;
	}
}

@keyframes flash1 {
	0% {
		color: #ff0000;
	}
	50% {
		color: #ff0;
	}
}

@keyframes flash2 {
	0% {
		color: #0000ff;
	}
	50% {
		color: #00ffff;
	}
}

@keyframes flash3 {
	0% {
		color: #00b000;
	}
	50% {
		color: #80ff80;
	}
}

@keyframes glow1 {
	0% {
		color: #ff0000;
	}
	33% {
		color: #00b000;
	}
	66% {
		color: #0000ff;
	}
	100% {
		color: #ff0000;
	}
}

@keyframes glow2 {
	0% {
		color: #ff0000;
	}
	33% {
		color: #800080;
	}
	66% {
		color: #0000ff;
	}
	100% {
		color: #ff0000;
	}
}

@keyframes glow3 {
	0% {
		color: #ffffff;
	}
	25% {
		color: #00b000;
	}
	50% {
		color: #ffffff;
	}
	67.5% {
		color: #00ffff;
	}
	75% {
		color: #0000ff;
	}
	100% {
		color: #ffffff;
	}
}

[data-text-mode="wave"],
[data-text-mode="scroll"],
[data-text-mode="slide"] {
	color: var(--focus-color);
}

[data-text-mode="wave"] {
	animation: wave 0.66s linear infinite -50ms;
}

[data-text-mode="wave"] span {
	display: inline-block;
	white-space: pre;
}

[data-text-mode="wave"] span::before {
	content: attr(data-char);
}

[data-text-mode="scroll"] {
	display: inline-block;
	white-space: nowrap;
	animation: scroll 8s infinite linear;
	width: 100%;
	overflow: hidden;
}

[data-text-mode="slide"] {
	animation: slide 3s linear;
	position: relative;
	top: -2em;
}

[data-text-mode="flash1"] {
	animation: flash1 0.45s steps(1, end) infinite;
}

[data-text-mode="flash2"] {
	animation: flash2 0.45s steps(1, end) infinite;
}

[data-text-mode="flash3"] {
	animation: flash3 0.45s steps(1, end) infinite;
}

[data-text-mode="glow1"] {
	animation: glow1 3s linear infinite;
}

[data-text-mode="glow2"] {
	animation: glow2 3s linear infinite;
}

[data-text-mode="glow3"] {
	animation: glow3 3s linear infinite;
}
/*CHAT EFFECTS END****************************************/

#user-count {
	font-size: var(--font-size-medium);
}

[data-type="chat"][data-chat] > li {
	position: relative;
	margin: var(--spacing-x-small) 0;
	padding: var(--spacing-x-small);
	border-radius: var(--spacing-xx-small);
	transition: background-color 0.2s;
	text-indent: unset;
}

[data-type="chat"][data-chat] > li::before {
	content: unset;
}

[data-type="chat"][data-chat] > li:hover {
	background: var(--shade-1);
}

[data-type="chat"][data-chat] > li.pending {
	opacity: 0.7;
}

[data-type="chat"][data-chat] > li small {
	display: block;
	font-size: 0.8rem;
	color: #666;
	margin-bottom: 0.2rem;
}

[data-type="chat"][data-chat] > li span {
	word-break: break-word;
}

[data-type="chat"][data-chat] > li > [data-action="delete"] {
	position: absolute;
	right: 0.5rem;
	top: -0.5rem;
	background: none;
	border: none;
	color: var(--error-color);
	cursor: pointer;
	font-size: 2rem;
	display: none;
}

[data-type="chat"][data-chat] > li:hover [data-action="delete"] {
	display: block;
}

.error-message {
	background: var(--error-color);
	color: white;
	padding: 0.5rem;
	border-radius: 4px;
	margin-bottom: 0.5rem;
	text-align: center;
	animation: fadeOut 3s forwards;
}

@keyframes fadeOut {
	0% {
		opacity: 1;
	}
	80% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		display: none;
	}
}

@media (max-width: 40rem) {
	body {
		padding: 1rem;
	}
	form {
		flex-direction: column;
	}
	form textarea,
	form textarea {
		flex: 1;
	}
}

[data-mode="preview"] {
	display: none;
	position: relative;
	margin-top: 1rem;
	padding: 20px 16px 8px 16px;
	border: 2px solid var(--info-color);
	border-radius: 5px;
	width: 100%;
}

[data-mode="preview"]::before {
	content: "PREVIEW";
	position: absolute;
	top: 0;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--info-color);
}

[data-mode="preview"]:has(*) {
	display: block;
}

[data-type="chat-message"] {
	position: relative;
}

[data-type="chat-message"] blockquote,
[data-mode="preview"] blockquote {
	padding-left: 3rem;
}

[data-type="chat-message"] blockquote::before,
[data-mode="preview"] blockquote::before {
	font-size: 45px;
	margin-bottom: unset;
	left: 10px;
}

[data-type="chat-message"] *:not(:last-child),
[data-mode="preview"] *:not(:last-child) {
	margin-bottom: unset;
}

[data-type="chat-settings"] {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1rem;
}

[data-type="chat"][data-chat] {
	width: 100%;
	height: calc(100vh - 545px);
	min-height: 400px;
	overflow-y: auto;
	padding: var(--spacing-normal);
	border: 1px solid var(--shade-2);
	border-radius: var(--spacing-x-small);
	background-color: #fbfbfb;
	list-style: none;
}

[data-type="chat"][data-chat="runescape"] {
	font-family: "Runescape Plain 12";
	border-top: 15px solid transparent;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-image: url("../img/chat/rs/rs-border.webp") 15 round;
	background-image: url("../img/chat/rs/rs-fill.webp");
	background-repeat: repeat;
	background-position: center;
	margin-block-end: 0;
	padding: 0 0 0 2px;
}

[data-type="chat"][data-chat="runescape"] > li {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
	font-family: "Runescape Plain 12";
	font-size: 1.2rem;
	line-height: 0.8;
	padding: unset;
	margin: unset;
}

[data-type="chat"][data-chat="runescape"] p {
	font-family: "Runescape Plain 12";
	font-size: 1.2rem;
}

[data-type="chat"][data-chat="runescape"] > li > div span {
	word-break: unset;
	white-space: nowrap;
	flex-shrink: 0;
}

[data-type="chat"][data-chat="runescape"] > li:hover {
	background-color: unset;
}

[data-type="chat"][data-chat="runescape"] > li:hover [data-action="delete"],
[data-type="chat"][data-chat="skype"] > li:hover [data-action="delete"],
[data-type="chat"][data-chat="runescape"] > li [data-type="avatar"] {
	display: none;
}

[data-type="chat"][data-chat="runescape"] > li [data-type="username"] {
	width: 100%;
}

[data-type="chat"][data-chat="runescape"] > li [data-type="username"]::after {
	content: ":";
}

[data-type="chat"][data-chat="runescape"] [data-type="timestamp"] {
	display: none;
}

[data-type="chat"][data-chat="runescape"] + form {
	border-bottom: 15px solid transparent;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-image: url("../img/chat/rs/rs-border.webp") 15 round;
	background-image: url("../img/chat/rs/rs-fill.webp");
	background-repeat: repeat;
	background-position: center;
}

[data-type="chat"][data-chat="runescape"] + form textarea {
	background: transparent;
	border: unset;
	border-radius: unset;
	border-top: 2px solid #807660;
	padding: 8px 16px 8px 2px;
}

[data-type="chat"][data-chat="runescape"] + form button {
	display: none;
}

[data-type="chat"][data-chat="runescape"] [data-type="chat-message"] {
	display: inline-block;
	color: #7f0000;
	line-height: 0.8;
	letter-spacing: 0;
	white-space: pre-wrap;
	margin-top: 1px;
}

/* Target only elements with data-chat="runescape" */
[data-chat="runescape"]::-webkit-scrollbar {
	width: 16px;
}

[data-chat="runescape"]::-webkit-scrollbar-track {
	background-color: #252019;
}

[data-chat="runescape"]::-webkit-scrollbar-thumb {
	background-color: #61553e;
	border: 2px solid #000;
}

[data-chat="runescape"]::-webkit-scrollbar-thumb:hover {
	opacity: 0.8;
}

[data-type="chat"][data-chat="skype"] {
	border-radius: unset;
	border-bottom: unset;
	margin-bottom: unset;
}

[data-type="chat"][data-chat="skype"] > li {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	gap: 24px;
}

[data-type="chat"][data-chat="skype"] > li[data-user="self"] {
	justify-content: flex-end;
}

[data-type="chat"][data-chat="skype"] > li [data-type="chat-message"] {
	order: 1;
	width: 100%;
	background-color: #b6eefd;
	border-radius: 5px;
	padding: 10px;
}

[data-type="chat"][data-chat="skype"]
	> li[data-user="self"]
	[data-type="chat-message"] {
	background-color: #def7fc;
}

[data-type="chat"][data-chat="skype"] > li [data-type="chat-message"]::after,
[data-type="chat"][data-chat="skype"]
	> li[data-user="self"]
	[data-type="chat-message"]::after {
	content: "";
	position: absolute;
	top: 10px;
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
}

[data-type="chat"][data-chat="skype"] > li [data-type="chat-message"]::after {
	left: -10px;
	border-right: 10px solid #b6eefd;
}

[data-type="chat"][data-chat="skype"]
	> li[data-user="self"]
	[data-type="chat-message"]::after {
	left: unset;
	right: -10px;
	border-right: unset;
	border-left: 10px solid #def7fc;
}

[data-type="chat"][data-chat="skype"] > li [data-type="meta-information"] {
	order: 2;
	white-space: nowrap;
	color: #c8e5e9;
}

[data-type="chat"][data-chat="skype"]
	> li
	[data-type="meta-information"]
	[data-type="username"],
[data-type="chat"][data-chat="skype"]
	> li
	[data-type="meta-information"]
	[data-type="date"] {
	display: none;
}

[data-type="chat"][data-chat="skype"] + form {
	background-color: #fbfbfb;
	padding: 32px 64px 32px 118px;
	border-left: 1px solid var(--shade-2);
	border-right: 1px solid var(--shade-2);
	border-bottom: 1px solid var(--shade-2);
}

[data-type="chat"][data-chat="skype"] + form textarea {
	border: 2px solid #19b2ee;
	border-radius: unset;
}

[data-type="chat"][data-chat="skype"] + form [data-button] {
	font-size: 0;
	color: transparent;
	user-select: none;
	transition: none;
	background-color: transparent;
	border: unset;
	padding: unset;
}

[data-type="chat"][data-chat="skype"] + form [data-button]::after {
	content: "";
	display: inline-block;
	width: 32px;
	height: 32px;
	background-image: url("../img/chat/skype/skype-send.svg");
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: middle;
	margin-top: 8px;
}

[data-search="match"] {
	background-color: var(--shade-1);
	position: relative;
	opacity: 0.75;
}

[data-search="active-match"],
[data-search="active-match"] img {
	outline: 2px solid var(--info-color);
	outline-offset: var(--spacing-xx-small);
	transition-duration: 250ms;
	z-index: 9998;
}

[data-search="active-match"] {
	border-radius: 1px;
	position: relative;
}

/* Scale only the img, never the <a>: a transform on the <a> would make it
   the containing block for the position:fixed status-bar tooltip */
[data-search="active-match"] img {
	border-radius: 17px;
	transform: scale(1.02);
}

#custom-search-bar {
	width: 460px;
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	background-color: #f4f3f2;
	padding: 20px;
	border: 2px solid #252525;
	border-top: unset;
	z-index: 9999;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	visibility: hidden;
	opacity: 0;
	transition:
		opacity 200ms ease,
		visibility 0s linear 200ms;
}

#custom-search-bar[data-status="open"] {
	visibility: visible;
	opacity: 1;
	transition: opacity 200ms ease;
}

#custom-search {
	padding: 5px 10px;
	font-size: 16px;
	width: 100%;
}

#match-count {
	margin-left: 10px;
	font-size: 14px;
}

/* Search: hide every tooltip while a match is active... */
main:has([data-search="active-match"])
	:is([data-tooltip="status-bar"], [data-type="link-tooltip"]) {
	visibility: hidden !important;
	opacity: 0 !important;
}

/* ...then reveal only the active match's own tooltip, whatever the item/tooltip type */
main:has([data-search="active-match"])
	[data-search="active-match"]
	:is([data-tooltip="status-bar"], [data-type="link-tooltip"]) {
	visibility: visible !important;
	opacity: 1 !important;
	transform: translateY(0);
}

[data-search="active-match"]::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(240, 128, 0, 0.2);
	pointer-events: none;
	transform: scale(1.02);
	border-radius: 15px;
}

[data-type="sitemap"] a {
	text-decoration: none;
	transition-duration: 200ms;
}

[data-type="sitemap"] a:hover {
	text-decoration: underline;
	transition-duration: 200ms;
}

[data-type="sitemap"] [data-type="sitemap-category"] {
	font-weight: 400;
	padding-left: unset;
	text-indent: unset;
}

[data-type="sitemap-category"]:not(:last-child) {
	margin-bottom: 24px;
}

[data-type="sitemap-category"]::before {
	display: none;
}

[data-type="site-status"] [role="tablist"] h3 {
	padding: 5px 5px 5px 0;
}

[data-type="site-status"] .ui-accordion-content {
	padding: 0 0 0 35px;
}

[data-type="site-status"] p {
	margin-bottom: 0 !important;
}

[data-type="site-status"] [role="tablist"] h3 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 5px;
}

[data-type="site-status"] [role="tablist"] h3::before {
	content: "";
	background-image: url("../img/icons/incident.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	padding-right: 24px;
}

[data-type="site-status"] > div {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 1rem;
}

[data-type="site-status"] div.accordion,
[data-type="site-status"] div.accordion * {
	font-size: 18px;
}

[data-type="site-status"] div.accordion {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	width: 100%;
	margin-top: 10px;
}

[data-type="site-status"] hr {
	margin-top: var(--spacing-large);
	margin-bottom: var(--spacing-large);
}

[data-type="site-status"] > p {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
}

[data-size="xs"] {
	/* Extra Small */
}
[data-size="sm"] {
	/* Small */
}
[data-size="md"] {
	/* Medium / default */
}
[data-size="lg"] {
	/* Large */
}
[data-size="xl"] {
	/* Extra Large */
}

/**************************/
/*ACCORDION ELEMENTS START*/
/**************************/
#etl h3 {
	margin-top: 0;
	margin-bottom: 20px;
}

#etl div {
	margin-bottom: 20px;
}

#filter-container h3,
#dates-container h3 {
	padding: unset;
	margin: unset;
}

#dates-container h3,
#filter-container h3 {
	display: flex;
	align-items: center;
}

#filter-container nav,
#dates-container nav {
	padding: unset;
}

#filter-container h3::before,
#dates-container h3::before {
	content: "→ ";
	width: 24px;
}

#filter-container h3[aria-expanded="true"]::before,
#dates-container h3[aria-expanded="true"]::before {
	content: "↓ ";
	width: 24px;
}
/************************/
/*ACCORDION ELEMENTS END*/
/************************/

/**************/
/*BADGES START*/
/**************/
[data-type="badge"] {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: fit-content;
	padding: 4px 8px;
	border-radius: 4px;
	font-weight: bold;
	color: #f4f3f2;
	line-height: 1;
	text-transform: uppercase;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

[data-type="badge"][data-size="md"] {
	font-size: 16px;
}

[data-type="badge"][data-size="sm"] {
	font-size: 12px;
}

[data-badge="success"],
[data-badge="up"],
[data-badge="high"] {
	background-color: var(--success-color);
}

[data-badge="medium"] {
	background-color: var(--caution-color);
}

[data-badge="warning"],
[data-badge="error"] {
	background-color: var(--focus-color);
}

[data-badge="error"],
[data-badge="down"],
[data-badge="low"] {
	background-color: var(--error-color);
}

[data-badge="info"] {
	background-color: var(--info-color);
}

[data-badge="primary"] {
	background-color: var(--primary-color);
}

[data-badge="secondary"] {
	background-color: var(--shade-3);
}

[data-badge="light"] {
	background-color: var(--shade-1);
	color: var(--primary-text-color);
}

[data-badge="dark"] {
	background-color: var(--shade-4);
}

[data-type="badge"][data-icon="lock"] {
	align-items: center;
	gap: 0.4em;
}

[data-type="badge"][data-icon="lock"]::before {
	content: "";
	width: 1em;
	height: 1em;
	background-image: url("../img/icons/lock.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	flex-shrink: 0;
}
/************/
/*BADGES END*/
/************/

/******************/
/*TEXT ICONS START*/
/******************/
[data-icon="time"] {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

[data-icon="time"]::before {
	content: "";
	width: 1.125rem;
	height: 1.125rem;
	background-image: url("../img/icons/time.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
/****************/
/*TEXT ICONS END*/
/****************/

form {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

form textarea {
	height: auto;
	min-height: 0;
	resize: none;
	overflow-y: hidden;
	border: 2px solid var(--shade-2);
	padding: 8px 16px;
	border-radius: 5px;
}

form textarea:focus-visible {
	outline: unset;
	border: 2px solid #252525;
}

form textarea:not(:placeholder-shown) {
	border-width: 2px;
}

form textarea[name="content"] {
	flex: 1;
}

form:has(textarea:placeholder-shown) button {
	opacity: 0.4;
	pointer-events: none;
	transition: 0.2s ease;
}

form:has(textarea:not(:placeholder-shown)) button {
	opacity: 1;
	pointer-events: auto;
}

form button:hover {
	transform: scale(1) !important;
}

form > div {
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-indent: 4px;
}

form > div > label {
	font-size: 18px;
}

input,
form > div > input,
form > div > textarea {
	border-radius: 5px;
	padding: 11px 15px;
	border: 2px solid var(--shade-2);
	background-color: #fdfffc;
}

input:active,
input:focus,
form > div > input:active,
form > div > input:focus {
	border: 2px solid var(--primary-color);
	outline: none;
	box-shadow: unset;
}

form[data-type="watch-picker"] select {
	border-radius: 5px;
	padding: 11px 15px;
	border: 2px solid var(--shade-2);
	background-color: #fdfffc;
	width: 100%;
}

form[data-type="watch-picker"] fieldset {
	border: 2px solid var(--shade-2);
	border-radius: 5px;
	padding: var(--spacing-small);
}

form[data-type="watch-picker"] legend {
	padding-right: var(--spacing-x-small);
	padding-left: var(--spacing-x-small);
	font-size: 18px;
}

[data-type="watch-picker-grid"] {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	text-indent: 0;
}

[data-type="watch-picker-options"] {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	text-indent: 0;
}

[data-type="watch-picker-options"] label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border: 1px solid var(--shade-2);
	border-radius: 5px;
	background-color: #fdfffc;
}

[data-type="watch-picker-results"] {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

[data-type="watch-picker-results"] > li {
	padding-left: 0;
	text-indent: 0;
}

[data-type="watch-picker-results"] > li::before {
	content: none;
}

[data-type="watch-picker-results"] article {
	display: grid;
	grid-template-columns: minmax(90px, 140px) 1fr;
	gap: 20px;
	align-items: start;
}

[data-type="watch-picker-results"] img {
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
}

[data-type="watch-picker-results"] h3 {
	margin-bottom: var(--spacing-xx-small);
}

[data-type="watch-picker-results"] ul {
	margin-top: var(--spacing-x-small);
}

[data-type="watch-picker-warning"] {
	color: #7a1f1f;
	font-weight: 700;
}

@media only screen and (max-width: 48rem) {
	[data-type="watch-picker-grid"],
	[data-type="watch-picker-results"] article {
		grid-template-columns: 1fr;
	}

	[data-type="watch-picker-results"] article {
		gap: 12px;
	}

	[data-type="watch-picker-results"] img {
		max-width: 180px;
	}
}

.ui-menu .ui-state-focus,
.ui-menu .ui-state-active {
	margin: unset;
}

.ui-button[aria-expanded="false"] {
	border: 2px solid var(--shade-2);
}

.ui-button[aria-expanded="true"] {
	border: 2px solid var(--primary-color);
}

.ui-selectmenu-menu .ui-menu {
	width: 100% !important;
}

.ui-selectmenu-button.ui-button {
	width: 100%;
	background-color: #fdfffc;
}

.ui-selectmenu-button .ui-icon {
	width: 25px;
	height: 25px;
	background-size: 50%;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0.2;
}

.ui-selectmenu-button-open {
	border-bottom: unset !important;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.ui-selectmenu-button-open .ui-icon {
	background-image: url("/assets/img/icons/close.svg");
}

.ui-selectmenu-button-closed .ui-icon {
	background-image: url("/assets/img/icons/chevron.svg");
}

.ui-selectmenu-menu,
.ui-autocomplete {
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	background-color: var(--shade-1);
}

.ui-selectmenu-menu {
	position: relative;
	width: 100%;
	border: 2px solid var(--primary-color);
}

.ui-menu-item:has(.ui-state-active) {
	color: var(--bg-color);
	background-color: var(--shade-3);
}

.ui-autocomplete {
	border-left: 2px solid var(--primary-color);
	border-right: 2px solid var(--primary-color);
	border-bottom: 2px solid var(--primary-color);
}

.ui-autocomplete.ui-menu .ui-state-active {
	margin: unset;
}

.ui-autocomplete.ui-menu .ui-state-active::before {
	content: "→ ";
}

[data-type~="carousel"] {
	width: 100%;
	padding: 25px 15px 25px 10px;
	border-radius: 15px;
	overflow: hidden;
	border: 2px solid #252525;
}

[data-type~="dark"][data-type~="carousel"] {
	background-color: #252525;
}

[data-type~="light"][data-type~="carousel"] {
	background-color: #f4f3f2;
}

[data-type~="carousel"] .slick-list {
	border-radius: 15px;
}

[data-type~="carousel"] [data-type="portfolio-item"] {
	margin: 0;
	padding: 10px;
	border-radius: 15px;
}

[data-type~="carousel"][data-type~="dark"] [data-type="portfolio-item"] {
	background-color: #252525;
}

[data-type~="carousel"][data-type~="light"] [data-type="portfolio-item"] {
	background-color: #f4f3f2;
}

[data-slick~="arrow"] {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	outline: none;
	box-shadow: none;
	border-radius: 9px;
	border: 2px solid #252525;
	width: 60px;
	height: 20px;
	cursor: pointer;
	color: #252525;
	background-color: #f4f3f2;
}

[data-slick~="arrow"][data-slick~="pre"] {
	top: 7.5px;
	left: 19px;
}

[data-slick~="arrow"][data-slick~="next"] {
	bottom: 7.5px;
	right: 21px;
}

[data-type="color-container"]:first-of-type h3 {
	margin-top: 0;
}

[data-type="color-container"] > div {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	flex-direction: row;
}

[data-type="color-example"] {
	width: 200px;
	height: 200px;
	border: 2px solid var(--primary-color);
	border-radius: 15px;
}

[data-color="main"] {
	background-color: var(--primary-color);
}

[data-color="bg"] {
	background-color: var(--bg-color);
}

[data-color="shade-1"] {
	background-color: var(--shade-1);
}

[data-color="shade-2"] {
	background-color: var(--shade-2);
}

[data-color="shade-3"] {
	background-color: var(--shade-3);
}

[data-color="shade-4"] {
	background-color: var(--shade-4);
}

[data-color="shade-5"] {
	background-color: var(--shade-5);
}

[data-color="caution-color"] {
	background-color: var(--caution-color);
}

[data-color="focus-color"] {
	background-color: var(--focus-color);
}

[data-color="error-color"] {
	background-color: var(--error-color);
}

[data-color="success-color"] {
	background-color: var(--success-color);
}

[data-color="info-color"] {
	background-color: var(--info-color);
}

[data-type="preview"] {
	position: relative;
	margin-top: 15px;
	padding: 20px;
	border-radius: 15px;
	background-color: var(--shade-2);
}

[data-page="preview"] .ui-selectmenu-menu {
	width: calc(100% - 40px) !important;
}

[data-type="preview"] #sa-pref-bar[data-type*="disabled"] {
	position: relative;
	display: block;
	left: unset;
	bottom: unset;
}

[data-type="breadcrumb"] {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

[data-type="breadcrumb"] li {
	padding-left: unset;
	text-indent: unset;
	line-height: 1;
}

[data-type="breadcrumb"] li:before {
	font-family: unset;
	content: unset;
	padding-right: unset;
}

[data-accessibility~="dark"] [data-button~="icon"]#closeAccessibility img {
	filter: invert(1);
}

[data-accessibility~="high-contrast"]
	[data-button~="icon"]#closeAccessibility
	img {
	filter: invert(1) contrast(200%);
}

[data-type="error-message"] {
	text-align: center;
}

[data-component="email-gate-container"] {
	display: flex;
	flex-direction: row;
	gap: 2rem;
	align-items: stretch;
}

@media only screen and (max-width: 60rem) {
	[data-component="email-gate-container"] {
		flex-direction: column;
	}
}

[data-component="email-gate"],
[data-type="email-gate-image"] {
	flex: 1 1 0;
	min-width: 0;
}

[data-component="email-gate"] {
	background-color: var(--shade-2);
	border-radius: 0.5rem;
	border: 1px solid var(--shade-3);
}

[data-component="email-gate"] > form,
[data-component="email-gate"] > p,
[data-component="email-gate"] > h2 {
	padding-inline: 1rem;
}

[data-component="email-gate"] > h2 {
	padding-top: 1rem;
}

[data-component="email-gate"] > form {
	padding-bottom: 1rem;
}

[data-type="email-gate-image"] {
	position: relative;
	overflow: hidden;
}

[data-type="email-gate-image"] img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media only screen and (max-width: 60rem) {
	[data-type="email-gate-image"] {
		flex: 1;
	}

	[data-type="email-gate-image"] img {
		position: static;
		height: auto;
	}
}

altcha-widget {
	width: 100%;
	max-width: fit-content;
}

[data-type="email-gate-consent-group"] {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	text-indent: unset;
}

[data-type="email-gate-consent-group"] .ui-checkboxradio-label {
	text-align: left;
}