/*
 * Topic hub page islands.
 * Owns the generated /artigos-dor/* hubs and shortcode-based clinical hubs.
 */

body.hong-swiss-modern.hong-topic-hub {
	--topic-paper: oklch(97.5% 0.011 82);
	--topic-surface: oklch(99.2% 0.004 82);
	--topic-blue: oklch(44% 0.13 244);
	--topic-green: oklch(47% 0.12 155);
	--topic-red: oklch(47% 0.16 28);
	--topic-gold: oklch(72% 0.14 78);
	background: var(--topic-paper);
}

.hong-swiss-modern.hong-topic-hub .hong-page-content {
	padding-bottom: clamp(72px, 8vw, 120px);
}

/* The island wants the full landing width. `.hong-page-entry` keeps ~95px of
 * horizontal padding that this reset did not clear, so the chain topped out
 * around 1195px while the island itself was sized from the viewport (below) —
 * the box overflowed its parent and `.site-container { overflow: hidden }`
 * sliced roughly 82px off its right edge at every desktop width. Clear the
 * padding here and size the island from its container, not the viewport. */
body.hong-swiss-modern.hong-topic-hub :is(.site-inner, .content-sidebar-wrap, .content, .entry, .hong-page-template, .hong-page-entry, .hong-page-content, .hong-page-content__inner),
body.hong-swiss-modern.hong-topic-hub-v2-page :is(.site-inner, .content-sidebar-wrap, .content, .entry, .hong-page-template, .hong-page-entry, .hong-page-content, .hong-page-content__inner) {
	box-sizing: border-box;
	max-width: none;
	padding-inline: 0;
	width: 100%;
}

body.hong-swiss-modern.hong-topic-hub-v2-page .hong-page-template {
	padding-inline: 24px;
}

body.hong-swiss-modern :is(.hong-topic-hub-v2, .hong-topic-hub-intro),
body.hong-swiss-modern.hong-topic-hub .hong-topic-hub-relateds__inner {
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
	max-width: var(--hong-width-landing);
	width: 100%;
}

.hong-swiss-modern .hong-topic-hub-intro {
	background: var(--hong-ink);
	color: #fff;
	display: grid;
	gap: 1px;
	grid-template-columns: minmax(0, 0.68fr) minmax(280px, 0.32fr);
	margin-block: clamp(24px, 4vw, 54px) clamp(40px, 5vw, 74px);
	position: relative;
}

.hong-swiss-modern .hong-topic-hub-intro::before {
	background: var(--topic-red);
	content: "";
	inset: 0 auto 0 0;
	position: absolute;
	width: 10px;
}

.hong-swiss-modern .hong-topic-hub-intro__meta,
.hong-swiss-modern .hong-topic-hub-intro__main,
.hong-swiss-modern .hong-topic-hub-intro__cards,
.hong-swiss-modern .hong-topic-hub-filters {
	background: var(--topic-surface);
	color: var(--hong-ink);
	min-width: 0;
}

.hong-swiss-modern .hong-topic-hub-intro__meta {
	align-content: start;
	display: grid;
	gap: 18px;
	grid-column: 1 / -1;
	grid-template-columns: minmax(0, 1fr) auto;
	padding: clamp(18px, 2.4vw, 26px) clamp(24px, 4vw, 42px);
}

.hong-swiss-modern .hong-topic-hub-intro__main {
	align-content: end;
	display: grid;
	gap: clamp(18px, 2.4vw, 28px);
	min-height: clamp(300px, 34vw, 500px);
	padding: clamp(42px, 7vw, 92px) clamp(26px, 5vw, 76px);
	position: relative;
}

.hong-swiss-modern .hong-topic-hub-intro__main::after {
	background:
		linear-gradient(var(--topic-red), var(--topic-red)) 0 0 / 72px 10px no-repeat,
		linear-gradient(var(--topic-blue), var(--topic-blue)) 86px 0 / 34px 10px no-repeat,
		linear-gradient(var(--topic-gold), var(--topic-gold)) 134px 0 / 54px 10px no-repeat;
	content: "";
	height: 10px;
	left: clamp(26px, 5vw, 76px);
	position: absolute;
	top: clamp(28px, 4vw, 52px);
	width: 188px;
}

.hong-swiss-modern .hong-topic-hub-intro__title {
	color: var(--hong-ink);
	font-family: var(--hong-display);
	font-size: clamp(48px, 7.2vw, 96px);
	font-weight: 760;
	letter-spacing: 0;
	line-height: 0.96;
	margin: 0;
	max-width: 20ch;
	text-wrap: balance;
}

.hong-swiss-modern .hong-topic-hub-intro__summary {
	color: var(--hong-gray-700);
	font-size: clamp(18px, 1.45vw, 22px);
	line-height: 1.62;
	margin: 0;
	max-width: 58ch;
}

.hong-swiss-modern .hong-topic-hub-intro__count {
	align-self: start;
	color: var(--topic-red);
	font-family: var(--hong-mono);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-align: right;
	text-transform: uppercase;
}

.hong-swiss-modern .hong-topic-hub-intro__cards {
	display: grid;
	gap: 1px;
	grid-template-columns: 1fr;
}

.hong-swiss-modern .hong-topic-hub-intro__card {
	align-content: end;
	background: #fff;
	display: grid;
	gap: 12px;
	min-height: 166px;
	padding: clamp(20px, 2.6vw, 32px);
	position: relative;
}

.hong-swiss-modern .hong-topic-hub-intro__card:nth-child(1) {
	border-top: 10px solid var(--topic-red);
}

.hong-swiss-modern .hong-topic-hub-intro__card:nth-child(2) {
	border-top: 10px solid var(--topic-blue);
}

.hong-swiss-modern .hong-topic-hub-intro__card:nth-child(3) {
	border-top: 10px solid var(--topic-green);
}

/* v1 archive labels only. This rule used to carry the v2 kicker and both v2
 * section-head labels as well, so the two skins shared a font-size and editing
 * either one silently restyled the other. v2 owns its own label rules below.
 * 11px also sat under the site's 13px label floor. */
.hong-swiss-modern .hong-topic-hub-intro__card span {
	color: var(--topic-red);
	font-family: var(--hong-mono);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1.35;
	text-transform: uppercase;
}

.hong-swiss-modern .hong-topic-hub-intro__card strong {
	color: var(--hong-ink);
	display: block;
	font-family: var(--hong-display);
	font-size: clamp(22px, 2vw, 31px);
	font-weight: 740;
	letter-spacing: 0;
	line-height: 1.02;
	text-wrap: balance;
}

.hong-swiss-modern .hong-topic-hub-intro__card p {
	color: var(--hong-gray-600);
	font-size: 16px;
	line-height: 1.58;
	margin: 0;
}

.hong-swiss-modern .hong-topic-hub-filters {
	grid-column: 1 / -1;
	padding: clamp(18px, 2.6vw, 28px) clamp(24px, 4vw, 42px);
}

.hong-swiss-modern.hong-topic-hub .hong-topic-hub-relateds__inner {
	padding: 0;
}

.hong-swiss-modern.hong-topic-hub .relateds {
	margin-top: 0;
}

.hong-swiss-modern.hong-topic-hub .relateds-t {
	display: grid;
	gap: 10px;
	margin-bottom: clamp(20px, 3vw, 34px);
	padding: 0;
}

.hong-swiss-modern.hong-topic-hub .relateds-t h3 {
	color: var(--hong-ink);
	font-family: var(--hong-display);
	font-size: clamp(40px, 5vw, 72px);
	font-weight: 760;
	letter-spacing: 0;
	line-height: 0.96;
	margin: 0;
	max-width: 14ch;
	text-wrap: balance;
}

.hong-swiss-modern.hong-topic-hub .relateds-w {
	counter-reset: topic-card;
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	text-align: left;
}

.hong-swiss-modern.hong-topic-hub .related,
.hong-swiss-modern.hong-topic-hub .related:nth-child(n) {
	background: var(--topic-surface);
	border: 1px solid rgba(15, 20, 25, 0.12);
	box-shadow: none;
	display: flex;
	flex-direction: column;
	grid-column: span 4;
	margin: 0;
	min-width: 0;
	overflow: hidden;
	position: relative;
	transition: border-color 180ms ease, transform 180ms ease;
	width: auto;
}

.hong-swiss-modern.hong-topic-hub .related::before {
	background: var(--topic-red);
	content: "";
	display: block;
	height: 9px;
}

.hong-swiss-modern.hong-topic-hub .related:nth-child(3n + 2)::before {
	background: var(--topic-blue);
}

.hong-swiss-modern.hong-topic-hub .related:nth-child(3n)::before {
	background: var(--topic-green);
}

.hong-swiss-modern.hong-topic-hub .related:hover,
.hong-swiss-modern.hong-topic-hub .related:focus-within {
	border-color: rgba(15, 20, 25, 0.28);
	transform: translateY(-3px);
}

.hong-swiss-modern.hong-topic-hub .related:nth-child(1) {
	grid-column: span 7;
}

.hong-swiss-modern.hong-topic-hub .related:nth-child(2) {
	grid-column: span 5;
}

.hong-swiss-modern.hong-topic-hub .related:nth-child(3),
.hong-swiss-modern.hong-topic-hub .related:nth-child(4) {
	grid-column: span 6;
}

.hong-swiss-modern.hong-topic-hub .related img {
	aspect-ratio: 16 / 10;
	display: block;
	filter: none;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.hong-swiss-modern.hong-topic-hub .related-w {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 14px;
	padding: clamp(20px, 2.4vw, 28px);
}

.hong-swiss-modern.hong-topic-hub .related-meta {
	color: var(--topic-red);
	font-family: var(--hong-mono);
	font-size: 13px;
	font-style: normal;
	font-weight: 750;
	letter-spacing: 0.08em;
	line-height: 1.5;
	text-transform: uppercase;
}

.hong-swiss-modern.hong-topic-hub .related-t {
	color: var(--hong-ink);
	font-family: var(--hong-display);
	font-size: clamp(24px, 2.2vw, 36px);
	font-weight: 730;
	letter-spacing: 0;
	line-height: 1.04;
	margin: 0;
	text-wrap: balance;
}

.hong-swiss-modern.hong-topic-hub .related:nth-child(1) .related-t {
	font-size: clamp(40px, 4.8vw, 66px);
	max-width: 12ch;
}

.hong-swiss-modern.hong-topic-hub .related:nth-child(2) .related-t {
	font-size: clamp(30px, 3vw, 44px);
}

.hong-swiss-modern.hong-topic-hub .related-e {
	color: var(--hong-gray-650, #4f5964);
	display: -webkit-box;
	font-size: 16px;
	line-height: 1.62;
	margin: 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
}

.hong-swiss-modern.hong-topic-hub .related:nth-child(n + 6) .related-e {
	-webkit-line-clamp: 3;
}

.hong-swiss-modern.hong-topic-hub .related-c {
	border-top: 1px solid rgba(15, 20, 25, 0.12);
	color: var(--hong-ink);
	font-family: var(--hong-mono);
	font-size: 13px;
	font-weight: 750;
	letter-spacing: 0.08em;
	margin-top: auto;
	padding-top: 14px;
	text-decoration: none;
	text-transform: uppercase;
}

.hong-swiss-modern.hong-topic-hub .related-c:hover,
.hong-swiss-modern.hong-topic-hub .related-c:focus-visible {
	color: var(--topic-red);
}

/* ---------------------------------------------------------------------------
 * Topic hub v2 skin — Swiss clinical index.
 *
 * Rebuilt 2026-07-24. The previous skin ran its own palette (gold + tricolour
 * card bars + a maroon-to-navy gradient band with grid texture) that existed
 * nowhere else in the system, and sized several labels in `rem` — which the
 * theme's 62.5% root turns into 7.2px. This skin uses v5-equivalent tokens,
 * declares every size in px, and holds the 13px label floor throughout.
 * ------------------------------------------------------------------------- */

.hong-swiss-modern .hong-topic-hub-v2 {
	/* Mirrors the v5 token set; v5-blocks.css is not enqueued on page templates. */
	--hub-surface: oklch(98.6% 0.003 95);
	--hub-paper: oklch(97% 0.004 95);
	--hub-sunk: oklch(94.2% 0.005 95);
	--hub-line: oklch(86.5% 0.005 95);
	--hub-ink: oklch(19% 0.004 95);
	--hub-text: oklch(33% 0.005 95);
	--hub-text-2: oklch(51.5% 0.006 95);
	--hub-accent: oklch(54% 0.205 28);
	--hub-accent-deep: oklch(45% 0.18 28);
	--hub-coral: oklch(78% 0.12 32);
	--hub-on-ink: oklch(96% 0.006 95);
	--hub-on-ink-2: oklch(80% 0.008 95);
	--hub-ease: cubic-bezier(0.22, 1, 0.36, 1);
	background: var(--hub-paper);
	border: 1px solid var(--hub-line);
	border-top: 3px solid var(--hub-ink);
	box-sizing: border-box;
	color: var(--hub-text);
	margin-block: clamp(24px, 4vw, 54px);
	padding: clamp(24px, 4.5vw, 58px);
}

/* Hero ---------------------------------------------------------------- */

.hong-swiss-modern .hong-topic-hub-v2__hero {
	display: grid;
	gap: clamp(28px, 4vw, 56px);
	grid-template-columns: minmax(0, 1fr) minmax(248px, 0.38fr);
}

.hong-swiss-modern .hong-topic-hub-v2 .hong-topic-hub-v2__kicker {
	color: var(--hub-accent-deep);
	display: block;
	font-family: var(--hong-mono);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.35;
	margin: 0 0 18px;
	text-transform: uppercase;
}

.hong-swiss-modern .hong-topic-hub-v2__title {
	color: var(--hub-ink);
	font-family: var(--hong-display);
	font-size: clamp(40px, 5.6vw, 76px);
	font-weight: 760;
	hyphens: none;
	letter-spacing: -0.01em;
	line-height: 0.98;
	margin: 0 0 22px;
	max-width: 16ch;
	overflow-wrap: normal;
	text-wrap: balance;
}

/* Scoped away from .hong-topic-hub-v2__kicker: both rules used to sit at the
 * same specificity, so this one won on source order and repainted the kicker
 * at the deck's 20px slate instead of its own 13px accent. */
.hong-swiss-modern .hong-topic-hub-v2__hero p:not(.hong-topic-hub-v2__kicker) {
	color: var(--hub-text);
	font-size: 19px;
	line-height: 1.6;
	margin: 0;
	max-width: 62ch;
}

/* Hub cross-nav: a ruled index, not a stack of identical buttons. */
.hong-swiss-modern .hong-topic-hub-v2__nav {
	align-content: start;
	border-top: 1px solid var(--hub-line);
	display: grid;
	gap: 0;
}

.hong-swiss-modern .hong-topic-hub-v2__nav a {
	border-bottom: 1px solid var(--hub-line);
	color: var(--hub-text);
	font-family: var(--hong-sans);
	font-size: 16px;
	font-weight: 600;
	padding: 14px 12px 14px 0;
	text-decoration: none;
	transition: color 180ms var(--hub-ease), transform 180ms var(--hub-ease);
}

.hong-swiss-modern .hong-topic-hub-v2__nav a:hover,
.hong-swiss-modern .hong-topic-hub-v2__nav a:focus-visible {
	color: var(--hub-accent-deep);
	transform: translateX(8px);
}

.hong-swiss-modern .hong-topic-hub-v2__nav a[aria-current="page"] {
	color: var(--hub-ink);
	font-weight: 760;
	padding-left: 12px;
	position: relative;
}

.hong-swiss-modern .hong-topic-hub-v2__nav a[aria-current="page"]::before {
	background: var(--hub-accent);
	content: "";
	inset-block: 18px auto;
	inset-inline-start: 0;
	position: absolute;
	block-size: 6px;
	inline-size: 6px;
}

/* Question panel ------------------------------------------------------- */

.hong-swiss-modern .hong-topic-hub-v2__body {
	display: block;
	margin-top: clamp(30px, 4vw, 48px);
}

.hong-swiss-modern .hong-topic-hub-v2__question-panel {
	background: var(--hub-surface);
	border: 1px solid var(--hub-line);
	border-top: 3px solid var(--hub-accent);
	max-width: 780px;
	padding: clamp(22px, 3vw, 34px);
}

.hong-swiss-modern .hong-topic-hub-v2 h2 {
	color: var(--hub-ink);
	font-family: var(--hong-display);
	font-size: clamp(24px, 2.4vw, 34px);
	font-weight: 720;
	hyphens: none;
	letter-spacing: -0.005em;
	line-height: 1.1;
	margin: 0 0 18px;
	overflow-wrap: normal;
	text-wrap: balance;
}

.hong-swiss-modern .hong-topic-hub-v2__question-panel ul {
	display: grid;
	gap: 12px;
	margin: 0;
	padding-left: 1.15em;
}

.hong-swiss-modern .hong-topic-hub-v2__question-panel li {
	color: var(--hub-text);
	font-size: 17px;
	line-height: 1.6;
	margin: 0;
}

/* Section heads -------------------------------------------------------- */

.hong-swiss-modern .hong-topic-hub-v2__section-head {
	display: grid;
	gap: 12px;
	margin-bottom: clamp(22px, 3vw, 34px);
	max-width: 820px;
}

.hong-swiss-modern .hong-topic-hub-v2 .hong-topic-hub-v2__section-head p,
.hong-swiss-modern .hong-topic-hub-v2 .hong-topic-hub-v2__evidence-head p {
	color: var(--hub-accent-deep);
	font-family: var(--hong-mono);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.35;
	margin: 0;
	text-transform: uppercase;
}

.hong-swiss-modern .hong-topic-hub-v2__section-head span,
.hong-swiss-modern .hong-topic-hub-v2__evidence-head span {
	color: var(--hub-text);
	display: block;
	font-size: 17px;
	line-height: 1.6;
	margin: 0;
	max-width: 68ch;
}

/* Article index -------------------------------------------------------- */

.hong-swiss-modern .hong-topic-hub-v2__articles {
	margin-top: clamp(34px, 4.5vw, 60px);
}

/* Hairlines come from each card's own outline, not from a line-coloured
 * container showing through the 1px gaps. With a container fill, any row that
 * is not completely full painted its empty cells as solid grey blocks — visible
 * on the index, which has seven cards in a four-column grid. */
.hong-swiss-modern .hong-topic-hub-v2__article-grid {
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	background: transparent;
	border: 1px solid var(--hub-line);
	margin-top: clamp(22px, 3.5vw, 40px);
}

.hong-swiss-modern .hong-topic-hub-v2__card {
	background: var(--hub-surface);
	outline: 1px solid var(--hub-line);
	display: flex;
	flex-direction: column;
	min-height: clamp(210px, 14vw, 250px);
	padding: clamp(20px, 2vw, 26px);
	transition: background-color 180ms var(--hub-ease);
}

.hong-swiss-modern .hong-topic-hub-v2__card:hover,
.hong-swiss-modern .hong-topic-hub-v2__card:focus-within {
	background: var(--hub-paper);
}

.hong-swiss-modern .hong-topic-hub-v2__card p,
.hong-swiss-modern .hong-topic-hub-v2__card span {
	font-family: var(--hong-mono);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.35;
	margin: 0;
}

.hong-swiss-modern .hong-topic-hub-v2__card p {
	color: var(--hub-accent-deep);
}

.hong-swiss-modern .hong-topic-hub-v2__card h3 {
	font-family: var(--hong-display);
	font-size: 20px;
	font-weight: 720;
	hyphens: none;
	letter-spacing: 0;
	line-height: 1.18;
	margin: 16px 0 auto;
	overflow-wrap: break-word;
}

.hong-swiss-modern .hong-topic-hub-v2__card h3 a {
	border-bottom: 0;
	color: var(--hub-ink);
	display: block;
	text-decoration: none;
}

.hong-swiss-modern .hong-topic-hub-v2__card h3 a:hover,
.hong-swiss-modern .hong-topic-hub-v2__card h3 a:focus-visible {
	color: var(--hub-accent-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hong-swiss-modern .hong-topic-hub-v2__card span {
	color: var(--hub-text-2);
	margin-top: 22px;
}

/* Evidence band -------------------------------------------------------- */

.hong-swiss-modern .hong-topic-hub-v2__evidence {
	background: var(--hub-ink);
	color: var(--hub-on-ink);
	margin-top: clamp(38px, 5vw, 68px);
	padding: clamp(28px, 4.5vw, 56px);
}

.hong-swiss-modern .hong-topic-hub-v2__evidence-head {
	display: grid;
	gap: 14px;
	margin-bottom: clamp(24px, 3.5vw, 38px);
	max-width: 850px;
}

.hong-swiss-modern .hong-topic-hub-v2 .hong-topic-hub-v2__evidence-head p {
	color: var(--hub-coral);
}

.hong-swiss-modern .hong-topic-hub-v2__evidence-head h2 {
	color: var(--hub-on-ink);
	font-size: clamp(28px, 3.4vw, 46px);
	font-weight: 760;
	line-height: 1.04;
	margin: 0;
	max-width: 20ch;
}

.hong-swiss-modern .hong-topic-hub-v2__evidence-head span {
	color: var(--hub-on-ink-2);
}

/* Two or three studies fit the row; the old scroll-snap rail put a pair of
 * cards inside horizontal-scroll machinery they never needed. */
.hong-swiss-modern .hong-topic-hub-v2__evidence-rail {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Tone fills cycle the way .v5-biblio evidence cards do; the top rule stays one
 * colour so the row reads as a set. Cycling the rule too rebuilt the tricolour
 * bar motif that this skin drops from the article grid. */
.hong-swiss-modern .hong-topic-hub-v2__study-card,
.hong-swiss-modern .hong-topic-hub-v2__study-card:visited {
	--study-bg: oklch(97.8% 0.013 80);
	background: var(--study-bg);
	border: 1px solid oklch(100% 0 0 / 0.14);
	border-top: 3px solid var(--hub-ink);
	color: var(--hub-text);
	display: grid;
	gap: 14px;
	padding: 26px 24px 24px;
	text-decoration: none;
	transition: transform 180ms var(--hub-ease), box-shadow 180ms var(--hub-ease);
}

.hong-swiss-modern .hong-topic-hub-v2__study-card:nth-child(4n + 2) {
	--study-bg: oklch(95.5% 0.018 160);
}

.hong-swiss-modern .hong-topic-hub-v2__study-card:nth-child(4n + 3) {
	--study-bg: oklch(95.5% 0.016 245);
}

.hong-swiss-modern .hong-topic-hub-v2__study-card:nth-child(4n) {
	--study-bg: oklch(95.5% 0.026 28);
}

.hong-swiss-modern .hong-topic-hub-v2__study-card:hover,
.hong-swiss-modern .hong-topic-hub-v2__study-card:focus-visible {
	box-shadow: 0 14px 32px oklch(13% 0.03 250 / 0.28);
	outline: 2px solid transparent;
	transform: translateY(-3px);
}

.hong-swiss-modern .hong-topic-hub-v2__study-year {
	align-items: center;
	background: var(--hub-ink);
	color: var(--hub-on-ink);
	display: inline-flex;
	font-family: var(--hong-mono);
	font-size: 13px;
	font-weight: 800;
	justify-content: center;
	line-height: 1;
	min-height: 34px;
	padding: 8px 12px;
	width: max-content;
}

.hong-swiss-modern .hong-topic-hub-v2__study-card strong {
	color: var(--hub-ink);
	display: block;
	font-family: var(--hong-display);
	font-size: 20px;
	font-weight: 760;
	hyphens: none;
	line-height: 1.18;
	overflow-wrap: normal;
	text-wrap: balance;
}

.hong-swiss-modern .hong-topic-hub-v2__study-paper,
.hong-swiss-modern .hong-topic-hub-v2__study-authors {
	color: var(--hub-text);
	display: grid;
	font-size: 15px;
	gap: 5px;
	line-height: 1.5;
}

.hong-swiss-modern .hong-topic-hub-v2__study-paper b,
.hong-swiss-modern .hong-topic-hub-v2__study-authors b {
	color: var(--hub-accent-deep);
	font-family: var(--hong-mono);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.3;
	text-transform: uppercase;
}

.hong-swiss-modern .hong-topic-hub-v2__study-journal {
	align-self: end;
	border-top: 1px solid oklch(24% 0.034 248 / 0.16);
	color: var(--hub-text);
	display: block;
	font-family: var(--hong-mono);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
	margin-top: auto;
	padding-top: 12px;
}

/* The global .whatsapp-button is fixed at right:20px and owns roughly the
 * rightmost 78px of the viewport. Below the width at which the 1400px island
 * earns its own side margins, that float lands on the cross-nav column, so
 * reserve clearance inside the collision band only. */
@media only screen and (min-width: 981px) and (max-width: 1540px) {
	.hong-swiss-modern .hong-topic-hub-v2 {
		padding-right: max(clamp(24px, 4.5vw, 58px), 88px);
	}
}

@media only screen and (max-width: 1199px) {
	.hong-swiss-modern.hong-topic-hub .related:nth-child(1),
	.hong-swiss-modern.hong-topic-hub .related:nth-child(2) {
		grid-column: span 6;
	}

	.hong-swiss-modern.hong-topic-hub .related:nth-child(3),
	.hong-swiss-modern.hong-topic-hub .related:nth-child(4),
	.hong-swiss-modern.hong-topic-hub .related:nth-child(n + 5) {
		grid-column: span 4;
	}

	.hong-swiss-modern .hong-topic-hub-v2__article-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media only screen and (max-width: 1023px) {
	.hong-swiss-modern .hong-topic-hub-intro,
	.hong-swiss-modern .hong-topic-hub-v2__hero {
		grid-template-columns: 1fr;
	}

	.hong-swiss-modern.hong-topic-hub .relateds-w {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.hong-swiss-modern.hong-topic-hub .related:nth-child(1),
	.hong-swiss-modern.hong-topic-hub .related:nth-child(2) {
		grid-column: span 6;
	}

	.hong-swiss-modern.hong-topic-hub .related:nth-child(3),
	.hong-swiss-modern.hong-topic-hub .related:nth-child(4),
	.hong-swiss-modern.hong-topic-hub .related:nth-child(n + 5) {
		grid-column: span 3;
	}

	.hong-swiss-modern .hong-topic-hub-v2__article-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media only screen and (max-width: 767px) {
	.hong-swiss-modern .hong-topic-hub-intro {
		margin-block-start: 18px;
	}

	.hong-swiss-modern .hong-topic-hub-intro__meta {
		grid-template-columns: 1fr;
	}

	.hong-swiss-modern .hong-topic-hub-intro__count {
		text-align: left;
	}

	.hong-swiss-modern .hong-topic-hub-intro__main {
		min-height: 0;
		padding: 72px 22px 28px;
	}

	.hong-swiss-modern .hong-topic-hub-intro__main::after {
		left: 22px;
		top: 28px;
	}

	.hong-swiss-modern .hong-topic-hub-intro__title {
		font-size: clamp(40px, 12vw, 62px);
	}

	.hong-swiss-modern .hong-topic-hub-filters {
		padding: 18px;
	}

	.hong-swiss-modern.hong-topic-hub .relateds-w,
	.hong-swiss-modern .hong-topic-hub-v2__article-grid {
		grid-template-columns: 1fr;
	}

	.hong-swiss-modern.hong-topic-hub .related:nth-child(n) {
		grid-column: 1 / -1;
	}

	.hong-swiss-modern.hong-topic-hub .related-t,
	.hong-swiss-modern.hong-topic-hub .related:nth-child(1) .related-t,
	.hong-swiss-modern.hong-topic-hub .related:nth-child(2) .related-t {
		font-size: clamp(26px, 7vw, 36px);
		max-width: none;
	}

	.hong-swiss-modern .hong-topic-hub-v2 {
		margin-left: auto;
		margin-right: auto;
		padding: 22px;
	}

	.hong-swiss-modern .hong-topic-hub-v2__title {
		font-size: clamp(36px, 11vw, 54px);
	}

	.hong-swiss-modern .hong-topic-hub-v2__evidence {
		padding: 26px 18px;
	}

	.hong-swiss-modern .hong-topic-hub-v2__evidence-head h2 {
		font-size: clamp(26px, 8vw, 36px);
		max-width: none;
	}

	.hong-swiss-modern .hong-topic-hub-v2__study-card {
		padding: 24px 20px 22px;
	}
}