@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;700&family=JetBrains+Mono:wght@500;600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap");

:root {
	--ground:#eef4f7;
	--surface:#dee5e9;
	--surface-2:#ccd3d7;
	--line:#a9b0b4;
	--ink-soft:#494e50;
	--ink:#27292b;
	--accent:#0c626f;
	--accent-ink:#fff;

	--posu-d01:"Fraunces", Georgia, serif;
	--posu-94b:"Source Serif 4", Georgia, serif;
	--posu-c10:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

	--text-xs:clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
	--text-sm:clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem);
	--text-base:clamp(1rem, 0.96rem + 0.25vw, 1.0625rem);
	--text-md:clamp(1.125rem, 1.06rem + 0.35vw, 1.25rem);
	--text-lg:clamp(1.25rem, 1.15rem + 0.55vw, 1.4375rem);
	--text-xl:clamp(1.4375rem, 1.3rem + 0.8vw, 1.75rem);
	--text-2xl:clamp(1.75rem, 1.5rem + 1.25vw, 2.25rem);
	--text-3xl:clamp(2.125rem, 1.8rem + 1.8vw, 2.875rem);
	--text-4xl:clamp(2.5rem, 2.1rem + 2.4vw, 3.5rem);

	--space-3xs:clamp(0.25rem, 0.23rem + 0.1vw, 0.3125rem);
	--space-2xs:clamp(0.5rem, 0.46rem + 0.2vw, 0.625rem);
	--space-xs:clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
	--space-sm:clamp(1rem, 0.92rem + 0.4vw, 1.25rem);
	--space-md:clamp(1.5rem, 1.38rem + 0.6vw, 1.875rem);
	--space-lg:clamp(2rem, 1.8rem + 1vw, 2.625rem);
	--space-xl:clamp(3rem, 2.6rem + 2vw, 4.25rem);
	--space-2xl:clamp(4rem, 3.4rem + 3vw, 5.75rem);
	--space-3xl:clamp(5.5rem, 4.5rem + 4.5vw, 8rem);

	--container-max:1240px;
	--container-wide:1380px;
	--container-narrow:820px;
	--gutter:clamp(1rem, 0.8rem + 1.2vw, 2rem);

	--radius-xs:2px;
	--radius-sm:4px;
	--radius-md:6px;

	--shadow-sm:0 1px 2px rgba(39, 41, 43, 0.05);
	--shadow-md:0 4px 14px rgba(39, 41, 43, 0.08);
	--shadow-lg:0 12px 30px rgba(39, 41, 43, 0.12);

	--dur-fast:140ms;
	--dur-med:240ms;
	--dur-slow:400ms;
	--ease-out:cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);

	--header-height:64px;
}

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

html {

	-webkit-text-size-adjust:100%;
	text-size-adjust:100%;
	scroll-behavior:smooth;
	scroll-padding-top:var(--header-height);
	background-color:var(--ground);
	color:var(--ink);
}

body {
	font-family:var(--posu-94b);
	font-size:var(--text-base);
	line-height:1.62;
	color:var(--ink);
	background-color:var(--ground);
	min-height:100vh;
	display:flex;
	flex-direction:column;
	overflow-x:hidden;
	text-rendering:optimizeLegibility;
	-webkit-font-smoothing:antialiased;
}

main { flex:1 0 auto; }

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

h1, h2, h3, h4, h5, h6 {
	font-family:var(--posu-d01);
	color:var(--ink);
	font-weight:700;
	line-height:1.18;
	letter-spacing:-0.015em;
	text-wrap:balance;
}

h1 {
	font-size:var(--text-4xl);
	line-height:1.1;
	letter-spacing:-0.025em;
}

h2 {
	font-size:var(--text-3xl);
	line-height:1.15;
	letter-spacing:-0.02em;
}

h3 {
	font-size:var(--text-2xl);
	line-height:1.22;
}

h4 {
	font-size:var(--text-xl);
	line-height:1.28;
}

h5 {
	font-size:var(--text-lg);
	line-height:1.35;
}

h6 {
	font-size:var(--text-md);
	line-height:1.4;
}

p {
	max-width:65ch;
	margin-block-end:1rem;
}

p:last-child { margin-block-end:0; }

.lede {
	font-size:var(--text-lg);
	line-height:1.5;
	color:var(--ink-soft);
	max-width:60ch;
}

a {
	color:var(--accent);
	text-decoration:underline;
	text-decoration-thickness:1px;
	text-underline-offset:3px;
	transition:color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out);
}

a:hover {
	color:#115b65;
	text-decoration-thickness:2px;
}

a:active { color:#0b3f47; }

a:focus-visible {
	outline:2px solid var(--accent);
	outline-offset:3px;
	border-radius:var(--radius-xs);
}

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

ul, ol {
	padding-inline-start:1.4rem;
	margin-block-end:1rem;
}

ul:last-child, ol:last-child { margin-block-end:0; }

li { margin-block-end:0.35rem; }

li:last-child { margin-block-end:0; }

blockquote {
	border-inline-start:3px solid var(--accent);
	padding-inline-start:var(--space-md);
	margin-block:var(--space-md);
	font-style:italic;
	color:var(--ink-soft);
}

hr {
	border:0;
	border-top:1px solid var(--line);
	margin-block:var(--space-lg);
}

code, kbd, samp, pre {
	font-family:var(--posu-c10);
	font-size:0.9em;
}

pre {
	background-color:var(--surface);
	border:1px solid var(--line);
	border-radius:var(--radius-sm);
	padding:var(--space-sm);
	overflow-x:auto;
}

.tabular-nums, .num, .price {
	font-variant-numeric:tabular-nums;
	font-feature-settings:"tnum" 1;
}

.mono { font-family:var(--posu-c10); }

.container {
	width:100%;
	max-width:var(--container-max);
	margin-inline:auto;
	padding-inline:var(--gutter);
}

.container-wide {
	width:100%;
	max-width:var(--container-wide);
	margin-inline:auto;
	padding-inline:var(--gutter);
}

.container-narrow {
	width:100%;
	max-width:var(--container-narrow);
	margin-inline:auto;
	padding-inline:var(--gutter);
}

.flow > * + * { margin-block-start:var(--space-md); }

.flow-sm > * + * { margin-block-start:var(--space-sm); }

.flow-lg > * + * { margin-block-start:var(--space-lg); }

.grid {
	display:grid;
	gap:var(--space-md);
}

.grid-2 {
	display:grid;
	gap:var(--space-md);
	grid-template-columns:1fr;
}

@media (min-width: 680px) {
	.grid-2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }

}

.grid-3 {
	display:grid;
	gap:var(--space-md);
	grid-template-columns:1fr;
}

@media (min-width: 640px) {
	.grid-3 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 980px) {
	.grid-3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

.grid-4 {
	display:grid;
	gap:var(--space-md);
	grid-template-columns:1fr;
}

@media (min-width: 580px) {
	.grid-4 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.grid-4 { grid-template-columns:repeat(4, minmax(0, 1fr)); }
}

.split {
	display:flex;
	flex-direction:column;
	gap:var(--space-md);
}

@media (min-width: 768px) {
	.split {
		flex-direction:row;
		align-items:flex-start;
		justify-content:space-between;
	}
}

.cluster {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:var(--space-sm);
}

.stack {
	display:flex;
	flex-direction:column;
	gap:var(--space-sm);
}

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

.skip-link {
	position:absolute;
	top:10px;
	left:10px;
	z-index:1000;
	padding:0.75rem 1.25rem;
	background-color:var(--accent);
	color:var(--accent-ink);
	font-family:var(--posu-94b);
	font-weight:600;
	text-decoration:none;
	border-radius:var(--radius-sm);
	box-shadow:var(--shadow-md);
	transform:translateY(-160%);
	transition:transform var(--dur-fast) var(--ease-out);
}

.skip-link:focus {
	transform:translateY(0);

	outline:3px solid var(--ink);
	outline-offset:2px;
}

:root {
	--band:clamp(3rem, 2.5rem + 2vw, 4.5rem);
	--band-tight:clamp(2rem, 1.6rem + 1.2vw, 3rem);
	--band-open:clamp(4rem, 3.2rem + 2.5vw, 5.5rem);
}

.section-pad { padding-block:var(--band); }

.section-pad-sm { padding-block:var(--band-tight); }

.section-pad-lg { padding-block:var(--band-open); }

.surface-panel {
	background-color:var(--surface);
	border:1px solid var(--line);
	border-radius:var(--radius-md);
	padding:var(--space-lg);
}

.text-soft { color:var(--ink-soft); }

.text-ink { color:var(--ink); }

.text-accent { color:var(--accent); }

.bg-ground { background-color:var(--ground); }

.bg-surface { background-color:var(--surface); }

.border-line { border-color:var(--line); }

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

	*, *::before, *::after {
		animation-duration:0.01ms !important;
		animation-iteration-count:1 !important;
		transition-duration:0.01ms !important;
		scroll-behavior:auto !important;
	}
}