/* =========================================================================
   Veygo Brand 2026 — Blog

   The article and archive layer on top of brand26.css. Loaded only on
   single-post.php, category.php and home.php (see inc/brand26-blog.php), and
   depends on brand26.css for tokens, chrome, buttons and typography.

   Specificity, which bites twice here:

   1. Prose rules are written `.b26-prose :where(h2)`, not
      `:where(.b26-prose) h2`. The site's global stylesheet carries a
      Tailwind-style preflight — plain `p { margin: 0 }` at element
      specificity — which beats a fully zero-specificity rule and silently
      collapses every paragraph gap in the article. Scoping by the container
      class puts these at (0,1,0): enough to beat the preflight, still low
      enough that any ACF block shipping its own class-based styles inside
      the_content keeps them.
   2. Component rules stay at one class, so a prose rule never outranks a
      component that happens to live inside the article.

   Contents
     1. Tokens
     2. Reading progress
     3. Breadcrumbs
     4. Article hero
     5. Article layout
     6. Prose
     7. Share
     8. Sidebar CTA
     9. Author card
    10. Related posts carousel
    11. Archive
    12. Motion and print
   ========================================================================= */

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

.b26-body {
	/* Measure. 70ch at this size is ~720px, the readable maximum. */
	--b26-measure: 720px;
	--b26-aside: 340px;
	--b26-article-gap: clamp(40px, 4.5vw, 88px);
	/* Nav is 64px tall with 16px of inset above it. */
	--b26-sticky-top: 96px;

	/* Archive header copy. One pair of sizes for every archive type. */
	--b26-archhead-lead: clamp(1.125rem, 1.55vw, 1.6rem);
	--b26-archhead-body: clamp(0.9375rem, 1.05vw, 1.0625rem);
}

/* -------------------------------------------------------------------------
   2. Reading progress

   A single fixed rule at the very top of the viewport. It sits above the
   floating nav pill (z-index 50) in the 16px band of page that shows through
   beside it, so it reads as a page-level indicator rather than part of the
   nav.
   ---------------------------------------------------------------------- */

.b26-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	z-index: 60;
	background: var(--b26-green-12);
	pointer-events: none;
}

.b26-progress__bar {
	height: 100%;
	width: 100%;
	background: var(--b26-turquoise);
	transform: scaleX(0);
	transform-origin: 0 50%;
	/* Driven by rAF from blog26.js, so no transition — a transition here
	   lags the scroll and reads as jitter. */
}

/* Nothing to indicate before the article starts, and no JS means no value to
   show, so the track only appears once the script has claimed it. */
.b26-progress:not(.is-ready) {
	display: none;
}

/* -------------------------------------------------------------------------
   3. Breadcrumbs
   ---------------------------------------------------------------------- */

.b26-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	font-size: 0.9375rem;
	line-height: 1.3;
}

.b26-crumbs li {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.b26-crumbs a {
	text-decoration: none;
	opacity: 0.72;
	transition: opacity 0.18s ease;
}

.b26-crumbs a:hover {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.b26-crumbs__sep {
	opacity: 0.4;
}

.b26-crumbs__current {
	/* The current page is the longest crumb and the least useful, so it is
	   allowed to truncate rather than wrap the trail onto three lines. */
	max-width: 34ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	opacity: 0.72;
}

/* -------------------------------------------------------------------------
   4. Article hero

   Deep Green band with the notched bottom corners the brand uses on every
   full-bleed band. The featured image is pulled up across the boundary so
   the article opens on the image, not on a colour change.
   ---------------------------------------------------------------------- */

.b26-posthead {
	position: relative;
	background: var(--b26-deep-green);
	color: var(--b26-mint-white);
	padding: 120px 0 clamp(56px, 6vw, 96px);
	overflow: hidden;
	overflow: clip;
}

/* The Turquoise disc from the product heroes, at article scale. */
/* The decorative circle behind the header was dropped on the client's
   instruction, 1 September. */
.b26-posthead::after {
	content: none;
}

.b26-posthead__inner {
	position: relative;
	z-index: 2;
	max-width: 860px;
}

.b26-posthead .b26-crumbs {
	margin-bottom: clamp(24px, 3vw, 40px);
}

.b26-posthead__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}

.b26-cat-pill {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid var(--b26-white-30);
	font-family: var(--b26-display);
	font-size: 0.875rem;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.b26-cat-pill:hover {
	background: var(--b26-turquoise);
	border-color: var(--b26-turquoise);
	color: var(--b26-deep-green);
}

.b26-posthead__title {
	font-size: clamp(2.125rem, 3.6vw, 4rem);
	line-height: 1.03;
	color: var(--b26-turquoise);
	margin-bottom: clamp(16px, 1.8vw, 26px) !important;
}

.b26-posthead__standfirst {
	max-width: 62ch;
	color: var(--b26-white-72);
}

/* Byline row: avatar, author, then the metered facts. */
.b26-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 22px;
	margin-top: clamp(28px, 3vw, 44px);
	font-size: 0.9375rem;
}

.b26-byline__avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	overflow: hidden;
	flex: none;
	background: var(--b26-white-30);
}

.b26-byline__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.b26-byline__who {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.b26-byline__name {
	font-family: var(--b26-display);
	font-size: 1.0625rem;
	text-decoration: none;
}

.b26-byline__name:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.b26-byline__date {
	color: var(--b26-white-72);
}

.b26-byline__facts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	margin-left: auto;
	color: var(--b26-white-72);
}

.b26-byline__fact {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

.b26-byline__fact svg {
	width: 17px;
	height: 17px;
	flex: none;
	opacity: 0.8;
}

@media (max-width: 720px) {
	.b26-byline__facts {
		margin-left: 0;
		width: 100%;
	}
}

/* -------------------------------------------------------------------------
   5. Article layout
   ---------------------------------------------------------------------- */

.b26-postmain {
	padding-bottom: clamp(48px, 5vw, 88px);
}

/* Featured image straddling the hero's bottom edge. */
.b26-postfig {
	max-width: 1100px;
	margin: clamp(-72px, -5vw, -40px) auto 0;
	position: relative;
	z-index: 3;
	border-radius: var(--b26-radius-lg);
	overflow: hidden;
	background: var(--b26-green-12);
	aspect-ratio: 16 / 9;
}

.b26-postfig img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.b26-postgrid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--b26-aside);
	gap: var(--b26-article-gap);
	align-items: start;
	max-width: calc(var(--b26-measure) + var(--b26-aside) + 88px);
	margin: clamp(40px, 4.5vw, 72px) auto 0;
}

.b26-postgrid__main {
	min-width: 0;
	max-width: var(--b26-measure);
}

.b26-postgrid__aside {
	min-width: 0;
	position: sticky;
	top: var(--b26-sticky-top);
}

/* Below the two-column breakpoint the aside is a normal block that follows
   the article, so the CTA still gets seen — it just stops being sticky. */
@media (max-width: 1080px) {
	.b26-postgrid {
		grid-template-columns: minmax(0, 1fr);
		max-width: var(--b26-measure);
	}

	.b26-postgrid__aside {
		position: static;
		top: auto;
	}

	/* Stacked, the secondary link list sits a few hundred pixels above the
	   money-pages band and repeats two of the same three links. The band
	   wins; this one is desktop-only furniture. */
	.b26-asidecard {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   6. Prose

   Styling for the_content(), which on this site is classic HTML: p, h2, h3,
   lists, images, tables and the occasional ACF block. Everything is in
   :where() so a block that ships its own styling keeps it.
   ---------------------------------------------------------------------- */

.b26-prose {
	font-size: clamp(1.0625rem, 1.2vw, 1.1875rem);
	line-height: 1.65;
}

/* Own the vertical rhythm outright: zero every top-level block, then put the
   gap back between siblings. Both rules are (0,1,0) so order decides, which
   is why the reset has to come first — and why there is no separate
   `p { margin: 0 }` rule further down. That one used to sit after this and
   quietly reinstated the collapsed paragraphs it was meant to prevent. */
.b26-prose > * {
	margin: 0;
}

.b26-prose > * + * {
	margin-top: 1.15em;
}

.b26-prose :where(h2) {
	font-family: var(--b26-display);
	font-size: clamp(1.625rem, 2.4vw, 2.25rem);
	line-height: 1.12;
	letter-spacing: -0.01em;
	margin-top: 1.9em;
	margin-bottom: 0.5em;
	/* Keeps a heading from stranding at the foot of the viewport when a
	   reader jumps in from the progress bar or a table of contents. */
	scroll-margin-top: calc(var(--b26-sticky-top) + 12px);
}

.b26-prose :where(h3) {
	font-family: var(--b26-display);
	font-size: clamp(1.25rem, 1.7vw, 1.5rem);
	line-height: 1.2;
	margin-top: 1.7em;
	margin-bottom: 0.45em;
	scroll-margin-top: calc(var(--b26-sticky-top) + 12px);
}

.b26-prose :where(h4) {
	font-family: var(--b26-display);
	font-size: 1.1875rem;
	margin-top: 1.5em;
	margin-bottom: 0.4em;
}

.b26-prose :where(a) {
	color: var(--b26-deep-green);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	/* Deep Green. Turquoise on a light ground reads as a highlight, not a rule. */
	text-decoration-color: var(--b26-deep-green);
	transition: text-decoration-color 0.18s ease, background-color 0.18s ease;
}

.b26-prose :where(strong),
.b26-prose :where(b) {
	font-weight: 700;
}

.b26-prose :where(ul),
.b26-prose :where(ol) {
	padding-left: 1.4em;
}

/*
 * The Veygo mark stands in for the disc. list-style-image cannot be sized or
 * positioned, so the marker is removed and the tick drawn as a ::before that
 * sits in the padding the list already reserves.
 */
.b26-prose :where(ul) {
	list-style: none;
	padding-left: 1.75em;
}

.b26-prose ul > li {
	position: relative;
}

.b26-prose ul > li::before {
	content: '';
	position: absolute;
	left: -1.45em;
	/* Optically centred on the first line rather than its box. */
	top: 0.42em;
	width: 0.75em;
	height: 0.75em;
	background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M11.7109 2.10201C11.7252 2.09461 11.739 2.08834 11.7522 2.08208C11.8371 2.04166 11.9331 1.99554 11.9755 1.86858C12.0125 1.75756 12.0075 1.64653 11.9612 1.53893L11.3877 0.210087C11.3304 0.0785691 11.213 0 11.074 0C11.0117 0 10.9466 0.0159415 10.8865 0.046686C9.46945 0.765194 8.16265 1.75812 7.00252 2.99872C5.98741 4.10381 5.1912 5.37572 4.63539 6.77971C4.3018 7.64113 4.06801 8.47692 3.88385 9.20909C3.52434 8.37501 3.22107 7.60127 2.96743 6.94254L2.3405 5.3091C2.3008 5.2015 2.2043 5.07169 1.97548 5.07169L0.300346 5.07283C0.184003 5.07283 0.0764812 5.13147 0.0329212 5.21858C-0.0288347 5.34213 0.00865994 5.4355 0.0450518 5.52545C0.903018 7.66959 1.81778 9.6788 2.84171 11.6675C2.93104 11.8406 3.04959 12 3.30654 12L5.24689 11.996C5.46524 11.9954 5.64279 11.8167 5.64995 11.5901C5.70454 9.89913 6.08114 8.71376 6.71414 7.23746C7.16628 6.18361 7.74028 5.28804 8.46812 4.4995C9.3531 3.54073 10.4443 2.73454 11.7109 2.10258V2.10201Z' fill='%23032B33'/%3E %3C/svg%3E") no-repeat center / contain;
}

.b26-prose :where(ol) {
	list-style: decimal;
}

.b26-prose :where(li + li) {
	margin-top: 0.5em;
}

/* A pseudo-element is not valid inside :where(), so this one is scoped by
   the container class alone. */
.b26-prose li::marker {
	color: var(--b26-green-70);
}

.b26-prose :where(img) {
	border-radius: var(--b26-radius-card);
}

.b26-prose :where(figure) {
	margin: 1.9em 0;
}

.b26-prose :where(figcaption) {
	margin-top: 12px;
	font-size: 0.9375rem;
	color: var(--b26-green-70);
}

.b26-prose :where(blockquote) {
	margin: 1.9em 0;
	padding: 4px 0 4px 26px;
	border-left: 4px solid var(--b26-turquoise);
	font-family: var(--b26-display);
	font-size: clamp(1.25rem, 1.7vw, 1.5rem);
	line-height: 1.3;
}

.b26-prose :where(hr) {
	border: 0;
	height: 1px;
	background: var(--b26-green-12);
	margin: 2.4em 0;
}

.b26-prose :where(code) {
	font-size: 0.9em;
	background: var(--b26-green-12);
	border-radius: 6px;
	padding: 2px 6px;
}

/* Tables are the one thing editors paste that reliably breaks a narrow
   column, so the wrapper scrolls rather than the page. */
.b26-prose__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 1.9em 0;
	border-radius: var(--b26-radius-card);
	border: 1px solid var(--b26-green-12);
}

.b26-prose :where(table) {
	width: 100%;
	border-collapse: collapse;
	font-size: 1rem;
}

.b26-prose :where(th),
.b26-prose :where(td) {
	padding: 14px 18px;
	text-align: left;
	border-bottom: 1px solid var(--b26-green-12);
}

.b26-prose :where(th) {
	font-family: var(--b26-display);
	font-weight: 400;
	background: rgba(117, 251, 229, 0.18);
	white-space: nowrap;
}

.b26-prose :where(tr:last-child td) {
	border-bottom: 0;
}

/* Tag list under the article. */
.b26-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: clamp(32px, 3.5vw, 48px);
	padding-top: clamp(24px, 2.5vw, 32px);
	border-top: 1px solid var(--b26-green-12);
}

.b26-tags__label {
	font-family: var(--b26-display);
	margin-right: 4px;
}

.b26-tag {
	display: inline-flex;
	padding: 7px 14px;
	border-radius: 999px;
	background: var(--b26-green-12);
	font-size: 0.875rem;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.b26-tag:hover {
	background: var(--b26-deep-green);
	color: var(--b26-mint-white);
}

/* -------------------------------------------------------------------------
   7. Share
   ---------------------------------------------------------------------- */

.b26-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: clamp(32px, 3.5vw, 48px);
}

.b26-share__label {
	font-family: var(--b26-display);
	margin-right: 4px;
}

.b26-share__btn {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1.5px solid var(--b26-green-12);
	background: transparent;
	color: var(--b26-deep-green);
	cursor: pointer;
	padding: 0;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.b26-share__btn:hover {
	background: var(--b26-deep-green);
	border-color: var(--b26-deep-green);
	color: var(--b26-mint-white);
}

.b26-share__btn svg {
	width: 19px;
	height: 19px;
}

/* Copy-link confirmation. Replaces the icon rather than shifting layout. */
.b26-share__btn.is-copied {
	background: var(--b26-turquoise);
	border-color: var(--b26-turquoise);
	color: var(--b26-deep-green);
}

/* -------------------------------------------------------------------------
   8. Sidebar CTA
   ---------------------------------------------------------------------- */

/*
 * "Passed your test?", from the CTA Section frames of 27 August. Poppy Pink
 * card, Dark Plum type, 32px radius, 32/24 padding and a 40px gap between the
 * copy and the buttons.
 */
.b26-ctacard {
	background: var(--b26-pink);
	color: var(--b26-plum);
	border-radius: 32px;
	padding: 32px 24px;
	display: flex;
	flex-direction: column;
	/*
	 * No gap: the spacing is uneven, so it is carried on the elements. A flex
	 * gap here stacked on top of the title's own margin and made the first
	 * step 60px.
	 */
	position: relative;
	overflow: hidden;
}

/* The decorative disc the Deep Green card carried is not in the new design. */
.b26-ctacard::after {
	content: none;
}

.b26-ctacard > * {
	position: relative;
	z-index: 2;
}


.b26-ctacard__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	/* Deep Green on the Poppy Pink card, not Turquoise. */
	color: var(--b26-deep-green);
	margin-bottom: 14px;
}

.b26-ctacard__title {
	font-family: var(--b26-display);
	/* 48/48, as drawn. */
	font-size: 48px;
	line-height: 1;
	letter-spacing: var(--b26-track-display);
	/* 20 to the copy. */
	margin-bottom: 20px !important;
}

.b26-ctacard__copy {
	color: var(--b26-plum);
	font-size: 18px;
	line-height: 1.22;
	/* 40 to the buttons. */
	margin-bottom: 40px !important;
}

/* The two buttons, stacked and full width, 20 apart. */
.b26-ctacard__actions {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.b26-ctacard__go,
.b26-ctacard__alt {
	width: 100%;
	padding: 15px 24px;
	font-size: 20px;
	line-height: 1;
}

.b26-ctacard__go {
	background: var(--b26-plum);
	border-color: var(--b26-plum);
	color: var(--b26-mint-white);
}

.b26-ctacard__alt {
	background: transparent;
	border: 1.5px solid var(--b26-plum);
	color: var(--b26-plum);
}

.b26-ctacard .b26-btn {
	width: 100%;
	padding: 18px 24px;
}

/* Solid Deep Green reads as the action on pink; Turquoise disappears into it. */
.b26-ctacard .b26-btn--turquoise {
	background: var(--b26-deep-green);
	border-color: var(--b26-deep-green);
	color: var(--b26-mint-white);
}

.b26-ctacard__note {
	margin-top: 14px !important;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: rgb(3 43 51 / 78%);
}

.b26-ctacard__trust {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	font-size: 0.875rem;
	color: rgb(3 43 51 / 78%);
}

.b26-ctacard__stars {
	display: inline-flex;
	gap: 2px;
	/* The amber the rest of the site uses for stars, now the card is pink. */
	color: #FFBD00;
}

.b26-ctacard__stars svg {
	width: 15px;
	height: 15px;
}

/* Email variant. */
.b26-ctacard__field {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.b26-ctacard__input {
	width: 100%;
	padding: 16px 18px;
	border-radius: 999px;
	border: 1.5px solid rgb(3 43 51 / 30%);
	background: transparent;
	color: var(--b26-deep-green);
	font-family: var(--b26-sans);
	font-size: 1rem;
}

.b26-ctacard__input::placeholder {
	color: var(--b26-white-30);
}

.b26-ctacard__input:focus {
	border-color: var(--b26-turquoise);
	outline: none;
}

/* Secondary card, used under the CTA for the top money page on desktop. */
.b26-asidecard {
	margin-top: 20px;
	padding: clamp(20px, 2vw, 26px);
	border-radius: var(--b26-radius-lg);
	border: 1.5px solid var(--b26-green-12);
}

.b26-asidecard__title {
	font-family: var(--b26-display);
	font-size: 1.0625rem;
	margin-bottom: 14px !important;
}

.b26-asidecard ul {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.b26-asidecard a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 0;
	text-decoration: none;
	font-size: 0.9375rem;
	line-height: 1.3;
	border-bottom: 1px solid var(--b26-green-12);
	transition: color 0.18s ease;
}

.b26-asidecard li:last-child a {
	border-bottom: 0;
}

.b26-asidecard a svg {
	width: 16px;
	height: 16px;
	flex: none;
	opacity: 0.45;
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.b26-asidecard a:hover svg {
	opacity: 1;
	transform: translateX(3px);
}

/* -------------------------------------------------------------------------
   9. Author card
   ---------------------------------------------------------------------- */

.b26-author {
	display: flex;
	gap: clamp(20px, 2.4vw, 32px);
	align-items: flex-start;
	margin-top: clamp(40px, 4vw, 64px);
	padding: clamp(24px, 2.8vw, 36px);
	border-radius: var(--b26-radius-lg);
	/* White, not Turquoise: the byline should sit quietly under the article. */
	background: #fff;
}

.b26-author__portrait {
	width: clamp(72px, 8vw, 104px);
	height: clamp(72px, 8vw, 104px);
	flex: none;
	border-radius: 50%;
	overflow: hidden;
	background: var(--b26-green-12);
}

.b26-author__portrait img,
.b26-author__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.b26-author__eyebrow {
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--b26-green-70);
	margin-bottom: 6px !important;
}

.b26-author__name {
	font-family: var(--b26-display);
	font-size: clamp(1.25rem, 1.7vw, 1.5rem);
	line-height: 1.15;
	margin-bottom: 10px !important;
}

.b26-author__name a {
	text-decoration: none;
}

.b26-author__name a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.b26-author__bio {
	font-size: 1rem;
	line-height: 1.55;
	max-width: 62ch;
}

.b26-author__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	font-family: var(--b26-display);
	font-size: 0.9375rem;
	text-decoration: none;
	border-bottom: 2px solid var(--b26-deep-green);
	padding-bottom: 2px;
}

.b26-author__more svg {
	width: 16px;
	height: 16px;
	transition: transform 0.18s ease;
}

.b26-author__more:hover svg {
	transform: translateX(3px);
}

@media (max-width: 560px) {
	.b26-author {
		flex-direction: column;
	}
}

/* -------------------------------------------------------------------------
   10. Related posts carousel

   Reuses .b26-hub from brand26.css for the scroll-snap track and dots. Only
   the heading treatment differs: a section title instead of the Hub lockup,
   and a meta line on each card.
   ---------------------------------------------------------------------- */

.b26-hub--related .b26-hub__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 32px;
	margin-bottom: clamp(28px, 3vw, 48px);
}

.b26-hub--related .b26-hub__card h3 {
	font-size: clamp(1.0625rem, 1.35vw, 1.3125rem);
}

.b26-hub__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.72;
}

.b26-hub__meta span:not(:last-child)::after {
	content: '·';
	margin-left: 10px;
	opacity: 0.6;
}

/* -------------------------------------------------------------------------
   12. Archive (category and the Hub index)
   ---------------------------------------------------------------------- */

.b26-archhead {
	position: relative;
	background: var(--b26-deep-green);
	color: var(--b26-mint-white);
	padding: 120px 0 clamp(48px, 5vw, 80px);
	overflow: hidden;
	overflow: clip;
}

/* The decorative circle behind the header was dropped on the client's
   instruction, 1 September. */
.b26-archhead::after {
	content: none;
}

.b26-archhead__inner {
	position: relative;
	z-index: 2;
	max-width: 820px;
	min-width: 0;
}

/* Copy left, newest post right. The card is what stops a section header being
   a title on an empty field of Deep Green. */
.b26-archhead__top {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
	gap: clamp(32px, 5vw, 80px);
	align-items: center;
}

@media (max-width: 1080px) {
	.b26-archhead__top {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Eyebrow, with an optional avatar. Author archives use both. */
.b26-archhead__eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--b26-turquoise);
}

.b26-archhead__avatar {
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: 50%;
	overflow: hidden;
	background: var(--b26-white-30);
}

.b26-archhead__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Latest-post card. */
.b26-archhead__latest {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: clamp(20px, 1.8vw, 26px);
	border-radius: var(--b26-radius-lg);
	text-decoration: none;
	transition: transform 0.22s ease;
}

/*
 * On mobile the intro copy already fills the hero, and this post is the first
 * card in the grid one scroll below.
 *
 * This used to sit in the media block above, BEFORE .b26-archhead__latest's own
 * display: flex. Same specificity, so source order won, the card stayed visible
 * and it added around 350px to a header that was already too tall.
 */
@media (max-width: 1080px) {
	.b26-archhead__latest {
		display: none;
	}
}

.b26-archhead__latest:hover {
	border-color: var(--b26-turquoise);
	transform: translateY(-3px);
}

.b26-archhead__latest-label {
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--b26-turquoise);
}

.b26-archhead__latest-thumb {
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: 14px;
	overflow: hidden;
	background: var(--b26-white-30);
}

.b26-archhead__latest-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s ease;
}

.b26-archhead__latest:hover .b26-archhead__latest-thumb img {
	transform: scale(1.04);
}

.b26-archhead__latest-title {
	font-family: var(--b26-display);
	font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
	line-height: 1.2;
}

.b26-archhead__latest-meta {
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--b26-white-72);
}

.b26-archhead .b26-crumbs {
	margin-bottom: clamp(20px, 2.5vw, 34px);
}

/* Full-height variant, used on the Hub index so the section opens the way a
   product page does. Deliberately the shared --b26-hero-min token and the
   same flex centring as .b26-hero, not a second set of numbers: when design
   change the hero height, this follows without anyone remembering it exists.

   Knowingly sparse at this height for now — the Hub hero holds a title, a
   standfirst and the section rail. Filling it is on design. */
/*
 * Shorter than the product heroes. --b26-hero-min is sized for a landing page
 * that has to hold a headline, a tick list and two CTAs; the Hub header carries
 * a title and a standfirst, and at that height it pushed the articles - the
 * actual content - entirely below the fold.
 */
.b26-archhead--tall {
	min-height: clamp(400px, 40vw, 560px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.b26-archhead__title {
	color: var(--b26-turquoise);
	margin-bottom: 18px !important;
}

/*
 * Header copy, identical on every archive: the Hub index, the category
 * archives and the author archive all fill the same two slots, so they read
 * as one page type rather than three.
 *
 *   .b26-archhead__intro  one standfirst paragraph, lead size
 *   .b26-archhead__body   everything after it, one step down
 *
 * One size each. An earlier version sized the second and later paragraphs at
 * 0.86em of the first, which meant the Hub and a category header rendered the
 * same copy at visibly different sizes.
 */
.b26-archhead__intro {
	max-width: 62ch;
	font-size: var(--b26-archhead-lead);
	line-height: 1.25;
	/* Full Mint White, not the 72% tint: this is the section's standfirst. */
	color: var(--b26-mint-white);
}

.b26-archhead__body {
	max-width: 62ch;
	margin-top: 16px;
	font-size: var(--b26-archhead-body);
	line-height: 1.55;
	/*
	 * Full Mint White, matching the standfirst above it. The 72% tint this
	 * carried read as grey rather than as a quieter white, and put these
	 * paragraphs at a different colour from the first one in the same block.
	 */
	color: var(--b26-mint-white);
}

.b26-archhead__body p + p {
	margin-top: 0.8em;
}

/* -------------------------------------------------------------------------
   Archive header: the body copy as a disclosure on mobile
   ---------------------------------------------------------------------- */

/*
 * The element ships closed, so mobile is a plain accordion with no script
 * behind it. Desktop forces it open below and hides the control.
 */
.b26-archhead__more {
	margin-top: 16px;
}

.b26-archhead__more > .b26-archhead__body {
	margin-top: 12px;
}

.b26-archhead__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	color: var(--b26-mint-white);
	font-size: var(--b26-archhead-body);
	line-height: 1.2;
	/* The default marker is a black triangle that cannot be recoloured. */
	list-style: none;
	/* 44px of vertical target without pushing the text apart. */
	padding: 13px 0;
}

.b26-archhead__toggle::-webkit-details-marker {
	display: none;
}

.b26-archhead__chev {
	display: inline-flex;
	transition: transform 0.18s ease;
}

.b26-archhead__chev svg {
	width: 16px;
	height: 16px;
}

.b26-archhead__more[open] .b26-archhead__chev {
	transform: rotate(180deg);
}

/*
 * Desktop: always open, control hidden.
 *
 * Overriding the child's display handles the older rendering, and
 * ::details-content the current one, where a closed <details> hides its panel
 * with content-visibility rather than display.
 */
@media (min-width: 901px) {
	.b26-archhead__toggle {
		display: none;
	}

	.b26-archhead__more > .b26-archhead__body {
		display: block;
		margin-top: 0;
	}

	.b26-archhead__more::details-content {
		content-visibility: visible;
		block-size: auto;
	}
}

.b26-archhead__body strong {
	color: var(--b26-mint-white);
	font-weight: 600;
}

/*
 * Standfirst held to a single line at every width, used on the Hub index.
 *
 * min() keeps it at exactly the same size as every other archive standfirst
 * until the viewport is too narrow to fit the line, and only then shrinks it.
 * That is what lets the Hub match the category headers on desktop while still
 * guaranteeing one line on a phone.
 *
 * The copy length is still a hard constraint: nowrap means an over-long string
 * overflows rather than wrapping. Budget is roughly 34 characters.
 */
.b26-archhead__intro--oneline,
.b26-archhead__intro--oneline p {
	max-width: none;
	white-space: nowrap;
	font-size: min( var(--b26-archhead-lead), 4.6vw );
}

/* Category rail. Scrolls horizontally on narrow screens rather than wrapping
   to four lines of pills. */
.b26-catnav {
	/*
	 * No top margin: the white section's own padding already provides it, and
	 * the two together left the rail floating with nothing beneath it before
	 * the cards began.
	 */
	margin-bottom: clamp(28px, 3vw, 40px);
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	margin-left: calc(var(--b26-gutter) * -1);
	margin-right: calc(var(--b26-gutter) * -1);
	padding: 4px var(--b26-gutter);
}

.b26-catnav::-webkit-scrollbar {
	display: none;
}

.b26-catnav ul {
	display: flex;
	gap: 10px;
	width: max-content;
}

/* Wide enough to hold the whole set: wrap instead of scrolling, so the rail
   does not end on a pill sliced by the viewport edge. */
@media (min-width: 900px) {
	.b26-catnav {
		overflow-x: visible;
	}

	.b26-catnav ul {
		flex-wrap: wrap;
		width: auto;
	}
}

.b26-catnav a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 20px;
	border-radius: 999px;
	border: 1px solid var(--b26-white-30);
	font-family: var(--b26-display);
	font-size: 0.9375rem;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

/* Border only, in Deep Green. Turquoise type on white is close to invisible,
   and a Turquoise border was barely there either now the rail sits on white. */
.b26-catnav a:hover {
	border-color: var(--b26-deep-green);
}

.b26-catnav a[aria-current='page'] {
	background: var(--b26-turquoise);
	border-color: var(--b26-turquoise);
	color: var(--b26-deep-green);
}

.b26-catnav__count {
	opacity: 0.6;
	font-size: 0.8125rem;
}

/* Lead article on the Hub index.
   Named "feature", not "lead": .b26-lead is the design system's lead-paragraph
   type class and is used on the article standfirst. */
.b26-feature {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: clamp(24px, 3vw, 56px);
	align-items: center;
	margin-bottom: clamp(40px, 4vw, 72px);
	text-decoration: none;
}

.b26-feature__thumb {
	border-radius: var(--b26-radius-lg);
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: var(--b26-green-12);
}

.b26-feature__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s ease;
}

.b26-feature:hover .b26-feature__thumb img {
	transform: scale(1.03);
}

.b26-feature__title {
	font-family: var(--b26-display);
	font-size: clamp(1.75rem, 2.8vw, 2.75rem);
	line-height: 1.06;
	margin: 14px 0 !important;
}

.b26-feature__excerpt {
	color: var(--b26-green-70);
	max-width: 52ch;
}

@media (max-width: 860px) {
	.b26-feature {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Card grid. */
.b26-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: clamp(28px, 3vw, 44px) clamp(20px, 2.2vw, 32px);
}

.b26-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	text-decoration: none;
}

.b26-card__thumb {
	border-radius: 20px;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: var(--b26-green-12);
}

.b26-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s ease;
}

.b26-card:hover .b26-card__thumb img {
	transform: scale(1.04);
}

.b26-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--b26-green-70);
}

/*
 * The primary category, as a label rather than another run of meta text. It
 * reads as a tag on the card, which is what tells you which section an article
 * belongs to when the grid is mixed.
 */
.b26-card__cat {
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--b26-turquoise);
	color: var(--b26-deep-green);
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* The separator belongs to the item BEFORE it, not the one after. As an
   ::after it stays attached when the row wraps; as a ::before on the next
   span it drops to the start of line two on its own, which is what the long
   section names ("Car Ownership Resources · 4 min read") started doing. */
/* The separator belongs between plain meta items, not after the label pill. */
.b26-card__meta span:not(:last-child):not(.b26-card__cat)::after {
	content: '·';
	margin-left: 10px;
	opacity: 0.6;
}

.b26-card__title {
	font-family: var(--b26-display);
	font-size: clamp(1.125rem, 1.4vw, 1.375rem);
	line-height: 1.15;
}

.b26-card:hover .b26-card__title {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 2px;
	/* Deep Green, not Turquoise, so it reads as an underline and not a highlight. */
	text-decoration-color: var(--b26-deep-green);
}

.b26-card__excerpt {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--b26-green-70);
}

/* Pagination. */
.b26-pager {
	display: flex;
	justify-content: center;
	margin-top: clamp(40px, 4.5vw, 72px);
}

.b26-pager .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.b26-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	height: 46px;
	padding: 0 14px;
	border-radius: 999px;
	border: 1.5px solid var(--b26-green-12);
	font-family: var(--b26-display);
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.b26-pager .page-numbers:hover {
	border-color: var(--b26-deep-green);
}

.b26-pager .page-numbers.current {
	background: var(--b26-deep-green);
	border-color: var(--b26-deep-green);
	color: var(--b26-mint-white);
}

.b26-pager .page-numbers.dots {
	border-color: transparent;
	min-width: 24px;
}

/*
 * WordPress prints <h2 class="screen-reader-text"> inside the pagination and
 * the search form. brand26 uses .b26-sr for the same job and defines nothing
 * for the core class, so "Posts pagination" was rendering as visible body
 * copy under the page numbers. Same declarations as .b26-sr.
 */
.b26-page .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* View-all link. The crawl path to everything past page one — see the note
   in inc/brand26-blog.php. */
.b26-viewall {
	display: flex;
	justify-content: center;
	margin-top: clamp(20px, 2vw, 28px);
}

.b26-viewall a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--b26-display);
	font-size: 0.9375rem;
	text-decoration: none;
	border-bottom: 2px solid var(--b26-green-12);
	padding-bottom: 3px;
	transition: border-color 0.18s ease;
}

.b26-viewall a:hover {
	border-bottom-color: var(--b26-deep-green);
}

.b26-viewall svg {
	width: 16px;
	height: 16px;
	transition: transform 0.18s ease;
}

.b26-viewall a:hover svg {
	transform: translateX(3px);
}

/* Empty state. */
.b26-empty {
	text-align: center;
	padding: clamp(48px, 6vw, 96px) 0;
}

.b26-empty p {
	margin: 14px auto 28px !important;
	max-width: 44ch;
	color: var(--b26-green-70);
}

/* -------------------------------------------------------------------------
   13. Motion and print
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.b26-archhead__latest,
	.b26-archhead__latest-thumb img,
	.b26-card__thumb img,
	.b26-feature__thumb img,
	.b26-asidecard a svg,
	.b26-author__more svg {
		transition: none !important;
	}

	.b26-archhead__latest:hover {
		transform: none;
	}
}

@media print {
	.b26-progress,
	.b26-postgrid__aside,
	.b26-share,
	.b26-hub {
		display: none !important;
	}

	.b26-posthead {
		background: none;
		color: #000;
		padding-top: 0;
	}

	.b26-posthead__title {
		color: #000;
	}
}

/*
 * The listing sits closer to the header than a standalone section would: the
 * category rail is the first thing in it and reads as part of the header's
 * furniture, so the full section rhythm left it stranded.
 */
.b26-section--archive {
	padding-top: 40px;
}