@font-face {
	font-family: 'Quicksand';
	src: url('/assets/fonts/variable/Quicksand-VariableFont_wght.ttf') format("truetype-variations");
	font-weight: 1 999;
}

@font-face {
	font-family: 'Picky Action';
	src: url('/assets/fonts/pickyaction-webfont.woff2') format("woff2"),
		url('/assets/fonts/pickyaction-webfont.woff') format('woff');
	font-weight: 400;
	font-style: normal;
}

/* @font-face {
	font-family: "Baloo Bhaijaan 2";
	src: url('/assets/fonts/variable/BalooBhaijaan2-VariableFont_wght.ttf') format("truetype-variations");
	font-weight: 1 999;
	unicode-range: U+0600-06FF;
} */

@font-face {
	font-family: "Baloo Bhaijaan 2";
	src: url('/assets/fonts/BalooBhaijaan2-Medium.ttf') format("truetype");
	font-weight: 590;
	unicode-range: U+0600-06FF;
}

@font-face {
	font-family: "Baloo Bhaijaan 2";
	src: url('/assets/fonts/BalooBhaijaan2-Bold.ttf') format("truetype");
	font-weight: 700;
	unicode-range: U+0600-06FF;
}

/* @property --num {
	syntax: '<integer>';
	initial-value: 0;
	inherits: false;
}

div {
	animation: counter 5s infinite alternate ease-in-out;
	counter-reset: num var(--num);
}

div::after {
	content: counter(num);
}
	
@keyframes counter {
	from {
		--num: 0;
	}
	to {
		--num: 100;
	}
} */

:root {
	font-size: 1.3em;

	--h1-font-size: 1.8rem;
	--h2-font-size: 1.4rem;
	--h3-font-size: 1.2rem;
	--text-font-size: 1rem;

	--reg: 400;
	--bld: 700;

	--grid-padding-h: 2.5vw;
	--grid-padding-v: 2.5vh;
	--header-offset: 3.25rem;
	--header-offset-angle: 4rem;

	--angle-offset: 1rem;
	--min-target-size: 36px;

	--purple: #9290ef;
	--pink: #ea74c2;
	--darker-pink: #ea4bb4;
	--darker-pink: #e73cb4;
	--red: #FF5B78;
	--orange: #ffa35c;
	--yellow: #fbea74;
	--green: #05c276;
	--turquoise: #8fe4be;
	--light-blue: #68c6ea;
	--blue: #009FE0;

	--shape-1: polygon(0% 2%, 83% 0%, 100% 5%, 99.5% 100%, 6% 100%, 0% 96%);
	--shape-2: polygon(1.3% 7%, 75% 0%, 99.5% 2%, 100% 98%, 30% 100%, 1% 99%);
	--shape-3: polygon(0.7% 3%, 5% 0%, 100% 5%, 99.7% 100%, 1% 92%);
	--shape-4: polygon(0.5% 0%, 99.5% 5%, 100% 100%, 1% 96%);
	--shape-5: polygon(0.2% 0%, 99.5% 5%, 100% 96%, 80% 100%, 0% 93%);

	--outline-border-width: .03em;
	/* --outline-color: white; */
	--outline: 	drop-shadow( var(--outline-border-width, 1px) 0 0 var(--outline-color, black)) 
			drop-shadow( calc(var(--outline-border-width, 1px) * -1) 0 0 var(--outline-color, black))
			drop-shadow( 0 var(--outline-border-width, 1px) 0 var(--outline-color, black)) 
			drop-shadow( 0 calc(var(--outline-border-width, 1px) * -1) 0 var(--outline-color, black));
}

@media screen and (min-width: 600px) {
	:root {
		font-size: 1.6em;

		--h1-font-size: 2.1rem;
		--h2-font-size: 1.6rem;
		--h3-font-size: 1.35rem;
		--h4-font-size: 1.12rem;

		--angle-offset: 1.5rem;

		--header-offset: 3rem;
		--header-offset-angle: 4rem;

	}
}

/***** FOCUS OUTLINES *****/

:root {
	--focus-outline-color: currentColor;
	--focus-outline-offset: .1rem;
	--focus-outline-style: solid;
	--focus-outline-width: .1rem;
}

*:focus-visible {
	/* border-radius: calc(.5 * var(--focus-outline-offset)); */
	/* line-height: .8; */
	outline-color: var(--focus-outline-color);
	outline-offset: var(--focus-outline-offset);
	outline-style: var(--focus-outline-style);
	outline-width: var(--focus-outline-width);
	text-decoration: none;
}

/***** COLORS *****/

[data-background-color] svg {
	fill: var(--color, black);
}

[data-background-color="white"],
[data-page-background-color="white"] {
	--background-color: var(--white, #FFFFFF);
	/* --color: black; */
}

[data-background-color="red"],
[data-page-background-color="red"] {
	--background-color: var(--red, #FF5B78);
	/* --color: white; */
}

[data-background-color="blue"],
[data-page-background-color="blue"] {
	--background-color: var(--blue, #009FE0);
	/* --color: white; */
}

[data-background-color="light-blue"],
[data-page-background-color="light-blue"] {
	--background-color: var(--light-blue, #68c6ea);
	/* --color: black; */
}

[data-background-color="yellow"],
[data-page-background-color="yellow"] {
	--background-color: var(--yellow, #fbea74);
	/* --color: black;  */
}

[data-background-color="purple"],
[data-page-background-color="purple"] {
	--background-color: var(--purple, #9290ef);
	/* --color: white; */
}

[data-background-color="green"],
[data-page-background-color="green"] {
	--background-color: var(--green, #05c276);
	/* --color: white;
	--color: black; */
}

[data-background-color="pink"],
[data-page-background-color="pink"] {
	--background-color: var(--pink, #ea74c2);
	/* --color: white; */
}

[data-background-color="orange"],
[data-page-background-color="orange"] {
	--background-color: var(--orange, #ffa35c);
	/* --color: black; */
}

[data-background-color="turquoise"],
[data-page-background-color="turquoise"] {
	--background-color: var(--turquoise, #3ac8b4);
	/* --color: black; */
}

[data-background-color],
[data-page-background-color] {
	background-color: var(--background-color, transparent);
	color: var(--color, black);

	& ::selection {
		background-color: var(--color, black);
		color: var(--background-color);
	}
}

[data-page-background-color] {
	--page-color: var(--color, black);
	--page-background-color: var(--background-color);
}

/* [data-background-color="red"] h2 > button::after,
[data-background-color="blue"] h2 > button::after,
[data-background-color="purple"] h2 > button::after,
[data-background-color="pink"] h2 > button::after {
	--color: black;
	filter: invert();
} */

[data-second-color] {
	background: linear-gradient(var(--angle, -2deg), var(--second-background-color) 55%, transparent 55%);
}

[data-background-color][data-second-color] {
	background: linear-gradient(var(--angle, -2deg), var(--second-background-color) 70%, var(--background-color) 70%);
}

[data-second-color] {
	--second-background-color: transparent;
	--second-color: black;
}

[data-second-color="red"] {
	--second-background-color: var(--red, #FF5B78);
	/* --second-color: white; */
}

[data-second-color="blue"] {
	--second-background-color: var(--blue, #009FE0);
	/* --second-color: white; */
}

[data-second-color="light-blue"] {
	--second-background-color: var(--light-blue, #68c6ea);
	/* --second-color: black; */
}

[data-second-color="yellow"] {
	--second-background-color: var(--yellow, #fbea74);
	/* --second-color: black; */
}

[data-second-color="purple"] {
	--second-background-color: var(--purple, #9290ef);
	/* --second-color: white; */
}

[data-second-color="green"] {
	--second-background-color: var(--green, #05c276);
	/* --second-color: black; */
}

[data-second-color="pink"] {
	--second-background-color: var(--pink, #ea74c2);
	/* --second-color: white; */
}

[data-second-color="orange"] {
	--second-background-color: var(--orange, #ffa35c);
	/* --second-color: black; */
}

[data-second-color="turquoise"] {
	--second-background-color: var(--turquoise, #8fe4be);
	/* --second-color: black; */
}


/***** TYPE AREA *****/

[data-section-type-area="wide"] {
	--padding-inline: var(--grid-padding-h);
}

[data-section-type-area="narrow"] {
	--padding-inline: calc( 2.5 * var(--grid-padding-h));
}

[data-section-type-area="full"] {
	--padding-inline: 0;
	/* --padding-block: 0; */
}

body:not(.home, .gallery) [data-section-type-area="wide"] :is(h1, h2, p) {
	margin-inline: initial;
}

@media screen and (max-width: 819px) {
	[data-section-type-area="full"] > div.column > *:not(div.blocks) {
		padding-inline: calc( 2.5 * var(--grid-padding-h));
	}	
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;	
	font-family: Quicksand, "Baloo Bhaijaan 2";
	hyphens: auto;
}

[data-hyphens="none"],
[data-hyphens="none"] * {
	hyphens: none;
}

[data-hyphens="manual"],
[data-hyphens="manual"] * {
	hyphens: manual;
}

button:not([class]):not([id]) {
	all: unset;
	border: var(--border-width, 1px) var(--border-color, black) solid;
	min-block-size: var(--min-target-size, 22px);
	min-inline-size: var(--min-target-size, 22px);
}

body {
	/* background-color: red; */
	font-weight: 590;
}

@media screen and (min-width: 600px) {
	body {
		min-block-size: calc(100vh - env(safe-area-inset-bottom));
		min-block-size: 100dvh;
		display: grid;
		grid-template-rows: 1fr auto;
	}

	section.grid {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: var(--grid-padding-h);
	}
	
	section.grid div.column {
		grid-column: span var(--columns, 12);
	}
}

body > *:not(main) {
	padding: calc( .5 * var(--grid-padding-v) ) calc( 1.5 * var(--grid-padding-h) );
}

@media screen and (min-width: 600px) {
	body > *:not(main) {
		padding: var(--grid-padding-v) var(--grid-padding-h);
	}
}

body > header {
	display: flex;
	gap: calc(2 * var(--grid-padding-h));
	justify-content: space-between;
	position: fixed;
	font-weight: 700;
	line-height: 1.05;
	inline-size: 100vw;
	z-index: 666;
	pointer-events: none;
}

body > header.expanded {
	color: black;
}

body > header::after {
	content: '';
	position: absolute;
	inset: 0;
	background-color: white;
	z-index: -1;
	clip-path: polygon(0% 0%, 100% 0%, 100% var(--header-offset-angle), 0% var(--header-offset));
}

body.home > main {
	margin-block-start: var(--header-offset);
}

body:not(.home) > main {
	padding-block-start: 4.5rem;
}

@media screen and (min-width: 600px) {
	body:not(.home) > main {
		padding-block-start: 5.5rem;
	}
}

body > main > * {
	max-inline-size: 100vw;
}

body > main > :is(section, details):not(.splide, .video, .image):not([data-section-type-area="full"]:has(div:where(#map, .consent-gate-container))) {
	padding: var(--padding-block, var(--grid-padding-v)) var(--padding-inline, calc( 2.5 * var(--grid-padding-h) ));
	padding-block-end: var(--padding-block, 3rem);
}

body > main > :where(section, details):not([class]) {
	padding-block-end: var(--padding-block, 2.5rem);
}

/* TODO: for other colors and check */
section[data-background-color="yellow"]:has( + section[data-background-color="yellow"]) {
	padding-block-end: 0;
}

body.home > main > section.splide:first-child + section {
	padding-block-start: .5rem;
}

body.home section:has(h1) {
	padding-block-end: 2rem !important;
}

body.home section:has(h1) + section {
	padding-block-start: 0 !important;
}

body:not(.profile) > main > :is(section, details):not(.video):last-child {
	padding-block-end: calc( var(--angle-offset) * 2 );
}

a.org {
	display: block;
	inline-size: max-content;
}

#home {
	color: inherit;
	text-decoration: none;
	display: flex;
	gap: calc( .5 * max(var(--grid-padding-h), 1em) );
	container: school / inline-size;
	inline-size: 100%;
}

#home > * {
	pointer-events: all;
}

#home svg {
	block-size: 3.75rem;
	inline-size: 3.75rem;
	flex-shrink: 0;
}

#home svg:hover {
	cursor: pointer;
}

#home svg path.contour {
	stroke: white;
	stroke-width: .65em;
}

#home .font-mark {
	display: inline;
	hyphens: manual;
	margin-block-start: .75rem;
	padding-inline-end: var(--grid-padding-h);
	text-decoration: none;
	align-self: flex-start;
	position: relative;
	/* inline-size: min-content;
  	hyphens: manual; */
}

#home .font-mark span {
	display: none;
	position: relative;
	z-index: 1;
	hyphens: none;
	/* visibility: hidden; */
}

#home .font-mark:focus-visible {
	outline: none;
}

#home .font-mark:focus-visible::after {
	content: '';
	position: absolute;
	background-color: var(--background-color, var(--pink));
	/* background-color: var(--pink); */

	inset: -.25em;
	inset-inline-end: calc(-.25em + var(--grid-padding-h));
	/* inset-block-start: 98.5%; */
	z-index: 0;
	clip-path: polygon(1% 3%, 83% 0%, 100% 3%, 99% 100%, 6% 100%, 0% 83%);
}

@media screen and (max-width: 339px) {
	#home .font-mark .acronym {
		display: block;
	}
}

@media screen and (min-width: 340px) and (max-width: 599px) {
/* @media (400px <= width <= 600px) { */
	#home .font-mark .full {
		display: block;
	}
}

/* @container school (width < 10ch) { */
@media screen and (min-width: 600px) {
	#home .font-mark span {
		white-space: nowrap;
	}
	
	@container school (width < 23.75ch) {
		#home .font-mark .acronym {
			display: block;
		}
	}

	@container school (width > 23.75ch) {
		#home .font-mark .full {
			display: block;
		}
	}
}


/* @container school (10ch < width < 14ch) {
	#home .font-mark .short {
		display: block;
	}
}

@container school (14ch < width < 22.5ch) {
	#home .font-mark .long {
		display: block;
	}
} */



body > header nav * {
	pointer-events: all;
}


body > header nav ul {
	list-style: none;
	padding-block-start: .75rem;
}

/* @media screen and (max-width: 599px) { */
@media screen and (max-width: 819px) {
	#home svg {
		block-size: 3.25rem;
		inline-size: 3.25rem;
	}

	#home .font-mark {
		margin-block-start: .5rem;
	}

	button#btn-nav-main {
		all: unset;
		block-size: var(--min-target-size);
		inline-size: var(--min-target-size);
		margin-block-start: .5rem;
		pointer-events: all;
	}

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

	button#btn-nav-main[aria-expanded="true"] + ul.nav-list {
		position: absolute;
		inset: 0;
		justify-content: center;
		align-items: center;
		block-size: 100dvh;
		inline-size: 100vw;
		background-color: var(--background-color, var(--yellow));
		z-index: -1;
		display: flex;
		flex-direction: column;
		gap: 1rem;
		font-size: var(--h3-font-size);
	}

	button#btn-nav-main[aria-expanded="false"] svg {
		fill: var(--page-color, black);
	}
}

/* @media screen and (min-width: 600px) { */
@media screen and (min-width: 820px) {
	button#btn-nav-main {
		display: none;
	}

	body > header nav ul.nav-list {
		display: flex;
		flex-direction: row;
		gap: var(--grid-padding-h, 1em);
		justify-content: flex-end;
	}
}

body > header li.nav-item a:not([aria-current]) {
	background-color: transparent;
}

body:not(.gallery, .event, .coop) > header li.nav-item a:not([aria-current]) {
	color: black;
}

body > header li.nav-item {
	position: relative;
}

body > header li.nav-item a:not([aria-current]):is(:hover, :focus) {
	/* color: red; */
	/* font-weight: 700; */
	--link-color: var(--background-color);
	color: var(--link-color);
	color: var(--color);
	outline: none;
}


body > header li.nav-item a:not([aria-current]):is(:hover, :focus-visible)::after {
	content: '';
	position: absolute;
	inset: -.125em -.25em;
	clip-path: var(--clip-path);
	display: inline-block;
	/* background-color: white; */
	background-color: var(--background-color);
	z-index: -1;
	z-index: 0;
}

body > header li.nav-item:nth-of-type(1) a:is(:hover, :focus-visible)::after {
	--clip-path: var(--shape-1);
}

body > header li.nav-item:nth-of-type(2) a:is(:hover, :focus-visible)::after {
	--clip-path: var(--shape-2);
}

body > header li.nav-item:nth-of-type(3) a:is(:hover, :focus-visible)::after {
	--clip-path: var(--shape-3);
}

body > header li.nav-item:nth-of-type(4) a:is(:hover, :focus-visible)::after {
	--clip-path: var(--shape-4);
}

body > header li.nav-item:nth-of-type(5) a:is(:hover, :focus-visible)::after {
	--clip-path: var(--shape-5);
}

body > header li.nav-item a span {
	display: none;
	white-space: nowrap;
	hyphens: none;
	/* font-weight: 700; */
	position: relative;
	z-index: 1;
}

body > header li.nav-item a:is(:hover, :focus, [aria-current]) span.nav-long,
body > header li.nav-item a:not(:hover, :focus, [aria-current]) span.nav-short {
	display: inline-block;
}

body > header li.nav-item a[aria-current] {
	position: relative;
	display: inline-block;
	z-index: 2;
}

/* body.gallery > header li.nav-item a[aria-current] {
	color: inherit;
} */

body > header li.nav-item a[data-background-color] {
	background-color: transparent;
	color: black;
}

body:is(.gallery, .event, .coop) > header li.nav-item a[data-background-color] {
	color: var(--color, black);
}


body > header li.nav-item a[aria-current]::after {
	content: '';
	position: absolute;
	background-color: var(--background-color);
	inset: -.25em;
	inset-block-start: 98.5%;
	z-index: -1;
	clip-path: polygon(1% 3%, 83% 0%, 100% 3%, 99% 100%, 6% 100%, 0% 83%);
}

body > header li.nav-item a[aria-current]:focus-visible {
	outline: none;
}

body > header li.nav-item a[aria-current]:focus-visible::after {
	inset: -.26em -.45em;
}

body > header li.nav-item a[aria-current]:focus-visible::before {
	content: '';
	position: absolute;
	background-color: white;
	inset: -.01em -.2em;
	z-index: 0;
	clip-path: polygon(1% 3%, 83% 0%, 100% 3%, 99% 100%, 6% 100%, 0% 83%);
}

/* body > header li.nav-item a[aria-current="true"] {
	color: var(--background-color);
	color: white;
} */

/***** FOOTER *****/

body > footer {
	display: flex;
	flex-direction: column;
	gap: calc(1.5 * var(--grid-padding-v));
	background-color: white;
	color: black;
	position: relative;

	& ::selection {
		background-color: var(--page-background-color) !important;
		color: var(--color) !important;
	}
}

/* @media screen and (min-width: 600px) { */
@media screen and (min-width: 820px) {
	body > footer {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: auto;
		grid-column-gap: var(--grid-padding-h);
		grid-template-areas: 
			"column-1 column-2"
			"column-1 column-2";
	}
}

body > footer::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: inherit;
	/* z-index: -1; */
	block-size: var(--angle-offset);
	inset-block-start: calc(-1 * var(--angle-offset) + 1px);
	clip-path: polygon(0% 100%, 100% 0%, 100% 100%, 0% 100%);
}

body > footer * {
	hyphens: none;
}

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

address {
	font-style: normal;
}

address div + div {
	margin-block-start: .5rem;
}

.contact-team,
div.legal {
	font-size: .72rem;
}

div.legal {
	display: flex;
	gap: 1rem;
}
	
.contact + .contact {
	margin-block-start: .75rem;
}

.contact dt {
	font-weight: 700;
}

.contact :is(dt, dd) {
	display: inline;
}

/* @media screen and (min-width: 600px) { */
@media screen and (min-width: 820px) {
	body > footer address.vcard {
		grid-area: column-1;
		align-self: flex-start;
	}

	body > footer div.legal {
		grid-area: column-1;
		align-self: flex-end;
	}

	body > footer .contact-team {
		grid-area: column-2;
		align-self: flex-start;
	}
}

address.vcard a.adr {
	display: inline-block;
}

/***** MAIN *****/

a {
	color: inherit;
}

footer a:is(:hover, :focus-visible) {
	/* text-decoration: underline; */
	background-color: var(--yellow);
}

nav a {
	color: inherit;
	text-decoration: none;
}

/* nav a:is(:hover, :focus) {
	color: 
} */

h1, h2, h3, h4, h5, h6 {
	text-wrap: balance;
}

h1 {
	font-size: var(--h1-font-size, 2.2rem);
	line-height: 1;
	font-weight: 700;
}

h2 {
	font-size: var(--h2-font-size, 1.8rem);
	line-height: 1.1;
	font-weight: 700;
}

h3 {
	font-size: var(--h3-font-size);
	line-height: 1.05;
	font-weight: 700;
}

h4 {
	font-size: var(--h4-font-size);
	line-height: 1.2;
	font-weight: 700;
}

h5 {
	font-size: var(--text-font-size);
	font-weight: 700;
}

b, strong {
	font-weight: 700;
}

h1, h2, h3, h4, h5, h6, p, blockquote, figcaption {
	-webkit-hyphenate-limit-after: 2;
	-webkit-hyphenate-limit-before: 3;
	-webkit-hyphenate-limit-chars: 7 3 2;
	-webkit-hyphenate-limit-lines: 3;
	-webkit-hyphenate-limit-last: always;   

	hyphenate-limit-chars: 7 3 2;
	hyphenate-limit-last: always;   
	hyphenate-limit-lines: 3;
}

:where(h1, h2, h3, p, ul, blockquote, figure) + :where(h2, h3, h4, p, ul, blockquote, .blocks),
h1 + section.grid,
article.accordion h2 + div,
:where([lang][dir], p) + :where([lang][dir], p) {
	margin-block-start: 1rem;
}

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

.contain {
	object-fit: contain;
}

/***** ARABIC *****/

[lang="ar"] {
	--current-font-size: var(--text-font-size);
	font-size: calc(var(--current-font-size) * 1.06);
	line-height: 1.5;
}

h1[lang="ar"] {
	--current-font-size: var(--h1-font-size);
}

h2[lang="ar"] {
	--current-font-size: var(--h2-font-size);
}

h3[lang="ar"] {
	--current-font-size: var(--h3-font-size);
}

h4[lang="ar"] {
	--current-font-size: var(--h4-font-size);
}


/***** ANGLE *****/

[data-section-angle] {
	position: relative;
}

[data-section-angle]:not(.video, .accordion)::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: inherit;
	/* z-index: -1; */
	block-size: var(--angle-offset);
	inset-block-start: calc(-1 * var(--angle-offset) + 1px);
}

[data-section-angle="up"]:not(.accordion)::before {
	clip-path: polygon(0% 100%, 100% 0%, 100% 100%, 0% 100%);
}

[data-section-angle="down"]:not(.accordion)::before {
	clip-path: polygon(0% 0%, 100% 100%, 0% 100%, 0% 0%);
}

/***** GRID COLUMNS *****/

@media screen and (min-width: 820px) {
	body:not(.events, .event, .gallery) > main > section:not([class]) {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: var(--grid-padding-v) var(--grid-padding-h);
	}	
}

[data-column-span="3"] {
	grid-column: span 3;
}

[data-column-span="4"] {
	grid-column: span 4;
}

[data-column-span="6"] {
	grid-column: span 6;
}

[data-column-span="8"] {
	grid-column: span 8;
}

[data-column-span="9"] {
	grid-column: span 9;
}

[data-column-span="12"] {
	grid-column: span 12;
}

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

body.home section.splide:first-child {
	inline-size: 100vw;
}

/* @media screen and (min-width: 600px) {
	body.home section.splide:first-child {
		inline-size: 100vw;
	}
} */

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


:is(body.home, section.galleries-other, section.spaces) div.splide__arrows {
	position: absolute;
	inset-inline: 0;
	z-index: 665;
	inset-block-end: 50%;
	display: flex;
	justify-content: space-between;
	padding-inline: calc(.75 * var(--grid-padding-h));
	pointer-events: none;
}

body.home section.galleries-other div.splide__arrows {
	inset-block-end: calc(50% - var(--h3-font-size));
}

body.home ul.splide__pagination {
	position: absolute;
	inset-block-end: var(--grid-padding-h);
	inset-inline-end: var(--grid-padding-h);
	display: flex;
	gap: calc(.5 * var(--grid-padding-h));
}

button.splide__pagination__page {
	all: unset;
	min-inline-size: var(--min-target-size);
	min-block-size: var(--min-target-size);
	border-radius: 50%;
	background-color: var(--pagina-color, var(--circle-color, var(--yellow)));
}

button.splide__pagination__page:is(:hover, :focus, .is-active) {
	background-color: var(--active-color, var(--light-blue));
}

button.splide__pagination__page.is-active {
	background-color: var(--current-color, var(--arrow-color, var(--green)));
}

body.home section.splide:first-child button.splide__arrow svg polygon {
	fill: var(--arrow-color, var(--green));
}



body.home section.splide:first-child button.splide__arrow {
	background-color: var(--circle-color, var(--yellow));
}

/* body.home section.splide:first-child button.splide__arrow::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	background-color: var(--yellow);
	z-index: -1;
	inline-size: 2rem;
	block-size: 2rem;
	transform: translate(-1.5rem, -.5rem);
	transform-origin: center;
} */

body.home section.splide:first-child button.splide__arrow:is(:hover, :focus-visible) svg polygon {
	fill: var(--circle-color, var(--yellow));
}

body.home section.splide:first-child button.splide__arrow:is(:hover, :focus-visible) {
	background-color: var(--arrow-color, var(--green));
}

/***** STATISTICS *****/

ul.statistics {
	/* position: relative; */
	block-size: 105vw;
	list-style: none;
	font-size: max(.8rem, 2vw);
}

ul.statistics li {
	position: absolute;
	text-align: center;
	line-height: 1.2;
}

ul.statistics span.number {
	font-family: Picky Action;
	font-size: max(2.4rem, 10vw);
	font-weight: 400;
	color: var(--pink);
	display: block;
	letter-spacing: -.05em;
	line-height: 0.8;
	text-align: center;
  	white-space: nowrap;
	position: relative;
	margin-inline: auto;
}


ul.statistics span.number[data-num-digits="1"] {
	inline-size: 1.1ch;
}

ul.statistics span.number[data-num-digits="2"] {
	inline-size: 2.05ch;
}

ul.statistics span.number[data-num-digits="3"] {
	inline-size: 3.1ch;
}

ul.statistics span.number[data-num-digits="4"] {
	inline-size: 4.1ch;
}

ul.statistics span.number[data-num-digits="5"] {
	inline-size: 5.1ch;
}

ul.statistics li#teachers {
	inset-block-start: 15vw;
  	inset-inline-start: 7.5vw;
}

ul.statistics li#students {
	inset-block-start: 7vw;
  	inset-inline-start: 40.5vw;
}

ul.statistics li#educators {
	inset-block-start: 93.5vw;
	inset-inline-start: 4vw;
}

ul.statistics li#educators p {
	margin-block-start: .25em;
}

ul.statistics div#educators-integration {
	/* inset-block-start: 42vw; */
	translate: 0.75rem;
  	margin-block-start: 0.25rem;
}

ul.statistics div#educators-integration span {
	display: inline-block;
}

ul.statistics div#educators-integration span:not(.number) {
	text-align: left;
	/* vertical-align: super; */
	margin-inline-start: 0.3em;
}

ul.statistics li#social-workers {
	inset-block-start: 93vw;
	inset-inline-start: 66vw;
}

ul.statistics li#classes {
	inset-block-start: 12vw;
  	inset-inline-start: 71vw;
}

ul.statistics li#languages {
	inset-block-start: 107vw;
	inset-inline-start: 37vw;
}

picture:is(.heroes, .globe, .bee, .frog, .snail) {
	display: block;
	position: absolute;
}

picture.heroes {
	inline-size: 100%;
	inset-block-start: 47.5%;
	inset-inline-start: 50%;
	translate: -50% -50%;
}

picture.globe {
	inline-size: 9.5vw;
	inset-block-start: 94vw;
	inset-inline-start: 46.5vw;
}

picture.snail {
	inline-size: 12vw;
	inset-block-start: 115vw;
	inset-inline-start: 71vw;
}

picture.bee {
	inline-size: 9vw;
	  inset-block-start: 8vw;
	  inset-inline-start: 28vw;
}

picture.frog {
	inline-size: 13.5vw;
	  inset-block-start: 80vw;
	  inset-inline-start: 78vw;
}


@media screen and (max-width: 499px) {
	ul.statistics li#teachers {
		inset-block-start: 38vw;
		inset-inline-start: 4.5vw;
	}
	
	ul.statistics li#students {
		inset-block-start: 18vw;
		inset-inline-start: 30.5vw;
	}
	
	ul.statistics li#educators {
		inset-block-start: 123.5vw;
		inset-inline-start: 0;
	}
	
	ul.statistics div#educators-integration {
		/* inset-block-start: 42vw; */
		translate: 0.75rem;
		  margin-block-start: 0.25rem;
	}
	
	ul.statistics li#social-workers {
		inset-block-start: 159vw;
		inset-inline-start: 44vw;
	}
	
	ul.statistics li#classes {
		inset-block-start: 27vw;
		inset-inline-start: 60vw;
	}
	
	ul.statistics li#languages {
		inset-block-start: 144vw;
		inset-inline-start: 47vw;
	}
	
	picture.heroes {
		inset-block-start: 50%;
	}
	
	picture.globe {
		inset-block-start: 129vw;
		inset-inline-start: 65.5vw;
	}
	
	picture.snail {
		inset-block-start: 177vw;
		inset-inline-start: 22vw;
	}
	
	picture.bee {
		inset-block-start: 38vw;
		inset-inline-start: 38vw;
	}
	
	picture.frog {
		inset-block-start: 118vw;
		inset-inline-start: 78vw;
	}

	ul.statistics {
		block-size: 150vw;
		/* font-size: 2vw; */
	}
}



@media screen and (min-width: 800px) {
	ul.statistics li#teachers {
		inset-block-start: 12vw;
		inset-inline-start: 23.5vw;
	}

	ul.statistics li#students {
		inset-block-start: 7vw;
		inset-inline-start: 49.5vw;
	}

	ul.statistics li#educators {
		inset-block-start: 28.5vw;
		inset-inline-start: 4vw;
	}

	ul.statistics li#educators p {
		margin-block-start: 1em;
	}

	ul.statistics div#educators-integration {
		/* inset-block-start: 42vw; */
		translate: 1vw;
		margin-block-start: reset;
	}

	ul.statistics div#educators-integration span {
		display: inline-block;
	}

	ul.statistics div#educators-integration span:not(.number) {
		vertical-align: super;
	}

	ul.statistics li#social-workers {
		inset-block-start: 55vw;
		inset-inline-start: 34vw;
	}

	ul.statistics li#classes {
		inset-block-start: 17vw;
		inset-inline-start: 77vw;
	}

	ul.statistics li#languages {
		inset-block-start: 49vw;
		inset-inline-start: 72vw;
	}

	picture.heroes {
		inline-size: 55%;
		inset-block-start: 50%;
	}
	
	picture.globe {
		inline-size: 6.5vw;
		inset-block-start: 39vw;
		inset-inline-start: 76.5vw;
	}

	picture.snail {
		inline-size: 9vw;
		inset-block-start: 55vw;
		inset-inline-start: 24vw;
	}

	picture.bee {
		inline-size: 7vw;
		inset-block-start: 7vw;
		inset-inline-start: 35vw;
	}

	picture.frog {
		inline-size: 10.5vw;
		inset-block-start: 57vw;
		inset-inline-start: 61vw;
	}

	ul.statistics {
		block-size: 65vw;
		/* font-size: 2vw; */
	}
}



/* details {
	inline-size: 100%;
	display: grid;
	grid-template-columns: 1fr;
	justify-items: center;
} */
body > main > details.accordion {
	padding-block-end: calc(2 * var(--grid-padding-v));
}

details.accordion > * {
	max-inline-size: min(35rem, 100%);
	margin-inline: auto;
}

details.accordion > div.has-grid {
	max-inline-size: min(55rem, 100%);
}

details.accordion > div.has-grid figure {
	inline-size: 58%;
	margin-inline: auto;
}

details.accordion {
	z-index: 1;
}

details.accordion::after {
	/* content: ''; */
	position: absolute;
	/* width: 100vw;
	height: 6vw; */
	background: linear-gradient(transparent 20%, black);
	inset: calc(-.9 * var(--angle-offset));
	block-size: var(--angle-offset);
	/* transform: rotate(2deg); */
	z-index: -1;
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 0%);
}

details.accordion[data-section-angle="up"]::after {
	transform: rotate(-2deg);
}

details > summary:is(::marker, ::-webkit-details-marker) {
	display:none;
}

details:not(.details-block) > summary {
	list-style: none;
}

details > summary + div {
	margin-block-start: 1rem;
}

details > summary:hover {
	cursor: pointer;
}

body:not(.home, .gallery, .events, .event) :is(h1, h2, h3, h4, p) {
	max-inline-size: min(35rem, 100%);
	margin-inline: auto;
}

body.gallery p {
	max-inline-size: min(35rem, 100%);
	margin-inline: auto;
}

body.gallery section:not(.galleries-other) h2 {
	max-inline-size: min(35rem, 100%);
	margin-inline: auto;
}

html, body {
	inline-size: 100vw;
	overflow-x: hidden;
}

article.accordion > * {
	max-inline-size: min(35rem, 100%);
	margin-inline: auto;
}

/* article.accordion[data-section-angle]::before {
	content: none;
}

c	transform: rotate(1.5deg);
}

article.accordion[data-section-angle="down"] {
	transform: rotate(-1.5deg);
}

article.accordion[data-section-angle="up"] > * {
	transform: rotate(-1.5deg);
}

article.accordion[data-section-angle="down"] > * {
	transform: rotate(1.5deg);
} */

section:has(article.accordion) {
	overflow: hidden;
	margin-block-start: calc(-2.2 * var(--angle-offset));
	padding-block-start: 0 !important;
}

article.accordion {
	/* padding-block: calc(3 * var(--grid-padding-v)); */
	padding-block-end: calc(5 * var(--grid-padding-v));
	padding-inline: calc(2.5 * var(--grid-padding-h));
	margin-block: var(--grid-padding-v);
	/* margin-block-start: -5vw;
	inline-size: 120vw;
	max-inline-size: 120vw;
	margin-inline: -10vw; */
	position: relative;
	/* box-shadow: 0 0 5vw rgba(0,0,0,.75); */
	grid-column: span 12;
}

article.accordion:first-of-type {
	clip-path: polygon(0% var(--angle-offset), 100% 0%, 100% 100%, 0% 100%);
	padding-block-start: calc(2 * var(--angle-offset));
	margin-block-end: calc(-1 * var(--angle-offset));
}

article.accordion:first-of-type[data-section-angle="up"] {
	clip-path: polygon(0% 0%, 100% var(--angle-offset), 100% 100%, 0% 100%);
}

article.accordion:first-of-type:has(h2 > button[aria-expanded="false"]) {
	block-size: calc(10rem + 3 * var(--angle-offset));
	margin-block-end: calc(-1 * var(--angle-offset));
}

article.accordion:not(:first-of-type)[data-section-angle]::before {
	content: '';
	position: absolute;
	inset: -2em;
	inset-block-end: -5em;
	background-color: var(--background-color, white);
	box-shadow: 0 0 5vw rgba(0,0,0,.75);
	box-shadow: 0 0 .5rem rgba(0,0,0,.5);
	z-index: 0;
}

article.accordion:not(:first-of-type)[data-section-angle="up"]::before {
	transform: rotate(1.5deg);
}


article.accordion:not(:first-of-type)[data-section-angle="down"]::before {
	transform: rotate(-1.5deg);
}

article.accordion:not([data-background-color]) {
	background-color: white;
}

article.accordion > * {
	position: relative;
	/* z-index: 1; */
}

article.accordion div.has-grid {
	/* margin-inline: 15vw; */
	max-inline-size: min(40rem, 100%);
}

@media screen and (max-width: 819px) {
	article.accordion div.has-grid svg {
		display: none;
	}	
}
/* article.accordion div.has-grid figure, */
article.accordion div.has-grid svg {
	/* display: block; */
	grid-column: span 12;
	max-inline-size: 60%;
	margin-inline: auto;
	/* margin-block: var(--grid-padding-v); */
}
/* article.accordion div > svg {
	grid-column: 2 / -2;
	max-inline-size: 80%;
	margin-inline: auto;
} */

article.accordion:has(h2 > button[aria-expanded="false"]) {
	block-size: 10rem;
}

article.accordion:has(div.has-grid):has(h2 > button[aria-expanded="false"]) {
	block-size: 13.5rem;
}

article.accordion .plyr {
	block-size: auto;
}

h2 > button:not([class]):not([id]) {
	border: none;
	inline-size: calc(100% - 1.5em);
}

article.accordion h2 > button:not([class]):not([id]) {
	padding-inline-end: 1.5em;
}

article.accordion h2 > button::after {
	content: url('../svg/accordion-plus.svg');
	content: url('../svg/accordion-caret-down.svg');
	position: absolute;
	inset: 0;
	inset-inline-start: auto;
	inset-block-end: auto;
	inline-size: 1em;
	block-size: 1em;
}

article.accordion h2 > button[aria-expanded="true"]::after {
	content: url('../svg/accordion-minus.svg');
	content: url('../svg/accordion-caret-up.svg');
}

article.accordion h2 {
	text-wrap: balance;
}

article.accordion h2:hover {
	cursor: pointer;
}

article.accordion h2 > button:focus-visible::after {
	outline-color: var(--color, currentColor);
	outline-style: dashed;
	outline-offset: .125rem;
	outline-width: .125rem;
	border-radius: 50%;
}

/* @media screen and (min-width: 600px) { */
@media screen and (min-width: 820px) {
	article.accordion h2 + div {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
	  /* gap: inherit; */
		gap: var(--grid-padding-v) var(--grid-padding-h);
	}	
}


article.accordion ul {
	list-style-position: inside;
	margin-inline-start: 0;
	padding-inline-start: 1em;
	text-indent: -1em;
}

article.accordion ul li {
	margin-block-start: .5rem;
}

article.accordion ul li > p {
	display: inline;
}

figure, picture, img {
	inline-size: 100%;
}

/***** GALLERIES *****/

body:is(.spaces, .galleries, .coops) {
	background-color: white;
	--color: black;

	& ::selection {
		background-color: var(--page-background-color);
		color: var(--color);
	}
}

section.galleries {
	--angle: 25vw;
	background: linear-gradient(182.5deg, white var(--angle), var(--background-color, var(--yellow)) var(--angle));
	color: var(--color, black);
}


article.gallery {
	aspect-ratio: 1/1;
	/* padding: var(--grid-padding-v); */
	position: relative;
	/* clip-path: var(--clip-path); */
	/* overflow: hidden; */
	font-size: .8em;
	line-height: 1.1;
}

article.gallery:is(:hover, :focus-within) {
	--shift: calc( .25 * var(--grid-padding-h) );
	--outline-color: white;
	filter: drop-shadow(var(--shift) var(--shift) 0 var(--outline-color, black));
}

article.gallery[data-background-color] {
	background-color: transparent;
}

article.gallery div {
	block-size: 100%;
	inline-size: 100%;
	clip-path: var(--clip-path);
	padding: var(--grid-padding-v);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow-y: scroll;
}

article.gallery[data-background-color] div {
	background-color: var(--background-color, transparent);
}

article.gallery:not(:first-of-type) {
	margin-block-start: var(--grid-padding-v);
}

body:not(.coops) article.gallery picture {
	position: absolute;
	inset: 0;
	object-fit: cover;
}

article.gallery a:is(:focus-visible) {
	outline: none;
}

article.gallery a::after {
	content: '';
	position: absolute;
	inset: 0;
}

article.gallery h3 {
	margin-block-end: auto;
}

article.gallery p {
	max-inline-size: 100%;
	margin-inline: 0;
}

@media screen and (min-width: 600px) {
/* @media screen and (min-width: 820px) { */
	section.galleries {
		display: grid;
		gap: var(--grid-padding-h);
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	article.gallery:not(:first-of-type) {
		margin-block-start: 0;
	}
}

@media screen and (599px < width < 820px) {
	body.galleries article.gallery:nth-child(2n) {
		transform: translateY(-10%);
	}
}

/* @media screen and (min-width: 600px) { */
@media screen and (min-width: 820px) {
	section.galleries {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* article.gallery:not(:first-of-type) {
		margin-block-start: 0;
	} */

	body.galleries article.gallery:nth-child(3n+2) {
		transform: translateY(-10%);
	}
}

@media screen and (min-width: 1200px) {
	section.galleries {
		--angle: 12.5vw;
		/* background: linear-gradient(182.5deg, white 12.5vw, var(--background-color, var(--yellow)) 12.5vw); */
		display: grid;
		gap: var(--grid-padding-h);
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	body.galleries article.gallery:nth-child(3n+2) {
		transform: translateY(0%);
	}

	body.galleries article.gallery:nth-child(3n+2):nth-child(odd),
	article.gallery:nth-child(odd) {
		transform: translateY(10%);
	}
}

body:not(.coops) article.gallery div > *:not(picture),
body:not(.coops) article.gallery:is(:hover, :focus-within) div > picture {
	/* display: none; */
	/* visibility: hidden; */
	opacity: 0;
	z-index: 1;
}

body:not(.coops) article.gallery:is(:hover, :focus-within) div > *:not(picture) {
	/* display: block; */
	/* visibility: visible; */
	opacity: 1;
	z-index: 1;
}

body:not(.coops) article.gallery:is(:hover, :focus-within) div > h3:has(a) {
	z-index: 2;
}


/***** GALLERY *****/

body:not(.gallery, .event, .coop) > header {
	color: black;
}

body:is(.gallery, .event, .coop) > header:not(.expanded)::after {
	/* background-color: var(--background-color); */
	background-color: transparent;
}

body:is(.gallery, .event, .coop)[data-page-background-color] #home svg path.contour {
	stroke: var(--page-color, white);
	stroke: white;
}

body:is(.gallery, .event, .coop) #home .font-mark:focus-visible {
	color: var(--background-color);
}

body:is(.gallery, .event, .coop) #home .font-mark:focus-visible::after {
	background-color: var(--page-color);
}

/* body.gallery > header li.nav-item a[aria-current] {
	color: var(--background-color);
} */

body:is(.gallery, .event, .coop) > header li.nav-item a[data-background-color]:not([aria-current]) {
	color: var(--link-color);
}

body:is(.gallery, .event, .coop) > header li.nav-item a {
	position: relative;
}

body:is(.gallery, .event, .coop) > header li.nav-item a:not([aria-current]):is(:hover, :focus-visible)::after {
	content: '';
	position: absolute;
	inset: -5% -2% -5% -5%;
	inset: -.125em -.25em;
	display: inline-block;
	background-color: var(--page-color);
	/* background-color: var(--background-color); */
	z-index: -1;
}

body:is(.gallery, .event, .coop) > header li.nav-item a:not([aria-current]):is(:hover, :focus-visible) {
	--link-color: var(--color);
}

body:is(.gallery, .event, .coop) > header li.nav-item a[aria-current="true"] {
	color: var(--page-color);
}

body:is(.gallery, .event, .coop) > header li.nav-item a[aria-current="true"]::after {
	background-color: var(--page-color);
}

body:is(.gallery, .event, .coop) > header li.nav-item a[aria-current="true"]:focus-visible::after {
	background-color: var(--page-color);
}

/* body > header li.nav-item a[aria-current]:focus-visible::before */

body:is(.gallery, .event, .coop) > header li.nav-item a[aria-current="true"]:is(:hover, :focus-visible)::before {
	background-color: var(--page-background-color, var(--background-color));
}

body:is(.gallery, .event, .coop) > header li.nav-item a[data-background-color]:not([aria-current="true"]):is(:hover, :focus-visible) {
	color: var(--page-background-color);
}

@media screen and (max-width: 599px) {
	body.gallery > main > section:has(section.splide):has([data-column-span="4"]):has([data-column-span="8"]) {
		display: flex;
		flex-direction: column-reverse;
		gap: calc(2 * var(--grid-padding-h));
		padding-inline: 0;
		padding-block-start: 0;
	}
	
	body.gallery > main > section:not(.splide):has( section.splide ) [data-column-span="4"] {
		padding-inline: calc( 2.5 * var(--grid-padding-h) );
	}
}

body.gallery > main > section .column[data-column-span="4"] {
	display: flex;
	flex-direction: column;
	/* justify-content: flex-end; */
	/* padding-block-end: 1.25rem; */
	/* padding-inline: calc( 2.5 * var(--grid-padding-h) ); */
}	


.gallery-block div.splide__arrows,
body.gallery > main > section:not(.galleries-other) div.splide__arrows {
	position: absolute;
	inset-block-end: -1%;
	inset-inline-end: var(--grid-padding-h);
	display: flex;
	gap: calc(.5 * var(--grid-padding-h));
}

/* @media screen and (min-width: 600px) { */
@media screen and (min-width: 1200px) {
	body.gallery > main > section:not(.splide) {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: calc(2 * var(--grid-padding-h));
		padding-inline: calc( 2.5 * var(--grid-padding-h) );
	}

	body.gallery > main > section .column[data-column-span="4"] {
		padding-inline: 0;
		/* justify-content: flex-start; */
	}

	.gallery-block div.splide__arrows,
	body.gallery > main > section:not(.galleries-other) div.splide__arrows {
		inset-inline-end: 0;
	}
}



body.gallery > main > section:not(.galleries-other) div.splide__arrows svg polygon {
	fill: var(--color, black);
}

body.gallery h1 {
	margin-block-end: auto;
	text-wrap: balance;
	inline-size: 35rem;
	max-inline-size: 100%;
	margin-inline: auto;
}

body.gallery .splide__slide:not(.is-active.is-visible) .plyr {
	display: none;
}

/***** GALLERIES OTHER *****/

:is(body.gallery, section.galleries-other, section.spaces) ul.splide__pagination {
	display: none;
}

section.galleries-other div.splide__list {
	gap: calc( .5 * var(--grid-padding-h) );
	align-items: center;
}

section.galleries-other {
	position: relative;
	background: linear-gradient(182deg, var(--background-color) 50%, white 50%);
}

section.galleries-other h2 {
	padding-inline: calc(2.5 * var(--grid-padding-h));
	font-size: var(--h3-font-size, 1.4em);
	margin-block: 1.5rem;
}

body.home section.galleries-other h2 {
	font-size: var(--h2-font-size);
}

section.galleries-other .splide__track {
	padding-block-end: 5%;
}

section.galleries-other button.splide__arrow {
	position: relative;
}

:is(body.home, section.galleries-other) button.splide__arrow svg polygon {
	fill: var(--yellow);
}

/* section.galleries-other button.splide__arrow::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	background-color: var(--red);
	z-index: -1;
	inline-size: 2rem;
	block-size: 2rem;
	transform: translate(-1.5rem, -.5rem);
	transform-origin: center;
} */

section.galleries-other button.splide__arrow:is(:hover, :focus-visible) svg polygon {
	fill: var(--red);
}

/* section.galleries-other button.splide__arrow:is(:hover, :focus-visible)::after {
	background-color: var(--yellow);
} */

section.galleries-other button.splide__arrow {
	background-color: var(--red);
}

section.galleries-other button.splide__arrow:is(:hover, :focus-visible) {
	background-color: var(--yellow);
}

/* section.galleries-other .splide__track {
	overflow: visible;
} */
body.home section.galleries-other {
	background: linear-gradient(178deg, white 50%, var(--pink) 50%);
}

/***** COOPS *****/

body.coop {
	overflow-x: initial;
}

body.coops article.gallery {
	display: flex;
	flex-direction: column-reverse;
	justify-content: space-around;
	color: black;
	--outline-color: var(--light-blue);
}

/* body.coops article.gallery:is(:hover, :focus-visible) {
	filter: drop-shadow(var(--outline-border-width), var(--outline-border-width) 0 var(--outline-color));
	box-shadow: var(--outline-border-width), var(--outline-border-width) 0 var(--outline-color);
} */

body.coops article.gallery div {
	justify-content: space-around;
}

body.coops article.gallery h3 {
	font-size: var(--text-font-size);
	text-align: center;
	line-height: 1;
	margin-block-end: initial;
}

body.coops article.gallery h3 a {
	text-decoration: none;
}

body.coops article.gallery h3 a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

body.coops article.gallery:is(:hover, :focus-within) {
	color: white;
}

body.coops article.gallery:is(:hover, :focus-within) img {
	mix-blend-mode: normal;
	filter: none;
}

body.coops article.gallery:not(:is(:hover, :focus-within)) picture {
	mix-blend-mode: hard-light;
}

div.blocks:has(.coop-logo) {
	position: sticky;
	inset-block-start: calc(2.5 * var(--grid-padding-v));
}

aside {
	padding-block-start: var(--h1-font-size);
	font-size: .8rem;
	margin-block-start: .5em;
	text-align: right;
}

aside p {
	margin-block-start: .5em;
}

body.coops article.gallery picture img,
aside picture img {
	--width: 0;
	--height: 0;
	--ideal-area: 150000;
	--area: calc(var(--width) * var(--height));
	--ratio: calc(var(--ideal-area) / var(--area));
	--guess01: calc(calc(var(--ratio) + calc( var(--ratio) / var(--ratio))) / 2);
	--guess02: calc(calc(var(--guess01) + calc( var(--ratio) / var(--guess01))) / 2);
	--guess03: calc(calc(var(--guess02) + calc( var(--ratio) / var(--guess02))) / 2);
	--guess04: calc(calc(var(--guess03) + calc( var(--ratio) / var(--guess03))) / 2);
	--guess05: calc(calc(var(--guess04) + calc( var(--ratio) / var(--guess04))) / 2);
	--guess06: calc(calc(var(--guess05) + calc( var(--ratio) / var(--guess05))) / 2);
	--guess07: calc(calc(var(--guess06) + calc( var(--ratio) / var(--guess06))) / 2);
	--guess08: calc(calc(var(--guess07) + calc( var(--ratio) / var(--guess07))) / 2);
	max-width: calc(var(--width) * var(--guess08) / 2 * 1px);
	margin-inline-start: auto;
	/* filter: grayscale(); */
	/* padding-right: 5%;
	margin-top: .5em;
	margin-bottom: .5em; */
}

picture.coop-logo img {
	/* mix-blend-mode: multiply; */
}

body.coops article.gallery picture img {
	display: block;
	--ideal-area: 70000;
	/* max-block-size: 90%;
	max-inline-size: 75%; */
	object-fit: contain;
	margin-inline: auto;
	filter: grayscale(1) contrast(1) brightness(0.5);;
	mix-blend-mode: multiply;
}

/***** SPLIDE *****/

/* .splide__track {
	overflow: unset !important;
	overflow-x: hidden;
}

.splide__slide:not(.is-active.is-visible) picture {
	opacity: 0;
} */

button.splide__arrow {
	all: unset;
	min-block-size: var(--min-target-size);
	min-inline-size: var(--min-target-size);
	pointer-events: all;
}

button.splide__arrow {
	border-radius: 50%;
	block-size: calc(1.2 * var(--min-target-size));
	inline-size: calc(1.2 * var(--min-target-size));
	padding: .3rem;
	box-sizing: border-box;
	background-color: var(--button-background-color, transparent);
}

@media screen and (min-width: 820px) {
	button.splide__arrow {
		block-size: calc(1.45 * var(--min-target-size));
		inline-size: calc(1.45 * var(--min-target-size));
	}
}

body:is(.gallery, .coop) button.splide__arrow:is(:hover, :focus-visible) {
	--button-background-color: white;
}

button.splide__arrow svg {
	fill: var(--color);
}

button.splide__arrow.splide__arrow--next svg {
	transform: translateX(7%);
}

button.splide__arrow.splide__arrow--prev svg {
	transform: translateX(-7%);
}

figure.splide__slide figcaption {
	font-size: 3rem;
	font-weight: 1;
	color: var(--color, white);
	inset-inline-start: 0;
	inset-block-end: -1em;
	transform: translate(0.1em, -.65em);
	height: 1.5rem;
}

figure.splide__slide span[class^="figure"] {
	font-family: Picky Action;
	font-weight: 400;
	display: inline-block;
	transform: translateY(-0.3em) rotate(-3deg);
}

figure.splide__slide span.figure-of {
	transform: translateY(0.1em) rotate(5deg);
}

figure.splide__slide span.fraction {
	display: inline-block;
	inline-size: .25em;
	transform: translateX(-.125em);
}

/***** VIDEO *****/

section.video figure.embed,
section.video .plyr,
section.video .plyr__video-embed,
section.video .consent-gate {
	/* clip-path: polygon(0% 0%, 100% 1.5rem, 100% 100%, 0% 100%); */
	/* margin-block-start: -1.5rem; */
}

@media screen and (min-width: 600px) {
	section.video figure.embed,
	section.video .plyr,
	section.video .plyr__video-embed,
	section.video .consent-gate {
		/* clip-path: polygon(0% 0%, 100% 1.5rem, 100% 100%, 0% 100%); */
		/* margin-block-start: -1.5rem; */
	}
}

/* .plyr__video-embed, .plyr__video-wrapper--fixed-ratio {
	aspect-ratio: 4/3 !important;
}

@media screen and (min-width: 600px) {
	.plyr__video-embed, .plyr__video-wrapper--fixed-ratio {
		aspect-ratio: 16/9 !important;
	}
} */

.plyr--video {
	--plyr-control-icon-size: 5rem;
	/* --plyr-control-spacing: 1rem; */
}

section.video figure.embed {
	aspect-ratio: 16/9;
}

div.embed-background{
	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;
	aspect-ratio: 16/9;
}

div.embed-background iframe,
.plyr__video-embed iframe, .plyr__video-wrapper--fixed-ratio video {
	min-block-size: 100%;
	min-inline-size: 100%;
	position: absolute;
	inset-block-start: 50% !important;
	inset-inline-start: 50% !important;
	transform: translate(-50%, -50%);
}

/* body.gallery :is(.plyr__video-embed, .plyr__video-wrapper--fixed-ratio) {
	aspect-ratio: auto;
} */

body.gallery .plyr,
div.audio-block .plyr {
	clip-path: none;
  	margin-block-start: 0;
	--plyr-color-main: var(--background-color);
}

div.audio-block {
	margin-block: 1rem;
}

div.audio-block .plyr {
	clip-path: polygon(0.25% 5%, 99.75% 0%, 100% 100%, 0% 97%);
}

div.audio-block .plyr svg {
	fill: var(--background-color, black);
	fill: currentColor;
}

/* body.gallery :is(.plyr__video-embed, .plyr__video-wrapper--fixed-ratio) .splide__slide {
	block-size: 100%;
} */

.plyr:has(video.embed-block) {
	clip-path: polygon(1% 0%, 100% 1%, 98.5% 100%, 0% 99%);
	clip-path: polygon(1% 1%, 88% 0%, 100% 1%, 99% 100%, 0% 98%);;
	margin-block: 1rem;
}

.plyr__video-wrapper {
	--plyr-video-background: transparent;
}

/***** EVENTS *****/

body.events {
	--background-color: var(--pink);
	--color: white;
	--page-color: black;
}

section.events {
	color: white;
}

body.home article.event {
	--background-color: var(--darker-pink);
}

article.event {
	display: grid;
	/* display: flex; */
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--grid-padding-h);
	padding: var(--grid-padding-v) var(--grid-padding-h);
	/* background-color: white; */
	color: var(--background-color);
	margin-block: var(--grid-padding-v);
	position: relative;
}

/* article.event:is(::before, ::after) {
	content: '';
	position: absolute;
	clip-path: polygon(1% 3%, 83% 0%, 100% 3%, 99% 100%, 6% 100%, 0% 83%);
} */
section:not(.image) :is([class^="shape"], [class^="square"]) {
	clip-path: var(--clip-path, none);
}

.shape-1 {
	--clip-path: polygon(0% 2%, 83% 0%, 100% 5%, 99.5% 100%, 6% 100%, 0% 96%);
	--clip-path: var(--shape-1);
}

.shape-2 {
	--clip-path: polygon(1.3% 7%, 75% 0%, 99.5% 2%, 100% 98%, 30% 100%, 1% 99%);
	--clip-path: var(--shape-2);
}

.shape-3 {
	--clip-path: polygon(0.7% 3%, 5% 0%, 100% 5%, 99.7% 100%, 1% 92%);
	--clip-path: var(--shape-3);
}

.shape-4 {
	--clip-path: polygon(0.5% 0%, 99.5% 5%, 100% 100%, 1% 96%);
	--clip-path: var(--shape-4);
}

.shape-5 {
	--clip-path: polygon(0.2% 0%, 99.5% 5%, 100% 96%, 80% 100%, 0% 93%);
	--clip-path: var(--shape-5);
}



.square-1 {
	--clip-path: polygon(0% 1%, 100% 0%, 99% 99%, 0% 100%);
}

.square-2 {
	--clip-path: polygon(0% 0%, 98% 1%, 100% 100%, 1% 99%);
}

.square-3 {
	--clip-path: polygon(1% 1%, 99% 0%, 100% 99%, 70% 100%, 0% 99%);
}

.square-4 {
	--clip-path: polygon(1% 0%, 100% 1%, 98.5% 100%, 0% 99%);
}

.square-5 {
	--clip-path: polygon(1% 1%, 88% 0%, 100% 1%, 99% 100%, 0% 98%);
}

article.event::before {
	content: '';
	position: absolute;
	clip-path: var(--clip-path);
	inset: -5%;	
	background-color: white;
}

body > main > section:has(.events, .events-other) {
	--color: var(--light-blue);
	padding: var(--grid-padding-v) calc( 1.5 * var(--grid-padding-h) );
	/* --background-color: white; */
}

body > main > section:has(.events) {
	padding-block-end: calc(3 * var(--grid-padding-v)) ;
}

div:is(.events, .events-other) h3 {
	display: flex;
  	justify-content: space-between;
	margin-block-start: .75rem;
	translate: 0 0.5em;
}

section:has(.events, .events-other) article.event::before {
	inset: -1%;
}

section:has(.events-other) article.event::before {
	background-color: var(--color);
}

section:has(.events-other) article.event:has(a):is(:hover, :focus-within) {
	color: var(--color);
}

section:has(.events, .events-other) article.event:has(a):is(:hover, :focus-within)::after {
	inset: calc(-1% + .3em);
}

section:has(.events-other) article.event .tags {
	color: var(--color);
}

section:has(.events-other) h2 {
	max-inline-size: 100%;
	font-size: var(--h3-font-size);
	/* margin-inline: auto; */
}

section:has(.events-other) :is(h2, div.events-other) {
	max-inline-size: min(47.5rem, 100%);
	margin-inline: auto;
}

body:is(.events, .event) :is(h1, h2, div.events, div.events-other) {
	max-inline-size: min(47.5rem, 100%);
	margin-inline: auto;
}

article.event:has(a):is(:hover, :focus-within) {
	color: white;
}

/* article.event:has(a):is(:hover, :focus-within)::before {
	background-color: transparent;
} */

article.event:has(a):is(:hover, :focus-within)::after {
	content: '';
	position: absolute;
	clip-path: var(--clip-path);
	/* filter: drop-shadow(0 0 -1em white); */
	inset: 1% -4%;
	inset: calc(-5% + .3em);
	z-index: 0;
	background-color: var(--background-color);
}


article.event > * {
	z-index: 1;
}

article.event :is(.weekday, .date) {
	grid-column: span 6;
}

article.event :is(.time, .title) {
	grid-column: span 12;
	grid-row: 2;
}

article.event .title {
	grid-row: 3;
	text-wrap: balance;
}

article.event .title a::after {
	content: '';
	position: absolute;
	inset: 0;
}

article.event .tags {
	background-color: var(--background-color);
	color: white;
	padding: .2em .4em;
	rotate: 2deg;
	display: inline-block;
	/* position: absolute; */
	line-height: 1;
	/* translate: 1em -.5em; */
	translate: .25em;
	/* inset-block-start: 50%;
	inset-inline-start: 35%;
	translate: 0% -50%; */
}

@media screen and (min-width: 600px) {
	article.event .weekday {
		grid-column: span 3;
		/* inline-size: 10ch; */
		/* flex-shrink: 0; */
	}
	
	article.event :is(.time, .date) {
		grid-column: span 2;
	}
	
	article.event :is(.time, .title) {
		/* inline-size: 5ch; */
		/* flex-shrink: 0; */
		grid-row: auto;
	}
	
	article.event .time {
		/* inline-size: 14ch; */
	}
	
	article.event .title {
		grid-column: span 5;
	}
}

/***** EVENT *****/

body.event :is(h1, h2, p) {
	max-inline-size: min(40rem, 100%);
}

body.event > main > section:not(:has(.events-other)) div.column {
	/* columns: 2; */
	max-inline-size: min(40rem, 100%);
	margin-inline: auto;
	/* margin-block-start: 2rem; */
}

body.event > main > section div.blocks {
  	margin-block-start: 2rem;
}

/* @media screen and (min-width: 600px) { */
/* @media screen and (min-width: 820px) {
	body.event > main > section div.blocks {
		columns: 2;
	}
} */

body.event > main > section:not(:has(.events-other)) div.column p {
	break-inside: avoid-column;
}

body.event > main > section:has(.events-other) {
	margin-block-start: calc( var(--angle-offset) * 2 );
}

/***** SPACES *****/

section.spaces {
	background: linear-gradient(177.5deg, white 12.5vw, var(--background-color, var(--green)) 12.5vw);
	color: var(--color, white);
}

section:is(.galleries, .spaces) article :is(h2, h3, h4, h5, h6) {
	max-inline-size: initial;
	margin-inline: initial;
}

/* @media screen and (min-width: 600px) { */
@media screen and (min-width: 820px) {
	section.spaces {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: calc(1.5 * var(--grid-padding-h));
	}

	body.spaces > main > section.spaces:last-child {
		padding-block-end: calc( var(--angle-offset) * 2 + 10vw );
	}

	article.space:nth-child(even) {
		transform: translateY(10vw);
	}

	article.space picture {
		inline-size: 80%;
	}

	article.space picture img {
		aspect-ratio: 4 / 3;
	}
}

article.space {
	display: flex;
	flex-direction: column;
}

article.space:not(:first-of-type) {
	margin-block-start: 2rem;
}

article.space > :is(section.splide, picture) {
	order: -1;
}

article.space picture {
	aspect-ratio: 4/3;
	display: block;
}

article.space section.splide picture {
	inline-size: 100%;

}

article.space:not(.has-gallery) h3 {
	margin-block-start: 1rem;
}

article.space p {
	margin-block-start: .5rem;
	max-inline-size: 30ch;
	margin-inline: 0;
}

article.space div.splide__arrows {
	inset-inline: calc(-1.25 * var(--grid-padding-h));
	inset-inline: calc(-1.6 * var(--grid-padding-h));
	padding-inline: 0;
}

article.space div.splide__arrows svg polygon {
	fill: var(--color, white);
}

article.space div.splide__arrows button:is(:hover, :focus) svg polygon {
	fill: var(--pink);
}

article.space figure.splide__slide figcaption {
	display: flex;
	justify-content: flex-end;
	transform: translate(-0.3em, -.65em);
	color: white;
	/* --outline-color: white; */
	/* filter: drop-shadow(var(--outline-border-width) var(--outline-border-width) 0 var(--outline-color)); */
}

article.space figure.splide__slide:not(.is-active) figcaption {
	display: none;
}

/***** IMAGE *****/

[data-aspect-ratio="16/9"] {
	aspect-ratio: 16/9;
}

[data-aspect-ratio="1/1"] {
	aspect-ratio: 1/1;
}

[data-aspect-ratio="10/8"] {
	aspect-ratio: 10/8;
}

[data-aspect-ratio="21/9"] {
	aspect-ratio: 21/9;
}

[data-aspect-ratio="7/5"] {
	aspect-ratio: 7/5;
}

[data-aspect-ratio="4/3"] {
	aspect-ratio: 4/3;
}

[data-aspect-ratio="5/3"] {
	aspect-ratio: 5/3;
}

[data-aspect-ratio="3/2"] {
	aspect-ratio: 3/2;
}

[data-aspect-ratio="3/1"] {
	aspect-ratio: 3/1;
}

section.image[data-section-angle] {
	block-size: 60vh;
	clip-path: polygon(0% 0%, 100% 1.5rem, 100% 100%, 0% 100%);	
}

section.image[data-section-angle]::before {
	content: none;
}

picture img,
section.image img {
	display: block;
	aspect-ratio: var(--width, 3) / var(--height, 2);
}

section.image :where(h1, h2, h3, h4, h5, h6, p, ul) {
	padding-inline: calc( 2.5 * var(--grid-padding-h) );
}

/***** BLOCKQUOTE *****/

/* blockquote {
	display: flex;
	justify-content: center;
	align-content: space-between;
} */

:where(blockquote, .image-marker):has(div.speech-bubble) {
	--bubble-width: 100%;
	position: relative;
}

/* .image-marker:has(div.speech-bubble) {
	--bubble-width: 100%;
	position: relative;
} */

:where(blockquote, .image-marker) div.speech-bubble {
	/* align-self: flex-start; */
	/* transform: translateY(15%); */
	color: black;
	font-weight: 700;
	font-size: var(--h3-font-size);
	font-size: calc(1.2 * var(--h3-font-size));
	position: relative;
}

.image-marker div.speech-bubble {
	font-size: var(--h3-font-size);
	font-size: var(--text-font-size);
	/* transform: translate(calc(90% * var(--direction)), -90%); */
	translate: calc(90% * var(--direction)) -90%;
	/* aspect-ratio: 3 / 2; */
	hyphenate-limit-chars: 10 3 4;
	text-wrap: balance;
	pointer-events: none;
	filter: var(--outline);
	/* filter: drop-shadow(.15rem .3rem 0 black); */
}

.image-marker[data-marker-type="rect"] div.speech-bubble {
	translate: calc(90% * var(--direction) + 15%) -90%;
}

.image-marker div.speech-bubble:has(a) {
	pointer-events: all;
}

.image-marker div.speech-bubble[data-pos="left"] {
	--direction: -1;
}

.image-marker div.speech-bubble[data-pos="right"] {
	--direction: 0;
	scale: -1 1;
}

.image-marker div.speech-bubble[data-pos="right"] p {
	scale: -1 1;
}

:where(blockquote, .image-marker) div.speech-bubble {
	/* inline-size: fit-content; */
	/* min-inline-size: calc(var(--bubble-width) / .75);
	max-inline-size: var(--bubble-width); */
	inline-size: var(--bubble-width);
	/* block-size: var(--bubble-height); */
	/* overflow: hidden; */
	text-align: center;
	/* transform: scale(1.2) translateX(4vw); */
	/* margin-block-start: 5%; */
	/* min-block-size: var(--bubble-height); */
	display: grid;
	place-content: center;
}

.image-marker div.speech-bubble[data-text-length="shortest"] {
	/* --bubble-width: 22.5vw; */
	--bubble-width: 10ch;
}

.image-marker div.speech-bubble[data-text-length="short"] {
	/* --bubble-width: 22.5vw; */
	--bubble-width: 17.5ch;
}

.image-marker div.speech-bubble[data-text-length="mid"] {
	/* --bubble-width: 30vw; */
	--bubble-width: 25ch;
}

.image-marker div.speech-bubble[data-text-length="long"] {
	/* --bubble-width: 40vw; */
	--bubble-width: 32.5ch;
}

:where(blockquote, .image-marker) div.speech-bubble::before {
	content: "";
	position: absolute;
	inset: -5vw -5vw;
	inset: 0;
	background-image: url(/assets/svg/speech-bubble-base.svg);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	z-index: 0;
}

.image-marker div.speech-bubble::before {
	inset: 5%;
}

:where(blockquote, .image-marker) div.speech-bubble::after {
	content: "";
	position: absolute;
	inset: -5vw -5vw;
	inset: 50%;
	inset-block-end: 0;
	inset-inline-end: 0;
	background-image: url(/assets/svg/speech-bubble-speech.svg);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	z-index: 0;
}

@media screen and (max-width: 599px) {
	blockquote div.speech-bubble::after {
		/* background-size: 100% 80%; */
		inset-inline-start: 0;
		transform-origin: center left;
		rotate: 12deg;
		scale: 0.4 2;
		translate: 5% -10%;
	}
}

.image-marker div.speech-bubble::after {
	background-size: 90% 90%;
}

/* blockquote div.speech-bubble svg {
	inline-size: 120%;
	transform: translateX(-10%);
} */

:where(blockquote, .image-marker) div.speech-bubble span {
	/* position: absolute;
	inset: 10%;
	inset-block-start: 50%;
	inset-block-end: auto;
	transform: translateY(-50%); */
	hyphens: none;
}

blockquote div.speech-bubble p {
	padding: calc(3 * var(--grid-padding-h));
	z-index: 1;
}

.image-marker div.speech-bubble p {
	padding: calc(1.5 * var(--grid-padding-h));
	z-index: 1;
}

:where(blockquote, .image-marker):has(div.speech-bubble) footer {
	/* margin-block-start: 10%; */
	position: absolute;
	inset: auto;
	inset-block-end: 0;
	inset-inline-end: 0;
}

blockquote:has(div.speech-bubble) footer {
	position: relative;
	transform: translate(15%, -20%);
}

blockquote:has(div.speech-bubble) footer svg {
	fill: var(--second-color);
}

:where(blockquote, .image-marker):has(div.speech-bubble) footer svg {
	inline-size: 100%;
}

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

	blockquote:has(div.speech-bubble) {
		/* display: flex;
		justify-content: center;
		align-content: space-between; */
		--bubble-width: 60vw;
		--bubble-height: calc(var(--bubble-width) / 2);
	}

	.image-marker:has(div.speech-bubble) {
		/* display: flex;
		justify-content: center;
		align-content: space-between; */
		--bubble-width: 40vw;
		--bubble-height: calc(var(--bubble-width) / 3);
	}

	.image-marker:has(div.speech-bubble[data-text-length="short"]) {
		--bubble-height: calc(var(--bubble-width) / 4);
	}

	.image-marker:has(div.speech-bubble[data-text-length="shortest"]) {
		--bubble-height: calc(var(--bubble-width) / 5);
	}

	:where(blockquote, .image-marker):has(div.speech-bubble) footer {
  		/* transform: translateY(-2vw); */
		inset-block-end: 2.5vw;
		inset-inline-end: 10vw;
		margin: -5vw;
		z-index: 1;
	}

	blockquote:has(div.speech-bubble) footer {
		position: absolute;
		transform: none;
	}

	blockquote:has(div.speech-bubble) footer svg {
		inline-size: calc(var(--bubble-width) / 2);
		min-inline-size: 15em;
		/* block-size: calc(var(--bubble-height) + 2 * var(--grid-padding-v)); */
	}	

	.image-marker:has(div.speech-bubble) footer svg {
		inline-size: calc(var(--bubble-width) / 2);
		min-inline-size: 7.5em;
		/* block-size: calc(var(--bubble-height) + 2 * var(--grid-padding-v)); */
	}

	/* blockquote div.speech-bubble div::before,
	blockquote div.speech-bubble div::after {
		content: "";
		block-size: var(--bubble-height);
		inline-size: 50%;
		shape-margin: 2%;
	}


	blockquote div.speech-bubble div::before {
		float: left;
		shape-outside: polygon( 
			0% 0%, 100% 0%, 50% 5%, 20% 15%, 5% 30%, 0% 50%, 5% 70%, 20% 85%, 45% 95%, 100% 100%, 0% 100%
		);
	}
	    
	blockquote div.speech-bubble div::after {
		float: right;
		shape-outside: polygon(
			0% 0%, 100% 0%, 100% 100%, 0% 100%, 30% 95%, 65% 85%, 85% 70%, 85% 50%, 95% 35%, 85% 15%, 50% 5%
		);
	}

	blockquote div.speech-bubble > div > p {
		top: calc(var(--bubble-height) / 2 - var(--grid-padding-v));
		position: relative;
		transform: translateY(-50%);
	} */


}

figure.image-block:has(.image-marker) {
	margin-block-start: 2.5rem;
}


/***** A11Y *****/

.visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(100%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap; 
	width: 1px;
}


/***** PLYR *****/

.plyr {
	block-size: 100%;
	inline-size: 100%;
}

.plyr__video-embed .plyr__control svg,
.plyr__video-embed button[data-plyr="play"] svg {
	--plyr-control-icon-size: 10vw;
	padding: 2vw;
}

:is(.plyr__video-embed, .plyr__video-wrapper--fixed-ratio)[data-aspect-ratio="auto"] {
	aspect-ratio: auto;
}

:is(.plyr__video-embed, .plyr__video-wrapper--fixed-ratio)[data-aspect-ratio="16/9"] {
	aspect-ratio: 16/9;
}

:is(.plyr__video-embed, .plyr__video-wrapper--fixed-ratio)[data-aspect-ratio="1/1"] {
	aspect-ratio: 1/1;
}

:is(.plyr__video-embed, .plyr__video-wrapper--fixed-ratio)[data-aspect-ratio="10/8"] {
	aspect-ratio: 10/8;
}

:is(.plyr__video-embed, .plyr__video-wrapper--fixed-ratio)[data-aspect-ratio="21/9"] {
	aspect-ratio: 21/9;
}

:is(.plyr__video-embed, .plyr__video-wrapper--fixed-ratio)[data-aspect-ratio="7/5"] {
	aspect-ratio: 7/5;
}

:is(.plyr__video-embed, .plyr__video-wrapper--fixed-ratio)[data-aspect-ratio="4/3"] {
	aspect-ratio: 4/3;
}

:is(.plyr__video-embed, .plyr__video-wrapper--fixed-ratio)[data-aspect-ratio="5/3"] {
	aspect-ratio: 5/3;
}

:is(.plyr__video-embed, .plyr__video-wrapper--fixed-ratio)[data-aspect-ratio="3/2"] {
	aspect-ratio: 3/2;
}

:is(.plyr__video-embed, .plyr__video-wrapper--fixed-ratio)[data-aspect-ratio="3/1"] {
	aspect-ratio: 3/1;
}

/***** CONSENT GATE *****/

.consent-gate-container {
	inline-size: 100%;
	background-color: var(--background-color, var(--purple));
}

div.blocks .consent-gate-container:not(:first-child) {
	margin-block-start: 1rem;
}

.consent-gate {
	padding-inline: calc( 2.5 * var(--grid-padding-h) );
	background-color: transparent !important;
	position: relative;
}

@media screen and (min-width: 600px) {
	section:not([data-section-type-area="full"]) .consent-gate-container:not(.consent-content-loaded) .consent-gate {
		/* padding: 2.5rem; */
		padding-block-start: 1.5rem !important;
	}

	.consent-gate-container:not(.consent-content-loaded) .consent-gate {
		max-inline-size: min(35rem, 100%);
  		margin-inline: auto;
	}
}

section[data-section-type-area="full"] .consent-gate .consent-gate-content {
	min-inline-size: 100vw;
}

.consent-gate-toggle {
	font-size: 1rem;
}

.consent-gate-toggle span {
	/* padding-block-start: 0 !important; */
}

.consent-content-loaded .consent-gate-toggle {
	position: absolute;
	inset: auto;
	inset-block-end: 0;
	inset-inline-start: var(--grid-padding-h);
	gap: var(--grid-padding-v);
	inline-size: auto;
	font-size: 1rem;
	flex-direction: column;
	align-items: flex-start;
}

.consent-content-loaded:not(:hover) .consent-gate-toggle {
	opacity: 0;
}

.consent-content-loaded .consent-gate-toggle:focus-within {
	opacity: 1;
}

.consent-content-loaded .consent-gate-toggle .toggle-on {
	font-size: .8rem;
	gap: .5rem;
	align-items: center;
}

button.consent-gate-toggle-btn {
	all: unset;
}

button[aria-pressed="false"] + a.consent-gate-privacy {
	display: none;
}

.consent-gate-toggle .toggle-on span {
	padding: 0;
}

.consent-gate-toggle .toggle-on svg {
	transform: rotate(180deg);
}

.consent-content-loaded .consent-gate-toggle {
	pointer-events: none;
}

.consent-content-loaded .consent-gate-toggle button.consent-gate-toggle-btn {
	position: relative;
	pointer-events: all;
}

.consent-content-loaded .consent-gate-toggle button.consent-gate-toggle-btn > * {
	position: relative;
	z-index: 1;
}

.consent-content-loaded .consent-gate-toggle button.consent-gate-toggle-btn::after {
	content: '';
	position: absolute;
	background-color: white;
	inset: -.25em;
	z-index: 0;
	clip-path: polygon(1% 3%, 83% 0%, 100% 3%, 99% 100%, 6% 100%, 0% 83%);
}


/***** MAP *****/

section[data-section-type-area="full"]:has(div:where(#map, .consent-gate-container))::before {
	content: none;
}

section[data-section-type-area="full"]:has(div:where(#map, .consent-gate-container)) {
	clip-path: polygon(0 0, 100% var(--angle-offset), 100% 100%, 0% 100%);
	margin-block-start: calc(-1 * var(--angle-offset) + 1px);
	padding-block-end: 0;
}

section:has(+ section #map, + section .consent-gate-container) {
	padding-block-end: 4rem;
}

.mapboxgl-ctrl-bottom-right {
	transform: translateY(-1.5rem);
}

div#map {
	block-size: 80vh;
}

/* div#map .mapboxgl-canvas {
	inline-size: 100% !important;
} */

div.marker {
	background-image: url('../svg/logo.svg');
	block-size: 3rem;
	inline-size: 3rem;
	--stroke-width: .04rem;
	filter: drop-shadow( var(--stroke-width)  0 0 white) 
        drop-shadow(calc(-1 * var(--stroke-width))  0 0 white)
        drop-shadow( 0  var(--stroke-width) 0 white) 
        drop-shadow( 0 calc(-1 * var(--stroke-width)) 0 white);
}

/* div.marker::after {
	content: 'Jens‑Nydahl-Grundschule';
	position: absolute;
	display: block;
	white-space: nowrap;
	color: black;
	font-weight: 700;
	font-size: 0.8rem;
	translate: -7ch;
	text-align: center;
	inset-block-end: -0.9rem;
} */

div.marker::after {
	content: 'Jens‑Nydahl-Grundschule';
	position: absolute;
	display: block;
	color: black;
	font-weight: 700;
	font-size: 0.8rem;
	text-align: center;
	translate: -2.25ch;
	text-align: center;
	inset-block-end: -1.9rem;
	hyphens: none;
	line-height: 1.05;
}

/***** PEOPLE *****/

div.blocks:has(figure.person + figure.person) {
	display: flex;
}

figure.person {
	block-size: 30vw;
}

figure.person :is(picture, img) {
	overflow: visible;
	object-fit: contain;
}

figure.person figcaption {
	text-align: center;
}


/***** IMAGEMAP *****/

figure:has(.image-marker) {
	position: relative;
}

figure:has(.image-marker) figcaption {
	position: absolute;
	inset: 0;
}

.image-marker {
	display: none;
}

@media screen and (min-width: 820px) {
	figure figcaption .image-marker {
		display: grid;
		position: absolute;
		/* visibility: hidden; */
		opacity: 0;
	}

	figure figcaption .image-marker:is(:hover, :focus-visible, :focus-within) {
		/* visibility: visible; */
		opacity: 1;
		outline: none;
	}
}


/***** VIDEO *****/

figure video {
	block-size: 100%;
	inline-size: 100%;
	object-fit: cover;
}

figure video[data-fit="contain"] {
	object-fit: contain;
}

div.plyr__video-wrapper:has(video[data-orientation="landscape"]:not([data-fit="cover"])) {
	height: auto;
	inline-size: 100%;
}

div.plyr__video-wrapper:has(video[data-orientation="portrait"]:not([data-fit="cover"])) {
	block-size: 100%;
	inline-size: auto;
}

/***** BLOCKS *****/

a.file-wrapper {
	display: block;
	margin-block-start: 1rem;
}

div.column:has(.image-block:only-child),
div.blocks:has(.image-block:only-child),
.image-block:only-child,
.image-block:only-child :is(picture, img) {
	block-size: 100%;
}

section:not(.image) figure.image-block {
	margin-block-start: 1rem;
}

section.gallery-block {
	margin-block-start: 1rem;
}

@media screen and (max-width: 1200px) {
	div.blocks:has(section.splide:first-child) {
		padding-block-start: 1.25rem;
	}	

	div.column:not(:last-child) div.blocks:has(section.splide:last-child) {
		padding-block-end: 1.5rem;
	}
}




/***** FUNDING BLOCK *****/

ul.funding-block {
	align-items: center;
	display: flex;
	font-size: var(--text-font-size, 1rem);
	column-gap: 1.5rem;
	list-style: none;
	margin-block: 1rem;
	margin-inline: auto;
	max-inline-size: min(35rem, 100%);
}

ul.funding-block[data-align="vertical"] {
	align-items: flex-start;
	flex-direction: column;
	row-gap: .75rem;
}

a.funding_logo {
	display: block;
}

.funding_logo img {
	--width: 0;
	--height: 0;
	--ideal-area: 50000;
	--area: calc(var(--width) * var(--height));
	--ratio: calc(var(--ideal-area) / var(--area));
	--guess01: calc(calc(var(--ratio) + calc( var(--ratio) / var(--ratio))) / 2);
	--guess02: calc(calc(var(--guess01) + calc( var(--ratio) / var(--guess01))) / 2);
	--guess03: calc(calc(var(--guess02) + calc( var(--ratio) / var(--guess02))) / 2);
	--guess04: calc(calc(var(--guess03) + calc( var(--ratio) / var(--guess03))) / 2);
	--guess05: calc(calc(var(--guess04) + calc( var(--ratio) / var(--guess04))) / 2);
	--guess06: calc(calc(var(--guess05) + calc( var(--ratio) / var(--guess05))) / 2);
	--guess07: calc(calc(var(--guess06) + calc( var(--ratio) / var(--guess06))) / 2);
	--guess08: calc(calc(var(--guess07) + calc( var(--ratio) / var(--guess07))) / 2);
	block-size: auto;
	display: block;
	inline-size: calc(var(--width) * var(--guess08) / 2 * 1px);
	/* filter: grayscale(); */
}

/***** LAST MINUTE ADDITIONS *****/

@media screen and (min-width: 820px) {
	div.random {
		position: relative;
	}
	
	div.random > * {
		position: absolute;
		  z-index: 1;
	}	
}

@media screen and (max-width: 819px) {
	div.column + div.column > div.blocks > p:first-child,
	figure.image-block + p {
		margin-block-start: 1rem;
	}	
}


aside.funding div.funding-logos picture {
}

section:has(aside.funding) {
	display: flex;
  	flex-direction: column-reverse;
}

aside.funding {
	margin-block-start: 5rem;
	padding-block-start: 0;
	text-align: start;
}

aside.funding img {
	--ideal-area: 50000;
	/* max-inline-size: 100%; */
	object-fit: contain;
	display: inline-block;
	margin-inline-end: calc(.5 * var(--grid-padding-h));
	margin-block-start: calc(.5 * var(--grid-padding-h));
}

div.blocks:has(aside.funding:last-child) {
	display: flex;
	flex-direction: column;
	/* gap: calc(.5 * var(--grid-padding-h));
	align-items: flex-start; */
	padding-block-start: 0.5rem;
	justify-content: flex-start;
	block-size: 100%;
}

div.blocks:has(aside.funding:last-child) > * {
	margin-inline: 0;
}

div.blocks:has(aside.funding:last-child) aside.funding {
	margin-block-start: auto;
}

details.details-block {
	margin-block-start: 1rem;
	max-inline-size: min(35rem, 100%);
	margin-inline: auto;
}

details.details-block ul {
	list-style-position: inside;
	padding-inline-start: 1em;
	text-indent: -1em;
}

details.details-block ul p {
	display: inline;
}

details.details-block + details.details-block {
	border-block-start: .075em solid currentColor;
	padding-block-start: 1rem;
}

details.details-block > summary {
	list-style-position: inside;
	padding-inline-start: 1.2em;
	text-indent: -1.2em;
}

details.details-block > summary * {
	display: inline;
}

@media screen and (min-width: 600px) {
	details.details-block > div {
		padding-inline-start: 1.2em;
	}	
}

body.coops div.blocks blockquote {
	max-inline-size: min(35rem, 100%);
  	margin-inline: auto;
  	font-size: var(--h2-font-size);
	font-weight: 800;
	line-height: 1;
	text-wrap: balance;
	hyphens: manual;
}

body.coops div.blocks blockquote .speech-bubble {
	/* filter: var(--outline); */
	/* filter:invert(); */
	/* color: var(--blue); */
}

body.coops div.blocks blockquote .speech-bubble::before {
	background-image: none;
	mask-image: url(../svg/speech-bubble.svg);
	background-color: var(--light-blue);
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
}

body.coops div.blocks blockquote .speech-bubble::after {
	content: none;
	background-image: none;
}

body.coops div.blocks blockquote div.speech-bubble p {
	padding: calc(2 * var(--grid-padding-h));
}

body.coops div.blocks blockquote footer {
	color: var(--blue);
  	font-size: var(--text-font-size);
	font-weight: 590;
	margin: 0;
	margin-block-start: .5rem;
	position: relative;
	transform: none;
	inset: auto;
	text-align: right;
}

body.default p + .plyr {
	margin-block-start: 1rem;
}

body.about h1 + div.blocks > figure.image-block img {
	filter: brightness(1.05) drop-shadow(1px 3px 2px rgba(0, 0, 0, 0.2));
}