/* ===========================================================================
   vmaster — theme.css
   Custom styles that extend theme.json. Theme.json owns the design tokens;
   this file owns the page chrome (sticky header, callouts, terminal, TOC,
   reading progress) and the light/dark color scheme.
   =========================================================================== */

/* ---------- THEME TOKENS (light = default) ---------------------------------- */
:root {
	--vm-bg:        #fbfbf9;
	--vm-surface:   #ffffff;
	--vm-tint:      #f3f5f9;
	--vm-fg:        #0b0d12;
	--vm-soft:      #3a3d44;
	--vm-muted:     #6c6f78;
	--vm-rule:      #e8e9ec;
	--vm-rule-soft: #f0f1f4;
	--vm-accent:    #0b5cff;
	--vm-accent-soft: rgba(11, 92, 255, 0.12);

	--vm-info-bg:   #eaf1ff;
	--vm-info-fg:   #0b5cff;
	--vm-warn-bg:   #fff3df;
	--vm-warn-fg:   #a26500;
	--vm-tip-bg:    #e6f5ec;
	--vm-tip-fg:    #0e7a45;

	--vm-code-bg:   #0b0d12;
	--vm-code-fg:   #e2e3e6;
	--vm-inline-bg: #eef0f5;
	--vm-inline-fg: #5b3aac;
	--vm-term-bg:   #000000;

	--vm-shadow-sm: 0 1px 2px rgba(11, 13, 18, 0.04), 0 1px 1px rgba(11, 13, 18, 0.03);
	--vm-radius:    6px;

	--vm-serif: "Newsreader", "Iowan Old Style", "Times New Roman", serif;
	--vm-sans:  "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--vm-mono:  "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
}

[data-theme="dark"] {
	--vm-bg:        #0c0d10;
	--vm-surface:   #141519;
	--vm-tint:      #15171c;
	--vm-fg:        #ececea;
	--vm-soft:      #b5b7bd;
	--vm-muted:     #7d7f86;
	--vm-rule:      #23252c;
	--vm-rule-soft: #1c1e25;
	--vm-accent:    #5b8cff;
	--vm-accent-soft: rgba(91, 140, 255, 0.15);

	--vm-info-bg:   #1a2235;
	--vm-info-fg:   #9cb4ff;
	--vm-warn-bg:   #2a2114;
	--vm-warn-fg:   #e7b562;
	--vm-tip-bg:    #11251c;
	--vm-tip-fg:    #76d3a9;

	--vm-code-bg:   #08090c;
	--vm-code-fg:   #e2e3e6;
	--vm-inline-bg: #1f2128;
	--vm-inline-fg: #d8b8ff;
	--vm-term-bg:   #000000;
}

/* Re-map WP preset variables to live theme tokens so blocks follow dark mode. */
:root {
	--wp--preset--color--bg:        var(--vm-bg);
	--wp--preset--color--surface:   var(--vm-surface);
	--wp--preset--color--tint:      var(--vm-tint);
	--wp--preset--color--fg:        var(--vm-fg);
	--wp--preset--color--soft:      var(--vm-soft);
	--wp--preset--color--muted:     var(--vm-muted);
	--wp--preset--color--rule:      var(--vm-rule);
	--wp--preset--color--accent:    var(--vm-accent);
	--wp--preset--color--info-bg:   var(--vm-info-bg);
	--wp--preset--color--info-fg:   var(--vm-info-fg);
	--wp--preset--color--warn-bg:   var(--vm-warn-bg);
	--wp--preset--color--warn-fg:   var(--vm-warn-fg);
	--wp--preset--color--tip-bg:    var(--vm-tip-bg);
	--wp--preset--color--tip-fg:    var(--vm-tip-fg);
	--wp--preset--color--code-bg:   var(--vm-code-bg);
	--wp--preset--color--code-fg:   var(--vm-code-fg);
}

html { background: var(--vm-bg); color: var(--vm-fg); transition: background 200ms, color 200ms; }
body { font-family: var(--vm-sans); }

::selection { background: var(--vm-accent-soft); color: var(--vm-fg); }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- HEADER --------------------------------------------------------- */
.vm-header {
	position: sticky;
	top: 0; z-index: 50;
	background: color-mix(in srgb, var(--vm-bg) 85%, transparent);
	backdrop-filter: saturate(140%) blur(8px);
	-webkit-backdrop-filter: saturate(140%) blur(8px);
	border-bottom: 1px solid var(--vm-rule);
	padding: 16px clamp(20px, 4vw, 56px);
	display: flex; align-items: center; justify-content: space-between;
	gap: 24px;
}
.vm-header .vm-brand {
	display: flex; align-items: baseline; gap: 12px;
}
.vm-header .vm-logo {
	font-family: var(--vm-serif);
	font-size: 26px; line-height: 1; letter-spacing: -0.02em; font-weight: 500;
	display: inline-flex; align-items: baseline; gap: 4px; color: var(--vm-fg);
}
.vm-header .vm-logo .vm-dot {
	width: 8px; height: 8px; background: var(--vm-accent);
	border-radius: 999px; display: inline-block; transform: translateY(-2px);
}
.vm-header .vm-tagline {
	font-family: var(--vm-serif); font-style: italic;
	font-size: 14px; color: var(--vm-muted);
}
.vm-header nav { display: flex; gap: 26px; font-size: 14px; }
.vm-header nav a { color: var(--vm-fg); }
.vm-header nav a.current { color: var(--vm-accent); font-weight: 500; }
.vm-header .vm-actions { display: flex; gap: 10px; align-items: center; }
.vm-theme-toggle {
	width: 36px; height: 36px; border-radius: 999px;
	border: 1px solid var(--vm-rule); background: var(--vm-surface);
	color: var(--vm-fg); cursor: pointer; font-size: 14px;
	display: grid; place-items: center;
	transition: background 150ms, color 150ms;
}
.vm-theme-toggle:hover { background: var(--vm-tint); }
.vm-cta {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--vm-fg); color: var(--vm-bg);
	padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 500;
}
.vm-cta::before {
	content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--vm-accent);
}

/* ---------- LAYOUT --------------------------------------------------------- */
.vm-shell {
	min-height: 100vh;
	display: flex; flex-direction: column;
}
.vm-section { padding: clamp(28px, 5vw, 56px); }

/* ---------- HERO (featured post) ------------------------------------------- */
.vm-hero {
	padding: clamp(28px, 5vw, 56px);
	display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px, 4vw, 48px);
	align-items: end;
}
@media (max-width: 900px) {
	.vm-hero { grid-template-columns: 1fr; }
}
.vm-kicker {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--vm-mono); font-size: 11px;
	letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--vm-accent); margin-bottom: 18px;
}
.vm-kicker::before {
	content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--vm-accent);
}
.vm-hero-title {
	font-family: var(--vm-serif); font-weight: 500;
	font-size: clamp(2.25rem, 5.5vw, 4.875rem);
	line-height: 0.98; letter-spacing: -0.035em;
	margin: 0; text-wrap: balance;
}
.vm-hero-title em { font-style: italic; color: var(--vm-accent); }
.vm-post-title em,
.vm-card-title em,
.wp-block-post-title em {
	font-style: italic;
	color: var(--vm-accent);
}
.vm-hero-deck {
	margin-top: 24px; font-family: var(--vm-serif);
	font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
	line-height: 1.5; color: var(--vm-soft); max-width: 560px;
}
.vm-hero-meta {
	margin-top: 28px; display: flex; gap: 16px;
	align-items: center; flex-wrap: wrap;
	font-size: 13px; color: var(--vm-muted);
}
.vm-hero-cover { aspect-ratio: 4 / 5; width: 100%; border-radius: var(--vm-radius); overflow: hidden; }
.vm-hero-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- POST CARDS ----------------------------------------------------- */
.vm-card-cat {
	font-family: var(--vm-mono); font-size: 10px;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--vm-accent); margin-bottom: 8px;
}
.vm-card-title {
	font-family: var(--vm-serif); font-weight: 500;
	font-size: 1.3125rem; line-height: 1.18; letter-spacing: -0.012em;
	margin: 0; text-wrap: balance;
}
.vm-card-meta {
	margin-top: 12px;
	font-family: var(--vm-mono); font-size: 10.5px;
	letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--vm-muted); display: flex; gap: 12px;
}
.vm-card { display: flex; flex-direction: column; }
.vm-card .vm-cover {
	width: 100%; aspect-ratio: 1 / 1;
	border-radius: var(--vm-radius); overflow: hidden; margin-bottom: 16px;
}
.vm-card .vm-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.vm-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.vm-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.vm-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
@media (max-width: 900px) {
	.vm-grid-4 { grid-template-columns: repeat(2, 1fr); }
	.vm-grid-3, .vm-grid-2 { grid-template-columns: 1fr; }
}

.vm-section-head {
	display: flex; justify-content: space-between; align-items: baseline;
	margin-bottom: 28px;
}
.vm-section-head h2 {
	font-family: var(--vm-serif); font-weight: 500;
	font-size: clamp(1.5rem, 3vw, 2.25rem); letter-spacing: -0.02em; margin: 0;
}
.vm-section-head .vm-more {
	font-size: 13px; color: var(--vm-accent); font-weight: 500;
	display: inline-flex; align-items: center; gap: 6px;
}

/* ---------- TOPICS RIBBON --------------------------------------------------- */
.vm-topics {
	padding: 28px clamp(20px, 4vw, 56px); background: var(--vm-tint);
	display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
	border-top: 1px solid var(--vm-rule); border-bottom: 1px solid var(--vm-rule);
}
.vm-topics-label {
	font-family: var(--vm-mono); font-size: 11px;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--vm-muted); margin-right: 16px;
}
.vm-chip {
	padding: 7px 14px; background: var(--vm-surface);
	border: 1px solid var(--vm-rule); border-radius: 999px;
	font-size: 13px; font-weight: 500; color: var(--vm-fg);
	display: inline-flex; gap: 8px; align-items: center;
}
.vm-chip-count {
	color: var(--vm-muted); font-family: var(--vm-mono); font-size: 11px;
}

/* ---------- SINGLE POST ---------------------------------------------------- */
.vm-crumb {
	padding: 24px clamp(20px, 4vw, 56px) 0;
	font-family: var(--vm-mono); font-size: 11px;
	letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--vm-muted); display: flex; gap: 10px; flex-wrap: wrap;
}
.vm-crumb a:hover { color: var(--vm-accent); text-decoration: none; }
.vm-crumb .vm-current { color: var(--vm-accent); }

.vm-post-hero {
	padding: 32px clamp(20px, 4vw, 56px) 48px;
	max-width: 1180px; margin: 0 auto;
}
.vm-post-cat {
	font-family: var(--vm-mono); font-size: 11px;
	letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--vm-accent); margin-bottom: 20px;
}
.vm-post-title {
	font-family: var(--vm-serif); font-weight: 500;
	font-size: clamp(2rem, 5vw, 4rem); line-height: 1.02;
	letter-spacing: -0.025em; margin: 0; text-wrap: balance; max-width: 900px;
}
.vm-post-deck {
	margin-top: 22px; font-family: var(--vm-serif);
	font-size: clamp(1.125rem, 1.8vw, 1.375rem);
	line-height: 1.5; color: var(--vm-soft); max-width: 760px;
}
.vm-post-meta {
	margin-top: 32px; display: flex; gap: 28px; align-items: center; flex-wrap: wrap;
	padding-top: 20px; border-top: 1px solid var(--vm-rule);
	padding-bottom: 28px; border-bottom: 1px solid var(--vm-rule);
}
.vm-meta-col { display: flex; flex-direction: column; gap: 2px; }
.vm-meta-label {
	font-family: var(--vm-mono); font-size: 10px;
	letter-spacing: 0.12em; text-transform: uppercase; color: var(--vm-muted);
}
.vm-meta-val { font-size: 14px; font-weight: 500; }
.vm-avatar {
	width: 40px; height: 40px; border-radius: 999px;
	background: linear-gradient(135deg, var(--vm-accent), color-mix(in srgb, var(--vm-accent) 60%, white));
	display: grid; place-items: center;
	color: #fff; font-weight: 600; font-size: 14px; flex-shrink: 0;
}
.vm-tags { display: flex; gap: 8px; margin-left: auto; }
.vm-tag {
	font-family: var(--vm-mono); font-size: 10px;
	letter-spacing: 0.12em; text-transform: uppercase;
	padding: 3px 8px; border: 1px solid var(--vm-muted); color: var(--vm-muted);
}
.vm-post-cover {
	margin-top: 36px; width: 100%; aspect-ratio: 16 / 8;
	border-radius: var(--vm-radius); overflow: hidden;
}
.vm-post-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* article body grid (TOC + content + rail) */
.vm-post-body {
	display: grid;
	grid-template-columns: 220px minmax(0, 720px) 180px;
	gap: 48px; max-width: 1180px; margin: 0 auto;
	padding: 8px clamp(20px, 4vw, 56px) 64px; align-items: start;
}
@media (max-width: 1100px) {
	.vm-post-body { grid-template-columns: 1fr; gap: 24px; }
	.vm-toc, .vm-rail { position: static !important; }
}

/* TOC */
.vm-toc {
	position: sticky; top: 100px;
	padding-top: 16px; border-top: 1px solid var(--vm-rule);
}
.vm-toc-label {
	font-family: var(--vm-mono); font-size: 10px;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--vm-muted); margin-bottom: 14px;
}
.vm-toc-list { display: flex; flex-direction: column; gap: 8px; }
.vm-toc-item {
	font-size: 13px; line-height: 1.35;
	color: var(--vm-soft); padding: 2px 0 2px 12px;
	border-left: 2px solid var(--vm-rule);
	cursor: pointer; transition: color 150ms, border-color 150ms;
}
.vm-toc-item.is-sub { padding-left: 24px; font-size: 12.5px; color: var(--vm-muted); }
.vm-toc-item.is-active { color: var(--vm-accent); border-left-color: var(--vm-accent); font-weight: 500; }
.vm-toc-item:hover { color: var(--vm-accent); }

/* Right rail */
.vm-rail { position: sticky; top: 100px; }
.vm-rail-label {
	font-family: var(--vm-mono); font-size: 10px;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--vm-muted); margin-bottom: 12px; padding-top: 16px;
	border-top: 1px solid var(--vm-rule);
}
.vm-share-btn {
	width: 100%; padding: 10px 12px; margin-bottom: 8px;
	border: 1px solid var(--vm-rule); background: var(--vm-surface);
	color: var(--vm-fg); font-size: 13px; text-align: left;
	border-radius: 4px; cursor: pointer; font-family: inherit;
	display: flex; justify-content: space-between; align-items: center;
}
.vm-share-btn:hover { border-color: var(--vm-accent); color: var(--vm-accent); }
.vm-share-kbd { color: var(--vm-muted); font-family: var(--vm-mono); font-size: 11px; }

.vm-rail-progress {
	margin-top: 20px; padding: 14px; background: var(--vm-surface);
	border: 1px solid var(--vm-rule); border-radius: var(--vm-radius);
}
.vm-progress-bar {
	height: 4px; background: var(--vm-rule); border-radius: 999px; overflow: hidden;
}
.vm-progress-fill { height: 100%; background: var(--vm-accent); width: 0%; transition: width 80ms linear; }

/* Top-of-page reading progress */
.vm-progress-top {
	position: fixed; left: 0; right: 0; top: 69px;
	height: 3px; background: transparent; z-index: 49; pointer-events: none;
}
.vm-progress-top-fill { height: 100%; width: 0%; background: var(--vm-accent); transition: width 80ms linear; }

/* prose */
.vm-prose { font-family: var(--vm-serif); font-size: 1.1875rem; line-height: 1.65; color: var(--vm-fg); }
.vm-prose p { margin: 0 0 18px; }
.vm-prose h2 {
	font-family: var(--vm-serif); font-weight: 500;
	font-size: 2rem; line-height: 1.15; letter-spacing: -0.02em;
	margin: 44px 0 16px; scroll-margin-top: 100px;
}
.vm-prose h3 {
	font-family: var(--vm-serif); font-weight: 500;
	font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.01em;
	margin: 28px 0 10px; scroll-margin-top: 100px;
}
.vm-prose code, .vm-prose :not(pre) > code {
	font-family: var(--vm-mono); font-size: 0.9375rem;
	padding: 2px 6px; background: var(--vm-inline-bg);
	color: var(--vm-inline-fg); border-radius: 4px;
}
.vm-prose pre {
	background: var(--vm-code-bg); color: var(--vm-code-fg);
	padding: 16px 18px; border-radius: var(--vm-radius);
	font-family: var(--vm-mono); font-size: 0.875rem; line-height: 1.6;
	overflow-x: auto; margin: 24px 0;
}
.vm-prose pre code { background: transparent; color: inherit; padding: 0; }

/* ---------- CALLOUTS (block styles) --------------------------------------- */
.wp-block-group.is-style-callout-info,
.wp-block-group.is-style-callout-warn,
.wp-block-group.is-style-callout-tip {
	display: grid; grid-template-columns: 44px 1fr; gap: 14px;
	padding: 16px 18px; margin: 20px 0; border-radius: 4px;
	border-left: 3px solid var(--vm-accent);
}
.wp-block-group.is-style-callout-info { background: var(--vm-info-bg); border-left-color: var(--vm-info-fg); }
.wp-block-group.is-style-callout-warn { background: var(--vm-warn-bg); border-left-color: var(--vm-warn-fg); }
.wp-block-group.is-style-callout-tip  { background: var(--vm-tip-bg);  border-left-color: var(--vm-tip-fg);  }

.vm-callout-icon {
	width: 32px; height: 32px; border-radius: 999px;
	display: grid; place-items: center;
	font-weight: 700; font-size: 14px; font-family: var(--vm-sans);
}
.is-style-callout-info .vm-callout-icon { background: var(--vm-info-fg); color: var(--vm-info-bg); }
.is-style-callout-warn .vm-callout-icon { background: var(--vm-warn-fg); color: var(--vm-warn-bg); }
.is-style-callout-tip  .vm-callout-icon { background: var(--vm-tip-fg);  color: var(--vm-tip-bg);  }

.vm-callout-title {
	font-family: var(--vm-sans); font-size: 12px;
	letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
	margin-bottom: 4px;
}
.is-style-callout-info .vm-callout-title { color: var(--vm-info-fg); }
.is-style-callout-warn .vm-callout-title { color: var(--vm-warn-fg); }
.is-style-callout-tip  .vm-callout-title { color: var(--vm-tip-fg); }

.vm-callout-body { font-family: var(--vm-serif); font-size: 1.03125rem; line-height: 1.55; color: var(--vm-fg); }

/* ---------- TLDR ---------------------------------------------------------- */
.wp-block-group.is-style-tldr {
	background: var(--vm-surface); border: 1px solid var(--vm-rule);
	padding: 24px; border-radius: var(--vm-radius); margin-bottom: 36px;
}
.is-style-tldr .vm-tldr-label {
	font-family: var(--vm-mono); font-size: 11px;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--vm-accent); margin-bottom: 12px;
	display: flex; align-items: center; gap: 8px;
}
.is-style-tldr .vm-tldr-label::before {
	content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--vm-accent);
}
.is-style-tldr h3 {
	font-family: var(--vm-serif); font-size: 1.375rem; font-weight: 500;
	letter-spacing: -0.01em; margin: 0 0 14px;
}
.is-style-tldr ul {
	margin: 0; padding-left: 20px;
	font-family: var(--vm-serif); font-size: 1rem; line-height: 1.65;
}

/* ---------- CODE FRAME (with filename bar) -------------------------------- */
.wp-block-code.is-style-code-frame {
	margin: 24px 0; border-radius: var(--vm-radius); overflow: hidden;
	border: 1px solid var(--vm-rule); padding: 0;
}
.wp-block-code.is-style-code-frame::before {
	content: attr(data-filename) " · " attr(data-lang);
	display: block; background: #1c1d22; color: #9b9ea6;
	padding: 10px 14px;
	font-family: var(--vm-mono); font-size: 11px; letter-spacing: 0.06em;
}
.wp-block-code.is-style-code-frame code {
	display: block; padding: 16px 18px;
	background: var(--vm-code-bg); color: var(--vm-code-fg);
	font-family: var(--vm-mono); font-size: 0.875rem; line-height: 1.6;
	overflow-x: auto;
}

/* ---------- TERMINAL ------------------------------------------------------ */
.wp-block-group.is-style-terminal {
	margin: 24px 0; border-radius: var(--vm-radius); overflow: hidden;
	border: 1px solid var(--vm-rule); padding: 0 !important;
}
.is-style-terminal .vm-term-bar {
	background: #1a1b1f; padding: 8px 12px;
	display: flex; align-items: center; gap: 8px;
}
.is-style-terminal .vm-term-bar::before,
.is-style-terminal .vm-term-bar::after,
.is-style-terminal .vm-term-bar .vm-term-dot {
	content: ""; width: 11px; height: 11px; border-radius: 999px; display: block;
}
.is-style-terminal .vm-term-bar::before { background: #ff5f57; }
.is-style-terminal .vm-term-bar .vm-term-dot { background: #febc2e; }
.is-style-terminal .vm-term-bar::after { background: #28c840; }
.is-style-terminal .vm-term-title {
	margin-left: 12px; font-family: var(--vm-mono);
	font-size: 11px; color: #9b9ea6;
}
.is-style-terminal pre,
.is-style-terminal .vm-term-body {
	background: var(--vm-term-bg); color: #e4e4e4; margin: 0;
	padding: 14px 16px; font-family: var(--vm-mono);
	font-size: 0.875rem; line-height: 1.6; white-space: pre-wrap;
}
.is-style-terminal .vm-term-ok { color: #76d3a9; }

/* ---------- DIAGRAM (image with caption) ---------------------------------- */
.wp-block-image.is-style-diagram {
	margin: 28px 0; border: 1px solid var(--vm-rule);
	border-radius: var(--vm-radius); overflow: hidden;
}
.wp-block-image.is-style-diagram img { display: block; width: 100%; height: auto; }
.wp-block-image.is-style-diagram figcaption {
	padding: 10px 16px;
	font-family: var(--vm-mono); font-size: 11px;
	letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--vm-muted); border-top: 1px solid var(--vm-rule);
	background: var(--vm-surface); text-align: left; margin: 0;
}

/* ---------- RELATED + COMMENTS -------------------------------------------- */
.vm-related {
	border-top: 1px solid var(--vm-rule);
	padding: 48px clamp(20px, 4vw, 56px); max-width: 1180px; margin: 0 auto;
}
.vm-related h2 {
	font-family: var(--vm-serif); font-size: 2rem; font-weight: 500;
	letter-spacing: -0.02em; margin: 0 0 28px;
}
.vm-related h2 em { font-style: italic; color: var(--vm-muted); font-weight: 400; }

.vm-comments {
	border-top: 1px solid var(--vm-rule);
	padding: 48px clamp(20px, 4vw, 56px) 64px;
	max-width: 980px; margin: 0 auto;
}
.vm-comments h2 {
	font-family: var(--vm-serif); font-size: 1.75rem; font-weight: 500;
	letter-spacing: -0.02em; margin: 0 0 24px;
	display: flex; align-items: baseline; gap: 12px;
}
.vm-comments h2 .vm-count {
	font-family: var(--vm-mono); font-size: 13px; color: var(--vm-muted);
}
.comment-form-comment textarea {
	background: var(--vm-surface); border: 1px solid var(--vm-rule);
	border-radius: var(--vm-radius); padding: 14px;
	font-family: var(--vm-sans); font-size: 14px; color: var(--vm-fg);
	width: 100%; min-height: 80px; resize: vertical;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
	background: var(--vm-surface); border: 1px solid var(--vm-rule);
	border-radius: var(--vm-radius); padding: 10px 12px;
	font-family: var(--vm-sans); font-size: 14px; color: var(--vm-fg);
}
.form-submit input[type="submit"],
.wp-block-button__link {
	background: var(--vm-accent); color: #fff; border: 0;
	padding: 10px 16px; border-radius: 999px;
	font-weight: 500; font-size: 13px; cursor: pointer;
	font-family: var(--vm-sans);
}
.form-submit input[type="submit"]:hover,
.wp-block-button__link:hover { filter: brightness(1.05); }

.comment-list { list-style: none; padding: 0; margin: 0; }
.comment-list .comment {
	display: grid; grid-template-columns: 44px 1fr; gap: 14px;
	padding-bottom: 24px; margin-bottom: 24px;
	border-bottom: 1px solid var(--vm-rule);
}
.comment-author .avatar {
	width: 36px; height: 36px; border-radius: 999px;
}
.comment-meta { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; font-size: 13px; }
.comment-meta .fn { font-weight: 600; }
.comment-meta time {
	font-family: var(--vm-mono); font-size: 11px; color: var(--vm-muted);
}
.comment-content { font-family: var(--vm-serif); font-size: 1rem; line-height: 1.55; }

/* ---------- FOOTER -------------------------------------------------------- */
.vm-footer {
	margin-top: auto;
	padding: 32px clamp(20px, 4vw, 56px);
	border-top: 1px solid var(--vm-rule);
	display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px;
	font-size: 13px; color: var(--vm-muted);
}
.vm-footer .vm-build {
	font-family: var(--vm-mono); font-size: 11px;
	letter-spacing: 0.1em; text-transform: uppercase;
}
.vm-footer .vm-social { text-align: right; color: var(--vm-accent); }
@media (max-width: 760px) {
	.vm-footer { grid-template-columns: 1fr; gap: 12px; }
	.vm-footer .vm-social { text-align: left; }
}

/* ---------- PLACEHOLDER COVER (for posts without featured image) ---------- */
.vm-ph {
	position: relative; display: flex; align-items: flex-end; justify-content: flex-start;
	overflow: hidden; height: 100%; width: 100%;
	background-color: var(--vm-rule-soft);
	background-image: repeating-linear-gradient(135deg,
		transparent 0, transparent 14px,
		rgba(0,0,0,0.06) 14px, rgba(0,0,0,0.06) 15px);
}
[data-theme="dark"] .vm-ph {
	background-color: var(--vm-tint);
	background-image: repeating-linear-gradient(135deg,
		transparent 0, transparent 14px,
		rgba(255,255,255,0.05) 14px, rgba(255,255,255,0.05) 15px);
}
.vm-ph-label {
	font-family: var(--vm-mono); font-size: 10px;
	letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--vm-muted); background: var(--vm-surface);
	padding: 4px 8px; margin: 10px; border: 1px solid var(--vm-rule);
}

/* ---------- FEATURED IMAGE FITS CONTAINER --------------------------------- */
/* Strategy: control geometry from the OUTER container (vm-hero-cover, vm-card,
   etc) — set aspect-ratio + max-height there. Force every nested element from
   WP's featured-image block to fill that box with object-fit: cover. */

.vm-hero, .vm-hero > *,
.vm-card, .vm-split-card,
.vm-related, .vm-related > div > * { min-width: 0; }

/* Reset everything WP renders inside the featured-image block */
.wp-block-post-featured-image,
.wp-block-post-featured-image a,
.wp-block-post-featured-image img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}
.wp-block-post-featured-image img {
	object-fit: cover !important;
	object-position: center !important;
	aspect-ratio: auto !important; /* override inline aspect-ratio from WP */
}
.wp-block-post-featured-image {
	overflow: hidden;
	border-radius: var(--vm-radius);
	aspect-ratio: auto !important;
}

/* Now set geometry per usage */
.vm-hero-cover {
	width: 100% !important;
	max-width: 100% !important;
	aspect-ratio: 4 / 5;
	max-height: 720px;
	overflow: hidden;
	border-radius: var(--vm-radius);
	align-self: stretch;
}
.vm-card > .wp-block-post-featured-image,
.vm-card .wp-block-post-featured-image {
	aspect-ratio: 1 / 1 !important;
	overflow: hidden;
}
.vm-split-card .wp-block-post-featured-image {
	aspect-ratio: 5 / 6 !important;
	max-height: 480px;
	overflow: hidden;
}
.vm-related .wp-block-post-featured-image {
	aspect-ratio: 4 / 3 !important;
	overflow: hidden;
}
.vm-post-cover,
.vm-post-cover .wp-block-post-featured-image {
	aspect-ratio: 16 / 8 !important;
	max-height: 560px;
	overflow: hidden;
}

/* Friendly striped placeholder when a post has no featured image. */
.wp-block-post-featured-image:empty,
.wp-block-post-featured-image a:empty {
	background-color: var(--vm-rule-soft);
	background-image: repeating-linear-gradient(135deg,
		transparent 0, transparent 14px,
		rgba(0,0,0,0.06) 14px, rgba(0,0,0,0.06) 15px);
	min-height: 200px;
}
[data-theme="dark"] .wp-block-post-featured-image:empty,
[data-theme="dark"] .wp-block-post-featured-image a:empty {
	background-color: var(--vm-tint);
	background-image: repeating-linear-gradient(135deg,
		transparent 0, transparent 14px,
		rgba(255,255,255,0.05) 14px, rgba(255,255,255,0.05) 15px);
}

/* ---------- READ-MORE PILL (hero CTA) ------------------------------------- */
.vm-read-more, a.vm-read-more {
	display: inline-flex; align-items: center; gap: 10px;
	margin-top: 28px; padding: 12px 18px;
	background: var(--vm-accent); color: #fff !important;
	border: 0; border-radius: 999px;
	font-family: var(--vm-sans); font-size: 14px; font-weight: 500;
	text-decoration: none !important;
	cursor: pointer; transition: filter 150ms, transform 100ms;
	width: max-content;
}
.vm-read-more:hover { filter: brightness(1.08); transform: translateY(-1px); text-decoration: none; }
.vm-read-more:focus-visible { outline: 2px solid var(--vm-accent); outline-offset: 3px; }

/* ---------- A11Y / small touches ------------------------------------------ */
:focus-visible {
	outline: 2px solid var(--vm-accent); outline-offset: 3px; border-radius: 4px;
}
img { max-width: 100%; height: auto; display: block; }
hr.wp-block-separator { border-color: var(--vm-rule); margin: 32px 0; }

/* ---------- SETTINGS-DRIVEN VISIBILITY ------------------------------------ */
body.vm-hide-topics   .vm-topics,
body.vm-hide-split    .wp-block-query.vm-section .vm-split-card,
body.vm-hide-split    [data-vm-namespace="vmaster/split"],
body.vm-hide-toc      .vm-toc,
body.vm-hide-toc      .vm-post-body { grid-template-columns: minmax(0, 720px) 180px; }
body.vm-hide-toc.vm-hide-progress .vm-post-body { grid-template-columns: 1fr; max-width: 760px; }
body.vm-hide-progress .vm-rail,
body.vm-hide-progress .vm-progress-top,
body.vm-hide-related  .vm-related {
	display: none !important;
}
body.vm-hide-toc .vm-toc { display: none !important; }
body.vm-hide-topics .vm-topics { display: none !important; }