/* import serif */
@font-face {
	font-display: swap;
	font-family: 'Cormorant Garamond';
	font-weight: 300 700;
	src: local(''),
		url('../fonts/CormorantGaramond-subset.woff2') format('woff2');
}

h1 {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	line-height: 1em;
}

h2 {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 700;
	line-height: 1.2em;
}

.page-intro {
	background: rgb(var(--color-purple));
	color: rgb(var(--color-white));
	text-align: center;
	margin: 0 auto;
	padding: clamp(3rem, 6vw, 6rem) 1rem;
	max-width: var(--layout-wide-content);
	position: relative;
	text-wrap: balance;
}

.page-intro::before {
	content: ' ';
	background: rgb(var(--color-purple));
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	z-index: -1;
}

.page-intro::after {
	content: ' ';
	position: absolute;
	left: calc(50% - 4rem);
	border: solid 4rem transparent;
	border-top-color: rgb(var(--color-purple));
	bottom: -7.9rem;
	pointer-events: none;
	z-index: 10;
}

/* blocks */

.block-basic {
	margin: 0 auto;
	padding: 6rem 2rem;
	width: var(--layout-wide);
	max-width: calc(100% - 4rem);
	display: block;
	display: flow-root;
	position: relative;
}

.block-basic > * {
	max-width: var(--layout-content-width);
}

.block-basic.style-reverse {
	background: rgb(var(--color-purple));
	color: rgb(var(--color-white));
	padding-block: 2rem;
	position: relative;
	max-width: 100%;
}

.block-basic.style-reverse::after {
	position: absolute;
	content: ' ';
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	background: rgb(var(--color-purple));
	z-index: -1;
}

.block-basic.style-bold {
	background: rgb(var(--color-magenta));
	color: rgb(var(--color-white));
}

.block-basic.style-bold::before {
	background: rgb(var(--color-magenta));
	position: absolute;
	content: ' ';
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	z-index: -1;
}

.block-basic.style-bold::after {
	content: ' ';
	position: absolute;
	left: calc(50% - 4rem);
	border: solid 4rem transparent;
	border-bottom-color: rgb(var(--color-magenta));
	top: -7.9rem;
	pointer-events: none;
	z-index: 10;
}

@media (min-width: 42em) {
	.block-basic.style-bold::after {
		left: 2rem;
	}
}

.block-icon-cards {
	position: relative;
	max-width: var(--layout-wide);
	width: calc(100% - 2rem);
	margin: 0 auto;
	padding: 6rem 1rem;
	text-wrap: balance;
}

.block-icon-cards::before {
	content: ' ';
	position: absolute;
	background: rgb(var(--color-ltgray));
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	z-index: -1;
}

.block-icon-cards.style-clean::before {
	content: none;
}

.icon-cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem;
	list-style: none;
	padding: 0;
	margin: 4rem auto 0;
}

.block-icon-cards.style-clean .icon-cards {
	gap: 4rem clamp(1rem, 6vw - 0.8rem, 4rem);
	max-width: clamp(36rem, 55vw, 38rem);
}

.icon-cards li {
	flex: 0 1 20rem;
	background: rgb(var(--color-white));
	padding: 2rem;
	margin: 0;
}

.block-icon-cards.style-clean .icon-cards li {
	flex: 0 1 clamp(8rem, 4vw + 1.2rem, 10rem);
	padding: 0;
}

.block-icon-cards.style-bold .icon-cards li {
	background: rgb(var(--color-magenta));
	color: rgb(var(--color-white));
}

.block-icon-cards.style-bold .icon-cards li:nth-child(3n+2) {
	background: rgb(var(--color-purple));
}

.block-icon-cards.style-bold .icon-cards li:nth-child(3n+3) {
	background: rgb(var(--color-dkgray));
}

.icon-cards li figure {
	width: 100%;
	height: 5rem;
}

.block-icon-cards.style-normal .icon-cards li figure {
	height: 6rem;
}

.block-icon-cards.style-clean .icon-cards li figure {
	margin: 0 auto;
}

.icon-cards li figure img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left;
}

.block-icon-cards.style-bold .icon-cards li figure img {
	filter: brightness(0) invert(1);
}

.block-icon-cards.style-clean .icon-cards li figure img {
	object-position: center;
}

.icon-cards li .content {
	margin-top: 1rem;
}

.block-icon-cards.style-bold .content {
	font-size: 1.5rem;
}

.block-icon-cards.style-clean .content {
	font-weight: var(--font-weight-bold);
}

.icon-cards li .content h3 {
	text-transform: uppercase;
}

.block-icon-cards .closer-link {
	display: block;
	margin: 4rem auto 0;
	width: fit-content;
}

.block-icon-cards.style-bold .closer-link {
	--btn-main: var(--color-white);
	--btn-contrast: var(--color-black);
	--btn-border: var(--color-black);
}

.block-split-content {
	margin: 1rem auto;
	padding: 6rem 2rem;
	width: var(--layout-medium-wide);
	max-width: calc(100% - 4rem);
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

@media(min-width: 45rem) {
	.block-split-content {
		flex-direction: row;
	}

	.block-split-content .content-primary {
		flex: 1 1 0;
	}

	.block-split-content .content-secondary {
		flex: 0 0 clamp(18rem, 35vw, 21rem);
		box-sizing: border-box;
	}
}

.block-split-content .content-secondary {
	background: rgb(var(--color-magenta));
	color: rgb(var(--color-white));
	padding: 2rem;
}

.block-split-content .content-secondary h2 {
	font-size: 2.5rem;
	margin-bottom: 0.25em;
}

.block-split-content .content-secondary a {
	color: inherit;
	font-weight: var(--font-weight-bold);
}

.block-team-primary {
	position: relative;
	max-width: var(--layout-wide);
	width: calc(100% - 2rem);
	margin: 0 auto;
	padding: 6rem 1rem;
}

.block-team-primary .members {
	display: grid;
	margin-top: 6rem;
	gap: 5rem;	
	padding: 0;
	justify-content: center;
	grid-template-columns: repeat(auto-fit, clamp(0rem, 20rem, 100%));
}

.block-team-primary .members .member {
	display: flex;
	flex-direction: column;
	text-transform: uppercase;
	text-align: center;
	font-weight: var(--font-weight-bold);
	text-decoration: none;
	color: inherit;
	position: relative;
}

.block-team-primary .members .member::before {
	position: absolute;
	content: ' ';
	pointer-events: none;
	top: 0;
	right: 0;
	width: 50%;
	aspect-ratio: 1;
	background: rgb(var(--color-white));
	z-index: 1;
}

.block-team-primary .members .member::after {
	position: absolute;
	content: ' ';
	pointer-events: none;
	top: -1rem;
	right: -1rem;
	width: calc(50% + 2rem);
	aspect-ratio: 1;
	background: url(../img/logo-element.svg) top right no-repeat;
	background-size: contain;
	mix-blend-mode: multiply;
	z-index: 2;
}

.block-team-primary .members .member:nth-child(2n)::after {
	background-image: url(../img/logo-element-2.svg)
}

.block-team-primary .members .member figure {
	order: -1;
	width: 100%;
	aspect-ratio: 1;
}

.block-team-primary .members .member figure img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.block-team-primary .members .member h3 {
	font-size: 1.5rem;
}

.members .member .position-title {
	font-size: 0.9rem;
}

.block-team-secondary {
	position: relative;
	max-width: var(--layout-wide);
	width: calc(100% - 2rem);
	margin: 0 auto;
	padding: 6rem 1rem;
}

.block-team-secondary .members {
	display: grid;
	margin-top: 6rem;
	gap: 1rem;
	padding: 0;
	justify-content: center;
	grid-template-columns: 1fr;
	list-style: none;
	max-width: 28rem;
	margin-inline: auto;
}

.block-team-secondary .members .member {
	display: grid;
	margin: 0;
	padding: 1rem;
	background: rgb(var(--color-ltgray));
	column-gap: 1rem;
	grid-template-areas: 
		"photo"
		"name"
		"title"
		"button";
}

@media(min-width: 22rem) {
	.block-team-secondary .members .member {
		grid-template-columns: 6rem 1fr;
		grid-template-areas: 
			"photo name"
			"photo title"
			"photo button";
	}
}

@media(min-width: 44rem) {
	.block-team-secondary .members {
		max-width: none;
		grid-template-columns: repeat(auto-fit, clamp(0rem, 20rem, 100%));
		gap: 2rem;
	}

	.block-team-secondary .members .member {
		text-align: center;
		background: rgb(var(--color-ltgray));
		column-gap: 0;
		grid-template-columns: 1fr;
		grid-template-areas: 
			"photo"
			"name"
			"title"
			"button";
	}

	.block-team-secondary .members .member .image {
		align-self: center;
		justify-self: center;
	}
	
	.block-team-secondary button {
		justify-self: center;
	}
}

.block-team-secondary .members .member .image {
	grid-area: photo;
}

.block-team-secondary .members .member figure {
	width: 6rem;
	aspect-ratio: 1;
}

.block-team-secondary .members .member figure img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	border-radius: 3rem;
}

.block-team-secondary h3 {
	grid-area: name;
	font-size: 1rem;
}

.block-team-secondary .title {
	grid-area: title;
	font-size: 0.9rem;
}

.block-team-secondary button {
	grid-area: button;
	width: fit-content;
}

.block-team-secondary.style-reverse::before {
	background: rgb(var(--color-ltgray));
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	content: ' ';
	z-index: -1;
}

.block-team-secondary.style-reverse .members .member {
	background: rgb(var(--color-white));
}

.block-split {
	margin: 0 auto;
	position: relative;
	width: var(--layout-wide);
	max-width: calc(100% - 4rem);
	display: flex;
	flex-direction: column;
	padding: 2rem;
	gap: 2rem;
}

.block-split.style-normal {
	margin: 6rem auto;
}

.block-split.style-alt {
	background: rgb(var(--color-ltgray));
}

.block-split.style-alt::before,
.block-split.style-bold::before {
	background: rgb(var(--color-ltgray));
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	content: ' ';
	z-index: -1;
}

.block-split.style-bold {
	background: rgb(var(--color-magenta));
	color: rgb(var(--color-white));
	margin-top: 3rem;
}

.block-split.style-bold::before {
	background: rgb(var(--color-magenta));
}

.block-split.style-bold::after {
	background: rgb(var(--color-red));
	position: absolute;
	top: -3rem;
	height: 5rem;
	left: calc(100% - 2rem);
	right: calc(50% - 50vw);
	content: ' ';
	z-index: 1;
}

.block-split .image {
	max-width: clamp(50%, 18rem, calc(100% - 2rem));
}

.block-split.style-bold .image {
	align-self: flex-end;
}

.block-split .image figure {
	width: 100%;
	height: 100%;
	margin: 0;
}

.block-split .image figure img {
	display: block;
	object-fit: contain;
	width: 100%;
	height: 100%;	
}

.block-split .content {
	box-sizing: border-box;
	display: block;
	max-width: var(--layout-content-width);
}

.block-split.order-reverse .image {
	margin-left: auto;
}

@media(min-width: 52rem) {
	.block-split {
		flex-direction: row;
		align-items: center;
	}

	.block-split.style-bold {
		justify-content: space-between;
		padding-bottom: 0;
	}
	
	.block-split .image {
		flex: 0 0 24rem;
		max-width: 100%;
	}

	.block-split.style-normal .image {
		flex: 0 0 18rem;
		padding-inline-end: 2rem;
		border-inline-end: solid thin rgb(var(--color-black));
	}

	.block-split.style-bold .content {
		padding-bottom: 2rem;
	}

	.block-split.order-reverse .content {
		order: -1;
	}
}

.block-quote {
	margin: 0 auto;
	position: relative;
	width: var(--layout-full);
	max-width: 100%;
	display: flex;
	flex-direction: column;
}

.block-quote .image {
	align-self: start;
	width: 15rem;
	max-width: calc(100% - 2rem);
	padding: 0 0 0 2rem;
	position: relative;
	background: rgb(var(--color-magenta));
}

.block-quote .image figure {
	width: 100%;
	height: 100%;
	margin: 0;
}

.block-quote .image figure img {
	display: block;
	object-fit: contain;
	width: 100%;
	height: 100%;	
}

.block-quote .content {
	padding: 2rem;
	display: block;
	max-width: var(--layout-content-width);
}

@media(min-width: 52rem) {
	.block-quote {
		flex-direction: row;
		align-items: center;
	}

	.block-quote .image {
		padding: 0;
		flex: 0 0 clamp(0rem, 35vw, 24rem);
		max-width: 100%;
	}

	.block-quote.style-alt {
		gap: 2rem;
	}
}

blockquote {
	margin: 0;
}

blockquote::before {
	content: ' ';
	display: block;
	background: url(../img/quote-open.svg) no-repeat;
	background-size: contain;
	width: 3rem;
	height: 3rem;
}

.block-quote .quote {
	font-family: 'Cormorant Garamond', serif;
	font-size: clamp(1.25rem, 4vw, 1.5rem);
	font-weight: 500;
	line-height: 1.2;
}

.block-quote .quote::after {
	content: ' ';
	display: inline-block;
	background: url(../img/quote-close.svg) no-repeat;
	background-size: contain;
	width: 1em;
	height: 0.9em;
	margin-left: 0.5em;
}

cite {
	display: block;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 1rem 0;
	font-weight: var(--font-weight-bold);
}

cite .title {
	font-size: 0.75rem;
}

/*
.block-quote .content > a {
	background: rgb(var(--color-purple));
	border-color: rgb(var(--color-purple));
	margin-top: 1.5rem;
}
*/

.block-quote.style-alt {
	background: rgb(var(--color-ltgray));
}

.block-quote.style-alt::before {
	background: rgb(var(--color-ltgray));
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	content: ' ';
	z-index: -1;
}

.block-quote.style-alt .image {
	padding: 0;
}

.block-quote.style-alt .image::before {
	position: absolute;
	content: ' ';
	pointer-events: none;
	top: 0;
	right: 0;
	width: 50%;
	aspect-ratio: 1;
	background: rgb(var(--color-ltgray));
	z-index: 1;
}

.block-quote.style-alt .image::after {
	position: absolute;
	content: ' ';
	pointer-events: none;
	top: -1rem;
	right: -1rem;
	width: calc(50% + 2rem);
	aspect-ratio: 1;
	background: url(../img/logo-element.svg) top right no-repeat;
	background-size: contain;
	mix-blend-mode: multiply;
	z-index: 2;
}

.block-quote .content > a.button {
	--btn-main: var(--color-purple);
	--btn-contrast: var(--color-white);
	--btn-border: var(--color-purple);
	margin-top: 0.75rem;
}

.block-quote.style-alt .content > a.button {
	--btn-main: var(--color-magenta);
	--btn-border: var(--color-magenta);
}