:root {
	--theme-bg: #fcfbfc;
	--theme-surface: #f4f0f5;
	--theme-text: #281929;
	--theme-muted: #825185;
	--theme-accent: #b224b0;
	--theme-on-accent: #ffffff;
	--theme-border: #dcd0dc;
}

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

html {
	font-size: 108.2%;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--theme-bg);
	color: var(--theme-text);
	font-family: Optima, Candara, "Noto Sans", source-sans-pro, sans-serif;
	line-height: 1.45;
	text-rendering: optimizeLegibility;
}

h1, h2, h3 {
	font-family: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
	font-weight: 600;
	line-height: 1.10;
	letter-spacing: -0.007em;
	margin: 1.44rem 0 0.54rem;
}

h1 {
	font-size: 3.42rem;
}

h2 {
	font-size: 1.85rem;
}

h3 {
	font-size: 1.36rem;
}

p {
	margin: 0 0 0.9rem;
}

a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--theme-accent);
}

a:hover {
	border-bottom-color: currentColor;
	color: var(--theme-accent);
}

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

.wrap {
	max-width: 1086px;
	margin: 0 auto;
	padding: 0 1.12rem;
}

.top {
	padding: 1.35rem 0;
}

.top .wrap {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.9rem;
	flex-wrap: wrap;
}

.main {
	padding: 1.8rem 0 2.69rem;
}

.logo {
	font-family: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
	font-weight: 800;
	font-size: 1.31rem;
	text-decoration: none;
	color: inherit;
	border: 0;
}

.navigation {
	display: flex;
	gap: 0.73rem;
	flex-wrap: wrap;
}

.menu-item {
	text-decoration: none;
	border: 0;
	color: inherit;
}

.menu-item[aria-current] {
	color: var(--theme-accent);
}

.welcome {
	padding: 1.35rem 0 1.8rem;
}

.tagline {
	font-size: 3.42rem;
	margin-top: 0;
}

.lede {
	color: var(--theme-muted);
	font-size: 1.12rem;
	max-width: 37ch;
	margin: 0 0 0.9rem;
}

.welcome .illustration {
	width: 100%;
	border-radius: 4px;
}

.cta {
	display: inline-block;
	padding: 0.54rem 1.08rem;
	background: var(--theme-accent);
	color: var(--theme-on-accent);
	border-radius: 4px;
	text-decoration: none;
	border: 0;
	font-weight: 600;
}

.band {
	margin: 2.24rem 0;
}

.overline {
	font-size: 1.85rem;
}

.offer {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
	gap: 1.35rem;
}

.point {
	padding: 1.12rem;
	border-radius: 4px;
}

.point h3 {
	margin-top: 0;
	font-size: 1.36rem;
}

.quote {
	font-family: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
	font-size: 1.85rem;
	margin: 2.69rem 0;
	padding-left: 1.12rem;
	border-left: 2px solid var(--theme-accent);
}

.posts {
	list-style: none;
	padding: 0;
	margin: 0;
}

.post {
	padding: 0.9rem 0;
}

.post ul, .posts ul {
	list-style: none;
	padding: 0;
}

.name {
	margin: 0 0 0.27rem;
	font-size: 1.46rem;
}

.name a {
	color: inherit;
	text-decoration: none;
	border: 0;
}

.info {
	color: var(--theme-muted);
	font-size: 0.87rem;
	margin: 0 0 0.36rem;
	letter-spacing: 0.06em;
}

.summary {
	margin: 0;
}

.group {
	font-size: 1.36rem;
	color: var(--theme-muted);
	margin: 1.35rem 0 0.36rem;
}

.cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
	gap: 1.69rem;
}

.panel {
	margin: 0;
	box-shadow: 0 3px 21px rgba(0, 0, 0, 0.16);
	border-radius: 4px;
	overflow: hidden;
}

.media {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.text {
	padding: 0.9rem;
}

.copy {
	max-width: 676px;
}

.copy figure {
	margin: 1.35rem 0;
}

.copy img {
	border-radius: 4px;
	width: 100%;
}

blockquote {
	margin: 1.35rem 0;
	padding: 0.18rem 1.08rem;
	border-left: 4px solid var(--theme-accent);
	color: var(--theme-muted);
}

pre {
	background: var(--theme-surface);
	padding: 0.9rem;
	overflow-x: auto;
	border-radius: 4px;
	border: 1px solid var(--theme-border);
	font-size: 0.88rem;
	line-height: 1.5;
}

code {
	font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
}

.chip {
	display: inline-block;
	margin: 0 0.36rem 0.36rem 0;
	padding: 0.13rem 0.54rem;
	font-size: 0.8rem;
	border-radius: 4px;
	border: 1px solid var(--theme-border);
	color: var(--theme-muted);
}

.pagination {
	display: flex;
	justify-content: space-between;
	gap: 0.9rem;
	margin: 2.69rem auto 0;
	max-width: 676px;
	padding-top: 1.35rem;
	border-top: 1px solid var(--theme-border);
	font-size: 0.92rem;
}

.bottom {
	padding: 1.8rem 0;
	color: var(--theme-muted);
	font-size: 0.88rem;
	border-top: 1px solid var(--theme-border);
	background: var(--theme-surface);
}

.bottom p {
	margin: 0 0 0.27rem;
}

@media (max-width: 720px) {
	.cards {
		grid-template-columns: 1fr;
	}

	h1 {
		font-size: 2.51rem;
	}

	.tagline {
		font-size: 2.51rem;
	}

}