/*
Theme Name:   Flux Child — GiantBenefits
Theme URI:    https://giantbenefits.org
Description:  Child theme for giantbenefits.org. Adds the affiliate disclosure injector, the content-type taxonomy, and thin-archive noindex on top of Flux. Keep site-specific changes here so Flux can be updated safely.
Author:       giantbenefits.org
Template:     flux
Version:      1.0.0
License:      GNU General Public License version 3.0
License URI:  http://www.gnu.org/licenses/gpl-3.0.html
Text Domain:  flux-child
*/

/* Affiliate disclosure injected by gb_inject_affiliate_disclosure(). */
.gb-affiliate-disclosure {
	margin: 0 0 1.5em;
	padding: 0.75em 1em;
	border-left: 3px solid var(--cs-color-accent, #1d4ed8);
	background: var(--cs-color-secondary-background, rgba(0, 0, 0, 0.03));
	font-size: 0.875em;
	line-height: 1.5;
}

.gb-affiliate-disclosure p {
	margin: 0;
}

/* ===========================================================================
 * DESIGN TOKENS — every value read from sample-page.html
 * See docs/specs/2026-08-06-element-spec.md
 * =========================================================================== */
:root {
	--gb-paper:      #f7f5ef;
	--gb-card:       #fbfbf9;
	--gb-ink:        #0e0e0e;
	--gb-ink-soft:   #1c1c19;
	--gb-body-ink:   #3d3d3a;
	--gb-lime:       #d8ff3e;
	--gb-grey:       #6b6b64;
	--gb-well:       #efece4;
	--gb-hairline:   #e4e0d5;
	--gb-hot:        #c8330f;
	--gb-dot:        #ff4a24;
	--gb-off:        #ff6a45;

	--gb-display: 'Bricolage Grotesque', system-ui, sans-serif;
	--gb-serif:   'Newsreader', Georgia, serif;
	--gb-ui:      'Instrument Sans', system-ui, sans-serif;
	--gb-mono:    'Space Mono', ui-monospace, monospace;

	--gb-shell:   1280px;
	/* Fluid, per sample-page-mobile-responsive.html: the shell padding is
	 * clamp(16px,4vw,28px) everywhere rather than a fixed 28px with a
	 * breakpoint. Hits 28px at desktop, 16px on a phone, no media query. */
	--gb-shell-x: clamp(16px, 4vw, 28px);
}

/* ===========================================================================
 * SECTION 1 — HEADER
 * =========================================================================== */

/* 1.1 shell -------------------------------------------------------------- */
.cs-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--gb-ink);
	border-bottom: 0;
}

.cs-header .cs-header__outer { background: var(--gb-ink); }

.cs-header .cs-container {
	max-width: var(--gb-shell);
	margin: 0 auto;
	padding: 14px var(--gb-shell-x);
}

/* NOTE: `display` is deliberately NOT set here.
 *
 * Flux switches the two headers with it —
 *     .cs-header__inner-desktop { display: none }  -> @media -> { display: flex }
 *     .cs-header__inner-mobile  { display: flex }  -> @media -> { display: none }
 * — and setting `display: flex` at higher specificity with no media query
 * forced the desktop header visible at every width, so BOTH headers rendered
 * stacked on a phone. Style the box, never the visibility. */
.cs-header .cs-header__inner-desktop {
	min-height: 62px;
	align-items: center;
	gap: 22px;
}

/* Source lays the header out as one flex row: logo (fixed), nav (grows),
 * toggles (fixed). Flux ships three equal columns, which centres the nav and
 * leaves it unable to scroll — so the column flex is reassigned here. */
.cs-header .cs-header__col.cs-col-left,
.cs-header .cs-header__col.cs-col-right { flex: none; }

.cs-header .cs-header__col.cs-col-center {
	flex: 1 1 auto;
	min-width: 0;
}

/* 1.2 reading progress --------------------------------------------------- */
.gb-progress {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 100%;
	pointer-events: none;
}

.gb-progress span {
	display: block;
	height: 3px;
	width: 0;
	background: var(--gb-lime);
}

/* 1.3 logo --------------------------------------------------------------- */
.cs-header .cs-logo a.cs-header__logo,
.cs-header .cs-logo a {
	font-family: var(--gb-display);
	font-weight: 800;
	font-size: 23px;
	line-height: 1;
	letter-spacing: -0.045em;
	color: var(--gb-card);
	text-decoration: none;
	flex: none;
}

/* The logo is a link, so its hit area matters on touch. At 23px/1 the text box
 * is only 23px tall — under any reasonable target size. Padding grows the tap
 * area without changing the type, so the visual stays on spec. */
.cs-header .cs-header__logo-mobile,
.cs-header .cs-header__inner-mobile .cs-header__logo {
	padding: 9px 0;
}

/* 1.4 nav ---------------------------------------------------------------- */

/* A flex item defaults to min-width:auto, so the <nav> refused to shrink below
 * its content and pushed the page 12px wider than the viewport at 1024. The
 * ul's overflow-x:auto can only take effect once its parent is allowed to be
 * narrower than its contents. */
.cs-header .cs-header__nav {
	min-width: 0;
	overflow: hidden;
}
.cs-header .cs-header__nav-inner {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
	scrollbar-width: none;
	/* The fade is the source's own overflow strategy: it makes horizontal
	 * scrolling read as intentional rather than clipped. */
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
}

.cs-header .cs-header__nav-inner::-webkit-scrollbar { display: none; }

.cs-header .cs-header__nav-inner > li { margin: 0; }

.cs-header .cs-header__nav-inner > li > a {
	display: block;
	font-family: var(--gb-ui);
	font-weight: 600;
	font-size: 13px;
	line-height: 1;
	color: var(--gb-card);
	text-decoration: none;
	white-space: nowrap;
	padding: 8px 12px;
	border-radius: 999px;
	transition: background 0.15s, color 0.15s;
}

.cs-header .cs-header__nav-inner > li > a:hover,
.cs-header .cs-header__nav-inner > li.current-menu-parent > a {
	background: var(--gb-lime);
	color: var(--gb-ink);
}

/* Flux paints its own hover highlight with `a:after` plus a nested span
 * treatment. Against our lime pill that rendered as white blocks bleeding out
 * either side of the radius. We supply the hover state, so the theme's is
 * switched off rather than fought. */
.cs-header .cs-header__nav-inner > li::before,
.cs-header .cs-header__nav-inner > li::after,
.cs-header .cs-header__nav-inner > li > a::before,
.cs-header .cs-header__nav-inner > li::before,
.cs-header .cs-header__nav-inner > li > a:after,
.cs-header .cs-header__nav-inner > li > a > span span:after {
	display: none !important;
	content: none !important;
	background: none !important;
}

.cs-header .cs-header__nav-inner > li > a > span,
.cs-header .cs-header__nav-inner > li > a > span span {
	background: none !important;
	position: static;
	z-index: auto;
}

/* 1.5 toggles ------------------------------------------------------------ */

/* The header bar is #0e0e0e, so everything inside it is light BY INHERITANCE.
 *
 * This used to be set on .cs-header__toggle, which covers the search and scheme
 * buttons — and silently missed the burger, which Flux puts in
 * .cs-header__offcanvas-toggle instead. It fell through to Flux's
 * `[data-scheme] { color: var(--cs-color-primary) }` and rendered near-black on
 * near-black: present, correctly sized, and invisible.
 *
 * Setting the colour on the bar rather than on each control means a header
 * element we have not thought of is light by default. Enumerating the controls
 * is how the burger was missed in the first place. */
.cs-header .cs-header__inner { color: var(--gb-card); }

.cs-header .cs-header__toggles { gap: 8px; display: flex; align-items: center; }

.cs-header .cs-header__toggle {
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: 999px;
	border: 1.5px solid rgba(251, 251, 249, 0.35);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--gb-mono);
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
	color: var(--gb-card);
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.cs-header .cs-header__toggle:hover {
	background: var(--gb-lime);
	color: var(--gb-ink);
	border-color: var(--gb-lime);
}

.cs-header .cs-header__toggle i { font-size: 15px; }

/* ===========================================================================
 * SECTION 2 — DISCLOSURE STRIP
 * =========================================================================== */
/* Flux draws a 1px rgb(224,224,224) rule under the header via
 * .cs-header__outer::after. Against two stacked dark bands it read as a white
 * seam between them. */
.cs-header .cs-header__outer::after,
.cs-header::after {
	display: none !important;
	content: none !important;
}

.gb-disclosure-strip {
	background: var(--gb-ink);
	border-bottom: 1.5px solid var(--gb-ink);
}

.gb-disclosure-strip__inner {
	max-width: var(--gb-shell);
	margin: 0 auto;
	padding: 11px var(--gb-shell-x);
	text-align: center;
	font-family: var(--gb-ui);
	font-weight: 400;
	font-size: 11.5px;
	line-height: 1.4;
	color: rgba(251, 251, 249, 0.72);
}

.gb-disclosure-strip__inner a {
	color: var(--gb-lime);
	font-weight: 600;
	text-decoration: none;
}

/* ===========================================================================
 * SECTION 3 — MAIN SHELL
 * =========================================================================== */
body,
.cs-site-content,
.cs-page-content {
	background-color: var(--gb-paper);
}

/* main: max-width 1280px · padding 0 28px  (source) */
.cs-page-content .cs-container,
.cs-site-content .cs-container {
	max-width: var(--gb-shell);
	margin: 0 auto;
	padding-left: var(--gb-shell-x);
	padding-right: var(--gb-shell-x);
}

/* The head REGION is full width; the head CONTENT is 1020px.
 *
 * In the source the 1020px head block and the hero <figure> are siblings, so
 * the figure is wider than the text above it. Flux nests the hero INSIDE
 * .cs-entry__header, so capping that container capped the hero too — which is
 * what made the whole page read as a narrow column pushed left. Cap the
 * children instead, and let the hero span the region. */
.cs-entry__header {
	max-width: none;
	margin-left: 0;
	margin-right: auto;
}

.cs-entry__header .cs-entry__title,
.cs-entry__header .gb-crumb,
.cs-entry__header .gb-rule,
.cs-entry__header .cs-entry__post-meta,
.cs-entry__header .gb-method-note {
	max-width: 1020px;
}

.cs-entry__header { padding: 44px 0 0; }

/* No padding breakpoint here any more — --gb-shell-x is fluid, which is how
 * the responsive source does it. Only the head spacing still steps down. */
@media (max-width: 720px) {
	.cs-entry__header { padding-top: 28px; }
}

/* ===========================================================================
 * SECTION 4 — ARTICLE HEAD
 * =========================================================================== */

/* 4.1 breadcrumb --------------------------------------------------------- */
.gb-crumb {
	font-family: var(--gb-mono);
	font-weight: 700;
	font-size: 10.5px;
	line-height: 1;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--gb-grey);
	margin-bottom: 22px;
}

.gb-crumb a { color: var(--gb-grey); text-decoration: none; }
.gb-crumb a:hover { color: var(--gb-ink); }

/* 4.2 rule --------------------------------------------------------------- */
.gb-rule--7 {
	height: 7px;
	background: var(--gb-ink);
	margin-bottom: 22px;
}

/* 4.3 title (scale set in section 1 tokens) ------------------------------ */

/* SCOPED TO THE ARTICLE PAGE ONLY.
 *
 * `.cs-entry__title` is Flux's class for EVERY entry title — the article's own
 * h1, but also every card on the homepage, every archive listing and every
 * related-post tile. Setting the hero size on the bare class gave homepage
 * tiles an 88px font: titles ran 7-11 lines and 900px tall inside 1,200px
 * cards, which is what wrecked the grid.
 *
 * The reference only ever specifies this size for the article headline. Tiles
 * get their own scale below. */
.single .cs-entry__title,
.cs-entry__wrap > .cs-entry__header .cs-entry__title,
h1.cs-entry__title {
	font-family: var(--gb-display);
	font-weight: 800;
	font-size: clamp(40px, 6.4vw, 88px);
	line-height: 0.94;
	letter-spacing: -0.045em;
	margin: 0;
	color: var(--gb-ink);
}

/* Card titles: everywhere a title appears inside a listing rather than as the
 * page's own headline. Same typeface so the family still reads as one system,
 * at a size a grid can hold. */
.cs-entry__title {
	font-family: var(--gb-display);
	font-weight: 800;
	font-size: clamp(19px, 1.5vw, 23px);
	line-height: 1.14;
	letter-spacing: -0.03em;
	margin: 0;
	color: var(--gb-ink);
}

/* A long headline must not shove a card taller than its neighbours. Three
 * lines, then ellipsis — the grid stays even whatever the title length. */
.cs-entry__title a,
.cs-entry__title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* …but never clamp the article's own headline, which must show in full. */
.single .cs-entry__title,
.cs-entry__wrap > .cs-entry__header .cs-entry__title,
h1.cs-entry__title {
	display: block;
	-webkit-line-clamp: none;
	overflow: visible;
}

.gb-mark {
	background: var(--gb-lime);
	padding: 0 0.08em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* 4.4 byline row --------------------------------------------------------- */
.cs-entry__post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 28px;
}

/* Flux emits reading-time, author, date. The source reads
 * avatar · By Name · dot · Updated <date> · dot · N min read — so the order is
 * reassigned with flex `order` rather than by overriding another template. */
.cs-entry__post-meta .cs-meta-author { order: 1; display: flex; align-items: center; gap: 14px; }
.cs-entry__post-meta .cs-meta-date { order: 2; }
.cs-entry__post-meta .cs-meta-reading-time { order: 3; }

/* The <picture> IS the avatar; the <img> only fills it.
 * Sizing both to 38px made the img inherit the wrapper's 36px content box via
 * the theme's max-width:100%, so it rendered 36x38 inside a correct 38x38
 * frame. One element owns the box, the other owns the fill. */
.cs-entry__post-meta .cs-meta-author-avatar {
	width: 38px;
	height: 38px;
	border-radius: 999px;
	background: #e8e8e2;
	border: 1.5px solid var(--gb-ink);
	display: block;
	overflow: hidden;
	flex: none;
}

.cs-entry__post-meta .cs-meta-author-avatar img {
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 999px;
	display: block;
	object-fit: cover;
}

.cs-entry__post-meta .cs-meta-author-link {
	font-family: var(--gb-ui);
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	color: var(--gb-ink);
	text-decoration: none;
}

.cs-entry__post-meta .cs-meta-author-by { text-transform: none; }
.cs-entry__post-meta .cs-meta-author-by::after { content: " "; }

.cs-entry__post-meta .cs-meta-date,
.cs-entry__post-meta .cs-meta-reading-time {
	font-family: var(--gb-ui);
	font-weight: 400;
	font-size: 12px;
	line-height: 1;
	color: var(--gb-grey);
	text-transform: none;
	letter-spacing: 0;
}

/* The 5px orange dots are separators, drawn before each trailing item rather
 * than as extra markup. */
.cs-entry__post-meta .cs-meta-date::before,
.cs-entry__post-meta .cs-meta-reading-time::before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	border-radius: 999px;
	background: var(--gb-dot);
	margin-right: 14px;
	vertical-align: middle;
}

.cs-entry__post-meta .cs-meta-date::after { content: ""; }

/* 4.5 method note -------------------------------------------------------- */
.gb-method {
	margin: 16px 0 0;
	max-width: 640px;
	font-family: var(--gb-ui);
	font-weight: 400;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--gb-grey);
}

/* ===========================================================================
 * SECTION 7 — "EVERYTHING WE RECOMMEND"
 * =========================================================================== */
.gb-picks { margin: clamp(52px, 7vw, 84px) 0 0; }

.gb-picks__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 28px;
}

.gb-picks .gb-rule--7 { margin-bottom: 18px; }

.gb-picks__title {
	font-family: var(--gb-display);
	font-weight: 800;
	font-size: clamp(28px, 3.6vw, 46px);
	line-height: 1;
	letter-spacing: -0.04em;
	margin: 0;
	color: var(--gb-ink);
}

.gb-picks__meta {
	font-family: var(--gb-mono);
	font-weight: 700;
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gb-grey);
}

/* auto-fit is the responsive half of this: the source hard-codes four columns,
 * ours reflows 4 -> 3 -> 2 -> 1 with no breakpoint needed. */
.gb-picks__grid {
	display: grid;
	/* min(252px,100%) is load-bearing: a bare minmax(252px,1fr) forces a
	 * 252px column and OVERFLOWS any viewport narrower than that plus
	 * padding — a 320px phone scrolls sideways. The min() lets the track
	 * collapse to the container instead. */
	grid-template-columns: repeat(auto-fit, minmax(min(252px, 100%), 1fr));
	gap: 16px;
	align-items: stretch;
}

/* --- the card ----------------------------------------------------------- */
.gb-pick {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--gb-card);
	border: 1.5px solid var(--gb-ink);
	border-radius: 22px;
	padding: 0;
	overflow: hidden;
	transition: transform 0.18s;
}

.gb-pick:hover { transform: translateY(-3px); }

/* The lead card is inverted in the source. */
.gb-picks__grid .gb-pick:first-child { background: var(--gb-ink); }
.gb-picks__grid .gb-pick:first-child .gb-pick__title,
.gb-picks__grid .gb-pick:first-child .gb-picks__grid .gb-pick:first-child .gb-pick__name { color: rgba(251, 251, 249, 0.82); }
.gb-picks__grid .gb-pick:first-child .gb-pick__desc { color: rgba(251, 251, 249, 0.75); }
.gb-picks__grid .gb-pick:first-child .gb-pick__badge { background: var(--gb-lime); color: var(--gb-ink); }
.gb-picks__grid .gb-pick:first-child .gb-pick__foot { border-top-color: rgba(251, 251, 249, 0.16); }
.gb-picks__grid .gb-pick:first-child .gb-pick__well { background: var(--gb-card); }
.gb-picks__grid .gb-pick:first-child .gb-pick__rating { color: rgba(251, 251, 249, 0.62); }

.gb-pick__badge {
	background: var(--gb-ink);
	color: var(--gb-lime);
	padding: 11px 20px;
	font-family: var(--gb-mono);
	font-weight: 700;
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.gb-pick__body {
	padding: 22px 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.gb-pick__well {
	aspect-ratio: 4 / 3;
	background: var(--gb-well);
	border-radius: 16px;
	padding: 12px;
	margin-bottom: 18px;
	/* The image is positioned against this box rather than flowing inside it —
	 * see below for why. */
	position: relative;
}

/* The image is taken OUT OF FLOW so the well's aspect-ratio decides its shape.
 *
 * This was a flex container with `max-height: 100%` on the image, which cannot
 * work: the percentage resolves against a height that is itself derived from
 * the content, so the constraint is circular and the browser lets the image
 * win. A 4:3 well rendered 252x235 (ratio 1.07) — visibly taller than the
 * reference, and inconsistent between products because each product photo has
 * its own proportions.
 *
 * Absolute positioning breaks the circularity: the box is sized by
 * aspect-ratio alone, and the image is fitted inside whatever that produces.
 *
 * multiply drops the white box behind marketplace cut-outs onto the tint. */
.gb-pick__well img {
	position: absolute;
	inset: 12px;
	width: calc(100% - 24px);
	height: calc(100% - 24px);
	object-fit: contain;
	mix-blend-mode: multiply;
}

.gb-pick__title {
	font-family: var(--gb-display);
	font-weight: 800;
	font-size: 19px;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0 0 8px;
	color: var(--gb-ink);
}

.gb-pick__name {
	font-family: var(--gb-ui);
	font-weight: 500;
	font-size: 13px;
	line-height: 1.45;
	color: var(--gb-body-ink);
	text-decoration: none;
	display: block;
	margin-bottom: 10px;
}

.gb-pick__name:hover { text-decoration: underline; }

.gb-pick__rating {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--gb-mono);
	font-size: 11px;
	line-height: 1;
	color: var(--gb-grey);
	margin-bottom: 12px;
}

.gb-pick__desc {
	font-family: var(--gb-serif);
	font-weight: 400;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--gb-body-ink);
	margin: 0 0 22px;
}

.gb-pick__foot {
	margin-top: auto;
	padding-top: 18px;
	border-top: 1.5px solid rgba(14, 14, 14, 0.16);
}

.gb-pick__buy {
	display: block;
	text-align: center;
	background: var(--gb-lime);
	color: var(--gb-ink);
	text-decoration: none;
	font-family: var(--gb-ui);
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	padding: 16px 12px;
	border-radius: 999px;
}

.gb-pick__buy:hover { background: #c4e825; color: var(--gb-ink); }

/* Inline pick box: one card, full article width. */
.gb-pickbox { margin: 36px 0; }
.gb-pickbox .gb-pick { max-width: 100%; }

@media (max-width: 720px) {
	.gb-pick__body { padding: 18px 16px; }
	.gb-pick__badge { padding: 10px 16px; }
	.gb-picks__grid { gap: 12px; }
}

/* ===========================================================================
 * SECTION 10 — BODY SECTIONS
 *
 * Values verified against sample-page-mobile-responsive.html. Body copy is
 * Newsreader 20px/1.74 #1c1c19 — NOT the 16px/#3d3d3a used earlier, which is
 * real but belongs to the card description.
 * =========================================================================== */

/* The h1 rule was losing to Flux's own entry-title styling (it resolved to
 * Satoshi 48px). Flux sets family/size from --cs-font-entry-title-* on
 * `.cs-entry__title`; matching that specificity and adding the wrapper wins
 * without !important. */
.cs-entry__wrap .cs-entry__title,
.cs-entry__header .cs-entry__title,
h1.cs-entry__title {
	font-family: var(--gb-display);
	font-weight: 800;
	font-size: clamp(40px, 6.4vw, 88px);
	line-height: 0.94;
	letter-spacing: -0.045em;
	color: var(--gb-ink);
}

/* --- the section wrapper the assembler emits --------------------------- */
.entry-content .gb-section {
	/* 118px in the source, not the 94px I inferred from header height alone —
	 * it also clears the sticky mobile TOC bar that sits under the header. */
	scroll-margin-top: 118px;
	margin: 0 0 clamp(40px, 5vw, 64px);
}

.entry-content .gb-section::before {
	content: "";
	display: block;
	height: 7px;
	background: var(--gb-ink);
	margin-bottom: 16px;
}

/* Numbered eyebrow, from the data-section attribute the assembler writes.
 * attr() keeps the number in the content layer where it belongs — CSS
 * counters would renumber if a section were ever hidden. */
.entry-content .gb-section > h2::before {
	content: attr(data-eyebrow);
	display: block;
	font-family: var(--gb-mono);
	font-weight: 700;
	font-size: 10.5px;
	line-height: 1;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gb-grey);
	margin-bottom: 14px;
}

.entry-content .gb-section > h2 {
	font-family: var(--gb-display);
	font-weight: 800;
	font-size: clamp(30px, 4vw, 48px);
	line-height: 1.02;
	letter-spacing: -0.042em;
	margin: 0 0 26px;
	border-bottom: 0;
	color: var(--gb-ink);
}

/* Body copy — the value that was wrong before. */
.entry-content .gb-section p,
.entry-content > p {
	font-family: var(--gb-serif);
	font-weight: 400;
	font-size: 20px;
	line-height: 1.74;
	color: var(--gb-ink-soft);
	margin: 0 0 24px;
	max-width: 640px;
}

.entry-content .gb-section ul,
.entry-content .gb-section ol {
	font-family: var(--gb-serif);
	font-size: 20px;
	line-height: 1.74;
	color: var(--gb-ink-soft);
	max-width: 640px;
	margin: 0 0 24px;
}

/* The lede keeps its own larger scale. */
.entry-content > p.gb-lede,
.gb-affiliate-disclosure + p {
	font-size: clamp(23px, 2.6vw, 33px);
	line-height: 1.45;
	letter-spacing: -0.008em;
	color: var(--gb-ink);
	max-width: 900px;
}

/* ===========================================================================
 * SECTION 12 — FAQ PANEL
 * Dark panel, lime heading. Values from the responsive source.
 * =========================================================================== */
.entry-content .gb-faq {
	scroll-margin-top: 118px;
	margin: 64px 0 0;
	background: var(--gb-ink);
	border-radius: 26px;
	padding: clamp(24px, 3.5vw, 44px);
	max-width: none;
}

.entry-content .gb-faq .gb-faq__title {
	font-family: var(--gb-display);
	font-weight: 800;
	font-size: clamp(30px, 3.6vw, 44px);
	line-height: 1;
	letter-spacing: -0.042em;
	margin: 0 0 6px;
	color: var(--gb-lime);
	border-bottom: 0;
	max-width: none;
}

.entry-content .gb-faq .gb-faq__title::before { content: none; }
.entry-content .gb-faq::before { content: none; }

.entry-content .gb-faq__body {
	display: flex;
	flex-direction: column;
}

.entry-content .gb-faq__item {
	padding: 26px 0;
	border-bottom: 1.5px solid rgba(251, 251, 249, 0.16);
}

/* The last answer closes the panel — a rule under it would separate it from
 * nothing. The source ends on the answer, not on a line. */
.entry-content .gb-faq__item:last-of-type {
	border-bottom: 0;
	padding-bottom: 0;
}

.entry-content .gb-faq__q {
	font-family: var(--gb-display);
	font-weight: 700;
	font-size: 19px;
	line-height: 1.25;
	letter-spacing: -0.028em;
	margin: 0 0 12px;
	color: var(--gb-card);
}

.entry-content .gb-faq__a {
	font-family: var(--gb-serif);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.7;
	color: rgba(251, 251, 249, 0.72);
	margin: 0;
	max-width: none;
}

/* ===========================================================================
 * SECTIONS 3 + 9 — TWO-COLUMN BODY, STICKY RAIL, MOBILE TOC BAR
 *
 * The source switches these in JavaScript (syncRail() writes inline styles on
 * resize at innerWidth < 900). We do it in CSS: no layout shift on first paint,
 * and it degrades correctly with JS off. Only open/close needs script.
 * =========================================================================== */

.gb-body {
	display: flex;
	align-items: flex-start;
	gap: clamp(24px, 4vw, 48px);
}

.gb-col {
	flex: 1 1 560px;
	min-width: 0;
	max-width: 720px;
}

/* --- desktop rail (>=900px) --------------------------------------------- */
.gb-rail {
	flex: 1 1 200px;
	max-width: 236px;
	position: sticky;
	top: 94px;
	order: -1;
	/* A sticky element taller than the space below its stick point has a bottom
	   that can never be scrolled to — it is pinned, so the page scrolling past
	   does not move it. The Top Pick card sits at the bottom of this rail, and
	   on a 720px viewport 134px of it was simply unreachable.
	   The reference never hits this: its table of contents has six entries and
	   the rail clears any normal window. Ours is built from the article's real
	   headings, so an eight-section piece makes a 760px rail that needs 854px.
	   Bounding the height and letting the rail scroll internally keeps every
	   entry AND the card reachable at any window size. `auto` means the
	   scrollbar only appears when the rail actually overflows, so the common
	   case is unchanged. */
	max-height: calc(100vh - 94px - 24px);
	overflow-y: auto;
	/* Reserve the scrollbar's width so the rail's contents do not shift
	   sideways on the articles that overflow. */
	scrollbar-gutter: stable;
	/* The gutter would otherwise crop the card's 1.5px border against the
	   scroll edge. */
	padding-right: 2px;
}

.gb-rail__rule {
	height: 4px;
	background: var(--gb-ink);
	margin-bottom: 12px;
}

.gb-rail__label {
	font-family: var(--gb-mono);
	font-weight: 700;
	font-size: 10.5px;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gb-grey);
	margin-bottom: 14px;
}

.gb-rail__nav {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.gb-rail__nav a {
	font-family: var(--gb-ui);
	font-weight: 600;
	font-size: 13px;
	line-height: 1.35;
	color: var(--gb-ink);
	text-decoration: none;
	padding: 9px 13px;
	border: 1.5px solid rgba(14, 14, 14, 0.15);
	border-radius: 999px;
}

.gb-rail__nav a:hover {
	background: var(--gb-lime);
	border-color: var(--gb-ink);
	color: var(--gb-ink);
}

/* --- mobile bar (<900px), hidden on desktop ----------------------------- */
.gb-tocbar { display: none; }

.gb-tocbar__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px var(--gb-shell-x);
	cursor: pointer;
	min-height: 52px;
	max-width: var(--gb-shell);
	margin: 0 auto;
}

.gb-tocbar__left {
	display: flex;
	align-items: baseline;
	gap: 10px;
	min-width: 0;
}

.gb-tocbar__label {
	font-family: var(--gb-mono);
	font-weight: 700;
	font-size: 9.5px;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gb-grey);
	flex: none;
}

.gb-tocbar__current {
	font-family: var(--gb-ui);
	font-weight: 600;
	font-size: 13.5px;
	line-height: 1.2;
	color: var(--gb-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gb-tocbar__chev {
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: var(--gb-ink);
	color: var(--gb-lime);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--gb-ui);
	font-weight: 700;
	font-size: 10px;
	line-height: 1;
	transition: transform 0.18s ease;
}

.gb-tocbar__panel {
	display: none;
	padding: 2px var(--gb-shell-x) 14px;
	max-width: var(--gb-shell);
	margin: 0 auto;
}

.gb-tocbar__panel.is-open { display: block; }

.gb-tocbar__panel a {
	display: block;
	font-family: var(--gb-ui);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.35;
	color: var(--gb-ink);
	text-decoration: none;
	padding: 9px 0;
	border-bottom: 1px solid rgba(14, 14, 14, 0.1);
}

/* --- the 900px switch --------------------------------------------------- */
@media (max-width: 899px) {
	.gb-body { display: block; }
	.gb-col { max-width: none; }
	.gb-rail { display: none; }

	.gb-tocbar {
		display: block;
		position: sticky;
		top: 62px;
		z-index: 35;
		background: var(--gb-paper);
		border-bottom: 1.5px solid var(--gb-ink);
	}
}

/* ===========================================================================
 * SECTION 5 — HERO FIGURE
 * =========================================================================== */
/* The hero spans the FULL article region. The source's <figure> carries only
 * `margin:36px 0 0` and no max-width, so it is wider than the 1020px head block
 * above it. Capping it at 1020px made the whole page read as a narrow column
 * pushed to the left. */
.cs-entry__media { margin: 36px 0 0; max-width: none; }

.cs-entry__media .cs-entry__media-wrap {
	aspect-ratio: 16 / 7.5;
	width: 100%;
	border-radius: 22px;
	border: 1.5px solid var(--gb-ink);
	overflow: hidden;
	position: relative;
}

.cs-entry__media figure {
	margin: 0;
	height: 100%;
	width: 100%;
}

.cs-entry__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Caption: credit left, disclosure right, per the source's split row. */
.cs-entry__media figcaption,
.cs-entry__media .cs-entry__media-caption {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 14px;
	margin-top: 12px;
	font-family: var(--gb-mono);
	font-weight: 400;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--gb-grey);
}

.cs-entry__media figcaption a { color: var(--gb-grey); }

/* ===========================================================================
 * SECTION 6 — LEDE + IN-ARTICLE DISCLOSURE LINE
 * =========================================================================== */
.entry-content > p:first-of-type {
	font-family: var(--gb-serif);
	font-weight: 400;
	font-size: clamp(23px, 2.6vw, 33px);
	line-height: 1.45;
	letter-spacing: -0.008em;
	color: var(--gb-ink);
	max-width: 900px;
	margin: 52px 0 0;
}

.entry-content p.gb-disclosure-line {
	max-width: 900px;
	margin: 22px 0 0;
	font-family: var(--gb-ui);
	font-weight: 400;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--gb-grey);
}

.entry-content p.gb-disclosure-line strong {
	color: var(--gb-ink);
	font-weight: 700;
}

/* ===========================================================================
 * SECTION 14 — FOOTER
 * =========================================================================== */
.cs-footer {
	margin-top: 96px;
	background: var(--gb-ink);
	color: var(--gb-card);
}

/* The two footer bars have DIFFERENT padding in the source. A single rule on
 * .cs-container gave the bottom bar the main bar's 52px/40px, which is what
 * made the footer read as far too tall. */
.cs-footer .cs-footer__item-center-bar .cs-container {
	max-width: var(--gb-shell);
	padding: 52px var(--gb-shell-x) 40px;
}

.cs-footer .cs-footer__item-bottom-bar .cs-container {
	max-width: var(--gb-shell);
	padding: 16px var(--gb-shell-x);
}

.cs-footer a { color: var(--gb-card); text-decoration: none; }
.cs-footer a:hover { color: var(--gb-lime); }

.cs-footer .cs-footer__copyright,
.cs-footer .cs-footer__item-inner {
	font-family: var(--gb-ui);
	font-weight: 400;
	font-size: 14.5px;
	line-height: 1.6;
	color: rgba(251, 251, 249, 0.66);
}

/* The site name in the footer is the loudest lime on the page — it is the
 * sign-off, and the source gives it the largest type in the document after
 * the headline. */
.cs-footer .cs-logo a,
.cs-footer .cs-footer__logo {
	font-family: var(--gb-display);
	font-weight: 800;
	font-size: clamp(34px, 5vw, 58px);
	line-height: 0.95;
	letter-spacing: -0.05em;
	color: var(--gb-lime);
}

.cs-footer .widget-title,
.cs-footer h3 {
	font-family: var(--gb-mono);
	font-weight: 700;
	font-size: 10.5px;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gb-lime);
	margin-bottom: 4px;
}

/* Lead region — everything above the first body section runs full width:
 * lede at 900px, recommend grid at the full 1020px article measure. */
.entry-content.gb-lead {
	max-width: 1020px;
}

.entry-content.gb-lead > p:first-of-type { max-width: 900px; }
.entry-content.gb-lead .gb-picks { max-width: none; }

/* Reclaim the width Flux reserves for a sidebar.
 *
 * gb_disable_single_sidebar() makes the theme render no sidebar, and the body
 * carries cs-page-layout-disabled — but .cs-content-area still sized itself as
 * a two-thirds column, capping the article at 822px inside a 1224px parent. The
 * lede and the recommend grid could never reach their 900px / 1020px measures.
 */
/* The article region spans the full shell and its CHILDREN set their own
 * measures, which is how the reference is built:
 *
 *     main            1280px, padding 0 clamp(16px,4vw,28px)
 *       head block    1020px   (no margin:auto -> LEFT aligned)
 *       lede           900px
 *       two-column    FULL width — a direct child of main, so the rail+article
 *                     row is WIDER than the head block above it
 *
 * Flux instead centres a single fixed track (justify-content:center), so every
 * region inherited one width and the two-column row could never exceed the head
 * block. That is the padding difference: the reference starts content at the
 * container edge, ours floated it in a narrower centred column.
 */
/* TWO grids centre content, not one: .cs-main-content and .cs-entry__container.
 * Both need releasing, or the article stays a centred column no matter what the
 * children ask for. */
.single-post .cs-main-content,
.single-post .cs-entry__container {
	justify-content: start;
}

/* The wrapper spans the region; its CHILDREN set their own measures — head
 * block 1020, lede 900, two-column full width. Capping the wrapper at 1020px
 * made every region inherit one width, which is what pushed the article inward
 * and made the two-column row narrower than the reference. */
.single-post .cs-entry__content-wrap {
	max-width: none;
}

/* Lead region spans the article; the lede paragraph sets its own 900px and the
 * recommend grid runs full width, exactly as in the source. */
.entry-content.gb-lead {
	max-width: none;
	margin-left: 0;
	margin-right: auto;
}

.gb-body {
	max-width: none;
}

/* The article measure is set by Flux's own variable, not by our CSS:
 *
 *   .single .cs-sidebar-disabled .cs-main-content {
 *     grid-template-columns: minmax(0, var(--cs-entry-content-width));
 *   }
 *
 * The grid TRACK owned the width, which is why sizing .cs-content-area did
 * nothing — it was already filling a track fixed at 822px. Setting the theme's
 * variable works with that rule instead of fighting it, and the reference's
 * 1020px article measure follows automatically. */
.single-post {
	/* Full shell, not 1020px. The children below set their own measures. */
	--cs-entry-content-width: 1224px;
}

/* ===========================================================================
 * SECTION 13 — RELATED
 *
 * Flux's read-next block already carries the structure the reference needs,
 * including the category overlaid on the thumbnail — which is precisely where
 * the source puts its lime badge. So this is styling, not a rebuild.
 * =========================================================================== */
/* The source's Related <section> carries only `margin:88px 0 0` and no
 * max-width, so it spans the full article region like the recommend grid. */
.cs-read-next {
	margin: 88px 0 0;
	max-width: none;
}

/* Flux offsets its grid children by -1px to collapse shared borders. Our cards
 * are separated by an 18px gap and rounded, so the offset just pulls them out
 * of alignment with everything else on the page. */
.cs-read-next .cs-entry,
.cs-read-next .cs-entry__thumbnail {
	margin: 0;
}

.cs-read-next__headline {
	position: relative;
	padding-top: 25px;
	margin-bottom: 24px;
}

.cs-read-next__headline::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 7px;
	background: var(--gb-ink);
}

.cs-read-next .cs-read-next__heading {
	font-family: var(--gb-display);
	font-weight: 800;
	font-size: clamp(26px, 3vw, 38px);
	line-height: 1;
	letter-spacing: -0.04em;
	margin: 0;
	color: var(--gb-ink);
	text-transform: none;
}

.cs-read-next .cs-read-next__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(248px, 100%), 1fr));
	gap: 18px;
}

.cs-read-next .cs-entry__outer,
.cs-read-next .cs-entry {
	background: none;
	border: 0;
	box-shadow: none;
}

/* Image well — 16:10, rounded, outlined. */
.cs-read-next .cs-entry__thumbnail {
	aspect-ratio: 16 / 10;
	border-radius: 20px;
	border: 1.5px solid var(--gb-ink);
	overflow: hidden;
	position: relative;
	background: var(--gb-well);
}

.cs-read-next .cs-entry__thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The category becomes the lime pill, pinned to the image corner. */
.cs-read-next .cs-entry__meta-overlay {
	position: absolute;
	top: 12px;
	left: 12px;
	right: auto;
	bottom: auto;
	margin: 0;
	padding: 0;
	z-index: 2;
}

.cs-read-next .cs-meta-category a,
.cs-read-next .cs-meta-category li a {
	display: inline-block;
	font-family: var(--gb-mono);
	font-weight: 700;
	font-size: 9.5px;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gb-ink);
	background: var(--gb-lime);
	border: 1.5px solid var(--gb-ink);
	border-radius: 999px;
	padding: 7px 11px;
	text-decoration: none;
}

.cs-read-next .cs-meta-category ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cs-read-next .cs-entry__title,
.cs-read-next .cs-entry__title a {
	font-family: var(--gb-display);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.18;
	letter-spacing: -0.03em;
	color: var(--gb-ink);
	text-decoration: none;
	margin: 14px 0 10px;
	border-bottom: 0;
}

.cs-read-next .cs-entry__title::before { content: none; }

.cs-read-next .cs-entry__post-meta,
.cs-read-next .cs-meta-author,
.cs-read-next .cs-meta-date {
	font-family: var(--gb-mono);
	font-weight: 400;
	font-size: 11px;
	line-height: 1.4;
	color: var(--gb-grey);
	text-transform: none;
	letter-spacing: 0;
	gap: 6px;
}

/* The card's own meta row has no dot separators in the reference — those
 * belong to the article byline only. */
.cs-read-next .cs-meta-date::before,
.cs-read-next .cs-meta-reading-time::before { content: none; }

.cs-read-next .cs-meta-author-avatar { display: none; }

/* ---------------------------------------------------------------------------
 * Two fixes found by measuring, both invisible in the CSS itself.
 * ------------------------------------------------------------------------- */

/* Flux paints the content wrapper from its own variable:
 *     .cs-entry__content-wrap { background: var(--cs-site-background); }
 * which is white. Against the warm paper ground that read as a pale band down
 * the side of the article — the page looked like two backgrounds meeting.
 *
 * Set the VARIABLE rather than override the rule. Same lesson as the 822px
 * measure: work with the theme's own mechanism and every place that consumes
 * it follows, instead of chasing each consumer with a new selector. */
/* Scoped on [data-scheme], not :root. Flux re-declares its palette per scheme
 * and stamps data-scheme="light" on body, wrappers and header — so a :root
 * declaration resolves to #f7f5ef at the root and is immediately shadowed by
 * #FFFFFF on every element that carries the attribute. Matching the theme's own
 * scope is the only way the value actually reaches the elements. */
:root,
[data-scheme="light"] {
	--cs-site-background: #f7f5ef;
}

.cs-entry__content-wrap,
.cs-entry__container,
.cs-entry__wrap {
	background: transparent;
}

/* The hero caption was rendering "Photo byKyle LoftusonPexels".
 *
 * The markup is correct — "Photo by <a>Kyle Loftus</a> on <a>Pexels</a>" — but
 * the container is display:flex, and flex drops the whitespace between inline
 * children, so every space vanished. Block restores normal inline flow. The
 * source can use flex because it wraps its credit in a <span>; ours has bare
 * text nodes as direct children. */
.cs-entry__thumbnail-caption,
.cs-entry__media .cs-entry__thumbnail-caption {
	display: block;
	margin-top: 12px;
	font-family: var(--gb-mono);
	font-weight: 400;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--gb-grey);
	max-width: 1020px;
}

.cs-entry__thumbnail-caption a {
	color: var(--gb-grey);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ===========================================================================
 * INLINE PICK BOX — its own component, not the grid card
 * Values from sample-page-mobile-responsive.html.
 * =========================================================================== */
.entry-content .gb-pickbox {
	margin: 44px 0;
	position: relative;
	background: var(--gb-card);
	border: 1.5px solid var(--gb-ink);
	border-radius: 22px;
	padding: 30px 26px 26px;
	max-width: none;
}

/* Sits ON the card's corner at -1.5px, so it rounds with the card on one side
 * and squares off on the other. */
.entry-content .gb-pickbox__badge {
	position: absolute;
	top: -1.5px;
	left: -1.5px;
	font-family: var(--gb-mono);
	font-weight: 700;
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gb-ink);
	background: var(--gb-lime);
	border: 1.5px solid var(--gb-ink);
	border-radius: 22px 0 22px 0;
	padding: 11px 20px;
}

.entry-content .gb-pickbox__row {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: flex-start;
	margin-top: 22px;
}

.entry-content .gb-pickbox__well {
	flex: 0 1 168px;
	min-width: 120px;
	aspect-ratio: 1 / 1;
	background: var(--gb-well);
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
}

.entry-content .gb-pickbox__well img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.entry-content .gb-pickbox__body {
	flex: 1 1 240px;
	min-width: 0;
}

.entry-content .gb-pickbox__title {
	font-family: var(--gb-display);
	font-weight: 800;
	font-size: 24px;
	line-height: 1.1;
	letter-spacing: -0.035em;
	margin: 0 0 10px;
	color: var(--gb-ink);
	border-bottom: 0;
}

.entry-content .gb-pickbox__title::before { content: none; }

.entry-content .gb-pickbox__name {
	font-family: var(--gb-ui);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.45;
	color: var(--gb-ink);
	display: block;
	margin-bottom: 12px;
	text-decoration: none;
}

.entry-content .gb-pickbox__desc {
	font-family: var(--gb-serif);
	font-weight: 400;
	font-size: 16.5px;
	line-height: 1.65;
	color: var(--gb-body-ink);
	margin: 0 0 18px;
	max-width: none;
}

.entry-content .gb-pickbox__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

/* Black, inline — not the grid card's full-width lime pill. */
.entry-content .gb-pickbox .gb-pick__buy,
.entry-content .gb-pickbox .cs-buy-link__button {
	display: inline-block;
	width: auto;
	background: var(--gb-ink);
	color: var(--gb-card);
	text-decoration: none;
	font-family: var(--gb-ui);
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	padding: 15px 28px;
	border-radius: 999px;
}

.entry-content .gb-pickbox .gb-pick__buy:hover,
.entry-content .gb-pickbox .cs-buy-link__button:hover {
	background: var(--gb-lime);
	color: var(--gb-ink);
}

/* ---------------------------------------------------------------------------
 * Buy row — one shortcode, two presentations.
 *
 * GRID CARD  : lime pill reading "$140 from Amazon", price hidden outside.
 * INLINE PICK: 34px price to the LEFT of a black "Buy from Amazon" button.
 * ------------------------------------------------------------------------- */

/* Grid card: keep the price inside the pill, drop the outside figure and the
 * word "Buy". */
.gb-pick .gb-pick__price,
.gb-pick .gb-pick__buy-lead { display: none; }

/* Inline pick: the reverse. */
.gb-pickbox .gb-pick__buy-price { display: none; }

.gb-pickbox .gb-pick__price {
	display: inline-block;
	font-family: var(--gb-display);
	font-weight: 800;
	font-size: 34px;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--gb-ink);
}

.gb-pickbox .gb-pick__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* The product name is a link and the reference underlines it — the source's
 * global `a` rule sets text-decoration-thickness:1.5px and underline-offset:3px,
 * so links carry an underline unless a rule removes it. Ours had removed it and
 * lightened the colour, which made the name read as secondary text next to the
 * description. It is near-black and underlined. */
.entry-content .gb-pickbox__name {
	color: var(--gb-ink);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}

.entry-content .gb-pickbox__name:hover { color: var(--gb-hot); }

/* ===========================================================================
 * SECTION 15 — BACK TO TOP  (Flux's button, restyled)
 *
 * Flux renders .cs-scroll-top and already handles reveal-on-scroll. We only
 * change how it looks. Building a second button was the mistake here — the
 * theme's markup and behaviour were already correct.
 * =========================================================================== */
.cs-scroll-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 50;
	width: 50px;
	height: 50px;
	padding: 0;
	border-radius: 999px;
	background: var(--gb-lime);
	border: 1.5px solid var(--gb-ink);
	color: var(--gb-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--gb-ui);
	font-weight: 700;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}

.cs-scroll-top:hover {
	background: var(--gb-ink);
	color: var(--gb-lime);
}

/* The theme's icon is a downward chevron; the reference uses an up arrow. */
.cs-scroll-top .cs-icon {
	transform: rotate(180deg);
	font-size: 16px;
}

/* Footer bottom bar */
.cs-footer .cs-footer__copyright,
.cs-footer__item-bottom-bar {
	font-family: var(--gb-mono);
	font-weight: 400;
	font-size: 11.5px;
	line-height: 1;
	color: rgba(251, 251, 249, 0.6);
	padding: 16px var(--gb-shell-x);
}

/* --- footer content: brand + blurb left, link columns right -------------- */
.cs-footer .cs-footer__item-center-bar .cs-footer__item-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	justify-content: space-between;
	align-items: flex-start;
}

.cs-footer .cs-footer__col.cs-col-left {
	/* flex-basis on the INLINE axis only.
	 *
	 * This was `flex: 1 1 300px`. Flux flips .cs-footer__item-inner to
	 * flex-direction:column on narrow screens, and in a column container
	 * flex-basis sets the HEIGHT — so the logo block became 300px tall holding
	 * 102px of content, and the mobile footer ballooned from 292px to 1231px.
	 *
	 * `flex-basis: auto` + a width floor gives the same desktop layout without
	 * the basis meaning something different once the axis rotates. */
	flex: 1 1 auto;
	min-width: min(300px, 100%);
	max-width: 460px;
}

.cs-footer .cs-footer__description {
	font-family: var(--gb-ui);
	font-weight: 400;
	font-size: 14.5px;
	line-height: 1.6;
	color: rgba(251, 251, 249, 0.66);
	margin: 18px 0 0;
}

/* depth=2 menu: top-level items are column headings, children are links. */
.cs-footer .cs-footer-columns__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 56px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cs-footer .cs-footer-columns__nav > li {
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.cs-footer .cs-footer-columns__nav > li > a {
	font-family: var(--gb-mono);
	font-weight: 700;
	font-size: 10.5px;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gb-lime);
	margin-bottom: 4px;
	pointer-events: none;
	text-decoration: none;
}

.cs-footer .cs-footer-columns__nav .sub-menu {
	display: flex;
	flex-direction: column;
	gap: 11px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cs-footer .cs-footer-columns__nav .sub-menu a {
	font-family: var(--gb-ui);
	font-weight: 600;
	font-size: 13.5px;
	line-height: 1;
	color: var(--gb-card);
	text-decoration: none;
}

.cs-footer .cs-footer-columns__nav .sub-menu a:hover { color: var(--gb-lime); }

/* Keep the footer wrapping, never stacking.
 *
 * Below 768px Flux switches .cs-footer__item-inner AND .cs-footer-columns__nav
 * to flex-direction:column and centres the columns. That turns four short
 * side-by-side columns into one tall ladder: measured 624px at 767px against
 * the reference's 260px, which is the "footer breaks in responsive" report.
 *
 * The reference never changes direction — it is row + wrap at every width, so
 * columns sit beside each other while they fit and drop to the next line when
 * they do not. Restoring row lets wrapping do the responsive work, and the
 * layout degrades by itself down to 360px instead of at one hard breakpoint.
 *
 * align-items is reset with it: Flux's centring is only sensible for a single
 * stacked column, and left-aligned labels are what the reference shows. */
.cs-footer .cs-footer__item-center-bar .cs-footer__item-inner,
.cs-footer .cs-footer-columns__nav {
	flex-direction: row;
}
.cs-footer .cs-footer-columns__nav > li {
	align-items: flex-start;
	text-align: left;
	/* Flux sets space-between here. Row-direction siblings stretch to the
	 * tallest column, so a short column's links were pushed to the BOTTOM of
	 * that box — "About" (2 links) sat a row and a half below "Categories" (4)
	 * with a hole under its heading. Columns start at the top; the extra height
	 * belongs at the bottom. */
	justify-content: flex-start;
}

.cs-footer .cs-footer__item-bottom-bar {
	border-top: 1.5px solid rgba(251, 251, 249, 0.16) !important;
	background: var(--gb-ink);
}

/* ---------------------------------------------------------------------------
 * Dead space above the footer.
 *
 * Measured: 240px of empty page between the Related grid and the footer, from
 * three stacked margins — .cs-site-content 24px, .cs-site 120px, and the
 * footer's own 96px. The reference has ONLY the footer's 96px, which is why its
 * Related section and footer fit in one viewport and ours did not.
 * ------------------------------------------------------------------------- */
/* Scoped to .single-post originally, so archives and the homepage kept all
 * three margins: a category page had 160px of empty page before the footer on
 * mobile and over 1,000px on desktop. The dead space is Flux's, not the page
 * type's — it applies wherever we control the layout. `.page` (WordPress's
 * body class on every static page — Contact, Affiliate disclosure) had the
 * same gap for the same reason and was just never added here: measured 240px
 * between .gb-page__body and the footer on /contact/ at 1440px — the exact
 * 24+120+96 this rule already exists to collapse — and 184px at 414px. */
.single-post .cs-site,
.single-post .cs-site-content,
.home .cs-site,
.home .cs-site-content,
.archive .cs-site,
.archive .cs-site-content,
.page .cs-site,
.page .cs-site-content {
	margin-bottom: 0;
}

/* The same three margins stack at the TOP: .cs-site-content 30px plus
 * .cs-main-content 32px puts 62px between the header and the first rule, where
 * the reference starts almost immediately. */
.home .cs-site-content,
.archive .cs-site-content,
.page .cs-site-content {
	margin-top: 0;
}
.home .cs-main-content,
.archive .cs-main-content,
.page .cs-main-content {
	margin-top: 0;
}

/* --- Related card meta: "Priyanshu Mittal · Aug 5, 2026" ----------------- */
.cs-read-next .cs-meta-author-by { display: none; }

.cs-read-next .cs-meta-author-link {
	text-decoration: none;
	color: var(--gb-grey);
}

.cs-read-next .cs-meta-author,
.cs-read-next .cs-meta-date {
	font-family: var(--gb-mono);
	font-weight: 400;
	font-size: 11px;
	line-height: 1.4;
	color: var(--gb-grey);
	text-transform: none;
	letter-spacing: 0;
}

/* The source separates author and date with a middot, not a bullet. */
.cs-read-next .cs-meta-date::before {
	content: "·";
	margin: 0 6px 0 2px;
	color: var(--gb-grey);
}

/* ---------------------------------------------------------------------------
 * Compacting: Flux stacks its own padding on top of ours.
 *
 * Measured against the reference:
 *   .cs-footer__item      padding 40px 0   ON TOP of the container's 52/40,
 *                         so 172px of padding wrapped 154px of content
 *   .cs-footer__copyright padding 16/28    duplicated by its own container
 *   .cs-entry__inner      padding 8/16/16  pushed the related card's meta 47px
 *                         below the title, where the source has 10px
 * ------------------------------------------------------------------------- */
.cs-footer .cs-footer__item {
	padding-top: 0;
	padding-bottom: 0;
}

.cs-footer .cs-footer__copyright {
	padding: 0;
}

/* Related card: the source goes title -> meta with only the title's own 10px
 * bottom margin between them. */
.cs-read-next .cs-entry__inner,
.cs-read-next .cs-entry__content,
.cs-read-next .cs-entry__info {
	padding: 0;
}

.cs-read-next .cs-entry__outer > .cs-entry__inner:not(.cs-entry__thumbnail) {
	padding: 0;
}

.cs-read-next .cs-entry__post-meta,
.cs-read-next .cs-entry__footer {
	margin-top: 0;
	padding-top: 0;
}

/* Flux's card is a flex column with its own row gap, and .cs-entry__info adds
 * more space below the title. The source goes title -> meta with nothing but
 * the title's own 10px bottom margin, so both are collapsed. */
.cs-read-next .cs-entry__inner,
.cs-read-next .cs-entry__outer {
	gap: 0;
	row-gap: 0;
}

.cs-read-next .cs-entry__info {
	margin: 0;
	padding: 0;
	gap: 0;
}

/* Margin on the title ONLY. Setting it on the inner anchor too stacked a
 * second 14/10 inside the first. */
.cs-read-next .cs-entry__title {
	margin: 14px 0 10px;
}

.cs-read-next .cs-entry__title a {
	margin: 0;
	display: block;
}

.cs-read-next .cs-entry__info > *:last-child { margin-bottom: 0; }

/* The byline date is labelled, so a reader knows what the date means. The
 * article footer that used to carry "Published:/Updated:" is gone — two of its
 * three facts were already above the article.
 *
 * .cs-meta-date is itself a FLEX container, so a ::before becomes a flex ITEM
 * and its trailing space collapses — the label ran straight into the date as
 * "UpdatedAugust 5, 2026". A margin spaces flex items; whitespace does not. */
.cs-entry__header .cs-meta-date {
	align-items: baseline;
	gap: 0;
}

/* Flux styles .cs-meta-date::before as a 5px separator DOT. Overriding only its
 * `content` left the label crammed into a 5px-wide box, so "Updated" rendered
 * on top of the date. The box has to be reset too — width, background and
 * border-radius all belong to the dot it used to be. */
.cs-entry__header .cs-meta-date::before {
	content: "Updated";
	color: inherit;
	width: auto;
	height: auto;
	background: none;
	border-radius: 0;
	margin: 0 0.35em 0 0;
	flex: none;
}

.cs-entry__header .cs-meta-date {
	font-family: var(--gb-ui);
	font-weight: 400;
	font-size: 12px;
	color: var(--gb-grey);
	text-transform: none;
	letter-spacing: 0;
}

/* Byline order: author · updated date · read time, per the reference.
 *
 * Flux hard-codes the sequence in entry-header-secondary-info.php —
 * csco_get_post_meta( array( 'reading_time', 'author', 'date', … ) ) — so the
 * post_meta setting only chooses WHICH items render, not their order. Flex
 * order sequences them without touching the template. */
.cs-entry__header .cs-entry__post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

.cs-entry__header .cs-meta-author { order: 1; }
.cs-entry__header .cs-meta-date { order: 2; }
.cs-entry__header .cs-meta-reading-time { order: 3; }

/* "byPriyanshu" — third time this exact trap: the author link is a FLEX
 * container, so a pseudo-element space between "by" and the name collapses to
 * nothing. Whitespace never separates flex items; margin does.
 *
 * Capitalised to "By", matching the reference. */
.cs-entry__header .cs-meta-author-by {
	margin-right: 0.3em;
	text-transform: capitalize;
}

/* Flux ALREADY draws a separator dot after each meta item — adding my own gave
 * every gap two dots. Recolour the theme's to the reference's orange instead of
 * drawing a second one. */
.cs-entry__header .cs-entry__post-meta > div::after {
	background: var(--gb-dot) !important;
}

/* Flux draws a separator on BOTH sides of some items — .cs-meta-date::after and
 * .cs-meta-reading-time::before landed next to each other, so the byline showed
 * two dots in one gap. Drop the leading one.
 *
 * And the trailing separator has to be hidden on the VISUALLY last item, not
 * :last-child: flex `order` puts reading-time last on screen while it is still
 * first in the DOM, so :last-child was hiding the date's dot instead. */
.cs-entry__header .cs-meta-reading-time::before {
	display: none;
}

/* Flux's own rule for this separator is more specific than a class + pseudo,
 * so it needs !important to be switched off — the alternative is guessing at a
 * longer selector chain that a theme update could change anyway. */
.cs-entry__header .cs-entry__post-meta .cs-meta-reading-time::after {
	display: none !important;
	content: none !important;
}

/* ===========================================================================
 * SECTION 8 — HOW WE PICKED
 * Values from sample-page-mobile-responsive.html.
 * =========================================================================== */
.entry-content .gb-hwp {
	margin: 56px 0 0;
	background: #eaf2d2;
	border: 1.5px solid var(--gb-ink);
	border-radius: 26px;
	padding: clamp(26px, 3.5vw, 44px);
	max-width: none;
}

.entry-content .gb-hwp::before { content: none; }

.entry-content .gb-hwp .gb-hwp__heading {
	font-family: var(--gb-display);
	font-weight: 800;
	font-size: clamp(26px, 3.2vw, 38px);
	line-height: 1;
	letter-spacing: -0.04em;
	margin: 0 0 10px;
	color: var(--gb-ink);
	border-bottom: 0;
	max-width: none;
}

.entry-content .gb-hwp .gb-hwp__heading::before { content: none; }

.entry-content .gb-hwp__intro {
	font-family: var(--gb-serif);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.65;
	color: var(--gb-body-ink);
	margin: 0 0 30px;
	max-width: 640px;
}

.entry-content .gb-hwp__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 28px;
}

.entry-content .gb-hwp__head {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 8px;
}

.entry-content .gb-hwp__tick {
	width: 20px;
	height: 20px;
	flex: none;
	border-radius: 999px;
	background: var(--gb-ink);
	color: var(--gb-lime);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--gb-ui);
	font-weight: 700;
	font-size: 11px;
	line-height: 1;
}

.entry-content .gb-hwp__title {
	font-family: var(--gb-ui);
	font-weight: 700;
	font-size: 14.5px;
	line-height: 1.2;
	color: var(--gb-ink);
}

.entry-content .gb-hwp__body {
	font-family: var(--gb-serif);
	font-weight: 400;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--gb-body-ink);
	margin: 0;
	max-width: none;
}

/* ---------------------------------------------------------------------------
 * Card colour varies by variant — the lead card is dark, the rest are cream,
 * and the reference recolours the rating and the product name accordingly.
 * ------------------------------------------------------------------------- */
.gb-pick__rating {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	font-family: var(--gb-mono);
	font-weight: 400;
	font-size: 11px;
	line-height: 1;
}

/* Light cards: burnt-orange star, near-black product name. */
.gb-pick .gb-pick__stars { color: var(--gb-hot); font-weight: 700; }
.gb-pick .gb-pick__reviews { color: var(--gb-grey); }
.gb-picks__grid > .gb-pick .gb-pick__name { color: var(--gb-ink); }

/* Lead (dark) card: lime star AND lime product name — the name is the brightest
 * thing on that card in the reference.
 *
 * The cards ARE the grid children (article.gb-pick); an earlier selector
 * assumed a wrapper element and matched nothing. */
.gb-picks__grid > .gb-pick:first-child .gb-pick__stars,
.gb-picks__grid > .gb-pick:first-child .gb-pick__name,
.gb-picks__grid > .gb-pick:first-child .gb-pick__name a {
	color: var(--gb-lime);
}

.gb-picks__grid > .gb-pick:first-child .gb-pick__reviews {
	color: rgba(251, 251, 249, 0.62);
}

/* ===========================================================================
 * RAIL PICK CARD (spec 8.2)
 * =========================================================================== */
.gb-railpick {
	margin-top: 28px;
	border: 1.5px solid var(--gb-ink);
	border-radius: 20px;
	overflow: hidden;
}

.gb-railpick__badge {
	background: var(--gb-lime);
	padding: 10px 16px;
	font-family: var(--gb-mono);
	font-weight: 700;
	font-size: 10px;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gb-ink);
}

.gb-railpick__body { padding: 16px; background: var(--gb-card); }

.gb-railpick__title {
	font-family: var(--gb-display);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: -0.028em;
	margin-bottom: 8px;
	color: var(--gb-ink);
}

.gb-railpick__name {
	font-family: var(--gb-ui);
	font-weight: 400;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--gb-grey);
	margin-bottom: 14px;
}

.gb-railpick__buy {
	display: block;
	text-align: center;
	background: var(--gb-ink);
	color: var(--gb-card);
	text-decoration: none;
	font-family: var(--gb-ui);
	font-weight: 700;
	font-size: 13px;
	line-height: 1;
	padding: 13px;
	border-radius: 999px;
}

.gb-railpick__buy:hover { background: var(--gb-lime); color: var(--gb-ink); }

/* ===========================================================================
 * HOMEPAGE — front-page.php
 *
 * Ported from sample-homepage-responsive.html, which has 148 inline styles and
 * ZERO media queries: it is responsive through clamp(), min() and auto-fit
 * grids. Those port directly, so nothing here introduces a breakpoint either.
 *
 * No new colours. Every value below resolves to a token already defined for the
 * article page — checked against the source palette, which uses the same set.
 * =========================================================================== */

.gb-home {
	max-width: var(--gb-shell);
	margin: 0 auto;
	padding: 0 var(--gb-shell-x);
}

/* Shared rules and eyebrows -------------------------------------------------- */
/* SCOPED to .gb-home. `.gb-rule--7` already exists for the article page at a
 * 22px margin (section 4.2); redefining it unscoped here changed the article's
 * section rule to 16px and broke a check that had been passing all day. A
 * shared class name is not a shared component — the homepage rule is its own
 * thing and says so. */
.gb-home .gb-rule { background: var(--gb-ink); }
.gb-home .gb-rule--7 { height: 7px; margin-bottom: 16px; }
.gb-home .gb-rule--8 { height: 8px; margin-bottom: 16px; }

.gb-eyebrow {
	font: 700 10px/1 var(--gb-mono);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gb-grey);
}

.gb-chip {
	font: 700 10px/1 var(--gb-mono);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gb-ink);
	background: var(--gb-lime);
	border-radius: 999px;
	padding: 7px 12px;
}

/* Section heading: title left, note right, baselines aligned ----------------- */
.gb-sec-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 24px;
}
.gb-sec-head__title {
	font-family: var(--gb-display);
	font-weight: 800;
	font-size: clamp(26px, 3.2vw, 40px);
	line-height: 1;
	letter-spacing: -0.04em;
	margin: 0;
	color: var(--gb-ink);
}
.gb-sec-head__note {
	font: 700 11px/1 var(--gb-mono);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gb-grey);
}

/* 1. Hero -------------------------------------------------------------------- */
.gb-hero { padding: clamp(28px, 4vw, 44px) 0 0; }

.gb-hero__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
	gap: clamp(24px, 3.5vw, 44px);
	align-items: center;
}

/* The source puts the image SECOND in source order and first visually on wide
 * screens via `order`. Keeping that means the headline leads for a screen
 * reader and on a narrow screen, where the grid collapses to one column. */
.gb-hero__media {
	order: 2;
	display: block;
	position: relative;
	aspect-ratio: 4 / 3;
	min-height: 220px;
	border-radius: 22px;
	border: 1.5px solid var(--gb-ink);
	overflow: hidden;
	background: var(--gb-well);
}
.gb-hero__body { order: 1; min-width: 0; }

/* Images are absolutely positioned inside every ratio box on this page.
 * `aspect-ratio` is only advisory when content can outgrow it — a 4:3 well
 * rendered 1.07 on the article page because the photo won. */
.gb-hero__media img,
.gb-card__media img,
.gb-cat__leadmedia img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gb-hero__kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
}

.gb-hero__title {
	font-family: var(--gb-display);
	font-weight: 800;
	font-size: clamp(34px, 4.6vw, 62px);
	line-height: 0.98;
	letter-spacing: -0.045em;
	margin: 0;
	color: var(--gb-ink);
}
.gb-hero__title a { text-decoration: none; color: inherit; }

.gb-hero__dek {
	font: 400 18px/1.6 var(--gb-serif), Georgia, serif;
	color: var(--gb-body-ink);
	margin: 20px 0 0;
	max-width: 56ch;
}

/* Byline. Gaps come from `gap`, never from whitespace between inline elements —
 * flex collapses that, which produced "byPriyanshu" three separate times. */
.gb-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 22px;
}
.gb-byline__avatar {
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: 999px;
	background: #e8e8e2;
	border: 1.5px solid var(--gb-ink);
}
.gb-byline__name { font: 600 13.5px/1 var(--gb-ui); color: var(--gb-ink); }
.gb-byline__dot {
	width: 5px;
	height: 5px;
	border-radius: 999px;
	background: var(--gb-hot);
}
.gb-byline__meta { font: 400 11.5px/1 var(--gb-mono); color: var(--gb-grey); }

/* 2. This week's picks ------------------------------------------------------- */
.gb-picks-week { margin: clamp(48px, 6vw, 76px) 0 0; }

.gb-picks-week__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: 16px;
	align-items: stretch;
}

.gb-wpick {
	display: flex;
	flex-direction: column;
	background: var(--gb-paper);
	border: 1.5px solid var(--gb-ink);
	border-radius: 22px;
	overflow: hidden;
}
.gb-wpick__label {
	background: var(--gb-ink);
	color: var(--gb-lime);
	padding: 11px 18px;
	font: 700 10.5px/1 var(--gb-mono);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.gb-wpick__body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.gb-wpick__well {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--gb-well);
	border-radius: 16px;
	padding: 12px;
	margin-bottom: 16px;
}
.gb-wpick__well img {
	position: absolute;
	inset: 12px;
	width: calc(100% - 24px);
	height: calc(100% - 24px);
	object-fit: contain;
	mix-blend-mode: multiply;
}
.gb-wpick__title {
	font-family: var(--gb-display);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.15;
	letter-spacing: -0.03em;
	margin: 0 0 10px;
	color: var(--gb-ink);
}
.gb-wpick__name {
	font: 400 14.5px/1.6 var(--gb-serif), Georgia, serif;
	color: var(--gb-body-ink);
	margin: 0 0 20px;
}
.gb-wpick__foot {
	margin-top: auto;
	padding-top: 16px;
	border-top: 1.5px solid rgba(14, 14, 14, 0.14);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.gb-wpick__price {
	font-family: var(--gb-display);
	font-weight: 800;
	font-size: 28px;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--gb-ink);
}
.gb-wpick__buy {
	background: var(--gb-ink);
	color: var(--gb-card);
	text-decoration: none;
	font: 700 13.5px/1 var(--gb-ui);
	padding: 14px 20px;
	border-radius: 999px;
	white-space: nowrap;
}

/* The lead card is dark with a lime badge; the third takes the hot accent.
 * Indexed rather than keyed off the label text, because the label is data
 * ("Also great · parking") and matching on it would break the day a role is
 * renamed. */
.gb-wpick--0 { background: var(--gb-ink); }
.gb-wpick--0 .gb-wpick__label { background: var(--gb-lime); color: var(--gb-ink); }
.gb-wpick--0 .gb-wpick__well { background: var(--gb-card); }
.gb-wpick--0 .gb-wpick__title { color: var(--gb-card); }
.gb-wpick--0 .gb-wpick__name { color: rgba(251, 251, 249, 0.72); }
.gb-wpick--0 .gb-wpick__foot { border-top-color: rgba(251, 251, 249, 0.16); }
.gb-wpick--0 .gb-wpick__price { color: var(--gb-card); }
.gb-wpick--0 .gb-wpick__buy { background: var(--gb-lime); color: var(--gb-ink); }

.gb-wpick--2 .gb-wpick__label { background: var(--gb-hot); color: var(--gb-card); }

/* Fourth grid cell: the link back to the guide these picks came from. */
.gb-fromguide {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	text-decoration: none;
	color: inherit;
	background: #eaf2d2;
	border: 1.5px solid var(--gb-ink);
	border-radius: 22px;
	padding: 22px 20px;
	transition: background 0.15s;
}
.gb-fromguide:hover { background: var(--gb-lime); }
.gb-fromguide__eyebrow {
	font: 700 10.5px/1 var(--gb-mono);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gb-ink);
	margin-bottom: 16px;
}
.gb-fromguide__title {
	font-family: var(--gb-display);
	font-weight: 800;
	font-size: 24px;
	line-height: 1.05;
	letter-spacing: -0.038em;
	color: var(--gb-ink);
}
.gb-fromguide__dek {
	font: 400 15px/1.6 var(--gb-serif), Georgia, serif;
	color: #2c2c28;
	margin: 14px 0 0;
}
.gb-fromguide__cta {
	font: 700 13px/1 var(--gb-ui);
	margin-top: 22px;
	color: var(--gb-ink);
}

/* 3. Latest ------------------------------------------------------------------ */
.gb-latest { margin: clamp(48px, 6vw, 76px) 0 0; }

.gb-latest__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
	gap: clamp(20px, 2.6vw, 30px);
	align-items: start;
}

.gb-card__media {
	display: block;
	position: relative;
	aspect-ratio: 16 / 10;
	border-radius: 20px;
	border: 1.5px solid var(--gb-ink);
	overflow: hidden;
	background: var(--gb-well);
}
.gb-card__title {
	font-family: var(--gb-display);
	font-weight: 700;
	font-size: 21px;
	line-height: 1.14;
	letter-spacing: -0.032em;
	margin: 16px 0 10px;
}
.gb-card__title a { text-decoration: none; color: inherit; }
.gb-card__meta {
	font: 400 11px/1 var(--gb-mono);
	color: var(--gb-grey);
	display: flex;
	gap: 8px;
}

/* 4. Category blocks --------------------------------------------------------- */
.gb-cat { margin: clamp(52px, 6.5vw, 84px) 0 0; }

.gb-cat__title {
	font-family: var(--gb-display);
	font-weight: 800;
	font-size: clamp(28px, 3.6vw, 46px);
	line-height: 1;
	letter-spacing: -0.042em;
	margin: 0 0 12px;
}
.gb-cat__title a { text-decoration: none; color: inherit; }

.gb-cat__subs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin-bottom: 26px;
}
.gb-cat__sub {
	font: 500 13.5px/1.3 var(--gb-ui);
	color: var(--gb-body-ink);
	text-decoration-line: underline;
	text-decoration-color: rgba(14, 14, 14, 0.3);
}
.gb-cat__all {
	font: 700 13.5px/1.3 var(--gb-ui);
	color: var(--gb-ink);
	text-decoration-line: underline;
}
.gb-cat__sub:hover,
.gb-cat__all:hover { color: var(--gb-hot); }

.gb-cat__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
	gap: clamp(24px, 3.5vw, 48px);
	align-items: start;
}

.gb-cat__leadmedia {
	display: block;
	position: relative;
	aspect-ratio: 16 / 10;
	border-radius: 20px;
	border: 1.5px solid var(--gb-ink);
	overflow: hidden;
	background: var(--gb-well);
}
.gb-cat__leadtitle {
	font-family: var(--gb-display);
	font-weight: 700;
	font-size: clamp(22px, 2.4vw, 28px);
	line-height: 1.12;
	letter-spacing: -0.034em;
	margin: 18px 0 10px;
}
.gb-cat__leadtitle a { text-decoration: none; color: inherit; }
.gb-cat__by {
	font: 600 13px/1.4 var(--gb-ui);
	color: var(--gb-body-ink);
	margin-bottom: 10px;
}
.gb-cat__by a { color: var(--gb-ink); }
.gb-cat__dek {
	font: 400 16px/1.6 var(--gb-serif), Georgia, serif;
	color: var(--gb-body-ink);
	margin: 0 0 12px;
	max-width: 52ch;
}
.gb-cat__meta,
.gb-catitem__meta {
	font: 400 11px/1 var(--gb-mono);
	color: var(--gb-grey);
	display: flex;
	gap: 8px;
}

.gb-cat__list {
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.gb-catitem__title {
	font-family: var(--gb-display);
	font-weight: 700;
	font-size: 19px;
	line-height: 1.16;
	letter-spacing: -0.03em;
	margin: 0 0 8px;
}
.gb-catitem__title a { text-decoration: none; color: inherit; }
.gb-catitem__dek {
	font: 400 15px/1.55 var(--gb-serif), Georgia, serif;
	color: var(--gb-body-ink);
	margin: 0 0 8px;
	max-width: 52ch;
}

/* Latest card: category chip pinned inside the media box, per the source. */
.gb-card__chip {
	position: absolute;
	top: 12px;
	left: 12px;
	font: 700 9.5px/1 var(--gb-mono);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gb-ink);
	background: var(--gb-lime);
	border-radius: 999px;
	padding: 6px 10px;
}

/* Category list item: 132px thumbnail beside the text, separated by a hairline.
 * The source uses a row, not a stack — without the thumbnail the right-hand
 * column read as a plain list and lost all rhythm against the lead article. */
.gb-catitem {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	padding: 20px 0;
	border-top: 1.5px solid rgba(14, 14, 14, 0.14);
}
.gb-cat__list { gap: 0; }          /* the hairline is the separator now */
.gb-catitem:first-child { border-top: 0; padding-top: 0; }

.gb-catitem__thumb {
	flex: none;
	width: 132px;
	position: relative;
	aspect-ratio: 16 / 10;
	border-radius: 12px;
	border: 1.5px solid var(--gb-ink);
	overflow: hidden;
	background: var(--gb-well);
	text-decoration: none;
}
.gb-catitem__thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.gb-catitem__body { min-width: 0; }
.gb-catitem__title { font-size: 18px; line-height: 1.18; margin: 0 0 7px; }
.gb-catitem__by {
	font: 600 12.5px/1.4 var(--gb-ui);
	color: var(--gb-body-ink);
	margin-bottom: 7px;
}
.gb-catitem__by a { color: var(--gb-ink); }
.gb-catitem__dek { margin: 0 0 9px; }

/* Below ~520px the thumbnail would leave the headline a sliver, so the row
 * becomes a stack. Expressed as a container-relative rule, not a breakpoint:
 * the same list appears in a narrow column on a wide screen. */
@supports (container-type: inline-size) {
	.gb-cat__list { container-type: inline-size; }
	@container (max-width: 420px) {
		.gb-catitem { display: block; }
		.gb-catitem__thumb { width: 100%; margin-bottom: 12px; }
	}
}


/* <time> must inherit the meta line's typography.
 *
 * Flux styles bare `time` as Inter 12px/500, so "Published" rendered in Space
 * Mono 11px next to a date in a different family, size and weight — two fonts
 * inside one four-word line. Inheriting keeps the pair typographically one
 * thing, which is what the reference shows.
 *
 * Widened to .gb-archive rather than duplicated: category.php renders the same
 * .gb-cat__meta / .gb-catitem__meta markup as the homepage block it was copied
 * from, and the bug this fixes is Flux's, not the homepage's, so it applies
 * anywhere that markup appears. .gb-card__meta only ever exists on .gb-home
 * (category archives have no Latest strip), so it is left homepage-only. */
.gb-home .gb-card__meta time,
.gb-home .gb-cat__meta time,
.gb-archive .gb-cat__meta time,
.gb-home .gb-catitem__meta time,
.gb-archive .gb-catitem__meta time {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

/* Footer column headings are headings, not dropdowns.
 *
 * "Categories" and "About" are parent menu items with children, so Flux prints
 * a chevron under each and treats them as expandable. The reference shows a
 * plain label above an always-visible list — there is nothing to collapse, and
 * the chevron sat on its own line adding ~40px of dead space per column on
 * mobile.
 *
 * The submenu is forced visible rather than left to a toggle we have hidden:
 * hiding the control while leaving the panel collapsible is how a menu ends up
 * permanently shut with no way to open it. */
/* The toggle is a BARE <span> with no class of its own — Flux prints
 * `<li class="menu-item"><a>…</a><span></span><ul class="sub-menu">`. Earlier
 * rules here matched .cs-icon-chevron-down and [class*="toggle"] and so hit
 * nothing at all, which is why the arrow kept appearing around 767px. A direct
 * child `> span` is unambiguous: the label is an <a> and the panel is a <ul>,
 * so the only bare span in that position is the toggle. */
.cs-footer .cs-footer-columns__nav > li > span,
.cs-footer .cs-footer-columns__nav .cs-icon-chevron-down,
.cs-footer .cs-footer-columns__nav [class*="toggle"] {
	display: none !important;
}
.cs-footer .cs-footer-columns__nav .sub-menu {
	display: block !important;
	max-height: none !important;
	visibility: visible !important;
	opacity: 1 !important;
	position: static !important;
	transform: none !important;
}

/* ===========================================================================
 * CATEGORY ARCHIVE — category.php
 *
 * The lead-plus-list body reuses section 4's .gb-cat__title / .gb-cat__subs /
 * .gb-cat__grid / .gb-cat__lead* / .gb-cat__list / .gb-catitem* rules
 * UNCHANGED — those were already bare, unscoped selectors, so a category
 * archive rendering the same markup gets the same styling with nothing added
 * here. Only what is genuinely new to this page type — the shell, the header
 * above the grid, and pagination — lives in this section, under .gb-archive
 * per the rule that killed .gb-rule--7 globally once already (see the
 * .gb-home rule note above): a selector that could leak into the article page
 * must be scoped, not bare.
 * =========================================================================== */

.gb-archive {
	/* `width: 100%` is load-bearing, not decoration. Flux's `.cs-main-content`
	 * is itself a CSS grid, and .gb-archive is its only item — a grid item
	 * with `margin: 0 auto` and no explicit width does not stretch, it
	 * shrink-to-fits its own max-content size and centers inside the track.
	 * .gb-home gets away with the same margin:auto-only rule because its hero
	 * and picks content happen to be wide enough to hit the max-width cap
	 * regardless; category.php's narrower .gb-cat__grid content does not, and
	 * measured 530px instead of the intended 1224px column without this. */
	width: 100%;
	max-width: var(--gb-shell);
	margin: 0 auto;
	padding: 0 var(--gb-shell-x);
	box-sizing: border-box;
}

/* `.gb-rule` / `--7` / `--8` are scoped to `.gb-home` (see the note above
 * section 4h): redefining them bare once already turned the article page's
 * 22px section rule into 16px. Widening the SAME rule to `.gb-archive` is
 * deliberate — this is the homepage's rule reused, not a second one — rather
 * than a copy that would drift the day one of them changes. */
.gb-home .gb-rule,
.gb-archive .gb-rule { background: var(--gb-ink); }
.gb-home .gb-rule--7,
.gb-archive .gb-rule--7 { height: 7px; margin-bottom: 16px; }
.gb-home .gb-rule--8,
.gb-archive .gb-rule--8 { height: 8px; margin-bottom: 16px; }

.gb-archive__head { padding-top: clamp(20px, 3vw, 32px); }

.gb-archive__desc {
	font: 400 16px/1.6 var(--gb-serif), Georgia, serif;
	color: var(--gb-body-ink);
	max-width: 62ch;
	margin: 0 0 22px;
}

/* Child combinator picks out exactly ONE of these on any given page: the grid
 * when page 1 has a lead, the bare list when page 2+ has none — so this is
 * the top spacing for "whatever comes after the header", not two rules. */
.gb-archive > .gb-cat__grid,
.gb-archive > .gb-cat__list {
	margin-top: clamp(28px, 4vw, 44px);
}

/* Page 2+ has no lead column, so .gb-cat__list renders alone rather than
 * beside .gb-cat__lead in the two-up .gb-cat__grid. Capped at the lead
 * column's own measure (.gb-cat__grid's minmax(min(400px,100%),1fr) track) so
 * a bare list on a 1280px shell does not stretch into a single unreadably
 * wide row on desktop. */
.gb-archive > .gb-cat__list {
	max-width: 640px;
}

/* Overflow run — everything past the lead's fixed 3-row aside (or past the
 * lead alone, on a category too small for one). Measured on
 * /category/electronics/ before this existed: .gb-cat__lead was 512px tall
 * and .gb-cat__list ran to 1570px over its 9 rows, leaving 1058px of empty
 * column under the lead. Moving every post past the first 4 into its own
 * full-width, multi-column grid — instead of stretching the aside — means
 * the aside is never taller than the 3 rows the homepage already proves work
 * beside a 512px lead, at any post count.
 * `minmax(min(320px, 100%), 1fr)`, same pattern as .gb-cat__grid two rules
 * up, so a narrow viewport gets one column instead of an overflowing one. */
.gb-archive .gb-cat__more {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 40px);
	margin-top: clamp(28px, 4vw, 44px);
}

/* .gb-catitem's border-top is a between-ROWS separator in the single-column
 * .gb-cat__list, which is why :first-child strips it there. In the
 * multi-column .gb-cat__more every item starts a row of its own, so the same
 * rule reads as a top accent on each card — and the one item that inherited
 * the :first-child strip (the run's first post) would be the odd one out. */
.gb-archive .gb-cat__more .gb-catitem:first-child {
	border-top: 1.5px solid rgba(14, 14, 14, 0.14);
	padding-top: 20px;
}

/* .gb-cat__grid (section 4, shared with the homepage) collapses to one
 * column once two 400px tracks can't both fit — but .gb-cat__lead's image
 * scales down with the column (aspect-ratio 16/10) while the 3-row aside
 * next to it does not, so the two diverge before that collapse point.
 * Measured on /category/electronics/ at 1024px, still 2-up under the 400px
 * threshold: a 432px lead beside a 636px aside, a 204px empty gap under the
 * lead. Raising the archive's own per-column minimum to 460px moves the
 * collapse up to cover 1024px too (912px content ÷ 2 needs 460px+ each to
 * stay 2-up; at 1440px's 1168px content, 460px still leaves room for two),
 * so the mismatch stacks into one full-width column instead of sitting
 * beside an empty one. Scoped here rather than widened on the shared rule —
 * the homepage's own categories never carried this many aside words. */
.gb-archive .gb-cat__grid {
	grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
}

/* Same adaptive stack the aside list already uses (section 4, below the
 * .gb-catitem rules) — a grid column here runs 320–400px wide at the widths
 * this was measured at, i.e. already under that rule's 420px trigger, so
 * enabling containment is the only thing this needs to add. */
@supports (container-type: inline-size) {
	.gb-archive .gb-cat__more { container-type: inline-size; }
}

.gb-archive__pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: clamp(48px, 6vw, 72px) 0 clamp(40px, 5vw, 64px);
}
.gb-archive__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	border-radius: 999px;
	border: 1.5px solid var(--gb-ink);
	font: 700 13px/1 var(--gb-mono);
	color: var(--gb-ink);
	text-decoration: none;
	background: var(--gb-card);
}
.gb-archive__pagination a.page-numbers:hover {
	background: var(--gb-ink);
	color: var(--gb-lime);
	border-color: var(--gb-ink);
}
.gb-archive__pagination .page-numbers.current {
	background: var(--gb-lime);
	border-color: var(--gb-ink);
}
/* The "…" gap marker is text, not a control — no border, no hover state. */
.gb-archive__pagination .page-numbers.dots {
	border: none;
	background: none;
	color: var(--gb-grey);
	min-width: auto;
	padding: 0 4px;
}
.gb-archive__pagination .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* ===========================================================================
 * SECTION 16 — STATIC PAGES (page.php)
 *
 * Contact, affiliate disclosure and any future plain page. No hero, no rail,
 * no byline — just a title and reading copy, at the same shell width as
 * everything else on the site.
 * =========================================================================== */

/* `width: 100%` for the same reason as .gb-archive above: #content.cs-main-content
 * is a CSS grid and .gb-page is its only item, so without an explicit width the
 * item shrink-to-fits its content instead of filling the 1280px track. */
.gb-page {
	width: 100%;
	max-width: var(--gb-shell);
	margin: 0 auto;
	padding: 0 var(--gb-shell-x);
	box-sizing: border-box;
}

.gb-page__head { padding-top: clamp(28px, 4vw, 48px); }

/* Same display scale as .gb-cat__title (category/homepage section headings) —
 * a page title is a section-level heading, not the 88px article headline,
 * which is reserved for .cs-entry__title on a single post. */
.gb-page__title {
	font-family: var(--gb-display);
	font-weight: 800;
	font-size: clamp(28px, 3.6vw, 46px);
	line-height: 1;
	letter-spacing: -0.042em;
	color: var(--gb-ink);
	margin: 0 0 clamp(20px, 3vw, 32px);
}

/* Flux itself boxes and centers .entry-content whenever a page has no
 * sidebar:
 *
 *   .page .cs-sidebar-disabled .entry-content {
 *     max-width: var(--cs-entry-content-medium-width); ( = 638px )
 *     margin-left: auto;
 *     margin-right: auto;
 *   }
 *
 * page.php never calls get_sidebar(), which is exactly what earns a page the
 * cs-sidebar-disabled body class — so that parent rule fires here and centers
 * .gb-page__body inside .gb-page's ~1168px content box: (1168 − 638) / 2 =
 * 265px, matching the ~263px gap measured between the <h1> and the body copy
 * on /contact/. It has nothing to do with .gb-page__title, which is why only
 * the copy — not the heading — was pushed in. Un-boxing and left-aligning the
 * CONTAINER here is the fix; the 70ch measure two rules down still caps the
 * READING width, it just no longer has to fight a parent margin to do it. */
.gb-page .gb-page__body.entry-content {
	margin-left: 0;
	margin-right: 0;
	max-width: none;
}

/* Body copy reuses the article's own .entry-content > p / ul / ol rule
 * (Section 10) for family/size/color — same voice as an article. Only the
 * measure changes: 640px there is tuned for the two-column rail layout,
 * where the flow column beside the rail is narrower than the full shell. A
 * static page has no rail, so it can afford the fuller 68-72ch measure asked
 * for in the brief; ~70ch is used directly rather than translated to a px
 * guess. */
.gb-page__body.entry-content > p,
.gb-page__body.entry-content > ul,
.gb-page__body.entry-content > ol {
	max-width: 70ch;
}

/* The article lede rule (Section 6), `.entry-content > p:first-of-type`, is
 * also a bare selector — it matches the first paragraph of ANY .entry-content
 * block, including .gb-page__body, and gives Contact's opening paragraph a
 * 33px/900px/52px-top-margin treatment meant for an article's intro under a
 * hero figure. Besides the unwanted top gap, that max-width: 900px sails past
 * this section's 70ch cap once its own 33px font-size is fed into `ch` (70ch
 * at 33px measured ~1303px — wider than .gb-page's ~1168px content box, so
 * the "cap" did nothing; verified via computed style on /contact/). Page
 * copy has no lede, just body text, so the first paragraph is put back on
 * the same 20px scale as the rest of it here, same as the un-boxing fix
 * above undid the OTHER Flux/article rule that leaked in beside it. */
.gb-page__body.entry-content > p:first-of-type {
	font-size: 20px;
	line-height: 1.74;
	letter-spacing: normal;
	color: var(--gb-ink-soft);
	max-width: 70ch;
	margin-top: 0;
}

.gb-page__body.entry-content a {
	color: var(--gb-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.gb-page__body.entry-content a:hover { color: var(--gb-hot); }

.gb-page__body.entry-content ul,
.gb-page__body.entry-content ol {
	padding-left: 1.2em;
}
.gb-page__body.entry-content li { margin-bottom: 0.5em; }