/* ==========================================================================
   XllenTech Blog — component styles
   Colour tokens come from theme.json (light values). Dark values are applied
   for visitors who chose dark, visitors whose OS prefers dark (unless they
   chose light), and always-dark components (console, CTA band).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
	color-scheme: light;
	--xb-grid: rgba(30, 38, 50, .07);
	--xb-glow-a: rgba(132, 196, 20, .18);
	--xb-glow-b: rgba(110, 31, 42, .10);
	--xb-header-bg: rgba(255, 255, 255, .84);
	--xb-card-shadow: 0 1px 2px rgba(10, 13, 18, .04), 0 14px 34px -22px rgba(10, 13, 18, .22);
	--xb-hover-border: rgba(63, 109, 0, .45);
	--xb-mark-stroke: #d3d9e2;
	--xb-mark-fill: rgba(30, 38, 50, .06);
	--xb-img-fallback: linear-gradient(135deg, #eef2e3 0%, #f6f7f9 55%, #f3e6e8 100%);
}

:root[data-theme="dark"],
.xb-console, .xb-cta {
	color-scheme: dark;
	--wp--preset--color--base: #0a0d12;
	--wp--preset--color--surface: #11161e;
	--wp--preset--color--raised: #18202b;
	--wp--preset--color--line: #253041;
	--wp--preset--color--muted: #8d99ab;
	--wp--preset--color--contrast: #e9edf3;
	--wp--preset--color--heading: #ffffff;
	--wp--preset--color--accent: #b8f23e;
	--wp--preset--color--light: #10151c;
	--xb-grid: rgba(141, 153, 171, .09);
	--xb-glow-a: rgba(184, 242, 62, .14);
	--xb-glow-b: rgba(110, 31, 42, .2);
	--xb-header-bg: rgba(10, 13, 18, .8);
	--xb-card-shadow: none;
	--xb-hover-border: rgba(184, 242, 62, .45);
	--xb-mark-stroke: #2f3b4e;
	--xb-mark-fill: rgba(37, 48, 65, .55);
	--xb-img-fallback: linear-gradient(135deg, #18220c 0%, #11161e 55%, #2a1015 100%);
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--wp--preset--color--base: #0a0d12;
		--wp--preset--color--surface: #11161e;
		--wp--preset--color--raised: #18202b;
		--wp--preset--color--line: #253041;
		--wp--preset--color--muted: #8d99ab;
		--wp--preset--color--contrast: #e9edf3;
		--wp--preset--color--heading: #ffffff;
		--wp--preset--color--accent: #b8f23e;
		--wp--preset--color--light: #10151c;
		--xb-grid: rgba(141, 153, 171, .09);
		--xb-glow-a: rgba(184, 242, 62, .14);
		--xb-glow-b: rgba(110, 31, 42, .2);
		--xb-header-bg: rgba(10, 13, 18, .8);
		--xb-card-shadow: none;
		--xb-hover-border: rgba(184, 242, 62, .45);
		--xb-mark-stroke: #2f3b4e;
		--xb-mark-fill: rgba(37, 48, 65, .55);
		--xb-img-fallback: linear-gradient(135deg, #18220c 0%, #11161e 55%, #2a1015 100%);
	}
}

:root,
.xb-console, .xb-cta {
	--xb-base: var(--wp--preset--color--base);
	--xb-surface: var(--wp--preset--color--surface);
	--xb-raised: var(--wp--preset--color--raised);
	--xb-line: var(--wp--preset--color--line);
	--xb-muted: var(--wp--preset--color--muted);
	--xb-text: var(--wp--preset--color--contrast);
	--xb-heading: var(--wp--preset--color--heading);
	--xb-accent: var(--wp--preset--color--accent);
}
:root {
	--xb-ink: var(--wp--preset--color--ink);
	--xb-signal: var(--wp--preset--color--signal);
	--xb-mono: var(--wp--preset--font-family--mono);
	--xb-display: var(--wp--preset--font-family--display);
	--xb-radius: 14px;
	--xb-ease: cubic-bezier(.2, .7, .2, 1);
	--xb-topbar-h: 36px;
	--xb-sticky-top: calc(var(--wp-admin--admin-bar--height, 0px) + 84px);
}
.xb-console, .xb-cta { color: var(--xb-text); }

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color .3s var(--xb-ease), color .3s var(--xb-ease); }
::selection { background: var(--xb-signal); color: var(--xb-ink); }
:focus-visible { outline: 2px solid var(--xb-accent); outline-offset: 3px; border-radius: 4px; }
.wp-site-blocks > * + * { margin-block-start: 0; }
img { max-width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) - var(--xb-topbar-h));
	z-index: 100;
}
.xb-topbar { border-bottom: 1px solid var(--xb-line); background: var(--xb-base); }
.xb-topbar > .alignwide { min-height: calc(var(--xb-topbar-h) - .9rem - 1px); align-items: center; }
.xb-topbar p { margin: 0; line-height: 1.4; }
.xb-topbar a { color: var(--xb-text); }
.xb-topbar a:hover { color: var(--xb-accent); text-decoration: none; }
.xb-status::before {
	content: "";
	display: inline-block;
	width: 7px; height: 7px;
	margin-right: .55em;
	border-radius: 50%;
	background: var(--xb-signal);
	vertical-align: 1px;
	animation: xb-pulse 2.4s infinite;
}
@keyframes xb-pulse {
	0% { box-shadow: 0 0 0 0 rgba(184, 242, 62, .55); }
	70% { box-shadow: 0 0 0 8px rgba(184, 242, 62, 0); }
	100% { box-shadow: 0 0 0 0 rgba(184, 242, 62, 0); }
}

/* Blur on a pseudo-element so the mobile menu overlay isn't trapped inside the header. */
.xb-header { position: relative; z-index: 0; border-bottom: 1px solid var(--xb-line); }
.xb-header::before {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background: var(--xb-header-bg);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	backdrop-filter: saturate(160%) blur(14px);
	pointer-events: none;
}

/* Brand: logo (or site title when no logo is set) + "blog" tag */
.xb-brand { align-items: center; min-width: 0; }
.xb-logo img { display: block; height: auto; }
.xb-site-title { margin: 0; font-family: var(--xb-display); font-weight: 700; font-size: 1.3rem; letter-spacing: -.02em; white-space: nowrap; }
.xb-site-title a { color: var(--xb-heading); text-decoration: none; }
.xb-brand:has(.xb-logo img) .xb-site-title { display: none; }
.xb-brand-tag { margin: 0; }
.xb-brand-tag a {
	display: inline-block;
	padding: .15rem .55rem;
	border: 1px solid var(--xb-line);
	border-radius: 6px;
	font-family: var(--xb-mono);
	font-size: .75rem;
	line-height: 1.5;
	color: var(--xb-accent);
	text-decoration: none;
}
.xb-brand-tag a::before { content: "/"; opacity: .55; }
.xb-brand-tag a:hover { border-color: var(--xb-accent); text-decoration: none; }

.xb-header .wp-block-navigation a { color: var(--xb-text); }
.xb-header .wp-block-navigation a:hover { color: var(--xb-accent); text-decoration: none; }
.xb-header .wp-block-navigation .current-menu-item > a,
.xb-header .wp-block-navigation a[aria-current="page"] { color: var(--xb-accent); }
.xb-header .wp-block-navigation .xb-mobile-only { display: none; }

/* Mobile menu overlay */
.xb-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.25rem clamp(1rem, 5vw, 2rem) 2rem;
	background: var(--xb-base) !important;
	color: var(--xb-text) !important;
}
.xb-header .wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-close { top: 1.25rem; right: clamp(1rem, 5vw, 2rem); width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--xb-line); border-radius: 10px; color: var(--xb-text); }
.xb-header .wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 4rem !important; align-items: stretch !important; }
.xb-header .wp-block-navigation .is-menu-open .wp-block-navigation__container { width: 100%; align-items: stretch !important; gap: 0 !important; }
.xb-header .wp-block-navigation .is-menu-open .wp-block-navigation-item { width: 100%; border-bottom: 1px solid var(--xb-line); padding: .9rem 0; justify-content: flex-start !important; }
.xb-header .wp-block-navigation .is-menu-open .wp-block-navigation-item > a { font-family: var(--xb-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; color: var(--xb-heading); }
.xb-header .wp-block-navigation .is-menu-open .xb-mobile-only { display: flex; }
.xb-header .wp-block-navigation .is-menu-open .xb-mobile-only > a { color: var(--xb-accent); }
.xb-header .wp-block-navigation__responsive-container-open:not(.always-shown) { width: 40px; height: 40px; place-items: center; border: 1px solid var(--xb-line); border-radius: 10px; color: var(--xb-text); }
@media (max-width: 599px) { .xb-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: grid; } }

/* Header search (expands from an icon button) */
.xb-header-search { margin: 0; }
.xb-header-search .wp-block-search__inside-wrapper { border: 0 !important; padding: 0 !important; gap: .4rem; }
.xb-header-search .wp-block-search__input {
	height: 40px;
	box-sizing: border-box;
	border: 1px solid var(--xb-line) !important;
	border-radius: 10px;
	background: var(--xb-surface);
	color: var(--xb-text);
	font-size: var(--wp--preset--font-size--small);
	padding: 0 .85rem;
	transition: width .3s var(--xb-ease);
}
.xb-header-search .wp-block-search__button,
.xb-theme-toggle {
	appearance: none;
	display: inline-grid;
	place-items: center;
	width: 40px; height: 40px;
	min-width: 40px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--xb-line);
	border-radius: 10px;
	background: transparent !important;
	color: var(--xb-text) !important;
	cursor: pointer;
	transition: border-color .2s var(--xb-ease), color .2s var(--xb-ease);
}
.xb-header-search .wp-block-search__button::after { content: none; }
.xb-header-search .wp-block-search__button svg { width: 20px; height: 20px; fill: currentColor; min-width: 0; }
.xb-header-search .wp-block-search__button:hover,
.xb-theme-toggle:hover { border-color: var(--xb-accent); color: var(--xb-accent) !important; }
.xb-theme-toggle svg { width: 18px; height: 18px; grid-area: 1 / 1; transition: transform .4s var(--xb-ease), opacity .3s var(--xb-ease); }
.xb-theme-toggle .xb-icon-sun { opacity: 0; transform: rotate(-90deg) scale(.6); }
:root[data-theme="dark"] .xb-theme-toggle .xb-icon-sun { opacity: 1; transform: none; }
:root[data-theme="dark"] .xb-theme-toggle .xb-icon-moon { opacity: 0; transform: rotate(90deg) scale(.6); }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .xb-theme-toggle .xb-icon-sun { opacity: 1; transform: none; }
	:root:not([data-theme="light"]) .xb-theme-toggle .xb-icon-moon { opacity: 0; transform: rotate(90deg) scale(.6); }
}

@media (max-width: 1080px) {
	.xb-header .xb-header-cta { display: none !important; }
}
@media (max-width: 781px) {
	:root { --xb-topbar-h: 0px; --xb-sticky-top: calc(var(--wp-admin--admin-bar--height, 0px) + 76px); }
	.xb-topbar { display: none; }
	.xb-header-actions { gap: .6rem !important; }
	.xb-header-search { display: none; }
}
@media (max-width: 600px) {
	.wp-site-blocks > header.wp-block-template-part { top: 0; }
}

/* Reading progress bar */
.xb-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.xb-progress span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--xb-read, 0)); background: linear-gradient(90deg, var(--xb-signal), #8ad11c); box-shadow: 0 0 10px rgba(184, 242, 62, .55); }

/* --------------------------------------------------------------------------
   Shared helpers
   -------------------------------------------------------------------------- */
.is-style-xb-eyebrow,
.xb-label {
	font-family: var(--xb-mono);
	font-size: var(--wp--preset--font-size--x-small) !important;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--xb-accent);
}
.is-style-xb-eyebrow::before { content: "// "; opacity: .55; white-space: pre; }
.xb-lede { color: var(--xb-muted); max-width: 40rem; font-size: var(--wp--preset--font-size--large); }
.xb-crumbs { font-family: var(--xb-mono); font-size: var(--wp--preset--font-size--x-small); color: var(--xb-muted); }
.xb-crumbs a { color: var(--xb-muted); }
.xb-crumbs a:hover { color: var(--xb-accent); }

.xb-grid-bg { position: relative; isolation: isolate; overflow: hidden; }
.xb-grid-bg::before {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background-image:
		linear-gradient(to right, var(--xb-grid) 1px, transparent 1px),
		linear-gradient(to bottom, var(--xb-grid) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(ellipse 80% 75% at 50% 25%, #000 30%, transparent 100%);
	mask-image: radial-gradient(ellipse 80% 75% at 50% 25%, #000 30%, transparent 100%);
	pointer-events: none;
}
.xb-grid-bg::after {
	content: "";
	position: absolute; z-index: -1;
	width: 760px; height: 760px;
	right: -240px; top: -300px;
	background: radial-gradient(circle, var(--xb-glow-a) 0%, var(--xb-glow-b) 42%, transparent 70%);
	pointer-events: none;
}

/* Buttons */
.wp-element-button, .wp-block-button__link { transition: background-color .2s var(--xb-ease), color .2s var(--xb-ease), border-color .2s var(--xb-ease), transform .2s var(--xb-ease); }
.wp-block-button:not(.is-style-xb-ghost) .wp-block-button__link:hover { transform: translateY(-1px); }
.wp-block-button__link::after { content: "→"; display: inline-block; margin-left: .5em; transition: transform .2s var(--xb-ease); }
.wp-block-button__link:hover::after { transform: translateX(3px); }
.is-style-xb-ghost .wp-block-button__link { background: transparent !important; color: var(--xb-heading) !important; border: 1px solid var(--xb-line); }
.is-style-xb-ghost .wp-block-button__link:hover { border-color: var(--xb-accent); color: var(--xb-accent) !important; }
.is-style-xb-ghost .wp-block-button__link::after { content: none; }

/* Search field (masthead) */
.xb-search { max-width: 30rem; margin-top: var(--wp--preset--spacing--40) !important; }
.xb-search .wp-block-search__inside-wrapper {
	padding: .3rem !important;
	border: 1px solid var(--xb-line) !important;
	border-radius: 12px;
	background: var(--xb-base);
	box-shadow: var(--xb-card-shadow);
	transition: border-color .2s var(--xb-ease);
}
.xb-search .wp-block-search__inside-wrapper:focus-within { border-color: var(--xb-accent) !important; }
.xb-search .wp-block-search__input { border: 0 !important; background: transparent; color: var(--xb-text); padding: .6rem .8rem; font-size: var(--wp--preset--font-size--medium); outline: none; }
.xb-search .wp-block-search__button { margin: 0; padding: .55rem .85rem; border-radius: 9px; background: var(--xb-signal); color: var(--xb-ink); border: 0; }
.xb-search .wp-block-search__button::after { content: none; }
.xb-search .wp-block-search__button svg { fill: currentColor; width: 22px; height: 22px; }

/* --------------------------------------------------------------------------
   Blog home masthead
   -------------------------------------------------------------------------- */
.xb-mast { border-bottom: 1px solid var(--xb-line); }
.xb-mast-title { font-size: clamp(2.5rem, 5.6vw, 4.5rem) !important; text-wrap: balance; margin-top: .6rem !important; }
.xb-mast-title mark {
	color: var(--xb-heading);
	background: linear-gradient(to top, transparent .04em, var(--xb-signal) .04em, var(--xb-signal) .16em, transparent .16em) no-repeat;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
@media (max-width: 600px) { .xb-mast .wp-block-xllentech-blog-blog-status, .xb-mast .xb-console { display: none; } .xb-mast-cols { margin-bottom: var(--wp--preset--spacing--40) !important; } }
.xb-mast-sm .xb-mast-title { font-size: clamp(2.1rem, 4.6vw, 3.4rem) !important; }
.xb-mast-sm .xb-crumbs { margin-bottom: 0; }
.xb-mast-cols { margin-bottom: var(--wp--preset--spacing--50) !important; }

/* Console (always dark) */
.xb-console {
	border-radius: var(--xb-radius);
	border: 1px solid var(--xb-line);
	background: var(--xb-surface);
	overflow: hidden;
	box-shadow: 0 40px 80px -30px rgba(10, 13, 18, .55), 0 0 0 1px rgba(184, 242, 62, .06);
	font-family: var(--xb-mono);
	font-size: var(--wp--preset--font-size--small);
}
.xb-console-bar { display: flex; align-items: center; gap: .75rem; padding: .75rem 1.1rem; border-bottom: 1px solid var(--xb-line); background: var(--xb-raised); color: var(--xb-muted); font-size: var(--wp--preset--font-size--x-small); }
.xb-console-dots { display: inline-block; width: 42px; height: 10px; background: radial-gradient(circle at 5px 5px, #ff5f57 4.5px, transparent 5px), radial-gradient(circle at 21px 5px, #febc2e 4.5px, transparent 5px), radial-gradient(circle at 37px 5px, #28c840 4.5px, transparent 5px); opacity: .8; }
.xb-console-body { padding: 1.1rem 1.25rem 1.3rem; }
.xb-console-body p { margin: 0; }
.xb-console-cmd { color: var(--xb-text); }
.xb-console-cmd::before { content: "$ "; color: var(--xb-signal); }
.xb-console dl { margin: .9rem 0; }
.xb-console dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px dashed rgba(141, 153, 171, .18); }
.xb-console dt { color: var(--xb-muted); }
.xb-console dd { margin: 0; color: var(--xb-heading); font-weight: 600; }
.xb-console-ok { color: var(--xb-signal); }
.xb-console-ok::before { content: "● "; font-size: .7em; vertical-align: 2px; }
.xb-console-prompt { margin-top: .6rem !important; }
.xb-console-prompt::before { content: "$ "; color: var(--xb-signal); }
.xb-console-prompt a { color: var(--xb-text); text-decoration: none; }
.xb-console-prompt a:hover { color: var(--xb-signal); }
.xb-console-prompt::after {
	content: "";
	display: inline-block;
	width: .55em; height: 1.05em;
	margin-left: .25em;
	background: var(--xb-signal);
	vertical-align: -3px;
	animation: xb-blink 1.1s steps(1) infinite;
}
@keyframes xb-blink { 50% { opacity: 0; } }

/* Topic chips */
.xb-topics { align-items: center; padding-top: var(--wp--preset--spacing--30); border-top: 1px dashed var(--xb-line); }
.xb-topics > * { margin: 0 !important; }
.xb-topics-label { font-family: var(--xb-mono); font-size: var(--wp--preset--font-size--x-small); color: var(--xb-muted); text-transform: uppercase; letter-spacing: .08em; }
.xb-chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.xb-chips li { margin: 0; }
.xb-chips a, .xb-chip-all a {
	display: inline-block;
	padding: .4rem .85rem;
	border: 1px solid var(--xb-line);
	border-radius: 999px;
	background: var(--xb-base);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.3;
	color: var(--xb-heading);
	text-decoration: none;
	transition: border-color .2s var(--xb-ease), color .2s var(--xb-ease), background-color .2s var(--xb-ease);
}
.xb-chips a:hover, .xb-chip-all a:hover { border-color: var(--xb-accent); color: var(--xb-accent); text-decoration: none; }
.xb-chips .current-cat > a,
body.blog .xb-chip-all a { background: var(--xb-heading); border-color: var(--xb-heading); color: var(--xb-base); }
@media (max-width: 600px) {
	.xb-topics { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--wp--style--root--padding-left, 1rem)) !important; padding-inline: var(--wp--style--root--padding-left, 1rem); }
	.xb-topics::-webkit-scrollbar { display: none; }
	.xb-chips { flex-wrap: nowrap; }
	.xb-chips a, .xb-chip-all a { white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   Section heads
   -------------------------------------------------------------------------- */
.xb-section-head { margin-bottom: var(--wp--preset--spacing--40) !important; gap: 1rem; }
.xb-section-head h2 { margin: .35rem 0 0; font-size: clamp(1.75rem, 3vw, 2.4rem); }
.xb-section-head .is-style-xb-eyebrow { margin: 0; }
.xb-rss { margin: 0; font-family: var(--xb-mono); font-size: var(--wp--preset--font-size--x-small); }
.xb-rss a { color: var(--xb-muted); }
.xb-rss a::before { content: ""; display: inline-block; width: .6em; height: .6em; margin-right: .5em; border-radius: 50%; background: #f26522; vertical-align: 1px; }
.xb-rss a:hover { color: var(--xb-accent); }

/* --------------------------------------------------------------------------
   Post cards
   -------------------------------------------------------------------------- */
.xb-feed .wp-block-post-template { gap: clamp(1rem, 2vw, 1.5rem); }
.wp-block-post-template.is-layout-grid > li { display: flex; min-width: 0; }
.xb-post-card {
	flex: 1;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	background: var(--xb-surface);
	border: 1px solid var(--xb-line);
	border-radius: var(--xb-radius);
	box-shadow: var(--xb-card-shadow);
	transition: border-color .3s var(--xb-ease), transform .3s var(--xb-ease);
}
.xb-post-card > * { margin: 0 !important; }
.xb-post-card:hover { border-color: var(--xb-hover-border); transform: translateY(-3px); }

.xb-card-img { overflow: hidden; border-bottom: 1px solid var(--xb-line); background: var(--xb-img-fallback); }
.xb-card-img img { transition: transform .6s var(--xb-ease); }
.xb-post-card:hover .xb-card-img img { transform: scale(1.04); }
/* No featured image: show a branded placeholder band */
.xb-post-card:not(:has(.xb-card-img)) { border-top: 3px solid var(--xb-signal); }

.xb-card-body { display: flex; flex-direction: column; flex: 1; gap: .7rem; padding: clamp(1.1rem, 2vw, 1.5rem); }
.xb-card-body > * { margin: 0 !important; }
.xb-post-card .wp-block-post-title { font-size: var(--wp--preset--font-size--large); line-height: 1.25; letter-spacing: -.015em; text-wrap: balance; }
.xb-post-card .wp-block-post-title a { color: var(--xb-heading); text-decoration: none; }
.xb-post-card .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.xb-post-card:hover .wp-block-post-title a { color: var(--xb-accent); }
.xb-post-card .wp-block-post-excerpt { margin: 0; }
.xb-post-card .wp-block-post-excerpt__excerpt { margin: 0; color: var(--xb-muted); font-size: var(--wp--preset--font-size--small); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.xb-post-card .wp-block-post-excerpt__more-text { display: none; }
.xb-card-foot { margin-top: auto !important; padding-top: .9rem; border-top: 1px dashed var(--xb-line); align-items: center; font-family: var(--xb-mono); font-size: var(--wp--preset--font-size--x-small); color: var(--xb-muted); }
.xb-card-foot > * { margin: 0 !important; font-size: inherit !important; }
.xb-card-foot .wp-block-post-time-to-read::before { content: "◷ "; color: var(--xb-accent); }
.xb-more { color: var(--xb-text); }
.xb-more::after { content: " →"; transition: margin .2s var(--xb-ease); }
.xb-post-card:hover .xb-more { color: var(--xb-accent); }
.xb-post-card:hover .xb-more::after { margin-left: 4px; }

.xb-post-meta { font-family: var(--xb-mono); font-size: var(--wp--preset--font-size--x-small); color: var(--xb-muted); align-items: center; }
.xb-post-meta > * { margin: 0 !important; font-size: inherit !important; color: inherit; }
.xb-post-meta > * + *::before { content: "·"; margin-right: .6rem; opacity: .6; }
.xb-post-meta .wp-block-post-terms a { position: relative; z-index: 2; color: var(--xb-accent); text-transform: uppercase; letter-spacing: .06em; text-decoration: none; }
.xb-post-meta .wp-block-post-terms a:hover { text-decoration: underline; }
.xb-post-meta .wp-block-post-terms__separator { opacity: .6; }
/* Cards: show only the primary category */
.xb-card-body .xb-post-meta .wp-block-post-terms a ~ a,
.xb-card-body .xb-post-meta .wp-block-post-terms__separator { display: none; }

/* Featured story: first post on page 1 of the blog home */
@media (min-width: 782px) {
	body:not(.paged) .xb-feed-home .wp-block-post-template > li:first-child { grid-column: 1 / -1; }
	body:not(.paged) .xb-feed-home li:first-child .xb-post-card { flex-direction: row; background: linear-gradient(135deg, var(--xb-raised), var(--xb-surface) 55%); }
	body:not(.paged) .xb-feed-home li:first-child .xb-card-img { flex: 0 0 58%; border-bottom: 0; border-right: 1px solid var(--xb-line); }
	body:not(.paged) .xb-feed-home li:first-child .xb-card-img img { height: 100% !important; min-height: 360px; }
	body:not(.paged) .xb-feed-home li:first-child .xb-card-body { padding: clamp(1.5rem, 3vw, 2.75rem); justify-content: center; gap: 1rem; }
	body:not(.paged) .xb-feed-home li:first-child .xb-card-body::before {
		content: "Featured";
		align-self: flex-start;
		padding: .2rem .6rem;
		border-radius: 999px;
		background: var(--xb-signal);
		color: var(--xb-ink);
		font-family: var(--xb-mono);
		font-size: .7rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: .08em;
	}
	body:not(.paged) .xb-feed-home li:first-child .wp-block-post-title { font-size: clamp(1.6rem, 2.6vw, 2.35rem); line-height: 1.12; letter-spacing: -.025em; }
	body:not(.paged) .xb-feed-home li:first-child .wp-block-post-excerpt__excerpt { font-size: var(--wp--preset--font-size--medium); -webkit-line-clamp: 4; }
	body:not(.paged) .xb-feed-home li:first-child .xb-card-foot { margin-top: .5rem !important; }
}

@media (max-width: 1000px) {
	.xb-feed .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.xb-feed .wp-block-post-template.is-layout-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Pagination */
.xb-pagination { margin-top: var(--wp--preset--spacing--50) !important; font-family: var(--xb-mono); font-size: var(--wp--preset--font-size--small); align-items: center; }
.xb-pagination a { color: var(--xb-text); text-decoration: none; }
.xb-pagination .wp-block-query-pagination-previous,
.xb-pagination .wp-block-query-pagination-next { padding: .5rem 1rem; border: 1px solid var(--xb-line); border-radius: 10px; }
.xb-pagination .wp-block-query-pagination-previous:hover,
.xb-pagination .wp-block-query-pagination-next:hover { border-color: var(--xb-accent); color: var(--xb-accent); }
.xb-pagination .page-numbers { display: inline-grid; place-items: center; min-width: 2.25rem; height: 2.25rem; border-radius: 8px; margin: 0 .1rem; }
.xb-pagination a.page-numbers:hover { background: var(--xb-raised); }
.xb-pagination .page-numbers.current { background: var(--xb-signal); color: var(--xb-ink); font-weight: 600; }
.xb-empty { color: var(--xb-muted); font-family: var(--xb-mono); }

/* --------------------------------------------------------------------------
   Article
   -------------------------------------------------------------------------- */
.xb-post-head { border-bottom: 1px solid var(--xb-line); }
.xb-crumbs-row > * { margin: 0 !important; }
.xb-crumbs-row .wp-block-post-terms a { color: var(--xb-accent); }
.xb-post-title { font-size: clamp(2.1rem, 4.6vw, 3.6rem) !important; line-height: 1.05 !important; letter-spacing: -.035em !important; text-wrap: balance; margin-top: 1.1rem !important; }
.xb-byline { margin-top: 1.75rem !important; align-items: center; }
.xb-byline > * { margin: 0 !important; }
.xb-byline-author { align-items: center; gap: .65rem; margin: 0; }
.xb-byline-author .wp-block-post-author__avatar { margin: 0; }
.xb-byline-author .wp-block-post-author__avatar img { border-radius: 50%; display: block; border: 2px solid var(--xb-base); box-shadow: 0 0 0 1px var(--xb-line); }
.xb-byline-author .wp-block-post-author__name { font-weight: 600; color: var(--xb-heading); font-size: var(--wp--preset--font-size--small); }
.xb-byline-author .wp-block-post-author__byline { display: none; }
.xb-byline .xb-post-meta::before { content: ""; width: 1px; height: 1.2em; background: var(--xb-line); margin-right: .3rem; }
.xb-post-head .xb-post-meta { font-size: var(--wp--preset--font-size--small); }

.xb-post-head:has(+ .xb-post-hero-wrap .wp-block-post-featured-image) { padding-bottom: calc(var(--wp--preset--spacing--50) + 5rem) !important; }
.xb-post-hero-wrap { position: relative; z-index: 1; margin-top: -5rem !important; }
.xb-post-hero-wrap:not(:has(.wp-block-post-featured-image)) { display: none; }
.xb-post-hero { margin: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--xb-line); box-shadow: 0 40px 80px -40px rgba(10, 13, 18, .45); background: var(--xb-img-fallback); }

/* Article grid: sticky rail + reading column */
.xb-article-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--40); }
.xb-article-main { min-width: 0; max-width: 720px; width: 100%; margin-inline: auto; }
@media (min-width: 1100px) {
	.xb-article-grid { grid-template-columns: 250px minmax(0, 720px); justify-content: space-between; gap: var(--wp--preset--spacing--60); }
	.xb-article-main { margin: 0; grid-column: 2; grid-row: 1; }
	.xb-rail { grid-column: 1; grid-row: 1; position: sticky; top: calc(var(--xb-sticky-top) + 1.5rem); align-self: start; max-height: calc(100vh - var(--xb-sticky-top) - 3rem); overflow-y: auto; scrollbar-width: thin; }
}
.xb-rail { margin: 0 !important; display: flex; flex-direction: column; gap: 1.5rem; }
.xb-rail > * { margin: 0 !important; }

/* Table of contents */
.xb-toc details { border: 1px solid var(--xb-line); border-radius: 12px; background: var(--xb-surface); padding: .9rem 1rem; }
.xb-toc summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; font-family: var(--xb-mono); font-size: var(--wp--preset--font-size--x-small); letter-spacing: .08em; text-transform: uppercase; color: var(--xb-accent); }
.xb-toc summary::-webkit-details-marker { display: none; }
.xb-toc summary::after { content: "+"; font-size: 1rem; line-height: 1; transition: transform .25s var(--xb-ease); }
.xb-toc details[open] summary::after { transform: rotate(45deg); }
.xb-toc ol { list-style: none; margin: .75rem 0 0; padding: 0; border-left: 1px solid var(--xb-line); counter-reset: xb-toc; }
.xb-toc li { margin: 0; }
.xb-toc a { display: block; padding: .32rem 0 .32rem .85rem; margin-left: -1px; border-left: 2px solid transparent; font-size: .875rem; line-height: 1.4; color: var(--xb-muted); text-decoration: none; transition: color .2s var(--xb-ease), border-color .2s var(--xb-ease); }
.xb-toc .xb-toc-l3 a { padding-left: 1.6rem; font-size: .82rem; }
.xb-toc a:hover { color: var(--xb-heading); }
.xb-toc a.is-active { color: var(--xb-heading); border-left-color: var(--xb-signal); font-weight: 500; }
@media (min-width: 1100px) {
	.xb-toc details { border: 0; background: none; padding: 0; }
	.xb-toc summary { pointer-events: none; }
	.xb-toc summary::after { content: none; }
}

/* Share */
.xb-share { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.xb-share-label { margin: 0; font-family: var(--xb-mono); font-size: var(--wp--preset--font-size--x-small); color: var(--xb-muted); text-transform: uppercase; letter-spacing: .08em; }
.xb-share ul { display: flex; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.xb-share-btn { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--xb-line); border-radius: 10px; background: transparent; color: var(--xb-text); cursor: pointer; transition: border-color .2s var(--xb-ease), color .2s var(--xb-ease), background-color .2s var(--xb-ease); }
.xb-share-btn svg { width: 16px; height: 16px; }
.xb-share-btn:hover { border-color: var(--xb-accent); color: var(--xb-accent); }
.xb-share-btn.is-done { background: var(--xb-signal); border-color: var(--xb-signal); color: var(--xb-ink); }
.xb-share-copy-item { display: none; }
.xb-js .xb-share-copy-item { display: block; }

/* Rail help card */
.xb-rail-help { padding: 1.1rem; border-radius: 12px; border: 1px solid var(--xb-line); background: linear-gradient(160deg, var(--xb-raised), var(--xb-surface) 70%); }
.xb-rail-help > * { margin: 0 !important; }
.xb-rail-help > * + * { margin-top: .6rem !important; }
.xb-rail-help p:not(.xb-label) { font-size: var(--wp--preset--font-size--small); color: var(--xb-text); line-height: 1.5; }
.xb-rail-help .wp-block-buttons { margin-top: 1rem !important; }
@media (max-width: 1099px) { .xb-rail-help { display: none; } }

/* Article typography */
.xb-prose { font-size: 1.125rem; line-height: 1.78; }
.xb-prose > * { max-width: 100%; }
.xb-prose > :first-child { margin-top: 0; }
.xb-prose > * + * { margin-block-start: 1.35em; }
.xb-prose > :where(h2, h3, h4) { margin-block-start: 2.2em; margin-block-end: 0; scroll-margin-top: calc(var(--xb-sticky-top) + 1rem); }
.xb-prose > :where(h2, h3, h4) + * { margin-block-start: .65em; }
.xb-prose h2 { font-size: clamp(1.6rem, 3vw, 2.05rem); }
.xb-prose h3 { font-size: clamp(1.3rem, 2.2vw, 1.5rem); }
.xb-prose h4 { font-size: 1.15rem; }
.xb-prose > p:first-child { font-size: 1.3rem; line-height: 1.6; color: var(--xb-heading); }
.xb-prose a { color: var(--xb-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.xb-prose a:hover { text-decoration-thickness: 2px; }
.xb-prose a.wp-element-button { text-decoration: none; color: var(--xb-ink); }
.xb-prose strong { color: var(--xb-heading); }
.xb-prose :where(ul, ol):not(.is-style-xb-checks) { padding-left: 1.3em; }
.xb-prose li + li { margin-top: .45em; }
.xb-prose ul:not(.is-style-xb-checks) li::marker { color: var(--xb-accent); }
.xb-prose ol li::marker { color: var(--xb-accent); font-family: var(--xb-mono); font-size: .9em; }
.xb-prose blockquote:not(.wp-block-pullquote blockquote) {
	margin-inline: 0;
	padding: 1.25rem 1.5rem;
	border-left: 3px solid var(--xb-signal);
	background: var(--xb-surface);
	border-radius: 0 12px 12px 0;
	font-family: var(--xb-display);
	font-size: 1.3rem;
	line-height: 1.45;
	color: var(--xb-heading);
}
.xb-prose blockquote p { margin: 0; }
.xb-prose blockquote cite { display: block; margin-top: .75rem; font-family: var(--xb-mono); font-size: var(--wp--preset--font-size--x-small); font-style: normal; color: var(--xb-muted); }
.xb-prose :not(pre) > code { font-family: var(--xb-mono); font-size: .88em; padding: .15em .4em; border-radius: 5px; background: var(--xb-raised); border: 1px solid var(--xb-line); }
.xb-prose .wp-block-code { background: #0d1117 !important; color: #e6edf3; border-color: #253041 !important; overflow-x: auto; font-size: .9rem; line-height: 1.6; }
.xb-prose :where(.wp-block-image, figure) img { border-radius: 12px; }
.xb-prose .alignwide, .xb-prose .alignfull { max-width: 100%; margin-inline: 0; }
.xb-prose figcaption, .xb-prose .wp-element-caption { font-family: var(--xb-mono); font-size: var(--wp--preset--font-size--x-small); color: var(--xb-muted); text-align: center; margin-top: .6rem; }
.xb-prose .wp-block-table { overflow-x: auto; }
.xb-prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.xb-prose th, .xb-prose td { border: 1px solid var(--xb-line); padding: .65rem .85rem; text-align: left; }
.xb-prose thead th { background: var(--xb-surface); font-family: var(--xb-mono); font-size: var(--wp--preset--font-size--x-small); text-transform: uppercase; letter-spacing: .05em; color: var(--xb-muted); }
.xb-prose hr { border: 0; border-top: 1px solid var(--xb-line); margin-block: 2.5em; }
.xb-prose .is-style-xb-callout,
.is-style-xb-callout { padding: 1.1rem 1.25rem 1.1rem 3.1rem; position: relative; border: 1px solid var(--xb-line); border-radius: 12px; background: var(--xb-surface); font-size: 1rem; }
.is-style-xb-callout::before { content: "i"; position: absolute; left: 1.1rem; top: 1.15rem; width: 1.3rem; height: 1.3rem; display: grid; place-items: center; border-radius: 50%; background: var(--xb-signal); color: var(--xb-ink); font: 700 .8rem/1 var(--xb-mono); }
.is-style-xb-checks { list-style: none; padding-left: 0 !important; }
.is-style-xb-checks li { position: relative; padding-left: 2rem; }
.is-style-xb-checks li::before { content: "✓"; position: absolute; left: 0; top: .2em; width: 1.3rem; height: 1.3rem; display: grid; place-items: center; border-radius: 5px; background: var(--xb-signal); color: var(--xb-ink); font-size: .75rem; font-weight: 700; }

/* Article footer */
.xb-post-foot { margin-top: var(--wp--preset--spacing--50) !important; padding-top: var(--wp--preset--spacing--40); border-top: 1px solid var(--xb-line); }
.xb-post-foot > * { margin: 0 !important; }
.xb-post-foot > * + * { margin-top: 1.5rem !important; }
.xb-tag-list { display: flex; flex-wrap: wrap; gap: .4rem; font-size: 0; }
.xb-tag-list a { font-family: var(--xb-mono); font-size: .75rem; padding: .3rem .7rem; border: 1px solid var(--xb-line); border-radius: 999px; color: var(--xb-text); text-decoration: none; }
.xb-tag-list a::before { content: "#"; color: var(--xb-accent); }
.xb-tag-list a:hover { border-color: var(--xb-accent); color: var(--xb-accent); }
.xb-tag-list .wp-block-post-terms__separator { display: none; }

.xb-author-box { padding: 1.4rem 1.5rem; border: 1px solid var(--xb-line); border-radius: var(--xb-radius); background: var(--xb-surface); }
.xb-author-box .xb-label { margin: 0 0 .85rem; }
.xb-author-box .wp-block-post-author { align-items: center; gap: 1rem; margin: 0; }
.xb-author-box .wp-block-post-author__avatar { margin: 0; }
.xb-author-box .wp-block-post-author__avatar img { border-radius: 50%; display: block; }
.xb-author-box .wp-block-post-author__name { font-family: var(--xb-display); font-weight: 600; font-size: var(--wp--preset--font-size--large); color: var(--xb-heading); }
.xb-author-box .wp-block-post-author__bio { color: var(--xb-muted); font-size: var(--wp--preset--font-size--small); margin-top: .25rem; }

.xb-post-nav { gap: 1rem !important; }
.xb-post-nav > div:empty { display: none; }
.xb-post-nav .post-navigation-link-previous,
.xb-post-nav .post-navigation-link-next { margin: 0; }
.xb-post-nav a {
	display: flex; flex-direction: column; gap: .35rem;
	height: 100%;
	box-sizing: border-box;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--xb-line);
	border-radius: 12px;
	background: var(--xb-surface);
	color: var(--xb-heading);
	font-family: var(--xb-display);
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none !important;
	transition: border-color .2s var(--xb-ease), transform .2s var(--xb-ease);
}
.xb-post-nav a:hover { border-color: var(--xb-hover-border); transform: translateY(-2px); }
.xb-post-nav .post-navigation-link__label { font-family: var(--xb-mono); font-size: var(--wp--preset--font-size--x-small); font-weight: 400; color: var(--xb-accent); text-transform: uppercase; letter-spacing: .08em; }
.xb-post-nav .post-navigation-link-next { text-align: right; }
.xb-post-nav .post-navigation-link-next a { align-items: flex-end; }
@media (max-width: 600px) { .xb-post-nav { grid-template-columns: 1fr !important; } }

.xb-related { border-top: 1px solid var(--xb-line); background: var(--xb-surface); }
.xb-related .xb-post-card { background: var(--xb-base); }

/* --------------------------------------------------------------------------
   CTA band (always dark)
   -------------------------------------------------------------------------- */
.xb-related + .xb-cta-wrap { background: var(--xb-surface); }
.xb-cta { position: relative; isolation: isolate; overflow: hidden; border-radius: 20px; }
.xb-cta::before {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px);
	background-size: 18px 18px;
	-webkit-mask-image: linear-gradient(105deg, transparent 35%, #000 100%);
	mask-image: linear-gradient(105deg, transparent 35%, #000 100%);
}
.xb-cta h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.4rem); text-wrap: balance; }
.xb-cta p:not(.is-style-xb-eyebrow) { color: rgba(255, 255, 255, .78); }
.xb-cta .is-style-xb-eyebrow { color: #ffd2d8; }
.xb-cta-contact { margin-top: 1rem !important; }
.xb-cta-contact a { color: #fff !important; font-family: var(--xb-mono); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.xb-footer { border-top: 1px solid var(--xb-line); overflow: hidden; background: var(--xb-base); }
.xb-footer h4 { font-family: var(--xb-mono); font-size: var(--wp--preset--font-size--x-small); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--xb-muted); }
.xb-footer-links { list-style: none; padding: 0; margin: 0; }
.xb-footer-links li { margin-bottom: .55rem; font-size: var(--wp--preset--font-size--small); color: var(--xb-text); }
.xb-footer-links a { color: var(--xb-text); font-size: var(--wp--preset--font-size--small); }
.xb-footer-links a:hover { color: var(--xb-accent); text-decoration: none; }
.xb-footer p { font-size: var(--wp--preset--font-size--small); }
.xb-footer-mark {
	margin: 0 !important;
	font-family: var(--xb-display);
	font-weight: 700;
	font-size: clamp(5rem, 22vw, 18rem) !important;
	line-height: .8;
	letter-spacing: -.06em;
	text-align: center;
	color: transparent;
	-webkit-text-stroke: 1px var(--xb-mark-stroke);
	user-select: none;
	transform: translateY(18%);
	background: linear-gradient(180deg, var(--xb-mark-fill), transparent 80%);
	-webkit-background-clip: text;
	background-clip: text;
}
.xb-footer-bottom { border-top: 1px solid var(--xb-line); position: relative; z-index: 1; background: var(--xb-base); }
.xb-footer-bottom p { margin: 0; font-family: var(--xb-mono); font-size: var(--wp--preset--font-size--x-small) !important; color: var(--xb-muted); }
.xb-footer-bottom a { color: var(--xb-muted); }

/* --------------------------------------------------------------------------
   Editor placeholders + motion
   -------------------------------------------------------------------------- */
.xb-editor-ph { padding: .75rem 1rem; border: 1px dashed var(--xb-line); border-radius: 10px; font-family: var(--xb-mono); font-size: .8rem; color: var(--xb-muted); }
.xb-editor-ph--icon { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	html { scroll-behavior: auto; }
}