/* @group FONTS */

@font-face {
  font-family: 'Antonio';
  src: url('../fonts/Antonio-VariableFont_wght.woff2') format('woff2 supports variations'),
       url('../fonts/Antonio-VariableFont_wght.woff2') format('woff2-variations');
  font-weight: 100 700;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Flex';
  src: url('../fonts/RobotoFlex-VariableFont_opsz,wght.woff2') format('woff2 supports variations'),
       url('../fonts/RobotoFlex-VariableFont_opsz,wght.woff2') format('woff2-variations');
  font-weight: 100 1000;
  font-display: swap;
}

/* @end */

/* @group VARIABLES */

:root {
	
	--font-family: 'Roboto Flex', Helvetica, Arial, sans-serif;
	--font-family-heading: 'Antonio', Arial Narrow, Helvetica, Arial, sans-serif;
	
	--font: 					400 20px/1.4rem var(--font-family);
	--font-h1: 				700 clamp(3rem, 8vw, 4rem)/1em var(--font-family-heading);
	--font-h2: 				700 1.8rem/1.2em var(--font-family-heading);
	--font-menu: 			700 2.5rem/1.1em var(--font-family-heading);
	--font-submenu:		700 1.8rem/1.1em var(--font-family-heading);
	--font-uppercase:	700 18px/1.4rem var(--font-family);
	
	--font-weight-bold: 650;
	--font-size-bold: 1.06em;
	
	--spacing-inline-md: clamp(1rem, 3vw, 1.5rem);
	
	--spacing-block-md: .75rem;
	--spacing-block-lg: 2rem;
	--spacing-block-xl: 5rem;
}

	@media (max-width: 999px) {
		
		:root	{
			
		}
		
	}

/* @group Colors */

@property --color-base {
  syntax: "<color>";
  inherits: true;
  initial-value: #000000;
}

@property --color-primary {
  syntax: "<color>";
  inherits: true;
  initial-value: #D09C16;
}

@property --color-white {
  syntax: "<color>";
  inherits: true;
  initial-value: #FFFFFF;
}

@property --color-black {
  syntax: "<color>";
  inherits: true;
  initial-value: #000000;
}

/* @end */

/* @end */

/* @group BASE */

html,
body {
	min-width: 320px;
	font: var(--font);
}

img {
	max-width: 100%;
	height: auto;
}

strong {
	font-size: var(--font-size-bold);
	font-weight: var(--font-weight-bold);
}

h1 {
	font: var(--font-h1);
	text-transform: uppercase;
}

* + h1 {
	margin-top: 1em;
}

h1:has(+ *) {
	margin-bottom: .5em;
}

h2 {
	font: var(--font-h2);
	text-transform: uppercase;
}

* + h2 {
	margin-top: 1em;
}

h2:has(+ *) {
	margin-bottom: 1rem;
}

h3 {
	font: var(--font-uppercase);
	text-transform: uppercase;
	letter-spacing: .03em;
}

* + h3 {
	margin-top: 1.5em;
}

h3:has(+ *) {
	margin-bottom: .5em;
}

p:has(+ *) {
	margin-bottom: 1em;
}

p:has(+ ul) {
	margin-bottom: .5em;
}

/* @group Lists */

.content ul:not([class]):has(+ *) {
    margin-bottom: 1em;
}

	.content ul:not([class]) li {
	   display: flex;
	}
	
		.content ul:not([class]) li::before {
	    content: "•";
	    flex: 0 0 1.25em;
			padding-right: .25em;
			text-align: center;
		}
	
	.content ul:not([class]) li:has(+ li) {
	   margin-bottom: .5em;
	}
	
ol {
  counter-reset: counter;
}

ol:has(+ *) {
	margin-bottom: 1em;
}

	ol li {
		display: table;
	  counter-increment: counter;
	}
	
		ol li::before {
		  content: counter(counter) ".";
	    display: table-cell;
	    width: 2em;
			padding-right: .3em;
			text-align: right;
		}

/* @end */

/* @group Links */

.content a {
	text-decoration: underline;
	text-decoration-color: var(--color-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: .1em;
}

.content h3 a {
	color: var(--color-primary);
	text-decoration: none;
}

.event a,
.footer a {
	color: var(--color-primary);
	font-size: 18px;
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.event a {
	text-decoration-color: transparent;
}

.event a:hover {
	text-decoration-color: currentColor;
}

.footer a.active {
	color: var(--color-base);
}

/* @end */

/* @end */

/* @group Header */
	
	@media (max-width: 999px) {
		
			.header .banner {
				position: fixed;
				z-index: 10;
				top: 0;
				right: 0;
				left: 0;
			}
		
	}
	
	@media (min-width: 1000px) {
		
			.header .menu {
				display: none;
			}
		
	}

/* @end */

/* @group Banner */

.banner {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding-inline: var(--spacing-inline-md);
	padding-block: var(--spacing-block-md);
	transition: padding .3s ease-in-out 0s;
}

.banner.scrolled,
.banner.open {
	align-items: center;
	padding-block: .25rem;
	background-color: var(--color-base);
}

	@media (min-width: 1000px) {
		
		.banner {
			position: fixed;
			z-index: 10;
			top: 0;
			right: 60%;
			padding-block: var(--spacing-block-md);
			padding-inline: var(--spacing-inline-md);
		}
		
	}

/* @end */

/* @group Title */

.title {
	max-width: 6em;
	color: var(--color-white);
	font-family: var(--font-family-heading);
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	text-align: right;
}

	.title.scrolled,
	.title.open {
		max-width: 100%;
		margin-top: -.1em;
		font-size: 1.8rem;
	}
	
	@media (max-width: 999px) {
		
		.title {
			font-size: clamp(3rem, 10vw, 5rem);
		}
		
	}
	
	@media (min-width: 1000px) {
		
		.title {
			font-size: 5rem;
			text-shadow: 0 0 .1em rgba(0,0,0,.5);
		}
		
	}

/* @end */

/* @group Toggle */

.toggle {
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--color-white);
	text-align: center;
}

	@media (min-width: 1000px) {
		
		.toggle {
			display: none;
		}
		
	}

/* @group Hamburger */

.hamburger {
	position: relative;
	width: 2.5rem;
	height: 2.5rem;
	color: var(--color-white);
}

	.hamburger > * {
		display: block;
		position: absolute;
		top: 50%;
		height: .2em;
		width: 100%;
		background-color: currentColor;
		transition: all 300ms ease-in-out 0s;
		transform: translateY(-50%);
	}
	
	.hamburger > *:nth-child(1) {
		transform: translateY(calc(-50% + .6em));
	}

	.hamburger > *:nth-child(3) {
		transform: translateY(calc(-50% - .6em));
	}
	
	.hamburger.open > *:nth-child(1),
	.hamburger.open > *:nth-child(3) {
		margin-inline: auto;
	}
	
	.hamburger.open > *:nth-child(1) {
		transform: rotate(45deg);
	}
	
	.hamburger.open > *:nth-child(2) {
		opacity: 0;
	}
	
	.hamburger.open > *:nth-child(3) {
		transform: rotate(-45deg);
	}

/* @end */

/* @end */

/* @group Menu & Submenu */

.menu {
	display: flex;
	column-gap: 1rem;
	row-gap: 1rem;
	color: var(--color-primary);
	font: var(--font-menu);
	text-transform: uppercase;
}

.submenu {
	display: flex;
	column-gap: 1rem;
	font: var(--font-submenu);
	text-transform: uppercase;
}
	
	@media (max-width: 999px) {
		
		.menu,
		.submenu {
			flex-direction: column;
		}
		
		.menu {
			position: fixed;
			z-index: 8;
			top: 0;
			right: 0;
			left: 0;
			padding-top: 1.5rem;
			padding-bottom: 3rem;
			padding-inline: var(--spacing-inline-md);
			background-color: var(--color-black);
			transform: translateY(-100%);
			transition: transform .3s ease-in-out 0s;
		}
		
		.menu.open {
			top: 3rem;
			transform: translateY(0);
		}
		
			.menu a.active {
				color: var(--color-white);
			}
			
		.submenu {
			row-gap: .2em;
			margin-top: .2em;
		}
	
	}
	
	@media (min-width: 1000px) {
		
		.menu {
			margin-top: 3.1rem;
		}
			
		.submenu {
			flex-wrap: wrap;
			row-gap: .25rem;
			margin-top: .25rem;
			color: var(--color-primary);
		}
		
			.menu a.active,
			.submenu a.active {
				color: var(--color-base);
			}
		
	}

/* @end */

/* @group Overlay */

.overlay {
	position: fixed;
	z-index: 1;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	display: none;
	background-color: var(--color-black);
	opacity: 0;
	transition: opacity .2s ease-in-out 0s;
}

	.overlay.open {
		display: block;
		opacity: .5;
	}

/* @end */

/* @group Cover */

.cover {
	
}

	.cover img {
		width: 100%;
		object-fit: cover;
	}
	
	@media (max-width: 999px) {
		
			.cover img {
				max-height: 70vh;
			}
		
	}

	@media (min-width: 1000px) {
		
		.cover {
			position: fixed;
			top: 0;
			left: 0;
			width: 40%;
			height: 100vh;
		}
		
			.cover img {
				width: 100%;
				height: 100%;
			}
		
	}


/* @end */

/* @group Main */

.main {
	padding-inline: var(--spacing-inline-md);
}

	@media (max-width: 999px) {
		
		.main {
			margin-top: 1.5rem;
		}
		
			.main .menu,
			.main .submenu {
				display: none;
			}
		
	}
	
	@media (min-width: 1000px) {
		
		.main {
			margin-left: 40%;
			padding-inline: 2rem;
		}
		
	}

/* @end */

/* @group Content */

.content {
	max-width: 40rem;
}

	.content * + figure {
		margin-top: 3rem;
	}
	
	.content figure:has(+ *) {
		margin-bottom: 3rem;
	}

	.content figure.portrait {
		max-width: 400px;
	}

	@media (min-width: 1000px) {
		
		.content {
			margin-top: 5.5rem;
		}
		
			.content .page-title {
				display: none;
			}
		
	}

/* @end */

/* @group Events */

.events {
	border-top: 2px solid currentColor;
}

.event {
	display: grid;
	column-gap: 1rem;
	padding-top: .5rem;
	padding-bottom: 1rem;
	border-bottom: 2px solid currentColor;
}

	.event__date,
	.event__city {
		margin-bottom: .25rem;
		font: var(--font-h2);
	}
	
	.event__city {
		overflow-wrap: anywhere;
		text-transform: uppercase;
	}
	
	.event__show {
		margin-bottom: .25rem;
		font-size: var(--font-size-bold);
		font-weight: var(--font-weight-bold);
	}

	@media (max-width: 699px) {
		
		.event {
			grid-template-columns: 4rem 1fr;
		}
		
			.event > *:last-child {
				grid-column: 2;
			}
			
			.event__location {
				margin-bottom: .25rem;
			}
		
	}
	
	@media (min-width: 700px) {
		
		.event {
			grid-template-columns: 6rem 3fr 2fr;
		}
		
			.event > *:last-child {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
			
			.event__show,
			.event__tickets {
				text-align: right;
			}
		
	}

/* @end */

/* @group Footer */

.footer {
	display: flex;
	column-gap: 1rem;
	row-gap: .5rem;
	padding-top: var(--spacing-block-xl);
	padding-bottom: var(--spacing-block-lg);
	padding-inline: var(--spacing-inline-md);
}
	
	@media (min-width: 1000px) {
		
		.footer {
			margin-left: 40%;
			padding-inline: 2rem;
		}
		
	}

/* @end */