/* ==========================================================================
   NineBarLab — Editorial Grid / Magazine
   Design tokens + components. Safe to load standalone (prototype) or in WP.
   ========================================================================== */

:root {
	/* Color — light */
	--nb-ink: #14100E;
	--nb-ink-soft: #4A4540;
	--nb-muted-text: #6B635B;
	--nb-base: #FFFFFF;
	--nb-paper: #FAF7F3;
	--nb-muted: #F0EAE2;
	--nb-border: #E2DACF;
	--nb-crema: #A6480C;
	--nb-crema-hover: #8A3A08;
	--nb-crema-soft: #E8A33D;
	--nb-crema-tint: #FDF3E6;
	--nb-steam: #1F6F5C;
	--nb-steam-tint: #E8F3EF;
	--nb-alert: #B42318;
	--nb-alert-tint: #FDECEA;

	/* Type */
	--nb-font-display: Newsreader, Georgia, "Times New Roman", serif;
	--nb-font-body: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--nb-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	/* Space */
	--nb-s1: 0.5rem;  --nb-s2: 1rem;   --nb-s3: 1.5rem;
	--nb-s4: 2rem;    --nb-s5: 3rem;   --nb-s6: 4rem;  --nb-s7: 6rem;

	/* Shape */
	--nb-r-sm: 6px; --nb-r-md: 10px; --nb-r-lg: 16px; --nb-r-pill: 999px;
	--nb-shadow-card: 0 1px 2px rgba(20,16,14,.04), 0 8px 24px rgba(20,16,14,.06);
	--nb-shadow-lift: 0 2px 6px rgba(20,16,14,.06), 0 16px 40px rgba(20,16,14,.10);

	/* Motion */
	--nb-fast: 150ms; --nb-base-t: 220ms; --nb-ease: cubic-bezier(.2,.7,.3,1);

	/* Layout */
	--nb-content: 720px;
	--nb-wide: 1200px;
	--nb-gutter: clamp(1rem, 4vw, 2rem);
}

[data-theme="dark"] {
	--nb-ink: #F5F1EC;
	--nb-ink-soft: #C9C1B8;
	--nb-muted-text: #A79E94;
	--nb-base: #16130F;
	--nb-paper: #100E0B;
	--nb-muted: #221D18;
	--nb-border: #332C25;
	--nb-crema: #E8A33D;
	--nb-crema-hover: #F2B963;
	--nb-crema-soft: #E8A33D;
	--nb-crema-tint: #2A2015;
	--nb-steam: #5FD3B4;
	--nb-steam-tint: #12261F;
	--nb-alert: #FF8A7A;
	--nb-alert-tint: #2C1614;
	--nb-shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
	--nb-shadow-lift: 0 2px 6px rgba(0,0,0,.45), 0 16px 40px rgba(0,0,0,.45);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--nb-base);
	color: var(--nb-ink);
	font-family: var(--nb-font-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6 {
	font-family: var(--nb-font-display);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.015em;
	margin: 0 0 var(--nb-s2);
	color: var(--nb-ink);
	text-wrap: balance;
}
p { text-wrap: pretty; }
a { color: var(--nb-crema); text-underline-offset: .18em; transition: color var(--nb-fast) var(--nb-ease); }
a:hover { color: var(--nb-ink); }
:focus-visible {
	outline: 3px solid var(--nb-crema-soft);
	outline-offset: 2px;
	border-radius: var(--nb-r-sm);
}
.nb-skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--nb-ink); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 var(--nb-r-md) 0;
}
.nb-skip-link:focus { left: 0; }
.screen-reader-text, .nb-sr {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px,1px,1px,1px); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */
.nb-wrap { width: 100%; max-width: var(--nb-wide); margin-inline: auto; padding-inline: var(--nb-gutter); }
.nb-narrow { max-width: var(--nb-content); margin-inline: auto; }
.nb-grid { display: grid; gap: var(--nb-s4); }
.nb-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.nb-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.nb-stack > * + * { margin-top: var(--nb-s3); }
.nb-section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.nb-section--paper { background: var(--nb-paper); }

/* Eyebrow / kicker */
.nb-eyebrow {
	font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: var(--nb-crema); margin: 0 0 var(--nb-s1);
}
.nb-section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--nb-s2); margin-bottom: var(--nb-s4); }
.nb-section-head h2 { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.1rem); }
.nb-lede { font-size: 1.15rem; color: var(--nb-ink-soft); line-height: 1.6; }

/* --------------------------------------------------------------------------
   Disclosure bar + Header
   -------------------------------------------------------------------------- */
.nb-topbar {
	background: var(--nb-ink); color: #EFE7DD;
	font-size: .75rem; letter-spacing: .01em; text-align: center; padding: .45rem var(--nb-gutter);
}
.nb-topbar a { color: var(--nb-crema-soft); }

.nb-header {
	position: sticky; top: 0; z-index: 50;
	background: color-mix(in srgb, var(--nb-base) 88%, transparent);
	backdrop-filter: saturate(160%) blur(10px);
	border-bottom: 1px solid var(--nb-border);
}
.nb-header__inner {
	max-width: var(--nb-wide); margin-inline: auto; padding: .75rem var(--nb-gutter);
	display: flex; align-items: center; gap: var(--nb-s3); justify-content: space-between;
}
.nb-logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--nb-ink); }
.nb-logo:hover { color: var(--nb-ink); }
.nb-logo__mark { display: block; width: 30px; height: 30px; flex: none; }
.nb-logo__text { font-family: var(--nb-font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: -.02em; }
.nb-logo__text span { color: var(--nb-crema); }

.nb-nav:not(.wp-block-navigation) { display: flex; align-items: center; gap: .25rem; }
.nb-nav:not(.wp-block-navigation) a {
	display: inline-block; padding: .55rem .7rem; border-radius: var(--nb-r-sm);
	font-size: .9375rem; font-weight: 500; color: var(--nb-ink-soft); text-decoration: none;
	transition: background var(--nb-fast) var(--nb-ease), color var(--nb-fast) var(--nb-ease);
}
.nb-nav:not(.wp-block-navigation) a:hover,
.nb-nav:not(.wp-block-navigation) a[aria-current="page"] { background: var(--nb-muted); color: var(--nb-ink); }
.nb-header__actions { display: flex; align-items: center; gap: .5rem; }
.nb-iconbtn {
	display: inline-grid; place-items: center; width: 44px; height: 44px;
	border: 1px solid var(--nb-border); border-radius: var(--nb-r-md);
	background: transparent; color: var(--nb-ink); cursor: pointer;
	transition: background var(--nb-fast) var(--nb-ease);
}
.nb-iconbtn:hover { background: var(--nb-muted); }
.nb-iconbtn svg { width: 20px; height: 20px; }
.nb-nav-toggle { display: none; }

/* Prototype-only mobile nav. WordPress uses core/navigation's own overlay,
   so these rules are scoped away from .wp-block-navigation. */
@media (max-width: 900px) {
	.nb-nav:not(.wp-block-navigation) {
		position: fixed; inset: 64px 0 auto 0; flex-direction: column; align-items: stretch;
		background: var(--nb-base); border-bottom: 1px solid var(--nb-border);
		padding: var(--nb-s2) var(--nb-gutter) var(--nb-s3);
		gap: .15rem; transform: translateY(-12px); opacity: 0; pointer-events: none;
		transition: opacity var(--nb-base-t) var(--nb-ease), transform var(--nb-base-t) var(--nb-ease);
		box-shadow: var(--nb-shadow-card);
	}
	.nb-nav:not(.wp-block-navigation)[data-open="true"] { transform: none; opacity: 1; pointer-events: auto; }
	.nb-nav:not(.wp-block-navigation) a { padding: .8rem .7rem; font-size: 1rem; }
	.nb-nav-toggle { display: inline-grid; }
}

/* --------------------------------------------------------------------------
   Hero — asymmetric editorial grid
   -------------------------------------------------------------------------- */
.nb-hero { border-bottom: 1px solid var(--nb-border); background: var(--nb-paper); }
.nb-hero__inner {
	max-width: var(--nb-wide); margin-inline: auto; padding: clamp(2rem,5vw,3.5rem) var(--nb-gutter);
	display: grid; gap: var(--nb-s4); grid-template-columns: 1fr;
}
@media (min-width: 960px) { .nb-hero__inner { grid-template-columns: 1.15fr .85fr; align-items: center; } }
.nb-hero h1 {
	font-size: clamp(2.25rem, 5.2vw, 3.85rem);
	letter-spacing: -.03em; line-height: 1.05; margin-bottom: var(--nb-s3);
}
.nb-hero h1 em { font-style: italic; color: var(--nb-crema); }
.nb-hero__meta { display: flex; flex-wrap: wrap; gap: var(--nb-s3); margin-top: var(--nb-s4); }
.nb-stat { border-left: 2px solid var(--nb-crema-soft); padding-left: .75rem; }
.nb-stat b { display: block; font-family: var(--nb-font-display); font-size: 1.5rem; line-height: 1.1; }
.nb-stat span { font-size: .8125rem; color: var(--nb-muted-text); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.nb-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	min-height: 48px; padding: .85rem 1.5rem;
	font-family: var(--nb-font-body); font-size: .9375rem; font-weight: 600; line-height: 1.2;
	text-decoration: none; cursor: pointer; border: 1px solid transparent; border-radius: var(--nb-r-md);
	background: var(--nb-crema); color: #fff;
	transition: background var(--nb-base-t) var(--nb-ease), transform var(--nb-fast) var(--nb-ease), box-shadow var(--nb-base-t) var(--nb-ease);
}
.nb-btn:hover { background: var(--nb-crema-hover); color: #fff; transform: translateY(-1px); box-shadow: var(--nb-shadow-card); }
.nb-btn:active { transform: translateY(0); }
[data-theme="dark"] .nb-btn { color: #14100E; }
.nb-btn--ghost { background: transparent; color: var(--nb-ink); border-color: var(--nb-border); }
.nb-btn--ghost:hover { background: var(--nb-muted); color: var(--nb-ink); box-shadow: none; }
.nb-btn--ink { background: var(--nb-ink); color: var(--nb-base); }
.nb-btn--ink:hover { background: #2A211B; color: var(--nb-base); }
.nb-btn--block { width: 100%; }
.nb-btn svg { width: 18px; height: 18px; flex: none; }

/* --------------------------------------------------------------------------
   Rating
   -------------------------------------------------------------------------- */
.nb-rating { display: inline-flex; align-items: center; gap: .4rem; font-size: .875rem; color: var(--nb-ink-soft); }
.nb-stars { position: relative; display: inline-block; line-height: 1; color: var(--nb-border); }
.nb-stars__fill { position: absolute; inset: 0; overflow: hidden; white-space: nowrap; color: var(--nb-crema-soft); }
.nb-stars svg { display: inline-block; width: 16px; height: 16px; fill: currentColor; }
.nb-score {
	display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 .5rem;
	background: var(--nb-ink); color: #fff; border-radius: var(--nb-r-md);
	font-family: var(--nb-font-display); font-size: 1.15rem; font-weight: 700; line-height: 1;
}
.nb-score small { display: block; font-family: var(--nb-font-body); font-size: .55rem; font-weight: 500; opacity: .7; letter-spacing: .08em; }
[data-theme="dark"] .nb-score { background: var(--nb-crema); color: #14100E; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.nb-card {
	position: relative; display: flex; flex-direction: column;
	background: var(--nb-base); border: 1px solid var(--nb-border); border-radius: var(--nb-r-lg);
	overflow: hidden; transition: box-shadow var(--nb-base-t) var(--nb-ease), transform var(--nb-base-t) var(--nb-ease), border-color var(--nb-base-t) var(--nb-ease);
}
.nb-card:hover { box-shadow: var(--nb-shadow-lift); transform: translateY(-3px); border-color: var(--nb-crema-soft); }
.nb-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--nb-muted); overflow: hidden; }
.nb-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--nb-ease); }
.nb-card:hover .nb-card__media img { transform: scale(1.03); }
.nb-card__body { padding: var(--nb-s3); display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.nb-card__title { font-size: 1.2rem; margin: 0; line-height: 1.25; }
.nb-card__title a { color: var(--nb-ink); text-decoration: none; }
.nb-card__title a:hover { color: var(--nb-crema); }
.nb-card__excerpt { margin: 0; font-size: .9375rem; color: var(--nb-ink-soft); }
.nb-card__foot { margin-top: auto; padding-top: .6rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; border-top: 1px solid var(--nb-border); font-size: .8125rem; color: var(--nb-muted-text); }
.nb-card--feature { }
@media (min-width: 760px) {
	.nb-card--feature { flex-direction: row; }
	.nb-card--feature .nb-card__media { flex: 0 0 46%; aspect-ratio: auto; }
	.nb-card--feature .nb-card__body { padding: var(--nb-s4); gap: .75rem; }
	.nb-card--feature .nb-card__title { font-size: 1.6rem; }
}

.nb-badge {
	display: inline-flex; align-items: center; gap: .35rem;
	padding: .25rem .6rem; border-radius: var(--nb-r-pill);
	font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	background: var(--nb-muted); color: var(--nb-ink-soft); text-decoration: none;
}
.nb-badge--award { background: var(--nb-crema); color: #fff; }
.nb-badge--value { background: var(--nb-steam-tint); color: var(--nb-steam); }
.nb-badge--budget { background: var(--nb-crema-tint); color: var(--nb-crema); }
.nb-card__ribbon { position: absolute; top: .75rem; left: .75rem; z-index: 2; box-shadow: 0 2px 8px rgba(20,16,14,.2); }

/* --------------------------------------------------------------------------
   Key takeaways (AI / answer-engine block) + Verdict
   -------------------------------------------------------------------------- */
.nb-takeaways {
	background: var(--nb-crema-tint); border: 1px solid var(--nb-crema-soft);
	border-radius: var(--nb-r-lg); padding: var(--nb-s3); margin-block: var(--nb-s4);
}
.nb-takeaways h2, .nb-takeaways h3 { font-size: 1.05rem; margin: 0 0 .6rem; display: flex; align-items: center; gap: .5rem; }
.nb-takeaways ul { margin: 0; padding-left: 1.1rem; }
.nb-takeaways li { margin-bottom: .4rem; font-size: .9375rem; }
.nb-takeaways li::marker { color: var(--nb-crema); }

.nb-verdict {
	display: grid; gap: var(--nb-s3); align-items: start;
	background: var(--nb-paper); border: 1px solid var(--nb-border); border-radius: var(--nb-r-lg);
	padding: var(--nb-s3); margin-block: var(--nb-s4);
}
@media (min-width: 720px) { .nb-verdict { grid-template-columns: 200px 1fr; } }
.nb-verdict__score { text-align: center; padding: var(--nb-s2); background: var(--nb-base); border: 1px solid var(--nb-border); border-radius: var(--nb-r-md); }
.nb-verdict__score b { display: block; font-family: var(--nb-font-display); font-size: 3rem; line-height: 1; color: var(--nb-crema); }
.nb-verdict__score span { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--nb-muted-text); }
.nb-verdict h2, .nb-verdict h3 { margin-top: 0; font-size: 1.3rem; }
.nb-verdict p { margin: 0 0 var(--nb-s2); }

/* Scorecard bars */
.nb-scorecard { display: grid; gap: .55rem; margin-top: var(--nb-s2); }
.nb-scorecard__row { display: grid; grid-template-columns: minmax(90px, 130px) 1fr 2.5rem; align-items: center; gap: .75rem; font-size: .875rem; }
.nb-meter { height: 8px; background: var(--nb-muted); border-radius: var(--nb-r-pill); overflow: hidden; }
.nb-meter > i { display: block; height: 100%; background: linear-gradient(90deg, var(--nb-crema-soft), var(--nb-crema)); border-radius: inherit; }
.nb-scorecard__row b { text-align: right; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Pros / Cons
   -------------------------------------------------------------------------- */
.nb-proscons { display: grid; gap: var(--nb-s2); margin-block: var(--nb-s4); }
@media (min-width: 640px) { .nb-proscons { grid-template-columns: 1fr 1fr; } }
.nb-proscons__col { border: 1px solid var(--nb-border); border-radius: var(--nb-r-lg); padding: var(--nb-s3); background: var(--nb-base); }
.nb-proscons__col h3 { font-size: .8125rem; text-transform: uppercase; letter-spacing: .1em; font-family: var(--nb-font-body); font-weight: 700; margin: 0 0 .75rem; }
.nb-proscons ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.nb-proscons li { display: grid; grid-template-columns: 20px 1fr; gap: .55rem; font-size: .9375rem; line-height: 1.5; }
.nb-proscons li svg { width: 18px; height: 18px; margin-top: .18rem; }
.nb-pros { border-top: 3px solid var(--nb-steam); }
.nb-pros h3 { color: var(--nb-steam); }
.nb-pros li svg { color: var(--nb-steam); }
.nb-cons { border-top: 3px solid var(--nb-alert); }
.nb-cons h3 { color: var(--nb-alert); }
.nb-cons li svg { color: var(--nb-alert); }

/* --------------------------------------------------------------------------
   Spec table + Comparison table
   -------------------------------------------------------------------------- */
.nb-specs { width: 100%; border-collapse: collapse; margin-block: var(--nb-s3); font-size: .9375rem; }
.nb-specs th, .nb-specs td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--nb-border); vertical-align: top; }
.nb-specs th { width: 40%; font-weight: 600; color: var(--nb-ink-soft); background: var(--nb-paper); }
.nb-specs tr:last-child th, .nb-specs tr:last-child td { border-bottom: 0; }
.nb-specs-wrap { border: 1px solid var(--nb-border); border-radius: var(--nb-r-lg); overflow: hidden; }

.nb-tablescroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--nb-border); border-radius: var(--nb-r-lg); }
.nb-compare { width: 100%; min-width: 720px; border-collapse: collapse; font-size: .9375rem; background: var(--nb-base); }
.nb-compare th, .nb-compare td { padding: .85rem .9rem; text-align: left; border-bottom: 1px solid var(--nb-border); }
.nb-compare thead th { background: var(--nb-paper); font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; position: sticky; top: 0; z-index: 1; }
.nb-compare tbody th { position: sticky; left: 0; background: var(--nb-base); font-weight: 600; z-index: 0; }
.nb-compare tr:hover td { background: var(--nb-paper); }
.nb-compare .nb-yes { color: var(--nb-steam); font-weight: 700; }
.nb-compare .nb-no { color: var(--nb-muted-text); }
.nb-tablehint { font-size: .8125rem; color: var(--nb-muted-text); margin: .5rem 0 0; }

/* --------------------------------------------------------------------------
   Affiliate CTA
   -------------------------------------------------------------------------- */
.nb-cta {
	display: grid; gap: var(--nb-s2); align-items: center;
	border: 1px solid var(--nb-border); border-left: 4px solid var(--nb-crema);
	border-radius: var(--nb-r-lg); padding: var(--nb-s3); background: var(--nb-paper);
	margin-block: var(--nb-s4);
}
@media (min-width: 700px) { .nb-cta { grid-template-columns: 100px 1fr auto; } }
.nb-cta__img { border-radius: var(--nb-r-md); background: var(--nb-base); border: 1px solid var(--nb-border); }
.nb-cta__name { font-family: var(--nb-font-display); font-size: 1.15rem; font-weight: 600; margin: 0 0 .25rem; }
.nb-cta__note { font-size: .8125rem; color: var(--nb-muted-text); margin: .4rem 0 0; }
.nb-cta__price { font-size: 1.05rem; font-weight: 700; }

.nb-sticky-cta {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
	display: none; gap: var(--nb-s2); align-items: center; justify-content: space-between;
	padding: .7rem var(--nb-gutter);
	background: color-mix(in srgb, var(--nb-base) 94%, transparent);
	backdrop-filter: blur(10px); border-top: 1px solid var(--nb-border);
	box-shadow: 0 -6px 24px rgba(20,16,14,.08);
	padding-bottom: max(.7rem, env(safe-area-inset-bottom));
}
.nb-sticky-cta[data-visible="true"] { display: flex; }
.nb-sticky-cta strong { font-size: .9375rem; }
@media (min-width: 900px) { .nb-sticky-cta { display: none !important; } }

/* --------------------------------------------------------------------------
   Article body
   -------------------------------------------------------------------------- */
.nb-article { font-size: 1.0625rem; line-height: 1.75; }
.nb-article > * { max-width: var(--nb-content); margin-inline: auto; }
.nb-article > .alignwide { max-width: 1000px; }
.nb-article > .alignfull { max-width: none; }
.nb-article h2 { margin-top: var(--nb-s5); font-size: clamp(1.5rem, 3vw, 1.9rem); scroll-margin-top: 90px; }
.nb-article h3 { margin-top: var(--nb-s4); font-size: 1.28rem; scroll-margin-top: 90px; }
.nb-article p { margin: 0 0 1.15rem; }
.nb-article ul, .nb-article ol { margin: 0 0 1.15rem; padding-left: 1.35rem; }
.nb-article li { margin-bottom: .45rem; }
.nb-article figure { margin: var(--nb-s4) auto; }
.nb-article figcaption { font-size: .8125rem; color: var(--nb-muted-text); margin-top: .5rem; text-align: center; }
.nb-article blockquote {
	margin: var(--nb-s4) auto; padding-left: var(--nb-s3);
	border-left: 3px solid var(--nb-crema-soft);
	font-family: var(--nb-font-display); font-size: 1.28rem; line-height: 1.45; font-style: italic; color: var(--nb-ink-soft);
}

/* Article header */
.nb-postheader { padding-block: var(--nb-s5) var(--nb-s3); }
.nb-postheader h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); letter-spacing: -.028em; }
.nb-byline { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; font-size: .875rem; color: var(--nb-muted-text); margin-top: var(--nb-s3); }
.nb-byline img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.nb-byline a { color: var(--nb-ink-soft); }
.nb-byline__sep { opacity: .4; }

/* Breadcrumbs */
.nb-crumbs { font-size: .8125rem; color: var(--nb-muted-text); padding-block: var(--nb-s2); }
.nb-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.nb-crumbs li::after { content: "/"; margin-left: .4rem; opacity: .45; }
.nb-crumbs li:last-child::after { content: ""; }
.nb-crumbs a { color: var(--nb-muted-text); text-decoration: none; }
.nb-crumbs a:hover { color: var(--nb-crema); text-decoration: underline; }

/* TOC */
.nb-toc {
	background: var(--nb-paper); border: 1px solid var(--nb-border); border-radius: var(--nb-r-lg);
	padding: var(--nb-s3); margin-block: var(--nb-s4);
}
.nb-toc > strong { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--nb-muted-text); margin-bottom: .6rem; }
.nb-toc ol { list-style: none; counter-reset: toc; margin: 0; padding: 0; display: grid; gap: .35rem; }
.nb-toc li { counter-increment: toc; font-size: .9375rem; }
.nb-toc li::before { content: counter(toc) "."; color: var(--nb-crema); font-weight: 700; margin-right: .45rem; }
.nb-toc li.is-sub { padding-left: 1.4rem; font-size: .875rem; }
.nb-toc a { color: var(--nb-ink-soft); text-decoration: none; }
.nb-toc a:hover { color: var(--nb-crema); text-decoration: underline; }

/* FAQ */
.nb-faq { display: grid; gap: .5rem; margin-block: var(--nb-s4); }
.nb-faq details { border: 1px solid var(--nb-border); border-radius: var(--nb-r-md); background: var(--nb-base); }
.nb-faq summary {
	cursor: pointer; list-style: none; padding: .95rem 1.1rem; font-weight: 600;
	display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 48px;
}
.nb-faq summary::-webkit-details-marker { display: none; }
.nb-faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--nb-crema); transition: transform var(--nb-base-t) var(--nb-ease); }
.nb-faq details[open] summary::after { transform: rotate(45deg); }
.nb-faq details[open] summary { border-bottom: 1px solid var(--nb-border); }
.nb-faq__body { padding: 1rem 1.1rem; font-size: .9375rem; }
.nb-faq__body > :last-child { margin-bottom: 0; }

/* Author / E-E-A-T box */
.nb-authorbox {
	display: grid; gap: var(--nb-s2); align-items: start;
	border: 1px solid var(--nb-border); border-radius: var(--nb-r-lg);
	padding: var(--nb-s3); background: var(--nb-paper); margin-block: var(--nb-s5);
}
@media (min-width: 640px) { .nb-authorbox { grid-template-columns: 72px 1fr; } }
.nb-authorbox img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.nb-authorbox h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.nb-authorbox p { margin: 0; font-size: .9375rem; color: var(--nb-ink-soft); }

/* Methodology strip */
.nb-method { display: grid; gap: var(--nb-s3); }
@media (min-width: 700px) { .nb-method { grid-template-columns: repeat(4, 1fr); } }
.nb-method__item { text-align: left; }
.nb-method__item b { display: block; font-family: var(--nb-font-display); font-size: 1.8rem; color: var(--nb-crema); line-height: 1; margin-bottom: .3rem; }
.nb-method__item span { font-size: .875rem; color: var(--nb-ink-soft); }

/* Disclosure inline */
.nb-disclosure {
	font-size: .8125rem; color: var(--nb-muted-text); background: var(--nb-muted);
	border-radius: var(--nb-r-md); padding: .7rem .9rem; margin-block: var(--nb-s3);
}
.nb-disclosure a { color: var(--nb-crema); }

/* Newsletter */
.nb-newsletter { background: var(--nb-ink); color: #F5F1EC; border-radius: var(--nb-r-lg); padding: clamp(1.5rem, 4vw, 2.5rem); }
.nb-newsletter h2 { color: #fff; margin-top: 0; }
.nb-newsletter p { color: #D6CCC1; }
.nb-form { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: var(--nb-s3); }
.nb-input {
	flex: 1 1 240px; min-height: 48px; padding: .8rem 1rem;
	border: 1px solid var(--nb-border); border-radius: var(--nb-r-md);
	font: inherit; font-size: .9375rem; background: var(--nb-base); color: var(--nb-ink);
}
.nb-input::placeholder { color: var(--nb-muted-text); }
.nb-newsletter .nb-input { border-color: #3A2F27; }
.nb-formnote { font-size: .75rem; color: #A79E94; margin: .7rem 0 0; }

/* Footer */
.nb-footer { background: var(--nb-paper); border-top: 1px solid var(--nb-border); padding-block: var(--nb-s5) var(--nb-s3); margin-top: var(--nb-s6); }
.nb-footer__grid { display: grid; gap: var(--nb-s4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.nb-footer h3 { font-family: var(--nb-font-body); font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--nb-muted-text); margin-bottom: .8rem; }
.nb-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.nb-footer a { color: var(--nb-ink-soft); text-decoration: none; font-size: .9375rem; }
.nb-footer a:hover { color: var(--nb-crema); text-decoration: underline; }
.nb-footer__legal { margin-top: var(--nb-s4); padding-top: var(--nb-s3); border-top: 1px solid var(--nb-border); font-size: .8125rem; color: var(--nb-muted-text); }
.nb-footer__legal p { margin: 0 0 .5rem; }

/* Pagination */
.nb-pagination { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin-block: var(--nb-s5); }
.nb-pagination a, .nb-pagination span {
	display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 .75rem;
	border: 1px solid var(--nb-border); border-radius: var(--nb-r-md);
	text-decoration: none; color: var(--nb-ink-soft); font-size: .9375rem;
}
.nb-pagination a:hover { background: var(--nb-muted); color: var(--nb-ink); }
.nb-pagination .current { background: var(--nb-ink); color: var(--nb-base); border-color: var(--nb-ink); font-weight: 600; }

/* Reveal on scroll */
.nb-reveal { opacity: 0; transform: translateY(14px); transition: opacity 450ms var(--nb-ease), transform 450ms var(--nb-ease); }
.nb-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
	.nb-reveal { opacity: 1; transform: none; }
}

@media print {
	.nb-header, .nb-topbar, .nb-footer, .nb-sticky-cta, .nb-newsletter, .nb-btn { display: none !important; }
	body { background: #fff; color: #000; }
}

/* ==========================================================================
   WordPress block integration
   Maps core block output onto the NineBarLab component classes above.
   ========================================================================== */

/* Header */
.nb-header__inner > .nb-brand .wp-block-site-title a {
	font-family: var(--nb-font-display); font-weight: 700; font-size: 1.2rem;
	letter-spacing: -.02em; color: var(--nb-ink); text-decoration: none;
}
.nb-header__inner > .nb-brand .wp-block-site-title a:hover { color: var(--nb-crema); }
.nb-topbar .nb-topbar__text { margin: 0; color: #EFE7DD; font-size: .75rem; }

.wp-block-navigation.nb-nav { gap: .1rem; }
.wp-block-navigation.nb-nav .wp-block-navigation-item__content {
	padding: .55rem .7rem; border-radius: var(--nb-r-sm);
	font-size: .9375rem; font-weight: 500; color: var(--nb-ink-soft); text-decoration: none;
	transition: background var(--nb-fast) var(--nb-ease), color var(--nb-fast) var(--nb-ease);
}
.wp-block-navigation.nb-nav .wp-block-navigation-item__content:hover,
.wp-block-navigation.nb-nav .current-menu-item > .wp-block-navigation-item__content {
	background: var(--nb-muted); color: var(--nb-ink);
}
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; }
.wp-block-navigation__responsive-container.is-menu-open { background: var(--nb-base); padding-top: 4rem; }

.nb-search .wp-block-search__button { min-width: 44px; min-height: 44px; }
.nb-search .wp-block-search__input { min-height: 44px; border-radius: var(--nb-r-md); border-color: var(--nb-border); }

/* Post template grids: neutralise core gap so .nb-grid controls it */
.wp-block-post-template.nb-grid { gap: var(--nb-s4); padding: 0; margin: 0; list-style: none; }
.wp-block-post-template.nb-grid > li { margin: 0; }

/* Card blocks built from core blocks */
.nb-card .wp-block-post-featured-image { margin: 0; }
.nb-card .wp-block-post-featured-image img { border-radius: 0; width: 100%; }
.nb-card .nb-card__title a { color: var(--nb-ink); text-decoration: none; }
.nb-card .nb-card__title a:hover { color: var(--nb-crema); }
.nb-card .nb-card__body > * { margin-block: 0; }
.nb-card .nb-card__excerpt p, .nb-card .wp-block-post-excerpt__excerpt { margin: 0; font-size: .9375rem; color: var(--nb-ink-soft); }
.nb-card .wp-block-post-excerpt__more-text { display: none; }
.nb-card .nb-card__foot .wp-block-post-date,
.nb-card .nb-card__foot .wp-block-post-author-name { font-size: .8125rem; color: var(--nb-muted-text); }
.nb-card .nb-eyebrow a { color: inherit; text-decoration: none; }
.nb-card--hero .nb-card__title { font-size: 1.5rem; }

/* Hero */
.nb-hero .wp-block-query { margin: 0; }
.nb-hero__inner > .wp-block-group:first-child { min-width: 0; }

/* Byline */
.nb-byline > * { margin: 0; }
.nb-byline .wp-block-avatar img { width: 36px; height: 36px; border-radius: 50%; }

/* Buttons — outline variant */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent; color: var(--nb-ink); border: 1px solid var(--nb-border);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--nb-muted); color: var(--nb-ink);
}

/* Featured image on singles */
.wp-block-post-featured-image.alignwide img { border-radius: var(--nb-r-lg); }

/* Custom block styles */
.wp-block-group.is-style-nb-callout {
	background: var(--nb-paper); border: 1px solid var(--nb-border);
	border-left: 4px solid var(--nb-crema); border-radius: var(--nb-r-lg); padding: var(--nb-s3);
}
.wp-block-group.is-style-nb-takeaways {
	background: var(--nb-crema-tint); border: 1px solid var(--nb-crema-soft);
	border-radius: var(--nb-r-lg); padding: var(--nb-s3);
}
.wp-block-list.is-style-nb-checklist { list-style: none; padding-left: 0; }
.wp-block-list.is-style-nb-checklist li { position: relative; padding-left: 1.75rem; }
.wp-block-list.is-style-nb-checklist li::before {
	content: ""; position: absolute; left: 0; top: .45em; width: 1rem; height: .55rem;
	border-left: 2.5px solid var(--nb-steam); border-bottom: 2.5px solid var(--nb-steam);
	transform: rotate(-45deg);
}
.wp-block-image.is-style-nb-framed img {
	border: 1px solid var(--nb-border); border-radius: var(--nb-r-lg); box-shadow: var(--nb-shadow-card);
}
.wp-block-heading.is-style-nb-eyebrow {
	font-family: var(--nb-font-body); font-size: .75rem; font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase; color: var(--nb-crema);
}
.wp-block-separator.is-style-nb-dots {
	border: 0; height: auto; text-align: center; background: none;
}
.wp-block-separator.is-style-nb-dots::before {
	content: "· · ·"; letter-spacing: .8em; color: var(--nb-crema-soft); font-size: 1.4rem;
}

/* TOC active state */
.nb-toc a[aria-current="true"] { color: var(--nb-crema); font-weight: 600; }

/* Query pagination inherits nb-pagination look */
.wp-block-query-pagination.nb-pagination .wp-block-query-pagination-numbers .page-numbers,
.wp-block-query-pagination.nb-pagination > a {
	display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 .75rem;
	border: 1px solid var(--nb-border); border-radius: var(--nb-r-md);
	text-decoration: none; color: var(--nb-ink-soft); font-size: .9375rem;
}
.wp-block-query-pagination.nb-pagination .page-numbers.current {
	background: var(--nb-ink); color: var(--nb-base); border-color: var(--nb-ink); font-weight: 600;
}

/* Author box */
.nb-authorbox .wp-block-post-author-name a { font-family: var(--nb-font-display); font-size: 1.05rem; font-weight: 600; color: var(--nb-ink); text-decoration: none; }
.nb-authorbox .wp-block-post-author-biography { margin: .3rem 0 0; font-size: .9375rem; color: var(--nb-ink-soft); }

/* Category cards in home-categories are whole-card links */
a.nb-card { color: inherit; }
a.nb-card:hover .nb-card__title { color: var(--nb-crema); }