@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;500;600;700;800&display=swap');


/* ----------------------------------------------------- Base Font Styles ------------------------------------------------- */

html,
body {
	font-family: "Montserrat", Arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
}


p {
	margin-top: 0;
	margin-bottom: 1.5rem;
}

strong,
b {
	font-weight: 700;
}


/* ----------------------------------------------------- Heading Styles ------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-top: 0;
	margin-bottom: 1rem;
	font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.015em;
	text-transform: uppercase;
}

h1 {
	margin: 0;
	font-size: clamp(5rem, 14vw, 10.5rem);
	line-height: 0.78;
	letter-spacing: 0.015em;
	text-shadow:
		0 0 8px rgba(255, 255, 255, 0.65),
		0 0 18px rgba(142, 43, 132, 0.8),
		0 5px 18px rgba(0, 0, 0, 0.85);
}

h1 span {
	display: block;
}

h2 {
	font-size: clamp(3.5rem, 7vw, 5.5rem);
	line-height: 0.9;
}

h3 {
	font-size: clamp(2.75rem, 5vw, 4rem);
}

h4 {
	font-size: clamp(2.25rem, 4vw, 3rem);
}

h5 {
	font-size: clamp(1.8rem, 3vw, 2.4rem);
}

h6 {
	font-size: clamp(1.5rem, 2.5vw, 2rem);
}


/* ----------------------------------------------------- Eyebrow Styles ------------------------------------------------- */

.eyebrow {
	margin: 0 0 4px;
	font-family: "Montserrat", Arial, sans-serif;
	font-size: clamp(1rem, 2.2vw, 2rem);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.045em;
	text-transform: uppercase;
	text-shadow: 0 2px 7px #000000;
}


/* ----------------------------------------------------- Lead Text Styles ------------------------------------------------- */

.lead {
	font-size: clamp(1.15rem, 2vw, 1.4rem);
	font-weight: 400;
	line-height: 1.6;
}


/* ----------------------------------------------------- Display Text Styles ------------------------------------------------- */

.display-text {
	font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
	font-size: clamp(4rem, 9vw, 7rem);
	font-weight: 400;
	line-height: 0.85;
	letter-spacing: 0.015em;
	text-transform: uppercase;
}


/* ----------------------------------------------------- Event Detail Styles ------------------------------------------------- */

.details {
	font-size: clamp(2rem, 2vw, 1.45rem);
	line-height: 1.55;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95);
}

.details strong {
	font-weight: 800;
}

.refreshments {
	font-size: clamp(1.15rem, 2.5vw, 1.7rem);
	font-weight: 800;
	text-transform: uppercase;
}

.prices {
	font-size: clamp(0.95rem, 2vw, 1.4rem);
}


/* ----------------------------------------------------- Ticket Release Styles ------------------------------------------------- */

.release {
	font-size: clamp(1rem, 2.4vw, 1.5rem);
	font-weight: 800;
	letter-spacing: 0.035em;
	text-transform: uppercase;
}


/* ----------------------------------------------------- Note Styles ------------------------------------------------- */

.note {
	font-size: 0.98rem;
}

.footer-note {
	font-size: 0.76rem;
	line-height: 1.55;
}


/* ----------------------------------------------------- Small Text Styles ------------------------------------------------- */

.small,
small {
	font-size: 0.875rem;
	line-height: 1.5;
}


/* ----------------------------------------------------- Link Styles ------------------------------------------------- */

a {
	color: inherit;
	font-weight: 600;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

a:hover,
a:focus-visible {
	opacity: 0.75;
}



/* ----------------------------------------------------- Button Font Styles ------------------------------------------------- */

.btn,
button,
input[type="submit"] {
	font-family: "Montserrat", Arial, sans-serif;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}


/* ----------------------------------------------------- Navigation Font Styles ------------------------------------------------- */

nav,
.menu,
.main-menu {
	font-family: "Montserrat", Arial, sans-serif;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}


/* ----------------------------------------------------- Date / Event Display Styles ------------------------------------------------- */

.date-display,
.event-date,
.date-card {
	font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
	font-size: clamp(2rem, 6vw, 4.2rem);
	font-weight: 400;
	line-height: 0.82;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}


/* ----------------------------------------------------- Font Utility Styles ------------------------------------------------- */

.text-uppercase {
	text-transform: uppercase;
}

.text-center {
	text-align: center;
}

.font-medium {
	font-weight: 500;
}

.font-semibold {
	font-weight: 600;
}

.font-bold {
	font-weight: 700;
}

.font-extrabold {
	font-weight: 800;
}


/* ----------------------------------------------------- 2200px + ------------------------------------------------- */

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

}


/* ----------------------------------------------------- Smaller than 2200px ------------------------------------------------- */

@media only screen and (max-width: 2200px) {

}


/* ----------------------------------------------------- Smaller than 1800px ------------------------------------------------- */

@media only screen and (max-width: 1800px) {

}


/* ----------------------------------------------------- Smaller than 1750px ------------------------------------------------- */

@media only screen and (max-width: 1750px) {

}


/* ----------------------------------------------------- Smaller than 1650px ------------------------------------------------- */

@media only screen and (max-width: 1650px) {

}


/* ----------------------------------------------------- Smaller than 1550px ------------------------------------------------- */

@media only screen and (max-width: 1550px) {

}


/* ----------------------------------------------------- Smaller than 1450px ------------------------------------------------- */

@media only screen and (max-width: 1450px) {

}


/* ----------------------------------------------------- Smaller than 1350px ------------------------------------------------- */

@media only screen and (max-width: 1350px) {

}


/* ----------------------------------------------------- Smaller than 1250px ------------------------------------------------- */

@media only screen and (max-width: 1250px) {

}


/* ----------------------------------------------------- Smaller than 1125px ------------------------------------------------- */

@media only screen and (max-width: 1125px) {

}


/* ----------------------------------------------------- Smaller than 1080px ------------------------------------------------- */

@media only screen and (max-width: 1080px) {

}


/* ----------------------------------------------------- Smaller than 1024px - iPad Landscape ------------------------------------------------- */

@media only screen and (max-width: 1024px) {

}


/* ----------------------------------------------------- Smaller than 991px ------------------------------------------------- */

@media only screen and (max-width: 991px) {

	p,
	ul,
	ol {
		font-size: 16px;
	}

}


/* ----------------------------------------------------- Smaller than 870px ------------------------------------------------- */

@media only screen and (max-width: 870px) {

}


/* ----------------------------------------------------- Smaller than 800px ------------------------------------------------- */

@media only screen and (max-width: 800px) {

}


/* ----------------------------------------------------- Smaller than 767px ------------------------------------------------- */

@media only screen and (max-width: 767px) {

	html,
	body {
		font-size: 15px;
	}

	h1 {
		font-size: clamp(4.5rem, 24vw, 7.2rem);
	}

	h2 {
		font-size: clamp(3rem, 15vw, 4.5rem);
	}

	h3 {
		font-size: clamp(2.5rem, 11vw, 3.5rem);
	}

}


/* ----------------------------------------------------- Smaller than 700px ------------------------------------------------- */

@media only screen and (max-width: 700px) {

}


/* ----------------------------------------------------- Smaller than Mobile ------------------------------------------------- */

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

}


/* ----------------------------------------------------- Smaller than 540px ------------------------------------------------- */

@media only screen and (max-width: 540px) {

}


/* ----------------------------------------------------- Smaller than 420px ------------------------------------------------- */

@media only screen and (max-width: 420px) {

}