:root {
	--box-scale-base-block: 0.5rlh;
	--box-scale-base-inline: 2rem;
}

html {
	background-color: Canvas;
	color: CanvasText;
	color-scheme: light dark;
	line-height: 2;
	scroll-padding-block: calc(var(--box-scale-base-block) * 2);
	scroll-padding-inline: var(--box-scale-base-inline);
	scrollbar-color: GrayText Canvas;
	tab-size: 2;
	line-break: strict;
	hyphens: auto;
	text-autospace: normal;
	text-spacing-trim: trim-start;
	hanging-punctuation: first allow-end last;
	-webkit-text-size-adjust: 100%;
}

body {
	--body-padding-block: calc(var(--box-scale-base-block) * 3);
	--body-padding-top: calc(var(--box-scale-base-block) * 3 + env(safe-area-inset-top));
	--body-padding-bottom: calc(var(--box-scale-base-block) * 4 + env(safe-area-inset-bottom));
	--body-padding-inline: var(--box-scale-base-inline);
	padding-top: var(--body-padding-top);
	padding-right: calc(var(--body-padding-inline) + env(safe-area-inset-right));
	padding-bottom: var(--body-padding-bottom);
	padding-left: calc(var(--body-padding-inline) + env(safe-area-inset-left));
	display: grid;
	row-gap: calc(var(--box-scale-base-block) * 8);
	grid-template-rows: 1fr auto;
	margin-block: 0;
	margin-inline: auto;
	min-block-size: calc(100dvb - (var(--body-padding-top) + var(--body-padding-bottom)));
	max-inline-size: 52rem;
}

address {
	font-style: normal;
}

figure {
	margin-block: var(--box-scale-base-block);
	margin-inline: 0;
	inline-size: fit-content;
}

footer {
	display: flex;
	flex-wrap: wrap;
	row-gap: calc(var(--box-scale-base-block) * 4);
	column-gap: calc(var(--box-scale-base-inline) * 2);
}

main {
	display: flex;
	flex-direction: column;
	row-gap: calc(var(--box-scale-base-block) * 2);
}

p {
	margin-block: 0;
}

h1 {
	font-size: inherit;
	font-weight: 700;
	line-height: inherit;
	margin-block: 0;
}

small {
	font-size: inherit;
}

a {
	color: inherit;
	text-decoration-color: GrayText;
	text-decoration-thickness: calc((1 / 16) * 1em);
	text-underline-offset: calc((7 / 16) * 1em);
}

ul {
	display: flex;
	flex-direction: column;
	row-gap: calc(var(--box-scale-base-block) * 2);
	list-style-type: none;
	margin-block: 0;
	padding-inline-start: var(--box-scale-base-inline);

	& > li {
		position: relative;
		&::before {
			inline-size: 1rem;
			content: "•";
			position: absolute;
			inset-inline-end: calc(1rem + 100%);
			text-align: center;
		}
	}

	footer > :is(address, nav) > & {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: baseline;
		column-gap: var(--box-scale-base-inline);
		padding-inline-start: 0;

		& > li::before {
			content: none;
		}
	}
}

picture, img {
	display: block;
	inline-size: 100%;
}

img {
	filter: light-dark(brightness(1.0), brightness(0.9));
	object-fit: cover;
	block-size: auto;
}

*, *::before, *::after {
	/* outline: solid 1px; */
}