/* ==========================================================================
   STM Blog — editorial layer
   Built on the live site's tokens:
     ink #232323 · ink-2 #2e2e2e · ink-3 #323232
     cream #fff · muted #ACACAC · accent (teal-slate) #7E9B9F
   ========================================================================== */

:root {
	--stm-ink: #232323;
	--stm-ink-2: #2e2e2e;
	--stm-ink-3: #323232;
	--stm-cream: #ffffff;
	--stm-muted: #acacac;
	--stm-accent: #7E9B9F;        /* the "gold" token — actually teal-slate */
	--stm-accent-light: #658084;
	--stm-line: rgba(255, 255, 255, 0.08);
	--stm-font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--stm-font-display: "Cormorant Garamond", Georgia, serif;
}

html { scroll-behavior: smooth; }

body.stm-blog,
body {
	background-color: var(--stm-ink);
	color: var(--stm-cream);
	font-family: var(--stm-font-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

[x-cloak] { display: none !important; }

.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}
.sr-only:focus {
	position: fixed; top: 1rem; left: 1rem;
	width: auto; height: auto;
	padding: 0.75rem 1.25rem; margin: 0; clip: auto;
	background: var(--stm-accent); color: var(--stm-ink);
	z-index: 100; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
}

/* The fixed nav is ~72px tall; push content below it. */
.site-main { padding-top: 4.5rem; }

/* --------------------------------------------------------------------------
   Blog hero / page header
   -------------------------------------------------------------------------- */
.stm-pagehead {
	border-bottom: 1px solid var(--stm-line);
	background:
		radial-gradient(120% 140% at 80% -20%, rgba(126,155,159,0.10), transparent 60%),
		var(--stm-ink);
}
.stm-pagehead__eyebrow {
	font-size: 0.7rem;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--stm-accent);
}
.stm-pagehead__title {
	font-family: var(--stm-font-display);
	font-weight: 300;
	line-height: 1.04;
	letter-spacing: -0.01em;
	color: var(--stm-cream);
	font-size: clamp(2.75rem, 6vw, 4.75rem);
}
.stm-pagehead__title em { color: var(--stm-accent); font-style: italic; }
.stm-pagehead__lead {
	color: var(--stm-muted);
	font-size: 1.05rem;
	line-height: 1.75;
	max-width: 42rem;
}

/* --------------------------------------------------------------------------
   Post cards
   -------------------------------------------------------------------------- */
/* Card grid — own CSS so it never depends on Tailwind grid-cols-3 (absent
   from the prebuilt build). 1 col → 2 (sm) → 3 (lg); capped at 2 with sidebar. */
.stm-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}
@media (min-width: 640px) {
	.stm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.stm-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.stm-cards.is-with-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.stm-card {
	display: flex;
	flex-direction: column;
	background: var(--stm-ink-2);
	border: 1px solid var(--stm-line);
	overflow: hidden;
	transition: border-color .4s cubic-bezier(.25,1,.5,1), transform .4s cubic-bezier(.25,1,.5,1);
}
.stm-card:hover { border-color: rgba(126,155,159,0.55); transform: translateY(-4px); }
.stm-card__media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--stm-ink-3); }
.stm-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.25,1,.5,1); }
.stm-card:hover .stm-card__media img { transform: scale(1.06); }
.stm-card__placeholder {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	color: rgba(126,155,159,0.4);
	font-family: var(--stm-font-display); font-size: 2.5rem; font-style: italic;
}
.stm-card__cat {
	position: absolute; top: 1rem; left: 1rem;
	background: rgba(35,35,35,0.85); color: var(--stm-accent);
	font-size: 0.625rem; letter-spacing: 0.22em; text-transform: uppercase;
	padding: 0.4rem 0.75rem; backdrop-filter: blur(4px);
}
.stm-card__body { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.75rem; flex: 1; }
.stm-card__meta { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stm-muted); }
.stm-card__title {
	font-family: var(--stm-font-display);
	font-weight: 400; line-height: 1.15;
	font-size: 1.65rem; color: var(--stm-cream);
}
.stm-card__title a { color: inherit; text-decoration: none; transition: color .3s; }
.stm-card__title a:hover { color: var(--stm-accent); }
.stm-card__excerpt { color: var(--stm-muted); font-size: 0.92rem; line-height: 1.7; flex: 1; }
.stm-card__more {
	margin-top: 0.5rem; align-self: flex-start;
	font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--stm-accent);
	display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none;
}
.stm-card__more:hover { color: var(--stm-cream); }

/* --------------------------------------------------------------------------
   Single article prose
   -------------------------------------------------------------------------- */
.stm-article__title {
	font-family: var(--stm-font-display);
	font-weight: 300; line-height: 1.05; letter-spacing: -0.01em;
	color: var(--stm-cream);
	font-size: clamp(2.5rem, 5.5vw, 4rem);
}
.stm-article__hero { aspect-ratio: 16 / 9; overflow: hidden; background: var(--stm-ink-3); border: 1px solid var(--stm-line); }
.stm-article__hero img { width: 100%; height: 100%; object-fit: cover; }

/* Single-post byline meta (author · date · reading time).
   Self-contained — does NOT rely on Tailwind gap-x utilities, which aren't
   in the static site's prebuilt CSS. */
.stm-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 1.25rem;
	color: var(--stm-muted);
	font-size: 0.9rem;
	letter-spacing: 0.01em;
}
.stm-article__meta > * { display: inline-flex; align-items: center; }
.stm-article__meta > * + *::before {
	content: "·";
	margin-right: 1.25rem;
	color: var(--stm-accent);
}

.stm-prose { color: #e7e7e3; font-size: 1.075rem; line-height: 1.85; }
.stm-prose > * + * { margin-top: 1.4em; }
.stm-prose p { color: #d8d8d3; }
.stm-prose h2, .stm-prose h3, .stm-prose h4 {
	font-family: var(--stm-font-display);
	color: var(--stm-cream); font-weight: 400; line-height: 1.2;
	margin-top: 2em;
}
.stm-prose h2 { font-size: 2rem; }
.stm-prose h3 { font-size: 1.55rem; }
.stm-prose h4 { font-size: 1.25rem; letter-spacing: 0.01em; }
.stm-prose a { color: var(--stm-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.stm-prose a:hover { color: var(--stm-accent-light); }
.stm-prose strong { color: var(--stm-cream); }
.stm-prose blockquote {
	border-left: 2px solid var(--stm-accent);
	padding: 0.25rem 0 0.25rem 1.5rem;
	font-family: var(--stm-font-display); font-style: italic;
	font-size: 1.5rem; line-height: 1.4; color: var(--stm-cream);
}
.stm-prose ul, .stm-prose ol { padding-left: 1.4rem; color: #d8d8d3; }
.stm-prose li { margin-top: 0.5em; }
.stm-prose ul li::marker { color: var(--stm-accent); }
.stm-prose ol li::marker { color: var(--stm-accent); }
.stm-prose img, .stm-prose figure { border-radius: 0; margin-top: 2em; margin-bottom: 2em; }
.stm-prose figcaption { color: var(--stm-muted); font-size: 0.85rem; text-align: center; margin-top: 0.75rem; }
.stm-prose code {
	background: var(--stm-ink-3); padding: 0.15em 0.4em; font-size: 0.9em;
	color: var(--stm-accent); border-radius: 2px;
}
.stm-prose pre {
	background: var(--stm-ink-2); border: 1px solid var(--stm-line);
	padding: 1.25rem; overflow-x: auto; font-size: 0.9rem;
}
.stm-prose pre code { background: none; color: #e7e7e3; padding: 0; }
.stm-prose hr { border: 0; border-top: 1px solid var(--stm-line); margin: 2.5em 0; }

/* Tags / chips */
.stm-chip {
	display: inline-block;
	border: 1px solid var(--stm-line);
	color: var(--stm-muted);
	font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
	padding: 0.4rem 0.85rem; text-decoration: none;
	transition: border-color .3s, color .3s;
}
.stm-chip:hover { border-color: var(--stm-accent); color: var(--stm-accent); }

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
.stm-pagination { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.stm-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 2.75rem; height: 2.75rem; padding: 0 0.75rem;
	border: 1px solid var(--stm-line); color: var(--stm-muted);
	font-size: 0.8rem; letter-spacing: 0.1em; text-decoration: none;
	transition: border-color .3s, color .3s, background .3s;
}
.stm-pagination .page-numbers:hover { border-color: var(--stm-accent); color: var(--stm-cream); }
.stm-pagination .page-numbers.current { background: var(--stm-accent); border-color: var(--stm-accent); color: var(--stm-ink); }
.stm-pagination .page-numbers.dots { border-color: transparent; }

/* --------------------------------------------------------------------------
   Comments
   -------------------------------------------------------------------------- */
.stm-comments .comment-list { list-style: none; margin: 0; padding: 0; }
.stm-comments .comment-list li { padding: 1.5rem 0; border-bottom: 1px solid var(--stm-line); }
.stm-comments .comment-author { color: var(--stm-cream); font-weight: 500; }
.stm-comments .comment-metadata { color: var(--stm-muted); font-size: 0.8rem; }
.stm-comments .comment-content { color: #d8d8d3; margin-top: 0.5rem; line-height: 1.7; }
.stm-comments input[type="text"],
.stm-comments input[type="email"],
.stm-comments input[type="url"],
.stm-comments textarea {
	width: 100%; background: var(--stm-ink-2); border: 1px solid var(--stm-line);
	color: var(--stm-cream); padding: 0.85rem 1rem; font-family: var(--stm-font-body);
}
.stm-comments input:focus, .stm-comments textarea:focus { outline: none; border-color: var(--stm-accent); }
.stm-comments .form-submit input,
.stm-btn {
	display: inline-block; cursor: pointer;
	background: var(--stm-accent); color: var(--stm-ink); border: 0;
	padding: 0.85rem 1.75rem; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
	font-weight: 600; transition: background .3s;
}
.stm-comments .form-submit input:hover, .stm-btn:hover { background: var(--stm-accent-light); }

/* --------------------------------------------------------------------------
   Layout: content + sidebar
   -------------------------------------------------------------------------- */
.stm-content-full { width: 100%; }
.stm-with-sidebar { display: grid; grid-template-columns: 1fr; gap: 3rem; }
.stm-with-sidebar__main { min-width: 0; }
@media (min-width: 1024px) {
	.stm-with-sidebar { grid-template-columns: minmax(0, 1fr) 300px; gap: 3.5rem; }
}

/* --------------------------------------------------------------------------
   Sidebar widgets
   -------------------------------------------------------------------------- */
.stm-sidebar { display: flex; flex-direction: column; gap: 2.5rem; }
@media (min-width: 1024px) {
	.stm-sidebar { position: sticky; top: 6rem; align-self: start; }
}
.stm-widget { border-top: 1px solid var(--stm-line); padding-top: 1.5rem; }
.stm-widget:first-child { border-top: 0; padding-top: 0; }
.stm-widget__title {
	font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase;
	color: var(--stm-accent); margin: 0 0 1.25rem;
}
.stm-widget__list { list-style: none; margin: 0; padding: 0; }
.stm-widget ul { list-style: none; margin: 0; padding: 0; }
.stm-widget li { padding: 0.5rem 0; border-bottom: 1px solid var(--stm-line); }
.stm-widget li:last-child { border-bottom: 0; }
.stm-widget a { color: var(--stm-muted); text-decoration: none; transition: color .3s; }
.stm-widget a:hover { color: var(--stm-cream); }
.stm-widget li .children { padding-left: 1rem; margin-top: 0.5rem; }
/* category counts rendered by wp_list_categories */
.stm-widget__list li { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.stm-widget__recent li { display: block; }
.stm-widget__recent a {
	display: block; color: var(--stm-cream);
	font-family: var(--stm-font-display); font-size: 1.15rem; line-height: 1.25;
}
.stm-widget__recent a:hover { color: var(--stm-accent); }
.stm-widget__date { display: block; margin-top: 0.25rem; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stm-muted); }
.stm-widget .stm-search { max-width: none; }

/* --------------------------------------------------------------------------
   Category filter bar (pills)
   -------------------------------------------------------------------------- */
.stm-filterbar { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.stm-filterbar__pill {
	display: inline-flex; align-items: center; gap: 0.5rem;
	border: 1px solid var(--stm-line); color: var(--stm-muted);
	font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
	padding: 0.6rem 1rem; text-decoration: none;
	transition: border-color .3s, color .3s, background .3s;
}
.stm-filterbar__pill:hover { border-color: var(--stm-accent); color: var(--stm-cream); }
.stm-filterbar__pill.is-active { background: var(--stm-accent); border-color: var(--stm-accent); color: var(--stm-ink); }
.stm-filterbar__count { font-size: 0.62rem; opacity: 0.65; }
.stm-filterbar__pill.is-active .stm-filterbar__count { opacity: 0.85; }

/* Search form */
.stm-search { display: flex; max-width: 24rem; }
.stm-search input[type="search"] {
	flex: 1; background: var(--stm-ink-2); border: 1px solid var(--stm-line);
	color: var(--stm-cream); padding: 0.75rem 1rem; font-family: var(--stm-font-body);
}
.stm-search input[type="search"]:focus { outline: none; border-color: var(--stm-accent); }
.stm-search button {
	background: var(--stm-accent); color: var(--stm-ink); border: 0; cursor: pointer;
	padding: 0 1.25rem; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
}