:root {
	--bg-color: #9dcc59;
	--tile-bg-color: hsl(from var(--bg-color) h s calc(l + 20) / 1);

	--padding: 24px;

	--tile-top-padding: 18px;
	--tile-bottom-padding: 36px;
	--tile-lr-padding: 48px;
	--tile-radius: 48px;

	--pill-box-h: 62px;
	--pill-box-radius: 31px;
	--pill-box-padding: 31px;

	--gap: 32px;

	--hero-font: normal 400 72px "Playfair Display";
}

html.bar_showing {
	body  {
		padding-top: 64px;
	}
}

html.p_1 {
	main h1 {
		font: var(--hero-font);
		text-align: center;
	}
}

body {
	font-size: 20px;

	.hero {
		font: var(--hero-font);
	}
}

a.cta {
    --h: var(--pill-box-h);
    --r: var(--pill-box-radius);
	--p: var(--pill-box-padding);

	display: flex;
	gap: 0.25em;
	align-items: center;
	text-decoration: none;
	height: var(--h);
	border-radius: var(--r);
	padding: 0 var(--p);
	background-color: white;
}

main > .w {
	max-width: initial;
	padding: var(--padding);

	display: flex;
	flex-direction: column;
	gap: var(--gap);

	.content,
	.footer {
		border-radius: var(--tile-radius);
		padding-top: var(--tile-top-padding);
		padding-left: var(--tile-lr-padding);
		padding-right: var(--tile-lr-padding);
		padding-bottom: var(--tile-bottom-padding);
		background-color: var(--tile-bg-color);
	}
	.content {
		.site_nav {
			--lr-w: 200px;
			--h: var(--pill-box-h);
			--r: var(--pill-box-radius);
			--p: var(--pill-box-padding);
			display: flex;
			justify-content: space-between;
			margin-bottom: var(--gap);
			> *:nth-child(1) {
				background-color: white;
				border-radius: var(--r);
				height: var(--h);
				flex: 0 0 var(--lr-w);
				> img {
					box-sizing: border-box;
					padding: 5px 0;
					width: 100%;
					max-height: 100%;
				}
			}
			> *:nth-child(2) {
				background-color: white;
				border-radius: var(--r);
				height: var(--h);
				flex: 0 0 auto;
			}
			> *:nth-child(3) {
				flex: 0 0 var(--lr-w);
				text-align: right;
				> a {
					display: inline-block;
					background-color: white;
					border-radius: var(--r);
					line-height: var(--h);
					padding: 0 var(--p);
					text-align: center;
				}
			}
			nav {
				display: flex;
				gap: 8px;
				align-items: center;
				padding: 0 32px;
				> a {
					border-radius: 32px;
					padding: 0 16px;
				}
				> a.selected {
					background-color: #f2f2f2;
				}
			}
		}
	}
	.footer {
		display: flex;
		justify-content: space-between;
		xgap: 8px;
		xalign-items: center;
		xpadding: 0 32px;
		> *:nth-child(1) {
		}
		> *:nth-child(2) {
		}
		> *:nth-child(3) {
			text-align: right;
		}
	}
}