@layer components {
	.case-portrait {
		font-family: var(--Grotesk);
		counter-increment: case;

		&>*+* {
			margin-top: var(--SpacingThin);
		}

		&>header {
			text-wrap: balance;
			&>* {
				display: inline;
				min-width: initial;
				--ScaleLevel: var(--Taller);
				--LineHeightFactor: 1.25;
				--BaselineInterval: calc(var(--Row) / 4);
				--FontWeight: 600;
				&+* {
					margin-top: 0;
				}
			}

			& i {
				font-size: 2rem;
				display: inline-flex;
				justify-content: end;

				&::before {
					content: counter(case)".";
				}
			}

			& em {
				padding-inline: 0.25em;
				border-radius: 0.25em;
				font-style: normal;
			}
		}

		*+& {
			margin-top: var(--SpacingBroadest);
		}

		&+& {
			margin-top: var(--SpacingLarge);

			&:before {
				content: "";
				display: block;
				border-top: 2px solid oklch(92% 6% var(--BrownHue));
				min-width: 100%;
				margin-left: -60px;
				position: relative;
				top: calc(-1 * var(--SpacingLarge) / 2);
			}
		}

		&>div {
			order: 1;
			display: flex;
			flex-wrap: wrap;

			@media (width < 80ch) {
				margin-inline: calc(-1 * var(--SpacingThin) / 1.5);
			}

			&>* {
				flex-basis: 20ch;
				flex-grow: 1;
			}
		}

		& section {
			display: flex;
			flex-direction: column;

			border-top: 4px solid oklch(82% 36% var(--SelectedHue));
			background-color: oklch(100% 36% var(--SelectedHue));
			padding: var(--SpacingThin);
			padding-top: var(--SpacingThinner);

			@media (width < 80ch) {
				padding-inline: calc(var(--SpacingThin) / 1.5);
			}

			position: relative;

			--ScaleLevel: var(--Short);
			--FontWeight: 480;
			--LineHeightFactor: 0.75;

			--DefaultHue: var(--BrownHue);
			--SelectedHue: var(--DefaultHue);
			--Color: oklch(60% 36% var(--SelectedHue));
			--BaselineInterval: calc(var(--Row) / 4);

			&:nth-child(1) {
				border-top: 4px solid oklch(82% 6% var(--SelectedHue));
				background-color: oklch(94% 12% var(--SelectedHue));

				--Color: oklch(60% 13% var(--SelectedHue));
			}

			&:nth-child(2) {
				--SelectedHue: var(--BlueHue);
			}


			&:nth-child(4) {
				--SelectedHue: var(--BrownHue);
			}
		}

		& ol {
			list-style-position: inside;
			--FontWeight: 600;
			padding-left: 0;
			text-wrap: pretty;

			& li:last-child {
				--FontWeight: 700;
			}
		}

		& dl {
			display: flex;
			flex-wrap: wrap;
			gap: 5px;

			h5+& {
				margin-top: var(--SpacingThinnest);
			}

			&>dt {
				flex-basis: 50%;
				flex-grow: 1;
			}

			--FontWeight: 500;

			&>* {
				margin: 0;
				align-self: start;
			}

			&:nth-last-of-type(2) {
				margin-bottom: auto;
			}

			&:last-of-type {
				margin-top: var(--SpacingThin);

				& :is(dd) {

					color: inherit;
					font-weight: 800;
				}
			}

			&:only-of-type {
				margin-top: auto;
			}

		}

		& dt {
			display: flex;
			align-items: baseline;

			&::after {
				content: "";
				border-top: 1px dashed;
				flex-grow: 1;
				margin-left: 5px;
			}
		}

		& dd {
			font-family: "PP Neue Montreal Mono";
			text-align: right;

		}

		& h4+* {
			margin-top: var(--SpacingThin);
		}
	}
}