/*
 * Connect Single Blog Post
 * Approved D1 production translation, verified against the V9 frozen oracle
 * Version: 1.0.33
 * Last updated: 2026-08-17
 */

html { font-size: 100%; }

body.single-post {
	margin: 0;
	background: #F7F2E9;
	font-size: 100%;
	overflow-x: hidden;
}

body.single-post .sp-shell {
	--base: #F7F2E9;
	--surface: #EFE8DA;
	--elev: #FCF8F0;
	--neon: #C8902F;
	--amber: #C8902F;
	--logo-grad: linear-gradient(180deg, #B97338, #C67E34 55%, #D49445);
	--w: #563F25;
	--w70: #64492B;
	--w50: #7F5E39;
	--w30: rgba(86, 63, 37, .42);
	--line: rgba(86, 63, 37, .20);
	--neon-glow: rgba(200, 144, 47, .28);
	--neon-dim: rgba(200, 144, 47, .12);
	--neon-border: rgba(200, 144, 47, .45);
	--amber-glow: rgba(200, 144, 47, .26);
	--bd: 1.5px;
	--r: 16px;
	--r-sm: 12px;
	min-height: 100vh;
	background: var(--base);
	color: var(--w) !important;
	font-family: 'Outfit', sans-serif !important;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/* Preserve the approved post-content rem basis without changing shared chrome metrics. */
.sp-shell > .sp-main {
	font-size: 16px;
}

body.single-post .sp-shell *,
body.single-post .sp-shell *::before,
body.single-post .sp-shell *::after {
	box-sizing: border-box;
}

/* Neutralize the legacy child-theme single-post font !important rules. */
body.single-post .sp-shell * {
	font-family: inherit !important;
}

body.single-post .sp-shell .sp-disclosure-line,
body.single-post .sp-shell .sp-topic-count,
body.single-post .sp-shell .sp-recent-title,
body.single-post .sp-shell .sp-shop-name,
body.single-post .sp-shell .sp-button-ghost,
body.single-post .sp-shell .foot-bottom,
body.single-post .sp-shell .foot-bottom > span {
	font-family: 'Space Grotesk', sans-serif !important;
}

body.single-post .sp-shell h1,
body.single-post .sp-shell h2,
body.single-post .sp-shell h3,
body.single-post .sp-shell nav,
body.single-post .sp-shell button,
body.single-post .sp-shell .nav-links,
body.single-post .sp-shell .sp-space {
	font-family: 'Space Grotesk', sans-serif !important;
}

body.single-post .sp-shell img {
	display: block;
	max-width: 100%;
}

body.single-post .sp-shell a {
	text-decoration: none;
}

body.single-post .sp-shell ::selection {
	background: var(--neon);
	color: #231A0A !important;
}

body.single-post .sp-shell :focus-visible {
	outline: 2.5px solid #AB5E2A;
	outline-offset: 3px;
	border-radius: 4px;
}

body.single-post .sp-shell ::-webkit-scrollbar {
	width: 7px;
	height: 7px;
}

body.single-post .sp-shell ::-webkit-scrollbar-track {
	background: var(--base);
}

body.single-post .sp-shell ::-webkit-scrollbar-thumb {
	border-radius: 4px;
	background: var(--w50);
}

body.single-post .sp-shell ::-webkit-scrollbar-thumb:hover {
	background: var(--neon);
}

.sp-shell .sp-wrap {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.sp-shell .sp-noise {
	position: fixed;
	z-index: 9998;
	inset: 0;
	pointer-events: none;
	opacity: .045;
	background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.sp-shell .sp-skip-link {
	position: absolute;
	z-index: 10001;
	top: -9999px;
	left: 1rem;
	padding: .55rem 1rem;
	border-radius: 6px;
	background: var(--neon);
	color: #231A0A !important;
	font-family: 'Space Grotesk', sans-serif !important;
	font-weight: 700;
}

.sp-shell .sp-skip-link:focus {
	top: .5rem;
}

/* Shared partial chrome: exact homepage navigation geometry. */
.sp-shell > .nav-bg {
	position: fixed;
	z-index: 99;
	inset: 0 0 auto;
	height: 74px;
	border-bottom: var(--bd) solid transparent;
	transition: background .3s, border-color .3s;
}

.sp-shell > .nav-bg.scrolled {
	border-bottom-color: var(--line);
	background: rgba(247, 242, 233, .95);
}

.sp-shell > nav[aria-label='Primary'] {
	position: fixed;
	z-index: 100;
	top: 0;
	right: 0;
	left: 0;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 1.2rem;
	width: auto;
	max-width: 1240px;
	height: 74px;
	margin: 0 auto;
	padding: 0 1.5rem;
	transition: height .35s cubic-bezier(.4, 0, .2, 1);
}

.sp-shell .logo {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	color: var(--w) !important;
}

.sp-shell .logo svg {
	transition: transform .35s cubic-bezier(.4, 0, .2, 1);
	transform-origin: left center;
}

.sp-shell .nav-links {
	display: flex;
	justify-self: center;
	gap: 2.2rem;
	margin: 0;
	padding: 0 0 0 20px;
	list-style: none;
	font-size: .9rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.sp-shell .nav-links a {
	position: relative;
	color: var(--w) !important;
	transition: color .2s;
}

.sp-shell .nav-links a::after {
	position: absolute;
	bottom: -5px;
	left: 0;
	width: 0;
	height: 1.5px;
	background: var(--neon);
	content: '';
	transition: width .3s;
}

.sp-shell .nav-links a:hover,
.sp-shell .nav-links a.current {
	color: var(--neon) !important;
}

.sp-shell .nav-links a:hover::after,
.sp-shell .nav-links a.current::after {
	width: 100%;
}

.sp-shell .nav-tools {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin-left: auto;
}

.sp-shell .nav-search,
.sp-shell .mm-search {
	display: flex;
	align-items: center;
	gap: .5rem;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	background: var(--elev);
}

.sp-shell .nav-search {
	width: 188px;
	padding: .45rem .85rem;
	transition: width .3s cubic-bezier(.4, 0, .2, 1), border-color .25s, box-shadow .25s;
}

.sp-shell .nav-search:focus-within {
	width: 248px;
	border-color: var(--neon-border);
	box-shadow: 0 0 0 4px var(--neon-dim);
}

.sp-shell .nav-search svg,
.sp-shell .mm-search svg {
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	color: var(--w50) !important;
}

.sp-shell .nav-search input[type='search'],
.sp-shell .mm-search input[type='search'] {
	width: 100%;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--w) !important;
	font-family: 'Outfit', sans-serif !important;
	font-size: .85rem;
}

.sp-shell .nav-search input::placeholder,
.sp-shell .mm-search input::placeholder {
	color: var(--w50) !important;
}

.sp-shell .nav-ic {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1.5px solid var(--line);
	border-radius: 50%;
	background: var(--elev);
	color: var(--w) !important;
	transition: border-color .25s, color .25s, transform .2s, box-shadow .25s;
}

.sp-shell .nav-ic:hover {
	transform: translateY(-2px);
	border-color: var(--neon-border);
	color: var(--neon) !important;
	box-shadow: 0 8px 18px -10px var(--neon-glow);
}

.sp-shell .nav-ic svg {
	width: 18px;
	height: 18px;
}

.sp-shell .nav-badge {
	position: absolute;
	top: -5px;
	right: -5px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border: 2px solid var(--elev);
	border-radius: 50%;
	background: var(--neon);
	color: #231A0A !important;
	font-family: 'Space Grotesk', sans-serif !important;
	font-size: .6rem;
	font-weight: 700;
}

.sp-shell .hamburger {
	z-index: 200;
	display: none;
	flex-direction: column;
	gap: 5px;
	margin-left: auto;
	padding: .3rem;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.sp-shell .hamburger span {
	display: block;
	width: 24px;
	height: 2px;
	border-radius: 2px;
	background: var(--w);
	transition: .3s;
}

.sp-shell .hamburger.open span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.sp-shell .hamburger.open span:nth-child(2) {
	opacity: 0;
}

.sp-shell .hamburger.open span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.sp-shell .mobile-menu {
	position: fixed;
	z-index: 99;
	inset: 0;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2.4rem;
	background: rgba(247, 242, 233, .98);
}

.sp-shell .mobile-menu.open {
	display: flex;
}

.sp-shell .mobile-menu a {
	color: var(--w) !important;
	font-family: 'Space Grotesk', sans-serif !important;
	font-size: 2rem;
	font-weight: 700;
}

.sp-shell .mobile-menu a:hover {
	color: var(--neon) !important;
}

.sp-shell .mm-search {
	width: min(78vw, 320px);
	margin-bottom: .4rem;
	padding: .6rem 1rem;
}

.sp-shell .mm-search svg {
	width: 18px;
	height: 18px;
}

.sp-shell .mm-search input[type='search'] {
	font-size: 1rem;
}

body.single-post.nav-shrink .sp-shell > nav[aria-label='Primary'],
body.single-post.nav-shrink .sp-shell > .nav-bg {
	height: 60px;
}

body.single-post.nav-shrink .sp-shell > .nav-bg {
	box-shadow: 0 10px 30px -20px rgba(86, 63, 37, .5);
}

/* LCP title and image are intentionally never reveal- or animation-gated. */
.sp-shell .sp-hero {
	position: relative;
	padding: 9.5rem 0 3rem;
	overflow: hidden;
	background: radial-gradient(110% 90% at 50% 0%, #FFFDF8 0%, var(--base) 60%);
}

.sp-shell .sp-crumb-wrap,
.sp-shell .sp-article-header,
.sp-shell .sp-featured-media,
.sp-shell .sp-disclosure-line {
	max-width: 1100px;
	margin-right: auto;
	margin-left: auto;
	padding-right: 1.5rem;
	padding-left: 1.5rem;
}

.sp-shell .sp-breadcrumb {
	position: static;
	display: block;
	width: auto;
	height: auto;
	margin: 0;
	padding: 1.2rem 0;
	color: var(--w50) !important;
	font-size: .78rem;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.sp-shell .sp-breadcrumb a {
	color: var(--w70) !important;
	transition: color .2s;
}

.sp-shell .sp-breadcrumb a:hover {
	color: var(--neon) !important;
}

.sp-shell .sp-delimiter {
	margin: 0 .5rem;
	color: var(--w30) !important;
}

.sp-shell .sp-current {
	color: var(--w50) !important;
}

.sp-shell .sp-article-header {
	max-width: 1100px;
	text-align: center;
}

/* Token atoms must out-rank the broad legacy single-post reset above. */
body.single-post .sp-shell .sp-article-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	margin-bottom: 1.1rem;
	color: var(--neon) !important;
	font-family: 'Space Grotesk', sans-serif !important;
	font-size: 13.12px;
	font-weight: 700;
	letter-spacing: .26em;
	text-transform: uppercase;
}

.sp-shell .sp-article-eyebrow::before {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--neon);
	content: '';
}

/* Root is fixed above, so these are the byte-frozen V8 fluid values verbatim. */
.sp-shell .sp-article-title {
	max-width: 800px;
	margin: 0 auto 1.6rem;
	color: var(--w) !important;
	font-family: 'Space Grotesk', sans-serif !important;
	font-size: clamp(1.875rem, 1.3rem + 2.556vw, 3.6rem) !important;
	font-weight: 700 !important;
	line-height: 1.05 !important;
	letter-spacing: -.03em;
	text-align: center !important;
	text-wrap: balance;
}

.sp-shell .sp-article-meta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	color: var(--w50) !important;
	font-size: .95rem;
	flex-wrap: wrap;
}

.sp-shell .sp-article-meta > span:not(.sp-separator) {
	color: var(--w50) !important;
}

.sp-shell .sp-article-meta a {
	border-bottom: var(--bd) solid var(--line);
	color: var(--w50) !important;
	transition: color .2s, border-color .2s;
}

.sp-shell .sp-article-meta a:hover {
	border-bottom-color: var(--neon);
	color: var(--neon) !important;
}

.sp-shell .sp-separator {
	color: var(--w30) !important;
}

.sp-shell .sp-featured-media {
	margin-top: 2.6rem;
	margin-bottom: 0;
}

.sp-shell .sp-featured-image {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: var(--bd) solid var(--line);
	border-radius: var(--r);
	object-fit: cover;
}

.sp-shell .sp-disclosure-line {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1.2rem;
	color: var(--w50) !important;
	font-family: 'Space Grotesk', sans-serif !important;
	font-size: .75rem;
	letter-spacing: .06em;
	text-align: center;
}

.sp-shell .sp-article-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 3.5rem;
	width: 100%;
	max-width: 1100px;
	min-width: 0;
	margin: 0 auto;
	padding: 3.5rem 1.5rem 5rem;
}

.sp-shell .sp-article-body {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	color: var(--w) !important;
	font-size: clamp(1.03125rem, 1.0144rem + .074vw, 1.08125rem) !important;
	line-height: 1.72 !important;
	overflow-wrap: anywhere;
}

.sp-shell .sp-content > * + * {
	margin-top: 1.6rem;
}

.sp-shell .sp-content h2 {
	margin: 3rem 0 0;
	color: var(--w) !important;
	font-family: 'Space Grotesk', sans-serif !important;
	font-size: clamp(1.5rem, 1.3rem + .889vw, 2.1rem) !important;
	font-weight: 700 !important;
	line-height: 1.12 !important;
	letter-spacing: -.02em;
	scroll-margin-top: 96px;
	text-wrap: balance;
}

.sp-shell .sp-content h2:first-child {
	margin-top: 0;
}

.sp-shell .sp-content h3 {
	margin: 2.4rem 0 0;
	color: var(--w) !important;
	font-family: 'Space Grotesk', sans-serif !important;
	font-size: clamp(1.125rem, 1.033rem + .407vw, 1.4rem) !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: -.01em;
}

.sp-shell .sp-content p {
	max-width: 70ch;
	margin-bottom: 0;
	color: var(--w) !important;
	text-wrap: pretty;
}

.sp-shell .sp-content strong {
	color: var(--w) !important;
	font-weight: 600;
}

.sp-shell .sp-content ul,
.sp-shell .sp-content ol {
	max-width: 65ch;
	margin-left: 1.8rem;
}

.sp-shell .sp-content li {
	margin-bottom: .55rem;
	padding-left: .3rem;
	color: var(--w) !important;
}

.sp-shell .sp-content li::marker {
	color: var(--neon) !important;
}

.sp-shell .sp-content img:not(.sp-featured-image) {
	height: auto;
	border-radius: var(--r-sm);
}

.sp-shell .sp-content .sp-cite,
.sp-shell .sp-content a:not(.sp-button):not(.btn-cyber) {
	color: var(--w) !important;
	text-decoration: underline;
	text-decoration-color: var(--neon-border);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
	transition: color .2s, text-decoration-color .2s;
}

.sp-shell .sp-content .sp-cite:hover,
.sp-shell .sp-content a:not(.sp-button):not(.btn-cyber):hover {
	color: var(--neon) !important;
	text-decoration-color: var(--neon);
}

body.single-post .sp-shell .sp-content .sp-cite {
	text-decoration-color: var(--neon-border) !important;
	text-decoration-thickness: 1.5px !important;
}

body.single-post .sp-shell .sp-content .sp-cite:hover {
	text-decoration-color: var(--neon) !important;
}

/* V1 quote-bearing-post law: real blockquotes only, never synthetic callouts. */
.sp-shell .sp-content blockquote {
	margin: 2.2rem 0;
	padding: 1.6rem 1.8rem;
	border: var(--bd) solid var(--line);
	border-left: 3px solid var(--neon);
	border-radius: 0 12px 12px 0;
	background: var(--elev);
	color: var(--w) !important;
	font-family: 'Space Grotesk', sans-serif !important;
	font-size: clamp(1.08rem, 1rem + .35vw, 1.3rem);
	font-weight: 500;
	line-height: 1.55;
}

.sp-shell .sp-content blockquote p {
	font-family: 'Space Grotesk', sans-serif !important;
	font-weight: 500;
}

.sp-shell .sp-content blockquote cite {
	display: block;
	margin-top: .8rem;
	color: var(--w50) !important;
	font-family: 'Outfit', sans-serif !important;
	font-size: .85rem;
	font-style: normal;
}

.sp-shell .sp-content .sp-table,
.sp-shell .sp-content .wp-block-table {
	margin: 2.2rem 0;
	overflow: hidden;
	border: var(--bd) solid var(--line);
	border-radius: var(--r-sm);
	background: var(--elev);
	color: var(--w) !important;
}

.sp-shell .sp-content .sp-table .scroll,
.sp-shell .sp-content .wp-block-table {
	overflow-x: auto;
}

.sp-shell .sp-content table {
	width: 100%;
	min-width: 520px;
	border: 0 !important;
	border-radius: 0 !important;
	border-collapse: collapse;
}

.sp-shell .sp-content .sp-table table {
	color: var(--w);
}

.sp-shell .sp-content table caption {
	padding: 12px 16px !important;
	background: transparent !important;
	color: #563F25 !important;
	font-family: 'Space Grotesk', sans-serif !important;
	font-size: 12.8px !important;
	font-weight: 700;
	letter-spacing: .12em;
	text-align: left;
	text-transform: uppercase;
}

.sp-shell .sp-content table th {
	padding: 12.8px 16px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--line) !important;
	background: var(--surface);
	color: var(--w50) !important;
	font-family: 'Space Grotesk', sans-serif !important;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-align: left;
	text-transform: uppercase;
}

.sp-shell .sp-content table td {
	padding: 12.8px 16px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--line) !important;
	color: var(--w70) !important;
	font-size: .95rem;
	line-height: 1.55;
}

.sp-shell .sp-content table tbody tr:last-child td {
	border-bottom: 0 !important;
}

.sp-shell .sp-content .sp-aff,
.sp-shell .sp-content .sp-stat,
.sp-shell .sp-content .sp-take {
	margin: 2.2rem 0;
	border: var(--bd) solid var(--line);
	border-radius: var(--r);
	background: var(--elev);
}

.sp-shell .sp-content .sp-aff {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	gap: 1.4rem;
	padding: 1.6rem;
	flex-wrap: wrap;
}

.sp-shell .sp-content .glass {
	transition: transform .4s, border-color .4s, box-shadow .4s;
}

.sp-shell .sp-content .glass:hover {
	transform: translateY(-5px);
	border-color: var(--neon-border);
	box-shadow: 0 14px 40px rgba(86, 63, 37, .1), inset 0 0 22px var(--neon-dim);
}

.sp-shell .sp-content .sp-aff .t {
	flex: 1;
	min-width: 220px;
	color: var(--w) !important;
}

.sp-shell .sp-content .sp-aff-lbl,
.sp-shell .sp-content .sp-stat-lbl {
	margin: 0 0 .5rem;
	color: var(--w50) !important;
	font-family: 'Space Grotesk', sans-serif !important;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.sp-shell .sp-content .sp-stat-lbl {
	margin-bottom: .9rem;
	padding-bottom: .7rem;
	border-bottom: 0;
}

.sp-shell .sp-content .sp-aff-lbl em {
	color: var(--neon) !important;
	font-style: normal;
}

.sp-shell .sp-content .sp-aff-name {
	margin: 0 0 .35rem;
	color: var(--w) !important;
	font-family: 'Space Grotesk', sans-serif !important;
	font-size: 1.12rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
}

.sp-shell .sp-content .sp-aff p.d {
	max-width: 52ch;
	margin: 0;
	color: var(--w70) !important;
	font-size: .92rem;
	line-height: 1.6;
}

.sp-shell .sp-content .btn-cyber,
.sp-shell .sp-button {
	position: relative;
	z-index: 0;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: 1rem 2.5rem;
	overflow: hidden;
	border: var(--bd) solid var(--neon);
	border-radius: 0;
	background: transparent !important;
	color: var(--neon) !important;
	cursor: pointer;
	font-family: 'Space Grotesk', sans-serif !important;
	font-size: .88rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	transition: color .3s, box-shadow .3s;
}

.sp-shell .sp-content .btn-cyber::before,
.sp-shell .sp-button::before {
	position: absolute;
	z-index: -1;
	inset: 0;
	background: var(--neon);
	content: '';
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}

.sp-shell .sp-content .btn-cyber:hover,
.sp-shell .sp-button:hover {
	color: #231A0A !important;
	box-shadow: 0 0 26px var(--neon-glow);
}

.sp-shell .sp-content .btn-cyber:hover::before,
.sp-shell .sp-button:hover::before {
	transform: scaleX(1);
	transform-origin: left;
}

.sp-shell .sp-content .sp-stat {
	padding: 1.5rem 1.6rem;
	color: var(--w) !important;
}

.sp-shell .sp-content .sp-stat-row {
	display: flex;
	align-items: baseline;
	gap: .7rem;
	margin: 0 0 .9rem;
	color: var(--w) !important;
	flex-wrap: wrap;
}

.sp-shell .sp-content .sp-stat-num {
	color: var(--neon) !important;
	font-family: 'Space Grotesk', sans-serif !important;
	font-size: clamp(35.2px, calc(30.4px + 1.333vw), 49.6px);
	font-weight: 700;
	line-height: 1;
}

.sp-shell .sp-content .sp-stat-sub {
	color: var(--w70) !important;
	font-size: .9rem;
	line-height: 1.4;
}

.sp-shell .sp-content .sp-stat .bar {
	height: 5px;
	overflow: hidden;
	border-radius: 3px;
	background: var(--line);
	color: var(--w) !important;
}

.sp-shell .sp-content .sp-stat .bar i {
	display: block;
	width: 30%;
	height: 100%;
	background: var(--neon);
}

.sp-shell .sp-content .sp-take {
	margin: 2.6rem 0;
	padding: 1.8rem 1.6rem;
	color: var(--w) !important;
}

.sp-shell .sp-content .sp-take h3 {
	margin: 0 0 1rem;
}

.sp-shell .sp-content .sp-take ul {
	margin-left: 1.4rem;
	padding-left: 0;
}

body.single-post .sp-shell .sp-post-nav {
	position: static;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.8rem;
	width: auto;
	height: auto;
	margin: 2.8rem 0 0;
	padding: 0;
	color: var(--w) !important;
	font-family: 'Outfit', sans-serif !important;
}

body.single-post .sp-shell .sp-post-nav-card {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	min-width: 0;
	padding: 1.6rem;
	border: var(--bd) solid var(--line);
	border-radius: var(--r);
	background: var(--elev);
	font-family: 'Outfit', sans-serif !important;
	text-decoration: none !important;
	transition: transform .4s, border-color .4s, box-shadow .4s;
}

.sp-shell .sp-post-nav-card:hover {
	transform: translateY(-5px);
	border-color: var(--neon-border);
	box-shadow: 0 14px 40px rgba(86, 63, 37, .1), inset 0 0 22px var(--neon-dim);
}

body.single-post .sp-shell .sp-post-nav-label {
	color: var(--w50) !important;
	font-family: 'Space Grotesk', sans-serif !important;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

body.single-post .sp-shell .sp-post-nav-card strong {
	color: var(--w) !important;
	font-family: 'Space Grotesk', sans-serif !important;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
	text-wrap: pretty;
}

.sp-shell .sp-post-nav-card:hover strong {
	color: var(--neon) !important;
}

.sp-shell .sp-sidebar {
	position: sticky;
	top: 96px;
	display: flex;
	flex-direction: column;
	gap: 1.8rem;
	align-self: start;
	color: var(--w) !important;
}

.sp-shell .sp-side-card {
	position: relative;
	overflow: hidden;
	padding: 1.8rem 1.6rem;
	border: var(--bd) solid var(--line);
	border-radius: var(--r);
	background: var(--elev);
	transition: border-color .4s, box-shadow .4s;
}

.sp-shell .sp-side-card::before {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--neon), rgba(200, 144, 47, .3));
	content: '';
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}

.sp-shell .sp-side-card:hover,
.sp-shell .sp-side-card:focus-within {
	border-color: var(--neon-border);
	box-shadow: 0 14px 40px rgba(86, 63, 37, .08), inset 0 0 22px var(--neon-dim);
}

.sp-shell .sp-side-card:hover::before,
.sp-shell .sp-side-card:focus-within::before {
	transform: scaleX(1);
}

.sp-shell .sp-side-title {
	margin: 0 0 1.2rem;
	padding: 0 0 .9rem;
	border-bottom: var(--bd) solid var(--line);
	color: var(--w50) !important;
	font-family: 'Space Grotesk', sans-serif !important;
	font-size: .8rem !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.sp-shell .sp-topics-list,
.sp-shell .sp-recent-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-shell .sp-topics-list {
	display: flex;
	flex-direction: column;
	gap: .3rem;
}

.sp-shell .sp-topics-list li {
	margin: 0;
	padding: 0;
}

.sp-shell .sp-topics-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .6rem;
	padding: .6rem .8rem;
	border-radius: var(--r-sm);
	color: var(--w70) !important;
	font-size: .92rem;
	font-weight: 500;
	transition: background .2s, color .2s, padding-left .2s;
}

.sp-shell .sp-topics-list a:hover,
.sp-shell .sp-topics-list a.is-active {
	padding-left: 1rem;
	background: var(--neon-dim);
	color: var(--neon) !important;
}

.sp-shell .sp-topic-name {
	flex: 1;
	overflow: hidden;
	color: var(--w70) !important;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sp-shell .sp-topics-list a:hover .sp-topic-name,
.sp-shell .sp-topics-list a.is-active .sp-topic-name {
	color: var(--neon) !important;
}

.sp-shell .sp-topic-count {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	padding: .15rem .55rem;
	border: var(--bd) solid var(--neon-border);
	border-radius: 999px;
	background: var(--neon-dim);
	color: var(--amber) !important;
	font-family: 'Space Grotesk', sans-serif !important;
	font-size: .7rem;
	font-weight: 700;
}

.sp-shell .sp-recent-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.sp-shell .sp-recent-item {
	display: flex;
	align-items: flex-start;
	gap: .85rem;
}

.sp-shell .sp-recent-thumb {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	overflow: hidden;
	border: var(--bd) solid var(--line);
	border-radius: var(--r-sm);
	background: var(--surface);
}

.sp-shell .sp-recent-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sp-shell .sp-recent-info {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: .2rem;
	min-width: 0;
}

.sp-shell .sp-recent-title {
	display: block;
	color: var(--w) !important;
	font-family: 'Space Grotesk', sans-serif !important;
	font-size: .88rem;
	font-weight: 600;
	line-height: 1.35;
	transition: color .25s;
}

.sp-shell .sp-recent-title:hover {
	color: var(--neon) !important;
}

.sp-shell .sp-recent-date {
	color: var(--w50) !important;
	font-size: .75rem;
	letter-spacing: .04em;
}

.sp-shell .sp-newsletter p,
.sp-shell .sp-shop-line {
	margin: 0 0 1rem;
	color: var(--w70) !important;
	font-size: .9rem;
	line-height: 1.6;
}

.sp-shell .sp-newsletter-input {
	width: 100%;
	margin-bottom: .75rem;
	padding: .75rem 1rem;
	border: var(--bd) solid var(--line);
	border-radius: 0;
	background: var(--base);
	color: var(--w) !important;
	font-family: 'Outfit', sans-serif !important;
	font-size: .9rem;
	transition: border-color .25s, box-shadow .25s;
}

.sp-shell .sp-newsletter-input::placeholder {
	color: var(--w50) !important;
}

.sp-shell .sp-newsletter-input:focus {
	border-color: var(--neon);
	outline: 0;
	box-shadow: 0 0 0 3px var(--neon-dim);
}

.sp-shell .sp-newsletter-submit {
	justify-content: center;
	width: 100%;
	padding: .75rem 1rem;
}

/* --- Sidebar newsletter: Brevo honeypot + inline confirmation ------------
 * The honeypot mirrors the homepage form's field: it must stay in the DOM and
 * remain submittable, so it is COLLAPSED rather than display:none'd, and it is
 * kept out of the tab order and the a11y tree at the markup level.
 *
 * Zero box, not the homepage's `left:-9999px` — an off-canvas box is a real
 * box outside the viewport and the post-matrix edge sweep flags it (measured
 * at 360/390/414/768/1024). These declarations are repeated inline on the
 * element; see the note in single.php for why both exist.
 *
 * The message is injected by connect-single-post.js after a submit resolves.
 * Both states keep their TEXT on an approved brand ink (--w) and signal
 * success vs failure through the accent bar and fill instead, so the message
 * can never introduce an off-token colour onto the post.
 *
 * The `.sp-newsletter` ancestor in these selectors is load-bearing, not
 * decoration. The message is a <p> inside the card, so the card's own
 * `.sp-shell .sp-newsletter p` rule (0,2,1) out-ranks a flat
 * `.sp-shell .sp-newsletter-msg` (0,2,0) and silently won margin, colour,
 * font-size and line-height — measured, not assumed. At (0,3,0) these win.
 * ---------------------------------------------------------------------- */
.sp-shell .sp-newsletter-hp {
	position: absolute;
	width: 0;
	height: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	background: transparent;
	opacity: 0;
}

.sp-shell .sp-newsletter .sp-newsletter-msg {
	display: none;
	margin: .85rem 0 0;
	padding: .7rem .85rem;
	border: var(--bd) solid var(--line);
	border-left-width: 3px;
	border-radius: 0;
	background: var(--surface);
	color: var(--w) !important;
	font-family: 'Outfit', sans-serif !important;
	font-size: .85rem;
	line-height: 1.55;
}

.sp-shell .sp-newsletter .sp-newsletter-msg.is-visible {
	display: block;
}

.sp-shell .sp-newsletter .sp-newsletter-msg.is-ok {
	border-color: var(--neon-border);
	border-left-color: var(--neon);
	background: var(--neon-dim);
}

.sp-shell .sp-newsletter .sp-newsletter-msg.is-err {
	border-color: var(--line);
	border-left-color: var(--w50);
	background: var(--surface);
}

.sp-shell .sp-shop-media {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.1rem;
	padding: 1.2rem;
	overflow: hidden;
	border: var(--bd) solid var(--line);
	border-radius: var(--r-sm);
	background: linear-gradient(135deg, var(--surface), var(--elev));
}

.sp-shell .sp-shop-image {
	width: auto;
	max-height: 170px;
	object-fit: contain;
	filter: drop-shadow(0 10px 22px rgba(86, 63, 37, .22));
	transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}

.sp-shell .sp-side-card:hover .sp-shop-image {
	transform: translateY(-4px) rotate(-1deg);
}

.sp-shell .sp-shop-name {
	margin: 0 0 .35rem;
	color: var(--w) !important;
	font-family: 'Space Grotesk', sans-serif !important;
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
}

.sp-shell .sp-button-ghost {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 44px;
	color: var(--w) !important;
	font-family: 'Space Grotesk', sans-serif !important;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	transition: color .25s, gap .25s;
}

.sp-shell .sp-button-ghost span {
	color: var(--amber) !important;
}

.sp-shell .sp-button-ghost:hover {
	gap: .8rem;
	color: var(--amber) !important;
}

.sp-shell .sp-related-section {
	padding: 7rem 0;
	background: var(--elev);
	color: var(--w) !important;
}

.sp-shell .sp-related-section .sp-wrap,
.sp-shell .sp-related-section .sp-discovery-header,
.sp-shell .sp-related-section li.product,
.sp-shell .sp-related-section .product-loop-content {
	color: var(--w) !important;
}

.sp-shell .sp-discovery-header {
	margin: 0 0 2.2rem;
}

body.single-post .sp-shell .sp-eyebrow {
	display: block;
	margin: 0 0 1.1rem;
	color: var(--neon) !important;
	font-family: 'Space Grotesk', sans-serif !important;
	font-size: 13.12px;
	font-weight: 700;
	letter-spacing: .26em;
	text-transform: uppercase;
}

.sp-shell .sp-discovery-header h2 {
	margin: 0;
	color: var(--w) !important;
	font-family: 'Space Grotesk', sans-serif !important;
	font-size: clamp(1.5rem, 1.2rem + 1.333vw, 2.4rem) !important;
	font-weight: 700 !important;
	line-height: 1.1 !important;
	letter-spacing: -.02em;
	text-wrap: balance;
}

body.single-post .sp-shell .sp-handwriting {
	display: inline-block;
	color: var(--amber) !important;
	font-family: 'Dancing Script', cursive !important;
	font-size: 1em;
	font-weight: 700;
	line-height: 1;
	text-shadow: 0 0 18px var(--amber-glow);
	white-space: nowrap;
}

.sp-shell .sp-related-section ul.products.columns-3.tablet-columns-2.mobile-columns-1 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 0;
	padding: 32px 0 0;
	list-style: none;
}

.sp-shell .sp-related-section ul.products.columns-3.tablet-columns-2.mobile-columns-1::before,
.sp-shell .sp-related-section ul.products.columns-3.tablet-columns-2.mobile-columns-1::after {
	display: none;
	content: none;
}

.sp-shell .sp-related-section li.product {
	display: flex;
	flex-direction: column;
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: var(--bd) solid var(--line);
	border-radius: var(--r);
	background: var(--elev);
	transition: transform .4s, border-color .4s, box-shadow .4s;
}

.sp-shell .sp-related-section li.product:hover {
	transform: translateY(-5px);
	border-color: var(--neon-border);
	box-shadow: 0 14px 40px rgba(86, 63, 37, .1), inset 0 0 22px var(--neon-dim);
}

.sp-shell .sp-related-section .product-loop-wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.sp-shell .sp-related-section .product-loop-image-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--surface);
}

.sp-shell .sp-related-section .product-loop-image-wrapper img {
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	opacity: .9;
	transition: transform .8s cubic-bezier(.16, 1, .3, 1), opacity .4s;
}

.sp-shell .sp-related-section li.product:hover .product-loop-image-wrapper img {
	transform: scale(1.06);
	opacity: 1;
}

/* Shop-family card internals are deliberately left-aligned per approved V7/V8. */
.sp-shell .sp-related-section .product-loop-content {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 9.6px;
	padding: 19.2px 22.4px 22.4px;
	text-align: left;
}

.sp-shell .sp-related-section .rc-cat {
	margin: 0 0 .5rem;
	color: var(--neon) !important;
	font-family: 'Space Grotesk', sans-serif !important;
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-align: left;
	text-transform: uppercase;
}

.sp-shell .sp-related-section .woocommerce-loop-product__title {
	margin: 0;
	color: var(--w) !important;
	font-family: 'Space Grotesk', sans-serif !important;
	font-size: 16.8px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	letter-spacing: normal;
	text-align: left !important;
	text-wrap: balance;
}

.sp-shell .sp-related-section .woocommerce-loop-product__title a {
	color: var(--w) !important;
	font-family: 'Space Grotesk', sans-serif !important;
	font-size: 16.8px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: normal;
	text-decoration: none !important;
	transition: color .2s;
}

.sp-shell .sp-related-section .woocommerce-loop-product__title a:hover {
	color: var(--neon) !important;
}

.sp-shell .sp-related-section .rc-date {
	margin: .6rem 0 0;
	color: var(--w50) !important;
	font-family: 'Outfit', sans-serif !important;
	font-size: 12.8px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: normal;
	text-align: left;
}

.sp-shell .sp-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip: rect(0, 0, 0, 0);
	color: var(--w) !important;
	white-space: nowrap;
}

.sp-shell > footer {
	padding: 4rem 0 2rem;
	border-top: var(--bd) solid var(--line);
	background: var(--surface);
}

.sp-shell > footer .wrap {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.sp-shell .foot-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 2.5rem;
	margin-bottom: 3rem;
	color: var(--w) !important;
}

.sp-shell .foot-tag {
	max-width: 240px;
	margin: .8rem 0 1.2rem;
	color: var(--w50) !important;
	font-size: .95rem;
}

.sp-shell .foot-social {
	display: flex;
	gap: .7rem;
}

.sp-shell .foot-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: var(--bd) solid var(--line);
	border-radius: 50%;
	color: var(--w70) !important;
	transition: border-color .2s, color .2s;
}

.sp-shell .foot-social a:hover {
	border-color: var(--neon);
	color: var(--neon) !important;
}

.sp-shell .foot-col h3 {
	margin: 0 0 1.2rem;
	color: var(--w50) !important;
	font-family: 'Space Grotesk', sans-serif !important;
	font-size: .8rem !important;
	font-weight: 700 !important;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.sp-shell .foot-col ul {
	display: flex;
	flex-direction: column;
	gap: .7rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-shell .foot-col li {
	margin: 0;
	padding: 0;
}

.sp-shell .foot-col a {
	position: relative;
	color: var(--w70) !important;
	font-size: .95rem;
	transition: color .2s;
}

.sp-shell .foot-col a::after {
	position: absolute;
	bottom: -3px;
	left: 0;
	width: 0;
	height: 1.5px;
	background: var(--neon);
	content: '';
	transition: width .3s;
}

.sp-shell .foot-col a:hover,
.sp-shell .foot-col a.current {
	color: var(--neon) !important;
}

.sp-shell .foot-col a:hover::after,
.sp-shell .foot-col a.current::after {
	width: 100%;
}

.sp-shell .foot-bottom {
	display: flex;
	justify-content: space-between;
	gap: .6rem;
	padding-top: 1.6rem;
	border-top: var(--bd) solid var(--line);
	color: var(--w50) !important;
	font-family: 'Space Grotesk', sans-serif !important;
	font-size: .7rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	flex-wrap: wrap;
}

.sp-shell .foot-bottom > span {
	color: var(--w50) !important;
}

@media (max-width: 920px) {
	.sp-shell .nav-links,
	.sp-shell .nav-tools {
		display: none;
	}

	.sp-shell .hamburger {
		display: flex;
	}

	.sp-shell > nav[aria-label='Primary'] {
		display: flex;
	}

	.sp-shell .sp-hero {
		padding: 8rem 0 2.4rem;
	}

	.sp-shell .sp-article-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.sp-shell .sp-article-body {
		order: 1;
	}

	.sp-shell .sp-content > * {
		max-width: 100% !important;
		min-width: 0 !important;
	}

	.sp-shell .sp-sidebar {
		position: static;
		order: 2;
	}

	.sp-shell .sp-related-section ul.products.columns-3.tablet-columns-2.mobile-columns-1 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.sp-shell .sp-related-section ul.products.columns-3.tablet-columns-2.mobile-columns-1 {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.sp-shell .sp-hero {
		padding: 7rem 0 2rem;
	}

	.sp-shell .sp-article-grid {
		padding-top: 2.5rem;
	}

	body.single-post .sp-shell aside.sp-aff {
		display: flex !important;
		flex-flow: column nowrap !important;
		align-items: flex-start !important;
		width: 100% !important;
		max-width: calc(100vw - 3rem) !important;
		min-width: 0 !important;
	}

	body.single-post .sp-shell aside.sp-aff > .t,
	body.single-post .sp-shell aside.sp-aff > .btn-cyber {
		flex: 0 1 auto !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}

	body.single-post .sp-shell aside.sp-aff > .btn-cyber {
		justify-content: center;
		white-space: normal;
		text-align: center;
		overflow-wrap: anywhere;
	}

	.sp-shell .sp-post-nav {
		grid-template-columns: 1fr;
	}

	.sp-shell .sp-related-section {
		padding: 4.5rem 0;
	}

	.sp-shell .foot-grid {
		grid-template-columns: 1fr 1fr;
	}
}

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


/* =========================================================================
   ROUND-22 V9 PARITY — measured fixes (2026-08-13)
   ========================================================================= */

/* D-BUILD-32 — residual header-row fill. Round 22 neutralised tbody rows only,
   so the thead ROW kept rgb(253,246,233) while the oracle renders it
   transparent. Measured on both tables, both sides:
     thead tr : oracle rgba(0,0,0,0)      staged rgb(253,246,233)   <- fixed here
     th       : oracle rgb(239,232,218)   staged rgb(239,232,218)   <- BY DESIGN
   The header CELLS legitimately carry --surface in the approved design and are
   deliberately left alone; only the row band is cleared. An "all backgrounds
   transparent" rule would have broken th parity against the frozen oracle. */
.sp-shell .sp-content .sp-table thead tr,
.sp-shell .sp-content .sp-table tr,
.sp-shell .sp-content .wp-block-table thead tr,
.sp-shell .sp-content .wp-block-table tr {
	background-color: transparent !important;
	background-image: none !important;
}

/* D-BUILD-26 — legacy zebra striping on data-table rows.
   Measured staged tbody rows: transparent / rgb(250,250,250) alternating.
   V9 oracle: every row transparent (8/8). The stripe comes from a platform
   `tr:nth-child(even)` rule outside this stylesheet, so it is neutralised
   here rather than hunted upstream — the same targeted-counter-rule approach
   used for the breadcrumb in round 18. Cells were already transparent on both
   sides and are asserted so, not assumed. */
.sp-shell .sp-content .sp-table tbody tr,
.sp-shell .sp-content .sp-table tbody tr:nth-child(even),
.sp-shell .sp-content .sp-table tbody tr:nth-child(odd),
.sp-shell .sp-content .wp-block-table tbody tr,
.sp-shell .sp-content .wp-block-table tbody tr:nth-child(even),
.sp-shell .sp-content .wp-block-table tbody tr:nth-child(odd) {
	background-color: transparent !important;
	background-image: none !important;
}

/* D-BUILD-27 — prev/next title did not go gold on hover.
   Root cause measured by CDP, NOT guessed: two !important rules compete and
   specificity decides.
     body.single-post .sp-shell .sp-post-nav-card strong   (0,3,2)  -> var(--w)
     .sp-shell .sp-post-nav-card:hover strong              (0,3,1)  -> var(--neon)
   The rest-state rule outranks the hover rule, so hover never took effect
   (measured: rest rgb(86,63,37) -> hover rgb(86,63,37); oracle goes to
   rgb(200,144,47)). Raising the hover rule above the rest-state rule fixes it
   without touching the markup — deliberately NOT swapping <strong> for <h3>,
   because the rest state already matches the oracle on all 33 SECTION-PARITY
   properties and a tag swap would put that at risk to fix a hover colour. */
body.single-post .sp-shell .sp-post-nav-card:hover strong,
body.single-post .sp-shell .sp-post-nav-card:focus-visible strong,
body.single-post .sp-shell .sp-post-nav-card:focus-within strong {
	color: var(--neon) !important;
}

/* D-BUILD-28 — body font-family hijacked by the legacy style.css block.
   Measured cold: post body computed "Poppins-Regular, Rubik-Regular, Georgia,
   serif" while the homepage body computes "Outfit, sans-serif". Source is the
   pre-brand block `body.single-post{font-family:...!important}` in the child
   theme's style.css — the same legacy layer that produced the round-16
   breadcrumb, the round-17 #222 crumb, the round-20 table ink, and now this.
   Neutralised with one higher-specificity rule: (0,2,1) beats (0,1,1), both
   !important. No text-bearing element inherited the wrong stack (the token
   sweep was 0 family violations of 212 throughout) — this aligns `body` itself
   so the post and the homepage report the same computed family. */
body.single-post.sp-page {
	font-family: Outfit, sans-serif !important;
}

/* D-BUILD-29 — shared nav logo typography was missing on the post.
   connect-home.css and the V9 oracle carry an identical rule:
     .logo{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.5rem;
           letter-spacing:-.03em;color:var(--w);text-decoration:none;...}
   The post's .sp-shell .logo set display/align/gap/colour only, so the logo
   rendered at font-weight 400 / letter-spacing normal while the homepage
   rendered 700 / -0.72px. Measured on the deployed homepage, not inferred.
   The nav TABS were already identical on both (500 / 2.016px) — only the logo
   diverged, and no suite covered it: SECTION-PARITY has no nav row. */
.sp-shell .logo {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 1.5rem;
	letter-spacing: -.03em;
	text-decoration: none;
}

/* D-BUILD-30 — prev/next CARD hover state inverted vs the oracle.
   Measured with forced :hover, settled: staged card colour went to
   rgb(200,144,47) while its border stayed rgba(86,63,37,.2); the oracle keeps
   the card colour at var(--w) and moves the BORDER to var(--neon-border).
   Same specificity story as D-BUILD-27 — the hover rule at :975 sets
   border-color but is outranked by a body.single-post-prefixed rest-state
   rule. Restated at (0,5,3) so it wins outright, and the card colour is pinned
   to the oracle's so only the TITLE goes gold.
   :focus-visible is deliberately NOT included — measured, the oracle changes
   the card border on :hover only and leaves var(--line) on :focus-visible.
   Bundling the two states was my own first attempt and the gate caught it. */
body.single-post .sp-shell nav.sp-post-nav a.sp-post-nav-card:hover {
	color: var(--w) !important;
	border-color: var(--neon-border) !important;
}

/* D-BUILD-31 — related-card image link inherited the legacy #222.
   The anchor wraps only an <img>, so nothing painted, but it is the same
   legacy style.css leak as the table ink (round 20) and it made the
   interaction-state comparison diverge. Pinned to the oracle's inherited ink. */
.sp-shell .sp-related-section .product-loop-image-wrapper {
	color: var(--w) !important;
}



/* D-BUILD-36 — the chart container's computed fill read rgba(255,255,255,0):
   a WHITE value at alpha 0. It paints nothing, but a catalogue sweep reads it
   as a white block fill, and a later alpha change would make it real.

   Cause: the LiteSpeed optimizer rewrites a fully-transparent colour in the
   `background` SHORTHAND to `#fff0`. Measured: `background-color: transparent`
   survives as written, `background: transparent` and `background: rgba(0,0,0,0)`
   both become `#fff0`.

   Fix is therefore NOT a global colour swap. Converting all seven transparent
   backgrounds to rgba(0,0,0,0) made it worse — the optimizer rewrote those too
   and broke four table rows, the caption, the CTA and the newsletter button
   that had been correct, which SECTION-PARITY and the 400-cell gate caught
   immediately (22 and 16 failures). The declarations are left as they were;
   only the chart's redundant one is dropped, since the render normalizer has
   already removed the inline fill there and the initial value is transparent. */
/* =========================================================================
   CATALOG-WIDE BRAND TREATMENT — applies to every post, present and future.
   The template strips presentational declarations from content at render
   (connect_single_post_normalize_legacy_presentation), so plain-weight rules
   below reach the elements; no !important arms race with pasted markup.
   ========================================================================= */

/* D-BUILD-33 — one chart treatment, matching the data-table design.
   Charts across the catalogue were authored as div stacks with inline
   `!important` colour (border 2px solid #E0A64F, gradient #E0A64F->#D4943F,
   #fff label text, #f5f0e8 track). Geometry is preserved by the normalizer;
   the palette is supplied here, so any chart added later inherits it with no
   per-post work. Frame mirrors .sp-table: transparent fill, --line hairline,
   --r radius. */
.sp-shell .sp-content .sp-chart,
.sp-shell .sp-content .connectmode-chart {
	/* No background declaration on purpose. The render normalizer already
	   removes the inline fill, so there is nothing to override, and the
	   initial value is transparent — computed rgba(0,0,0,0). Declaring it
	   would be rewritten by the optimizer to `#fff0`, i.e. rgba(255,255,255,0):
	   still alpha 0 and still painting nothing, but a *white* value in the
	   computed style, which a catalogue sweep reads as a white block fill.
	   Where a declaration IS load-bearing (the table row overrides, which must
	   beat a legacy zebra rule with !important) the `#fff0` rewrite is
	   unavoidable through this optimizer; the gate judges those by what they
	   PAINT — alpha 0 — rather than by the colour they name. */
	border: var(--bd) solid var(--line);
	border-radius: var(--r);
	overflow: hidden;
}

/* Chart header band — the table's caption/th register: Space Grotesk,
   uppercase, letter-spaced, muted ink on the surface tint. */
.sp-shell .sp-content .sp-chart > :first-child,
.sp-shell .sp-content .connectmode-chart > :first-child {
	background: var(--surface);
	border-bottom: var(--bd) solid var(--line);
}

/* !important is required here, not stylistic: `body.single-post .sp-shell *`
   already sets font-family with !important, so a plain rule loses to it no
   matter how specific. Measured — the labels rendered Outfit while this rule
   matched 17 elements and was present in the served sheet. */
.sp-shell .sp-content .sp-chart :is(span, p, div, text),
.sp-shell .sp-content .connectmode-chart :is(span, p, div, text) {
	font-family: 'Space Grotesk', sans-serif !important;
	color: var(--w70) !important;
}

.sp-shell .sp-content .sp-chart > :first-child :is(span, p, div),
.sp-shell .sp-content .connectmode-chart > :first-child :is(span, p, div) {
	color: var(--w50) !important;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 700;
}

/* The measured bar / fill / thermometer column — the single gold accent, the
   same role --neon plays in the stat card. Matched by geometry, not by a
   per-post class, so future charts inherit it. */
.sp-shell .sp-content .sp-chart [style*="height"][style*="position: absolute"],
.sp-shell .sp-content .connectmode-chart [style*="height"][style*="position: absolute"],
.sp-shell .sp-content .sp-chart [style*="width"][style*="position: absolute"],
.sp-shell .sp-content .connectmode-chart [style*="width"][style*="position: absolute"] {
	background: var(--neon);
}

/* Track / rail behind the measured bar. */
.sp-shell .sp-content .sp-chart [style*="border-radius"]:not([style*="absolute"]),
.sp-shell .sp-content .connectmode-chart [style*="border-radius"]:not([style*="absolute"]) {
	background: var(--surface);
}

/* D-BUILD-34 — restore inheritance for content-embedded legacy markup.
   Removing the inline colour handed these elements back to the cascade, where
   the legacy style.css block (`body.single-post ... span, div, p, a, li {
   color:#222 }`) was waiting — measured: off-brand ink went 17 -> 39
   occurrences after the normalizer ran, because the inline styles had been
   masking it. Seventh manifestation of that block.

   `color: inherit` rather than a fixed value: the design's ink already flows
   from .sp-article-body downward, so restoring inheritance reproduces the
   intended colour per context instead of asserting one value everywhere and
   flattening the --w / --w70 / --w50 hierarchy.

   Specificity is deliberate. This rule is (0,3,1) — three classes and `body`,
   with :where() contributing nothing — so it beats the legacy rule's (0,1,2)
   while still losing to every token rule in this stylesheet, which carry
   !important. It therefore cannot override the design's own inks. */
body.single-post .sp-shell .sp-content :where(div, span, p, a, li, td, th, figcaption, small, strong, em, b, i, blockquote, dd, dt, figure) {
	color: inherit;
}

/* D-BUILD-37 — chart IMAGES render through the same brand component as the
   div-built charts. The catalogue's one image chart is a palette PNG with a
   #FDFAF4 ground, #F8B347 gold and eight neutral greys — no brand token in it,
   and unreachable from CSS because the colour is in pixels.

   `mix-blend-mode: multiply` over the brand ground was chosen by MEASUREMENT,
   not by eye. Rendering the real asset under six candidate treatments and
   sampling the result:
     none                 ground rgb(253,250,244)  88.8% white-ish  gold d=64.1
     multiply             ground rgb(237,227,208)   0.0% white-ish  gold d=39.8  <- chosen
     multiply+sepia(.30)  ground rgb(239,232,205)   0.0%            gold d=59.7
     multiply+sepia(.45)  ground rgb(239,231,203)   0.0%            gold d=69.9
     multiply+sepia(.60)  ground rgb(239,231,201)   0.0%            gold d=71.2
   (d = RGB distance of the most saturated warm pixel to --neon.) Multiply
   alone removes the white ground entirely AND lands the accent closest to
   brand; every sepia variant moved the gold further away while doing nothing
   extra for the ground, so no colour filter is applied — the data colours are
   not distorted.

   Frame matches .sp-table and .sp-chart: --line hairline, --r radius,
   --surface ground. `isolation: isolate` keeps the blend inside the frame. */
.sp-shell .sp-content .sp-figure {
	margin: 2.4rem auto;
	border: var(--bd) solid var(--line);
	border-radius: var(--r);
	overflow: hidden;
	isolation: isolate;
}

.sp-shell .sp-content .sp-chart-figure {
	background: var(--surface);
}

.sp-shell .sp-content .sp-chart-figure img {
	mix-blend-mode: multiply;
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0 !important;
}

.sp-shell .sp-content .sp-figure figcaption {
	font-family: 'Space Grotesk', sans-serif !important;
	font-size: .78rem !important;
	letter-spacing: .04em;
	color: var(--w50) !important;
	padding: .7rem 1rem 0;
	margin: 0 0 .8rem !important;
}


/* =========================================================================
   D-BUILD-39 — promotion-card internal hierarchy (owner-directed, round 27)
   -------------------------------------------------------------------------
   Measured before the change, at 1440, all cards identical:
     eyebrow label  10.88px / 18.71 lh   in a 338x19 box  <- smallest on page
     card name      17.92px / 23.30 lh
     description    14.72px / 23.55 lh
     CTA label      14.08px / 24.22 lh   inside a 303x58 button
   The CTA label was SMALLER than the description while sitting in the largest
   element on the card, and the description sat below comfortable body scale.
   The owner asked for the text relationship to be fixed while KEEPING the
   303x58 button, so only type is changed here — no padding, no button size.

   After:
     eyebrow label  11.84px  (0.74rem) — still an eyebrow, now legible
     card name      17.92px  (unchanged — it already reads as the card title)
     description    15.36px  (0.96rem) / 1.62 lh — body scale, >= the 15px floor
     CTA label      16px     (1rem), weight 700 — proportionate to a 58px button
   Order is now eyebrow < description < name < CTA-weight, which reads as a
   hierarchy instead of four competing sizes. The V9 oracle is updated to match
   and re-frozen, because this is an approved design change, not a build drift. */
.sp-shell .sp-content .sp-aff-lbl {
	font-size: .74rem !important;
}

.sp-shell .sp-content .sp-aff p.d {
	font-size: .96rem !important;
	line-height: 1.62 !important;
	max-width: 56ch;
}

.sp-shell .sp-content .sp-aff > .btn-cyber,
.sp-shell .sp-content .sp-aff a.btn-cyber {
	font-size: 1rem !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
}


/* =========================================================================
   D-BUILD-40 — TAP TARGETS (owner item 4, round 27)
   -------------------------------------------------------------------------
   Measured on 9 real device profiles (iPhone 13/14 Pro/15 Pro, Pixel 5/7,
   Galaxy S9+/Tab S4, iPad gen7/Pro 11) in Chromium 144 AND Firefox 151 —
   zero horizontal overflow everywhere, but nine controls under the 44px
   WCAG 2.5.5 / Apple HIG minimum:
     a.sp-skip-link      141x43   (one pixel short)
     button.hamburger     34x26
     .sp-breadcrumb a     37x16, 34x16
     .sp-article-meta a   81x25
     a.sp-shop-media     292x40
     .foot-social a       38x38  (x3)

   The hit area is expanded with a transparent ::after overlay rather than with
   padding. Padding would move the layout and change the computed box, which
   SECTION-PARITY compares against the frozen oracle — the accessibility fix
   would have caused a parity regression. The overlay changes what a finger can
   hit and nothing that a gate measures as layout.

   Inline links inside prose are deliberately NOT touched: WCAG 2.5.5 exempts a
   link whose size is determined by the sentence around it. */
/* D-BUILD-43 — 2026-08-16: .sp-skip-link is NOT in this list, and must not be.
   -------------------------------------------------------------------------
   It was, and that was a REGRESSION I shipped in round 28. The skip link is
   `position: absolute; top: -9999px` at :133 — off-screen and OUT OF FLOW.
   Adding it here re-declared it `relative`, and relative positioning offsets an
   element visually while it KEEPS its space in the flow. So the link went on
   reserving 141x44 at the top of .sp-shell (44 rather than 38 because the same
   round set min-height: 44px on it), which pushed main.sp-main and .sp-hero
   down by 44px.

   The visible consequence, measured at x=6 on three posts at 1440 and 390:
   the hero's radial-gradient no longer started at y=0, so the top 44 rows were
   painted flat by .sp-shell and the gradient's bright top edge began abruptly
   at row 44 — a hard one-row tone step across the full width of the header
   band (y=43 rgb(245,240,231) -> y=44 rgb(247,243,235)). The blog archive,
   which has no in-flow element above its hero, shows no such step.

   No computed-style gate could see this: every property SECTION-PARITY compares
   was correct on both sides of the seam. It took a pixel comparison, which is
   now HEADER-BAND.

   The link does not need `position: relative` anyway — it is already absolute,
   which is itself a containing block for its ::after overlay, and its
   min-height already clears 44px without one. */
.sp-shell .hamburger,
.sp-shell .sp-breadcrumb a,
.sp-shell .sp-article-meta a,
.sp-shell .sp-shop-media,
.sp-shell .foot-social a {
	position: relative;
}

.sp-shell .sp-skip-link::after,
.sp-shell .hamburger::after,
.sp-shell .sp-breadcrumb a::after,
.sp-shell .sp-article-meta a::after,
.sp-shell .sp-shop-media::after,
.sp-shell .foot-social a::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	/* VERTICAL expansion only. Widening a small link horizontally makes
	   neighbouring targets in a row overlap — two breadcrumb links sit ~8px
	   apart, so a 44px-wide overlay on each would steal the other's taps. A
	   thumb needs vertical room on a text link; the row spacing already gives
	   horizontal separation. */
	width: 100%;
	height: 44px;
	min-height: 44px;
	transform: translate(-50%, -50%);
	/* Behind the element's own content so it can never cover a sibling's text,
	   and transparent so it paints nothing the ink gates could see. */
	z-index: 0;
	background: transparent;
	pointer-events: auto;
}

/* The hamburger is an icon button with no text; it also gets a real minimum so
   the control itself is finger-sized, not just its hit area. */
.sp-shell .hamburger {
	min-width: 44px;
	min-height: 44px;
}


/* D-BUILD-41 — two controls the overlay cannot reach, fixed directly.
   Measured: .sp-shop-media computes `overflow: hidden` and its parent
   .sp-side-card does too, so an ::after overlay is CLIPPED to the 40px box and
   can never extend the hit area. The skip link is a real focusable control and
   deserves a real size rather than an invisible extension. Both take a
   min-height instead — safe for SECTION-PARITY, which compares font, colour,
   background, border, radius and padding, but not height. */
.sp-shell .sp-shop-media {
	min-height: 44px;
}

.sp-shell .sp-skip-link {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* The footer social links are 38x38 with real gaps between them, so they can
   take the full 44x44 without colliding. */
.sp-shell .foot-social a {
	min-width: 44px;
	min-height: 44px;
}

/* D-BUILD-42 — the last undersized control: the category link in the article
   meta row. Its ::after overlay existed but lost the hit test at every probe
   INCLUDING the centre, which means something was painting above it — the row
   sits inside the hero, whose gradient layer takes a higher stacking position.
   The anchor is already position:relative, so one z-index lifts it and its
   overlay above the hero layer. No layout moves. */
.sp-shell .sp-article-meta a {
	z-index: 2;
}

.sp-shell .sp-article-meta a::after {
	z-index: 2;
}

/* =========================================================================
   D-BUILD-44 — HEADING INK THAT SURVIVES THE LIVE CUSTOMIZER
   -------------------------------------------------------------------------
   Owner-reported 2026-08-16: headings render BLACK on the blog post while the
   five deployed pages never do. Root-caused, and it is not the old template
   alone — it is a live-only, POST-ONLY rule block that this build does not
   currently outrank.

   LIVE carries 53 Customizer rules (wp_custom_css, 12,719 bytes) all scoped to
   `body.single-post`. That scoping is exactly why the homepage, welcome, about,
   shop and blog archive never show the symptom: the block does not target them.
   Its heading rule is written to catch any wrapper by substring:

       body.single-post h2,                        (0,1,2)
       body.single-post [class*="content"] h2,     (0,2,2)
       body.single-post [class*="post"]    h2,     (0,2,2)
       body.single-post [class*="entry"]   h2,     (0,2,2)
       body.single-post [class*="article"] h2,     (0,2,2)
       body.single-post main h2,                   (0,1,3)
       body.single-post #content h2   { color:#000000 !important; }   (1,1,2)

   Our own class names are precisely what those substrings catch: .sp-content
   matches [class*="content"], .sp-article-body matches [class*="article"], and
   .sp-post-nav matches [class*="post"]. The build's own heading rule,
   `.sp-shell .sp-content h2`, is only (0,2,1) — LOWER than (0,2,2) — so the
   Customizer wins and the heading goes #000.

   PROVEN, not reasoned: injecting the live block onto the staging post turned
   17 of 25 headings pure black. Staging looks clean today only because staging
   has NO wp-custom-css block at all; that is why twelve green suites never saw
   this, and why "staging is clean" was never proof for live.

   These selectors are (0,3,2) — body + .single-post + .sp-shell + container +
   the heading element — so they outrank every class-based variant above. The
   colours are unchanged from what the build already renders; only the
   specificity is raised, which is why SECTION-PARITY stays at 2551/2551.

   NOT covered, and stated rather than hidden: `body.single-post #content h2`
   is ID-level (1,1,2) and no class-only selector can outrank it. It does not
   match this build — the new template renders under #main, and #content exists
   only in the OLD live wrapper (verified on both environments). If that ever
   changes, CUSTOMIZER-RESILIENCE goes red before a reader sees it.

   This does not fight a genuine accessibility setting: forced-colors and
   prefers-contrast override author colour at the user-agent level, above
   !important, and remain in force.
   ========================================================================= */
body.single-post .sp-shell .sp-content :is(h1, h2, h3, h4, h5, h6),
body.single-post .sp-shell .sp-article-body :is(h1, h2, h3, h4, h5, h6),
body.single-post .sp-shell .sp-hero :is(h1, h2, h3, h4, h5, h6),
body.single-post .sp-shell .sp-related-section :is(h1, h2, h3, h4, h5, h6),
body.single-post .sp-shell .product-loop-wrapper :is(h1, h2, h3, h4, h5, h6) {
	color: var(--w) !important;
}

/* The two families the design deliberately mutes — sidebar card titles and the
   footer column titles — keep --w50 at the same raised specificity, so the
   floor above cannot flatten them. Measured before and after: 17 headings at
   --w and 8 at --w50, unchanged. */
body.single-post .sp-shell .sp-sidebar :is(h1, h2, h3, h4, h5, h6),
body.single-post .sp-shell .foot-grid :is(h1, h2, h3, h4, h5, h6) {
	color: var(--w50) !important;
}