/* 	============================================================
	THEME
	build.py writes this block from site.json "theme" and "fonts";
	every colour and font below reads one of these tokens
	============================================================ */
	:root {
		--paper:							rgb(238,242,241);
		--surface:						rgb(255,255,255);
		--ink:							rgb(26,36,38);
		--muted:							rgb(96,110,114);
		--accent:						rgb(34,88,78);
		--accent-ink:					rgb(255,255,255);
		--accent-2:						rgb(120,160,180);
		--line:							rgba(34,88,78,.18);
		--footer:						rgb(26,36,38);
		--footer-ink:					rgb(225,232,232);
		--radius:						0px;
		--pattern:						none;
		--scheme:						light;
		--logo-height:					96px;
		--display:						'Raleway';
		--body:							'Inter';
		--display-weight:				300;
		--display-tracking:				.14em;
		--display-case:					uppercase;
		--card-case:						uppercase;
		--heading-align:					center;
	}
/* 	============================================================
	END THEME
	============================================================ */


/* 	============================================================
	GLOBAL ELEMENTS
	============================================================ */
	*, *:before, *:after {
		box-sizing:						border-box;
	}

	html {
		background:						var(--paper);
		background-image:				var(--pattern);
		color-scheme:					var(--scheme);
	}

	body {
		min-height:						100vh;
		margin:							0;
		display:						flex;
		flex-direction:					column;

		color:							var(--ink);
		font-family:					var(--body), sans-serif;
		font-size:						15px;
		font-weight:					400;
		line-height:					1.5;
	}

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

	img {
		max-width:						100%;
		display:						block;
	}

	.head__inner, .hero__inner, .salons__inner, .partners, .footer__inner {
		width:							100%;
		max-width:						1100px;
		margin:							0 auto;
		padding:						0 24px;
	}
/* 	============================================================
	END GLOBAL ELEMENTS
	============================================================ */


/* 	============================================================
	HEAD + BRAND
	============================================================ */
	.head {
		position:						relative;
		z-index:						2;
	}

	.head__inner {
		min-height:						72px;
		padding-top:					20px;
		padding-bottom:					20px;
		display:						flex;
		gap:							24px;
		align-items:					center;
	}

	.head__langs {
		margin-left:					auto;
		display:						flex;
		gap:							10px;
		align-self:						flex-start;
	}

		.head__lang {
			opacity:					.55;

			transition:					opacity .15s;
		}

			.head__lang:hover, .head__lang--active {
				opacity:				1;
			}

		.head__flag {
			height:						22px;
		}

	.brand {
		display:						flex;
		flex-direction:					column;
		gap:							6px;
		align-items:					flex-start;
	}

		.brand__logo {
			max-height:					var(--logo-height);
			width:						auto;
		}

			.brand__logo--badge {
				border-radius:			var(--radius);
				box-shadow:				0 6px 24px rgba(0,0,0,.12);
			}

		.brand__name {
			color:						var(--accent);
			font-family:				var(--display), serif;
			font-size:					clamp(28px, 4.4vw, 46px);
			font-weight:				var(--display-weight);
			line-height:				1.1;
			letter-spacing:				var(--display-tracking);
			text-transform:				var(--display-case);
		}

		.brand__tagline {
			color:						var(--ink);
			font-size:					15px;
			letter-spacing:				.04em;
		}

		.brand__place {
			display:					flex;
			gap:						8px;
			align-items:				center;

			color:						var(--muted);
			font-size:					13px;
			letter-spacing:				.08em;
			text-transform:				uppercase;
		}

			.brand__flag {
				height:					16px;
			}

	.align--center .head__inner {
		flex-direction:					column;

		text-align:						center;
	}

		.align--center .brand {
			align-items:				center;
		}

		.align--center .head__langs {
			position:					absolute;
			top:						20px;
			right:						24px;
		}
/* 	============================================================
	END HEAD + BRAND
	============================================================ */


/* 	============================================================
	HERO
	============================================================ */
	.hero__frame {
		position:						relative;
		overflow:						hidden;

		background:						var(--surface);
	}

		.hero__slide {
			height:						100%;
			width:						100%;
			position:					absolute;
			top:						0;
			left:						0;
			opacity:					0;

			object-fit:					cover;

			transition:					opacity 1.2s ease-in-out;
		}

			.hero__slide--active {
				opacity:				1;
			}

		.hero__caption {
			max-width:					70%;
			position:					absolute;
			right:						14px;
			bottom:						12px;
			padding:					4px 10px;

			border-radius:				4px;
			background:					rgba(0,0,0,.45);

			color:						rgb(255,255,255);
			font-size:					12px;
			text-align:					right;
		}

			.hero__caption:empty {
				display:				none;
			}

	/* framed: the photo sits under the name, inside the page width */
	.hero--framed .hero__frame {
		height:							clamp(240px, 46vw, 500px);

		border-radius:					var(--radius);
	}

	/* cover: one full-bleed photo with the name over it */
	.hero--cover .head {
		width:							100%;
		position:						absolute;
		top:							0;
		left:							0;
	}

	.hero--cover .hero__inner {
		max-width:						none;
		position:						relative;
		padding:						0;
	}

	.hero--cover .hero__frame {
		height:							clamp(460px, 82vh, 820px);
	}

		.hero--cover .hero__frame:after {
			content:					"";
			position:					absolute;
			pointer-events:				none;

			background:					linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 45%, rgba(0,0,0,.72) 100%);
			inset:						0;
		}

		.hero--cover .hero__caption {
			top:						auto;
			right:						24px;
			bottom:						auto;
			bottom:						24px;
			z-index:					1;
		}

	.hero--cover .hero__intro {
		max-width:						1100px;
		position:						absolute;
		right:							0;
		bottom:							56px;
		left:							0;
		z-index:						1;
		margin:							0 auto;
		padding:						0 24px;
	}

		.hero--cover .brand__name, .hero--cover .brand__tagline, .hero--cover .brand__place {
			color:						rgb(255,255,255);
			text-shadow:				0 1px 12px rgba(0,0,0,.45);
		}

		.hero--cover .brand__name {
			font-size:					clamp(36px, 6.4vw, 76px);
		}

		.hero--cover .brand__tagline {
			font-size:					17px;
		}

	.hero--cover.align--center .hero__intro {
		text-align:						center;
	}

		.hero--cover.align--center .hero__intro .brand {
			align-items:				center;
		}

	.hero--cover .head__langs {
		margin-top:						4px;
	}

	/* split: the name and tagline on the left, the photo on the right */
	.hero--split .hero__inner {
		padding-top:					12px;
		display:						grid;
		grid-template-columns:			minmax(0, 5fr) minmax(0, 7fr);
		gap:							48px;
		align-items:					center;
	}

		.hero--split .brand__name {
			font-size:					clamp(34px, 4.6vw, 60px);
		}

		.hero--split .brand__tagline {
			margin-top:					6px;
			padding-top:				10px;

			border-top:					2px solid var(--accent-2);

			font-size:					17px;
		}

	.hero--split .hero__frame {
		aspect-ratio:					4 / 3;

		border-radius:					var(--radius);
		box-shadow:						0 18px 50px rgba(0,0,0,.18);
	}

	.hero--split .head__inner {
		min-height:						0;
	}
/* 	============================================================
	END HERO
	============================================================ */


/* 	============================================================
	SALONS
	============================================================ */
	.salons {
		padding:						48px 0 24px 0;
	}

	.salons__heading {
		margin-bottom:					12px;
		display:						block;

		color:							var(--ink);
		font-family:					var(--display), serif;
		font-size:						clamp(24px, 3.4vw, 36px);
		font-weight:					var(--display-weight);
		line-height:					1.2;
		text-align:						var(--heading-align);
	}

		.salons__heading span {
			color:						var(--accent);
		}

	.salons__year {
		margin:							32px 0 16px 0;
		display:						flex;
		gap:							16px;
		align-items:					center;

		color:							var(--accent);
		font-size:						14px;
		font-weight:					700;
		letter-spacing:					.18em;
	}

		.salons__year:after, .align--center .salons__year:before {
			content:					"";
			height:						1px;
			flex:						1;

			background:					var(--line);
		}

	/* auto-fit collapses the empty tracks, so one or two salons line up with the page instead of
	   hugging the left edge of a wide grid */
	.salons__grid {
		display:						grid;
		grid-template-columns:			repeat(auto-fit, minmax(230px, 270px));
		gap:							28px 22px;
	}

		.align--center .salons__grid {
			justify-content:			center;
		}

	.salons__empty {
		margin:							24px 0;
		padding:						36px 24px;
		display:						block;

		border:							1px dashed var(--line);
		border-radius:					var(--radius);

		color:							var(--muted);
		font-size:						16px;
		text-align:						center;
	}

	.salon {
		display:						flex;
		flex-direction:					column;
		gap:							10px;
	}

		.salon__art {
			position:					relative;
			display:					block;
			overflow:					hidden;

			border-radius:				var(--radius);
			background:					var(--surface);
			aspect-ratio:				4 / 3;
		}

		.salon__image {
			height:						100%;
			width:						100%;

			object-fit:					cover;

			transition:					transform .35s ease;
		}

			.salon:hover .salon__image {
				transform:				scale(1.04);
			}

			.salon__image--letter {
				display:				flex;
				align-items:			center;
				justify-content:		center;

				background:				linear-gradient(135deg, var(--accent), var(--accent-2));

				color:					var(--accent-ink);
				font-family:			var(--display), serif;
				font-size:				72px;
			}

		.salon__badge {
			position:					absolute;
			top:						10px;
			left:						10px;
			padding:					3px 10px;

			border-radius:				20px;
			background:					var(--accent);

			color:						var(--accent-ink);
			font-size:					11px;
			font-weight:				700;
			letter-spacing:				.06em;
			text-transform:				uppercase;
			white-space:				nowrap;
		}

		.salon__text {
			display:					flex;
			flex-direction:				column;
			gap:						2px;
		}

		.salon__title {
			color:						var(--ink);
			font-family:				var(--display), serif;
			font-size:					19px;
			font-weight:				var(--display-weight);
			line-height:				1.25;
			text-transform:				var(--card-case);
		}

		.salon__date {
			color:						var(--muted);
			font-size:					13px;
		}

			.salon--open .salon__date {
				color:					var(--accent);
				font-weight:			600;
			}

	/* tile: text centred under the image */
	.cards--tile .salon__text {
		text-align:						center;
	}

	/* poster: a card with the text on its own panel */
	.cards--poster .salon {
		gap:							0;
		overflow:						hidden;

		border-radius:					var(--radius);
		background:						var(--surface);
		box-shadow:						0 2px 0 var(--line), 0 12px 30px rgba(0,0,0,.08);

		transition:						transform .2s ease, box-shadow .2s ease;
	}

		.cards--poster .salon:hover {
			box-shadow:					0 2px 0 var(--line), 0 18px 40px rgba(0,0,0,.14);

			transform:					translateY(-4px);
		}

		.cards--poster .salon__art {
			border-radius:				0;
		}

		.cards--poster .salon__text {
			padding:					14px 16px 16px 16px;

			border-top:					3px solid var(--accent-2);
		}

	/* row: one salon per line, image left */
	.cards--row .salons__grid {
		grid-template-columns:			1fr;
		gap:							0;
	}

	.cards--row .salon {
		padding:						18px 0;
		display:						grid;
		grid-template-columns:			240px minmax(0, 1fr);
		gap:							28px;
		align-items:					center;

		border-bottom:					1px solid var(--line);
	}

		.cards--row .salon__title {
			font-size:					clamp(22px, 2.6vw, 30px);
		}

		.cards--row .salon__date {
			font-size:					14px;
		}

		.cards--row .salon:hover .salon__title {
			color:						var(--accent);
		}
/* 	============================================================
	END SALONS
	============================================================ */


/* 	============================================================
	PARTNERS + FOOTER
	============================================================ */
	.partners {
		padding-top:					28px;
		padding-bottom:					40px;
		display:						flex;
		flex-direction:					column;
		gap:							14px;
		align-items:					center;
	}

		.partners__heading {
			color:						var(--muted);
			font-size:					12px;
			letter-spacing:				.2em;
			text-transform:				uppercase;
		}

		.partners__list {
			display:					flex;
			gap:						24px;
		}

			.partner__logo {
				max-height:				64px;
				max-width:				120px;
			}

	.footer {
		margin-top:						auto;

		background:						var(--footer);
	}

		.footer__inner {
			min-height:					52px;
			padding-top:				12px;
			padding-bottom:				12px;
			display:					flex;
			flex-wrap:					wrap;
			gap:						6px 24px;
			align-items:				center;
			justify-content:			space-between;

			color:						var(--footer-ink);
			font-size:					13px;
		}

			.footer__mail {
				text-decoration:		underline;
				text-underline-offset:	3px;
			}
/* 	============================================================
	END PARTNERS + FOOTER
	============================================================ */


/* 	============================================================
	PHONE
	============================================================ */
	@media (max-width: 760px) {
		.head__inner, .hero__inner, .salons__inner, .partners, .footer__inner, .hero--cover .hero__intro {
			padding-right:				16px;
			padding-left:				16px;
		}

		.head__inner {
			padding-top:				16px;
			padding-bottom:				16px;
		}

		.align--center .head__langs, .hero--cover .head__langs {
			top:						16px;
			right:						16px;
		}

		.align--center .head__inner {
			padding-top:				52px;
		}

		.hero--split .hero__inner {
			grid-template-columns:		1fr;
			gap:						24px;
		}

		.hero--cover .hero__intro {
			bottom:						48px;
		}

		.hero--cover .hero__caption, .hero__caption {
			max-width:					calc(100% - 16px);
			right:						8px;
			bottom:						8px;

			font-size:					11px;
		}

		.salons {
			padding-top:				32px;
		}

		.salons__grid {
			grid-template-columns:		repeat(2, minmax(0, 1fr));
			gap:						20px 12px;
		}

		.salon__title {
			font-size:					16px;
		}

		.salon__date {
			font-size:					12px;
		}

		.salon__badge {
			top:						6px;
			left:						6px;
			padding:					2px 8px;

			font-size:					10px;
		}

		.cards--poster .salon__text {
			padding:					10px 12px 12px 12px;
		}

		.cards--row .salon {
			padding:					14px 0;
			grid-template-columns:		128px minmax(0, 1fr);
			gap:						14px;
		}

		/* a 128px thumbnail has no room for the badge; the open salon's date line already stands out */
		.cards--row .salon__badge {
			display:					none;
		}

		.salon__image--letter {
			font-size:					48px;
		}

		.footer__inner {
			flex-direction:				column;
			align-items:				flex-start;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.hero__slide, .salon__image, .cards--poster .salon {
			transition:					none;
		}
	}
/* 	============================================================
	END PHONE
	============================================================ */