.pattern-single {
	--pattern-reading-width: 47rem;
	--pattern-wide-width: 60rem;
	--pattern-soft: var(--color-surface);
	--pattern-accent-soft: var(--color-secondary-soft);
	--pattern-rule: var(--color-border);
}

.pattern-shell {
	width: min(100% - 2rem, var(--pattern-wide-width));
	margin-inline: auto;
	padding-block: 1.25rem 3.5rem;
}

.pattern-breadcrumbs {
	margin-bottom: 1.5rem;
	color: var(--color-muted);
	font-size: 0.85rem;
}

.pattern-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pattern-breadcrumbs li:not(:last-child)::after {
	margin-left: 0.55rem;
	content: "›";
}

.pattern-breadcrumbs a {
	color: inherit;
}

.pattern-breadcrumbs [aria-current="page"] {
	min-width: 0;
	max-width: 22rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pattern-header,
.pattern-content,
.pattern-text-section,
.pattern-source,
.pattern-discovery,
.pattern-related,
.pattern-navigation {
	width: min(100%, var(--pattern-reading-width));
	margin-inline: auto;
}

.pattern-header {
	margin-bottom: 1.75rem;
}

.pattern-kicker {
	margin-bottom: 0.65rem;
	color: var(--color-accent);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.pattern-title {
	max-width: 44rem;
	margin-bottom: 0.7rem;
	font-size: clamp(2rem, 7vw, 3.35rem);
	letter-spacing: -0.025em;
}

.pattern-excerpt {
	color: #4f5851;
	font-size: clamp(1.05rem, 3.4vw, 1.2rem);
	line-height: 1.6;
}

.pattern-excerpt > :last-child {
	margin-bottom: 0;
}

.pattern-byline {
	margin: 1rem 0 0;
	color: var(--color-muted);
	font-size: 0.86rem;
}

.pattern-featured-image {
	width: min(100%, 45rem);
	margin: 0 auto 2.25rem;
}

.pattern-featured-image img {
	width: auto;
	max-width: 100%;
	max-height: 62rem;
	margin-inline: auto;
	object-fit: contain;
	border-radius: var(--radius-md);
}

.pattern-details {
	width: min(100%, 49rem);
	margin: 0 auto 3rem;
	padding: 1.25rem;
	background: var(--pattern-soft);
	border: 1px solid var(--pattern-rule);
	border-radius: var(--radius-md);
}

.pattern-section-title {
	margin-bottom: 1.15rem;
	font-size: clamp(1.45rem, 5vw, 1.9rem);
}

.pattern-details dl,
.pattern-compact-section dl,
.pattern-source dl {
	margin: 0;
}

.pattern-details dl {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	border-top: 1px solid var(--pattern-rule);
	border-left: 1px solid var(--pattern-rule);
}

.pattern-detail { min-width: 0; padding: 0.85rem; border-right: 1px solid var(--pattern-rule); border-bottom: 1px solid var(--pattern-rule); background: rgb(255 255 255 / 45%); }

.pattern-detail dt,
.pattern-compact-section dt,
.pattern-source dt {
	color: var(--color-muted);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.045em;
	text-transform: uppercase;
}

.pattern-detail dd,
.pattern-compact-section dd,
.pattern-source dd {
	margin: 0.2rem 0 0;
	color: var(--color-heading);
	font-weight: 700;
	line-height: 1.4;
}

.pattern-content {
	font-size: clamp(1.02rem, 2.8vw, 1.1rem);
	line-height: 1.74;
}

.pattern-content > * + * {
	margin-top: 1.35em;
}

.pattern-content h2 {
	margin-top: 2.15em;
	padding-top: 0.35em;
	font-size: clamp(1.65rem, 5.5vw, 2.2rem);
}

.pattern-content h3 {
	margin-top: 1.75em;
	font-size: clamp(1.3rem, 4.5vw, 1.65rem);
}

.pattern-content ul,
.pattern-content ol {
	padding-left: 1.5rem;
}

.pattern-content li + li {
	margin-top: 0.55rem;
}

.pattern-content > ol { padding-left: 1.75rem; }
.pattern-content > ol > li { padding: 0.25rem 0 0.8rem 0.3rem; border-bottom: 1px solid #e7e9e4; }
.pattern-content > ol > li::marker { color: var(--color-accent); font-weight: 800; }
.pattern-content li > ul,
.pattern-content li > ol { margin-top: 0.55rem; }

.pattern-content figure,
.pattern-content .wp-block-image { margin-block: 2.25rem; }
.pattern-content figure img,
.pattern-content .wp-block-image img { width: auto; max-width: 100%; margin-inline: auto; border-radius: var(--radius-md); }
.pattern-content figcaption { color: var(--color-muted); font-size: 0.83rem; text-align: center; }

.pattern-content blockquote {
	margin-inline: 0;
	padding: 0.2rem 0 0.2rem 1.25rem;
	border-left: 3px solid var(--color-accent);
	color: #554b45;
}

.pattern-content .wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.pattern-content > table {
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.pattern-content table {
	width: 100%;
	border-collapse: collapse;
}

.pattern-content th,
.pattern-content td {
	padding: 0.65rem;
	border: 1px solid var(--pattern-rule);
	text-align: left;
}

.pattern-content .wp-block-button__link {
	min-height: 44px;
	padding: 0.7rem 1.15rem;
	border-radius: 0.25rem;
}

.pattern-text-section,
.pattern-compact-section,
.pattern-source,
.pattern-discovery,
.pattern-related {
	margin-top: 3.25rem;
	padding-top: 2.25rem;
	border-top: 1px solid var(--pattern-rule);
}

.pattern-compact-section {
	width: min(100%, var(--pattern-reading-width));
	margin-inline: auto;
}

.pattern-plain-text {
	line-height: 1.75;
}

.pattern-plain-text > :last-child {
	margin-bottom: 0;
}

.pattern-compact-section dl,
.pattern-source dl {
	display: grid;
	gap: 0.9rem;
}

.pattern-compact-section dl > div,
.pattern-source dl > div {
	display: grid;
	grid-template-columns: minmax(7rem, 0.35fr) minmax(0, 1fr);
	gap: 1rem;
}

.pattern-source a {
	overflow-wrap: anywhere;
}

.pattern-discovery ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pattern-discovery a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.45rem 0.8rem;
	color: var(--color-text);
	background: var(--pattern-accent-soft);
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 0.9rem;
	text-decoration: none;
}

.pattern-discovery a:hover {
	border-color: var(--color-accent);
}

.pattern-navigation {
	display: grid;
	gap: 0.85rem;
	margin-top: 3.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--pattern-rule);
}

.pattern-navigation a {
	display: block;
	min-width: 0;
	padding: 1rem;
	background: var(--color-card);
	border: 1px solid var(--pattern-rule);
	border-radius: var(--radius-sm);
	color: inherit;
	text-decoration: none;
}

.pattern-navigation a:hover strong {
	color: var(--color-accent);
}

.pattern-navigation span {
	display: block;
	margin-bottom: 0.2rem;
	color: var(--color-muted);
	font-size: 0.78rem;
	text-transform: uppercase;
}

.pattern-navigation strong {
	display: block;
	overflow-wrap: anywhere;
}

.pattern-related { width: min(100%, var(--pattern-wide-width)); }
.pattern-related__grid { gap: 0.85rem; }
.pattern-related__extension:not(:empty) { margin-top: 1.5rem; }

@media (min-width: 40rem) {
	.pattern-navigation {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pattern-navigation__next {
		grid-column: 2;
		text-align: right;
	}
}

@media (min-width: 48rem) {
	.pattern-shell {
		width: min(100% - 3rem, var(--pattern-wide-width));
		padding-block: 2rem 4rem;
	}

	.pattern-details {
		padding: 1.6rem 1.75rem;
	}

	.pattern-details dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pattern-related__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}