/* ==========================================================================
   The Coffee Handbook — design layer over Astra

   Header geometry copied from thewattguide.com:
     1500px bar · 12px/32px padding · 86px logo · centred nav · 14px/600 links
     flat white header, single 1px rule, no blur
   Palette sampled from the site logo (#a05818 / #b06020 copper on warm black).
   ========================================================================== */

:root {
	--chb-ink:         #1a1512;
	--chb-ink-dim:     #4a423b;
	--chb-ink-faint:   #7a6e63;
	--chb-line:        #e8e1d5;
	--chb-line-soft:   #f4efe6;
	--chb-surface:     #faf6ef;

	/* Gold from the logo badge. The bright metallic gold fails contrast as
	   body-copy colour, so links use the deeper tone and the bright one is
	   reserved for rules, borders and large display accents. */
	--chb-gold:        #c88830;   /* sampled from the logo badge */
	--chb-accent:      #9a6420;   /* deeper tone, passes contrast as link colour */
	--chb-accent-deep: #744b18;
	--chb-accent-soft: rgba(200, 136, 48, .12);
	--chb-cream:       #f0d8b8;   /* wordmark cream, for dark backgrounds */

	--chb-display: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--chb-sans:    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, sans-serif;
	--chb-mono:    ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;

	--chb-content: 1200px;
	--chb-header:  1500px;
}

/* ---------- base ------------------------------------------------------ */

body,
.ast-container {
	font-family: var(--chb-sans);
	color: var(--chb-ink-dim);
}

h1, h2, h3, h4, h5, h6,
.entry-title, .site-title {
	font-family: var(--chb-display) !important;
	color: var(--chb-ink);
	letter-spacing: -.02em;
	line-height: 1.15;
}

h1, .entry-title { font-size: clamp(32px, 5.2vw, 52px); font-weight: 800; line-height: 1.08; letter-spacing: -.03em; }
h2 { font-size: clamp(25px, 3.4vw, 33px); font-weight: 800; margin-top: 2.25em; }
h3 { font-size: clamp(20px, 2.4vw, 24px); font-weight: 700; margin-top: 1.75em; }
h4 { font-size: 1.0625rem; font-weight: 700; }

a { color: var(--chb-accent-deep); }
a:hover, a:focus { color: var(--chb-accent); }

/* ---------- header — mirrors thewattguide.com -------------------------- */

.site-header,
.ast-primary-header-bar,
.main-header-bar {
	background: #fff !important;
	border-bottom: 1px solid var(--chb-line) !important;
	box-shadow: none !important;
}

.ast-primary-header-bar .ast-container,
.main-header-bar .ast-container,
.site-primary-header-wrap .ast-container {
	max-width: var(--chb-header) !important;
	padding-left: 32px !important;
	padding-right: 32px !important;
}

.main-header-bar,
.ast-primary-header-bar {
	padding-top: 12px !important;
	padding-bottom: 12px !important;
	min-height: 0 !important;
}

/* logo — 86px tall, exactly as on thewattguide */
.site-logo-img img,
.custom-logo-link img,
.astra-logo-svg,
.site-branding img {
	height: 86px !important;
	width: auto !important;
	max-height: 86px !important;
	margin: -5px 0 !important;
}
.ast-site-identity { padding: 0 !important; }

/* nav */
.main-header-menu > .menu-item > a,
.ast-builder-menu-1 .main-header-menu > .menu-item > a {
	font-family: var(--chb-sans) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--chb-ink-dim) !important;
	padding: 10px 13px !important;
	border-radius: 8px;
	line-height: 1.4 !important;
	transition: color .15s, background .15s;
}
.main-header-menu > .menu-item > a:hover,
.main-header-menu > .current-menu-item > a,
.main-header-menu > .current_page_item > a {
	color: var(--chb-accent) !important;
	background: var(--chb-accent-soft) !important;
}
.main-header-menu .sub-menu {
	border: 1px solid var(--chb-line);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(20, 16, 13, .10), 0 4px 8px rgba(20, 16, 13, .05);
	padding: 6px;
	min-width: 210px;
}
.main-header-menu .sub-menu .menu-item a {
	font-size: 14px !important;
	font-weight: 500 !important;
	padding: 9px 14px !important;
	border-radius: 6px;
	border: 0 !important;
}
.main-header-menu .sub-menu .menu-item a:hover {
	color: var(--chb-accent) !important;
	background: var(--chb-accent-soft) !important;
}

/* ---------- content width --------------------------------------------- */

.site-content .ast-container { max-width: var(--chb-content); }
.entry-content > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.entry-content > .alignwide  { max-width: 1040px; }
.entry-content > .alignfull  { max-width: none; }
.entry-content { font-size: 1.0625rem; line-height: 1.75; }
.entry-content p { margin-bottom: 1.5em; }
.entry-content li { margin-bottom: .5em; }

/* ---------- images ----------------------------------------------------- */

.entry-content img,
.wp-block-image img {
	border-radius: 10px;
	display: block;
	height: auto;
}
.wp-block-image figcaption,
figcaption {
	font-size: .8125rem;
	color: var(--chb-ink-faint);
	text-align: center;
	margin-top: .6rem;
}
.post-thumb img, .ast-article-post img { border-radius: 10px; }

/* ---------- featured image (rendered by chb-design.php) ----------------- */

.chb-featured {
	max-width: 1040px !important;
	margin: 0 auto 2rem !important;
	padding: 0;
}
.chb-featured img {
	width: 100%; height: auto; display: block;
	aspect-ratio: 16 / 8;
	object-fit: cover;
	border-radius: 12px;
}

/* ---------- affiliate disclosure --------------------------------------- */

.chb-disclosure {
	max-width: 760px;
	margin: 0 auto 2rem !important;
	padding: .875rem 1.125rem;
	background: var(--chb-surface);
	border: 1px solid var(--chb-line);
	border-left: 3px solid var(--chb-accent);
	border-radius: 8px;
	font-size: .8125rem;
	line-height: 1.6;
	color: var(--chb-ink-faint);
}

/* ---------- key-takeaways / callout ------------------------------------ */

.chb-callout {
	max-width: 760px;
	margin: 2rem auto !important;
	padding: 1.375rem 1.5rem;
	background: var(--chb-surface);
	border: 1px solid var(--chb-line);
	border-radius: 10px;
}
.chb-callout > strong:first-child {
	display: block;
	font-family: var(--chb-mono);
	font-size: .6875rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--chb-accent);
	margin-bottom: .75rem;
}
.chb-callout ul { margin: 0; padding-left: 1.1rem; }

/* ---------- spec / comparison tables ------------------------------------ */

.entry-content table,
.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: .9375rem;
	margin: 2rem 0;
}
.entry-content th {
	background: var(--chb-ink);
	color: #fff;
	font-family: var(--chb-mono);
	font-size: .6875rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-align: left;
	padding: .875rem 1rem;
	border: 0;
}
.entry-content td {
	padding: .8125rem 1rem;
	border-top: 1px solid var(--chb-line);
	vertical-align: top;
}
.entry-content tbody tr:nth-child(even) { background: var(--chb-surface); }
.wp-block-table { overflow-x: auto; }

/* ---------- buttons ---------------------------------------------------- */

.wp-block-button__link,
.ast-button, .ast-custom-button, button, input[type="submit"] {
	background: var(--chb-accent) !important;
	border-color: var(--chb-accent) !important;
	color: #fff !important;
	border-radius: 8px !important;
	font-family: var(--chb-mono) !important;
	font-size: .75rem !important;
	letter-spacing: .12em !important;
	text-transform: uppercase !important;
	padding: .8125rem 1.75rem !important;
	transition: background .15s;
}
.wp-block-button__link:hover,
.ast-button:hover, button:hover, input[type="submit"]:hover {
	background: var(--chb-accent-deep) !important;
	border-color: var(--chb-accent-deep) !important;
}
.is-style-outline .wp-block-button__link {
	background: transparent !important;
	color: var(--chb-ink) !important;
	border: 1px solid var(--chb-line) !important;
}

/* ---------- archive / post cards ---------------------------------------- */

.ast-article-post, .ast-separate-container .ast-article-post {
	border: 1px solid var(--chb-line);
	border-radius: 10px;
	overflow: hidden;
	transition: box-shadow .18s, transform .18s;
}
.ast-article-post:hover { box-shadow: 0 8px 24px rgba(20, 16, 13, .08); transform: translateY(-2px); }
.ast-article-post .entry-title { font-size: 1.25rem !important; font-weight: 700; }
.ast-article-post .entry-title a { color: var(--chb-ink); }
.ast-article-post .entry-title a:hover { color: var(--chb-accent); }

.entry-meta, .entry-meta * {
	font-family: var(--chb-mono);
	font-size: .6875rem !important;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--chb-ink-faint) !important;
}

/* ---------- our footer (rendered by chb-design.php) ---------------------- */

/* Astra's own footer is suppressed — ours replaces it entirely. */
.site-footer, .ast-small-footer,
.site-below-footer-wrap, .site-primary-footer-wrap { display: none !important; }

.chb-footer { background: var(--chb-ink); color: rgba(255, 255, 255, .68); border-top: 3px solid var(--chb-gold); }
.chb-fgrid {
	display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px;
	padding-top: clamp(36px, 5vw, 56px); padding-bottom: clamp(28px, 4vw, 40px);
}
.chb-fbrand .chb-flogo { max-width: 210px; height: auto; margin-bottom: 16px; }
.chb-fbrand p { font-size: 14px; line-height: 1.6; margin: 0 0 10px; color: rgba(255, 255, 255, .68); }
.chb-fnote { font-size: 12.5px !important; color: rgba(255, 255, 255, .42) !important; max-width: 40ch; }
.chb-fcol h4 {
	color: #fff !important; font-size: 13px !important; font-weight: 700;
	text-transform: uppercase; letter-spacing: .08em; margin: 0 0 14px;
}
.chb-fcol ul { list-style: none; margin: 0; padding: 0; }
.chb-fcol li + li { margin-top: 9px; }
.chb-fcol a { font-size: 14px; color: rgba(255, 255, 255, .68) !important; transition: color .15s; }
.chb-fcol a:hover { color: var(--chb-gold) !important; }
.chb-fbase {
	border-top: 1px solid rgba(255, 255, 255, .09);
	padding-top: 18px; padding-bottom: 22px;
	display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
	font-size: 12.5px; color: rgba(255, 255, 255, .4);
}
@media (max-width: 900px) { .chb-fgrid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 560px) { .chb-fgrid { grid-template-columns: 1fr; } }

/* page lede paragraph */
.chb-lede { font-size: 1.1875rem !important; line-height: 1.6; color: var(--chb-ink) !important; font-weight: 500; }

/* ---------- legacy Astra footer selectors (kept for reference) ----------- */

.ast-footer-unused-placeholder, .site-footer-unused {
	background: var(--chb-ink) !important;
	color: rgba(255, 255, 255, .7) !important;
	border-top: 3px solid var(--chb-gold);   /* bright gold reads well on dark */
}
.site-footer a, .ast-small-footer a { color: rgba(255, 255, 255, .7) !important; }
.site-footer a:hover, .ast-small-footer a:hover { color: var(--chb-gold) !important; }
.site-footer h2, .site-footer h3, .site-footer h4,
.site-footer .widget-title { color: #fff !important; font-size: .9375rem !important; }
.site-footer .ast-container { max-width: var(--chb-content); }

/* ---------- responsive --------------------------------------------------- */

@media (max-width: 1100px) {
	.ast-primary-header-bar .ast-container,
	.main-header-bar .ast-container { padding-left: 24px !important; padding-right: 24px !important; }
	.site-logo-img img, .custom-logo-link img { height: 72px !important; max-height: 72px !important; }
	.main-header-menu > .menu-item > a { padding: 9px 9px !important; font-size: 13px !important; }
}

@media (max-width: 720px) {
	.site-logo-img img, .custom-logo-link img { height: 52px !important; max-height: 52px !important; margin: 0 !important; }
	.entry-content { font-size: 1rem; }
	h2 { margin-top: 1.75em; }
}

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

/* ==========================================================================
   Homepage component system.
   Structure, sizes and weights mirror thewattguide.com 1:1 — hero, stat band,
   3-up "system" cards, category grid, FAQ, closing CTA. Only the palette
   differs (gold/near-black instead of blue/navy).
   ========================================================================== */

.chb-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ---------- announcement bar ------------------------------------------- */
.chb-announce {
	background: var(--chb-ink); color: rgba(255, 255, 255, .72);
	text-align: center; padding: 8px 16px;
	font-size: 13px; font-weight: 500;
	display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap;
}
.chb-announce a { color: var(--chb-gold) !important; font-weight: 600; }

/* ---------- hero -------------------------------------------------------- */
.chb-hero {
	background: var(--chb-ink);
	padding: clamp(48px, 8vw, 88px) 0 clamp(40px, 6vw, 64px);
	color: #fff;
}
.chb-hero-copy { max-width: 780px; }
.chb-hero-eyebrow {
	display: inline-flex; align-items: center; gap: 7px;
	background: rgba(200, 136, 48, .16); border: 1px solid rgba(200, 136, 48, .40);
	color: #e8b96a; font-size: 12.5px; font-weight: 700;
	padding: 5px 13px; border-radius: 999px; margin-bottom: 20px;
	text-transform: uppercase; letter-spacing: .05em;
}
.chb-hero h1 {
	color: #fff !important; font-size: clamp(32px, 5.2vw, 52px); font-weight: 800;
	line-height: 1.08; margin: 0 0 16px; letter-spacing: -.03em;
}
.chb-hero h1 em { font-style: normal; color: var(--chb-gold); }
.chb-hero-sub { font-size: 18px; color: rgba(255, 255, 255, .76); max-width: 680px; margin: 0 0 30px; line-height: 1.55; }
.chb-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.chb-hero-btn {
	display: inline-block; padding: 14px 26px;
	font-size: 15.5px; font-weight: 700;
	background: var(--chb-gold); color: #1a1512 !important;
	border: 2px solid var(--chb-gold); border-radius: 10px;
	transition: all .15s; white-space: nowrap;
}
.chb-hero-btn:hover { background: #b4761f; border-color: #b4761f; color: #fff !important; }
.chb-hero-btn.ghost { background: transparent; color: #fff !important; border-color: rgba(255, 255, 255, .3); }
.chb-hero-btn.ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }
.chb-hero-quick { margin-top: 16px; font-size: 13.5px; color: rgba(255, 255, 255, .55); display: flex; gap: 8px; flex-wrap: wrap; }
.chb-hero-quick a { color: rgba(255, 255, 255, .8) !important; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- stat band ---------------------------------------------------- */
.chb-stats { background: #241d18; padding: 28px 0; border-top: 1px solid rgba(255, 255, 255, .07); }
.chb-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.chb-stat-num {
	font-family: var(--chb-display); font-size: 34px; font-weight: 800; color: #fff;
	line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.chb-stat-label {
	font-size: 12.5px; color: rgba(255, 255, 255, .55); margin-top: 7px;
	text-transform: uppercase; letter-spacing: .07em; font-weight: 600;
}

/* ---------- sections ------------------------------------------------------ */
.chb-sec { padding: clamp(44px, 6vw, 72px) 0; background: #fff; }
.chb-sec.alt { background: var(--chb-surface); }
.chb-sec-head { margin-bottom: 32px; max-width: 720px; }
.chb-sec-head h2 { font-size: clamp(25px, 3.4vw, 33px); font-weight: 800; margin: 0 0 10px; }
.chb-sec-head p { font-size: 16.5px; color: var(--chb-ink-faint); margin: 0; line-height: 1.55; }

/* ---------- 3-up "system" cards -------------------------------------------- */
.chb-system { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.chb-sys-card {
	background: #fff; border: 1px solid var(--chb-line); border-radius: 12px;
	padding: 24px; display: flex; flex-direction: column;
}
.chb-sec.alt .chb-sys-card { background: #fff; }
.chb-sys-step {
	font-family: var(--chb-mono); font-size: 11px; font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase; color: var(--chb-accent); margin-bottom: 10px;
}
.chb-sys-card h3 { font-size: 18px; font-weight: 750; margin: 0 0 8px; }
.chb-sys-card p { font-size: 14.5px; color: var(--chb-ink-faint); margin: 0 0 14px; line-height: 1.55; }
.chb-sys-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.chb-sys-links a {
	font-size: 12.5px; font-weight: 650; padding: 5px 11px; border-radius: 999px;
	background: var(--chb-accent-soft); color: var(--chb-accent) !important; transition: all .14s;
}
.chb-sys-links a:hover { background: var(--chb-gold); color: #1a1512 !important; }

/* ---------- category cards --------------------------------------------------- */
.chb-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.chb-cat {
	background: #fff; border: 1px solid var(--chb-line); border-radius: 12px;
	overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .18s, transform .18s;
}
.chb-cat:hover { box-shadow: 0 10px 28px rgba(26, 21, 18, .10); transform: translateY(-2px); }
.chb-cat-img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--chb-surface); }
.chb-cat-img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.chb-cat-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.chb-cat h3 { font-size: 17px; font-weight: 700; margin: 0 0 6px; }
.chb-cat p { font-size: 14px; color: var(--chb-ink-faint); margin: 0 0 12px; line-height: 1.5; flex: 1; }
.chb-cat-link { font-size: 13.5px; font-weight: 700; color: var(--chb-accent) !important; }

/* ---------- FAQ ------------------------------------------------------------- */
.chb-faqs { border: 1px solid var(--chb-line); border-radius: 12px; overflow: hidden; background: #fff; max-width: 900px; }
.chb-faqs details + details { border-top: 1px solid var(--chb-line); }
.chb-faqs summary {
	padding: 16px 20px; cursor: pointer; list-style: none;
	font-size: 15.5px; font-weight: 650; color: var(--chb-ink);
	display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.chb-faqs summary::-webkit-details-marker { display: none; }
.chb-faqs summary::after {
	content: ""; width: 9px; height: 9px; flex-shrink: 0;
	border-right: 2px solid var(--chb-ink-faint); border-bottom: 2px solid var(--chb-ink-faint);
	transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s;
}
.chb-faqs details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.chb-faqs details[open] summary { color: var(--chb-accent); }
.chb-faqs .chb-faq-body { padding: 0 20px 18px; font-size: 15px; color: var(--chb-ink-faint); line-height: 1.65; }

/* ---------- closing CTA ------------------------------------------------------ */
.chb-cta { background: var(--chb-ink); color: #fff; padding: clamp(44px, 6vw, 68px) 0; text-align: center; }
.chb-cta h2 { color: #fff !important; font-size: clamp(24px, 3.2vw, 31px); font-weight: 800; margin: 0 0 12px; }
.chb-cta p { font-size: 16.5px; color: rgba(255, 255, 255, .7); margin: 0 auto 26px; max-width: 620px; }

/* ---------- homepage responsive ------------------------------------------------ */
@media (max-width: 980px) {
	.chb-system, .chb-cats { grid-template-columns: repeat(2, 1fr); }
	.chb-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 16px; }
}
@media (max-width: 640px) {
	.chb-system, .chb-cats { grid-template-columns: 1fr; }
	.chb-hero-sub { font-size: 16.5px; }
	.chb-stat-num { font-size: 28px; }
}

/* the homepage template supplies its own full-width sections */
.page-template-default .entry-content > .chb-hero,
.entry-content > .chb-hero, .entry-content > .chb-stats,
.entry-content > .chb-sec, .entry-content > .chb-cta {
	max-width: none; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}

/* ==========================================================================
   Appended patch — logo scale, duplicate site title, scroll-top, hero texture.
   Kept in one block at the end of the file on purpose: these rules override
   earlier ones by source order, so they must stay last.
   ========================================================================== */

/* Scroll-to-top button: Astra paints it in its own blue, which is in no part of
   this palette. Hidden rather than unhooked — the markup comes from an Astra
   class whose callback name has moved between theme versions, and a
   remove_action naming the wrong one fails silently. display:none also takes it
   out of the accessibility tree, so the "Scroll to Top" label goes with it. */
#ast-scroll-top { display: none !important; }

/* The logo artwork already reads "THE COFFEE HANDBOOK", so Astra's text title
   sets the name twice side by side. thewattguide has no .site-title in its
   markup at all; this is the equivalent for a theme-built header. */
.site-title,
.ast-site-title-wrap .site-title,
.site-description { display: none !important; }

/* 96px against thewattguide's 86px. Its mark is a plain wordmark while this one
   is a badge-plus-wordmark lockup, so equal heights render this lettering
   smaller. The header bar is sized off the logo, so much past 96px starts
   pushing the nav down. */
.site-logo-img img,
.custom-logo-link img,
.astra-logo-svg,
.site-branding img {
	height: 96px !important;
	max-height: 96px !important;
	width: auto !important;
}
@media (max-width: 1100px) {
	.site-logo-img img, .custom-logo-link img { height: 80px !important; max-height: 80px !important; }
}
@media (max-width: 720px) {
	.site-logo-img img, .custom-logo-link img { height: 58px !important; max-height: 58px !important; }
}

/* Hero coffee-bean texture. Drawn as a tiled SVG rather than a photograph: ~700
   bytes inline against a 100 KB+ image, no art direction needed per breakpoint,
   and it cannot wash out the white headline the way a photo does. Masked
   diagonally so the beans sit in the empty right-hand third and fade out before
   they reach the copy, which caps at 780px. */
.chb-hero { position: relative; overflow: hidden; }
.chb-hero > * { position: relative; z-index: 1; }
.chb-hero::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><g fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'><g transform='translate(44,40) rotate(-28)'><ellipse rx='22' ry='15'/><path d='M-22 0C-11 -8 11 8 22 0'/></g><g transform='translate(150,86) rotate(18)'><ellipse rx='20' ry='13.5'/><path d='M-20 0C-10 -7 10 7 20 0'/></g><g transform='translate(88,150) rotate(-62)'><ellipse rx='21' ry='14'/><path d='M-21 0C-10.5 -7.5 10.5 7.5 21 0'/></g></g></svg>");
	background-size: 200px 200px;
	opacity: .07;
	-webkit-mask-image: linear-gradient(100deg, transparent 32%, #000 80%);
	        mask-image: linear-gradient(100deg, transparent 32%, #000 80%);
}
.chb-hero::after {
	content: ""; position: absolute; z-index: 0; pointer-events: none;
	right: -6%; top: -28%; width: 58%; height: 150%;
	background: radial-gradient(closest-side, rgba(200, 136, 48, .15), transparent 72%);
}
@media (max-width: 720px) {
	/* On a phone the copy fills the width, so the texture would sit behind the
	   headline rather than beside it. */
	.chb-hero::before { opacity: .04; -webkit-mask-image: none; mask-image: none; }
	.chb-hero::after { display: none; }
}

/* Full-bleed sections use width:100vw, which counts the scrollbar while the
   viewport does not — 1280 against 1265, so the whole page scrolled sideways
   ~8px. `clip` rather than `hidden`: hidden on body would kill position:sticky. */
html { overflow-x: clip; }

/* ---------- footer corrections ------------------------------------------
   .chb-footer shipped with padding:0, so the columns sat hard against the gold
   top rule and the copyright line sat hard against the bottom of the page. The
   grid's own 40px gap is horizontal only and does nothing for either edge. */
.chb-footer { padding: clamp(36px, 4.5vw, 56px) 0 24px; }

/* The footer mark had no height bound at all: a 300x171 source rendered at
   210x120, taller than the 96px header logo and about double the height of the
   link columns beside it. 64px sets it just above the column headings. */
.chb-footer .chb-flogo {
	height: 64px !important;
	max-height: 64px !important;
	width: auto !important;
	margin-bottom: 14px;
}

/* The bottom bar draws a 1px top border but had no padding above it, so the rule
   was touching the text on both sides of it. Two-class selector so this beats
   .chb-wrap's `padding: 0 24px` shorthand regardless of source order. */
.chb-footer .chb-fbase {
	margin-top: clamp(22px, 3vw, 32px);
	padding-top: 16px;
}

/* Columns are top-aligned rather than stretched — the brand column is taller
   than the link columns, which was centring the headings against each other. */
.chb-footer .chb-fgrid { align-items: start; }

@media (max-width: 560px) {
	.chb-footer { padding: 32px 0 20px; }
	.chb-footer .chb-flogo { height: 56px !important; max-height: 56px !important; }
}