/* ══════════════════════════════════════════════════════════════════════════
   css/company-blog.css — COMPANY BLOG LISTING  (/company-blog, prefix fw-cb)

   Owner, 1 Oct 2026: the company blog follows the patient blog's design.
   This sheet is the /blog listing sheet (css/bloglist.css) ported under its
   own prefix, so the two read as one family while each page keeps its own
   sheet (one sheet per page): masthead with drifting orbs, sticky search /
   quick search / sort bar, lead story, three-across cards with author rows,
   ruled topics and archive rail on the theme sticky plugin, numbered pager
   with Load more (custom/js/listing.js), dark closing band.
   Same rules as the blog: no max-width, 28px / 14px gutters, Outfit only.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   00 · TOKENS & PRIMITIVES
   ══════════════════════════════════════════════════════════════ */

.fw-cb-page{
	--pad:28px;
	--sticky:116px;

	--ink:var(--dk-d);
	--paper:var(--wh);
	--paper-2:var(--paper);
	--line:color-mix(in srgb, var(--dk) 9%, transparent);
	--line-soft:color-mix(in srgb, var(--dk) 5.5%, transparent);

	--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
	--sec:clamp(34px, 4vw, 68px);

	--r1:8px; --r2:12px; --r3:16px;

	--ease:cubic-bezier(.22,1,.36,1);
	--ease-soft:cubic-bezier(.16,1,.3,1);

	background:var(--paper);
	-webkit-text-size-adjust:100%
}

.fw-cb{display:block;position:relative}

/* The one layout primitive: width:100% plus the gutter. */
.fw-cb-inner{position:relative;z-index:1;width:100%;padding-inline:var(--pad)}

/* Every SVG is one <use> of a <symbol> printed once in the body. stroke and
   fill are inherited properties, so they cross the <use> shadow boundary —
   one rule styles every icon, and colour is just currentColor. */
.fw-ico{
	width:1em;height:1em;flex-shrink:0;
	fill:none;stroke:currentColor;stroke-width:1.5;
	stroke-linecap:round;stroke-linejoin:round;
	vertical-align:middle;overflow:visible
}
.fw-ico-sprite{position:absolute;width:0;height:0;overflow:hidden}

.fw-cb-eyebrow{display:block;font-size:9.5px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--pk)}
.fw-cb-eyebrow--onDark{color:color-mix(in srgb, var(--wh) 60%, transparent)}

.fw-cb-btn{
	display:inline-flex;align-items:center;gap:9px;
	padding:13px 26px;border-radius:100px;
	font-size:13.5px;font-weight:600;color:var(--wh);
	background:linear-gradient(120deg, var(--pk), var(--pk-d));
	box-shadow:0 12px 28px -12px color-mix(in srgb, var(--pk) 62%, transparent);
	transition:transform .3s var(--ease), box-shadow .3s
}
.fw-cb-btn:hover{color:var(--wh);transform:translateY(-2px);box-shadow:0 18px 34px -14px color-mix(in srgb, var(--pk) 70%, transparent)}
.fw-cb-btn--wh{color:var(--pk-d);background:var(--wh);box-shadow:0 12px 30px -12px color-mix(in srgb, var(--bk) 50%, transparent)}
.fw-cb-btn--wh:hover{color:var(--pk-d)}
.fw-cb-btn--onDark{color:var(--wh);background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--wh) 28%, transparent)}
.fw-cb-btn--onDark:hover{color:var(--ink);background:var(--wh);box-shadow:none}

/* The category pip — one component, used on the lead story and every tile. */
.fw-cb-cat{
	display:inline-flex;align-items:center;gap:7px;
	font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
	color:var(--pk-d);
	transition:color .25s
}
.fw-cb-cat .fw-ico{font-size:14px;color:var(--pk)}
.fw-cb-cat:hover{color:var(--bl-d)}

/* The byline — one component at two sizes. */
.fw-cb-by{display:flex;align-items:center;gap:9px}
.fw-cb-by img{
	width:34px;height:34px;border-radius:50%;object-fit:cover;
	background:var(--g1);box-shadow:0 0 0 1px color-mix(in srgb, var(--dk) 7%, transparent);
	opacity:0;transition:opacity .5s var(--ease-soft)
}
img.lazy-loaded,
img.lazy-error{opacity:1}
.fw-cb-by span{display:flex;flex-direction:column;gap:1px;min-width:0}
.fw-cb-by b{font-size:12.5px;font-weight:600;letter-spacing:-.012em;color:var(--ink);transition:color .25s}
.fw-cb-by small{font-size:11px;color:var(--g5)}
.fw-cb-by--sm img{width:26px;height:26px}
.fw-cb-by--sm b{font-size:11.5px}
.fw-cb-by--sm:hover b{color:var(--bl-d)}

/* ══════════════════════════════════════════════════════════════
   01 · §1 MASTHEAD
   ══════════════════════════════════════════════════════════════ */

.fw-cb-mast{position:relative;padding:clamp(20px,2.4vw,34px) 0 clamp(24px,3vw,42px);background:var(--paper)}
/* Solid brand circles under filter:blur(), drifting on long loops. A flat
   radial wash reads as a tint; a blurred disc has a centre of mass and reads
   as light. overflow:hidden alone would cut each disc dead at the box edge
   and leave a straight seam, so the layer is masked before the clip. */
.fw-cb-mast__fx{
	position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
	-webkit-mask-image:linear-gradient(180deg, transparent, var(--bk) 9%, var(--bk) 64%, transparent);
	        mask-image:linear-gradient(180deg, transparent, var(--bk) 9%, var(--bk) 64%, transparent)
}
.fw-cb-orb{position:absolute;display:block;aspect-ratio:1;border-radius:50%;filter:blur(72px)}
.fw-cb-orb--p{top:-26%;right:3%;width:clamp(240px,26vw,420px);background:var(--arc-2);animation:fwOrbA 21s ease-in-out infinite}
.fw-cb-orb--b{top:20%;right:28%;width:clamp(170px,19vw,310px);background:color-mix(in srgb, var(--bl) 13%, transparent);animation:fwOrbB 26s ease-in-out infinite}
.fw-cb-orb--m{bottom:-28%;right:12%;width:clamp(160px,18vw,290px);background:color-mix(in srgb, var(--mt) 10%, transparent);animation:fwOrbC 24s ease-in-out infinite}
@keyframes fwOrbA{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-38px,30px,0) scale(1.12)}}
@keyframes fwOrbB{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(30px,-26px,0) scale(.9)}}
@keyframes fwOrbC{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-26px,-22px,0) scale(1.13)}}

/* The stagger is the child's position, stated here — nothing in the
   markup carries a delay (no inline CSS, ever). */
@media(prefers-reduced-motion:no-preference){
	.fw-cb-mast__copy > *{animation:fwRise .5s cubic-bezier(.22,1,.36,1) both}
	.fw-cb-mast__copy > *:nth-child(1){animation-delay:60ms}
	.fw-cb-mast__copy > *:nth-child(2){animation-delay:100ms}
	.fw-cb-mast__copy > *:nth-child(3){animation-delay:140ms}
}
@keyframes fwRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* The margin used to sit on the two-column wrapper the search box shared;
   with the search moved into the filter bar the copy is the only child, so
   it carries its own space off the breadcrumb. */
.fw-cb-mast__copy{min-width:0;margin-top:clamp(16px,2vw,26px)}
.fw-cb-kick{
	display:inline-flex;align-items:center;gap:8px;
	padding:6px 14px;border-radius:999px;
	font-size:10px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--bl-d);
	background:linear-gradient(118deg, color-mix(in srgb, var(--bl) 10%, transparent), color-mix(in srgb, var(--pk) 7.5%, transparent));
	box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--bl) 15%, transparent)
}
.fw-cb-kick__ico{font-size:15px;color:var(--pk);stroke-width:1.6}
.fw-cb-mast__title{
	margin:clamp(10px,1.2vw,16px) 0 0;
	font-family:var(--ff);
	font-size:clamp(29px,1.8vw+14px,50px);
	font-weight:600;line-height:1.05;letter-spacing:-.04em;color:var(--bl-d);
	text-wrap:balance
}
.fw-cb-mast__lede{
	margin:clamp(11px,1.2vw,16px) 0 0;
	font-size:clamp(14px,.35vw+13px,16.5px);
	font-weight:400;line-height:1.62;letter-spacing:-.006em;color:var(--g6);
	text-wrap:pretty
}
.fw-cb-mast__lede b{font-weight:600;color:var(--pk-d);font-variant-numeric:tabular-nums}

/* ══════════════════════════════════════════════════════════════
   02 · §2 FILTER BAR
   ══════════════════════════════════════════════════════════════ */

/* The bar was near-white on white and read as a gap between sections rather
   than as a control strip. Two layers now: a faint brand gradient across it
   so it is visibly a band, and a translucent white beneath so the blur still
   has something to lift off the content scrolling under it. A hairline of
   brand colour along the bottom edge fixes where it ends. */
.fw-cb-bar{
	position:sticky;top:var(--sticky);z-index:40;
	background:
		linear-gradient(101deg, color-mix(in srgb, var(--pk) 5.5%, transparent), color-mix(in srgb, var(--bl) 6%, transparent) 52%, color-mix(in srgb, var(--mt) 4.5%, transparent)),
		linear-gradient(180deg, color-mix(in srgb, var(--wh) 94%, transparent), color-mix(in srgb, var(--wh) 88%, transparent));
	-webkit-backdrop-filter:saturate(180%) blur(14px);
	        backdrop-filter:saturate(180%) blur(14px);
	border-top:1px solid var(--line-soft);
	box-shadow:0 1px 0 var(--bl-ring), 0 10px 26px -22px color-mix(in srgb, var(--dk) 50%, transparent)
}
.fw-cb-bar__in{display:flex;align-items:center;gap:clamp(12px,2vw,26px);padding-block:11px}

/* Search takes the space the topic chips used to occupy. The rail already
   lists every topic with its count, and the same six links twice is not a
   filter bar — it is one control rendered in two places. */
/* Half the viewport, with a floor so it never collapses to a stub and a
   ceiling so it stops growing on an ultrawide. The keyword strip takes
   whatever is left between it and sort, so the three stay on one row. */
/* margin:0 is load bearing. The theme sets a bare `form{margin-bottom:30px}`
   (style.css), and this control IS a form — so inside an align-items:center
   row that 30px of margin box sat below the field and lifted the visible
   input about 15px above the sort links beside it. */
.fw-cb-search{flex:0 1 clamp(280px, 50vw, 720px);min-width:0;margin:0}
.sr-only{
	position:absolute;width:1px;height:1px;margin:-1px;padding:0;
	overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0
}
.fw-cb-search__row{
	display:flex;align-items:center;gap:10px;
	padding:5px 5px 5px 13px;border-radius:8px;
	background:var(--wh);
	box-shadow:inset 0 0 0 1px var(--line), 0 1px 2px color-mix(in srgb, var(--dk) 4%, transparent);
	transition:box-shadow .28s
}
.fw-cb-search__row:focus-within{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--bl) 45%, transparent), 0 8px 22px -14px color-mix(in srgb, var(--bl) 60%, transparent)}
.fw-cb-search__row > i{font-size:14px;color:var(--g4)}
.fw-cb-search__row input{
	flex:1;min-width:0;border:0;outline:0;background:transparent;
	font-family:var(--ff);font-size:13.5px;color:var(--ink);padding-block:8px
}
.fw-cb-search__row input::placeholder{color:var(--g4)}
.fw-cb-search__row input::-webkit-search-cancel-button{display:none}
.fw-cb-search__x{
	display:inline-flex;align-items:center;justify-content:center;
	width:26px;height:26px;flex-shrink:0;border-radius:6px;
	font-size:11px;color:var(--g5);background:var(--g1);
	transition:color .25s, background .25s
}
.fw-cb-search__x:hover{color:var(--wh);background:var(--pk-d)}
.fw-cb-search__row button{
	flex-shrink:0;border:0;cursor:pointer;
	padding:9px 17px;border-radius:6px;
	font-family:var(--ff);font-size:12.5px;font-weight:600;color:var(--wh);
	background:linear-gradient(120deg, var(--pk), var(--pk-d));
	transition:transform .25s var(--ease)
}
.fw-cb-search__row button:hover{transform:translateY(-1px)}

/* ── Quick searches ──
   Takes the space between the field and sort. It SHRINKS rather than wraps
   (min-width:0 plus overflow-x) so the three items stay on one row at every
   width instead of the sort control dropping to a second line. */
.fw-cb-kw{
	display:flex;align-items:center;gap:6px;
	/* 0 1 auto, not 1 1 0: the strip is only as wide as its chips and gives
	   the slack to the margin, so it sits beside the field instead of
	   stretching to sort with a fade eating the last chip. */
	flex:0 1 auto;min-width:0;margin:0 auto 0 0;
	padding:0 14px 0 0;list-style:none;
	overflow-x:auto;overflow-y:hidden;
	scrollbar-width:none;-ms-overflow-style:none;
	/* The fade is exactly the padding, so when the chips fit it covers empty
	   space; when they do not it becomes a real scroll hint. */
	-webkit-mask-image:linear-gradient(90deg, var(--bk) calc(100% - 14px), transparent);
	        mask-image:linear-gradient(90deg, var(--bk) calc(100% - 14px), transparent)
}
.fw-cb-kw::-webkit-scrollbar{display:none}
.fw-cb-kw li{flex:0 0 auto}
.fw-cb-kw__lbl{
	font-size:9.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
	color:var(--g4);padding-right:2px
}
.fw-cb-kw a{
	display:inline-block;white-space:nowrap;
	padding:6px 12px;border-radius:7px;
	font-size:12px;font-weight:500;color:var(--g6);
	background:color-mix(in srgb, var(--wh) 70%, transparent);
	box-shadow:inset 0 0 0 1px var(--line);
	transition:color .25s, background .25s, box-shadow .25s
}
.fw-cb-kw a:hover{color:var(--bl-d);background:var(--wh);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--bl) 30%, transparent)}
.fw-cb-kw a.is-on{color:var(--wh);font-weight:600;background:var(--pk-d);box-shadow:none}

.fw-cb-sort{display:flex;align-items:center;gap:3px;flex-shrink:0}
.fw-cb-sort > span{
	margin-right:5px;
	font-size:9.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--g4)
}
.fw-cb-sort__o{
	padding:7px 12px;border-radius:100px;
	font-size:12px;font-weight:500;color:var(--g5);
	transition:color .25s, background .25s
}
.fw-cb-sort__o:hover{color:var(--ink);background:var(--g1)}
.fw-cb-sort__o.is-on{color:var(--pk-d);font-weight:600;background:var(--pk-l)}

/* ══════════════════════════════════════════════════════════════
   03 · LAYOUT
   The article column carries NO max-width. The 7:3 ratio is the measure —
   the same decision the service and category pages make, and the reason
   the rail beside it is load bearing rather than decorative.
   ══════════════════════════════════════════════════════════════ */

.fw-cb-body{padding:var(--sec) 0}
.fw-cb-layout{
	display:grid;grid-template-columns:minmax(0,7fr) minmax(272px,3fr);
	gap:clamp(24px,3.4vw,64px);align-items:start
}
.fw-cb-main{min-width:0}

/* ══════════════════════════════════════════════════════════════
   04 · ACTIVE FILTERS
   ══════════════════════════════════════════════════════════════ */

.fw-cb-active{
	display:flex;align-items:center;flex-wrap:wrap;gap:8px;
	margin-bottom:clamp(16px,2vw,26px);padding-bottom:clamp(14px,1.8vw,20px);
	border-bottom:1px solid var(--line-soft)
}
.fw-cb-active__lbl{font-size:9.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--g5)}
.fw-cb-active__pill{
	display:inline-flex;align-items:center;gap:8px;
	padding:6px 12px;border-radius:100px;
	font-size:12px;font-weight:600;color:var(--pk-d);background:var(--pk-l);
	box-shadow:inset 0 0 0 1px var(--pk-ring);
	transition:color .25s, background .25s
}
.fw-cb-active__pill i{font-size:13px;opacity:.7}
.fw-cb-active__pill:hover{color:var(--wh);background:var(--pk-d)}

/* ══════════════════════════════════════════════════════════════
   05 · §3 LEAD STORY
   Same component as a grid tile, laid on its side and given room. One
   markup shape, two CSS treatments — never a second block of HTML.
   ══════════════════════════════════════════════════════════════ */

.fw-cb-lead{
	display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
	gap:clamp(18px,2.4vw,40px);align-items:center;
	margin-bottom:clamp(24px,3vw,44px);padding-bottom:clamp(22px,2.8vw,38px);
	border-bottom:1px solid var(--line)
}
.fw-cb-lead__img{
	position:relative;display:block;
	aspect-ratio:16/10;border-radius:var(--r3);overflow:hidden;
	background:linear-gradient(160deg, var(--g1), var(--g2))
}
/* The `img.` prefix is load bearing: it has to out-specify the theme's
   `img.lazy{max-width:100%}`, and vanilla-lazyload KEEPS .lazy when it adds
   .lazy-loaded — a lower-specificity reveal loses, and the picture loads
   perfectly and then sits at opacity:0 with no error anywhere. */
.fw-cb-lead__img img,
.fw-cb-card__img img{
	position:absolute;inset:0;
	width:100%!important;height:100%!important;
	max-width:none!important;max-height:none!important;
	object-fit:cover!important;
	opacity:0;transition:opacity .55s var(--ease-soft), transform .7s var(--ease-soft)
}
.fw-cb-lead__img:hover img,
.fw-cb-card__img:hover img{transform:scale(1.05)}
/* The reveal has to be re-stated HERE. The shared `img.lazy-loaded` rule near
   the byline is exactly as specific as the hide above and comes earlier, so on
   its own it loses: every cover loaded and then stayed at opacity:0. */
.fw-cb-lead__img img.lazy-loaded,
.fw-cb-card__img img.lazy-loaded,
.fw-cb-lead__img img.lazy-error,
.fw-cb-card__img img.lazy-error{opacity:1}
.fw-cb-lead__flag{
	position:absolute;left:12px;top:12px;
	padding:6px 13px;border-radius:100px;
	font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--wh);
	background:linear-gradient(120deg, var(--pk), var(--pk-d));
	box-shadow:0 8px 20px -8px color-mix(in srgb, var(--pk) 75%, transparent)
}
.fw-cb-lead__body{min-width:0}
.fw-cb-lead__t{
	margin:var(--s3) 0 0;
	font-size:clamp(21px,1.3vw+10px,34px);
	font-weight:600;line-height:1.14;letter-spacing:-.035em;
	text-wrap:balance
}
.fw-cb-lead__t a{color:var(--bl-d);transition:color .25s}
.fw-cb-lead__t a:hover{color:var(--pk-d)}
.fw-cb-lead__d{
	margin:var(--s3) 0 0;
	font-size:14.5px;line-height:1.62;color:var(--g6);
	text-wrap:pretty
}
.fw-cb-lead .fw-cb-by{margin-top:clamp(14px,1.8vw,22px)}

/* ══════════════════════════════════════════════════════════════
   06 · §4 THE GRID
   Ruled into a matrix by each cell rather than by gaps showing a coloured
   container through: the last page rarely holds a multiple of three, and a
   gap-drawn grid renders the empty cells as a grey block.
   ══════════════════════════════════════════════════════════════ */

/* ── Fading dividers ──
   A hairline that runs the full height of a cell and stops dead reads as a
   table border. Fading it out at both ends reads as a separation instead,
   which is the whole difference between an editorial index and a grid of
   boxes. Gradients, not borders, because a border cannot fade.

   The row rules are drawn TWICE on purpose: once per cell, and once on the
   container. The last page rarely holds a multiple of three, and a per-cell
   rule under a row of two stops a third of the way across, leaving the very
   gap this is meant to close. The container's rule spans the full width
   whatever the row holds; where both land on the same pixel they render as
   one line. */
.fw-cb-grid{
	position:relative;
	display:grid;grid-template-columns:repeat(3, minmax(0,1fr));
	margin:0;padding:0;list-style:none
}
.fw-cb-grid::before,
.fw-cb-grid::after{
	content:'';position:absolute;left:0;right:0;height:1px;pointer-events:none;
	background:linear-gradient(90deg, transparent, var(--line) 7%, var(--line) 93%, transparent)
}
.fw-cb-grid::before{top:0}
.fw-cb-grid::after{bottom:0}

.fw-cb-grid > li{position:relative;background:var(--paper);min-width:0}
/* between the columns */
.fw-cb-grid > li::after{
	content:'';position:absolute;top:9%;bottom:9%;right:0;width:1px;pointer-events:none;
	background:linear-gradient(180deg, transparent, var(--line) 20%, var(--line) 80%, transparent)
}
/* between the rows */
.fw-cb-grid > li::before{
	content:'';position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
	background:linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent)
}
/* The last cell of a row has nothing to its right to divide from. */
.fw-cb-grid > li:nth-child(3n)::after{display:none}
.fw-cb-grid > li > article{
	display:flex;flex-direction:column;height:100%;
	padding:clamp(13px,1.3vw,18px);
	transition:background .3s
}
.fw-cb-grid > li:hover > article{background:linear-gradient(180deg, color-mix(in srgb, var(--bl) 5%, transparent), color-mix(in srgb, var(--pk) 2.8%, transparent))}
.fw-cb-card__img{
	position:relative;display:block;
	aspect-ratio:16/10;border-radius:var(--r2);overflow:hidden;
	background:linear-gradient(160deg, var(--g1), var(--g2))
}
.fw-cb-card__body{display:flex;flex-direction:column;flex:1;padding-top:13px}
.fw-cb-card__t{
	margin:9px 0 0;
	font-size:clamp(15px,1vw,17.5px);font-weight:600;line-height:1.28;letter-spacing:-.025em
}
.fw-cb-card__t a{color:var(--ink);transition:color .25s}
.fw-cb-grid > li:hover .fw-cb-card__t a{color:var(--bl-d)}
.fw-cb-card__d{
	margin:8px 0 0;
	font-size:13px;line-height:1.58;color:var(--g6);
	display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden
}
.fw-cb-card__foot{
	display:flex;align-items:center;justify-content:space-between;gap:10px;
	margin-top:auto;padding-top:14px
}
.fw-cb-card__meta{flex-shrink:0;font-size:11px;color:var(--g5);font-variant-numeric:tabular-nums}

/* ══════════════════════════════════════════════════════════════
   07 · §5 PAGER
   First · Prev · a window around the current page with page 1 and the last
   page always reachable behind an ellipsis · Next · Last. The window and
   the gaps are computed in PHP (fw_blog_pages), so this is a flat loop of
   two shapes rather than a nest of conditionals in the markup.
   ══════════════════════════════════════════════════════════════ */

.fw-cb-pager-wrap{
	display:flex;flex-direction:column;align-items:center;gap:var(--s4);
	margin-top:clamp(24px,3vw,44px);padding-top:clamp(20px,2.6vw,34px);
	border-top:1px solid var(--line)
}
.fw-cb-pager__meta{margin:0;font-size:12.5px;color:var(--g5)}
.fw-cb-pager__meta strong{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}

.fw-cb-pager{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:6px}
.fw-cb-pager__n{display:flex;align-items:center;gap:6px;margin:0;padding:0;list-style:none}

/* One class for a link, a current page and a step button — the differences
   are modifiers, so a pager item can never be styled two ways by accident. */
.fw-cb-pg{
	display:inline-flex;align-items:center;justify-content:center;gap:7px;
	min-width:40px;height:40px;padding-inline:12px;
	border-radius:100px;
	font-size:13px;font-weight:600;color:var(--g6);
	font-variant-numeric:tabular-nums;
	box-shadow:inset 0 0 0 1px var(--line);
	transition:color .25s, background .25s, box-shadow .25s, transform .25s var(--ease)
}
.fw-cb-pg:hover{
	color:var(--bl-d);background:var(--bl-bg);
	box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--bl) 28%, transparent);
	transform:translateY(-1px)
}
.fw-cb-pg.is-current{
	color:var(--wh);background:var(--ink);
	box-shadow:0 8px 18px -8px color-mix(in srgb, var(--dk-d) 65%, transparent)
}
.fw-cb-pg--step span{font-size:12.5px}
.fw-cb-pg--edge{padding-inline:0;color:var(--g4)}
.fw-cb-pg i{font-size:11px}
.fw-cb-gap{
	display:inline-flex;align-items:flex-end;justify-content:center;
	min-width:24px;height:40px;padding-bottom:9px;
	color:var(--g3);letter-spacing:.06em
}

/* ══════════════════════════════════════════════════════════════
   08 · §6 RAIL
   Ruled, not carded, per the standing rule: hairlines and a hover tint, no
   box, no shadow, no background panel.
   ══════════════════════════════════════════════════════════════ */

/* No position:sticky here — the theia plugin owns the pinning now
   (.sticky-sidebar-wrap / .sticky-sidebar in the markup). Leaving a
   CSS sticky on the same element fights it: the plugin sets inline
   transforms on the inner div while the outer one is also stuck. */
.fw-cb-rail{min-width:0}
.fw-cb-rail__in{display:flex;flex-direction:column;gap:clamp(20px,2.6vw,34px)}
.fw-cb-rail__lbl{
	display:flex;align-items:center;gap:10px;margin-bottom:var(--s3);
	font-size:9.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--g5)
}
.fw-cb-rail__lbl::after{
	content:'';flex:1;height:1px;
	background:linear-gradient(90deg, var(--pk), var(--pk-t2) 60%, transparent)
}
.fw-cb-rail__list{margin:0;padding:0;list-style:none;border-top:1px solid var(--line-soft)}
.fw-cb-rail__list li{border-bottom:1px solid var(--line-soft)}
.fw-cb-rail__list a{
	display:flex;align-items:center;gap:11px;
	padding:10px 8px;margin-inline:-8px;border-radius:var(--r1);
	transition:background .25s, transform .3s var(--ease);
	-webkit-tap-highlight-color:transparent
}
.fw-cb-rail__list a:hover{background:color-mix(in srgb, var(--bl) 4.5%, transparent);transform:translateX(3px)}
.fw-cb-rail__list .fw-ico{font-size:18px;color:var(--bl);transition:color .25s}
.fw-cb-rail__list a > span{flex:1;min-width:0;font-size:13.5px;font-weight:500;color:var(--ink);transition:color .25s}
.fw-cb-rail__list a > b{
	flex-shrink:0;font-size:11px;font-weight:600;color:var(--g4);
	font-variant-numeric:tabular-nums;transition:color .25s
}
.fw-cb-rail__list a:hover > span,
.fw-cb-rail__list a:hover .fw-ico{color:var(--bl-d)}
.fw-cb-rail__list a:hover > b{color:var(--pk)}
.fw-cb-rail__list a.is-on > span{color:var(--pk-d);font-weight:600}
.fw-cb-rail__list a.is-on > b{color:var(--pk)}
.fw-cb-rail__list a.is-on .fw-ico{color:var(--pk)}

/* ── Archive ──
   Grouped by year: a year headline with its total, then its months. The
   month's mark is its season, tinted to match — a column of month names
   reads as a year turning rather than as a list of links. */
.fw-cb-yr + .fw-cb-yr{margin-top:var(--s3)}
.fw-cb-yr__head{
	display:flex;align-items:center;gap:10px;
	padding:6px 0;cursor:pointer;list-style:none;
	-webkit-tap-highlight-color:transparent
}
/* Both are needed: WebKit uses the pseudo-element, everyone else honours
   list-style on the summary itself. */
.fw-cb-yr__head::-webkit-details-marker{display:none}
.fw-cb-yr__head::marker{content:''}
.fw-cb-yr__chev{
	flex-shrink:0;font-size:10px;color:var(--g4);
	transition:transform .3s var(--ease), color .25s
}
.fw-cb-yr[open] > .fw-cb-yr__head .fw-cb-yr__chev{transform:rotate(180deg)}
.fw-cb-yr__head:hover .fw-cb-yr__chev,
.fw-cb-yr__head:hover b{color:var(--pk-d)}
.fw-cb-yr__head b{transition:color .25s}
.fw-cb-yr__head b{
	font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink);
	font-variant-numeric:tabular-nums
}
.fw-cb-yr__rule{flex:1;height:1px;background:linear-gradient(90deg, var(--line), transparent)}
.fw-cb-yr__head small{font-size:10.5px;color:var(--g4);font-variant-numeric:tabular-nums}
.fw-cb-yr__m{margin:var(--s2) 0 0;padding:0;list-style:none}
.fw-cb-yr__m li + li{border-top:1px solid var(--line-soft)}
.fw-cb-yr__m a{
	display:flex;align-items:center;gap:10px;
	padding:8px;margin-inline:-8px;border-radius:var(--r1);
	transition:background .25s, transform .3s var(--ease);
	-webkit-tap-highlight-color:transparent
}
.fw-cb-yr__m a:hover{background:color-mix(in srgb, var(--bl) 4.5%, transparent);transform:translateX(3px)}
.fw-cb-yr__m a > span{flex:1;min-width:0;font-size:13px;font-weight:500;color:var(--g6);transition:color .25s}
.fw-cb-yr__m a > b{
	flex-shrink:0;font-size:10.5px;font-weight:600;color:var(--g4);
	font-variant-numeric:tabular-nums;transition:color .25s
}
.fw-cb-yr__m a:hover > span{color:var(--ink)}
.fw-cb-yr__m a:hover > b{color:var(--pk)}
.fw-cb-yr__m a.is-on > span{color:var(--pk-d);font-weight:600}
.fw-cb-yr__m a.is-on > b{color:var(--pk)}

/* The season is the only colour on the rail that is not brand blue or pink,
   and that is the point: it is a property of the month, not a state. */
.fw-cb-yr__ico{
	box-sizing:content-box;
	width:15px;height:15px;padding:6px;border-radius:9px;
	font-size:15px;
	transition:transform .3s var(--ease)
}
.fw-cb-yr__m a:hover .fw-cb-yr__ico{transform:rotate(-8deg) scale(1.06)}
.fw-cb-yr__ico--winter{color:var(--bl-2);background:color-mix(in srgb, var(--bl-2) 10%, transparent)}
.fw-cb-yr__ico--spring{color:var(--mt);background:color-mix(in srgb, var(--mt) 13%, transparent)}
.fw-cb-yr__ico--summer{color:var(--go-2);background:color-mix(in srgb, var(--go-2) 13%, transparent)}
.fw-cb-yr__ico--autumn{color:var(--co-2);background:color-mix(in srgb, var(--co-2) 12%, transparent)}

.fw-cb-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.fw-cb-tags a,.fw-cb-tags__a{
	display:inline-flex;align-items:baseline;gap:6px;
	padding:6px 11px;border-radius:100px;
	font-size:11.5px;font-weight:500;color:var(--g6);
	box-shadow:inset 0 0 0 1px var(--line);
	transition:color .25s, background .25s, box-shadow .25s
}
.fw-cb-tags a em,.fw-cb-tags__a em{font-style:normal;font-size:9.5px;color:var(--g4);font-variant-numeric:tabular-nums}
.fw-cb-tags a:hover{color:var(--bl-d);background:var(--bl-bg);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--bl) 22%, transparent)}
.fw-cb-tags a.is-on{color:var(--wh);font-weight:600;background:var(--pk-d);box-shadow:none}
.fw-cb-tags a.is-on em{color:color-mix(in srgb, var(--wh) 70%, transparent)}

/* ══════════════════════════════════════════════════════════════
   09 · EMPTY STATE
   ══════════════════════════════════════════════════════════════ */

.fw-cb-empty{
	display:flex;flex-direction:column;align-items:flex-start;
	padding:clamp(28px,4vw,64px) 0;
	border-block:1px solid var(--line)
}
.fw-cb-empty__ico{
	font-size:34px;color:var(--pk);
	padding:14px;border-radius:16px;background:var(--pk-l);
	box-sizing:content-box;width:34px;height:34px;
	box-shadow:inset 0 0 0 1px var(--pk-t2)
}
.fw-cb-empty h2{
	margin:var(--s4) 0 0;
	font-size:clamp(20px,1.3vw+8px,28px);font-weight:600;letter-spacing:-.03em;color:var(--bl-d)
}
.fw-cb-empty p{
	margin:var(--s3) 0 0;
	font-size:14.5px;line-height:1.62;color:var(--g6)
}
.fw-cb-empty .fw-cb-btn{margin-top:var(--s5)}

/* ══════════════════════════════════════════════════════════════
   10 · §7 CLOSING BAND
   ══════════════════════════════════════════════════════════════ */

.fw-cb-close{
	position:relative;overflow:hidden;
	padding:clamp(38px,4.6vw,80px) 0;
	background:linear-gradient(140deg, var(--dk-d), var(--dk-b) 46%, var(--dk-p))
}
.fw-cb-close__aura{
	position:absolute;top:-32%;right:-8%;width:min(56vw,600px);aspect-ratio:1;
	border-radius:50%;pointer-events:none;
	background:radial-gradient(circle, var(--ua-ac-edge), transparent 66%);
	animation:fwBreath 9s ease-in-out infinite
}
@keyframes fwBreath{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.1);opacity:1}}
.fw-cb-close__inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,5fr);gap:clamp(22px,3vw,58px);align-items:end}
.fw-cb-close__title{
	margin:var(--s3) 0 0;
	font-size:clamp(25px,1.6vw+12px,44px);font-weight:600;line-height:1.06;letter-spacing:-.04em;color:var(--wh);
	text-wrap:balance
}
.fw-cb-close__sub{
	margin:0;
	font-size:clamp(14.5px,1.15vw,17px);font-weight:300;line-height:1.62;color:color-mix(in srgb, var(--wh) 68%, transparent);
	text-wrap:pretty
}
.fw-cb-close__btns{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:clamp(20px,2.4vw,30px)}

/* ══════════════════════════════════════════════════════════════
   11 · RESPONSIVE — mode switches only
   ══════════════════════════════════════════════════════════════ */

@media(max-width:1180px){
	/* Below this the field, the keywords and sort cannot share a row without
	   the keywords becoming two visible chips and a fade. The field and sort
	   are the controls; the keywords are a convenience, so they go first. */
	.fw-cb-kw{display:none}
	.fw-cb-search{flex:1 1 auto}

	.fw-cb-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
	.fw-cb-grid > li:nth-child(3n)::after{display:block}
	.fw-cb-grid > li:nth-child(2n)::after{display:none}
}

@media(max-width:1024px){
	/* The house gutter on mobile — the same 14px the header drops to. */
	.fw-cb-page{--pad:14px}

	/* The rail stops being a column and stops being sticky: in a single
	   column flow it would just occupy the screen without ever being beside
	   what you are reading. */
	.fw-cb-layout{grid-template-columns:minmax(0,1fr);gap:clamp(28px,5vw,40px)}
	.fw-cb-rail__in{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:clamp(18px,3vw,30px)}

	.fw-cb-lead{grid-template-columns:minmax(0,1fr);gap:var(--s4)}

	.fw-cb-orb--m{display:none}
	.fw-cb-orb{filter:blur(52px)}

	.fw-cb-close__inner{grid-template-columns:minmax(0,1fr);row-gap:var(--s6)}
}

@media(max-width:768px){
	/* The bar stacks: the search field keeps the full width, and sort sits
	   under it rather than squeezing the input to a stub. */
	.fw-cb-bar__in{flex-direction:column;align-items:stretch;gap:9px;padding-block:10px}
	/* flex-basis follows the MAIN axis, and the bar's main axis is now
	   vertical — the desktop `flex:0 1 clamp(260px,30vw,520px)` would set a
	   260-520px TALL search box. Reset it and let the stretch do the work. */
	.fw-cb-search{flex:0 0 auto;width:100%}
	.fw-cb-sort{overflow-x:auto;scrollbar-width:none}
	.fw-cb-sort::-webkit-scrollbar{display:none}

	.fw-cb-rail__in{grid-template-columns:minmax(0,1fr)}
	.fw-cb-close__btns .fw-cb-btn{flex:1 1 100%}

	/* One column of tiles, each turned on its side. A stacked 16:10 picture
	   over three lines of blurb makes every post a full screen. */
	.fw-cb-grid{grid-template-columns:minmax(0,1fr)}
	/* One column: nothing sits beside anything. */
	.fw-cb-grid > li::after{display:none}
	.fw-cb-grid > li > article{
		display:grid;grid-template-columns:118px minmax(0,1fr);
		column-gap:14px;padding:12px 10px
	}
	.fw-cb-card__img{aspect-ratio:1}
	.fw-cb-card__body{padding-top:0}
	/* align-self:start is the fix, not the clamp. As a grid item the blurb
	   stretches to the row height, and -webkit-line-clamp then sizes to two
	   lines while overflow:hidden clips at the STRETCHED height — so a third
	   line appears, sliced through the middle. */
	.fw-cb-card__d{-webkit-line-clamp:2;align-self:start}
	.fw-cb-card__foot{padding-top:10px}
}

@media(max-width:480px){
	.fw-cb-pg--step span{display:none}
	.fw-cb-pg--step{min-width:40px;padding-inline:0}
	.fw-cb-lead__img{aspect-ratio:4/3}
	.fw-cb-grid > li > article{grid-template-columns:96px minmax(0,1fr);column-gap:12px}
	.fw-cb-search__row button{padding-inline:16px}
}

/* ══════════════════════════════════════════════════════════════
   TOUCH · MOTION · FOCUS
   ══════════════════════════════════════════════════════════════ */

/* A :hover transform latches after a tap on a touch screen. Strip the
   movement; the colour changes still read as feedback. */
@media(hover:none){
	.fw-cb-btn:hover,
	.fw-cb-pg:hover,
	.fw-cb-rail__list a:hover{transform:none}
	.fw-cb-lead__img:hover img,
	.fw-cb-card__img:hover img{transform:none}
}

@media(prefers-reduced-motion:reduce){
	.fw-cb-page *,
	.fw-cb-page *::before,
	.fw-cb-page *::after{
		animation-duration:.01ms!important;
		animation-iteration-count:1!important;
		transition-duration:.01ms!important;
		scroll-behavior:auto!important
	}
	.fw-cb-lead__img img,
	.fw-cb-card__img img,
	.fw-cb-by img{opacity:1}
	.fw-cb-orb,
	.fw-cb-close__aura{animation:none}
}

/* custom/js/core.js scrolls in-page links with scrollIntoView, which honours
   scroll-margin-top — the single place the sticky offset is recorded. */
.fw-cb [id]{scroll-margin-top:calc(var(--sticky) + 96px)}

.fw-cb-page a:focus-visible,
.fw-cb-page button:focus-visible,
.fw-cb-page input:focus-visible{outline:2px solid var(--bl);outline-offset:3px;border-radius:8px}

/* ══════════════════════════════════════════════════════════════
   12 · LOAD MORE  (and the skeletons it draws while loading)
   ══════════════════════════════════════════════════════════════ */

.fw-cb-more{display:flex;justify-content:center;margin-top:clamp(18px,2.2vw,28px)}
.fw-cb-more__btn{
	position:relative;overflow:hidden;
	display:inline-flex;align-items:center;gap:10px;
	padding:14px 30px;border:0;cursor:pointer;border-radius:100px;
	font-family:var(--ff);font-size:13.5px;font-weight:600;letter-spacing:.01em;
	color:var(--ink);background:var(--wh);
	box-shadow:inset 0 0 0 1px var(--line), 0 10px 26px -18px color-mix(in srgb, var(--dk) 55%, transparent);
	transition:color .3s, box-shadow .3s, transform .3s var(--ease)
}
.fw-cb-more__btn:hover{
	color:var(--bl-d);transform:translateY(-2px);
	box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--bl) 30%, transparent), 0 16px 30px -18px color-mix(in srgb, var(--bl) 70%, transparent)
}
/* A brand sheen that sweeps across on hover. It sits under the label via
   z-index rather than opacity, so the text never dims with it. */
.fw-cb-more__glow{
	position:absolute;inset:0;z-index:0;pointer-events:none;
	background:linear-gradient(101deg, color-mix(in srgb, var(--pk) 10%, transparent), color-mix(in srgb, var(--bl) 12%, transparent) 52%, color-mix(in srgb, var(--mt) 9%, transparent));
	opacity:0;transition:opacity .35s
}
.fw-cb-more__btn:hover .fw-cb-more__glow{opacity:1}
.fw-cb-more__label{position:relative;z-index:1}

.fw-cb-more__spin{
	position:relative;z-index:1;
	width:15px;height:15px;border-radius:50%;
	border:2px solid color-mix(in srgb, var(--bl) 25%, transparent);border-top-color:var(--bl);
	display:none
}
.fw-cb-more__btn.is-loading{cursor:progress;color:var(--g5);transform:none}
.fw-cb-more__btn.is-loading .fw-cb-more__spin{display:block;animation:fwSpin .7s linear infinite}
@keyframes fwSpin{to{transform:rotate(360deg)}}

/* ── Skeletons ──
   Cloned into the grid while a page is in flight so its height does not
   collapse and the footer does not jump up to meet the button. They are the
   same cell as a real tile, which is what keeps the rhythm identical. */
.fw-cb-skel > article{
	display:flex;flex-direction:column;height:100%;
	padding:clamp(13px,1.3vw,18px)
}
.fw-cb-skel .fw-cb-card__img{
	display:block;aspect-ratio:16/10;border-radius:var(--r2);
	background:var(--g1)
}
.fw-cb-skel__l{
	display:block;height:10px;margin-top:11px;border-radius:5px;
	background:var(--g1)
}
.fw-cb-skel__l--cat{width:38%;height:8px}
.fw-cb-skel__l--t{width:92%;height:13px;margin-top:13px}
.fw-cb-skel__l--t2{width:64%;height:13px;margin-top:7px}
.fw-cb-skel__l--foot{width:52%;margin-top:16px}
@media(prefers-reduced-motion:no-preference){
	.fw-cb-skel .fw-cb-card__img,
	.fw-cb-skel__l{
		background:linear-gradient(100deg, var(--g1) 30%, var(--g0) 50%, var(--g1) 70%);
		background-size:220% 100%;
		animation:fwShimmer 1.4s linear infinite
	}
}
@keyframes fwShimmer{from{background-position:150% 0}to{background-position:-50% 0}}

/* Appended tiles announce themselves once. `backwards`, not `both`: `both`
   would leave the final keyframe's transform applied and kill the hover
   scale on the card image underneath. */
@media(prefers-reduced-motion:no-preference){
	.fw-cb-grid > li.is-new{animation:fwRise .45s cubic-bezier(.22,1,.36,1) backwards}
}

/* ══════════════════════════════════════════════════════════════
   99 · NEWSROOM IDENTITY
   Owner, 1 Oct 2026: built on the blog, but "don't make it identical".
   The blog is blue titles with pink accents; the newsroom is dark titles
   with blue accents (pink is remapped to blue inside <main> only, so the
   site header and footer keep theirs), a latest headlines list in the
   masthead, a date badge on every photograph, a wide lead story with its
   words in two columns underneath, and a blue closing band.
   ══════════════════════════════════════════════════════════════ */
.fw-cb{
	--pk:var(--bl);--pk-d:var(--bl-d);--pk-l:var(--bl-l);--pk-l3:var(--bl-l);
	--pk-ring:var(--bl-ring);--pk-t2:var(--bl-t);--arc-2:color-mix(in srgb, var(--bl) 16%, transparent)
}
.fw-cb .fw-cb-mast__title{color:var(--ink)}
.fw-cb .fw-cb-lead__t a,
.fw-cb .fw-cb-card__t a{color:var(--ink)}
.fw-cb .fw-cb-lead__t a:hover,
.fw-cb .fw-cb-grid > li:hover .fw-cb-card__t a{color:var(--bl-d)}

/* Masthead: the words left, the latest headlines right. */
.fw-cb-mast__grid{display:grid;grid-template-columns:minmax(0, 1.25fr) minmax(0, .75fr);gap:clamp(24px, 4vw, 72px);align-items:end}
.fw-cb-mast__grid .fw-cb-mast__copy{margin-top:clamp(16px,2vw,26px)}
.fw-cb-heads{position:relative;z-index:1;padding-left:clamp(18px, 2vw, 30px);border-left:2px solid var(--bl-ring)}
.fw-cb-heads__lbl{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--bl-d)}
.fw-cb-heads__lbl i{width:8px;height:8px;border-radius:50%;background:var(--mt);box-shadow:0 0 0 4px color-mix(in srgb, var(--mt) 20%, transparent);animation:fwBreath 2.4s ease-in-out infinite}
.fw-cb-heads ol{margin:0;padding:0;list-style:none}
.fw-cb-heads li + li{border-top:1px solid var(--line-soft)}
.fw-cb-heads a{display:grid;grid-template-columns:44px minmax(0, 1fr);align-items:center;gap:12px;padding:9px 0;color:inherit}
.fw-cb-heads__date{display:grid;place-items:center;align-content:center;width:44px;height:44px;border-radius:12px;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.1;color:var(--bl-d);background:var(--bl-l)}
.fw-cb-heads__date b{font-size:17px;font-weight:700;letter-spacing:0}
.fw-cb-heads__t{display:grid;gap:1px;min-width:0;font-size:14px;font-weight:600;line-height:1.3;color:var(--ink);transition:color .2s}
.fw-cb-heads__t small{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--g5)}
.fw-cb-heads a:hover .fw-cb-heads__t{color:var(--bl-d)}

/* A date badge on every photograph. */
.fw-cb-date{position:absolute;right:12px;bottom:12px;z-index:1;display:grid;place-items:center;align-content:center;min-width:52px;padding:6px 8px;border-radius:12px;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;line-height:1.15;color:var(--ink);background:var(--wh);box-shadow:0 8px 20px -10px color-mix(in srgb, var(--dk) 45%, transparent)}
.fw-cb-date b{font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--bl-d)}
.fw-cb-card__img{position:relative}

/* The lead runs the full column: a wide photograph, then the headline
   left and the summary and byline right. */
.fw-cb .fw-cb-lead{grid-template-columns:minmax(0, 1fr);row-gap:clamp(16px, 2vw, 24px)}
.fw-cb .fw-cb-lead__img{aspect-ratio:21/9}
.fw-cb .fw-cb-lead__img img{object-position:center 4%!important}
.fw-cb .fw-cb-lead__body{display:grid;grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr);gap:clamp(18px, 3vw, 48px);align-items:start}
.fw-cb .fw-cb-lead__side{display:grid;gap:14px}
.fw-cb .fw-cb-lead__d{margin-top:0}
.fw-cb .fw-cb-lead .fw-cb-by{margin-top:0}

/* A blue closing band, where the blog's is dark. */
/* A light closing band with ink words, where the blog's is dark. Not
   blue either: the footer's blue "Ready to start" band follows straight
   after, and two blue bands read as one. */
.fw-cb .fw-cb-close{background:radial-gradient(60% 120% at 100% 0%, color-mix(in srgb, var(--bl) 14%, transparent), transparent 70%),radial-gradient(50% 100% at 0% 100%, color-mix(in srgb, var(--mt) 10%, transparent), transparent 70%),var(--bl-wash)}
.fw-cb .fw-cb-close::before{content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;height:1px;background:linear-gradient(90deg, transparent, var(--bl-ring) 12%, var(--bl-ring) 88%, transparent)}
.fw-cb .fw-cb-close__aura{display:none}
.fw-cb .fw-cb-close__title{color:var(--ink)}
.fw-cb .fw-cb-close__sub{color:var(--g6);font-weight:400}
.fw-cb .fw-cb-eyebrow--onDark{color:var(--bl-d)}
.fw-cb .fw-cb-btn--wh{color:var(--wh);background:linear-gradient(120deg, var(--bl), var(--bl-d));box-shadow:0 14px 30px -14px var(--bl)}
.fw-cb .fw-cb-btn--wh:hover{color:var(--wh)}
.fw-cb .fw-cb-btn--onDark{color:var(--ink);background:var(--wh);box-shadow:inset 0 0 0 1px var(--line)}
.fw-cb .fw-cb-btn--onDark:hover{color:var(--bl-d);background:var(--wh);box-shadow:inset 0 0 0 1px var(--bl-ring)}

@media(max-width:1024px){
	.fw-cb-mast__grid{grid-template-columns:minmax(0, 1fr)}
	.fw-cb-heads{padding-left:0;border-left:0}
	.fw-cb .fw-cb-lead__body{grid-template-columns:minmax(0, 1fr)}
	.fw-cb .fw-cb-lead__img{aspect-ratio:16/10}
}
@media(max-width:768px){
	.fw-cb-heads{display:none}
	.fw-cb-card__img .fw-cb-date{right:6px;bottom:6px;min-width:0;padding:3px 6px;border-radius:8px;font-size:8.5px}
	.fw-cb-card__img .fw-cb-date b{font-size:13px}
}