/* ==========================================================================
   Corbel - design system
   Palette A-3 Peach Cloud - Fonts B-11 Geologica + Rubik
   Direction C-9 Organic Blobs - Edges E2-4 Clay puff
   Header E1-2 Floating pill - Age gate D-1 Aurora Veil
   Accent strategy 2 (tinted section grounds)
   ========================================================================== */

/* --------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------- */

:root {
	/* ground */
	--bg: #FBF5F0;
	--surface: #FFFDFB;
	--tint: #F8E6DA;
	--text: #33231B;
	--muted: #5E4C40;

	/* accent - the FILL colour. It is not safe as body text at 4.37:1,
	   so type uses --accent-ink instead. */
	--accent: #B05C3E;
	--accent-hover: #8C4529;
	--accent-ink: #8C4529;
	--accent-2: #F2C4A8;
	--on-accent: #FFFFFF;
	--on-accent-2: #33231B;

	/* the gate wash is a gradient, so its ink needs its own tokens -
	   a walk-up would report the page ground and describe nothing. */
	--wash: linear-gradient(135deg, #FDF1E7, #F9E0CD 50%, #F3CDB2);
	--wash-fade: linear-gradient(to bottom, rgba(251, 245, 240, 0), #FBF5F0);
	--on-gate: #33231B;
	--on-gate-muted: #5E4C40;
	--on-gate-ink: #8C4529;

	--rule: #A87352;
	--focus: #8C4529;
	--shadow-1: 0 1px 2px rgba(74, 43, 27, .06);
	--shadow-clay: inset 0 -6px 12px rgba(255, 255, 255, .75), 0 16px 34px -14px rgba(146, 72, 44, .34);
	--shadow-pill: 0 1px 2px rgba(74, 43, 27, .06), 0 10px 26px -12px rgba(146, 72, 44, .34);

	/* illustration. In dark mode only the ROOM goes dark - the screen stays
	   lit, because a brown-on-brown panel and ground measure 1.2:1 and the
	   laptop disappears into its own background. */
	--illus-ground: #F8E6DA;
	--illus-blob-far: #EBCDB3;
	--illus-blob-near: #F2DAC4;
	--illus-panel: #FFFDFB;
	--illus-lip: #BE8D6B;
	--illus-skin: #F0C6A4;
	--illus-hair: #4A3527;
	--illus-top: #B05C3E;
	--illus-stroke: #33231B;
	--illus-accent: #8C4529;

	/* type */
	--font-head: "Geologica", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
	--font-body: "Rubik", "Segoe UI", system-ui, -apple-system, sans-serif;
	--step--1: .875rem;
	--step-0: 1.0625rem;
	--step-1: 1.28rem;
	--step-2: 1.55rem;
	--step-3: 1.9rem;
	--step-4: 2.45rem;

	/* space */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;

	/* edges - E2-4 clay puff, softened by the organic direction */
	--r-lg: 30px;
	--r-md: 22px;
	--r-sm: 14px;
	--r-pill: 999px;
	--r-organic: 30px 12px 30px 12px;
	--r-organic-alt: 12px 30px 12px 30px;
	--r-blob: 46% 54% 58% 42% / 52% 44% 56% 48%;

	--column: 44rem;
	--shell: 1140px;
	--pad: clamp(16px, 4vw, 32px);
	--head-h: 66px;
	--sticky-h: 0px;
}

:root[data-theme="dark"] {
	--bg: #1E1611;
	--surface: #281D16;
	--tint: #392B21;
	--text: #F2E7DF;
	--muted: #C4AB9B;

	--accent: #A8552F;
	--accent-hover: #8F4526;
	--accent-ink: #E0A983;
	--accent-2: #E0A983;
	--on-accent: #FFFFFF;
	--on-accent-2: #1E1611;

	/* flat in dark: a light gradient under light ink is the contrast trap */
	--wash: linear-gradient(135deg, #2E211A, #2A1E17 55%, #33251C);
	--wash-fade: linear-gradient(to bottom, rgba(30, 22, 17, 0), #1E1611);
	--on-gate: #F2E7DF;
	--on-gate-muted: #C4AB9B;
	--on-gate-ink: #E0A983;

	--rule: #9E7454;
	--focus: #E0A983;
	--shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
	--shadow-clay: inset 0 -6px 12px rgba(255, 255, 255, .05), 0 16px 34px -14px rgba(0, 0, 0, .6);
	--shadow-pill: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 26px -12px rgba(0, 0, 0, .6);

	--illus-ground: #221913;
	--illus-blob-far: #2E2219;
	--illus-blob-near: #291E16;
	--illus-panel: #F2E3D5;
	--illus-lip: #C4A288;
	--illus-skin: #F0C6A4;
	--illus-hair: #4A3527;
	--illus-top: #B05C3E;
	--illus-stroke: #33231B;
	--illus-accent: #8C4529;
}

/* --------------------------------------------------------------
   2. Base
   -------------------------------------------------------------- */

body {
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: var(--step-0);
	font-weight: 400;
	line-height: 1.72;
	overflow-x: clip;
}

h1, h2, h3, .crb-head__word, .crb-gate__ask, .crb-404__num {
	font-family: var(--font-head);
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -.01em;
}

::selection { background: var(--accent-2); color: var(--on-accent-2); }

/* F-12 custom scrollbar */
* { scrollbar-color: var(--rule) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--rule); border-radius: var(--r-pill); border: 3px solid var(--bg); }

/* F-16 smooth anchors, motion-gated */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

:where(h1, h2, h3, .crb-gate) { scroll-margin-top: calc(var(--head-h) + 28px); }

:where(a):focus-visible,
:where(button):focus-visible,
:where(summary):focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
	border-radius: var(--r-sm);
}

.crb-skip {
	position: fixed;
	top: -200px;
	left: var(--space-4);
	z-index: 60;
	background: var(--accent);
	color: var(--on-accent);
	padding: var(--space-3) var(--space-5);
	border-radius: var(--r-pill);
	text-decoration: none;
}
.crb-skip:focus { top: var(--space-4); }

/* --------------------------------------------------------------
   3. F-2 scroll progress
   -------------------------------------------------------------- */

.crb-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 41;
	pointer-events: none;
}
.crb-progress__bar {
	display: block;
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, var(--accent-2), var(--accent));
	border-end-end-radius: var(--r-pill);
}
body.admin-bar .crb-progress { top: 32px; }

/* --------------------------------------------------------------
   4. Header - E1-2 floating pill
   The wrapper's padding is transparent at rest so the pill floats, and
   is painted once the page scrolls, or the article runs through the gap
   above the card and the bar reads as torn off the top.
   -------------------------------------------------------------- */

.crb-head {
	position: sticky;
	top: 0;
	z-index: 40;
	padding-block: 12px;
	background: transparent;
	transition: background-color .2s ease, box-shadow .2s ease;
}
.crb-head.is-stuck {
	background: var(--bg);
	box-shadow: 0 10px 24px -22px rgba(74, 43, 27, .8);
}
body.admin-bar .crb-head { top: 32px; }

.crb-head__inner {
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: var(--pad);
}

.crb-head__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	min-height: 54px;
	padding: 6px 8px 6px 14px;
	background: var(--surface);
	border-radius: var(--r-pill);
	box-shadow: var(--shadow-pill);
}

.crb-head__brand {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	text-decoration: none;
	color: inherit;
}
.crb-head__mark { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; }
.crb-head__mark svg { width: 30px; height: 30px; }
.crb-head__word {
	font-size: clamp(.94rem, 3.1vw, 1.06rem);
	font-weight: 600;
	letter-spacing: -.015em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

.crb-head__actions {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex: none;
}

/* icon-only buttons: fixed box, never shrink-to-fit around an svg */
.crb-icobtn {
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: var(--r-pill);
	color: var(--text);
	transition: background-color .18s ease;
}
.crb-icobtn:hover { background: var(--tint); }
.crb-icobtn svg { width: 20px; height: 20px; max-width: none; }

/* the crossfade pair is the one place inline-grid is correct: the two
   glyphs are meant to share a single cell */
.crb-toggle { display: inline-grid; grid-template-areas: "icon"; align-items: center; justify-items: center; }
.crb-toggle svg { grid-area: icon; transition: opacity .22s ease, transform .3s ease; }
.crb-toggle__moon { opacity: 0; transform: rotate(-35deg) scale(.7); }
:root[data-theme="dark"] .crb-toggle__sun { opacity: 0; transform: rotate(35deg) scale(.7); }
:root[data-theme="dark"] .crb-toggle__moon { opacity: 1; transform: none; }

/* a multi-element glyph must be flex: inline-grid stretches implicit rows
   and the gap between the bars then measures nothing */
.crb-burger {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
}
.crb-burger__bar {
	display: block;
	width: 19px;
	min-width: 19px;
	max-width: 19px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform .24s ease, opacity .18s ease;
}
.crb-burger[aria-expanded="true"] .crb-burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.crb-burger[aria-expanded="true"] .crb-burger__bar:nth-child(2) { opacity: 0; }
.crb-burger[aria-expanded="true"] .crb-burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------
   5. Language control - lives in the main bar at every width
   -------------------------------------------------------------- */

.crb-lang { position: relative; }
.crb-lang__btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 44px;
	padding-inline: 14px;
	border-radius: var(--r-pill);
	font-size: var(--step--1);
	color: var(--text);
	transition: background-color .18s ease;
}
.crb-lang__btn:hover { background: var(--tint); }
.crb-lang__btn svg { flex: none; }
.crb-lang__chev { transition: transform .2s ease; }
.crb-lang__btn[aria-expanded="true"] .crb-lang__chev { transform: rotate(180deg); }

.crb-lang__panel {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	min-width: 200px;
	padding: var(--space-2);
	background: var(--surface);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-pill);
	z-index: 5;
}
.crb-lang__panel[hidden] { display: none; }

.crb-lang__list { list-style: none; margin: 0; padding: 0; }
.crb-lang__list li a,
.crb-lang__panel a {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 44px;
	padding-inline: var(--space-3);
	border-radius: var(--r-sm);
	font-size: var(--step--1);
	text-decoration: none;
	color: var(--text);
}
.crb-lang__list li a:hover,
.crb-lang__panel a:hover { background: var(--tint); }
.crb-lang__list img,
.crb-lang__panel img { width: 18px; height: auto; }

.crb-lang--sheet { position: static; }
.crb-lang--sheet .crb-lang__list { display: grid; gap: 2px; }

/* TranslatePress paints its own floating picker unless it is told not to */
#trp-floater-ls,
.trp-floater,
#trp-floater-ls-current-language { display: none !important; }

/* the pair: exactly one control on screen at any width */
@media (max-width: 1023px) {
	.crb-head__actions .crb-lang { display: none; }
}
@media (min-width: 1024px) {
	.crb-burger { display: none; }
}

/* --------------------------------------------------------------
   6. Mobile sheet
   -------------------------------------------------------------- */

.crb-scrim {
	position: fixed;
	inset: 0;
	z-index: 50;
	background: rgba(38, 22, 14, .5);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity .24s ease;
}
.crb-scrim[hidden] { display: none; }
.crb-scrim.is-open { opacity: 1; }

.crb-sheet {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 51;
	max-height: 82vh;
	overflow-y: auto;
	padding: var(--space-3) var(--pad) calc(var(--space-6) + env(safe-area-inset-bottom));
	background: var(--surface);
	border-start-start-radius: var(--r-lg);
	border-start-end-radius: var(--r-lg);
	box-shadow: 0 -18px 44px -20px rgba(74, 43, 27, .55);
	transform: translateY(102%);
	transition: transform .28s cubic-bezier(.22, .8, .3, 1);
}
.crb-sheet[hidden] { display: none; }
.crb-sheet.is-open { transform: translateY(0); }

.crb-sheet__grip {
	width: 44px;
	height: 4px;
	margin-inline: auto;
	margin-block-end: var(--space-3);
	border-radius: var(--r-pill);
	background: var(--rule);
	opacity: .5;
}
.crb-sheet__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-block-end: var(--space-3);
}
.crb-sheet__title { font-family: var(--font-head); font-weight: 600; font-size: var(--step-1); }
.crb-sheet__links { margin-block-start: var(--space-5); border-block-start: 1px solid var(--rule); padding-block-start: var(--space-4); }
.crb-sheet__links .crb-foot__menu { display: grid; gap: 2px; }

/* --------------------------------------------------------------
   7. Layout shell and the reading column
   -------------------------------------------------------------- */

.crb-main {
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: var(--pad);
	padding-block: var(--space-6) var(--space-8);
}

.crb-entry > :where(*:not(.crb-gate)) {
	max-width: var(--column);
	margin-inline: auto;
}

.crb-entry > * + * { margin-block-start: var(--space-5); }
.crb-entry > h2 { margin-block-start: var(--space-8); }

.crb-entry h1,
.crb-h1 {
	font-size: clamp(1.95rem, 5.2vw, var(--step-4));
	font-weight: 800;
	margin-block: var(--space-6) var(--space-5);
	margin-inline: auto;
}
.crb-entry h2 {
	font-size: clamp(1.36rem, 3.5vw, var(--step-2));
	font-weight: 600;
	margin-block: 0 var(--space-4);
	margin-inline: auto;
	color: var(--accent-ink);
}
.crb-entry p { margin-block: 0; margin-inline: auto; }
.crb-lede { font-size: clamp(1.1rem, 2.6vw, var(--step-1)); color: var(--text); }

/* link colours must not repaint a button sitting inside the article */
.crb-entry a:not([class]) {
	color: var(--accent-ink);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.crb-entry a:not([class]):hover { text-decoration-thickness: 2px; }

/* Gutenberg lists carry a class, so ul:not([class]) never reaches them */
.crb-entry .wp-block-list {
	margin-block: 0;
	margin-inline: auto;
	padding-inline-start: 1.35em;
	display: grid;
	gap: var(--space-3);
}
.crb-entry .wp-block-list li { padding-inline-start: 4px; }
.crb-entry .wp-block-list li::marker { color: var(--accent-ink); font-weight: 500; }
.crb-entry .wp-block-list strong { font-weight: 500; color: var(--accent-ink); }

.crb-entry .crb-steps {
	list-style: none;
	padding-inline-start: 0;
	counter-reset: crbstep;
	gap: var(--space-3);
}
.crb-entry .crb-steps li {
	counter-increment: crbstep;
	position: relative;
	padding: var(--space-4) var(--space-5) var(--space-4) 62px;
	background: var(--surface);
	border-radius: var(--r-organic);
	box-shadow: var(--shadow-1);
}
.crb-entry .crb-steps li:nth-child(even) { border-radius: var(--r-organic-alt); }
.crb-entry .crb-steps li::before {
	content: counter(crbstep);
	position: absolute;
	top: var(--space-4);
	left: var(--space-4);
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border-radius: var(--r-pill);
	background: var(--accent-2);
	color: var(--on-accent-2);
	font-family: var(--font-head);
	font-size: var(--step--1);
	font-weight: 600;
}

/* --------------------------------------------------------------
   8. Age gate - D-1 Aurora Veil
   The only block exempt from the reading column: a soft band whose
   bottom dissolves into the page so the article flows out of it.
   -------------------------------------------------------------- */

.crb-gate {
	position: relative;
	isolation: isolate;
	max-width: 62rem;
	margin-block: 0 var(--space-7);
	margin-inline: auto;
	padding: clamp(28px, 6vw, 56px) var(--pad) clamp(40px, 8vw, 72px);
	border-radius: var(--r-lg);
	overflow: hidden;
	text-align: center;
}
.crb-gate__wash {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--wash);
}
.crb-gate__wash::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 42%;
	background: var(--wash-fade);
}
.crb-gate__blob {
	position: absolute;
	width: 46%;
	aspect-ratio: 1;
	border-radius: var(--r-blob);
	filter: blur(52px);
	opacity: .55;
	will-change: transform;
}
.crb-gate__blob--a { top: -12%; left: -6%; background: var(--accent-2); animation: crb-drift-a 22s ease-in-out infinite; }
.crb-gate__blob--b { top: 18%; right: -10%; background: var(--accent); opacity: .3; animation: crb-drift-b 26s ease-in-out infinite; }
.crb-gate__blob--c { bottom: -18%; left: 34%; background: var(--accent-2); opacity: .4; animation: crb-drift-c 18s ease-in-out infinite; }

@keyframes crb-drift-a { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(9%, 7%, 0); } }
@keyframes crb-drift-b { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-8%, 10%, 0); } }
@keyframes crb-drift-c { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(6%, -9%, 0); } }

.crb-gate__inner { position: relative; max-width: 34rem; margin-inline: auto; }

.crb-gate__badge {
	display: inline-flex;
	margin-block: 0 var(--space-4);
	margin-inline: auto;
}
.crb-gate__badge span {
	display: inline-grid;
	place-items: center;
	align-items: center;
	justify-items: center;
	min-width: 62px;
	min-height: 34px;
	padding-inline: var(--space-4);
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .72);
	color: var(--on-gate-ink);
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--step--1);
	letter-spacing: .06em;
}
:root[data-theme="dark"] .crb-gate__badge span { background: rgba(255, 255, 255, .09); }

.crb-gate__ask {
	margin-block: 0 var(--space-5);
	margin-inline: auto;
	font-size: clamp(1.35rem, 4.4vw, 2.05rem);
	font-weight: 600;
	color: var(--on-gate);
}

.crb-gate__go,
.crb-entry a[href="/chat.html"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 56px;
	padding: 0 clamp(24px, 5vw, 38px);
	border-radius: var(--r-pill);
	background-color: var(--accent);
	background-image: none;
	color: var(--on-accent);
	font-family: var(--font-head);
	font-weight: 600;
	font-size: clamp(1rem, 2.6vw, 1.1rem);
	text-decoration: none;
	box-shadow: var(--shadow-clay);
	overflow: hidden;
	transition: background-color .2s ease, transform .2s ease;
}
.crb-gate__go:hover,
.crb-entry a[href="/chat.html"]:hover { background-color: var(--accent-hover); transform: translateY(-2px); }
.crb-gate__go-label { position: relative; transition: transform .24s ease; }
.crb-gate__go-arrow { width: 20px; height: 20px; opacity: 0; transform: translateX(-10px); transition: opacity .24s ease, transform .24s ease; }
.crb-gate__go:hover .crb-gate__go-label { transform: translateX(-5px); }
.crb-gate__go:hover .crb-gate__go-arrow { opacity: 1; transform: translateX(0); }

.crb-gate__note {
	margin-block: var(--space-4) 0;
	margin-inline: auto;
	max-width: 30rem;
	font-size: var(--step--1);
	color: var(--on-gate-muted);
}

/* short phones: take the height out of the GATE, never move the notice */
@media (max-width: 600px) and (max-height: 740px) {
	.crb-gate { padding-block: var(--space-5) var(--space-6); }
	.crb-gate__badge { margin-block-end: var(--space-2); }
	.crb-gate__ask { font-size: 1.2rem; margin-block-end: var(--space-4); }
	.crb-gate__note { margin-block-start: var(--space-3); font-size: .82rem; }
}

/* --------------------------------------------------------------
   9. Illustration - Bank H-1, one at the screen
   Every shape is coloured from a token, so it lives in both themes.
   The :where() floor is an anti-black backstop only; because a zero
   specificity selector still beats inheritance, each group restates
   its own colours at class specificity.
   -------------------------------------------------------------- */

.crb-figure {
	max-width: var(--column);
	margin-block: var(--space-6);
	margin-inline: auto;
}
.crb-illus {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
	border-radius: var(--r-md);
	background: var(--illus-ground);
	overflow: hidden;
}

:where(.crb-illus) path,
:where(.crb-illus) circle,
:where(.crb-illus) rect { fill: var(--illus-panel); stroke: none; }

.crb-illus__blob--far { fill: var(--illus-blob-far); stroke: none; }
.crb-illus__blob--near { fill: var(--illus-blob-near); stroke: none; }
.crb-illus__panel { fill: var(--illus-panel); stroke: var(--illus-lip); stroke-width: 2; }
.crb-illus__panel-lip { fill: var(--illus-lip); stroke: none; }
.crb-illus__hair { fill: var(--illus-hair); stroke: none; }
.crb-illus__skin { fill: var(--illus-skin); stroke: none; }
.crb-illus__top { fill: var(--illus-top); stroke: none; }
.crb-illus__wave { fill: none; stroke: var(--illus-accent); stroke-width: 5; stroke-linecap: round; }
.crb-illus__dot { fill: var(--illus-accent); stroke: none; }
.crb-illus__rule { fill: none; stroke: var(--illus-lip); stroke-width: 4; stroke-linecap: round; }

/* --------------------------------------------------------------
   10. Comparison cards, pull quote, chip strip
   Accent strategy 2: the tint carries the emphasis, not coloured rules.
   -------------------------------------------------------------- */

.crb-compare {
	display: grid;
	gap: var(--space-4);
	max-width: var(--column);
	margin-block: var(--space-5);
	margin-inline: auto;
}
@media (min-width: 768px) {
	.crb-compare { grid-template-columns: 1fr 1fr; }
}
.crb-compare__card {
	padding: var(--space-5);
	background: var(--surface);
	border-radius: var(--r-organic);
	box-shadow: var(--shadow-clay);
}
.crb-compare__card--tint { background: var(--tint); border-radius: var(--r-organic-alt); }
.crb-compare__head {
	margin-block: 0 var(--space-4);
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--step-0);
	color: var(--accent-ink);
}
.crb-compare__set { margin-block: 0; display: grid; gap: var(--space-3); }
.crb-compare__set dt {
	font-size: .76rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--muted);
}
.crb-compare__set dd { margin: 0; font-size: var(--step--1); line-height: 1.6; }

.crb-entry .crb-pull {
	max-width: var(--column);
	margin-block: var(--space-6);
	margin-inline: auto;
	padding: var(--space-5) var(--space-5) var(--space-5) var(--space-7);
	border: 0;
	background: var(--tint);
	border-radius: var(--r-organic-alt);
	position: relative;
}
.crb-entry .crb-pull::before {
	content: "\201C";
	position: absolute;
	top: 2px;
	left: 14px;
	font-family: var(--font-head);
	font-size: 3.4rem;
	line-height: 1;
	color: var(--accent-2);
}
:root[data-theme="dark"] .crb-entry .crb-pull::before { color: var(--accent-ink); opacity: .55; }
.crb-entry .crb-pull p {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: clamp(1.08rem, 2.8vw, 1.28rem);
	line-height: 1.45;
}

.crb-strip {
	max-width: var(--column);
	margin-block: var(--space-5);
	margin-inline: auto;
	overflow: hidden;
}
.crb-strip__set {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-block: 0;
	margin-inline: auto;
}
.crb-strip__chip {
	display: inline-flex;
	align-items: center;
	padding: 7px 15px;
	border-radius: var(--r-pill);
	background: var(--surface);
	box-shadow: var(--shadow-1);
	font-size: var(--step--1);
	color: var(--muted);
	white-space: nowrap;
}
.crb-strip__chip:nth-child(3n+2) { background: var(--tint); color: var(--text); }

.crb-close { font-size: clamp(1.02rem, 2.4vw, 1.16rem); }

/* --------------------------------------------------------------
   11. Buttons used outside the article
   -------------------------------------------------------------- */

.crb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 52px;
	padding-inline: var(--space-6);
	border-radius: var(--r-pill);
	background-color: var(--accent);
	background-image: none;
	color: var(--on-accent);
	font-family: var(--font-head);
	font-weight: 600;
	text-decoration: none;
	box-shadow: var(--shadow-clay);
	transition: background-color .2s ease, transform .2s ease;
}
.crb-btn:hover { background-color: var(--accent-hover); transform: translateY(-2px); }
.crb-btn--ghost { background-color: var(--tint); color: var(--accent-ink); box-shadow: var(--shadow-1); }
.crb-btn--ghost:hover { background-color: var(--accent-2); color: var(--on-accent-2); }

/* --------------------------------------------------------------
   12. Sticky call bar - the href is derived, never a second copy
   -------------------------------------------------------------- */

.crb-callbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 30;
	padding: var(--space-3) var(--pad) calc(var(--space-3) + env(safe-area-inset-bottom));
	background: var(--bg);
	background: color-mix(in srgb, var(--bg) 92%, transparent);
	backdrop-filter: blur(10px);
	box-shadow: 0 -8px 26px -20px rgba(74, 43, 27, .8);
	transform: translateY(110%);
	transition: transform .26s ease;
	pointer-events: none;
}
.crb-callbar.is-up { transform: translateY(0); pointer-events: auto; }
.crb-callbar__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	border-radius: var(--r-pill);
	background-color: var(--accent);
	background-image: none;
	color: var(--on-accent);
	font-family: var(--font-head);
	font-weight: 600;
	text-decoration: none;
	box-shadow: var(--shadow-clay);
}
@media (min-width: 768px) {
	.crb-callbar { display: none; }
}

/* --------------------------------------------------------------
   13. Cookie notice - bottom-pinned in every state. It is laid out
       unraised so its rect can be measured against the gate button,
       and only lifted when the two are clear of each other.
   -------------------------------------------------------------- */

.crb-cookie {
	position: fixed;
	left: var(--space-4);
	right: var(--space-4);
	bottom: calc(var(--space-4) + var(--sticky-h) + env(safe-area-inset-bottom));
	z-index: 35;
	max-width: 520px;
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-5);
	background: var(--surface);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-pill);
	opacity: 0;
	transform: translateY(14px);
	pointer-events: none;
	transition: opacity .3s ease, transform .3s ease;
}
.crb-cookie[hidden] { display: none; }
.crb-cookie.is-up { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* measured with the entrance offset neutralised, or the rect read is the
   resting position rather than the one the card would occupy raised */
.crb-cookie.is-measuring { transform: none; transition: none; }
.crb-cookie__text {
	flex: 1 1 240px;
	min-width: 0;
	margin: 0;
	font-size: var(--step--1);
	line-height: 1.55;
	color: var(--muted);
}
.crb-cookie__text a { color: var(--accent-ink); text-underline-offset: 3px; }
.crb-cookie__ok {
	flex: none;
	min-height: 44px;
	padding-inline: var(--space-5);
	border-radius: var(--r-pill);
	background-color: var(--accent);
	color: var(--on-accent);
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--step--1);
	transition: background-color .2s ease;
}
.crb-cookie__ok:hover { background-color: var(--accent-hover); }

.crb-cookie[data-compact] { padding: var(--space-3) var(--space-4); gap: var(--space-2); }
.crb-cookie[data-compact] .crb-cookie__text { font-size: .8rem; line-height: 1.45; }
.crb-cookie[data-compact] .crb-cookie__tail { display: none; }
.crb-cookie[data-compact] .crb-cookie__ok { min-height: 40px; padding-inline: var(--space-4); }

/* --------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------- */

.crb-foot {
	margin-block-start: var(--space-8);
	padding-block: var(--space-7);
	padding-bottom: calc(var(--space-7) + var(--sticky-h));
	background: var(--tint);
}
.crb-foot__inner {
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: var(--pad);
	display: grid;
	gap: var(--space-4);
	justify-items: center;
	text-align: center;
}
.crb-foot__brand { display: flex; align-items: center; gap: 10px; }
.crb-foot__mark { display: inline-grid; place-items: center; width: 26px; height: 26px; }
.crb-foot__mark svg { width: 26px; height: 26px; }
.crb-foot__word { font-family: var(--font-head); font-weight: 600; }
.crb-foot__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2) var(--space-5);
}
.crb-foot__menu a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: var(--step--1);
	color: var(--muted);
	text-underline-offset: 3px;
}
.crb-foot__menu a:hover { color: var(--accent-ink); }
.crb-foot__copy { font-size: var(--step--1); color: var(--muted); }

/* --------------------------------------------------------------
   15. 404
   -------------------------------------------------------------- */

.crb-404 {
	position: relative;
	max-width: 36rem;
	margin-inline: auto;
	padding-block: var(--space-8);
	text-align: center;
}
.crb-404__blob {
	position: absolute;
	top: 6%;
	left: 50%;
	width: 260px;
	height: 260px;
	transform: translateX(-50%);
	border-radius: var(--r-blob);
	background: var(--accent-2);
	opacity: .35;
	filter: blur(28px);
	z-index: -1;
}
.crb-404__num { font-size: clamp(4rem, 18vw, 7.5rem); font-weight: 800; line-height: 1; color: var(--accent-ink); }
.crb-404__title { font-size: clamp(1.3rem, 4vw, var(--step-2)); margin-block: var(--space-4) var(--space-3); }
.crb-404__line { color: var(--muted); margin-block-end: var(--space-6); }

/* --------------------------------------------------------------
   16. WordPress admin bar. Below 783px the bar is position:absolute and
       scrolls away, so a sticky header holding 46px hangs there forever.
   -------------------------------------------------------------- */

@media (max-width: 782px) {
	body.admin-bar .crb-head { top: 0; }
	body.admin-bar .crb-progress { top: 0; }
}

/* --------------------------------------------------------------
   17. Inner pages
   -------------------------------------------------------------- */

.crb-entry--page h2 { font-size: clamp(1.25rem, 3.2vw, var(--step-1)); }
.crb-entry--page ul,
.crb-entry--page ol { max-width: var(--column); margin-inline: auto; padding-inline-start: 1.35em; }