@charset "UTF-8";

/**
 * Shared post and fixed-page reading experience.
 *
 * The rules deliberately stop at the article boundary. Hard Piston Toolkit
 * components retain their own public API and are not targeted here.
 */

body.sl-design-system.sl-singular-layout main.main > article.article {
	margin: 0;
	color: var(--sl-color-text-primary);
}

body.sl-design-system.single-post.sl-singular-layout {
	--sl-singular-content-width: var(--sl-single-content-width);
}

body.sl-design-system.page.sl-singular-layout {
	--sl-singular-content-width: var(--sl-page-content-width);
}

body.sl-design-system.sl-singular-layout :where(.article-header, .entry-content, .article-footer) {
	width: min(100%, var(--sl-singular-content-width));
	margin-inline: auto;
}

/* Breadcrumb and article header. */
body.sl-design-system.sl-singular-layout .breadcrumb {
	width: min(100%, var(--sl-singular-content-width));
	margin: 0 auto var(--sl-space-5);
	color: var(--sl-color-text-muted);
	font-size: var(--sl-font-size-xs);
	line-height: 1.6;
}

body.sl-design-system.sl-singular-layout .breadcrumb a {
	color: var(--sl-color-text-muted);
	text-decoration: none;
}

body.sl-design-system.sl-singular-layout .breadcrumb a:hover {
	color: var(--sl-color-brand);
}

body.sl-design-system.sl-singular-layout .breadcrumb .sp {
	margin-inline: var(--sl-space-2);
	color: var(--sl-color-border);
}

body.sl-design-system.sl-singular-layout .article-header {
	margin-bottom: var(--sl-space-6);
}

body.sl-design-system.sl-singular-layout .article-header .entry-title {
	display: block !important;
	margin: 0 0 var(--sl-space-4);
	padding: 0;
	border: 0;
	color: var(--sl-color-text-primary);
	font-family: var(--sl-font-sans);
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.02em;
	background: transparent !important;
}

body.sl-design-system.sl-singular-layout .article-header .date-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: var(--sl-space-2) var(--sl-space-4);
	margin: 0 0 var(--sl-space-5);
	color: var(--sl-color-text-muted);
	font-size: var(--sl-font-size-xs);
	line-height: 1.5;
	text-align: left;
}

body.sl-design-system.sl-singular-layout .article-header :where(.post-date, .post-update, .post-author) {
	margin: 0;
}

/* Reading column. */
body.sl-design-system.sl-singular-layout .entry-content {
	margin-top: 0;
	margin-bottom: var(--sl-space-8);
	font-size: var(--sl-font-size-md);
	line-height: 1.9;
	overflow-wrap: anywhere;
}

body.sl-design-system.sl-singular-layout .entry-content > p {
	margin: 0 0 var(--sl-space-5);
}

body.sl-design-system.sl-singular-layout .entry-content > :where(ul, ol) {
	margin: 0 0 var(--sl-space-5);
	padding-left: 1.4em;
}

body.sl-design-system.sl-singular-layout .entry-content > :where(ul, ol) li {
	margin: var(--sl-space-2) 0;
	padding-left: var(--sl-space-1);
}

body.sl-design-system.sl-singular-layout .entry-content > ul li::marker {
	color: var(--sl-color-brand);
}

body.sl-design-system.sl-singular-layout .entry-content > ol li::marker {
	color: var(--sl-color-brand);
	font-weight: 700;
}

body.sl-design-system.sl-singular-layout .entry-content > h2,
body.sl-design-system.sl-singular-layout .entry-content > h3,
body.sl-design-system.sl-singular-layout .entry-content > h4,
body.sl-design-system.sl-singular-layout .entry-content > h5,
body.sl-design-system.sl-singular-layout .entry-content > h6 {
	color: var(--sl-color-text-primary);
	font-family: var(--sl-font-sans);
	font-weight: 700;
	line-height: 1.45;
	background: transparent !important;
}

body.sl-design-system.sl-singular-layout .entry-content > h2 {
	margin: var(--sl-space-8) 0 var(--sl-space-5);
	padding: var(--sl-space-2) 0 var(--sl-space-2) var(--sl-space-4);
	border: 0 !important;
	border-left: 3px solid var(--sl-color-brand) !important;
	border-radius: 0;
	font-size: clamp(1.4rem, 2.8vw, 1.8rem);
	letter-spacing: -0.01em;
}

body.sl-design-system.sl-singular-layout .entry-content > h3 {
	margin: var(--sl-space-7) 0 var(--sl-space-4);
	padding: 0 0 var(--sl-space-3);
	border: 0 !important;
	border-bottom: var(--sl-border-subtle) !important;
	font-size: clamp(1.2rem, 2.3vw, 1.45rem);
}

body.sl-design-system.sl-singular-layout .entry-content > h4 {
	margin: var(--sl-space-6) 0 var(--sl-space-3);
	padding: 0;
	border: 0 !important;
	font-size: var(--sl-font-size-lg);
}

body.sl-design-system.sl-singular-layout .entry-content > h5,
body.sl-design-system.sl-singular-layout .entry-content > h6 {
	margin: var(--sl-space-5) 0 var(--sl-space-3);
	padding: 0;
	border: 0 !important;
	font-size: var(--sl-font-size-md);
}

body.sl-design-system.sl-singular-layout .entry-content > h5 {
	color: var(--sl-color-text-secondary);
}

body.sl-design-system.sl-singular-layout .entry-content > h6 {
	color: var(--sl-color-text-muted);
	font-size: var(--sl-font-size-sm);
	letter-spacing: var(--sl-letter-spacing-label);
}

body.sl-design-system.sl-singular-layout .entry-content > :where(h2, h3, h4, h5, h6):first-child {
	margin-top: 0;
}

body.sl-design-system.sl-singular-layout .entry-content > :where(figure, .wp-block-image, .wp-block-gallery) {
	margin-top: var(--sl-space-6);
	margin-bottom: var(--sl-space-6);
}

body.sl-design-system.sl-singular-layout .entry-content :where(.wp-block-image img, .wp-block-gallery img) {
	border-radius: var(--sl-radius-md);
}

body.sl-design-system.sl-singular-layout .entry-content figcaption {
	margin-top: var(--sl-space-2);
	color: var(--sl-color-text-muted);
	font-size: var(--sl-font-size-xs);
	line-height: 1.6;
	text-align: center;
}

body.sl-design-system.sl-singular-layout .entry-content > :where(blockquote, .wp-block-quote) {
	margin: var(--sl-space-6) 0;
	padding: var(--sl-space-5) var(--sl-space-5) var(--sl-space-5) var(--sl-space-6);
	border: 0;
	border-left: 3px solid var(--sl-color-action);
	border-radius: 0 var(--sl-radius-md) var(--sl-radius-md) 0;
	color: var(--sl-color-text-secondary);
	background: var(--sl-color-surface);
}

body.sl-design-system.sl-singular-layout .entry-content > :where(blockquote, .wp-block-quote)::before,
body.sl-design-system.sl-singular-layout .entry-content > :where(blockquote, .wp-block-quote)::after {
	display: none;
}

body.sl-design-system.sl-singular-layout .entry-content > :where(blockquote, .wp-block-quote) > :first-child {
	margin-top: 0;
}

body.sl-design-system.sl-singular-layout .entry-content > :where(blockquote, .wp-block-quote) > :last-child {
	margin-bottom: 0;
}

body.sl-design-system.sl-singular-layout .entry-content > :where(blockquote, .wp-block-quote) cite {
	display: block;
	margin-top: var(--sl-space-3);
	color: var(--sl-color-text-muted);
	font-size: var(--sl-font-size-xs);
}

body.sl-design-system.sl-singular-layout .entry-content > :where(pre, .wp-block-code) {
	margin: var(--sl-space-6) 0;
	padding: var(--sl-space-5);
	overflow-x: auto;
	border: var(--sl-border-subtle);
	border-radius: var(--sl-radius-md);
	color: var(--sl-color-text-primary);
	font-size: var(--sl-font-size-sm);
	line-height: 1.7;
	background: #0d0d0d;
}

body.sl-design-system.sl-singular-layout .entry-content :not(pre) > code {
	padding: 0.15em 0.4em;
	border: var(--sl-border-subtle);
	border-radius: 4px;
	color: var(--sl-color-brand);
	font-size: 0.9em;
	background: var(--sl-color-bg-secondary);
}

body.sl-design-system.sl-singular-layout .entry-content > :where(.wp-block-separator, hr) {
	margin: var(--sl-space-8) 0;
	border: 0;
	border-top: var(--sl-border-subtle);
	color: transparent;
	background: transparent;
}

/* Tables remain horizontally usable on narrow screens. */
body.sl-design-system.sl-singular-layout .entry-content > table,
body.sl-design-system.sl-singular-layout .entry-content .wp-block-table table {
	margin: 0;
	border-collapse: collapse;
	color: var(--sl-color-text-primary);
	font-size: var(--sl-font-size-sm);
	background: var(--sl-color-bg-secondary);
}

body.sl-design-system.sl-singular-layout .entry-content .wp-block-table,
body.sl-design-system.sl-singular-layout .entry-content > .scrollable-table {
	margin: var(--sl-space-6) 0;
	overflow-x: auto;
	border: var(--sl-border-subtle);
	border-radius: var(--sl-radius-md);
	background: var(--sl-color-bg-secondary);
}

body.sl-design-system.sl-singular-layout .entry-content :where(table th, table td) {
	padding: var(--sl-space-3) var(--sl-space-4);
	border-color: var(--sl-color-border) !important;
	vertical-align: top;
}

body.sl-design-system.sl-singular-layout .entry-content table th {
	color: var(--sl-color-text-primary);
	font-weight: 700;
	background: var(--sl-color-surface) !important;
}

body.sl-design-system.sl-singular-layout .entry-content table tr:nth-of-type(2n + 1) {
	background: rgb(255 255 255 / 2%);
}

body.sl-design-system.sl-singular-layout .entry-content .scrollable-table.stfc-sticky table tr > *:first-child {
	color: var(--sl-color-text-primary);
	background: var(--sl-color-surface) !important;
}

/* Table of contents. */
body.sl-design-system.sl-singular-layout .entry-content .toc {
	display: block;
	width: 100%;
	margin: var(--sl-space-6) 0 var(--sl-space-7);
	padding: var(--sl-space-5);
	border: var(--sl-border-subtle);
	border-radius: var(--sl-radius-md);
	color: var(--sl-color-text-secondary);
	font-size: var(--sl-font-size-sm);
	background: var(--sl-color-bg-secondary);
}

body.sl-design-system.sl-singular-layout .entry-content .toc-title {
	padding: 0 0 var(--sl-space-3);
	color: var(--sl-color-text-primary);
	font-family: var(--sl-font-display);
	font-size: var(--sl-font-size-sm);
	font-weight: 600;
	letter-spacing: var(--sl-letter-spacing-label);
	text-align: left;
}

body.sl-design-system.sl-singular-layout .entry-content .toc-list {
	margin: 0;
	padding-left: 1.25em;
}

body.sl-design-system.sl-singular-layout .entry-content .toc li {
	margin: var(--sl-space-2) 0;
}

body.sl-design-system.sl-singular-layout .entry-content .toc a {
	color: var(--sl-color-text-secondary);
	text-decoration: none;
}

body.sl-design-system.sl-singular-layout .entry-content .toc a:hover {
	color: var(--sl-color-brand);
	text-decoration: none;
}

/* Gutenberg buttons and Cocoon CTA. */
body.sl-design-system.sl-singular-layout .entry-content .wp-block-button__link,
body.sl-design-system.sl-singular-layout .entry-content .cta-button a {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	padding: var(--sl-space-3) var(--sl-space-5);
	border: 1px solid transparent;
	border-radius: var(--sl-radius-md);
	color: var(--sl-color-on-brand);
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	background: var(--sl-color-brand);
	box-shadow: none;
	transition: background-color var(--sl-motion-fast) var(--sl-ease-standard), transform var(--sl-motion-fast) var(--sl-ease-standard);
}

body.sl-design-system.sl-singular-layout .entry-content .wp-block-button__link:hover,
body.sl-design-system.sl-singular-layout .entry-content .cta-button a:hover {
	color: var(--sl-color-on-brand);
	background: #d9bc15;
	transform: translateY(-1px);
}

body.sl-design-system.sl-singular-layout .entry-content .cta-box {
	margin: var(--sl-space-7) 0;
	padding: var(--sl-space-6);
	border: var(--sl-border-subtle);
	border-radius: var(--sl-radius-lg);
	color: var(--sl-color-text-primary);
	background: var(--sl-color-surface);
}

/* Native and embedded link cards. */
body.sl-design-system.sl-singular-layout .entry-content .blogcard-wrap {
	width: 100%;
	margin: var(--sl-space-6) 0;
	overflow: hidden;
	border: var(--sl-border-subtle);
	border-radius: var(--sl-radius-md);
	background: var(--sl-color-surface);
	transition: border-color var(--sl-motion-fast) var(--sl-ease-standard), transform var(--sl-motion-fast) var(--sl-ease-standard), box-shadow var(--sl-motion-fast) var(--sl-ease-standard);
}

body.sl-design-system.sl-singular-layout .entry-content .blogcard-wrap:hover {
	border-color: rgb(240 208 23 / 45%);
	box-shadow: var(--sl-shadow-card);
	transform: translateY(-2px);
}

body.sl-design-system.sl-singular-layout .entry-content .blogcard {
	padding: var(--sl-space-4);
	border: 0;
	color: var(--sl-color-text-secondary);
	background: transparent;
}

body.sl-design-system.sl-singular-layout .entry-content .blogcard-title {
	color: var(--sl-color-text-primary);
	line-height: 1.5;
}

body.sl-design-system.sl-singular-layout .entry-content .blogcard-snippet,
body.sl-design-system.sl-singular-layout .entry-content .blogcard-footer {
	color: var(--sl-color-text-muted);
}

body.sl-design-system.sl-singular-layout .entry-content .blogcard-thumbnail img {
	border-radius: var(--sl-radius-sm);
}

/* Article footer, taxonomy, sharing, and navigation. */
body.sl-design-system.sl-singular-layout .article-footer {
	margin-top: var(--sl-space-8);
	padding-top: var(--sl-space-6);
	border-top: var(--sl-border-subtle);
}

body.sl-design-system.sl-singular-layout .entry-categories-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sl-space-2);
	margin-bottom: var(--sl-space-6);
}

body.sl-design-system.sl-singular-layout .entry-categories-tags > div {
	margin: 0;
}

body.sl-design-system.sl-singular-layout :where(.cat-link, .tag-link, .comment-reply-link) {
	display: inline-flex;
	min-height: 30px;
	align-items: center;
	margin: 0 var(--sl-space-1) var(--sl-space-1) 0;
	padding: var(--sl-space-1) var(--sl-space-3);
	border: var(--sl-border-badge);
	border-radius: var(--sl-radius-md);
	color: var(--sl-color-text-secondary);
	font-size: var(--sl-font-size-xs);
	line-height: 1.4;
	text-decoration: none;
	background: var(--sl-color-bg-secondary);
}

body.sl-design-system.sl-singular-layout :where(.cat-link, .tag-link, .comment-reply-link):hover {
	border-color: rgb(240 208 23 / 45%);
	color: var(--sl-color-brand);
	background: var(--sl-color-surface-hover);
	opacity: 1;
}

body.sl-design-system.sl-singular-layout :where(.related-entry-heading, .comment-title) {
	margin: var(--sl-space-8) 0 var(--sl-space-5);
	padding: 0 0 var(--sl-space-3);
	border-bottom: var(--sl-border-subtle);
	color: var(--sl-color-text-primary);
	font-size: var(--sl-font-size-xl);
	line-height: var(--sl-line-height-tight);
}

body.sl-design-system.sl-singular-layout .author-box {
	margin: var(--sl-space-7) 0;
	padding: var(--sl-space-5);
	border: var(--sl-border-subtle);
	border-radius: var(--sl-radius-md);
	color: var(--sl-color-text-secondary);
	background: var(--sl-color-surface);
}

body.sl-design-system.sl-singular-layout .author-box .author-name {
	color: var(--sl-color-text-primary);
}

body.sl-design-system.sl-singular-layout .pager-post-navi {
	gap: var(--sl-space-3);
	margin: var(--sl-space-8) 0 0;
}

body.sl-design-system.sl-singular-layout .pager-post-navi a {
	min-height: 72px;
	padding: var(--sl-space-4);
	border: var(--sl-border-subtle) !important;
	border-radius: var(--sl-radius-md);
	color: var(--sl-color-text-secondary);
	background: var(--sl-color-surface);
	transition: border-color var(--sl-motion-fast) var(--sl-ease-standard), color var(--sl-motion-fast) var(--sl-ease-standard), transform var(--sl-motion-fast) var(--sl-ease-standard);
}

body.sl-design-system.sl-singular-layout .pager-post-navi a:hover {
	border-color: rgb(240 208 23 / 45%) !important;
	color: var(--sl-color-brand);
	transform: translateY(-1px);
}

body.sl-design-system.sl-singular-layout .pager-post-navi a .iconfont {
	color: var(--sl-color-text-muted);
}

@media screen and (max-width: 834px) {
	body.sl-design-system.sl-singular-layout .article-header .entry-title {
		font-size: clamp(1.55rem, 7vw, 2rem);
		line-height: 1.4;
	}

	body.sl-design-system.sl-singular-layout .article-header {
		margin-bottom: var(--sl-space-5);
	}

	body.sl-design-system.sl-singular-layout .entry-content {
		line-height: 1.85;
	}

	body.sl-design-system.sl-singular-layout .entry-content > h2 {
		margin-top: var(--sl-space-7);
		padding-left: var(--sl-space-3);
	}

	body.sl-design-system.sl-singular-layout .entry-content > h3 {
		margin-top: var(--sl-space-6);
	}

	body.sl-design-system.sl-singular-layout .entry-content > :where(blockquote, .wp-block-quote),
	body.sl-design-system.sl-singular-layout .entry-content .toc,
	body.sl-design-system.sl-singular-layout .entry-content .cta-box {
		padding: var(--sl-space-4);
	}

	body.sl-design-system.sl-singular-layout .entry-content :where(table th, table td) {
		padding: var(--sl-space-2) var(--sl-space-3);
	}

	body.sl-design-system.sl-singular-layout .blogcard-thumbnail {
		width: 112px;
	}

	body.sl-design-system.sl-singular-layout .blogcard-content {
		min-height: 76px;
		margin-left: 124px;
	}
}

@media screen and (max-width: 480px) {
	body.sl-design-system.sl-singular-layout .article-header .date-tags {
		gap: var(--sl-space-1) var(--sl-space-3);
	}

	body.sl-design-system.sl-singular-layout .entry-content > :where(figure, .wp-block-image, .wp-block-gallery),
	body.sl-design-system.sl-singular-layout .entry-content > :where(blockquote, .wp-block-quote),
	body.sl-design-system.sl-singular-layout .entry-content .toc,
	body.sl-design-system.sl-singular-layout .entry-content .blogcard-wrap,
	body.sl-design-system.sl-singular-layout .entry-content .cta-box {
		margin-block: var(--sl-space-5);
	}

	body.sl-design-system.sl-singular-layout .blogcard-thumbnail {
		float: none;
		width: 100%;
		margin: 0 0 var(--sl-space-3);
	}

	body.sl-design-system.sl-singular-layout .blogcard-content {
		min-height: 0;
		margin: 0;
	}

	body.sl-design-system.sl-singular-layout .pager-post-navi.post-navi-square {
		flex-direction: column;
	}

	body.sl-design-system.sl-singular-layout .pager-post-navi.post-navi-square a {
		width: 100%;
	}
}