/*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;
	/* The same distance from the edges as the side bar and the right-hand
	   buttons, and above the page's own layers (the carousel tab is z 2) but
	   below the bars and dialogs. */
	bottom: 1.5rem;
	right: 1.5rem;
	z-index: 9996;
	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;
	/* The theme's colours (#252525 / #F4F3F2 in light mode), so it turns with
	   the bars beside it in dark and high-contrast modes. */
	background-color: var(--primary-color);
	color: var(--bg-color);
	border: 0.1rem solid var(--bg-color);
	border-radius: 0.25rem;
}

[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"] {
		padding: var(--spacing-x-small) var(--spacing-small)
			var(--spacing-x-small) var(--spacing-small);
		width: 2.5rem;
		height: 2.5rem;
	}

	[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;
	-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;
}

/* ── Page tools (snippets/page-tools.php) ──────────────────────────────────
   A dark tab hanging from the navbar line at the top right: previous / next,
   listen (only when the page has audio) and accessibility. It sits in the
   header, which is position: relative, and starts where the line does — the
   header's foot plus the gap above the line (measured 20px = --spacing-normal
   on every page) — so the two read as one shape.

   Its size is set here once, on body, so the space kept free for it below the
   line uses the same numbers: icon + padding = height; four buttons + gaps +
   padding = the widest tab (project pages). */
body {
	--page-tools-icon: 1.75rem;
	--page-tools-pad-y: var(--spacing-x-small);
	--page-tools-pad-x: var(--spacing-normal);
	--page-tools-gap: var(--spacing-small);
	--page-tools-h: calc(var(--page-tools-icon) + 2 * var(--page-tools-pad-y));
	--page-tools-n: 2;
	--page-tools-w: calc(
		var(--page-tools-n) * var(--page-tools-icon) +
			(var(--page-tools-n) - 1) * var(--page-tools-gap) + 2 *
			var(--page-tools-pad-x)
	);
}

/* The tab's width follows its visible buttons: two on most pages (listen +
   accessibility), one without audio, three or four on projects. */
body:not(:has([data-type="page-tools"] > :nth-child(2 of :not([hidden])))) {
	--page-tools-n: 1;
}

body:has([data-type="page-tools"] > :nth-child(3 of :not([hidden]))) {
	--page-tools-n: 3;
}

body:has([data-type="page-tools"] > :nth-child(4 of :not([hidden]))) {
	--page-tools-n: 4;
}

[data-type="page-tools"] {
	position: absolute;
	top: calc(100% + var(--spacing-normal));
	right: 0;
	display: flex;
	align-items: center;
	gap: var(--page-tools-gap);
	padding: var(--page-tools-pad-y) var(--page-tools-pad-x);
	background-color: var(--primary-color);
	border-radius: 0 0 var(--spacing-small) var(--spacing-small);
}

[data-type="page-tools"] [data-button~="icon"] {
	display: inline-flex;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	transition: transform 150ms ease;
}

[data-type="page-tools"] [data-button~="icon"]:hover,
[data-type="page-tools"] [data-button~="icon"]:focus-visible {
	transform: scale(1.1);
}

[data-type="page-tools"] [data-button~="icon"]:focus-visible {
	outline: 0.1rem solid var(--focus-color);
	outline-offset: 0.1rem;
	border-radius: var(--spacing-xx-small);
}

/* Icons are CSS masks painted in the page colour (#F4F3F2) on the tab's
   #252525 — exact colours, nothing drawn outside the icon's own shape. Both
   come from the theme, so dark mode swaps them together; the site-wide
   dark / high-contrast filters on icon buttons are not wanted here. The masks
   are the outline (-secondary) icons, which have no background of their own.
   The same icons serve the site menu's bar and panel (snippets/site-menu.php). */
:is([data-type="page-tools"], [data-type="side-bar"]) [data-button~="icon"] {
	filter: none;
}

:is([data-type="page-tools"], [data-type="side-bar"], [data-type="site-menu"]) [data-icon] {
	display: block;
	width: var(--page-tools-icon);
	height: var(--page-tools-icon);
	background-color: var(--bg-color);
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

:is([data-type="page-tools"], [data-type="side-bar"], [data-type="site-menu"]) [data-icon="reverse"] {
	--icon: url("../img/icons/reverse-secondary.svg");
}
:is([data-type="page-tools"], [data-type="side-bar"], [data-type="site-menu"]) [data-icon="forward"] {
	--icon: url("../img/icons/forward-secondary.svg");
}
:is([data-type="page-tools"], [data-type="side-bar"], [data-type="site-menu"]) [data-icon="listen"] {
	--icon: url("../img/icons/listen-secondary.svg");
}
:is([data-type="page-tools"], [data-type="side-bar"], [data-type="site-menu"]) [data-icon="play"] {
	--icon: url("../img/icons/play-secondary.svg");
}
:is([data-type="page-tools"], [data-type="side-bar"], [data-type="site-menu"]) [data-icon="pause"] {
	--icon: url("../img/icons/pause-secondary.svg");
}
:is([data-type="page-tools"], [data-type="side-bar"], [data-type="site-menu"]) [data-icon="accessibility"] {
	--icon: url("../img/icons/accessibility-secondary.svg");
}
:is([data-type="page-tools"], [data-type="side-bar"], [data-type="site-menu"]) [data-icon="menu"] {
	--icon: url("../img/icons/menu-secondary.svg");
}
[data-type="side-bar"] [data-icon="menu"] {
	--icon: url("../img/icons/menu-bars.svg");
}

@media (prefers-reduced-motion: reduce) {
	[data-type="page-tools"] [data-button~="icon"] {
		transition: none;
	}
}

/* Nothing runs under the tab, and the page starts close to the line.
   Pages without a breadcrumb: the title sits beside the tab, its width
   capped at the tab's left edge (it wraps rather than slide underneath).
   Not the homepage hero: its title sits in the left column, well clear of the
   tab, and the cap only squeezed it onto one word per line. */
body:not(:has(hr[data-type="navbar"] + nav[aria-label="breadcrumb"])) main h1:not([data-type="hero"] h1) {
	padding-right: calc(var(--page-tools-w) + var(--spacing-normal));
}

/* Project pages on narrower screens: no room for the breadcrumb beside the
   tab, so the content starts below it. */
@media only screen and (max-width: 48rem) {
	hr[data-type="navbar"]:has(+ nav[aria-label="breadcrumb"]) {
		margin-bottom: calc(var(--page-tools-h) + var(--spacing-small));
	}
}

/* Project pages on wider screens keep the breadcrumb beside the tab: it
   keeps clear of the tab's width (wrapping if it must) and is at least as
   tall as the rest of the tab, so the title still starts below it. */
@media only screen and (min-width: 48rem) {
	hr[data-type="navbar"] + nav[aria-label="breadcrumb"] {
		box-sizing: border-box;
		min-height: calc(var(--page-tools-h) - var(--spacing-small));
		padding-right: calc(var(--page-tools-w) + var(--spacing-normal));
	}
}

@media only screen and (max-width: 38.4rem) {
	body {
		--page-tools-icon: 1.5rem;
		--page-tools-pad-y: var(--spacing-xx-small);
		--page-tools-pad-x: var(--spacing-small);
		--page-tools-gap: var(--spacing-x-small);
	}

	/* A phone is too narrow for a big title beside the tab — one word
	   ("Contacts") can be wider than what is left — so the content starts
	   just below the (small) tab and the title keeps the full width. */
	hr[data-type="navbar"] {
		margin-bottom: calc(var(--page-tools-h) + var(--spacing-x-small));
	}

	/* Same selector as the rule above, or its :not() outweighs this one. */
	body:not(:has(hr[data-type="navbar"] + nav[aria-label="breadcrumb"]))
		main
		h1:not([data-type="hero"] h1) {
		padding-right: 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;
		width: 100%;
	}

	/* The line between the old in-title accessibility buttons and the
	   heading — only where those buttons still sit in the title row (none
	   since the page-tools tab); otherwise it doubled the page's own line
	   above the heading on phones. */
	[data-type="title"]:has([data-type="main-accessibility"]) #main {
		border-top: 1px solid rgba(37, 37, 37, 0.25);
		padding-top: 10px;
	}

	[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*/

/* Exactly as wide as its icons, which hug the right edge. On phones the box
   used to stretch to the full screen width with the icons at its left edge —
   so the column appeared on the left, half off-screen. */
#scrollAccess {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.4rem;
	position: fixed;
	right: 1.5rem;
	left: auto;
	width: max-content;
	top: var(--spacing-medium);
	opacity: 0;
	visibility: hidden;
	z-index: 9998;
}

#scrollAccess img {
	width: 2.5rem;
	height: auto;
	border: 0.1rem solid #f4f3f2;
	background: #252525;
	border-radius: 0.75rem;
}

#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;
}

/* The accessibility settings open as a recess drawer ("Recess drawer"
   below): at the right in the "Side menu" location, along the bottom in
   "Navbar". Its close button sits at the drawer's own top right. */
[data-type="accessibility"] [data-button~="close"] {
	position: absolute;
	top: var(--spacing-medium);
	right: 1.5rem;
}

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

[data-type="accessibility"] [data-part="panel"] {
	margin-inline: auto;
	max-width: var(--content-width);
	padding: var(--spacing-medium);
}

[data-type="accessibility"] [data-part="panel"] > a:first-child {
	display: block;
	margin-block-start: calc(1em + 0.1rem);
}

[data-type="accessibility"] [data-type="accessibility-content"] {
	padding-bottom: var(--spacing-x-large);
}

[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;
	font-weight: 400;
}

[data-tooltip="status-bar"] span:not([data-info="links"]):after,
[data-type="link-tooltip"] span:after {
	/* U+FE0E asks for the plain glyph: iPhones otherwise draw ↗ as an emoji
	   when the font has no arrow of its own. */
	content: " \2197\FE0E";
}

[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;
	}
}

/* Touch screens have no hover: a tap opens the tile's page, so the floating
   status bar only lingered at the screen's foot (over the bottom bar, cut by
   rounded screen corners) — and a hover-revealed bar can make iOS spend the
   first tap on showing it. Left out there; list view keeps its bars, which
   sit inside each row. */
@media (hover: none) {
	:is([data-tooltip="status-bar"], [data-type="link-tooltip"]):not([data-view="list"] [data-poster] > *) {
		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) ──────────────────────
   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 switch is a small tab hanging from the light line above its section,
   the way the page tools hang from the navbar line: the page's own colour,
   outlined all round in the line's colour (main hr) — its top edge lies on
   the line, so the line runs on across it.

   A switchable section sits close to the line above it (--view-line-gap), and
   the tab is pinned to the heading row, reaching up that gap plus the line's
   own 2px box (1px line + the browser's 1px inset bottom border) so it meets
   the line itself. The heading sits beside the tab, its width capped at the
   tab's left edge plus a gap. The tab holds five icon buttons (1rem icon,
   xx-small padding round it); its width adds those, its seven xx-small gaps
   and paddings, and 3px of lines (border both sides, divider). On phones
   that leaves a heading too little room, so it goes below the tab. */
body {
	--view-line-gap: var(--spacing-medium);
	--view-tab-h: calc(1rem + 4 * var(--spacing-xx-small) + 0.1rem);
	--view-tab-w: calc(5 * (1rem + 2 * var(--spacing-xx-small)) + 7 * var(--spacing-xx-small) + 0.15rem);
}

@media only screen and (max-width: 38.4rem) {
	[data-view-head]:has(> [data-section-tab]) {
		padding-right: 0;
		padding-top: calc(var(--view-tab-h) - var(--view-line-gap) - 0.1rem + var(--spacing-x-small));
	}
}

/* The section is pulled up into the line's bottom margin; the two margins
   collapse (1.75rem + (gap - 1.75rem) = gap) whatever sits between them — an
   inline <style> (games, boardgames) or the line closing the previous
   section (movies, shows). */
main [data-view-key],
main [data-view-head]:has(> [data-view-switch]:only-child) {
	margin-top: calc(var(--view-line-gap) - var(--spacing-x-large));
}

[data-view-head] {
	position: relative;
	padding-right: calc(var(--view-tab-w) + var(--spacing-normal));
}

/* A page-wide switch (collections, wishlist) has a row of its own, right
   under its line: the row is as tall as the tab, so what follows starts
   below it. */
[data-view-head]:has(> [data-view-switch]:only-child) {
	padding-right: 0;
	min-height: calc(var(--view-tab-h) - var(--view-line-gap));
}

/* The tab: a section's tools (previous / next section, fold) and its switch,
   or a page-wide switch on its own. */
[data-section-tab],
[data-view-head] > [data-view-switch] {
	position: absolute;
	top: calc(-1 * (var(--view-line-gap) + 0.1rem));
	right: 0;
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xx-small);
	padding: var(--spacing-xx-small);
	background-color: var(--bg-color);
	border: 1px solid rgba(37, 37, 37, 0.25);
	border-radius: 0 0 var(--spacing-x-small) var(--spacing-x-small);
}

[data-section-tools],
[data-section-tab] > [data-view-switch] {
	display: inline-flex;
	gap: var(--spacing-xx-small);
}

/* A thin divider between the section's tools and the switch. */
[data-section-tab] > [data-view-switch] {
	padding-left: var(--spacing-xx-small);
	border-left: 0.05rem solid rgba(37, 37, 37, 0.25);
}

:is([data-section-tools], [data-view-switch]) button {
	display: inline-flex;
	padding: var(--spacing-xx-small);
	border: 0;
	border-radius: var(--spacing-xx-small);
	background: none;
	color: var(--primary-text-color);
	cursor: pointer;
}

:is([data-section-tools], [data-view-switch]) button:hover:not(:disabled, [aria-pressed="true"]) {
	background-color: rgba(37, 37, 37, 0.1);
}

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

/* No section that way (the first's "previous", the last's "next"). */
[data-section-tools] button:disabled {
	opacity: 0.3;
	cursor: default;
}

/* Icons are masks in the button's text colour, so the pressed button's
   inverted colours carry over. */
:is([data-section-tools], [data-view-switch], [data-fold-head]) [data-icon] {
	display: block;
	width: 1rem;
	height: 1rem;
	background-color: currentColor;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

[data-section-tools] [data-icon="section-up"] { --icon: url("../img/icons/section-up.svg"); }
[data-section-tools] [data-icon="section-down"] { --icon: url("../img/icons/section-down.svg"); }
[data-section-fold] [data-icon="section-fold"] { --icon: url("../img/icons/section-fold.svg"); }
[data-section-fold] [data-icon="section-unfold"] { --icon: url("../img/icons/section-unfold.svg"); }
[data-view-switch] [data-icon="view-grid"] { --icon: url("../img/icons/view-grid.svg"); }
[data-view-switch] [data-icon="view-list"] { --icon: url("../img/icons/view-list.svg"); }

/* A sub-section's head row (renderFoldHead: episode dates, genres) is laid
   out like a section's: the sub-section is pulled up to sit --view-line-gap
   under the line above it (its heading's own margin would otherwise add to
   the line's), and its fold button is a one-button tab hanging from that
   line, as tall as the section tab, with the heading beside it. */
section:has(> [data-fold-head]) {
	margin-top: calc(var(--view-line-gap) - var(--spacing-x-large));
}

[data-fold-head] {
	position: relative;
	padding-right: calc(1rem + 4 * var(--spacing-xx-small) + 0.1rem + var(--spacing-normal));
}

[data-fold-head] > h3 {
	margin-top: 0;
}

[data-fold-head] [data-section-fold] {
	position: absolute;
	top: calc(-1 * (var(--view-line-gap) + 0.1rem));
	right: 0;
	display: inline-flex;
	padding: calc(2 * var(--spacing-xx-small));
	border: 0.05rem solid rgba(37, 37, 37, 0.25);
	border-radius: 0 0 var(--spacing-x-small) var(--spacing-x-small);
	background-color: var(--bg-color);
	color: var(--primary-text-color);
	cursor: pointer;
}

[data-fold-head] [data-section-fold]:hover {
	background-color: rgba(37, 37, 37, 0.1);
}

/* Folded: only the head row (heading and tab, or heading and fold button)
   stays. !important because the filter script shows sub-sections (movies'
   genres) with an inline display: block. */
section[data-folded="true"] > :not([data-view-head], [data-fold-head], hr:last-child) {
	display: none !important;
}

/* The line closing a section (movies, shows keep it inside) stays: the next
   section is pulled up into its margin. The heading of a folded section is
   quieter, so open ones lead. */
section[data-folded="true"] > :is([data-view-head], [data-fold-head]) > :is(h2, h3) {
	opacity: 0.5;
}

/* The filter script hides any line after a hidden section — inline — and
   inside a folded section the sub-section before its closing line is hidden
   (shows' upcoming episodes, by date). The closing line stays regardless. */
section[data-folded="true"] > hr:last-child {
	display: block !important;
}

/* A section ending in sub-sections (movies' and shows' genres) has its lines
   inside those, hidden with them: a folded one followed straight by another
   section draws its own, like main hr — a 1px line in a 2px box, same
   margins — so the next section still sits below a line. */
section[data-view-key][data-folded="true"]:not(:has(> hr:last-child)):has(+ section)::after {
	content: "";
	display: block;
	margin-block: var(--spacing-x-large);
	border-top: 0.05rem solid rgba(37, 37, 37, 0.25);
	border-bottom: 0.05rem solid transparent;
}

/* Filter buttons inside a section (episode dates, genres) are secondary to
   the page's own at the top: smaller, outlined in the light line's colour,
   ticked ones in plain text rather than filled. */
[data-view-key] [data-anchor="button"] {
	gap: var(--spacing-x-small);
}

[data-view-key] [data-anchor="button"] li {
	background: none;
}

[data-view-key] [data-anchor="button"] li label.ui-checkboxradio-label {
	padding: var(--spacing-xx-small) var(--spacing-x-small);
	font-size: var(--font-size-small);
	border: 0.05rem solid rgba(37, 37, 37, 0.25);
	border-right: 0;
	background-color: var(--bg-color);
	color: rgba(37, 37, 37, 0.5);
}

[data-view-key] [data-anchor="button"] li label.ui-checkboxradio-checked {
	color: var(--primary-color);
	border-color: var(--primary-color);
}

/* Both halves are light now, so a thin line divides the date from its ↓
   (the filled label used to). */
[data-view-key] [data-anchor="button"] li {
	align-items: stretch;
}

/* Their checkbox is drawn in the label's own colour: an outline, faded with
   an unticked label, filled with the light ✕ when ticked — without the light
   ring the dark top buttons give theirs (.ui-icon-check::after), which shows
   as a grey frame on a light button. */
[data-view-key] [data-anchor="button"] .ui-icon-background {
	color: inherit;
	box-sizing: border-box;
	border: 0.075rem solid currentColor;
	border-radius: 0.2rem;
	background-color: transparent;
	background-size: 60%;
}

[data-view-key] [data-anchor="button"] .ui-icon-blank {
	background-image: none;
}

/* Ticked: no border (the fill is the edge), so the ✕ is centred in the whole
   16px box at half its size — whole pixels on every side. Inside a 1.5px
   border it landed on fractions and sat off-centre on some buttons. */
[data-view-key] [data-anchor="button"] .ui-checkboxradio-checked .ui-icon-background {
	border: 0;
	background-color: currentColor;
	background-size: 50%;
}

[data-view-key] [data-anchor="button"] .ui-icon-check::after {
	content: none;
}

/* The ↓ half takes the date half's height (its own line height made it
   taller), arrow centred. */
[data-view-key] [data-anchor="button"] li a {
	display: flex;
	align-items: center;
	line-height: 1;
	padding: 0 var(--spacing-x-small);
	font-size: var(--font-size-small);
	border-width: 0.05rem;
	border-left: 0.05rem solid rgba(37, 37, 37, 0.25);
	border-color: rgba(37, 37, 37, 0.25);
}

[data-view-key] [data-anchor="button"] li label.ui-checkboxradio-checked + a {
	border-color: var(--primary-color);
}

[data-view="list"]
	:is(
		[data-type="favorite-shows"],
		[data-type="games"],
		[data-type="portfolio"]
	) {
	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"],
			[data-type="portfolio"]
		) {
		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-type="portfolio"]
	)
	> [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-type="portfolio"]
	)
	> [data-poster]:hover,
[data-view="list"]
	:is(
		[data-type="favorite-shows"],
		[data-type="games"],
		[data-type="portfolio"]
	)
	> [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-type="portfolio"]
		)
		> [data-poster] {
		transition: none;
	}
	[data-view="list"]
		:is(
			[data-type="favorite-shows"],
			[data-type="games"],
			[data-type="portfolio"]
		)
		> [data-poster]:hover,
	[data-view="list"]
		:is(
			[data-type="favorite-shows"],
			[data-type="games"],
			[data-type="portfolio"]
		)
		> [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-type="portfolio"]
	)
	[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-type="portfolio"]
	)
	[data-poster]
	[data-badge][data-pos="bottom-right"],
[data-view="list"]
	:is(
		[data-type="favorite-shows"],
		[data-type="games"],
		[data-type="portfolio"]
	)
	[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-type="portfolio"]
		)
		> [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-type="portfolio"]
	)
	> [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 —
   badges included (z 3): the lift makes the tile its own stacking context, so
   its status bar (fixed, z 9999) only rises as high as the tile, and at 2 the
   next row's badges were drawn over the bar. */
[data-poster]:hover,
[data-poster]:focus-within {
	z-index: 4;
}

/* 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 — the logos and the source — must stay tappable. */
:is([data-type="entertainment-poster"], [data-type="games"])
	[data-tooltip="status-bar"]
	:is([data-info="link"], [data-info="source-link"]) {
	pointer-events: auto;
}

/* The source link looks exactly as the source always did: its text carries
   the underline and the ↗; the link itself adds no colour or underline. */
[data-tooltip="status-bar"] [data-info="source-link"] {
	color: inherit;
	text-decoration: none;
}

[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: "→ ";
}

/* ── Carousel (snippets/carousel.php) ──────────────────────────────────────
   A thin line round the slider, with the previous / next tab hanging from its
   top edge at the right — the same tab as the grid / list switch: outlined in
   the line's colour, its top edge on the line. The two themes only swap
   colours (--carousel-*). */
[data-carousel] {
	--carousel-bg: var(--bg-color);
	--carousel-fg: var(--primary-text-color);
	--carousel-line: rgba(37, 37, 37, 0.25);
	--carousel-active: var(--primary-color);
	--carousel-active-fg: var(--bg-color);
	position: relative;
	padding: calc(2rem + var(--spacing-x-small)) var(--spacing-x-small) var(--spacing-x-small);
	background-color: var(--carousel-bg);
	border: 1px solid var(--carousel-line);
	border-radius: var(--spacing-small);
}

[data-carousel="dark"] {
	--carousel-bg: #252525;
	--carousel-fg: #f4f3f2;
	--carousel-line: rgba(244, 243, 242, 0.25);
	--carousel-active: #f4f3f2;
	--carousel-active-fg: #252525;
}

[data-type~="carousel"] {
	width: 100%;
	overflow: hidden;
}

[data-type~="carousel"] .slick-list {
	border-radius: var(--spacing-x-small);
}

[data-type~="carousel"] [data-type="portfolio-item"] {
	margin: 0;
	padding: var(--spacing-x-small);
	border-radius: var(--spacing-small);
	background-color: var(--carousel-bg);
}

[data-carousel-nav] {
	position: absolute;
	top: -1px;
	right: var(--spacing-normal);
	z-index: 2;
	display: inline-flex;
	gap: var(--spacing-xx-small);
	padding: var(--spacing-xx-small);
	background-color: var(--carousel-bg);
	border: 1px solid var(--carousel-line);
	border-radius: 0 0 var(--spacing-x-small) var(--spacing-x-small);
}

[data-carousel-nav]:empty {
	display: none;
}

/* The top line, left of the tab: position, and the hovered tile's title and
   where it leads. It sits in the strip the tab needs anyway, centred on the
   tab, and stops short of it — a long title ends in "…". The title is bold,
   the address plain, as in the status bars. */
[data-carousel-info] {
	position: absolute;
	top: 0;
	left: var(--spacing-small);
	right: calc(var(--spacing-normal) + 6rem);
	height: 2rem;
	display: flex;
	align-items: center;
	margin: 0;
	font-size: var(--font-size-small);
	line-height: 1.2;
	color: var(--carousel-fg);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

[data-carousel-count] {
	flex: 0 0 auto;
	font-weight: 600;
}

[data-carousel-hover] {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

[data-carousel-hover]:not(:empty)::before {
	content: "|";
	margin: 0 var(--spacing-x-small);
	opacity: 0.5;
}

/* Touch screens have no hover: a tap opens the page, so the line keeps to
   the position. */
@media (hover: none) {
	[data-carousel-hover] {
		display: none;
	}
}

[data-slick~="arrow"] {
	font: inherit;
	font-size: var(--font-size-small);
	line-height: 1.2;
	padding: var(--spacing-xx-small) var(--spacing-small);
	border: 0;
	border-radius: var(--spacing-xx-small);
	background: none;
	color: var(--carousel-fg);
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease;
}

[data-slick~="arrow"]:hover,
[data-slick~="arrow"]:focus-visible {
	background-color: var(--carousel-active);
	color: var(--carousel-active-fg);
}

[data-slick~="arrow"]:focus-visible {
	outline: 0.1rem solid var(--focus-color);
	outline-offset: 0.1rem;
}

@media (prefers-reduced-motion: reduce) {
	[data-slick~="arrow"] {
		transition: none;
	}
}

[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,
[data-accessibility~="dark"] [data-type="site-menu"] [data-part="close"] img {
	filter: invert(1);
}

[data-accessibility~="high-contrast"]
	[data-button~="icon"]#closeAccessibility
	img,
[data-accessibility~="high-contrast"] [data-type="site-menu"] [data-part="close"] 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;
}

/* Listen buttons hidden by main.js on pages without a player: the tab's
   display: inline-flex and the floating column's img rules would otherwise
   override the hidden attribute. */
[data-type="page-tools"] [hidden],
#scrollAccess [hidden] {
	display: none;
}

/* Homepage hero under the page-tools tab (snippets/page-tools.php).
   Wide screens: the title sits beside the tab — nothing to do.
   Up to 80rem the hero stacks with its tiles first, and the right-hand tile
   would run under the tab: the hero's top padding grows just enough for the
   tiles to clear it (tab height − the line's margin + a small gap).
   Phones: the line's own margin already clears the tab, so the hero adds no
   padding of its own on top. */
@media (max-width: 80rem) {
	[data-type="hero"] {
		padding-top: calc(
			var(--page-tools-h) - var(--spacing-small) + var(--spacing-x-small)
		);
	}
}

@media only screen and (max-width: 38.4rem) {
	[data-type="hero"] {
		padding-top: 0;
	}
}

/* ── Site menu (snippets/site-menu.php) ────────────────────────────────────
   The bar: one connected dark strip on the left — the SA logo (home) and the
   menu button — in the page-tools tab's colours and sizes. It appears with
   the right-hand buttons (#scrollAccess) once the header has scrolled away;
   main.js sets data-visible. */
[data-type="side-bar"] {
	position: fixed;
	top: var(--spacing-medium);
	left: 1.5rem;
	z-index: 9997; /* below the dialogs (accessibility 9998) it could otherwise cover */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-xx-small);
	padding: var(--spacing-xx-small);
	background-color: var(--primary-color);
	/* The right-hand buttons' frame (#scrollAccess img), so both sides match. */
	border: 0.1rem solid var(--bg-color);
	border-radius: 0.75rem;
	opacity: 0;
	visibility: hidden;
	transition: opacity 200ms ease, visibility 200ms;
}

[data-type="side-bar"][data-visible="true"] {
	opacity: 1;
	visibility: visible;
}

/* Centred: on phones base.css stretches every [data-button] to full width,
   which left the menu icon at the bar's left edge. */
[data-type="side-bar"] [data-button~="icon"],
[data-type="site-menu"] [data-button~="icon"] {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	transition: transform 150ms ease;
}

[data-type="side-bar"] [data-button~="icon"]:hover,
[data-type="side-bar"] [data-button~="icon"]:focus-visible,
[data-type="site-menu"] [data-button~="icon"]:hover,
[data-type="site-menu"] [data-button~="icon"]:focus-visible {
	transform: scale(1.1);
}

/* The logo is a dark square with light letters — on the dark strip only the
   letters show. A little larger than the icons, as a logo. */
[data-type="side-bar"] [data-part="home"] img {
	display: block;
	width: calc(var(--page-tools-icon) + var(--spacing-x-small));
	height: auto;
	border-radius: var(--spacing-xx-small);
}

/* Floating bar: the side bar and the right-hand buttons (#scrollAccess) share
   a wrapper and an inner bar box (navbar.php). On wider screens neither is a
   box at all — each keeps its own corner. On phones the two join into one bar
   along the bottom, the height of the back-to-top button and framed like the
   side bar. The wrapper is a full-width row: a spacer, the bar, a spacer. The
   spacers share the room equally, so the bar sits in the screen's middle;
   the right one never gets narrower than back-to-top plus a small gap, so
   where the middle would run into that button the bar keeps the gap instead.
   It shows with the side bar (main.js, data-visible). */
[data-type="float-bar"],
[data-type="float-bar"] > [data-part="bar"] {
	display: contents;
}

@media only screen and (max-width: 38.4rem) {
	[data-type="float-bar"] {
		position: fixed;
		bottom: 1.5rem;
		left: 0;
		right: 0;
		z-index: 9997;
		display: flex;
		height: 2.5rem;
		pointer-events: none;
		opacity: 0;
		visibility: hidden;
		transition: opacity 200ms ease, visibility 200ms;
	}

	[data-type="float-bar"]:has([data-visible="true"]) {
		opacity: 1;
		visibility: visible;
	}

	/* The spacers each keep room for a square button and a gap — Home on the
	   left, back-to-top on the right — so the bar sits in the middle between
	   two matching squares. */
	[data-type="float-bar"]::before,
	[data-type="float-bar"]::after {
		content: "";
		flex: 1 1 0;
		min-width: calc(1.5rem + 2.5rem + var(--spacing-x-small));
	}

	/* Home (the SA logo) leaves the bar for a square of its own at the left,
	   the twin of back-to-top at the right: same size, frame and distance
	   from the edges. Placed on the wrapper, which spans the screen. */
	[data-type="float-bar"] #sideBar [data-part="home"] {
		position: absolute;
		top: 0;
		left: 1.5rem;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		width: 2.5rem;
		height: 2.5rem;
		background-color: var(--primary-color);
		border: 0.1rem solid var(--bg-color);
		border-radius: 0.75rem;
		pointer-events: auto;
	}

	[data-type="float-bar"] #sideBar [data-part="home"] img {
		width: calc(var(--page-tools-icon) + var(--spacing-xx-small));
	}

	[data-type="float-bar"] > [data-part="bar"] {
		display: flex;
		flex: none;
		align-items: center;
		gap: var(--spacing-x-small);
		box-sizing: border-box;
		height: 100%;
		padding: 0 var(--spacing-x-small);
		background-color: var(--primary-color);
		border: 0.1rem solid var(--bg-color);
		border-radius: 0.75rem;
		pointer-events: auto;
	}

	/* Inside it both lose their own box and lie in a row. */
	[data-type="float-bar"] :is(#sideBar, #scrollAccess) {
		position: static;
		flex-direction: row;
		align-items: center;
		gap: var(--spacing-x-small);
		width: auto;
		padding: 0;
		background: none;
		border: 0;
		border-radius: 0;
		opacity: 1;
		visibility: inherit;
		transition: none;
	}

	[data-type="float-bar"] [data-button~="icon"] {
		width: auto;
	}

	[data-type="float-bar"] #scrollAccess a {
		display: flex;
	}

	[data-type="float-bar"] #scrollAccess img {
		width: var(--page-tools-icon);
		border: 0;
		border-radius: 0;
		background: none;
	}

	/* Listen / play / pause: their images draw a framed dark square of their
	   own; here the plain glyph (the outline icons without the frame), like
	   the other icons in the bar. main.js swaps the file by state. */
	[data-type="float-bar"] #toggle-audio-scroll[src$="listen.svg"] {
		content: url("../img/icons/listen-plain.svg");
	}
	[data-type="float-bar"] #toggle-audio-scroll[src$="play.svg"] {
		content: url("../img/icons/play-plain.svg");
	}
	[data-type="float-bar"] #toggle-audio-scroll[src$="pause.svg"] {
		content: url("../img/icons/pause-plain.svg");
	}

	/* Top keeps the bar's corners beside it. */
	[data-button="back-to-top"] {
		border-radius: 0.75rem;
	}
}

/* Under 352px the two squares, their gaps and the bar do not fit with the
   usual spacing: the bar's own spacing and its gaps to the squares tighten. */
@media only screen and (max-width: 22rem) {
	[data-type="float-bar"] > [data-part="bar"],
	[data-type="float-bar"] :is(#sideBar, #scrollAccess) {
		gap: var(--spacing-xx-small);
	}

	[data-type="float-bar"] > [data-part="bar"] {
		padding: 0 var(--spacing-xx-small);
	}

	[data-type="float-bar"]::before,
	[data-type="float-bar"]::after {
		min-width: calc(1.5rem + 2.5rem + var(--spacing-xx-small));
	}
}

/* Dark themes turn the bars light: the logo (a dark square with light
   letters) is inverted with them, or it shows as a dark block. */
[data-accessibility~="dark"] [data-type="side-bar"] [data-part="home"] img,
[data-accessibility~="high-contrast"] [data-type="side-bar"] [data-part="home"] img {
	filter: invert(1);
}

/* ── Recess drawer (main.js openRecess) ─────────────────────────────────────
   A modal <dialog data-recess="left | right | bottom"> opens as a drawer from
   that edge while the page recedes into a rounded, blurred card beside it —
   a CSS take on a "recess" drawer, no animation library. Used by the site
   menu (left) and the accessibility settings (right, or bottom).
   - The card is the dialog's ::backdrop: a rounded rectangle, outlined like
     the site's panels, whose huge shadow paints everything outside it in the
     page colour (behind the drawer too). Its place comes from --card-t/r/b/l,
     set on the dialog by main.js.
   - Beside a side drawer the page itself shrinks into the card: main.js
     sets the scale and corner (--recess-*), used on body below. The dialog
     lives in the top layer, so the page's transform does not move it; the
     page's fixed bars, held by the transformed body meanwhile, leave the
     screen with it. Above the bottom drawer the page keeps its size; the
     card is the screen above the drawer. The page does not scroll. A change
     of size while open (font size, width) refits it.
   - As it opens, the card shrinks from the whole screen to its place and the
     drawer's visible edge grows from its side in step (same curve), so the
     drawer seems to lie behind the page; its contents slide the last 4rem.
     Opening takes 800ms on a soft spring curve, closing 510ms.
   - Width per drawer: --recess-w (side drawers); --recess-h caps the bottom
     one. */
html {
	--recess-open: 800ms
		linear(
			0, 0.005, 0.02 2.1%, 0.081 4.7%, 0.467 15.7%, 0.563, 0.645, 0.717,
			0.778 28.5%, 0.829 32%, 0.872 35.8%, 0.909 40.1%, 0.938 44.9%,
			0.961 50.3%, 0.977 56.5%, 0.987 63.6%, 0.994 72.3%, 1
		);
	--recess-close: 510ms cubic-bezier(0.17, 0.84, 0.44, 1);
}

/* No scrolling under an open drawer — the scrollbar's room is kept, so the
   page does not shift sideways as it goes. */
html:has(dialog[data-recess][open]) {
	overflow: hidden;
	scrollbar-gutter: stable;
}

body {
	transform-origin: var(--recess-ox, 0) var(--recess-oy, 0);
	transition: transform var(--recess-close);
}

html:has(dialog[data-recess][open]) body {
	transform: translate(var(--recess-tx, 0), var(--recess-ty, 0)) scale(var(--recess-s, 1));
	transition: transform var(--recess-open);
}

/* main.js measures the page with its transform suspended, and applies a
   refit of an open drawer at once (font size, width or side changed). */
html[data-recess-measure] body {
	transform: none !important;
}

html[data-recess-still] body,
html[data-recess-still] dialog[data-recess],
html[data-recess-still] dialog[data-recess]::backdrop,
html[data-recess-still] dialog[data-recess] [data-part="panel"] {
	transition: none !important;
}

dialog[data-recess] {
	position: fixed;
	max-width: 100vw;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--primary-text-color);
	transition:
		clip-path var(--recess-close),
		overlay 510ms allow-discrete,
		display 510ms allow-discrete;
}

dialog[data-recess="left"] {
	inset: 0 auto 0 0;
	width: var(--recess-w);
	height: 100dvh;
	clip-path: inset(0 100% 0 0);
}

dialog[data-recess="right"] {
	inset: 0 0 0 auto;
	width: var(--recess-w);
	height: 100dvh;
	clip-path: inset(0 0 0 100%);
}

dialog[data-recess="bottom"] {
	inset: auto 0 0 0;
	width: 100vw;
	height: auto;
	clip-path: inset(100% 0 0 0);
}

dialog[data-recess][open] {
	clip-path: inset(0 0 0 0);
	transition:
		clip-path var(--recess-open),
		overlay 800ms allow-discrete,
		display 800ms allow-discrete;
}

@starting-style {
	dialog[data-recess="left"][open] {
		clip-path: inset(0 100% 0 0);
	}
	dialog[data-recess="right"][open] {
		clip-path: inset(0 0 0 100%);
	}
	dialog[data-recess="bottom"][open] {
		clip-path: inset(100% 0 0 0);
	}
}

dialog[data-recess]::backdrop {
	inset: 0;
	border-radius: 0;
	background-color: transparent;
	box-shadow: 0 0 0 100vmax var(--bg-color, #f4f3f2);
	outline: 0.1rem solid transparent;
	-webkit-backdrop-filter: blur(0);
	backdrop-filter: blur(0);
	transition:
		inset 510ms cubic-bezier(0.17, 0.84, 0.44, 1),
		border-radius 510ms cubic-bezier(0.17, 0.84, 0.44, 1),
		outline-color 350ms ease-out,
		backdrop-filter 350ms ease-out,
		-webkit-backdrop-filter 350ms ease-out,
		overlay 510ms allow-discrete,
		display 510ms allow-discrete;
}

dialog[data-recess][open]::backdrop {
	inset: var(--card-t, 0) var(--card-r, 0) var(--card-b, 0) var(--card-l, 0);
	border-radius: 0.8rem;
	outline-color: var(--primary-color, #252525);
	-webkit-backdrop-filter: blur(0.5rem);
	backdrop-filter: blur(0.5rem);
	transition:
		inset 800ms linear(0, 0.005, 0.02 2.1%, 0.081 4.7%, 0.467 15.7%, 0.563, 0.645, 0.717, 0.778 28.5%, 0.829 32%, 0.872 35.8%, 0.909 40.1%, 0.938 44.9%, 0.961 50.3%, 0.977 56.5%, 0.987 63.6%, 0.994 72.3%, 1),
		border-radius 800ms linear(0, 0.005, 0.02 2.1%, 0.081 4.7%, 0.467 15.7%, 0.563, 0.645, 0.717, 0.778 28.5%, 0.829 32%, 0.872 35.8%, 0.909 40.1%, 0.938 44.9%, 0.961 50.3%, 0.977 56.5%, 0.987 63.6%, 0.994 72.3%, 1),
		outline-color 350ms ease-out,
		backdrop-filter 350ms ease-out,
		-webkit-backdrop-filter 350ms ease-out,
		overlay 800ms allow-discrete,
		display 800ms allow-discrete;
}

dialog[data-recess][data-no-card][open]::backdrop {
	outline-color: transparent;
}

@starting-style {
	dialog[data-recess][open]::backdrop {
		inset: 0;
		border-radius: 0;
		outline-color: transparent;
		-webkit-backdrop-filter: blur(0);
		backdrop-filter: blur(0);
	}
}

/* The drawer's contents: one sliding panel, scrolling on its own without a
   visible scrollbar, never sideways. */
dialog[data-recess] [data-part="panel"] {
	position: relative;
	box-sizing: border-box;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;
	transition: transform var(--recess-close);
}

dialog[data-recess] [data-part="panel"]::-webkit-scrollbar {
	display: none;
}

dialog[data-recess="bottom"] [data-part="panel"] {
	height: auto;
	max-height: var(--recess-h, 70dvh);
}

dialog[data-recess="left"] [data-part="panel"] {
	transform: translateX(-4rem);
}

dialog[data-recess="right"] [data-part="panel"] {
	transform: translateX(4rem);
}

dialog[data-recess="bottom"] [data-part="panel"] {
	transform: translateY(4rem);
}

dialog[data-recess][open] [data-part="panel"] {
	transform: none;
	transition: transform 940ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

@starting-style {
	dialog[data-recess="left"][open] [data-part="panel"] {
		transform: translateX(-4rem);
	}
	dialog[data-recess="right"][open] [data-part="panel"] {
		transform: translateX(4rem);
	}
	dialog[data-recess="bottom"][open] [data-part="panel"] {
		transform: translateY(4rem);
	}
}

/* No motion where it is not wanted — and on phones, where the drawers fill
   the screen and there is no card to recede into: they simply appear. */
@media (prefers-reduced-motion: reduce), only screen and (max-width: 37.5rem) {
	body,
	html:has(dialog[data-recess][open]) body,
	dialog[data-recess],
	dialog[data-recess]::backdrop,
	dialog[data-recess] [data-part="panel"] {
		transition: none !important;
	}
}

/* Widths: the site menu 22.5rem (18rem under 900px), the accessibility
   settings 34.5rem at the side; both the whole screen on phones, the
   settings also on tablets, where a card beside them would be too narrow.
   The settings along the bottom take at most 60% of the height — on phones
   all of it, like the side drawers there. */
[data-type="site-menu"] {
	--recess-w: 22.5rem;
}

[data-type="accessibility"] {
	--recess-w: 34.5rem;
	--recess-h: 60dvh;
}

@media only screen and (max-width: 56.25rem) {
	[data-type="site-menu"] {
		--recess-w: 18rem;
	}

	[data-type="accessibility"] {
		--recess-w: 100vw;
	}
}

@media only screen and (max-width: 37.5rem) {
	[data-type="site-menu"] {
		--recess-w: 100vw;
	}

	[data-type="accessibility"] {
		--recess-h: 100dvh;
	}
}

/* The menu: a drawer at the left (snippets/site-menu.php). */
[data-type="site-menu"] [data-part="panel"] {
	padding: var(--spacing-medium) var(--spacing-large) var(--spacing-x-large) var(--spacing-medium);
}

[data-type="site-menu"] [data-logo~="sa"] {
	max-width: unset;
}

/* Logo and close laid out as in the accessibility window: the logo starts a
   line lower than the close button, which keeps the right-hand buttons'
   distance from the edge — on a phone, where the drawer fills the screen,
   it lands where the accessibility window's does. */
[data-type="site-menu"] [data-part="panel"] > a:first-child {
	display: block;
	margin-block-start: calc(1em + 0.1rem);
	/* Clear of the close button (2.5rem wide, 1.5rem from the edge): in a
	   narrow drawer the logo shrinks rather than slide under it. */
	padding-right: calc(4rem + var(--spacing-small) - var(--spacing-large));
}

[data-type="site-menu"] [data-part="panel"] > a:first-child [data-logo~="sa"] {
	width: 100%;
	max-width: 14.2rem;
	height: auto;
}

[data-type="site-menu"] [data-part="close"] {
	position: absolute;
	top: var(--spacing-medium);
	right: 1.5rem;
}

/* The line under the logo draws itself from the left as the drawer opens. */
[data-type="site-menu"] hr {
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 300ms ease;
}

[data-type="site-menu"][open] hr {
	transform: none;
	transition: transform 480ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

@starting-style {
	[data-type="site-menu"][open] hr {
		transform: scaleX(0);
	}
}

[data-type="site-menu"] [data-part="group"] {
	margin-bottom: var(--spacing-normal);
}

[data-type="site-menu"] :is(h2, [data-part="title"]) {
	color: inherit;
}

[data-type="site-menu"] h2 {
	margin: 0 0 var(--spacing-xx-small);
	font-size: var(--font-size-small);
	opacity: 0.6;
}

[data-type="site-menu"] ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

[data-type="site-menu"] li {
	padding: 0;
	text-indent: 0;
}

[data-type="site-menu"] li::before {
	content: none;
}

/* Links: hover or keyboard focus draws a short line at the left, slides the
   name over and turns it the accent colour; the current page keeps the line
   and the slide. The focus ring sits on the moving name. */
[data-type="site-menu"] li a {
	position: relative;
	display: inline-block;
	padding: var(--spacing-xx-small) 0;
	font-size: 1.25rem;
	font-weight: 700;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: color 200ms ease;
}

[data-type="site-menu"] li a::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 0.45em;
	height: 0.1rem;
	background-color: currentColor;
	transform: translateY(-50%) scaleX(0);
	transform-origin: left center;
	transition: transform 500ms cubic-bezier(0.19, 1, 0.22, 1);
}

[data-type="site-menu"] li a span {
	display: block;
	border-radius: 0.1rem;
	transition: transform 500ms cubic-bezier(0.19, 1, 0.22, 1);
}

[data-type="site-menu"] li a:hover,
[data-type="site-menu"] li a:focus-visible {
	color: var(--focus-color);
	outline: none;
}

[data-type="site-menu"] li a:is(:hover, :focus-visible, [aria-current="page"])::before {
	transform: translateY(-50%) scaleX(1);
}

[data-type="site-menu"] li a:is(:hover, :focus-visible, [aria-current="page"]) span {
	transform: translateX(0.7em);
}

[data-type="site-menu"] li a:focus-visible span {
	outline: 0.05rem solid currentColor;
	outline-offset: 0.2rem;
}

@media (prefers-reduced-motion: reduce) {
	[data-type="site-menu"] :is(hr, li a, li a::before, li a span) {
		transition: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	[data-type="side-bar"],
	[data-type="side-bar"] [data-button~="icon"],
	[data-type="site-menu"] [data-button~="icon"] {
		transition: none;
	}
}

/* Blurred mode (a dialog is open): base.css gives every <nav> a full-screen
   blur layer. The page-tools tab and the site menu's bar are <nav>s too, and
   theirs would sit above the dialog once the bar shows on scroll — blurring
   the dialog itself. They take no layer of their own; they are blurred
   themselves instead, like the rest of the page. So are the back-to-top
   button and the right-hand buttons, which sit above the page's blur layer —
   the right-hand ones each on their own, since dark mode already puts an
   invert filter on their column. */
body[data-mode="blurred"] :is([data-type="page-tools"], [data-type="side-bar"])::before {
	content: none;
}

body[data-mode="blurred"] :is([data-type="page-tools"], [data-type="side-bar"], [data-button="back-to-top"], #scrollAccess > *, [data-type="float-bar"]) {
	filter: blur(var(--spacing-x-small));
}

/* Close buttons keep their square on phones: base.css makes every
   [data-button] full width below 40rem, which stretched the accessibility
   window's close button (and the site menu's) across the screen. */
@media only screen and (max-width: 40rem) {
	[data-button~="close"] {
		width: 2.5rem;
	}
}