
:root {
	--ground:#15403f;
	--surface:#1a4d4c;
	--surface-2:#225e5c;
	--line:#447e7c;
	--ink-soft:#9bc0be;
	--ink:#ddf8f7;
	--accent:#c49a4a;
	--accent-ink:#111;

	--nezi-878:"Fraunces", "Fraunces Fallback", Georgia, serif;
	--nezi-dac:"Source Sans 3", "Source Sans 3 Fallback", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	--nezi-344:"JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, Menlo, Consolas, monospace;

	--step--2:clamp(0.72rem, 0.70rem + 0.10vw, 0.80rem);
	--step--1:clamp(0.85rem, 0.82rem + 0.15vw, 0.94rem);
	--nezi-9bd:clamp(1.00rem, 0.96rem + 0.20vw, 1.125rem);
	--nezi-0ba:clamp(1.18rem, 1.12rem + 0.32vw, 1.35rem);
	--nezi-2af:clamp(1.40rem, 1.30rem + 0.50vw, 1.68rem);
	--nezi-a8c:clamp(1.68rem, 1.52rem + 0.80vw, 2.10rem);
	--nezi-dbc:clamp(2.02rem, 1.78rem + 1.20vw, 2.65rem);
	--nezi-121:clamp(2.42rem, 2.05rem + 1.85vw, 3.40rem);

	--space-2xs:clamp(0.25rem, 0.22rem + 0.15vw, 0.38rem);
	--space-xs:clamp(0.50rem, 0.45rem + 0.25vw, 0.65rem);
	--space-s:clamp(0.75rem, 0.70rem + 0.35vw, 1.00rem);
	--space-m:clamp(1.25rem, 1.15rem + 0.50vw, 1.60rem);
	--space-l:clamp(1.75rem, 1.60rem + 0.75vw, 2.25rem);
	--space-xl:clamp(2.50rem, 2.20rem + 1.50vw, 3.50rem);
	--space-2xl:clamp(3.50rem, 3.00rem + 2.50vw, 5.00rem);

	--measure-prose:65ch;
	--measure-narrow:48ch;
	--measure-caption:38ch;
	--frame-max:1240px;
	--frame-padding:clamp(0.75rem, 1.5vw, 1.75rem);

	--radius-xs:2px;
	--radius-s:4px;
	--radius-m:6px;

	--duration-fast:140ms;
	--duration-base:220ms;
	--duration-deliberate:400ms;

	--ease-standard:cubic-bezier(0.2, 0.0, 0.0, 1.0);
	--ease-out:cubic-bezier(0.0, 0.0, 0.2, 1.0);
	--ease-in-out:cubic-bezier(0.4, 0.0, 0.2, 1.0);

	--header-height:4.5rem;
	--header-condensed-height:3.5rem;
	--docked-height:3.5rem;

	--elevation-line:0 1px 0 var(--line);
	--elevation-panel:0 4px 20px -2px rgba(10, 28, 27, 0.45);
	--elevation-raised:0 8px 30px -4px rgba(8, 22, 21, 0.65);
}

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

* {
	margin:0;
	padding:0;
}

html {
	-webkit-text-size-adjust:100%;
	text-size-adjust:100%;
	color-scheme:dark;
	scroll-behavior:smooth;
	scroll-padding-block-start:var(--header-height);
	background-color:var(--ground);
	color:var(--ink);

	font-family:var(--nezi-dac);
	font-size:100%;
	line-height:1.55;
	font-feature-settings:"tnum" 0;
}

body {
	min-height:100vh;
	min-height:100dvh;
	background-color:var(--ground);
	color:var(--ink);
	font-family:var(--nezi-dac);
	font-size:var(--nezi-9bd);
	line-height:1.55;
	text-rendering:optimizeLegibility;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	overflow-x:hidden;
	position:relative;
}

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

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

button {
	background:none;
	border:none;
	cursor:pointer;
	text-align:left;
}

table {
	border-collapse:collapse;
	border-spacing:0;
	width:100%;
}

a {
	color:inherit;
	text-decoration-thickness:1px;
	text-underline-offset:3px;
	transition:color var(--duration-fast) var(--ease-standard),
							border-color var(--duration-fast) var(--ease-standard);
}

a:hover {
	color:var(--ink);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline:2px solid var(--accent);
	outline-offset:2px;
}

h1, h2, h3, h4 {
	font-family:var(--nezi-878);
	color:var(--ink);
	font-weight:600;
	line-height:1.15;
	text-wrap:balance;
	overflow-wrap:break-word;
}

h1 {
	font-size:var(--nezi-121);
	letter-spacing:-0.025em;
	font-weight:700;
}

h2 {
	font-size:var(--nezi-a8c);
	letter-spacing:-0.018em;
}

h3 {
	font-size:var(--nezi-2af);
	letter-spacing:-0.012em;
}

h4 {
	font-size:var(--nezi-0ba);
	letter-spacing:0;
}

p, li, dd {
	max-width:var(--measure-prose);
	color:var(--ink);
}

p {
	margin-block-end:1rem;
}

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

strong, b {
	font-weight:600;
	color:var(--ink);
}

small {
	font-size:var(--step--1);
	line-height:1.4;
	color:var(--ink-soft);

}

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

hr {
	border:0;
	height:1px;
	background-color:var(--line);
	margin-block:var(--space-m);
}

.num, [data-num], .tabular-number {
	font-family:var(--nezi-344);
	font-variant-numeric:tabular-nums;
	letter-spacing:-0.01em;
}

.screen-reader-only,
.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:absolute;
	top:0.5rem;
	left:0.5rem;
	z-index:1000;
	padding:0.6rem 1rem;
	background-color:var(--accent);
	color:var(--accent-ink);
	font-weight:600;
	font-size:var(--step--1);
	text-decoration:none;
	border-radius:var(--radius-s);
	transform:translateY(-160%);
	transition:transform var(--duration-fast) var(--ease-out);
}

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

.icon {
	width:1.25rem;
	height:1.25rem;
	fill:currentColor;
	display:inline-block;
	vertical-align:middle;
	flex-shrink:0;
}

.site-frame {
	max-width:var(--frame-max);
	margin-inline:auto;
	border-inline:1px solid var(--line);
	position:relative;
	min-height:100vh;
	min-height:100dvh;
	display:flex;
	flex-direction:column;
	padding-bottom:220px;
}

.site-frame-inner {
	width:100%;
	flex:1 0 auto;
}

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

.quiet-lede {
	font-size:var(--nezi-0ba);
	line-height:1.5;
	color:var(--ink-soft);
	max-width:var(--measure-narrow);
}

.prose {
	font-size:var(--nezi-9bd);
	line-height:1.65;
	color:var(--ink);
}

.prose p {
	margin-block-end:1.25rem;
}

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

.prose h2 {
	margin-block-start:var(--space-xl);
	margin-block-end:var(--space-s);
}

.prose h3 {
	margin-block-start:var(--space-l);
	margin-block-end:var(--space-xs);
}

.prose ul, .prose ol {
	margin-block-end:1.25rem;
	padding-inline-start:1.5rem;
}

.prose li {
	margin-block-end:0.5rem;
}

.prose a {
	color:var(--ink);
	border-bottom:1px solid var(--line);
	text-decoration:none;
}

.prose a:hover {
	color:var(--accent);
	border-color:var(--accent);
}

.prose blockquote {
	border-inline-start:2px solid var(--accent);
	padding-inline-start:1.25rem;
	margin-block:var(--space-m);
	color:var(--ink-soft);
	font-style:italic;
}

@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;
	}

	[data-speed], [data-lag] {
		transform:none !important;
	}
}

/* Guard against overlay overlap during audits where position: fixed elements paint over in-flow content */
@media (max-width: 48rem) {
	body {
		padding-bottom:24rem;
	}
}
