@layer reset, default, themes, patterns, layouts, components, utilities;
/* @import url('/media/plugins/mlthrk/components/color-theme-toggle.css') layer(themes); */

:root {
	--border-width: 1.5px;
	--padding: 1rem;

	/* --h1-font-size:  */
	--h2-font-size: 2.5rem;
	--h3-font-size: 1.8rem;
	--text-font-size: 1rem;

	--50ms: 50ms;
	--250ms: 250ms;
	--500ms: 500ms;

	font-size: 1.3em;
	font-weight: 400;
}

@media (prefers-reduced-motion) {
	:root {
		--50ms: 0ms;
		--250ms: 0ms;
		--500ms: 0ms;
		--reduced: none;
	}
}

@layer reset {
	fieldset {
		border: none;
		margin: 0;
		padding: 0;
	}

	label > svg {
		max-inline-size: 1em;
		max-block-size: 1em;
	}
}

@layer default.colors {
	:root {
		--black: 12, 13, 13;
		--dark-grey: 89, 88, 86;
		--light-grey: 217, 214, 208;
		--orange: 243, 160, 3;
		--pink: 204, 24, 131;
		--purple: 54, 41, 133;
		--red: 217, 20, 17;
	}

	@media (prefers-color-scheme: dark) {
		:root {
			--black: 217, 214, 208;
			--light-grey: 12, 13, 13;
			--orange: 54, 41, 133;
			--purple: 243, 160, 3;
		}
	}
}

* {
	font-family: 'Alfabet', system-ui, sans-serif;
	font-family: 'Alfabet', Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	outline: none;
}

body {
	background-color: rgb(var(--light-grey));
	color: rgb(var(--black));
	max-inline-size: 100vw;
	overflow-x: hidden;
}

body:not(.home) {
	display: grid;
	min-block-size: 100vh;
}

a {
	color: inherit;
}

a.logo {
	block-size: 3em;
	inline-size: 3em;
	display: block;
	color: currentColor;
}

a.logo svg path {
	fill: currentColor;

}

@keyframes logo-rotate {
	from {
		transform: rotate(0);
	}
	to {
		transform: rotate(-360deg);
	}
}

a.logo:is(:hover, :focus-visible) svg {
	animation: var(--reduced, logo-rotate 5s infinite steps(6, jump-start));
}

a.logo:focus-visible svg path {
	fill: rgb(var(--purple));
}


nav.main {
	inline-size: 10em;
	min-inline-size: max-content;
	text-transform: uppercase;
	letter-spacing: .03em;
	position: fixed;
	inset: auto;
  	inset-block-start: var(--padding);
  	inset-inline-end: var(--padding);
	display: grid;
}

nav.main a {
	text-decoration: none;
}

nav.main #btn-nav-main {
	all: unset;
	border: var(--border-width) solid rgb(var(--black));
  	background-color: rgb(var(--light-grey));
	padding: calc(var(--padding) / 6) calc(var(--padding) / 3);
}

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

nav.main #btn-nav-main[aria-expanded="true"] span.menu-close {
	display: inline;
}

nav.main li.nav-item {
	background-color: rgb(var(--light-grey));
	border: var(--border-width) solid rgb(var(--black));
	border-block-start: 0;
	display: grid;
}

nav.main li.nav-item a {
	padding: calc(var(--padding) / 6) calc(var(--padding) / 3);
	padding-inline-end: calc(4 * var(--padding));
}

nav.main #btn-nav-main:is(:hover, :focus-visible, [aria-expanded="true"]),
nav.main li.nav-item a:is(:hover, :focus-visible, [aria-current]) {
	color: rgb(var(--light-grey));
	background-color: rgb(var(--black));
}

nav.main #btn-nav-main[aria-expanded="true"]:focus-visible {
	background-color: rgb(var(--purple));
}

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

button[aria-expanded="true"] + * {
	display: initial;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

h1, h2, h3, h4 {
	text-transform: uppercase;
	letter-spacing: 0.02em;
	max-inline-size: 100vw;
}

h1 {
	font-size: clamp(4.25rem, 15vw, 10rem);
	line-height: .9;
	overflow-x: scroll;
}

h2 {
	font-size: 2.5rem;
	font-weight: 600;
	line-height: 1;
}

p {
	line-height: 1.25;
	max-inline-size: 50ch;
}

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

main > article {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
}

div.column {
	border: var(--border-width) solid rgb(var(--black));
	display: grid;
}

div.column + div.column {
	border-inline-start: 0;
}

div.column[data-columns="2"] {
	grid-column: span 4;
}

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

div.column[data-columns="4"] > * {
	min-inline-size: 0;
	padding-inline: var(--padding);
}

div.column[data-columns="4"] > :is(h2, h3, p) {
	padding-block: var(--padding);
}

div.column[data-columns="4"] > h2:not(:first-child) {
	border-block-start: var(--border-width) solid rgb(var(--black));
}

div.column[data-columns="4"] > h3 {
	border-block-start: var(--border-width) solid rgb(var(--black));
}

div.column[data-columns="4"] > h3 + h4 {
	padding-block-start: var(--padding);
}

div.column[data-columns="4"] > p:not(:has(+ *:not(p))):not(:last-child) {
	padding-block-end: 0;
}

div.column[data-columns="4"] > p + p {
	padding-block-start: 0;
}

div.column[data-columns="4"] > p {
	position: relative;
}


@media screen and (min-width: 900px) {
	div.column[data-columns="2"] {
		grid-column: span 2;
	}	

	div.column[data-columns="4"] {
		grid-template-columns: inherit;
	}

	div.column[data-columns="4"] > * {
		grid-column: 3 / 5;
		position: relative;
	}

	div.column[data-columns="4"] > :is(h2, h3, h4) {
		text-wrap: balance;
	}

	div.column[data-columns="4"] > h2 {
		grid-column: 1 / 5;
	}

	div.column[data-columns="4"] > h2 + p {
		grid-column: 1 / 3;
	}

	div.column[data-columns="4"] > h3 {
		grid-column: 1 / 3;
		border-block-start: none;
		position: relative;
		text-wrap: balance;
	}

	div.column[data-columns="4"] > h3::before {
		border-block-start: var(--border-width) solid rgb(var(--black));
		content: '';
		position: absolute;
		inset: 0;
		inline-size: 100vw;
		pointer-events: none;
	}

	div.column[data-columns="4"] > *:not(h2, h3, h2 + p)::before {
		content: '';
		position: absolute;
		inset: 0;
		border-inline-start: var(--border-width) solid rgb(var(--black));
		pointer-events: none;
	}

	div.column[data-columns="4"] > p + p::before {
		inset-block-start: -.5rem;
	}
}


div.column > details {
	padding: var(--padding);
}

div.column > details:is(:hover, :focus-within) {
	background-color: rgb(var(--black));
	color: rgb(var(--light-grey));
}

div.column > details:not(:first-child) {
	border-block-start: var(--border-width) solid rgb(var(--black));
}

details > summary::marker { 
	display: none; 
	content: "";
}

details summary > h2 {
	display: inline-block;
}

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

img {
	object-fit: cover;
}

footer {
	display: grid;
	padding-inline: calc(var(--padding) / 2);
  	inline-size: 100%;
	font-size: .8em;
	text-transform: uppercase;
	letter-spacing: .02em;
	position: relative;
	align-self: flex-end;
}

footer > * {
	position: relative;
	padding-block: calc(var(--padding) / 2);
}

body.home footer > a.logo {
	padding-block: 0;
}

footer ul {
	list-style: none;
}

footer ul a {
	text-decoration: none;
}

footer ul a:hover {
	font-weight: 600;
}

footer ul a:focus-visible {
	background: rgb(var(--purple));
	color: rgb(var(--light-grey));
}

header {
	position: fixed;
	inset: auto;
	inset-block-start: var(--padding);
	inset-inline-start: var(--padding);
	z-index: 666;
}

footer a.logo {
	place-self: flex-end;
}

@media screen and (max-width: 49.99rem) {
	body.home > footer {
		border-block-start: var(--border-width) solid rgb(var(--black));
	}

	body.default nav.main {
		inset-block-start: calc(2.25 * var(--padding));
	}

	footer {
		background-color: rgb(var(--light-grey));
		border-inline: var(--border-width) solid rgb(var(--black));
		border-block-end: var(--border-width) solid rgb(var(--black));
	}

	footer > *:not(:first-child, a.logo)::before {
		content: '';
		position: absolute;
		inset-inline: calc(-.5 * var(--padding));
		inset-block-start: 0;
		border-block-start: var(--border-width) solid rgb(var(--black));
	}

	footer a.logo {
		position: absolute;
		inset-block-start: 0;
		inset-inline-end: calc(var(--padding) / 2);
	}
}

@media screen and (min-width: 50rem) {
	footer {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		align-items: center;
		line-height: 1.1;
		padding: var(--padding);
	}

	footer > a.logo {
		align-self: center;
		justify-self: flex-end;
		margin-inline-end: var(--padding);
		padding-block: 0;
		position: absolute;
	}

	body.home footer {
		position: fixed;
		inset-block-start: 0;
		block-size: 4.75rem;
		z-index: -2;
	}
}

body.home .background-rendering {
	position: fixed;
	inset: 0;
	z-index: -3;
	transform: skew(var(--skewX, 0deg), var(--skewY, 0deg));
	inset: -3%;
	inline-size: 106%;
	block-size: 106%;
}

body.home > header {
	inset-inline-end: var(--padding);
}

@media screen and (min-width: 50rem) {
	body.home > header {
		inset-inline-start: auto;
	}

	body.home nav.main {
		inset-block-start: calc(5 * var(--padding));
		inset-inline-start: 0;
	}
}

body.home > main > article {
	margin-block-start: calc(100vh - 3.5rem);
	container-type: inline-size;
	container-name: timetable;
}

body.home > main > article > * {
	grid-column: span 4;
	display: grid;
}

body.home > main > article > *:not(.tabPanels) {
	background-color: rgb(var(--light-grey));
	grid-template-columns: inherit;
}

body.home:has(h2#program) {
	scroll-padding-block-start: 15rem;
}

h2#program {
	position: relative;
}

h2#program > a {
	text-decoration: none;
}

h2#program:has(> a:focus-visible) {
	background-color: rgb(var(--purple));
	color: rgb(var(--light-grey));
}

h2#program > a::after {
	content: '';
	inset: 0;
	position: absolute;
}

body.home h2:not(.cookie-modal__title) {
	border: var(--border-width) solid rgb(var(--black));
	border-block-end: none;
	font-size: var(--text-font-size);
	font-weight: 400;
	padding: calc(var(--padding) / 2);
	block-size: 3.5rem;
	scroll-margin-block-start: 6.7rem;
}

ul.tabList li {
	display: grid;
	border: var(--border-width) solid rgb(var(--black));
	block-size: clamp(2.5rem, 12.5vw, 9.5rem);
}

ul.tabList li:not(:first-child) {
	border-inline-start: none;
}

ul.tabList a {
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: calc(var(--padding) / 4) calc(var(--padding) / 2);
}

ul.tabList a:is(:hover, :focus-visible, [aria-selected="true"]) {
	background-color: rgb(var(--black));
	color: rgb(var(--light-grey));
}

ul.tabList a[aria-selected="true"]:focus-visible {
	background-color: rgb(var(--purple));
}

ul.tabList a span.month-long {
	display: none;
}

ul.tabList a {
	container: months / inline-size;
}

@container months (min-inline-size: 12ch) {
	ul.tabList a span.month-short {
		display: none;
	}

	ul.tabList a span.month-long {
		display: inline-block;
	}
}

@container timetable (min-inline-size: 34rem) {
	div.tabPanels {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	div.event div.date {
		flex-direction: column;
	}
}

@container timetable (34rem <= inline-size < 55rem) {
	div.event div.date {
		grid-row: 1 / span 2;
	}

	div.line-up {
		grid-column-start: 2;
		align-self: flex-end;
	}
}

@container timetable (min-inline-size: 55rem) {
	div.tabPanels {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

div.tabPanels > div {
	grid-column: span 4;
}

div[role="tabpanel"], div.event {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	position: relative;
}

div.event {
	grid-column: span 4;
	overflow: hidden;
	border-block-start: var(--border-width) solid rgb(var(--black));
	position: relative;
	min-block-size: 2vw;
	transition: min-block-size var(--500ms, 0);
	grid-template-rows: auto;
}

/* @media screen and (min-width: 600px) { */
@container timetable (min-inline-size: 34rem) {
	div[role="tabpanel"], div.event {
		grid-template-columns: inherit;
	}

	div.event {
		block-size: clamp(7.5rem, 15.25vw, 9.5rem);
		min-block-size: 2vw;
	}
}

@container timetable (min-inline-size: 55rem) {
	div.event {
		block-size: clamp(2.5rem, 12.5vw, 9.5rem);
	}
}

div.event:first-child {
	border-block-start: none;
}

/* @media screen and (min-width: 600px) { */
@container timetable (min-inline-size: 34rem) {

	div.event:is(:hover, :focus-visible, :focus-within) {
		color: var(--color, rgb(var(--light-grey)));
		block-size: auto;
		min-block-size: 25vw;
		min-block-size: 31.1vw;
		transition: min-block-size var(--250ms, 0);
	}

	@media (prefers-color-scheme: dark) {
		body:not(:has(input#light:checked)) div.event:is(:hover, :focus-visible, :focus-within) {
			color: var(--color, rgb(var(--black)));
		}
	}

	body:has(input#dark:checked) div.event:is(:hover, :focus-visible, :focus-within) {
		color: var(--color, rgb(var(--black)));
	}

	div.event:is(:hover, :focus-visible, :focus-within)::before {
		background-position: center;
		opacity: 1;
		transition: opacity var(--250ms, 0);
	}
}

div.event::before {
	content: '';
	position: absolute;
	inset: -20px;
	background-image: var(--bg, image-set(
		url(/assets/images/event.avif) type("image/avif"),
		url(/assets/images/event.webp) type("image/webp"),
		url(/assets/images/event.jpg) type("image/jpeg")  	
	)); 
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 0;
	z-index: -1;
	filter: blur(15px);
	transition: opacity var(--50ms, 0);
}

div.event.default::before {
	filter: none;
}

div.event::after {
	content: '';
	position: absolute;
	inset: 0;
	background-color: rgb(var(--light-grey));
	z-index: -1;
}

div.event > * {
	padding: calc(var(--padding) / 2);
	border-inline: var(--border-width) solid rgb(var(--black));
  	border-block-start: none;
	overflow: hidden;
	grid-column: span 2;
}

div.event h3 {
	order: 3;
	font-size: 1.8rem;
  	line-height: .9;
	hyphens: manual;
}

/* @media screen and (min-width: 600px) { */
@container timetable (min-inline-size: 34rem) {

	div.event::after {
		border-inline: var(--border-width) solid rgb(var(--black));
		z-index: -2;
	}

	div.event > * {
		grid-column: span 1;
	}

	div.event > *:not(.date) {
		border-inline-start: none;
	}	

	div.event h3.small {
		font-size: 1.4rem;
	}

	div.event h3.big {
		font-size: 3.6rem;
	}
}

div.event h3 + picture {
	order: 2;
	padding: 0;
}

div.event div.date {
	block-size: 100%;
	display: flex;
	justify-content: space-between;
	order: 1;
}

div.event div.date time {
	display: flex;
	font-size: clamp(5vw, 15rem, 17.5vw);
	line-height: .8;
	letter-spacing: -.05em;
	margin-inline-end: .5rem;
}

div.event div.date time span {
	padding-inline: .05em;
	transform: translateY(-.1ex);
}

div.event div.date time span[data-kern="true"] {
	display: inline;
	margin-inline-end: -.1em;
}

/* @media screen and (min-width: 600px) { */
@container timetable (min-inline-size: 34rem) {

	div.event h3 + picture {
		display: none;
	}

	div.event div.date {
		block-size: 100%;
		display: flex;
		order: 1;
	}

	div.event div.date time {
		display: inline;
	}

	div.event div.date > span {
		padding-inline: 0;
		display: none;
	}

	div.event:is(:hover, :focus-visible,:focus-within) div.date > span {
		display: block;
	}

	div.event div.date time span[data-kern="true"] {
		vertical-align: .1ex;
	}
}

div.event div.date > span {
	font-size: .8rem;
	line-height: 1.2;
	letter-spacing: 0;
}

div.event div.lineup {
	font-size: .8rem;
	order: 3;
}

div.event div.lineup a {
	text-decoration: none;
	white-space: nowrap;
}

div.event div.social:has(> a:focus-visible) {
	background-color: rgb(var(--purple));
	color: rgb(var(--black));
}

div.event div.social a:focus-visible svg {
	fill: rgb(var(--light-grey));
	color: rgb(var(--light-grey));
}

div.event div.lineup a:focus-visible {
	background-color: rgb(var(--light-grey));
	background-color: rgb(var(--purple));
	color: rgb(var(--light-grey));
	padding: .1em .2em;
}

div.event ul.floors {
	order: 4;
	list-style: none;
	text-transform: uppercase;
	letter-spacing: .03em;
	line-height: 1.25;
	display: flex;
	flex-wrap: wrap;
	font-size: .8rem;
	place-content: flex-start;
}

div.event ul.floors li:has( + li:last-of-type)::after {
	content: '&';
	margin-inline: .25em;
}

div.event ul.floors li:has( + li:not(:last-of-type))::after {
	content: ',';
	margin-inline-end: .25em;
}

/* @media screen and (max-width: 599px) { */
@container timetable (inline-size < 34rem) {
	div.event div.date {
		grid-row-start: 1;
	}

	div.event h3 + picture {
		grid-row-start: 2;
	}

	div.event h3 + picture img {
		aspect-ratio: var(--width) / var(--height);
	}
	
	div.event h3 {
		grid-row-start: 3;
	}

	div.event div.lineup {
		grid-row-start: 4;
	}

	div.event :is(.floors, .social) {
		grid-row-start: 5;
		grid-column: span 1;
	}

	div.event div.social:has(~ ul.floors) {
		border-inline-end: none;
	}

	div.event ul.floors {
		border-inline-start: none;
		align-content: center;
	}

	div.event .social > * {
		justify-self: flex-end;
	}
}

div.social {
	order: 4;
}

/* @media screen and (min-width: 600px) { */
@container timetable (min-inline-size: 34rem) {
	div.social {
		position: absolute;
		justify-self: flex-end;
		z-index: 0;
		border-inline-start: none;
	}	

	ul.floors {
		padding-inline-end: 3.2rem;
		
	}
}

div.social svg {
	block-size: 100%;
	inline-size: 100%;
}

div.social a {
	display: block;
	block-size: 1.6rem;
	inline-size: 1.6rem;
}

div.tabPanels div.selected, div[aria-hidden="false"] {
	display: grid;
}

div.tabPanels div.selected {
	scroll-margin-block-start: 12.7rem;
}

.hide, div[aria-hidden="true"], div.tabPanels > div:not([aria-hidden]) {
	display: none;
}

/* @media screen and (min-width: 600px) { */
@container timetable (min-inline-size: 34rem) {
	div.event > *:is(:hover, :focus-within),
	div.event:has(div.social:is(:hover, :focus-within)) ul.floors {
		background-color: rgba(var(--black), .8);
		color: rgb(var(--light-grey));
	}

	@media (prefers-color-scheme: dark) {
		body:not(:has(input#light:checked)) div.event > *:is(:hover, :focus-within),
		body:not(:has(input#light:checked)) div.event:has(div.social:is(:hover, :focus-within)) ul.floors {
			background-color: rgba(var(--light-grey), .8);
			color: rgb(var(--black));
		}
	}

	body:has(input#dark:checked) div.event > *:is(:hover, :focus-within),
	body:has(input#dark:checked) div.event:has(div.social:is(:hover, :focus-within)) ul.floors {
		background-color: rgba(var(--light-grey), .8);
		color: rgb(var(--black));
	}
}

@container timetable (34rem <= inline-size < 55rem) {
	div.event h3 {
		padding-inline-end: 2.5rem;
	}

	div.event > h3:is(:hover, :focus-within) ~ div.lineup,
	div.event:has(div.lineup:is(:hover, :focus-within)) > h3 {
		background-color: rgba(var(--black), .8);
		color: rgb(var(--light-grey));
	}

	div.event:not(.default) > h3:is(:hover, :focus-within) ~ div.lineup,
	div.event:not(.default):has(div.lineup:is(:hover, :focus-within)) > h3 {
		background-color: rgba(var(--black), .8);
		color: rgb(var(--light-grey));
	}

	@media (prefers-color-scheme: dark) {
		body:not(:has(input#light:checked)) div.event > h3:is(:hover, :focus-within) ~ div.lineup,
		body:not(:has(input#light:checked)) div.event:has(div.lineup:is(:hover, :focus-within)) > h3 {
			background-color: rgba(var(--light-grey), .8);
			color: rgb(var(--black));
		}
		
		body:not(:has(input#light:checked)) div.event:not(.default) > h3:is(:hover, :focus-within) ~ div.lineup,
		body:not(:has(input#light:checked)) div.event:not(.default):has(div.lineup:is(:hover, :focus-within)) > h3 {
			background-color: rgba(var(--light-grey), .8);
			color: rgb(var(--black));
		}
	}

	body:has(input#dark:checked) div.event > h3:is(:hover, :focus-within) ~ div.lineup,
	body:has(input#dark:checked) div.event:has(div.lineup:is(:hover, :focus-within)) > h3 {
		background-color: rgba(var(--light-grey), .8);
		color: rgb(var(--black));
	}

	body:has(input#dark:checked) div.event:not(.default) > h3:is(:hover, :focus-within) ~ div.lineup,
	body:has(input#dark:checked) div.event:not(.default):has(div.lineup:is(:hover, :focus-within)) > h3 {
		background-color: rgba(var(--light-grey), .8);
		color: rgb(var(--black));
	}

	div.event:not(.default) > div.date:is(:hover, :focus-within) {
		background-image: var(--bg);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: right center;
	}

	div.lineup {
		display: grid;
		align-items: flex-end;
	}
}

@container timetable (min-inline-size: 55rem) {
	div.event:not(.default) > h3:is(:hover, :focus-within) {
		background-image: var(--bg);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		color: transparent !important;
	}
}

div.event > *:is(:hover, :focus-within) + div.social svg path {
	fill: rgb(var(--light-grey));
}

/***** LEGAL *****/

body.legal {
	counter-reset: section;
}
    
body.legal h2::before {
	counter-increment: section;
	content: counter(section) ". ";
}

/***** COOKIES *****/

dialog.cookie-modal__content {
	background-color: rgb(var(--light-grey));
	color: rgb(var(--black));
}

button.cookies-button {
	background: none;
	border: var(--border-width) solid rgb(var(--black));
	line-height: 1;
	padding: calc(.5 * var(--padding)) var(--padding);
	padding: calc(var(--padding) / 1.5) calc(var(--padding) / 1);
	color: rgb(var(--black));
}

button.cookies-button:is(:hover, :focus-visible) {
	background-color: rgb(var(--black));
	color: rgb(var(--color, var(--light-grey)));
}

button.cookies-button:focus-visible {
	background-color: rgb(var(--purple));
	border-color: rgb(var(--purple));
}

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

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