/* @import './reset.css';
@import './layout.css'; */

:root {
	--gutter: 1rem;
	--padding: 1rem;
	--max-width: 42rem;

	--font-size-h1: 2.986rem;
	--font-size-h2: 2.488rem;
	--font-size-h3: 2.074rem;
	--font-size-h4: 1.728rem;
	--font-size-h5: 1.44rem;
	--font-size-h6: 1.2rem;
	--font-size-p: 1rem;
	--font-size-small: 0.833rem;
	--font-size-xsmall: 0.694rem;

	--line-height-baseline: 1.5rem;

	@media (width < 31.25em) {
		--gutter: 0;
	}
}

body {
	font-size: var(--font-size-p);
	line-height: var(--line-height-baseline);
}

@layer typography {
	h1,
	.h1 {
		font-size: var(--font-size-h1);
		line-height: calc(var(--line-height-baseline) * 2); /* 3rem */
		margin-top: var(--line-height-baseline);
		margin-bottom: var(--line-height-baseline);
	}

	h2,
	.h2 {
		font-size: var(--font-size-h2);
		line-height: calc(var(--line-height-baseline) * 2); /* 3rem */
		margin-top: calc(var(--line-height-baseline) * 1.5);
		margin-bottom: calc(var(--line-height-baseline) * 0.5);
	}

	h3,
	.h3 {
		font-size: var(--font-size-h3);
		line-height: calc(var(--line-height-baseline) * 1.5); /* 2.25rem */
		margin-top: var(--line-height-baseline);
		margin-bottom: calc(var(--line-height-baseline) * 0.5);
	}

	h4,
	.h4 {
		font-size: var(--font-size-h4);
		line-height: calc(var(--line-height-baseline) * 1.5); /* 2.25rem */
		margin-top: var(--line-height-baseline);
		margin-bottom: calc(var(--line-height-baseline) * 0.5);
	}

	h5,
	.h5 {
		font-size: var(--font-size-h5);
		line-height: var(--line-height-baseline); /* 1.5rem */
		margin-top: var(--line-height-baseline);
		margin-bottom: 0;
	}

	h6,
	.h6 {
		font-size: var(--font-size-h6);
		line-height: var(--line-height-baseline); /* 1.5rem */
		margin-top: var(--line-height-baseline);
		margin-bottom: 0;
	}

	p {
		font-size: var(--font-size-p);
		line-height: var(--line-height-baseline);
		margin-top: 0;
		margin-bottom: calc(var(--line-height-baseline) / 2);
	}

	small,
	.text-small {
		font-size: var(--font-size-small);
		line-height: var(--line-height-baseline);
		display: inline-block;
	}

	:is(h1, h2, h3, h4, h5, h6, p),
	:is(.h1, .h2, .h3, .h4, .h5, .h6, p) {
		/* @supports (text-box: trim-both cap alphabetic) {
			text-box: trim-both cap alphabetic;
		} */

		margin-block-start: 0;
	}

	:is(h1, h2, h3, h4, h5, h6),
	:is(.h1, .h2, .h3, .h4, .h5, .h6) {
		font-family: 'Bricolage Grotesque', sans-serif;
		font-optical-sizing: auto;
		font-weight: 500;
		font-style: normal;
		font-variation-settings: 'wdth' 100;
		letter-spacing: -0.022em;
		color: #e9efff;
	}
}

.blog-posts {
	/* background: #fff3; */
}

.post {
	--color-link: #e7c8ad;

	margin-block-start: 0.5rem;
	/* background: #fff3; */
	&:has(+ .post) {
		padding-block-end: 0.5rem;
		margin-block-end: 2rem;
		border-bottom: 1px dashed #ffe1c7;
	}

	h3 {
		--color-link: #ffe1c7;
	}

	.meta-info {
		color: #a0a3bf;
		text-transform: uppercase;
		small {
			font-size: var(--font-size-xsmall);
		}
	}

	p a {
		font-weight: 700;
	}
}

.blog-post {
	--color-link: #ffe1c7;
	padding-block-end: 1rem;
	border-block-end: 1px dashed var(--color-link);
	padding-block-end: 1rem;

	.meta-info {
		color: #a0a3bf;
		text-transform: uppercase;
		small {
			font-size: var(--font-size-xsmall);
		}
	}
}

div:has(+ h2) {
	margin-block-end: 1rem;
}