:root {
	--fuo-shell-bg: #f5f7fb;
	--fuo-shell-surface: #ffffff;
	--fuo-shell-text: #172033;
	--fuo-shell-muted: #667085;
	--fuo-shell-border: #e4e7ec;
	--fuo-shell-primary: #2563eb;
	--fuo-shell-width: 72rem;
}

* {
	box-sizing: border-box;
}

html {
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	line-height: 1.6;
	color: var(--fuo-shell-text);
	background: var(--fuo-shell-bg);
}

body {
	min-height: 100vh;
	margin: 0;
	display: flex;
	flex-direction: column;
}

a {
	color: var(--fuo-shell-primary);
}

.fuo-shell-container {
	width: min(calc(100% - 2rem), var(--fuo-shell-width));
	margin-inline: auto;
}

.fuo-shell-header {
	border-bottom: 1px solid var(--fuo-shell-border);
	background: var(--fuo-shell-surface);
}

.fuo-shell-header__inner {
	min-height: 4rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.fuo-shell-brand,
.fuo-shell-link {
	font-weight: 700;
	text-decoration: none;
}

.fuo-shell-main {
	flex: 1;
}

.fuo-shell-content {
	padding-block: clamp(3rem, 8vw, 7rem);
}

.fuo-shell-article {
	max-width: 52rem;
	padding: clamp(1.5rem, 4vw, 3rem);
	border: 1px solid var(--fuo-shell-border);
	border-radius: 1rem;
	background: var(--fuo-shell-surface);
	box-shadow: 0 1rem 3rem rgb(16 24 40 / 8%);
}

.fuo-shell-article h1 {
	margin-top: 0;
	font-size: clamp(2rem, 6vw, 3.75rem);
	line-height: 1.05;
}

.fuo-shell-footer {
	padding-block: 1.25rem;
	border-top: 1px solid var(--fuo-shell-border);
	color: var(--fuo-shell-muted);
	background: var(--fuo-shell-surface);
}

.fuo-shell-footer p {
	margin: 0;
}