/* @font-face {
	font-family: 'Miserably Lose';
	src: url('../fonts/miserablylose.ttf');
	font-weight: 400;
	font-style: normal;
} */

@font-face {
	font-family: 'KG Life is Messy';
	src: url('../fonts/kglifeismessy-webfont.woff2') format('woff2'),
	     url('../fonts/kglifeismessy-webfont.woff') format('woff');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'Softie';
	src: url('../fonts/Softie_v1.3-regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
}

:root {
	font-size: 1em;
	--marker-font: 'KG Life is Messy';

	--grid-padding-h: 2.5vw;
	--grid-padding-v: 2vw;

	--target-size: 24px;

	--gold-texture: url('../images/iStock-679468742.jpg');
	--gold-texture-image-set: image-set(
		url("../images/iStock-679468742_600x.jpg") 1x,
    		url("../images/iStock-679468742_1200x.jpg") 2x
	);

	/***** ANIMATIONS *****/
	--500ms: 500ms;

	/***** COOKIE BANNER *****/
	--text-size: 1.2rem;
	--text-color: black;
	--background-color: white;
	--offset: var(--grid-padding-h, 1em);
	--grid-gap: 1em;

	/***** TEXT SIZES *****/

	--h2: 2.25rem;
}

@media (prefers-reduced-motion) {
	:root {
		/***** ANIMATIONS *****/
		--500ms: 0;
	}
}

:focus-visible {
	outline: none;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	hyphens: auto;
}

html {
	scroll-behavior: smooth;
}

body {
	/* padding: 2.5vw; */
	font-family: 'Softie', system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	inline-size: 100vw;
	overflow-x: hidden;
	/* min-block-size: 250vh; */
}

@media screen and (min-width: 600px) {
	body {
		min-block-size: 100vh;
		display: grid;
		grid-template-rows: 1fr auto;
	}

	/* body > footer {
		height: fit-content;
		align-self: flex-end;
	} */
}

@media screen and (min-width: 1200px) {
	:root {
		--gold-texture-image-set: image-set(
			url("../images/iStock-679468742_1200x.jpg") 1x,
			url("../images/iStock-679468742_2400x.jpg") 2x
		);
	}
}

@media screen and (min-width: 1800px) {
	:root {
		--gold-texture-image-set: image-set(
			url("../images/iStock-679468742_1800x.jpg") 1x,
			url("../images/iStock-679468742_3600x.jpg") 2x
		);
	}
}

@media screen and (min-width: 2400px) {
	:root {
		--gold-texture-image-set: image-set(
			url("../images/iStock-679468742_2400x.jpg") 1x,
			url("../images/iStock-679468742_4800x.jpg") 2x
		);
	}
}

header {
	position: fixed;
	z-index: 666;
	display: flex;
	justify-content: space-between;
	inline-size: 100%;
	padding: 2.5vw;
	inset-block-start: 0;
	max-width: 100vw;
}

header a {
	text-decoration: none;
}

body > main {
	display: flex;
	flex-direction: column;
	row-gap: calc(5 * var(--grid-padding-v));
}

body > footer {
	background: var(--gold-texture, url('../images/istockphoto-679468742-1024x1024.jpg'));
	background-image: var(--gold-texture-image-set);
	background-repeat: no-repeat;
	background-size: cover;
	padding: var(--grid-padding-h);
	margin-block-start: 10vw;
	display: flex;
	/* flex-direction: column; */
	/* align-items: center; */
	gap: var(--grid-padding-h);
}

body > footer nav.nav-legal {
	display: none;
}

@media screen and (min-width: 600px) {
	body > main {
		display: initial;
	}

	body > footer {
		/* display: flex; */
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	body > footer nav.nav-legal {
		display: block;
	}
}

body.work > footer {
	margin-block-start: 0;
}

body > footer nav.nav-legal {
	inline-size: 100%;
}

body > footer ul {
	display: flex;
	gap: var(--grid-padding-h);
	list-style: none;
	font-size: 1.5rem;
	margin-block-start: 1em;
}


body > footer a {
	text-decoration: none;
}

body > footer > a {
	font-family: var(--marker-font);
	/* font-size: 2.2rem; */
	font-size: min(3rem, 11vw);
	line-height: 1;
}

@media screen and (min-width: 600px) {
	body > footer > a {
		font-size: 2.2rem;
	}

	body > footer ul li:nth-child(1 of .additional) {
		margin-inline-start: auto;
	}
}

div.social {
	display: flex;
	justify-content: flex-end;
	gap: calc(.5 * var(--grid-padding-h));
}

div.social a > svg {
	block-size: 2.2rem;
	inline-size: 2.2rem;
}

a {
	color: currentColor;
}

h2 > a {
	text-decoration: none;
}

a#home {
	font-family: var(--marker-font, 'Miserably Lose');
	font-weight: 400;
	font-size: min(3rem, 11vw);
	line-height: 1;
	position: relative;
	hyphens: none;
}

a#home span {
	hyphens: none;
}

body:not(.publication) header:not(.expanded) a#home span:not(.drop-shadow) {
	background: var(--gold-texture, url('../images/istockphoto-679468742-1024x1024.jpg'));
	background-image: var(--gold-texture-image-set);
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	z-index: 666;
	hyphens: none;
}

a#home span.drop-shadow {
	/* font-family: 'Miserably Lose';
	font-weight: 400;
	font-size: 3rem; */
	color: white;
	/* text-shadow: 0 0 1em rgb(0 0 0 / 30%); */
	position: absolute;
	inset: 0;
	mix-blend-mode: multiply;
	hyphens: none;
	display: none;
}


button.icon-button {
	block-size: .75em;
	inline-size: .75em;
	padding: .25em;
	/* background-color: red; */
	min-block-size: 24px;
	min-inline-size: 24px;
	box-sizing: border-box;
}

header nav ul {
	font-size: 2rem;
	display: flex;
	list-style: none;
	gap: 2.5vw;
}

header nav a {
	display: inline-block;
	hyphens: none;
	/* line-height: 1rem; */
	/* color: black; */
	/* text-shadow: 0 0 1em rgb(0 0 0 / 30%); */
}

@media screen and (min-width: 1200px) {
	header nav ul {
		/* font-size: 1.5rem; */
		font-size: 1.35rem;
	}

	header.invert:hover::before {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, rgba(0,0,0,1), rgba(0,0,0,0));
		opacity: 0.2;
		z-index: -1;
	}

	body:where(.home, .publication) > header.invert nav a {
		color: white;
	}	
}

header nav li:not(.switch-language) a[aria-current],
header nav li:not(.switch-language) a:hover,
header nav li:not(.switch-language) a:focus-visible {
	font-family: var(--marker-font, 'Miserably Lose');
	font-size: min(3rem, 11vw);
	transform: translateY(-10%);
	text-shadow: none;
	hyphens: none;
}

header nav li.switch-language a {
	position: relative;
	/* font-family: var(--marker-font); */
	/* color: inherit; */
	display: block;
	inline-size: 3rem;
	block-size: 6rem;
}

header nav li.switch-language a span {
	display: none;
	text-align: center;
	/* font-size: .96em; */
	letter-spacing: .06em;
}

header nav li.switch-language a svg {
	position: absolute;
	inset: 0;
	/* transform: scale(1.8) translateY(5%); */
	z-index: -1;
	transform: scale(2) translateY(-2.5%);
}

header nav li.switch-language a:hover svg,
header nav li.switch-language a:focus svg {
	display: block;
}

header nav li.switch-language a:not(:hover, :focus) svg path {
	fill: inherit;
}

@media screen and (max-width: 1199px) {
	header nav li.switch-language {
		position: absolute;
		inset: 0;
		inset-block-start: auto;
		inset-inline-start: auto;
		inset-inline-end: calc(4 * var(--grid-padding-h));
	}		
}



@media screen and (min-width: 1200px) {
	header nav a[aria-current],
	header nav a:hover,
	header nav a:focus-visible {
		background: var(--gold-texture, url('../images/istockphoto-679468742-1024x1024.jpg'));
		background-image: var(--gold-texture-image-set);
		background-size: no-repeat;
		background-size: cover;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		line-height: 1.2;
	}

	header nav li.switch-language a span {
		display: block;
	}

	header nav li.switch-language a svg,
	header nav li.switch-language a:is(:hover, :focus-visible) span {
		display: none;
	}
}

button {
	all: unset;
}

button#btn-nav-main {
	min-inline-size: var(--target-size);
	min-block-size: var(--target-size);
	/* padding: .5rem; */
	/* inline-size: 3rem;
	block-size: 3rem; */
	inline-size: 2.6rem;
	block-size: 2.6rem;
}

button#btn-nav-main[aria-expanded="true"] svg.menu-open {
	display: none;
}

button#btn-nav-main[aria-expanded="false"] svg.menu-close {
	display: none;
}

button#btn-nav-main[aria-expanded="true"] ~ ul {
	inline-size: 100vw;
	block-size: 100vh;
	inline-size: 100dvw;
	block-size: 100dvh;
	position: fixed;
	inset: 0;
	background: var(--gold-texture, url('../images/istockphoto-679468742-1024x1024.jpg'));
	background-image: var(--gold-texture-image-set);
	background-repeat: no-repeat;
	background-size: cover;
	/* background-color: white; */
	z-index: -1;
	display: grid;
	justify-content: center;
	text-align: center;
	place-content: center;
	gap: 2rem;
	color: black;
}

button#btn-nav-main[aria-expanded="true"] ~ ul::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('../images/artists-best-friends.jpg');
	background-repeat: no-repeat;
    	background-size: cover;
	background-position-x: 25%;
	mix-blend-mode: soft-light;
	pointer-events: none;
}

@media screen and (min-width: 1200px) {
	button#btn-nav-main {
		display: none;
	}
	
	button#btn-nav-main ~ ul {
		display: flex;
	}

	header nav ul li.additional {
		display: none;
	}
}

button > svg {
	inline-size: 100%;
	block-size: 100%;
}

button[] {}

/***** HOME *****/

body.home section.intro {
	block-size: 100vh;
	block-size: 100dvh;
	inline-size: 100vw;
}


button.btn-player-mute,
button.btn-player-play-pause {
	inline-size: 3rem;
	block-size: 3rem;
	inline-size: 6rem;
	block-size: 6rem;
}

@media screen and (min-width: 600px) {
	button.btn-player-mute,
	button.btn-player-play-pause {
		inline-size: 9rem;
		block-size: 9rem;
	}
}

button.btn-player-mute,
button.btn-player-play-pause {
	position: absolute;
	inset: 2.5vw;
	font-size: 2rem;
	/* background: url('/assets/css/svg/dot-gold-pattern.svg'); */
}

/* button.btn-player-mute::after,
button.btn-player-play-pause::after {
	content: '';
	position: absolute;
	inset: 0;
	background: url('../images/istockphoto-679468742-612x612.jpg');
	background-repeat: no-repeat;
	background-size: cover;
} */

button.btn-player-mute > svg,
button.btn-player-play-pause > svg {
	position: relative;
	z-index: 1;
}


button.btn-player-mute[aria-pressed="true"] > svg:nth-child(1),
button.btn-player-play-pause[aria-pressed="true"] > svg:nth-child(1) {
	display: none;
}

button.btn-player-mute[aria-pressed="false"] > svg:nth-child(2),
button.btn-player-play-pause[aria-pressed="false"] > svg:nth-child(2) {
	display: none;
}

button.btn-player-mute > svg:nth-child(3),
button.btn-player-play-pause > svg:nth-child(3) {
	position: absolute;
	inset: 0;
	z-index: 0;
	transform: scale(1.2);
}

button.btn-player-mute {
	inset-block-start: auto;
	inset-inline-end: auto;
}

button.btn-player-play-pause {
	inset-block-start: auto;
	inset-inline-end: auto;
}

button[aria-expanded="false"] ~ * {
	display: none;
}

/* button[aria-expanded="true"] ~ * {
	display: block;
} */

/* #myVideo {
	position: absolute;
	inset: 0;
	min-inline-size: 100%;
	min-block-size: 100%;
	/* z-index: -1; 
} */

#myVideo {
	inline-size: 100vw;
	block-size: 100vh;
	block-size: 100dvh;
	object-fit: cover;
	position: absolute;
	inset: 0;
}

#main-video {
	filter: brightness(.9) contrast(1.05);
}

/* #main-video::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: black;
	z-index: 666;
	opacity: .08;
} */

.iframe_background, video {
	inline-size: 100vw;
	block-size: 100vh;
	block-size: 100dvh;
	position: absolute;
	inset: 0;
	inset-block-start: 0;
	inset-inline-start: 0;
	inset-inline-end: 0;
	inset-block-end: 0;
	object-fit: cover;
	z-index: 0;
	overflow: hidden;
}

.iframe_background iframe {
	inline-size: 100vw;
	block-size: 56.25vw;
	/* min-block-size: 100vh; */
	min-block-size: 100%;
	min-inline-size: 177.77vh;
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	filter: brightness(1.25);
	overflow: hidden;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	pointer-events: none;
}

picture {
	display: block;
}

picture img {
	inline-size: 100%;
	block-size: 100%;
	display: block;
	object-fit: cover;
}

/* iframe:not([data-ready="true"]) {
	display: none;
} */

@media screen and (min-width: 600px) {
	/* picture > div.iframe_background:has(iframe[data-ready="true"]) + picture {
		display: none;
	} */

	figure:not(.outro) {
		aspect-ratio: 3 / 2;
	}

	figure.outro {
		margin-block-start: 5rem;
	}	
}

h1, h2, h3, h4 {
	font-family: var(--marker-font);
	line-height: 1.1;
}

@media screen and (min-width: 600px) {
	h1, h2, h3, h4 {
		hyphens: none;
	}
}

body:not(.publications) h2 {
	font-size: 2.25rem;
}

p {
	max-inline-size: 55ch;
}

p strong {
	display: inline-block;
	font-family: var(--marker-font);
	line-height: 0;
	transform: translateY(.15em);
}

p + p {
	margin-block-start: 1rem;
}

:is(h1, h2, h3, h4, p, ul, blockquote, button.cookies-button) + :is(h2, h3, h4, p, ul, blockquote, footer) {
	margin-block-start: 1rem;
}

:is(h1, h2, h3, h4, p, ul) + :is(h2, h3, h4) {
	margin-block-start: 2rem;
}

p.subtitle {
	margin-block-start: .5rem;
	hyphens: none;
}

summary:hover {
	cursor: default;
}

aside {
	margin-block-start: 1rem;
}

section:not(.intro, .outro, .works, .splide) {
	padding-block: var(--grid-padding-v);
	padding-inline: var(--grid-padding-h);	
}

section:not(.intro):first-child {
	margin-block-start: 20vh;
}

section.outro {
	margin-block-start: 5rem;
}

section.outro figure {
	aspect-ratio: auto;
}

section.outro figcaption {
	display: none;
}

body.work section.splide:first-child {
	margin-block-start: 12.5vh;
	margin-block-start: calc(2.5 * 3rem);
	max-inline-size: 100vw;
}

section.news {
	margin-block-start: 10vh;
	margin-inline: auto;
	padding-block: var(--grid-padding-v);
	padding-inline: var(--grid-padding-h);
	column-gap: var(--grid-padding-h);
	max-inline-size: 120ch;
}

@media screen and (min-width: 600px) {
	section.news {
		column-count: 2;
	}
}

@media screen and (min-width: 900px) {
	section.news {
		column-count: 3;
	}
}

section.news article {
	break-inside: avoid;
	padding-block-end: calc(8 * var(--grid-padding-v));
}

section.news article h3 {
	font-size: 1.75rem;
}

section.news article h3 + p + picture {
	/* order: -1; */
	margin-block-end: var(--grid-padding-v);
}

@media screen and (min-width: 600px) {
	section.news article {
		padding-block-end: calc(2 * var(--grid-padding-v));
	}

	section.news article :is(h3, p) + picture {
		order: -1;
		margin-block-end: var(--grid-padding-v);
	}
}

section.news article main {
	display: flex;
	flex-direction: column;
}

section.news article main button.icon-button {
	order: 666;
	align-self: flex-end;
	block-size: 2em;
	inline-size: 2em;
}

section.news article main button.icon-button[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

section.collabs p.visible-focused {
	display: none;
}

section.collabs p.visible-focused + p {
	margin-block-start: 0;
	hyphens: none;
}

section.collabs details[open] p.visible-focused + p {
	margin-block-start: 1rem;
}

section.collabs summary {
	padding-block: var(--grid-padding-h);
}

@media screen and (min-width: 600px) {
	section.collabs summary {
		padding-block: calc(.75 * var(--grid-padding-v));
	}
}

section.collabs summary::marker,
section.collabs summary::-webkit-details-marker {
	display: none; 
}

section.collabs details[open] .visible-focused {
	display: inline-block;
}

section details.collab:not(:first-of-type) {
	border-block-start: 1px solid black;
}

section.collabs details > * {
	display: flex;
}

section.collabs details:is(:hover, :focus-within) summary > h2 {
	background: var(--gold-texture, url('../images/istockphoto-679468742-1024x1024.jpg'));
	background-image: var(--gold-texture-image-set);
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

section.collabs summary > * {
	/* padding-inline-end: var(--grid-padding-h); */
	/* padding-block-start: var(--grid-padding-v); */
}

section.collabs summary h2 {
	grid-column: 1 / -1;
}

section.collabs summary h2 + div {
	margin-block-start: 1em;
}

section.collabs summary h2 ~ div {
	font-size: 1.15rem;
}

@media screen and (min-width: 600px) {
	section.collabs summary h2 + div {
		margin-block-start: 0;
	}

	section.collabs summary h2 ~ div {
		font-size: 1rem;
	}
}

@media screen and (min-width: 900px) {
	section.collabs summary h2 {
		grid-column: 1 / span 2;
	}
}

/* section.collabs div.content > div {
	inline-size: 60%;
} */

details.collab {
	--number-of-columns: 5;
	display: grid;
	grid-template-columns: repeat(var(--number-of-columns, 5), minmax(0, 1fr));
	gap: var(--grid-padding-h);
}

@media screen and (min-width: 600px) {
	details.collab {
		--number-of-columns: 3;
	}
}

@media screen and (min-width: 900px) {
	details.collab {
		--number-of-columns: 5;
	}
}

details.collab summary,
section.collabs div.details-content {
	display: block;
	/* display: flex;
	flex-direction: column;
	gap: var(--grid-padding-h); */
	position: relative;
}

details.collab summary > picture {
	display: none;
}

@media screen and (min-width: 600px) {
	details.collab summary,
	section.collabs div.details-content {
		display: grid;
		grid-template-columns: repeat(var(--number-of-columns, 5), minmax(0, 1fr));
		gap: var(--grid-padding-h);
	}

	details.collab summary > picture {
		position: absolute;
		inline-size: 25vw;
		transform: translateY(-25%);
		/* inset: 0; */
		inset-inline-start: 60%;
		/* position: relative; */
		z-index: 1;
	}
	
	details.collab summary > picture::after {
		content: '';
		/* background-image: url("../images/golden-wall-background.jpg"); */
		background-image: var(--gold-texture-image-set);
		background-repeat: no-repeat;
		background-size: cover;
		position: absolute;
		inset: 0;
		mix-blend-mode: hard-light;
	}

	details.collab:not([open]) summary:hover > picture, 
	details.collab:not([open]) summary:focus-visible > picture {
		display: block;
	}	

	details.collab summary:is(:hover, :focus-visible) img {
		filter: grayscale(1) opacity(.6);
	}
}

section.collabs div.details-content {
	margin-block-start: var(--grid-padding-h);
	padding-block-end: calc(.75 * var(--grid-padding-v));
}

section.collabs div.content {
	/* inline-size: 60%; */
	font-size: 1.5rem;
	grid-column: 1 / -1;
}

@media screen and (min-width: 600px) {
	section.collabs div.content {
		font-size: 1.75rem;
	}
}

section.collabs div.photo-gallery {
	/* inline-size: 40%; */
	grid-column: 1 /  -1;
}

@media screen and (min-width: 900px) {
	section.collabs div.photo-gallery {
		/* inline-size: 40%; */
		grid-column: 1 / 3;
	}

	section.collabs div.content {
		grid-column: 3 / -1;
	}
}

/* details.collab:hover picture {
	display: block;
	position: absolute;
} */

div.collaborators p.visible-focused + p {
	margin-block-start: 0;
}

/* div.collaborators ul {
	list-style: none;
}

div.collaborators li {
	display: inline-block;
}

section.collabs details[open] div.collaborators li {
	display: inline;
}

div.collaborators li:not(:last-of-type):after {
	content: ', ';
} */

details.collab#no-gallery h2 {
	text-decoration: underline;
	text-underline-offset: -0.5em;
	text-decoration-skip-ink: none;
}

body.about blockquote {
	font-family: var(--marker-font);
	font-size: 2.4rem;
	line-height: 1.25;
	background: var(--gold-texture, url('../images/istockphoto-679468742-1024x1024.jpg'));
	background-image: var(--gold-texture-image-set);
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	/* z-index: 666; */
	/* padding-inline: 15vw; */
	padding-block: 5vw;
	margin-inline: auto;
	max-inline-size: 55ch;
	grid-column: 1 / -1;
}

@media screen and (min-width: 600px) {
	body.about blockquote {
		font-size: 2.8rem;
		padding-inline: 15vw;
	}
}

body:is(.default, .about, .publication, .work) div.content {
	grid-column: span 2;
}

body:is(.default, .about, .publication, .work) section:not(.splide, .outro) {
	font-size: 1.5rem;
	/* display: grid; */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--grid-padding-h);
}

body.work main > section:not(.splide) {
	display: flex;
	flex-direction: column;
}

@media screen and (min-width: 600px) {
	body:is(.default, .about, .publication, .work) main > section:not(.splide) {
		font-size: 1.75rem;
		display: grid;
		/* grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--grid-padding-h); */
	}
}

body.work div.content {
	grid-column: 2 / 5;
	order: 3;
}

body.work h1 {
	grid-column: 2 / 5;
	order: 1;
}

body.work aside {
	grid-column: 1 / 2;
	grid-row: 2;
	order: 3;
}

body.work small {
	font-size: 1rem;
	display: block;
	max-inline-size: 40ch;
}

@media screen and (min-width: 600px) {
	body.about aside {
		margin-block-start: 0;
	}	
}

body.about details {
	font-size: 1rem;
	margin-block-end: 1rem;
}

body.about details summary {
	font-size: 1.5rem;
	list-style: none;
}

body.about details summary {
	list-style-type: none;
}

body.about details summary::marker,
body.about details summary::-webkit-details-marker {
	display: none; 
}

body.about details summary::before { 
	content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M 9.09375 4.78125 L 7.6875 6.21875 L 17.46875 16 L 7.6875 25.78125 L 9.09375 27.21875 L 20.3125 16 Z M 16.09375 4.78125 L 14.6875 6.21875 L 24.46875 16 L 14.6875 25.78125 L 16.09375 27.21875 L 27.3125 16 Z"/></svg>');
	block-size: 1em;
	inline-size: 1em;
	display: inline-block;
	margin-inline-end: .5rem;
	vertical-align: -.1em;
}
    
body.about details[open] summary::before { 
	/* content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M 5.21875 6.6875 L 3.78125 8.09375 L 16 20.3125 L 28.21875 8.09375 L 26.78125 6.6875 L 16 17.46875 Z M 5.21875 13.6875 L 3.78125 15.09375 L 16 27.3125 L 28.21875 15.09375 L 26.78125 13.6875 L 16 24.46875 Z"/></svg>'); */
	transform: rotate(90deg);
}


body.about details > *:not(summary) {
	max-inline-size: 30ch;
	margin-inline-start: 2em;
}

@media screen and (min-width: 600px) {
	body.about details > *:not(summary) {
		margin-inline-start: 2em;
	}
}

body.about details ul {
	list-style: none;
}

body.about details li {
	margin-block-start: 1em;
}

/* PUBLICATIONS */

section.publications {
	--gap: calc(2 * var(--grid-padding-h));
	padding-inline: calc(2 * var(--grid-padding-h));
	/* column-count: 2;
	column-gap: calc(2 * var(--grid-padding-h)); */
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: flex-start;
	column-gap: var(--gap);
	row-gap: var(--grid-padding-h);
}

section.publications picture {
	position: relative;
}

section.publications figure {
	break-inside: avoid;
	position: relative;
	/* padding: var(--grid-padding-h); */
	/* flex-basis: calc(50% - var(--gap) / 2); */
	flex-basis: calc((95vw - 3 * var(--gap)) / 2);

}

section.publications figure.space-filler {
	block-size: 0;
}

@media screen and (min-width: 600px) {	
	section.publications figure {
		flex-basis: calc((95vw - 4 * var(--gap)) / 3);
	}

	section.publications figure:nth-child(3n - 1) {
		transform: translateY(calc(3 * var(--grid-padding-h)));
	}
}

@media screen and (min-width: 1200px) {	
	section.publications figure {
		flex-basis: calc((95vw - 5 * var(--gap)) / 4);
		/* flex-basis: 20%; */
	}

	section.publications figure:nth-child(3n - 1) {
		transform: none;
	}

	section.publications figure:nth-child(odd) {
		transform: translateY(calc(3 * var(--grid-padding-h)));
	}
}

section.publications figure picture {
	margin-inline: var(--grid-padding-v);
}

section.publications figure picture::before,
section.publications figure picture::before,
section.publications figure picture::after,
section.publications figure picture::after {
	position: absolute;
	background: var(--gold-texture, url('../images/istockphoto-679468742-1024x1024.jpg'));
	background-image: var(--gold-texture-image-set);
	background-repeat: no-repeat;
	background-size: cover;
	inset: 0;
}

section.publications figure:hover picture::before,
section.publications figure:focus-within picture::before {
	mix-blend-mode: color-burn;
	filter: opacity(0.8);
}

section.publications figure picture::after,
section.publications figure picture::after {
	z-index: -1;
}

/* section.publications figure:hover picture::before,
section.publications figure:focus-within picture::before, */
section.publications figure:hover picture::after,
section.publications figure:focus-within picture::after {
	content: '';
}

section.publications figure:hover img,
section.publications figure:focus-within img {
	/* filter: sepia() contrast(1.5); */
	filter: grayscale() contrast(.75);
	mix-blend-mode: overlay;
}

section.publications figcaption {
	text-align: center;
	margin-block-start: 2.4rem;
}

section.publications figure:hover figcaption,
section.publications figure:focus-within figcaption {
	background: var(--gold-texture, url('../images/istockphoto-679468742-1024x1024.jpg'));
	background-image: var(--gold-texture-image-set);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

section.publications figcaption a::after {
	content: '';
	position: absolute;
	inset: 0;
}

section.publications figcaption p {
	margin-block-start: .5rem;
}

/* PUBLICATION */

body.publication > header.invert {
	color: white;
}

body.publication section:not(.intro) {
	max-inline-size: 60ch;
	margin-inline: auto;
}

body.publication section.intro {
	inline-size: 100vw;
}

body.publication section.intro:not(.splide) {
	block-size: 90vh;
}

body.publication section.intro picture {
	inline-size: inherit;
	block-size: inherit;
}

body.publication section.intro.splide {
	max-block-size: calc(90vh + 3rem);
}

/* body.publication section.intro.splide .splide__slide {
	block-size: calc(90vh + 2rem);
} */

body.publication section.splide div.splide__track {
	block-size: calc(60vh + 5rem);
}	

body.publication section.intro.splide .splide__slide__container {
	aspect-ratio: initial;
	block-size: calc(60vh);
}

@media screen and (min-width: 600px) {
	body.publication section:not(.splide, .outro) {
		grid-template-areas:
			"main main h1   " 
			"main main aside";
		grid-template-rows: auto 1fr;
	}

	body.publication section.splide div.splide__track {
		block-size: calc(90vh + 5rem);
	}	

	body.publication section.intro.splide .splide__slide__container {
		/* aspect-ratio: initial; */
		block-size: calc(90vh);
	}
}

body.publication h1 {
	grid-area: h1;
}	

body.publication div.content {
	grid-area: main;
}

body.publication aside {
	grid-area: aside;
}

body.publication section.splide + section,
body.publication section.main {
	padding-block-start: calc(.5 * var(--grid-padding-h));
}

body:is(.default, .publication, .work) aside {
	margin-block-start: 0;
	/* position: sticky;
	inset-block-start: 10vw; */
}

body:is(.default, .publication, .work) aside > *:not(h1, h2, h3, h4) {
	font-size: 1.15rem;
}	

@media screen and (min-width: 600px) {
	body:is(.default, .publication, .work) aside > *:not(h1, h2, h3, h4) {
		font-size: 1rem;
	}	
}


* + p {
	margin-block-start: 1rem;
}

/* WORKS */

button#sound,
button#sound.clicked {
	display: none;
}

@media screen and (min-width: 600px) {
	button#sound {
		display: block;
		position: fixed;
		inset-block-start: 20vh;
		inset-inline-end: 10vw;
		/* background-color: gold;
		border-radius: 50%; */
		block-size: 12rem;
		inline-size: 12rem;
		text-align: center;
		/* transform: rotate(12deg); */
		z-index: 666;
	}	
}


section.works {
	display: flex;
	flex-direction: column;
}

section.works figure:nth-child(even) {
	align-self: end;
}

section.works figure div.iframe_background,
section.works figure picture {
	block-size: 100%;
	inline-size: 100%;
	overflow: hidden;
}

section.works figure {
	position: relative;
	display: block;
	inline-size: 100vw;
}

section.works figure picture {
	aspect-ratio: 3 / 1.5;
	position: relative;
}

section.works figcaption {
	margin-block-start: 2rem;
	padding-inline-start: var(--grid-padding-h);
}

/* section.works figure:not(:hover, :focus-within) button.btn-player-mute {
	display: none;
} */

section.works button.btn-player-mute {
	display: none;
}

section.works button.btn-player-play-pause {
	display: none;
}

@media screen and (min-width: 600px) {
	section.works {
		row-gap: 20vh;
	}

	section.works figure {
		/* inline-size: 66%; */
		aspect-ratio: 3 / 1.5;
		display: flex;
		justify-content: space-between;
		/* grid-template-columns: repeat(3, minmax(0, 1fr)); */
	}

	section.works figure picture {
		grid-column: 1 / 3;
		flex-basis: 66%;
	}

	section.works figure figcaption {
		flex-basis: 33%;
		margin-block-start: 0;
		padding-inline: 2.5vw;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	section.works figure:nth-child(even) {
		flex-direction: row-reverse;
	}

	/* section.works figure:nth-child(even) figcaption {
		padding-inline-start: 0;
	} */
	section.works p.work-metadata {
		margin-block-end: auto;
	}

	section.works button.btn-player-mute,
	section.works button.btn-player-play-pause {
		position: relative;
		margin-block-start: auto;
		inset: auto;
		inline-size: 6rem;
		block-size: 6rem;
		display: block;
	}

	/* section.works button.btn-player-play-pause {
		display: block;
	} */
	
}


section.works figcaption a::after {
	content: '';
	position: absolute;
	inset: 0;
	inset-block-end: calc(-1 * (2rem + 2.25rem));
}

/* section.works figure:first-of-type {
	margin-block-start: 15vh;
} */

section.works figure:not(:first-of-type) {
	margin-block-start: 10vh;
}

@media screen and (min-width: 600px) {
	section.works figure,
	section.works figure:not(:first-of-type) {
		margin-block-start: 0;
		overflow: hidden;
	}
}

section.works figure:not([data-type="video"]) picture {
	position: relative;
}

section.works figure:not([data-type="video"]) picture::after {
	/* background-image: url("../images/istockphoto-679468742-612x612.jpg");
	background-image: url("../images/golden-wall-background.jpg"); */
	background-image: var(--gold-texture, url('../images/istockphoto-679468742-1024x1024.jpg'));
	background-image: var(--gold-texture-image-set);
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	inset: 0;
	/* inline-size: 100%;
	block-size: 100%; */
	mix-blend-mode: hard-light;
}

/* section.works figure:not([data-type="video"]) picture::after, */
section.works figure:not([data-type="video"]):hover picture::after,
section.works figure:not([data-type="video"]):focus-within picture::after {
	content: '';
}

/* section.works figure:not([data-type="video"]) img, */
section.works figure:not([data-type="video"]):hover img,
section.works figure:not([data-type="video"]):focus-within img {
		filter: grayscale(1) opacity(.6);
		filter: grayscale(1) opacity(0.5) contrast(0.75) brightness(1.5)
}

section.works figure[data-type="video"] iframe {
	/* inline-size: 100vw;
	block-size: 56.25vw; */
	/* min-block-size: 100vh; */
	min-block-size: 100%;
	min-inline-size: 100%;
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	filter: brightness(1.25);
	overflow: hidden;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	pointer-events: none;
	/* display: none; */
	opacity: 0;
}

section.works figure[data-type="video"].loaded iframe {
	/* display: block; */
	opacity: 1;
	transition: opacity .5s;
}
section.works figure[data-type="video"].loaded picture + picture {
	display: none;
}

/* WORKs AUDIO */

figure[data-type="audio"] {
	margin-block-start: 150vh;
	/* margin-inline-start: auto;
	margin-inline-end: 0; */
	position: relative;
	display: block;
	/* inline-size: 66%; */
}

figure[data-type="audio"] audio {
	/* inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	position: absolute;
	inset: 0;
	display: none; */
	visibility: hidden;
}

figure[data-type="audio"] picture {
	position: relative;
}

figure[data-type="audio"] picture::after {
	/* background-image: url("../images/istockphoto-679468742-612x612.jpg");
	background-image: url("../images/golden-wall-background.jpg");
	background-image: url("../images/yellow-wall-texture-with-scratches.jpg"); */
	background-image: var(--gold-texture, url('../images/istockphoto-679468742-1024x1024.jpg'));
	background-image: var(--gold-texture-image-set);
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	inset: 0;
	/* inline-size: 100%;
	block-size: 100%; */
	mix-blend-mode: screen;
	pointer-events: none;
}

figure[data-type="audio"]:hover picture::after {
	content: '';
}

figure[data-type="audio"]:hover img {
	filter: grayscale(1) contrast(1.7);
}

/* SPLIDE */

/* section.splide {
	display: flex;
	flex-direction: column-reverse;
} */

section.splide .splide__pagination {
	order: -1;
}

body.work section.splide + section {
	padding-block-start: 0;
}

/* body.work section.splide div.splide__track {
	block-size: calc(100% + 5rem);
}

body.work .is-next .splide__slide__container {
	block-size: 100%;
} */

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

	body.work section.splide div.splide__track {
		block-size: calc(35vw + 5rem);
	}

	body.work .is-next .splide__slide__container {
		block-size: 35vw;
	}
}

body.work section.splide figure picture {
	aspect-ratio: 3 / 2;
	/* block-size: 100%; */
}

body.work section.splide figure img {
	object-fit: contain;
}

/* body.work section.splide figure[data-fit="cover"] img {
	object-fit: cover;
} */

body.work section.splide .is-next {
	transform: translateX(-10vw);
	inline-size: 60vw !important;
	/* block-size: 40vw; */
}

body.work section.splide .is-next :is(figure, picture) {
	/* aspect-ratio: 3 / 2; */
	block-size: 100%;
	inline-size: 100%;
}

body.work section.splide figure[data-fit="cover"].is-next img {
	object-fit: cover;
	object-position: center;
}

body.work section.splide figcaption {
	padding-inline: var(--grid-padding-h);
}

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

	body.work section.splide .is-active{
		inline-size: 25vw !important;
		transform: translateX(-50%);
	}

	body.work section.splide .is-prev {
		inline-size: 25vw !important;
		transform: translateY(50%);
	}

	body.work section.splide figcaption {
		display: none;
	}

	/* body.work section.splide .is-active figcaption {
		display: none;
	} */

	body.work section.splide .is-next figcaption {
		align-items: center;
		block-size: 3rem;
		display: flex;
		gap: var(--grid-padding-h);
		align-items: flex-start;
		transform: translateY(1rem);
		padding-inline: 0;
		/* padding: 1rem; */
	}
	
	body.work section.splide .is-next figcaption span.caption {
		padding-inline-end: 7.5rem;
	}
}


/* .splide__list {
	counter-reset: slide-num;
}

.splide__list .splide__slide:not(.splide__slide--clone) {
	counter-increment: slide-num;
}
    
.splide__list figcaption:before {
	content: counter( slide-num );
} */

body:not(.work) section.splide .splide__slide figcaption {
	align-items: flex-start;
	block-size: 5rem;
	display: flex;
	gap: var(--grid-padding-h);
	opacity: 0;
	padding-inline-end: 5rem;
	padding-block-start: 1rem;
}

body.publication section.splide .splide__slide figcaption {
	padding-inline: calc(.5 * var(--grid-padding-h));
}

body:not(.work) section.splide .splide__slide.is-visible figcaption {
	opacity: 1;
	transition: opacity 0ms;
	transition-delay: 100ms;
}

.splide__arrows {
	display: flex;
	justify-content: flex-end;	
	transform: translateY(-4.25rem);	
}

body.work .splide__arrows {
	transform: none;
}

@media screen and (min-width: 600px) {
	body.work .splide__arrows {
		transform: translateY(-4.25rem);
	}
}



body.work .splide__arrows {
	padding-inline-end: calc(.5 * var(--grid-padding-h));
}

.splide__arrows button {
	block-size: 1rem;
	inline-size: 1rem;
	min-block-size: var(--target-size, 24px);
	min-inline-size: var(--target-size, 24px);
}

body.publication .splide__arrows {
	padding-inline: calc(.5 * var(--grid-padding-h));
}

details.collab .splide__slide__container {
	block-size: calc(100vw / 1.9);
}

@media screen and (min-width: 600px) {
	details.collab .splide__slide__container {
		block-size: calc(40vw / 1.9);
	}
}

details.collab .splide__slide__container picture {
	block-size: 100%;
}

/***** TYPOGRAPHY *****/

span.no-wrap {
	white-space: nowrap;
}

div.moving-lyrics-wrapper {
	/* inline-size: 100%;
	position: relative;
	inset-inline: 0; */
	transform: translateX(-33vw);
}

p.moving-lyrics {
	font-family: var(--marker-font);
	font-size: 3rem;
	/* inline-size: max-content; */
	white-space: nowrap;
	display: inline-table;
	/* position: absolute;
	inset-inline: 0; */
}

/* Makes the animation pause on hover */
p.moving-lyrics:hover{
	animation-play-state: paused;
}

/* The animation */
@keyframes marquee {
	0%{transform: translateX(0%);}
	100%{transform: translateX(-100%);}
}

/* media query to enable animation for only those who want it */
@media (prefers-reduced-motion: no-preference) {
	p.moving-lyrics {
		animation: marquee 15s linear infinite;
	}
}

/***** PLUGINS *****/

/***** FILE WRAPPER *****/

.file-wrapper {
	display: block;
}

.file-wrapper::before {
	content: url('svg/file-alt.svg');
	block-size: 1.2em;
	inline-size: 1.2em;
	display: inline-block;
	vertical-align: text-bottom;
	margin-inline-end: .25em;
}

/***** COOKIE BANNER  *****/


div.cookie-modal {
	background: none;
	z-index: 666;
}

div.cookie-modal::after {
	content: '';
	position: absolute;
	inset: 0;
	inset-block-start: 0;
	inset-inline-start: 0;
	inset-inline-end: 0;
	inset-block-end: 0;
	background: var(--rainbow);
	opacity: .5;
	z-index: -1;
}

div.cookie-modal:not(.cookie-modal--hidden) + div.cookie-modal__background {
	content: '';
	position: fixed;
	inset: 0;
	inset-block-start: 0;
	inset-inline-start: 0;
	inset-inline-end: 0;
	inset-block-end: 0;
	background: var(--rainbow);
	mix-blend-mode: screen;
}

div.cookie-modal__content {
	--dist: calc(var(--offset) * 3);
	all: unset;
	background: var(--gold-texture-image-set);
	background-repeat: no-repeat;
	background-size: cover;
	padding: var(--grid-padding-v, 2vw) var(--grid-padding-h, 2.5vw);
	pointer-events: all;
	position: fixed;
	inset-block-end: 0;
}

@media screen and (min-width: 600px) {
	div.cookie-modal__content {
		--dist: calc(var(--offset) * 1.5);
		inline-size: 100vw;
	}
}

div.cookie-modal__content::before {
	content: '';
	position: absolute;
	inset: 0;
	inset-block-start: calc(-1 * var(--dist));
	inset-inline-start: 0;
	inset-inline-end: 0;
	inset-block-end: 0;
	block-size: var(--dist);
	mask-image: linear-gradient(0deg, var(--background-color), transparent);
	background: var(--gold-texture-image-set);
	background-repeat: no-repeat;
	background-size: cover;
	/* background-position: inset-block-end; */
	/* mask-image: linear-gradient(0deg, black, transparent); */
}

div.cookie-modal__content > *:not(h2) {
	margin-block-start: 2rem;
}

h2.cookie-modal__title {
	/* all: unset; */
	font-size: var(--h2);
	/* text-transform: uppercase;
	letter-spacing: var(--uppercase-letter-spacing); */
	padding: 0 !important;
}

p.cookie-modal__text {
	all: unset;
	display: block;
	font-size: var(--text-size);
	line-height: 1.2;
	max-inline-size: 50ch;
	margin-block-start: 1.5rem;
}

div.cookie-modal__options {
	all: unset;
	display: flex;
	font-size: var(--text-size);
	flex-direction: column;
	margin-block-start: 1.5rem;
	gap: var(--offset);
}

div.cookie-modal__option {
	all: unset;
	display: inline-flex;
}

div.cookie-modal__buttons {
	gap: var(--grid-gap);
	flex-direction: column;
}

@media screen and (min-width: 600px) {
	div.cookie-modal__buttons {
		flex-direction: row;
	}
}

button.cookie-modal__button {
	all: unset;
	background-color: transparent;
	border: 1px solid var(--text-color);
	padding: .5em .75em .35em;
	color: var(--text-color);
	border-radius: .125em;
	font-size: var(--text-size);
	line-height: 1;
	position: relative;

}

button.cookie-modal__button.primary {
	/* background-color: var(--text-color);
	color: var(--background-color); */
	background-image: var(--gold-texture-image-set);
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

button.cookie-modal__button.primary::after {
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--text-color);
	z-index: -1;
}

button.cookie-modal__button:focus,
button.cookie-modal__button:hover {
	background-image: var(--gold-texture-image-set);
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

button.cookie-modal__button:focus::after,
button.cookie-modal__button:hover::after {
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--text-color);
	z-index: -1;
}

label.cookie-modal__label {
	position: relative;
	padding-inline-start: 1.25em;
	text-indent: -1.25em;
	line-height: 1.2;
}

div.cookie-modal__option input[type=checkbox] {
	inline-size: 1em;
	block-size: 1em;
	opacity: 0;
}

input.cookie-modal__checkbox { 
	all: unset;
	margin-inline-end: 1.5rem;
}

div.cookie-modal__option input[type=checkbox]:checked:focus + svg .checkmark {
	fill: inherit;
}

div.cookie-modal__option input[type=checkbox] + svg {
	inline-size: 1em;
	block-size: 1em;
	position: absolute;
	inset-inline-start: -.1em;
	margin-inline-end: .5em;
	fill: var(--white);
}

div.cookie-modal__option input[type=checkbox] + svg .checkmark {
	display: none;
}

div.cookie-modal__option input[type="checkbox"]:checked + svg .checkmark {
	display: block;
}

@media screen and (min-width: 768px) {

	div.cookie-modal__options {
		flex-direction: row;
	}
}

div.embed.third-party,
div.embed.third-party figure {
	inline-size: 100%;
	block-size: 100%;	
}

div.embed.third-party figure img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

button.cookies-button {
	background-color: transparent;
	border: 1px solid var(--text-color);
	padding: .5em .75em .35em;
	color: var(--text-color);
	border-radius: .125em;
	font-size: var(--text-size);
	line-height: 1;
	position: relative;
	margin-block: 1rem;
}

button.cookies-button:hover,
button.cookies-button:focus {
	background-color: var(--text-color);
	border: 1px solid var(--text-color);
	padding: .5em .75em .35em;
	color: var(--background-color);
	border-radius: .125em;
	font-size: var(--text-size);
	line-height: 1;
	position: relative;
	cursor: default;
}

/***** ANIMATIONS *****/

#wave-1,
#wave-2,
#wave-3 {
	animation: wave-1 2s linear infinite;
	opacity: 0;
}

#wave-2 {
	animation-name: wave-2;

}

#wave-3 {
	animation-name: wave-3;
}

@keyframes wave-1 {
	0% { opacity: 0; }
	25% { opacity: 1; }
	50% { opacity: 1; }
	75% { opacity: 1; }
	100% { opacity: 1; }
} 

@keyframes wave-2 {
	0% { opacity: 0; }
	25% { opacity: 0; }
	50% { opacity: 1; }
	75% { opacity: 1; }
	100% { opacity: 1; }
} 

@keyframes wave-3 {
	0% { opacity: 0; }
	25% { opacity: 0; }
	50% { opacity: 0; }
	75% { opacity: 1; }
	100% { opacity: 1; }
}