@layer components {
	.breadcrumbs {
		padding-block: var(--space-3);
	}

	.breadcrumbs ol {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-1);
		font-size: var(--font-size-meta);
		color: var(--color-text-muted);
	}

	.breadcrumbs li {
		display: flex;
		align-items: center;
		gap: var(--space-1);
	}

	.breadcrumbs li:not(:last-child)::after {
		content: "/";
		margin-inline-start: var(--space-1);
		color: var(--color-border-200);
	}

	.breadcrumbs a {
		color: var(--color-text-muted);
	}

	.breadcrumbs a:hover,
	.breadcrumbs a:focus-visible {
		color: var(--color-primary-600);
	}

	.breadcrumbs [aria-current="page"] {
		color: var(--color-text-heading);
	}

	.breadcrumbs,
	.entry-header__inner,
	.entry-content__inner,
	.author-bio__inner {
		max-width: var(--content-reading);
		margin-inline: auto;
		padding-inline: var(--space-3);
	}

	.related-posts__inner,
	.post-navigation__inner {
		max-width: var(--content-wide);
		margin-inline: auto;
		padding-inline: var(--space-3);
	}

	.entry-title {
		overflow-wrap: break-word;
		word-break: break-word;
		margin-top: var(--space-3);
	}

	.entry-meta {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2) var(--space-3);
		margin-top: var(--space-2);
	}

	.entry-meta a {
		color: var(--color-text-muted);
	}

	.entry-thumbnail {
		margin: var(--space-4) 0 0;
	}

	.entry-thumbnail img {
		width: 100%;
		max-width: var(--content-wide);
		margin-inline: auto;
		display: block;
		aspect-ratio: 16 / 9;
		object-fit: cover;
	}

	.entry-thumbnail figcaption {
		max-width: var(--content-reading);
		margin-inline: auto;
		padding-inline: var(--space-3);
		margin-top: var(--space-2);
		font-size: var(--font-size-meta);
		color: var(--color-text-muted);
		text-align: center;
	}

	/* Table of contents */
	.toc {
		margin-block: var(--space-4);
		padding: var(--space-3);
		border: 1px solid var(--color-border-200);
		border-radius: var(--radius-md);
		background: var(--color-bg-subtle);
	}

	.toc__summary {
		font-weight: 700;
		cursor: pointer;
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	.toc__list {
		margin-top: var(--space-2);
		display: flex;
		flex-direction: column;
		gap: var(--space-1);
	}

	.toc__item--h3 {
		margin-inline-start: var(--space-4);
	}

	/* Article body typography */
	.entry-content {
		margin-top: var(--space-4);
	}

	.entry-content > * + * {
		margin-top: var(--space-4);
	}

	.entry-content h2 {
		margin-top: var(--space-8);
		scroll-margin-top: var(--space-4);
	}

	.entry-content h3 {
		margin-top: var(--space-6);
		scroll-margin-top: var(--space-4);
	}

	.entry-content a {
		color: var(--color-link);
		text-decoration: underline;
	}

	.entry-content a:hover,
	.entry-content a:focus-visible {
		color: var(--color-primary-700);
	}

	.entry-content a.is-external {
		padding-inline-end: 1.1em;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23245E46'%3E%3Cpath d='M14 3a1 1 0 1 0 0 2h3.586l-9.293 9.293a1 1 0 0 0 1.414 1.414L19 6.414V10a1 1 0 1 0 2 0V4a1 1 0 0 0-1-1h-6ZM5 5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5a1 1 0 1 0-2 0v5H5V7h5a1 1 0 0 0 0-2H5Z'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right center;
		background-size: 0.9em;
	}

	.entry-content blockquote {
		border-inline-start: 4px solid var(--color-primary-600);
		padding-inline-start: var(--space-4);
		color: var(--color-text-muted);
		font-style: italic;
	}

	.entry-content figure {
		margin: 0;
	}

	.entry-content img {
		max-width: 100%;
		height: auto;
	}

	.entry-content figcaption {
		margin-top: var(--space-2);
		font-size: var(--font-size-meta);
		color: var(--color-text-muted);
		text-align: center;
	}

	.entry-content table {
		display: block;
		overflow-x: auto;
		width: 100%;
		border-collapse: collapse;
	}

	.entry-content th,
	.entry-content td {
		border: 1px solid var(--color-border-200);
		padding: var(--space-2) var(--space-3);
		text-align: start;
	}

	.entry-content th {
		background: var(--color-bg-subtle);
	}

	.entry-content ul,
	.entry-content ol {
		padding-inline-start: var(--space-6);
		list-style: revert;
	}

	.entry-content li + li {
		margin-top: var(--space-1);
	}

	/* Post navigation, related articles, author bio */
	.post-navigation__inner,
	.related-posts__inner,
	.author-bio__inner {
		padding-block: var(--space-6);
		border-top: 1px solid var(--color-border-200);
	}

	.post-navigation__inner {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-4);
	}

	.post-navigation__link {
		display: flex;
		flex-direction: column;
		gap: var(--space-1);
		text-decoration: none;
		color: var(--color-text-heading);
		min-height: 44px;
	}

	.post-navigation__link--next {
		text-align: end;
		grid-column: 2;
	}

	.post-navigation__label {
		font-size: var(--font-size-meta);
		color: var(--color-text-muted);
	}

	.post-navigation__title {
		font-weight: 600;
	}

	.author-bio__inner {
		display: flex;
		gap: var(--space-3);
	}

	.author-bio__avatar {
		border-radius: 50%;
		flex-shrink: 0;
	}

	.author-bio__name {
		font-weight: 700;
		margin: 0;
	}

	.author-bio__name a {
		color: var(--color-text-heading);
		text-decoration: none;
	}

	.author-bio__description {
		margin-top: var(--space-1);
		color: var(--color-text-muted);
	}

	@media (max-width: 480px) {
		.post-navigation__inner {
			grid-template-columns: 1fr;
		}

		.post-navigation__link--next {
			grid-column: 1;
			text-align: start;
		}
	}
}