@layer tokens, reset, base, layout, components, utilities;

@font-face {
	font-family: "edg_jost";
	src: url("../fonts/jost/jost-300-600-normal.woff2?version=1") format("woff2");
	font-weight: 300 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "edg_jost";
	src: url("../fonts/jost/jost-300-600-italic.woff2?version=1") format("woff2");
	font-weight: 300 600;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "edg_playfair_display";
	src: url("../fonts/playfair-display/playfair-display-500-700-normal.woff2?version=1") format("woff2");
	font-weight: 500 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "edg_playfair_display";
	src: url("../fonts/playfair-display/playfair-display-500-700-italic.woff2?version=1") format("woff2");
	font-weight: 500 700;
	font-style: italic;
	font-display: swap;
}

@layer tokens {
	:root {
		--aubergine-900: oklch(.3105 .0396 308.09);
		--aubergine-700: oklch(.3616 .0524 307.6);
		--aubergine: oklch(.4231 .0593 308.2);
		--aubergine-300: oklch(.5939 .0495 306.84 / 42%);
		--gold: oklch(.8387 .1284 89.64);
		--gold-ink: oklch(.5796 .1072 86.37);
		--cream: oklch(.9771 .0074 80.72);
		--white: oklch(.9947 .0045 78.3);
		--ink: oklch(.2779 .0255 309.1);
		--ink-soft: oklch(.5109 .03 307.81);
		--surface: var(--white);
		--surface-alt: var(--cream);
		--surface-dark: var(--aubergine);
		--font-display: "edg_playfair_display", "Iowan Old Style", "Palatino Linotype", "Georgia", ui-serif, serif;
		--font-body: "edg_jost", "Century Gothic", "Futura", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
		--step-2xs: clamp(.75rem, .72rem + .14vw, .8125rem);
		--step-xs: clamp(.875rem, .84rem + .16vw, .9375rem);
		--step-sm: clamp(1rem, .96rem + .18vw, 1.0625rem);
		--step-base: clamp(1.125rem, 1.07rem + .25vw, 1.1875rem);
		--step-md: clamp(1.3rem, 1.2rem + .5vw, 1.5rem);
		--step-lg: clamp(1.75rem, 1.5rem + 1.2vw, 2.25rem);
		--step-xl: clamp(2.35rem, 1.9rem + 2.2vw, 3.4rem);
		--step-2xl: clamp(2.9rem, 2.2rem + 3.4vw, 4.6rem);
		--space-3xs: clamp(.4rem, .38rem + .1vw, .5rem);
		--space-2xs: clamp(.65rem, .6rem + .2vw, .8rem);
		--space-xs: clamp(1rem, .94rem + .3vw, 1.2rem);
		--space-sm: clamp(1.5rem, 1.4rem + .5vw, 1.8rem);
		--space-md: clamp(2.2rem, 2rem + 1vw, 2.8rem);
		--space-lg: clamp(3.2rem, 2.7rem + 2vw, 4.5rem);
		--space-xl: clamp(4.5rem, 3.6rem + 3.6vw, 7rem);
		--space-2xl: clamp(6rem, 4.6rem + 5.6vw, 9.5rem);
		--content-max: 74rem;
		--measure: 34rem;
		--radius-sm: .75rem;
		--radius-md: 1.4rem;
		--radius-full: 999px;
		--media-radius: 2.875rem;
		--ease-out: cubic-bezier(.16, 1, .3, 1);
		--duration-sm: .15s;
		--duration-md: .4s;
		--shadow-soft: 0 1.5rem 3.5rem -2rem oklch(.3105 .0396 308.09 / 28%);
		--shadow-tight: 0 .5rem 1.5rem -.75rem oklch(.3105 .0396 308.09 / 35%);
		--shadow-extra-tight: 0 1px 2px oklch(.3105 .0396 308.09 / 5%);

		@supports (corner-shape: squircle) {
			--media-radius: 5rem;
		}

		@supports (interpolate-size: allow-keywords) {
			interpolate-size: allow-keywords;
		}
	}
}

@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;

		@media (prefers-reduced-motion: reduce) {
			animation-duration: .001ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: .001ms !important;
			scroll-behavior: auto !important;
		}
	}

	* {
		margin: 0;
	}

	html {
		color-scheme: only light;
		scroll-behavior: smooth;
		scroll-padding-top: 1.5rem;
		scrollbar-gutter: stable;
		text-size-adjust: none;
		-webkit-text-size-adjust: none;
		-moz-text-size-adjust: none;
		print-color-adjust: exact;

		@media (prefers-reduced-motion: reduce) {
			scroll-behavior: auto;
		}
	}

	body {
		min-height: 100svh;
		overflow-x: clip;
		font-family: var(--font-body);
		font-size: var(--step-base);
		line-height: 1.65;
		color: var(--ink);
		background: var(--surface);
		font-weight: 400;
		overflow-wrap: break-word;
		text-rendering: optimizeLegibility;
		font-smooth: always;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		-webkit-tap-highlight-color: transparent;
	}

	img,
	svg,
	video {
		display: block;
		max-width: 100%;
	}

	img {
		height: auto;
		font-style: italic;
	}

	button,
	input,
	textarea {
		font: inherit;
		color: inherit;
	}

	a {
		color: inherit;
		text-underline-offset: .1875em;
	}

	ul[class],
	ol[class] {
		list-style: none;
		padding: 0;
	}

	:focus-visible {
		outline: .15rem solid var(--gold-ink);
		outline-offset: .2rem;
		border-radius: .3rem;
	}
}

@layer base {
	h1,
	h2,
	h3,
	h4 {
		font-family: var(--font-display);
		font-weight: 600;
		line-height: 1.15;
		text-wrap: balance;
	}

	p {
		text-wrap: pretty;
	}
}

@layer layout {
	.site-root {
		display: flex;
		flex-direction: column;
		min-height: calc(100svh);
		isolation: isolate;
	}

	.site-content {
		flex-grow: 1;
	}

	.hero {
		padding-block: clamp(3rem, 2.2rem + 3.5vw, 5.5rem) var(--space-lg);
		background: var(--surface);

		.wrap {
			display: grid;
			gap: var(--space-md);
			grid-template-areas: "heading" "video" "text";

			@media (min-width: 60rem) {
				grid-template-columns: minmax(20rem, 26rem) minmax(0, var(--measure));
				grid-template-areas: "video copy";
				align-items: center;
				justify-content: center;
				gap: var(--space-lg);
			}
		}
	}

	.hero-copy {
		display: contents;

		@media (min-width: 60rem) {
			display: grid;
			grid-area: copy;
			gap: var(--space-md);
		}
	}

	.hero-heading {
		grid-area: heading;
		max-width: 46rem;
		margin-inline: auto;
		text-align: center;

		h1 {
			margin-block-start: var(--space-xs);
			font-size: var(--step-2xl);
			color: var(--aubergine-900);

			em {
				font-style: normal;
				color: var(--aubergine);
			}
		}

		@media (min-width: 60rem) {
			grid-area: auto;
			max-width: none;
			margin-inline: 0;
			text-align: start;

			h1 {
				font-size: var(--step-xl);
			}
		}
	}

	.hero-text {
		grid-area: text;
		display: grid;
		gap: var(--space-sm);
		max-width: var(--measure);
		margin-inline: auto;

		@media (min-width: 60rem) {
			grid-area: auto;
			margin-inline: 0;
		}

		p {
			color: var(--ink-soft);
			font-size: var(--step-base);
		}

		strong {
			color: var(--aubergine-900);
			font-weight: 500;
		}
	}

	.cta-band {
		padding-block: clamp(3.5rem, 2.5rem + 5vw, 6.25rem);
		background: var(--surface-dark);
		background-image: radial-gradient(120% 140% at 15% 0%, var(--aubergine-700) 0%, var(--aubergine) 55%);
		color-scheme: dark;
		text-align: center;

		.wrap {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: var(--space-xs);
		}

		p {
			color: color-mix(in oklch, var(--white) 82%, transparent);
			font-size: var(--step-sm);
			max-width: 32rem;
		}
	}

	.procedure {
		padding-block: var(--space-xl);
		background: var(--surface-alt);

		.wrap {
			display: grid;
			justify-items: center;
			text-align: center;
			gap: var(--space-md);

			.section-heading {
				text-align: center;
				margin-inline: auto;
			}
		}
	}

	.about {
		padding-block: var(--space-xl);
		background: var(--surface);

		.wrap {
			display: grid;
			gap: var(--space-lg);
			align-items: center;

			@media (min-width: 60rem) {
				grid-template-columns: 1.1fr .9fr;
				gap: var(--space-md);
			}
		}
	}

	.about-text {
		display: grid;
		gap: var(--space-sm);
		max-width: var(--measure);

		p {
			color: var(--ink-soft);
		}
	}

	.faq {
		padding-block: var(--space-xl);
		background: var(--surface-alt);
	}

	.faq-list {
		max-width: 42rem;
		margin-inline: auto;
		margin-block-start: var(--space-md);
		display: grid;
		gap: var(--space-2xs);
	}

	.site-content {
		.cta-band:last-of-type {
			padding-bottom: calc(clamp(3.5rem, 2.5rem + 5vw, 6.25rem) / 3);
		}
	}

	.site-footer {
		padding-block: var(--space-md);
		background: var(--surface-dark);
		color: color-mix(in oklch, var(--white) 82%, transparent);
		color-scheme: dark;

		.wrap {
			display: grid;
			gap: var(--space-sm);
			justify-items: center;
			text-align: center;

			@media (min-width: 40rem) {
				grid-template-columns: 1fr auto 1fr;
				align-items: center;
				text-align: start;
			}
		}
	}
}

@layer components {
	.eyebrow {
		display: inline-flex;
		align-items: center;
		gap: var(--space-3xs);
		font-family: var(--font-body);
		font-size: var(--step-2xs);
		font-weight: 500;
		letter-spacing: .22em;
		text-transform: uppercase;
		color: var(--gold-ink);

		&::before {
			content: "";
			width: 1.6rem;
			height: 1px;
			background: currentColor;
			opacity: .6;
		}
	}

	.section-heading {
		max-width: 40rem;

		h2 {
			font-size: var(--step-lg);
			color: var(--aubergine-900);
			margin-block-start: var(--space-xs);
		}
	}

	.section-heading--center {
		text-align: center;
		margin-inline: auto;
	}

	.btn {
		--btn-fg: var(--aubergine-900);
		--btn-bg: var(--gold);
		--btn-bg-hover: var(--white);

		position: relative;
		isolation: isolate;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-2xs);
		padding-inline: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
		padding-block: clamp(1rem, .9rem + .5vw, 1.25rem);
		border-radius: var(--radius-full);
		color: var(--btn-fg);
		font-family: var(--font-body);
		font-size: var(--step-sm);
		font-weight: 500;
		letter-spacing: .03em;
		text-decoration: none;
		text-align: center;
		border: 1px solid transparent;
		transition: border-color var(--duration-sm) var(--ease-out);
		color-scheme: light;

		&:hover {
			border-color: color-mix(in oklch, var(--aubergine-900) 12%, transparent);
		}

		&::before {
			content: "";
			position: absolute;
			inset: 0;
			z-index: -1;
			border-radius: inherit;
			background-color: var(--btn-bg);
			box-shadow: var(--shadow-tight);
			transform: scale(1);
			transition:
				background-color var(--duration-sm) var(--ease-out),
				transform var(--duration-sm) var(--ease-out),
				box-shadow var(--duration-sm) var(--ease-out);
		}

		&:hover::before {
			transform: scale(1.06);
			background-color: var(--btn-bg-hover);
			box-shadow: var(--shadow-soft);
		}

		&:active::before {
			background-color: color-mix(in oklch, var(--btn-bg-hover) 88%, black);
		}

		svg {
			width: 1.1em;
			height: 1.1em;
			flex-shrink: 0;
			transition: transform var(--duration-sm) var(--ease-out);
		}

		&:hover svg {
			transform: translateX(.15rem);
		}
	}

	.media-frame {
		position: relative;
		width: 100%;
		max-width: 22rem;
		margin-inline: auto;
		aspect-ratio: 9 / 16;
		border-radius: var(--media-radius);
		corner-shape: squircle;
		overflow: hidden;
		background: linear-gradient(160deg, var(--aubergine-700), var(--aubergine-900));
		box-shadow: var(--shadow-soft);
		isolation: isolate;
		container-type: inline-size;
		container-name: media-frame;

		&::before {
			content: "";
			position: absolute;
			inset: -3rem;
			background: radial-gradient(closest-side, color-mix(in oklch, var(--gold) 60%, transparent), transparent 72%);
			filter: blur(2.2rem);
			z-index: -1;
			opacity: .55;
			pointer-events: none;
			transition: opacity .6s var(--ease-out);
		}

		&:hover::before {
			opacity: .8;
		}

		video {
			width: 100%;
			height: 100%;

			&:not(:fullscreen) {
				object-fit: cover;
			}

			&::-webkit-media-text-track-display {
				top: 80% !important;
			}
		}

	}

	.hero .media-frame {
		grid-area: video;

		@media (min-width: 60rem) {
			max-width: 26rem;
		}
	}

	.media-frame--lightbox {
		width: min(88vw, 26rem, calc(82dvh * 9 / 16));
		max-width: none;
		margin-inline: auto;

		&::before,
		.media-deco {
			display: none;
		}
	}

	.media-deco {
		position: absolute;
		top: -.6rem;
		right: -.9rem;
		width: 3.4rem;
		height: 3.4rem;
		color: var(--gold);
		z-index: 1;
		pointer-events: none;
	}

	.media-play {
		position: absolute;
		inset: 0;
		margin: auto;
		width: clamp(3.75rem, 26cqi, 6.5rem);
		height: clamp(3.75rem, 26cqi, 6.5rem);
		padding: 0;
		border: none;
		background: none;
		color: var(--aubergine-900);
		filter: drop-shadow(0 .5rem 1.25rem rgba(54, 43, 64, .35));
		transition: transform var(--duration-sm) var(--ease-out), opacity var(--duration-sm) var(--ease-out);

		svg {
			width: 100%;
			height: 100%;
		}

		&:hover {
			transform: scale(1.05);
		}

		&:active {
			transform: scale(.94);
		}

		&.is-hidden {
			opacity: 0;
			pointer-events: none;
			transform: scale(.92);
		}
	}

	.procedure-trigger {
		position: relative;
		display: inline-flex;
		align-items: center;
		gap: var(--space-xs);
		padding: var(--space-2xs) var(--space-sm) var(--space-2xs) var(--space-2xs);
		border: none;
		border-radius: var(--radius-full);
		background: var(--white);
		box-shadow: var(--shadow-tight);
		transition:
			background-color var(--duration-sm) var(--ease-out),
			box-shadow var(--duration-sm) var(--ease-out),
			transform var(--duration-sm) var(--ease-out);

		&:hover {
			background: color-mix(in oklch, var(--gold) 10%, var(--white));
			box-shadow: 0 0 0 1px color-mix(in oklch, var(--gold) 30%, var(--white));
		}

		&:active {
			transform: scale(.98);
		}

		.icon-play-circle {
			display: grid;
			place-items: center;
			width: 3rem;
			height: 3rem;
			border-radius: 50%;
			background: var(--gold);
			color: var(--aubergine);
			flex-shrink: 0;

			svg {
				width: 1.3rem;
				height: 1.3rem;
			}
		}

	}

	.procedure-trigger-text {
		display: grid;
		text-align: start;
		gap: .15rem;

		strong {
			font-family: var(--font-display);
			font-size: var(--step-sm);
			color: var(--aubergine-900);
			font-weight: 600;
		}

		span {
			font-size: var(--step-2xs);
			color: var(--ink-soft);
		}
	}

	.steps {
		margin-block-start: var(--space-xs);
		display: grid;
		gap: var(--space-sm);
		max-width: 36rem;
		text-align: start;
	}

	.steps-item {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: var(--space-sm);
		align-items: start;
	}

	.steps-index {
		display: grid;
		place-items: center;
		width: 2.4rem;
		height: 2.4rem;
		border-radius: 50%;
		background: var(--aubergine);
		color: var(--gold);
		font-family: var(--font-display);
		font-size: var(--step-sm);
		font-weight: 600;
		flex-shrink: 0;
		user-select: none;
		-webkit-user-select: none;
	}

	.steps-body {
		h3 {
			font-size: var(--step-sm);
			font-family: var(--font-display);
			font-weight: 600;
			color: var(--aubergine-900);
		}

		p {
			margin-block-start: .75rem;
			font-size: var(--step-sm);
			color: var(--ink-soft);
		}
	}

	dialog.video-lightbox {
		position: fixed;
		inset: 0;
		margin: auto;
		width: fit-content;
		height: fit-content;
		max-width: 94vw;
		max-height: 90dvh;
		padding: 0;
		border: none;
		background: transparent;
		opacity: 0;
		transform: scale(.94) translateY(1rem);
		transition:
			opacity var(--duration-md) var(--ease-out),
			transform var(--duration-md) var(--ease-out),
			display var(--duration-md) allow-discrete,
			overlay var(--duration-md) allow-discrete;

		&[open] {
			opacity: 1;
			transform: scale(1) translateY(0);

			@starting-style {
				& {
					opacity: 0;
					transform: scale(.94) translateY(1rem);
				}
			}
		}

		&::backdrop {
			background: color-mix(in oklch, var(--aubergine-900) 70%, transparent);
			backdrop-filter: blur(0px);
			opacity: 0;
			transition:
				opacity var(--duration-md) var(--ease-out),
				backdrop-filter var(--duration-md) var(--ease-out),
				display var(--duration-md) allow-discrete,
				overlay var(--duration-md) allow-discrete;
		}

		&[open]::backdrop {
			opacity: 1;
			backdrop-filter: blur(.5rem);

			@starting-style {
				& {
					opacity: 0;
					backdrop-filter: blur(0px);
				}
			}
		}
	}

	.lightbox-close {
		position: absolute;
		z-index: 1;
		top: 1rem;
		right: 1rem;
		display: grid;
		place-items: center;
		width: 2.5rem;
		height: 2.5rem;
		border: none;
		border-radius: 50%;
		background: color-mix(in oklch, var(--aubergine-900) 55%, transparent);
		backdrop-filter: blur(.4rem);
		color: var(--white);
		transform: scale(1);
		transition:
			background-color var(--duration-sm) var(--ease-out),
			color var(--duration-sm) var(--ease-out),
			transform var(--duration-sm) var(--ease-out);
		will-change: transform;

		&:hover {
			background: var(--gold);
			color: var(--aubergine-900);
			transform: scale(1.08);
		}

		&:active {
			transform: scale(.94);
		}

		svg {
			width: 1.1rem;
			height: 1.1rem;
		}
	}

	.about-portrait {
		position: relative;
		isolation: isolate;
		width: 100%;
		max-width: 24rem;
		margin-inline: auto;
		aspect-ratio: 4 / 5;
		border-radius: var(--media-radius);
		corner-shape: squircle;
		overflow: hidden;
		background: linear-gradient(155deg, var(--cream), var(--aubergine-300));
		box-shadow: var(--shadow-soft);
		transform: rotate(1.5deg);

		&::before {
			content: "";
			position: absolute;
			inset: -3rem;
			background: radial-gradient(closest-side, color-mix(in oklch, var(--gold) 60%, transparent), transparent 72%);
			filter: blur(2.2rem);
			z-index: -1;
			opacity: .55;
			pointer-events: none;
			transition: opacity .6s var(--ease-out);
		}

		&:hover::before {
			opacity: .8;
		}

		@media (min-width: 60rem) {
			order: 2;
		}

		img,
		image {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.about-lede {
		font-family: var(--font-display);
		font-size: var(--step-md);
		font-style: italic;
		color: var(--aubergine-900);
		line-height: 1.5;
	}

	.signature {
		margin-block-start: var(--space-2xs);
		font-family: var(--font-display);
		font-style: italic;
		font-size: var(--step-md);
		color: var(--aubergine);
	}

	.faq-item {
		background: var(--white);
		border-radius: var(--radius-md);
		padding-inline: var(--space-sm);
		box-shadow: var(--shadow-extra-tight);

		summary {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: var(--space-sm);
			padding-block: var(--space-xs);
			cursor: default;
			list-style: none;
			font-family: var(--font-display);
			font-size: var(--step-base);
			font-weight: 600;
			color: var(--aubergine-900);

			&::-webkit-details-marker {
				display: none;
			}

			svg {
				width: 1.2rem;
				height: 1.2rem;
				flex-shrink: 0;
				color: var(--gold-ink);
				transition: transform var(--duration-md) var(--ease-out);
			}
		}

		&[open] summary svg {
			transform: rotate(180deg);
		}

		&::details-content {
			overflow: clip;
			block-size: 0;
			opacity: 0;
			transition:
				block-size var(--duration-md) var(--ease-out),
				opacity var(--duration-md) var(--ease-out),
				content-visibility var(--duration-md) allow-discrete;
		}

		&[open]::details-content {
			block-size: auto;
			opacity: 1;
		}

		p {
			padding-block-end: var(--space-xs);
			color: var(--ink-soft);
		}
	}

	.disclaimer {
		display: flex;
		align-items: flex-start;
		gap: var(--space-sm);
		max-width: 46rem;
		margin-inline: auto;
		margin-block-start: var(--space-lg);
		padding-block-start: var(--space-lg);
		border-block-start: 1px solid color-mix(in oklch, var(--aubergine) 14%, transparent);
		color: var(--ink-soft);
		font-size: var(--step-xs);
		line-height: 1.6;

		svg {
			width: 1.9rem;
			height: 1.9rem;
			flex-shrink: 0;
			color: var(--gold-ink);
		}
	}

	.footer-copy {
		font-size: var(--step-xs);

		small {
			font-size: inherit;
		}

		@media (min-width: 40rem) {
			justify-self: start;
		}
	}

	.footer-logo {
		justify-self: center;
		height: clamp(3rem, 2.4rem + 2.4vw, 6.25rem);
		width: auto;
		opacity: .95;
		color-scheme: light;
	}

	.footer-links {
		display: flex;
		gap: var(--space-xs);
		font-size: var(--step-xs);
		justify-self: center;

		@media (min-width: 40rem) {
			justify-self: end;
		}

		a {
			text-decoration: none;
			color: inherit;
			border-block-end: 1px solid transparent;
			transition: border-color var(--duration-sm) var(--ease-out);

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

@layer utilities {
	.wrap {
		width: min(100% - 2 * var(--space-sm), var(--content-max));
		margin-inline: auto;
	}

	.visually-hidden {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.skip-link {
		position: fixed;
		z-index: 100;
		top: var(--space-2xs);
		left: var(--space-2xs);
		padding: var(--space-2xs) var(--space-xs);
		background: var(--white);
		color: var(--aubergine);
		border-radius: var(--radius-sm);
		font-weight: 500;
		transform: translateY(-150%);
		transition: transform var(--duration-sm) var(--ease-out);

		&:focus-visible {
			transform: translateY(0);
		}
	}
}