/* fonts */
@font-face {
	src:url('../fonts/caslon-display.woff2') format('woff2');
	font-family:'Libre Caslon Display';
	font-weight:400;
	font-style:normal;
	font-display:swap;
	unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	src:local('Georgia');
	font-family:'Libre Caslon Display Fallback';
	size-adjust:84.90%;
}
@font-face {
	src:url('../fonts/franklin-var.woff2') format('woff2');
	font-family:'Libre Franklin';
	font-weight:300 700;
	font-style:normal;
	font-display:swap;
	unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	src:local('Arial');
	font-family:'Libre Franklin Fallback';
	size-adjust:103.76%;
}

/* tokens */
:root {
	--dusk-900:rgb(21,23,28);
	--dusk-800:rgb(31,34,41);
	--dusk-700:rgb(40,44,53);
	--dusk-600:rgb(52,56,66);
	--memo-100:rgb(236,238,242);
	--memo-400:rgb(169,175,186);
	--copper-500:rgb(208,149,114);

	--serif:'Libre Caslon Display', 'Libre Caslon Display Fallback', Georgia, serif;
	--sans:'Libre Franklin', 'Libre Franklin Fallback', Arial, sans-serif;
	--mono:ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace;

	--round-200:16px;
	--round-400:22px;
	--glow-300:0 30px 70px -30px rgb(0 0 0 / 0.7), 0 10px 30px -12px rgb(208 149 114 / 0.12);
	--step-500:clamp(64px, 8vw, 104px);
	--head-h:64px;
	--bar-h:0px;
}

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

html {
	scroll-padding-top:calc(var(--bar-h) + var(--head-h) + 16px);
	-webkit-text-size-adjust:100%;
}

body {
	margin:0;
	padding-top:calc(var(--bar-h) + var(--head-h));

	font-family:var(--sans);
	font-size:1.125rem;
	line-height:1.62;
	font-weight:400;

	color:var(--memo-100);
	background:var(--dusk-900);
}

img {
	display:block;
	max-width:100%;
	height:auto;
}

h1, h2, h3 {
	margin:0;

	font-family:var(--serif);
	font-weight:400;
	line-height:1.08;
	letter-spacing:normal;
}

h2 {
	font-size:clamp(2rem, 3.6vw, 3.1rem);
}

h3 {
	font-size:1.45rem;
	line-height:1.2;
}

p {
	margin:0 0 1em;
}

a {
	color:var(--copper-500);
	text-underline-offset:0.18em;
}

a:hover {
	color:var(--memo-100);
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
	outline:2px solid var(--copper-500);
	outline-offset:3px;
}

table {
	border-collapse:collapse;
}

.wrap {
	width:min(1240px, calc(100% - 40px));
	margin-inline:auto;
}

.mono {
	font-family:var(--mono);
	font-size:0.84rem;
	letter-spacing:0.02em;
}

.outline {
	color:var(--copper-500);
	-webkit-text-fill-color:transparent;
	-webkit-text-stroke:1.2px var(--copper-500);
}

.skip-link {
	position:fixed;
	top:8px;
	left:8px;
	z-index:90;
	transform:translateY(-200%);

	padding:12px 18px;

	color:var(--dusk-900);
	background:var(--copper-500);
	border-radius:var(--round-200);
}

.skip-link:focus {
	transform:none;
}

/* header */
.site-head {
	position:fixed;
	top:var(--bar-h);
	left:0;
	right:0;
	z-index:50;

	height:var(--head-h);

	background:var(--dusk-900);
	border-bottom:1px solid var(--dusk-600);
}

.head-row {
	display:flex;
	align-items:center;
	justify-content:space-between;

	height:100%;
}

.brand {
	display:flex;
	align-items:center;
	gap:12px;

	min-height:44px;
	margin-left:auto;

	font-family:var(--serif);
	font-size:1.6rem;
	text-decoration:none;

	color:var(--memo-100);
}

.brand svg {
	width:34px;
	height:34px;
	flex:none;
}

.brand:hover {
	color:var(--copper-500);
}

.menu-toggle {
	display:inline-flex;
	align-items:center;
	gap:10px;

	min-height:44px;
	padding:0 16px 0 0;

	font-family:var(--mono);
	font-size:0.9rem;

	color:var(--memo-100);
	background:none;
	border:0;
	cursor:pointer;
}

.menu-toggle svg {
	width:26px;
	height:26px;
}

/* nav */
.site-nav {
	background:var(--dusk-900);
	border-bottom:1px solid var(--dusk-600);
}

.nav-list {
	display:flex;
	flex-direction:column;

	margin:0;
	padding:12px 20px 20px;

	list-style:none;
}

.nav-list a {
	display:flex;
	align-items:center;

	min-height:48px;

	font-size:1.05rem;
	text-decoration:none;

	color:var(--memo-100);
	border-bottom:1px solid var(--dusk-600);
}

.nav-list a:hover {
	color:var(--dusk-900);
	background:var(--copper-500);
}

.nav-list .nav-cta {
	color:var(--copper-500);
}

@media (max-width: 959px) {
	.enhanced .site-nav {
		position:fixed;
		top:calc(var(--bar-h) + var(--head-h));
		left:0;
		right:0;
		bottom:0;
		z-index:70;
		visibility:hidden;

		overflow-y:auto;
		padding-top:12px;

		background:var(--dusk-900);
		border:0;
	}

	.enhanced .site-nav.menu-open {
		visibility:visible;
	}

	.enhanced .nav-list a {
		min-height:56px;

		font-family:var(--serif);
		font-size:1.7rem;
	}
}

@media (min-width: 960px) {
	:root {
		--head-h:76px;
	}

	.wrap {
		width:min(1240px, calc(100% - 64px));
	}

	.menu-toggle {
		display:none;
	}

	.site-nav {
		position:fixed;
		top:var(--bar-h);
		left:max(16px, calc((100% - 1240px) / 2 - 16px));
		z-index:51;

		display:flex;
		align-items:center;

		height:var(--head-h);

		background:none;
		border:0;
	}

	.nav-list {
		flex-direction:row;

		padding:0;
	}

	.nav-list a {
		min-height:44px;
		padding:0 16px;

		font-size:0.98rem;

		border-bottom:0;
		border-right:1px solid var(--dusk-600);
	}

	.nav-list li:last-child a {
		border-right:0;
	}
}

/* buttons */
.btn-solid {
	display:inline-flex;
	align-items:center;
	gap:12px;

	min-height:52px;
	padding:0 26px;

	font-weight:600;
	text-decoration:none;

	color:var(--dusk-900);
	background:var(--copper-500);
	border-radius:var(--round-200);
	box-shadow:var(--glow-300);
}

.btn-solid:hover {
	color:var(--dusk-900);
	background:var(--memo-100);
}

.link-arrow {
	display:inline-flex;
	align-items:center;
	gap:10px;

	min-height:44px;

	font-weight:500;
	text-decoration:underline;
	text-decoration-thickness:1px;
	text-underline-offset:0.35em;

	color:var(--copper-500);
}

.link-arrow::after {
	content:'\2192';
}

.link-arrow:hover {
	color:var(--memo-100);
	text-decoration-thickness:2px;
}

/* consent */
.gdpr-notice {
	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index:60;

	background:var(--dusk-800);
	border-bottom:2px solid var(--copper-500);
}

.gdpr-notice[hidden] {
	display:none;
}

.notice-row {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:10px 28px;

	padding:10px 0;
}

.notice-text {
	flex:1 1 420px;

	margin:0;

	font-size:0.95rem;
	line-height:1.45;
}

.notice-text strong {
	font-weight:600;
}

.notice-actions {
	display:flex;
	gap:10px;
}

.notice-btn {
	min-height:44px;
	padding:0 18px;

	font-family:var(--sans);
	font-size:0.95rem;
	font-weight:600;

	color:var(--memo-100);
	background:var(--dusk-900);
	border:1px solid var(--copper-500);
	border-radius:var(--round-200);
	cursor:pointer;
}

.notice-btn:hover {
	color:var(--dusk-900);
	background:var(--copper-500);
}

@media (max-width: 600px) {
	.notice-text {
		flex-basis:100%;

		font-size:0.88rem;
	}

	.notice-actions {
		width:100%;
	}

	.notice-btn {
		flex:1;

		padding:0 10px;
	}
}

/* footer */
.site-foot {
	margin-top:0;
	padding:56px 0 40px;

	border-top:1px solid var(--dusk-600);
}

.foot-grid {
	display:grid;
	gap:28px;
}

.foot-name {
	margin:0 0 6px;

	font-family:var(--serif);
	font-size:1.9rem;
}

.foot-line {
	max-width:36ch;

	color:var(--memo-400);
}

.foot-nav ul {
	display:grid;
	gap:0;

	margin:0;
	padding:0;

	list-style:none;
}

.foot-nav a {
	display:flex;
	align-items:center;

	min-height:44px;

	color:var(--memo-100);
	border-bottom:1px solid var(--dusk-600);
}

.foot-nav a:hover {
	color:var(--copper-500);
}

.foot-copy {
	margin:0;

	color:var(--memo-400);
}

@media (min-width: 760px) {
	.foot-grid {
		grid-template-columns:1.2fr 1fr;
		align-items:start;
	}

	.foot-nav ul {
		grid-template-columns:1fr 1fr;
		column-gap:24px;
	}

	.foot-copy {
		grid-column:1 / -1;

		padding-top:20px;

		border-top:1px solid var(--dusk-600);
	}
}

/* reveal */
.enhanced .reveal {
	opacity:0;
	transform:translateY(18px);

	transition:opacity 0.6s ease, transform 0.6s ease;
}

.enhanced .reveal.reveal-done {
	opacity:1;
	transform:none;
}

@media (prefers-reduced-motion: reduce) {
	.enhanced .reveal {
		transform:none;

		transition:none;
	}
}