/* ==========================================================================
   The long-form article layout: breadcrumbs, title, content column and the
   sticky contents rail. Also the author archive, which reuses the same
   typography. Rich text, tables, FAQ and the signature come from main.css.
   ========================================================================== */

.cb-entry { padding-block: 48px 80px; }

/* --- Breadcrumbs ---------------------------------------------------------- */

.cb-trail {
	margin-bottom: 20px;
	font-size: 13px;
	line-height: 20px;
	color: var(--cb-muted);
}

.cb-trail__list { display: flex; flex-wrap: wrap; gap: 6px; }

.cb-trail__item + .cb-trail__item::before {
	content: '/';
	margin-right: 6px;
	color: var(--cb-line);
}

.cb-trail a { transition: color .18s ease; }
.cb-trail a:hover { color: var(--cb-blue); text-decoration: underline; text-underline-offset: 3px; }
.cb-trail [aria-current="page"] { color: var(--cb-ink); font-weight: 600; }

/* --- Kicker and fact chips -------------------------------------------------
   Each fact carries its own icon in its own box, so the row reads as a set of
   properties rather than one long sentence. */

.cb-entry__kicker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }

.cb-entry__term {
	display: inline-flex;
	align-items: center;
	padding: 7px 18px;
	border-radius: 100px;
	background: var(--cb-blue);
	color: var(--cb-white);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .6px;
	text-transform: uppercase;
	transition: background-color .18s ease;
}

.cb-entry__term:hover { background: var(--cb-blue-2); }

/* One quiet strip between two hairlines: each fact is an icon tile, a small label
   and a value, divided by a thin rule rather than boxed into its own pill. */
.cb-facts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 0;
	margin-top: 28px;
	padding-block: 16px;
	border-block: 1px solid var(--cb-line);
}

.cb-fact {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-inline: 24px;
	border-left: 1px solid var(--cb-line);
}

.cb-fact:first-child { padding-left: 0; border-left: 0; }

.cb-fact__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 36px;
	height: 36px;
	overflow: hidden;
	border-radius: 10px;
	background: #E6F9FC;
	color: var(--cb-blue);
}

.cb-fact__icon svg { width: 18px; height: 18px; }

/* The author carries a face instead of a glyph. */
.cb-fact__icon--face { border-radius: 50%; background: var(--cb-dark-2); color: var(--cb-white); }
.cb-fact__icon--face img { width: 100%; height: 100%; object-fit: cover; }
.cb-fact__icon--face .cb-author__initial { font-size: 15px; }

.cb-fact__body { display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }

.cb-fact__key {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cb-muted);
}

.cb-fact__val { font-size: 14px; font-weight: 700; color: var(--cb-ink); white-space: nowrap; }
a.cb-fact__val:hover { color: var(--cb-blue); text-decoration: underline; text-underline-offset: 3px; }

/* --- Live readers: a pulsing dot in the same tile as the other icons ---------- */

.cb-fact__pulse {
	position: relative;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: #E9F8EE;
}

.cb-fact__pulse::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	margin: -4.5px 0 0 -4.5px;
	border-radius: 50%;
	background: #22A45D;
	box-shadow: 0 0 0 0 rgba(34, 164, 93, .5);
	animation: cb-live 2s ease-out infinite;
}

@keyframes cb-live {
	70%  { box-shadow: 0 0 0 8px rgba(34, 164, 93, 0); }
	100% { box-shadow: 0 0 0 0 rgba(34, 164, 93, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.cb-fact__pulse::before { animation: none; }
}

/* --- Head ----------------------------------------------------------------- */

.cb-entry__head { margin-bottom: 48px; }

.cb-entry__title {
	font-family: var(--cb-display);
	font-weight: 700;
	font-size: 56px;
	line-height: 64px;
	text-transform: uppercase;
	text-wrap: balance;
}

.cb-entry__lead {
	margin-top: 18px;
	max-width: 820px;
	font-size: 19px;
	line-height: 30px;
	color: var(--cb-muted);
}

.cb-entry__cover {
	margin-top: 32px;
	overflow: hidden;
	border-radius: var(--cb-radius-lg);
	background: var(--cb-white);
	box-shadow: 0 0 0 1px var(--cb-line);
}

.cb-entry__cover-img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.cb-entry__cover-caption {
	padding: 14px 22px;
	border-top: 1px solid var(--cb-line);
	color: var(--cb-muted);
	font-size: 13px;
	line-height: 20px;
}

/* --- Two-column body ------------------------------------------------------ */

/* One grid for the whole article: the head and the copy stack in the left column and
   the rail occupies the right one from the very top, so the contents card lines up with
   the breadcrumbs rather than starting below the title. */
.cb-entry__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	column-gap: 64px;
	align-items: start;
}

.cb-entry__head { grid-column: 1; grid-row: 1; }
.cb-entry__main { grid-column: 1; grid-row: 2; min-width: 0; }
.cb-entry__rail { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 108px; }

.cb-entry__body { min-width: 0; }

/* --- Author archive -------------------------------------------------------- */

.cb-author-page { padding-block: 48px 80px; }

.cb-author-page__head {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: 28px;
	align-items: center;
	margin-bottom: 28px;
}

.cb-author-page__avatar {
	width: 120px;
	height: 120px;
	overflow: hidden;
	border-radius: 50%;
	background: var(--cb-blue);
	box-shadow: 0 0 0 3px var(--cb-white), 0 0 0 5px var(--cb-blue);
}

.cb-author-page__avatar img { width: 100%; height: 100%; object-fit: cover; }
.cb-author-page__avatar .cb-author__initial { font-size: 40px; }

.cb-author-page__eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--cb-blue);
}

.cb-author-page__name {
	margin-top: 8px;
	font-family: var(--cb-display);
	font-weight: 700;
	font-size: 48px;
	line-height: 56px;
	text-transform: uppercase;
}

.cb-author-page__role { margin-top: 6px; color: var(--cb-muted); }

.cb-author-page__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin-top: 12px;
	font-size: 14px;
	color: var(--cb-muted);
}

.cb-author-page__facts strong { color: var(--cb-ink); font-weight: 600; }
.cb-author-page__bio { max-width: 900px; }
.cb-author-page__list { margin-top: 56px; }

.cb-author-page__list-title {
	margin-bottom: 24px;
	font-family: var(--cb-display);
	font-weight: 700;
	font-size: 36px;
	line-height: 44px;
	text-transform: uppercase;
}

.cb-author-page__empty { color: var(--cb-muted); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1279px) {
	/* One column below this width: a 320px rail beside the copy leaves the text under
	   600px, which is too narrow to read comfortably. The rail moves above the copy,
	   where it still works as a jump menu, and stops being sticky — a bar that follows
	   the reader on a small screen costs more room than it returns. */
	.cb-entry__grid { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
	.cb-entry__head { grid-column: 1; grid-row: 1; }
	.cb-entry__rail { grid-column: 1; grid-row: 2; position: static; }
	.cb-entry__main { grid-column: 1; grid-row: 3; }
	.cb-entry__title { font-size: 44px; line-height: 52px; }
}

@media (max-width: 1023px) {
	.cb-entry__title { font-size: 38px; line-height: 46px; }
	.cb-author-page__name { font-size: 36px; line-height: 44px; }
}

@media (max-width: 767px) {
	.cb-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; margin-top: 20px; }
	.cb-fact, .cb-fact:first-child { padding: 0; border: 0; gap: 10px; }
	.cb-fact__icon, .cb-fact__pulse { width: 32px; height: 32px; }
	.cb-fact__icon svg { width: 16px; height: 16px; }
	.cb-fact__key { font-size: 10px; }
	.cb-fact__val { font-size: 13px; white-space: normal; }
	.cb-entry__term { padding: 6px 14px; font-size: 12px; }

	.cb-entry { padding-block: 28px 56px; }
	.cb-entry__head { margin-bottom: 28px; }
	.cb-entry__title { font-size: 30px; line-height: 38px; }
	.cb-entry__lead { font-size: 17px; line-height: 27px; }
	.cb-entry__cover { margin-top: 24px; }

	.cb-author-page { padding-block: 28px 56px; }
	.cb-author-page__head { grid-template-columns: 1fr; gap: 18px; }
	.cb-author-page__avatar { width: 88px; height: 88px; }
	.cb-author-page__avatar .cb-author__initial { font-size: 30px; }
	.cb-author-page__name { font-size: 28px; line-height: 34px; }
	.cb-author-page__list-title { font-size: 26px; line-height: 32px; }
}