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

	--lunu-e93:"Cormorant Garamond", 'Cormorant Garamond Fallback', Garamond, "Georgia", serif;
	--lunu-bd9:'Archivo', 'Archivo Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	--lunu-14a:'JetBrains Mono', 'JetBrains Mono Fallback', "SF Mono", Consolas, Monaco, monospace;

	--text-2xs:clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);
	--text-xs:clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
	--text-sm:clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);
	--text-base:clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem);
	--text-md:clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	--text-lg:clamp(1.25rem, 1.15rem + 0.55vw, 1.5rem);
	--text-xl:clamp(1.45rem, 1.3rem + 0.85vw, 1.875rem);
	--text-2xl:clamp(1.75rem, 1.5rem + 1.3vw, 2.5rem);
	--text-3xl:clamp(2.15rem, 1.8rem + 2vw, 3.25rem);
	--text-4xl:clamp(2.5rem, 2.1rem + 2.8vw, 4.25rem);
	--text-hero:clamp(2.5rem, 2.1rem + 3.4vw, 5rem);

	--space-3xs:clamp(0.125rem, 0.1rem + 0.1vw, 0.25rem);
	--space-2xs:clamp(0.25rem, 0.2rem + 0.2vw, 0.375rem);
	--space-xs:clamp(0.45rem, 0.4rem + 0.3vw, 0.625rem);
	--space-sm:clamp(0.75rem, 0.65rem + 0.5vw, 1rem);
	--space-md:clamp(1rem, 0.85rem + 0.75vw, 1.5rem);
	--space-lg:clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem);
	--space-xl:clamp(2rem, 1.65rem + 1.75vw, 3.25rem);
	--space-2xl:clamp(2.75rem, 2.25rem + 2.5vw, 4.5rem);
	--space-3xl:clamp(3.5rem, 2.75rem + 3.75vw, 6.5rem);
	--band:clamp(2.5rem, 2rem + 2.5vw, 4rem);

	--frame-max:1380px;
	--frame-border:1px solid var(--line);
	--frame-pad:clamp(1rem, 0.8rem + 1vw, 2.5rem);
	--frame-pad-sm:clamp(0.75rem, 0.6rem + 0.75vw, 1.5rem);
	--dock-height:64px;

	--ease-out:cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
	--duration-fast:140ms;
	--duration-base:200ms;
	--duration-slow:350ms;

	--trans-fast:var(--duration-fast) var(--ease-out);
	--trans-base:var(--duration-base) var(--ease-out);
	--trans-slow:var(--duration-slow) var(--ease-out);

	--shadow-subtle:0 1px 2px rgba(39, 41, 43, 0.04), 0 4px 12px rgba(39, 41, 43, 0.03);
	--shadow-lift:0 2px 4px rgba(39, 41, 43, 0.05), 0 8px 24px rgba(39, 41, 43, 0.06);
	--shadow-panel:0 4px 6px rgba(39, 41, 43, 0.06), 0 16px 36px rgba(39, 41, 43, 0.12);
}

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

html {
	font-size:100%;
	-webkit-text-size-adjust:100%;
	scroll-behavior:smooth;
	scroll-padding-top:1.5rem;
	background-color:var(--ground);
	color:var(--ink);
}

body {
	font-family:var(--lunu-bd9);
	font-size:var(--text-base);
	font-weight:400;
	line-height:1.65;
	color:var(--ink);
	background-color:var(--ground);
	min-height:100vh;
	display:flex;
	flex-direction:column;
	padding-bottom:var(--dock-height);
	overflow-x:hidden;
	text-rendering:optimizeLegibility;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

@media (min-width: 980px) {
	body { padding-bottom:0; }
}

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

svg.icon {
	width:1.25rem;
	height:1.25rem;
	fill:currentColor;
	flex-shrink:0;
}

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

h1, h2, h3, h4, h5, h6 {
	font-family:var(--lunu-e93);
	font-weight:500;
	line-height:1.15;
	color:var(--ink);
	letter-spacing:-0.015em;
	text-wrap:balance;
	overflow-wrap:break-word;
}

h1 {
	font-size:var(--text-hero);
	line-height:1.05;
	letter-spacing:-0.02em;
}

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

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

}

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

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

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

p {
	max-width:65ch;
	margin-block-end:var(--space-sm);
	color:var(--ink);
}

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

.lede {
	font-size:var(--text-md);
	line-height:1.55;
	color:var(--ink);
	max-width:58ch;
}

.subtext {

	font-size:var(--text-sm);
	line-height:1.5;
	color:var(--ink-soft);
}

.meta-mono {
	font-family:var(--lunu-14a);
	font-size:var(--text-xs);
	letter-spacing:0.02em;
	color:var(--ink-soft);
	font-feature-settings:"tnum" 1, "zero" 1;
}

.price-figure {
	font-family:var(--lunu-14a);
	font-feature-settings:"tnum" 1, "zero" 1;
	font-weight:500;
	letter-spacing:-0.01em;
}

.verb-opener {
	font-family:var(--lunu-e93);
	font-size:var(--text-4xl);
	font-weight:500;
	line-height:1.02;
	letter-spacing:-0.025em;
	color:var(--ink);
	margin-block-end:var(--space-xs);
	text-wrap:balance;
}

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

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

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

ul, ol {
	padding-inline-start:1.25rem;
	margin-block-end:var(--space-sm);
	max-width:65ch;
}

li { margin-block-end:var(--space-2xs); }

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

blockquote {
	border-left:2px solid var(--accent);
	padding-inline-start:var(--space-md);
	margin-block:var(--space-md);
	font-family:var(--lunu-e93);
	font-size:var(--text-lg);
	font-style:italic;
	color:var(--ink);
	max-width:60ch;
}

code, kbd, samp {
	font-family:var(--lunu-14a);
	font-size:0.9em;
	background-color:var(--surface);
	padding:0.15em 0.35em;
	border:1px solid var(--line);
}

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

#smooth-wrapper {
	position:relative;
	width:100%;
	overflow:hidden;
}

#smooth-content {
	position:relative;
	width:100%;
}

.boxed-frame-shell {
	width:100%;
	max-width:var(--frame-max);
	margin-inline:auto;
	border-left:var(--frame-border);
	border-right:var(--frame-border);
	background-color:var(--ground);
	display:flex;
	flex-direction:column;
	min-height:100vh;
	min-height:100svh;
}

@media (max-width: 1380px) {
	.boxed-frame-shell {
		border-left:0;
		border-right:0;
	}
}

.boxed-frame-strip {
	height:6px;
	background-color:var(--accent);
	width:100%;
	flex-shrink:0;
}

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

.content-column { max-width:65ch; }

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

@media (min-width: 768px) {
	.grid-2 {
		grid-template-columns:repeat(2, minmax(0, 1fr));
		gap:var(--space-lg);
	}
}

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

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

@media (min-width: 1024px) {
	.grid-3 {
		grid-template-columns:repeat(3, minmax(0, 1fr));
		gap:var(--space-lg);
	}
}

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

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

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

.section-divider {

	width:100%;
	height:1px;
	background-color:var(--line);
	border:0;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration:0.01ms !important;
		animation-iteration-count:1 !important;
		transition-duration:0.01ms !important;
		scroll-behavior:auto !important;
	}
}
