/**
 * Sticmac 2026 — Single blog post styles.
 * Relies on the design tokens defined in home.css (--sm-*).
 */

.sm-article-page .back {
	padding: var(--sm-space-30) 0 var(--sm-space-20);
	font-family: var(--sm-font-mono);
	font-size: 13px;
	color: var(--sm-fg-2);
}
.sm-article-page .back a {
	color: var(--sm-fg-2);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: var(--sm-transition-default);
}
.sm-article-page .back a:hover { color: var(--sm-accent-1); }
.sm-article-page .back a .arrow { transition: transform .2s ease; }
.sm-article-page .back a:hover .arrow { transform: translateX(-3px); }

.sm-article-header {
	padding: var(--sm-space-30) 0 var(--sm-space-50);
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-30);
}
.sm-article-header .meta-row {
	display: flex;
	gap: 14px;
	align-items: center;
	font-family: var(--sm-font-mono);
	font-size: 12px;
	color: var(--sm-fg-2);
	flex-wrap: wrap;
}
.sm-article-header .meta-row .cat,
.sm-article-header .meta-row .cat a {
	color: var(--sm-accent-1);
	text-transform: uppercase;
	letter-spacing: var(--sm-ls-caps);
	font-weight: 500;
	text-decoration: none;
}
.sm-article-header .meta-row .cat a:hover { text-decoration: underline; }
.sm-article-header .meta-row .sep { color: var(--sm-border); }
.sm-article-header h1 {
	font-size: clamp(36px, 4.6vw, 60px);
	line-height: 1.04;
	letter-spacing: -0.6px;
	font-weight: 400;
	margin: 0;
	text-wrap: pretty;
}
.sm-article-header h1 em { font-style: normal; color: var(--sm-accent-1); }
.sm-article-header .standfirst {
	font-size: 19px;
	line-height: 1.5;
	font-weight: 300;
	color: var(--sm-fg-2);
	margin: 0;
	text-wrap: pretty;
}
.sm-article-header .byline {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: var(--sm-space-20);
	font-size: 14px;
	color: var(--sm-fg-2);
}
.sm-article-header .byline .av {
	width: 36px;
	height: 36px;
	border-radius: var(--sm-radius-round);
	flex-shrink: 0;
	object-fit: cover;
	display: block;
}
.sm-article-header .byline .av.is-placeholder {
	background: var(--sm-placeholder-bg);
}
.sm-article-header .byline .name { color: var(--sm-fg-1); font-weight: 400; }

.sm-article-hero {
	aspect-ratio: 16 / 8;
	margin: 0 0 var(--sm-space-50);
	position: relative;
	overflow: hidden;
	background: var(--sm-dark-bg);
}
.sm-article-hero .fill {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}
.sm-article-hero .fill.is-gradient {
	background: var(--sm-placeholder-bg);
}
.sm-article-hero-cap {
	font-family: var(--sm-font-mono);
	font-size: 12px;
	color: var(--sm-fg-2);
	line-height: 1.4;
	margin: -32px 0 var(--sm-space-50);
}

.sm-article-content {
	font-size: var(--sm-text-article);
	line-height: 1.75;
	color: var(--sm-fg-1);
}
.sm-article-content p {
	margin: 0 0 var(--sm-space-40);
	text-wrap: pretty;
}
.sm-article-content > p:first-of-type::first-letter,
.sm-article-content > .wp-block-paragraph:first-of-type::first-letter {
	font-size: 4.4em;
	line-height: 0.9;
	font-weight: 400;
	float: left;
	padding: 4px 12px 0 0;
	color: var(--sm-accent-1);
}
.sm-article-content h2 {
	font-size: 34px;
	font-weight: 400;
	letter-spacing: -0.2px;
	margin: var(--sm-space-50) 0 var(--sm-space-20);
	line-height: 1.2;
	text-wrap: pretty;
}
.sm-article-content h3 {
	font-size: 22px;
	font-weight: 500;
	margin: var(--sm-space-40) 0 var(--sm-space-20);
	line-height: 1.3;
}
.sm-article-content a {
	color: var(--sm-fg-1);
	text-decoration: underline;
	text-decoration-color: var(--sm-accent-1);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: var(--sm-transition-default);
}
.sm-article-content a:hover {
	color: var(--sm-accent-1);
	text-decoration-thickness: 2px;
}
.sm-article-content strong { font-weight: 600; }
.sm-article-content em { font-style: italic; }

/* Blockquote — accent-bordered editorial quote */
.sm-article-content blockquote,
.sm-article-content .wp-block-quote {
	margin: var(--sm-space-50) 0;
	padding: 0 0 0 var(--sm-space-40);
	border-left: 3px solid var(--sm-accent-1);
	font-size: 26px;
	font-weight: 300;
	line-height: 1.45;
	color: var(--sm-fg-1);
	font-style: italic;
	text-wrap: pretty;
}
.sm-article-content blockquote::first-letter,
.sm-article-content .wp-block-quote::first-letter { all: unset; }
.sm-article-content blockquote p:last-child,
.sm-article-content .wp-block-quote p:last-child { margin-bottom: 0; }

/* Pullquote — centred, double-rule */
.sm-article-content .wp-block-pullquote {
	margin: var(--sm-space-60) 0;
	padding: var(--sm-space-40) 0;
	border-top: 1px solid var(--sm-border);
	border-bottom: 1px solid var(--sm-border);
	font-size: 30px;
	font-weight: 300;
	line-height: 1.3;
	letter-spacing: -0.2px;
	text-align: center;
	text-wrap: balance;
	font-style: normal;
	background: none;
	color: var(--sm-fg-1);
}
.sm-article-content .wp-block-pullquote blockquote {
	border: 0;
	padding: 0;
	margin: 0;
	font-size: inherit;
	font-style: normal;
}
.sm-article-content .wp-block-pullquote::first-letter,
.sm-article-content .wp-block-pullquote blockquote::first-letter { all: unset; }

/* Lists — arrow / numeric counters */
.sm-article-content ul,
.sm-article-content ol {
	padding: 0;
	margin: 0 0 var(--sm-space-30);
	list-style: none;
}
.sm-article-content ul li,
.sm-article-content ol li {
	padding-left: 24px;
	position: relative;
	margin-bottom: 10px;
	line-height: 1.6;
}
.sm-article-content ul li::before {
	content: "→";
	position: absolute;
	left: 0;
	color: var(--sm-accent-1);
	font-family: var(--sm-font-mono);
}
.sm-article-content ol { counter-reset: item; }
.sm-article-content ol li::before {
	counter-increment: item;
	content: counter(item, decimal-leading-zero) ".";
	position: absolute;
	left: 0;
	color: var(--sm-accent-1);
	font-family: var(--sm-font-mono);
	font-size: 0.85em;
}

/* Figures & images */
.sm-article-content figure,
.sm-article-content .wp-block-image { margin: var(--sm-space-50) 0; }
.sm-article-content figure img,
.sm-article-content .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}
.sm-article-content figcaption {
	font-family: var(--sm-font-mono);
	font-size: 12px;
	color: var(--sm-fg-2);
	line-height: 1.4;
	margin-top: 12px;
}

/* Code */
.sm-article-content code {
	font-family: var(--sm-font-mono);
	font-size: 0.92em;
	background: var(--sm-accent-5);
	padding: 1px 6px;
	border-radius: var(--sm-radius-xs);
}
.sm-article-content pre,
.sm-article-content .wp-block-code {
	background: var(--sm-dark-bg);
	color: var(--sm-dark-fg);
	padding: var(--sm-space-30);
	overflow-x: auto;
	font-family: var(--sm-font-mono);
	font-size: 13.5px;
	line-height: 1.6;
	border-radius: var(--sm-radius-xs);
	margin: var(--sm-space-30) 0;
}
.sm-article-content pre code,
.sm-article-content .wp-block-code code {
	background: none;
	padding: 0;
	font-size: inherit;
	color: inherit;
}

.sm-article-content hr,
.sm-article-content .wp-block-separator {
	border: 0;
	border-top: 1px solid var(--sm-border);
	margin: var(--sm-space-50) 0;
}

.sm-article-page .end-row {
	margin: var(--sm-space-50) 0 0;
	padding: var(--sm-space-30) 0;
	border-top: 1px solid var(--sm-border);
	border-bottom: 1px solid var(--sm-border);
	display: flex;
	align-items: center;
	gap: var(--sm-space-30);
	flex-wrap: wrap;
	font-family: var(--sm-font-mono);
	font-size: 13px;
}
.sm-article-page .end-row .label {
	color: var(--sm-fg-2);
	text-transform: uppercase;
	letter-spacing: var(--sm-ls-caps);
	font-size: 11px;
	font-weight: 500;
	margin-right: 4px;
}
.sm-article-page .end-row .tag {
	border: 1px solid var(--sm-border);
	padding: 5px 12px;
	border-radius: var(--sm-radius-round);
	color: var(--sm-fg-1);
	text-decoration: none;
	transition: var(--sm-transition-default);
}
.sm-article-page .end-row .tag:hover { border-color: var(--sm-fg-1); }
.sm-article-page .end-row .share {
	margin-left: auto;
	display: flex;
	gap: 8px;
	align-items: center;
}
.sm-article-page .end-row .share a {
	color: var(--sm-fg-2);
	text-decoration: none;
	padding: 5px 10px;
	transition: var(--sm-transition-default);
	cursor: pointer;
}
.sm-article-page .end-row .share a:hover { color: var(--sm-accent-1); }

.sm-author-card {
	margin-top: var(--sm-space-50);
	padding: var(--sm-space-40);
	background: var(--sm-accent-5);
	display: flex;
	gap: var(--sm-space-30);
	align-items: flex-start;
}
.sm-author-card .av {
	width: 64px;
	height: 64px;
	border-radius: var(--sm-radius-round);
	flex-shrink: 0;
	object-fit: cover;
	display: block;
}
.sm-author-card .av.is-placeholder {
	background: var(--sm-placeholder-bg);
}
.sm-author-card h4 {
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: 500;
}
.sm-author-card p {
	margin: 0;
	font-size: 14px;
	color: var(--sm-fg-2);
	line-height: 1.5;
}
.sm-author-card .links {
	margin-top: 12px;
	display: flex;
	gap: 14px;
	font-family: var(--sm-font-mono);
	font-size: 12px;
	flex-wrap: wrap;
}
.sm-author-card .links a {
	color: var(--sm-fg-1);
	text-decoration: none;
	border-bottom: 1px solid var(--sm-accent-1);
	padding-bottom: 1px;
}

.sm-comments { margin-top: var(--sm-space-60); }
.sm-comments h2 {
	font-size: 28px;
	font-weight: 400;
	letter-spacing: -0.2px;
	margin: 0 0 var(--sm-space-30);
}
.sm-comments h2 .num {
	font-family: var(--sm-font-mono);
	font-size: 14px;
	color: var(--sm-fg-2);
	margin-left: 12px;
	font-weight: 400;
}
.sm-comments .thread {
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-30);
}
.sm-comments .closed-note {
	margin-top: var(--sm-space-30);
	font-family: var(--sm-font-mono);
	font-size: 13px;
	color: var(--sm-fg-2);
}

.sm-comments .cmt {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: var(--sm-space-30);
	padding: var(--sm-space-30) 0;
	border-bottom: 1px solid var(--sm-border);
}
.sm-comments .cmt.reply {
	margin-left: 60px;
	padding-left: var(--sm-space-30);
	border-left: 2px solid var(--sm-border);
}
.sm-comments .cmt .av {
	width: 44px;
	height: 44px;
	border-radius: var(--sm-radius-round);
	flex-shrink: 0;
	object-fit: cover;
	display: block;
}
.sm-comments .cmt .av.is-placeholder {
	background: var(--sm-accent-5);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--sm-font-mono);
	font-size: 13px;
	font-weight: 500;
	color: var(--sm-fg-1);
}
.sm-comments .cmt .av.is-placeholder.self {
	background: var(--sm-fg-1);
	color: var(--sm-fg-inverse);
}
/* Subtle ring on a real-image avatar when the commenter is the post
   author — keeps the visual "self" cue without overlaying the photo. */
.sm-comments .cmt img.av.self {
	box-shadow: 0 0 0 2px var(--sm-fg-1);
}
.sm-comments .cmt .body .head {
	display: flex;
	gap: 10px;
	align-items: baseline;
	margin-bottom: 8px;
	flex-wrap: wrap;
}
.sm-comments .cmt .body .name { font-weight: 500; font-size: 15px; }
.sm-comments .cmt .body .badge {
	font-family: var(--sm-font-mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: var(--sm-ls-caps);
	background: var(--sm-fg-1);
	color: var(--sm-fg-inverse);
	padding: 2px 7px;
	border-radius: var(--sm-radius-round);
}
.sm-comments .cmt .body .when {
	font-family: var(--sm-font-mono);
	font-size: 12px;
	color: var(--sm-fg-2);
}
.sm-comments .cmt .body p {
	margin: 0 0 10px;
	font-size: 15px;
	line-height: 1.55;
}
.sm-comments .cmt .body .moderation { color: var(--sm-fg-2); }
.sm-comments .cmt .body .actions {
	display: flex;
	gap: 16px;
	font-family: var(--sm-font-mono);
	font-size: 12px;
	color: var(--sm-fg-2);
}
.sm-comments .cmt .body .actions a,
.sm-comments .cmt .body .actions .comment-reply-link {
	color: var(--sm-fg-2);
	text-decoration: none;
	transition: var(--sm-transition-default);
}
.sm-comments .cmt .body .actions a:hover,
.sm-comments .cmt .body .actions .comment-reply-link:hover { color: var(--sm-accent-1); }

/* Threaded children: WP outputs <ol class="children"> inside the parent
   when nesting is enabled. Strip its default list styling so our .cmt
   structure carries the visual hierarchy on its own. */
.sm-comments .children {
	list-style: none;
	margin: var(--sm-space-30) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-30);
}

.sm-comments .cform {
	margin-top: var(--sm-space-40);
	padding: var(--sm-space-40);
	border: 1px solid var(--sm-border);
}
.sm-comments .cform h3,
.sm-comments .cform .comment-reply-title {
	font-size: 18px;
	font-weight: 500;
	margin: 0 0 var(--sm-space-20);
}
.sm-comments .cform .row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sm-space-20);
	margin-bottom: var(--sm-space-20);
}
.sm-comments .cform label {
	display: block;
	font-family: var(--sm-font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: var(--sm-ls-caps);
	color: var(--sm-fg-2);
	margin-bottom: 6px;
	font-weight: 500;
}
.sm-comments .cform input[type="text"],
.sm-comments .cform input[type="email"],
.sm-comments .cform textarea {
	width: 100%;
	font-family: var(--sm-font-sans);
	font-size: 15px;
	font-weight: 300;
	padding: 12px 14px;
	background: var(--sm-bg-1);
	color: var(--sm-fg-1);
	border: 1px solid var(--sm-border);
	border-radius: var(--sm-radius-xs);
	transition: var(--sm-transition-default);
}
.sm-comments .cform input:focus,
.sm-comments .cform textarea:focus {
	outline: none;
	border-color: var(--sm-fg-1);
}
.sm-comments .cform textarea {
	resize: vertical;
	min-height: 120px;
	line-height: 1.55;
}
.sm-comments .cform .actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: var(--sm-space-20);
	flex-wrap: wrap;
	gap: 12px;
}
.sm-comments .cform .note {
	font-family: var(--sm-font-mono);
	font-size: 11px;
	color: var(--sm-fg-2);
	max-width: 50ch;
	margin: 0;
}
/* Comment submit reuses the shared .sm-btn.sm pill (home.css); the class
   comes from comment_form()'s class_submit in inc/single-post.php. */

.sm-related-section {
	margin-top: var(--sm-space-70);
	padding-top: var(--sm-space-50);
	border-top: 1px solid var(--sm-border);
}
/* .head reuses the shared .sm-section-head.feature (home.css); the rule spacer
   and "all" link are specific to this header. */
.sm-related-section .head .rule {
	flex: 1;
	height: 1px;
	background: var(--sm-border);
}
.sm-related-section .head .all {
	font-family: var(--sm-font-mono);
	font-size: 13px;
	color: var(--sm-fg-2);
	text-decoration: none;
}
.sm-related-section .head .all:hover { color: var(--sm-accent-1); }

.sm-related {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.sm-related .rel {
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-decoration: none;
	color: inherit;
	transition: var(--sm-transition-default);
}
.sm-related .rel .frame {
	aspect-ratio: 4 / 3;
	background-size: cover;
	background-position: center;
	transition: var(--sm-transition-default);
}
.sm-related .rel .frame.is-gradient {
	background: var(--sm-placeholder-bg);
}
.sm-related .rel:hover .frame { transform: translateY(-3px); }
.sm-related .rel .meta {
	font-family: var(--sm-font-mono);
	font-size: 12px;
	color: var(--sm-fg-2);
	display: flex;
	gap: 8px;
	align-items: center;
}
.sm-related .rel .meta .cat {
	color: var(--sm-accent-1);
	text-transform: uppercase;
	letter-spacing: var(--sm-ls-caps);
	font-weight: 500;
}
.sm-related .rel .meta .sep { color: var(--sm-border); }
.sm-related .rel h3 {
	font-size: 19px;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: -0.1px;
	margin: 0;
	text-wrap: pretty;
	transition: var(--sm-transition-default);
}
.sm-related .rel:hover h3 { color: var(--sm-accent-1); }

.sm-article-pn {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--sm-border);
	border-top: 1px solid var(--sm-border);
	border-bottom: 1px solid var(--sm-border);
	margin-top: var(--sm-space-60);
}
.sm-article-pn a,
.sm-article-pn .placeholder {
	background: var(--sm-bg-1);
	padding: var(--sm-space-40) var(--sm-space-30);
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	gap: 8px;
	transition: var(--sm-transition-default);
}
.sm-article-pn a:hover { background: var(--sm-accent-5); }
.sm-article-pn .label {
	font-family: var(--sm-font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: var(--sm-ls-caps);
	color: var(--sm-fg-2);
	font-weight: 500;
}
.sm-article-pn .title {
	font-size: 20px;
	font-weight: 400;
	letter-spacing: -0.1px;
	line-height: 1.25;
	text-wrap: pretty;
}
.sm-article-pn .next { text-align: right; }

@media (max-width: 900px) {
	.sm-related { grid-template-columns: 1fr 1fr; }
	.sm-related .rel:nth-child(3) { display: none; }
}
@media (max-width: 700px) {
	.sm-article-content { font-size: 17px; line-height: 1.7; }
	.sm-article-content > p:first-of-type::first-letter,
	.sm-article-content > .wp-block-paragraph:first-of-type::first-letter { font-size: 3.2em; }
	.sm-comments .cform .row { grid-template-columns: 1fr; }
	.sm-comments .cmt.reply { margin-left: 24px; padding-left: 16px; }
	.sm-article-pn { grid-template-columns: 1fr; }
	.sm-article-pn .next { text-align: left; }
	.sm-article-page .end-row .share { margin-left: 0; width: 100%; }
	.sm-related { grid-template-columns: 1fr; }
	.sm-related .rel:nth-child(3) { display: flex; }
}