/* ==========================================================================
   christopherjanb.com brand layer
   Loaded on every page. Holds the design tokens, the site header and footer,
   and the layouts used by the theme templates (posts, pages, archives,
   search, 404). Values follow /style-guide/.
   ========================================================================== */

:root {
	--cjb-night: #16161f;
	--cjb-night-2: #1e1e2e;
	--cjb-card-dark: #23233a;
	--cjb-ink: #1a1a24;
	--cjb-slate: #3a3a48;
	--cjb-grey: #6b7280;
	--cjb-mist: #f4f6f8;
	--cjb-hair: #e5e7eb;
	--cjb-white: #ffffff;
	--cjb-teal: #00d4aa;
	--cjb-teal-dk: #0a8f76;
	--cjb-blue: #0073aa;
	--cjb-sky: #0093cc;
	--cjb-amber: #ffba00;
	--cjb-green: #46b450;
	--cjb-max: 1120px;
	--cjb-read: 720px;
	--cjb-gutter: clamp(20px, 5vw, 80px);
	--cjb-nav-h: 68px;
	--cjb-display: 'Josefin Sans', system-ui, sans-serif;
	--cjb-body: 'Raleway', system-ui, sans-serif;
	--cjb-util: 'Montserrat', system-ui, sans-serif;
	--cjb-radius-sm: 6px;
	--cjb-radius: 8px;
	--cjb-radius-card: 14px;
	--cjb-glow: radial-gradient(ellipse 60% 70% at 88% 10%, rgba(0, 212, 170, .11) 0%, transparent 60%),
		radial-gradient(ellipse 50% 70% at 0% 100%, rgba(0, 115, 170, .16) 0%, transparent 60%);
}

html { scroll-padding-top: calc(var(--cjb-nav-h) + 16px); }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--cjb-teal);
	outline-offset: 3px;
	border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Site header
   -------------------------------------------------------------------------- */
.cjb-nav,
.cjb-nav *,
.cjb-footer,
.cjb-footer * { box-sizing: border-box; }

.cjb-nav {
	position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
	height: var(--cjb-nav-h);
	display: flex; align-items: center;
	margin: 0;
	background: rgba(22, 22, 31, .96);
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(255, 255, 255, .06);
	font-family: var(--cjb-util);
}
.admin-bar .cjb-nav { top: 32px; }
@media (max-width: 782px) { .admin-bar .cjb-nav { top: 46px; } }
@media (max-width: 600px) { .admin-bar .cjb-nav { top: 0; } }

.cjb-nav__inner {
	width: 100%; max-width: var(--cjb-max);
	margin: 0 auto; padding: 0 var(--cjb-gutter);
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.cjb-nav__logo { display: block; flex-shrink: 0; line-height: 0; }
.cjb-nav__logo img { display: block; height: 56px; width: auto; max-width: none; }
.cjb-nav__menu { display: flex; align-items: center; gap: 28px; }
.cjb-nav__links { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.cjb-nav__links li { margin: 0; padding: 0; }
.cjb-nav__links a {
	font-family: var(--cjb-util); font-size: 12px; font-weight: 600; line-height: 1;
	letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
	color: rgba(255, 255, 255, .7);
	transition: color .2s;
}
.cjb-nav__links a:hover,
.cjb-nav__links a:focus-visible,
.cjb-nav__links a[aria-current="page"] { color: var(--cjb-white); }
.cjb-nav__links a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--cjb-teal); padding-bottom: 6px; }

.cjb-nav__cta,
.cjb-nav__cta:visited {
	display: inline-block;
	background: var(--cjb-blue); color: var(--cjb-white);
	padding: 10px 20px 9px; border-radius: var(--cjb-radius-sm);
	font-family: var(--cjb-display); font-size: 12px; font-weight: 700; line-height: 1;
	letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
	transition: background .2s, transform .15s;
}
.cjb-nav__cta:hover,
.cjb-nav__cta:focus-visible { background: var(--cjb-sky); color: var(--cjb-white); transform: translateY(-1px); }

.cjb-nav__toggle {
	display: none;
	width: 42px; height: 42px; margin: 0; padding: 0;
	align-items: center; justify-content: center;
	background: transparent; color: var(--cjb-white);
	border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--cjb-radius);
	cursor: pointer;
}
.cjb-nav__toggle-bars,
.cjb-nav__toggle-bars::before,
.cjb-nav__toggle-bars::after {
	display: block; width: 18px; height: 2px; border-radius: 2px;
	background: currentColor; transition: transform .2s, opacity .2s;
}
.cjb-nav__toggle-bars { position: relative; }
.cjb-nav__toggle-bars::before,
.cjb-nav__toggle-bars::after { content: ''; position: absolute; left: 0; }
.cjb-nav__toggle-bars::before { top: -6px; }
.cjb-nav__toggle-bars::after { top: 6px; }
.cjb-nav.is-open .cjb-nav__toggle-bars { background: transparent; }
.cjb-nav.is-open .cjb-nav__toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.cjb-nav.is-open .cjb-nav__toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 960px) {
	.cjb-nav__logo img { height: 48px; }
	.cjb-nav__menu { gap: 12px; }
	.cjb-nav__toggle { display: inline-flex; }
	.cjb-nav__links {
		display: none;
		position: fixed; left: 0; right: 0; top: var(--cjb-nav-h);
		flex-direction: column; align-items: stretch; gap: 0;
		padding: 8px var(--cjb-gutter) 24px;
		background: var(--cjb-night);
		border-bottom: 1px solid rgba(255, 255, 255, .08);
		box-shadow: 0 24px 48px rgba(0, 0, 0, .35);
		max-height: calc(100vh - var(--cjb-nav-h)); overflow-y: auto;
	}
	.admin-bar .cjb-nav__links { top: calc(var(--cjb-nav-h) + 46px); }
	.cjb-nav.is-open .cjb-nav__links { display: flex; }
	.cjb-nav__links li { border-bottom: 1px solid rgba(255, 255, 255, .06); }
	.cjb-nav__links a { display: block; padding: 18px 0; font-size: 13px; }
	.cjb-nav__links a[aria-current="page"] { box-shadow: none; padding-bottom: 18px; color: var(--cjb-teal); }
}
@media (max-width: 600px) {
	.admin-bar .cjb-nav__links { top: var(--cjb-nav-h); }
}
@media (max-width: 380px) {
	.cjb-nav__cta { padding: 10px 14px 9px; }
	.cjb-nav__logo img { height: 42px; }
}

/* --------------------------------------------------------------------------
   Site footer
   -------------------------------------------------------------------------- */
.cjb-footer {
	margin: 0;
	background: var(--cjb-night-2);
	border-top: 1px solid rgba(255, 255, 255, .06);
	padding: 44px 0;
	font-family: var(--cjb-body);
	color: rgba(255, 255, 255, .45);
}
.cjb-footer__inner {
	max-width: var(--cjb-max); margin: 0 auto; padding: 0 var(--cjb-gutter);
	display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 40px;
}
.cjb-footer__logo { display: block; line-height: 0; }
.cjb-footer__logo img { display: block; height: 36px; width: auto; max-width: none; }
.cjb-footer__links { display: flex; flex-wrap: wrap; gap: 10px 24px; list-style: none; margin: 0; padding: 0; }
.cjb-footer__links li { margin: 0; padding: 0; }
.cjb-footer__links a {
	font-family: var(--cjb-body); font-size: 13px; font-weight: 400; line-height: 1.5;
	color: rgba(255, 255, 255, .5); text-decoration: none; transition: color .2s;
}
.cjb-footer__links a:hover,
.cjb-footer__links a:focus-visible { color: var(--cjb-white); }
.cjb-footer__copy { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, .3); }
.cjb-footer__copy a { color: inherit; text-decoration: none; }
.cjb-footer__copy a:hover { color: var(--cjb-white); }
.cjb-footer__social { display: flex; align-items: center; gap: 14px; }
.cjb-footer__social a {
	width: 36px; height: 36px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid rgba(255, 255, 255, .15); color: rgba(255, 255, 255, .5);
	text-decoration: none;
	transition: border-color .2s, color .2s, background .2s;
}
.cjb-footer__social a:hover,
.cjb-footer__social a:focus-visible { border-color: var(--cjb-blue); color: var(--cjb-white); background: rgba(0, 115, 170, .2); }
.cjb-footer__social svg { display: block; width: 16px; height: 16px; }
@media (max-width: 900px) {
	.cjb-footer__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 28px; }
	.cjb-footer__links { justify-content: center; }
}

/* --------------------------------------------------------------------------
   Theme-template pages (posts, pages, archives). Custom marketing templates
   carry their own page CSS and are not affected by anything below.
   -------------------------------------------------------------------------- */
.cjb-standard .wp-site-blocks { padding-top: 0; padding-bottom: 0; }
.cjb-standard .wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }
.cjb-standard main { margin-top: 0; }
.cjb-standard main > .wp-block-group { margin-block-start: 0; }

.cjb-eyebrow,
.cjb-hero .wp-block-post-terms {
	margin: 0 0 18px;
	font-family: var(--cjb-util); font-size: 12px; font-weight: 700; line-height: 1.4;
	letter-spacing: .18em; text-transform: uppercase;
	color: var(--cjb-teal);
}
.cjb-eyebrow--dark { color: var(--cjb-teal-dk); }
.cjb-hero .wp-block-post-terms { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.cjb-hero .wp-block-post-terms a { color: var(--cjb-teal); text-decoration: none; }
.cjb-hero .wp-block-post-terms a:hover { color: var(--cjb-white); }
.cjb-hero .wp-block-post-terms__separator { display: none; }
.cjb-hero .wp-block-post-terms a::before {
	content: ''; display: inline-block; width: 7px; height: 7px; margin: 0 9px 2px 0;
	border-radius: 50%; background: currentColor; vertical-align: middle;
}

/* Hero band */
.cjb-hero {
	position: relative; overflow: hidden;
	background: var(--cjb-glow), var(--cjb-night);
	color: var(--cjb-white);
	padding-top: calc(var(--cjb-nav-h) + clamp(48px, 7vw, 96px)) !important;
	padding-bottom: clamp(52px, 7vw, 88px) !important;
}
.cjb-hero::after {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background-image: linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
	mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}
.cjb-hero > * { position: relative; z-index: 1; }
.cjb-hero h1,
.cjb-hero .wp-block-post-title,
.cjb-hero .wp-block-query-title {
	margin: 0;
	color: var(--cjb-white);
	font-family: var(--cjb-display); font-weight: 700;
	font-size: clamp(2.125rem, 4.4vw, 3.25rem); line-height: 1.08; letter-spacing: -.015em;
	text-wrap: balance;
}
.cjb-hero--page h1,
.cjb-hero--page .wp-block-post-title { font-size: clamp(2.125rem, 4.8vw, 3.5rem); }
.cjb-hero h1 em,
.cjb-hero .cjb-accent { color: var(--cjb-teal); font-style: normal; }
.cjb-hero__lead,
.cjb-hero .wp-block-term-description,
.cjb-hero .wp-block-post-excerpt__excerpt {
	margin: 22px 0 0;
	max-width: 620px;
	font-family: var(--cjb-body); font-size: clamp(1.0625rem, 1.6vw, 1.25rem); font-weight: 300; line-height: 1.6;
	color: rgba(255, 255, 255, .68);
}
.cjb-hero .wp-block-term-description p { margin: 0; }
.cjb-hero .wp-block-term-description p + p { margin-top: .8em; }

/* Narrow items inside a wide (1120px) hero stay left-aligned with the headline */
.cjb-hero { --cjb-hero-w: 1120px; }
.cjb-hero :is(.cjb-hero__lead, .wp-block-term-description, .wp-block-post-author-biography, .cjb-search) {
	margin-left: max(0px, calc((100% - var(--cjb-hero-w)) / 2)) !important;
	margin-right: auto !important;
}
.cjb-hero :is(.cjb-hero__lead, .wp-block-term-description, .wp-block-post-author-biography) { max-width: min(620px, 100%) !important; }
.cjb-hero .cjb-search { max-width: min(560px, 100%) !important; }
.cjb-hero .wp-block-post-author-biography { margin-top: 22px; color: rgba(255, 255, 255, .68); font-weight: 300; line-height: 1.6; }

/* Post meta row */
.cjb-meta {
	margin-top: 28px !important;
	gap: 10px 14px;
	font-family: var(--cjb-util); font-size: 13px; font-weight: 600; line-height: 1.4;
	color: rgba(255, 255, 255, .55);
}
.cjb-meta p { margin: 0; }
.cjb-meta .wp-block-avatar { margin: 0; line-height: 0; }
.cjb-meta .wp-block-avatar img { width: 36px; height: 36px; border-radius: 50%; border: 2px solid rgba(0, 212, 170, .5); }
.cjb-meta .wp-block-post-author-name { color: var(--cjb-white); font-size: 13px; font-weight: 700; }
.cjb-meta .wp-block-post-author-name a { color: inherit; text-decoration: none; }
.cjb-meta .wp-block-post-author-name a:hover { color: var(--cjb-teal); }
.cjb-meta .wp-block-post-date { color: inherit; font-size: 13px; font-weight: 600; }
.cjb-meta .wp-block-post-date::before {
	content: ''; display: inline-block; width: 4px; height: 4px; margin: 0 12px 2px 0;
	border-radius: 50%; background: rgba(255, 255, 255, .3); vertical-align: middle;
}
.cjb-meta .cjb-published time::before { content: 'Published '; }
.cjb-meta .cjb-updated time::before { content: 'Updated '; }

/* Featured image that overlaps the hero */
body:has(.cjb-hero-figure img) .cjb-hero { padding-bottom: clamp(128px, 15vw, 220px) !important; }
.cjb-hero-figure { position: relative; z-index: 2; margin-top: calc(-1 * clamp(96px, 12vw, 180px)) !important; }
.cjb-hero-figure:not(:has(img)) { display: none; }
.cjb-hero-figure .wp-block-post-featured-image { margin: 0 auto; }
.cjb-hero-figure .wp-block-post-featured-image img {
	width: 100%; height: auto;
	border-radius: var(--cjb-radius-card);
	box-shadow: 0 30px 70px rgba(22, 22, 31, .22), 0 2px 8px rgba(22, 22, 31, .08);
	background: var(--cjb-mist);
}

/* Reading column */
.cjb-body {
	padding-top: clamp(40px, 6vw, 72px) !important;
	padding-bottom: clamp(56px, 8vw, 96px) !important;
}
.cjb-prose { color: var(--cjb-ink); font-family: var(--cjb-body); font-size: 1.125rem; line-height: 1.75; }
.cjb-prose > * { margin-block-start: 0; margin-block-end: 0; }
.cjb-prose > * + * { margin-block-start: 1.35em; }
.cjb-prose p { font-weight: 400; }
.cjb-prose strong,
.cjb-prose b { font-weight: 700; color: var(--cjb-night); }
.cjb-prose :where(h2, h3, h4, h5, h6) { scroll-margin-top: calc(var(--cjb-nav-h) + 24px); color: var(--cjb-night); }
.cjb-prose > h2,
.cjb-prose > .wp-block-heading:is(h2) { margin-block-start: 2.3em; }
.cjb-prose > h3,
.cjb-prose > .wp-block-heading:is(h3) { margin-block-start: 1.9em; }
.cjb-prose > h4 { margin-block-start: 1.7em; }
.cjb-prose > :is(h2, h3, h4) + * { margin-block-start: .8em; }
.cjb-prose > :first-child { margin-block-start: 0; }
.cjb-prose h2 strong,
.cjb-prose h3 strong { font-weight: inherit; color: inherit; }

.cjb-prose a:where(:not(.wp-element-button):not(.wp-block-button__link):not([class*="ub-"]):not([class*="gb-"]):not([class*="ultp-"])) {
	color: var(--cjb-blue);
	text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
	text-decoration-color: rgba(0, 115, 170, .4);
	transition: color .15s, text-decoration-color .15s;
}
.cjb-prose a:where(:not(.wp-element-button):not(.wp-block-button__link)):hover { color: var(--cjb-sky); text-decoration-color: currentColor; }

.cjb-prose :where(ul, ol):not([class*="ultp"]):not([class*="ub_"]):not([class*="ub-"]) { padding-left: 1.4em; }
.cjb-prose :where(li) + li { margin-top: .45em; }
.cjb-prose :where(ul):not([class]) > li::marker,
.cjb-prose .wp-block-list:is(ul) > li::marker { color: var(--cjb-teal-dk); }
.cjb-prose :where(ol) > li::marker { color: var(--cjb-teal-dk); font-family: var(--cjb-display); font-weight: 700; }

.cjb-prose :where(figure) { margin-left: 0; margin-right: 0; }
.cjb-prose img { border-radius: var(--cjb-radius); height: auto; }
.cjb-prose .wp-block-image figcaption,
.cjb-prose figcaption {
	margin-top: 10px; text-align: center;
	font-family: var(--cjb-util); font-size: .8125rem; font-weight: 500; line-height: 1.5; color: var(--cjb-grey);
}
.cjb-prose .wp-block-embed iframe { max-width: 100%; border-radius: var(--cjb-radius); }

.cjb-prose blockquote:not(.wp-block-pullquote blockquote) {
	margin-left: 0; margin-right: 0;
	padding: 1.4rem 1.6rem;
	background: var(--cjb-mist);
	border-left: 4px solid var(--cjb-teal);
	border-radius: 0 var(--cjb-radius) var(--cjb-radius) 0;
	font-size: 1.1875rem; font-weight: 300; line-height: 1.6;
}
.cjb-prose blockquote p { margin: 0; }
.cjb-prose blockquote p + p { margin-top: .75em; }
.cjb-prose blockquote cite {
	display: block; margin-top: .9em;
	font-family: var(--cjb-util); font-size: .8125rem; font-style: normal; font-weight: 600; color: var(--cjb-grey);
}

.cjb-prose hr,
.cjb-prose .wp-block-separator { border: 0; border-top: 1px solid var(--cjb-hair); margin-block: 2.5em; opacity: 1; }

.cjb-prose .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cjb-prose table {
	width: 100%; border-collapse: collapse;
	font-size: .9375rem; line-height: 1.55;
	border: 1px solid var(--cjb-hair); border-radius: var(--cjb-radius);
}
.cjb-prose table :where(th, td) { padding: 12px 14px; border: 0; border-bottom: 1px solid var(--cjb-hair); text-align: left; vertical-align: top; }
.cjb-prose table thead :where(th, td),
.cjb-prose table tr:first-child th {
	background: var(--cjb-mist);
	font-family: var(--cjb-util); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: var(--cjb-slate);
	border-bottom: 1px solid var(--cjb-hair);
}
.cjb-prose table tbody tr:last-child :where(td, th) { border-bottom: 0; }
.cjb-prose .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: #fafbfc; }
.cjb-prose .wp-block-table figcaption { text-align: left; }

.cjb-prose :where(code):not(pre code) {
	padding: .15em .4em; border-radius: 4px;
	background: var(--cjb-mist); border: 1px solid var(--cjb-hair);
	font-family: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85em;
}
.cjb-prose pre { overflow-x: auto; }
.cjb-prose mark { background: rgba(255, 186, 0, .28); color: inherit; padding: 0 .15em; }

/* Legacy content boxes: table of contents and notice blocks */
.cjb-prose :is(.wp-block-ultimate-post-table-of-content, .ub_table-of-contents, .wp-block-ub-table-of-contents-block) {
	background: var(--cjb-mist) !important;
	border: 1px solid var(--cjb-hair) !important;
	border-radius: var(--cjb-radius-card) !important;
	box-shadow: none !important;
}
.cjb-prose :is(.ultp-toc-heading, .ub_table-of-contents-title, .ultp-heading-title) {
	font-family: var(--cjb-util) !important; font-size: .8125rem !important; font-weight: 700 !important;
	letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--cjb-slate) !important;
}
.cjb-prose :is(.ultp-toc-lists, .ub_table-of-contents-container) a { color: var(--cjb-blue) !important; text-decoration: none !important; }
.cjb-prose :is(.ultp-toc-lists, .ub_table-of-contents-container) a:hover { text-decoration: underline !important; }

/* Headings inside legacy blocks inherit the brand faces */
.cjb-prose :is(.gb-headline, .ultp-heading-title, .wp-block-ultimate-post-heading) { font-family: var(--cjb-display); }

/* Buttons */
.wp-block-button__link,
.wp-element-button { transition: background .2s, transform .15s, box-shadow .2s, color .2s; }
.wp-block-button:not([class*="is-style-cjb"]) .wp-block-button__link:hover { transform: translateY(-2px); }
.wp-block-button.is-style-cjb-teal .wp-block-button__link { background: var(--cjb-teal); color: var(--cjb-night); }
.wp-block-button.is-style-cjb-teal .wp-block-button__link:hover { background: #2de0bd; color: var(--cjb-night); transform: translateY(-2px); }
.wp-block-button.is-style-cjb-deep-teal .wp-block-button__link { background: var(--cjb-teal-dk); color: var(--cjb-white); }
.wp-block-button.is-style-cjb-deep-teal .wp-block-button__link:hover { background: #0b7e69; transform: translateY(-2px); }
.wp-block-button.is-style-cjb-ghost .wp-block-button__link {
	background: transparent; color: var(--cjb-white);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
}
.wp-block-button.is-style-cjb-ghost .wp-block-button__link:hover { box-shadow: inset 0 0 0 1px var(--cjb-white); background: rgba(255, 255, 255, .05); }
.wp-block-button.is-style-cjb-outline .wp-block-button__link { background: transparent; color: var(--cjb-blue); box-shadow: inset 0 0 0 1.5px var(--cjb-blue); }
.wp-block-button.is-style-cjb-outline .wp-block-button__link:hover { background: var(--cjb-blue); color: var(--cjb-white); }

/* Headings from the PostX heading block match core headings */
.cjb-prose .wp-block-ultimate-post-heading { margin-block-start: 2.3em; }
.cjb-prose .wp-block-ultimate-post-heading .ultp-heading-title {
	font-family: var(--cjb-display) !important; font-weight: 700 !important; letter-spacing: -.01em !important;
	line-height: 1.15 !important; color: var(--cjb-night) !important; text-transform: none !important;
}
.cjb-prose .wp-block-ultimate-post-heading h2.ultp-heading-title { font-size: clamp(1.625rem, 3.2vw, 2.25rem) !important; }
.cjb-prose .wp-block-ultimate-post-heading h3.ultp-heading-title { font-size: clamp(1.3125rem, 2.2vw, 1.625rem) !important; font-weight: 600 !important; }
.cjb-prose .wp-block-ultimate-post-heading h4.ultp-heading-title { font-size: 1.25rem !important; font-weight: 600 !important; }
.cjb-prose .wp-block-ultimate-post-heading .ultp-heading-title span { color: inherit !important; }

/* Tags under a post */
.cjb-tags:not(:has(a)) { display: none; }
.cjb-tags { margin-top: 48px !important; gap: 8px; }
.cjb-tags .wp-block-post-terms { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.cjb-tags .wp-block-post-terms__separator { display: none; }
.cjb-tags .wp-block-post-terms a {
	display: inline-block; padding: 7px 12px 6px; border-radius: var(--cjb-radius-sm);
	background: var(--cjb-mist); border: 1px solid var(--cjb-hair);
	font-family: var(--cjb-util); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: var(--cjb-slate); text-decoration: none;
}
.cjb-tags .wp-block-post-terms a:hover { border-color: var(--cjb-blue); color: var(--cjb-blue); }

/* Author box */
.cjb-author {
	margin-top: 48px !important;
	padding: 28px 30px !important;
	background: var(--cjb-mist);
	border: 1px solid var(--cjb-hair);
	border-radius: var(--cjb-radius-card);
}
.cjb-author .wp-block-post-author { display: flex; align-items: flex-start; gap: 20px; margin: 0; }
.cjb-author .wp-block-post-author__avatar { margin: 0; flex-shrink: 0; }
.cjb-author .wp-block-post-author__avatar img { width: 72px; height: 72px; border-radius: 50%; border: 3px solid var(--cjb-white); box-shadow: 0 0 0 1px var(--cjb-hair); }
.cjb-author .wp-block-post-author__byline {
	margin: 0 0 4px;
	font-family: var(--cjb-util); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cjb-teal-dk);
}
.cjb-author .wp-block-post-author__name { margin: 0 0 8px; font-family: var(--cjb-display); font-size: 1.25rem; font-weight: 700; color: var(--cjb-night); }
.cjb-author .wp-block-post-author__name a { color: inherit; text-decoration: none; }
.cjb-author .wp-block-post-author__bio { margin: 0; font-size: .9375rem; line-height: 1.7; color: var(--cjb-slate); }
.cjb-author__more { margin: 14px 0 0 92px !important; font-family: var(--cjb-util); font-size: 13px; font-weight: 600; }
.cjb-author__more a { color: var(--cjb-blue); text-decoration: none; }
.cjb-author__more a:hover { color: var(--cjb-sky); }
@media (max-width: 560px) {
	.cjb-author .wp-block-post-author { flex-direction: column; gap: 14px; }
	.cjb-author__more { margin-left: 0 !important; }
}

/* Section bands */
.cjb-section { padding-top: clamp(64px, 9vw, 112px) !important; padding-bottom: clamp(64px, 9vw, 112px) !important; }
.cjb-section--mist { background: var(--cjb-mist); }
.cjb-section__head { margin-bottom: 36px !important; gap: 16px; }
.cjb-section__title { margin: 0 !important; font-size: clamp(1.625rem, 3.2vw, 2.25rem) !important; }
.cjb-section__link { margin: 0 !important; font-family: var(--cjb-util); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cjb-section__link a { color: var(--cjb-blue); text-decoration: none; }
.cjb-section__link a:hover { color: var(--cjb-sky); }

/* Call to action band */
.cjb-cta {
	position: relative; overflow: hidden;
	background: radial-gradient(ellipse 55% 60% at 12% 70%, rgba(0, 212, 170, .09) 0%, transparent 60%),
		radial-gradient(ellipse 50% 60% at 90% 20%, rgba(0, 115, 170, .16) 0%, transparent 60%), var(--cjb-night);
	color: var(--cjb-white);
	text-align: center;
	padding-top: clamp(72px, 10vw, 120px) !important;
	padding-bottom: clamp(72px, 10vw, 120px) !important;
}
.cjb-cta h2 { margin: 0 auto !important; max-width: 680px; color: var(--cjb-white); font-size: clamp(1.75rem, 3.6vw, 2.5rem); line-height: 1.15; text-wrap: balance; }
.cjb-cta p.cjb-cta__body { margin: 18px auto 0 !important; max-width: 600px; font-size: 1.0625rem; font-weight: 300; line-height: 1.75; color: rgba(255, 255, 255, .64); }
.cjb-cta .wp-block-buttons { margin-top: 34px !important; justify-content: center; gap: 14px; }

/* Post cards */
.cjb-cards .wp-block-post-template {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	margin: 0; padding: 0; list-style: none;
}
.cjb-cards .wp-block-post-template > li { margin: 0 !important; }
@media (max-width: 960px) { .cjb-cards .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .cjb-cards .wp-block-post-template { grid-template-columns: 1fr; } }

.cjb-card {
	height: 100%;
	display: flex; flex-direction: column;
	background: var(--cjb-white);
	border: 1px solid var(--cjb-hair);
	border-radius: var(--cjb-radius-card);
	overflow: hidden;
	transition: transform .2s, box-shadow .2s, border-color .2s;
	gap: 0 !important;
}
.cjb-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(22, 22, 31, .09); border-color: #d6dae0; }
.cjb-card .wp-block-post-featured-image { margin: 0; aspect-ratio: 40 / 21; overflow: hidden; background: var(--cjb-mist); }
.cjb-card .wp-block-post-featured-image a { display: block; height: 100%; }
.cjb-card .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .35s; }
.cjb-card:hover .wp-block-post-featured-image img { transform: scale(1.03); }
.cjb-card__body { flex: 1; display: flex; flex-direction: column; padding: 22px 24px 24px !important; gap: 0 !important; }
.cjb-card .wp-block-post-terms {
	margin: 0 0 10px;
	font-family: var(--cjb-util); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: var(--cjb-teal-dk);
}
.cjb-card .wp-block-post-terms a { color: inherit; text-decoration: none; }
.cjb-card .wp-block-post-terms a:hover { color: var(--cjb-blue); }
.cjb-card .wp-block-post-title {
	margin: 0;
	font-family: var(--cjb-display); font-size: 1.25rem; font-weight: 700; line-height: 1.22; letter-spacing: -.005em;
	color: var(--cjb-night);
}
.cjb-card .wp-block-post-title a { color: inherit; text-decoration: none; }
.cjb-card .wp-block-post-title a::after { content: ''; position: absolute; inset: 0; }
.cjb-card { position: relative; }
.cjb-card .wp-block-post-terms a { position: relative; z-index: 1; }
.cjb-card:hover .wp-block-post-title a { color: var(--cjb-blue); }
.cjb-card .wp-block-post-excerpt { margin: 10px 0 0; }
.cjb-card .wp-block-post-excerpt__excerpt { margin: 0; font-size: .9375rem; line-height: 1.65; color: var(--cjb-slate); }
.cjb-card .wp-block-post-excerpt__more-text { display: none; }
.cjb-card .wp-block-post-date {
	margin-top: auto !important; padding-top: 18px;
	font-family: var(--cjb-util); font-size: 12px; font-weight: 600; color: var(--cjb-grey);
}

/* Featured (first) card on the blog index */
@media (min-width: 961px) {
	.cjb-cards--feature .wp-block-post-template > li:first-child { grid-column: span 3; }
	.cjb-cards--feature .wp-block-post-template > li:first-child .cjb-card { flex-direction: row; }
	.cjb-cards--feature .wp-block-post-template > li:first-child .wp-block-post-featured-image { flex: 0 0 58%; aspect-ratio: auto; min-height: 340px; }
	.cjb-cards--feature .wp-block-post-template > li:first-child .cjb-card__body { justify-content: center; padding: 40px 44px !important; }
	.cjb-cards--feature .wp-block-post-template > li:first-child .wp-block-post-title { font-size: clamp(1.625rem, 2.4vw, 2.125rem); line-height: 1.15; }
	.cjb-cards--feature .wp-block-post-template > li:first-child .wp-block-post-excerpt__excerpt { font-size: 1.0625rem; }
	.cjb-cards--feature .wp-block-post-template > li:first-child .wp-block-post-date { margin-top: 0 !important; }
}

/* Topic chips */
.cjb-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px !important; margin-bottom: 0 !important; padding: 0; list-style: none; }
.cjb-chips li { margin: 0; }
.cjb-chips a {
	display: inline-block; padding: 9px 14px 8px; border-radius: var(--cjb-radius-sm);
	border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04);
	font-family: var(--cjb-util); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: rgba(255, 255, 255, .75); text-decoration: none;
	transition: border-color .2s, color .2s, background .2s;
}
.cjb-chips a:hover { border-color: var(--cjb-teal); color: var(--cjb-white); background: rgba(0, 212, 170, .08); }

/* Pagination */
.cjb-standard .wp-block-query-pagination {
	margin-top: 56px !important; gap: 10px;
	font-family: var(--cjb-util); font-size: 13px; font-weight: 700;
}
.cjb-standard .wp-block-query-pagination-numbers { display: flex; flex-wrap: wrap; gap: 8px; }
.cjb-standard .wp-block-query-pagination :is(.page-numbers, .wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	min-width: 42px; height: 42px; padding: 0 14px; margin: 0;
	border: 1px solid var(--cjb-hair); border-radius: var(--cjb-radius);
	background: var(--cjb-white); color: var(--cjb-ink); text-decoration: none;
	transition: border-color .2s, color .2s;
}
.cjb-standard .wp-block-query-pagination a:hover { border-color: var(--cjb-blue); color: var(--cjb-blue); }
.cjb-standard .wp-block-query-pagination .page-numbers.current { background: var(--cjb-blue); border-color: var(--cjb-blue); color: var(--cjb-white); }
.cjb-standard .wp-block-query-pagination .page-numbers.dots { border-color: transparent; background: none; }

/* Search form */
.cjb-search { margin-top: 30px !important; }
.cjb-search .wp-block-search__inside-wrapper {
	padding: 6px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px; background: rgba(255, 255, 255, .06);
}
.cjb-search .wp-block-search__input {
	border: 0; background: transparent; color: var(--cjb-white);
	padding: 10px 14px; font-family: var(--cjb-body); font-size: 1rem;
}
.cjb-search .wp-block-search__input::placeholder { color: rgba(255, 255, 255, .45); }
.cjb-search .wp-block-search__input:focus { outline: none; }
.cjb-search .wp-block-search__inside-wrapper:focus-within { border-color: var(--cjb-teal); }
.cjb-search .wp-block-search__button { margin-left: 6px; border-radius: 7px; padding: 12px 20px 11px; }

/* Empty results */
.cjb-empty { padding: 40px 32px !important; text-align: center; background: var(--cjb-mist); border-radius: var(--cjb-radius-card); border: 1px solid var(--cjb-hair); }
.cjb-empty p { margin: 0; color: var(--cjb-slate); }

/* 404 */
.cjb-404 { min-height: 78vh; padding-top: calc(var(--cjb-nav-h) + clamp(64px, 12vh, 140px)) !important; }
.cjb-404 .cjb-hero__code { margin: 0 0 8px !important; font-family: var(--cjb-display); font-weight: 700; font-size: clamp(5rem, 14vw, 9rem); line-height: .9; color: transparent; -webkit-text-stroke: 1.5px rgba(0, 212, 170, .55); }
.cjb-hero .wp-block-buttons { margin-top: 34px !important; gap: 14px; }

/* Pages without a hero still clear the fixed header */
.cjb-no-hero { padding-top: calc(var(--cjb-nav-h) + 48px) !important; }

/* --------------------------------------------------------------------------
   Third-party widgets
   -------------------------------------------------------------------------- */
.cc-window.cc-floating {
	background: var(--cjb-night-2) !important;
	color: rgba(255, 255, 255, .78) !important;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: var(--cjb-radius-card) !important;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
	font-family: var(--cjb-body) !important; font-size: 14px !important; line-height: 1.6 !important;
	max-width: 22em !important;
}
.cc-window .cc-link { color: var(--cjb-teal) !important; opacity: 1 !important; }
.cc-window .cc-btn.cc-dismiss {
	background: var(--cjb-teal) !important; color: var(--cjb-night) !important; border: 0 !important;
	border-radius: var(--cjb-radius) !important;
	font-family: var(--cjb-display) !important; font-size: 13px !important; font-weight: 700 !important;
	letter-spacing: .08em; text-transform: uppercase;
}
.cc-window .cc-btn.cc-dismiss:hover { background: #2de0bd !important; }

@media (prefers-reduced-motion: reduce) {
	.cjb-card, .cjb-card .wp-block-post-featured-image img, .cjb-nav__cta, .wp-block-button__link { transition: none !important; }
	.cjb-card:hover, .cjb-card:hover .wp-block-post-featured-image img { transform: none; }
}