/**
 * Graphic Design: Selected Work
 */

.ld-gd-work {
	position: relative;
	overflow: hidden;
	background: var(--ld-ink);
	color: var(--ld-cream);
	padding: clamp(90px, 10vw, 155px) 0;
}

.ld-gd-work::before {
	content: "";
	position: absolute;
	top: -15%;
	right: -10%;
	width: 55vw;
	height: 55vw;
	border-radius: 50%;
	background: rgba(190, 152, 72, 0.07);
	filter: blur(110px);
	pointer-events: none;
}

/* ---------------------------------------------------------
   Header
--------------------------------------------------------- */

.ld-gd-work__header {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 0.5fr);
	gap: clamp(50px, 8vw, 120px);
	align-items: end;
	margin-bottom: clamp(55px, 7vw, 90px);
}

.ld-gd-work .ld-gd-eyebrow {
	color: var(--ld-gold);
}

.ld-gd-work__title {
	margin: 0;
	color: var(--ld-cream);
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: clamp(50px, 5vw, 78px);
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 0.96;
}

.ld-gd-work__title em {
	display: block;
	margin-top: 7px;
	color: var(--ld-gold);
	font-weight: 500;
}

.ld-gd-work__header > p {
	max-width: 510px;
	margin: 0;
	color: rgba(241, 238, 234, 0.65);
	font-family: Inter, sans-serif;
	font-size: 15px;
	line-height: 1.8;
}

/* ---------------------------------------------------------
   Main stage
--------------------------------------------------------- */

.ld-gd-work__stage {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(310px, 0.55fr);
	gap: clamp(35px, 5vw, 74px);
	align-items: start;
}

.ld-gd-work__featured {
	min-width: 0;
}

.ld-gd-work__panel[hidden] {
	display: none;
}

.ld-gd-work__panel {
	animation: ldGdWorkReveal 320ms ease;
}

@keyframes ldGdWorkReveal {

	from {
		opacity: 0;
		transform: translateY(9px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}

}

/* ---------------------------------------------------------
   Artwork
--------------------------------------------------------- */

.ld-gd-work__artwork {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(480px, 48vw, 720px);
	padding: clamp(35px, 5vw, 75px);
	overflow: hidden;
	border: 1px solid rgba(241, 238, 234, 0.1);
	background: #f3efe9;
	box-shadow: 0 35px 80px rgba(0, 0, 0, 0.27);
}

.ld-gd-work__panel--dark .ld-gd-work__artwork {
	background: #0d0e10;
}

.ld-gd-work__artwork img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: clamp(420px, 42vw, 630px);
	height: auto;
	object-fit: contain;
	filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.08));
}

/* Promotional/rectangular pieces can use more of the frame */

.ld-gd-work__panel[data-gd-work-panel="rayner"] .ld-gd-work__artwork,
.ld-gd-work__panel[data-gd-work-panel="shed"] .ld-gd-work__artwork,
.ld-gd-work__panel[data-gd-work-panel="going-live"] .ld-gd-work__artwork {
	padding: clamp(18px, 2vw, 30px);
}

.ld-gd-work__panel[data-gd-work-panel="rayner"] .ld-gd-work__artwork img,
.ld-gd-work__panel[data-gd-work-panel="shed"] .ld-gd-work__artwork img,
.ld-gd-work__panel[data-gd-work-panel="going-live"] .ld-gd-work__artwork img {
	max-height: 680px;
}

/* ---------------------------------------------------------
   Featured meta
--------------------------------------------------------- */

.ld-gd-work__featured-meta {
	display: flex;
	gap: 28px;
	align-items: flex-end;
	justify-content: space-between;
	padding-top: 22px;
}

.ld-gd-work__featured-category {
	margin: 0 0 5px;
	color: var(--ld-gold);
	font-family: Inter, sans-serif;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ld-gd-work__featured-title {
	margin: 0;
	color: var(--ld-cream);
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: clamp(31px, 3vw, 47px);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1;
}

.ld-gd-work__counter {
	display: flex;
	gap: 9px;
	align-items: center;
	margin: 0;
	color: rgba(241, 238, 234, 0.35);
	font-family: Inter, sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.12em;
}

.ld-gd-work__counter span:first-child {
	color: var(--ld-gold);
	font-size: 17px;
}

/* ---------------------------------------------------------
   Project selector
--------------------------------------------------------- */

.ld-gd-work__index {
	max-height: 780px;
	overflow-y: auto;
	border-top: 1px solid rgba(241, 238, 234, 0.11);
	scrollbar-width: thin;
	scrollbar-color: rgba(190, 152, 72, 0.4) transparent;
}

.ld-gd-work__tab {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr) 20px;
	gap: 13px;
	align-items: center;
	width: 100%;
	padding: 17px 0;
	border: 0;
	border-bottom: 1px solid rgba(241, 238, 234, 0.11);
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition:
		padding-left 220ms ease,
		background-color 220ms ease;
}

.ld-gd-work__tab:hover,
.ld-gd-work__tab:focus-visible,
.ld-gd-work__tab.is-active {
	padding-left: 10px;
}

.ld-gd-work__tab:focus-visible {
	outline: 1px solid var(--ld-gold);
	outline-offset: -1px;
}

.ld-gd-work__tab-number {
	color: rgba(241, 238, 234, 0.3);
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 19px;
	font-style: italic;
	line-height: 1;
}

.ld-gd-work__tab-title {
	display: block;
	color: var(--ld-cream);
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: clamp(18px, 1.8vw, 25px);
	font-weight: 600;
	line-height: 1.05;
}

.ld-gd-work__tab-category {
	display: block;
	margin-top: 4px;
	color: rgba(241, 238, 234, 0.42);
	font-family: Inter, sans-serif;
	font-size: 8px;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.ld-gd-work__tab-arrow {
	color: rgba(241, 238, 234, 0.2);
	font-size: 17px;
	transition:
		color 220ms ease,
		transform 220ms ease;
}

.ld-gd-work__tab:hover .ld-gd-work__tab-arrow,
.ld-gd-work__tab:focus-visible .ld-gd-work__tab-arrow,
.ld-gd-work__tab.is-active .ld-gd-work__tab-arrow {
	color: var(--ld-gold);
	transform: translate(2px, -2px);
}

.ld-gd-work__tab.is-active .ld-gd-work__tab-number {
	color: var(--ld-gold);
}

.ld-gd-work__tab.is-active .ld-gd-work__tab-title {
	color: var(--ld-sand);
}

/* ---------------------------------------------------------
   Tablet
--------------------------------------------------------- */

@media (max-width: 980px) {

	.ld-gd-work__header {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.ld-gd-work__header > p {
		max-width: 680px;
	}

	.ld-gd-work__stage {
		grid-template-columns: 1fr;
		gap: 42px;
	}

	.ld-gd-work__index {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-height: none;
		overflow: visible;
		border-left: 1px solid rgba(241, 238, 234, 0.11);
	}

	.ld-gd-work__tab {
		padding: 17px;
		border-right: 1px solid rgba(241, 238, 234, 0.11);
	}

	.ld-gd-work__tab:hover,
	.ld-gd-work__tab:focus-visible,
	.ld-gd-work__tab.is-active {
		padding-left: 23px;
	}

}

/* ---------------------------------------------------------
   Mobile
--------------------------------------------------------- */

@media (max-width: 640px) {

	.ld-gd-work {
		padding: 72px 0 82px;
	}

	.ld-gd-work__header {
		margin-bottom: 46px;
	}

	.ld-gd-work__title {
		font-size: clamp(43px, 12vw, 58px);
	}

	.ld-gd-work__header > p {
		font-size: 14px;
		line-height: 1.7;
	}

	.ld-gd-work__artwork {
		min-height: 320px;
		padding: 28px;
	}

	.ld-gd-work__artwork img {
		max-height: 400px;
	}

	.ld-gd-work__featured-meta {
		align-items: flex-start;
	}

	.ld-gd-work__featured-title {
		font-size: 29px;
	}

	.ld-gd-work__index {
		display: block;
		border-left: 0;
	}

	.ld-gd-work__tab {
		padding: 16px 0;
		border-right: 0;
	}

	.ld-gd-work__tab:hover,
	.ld-gd-work__tab:focus-visible,
	.ld-gd-work__tab.is-active {
		padding-left: 8px;
	}

	.ld-gd-work__tab-title {
		font-size: 21px;
	}

}

/* ---------------------------------------------------------
   Reduced motion
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.ld-gd-work__panel {
		animation: none;
	}

	.ld-gd-work__tab,
	.ld-gd-work__tab-arrow {
		transition: none;
	}

}