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

	body {
		margin: 0;
	}

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

	button,
	input,
	textarea,
	select {
		font: inherit;
	}
}

@layer base {
	body {
		background: var(--color-base);
		color: var(--color-ink);
		font-family: var(--font-sans);
		font-size: var(--text-m);
		line-height: var(--leading-body);
	}

	h1,
	h2,
	h3,
	h4 {
		font-weight: 600;
		letter-spacing: -0.02em;
		line-height: var(--leading-heading);
	}

	h1 {
		font-size: var(--text-xl);
	}

	h2 {
		font-size: var(--text-l);
	}

	p,
	ul,
	ol,
	figure {
		margin-block: 0;
	}

	a {
		color: var(--color-accent);
		text-underline-offset: 0.15em;
		transition: color var(--duration) var(--ease-out);
	}

	a:hover {
		color: var(--color-accent-text);
	}

	:focus-visible {
		outline: 2px solid var(--color-focus);
		outline-offset: 3px;
	}

	.entry-content > * + * {
		margin-block-start: var(--space-s);
	}

	.entry-content ul,
	.entry-content ol {
		padding-inline-start: 1.25rem;
	}

	.entry-title {
		margin: 0;
	}

	.entry-title a {
		text-decoration: none;
	}

	.entry-meta {
		margin-block-start: var(--space-2xs);
		color: var(--color-muted);
		font-size: var(--text-s);
	}
}

@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}