/*
Theme Name: Klub51
Theme URI:
Author:
Author URI:
Description: Custom theme for Klub51
Version: 1.0.0
Text Domain: klub
*/

/* ==========================================================
   VARIABLES
   ========================================================== */

:root {
	/* Brand */
	--black: #191919;
	--red: #ff0000;
	--grey: #9b8f8b;
	--white: #fff;
	/* Typography */
--font-body: "hanken-grotesk", sans-serif;
--font-display: "hanken-grotesk", sans-serif;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-bold: 700;
	/* Fluid type */
	--text-sm: clamp(0.875rem, 0.84rem + 0.15vw, 1rem);
	--text-base: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
	--text-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
	--text-xl: clamp(1.75rem, 1.3rem + 1.8vw, 3rem);
	--text-2xl: clamp(2.5rem, 1.5rem + 4vw, 6rem);
	--text-huge: clamp(4rem, 1rem + 10vw, 12rem);
	/* Fluid spacing */
	--space-xs: clamp(0.5rem, 0.45rem + 0.2vw, 0.75rem);
	--space-sm: clamp(0.75rem, 0.65rem + 0.4vw, 1rem);
	--space-md: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
	--space-lg: clamp(1.5rem, 1rem + 2vw, 3rem);
	--space-xl: clamp(2.5rem, 1.5rem + 4vw, 5rem);
	--space-2xl: clamp(4rem, 2rem + 7vw, 9rem);
	/* Layout */
	--site-width: 90rem;
	--text-width: 45rem;
	--gutter: clamp(1rem, 3vw, 3rem);

--title-spacing: .3em;
}

/* ==========================================================
   RESET
   ========================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

ul,
ol {
	margin: 0;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

img,
video {
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
}

button {
	cursor: pointer;
}

textarea {
	resize: vertical;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* ==========================================================
   DOCUMENT
   ========================================================== */

html {
	background: var(--black);
	color: var(--white);
	font-family: var(--font-body);
	font-size: 100%;
	line-height: 1.5;
}

body {
	min-height: 100vh;
	min-height: 100dvh;
	background: var(--black);
	color: var(--white);
	font-size: var(--text-base);
	-webkit-font-smoothing: antialiased;
}

/* ==========================================================
   TYPOGRAPHY
   ========================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-display);
	font-weight: var(--font-weight-light);
	line-height: 1;
	letter-spacing: var(--title-spacing);
	text-transform: uppercase;
	text-wrap: balance;
}

h1 {
	font-size: var(--text-2xl);
}

h2 {
	font-size: var(--text-xl);
}

h3 {
	font-size: var(--text-lg);
}

p {
	text-wrap: pretty;
}

a {
	color: inherit;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.15em;
}

a:hover {
	color: var(--red);
}

strong,
b {
	font-weight: 700;
}

.heading-heavy {
	font-weight: var(--font-weight-bold);
}
.text-small {
	font-size: 0.8em;
}
/* ==========================================================
   MEDIA
   ========================================================== */

figure {
	margin: 0;
}

iframe {
	max-width: 100%;
}

video {
	width: 100%;
}

/* ==========================================================
   FORMS
   ========================================================== */

button,
input,
select,
textarea {
	color: inherit;
}

input,
select,
textarea {
	max-width: 100%;
}

button {
	border: 0;
}

/* ==========================================================
   CONTENT UTILITIES
   ========================================================== */

.section {
	position: relative;
	width: 100%;
	padding-block: var(--space-2xl);
}

.section--full {
	min-height: 100svh;
	display: flex;
	align-items: center;
}

.section--compact {
	padding-block: var(--space-xl);
}

.lead {
	max-width: var(--text-width);
	font-size: var(--text-lg);
	font-weight: var(--font-weight-light);
	line-height: 1.4;
}

.flow > * + * {
	margin-top: var(--space-sm);
}

.flow > h2 + *,
.flow > h3 + * {
	margin-top: var(--space-md);
}

.media-cover {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================================
   BUTTONS
   ========================================================== */

.button {
	position: relative;
	overflow: hidden;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 48px;
	padding: 0.8em 1.5em;

	border: 1px solid currentColor;
	background: transparent;
	color: inherit;

	font-weight: var(--font-weight-light);
	line-height: 1;

	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.08em;

	transition:
		transform 300ms ease,
		font-weight 300ms ease,
		color 180ms ease,
		border-color 180ms ease;
}


/* angled blurred white highlight */
.button::before {
	content: "";

	position: absolute;
	top: -50%;
	left: -45%;

	width: 35%;
	height: 200%;

	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 1) 50%,
		rgba(255, 255, 255, 0) 100%
	);

	filter: blur(12px);

	transform: skewX(-15deg);

	opacity: 0;

	pointer-events: none;
}


.button:hover {
	color: var(--white);
	font-weight: var(--font-weight-medium);

	animation: button-scale-shake 850ms ease-in-out forwards;
}


.button:hover::before {
	animation: button-shake 850ms ease-in-out forwards;
}


.button:active {
	transform: translateY(0) scale(1.1);
}


@keyframes button-shake {

	0% {
		left: -35%;
		opacity: 0;
	}

	15% {
		left: 20%;
		opacity: 0.75;
	}

	35% {
		left: 45%;
	}

	50% {
		left: 32%;
	}

	65% {
		left: 58%;
	}

	78% {
		left: 48%;
	}

	100% {
		left: 115%;
		opacity: 0;
	}

}

@keyframes button-scale-shake {

	0% {
		transform: translateY(-2px) scale(1);
	}

	20% {
		transform: translateY(-2px) scale(1.1);
	}

	40% {
		transform: translateY(-2px) scale(1);
	}

	60% {
		transform: translateY(-2px) scale(1.1);
	}

	80% {
		transform: translateY(-2px) scale(1.04);
	}

	100% {
		transform: translateY(-2px) scale(1.1);
	}

}

/* ==========================================================
   BASIC LAYOUT
   ========================================================== */

.site {
	min-height: 100dvh;
}

.site-main {
	width: 100%;
}

.container {
	width: min(
		calc(100% - (var(--gutter) * 2)),
		var(--site-width)
	);
	margin-inline: auto;
}

.text-container {
	width: min(
		calc(100% - (var(--gutter) * 2)),
		var(--text-width)
	);
	margin-inline: auto;
}

/* ==========================================================
   WORDPRESS
   ========================================================== */

.alignleft {
	float: left;
	margin-right: var(--space-md);
	margin-bottom: var(--space-md);
}

.alignright {
	float: right;
	margin-left: var(--space-md);
	margin-bottom: var(--space-md);
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text {
	font-size: var(--text-sm);
}

/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: fixed;
	top: var(--space-sm);
	left: var(--space-sm);
	z-index: 100000;
	width: auto;
	height: auto;
	margin: 0;
	padding: var(--space-sm) var(--space-md);
	clip: auto;
	overflow: visible;
	white-space: normal;
	background: var(--white);
	color: var(--black);
}

:focus-visible {
	outline: 2px solid var(--red);
	outline-offset: 4px;
}

/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==============================================================
   KLUB 51 HEADER
============================================================== */

.site-header {
	--header-height: 120px;
	--header-red: #ff0000;
	--header-background: #191919;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	height: var(--header-height);
	padding-inline: clamp(20px, 3vw, 60px);
	background: var(--header-background);
	border-bottom: 2px solid var(--header-red);
	overflow: visible;
}

.admin-bar .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

/* --------------------------------------------------------------
   ELECTRIC BOTTOM GLOW
-------------------------------------------------------------- */

.site-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -5px;
	height: 10px;
	background:
		linear-gradient(
			90deg,
			transparent 0%,
			rgb(255 0 0/ 0%) 25%,
			rgb(249 61 58 / 20%) 38%,
			rgb(249 61 58 / 65%) 48%,
			rgb(255 255 255 / 30%) 50%,
			rgb(249 61 58 / 65%) 52%,
			rgb(249 61 58 / 20%) 62%,
			rgb(249 61 58 / 0%) 75%,
			transparent 100%
		);
	background-size: 220% 100%;
	filter: blur(5px);
	opacity: .65;
	mix-blend-mode: screen;
	pointer-events: none;
	animation: header-electric-line 4s linear infinite;
}

@keyframes header-electric-line {
	0% {
		background-position: 200% 0;
		filter: blur(3px);
		opacity: .25;
	}
	24% {
		filter: blur(6px);
		opacity: .55;
	}
	43% {
		filter: blur(4px);
		opacity: .35;
	}
	71% {
		filter: blur(8px);
		opacity: .7;
	}
	100% {
		background-position: -200% 0;
		filter: blur(3px);
		opacity: .25;
	}
}

/* ==============================================================
   LOGO
============================================================== */

.site-logo {
	position: relative;
	grid-column: 2;
	grid-row: 1;
	z-index: 5;
	width: 130px;
	height: var(--header-height);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
	text-decoration: none;
}

/* --------------------------------------------------------------
   51
-------------------------------------------------------------- */

.site-logo__51 {
	position: absolute;
	left: 50%;
	top: 50%;
	height: 96px;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform:
		translate(-50%, -50%)
		scale(3);
	filter: blur(14px);
	animation:
		logo-51-intro
		1.4s
		.35s
		cubic-bezier(.16, .8, .2, 1)
		forwards;
}

.site-logo__51 img {
	display: block;
	height: 100%;
	width: auto;
	max-width: none;
	pointer-events: none;
}

/* --------------------------------------------------------------
   KLUB
-------------------------------------------------------------- */

.site-logo__klub {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 2;
	width: 91px;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform:
		translate(-50%, -50%)
		scale(3.5);
	filter: blur(10px);
	animation:
		klub-intro
		1.25s
		.05s
		cubic-bezier(.16, .8, .2, 1)
		forwards;
}

.site-logo__klub img {
	display: block;
	width: 100%;
	height: auto;
	pointer-events: none;
	transition:
		transform .22s ease,
		filter .22s ease;
}

/* --------------------------------------------------------------
   KLUB INTRO
-------------------------------------------------------------- */

@keyframes klub-intro {
	/* initial flash */
	0% {
		opacity: 0;
		transform:
			translate(-50%, -50%)
			scale(5);
		filter: blur(18px);
	}
	6% {
		opacity: 1;
		filter: blur(2px);
	}
	10% {
		opacity: .15;
		filter: blur(8px);
	}
	14% {
		opacity: 1;
		filter: blur(0);
	}
	/* smooth from here onwards */
	100% {
		opacity: 1;
		transform:
			translate(-50%, -50%)
			scale(1);
		filter: blur(0);
	}
}

/* --------------------------------------------------------------
   51 INTRO
-------------------------------------------------------------- */

@keyframes logo-51-intro {
	0% {
		opacity: 0;
		transform:
			translate(-50%, -50%)
			scale(3);
		filter: blur(14px);
	}
	30% {
		opacity: .45;
		filter: blur(7px);
	}
	65% {
		opacity: .85;
		filter: blur(2px);
	}
	100% {
		opacity: 1;
		transform:
			translate(-50%, -50%)
			scale(1);
		filter: blur(0);
	}
}

/* --------------------------------------------------------------
   KLUB HOVER / TOUCH
-------------------------------------------------------------- */

.site-logo:hover .site-logo__klub img,
.site-logo:focus-visible .site-logo__klub img,
.site-logo.is-touched .site-logo__klub img {
	transform: scale(1.5);
	filter:
		blur(.5px)
		drop-shadow(
			0 0 5px
			rgba(255, 255, 255, .9)
		)
		drop-shadow(
			0 0 12px
			rgba(249, 61, 58, .9)
		);
}

/* ==============================================================
   BURGER
============================================================== */

.menu-toggle {
	position: relative;
	grid-column: 1;
	grid-row: 1;
	justify-self: start;
	z-index: 20;
	width: 46px;
	height: 46px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	padding: 5px;
	border: 0;
	background: transparent;
	cursor: pointer;
	opacity: 0;
	filter: blur(10px);
	animation:
		header-control-intro
		.7s
		1s
		forwards;
	transition:
		transform .22s ease;
}

.menu-toggle span {
	display: block;
	width: 38px;
	height: 3px;
	background: #fff;
	transform-origin: center;
	transition:
		transform .3s cubic-bezier(.2, .8, .2, 1),
		opacity .2s ease,
		background-color .2s ease,
		filter .2s ease;
}

/* burger hover */

.menu-toggle:hover,
.menu-toggle:focus-visible {
	transform: scale(1.2);
}

.menu-toggle:hover span,
.menu-toggle:focus-visible span {
	background: var(--header-red);
mix-blend-mode: screen;
	filter:
		drop-shadow(
			0 0 4px
			var(--header-red)
		)
		drop-shadow(
			0 0 10px
			var(--header-red)
		)
		;
}

/* --------------------------------------------------------------
   BURGER -> X
-------------------------------------------------------------- */

.menu-toggle.is-open span:nth-child(1) {
	transform:
		translateY(13px)
		rotate(45deg);
}

.menu-toggle.is-open span:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}

.menu-toggle.is-open span:nth-child(3) {
	transform:
		translateY(-13px)
		rotate(-45deg);
}

/* ==============================================================
   SOCIAL ICONS
============================================================== */

.header-socials {
	grid-column: 3;
	grid-row: 1;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: clamp(8px, 1vw, 16px);
	opacity: 0;
	filter: blur(10px);
	animation:
		header-control-intro
		.7s
		1.1s
		forwards;
}

.header-socials a {
	display: block;
	width: 42px;
	height: 42px;
	transition:
		transform .2s ease,
		filter .2s ease;
}

.header-socials img {
	display: block;
	width: 100%;
	height: 100%;
}

.header-socials a:hover,
.header-socials a:focus-visible {
	transform: scale(1.15);
	filter:
		drop-shadow(
			0 0 7px
			var(--header-red)
		);
}

@keyframes header-control-intro {
	to {
		opacity: 1;
		filter: blur(0);
	}
}

/* ==============================================================
   DROP DOWN MENU
============================================================== */

.header-navigation {
	position: absolute;
	z-index: 10;
	top: 100%;
	left: 0;
	width: 100%;
	background: rgb(0 0 0 / 80%);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-20px);
	pointer-events: none;
	transition:
		opacity .3s ease,
		transform .35s cubic-bezier(.2, .8, .2, 1),
		visibility .3s;
}

.header-navigation.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

.header-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.header-menu > li {
	margin: 0;
	padding: 0;
	border-bottom:
		1px solid
		rgb(249 61 58 / 65%);
}

.header-menu a {
	display: block;
	padding:
		clamp(18px, 2vw, 32px)
		clamp(30px, 7vw, 120px);
	color: #fff;
	font-family:
		"hanken-grotesk",
		sans-serif;
	font-size:
		clamp(1.5rem, 3vw, 3.5rem);
	font-weight: 200;
	letter-spacing: .14em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	transition:
		color .2s ease,
		filter .2s ease,
		letter-spacing .25s ease;
}

.header-menu a:hover,
.header-menu a:focus-visible {
	color: var(--header-red);
	letter-spacing: .18em;
	filter:
		blur(.4px)
		drop-shadow(
			0 0 6px
			var(--header-red)
		)
		drop-shadow(
			0 0 14px
			var(--header-red)
		);
}

.header-menu .event-sub-menu {
	margin: 0;
	padding: 0 0 12px;
	list-style: none;
}

.header-menu .event-sub-menu li {
	border: 0;
	margin: 0;
}

.header-menu .event-sub-menu a {
	padding:
		8px
		clamp(50px, 9vw, 150px);

	font-size:
		clamp(1rem, 1.5vw, 1.6rem);

	letter-spacing: .08em;
	color: rgb(255 255 255 / 70%);
}

/* ==============================================================
   MOBILE
============================================================== */
@media (max-width: 700px) {
	.site-header {
		--header-height: 70px;
		padding-inline: 12px;
	}
	.site-logo {
		width: 65px;
	}
	.site-logo__51 {
		height: 48px;
	}
	.site-logo__klub {
		width: 54px;
	}
	.menu-toggle {
		width: 38px;
		height: 38px;
		gap: 6px;
		padding: 4px;
	}
	.menu-toggle span {
		width: 30px;
		height: 3px;
	}
	.menu-toggle.is-open span:nth-child(1) {
		transform:
			translateY(9px)
			rotate(45deg);
	}
	.menu-toggle.is-open span:nth-child(3) {
		transform:
			translateY(-9px)
			rotate(-45deg);
	}
	.header-socials {
		gap: 6px;
	}
	.header-socials a {
		width: 28px;
		height: 28px;
	}
	.header-menu a {
		padding: 20px 22px;
		font-size:
			clamp(1.4rem, 8vw, 2.4rem);
	}
}

/* ==============================================================
   ACCESSIBILITY — REDUCED MOTION
============================================================== */

@media (prefers-reduced-motion: reduce) {
	.site-logo__51,
	.site-logo__klub,
	.menu-toggle,
	.header-socials,
	.site-header::after {
		animation: none;
	}
	.site-logo__51,
	.site-logo__klub,
	.menu-toggle,
	.header-socials {
		opacity: 1;
		filter: none;
	}
	.site-logo__51,
	.site-logo__klub {
		transform:
			translate(-50%, -50%)
			scale(1);
	}
}

/* ==============================================================
   FOOTER
============================================================== */

.site-footer {
	--footer-red: #ff0000;
	--footer-grey: #9b8f8b;
	width: 100%;
	background: #191919;
	color: #fff;
	border-top: 2px solid var(--footer-red);
}

/* ==============================================================
   FOOTER LAYOUT
============================================================== */

.footer-inner {
	width: min(100% - 60px, 1200px);
	margin-inline: auto;
	margin-top:30px;
	margin-bottom: 20px;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 25% 50% 25%;
	align-items: stretch;
}

/* ==============================================================
   DESKTOP LOGO
============================================================== */

.footer-brand {
	position: relative;
	min-width: 0;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 20px;
}

/* vertical red rule */

.footer-brand::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 2px;
	background: var(--footer-red);
	box-shadow:
		0 0 3px rgb(255 0 0 / 30%),
		0 0 9px rgb(255 0 0 / 15%);
	animation:
		footer-rule-glow
		4s
		ease-in-out
		infinite;
}

.footer-brand__logo {
	display: block;
	width: min(170px, 60%);
	height: auto;
}

/* ==============================================================
   CENTRE INFORMATION
============================================================== */

.footer-info {
	position: relative;
	width: 100%;
	min-width: 0;
	padding: 20px 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* right vertical red rule */

.footer-info::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 2px;
	background: var(--footer-red);
	box-shadow:
		0 0 3px rgb(255 0 0 / 30%),
		0 0 9px rgb(255 0 0 / 15%);
	animation:
		footer-rule-glow
		4.5s
		.5s
		ease-in-out
		infinite;
}

/* ==============================================================
   OPENING HOURS
============================================================== */

.footer-hours {
	width: min(100%, 500px);
	display: grid;
	gap: 12px;
margin-inline: auto;
	margin-bottom: 58px;
	font-size: clamp(18px, 2.4vw, 24px);
	line-height: 1.15;
	letter-spacing: .3em;
}

.footer-hours__row {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	column-gap: 50px;
}

.footer-hours__day {
	color: #fff;
	font-weight: 400;
	text-align: left;
	white-space: nowrap;
}

.footer-hours__time {
	color: var(--footer-grey);
	font-weight: 200;
	text-align: right;
	white-space: nowrap;
}

/* ==============================================================
   ADDRESS
============================================================== */

.footer-address {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-style: normal;
	font-size: clamp(14px, 1.8vw, 18px);
	font-weight: 200;
	line-height: 1.35;
	letter-spacing: .3em;
}

.footer-address__street {
	color: #fff;
	font-weight: 400;
	white-space: nowrap;
}

.footer-address__grey {
	color: var(--footer-grey);
	font-weight: 200;
	white-space: nowrap;
}

/* ==============================================================
   EMAIL / GOOGLE MAPS
============================================================== */

.footer-contact {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 18px;
	margin-top: 40px;
}

.footer-contact__button {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	color: var(--footer-red);
	background: none;
	border: 0;
	text-decoration: none;
	transition:
		transform .2s ease,
		filter .2s ease;
}

.footer-contact__button svg {
	display: block;
	width: 28px;
	height: 28px;
	fill: none;
	stroke: var(--footer-red);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.footer-contact__button:hover,
.footer-contact__button:focus-visible {
	transform: scale(1.2);
	filter:
		drop-shadow(
			0 0 6px
			rgb(255 0 0 / 45%)
		);
}

/* ==============================================================
   SOCIAL ICONS

   One set only — lives inside .footer-info.
   margin-top:auto pins them to the bottom regardless of nav length.
============================================================== */

.footer-socials {
	width: auto;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	align-self: stretch;
	gap: 12px;
	margin:auto 0 0 40px;
	padding: 35px 0 0;
}

.footer-socials a {
	display: block;
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
	transition:
		transform .2s ease,
		filter .2s ease;
}

.footer-socials img {
	display: block;
	width: 100%;
	height: 100%;
}

.footer-socials a:hover,
.footer-socials a:focus-visible {
	transform: scale(1.15);
	filter:
		drop-shadow(
			0 0 6px
			rgb(255 0 0 / 45%)
		);
}

/* ==============================================================
   FOOTER NAVIGATION
============================================================== */

.footer-nav {
	min-width: 0;
	padding: 20px 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.footer-menu {
    width: auto;
    margin: 0;
    padding: 0 0 0 40px;
    list-style: none;
}

.footer-menu li {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.footer-menu li::marker {
	content: "";
}

.footer-menu a {
	display: inline-block;
	color: var(--footer-red);
	font-size: clamp(13px, 1.4vw, 16px);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: .3em;
	text-decoration: none;
	text-transform: uppercase;
	transition:
		transform .2s ease,
		filter .2s ease,
		letter-spacing .2s ease;
}

.footer-menu a:hover,
.footer-menu a:focus-visible {
	letter-spacing: .34em;
	transform: scale(1.03);
	filter:
		drop-shadow(
			0 0 6px
			rgb(255 0 0 / 45%)
		);
}

/* ==============================================================
   RED RULE GLOW
============================================================== */

@keyframes footer-rule-glow {
	0%,
	100% {
		box-shadow:
			0 0 2px rgb(255 0 0 / 15%),
			0 0 5px rgb(255 0 0 / 8%);
	}
	25% {
		box-shadow:
			0 0 5px rgb(255 0 0 / 35%),
			0 0 12px rgb(255 0 0 / 18%);
	}
	50% {
		box-shadow:
			0 0 3px rgb(255 0 0 / 20%),
			0 0 7px rgb(255 0 0 / 10%);
	}
	75% {
		box-shadow:
			0 0 7px rgb(255 0 0 / 45%),
			0 0 16px rgb(255 0 0 / 22%);
	}
}

/* ==============================================================
   TABLET
============================================================== */

@media (max-width: 900px) {
	.footer-inner {
		width: min(100% - 40px, 900px);
		grid-template-columns: 24% 52% 24%;
	}
	.footer-info {
		padding-inline: 28px;
	}
	.footer-hours {
		font-size: clamp(16px, 2.4vw, 21px);
	}
	.footer-hours__row {
		column-gap: 25px;
	}
	.footer-address {
		font-size: clamp(13px, 1.8vw, 16px);
	}
	.footer-nav {
		padding-left: 25px;
	}
	.footer-menu a {
		font-size: 13px;
	}
}

/* ==============================================================
   MOBILE
============================================================== */

@media (max-width: 700px) {
	.site-footer {
		min-height: auto;
	}

	.footer-inner {
		width: 100%;
		min-height: auto;
		display: block;
		padding:
			30px
			clamp(28px, 7vw, 50px)
			40px;
	}

	.footer-brand {
		display: none;
	}

	.footer-nav {
		display: none;
	}

	.footer-info {
		width: 100%;
		max-width: 620px;
		min-height: 0;
		margin-inline: auto;
		padding: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.footer-info::after {
		display: none;
	}

	.footer-hours {
		width: 100%;
		margin: 0 0 50px;
		font-size: var(--text-lg);
		gap: 18px;
	}

	.footer-hours__row {
		grid-template-columns: 1fr auto;
		column-gap: 25px;
	}

	.footer-address {
		width: 100%;
		font-size: var(--text-base);
	}

	.footer-contact {
		margin-top: 40px;
		gap: 20px;
	}

	.footer-socials {
		width: 100%;
		margin: 50px 0 0;
		padding: 0;
		align-self: auto;
		justify-content: center;
	}

	.footer-socials a {
		width: 38px;
		height: 38px;
	}
}

/* ==============================================================
   VERY SMALL MOBILE

   Only here do we allow the street address to wrap.
============================================================== */

@media (max-width: 420px) {
	.footer-inner {
		padding-inline: 20px;
	}
	.footer-hours {
		font-size: clamp(16px, 5.5vw, 20px);
		letter-spacing: .22em;
	}
	.footer-hours__row {
		column-gap: 15px;
	}
	.footer-address {
		font-size: clamp(14px, 4.5vw, 17px);
		letter-spacing: .22em;
	}
	.footer-address__street {
		white-space: normal;
	}
	.footer-socials a {
		width: 34px;
		height: 34px;
	}
}

/* ==============================================================
   REDUCED MOTION
============================================================== */

@media (prefers-reduced-motion: reduce) {
	.footer-brand::after,
	.footer-info::after {
		animation: none;
	}
}

/* ==========================================================
   HERO
   ========================================================== */

.hero {
	position: relative;
	height: 100svh;
	overflow: hidden;

	display: flex;
	align-items: center;
	justify-content: center;

	background: var(--black);
}

.hero__media,
.hero__overlay {
	position: absolute;
	inset: 0;
}

.hero__media {
	z-index: 0;
}

.hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__overlay {
	z-index: 1;
	background:
		linear-gradient(
			to top,
			rgba(25, 25, 25, 0.95) 0%,
			rgba(25, 25, 25, 0.35) 45%,
			rgba(25, 25, 25, 0.1) 100%
		);
}

.hero__content {
	position: relative;
	z-index: 2;

	width: 100%;

	display: flex;
	align-items: center;
	justify-content: center;

	padding-inline: var(--space-lg);

	text-align: center;
}

.hero__copy {
	width: 100%;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.hero__title {
	margin: 0;
	font-size: clamp(2.5rem, 6vw, 7rem);
	font-weight: var(--font-weight-light);
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0;
	filter: blur(20px);
	animation: hero-title-in 1s ease-out forwards;
}

.hero .button {
	margin-top: var(--space-lg);
}

@keyframes hero-title-in {

	0% {
		opacity: 0;
		filter: blur(20px);
	}

	100% {
		opacity: 1;
		filter: blur(0);
	}

}
@media (max-width: 700px) {
	.hero__title {
		white-space: normal;
		text-align: center;
	}
}

/* ==========================================================
   ROOMS
   ========================================================== */

.rooms {
	width: 100%;
	scroll-margin-top: 120px;
}

.rooms__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	width: 100%;
}

.room-card {
	position: relative;
	min-width: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;

	color: var(--white);
	text-decoration: none;
	background: var(--black);
}

.room-card__image {
	position: absolute;
	inset: 0;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transition:
		transform .5s cubic-bezier(.2, .8, .2, 1),
		filter .4s ease;
}

.room-card::after {
	content: "";

	position: absolute;
	inset: 0;

	background:
		linear-gradient(
			to top,
			rgb(0 0 0 / 75%) 0%,
			rgb(0 0 0 / 5%) 60%
		);

	pointer-events: none;
}

.room-card__title {
	position: absolute;
	z-index: 2;

	top: 50%;
	left: 0;

	width: 100%;
	padding: var(--space-md);

	font-size: clamp(20px, 2vw, 32px);
	font-weight: var(--font-weight-light);

	text-align: center;
	text-transform: uppercase;

	transform: translateY(-50%);

	transition: color .2s ease;
}

.room-card:hover .room-card__title {
	animation: room-title-weight 450ms ease-out forwards;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 700px) {

	.rooms {
		scroll-margin-top: 70px;
	}

	.rooms__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: repeat(3, minmax(0, 1fr));

		width: 100%;
		height: 100svh;
	}

	.room-card {
		width: 100%;
		min-width: 0;
		min-height: 0;
		aspect-ratio: auto;
	}


	.room-card__title {
		font-size: clamp(26px, 8vw, 40px);
	}

}

/* ==========================================================
   ROOM EFFECTS
   ========================================================== */
@media (hover: hover) and (pointer: fine) {
/* Boiler Room */

.room-card--boiler:hover .room-card__image,
.room-card--boiler:focus-visible .room-card__image {
	animation: boiler-punch .7s ease-out forwards;
}

.room-card--boiler::before {
	content: "";
	position: absolute;
	z-index: 3;
	inset: 0;
	background: #000;
	opacity: 0;
	pointer-events: none;
}

.room-card--boiler:hover::before,
.room-card--boiler:focus-visible::before {
	animation: boiler-strobe .65s steps(1);
}

@keyframes boiler-punch {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.15);
	}
}

@keyframes boiler-strobe {
	0%,
	14%,
	28%,
	42%,
	58%,
	74%,
	100% {
		opacity: 0;
	}

	7%,
	21%,
	35%,
	50%,
	66% {
		opacity: 1;
	}
}


/* Grove */

.room-card--grove {
	overflow: hidden;
}

.room-card--grove .room-card__track {
	position: absolute;
	inset: 0;
	display: flex;
	width: 200%;
}

.room-card--grove .room-card__image {
	position: relative;
	flex: 0 0 50%;
	width: 50%;
	height: 100%;
	object-fit: cover;
}

.room-card--grove:hover .room-card__track,
.room-card--grove:focus-visible .room-card__track {
	animation: grove-reel .8s linear infinite;
}

@keyframes grove-reel {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}


/* Cheesebox */

.room-card--cheese .room-card__image {
	transform: scale(1.8) rotate(0deg);
}

.room-card--cheese:hover .room-card__image,
.room-card--cheese:focus-visible .room-card__image {
	animation: cheese-spin .8s cubic-bezier(.2, .8, .2, 1) forwards;
}

@keyframes cheese-spin {
	0% {
		transform: scale(1.8) rotate(0deg);
	}

	100% {
		transform: scale(1.5) rotate(720deg);
	}
}

}
@media (max-width: 700px) {
	.room-card--grove .room-card__track {
		position: absolute;
		inset: 0;
		display: flex;
		width: 200%;
		height: 100%;
	}

	.room-card--grove .room-card__image {
		position: relative;
		flex: 0 0 50%;
		width: 50%;
		height: 100%;
		max-width: none;
		object-fit: cover;
	}
}

/* about */
.about {
	padding-block: var(--space-2xl);
	text-align: center;
}

.about .text-container {
	margin-inline: auto;
}

.about h2 {
	margin-bottom: var(--space-md);
	color: var(--red);
	text-transform: uppercase;

	opacity: 0;
	filter: blur(14px);
	transform: scale(0.96);
}

.about h2.is-visible {
	animation: about-title-in 900ms ease-out forwards;
}

@keyframes about-title-in {

	0% {
		opacity: 0;
		filter: blur(14px);
		transform: scale(0.96);
	}

	12% {
		opacity: 1;
		filter: blur(6px);
	}

	20% {
		opacity: 0.25;
	}

	28% {
		opacity: 1;
	}

	38% {
		opacity: 0.45;
	}

	48% {
		opacity: 1;
		filter: blur(2px);
		transform: scale(1.1);
	}

	72% {
		transform: scale(1.04);
	}

	100% {
		opacity: 1;
		filter: blur(0);
		transform: scale(1);
	}
}

.about .lead {
	margin-inline: auto;
	font-size: clamp(24px, 3vw, 40px);
}

.about p {
	margin-inline: auto;
}

@media (max-width: 700px) {
	.about {
		min-height: 100svh;
		display: flex;
		align-items: center;
	}

	.about .container {
		width: 100%;
	}
}

/* ==========================================================
   FEATURES
   ========================================================== */

.feature {
	position: relative;
	min-height: 70svh;
	overflow: hidden;
	background: var(--black);
}

.feature__content {
	position: absolute;
	top: 0;
	left: 0;

	width: 50%;
	height: 100%;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;

	padding: 36px 32px;
	text-align: center;
}

.feature__content > * {
	margin: 0;
}

/* The feature controls spacing, not its children */
.feature__content > * {
	margin: 0;
}

.feature__media {
	position: absolute;
	z-index: 2;
	inset: 0;

	width: 100%;
	height: 100%;

	transform: translateX(0);

	transition:
		transform .7s cubic-bezier(.2, .8, .2, 1);
}

.feature__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.feature__title {
	position: absolute;
	z-index: 3;

	top: 50%;
	left: 0;

	width: 100%;
	padding: var(--space-lg);

	color: var(--white);
	font-size: var(--text-xl);
	text-align: center;

	transform: translateY(-50%);

	opacity: 1;

	transition: opacity .5s ease;
}

.feature__content .button {
	margin: 0;
}


/* ----------------------------------------------------------
   VARIATIONS
   ---------------------------------------------------------- */

.feature--whats-on {
	background: #303030;
}

.feature--booths {
	background: #2a2a2a;
}

.feature--booths .feature__media {
	transition-duration: 1s;
	transition-delay: .2s;
}

.night-feature:nth-of-type(even) {
	background: #2a2a2a;
}

.night-feature:nth-of-type(odd) {
	background: #242424;
}

.night-feature:nth-of-type(even) .feature__media {
	transition-duration: 1s;
	transition-delay: .2s;
}


/* ----------------------------------------------------------
   DIRECTIONS
   ---------------------------------------------------------- */

.feature--left .feature__content {
	left: auto;
	right: 0;
}


/* ----------------------------------------------------------
   DESKTOP REVEAL
   ---------------------------------------------------------- */

@media (min-width: 701px) {

	.feature--right.is-in-view:hover .feature__media,
	.feature--right.is-revealed .feature__media {
		transform: translateX(50%);
	}

	.feature--left.is-in-view:hover .feature__media,
	.feature--left.is-revealed .feature__media {
		transform: translateX(-50%);
	}

	.feature.is-in-view:hover .feature__title,
	.feature.is-in-view:focus-within .feature__title,
	.feature.is-revealed .feature__title {
		opacity: 0;
	}

}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 700px) {

	.feature {
		height: 100svh;
		min-height: 0;
	}

	.feature__content,
	.feature--left .feature__content {
		inset: 0;

		width: 100%;
		height: 100%;

		gap: 16px;
		padding: 24px;
	}

	.feature.is-in-view .feature__media,
	.feature.is-revealed .feature__media {
		transform: translateY(-100%);
		transition-delay: .8s;
	}

	.feature.is-in-view .feature__title,
	.feature.is-revealed .feature__title {
		opacity: 0;
		transition-delay: .5s;
	}

}


/* ==========================================================
   WHAT'S ON
   ========================================================== */

.whats-on {
	padding-top: 120px;
}

@media (max-width: 700px) {

	.whats-on {
		padding-top: 70px;
	}

}


/* ----------------------------------------------------------
   NIGHT CONTENT
   ---------------------------------------------------------- */

.night-feature__day {
	color: var(--red);

	font-size: var(--text-lg);
	font-weight: var(--font-weight-medium);

	text-transform: uppercase;
	letter-spacing: .3em;
}

.night-feature__description {
	max-width: 32rem;

	font-size: .95rem;
	font-weight: var(--font-weight-light);
	line-height: 1.35;
	text-align: center;
}



/* ----------------------------------------------------------
   NIGHT DETAILS
   ---------------------------------------------------------- */

.night-details {
	position: relative;

	width: min(100%, 40rem);

	display: grid;
	gap: 18px;

	margin: 0;

	font-size: .9rem;
	line-height: 1.3;
}

.night-details::before {
	content: "";

	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;

	width: 2px;

	background: var(--red);
	transform: translateX(-50%);
}

.night-details__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: baseline;
}

.night-details__label {
	padding-right: 20px;

	color: var(--grey);
	font-weight: var(--font-weight-light);
	text-align: right;
	text-transform: uppercase;
	letter-spacing: .3em;
}

.night-details__value {
	padding-left: 20px;

	color: var(--white);
	font-weight: var(--font-weight-light);
	text-align: left;
	text-transform: uppercase;
}

/* ==========================================================
   EVENT CAROUSEL
   ========================================================== */

.event-carousel {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--black);
}

.event-carousel__track {
	display: flex;
	transition: transform .85s cubic-bezier(.76, 0, .24, 1);
}

.event-slide {
	flex: 0 0 50%;
	aspect-ratio: 16 / 9;
	position: relative;
}

.event-slide__link {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
}

.event-slide__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 700px) {
	.event-slide {
		flex: 0 0 100%;
	}
}

/* ==========================================================
   SINGLE EVENT page
   ========================================================== */

.event-hero {
position: relative;
	height: 65svh;
	margin-top: 120px;
	overflow: hidden;
	background: var(--black);
}

.event-hero__media,
.event-hero__overlay {
	position: absolute;
	inset: 0;
}

.event-hero__image,
.event-hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}



.event-hero__content {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.event-hero__date {
	margin-top: var(--space-md);
	font-size: var(--text-lg);
	font-weight: var(--font-weight-light);
	letter-spacing: .3em;
	text-transform: uppercase;
}

.event-details {
	padding-block: var(--space-xl);
	text-align: center;
}

.event-details__date {
	display: block;
	margin-bottom: var(--space-lg);
	font-size: var(--text-lg);
	font-weight: var(--font-weight-light);
	letter-spacing: .3em;
	text-transform: uppercase;
	text-align: center;
}

.event-details__description {
	max-width: var(--text-width);
	margin-inline: auto;
	font-size: var(--text-lg);
	font-weight: var(--font-weight-light);
}

.event-details__grid {
	position: relative;
	width: min(100%, 40rem);
	margin: var(--space-lg) auto;
	display: grid;
	gap: var(--space-sm);
}

.event-details__grid::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	background: var(--red);
	transform: translateX(-50%);
}

.event-details__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: baseline;
}

.event-details__label {
	padding-right: var(--space-lg);
	color: var(--grey);
	font-weight: var(--font-weight-light);
	text-align: right;
	text-transform: uppercase;
	letter-spacing: .3em;
}

.event-details__value {
	padding-left: var(--space-lg);
	color: var(--white);
	font-weight: var(--font-weight-light);
	text-align: left;
	text-transform: uppercase;
}

.event-details__actions {
	display: flex;
	justify-content: center;
	gap: var(--space-md);
	flex-wrap: wrap;
}
.event-details__actions .button {
	width: 220px;
}
.event-details__title {
	margin-bottom: var(--space-lg);
	font-size: var(--text-xl);
}
.event-hero__title {
	font-size: clamp(2rem, 5vw, 4.5rem);
	line-height: 1;
	letter-spacing: .2em;
	text-align: center;
}

.event-hero__date {
	font-size: clamp(.9rem, 2vw, 1.4rem);
}

.event-details__title {
	font-size: clamp(1.8rem, 4vw, 3rem);
	line-height: 1.1;
}

.event-details__date {
	font-size: clamp(.9rem, 2vw, 1.4rem);
}

@media (max-width: 700px) {

	.event-hero {
		height: auto;
		min-height: 0;
		margin-top: 70px;
		overflow: visible;
	}

	.event-hero__media {
		position: relative;
		inset: auto;
		width: 100%;
	}

	.event-hero__image {
		width: 100%;
		height: auto;
		object-fit: initial;
	}

	.event-hero__video,
	.event-hero__overlay,
	.event-hero__content {
		display: none;
	}

}

	.event-hero__content {
		padding-inline: var(--gutter);
	}

	.event-hero__title {
		font-size: clamp(1.75rem, 8vw, 2.6rem);
		letter-spacing: .12em;
		line-height: 1.05;
	}

	.event-hero__date {
		margin-top: var(--space-sm);
		font-size: .9rem;
		letter-spacing: .22em;
	}

	.event-details {
		padding-inline: var(--gutter);
	}

	.event-details__title {
		font-size: clamp(1.6rem, 7vw, 2.2rem);
		letter-spacing: .12em;
	}

	.event-details__date {
		font-size: .9rem;
		letter-spacing: .22em;
		line-height: 1.6;
	}
}

/* ==========================================================
   EVENT LISTINGS
   ========================================================== */

.event-listings {
	position: relative;
	background: var(--black);
	overflow: hidden;
}

.event-listings__body {
	display: grid;
	grid-template-rows: 1fr;

	transition: grid-template-rows 600ms cubic-bezier(.76, 0, .24, 1);
}

.event-listings__inner {
	overflow: hidden;
	min-height: 0;
}

.event-listings.is-collapsed .event-listings__body {
	grid-template-rows: 0fr;
}

.event-listings__toggle {
	width: 100%;
	height: 44px;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 0;
	border: 0;
	border-top: 1px solid rgb(255 255 255 / 12%);

	background: var(--black);
	color: var(--grey);

	font-size: 1.5rem;
	cursor: pointer;

	transition:
		color 250ms ease,
		background 250ms ease;
}

.event-listings__toggle:hover {
	color: var(--red);
}

.event-listings__toggle span[aria-hidden="true"] {
	display: block;
	transition: transform 450ms ease;
}

.event-listings.is-collapsed
.event-listings__toggle span[aria-hidden="true"] {
	transform: rotate(180deg);
}

.event-listings__inner {
	position: relative;
	z-index: 2;
}

.event-row {
	display: grid;
	grid-template-columns:
		clamp(140px, 16vw, 220px)
		1fr
		auto;

	align-items: center;
	gap: var(--space-lg);

	padding:
		var(--space-md)
		var(--space-lg);

	border-bottom:
		1px solid rgb(255 255 255 / 12%);

	color: var(--grey);
	text-decoration: none;

	transition:
		color 350ms ease,
		background 350ms ease;
}

.event-row:first-child {
	border-top:
		1px solid rgb(255 255 255 / 12%);
}

/* ==========================================================
   EVENT ROW ACTIVE
   ========================================================== */

.event-row {
	color: var(--grey);

	transition:
		color 450ms ease,
		filter 450ms ease;
}

.event-row__title,
.event-row__date,
.event-row__more {
	transition:
		color 450ms ease,
		filter 450ms ease,
		opacity 450ms ease;
}


/* active row */

.event-row.is-active,
.event-row:hover {
	color: var(--white);
}

.event-row.is-active .event-row__title,
.event-row:hover .event-row__title {
	animation: event-focus 700ms ease-out forwards;
}

.event-row.is-active .event-row__date,
.event-row:hover .event-row__date {
	animation: event-focus 700ms ease-out forwards;
}

.event-row.is-active .event-row__more,
.event-row:hover .event-row__more {
	color: var(--red);
	animation: event-focus 700ms ease-out forwards;
}


@keyframes event-focus {

	0% {
		filter: blur(0);
		opacity: .65;
	}

	35% {
		filter: blur(5px);
		opacity: .9;
	}

	100% {
		filter: blur(0);
		opacity: 1;
	}
}

/* DATE */

.event-row__date {
	display: flex;
	align-items: baseline;
	gap: .3em;
	white-space: nowrap;
	text-transform: uppercase;
}


.event-row__number {
	color: inherit;

	font-weight: var(--font-weight-light);
}


/* TITLE */

.event-row__title {
	font-size: var(--text-lg);
	font-weight: var(--font-weight-light);

	text-transform: uppercase;
	letter-spacing: .3em;
}


/* MORE */

.event-row__more {
	color: var(--grey);

	font-size: var(--text-sm);
	font-weight: var(--font-weight-light);

	text-transform: uppercase;
	letter-spacing: .08em;

	transition: color 350ms ease;
}


/* ACTIVE / HOVER */

.event-row.is-active,
.event-row:hover {
	color: var(--white);
}

.event-row.is-active .event-row__more,
.event-row:hover .event-row__more {
	color: var(--red);
}




/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 700px) {

	.event-row {
		grid-template-columns:
			1fr
			auto;

		gap:
			var(--space-xs)
			var(--space-md);

		padding:
			var(--space-md)
			var(--space-lg);
	}

	.event-row__date {
		grid-column: 1 / -1;

		gap: var(--space-sm);

		font-size: var(--text-sm);
	}

	.event-row__title {
		font-size: var(--text-base);
	}

	.event-row__more {
		text-align: right;
	}

}

/* ==============================================================
   COCKTAILS PAGE
============================================================== */

.cocktails-page {
	background: #000;
	color: #fff;

	/* NO overflow:hidden here */
}


/* ==============================================================
   INTRO
============================================================== */

.cocktails-intro {
	position: relative;

	width: 100%;
	height: 100svh;

	overflow: hidden;

	display: grid;
	place-items: center;

	background: #000;
}


.cocktails-intro__images {
	position: absolute;
	inset: 0;

	overflow: hidden;
}


.cocktails-intro__image {
	position: absolute;
	inset: 0;

	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

	opacity: 0;

	transform: scale(1.05);

	will-change:
		transform,
		opacity;
}


.cocktails-intro__image:first-child {
	opacity: 1;
}


.cocktails-intro__content {
	position: relative;
	z-index: 2;

	width: 100%;
	padding-inline: var(--gutter);

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(20px, 3vw, 40px);

	text-align: center;
}

.cocktails-intro__title {
	margin: 0;

	max-width: 100%;

	font-size: clamp(3rem, 9vw, 9rem);
	font-weight: 200;
	line-height: 0.9;

	letter-spacing: .3em;
	text-align: center;
	text-transform: uppercase;
}


.cocktails-intro__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding: 12px 24px;

	border: 1px solid currentColor;

	color: inherit;
	text-decoration: none;

	font-size: clamp(0.9rem, 1.2vw, 1.1rem);
	font-weight: 300;

	text-transform: uppercase;
	letter-spacing: 0.12em;
}

@media (max-width: 700px) {

	.cocktails-intro__title {
			font-size: clamp(2rem, 9vw, 3rem);
		letter-spacing: .3em;
		line-height: 1;
	}

}


/* ==============================================================
   COCKTAIL SECTION
============================================================== */

.cocktail {
	position: sticky;
	top: 0;

	width: 100%;
	height: 100svh;

	overflow: hidden;

	display: grid;
	place-items: center;

	background: #000;
}

.cocktail__background {
	position: absolute;
	inset: 0;

	width: 100%;
	height: 100%;

	overflow: hidden;
}


.cocktail__image {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center center;
}


/* ==============================================================
   COCKTAIL CONTENT
============================================================== */

.cocktail__content {
	position: relative;
	z-index: 2;

	width: min(90%, 760px);

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	text-align: center;
}


.cocktail__title {
	margin: 0;
	font-size: clamp(3rem, 7vw, 7rem);
	font-weight: 200;
	line-height: 0.9;
	text-transform: uppercase;
}


.cocktail__description {
	max-width: 620px;

	margin:
		clamp(18px, 2vw, 28px)
		0
		0;

	font-size: clamp(1rem, 1.5vw, 1.35rem);
	font-weight: 300;
	line-height: 1.45;
}


.cocktail__price {
	margin:
		clamp(12px, 1.5vw, 20px)
		0
		0;

	font-size: clamp(1.35rem, 2.5vw, 2.2rem);
	font-weight: 300;
}


/* ==============================================================
   MULTI OPTION COCKTAILS
============================================================== */

.cocktail__options {
	margin-top: clamp(26px, 4vw, 50px);

	display: flex;
	flex-direction: column;
	align-items: center;

	gap: clamp(22px, 3vw, 38px);
}


.cocktail__option {
	display: flex;
	flex-direction: column;
	align-items: center;

	text-align: center;
}


.cocktail__option-title {
	margin: 0;
	font-size: clamp(1.5rem, 2.8vw, 2.6rem);
	font-weight: 300;
	line-height: 1;
	text-transform: uppercase;
}


.cocktail__option-description {
	max-width: 580px;

	margin:
		clamp(8px, 1vw, 14px)
		0
		0;

	font-size: clamp(0.9rem, 1.25vw, 1.1rem);
	font-weight: 300;
	line-height: 1.4;
}


.cocktail__option-price {
	margin:
		clamp(5px, 0.8vw, 10px)
		0
		0;

	font-size: clamp(1.05rem, 1.7vw, 1.4rem);
	font-weight: 300;
}


/* ==============================================================
   IMAGE SAFETY
============================================================== */

.cocktail::after,
.cocktails-intro::after {
	content: "";

	position: absolute;
	inset: 0;

	z-index: 1;

	pointer-events: none;

	background:
		linear-gradient(
			to bottom,
			rgb(0 0 0 / 0.08),
			rgb(0 0 0 / 0.28)
		);
}


/* ==============================================================
   MOBILE
============================================================== */

@media (max-width: 700px) {

	.cocktail__content {
		width: min(88%, 520px);
	}


	.cocktail__title {
		font-size: clamp(2.7rem, 13vw, 4.8rem);
	}


	.cocktail__options {
		gap: 18px;
	}


	.cocktail__option-title {
		font-size: clamp(1.35rem, 6vw, 2rem);
	}


	.cocktail__option-description {
		font-size: clamp(0.88rem, 4vw, 1rem);
		line-height: 1.35;
	}


	.cocktail__image {
		height: 105%;
		transform: translateY(-2.5%);
	}

}
/* ==============================================================
   COCKTAIL STROBE
============================================================== */

.cocktails-intro::before {
	content: "";

	position: absolute;
	inset: 0;

	z-index: 10;

	background: #fff;

	opacity: 0;

	pointer-events: none;
}


.cocktails-intro.is-strobing::before {
	animation: cocktail-strobe 160ms linear;
}


@keyframes cocktail-strobe {

	0% {
		opacity: 0;
	}

	20% {
		opacity: 1;
	}

	45% {
		opacity: 0;
	}

	65% {
		opacity: 0.75;
	}

	100% {
		opacity: 0;
	}

}


/* ==============================================================
   COCKTAIL CONTENT REVEAL
============================================================== */

.cocktail__title,
.cocktail__description,
.cocktail__price,
.cocktail__option {
	opacity: 0;

	transform: translateY(24px);

	transition:
		opacity 700ms ease,
		transform 700ms ease;
}


.cocktail.is-visible .cocktail__title {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 250ms;
}

.cocktail.is-visible .cocktail__description,
.cocktail.is-visible .cocktail__options .cocktail__option:nth-child(1) {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 400ms;
}

.cocktail.is-visible .cocktail__price,
.cocktail.is-visible .cocktail__options .cocktail__option:nth-child(2) {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 550ms;
}

.cocktail.is-visible .cocktail__options .cocktail__option:nth-child(3) {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 700ms;
}

.cocktail__background {
	position: absolute;
	inset: 0;

	width: 100%;
	height: 100%;

	overflow: hidden;

	will-change: opacity;
}

/* ==============================================================
   ROOMS PAGE
============================================================== */

.rooms-page {
	width: 100%;
	background: #191919;
	color: #fff;
}


/* ==============================================================
   ROOMS HERO
============================================================== */

.rooms-hero {
	position: relative;

	width: 100%;
	height: 100svh;

	overflow: hidden;

	display: grid;
	place-items: center;

	background: #000;
}


.rooms-hero__video,
.rooms-hero__image {
	position: absolute;
	inset: 0;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;
}


.rooms-hero__content {
	position: relative;
	z-index: 2;

	text-align: center;
}


.rooms-hero__title {
	margin: 0;
	font-size: clamp(4rem, 12vw, 12rem);
	font-weight: 200;
	line-height: 0.85;
	text-transform: uppercase;
}


/* ==============================================================
   ROOM CAROUSEL
============================================================== */

.room-carousel {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.room-carousel__slide {
	position: absolute;
	inset: 0;

	opacity: 0;
	visibility: hidden;

	transition:
		opacity 1.2s ease,
		visibility 1.2s ease;
}

.room-carousel__slide.is-active {
	opacity: 1;
	visibility: visible;
}

.room-carousel__image {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;
}

.feature__content-title {
	margin: 0 0 var(--space-md);

	color: var(--white);

	font-size: var(--text-xl);
	font-weight: var(--font-weight-light);

	text-align: center;
	text-transform: uppercase;
}

/* ==========================================================
   BOOTHS
   ========================================================== */

.booths-page {
	padding-top: 120px;
	background: var(--black);
}

.booths-booking {
	min-height: calc(100svh - 120px);
	padding: var(--space-xl) var(--space-lg);
	background: var(--black);
}

.booths-booking__inner {
	width: min(100%, 1000px);
	margin-inline: auto;
}

.booths-booking h1 {
	margin-bottom: var(--space-xl);
	text-align: center;
}
.booths-booking__intro {
	text-align: center;
	margin-bottom: var(--space-lg);
}
.booths-booking__inner > .button {
	display: flex;
	width: fit-content;
	margin:
		0 auto
		var(--space-xl);
}

@media (max-width: 700px) {

	.booths-page {
		padding-top: 70px;
	}

	.booths-booking {
		min-height: calc(100svh - 70px);
		padding-inline: var(--space-md);
	}

}

/* ==========================================================
   DESIGNMYNIGHT WIDGET
   ========================================================== */

.dmn-booking-wrap {
	display: flex;
	justify-content: center;
	width: 100%;
}

#dmn-partner-widget {
	margin-inline: auto !important;
}

/* ==============================================================
   BOTTLES
============================================================== */

.bottles-page {
	padding-top: 120px;
	background: var(--black);
	color: var(--white);
}

.bottles-menu {
	padding:
		clamp(60px, 8vw, 100px)
		30px
		100px;
}

.bottles-menu__inner {
	width: min(100%, 1100px);
	margin-inline: auto;
}

.bottles-menu__header {
	margin-bottom: 70px;
	text-align: center;
}

.bottles-menu__header h1 {
	margin: 0;
	font-size: var(--text-xl);
	font-weight: var(--font-weight-light);
	text-transform: uppercase;
	letter-spacing: .3em;
}

.bottles-menu__groups {
	display: grid;
	gap: 70px;
}

.bottles-group__heading {
	margin-bottom: 28px;
}

.bottles-group__heading h2 {
	margin: 0 0 12px;
	text-transform: uppercase;
	letter-spacing: .3em;
}

.bottles-group__rule {
	display: block;
	width: 100%;
	height: 2px;
	background: #ff0000;
	box-shadow:
		0 0 8px #ff0000,
		0 0 16px #ff0000;
}

.bottles-group__items {
	display: grid;
	gap: 16px;
}

.bottle-item {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 30px;
	align-items: baseline;
}

.bottle-item__name,
.bottle-item__price {
	font-size: clamp(1rem, 1.4vw, 1.25rem);
	text-transform: uppercase;
	letter-spacing: .08em;
}

.bottle-item__price {
	text-align: right;
	white-space: nowrap;
}

.bottles-menu__actions {
	display: flex;
	justify-content: center;
	margin-top: var(--space-xl);
}

/* ==============================================================
   BOTTLES MOBILE
============================================================== */

@media (max-width: 700px) {

	.bottles-menu {
		padding: 70px 20px;
	}

	.bottles-menu__header {
		margin-bottom: 50px;
	}

	.bottles-menu__groups {
		gap: 50px;
	}

	.bottle-item {
		gap: 15px;
	}

	.bottle-item__name,
	.bottle-item__price {
		font-size: 1rem;
	}

}

/* ==============================================================
   FAQ PAGE
============================================================== */

.faq-page {
	background: var(--black);
	color: var(--white);
}


/* ==============================================================
   FAQ HERO
============================================================== */

.faq-hero {
	position: relative;

	height: 70svh;

	display: grid;
	place-items: center;

	overflow: hidden;

	background: var(--black);
}

.faq-hero__image {
	position: absolute;
	inset: 0;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;
}

.faq-hero__overlay {
	position: absolute;
	inset: 0;

	background: rgba(0, 0, 0, .35);
}

.faq-hero__content {
	position: relative;
	z-index: 2;

	text-align: center;
}

.faq-hero__title {
	margin: 0;

	color: var(--white);
	font-size: var(--text-xl);
	font-weight: var(--font-weight-light);

	text-transform: uppercase;
}


/* ==============================================================
   FAQ LIST
============================================================== */

.faq-list {
	padding-block:
		clamp(70px, 10vw, 140px);
}

.faq-list .container {
	width: min(
		calc(100% - 60px),
		1000px
	);
}


/* ==============================================================
   FAQ ITEM
============================================================== */

.faq-item {
	border-bottom: 1px solid var(--grey);
}

.faq-item:first-child {
	border-top: 1px solid var(--grey);
}

.faq-item__question {
	width: 100%;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-lg);

	padding:
		clamp(24px, 3vw, 40px)
		0;

	border: 0;

	background: transparent;
	color: var(--white);

	font: inherit;
	font-size: var(--text-md);
	font-weight: var(--font-weight-light);

	text-align: left;

	cursor: pointer;
}


/* ==============================================================
   FAQ PLUS
============================================================== */

.faq-item__icon {
	position: relative;

	flex: 0 0 24px;

	width: 24px;
	height: 24px;
}

.faq-item__icon::before,
.faq-item__icon::after {
	content: "";

	position: absolute;
	top: 50%;
	left: 50%;

	width: 20px;
	height: 1px;

	background: var(--red);

	transform:
		translate(-50%, -50%);
}

.faq-item__icon::after {
	transform:
		translate(-50%, -50%)
		rotate(90deg);

	transition:
		transform .3s ease;
}

.faq-item.is-open
.faq-item__icon::after {
	transform:
		translate(-50%, -50%)
		rotate(0);
}


/* ==============================================================
   FAQ ANSWER
============================================================== */

.faq-item__answer {
	display: grid;

	grid-template-rows: 0fr;

	transition:
		grid-template-rows .45s
		cubic-bezier(.2, .8, .2, 1);
}

.faq-item.is-open
.faq-item__answer {
	grid-template-rows: 1fr;
}

.faq-item__answer-inner {
	overflow: hidden;
}

.faq-item__answer p {
	max-width: 48rem;

	margin:
		0
		0
		clamp(30px, 4vw, 50px);

	color: var(--grey);

	font-weight: var(--font-weight-light);
	line-height: 1.5;
}


/* ==============================================================
   FAQ MOBILE
============================================================== */

@media (max-width: 700px) {

	.faq-hero {
		height: 60svh;
	}

	.faq-list .container {
		width: calc(100% - 40px);
	}

	.faq-item__question {
		gap: 20px;
		padding-block: 25px;
	}

}

/* ==============================================================
   CONTACT PAGE
============================================================== */

.contact-page {
	background: var(--black);
	color: var(--white);
}


/* ==============================================================
   CONTACT HERO
============================================================== */

.contact-hero {
	position: relative;

	height: 70svh;

	display: grid;
	place-items: center;

	overflow: hidden;

	background: var(--black);
}

.contact-hero__image {
	position: absolute;
	inset: 0;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;
}

.contact-hero__overlay {
	position: absolute;
	inset: 0;

	background: rgba(0, 0, 0, .35);
}

.contact-hero__content {
	position: relative;
	z-index: 2;

	text-align: center;
}

.contact-hero__title {
	margin: 0;

	color: var(--white);
	font-size: var(--text-xl);
	font-weight: var(--font-weight-light);

	text-transform: uppercase;
}


/* ==============================================================
   CONTACT
============================================================== */

.contact {
	padding-block:
		clamp(70px, 10vw, 140px);
}

.contact .container {
	width: min(
		calc(100% - 60px),
		900px
	);
}

.contact__intro {
	width: min(100%, 40rem);

	margin:
		0 auto
		clamp(50px, 7vw, 90px);

	text-align: center;
}

.contact__intro h2 {
	margin:
		0
		0
		var(--space-md);

	font-weight: var(--font-weight-light);
}

.contact__intro p {
	margin: 0;

	color: var(--grey);

	font-weight: var(--font-weight-light);
	line-height: 1.5;
}


/* ==============================================================
   CONTACT FORM 7
============================================================== */

.contact__form {
	width: min(100%, 46rem);

	margin-inline: auto;
}

.contact__form form {
	display: grid;
	gap: var(--space-lg);
}


/* ----------------------------------------------------------
   LABELS
---------------------------------------------------------- */

.contact__form label {
	display: grid;
	gap: 10px;

	color: var(--grey);

	font-size: .85rem;
	font-weight: var(--font-weight-light);

	text-transform: uppercase;
	letter-spacing: .2em;
}


/* ----------------------------------------------------------
   FIELDS
---------------------------------------------------------- */

.contact__form input[type="text"],
.contact__form input[type="email"],
.contact__form input[type="tel"],
.contact__form select,
.contact__form textarea {
	width: 100%;

	padding:
		16px
		0;

	border: 0;
	border-bottom: 1px solid var(--grey);
	border-radius: 0;

	outline: 0;

	background: transparent;
	color: var(--white);

	font-family: inherit;
	font-size: 1rem;
	font-weight: var(--font-weight-light);

	transition:
		border-color .3s ease;
}

.contact__form textarea {
	min-height: 160px;

	resize: vertical;
}

.contact__form input:focus,
.contact__form select:focus,
.contact__form textarea:focus {
	border-bottom-color: var(--red);
}

.contact__form textarea {
	min-height: 160px;

	padding: 16px;

	border: 1px solid var(--grey);
	border-radius: 0;

	resize: vertical;
}

.contact__form textarea:focus {
	border-color: var(--red);
}

/* ----------------------------------------------------------
   SELECT
---------------------------------------------------------- */

.contact__form select {
	appearance: none;
	cursor: pointer;
}

.contact__form select option {
	background: var(--black);
	color: var(--white);
}


/* ----------------------------------------------------------
   CF7 WRAPPERS
---------------------------------------------------------- */

.contact__form .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

.contact__form .wpcf7-not-valid-tip {
	margin-top: 8px;

	color: var(--red);

	font-size: .8rem;
	letter-spacing: 0;
	text-transform: none;
}


/* ----------------------------------------------------------
   SUBMIT
---------------------------------------------------------- */

.contact__form input[type="submit"] {
	cursor: pointer;
}


/* ----------------------------------------------------------
   CF7 RESPONSE
---------------------------------------------------------- */

.contact__form .wpcf7-response-output {
	margin:
		var(--space-lg)
		0
		0 !important;

	padding:
		var(--space-md) !important;

	border:
		1px solid var(--grey) !important;

	color: var(--white);

	font-weight: var(--font-weight-light);
}

.contact__form form.sent
.wpcf7-response-output {
	border-color: var(--red) !important;
}


/* ----------------------------------------------------------
   SPINNER
---------------------------------------------------------- */

.contact__form .wpcf7-spinner {
	margin-left: var(--space-sm);
}


/* ==============================================================
   CONTACT MOBILE
============================================================== */

@media (max-width: 700px) {

	.contact-hero {
		height: 60svh;
	}

	.contact .container {
		width: calc(100% - 40px);
	}

	.contact__intro {
		margin-bottom: 50px;
	}

}

/* ==============================================================
   404
============================================================== */

.error-404 {
	min-height: 100svh;

	display: grid;
	place-items: center;

	padding:
		var(--space-xl)
		var(--space-lg);

	background: var(--black);
	color: var(--white);

	text-align: center;
}

.error-404__content {
	width: min(100%, 40rem);
}

.error-404__code {
	margin: 0 0 var(--space-sm);

	color: var(--red);

	font-size: var(--text-sm);
	font-weight: var(--font-weight-light);

	letter-spacing: .3em;
}

.error-404__title {
	margin: 0 0 var(--space-md);

	font-size: var(--text-xl);
	font-weight: var(--font-weight-light);
}

.error-404__text {
	margin:
		0
		0
		var(--space-lg);

	color: var(--grey);

	font-weight: var(--font-weight-light);
	line-height: 1.5;
}

/* ==========================================================
   RECAPTCHA
   ========================================================== */

.grecaptcha-badge {
	visibility: hidden;
}

.recaptcha-notice {
	margin-top: 20px;
	color: var(--grey);
	font-size: 11px;
	font-weight: var(--font-weight-light);
	text-align: center;
}

.recaptcha-notice a {
	color: inherit;
}