/* ==========================================================================
   CASE STUDIES — TRANSITION LAYER
   ========================================================================== */

.case-studies {
	position: fixed;
	z-index: 2000;
	inset: 0;

	overflow-x: hidden;

	background: var(--color-bg);
	color: var(--color-text);

	visibility: hidden;
	pointer-events: none;

	transform: translateX(100%);

	transition:
		transform 700ms cubic-bezier(0.76, 0, 0.24, 1),
		visibility 0s linear 700ms;

	will-change: transform;
}

.case-studies.is-open {
	visibility: visible;
	pointer-events: auto;

	transform: translateX(0);

	transition:
		transform 700ms cubic-bezier(0.76, 0, 0.24, 1),
		visibility 0s linear 0s;
}


/* ==========================================================================
   CASE STUDIES — OUTGOING PORTFOLIO SURFACE
   ========================================================================== */

.case-study-source {
	transition:
		transform 700ms cubic-bezier(0.76, 0, 0.24, 1);

	will-change: transform;
}

body.is-case-study-open .case-study-source {
	transform: translateX(-100%);
}


/* ==========================================================================
   CASE STUDIES — ACTIVE STUDY
   ========================================================================== */

.case-study {
	display: none;

	width: 100%;
	height: 100%;
	min-height: 100svh;

	overflow-y: auto;
	overflow-x: hidden;
}

.case-study.is-active {
	display: block;
}


/* ==========================================================================
   STUDY — CHAPTER
   ========================================================================== */

.chapter-study {
	position: relative;

	min-height: 100svh;

	background: var(--color-bg);
	color: var(--color-text);
}

.study {
	background: none;
	color: var(--color-text);
}


/* ==========================================================================
   STUDY — STAGE AND CONTAINER
   ========================================================================== */

.study-stage {
	position: relative;

	min-height: 100svh;

	padding:
		clamp(120px, 15vh, 180px)
		var(--page-padding)
		clamp(50px, 6vh, 80px);

	background-color: var(--color-bg);
}

.study-container {
	width: 100%;
	max-width: 1180px;

	margin: 0 auto;
}


/* ==========================================================================
   STUDY — SHARED TYPOGRAPHY
   ========================================================================== */

.study h1 {
	margin: 0;

	font-family: var(--font-primary);
	font-size: 72px;
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: -3.84px;
}

.study h2 {
	margin: 0;

	font-family: var(--font-primary);
	font-size: 52px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -1.5px;
}

.study h3 {
	margin: 0 0 32px;

	font-family: var(--font-primary);
	font-size: clamp(2.4rem, 4vw, 3.25rem);
	line-height: 0.92;
	letter-spacing: -0.05em;
}

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

.study h4 {
	margin: 0;

	font-family: var(--font-primary);
	font-size: 1.15rem;
}

.study p {
	margin: 0;

	font-family: var(--font-primary);
	font-size: 14px;
	font-weight: 400;
}


/* ==========================================================================
   STUDY — HEADER
   ========================================================================== */

.study-header {
	position: absolute;
	z-index: 1100;

	top: 0;
	left: 0;

	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;

	width: 100%;

	padding:
		28px
		var(--page-padding);

	color: #fff;

	mix-blend-mode: difference;
}


/* ==========================================================================
   STUDY — HERO
   ========================================================================== */

.study-count {
	margin: 0;
	padding-bottom: 24px;

	font-family: var(--font-condensed);
	color: var(--color-accent);

	font-size: 22px;
	font-weight: 400;
}

.study-title {
	padding-bottom: 52px;
}

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

.study-intro {
	max-width: 750px;
	margin: 0;

	font-family: var(--font-primary);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.5px;
}

.study-hero-image {
	display: flex;
	flex-direction: column;

	margin-top: 52px;
}

.study-hero-image > img {
	display: block;

	width: 100%;
	height: auto;
}

.study-hero-image-notes {
	display: flex;
	flex-direction: column;
	gap: 30px;

	margin-top: -136px;
	margin-left: 36px;
	padding: 0 36px;

	border-left: 6px solid var(--color-accent);
}


/* ==========================================================================
   STUDY — CONTENT SECTIONS
   ========================================================================== */

.study-section {
	position: relative;

	display: grid;
	grid-template-columns:
		minmax(280px, 0.8fr)
		minmax(420px, 1.2fr);

	gap: 70px 90px;

	margin-top: 72px;
	padding: 40px 0 80px;

	border-top: 1px solid var(--color-muted);
}

.study-copy {
	align-self: center;

	width: 100%;
	max-width: 430px;
}

.study-section-number {
	margin: 0 0 25px;

	font-family: var(--font-condensed);
	color: var(--color-accent);

	font-size: 3.25em;
	font-weight: 400;
}

.study-section h4 {
	padding-bottom: 16px;
}

.study-section-description {
	margin: 0;

	font-family: var(--font-primary);
	font-size: 0.875em;
	line-height: 1.25em;
}

.study-visual {
	position: relative;
	align-self: center;
}

.study-image {
	display: block;

	width: 100%;
	height: auto;
}

/* ==========================================================================
   STUDY — TOP BLUR
   ========================================================================== */

.study-top-blur {
	position: absolute;
	z-index: 900;

	top: 0;
	left: 0;

	width: 100%;
	height: 80px;

	pointer-events: none;

	-webkit-backdrop-filter: blur(15px);
	backdrop-filter: blur(15px);

	-webkit-mask-image: linear-gradient(
		to bottom,
		#000 0%,
		#000 70%,
		transparent 100%
	);

	mask-image: linear-gradient(
		to bottom,
		#000 0%,
		#000 70%,
		transparent 100%
	);
}


/* ==========================================================================
   STUDY — BACK TO PROOF
   ========================================================================== */

.study-back {
	grid-column: 1;
	justify-self: start;

	display: inline-flex;
	align-items: center;
	gap: 10px;

	padding: 0;

	background: none;
	border: 0;

	font-family: var(--font-condensed);
	font-size: 0.75rem;
	font-weight: 500;

	letter-spacing: 0.14em;
	text-transform: uppercase;

	cursor: pointer;
}

.study-back-icon {
	display: block;

	width: 16px;
	height: 16px;

	transition:
		transform 180ms ease;
}

.study-back:hover .study-back-icon,
.study-back:focus-visible .study-back-icon {
	transform: translateX(-4px);
}

.study-back:focus-visible {
	outline: 2px solid var(--color-disrupt);
	outline-offset: 6px;
}

/* ==========================================================================
   STUDY — CLOSE
   ========================================================================== */

.study-close-button {
	grid-column: 2;
	justify-self: end;
}

.study-close {
	position: relative;

	display: block;

	width: 32px;
	height: 32px;

	padding: 0;

	background: none;
	border: 0;

	cursor: pointer;
}

.study-close span {
	position: absolute;

	top: 15px;
	left: 3px;

	display: block;

	width: 26px;
	height: 2px;

	background: currentColor;

	transform-origin: center;

	transition:
		transform 180ms ease;
}

.study-close span:first-child {
	transform: rotate(45deg);
}

.study-close span:last-child {
	transform: rotate(-45deg);
}

.study-close:hover span:first-child,
.study-close:focus-visible span:first-child {
	transform:
		rotate(45deg)
		scaleX(1.12);
}

.study-close:hover span:last-child,
.study-close:focus-visible span:last-child {
	transform:
		rotate(-45deg)
		scaleX(1.12);
}

.study-close:focus-visible {
	outline: 2px solid var(--color-disrupt);
	outline-offset: 4px;
}

/* ==========================================================================
   STUDY SIDE MENU — SHARED GEOMETRY
   ========================================================================== */

   .study-menu {
	position: absolute;
	z-index: 1050;

	top: 50%;
	right: var(--page-padding);

	transform: translateY(-50%);
}

.study-menu-list {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: clamp(18px, 3vh, 32px);

	margin: 0;
	padding: 0;

	list-style: none;
}

.study-menu-list a {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;

	color: var(--color-muted);

	font-family: var(--font-condensed);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.08em;

	text-decoration: none;

	transition:
		color 180ms ease;
}

.study-menu-list a::after {
	content: "";

	display: block;

	width: 20px;
	height: 2px;

	background: transparent;

	transition:
		width 180ms ease,
		background-color 180ms ease;
}

.study-menu-list a:hover,
.study-menu-list a:focus-visible,
.study-menu-list a.is-active {
	color: var(--color-accent);
}

.study-menu-list a:hover::after,
.study-menu-list a:focus-visible::after,
.study-menu-list a.is-active::after {
	width: 34px;
	background: var(--color-accent);
}

.study-menu-list a:focus-visible {
	outline: 2px solid var(--color-disrupt);
	outline-offset: 5px;
}

/* ==========================================================================
   STUDY — SCROLL INDICATOR
   ========================================================================== */

.study-scroll-indicator {
	position: absolute;
	z-index: 1200;

	right: var(--page-padding);
	bottom: 48px;

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

	gap: 18px;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transition:
		opacity 250ms ease,
		visibility 250ms ease;
}

body.is-case-study-open .study-scroll-indicator {
	opacity: 1;
	visibility: visible;
}

.study-scroll-indicator-line {
	display: block;

	width: 1px;
	height: 80px;

	background: currentColor;
}

.study-scroll-indicator-label {
	font-family: var(--font-condensed);
	font-size: 13px;
	font-weight: 500;

	letter-spacing: 0.14em;
	text-transform: uppercase;

	writing-mode: vertical-rl;

	transform: rotate(180deg);
}

.study-scroll-indicator-arrow {
	font-family: var(--font-primary);
	font-size: 24px;
	font-weight: 300;

	line-height: 1;
}

body.study-menu-open .study-scroll-indicator {
	opacity: 0;
	visibility: hidden;
}


/* ==========================================================================
   STUDY UI — TABLET
   ========================================================================== */

@media (max-width: 900px) {

	/* ----------------------------------------------------------------------
	   HEADER
	   ---------------------------------------------------------------------- */

	.study-header {
		padding-top: 22px;
	}


	/* ----------------------------------------------------------------------
	   MOBILE STUDY MENU — CONTENT
	   ---------------------------------------------------------------------- */

	.study-menu {
		z-index: 1002;

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

		mix-blend-mode: normal;

		pointer-events: none;
	}

	.study-menu a {
		width: 100%;
		margin: 0;

		padding:
			22px
			0
			22px
			58px;

		color: inherit;

		font-size: 18px;
		line-height: 1.4;
	}


	/* ----------------------------------------------------------------------
	   MOBILE STUDY MENU — META
	   ---------------------------------------------------------------------- */

	.study-menu-meta {
		z-index: 1001;

		background: var(--color-bg);

		pointer-events: none;
	}

	.study-menu-meta-item {
		width: 100%;

		display: grid;
		grid-template-columns:
			42px
			1fr
			42px;

		align-items: center;

		column-gap: 16px;

		padding: 22px 0;

		font-size: 18px;
		line-height: 1.4;
	}

	.study-menu-meta-item .study-menu-line {
		justify-self: end;
	}

	.study-header {
		grid-template-columns: 1fr auto;
		padding-top: 22px;
	}

	.study-menu {
		right: 20px;
	}

	.study-menu-list {
		gap: 18px;
	}

	.study-menu-list a {
		font-size: 0.75rem;
	}
}


/* ==========================================================================
   STUDY UI — MOBILE
   ========================================================================== */

@media (max-width: 600px) {

	.study-scroll-indicator {
		display: none;
	}
}

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

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

	.case-study-source,
	.case-studies {
		transition: none;
	}
}