@layer reset, common, case-studies, utilities;

@layer reset {

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

	:root {
		--neutral-50: hsl(255 22% 97%);
		--neutral-100: hsl(240 20% 95%);
		--neutral-200: hsl(240 18% 90%);
		--neutral-300: hsl(242 14% 83%);
		--neutral-400: hsl(244 13% 70%);
		--neutral-500: hsl(246 11% 58%);
		--neutral-600: hsl(247 10% 46%);
		--neutral-700: hsl(249 11% 35%);
		--neutral-800: hsl(250 13% 24%);
		--neutral-900: hsl(252 15% 16%);
		--neutral-950: hsl(255 17% 9%);

		--purple-50: hsl(252 100% 96%);
		--purple-100: hsl(252 96% 92%);
		--purple-200: hsl(252 95% 85%);
		--purple-300: hsl(252 93% 78%);
		--purple-400: hsl(252 92% 68%);
		--purple-500: hsl(252 100% 58%);
		--purple-600: hsl(252 82% 50%);
		--purple-700: hsl(252 80% 41%);
		--purple-800: hsl(252 78% 32%);
		--purple-900: hsl(252 76% 23%);
		--purple-950: hsl(252 74% 14%);

		--blue-50: hsl(215 100% 96%);
		--blue-100: hsl(215 95% 92%);
		--blue-200: hsl(215 92% 85%);
		--blue-300: hsl(215 90% 78%);
		--blue-400: hsl(215 88% 68%);
		--blue-500: hsl(215 96% 58%);
		--blue-600: hsl(215 82% 50%);
		--blue-700: hsl(215 80% 41%);
		--blue-800: hsl(215 78% 32%);
		--blue-900: hsl(215 76% 23%);
		--blue-950: hsl(215 74% 14%);

		--green-50: hsl(155 45% 96%);
		--green-100: hsl(155 42% 92%);
		--green-200: hsl(155 40% 85%);
		--green-300: hsl(155 38% 78%);
		--green-400: hsl(155 36% 68%);
		--green-500: hsl(155 45% 55%);
		--green-600: hsl(155 42% 48%);
		--green-700: hsl(155 40% 40%);
		--green-800: hsl(155 38% 30%);
		--green-900: hsl(155 36% 22%);
		--green-950: hsl(155 34% 14%);

		--yellow-50: hsl(42 100% 96%);
		--yellow-100: hsl(42 95% 92%);
		--yellow-200: hsl(42 90% 85%);
		--yellow-300: hsl(42 88% 78%);
		--yellow-400: hsl(42 85% 68%);
		--yellow-500: hsl(42 92% 55%);
		--yellow-600: hsl(42 85% 48%);
		--yellow-700: hsl(42 80% 40%);
		--yellow-800: hsl(42 75% 30%);
		--yellow-900: hsl(42 70% 22%);
		--yellow-950: hsl(42 65% 14%);

		--red-50: hsl(350 90% 96%);
		--red-100: hsl(350 88% 92%);
		--red-200: hsl(350 86% 85%);
		--red-300: hsl(350 84% 78%);
		--red-400: hsl(350 82% 68%);
		--red-500: hsl(350 90% 58%);
		--red-600: hsl(350 85% 50%);
		--red-700: hsl(350 82% 41%);
		--red-800: hsl(350 80% 32%);
		--red-900: hsl(350 78% 23%);
		--red-950: hsl(350 76% 14%);

		--white: hsl(0 0% 100);
		--black: var(--neutral-900);

		--bg: light-dark(var(--white), var(--black));
		--bg-subtle: light-dark(var(--neutral-200), var(--neutral-800));
		--bg-strong: light-dark(var(--neutral-300), var(--neutral-700));
		--bg-stronger: light-dark(var(--neutral-400), var(--neutral-600));
		--fg: light-dark(var(--black), var(--white));
		--fg-subtle: light-dark(var(--neutral-600), var(--neutral-400));

		--primary: light-dark(var(--purple-600), var(--purple-400));
		--primary-subtle: light-dark(var(--purple-300), var(--purple-200));

		--link: var(--primary);

		--danger-fg: var(--red-500);
		--danger-bg: hsl(from var(--danger-fg) h s l / .03);

		--accent-1: light-dark(var(--purple-100), var(--purple-950));
		--accent-1-strong: light-dark(var(--purple-800), var(--neutral-950));
		--accent-2: light-dark(var(--blue-100), var(--blue-950));
		--accent-2-strong: light-dark(var(--blue-800), var(--neutral-950));
		--accent-3: light-dark(var(--yellow-100), var(--yellow-950));
		--accent-4: light-dark(var(--green-100), var(--green-950));

		/*
	Go to https://fluid.style to configure this responsive text
	Min breakpoint: 15.625rem (375px)
	Max breakpoint: 59.25rem (1422px)
	*/
		--fs-1: clamp(1.75rem, 1.168rem + 3.725vw, 3.375rem);
		/* 42px-81px */
		--fs-2: clamp(1.333rem, 1.095rem + 1.528vw, 2rem);
		/* 32px-48px */
		--fs-3: clamp(1.125rem, 0.931rem + 1.242vw, 1.667rem);
		/* 27px-40px */
		--fs-4: clamp(0.917rem, 0.708rem + 1.337vw, 1.5rem);
		/* 22px-36px */
		--fs-5: clamp(0.833rem, 0.729rem + 0.669vw, 1.125rem);
		/* 20px-27px */
		--fs-6: clamp(0.75rem, 0.66rem + 0.573vw, 1rem);
		/* 18px-24px */
		--fs-7: clamp(0.667rem, 0.637rem + 0.191vw, 0.75rem);
		/* 16px-18px*/
		--fs-8: clamp(0.583rem, 0.553rem + 0.191vw, 0.667rem);
		/* 14px-16px */

		--ff-fancy: 'Fugaz One', system-ui;
		--ff-sans: Inter, system-ui;
		--lh-body: 1.6;
		--lh-heading: 1.25;

		--btn-fg: var(--bg);
		--btn-bg: var(--fg);
		--btn-bg-hover: var(--primary);
		--btn-padding: 0.333em 1.25em;
		--btn-fs: var(--fs-6);
		--nav-toggler-color: var(--primary);

		font-size: clamp(112.5%, 1.75vw, 150%);
		/* 24px */
		-webkit-font-smoothing: antialiased;
		scroll-behavior: smooth;
	}

	::selection {
		background-color: var(--primary);
		color: var(--bg);
	}

	body {
		color: var(--fg);
		background-color: var(--bg);
		font-family: var(--ff-sans);
		line-height: var(--lh-body);
		margin: 0;
	}

	p {
		margin-block: 0 1.11111111rem;
		text-wrap: pretty;
	}

	a {
		color: var(--link);
		text-decoration-color: transparent;
		text-underline-offset: .3em;
		transition: color .15s ease-in;

		&:not(.btn):hover {
			color: var(--fg);
		}

		abbr {
			cursor: inherit;
		}
	}

	img {
		max-inline-size: 100%;
		height: auto;
		vertical-align: middle;
		border: 0;
		font-style: italic;
		background-repeat: no-repeat;
		background-size: cover;
		shape-margin: 1rem;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin-block: 0 0.67em;
	}

	h1,
	h2,
	h3 {
		font-family: var(--ff-fancy);
		font-weight: 400;
		line-height: var(--lh-heading);
	}

	ul{
		--bullet-color: var(--primary);
	}

	ul:not(.list-unstyled) {
		list-style: none;
		padding-inline-start: 0;

		li {
			position: relative;
			padding-inline-start: 1.75em;
			margin-block-end: 0.333em;

			&::before {
				content: "";
				position: absolute;
				left: 0.17em;
				top: 0.8em;
				transform: translateY(-50%);
				width: 0.69005076em;
				height: 0.69005076em;
				border: 0.1em solid var(--bullet-color);
				border-radius: 50%;
			}
		}
	}

	ol:not(.list-unstyled) {
		li {
			margin-block-end: 0.333em;
		}
	}

	figure {
		margin: 0;
	}

	figcaption {
		font-size: var(--fs-7);
		margin-block: 0.75em 0;
		color: var(--fg-subtle);
	}

	small {
		font-size: 75%;
	}

	q {
		color: var(--primary);
		quotes: none;
		font-size: var(--fs-5);

		&::before {
			content: "<q>";
			display: block;
		}

		&::after {
			content: "</q>";
			display: block;
		}
	}

	hr {
		margin-block: 1.75em 2.75em;
		inline-size: 100%;
		color: inherit;
		border: 0;
		border-top: 0.33333333rem solid var(--primary);
	}

	abbr {
		text-underline-offset: 0.2em;
	}

	button {
		font: inherit;

		&:hover {
			cursor: pointer;
		}
	}

	label {
		display: block;
		color: var(--fg-subtle);
		margin-block-end: 0.2em;
	}

	.form-group {
		margin-block-end: 2em;
	}

	.is-invalid {
		border-color: var(--danger-fg);
		background-color: var(--danger-bg);
	}

	.form-error {
		color: var(--danger-fg);
		font-size: 0.75em;
		margin-top: 0.25em;
	}

	input,
	textarea {
		display: block;
		width: 100%;
		border: 0.11111111rem solid var(--bg-strong);
		background-color: transparent;
		font: inherit;
		padding: 0.5em 0.75em;
		color: inherit;
		transition: border-color .1s;

		&:hover {
			border-color: var(--bg-stronger);
		}

		&:focus-visible {
			border-color: var(--fg);
			outline: 1px solid var(--fg);
		}
	}

	textarea {
		resize: vertical;
	}

	a:focus-visible,
	button:focus-visible,
	.switch-label:has(input:focus-visible) {
		outline: 0.125rem solid currentColor;
		outline-offset: 0.16666667rem;
	}

	[hidden] {
		display: none;
	}
}

@layer common {
	.btn {
		display: inline-flex;
		gap: 1em;
		color: var(--btn-fg);
		background-color: var(--btn-bg);
		border: 0;
		text-decoration: none;
		padding: var(--btn-padding);
		line-height: var(--lh-body);
		font-family: var(--ff-fancy);
		font-size: var(--btn-fs);
		transform: skewX(-5deg);
		transition: all .15s ease-in;
		justify-content: center;

		&::after {
			content: " />";
		}

		&:hover {
			background-color: var(--btn-bg-hover);
		}

		&:focus-visible {
			outline-color: var(--btn-bg);
		}
	}

	.btn--primary {
		--btn-fg: var(--bg);
		--btn-bg: var(--primary);
		--btn-bg-hover: var(--fg);
	}

	.btn--lg {
		--btn-fs: var(--fs-5);
		--btn-padding: 0.666em 1.75em;
	}

	.switch-label {
		display: inline-flex;
		align-items: center;
		cursor: pointer;
	}

	.dark-mode-toggle__icon {
		width: 1.5em;
		height: auto;
		color: var(--primary);
		transition: color .2s linear;
	}

	.dark-mode-toggle__icon--moon {
		color: var(--fg);
		opacity: 0.6;
		transition: opacity .2s linear, color .2s linear, transform .2s linear;
		transform: scale(1.75);

		&:hover {
			opacity: 0.8;
		}
	}

	.dark-mode-toggle__rays {
		transition: opacity 0.2s linear .2s;
	}

	.dark-mode-toggle__icon--moon .dark-mode-toggle__rays {
		transition: opacity 0.2s linear;
		opacity: 0;
	}

	.dark-mode-toggle__cut-out {
		transition: transform .5s cubic-bezier(0.54, -0.42, 0.29, 1.3);
	}

	.dark-mode-toggle__icon--moon .dark-mode-toggle__cut-out {
		transform: translateX(-30%);
		transition: transform .5s cubic-bezier(0.21, 0.17, 0.43, 1.43);
	}

	.wrapper {
		--gap: clamp(1rem, 6vw, 3rem);
		--full: minmax(var(--gap), 1fr);
		--content: min(59.25rem, 100% - var(--gap) * 2);
		display: grid;
		grid-template-columns: [full-start] var(--full) [popout-start content-start] var(--content) [content-end] var(--full) [full-end popout-end];
	}

	.wrapper>* {
		grid-column: content;
	}

	.popout {
		grid-column: popout;
	}

	.full {
		grid-column: full;
	}

	.main-footer {
		position: relative;
		background: var(--primary) url(../img/footer-bg.svg) no-repeat center right 10% / min(30rem, 70%);
		color: var(--bg);
		padding-block: 7vw;
		margin-block-start: 10vw;

		a {
			color: inherit;
			transition: text-decoration-color .15s ease-in;

			&:hover {
				text-decoration-color: currentColor;
			}
		}
	}

	.list-unstyled {
		padding: 0;

		li {
			padding-inline-start: 0;
			list-style: none;
		}
	}

	.readable {
		max-inline-size: 47rem;
	}

	.main-header {
		display: flex;
		align-items: center;
		padding: min(4vw, 2.75rem) 0;
		margin-block-end: 2em;
	}

	.main-nav {
		font-size: var(--fs-6);

		@media screen and (min-width: 82rem) {
			display: flex;
			align-items: center;
			margin-inline-start: auto;
		}

		a:not(.btn) {
			inline-size: 100%;
			text-align: center;
			padding: 1em;

			&::before,
			&::after {
				content: "/";
				color: transparent;
				transition: color .2s ease-in;
			}

			&:hover,
			&[aria-current] {

				&::before,
				&::after {
					color: inherit;
				}
			}

			@media screen and (min-width: 82rem) {
				inline-size: auto;
				padding: 0.5em 0.5em;
			}
		}

		a:last-child {
			display: none;

			@media screen and (min-width: 82rem) {
				display: inline-flex;
			}
		}

		@media screen and (min-width: 82rem) {
			[hidden] {
				display: inline-block;
			}

			a:nth-last-child(2) {
				display: none;
			}
		}
	}

	body:has(.is-open) {
		overflow: hidden;
	}

	.js .is-open {
		display: flex;
		flex-direction: column;
		position: fixed;
		inset: 0;
		padding-block-start: min(8em, 18vh);
		opacity: 1;
		font-size: var(--fs-4) !important;
		background: hsl(from var(--bg) h s l / .95);
		z-index: 1;
	}

	.logo {
		display: inline-flex;
		align-items: center;
		gap: 0.5em;
		color: var(--fg);
		word-spacing: 0.1em;
		font-family: var(--ff-fancy);

		svg {
			inline-size: 1.75em;
			aspect-ratio: 1/1;
		}
	}

	.logo,
	.nav-toggler {
		position: relative;
		z-index: 2;
	}

	.nav-toggler {
		--stroke-width: 0.22222222rem;
		--stroke-width-half: calc(var(--stroke-width) / 2);
		color: var(--nav-toggler-color);
		display: grid;
		align-content: center;
		background: none;
		border: 0;
		border-block: var(--stroke-width) solid currentColor;
		inline-size: 1.33333333rem;
		block-size: 1.11111111rem;
		padding: 0;
		transition: all 0.15s ease-in;

		&::after {
			content: "";
			inset: -1rem;
			position: absolute;
		}

		@media screen and (min-width: 82rem) {
			display: none;
		}

		span {
			display: block;
			block-size: var(--stroke-width-half);
			background-color: currentColor;
			transition: inherit;
		}

		&[aria-expanded=true] {
			border-color: transparent;

			span {
				block-size: var(--stroke-width);

				&:first-child {
					transform: translateY(var(--stroke-width-half)) rotateZ(45deg) scaleX(1.25);
				}

				&:last-child {
					transform: translateY(calc(var(--stroke-width-half) * -1)) rotateZ(-45deg) scaleX(1.25);
				}
			}
		}
	}

	.hero {
		display: flex;
		flex-direction: column-reverse;
		gap: 2em;

		img {
			inline-size: calc(100% - 1rem);
			margin-inline: auto;
		}

		@media screen and (min-width: 36rem) {
			flex-direction: row;
			align-items: start;
			column-gap: 4.5vw;

			img {
				inline-size: 42%;
				block-size: 42%;
				flex-shrink: 0;
				object-fit: scale-down;
				object-position: top;
			}
		}
	}

	.columns-1-1 {
		display: grid;
		gap: min(5vw, 1.5rem);

		@media screen and (min-width: 52rem) {
			grid-template-columns: 1fr 1fr;
		}
	}

	.columns-1-1-1 {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: min(5vw, 1.5rem);

		@media screen and (min-width: 40rem) {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	.columns-1-2 {
		@media screen and (min-width: 82rem) {
			display: grid;
			grid-template-columns: 23% 1fr;
			column-gap: 8vw;

			h2 {
				grid-row: span 2;

				+q,
				+ul {
					grid-column: 1;
				}
			}

			hr {
				grid-row: 1;
				grid-column: 2;
			}
		}
	}

	.pagination {
		display: flex;
		flex-direction: column;
		gap: 1em;
		margin-block-start: 3em;

		@media screen and (min-width: 24rem) {
			flex-direction: row;
			justify-content: space-between;
		}
	}

	.btn--prev,
	.btn--next {
		&::after {
			content: none;
		}
	}

	.btn--prev {
		padding-inline-start: 1em;
	}

	.btn--next {
		padding-inline-end: 1em;
	}

	.carousel {
		grid-column: span 2;
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: min(23rem, 75%);
		gap: 5%;
		padding-inline-end: 5%;
		overflow-x: scroll;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;

		&::scroll-button(*) {
			margin-block-start: 1em;
			margin-inline-end: 1.75em;
		}

		&::scroll-button(*):disabled {
			opacity: 0.25;
			cursor: not-allowed;
		}

		&::scroll-button(*):focus-visible {
			outline-offset: 0.25em;
			outline-color: var(--btn-bg);
		}

		&::scroll-button(*):not(:disabled):hover {
			background-color: var(--fg);
			cursor: pointer;
		}

		&::scroll-button(inline-start) {
			content: "🡐" / "Scroll left";
		}

		&::scroll-button(inline-end) {
			content: "🡒" / "Scroll right";
		}

		article {
			scroll-snap-align: center;
			margin-block-end: 0 !important;

			img {
				inline-size: 100%
			}
		}
	}

	.carousel::scroll-button(*) {
		--btn-fg: var(--bg);
		--btn-bg: var(--primary);
		--btn-bg-hover: var(--fg);
		display: inline-block;
		color: var(--btn-fg);
		background-color: var(--btn-bg);
		border: 0;
		text-decoration: none;
		padding: var(--btn-padding);
		line-height: var(--lh-body);
		font-family: var(--ff-fancy);
		font-weight: 700;
		font-size: var(--btn-fs);
		transform: skewX(-5deg);
		transition: all .15s ease-in;

		&::after {
			content: " />";
		}

		&:hover {
			background-color: var(--btn-bg-hover);
		}
	}

	.experience {
		@media screen and (min-width: 82rem) {
			display: grid;
			grid-template-columns: 23% 1fr;
			column-gap: 8vw;

			h2 {
				grid-row: span 2;
			}
		}

		section {
			margin-block-end: 2rem;

			header {
				display: flex;
				justify-content: space-between;
			}
		}
	}

	.breadcrumb {
		margin: 0 0 1em;
		font-size: var(--fs-7);

		ol {
			display: inline;
			list-style: none;
			padding: 0;
			margin: 0;
		}

		li {
			display: inherit;

			+li::before {
				content: "/";
				margin-inline: 0.5em;
			}
		}
	}

	.alert {
		padding: 1em;
	}

	.alert--success {
		background-color: var(--primary);
		color: var(--bg);
	}

	.alert--error {
		background-color: var(--danger-bg);
		color: var(--danger-fg);
		border: 0.11111111rem solid;

		ul{
			--bullet-color: currentColor;
		}

		a {
			color: inherit;
		}
	}

	/* These regions receive focus programmatically (autofocus) on page load
	   to announce success/errors, so give them a visible ring on :focus,
	   not just :focus-visible. */
	.alert[tabindex="-1"]:focus {
		outline: 0.125rem solid currentColor;
		outline-offset: 0.16666667rem;
	}
}

@layer case-studies {
	#case-study-title {
		position: relative;
	}

	.carousel {
		.case-studies {
			--height: 14rem;
		}
	}

	.case-studies {
		--height: clamp(10rem, 10cqi, 15.5rem);
		--shape: 0 clamp(4rem, 20cqi, 8rem) / clamp(4rem, 20cqi, 8rem);
		container-type: inline-size;
		position: relative;
		display: flex;
		flex-direction: column;
		margin-block-end: 1rem;

		&:has(.case-studies__1, .case-studies__2) {
			&:hover img {
				scale: 2.7;
			}
		}

		&:has(.case-studies__3):hover {
			img {
				scale: 1.33;
			}
		}

		&:has(.case-studies__4):hover {
			img {
				scale: 1.02;
				clip-path: inset(0 0 calc(3rem + 1.5cqi) 0);
			}
		}

		div {
			position: relative;
			order: -1;
			margin-block: 1.75rem 1rem;
			height: var(--height);
			background-color: var(--theme);
			border-radius: var(--shape);
		}

		a {
			&::before {
				content: "";
				position: absolute;
				inset: 0;
				z-index: 1;
			}
		}

		p {
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
			overflow: hidden;
		}

		img {
			transition: all .2s ease-in-out;
		}
	}

	.case-studies--lg {
		--height: clamp(12rem, 61cqi, 22rem);
	}

	.case-studies__1 {
		--theme: var(--accent-1);
		overflow: clip;

		img {
			scale: 2.67;
			transform-origin: top left;
			margin: 2.25rem 0 0 2.25rem;
			filter: drop-shadow(.2rem .2rem .2rem var(--accent-1-strong));
		}
	}

	.case-studies__2 {
		--theme: var(--accent-2);
		overflow: clip;

		img {
			scale: 2.67;
			transform-origin: top left;
			margin: 2.25rem 0 0 2.25rem;
			filter: drop-shadow(.2rem .2rem .2rem var(--accent-2-strong));
		}
	}

	.case-studies__3 {
		--theme: var(--accent-3);
		display: grid;
		place-content: center;
		overflow: clip;

		img {
			scale: 1.3;
			margin-block-start: 0.5rem;
			transform: rotateZ(-12deg);
		}
	}

	.case-studies__4 {
		--theme: var(--accent-4);

		img {
			position: absolute;
			left: 50%;
			bottom: -3rem;
			clip-path: inset(0 0 3rem 0);
			transform: translateX(-50%);
			transform-origin: top left;
			width: max(64cqi, 14rem);
		}
	}

	.branding {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
		gap: 1px;
		background-color: var(--bg-subtle);

		svg {
			background-color: var(--bg);
			align-self: center;
			justify-self: center;

			* {
				transition: all .15s ease-in;
			}

			&:hover {
				[style] {
					fill: currentColor;
				}
			}

			&:focus-visible {
				outline: 0.125rem solid currentColor;
				outline-offset: 0.16666667rem;
				position: relative;

				[style] {
					fill: currentColor;
				}
			}
		}
	}

	.case-study {
		header {
			position: relative;
			background-color: var(--bg);
		}
	}

	.case-study--1 {
		--bg: var(--accent-1);
		--shadow: var(--accent-1-strong);

		header {
			overflow: clip;
			margin-block: 2.75rem 1.5rem;
			border-block-end: 1px solid var(--bg);

			div {
				display: flex;
				flex-direction: column-reverse;
				padding-block: 2.5rem 0;

				@media screen and (min-width: 80rem) {
					flex-direction: row-reverse;
				}
			}

			h1 {
				padding-block-end: 2.5rem;
			}

			img {
				max-inline-size: calc(100% + 6vw);
				margin-block: -0.75rem -15vw;
				margin-inline: -3vw;
				filter: drop-shadow(.2rem .3rem .4rem var(--shadow));

				@media screen and (min-width: 80rem) {
					object-fit: contain;
					margin: min(-4vw, -4.5rem) max(-43rem, -68vw) -20.75rem 0;
				}
			}
		}
	}

	.case-study--2 {
		--bg: var(--accent-2);
		--shadow: var(--accent-2-strong);

		header {
			overflow: clip;
			margin-block: 2.75rem 1.5rem;
			border-block-end: 1px solid var(--bg);

			div {
				display: flex;
				flex-direction: column-reverse;
				padding-block: 2.5rem 0;

				@media screen and (min-width: 80rem) {
					flex-direction: row-reverse;
				}
			}

			h1 {
				padding-block-end: 2.5rem;
			}

			img {
				max-inline-size: calc(100% + 6vw);
				margin-block: -0.75rem -15vw;
				margin-inline: -3vw;
				filter: drop-shadow(.2rem .3rem .4rem var(--shadow));

				@media screen and (min-width: 80rem) {
					object-fit: contain;
					margin: min(-4vw, -4.5rem) max(-43rem, -68vw) -20.75rem 0;
				}
			}
		}
	}

	.case-study--3 {
		--bg: var(--accent-3);

		header {
			padding-block-end: 2.5rem;
			margin-block: 2.75rem 1.5rem;

			div {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-block-start: 1rem;

				@media screen and (min-width: 42rem) {
					flex-direction: row;
					align-items: center;
					overflow: visible;
				}
			}

			img {
				transform: rotateZ(-12deg) translateX(-1.2rem);
				scale: 1.1;

				@media screen and (min-width: 42rem) {
					width: clamp(12rem, 50%, 30rem);
					margin-inline-start: -6rem;
					margin-block: 1.5rem 0;
					scale: 1;
				}
			}
		}
	}

	.case-study--4 {
		--bg: var(--accent-4);

		header {
			padding-block: 2.5rem;
			margin-block: 2.75rem 1.5rem;

			div {
				display: flex;
				flex-direction: column;
				gap: 2.5rem;
				align-items: center;

				@media screen and (min-width: 42rem) {
					flex-direction: row;
					gap: 2.5rem;
					align-items: center;
				}
			}

			img {
				width: clamp(12rem, 30%, 20rem);
				object-fit: contain;
				margin-block: -4.5rem -1.5rem;

				@media screen and (min-width: 42rem) {
					margin-block: -4rem -4.5rem;
				}
			}
		}
	}

	.article-body {
		@media screen and (min-width: 72rem) {
			display: grid;
			grid-template-columns: minmax(auto, 65ch) auto;
			justify-content: space-between;
			column-gap: 2em;
		}

		>* {
			margin-block-start: 3rem;
			grid-column-start: 1;
		}
	}

	.article-index {
		@media screen and (min-width: 72rem) {
			grid-row: span 3;
			grid-column-start: 2;
			position: sticky;
			top: 10vh;
		}
	}
}

@layer utilities {

	.fs-1,
	.fs-2,
	.fs-3 {
		line-height: var(--lh-heading);
	}

	.fs-1,
	h1 {
		font-size: var(--fs-1);
	}

	.fs-2,
	h2 {
		font-size: var(--fs-2);
	}

	.fs-3,
	.lead,
	h3 {
		font-size: var(--fs-3);
	}

	.fs-4,
	h4 {
		font-size: var(--fs-4);
	}

	.fs-5,
	h5 {
		font-size: var(--fs-5);
	}

	.fs-6,
	h6 {
		font-size: var(--fs-6);
	}

	.fs-7 {
		font-size: var(--fs-7);
	}

	.fs-8 {
		font-size: var(--fs-8);
	}

	.fw-400 {
		font-weight: 400;
	}

	.fw-500 {
		font-weight: 500;
	}

	.fw-700 {
		font-weight: 700;
	}

	.ff-sans {
		font-family: var(--ff-sans);
	}

	.ff-fancy {
		font-family: var(--ff-fancy);
	}

	.visually-hidden {
		position: absolute;
		left: -9999rem;
		inline-size: 1rem;

		&:not([type=checkbox]):focus-visible {
			left: auto;
			top: 1rem;
			inset-inline-start: 1rem;
			inline-size: auto;
			padding: 0.5em 1em;
			background: var(--bg);
			color: var(--fg);
			z-index: 9999;
		}
	}

	.icon {
		display: inline-block;
		width: 1em;
		height: 1em;
		vertical-align: middle;
	}

	.icon--lg {
		font-size: 1.5em;
	}

	.circle {
		border-radius: 50%;
	}

	.text-subtle {
		color: var(--fg-subtle);
	}

	a.text-subtle {
		&:hover {
			color: var(--fg);
		}
	}

	.text-body {
		color: var(--fg);

	}

	a.text-body {

		&:hover,
		&[aria-current] {
			color: var(--primary);
		}
	}

	.mt-2 {
		margin-block-start: 1em;
	}

	.mt-4 {
		margin-block-start: 2em;
	}

	.mt-5 {
		margin-block-start: 3em;
	}

	.mb-0 {
		margin-block-end: 0;
	}

	.mb-1 {
		margin-block-end: 0.5em;
	}

	.mb-2 {
		margin-block-end: 1em;
	}

	.mb-3 {
		margin-block-end: 1.5em;
	}

	.mb-4 {
		margin-block-end: 2em;
	}

	.mb-5 {
		margin-block-end: 3em;
	}

	.ms-auto {
		margin-inline-start: auto;
	}

	.ms-3 {
		margin-inline-start: 1.5em;
	}

	.me-auto {
		margin-inline-end: auto;
	}

	.me-1 {
		margin-inline-end: 0.5em;
	}

	.my-5 {
		margin-block: 3em;
	}

	.d-block {
		display: block;
	}

	.d-flex {
		display: flex;
	}

	.d-flex-lg {
		@media screen and (min-width: 82rem) {
			display: flex;
		}
	}

	.gap-3-lg {
		@media screen and (min-width: 82rem) {
			gap: 1.5em;
		}
	}

	.gap-2 {
		gap: 1em;
	}
}