/*!
 * Health & Science Africa — main stylesheet
 *
 * Written entirely against the CSS custom properties emitted by
 * inc/customizer/dynamic-css.php. Nothing here hard-codes a colour, a font or a
 * size, which is what lets the Customizer restyle the whole site without a
 * build step.
 *
 * Contents
 *   1.  Reset & base
 *   2.  Layout primitives
 *   3.  Typography
 *   4.  Header
 *   5.  Ticker
 *   6.  Drawer & search
 *   7.  Cards
 *   8.  Layout engine (grid / list / stack / numbered / carousel)
 *   9.  Sections
 *   10. Article
 *   11. Sidebar & widgets
 *   12. HSA TV
 *   13. Newsletter, follow band, footer
 *   14. Forms, buttons, pagination
 *   15. Comments
 *   16. Utilities, 404, accessibility
 */

/* ==========================================================================
   1. Reset & base
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}

body {
	margin: 0;
	background: var(--hsa-surface);
	color: var(--hsa-ink);
	font-family: var(--hsa-font-body);
	font-size: var(--hsa-text-base);
	font-weight: var(--hsa-weight-body);
	line-height: var(--hsa-lh-body);
	letter-spacing: var(--hsa-ls-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration-color: rgba(var(--hsa-primary-rgb), .45);
	text-underline-offset: .18em;
}

a:hover { text-decoration-color: currentColor; }

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--hsa-primary);
	outline-offset: 3px;
	border-radius: 2px;
}

hr {
	border: 0;
	border-top: 1px solid var(--hsa-border);
	margin: 2rem 0;
}

/* ==========================================================================
   2. Layout primitives
   ========================================================================== */

.hsa-site {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

.hsa-main { flex: 1 0 auto; }

.hsa-container {
	width: 100%;
	max-width: var(--hsa-container);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2.5rem);
}

/* Main + sidebar. Collapses to a single column below the large breakpoint. */
.hsa-layout {
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
	padding-block: var(--hsa-section-space);
}

.hsa-layout__main { min-width: 0; }

@media (min-width: 62rem) {
	.hsa-layout--right { grid-template-columns: minmax(0, 1fr) 20rem; }
	.hsa-layout--left  { grid-template-columns: 20rem minmax(0, 1fr); }
	.hsa-layout--left .hsa-layout__main { order: 2; }
	.hsa-layout--none  { grid-template-columns: minmax(0, 1fr); }
}

.hsa-home__split { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }

@media (min-width: 62rem) {
	.hsa-home__split { grid-template-columns: minmax(0, 1fr) 20rem; }
}

/* Sections inside the railed homepage lose their own container padding —
   the split grid already provides it. */
.hsa-home--railed .hsa-section > .hsa-container {
	max-width: none;
	padding-inline: 0;
}

/* ==========================================================================
   3. Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .5em;
	color: var(--hsa-heading);
	font-family: var(--hsa-font-heading);
	font-weight: var(--hsa-weight-heading);
	line-height: var(--hsa-lh-heading);
	letter-spacing: var(--hsa-ls-heading);
	text-wrap: balance;
}

h1 { font-size: var(--hsa-text-h1); }
h2 { font-size: var(--hsa-text-h2); }
h3 { font-size: var(--hsa-text-h3); }
h4 { font-size: var(--hsa-text-h4); }

p { margin: 0 0 1.15em; }

.hsa-kicker {
	display: inline-block;
	margin-bottom: .5rem;
	color: var(--hsa-primary);
	font-family: var(--hsa-font-meta);
	font-size: var(--hsa-text-xs);
	font-weight: 600;
	letter-spacing: .09em;
	line-height: 1.2;
	text-transform: var(--hsa-kicker-transform);
	text-decoration: none;
}

.hsa-kicker:hover { color: var(--hsa-primary-dk); }

/* ==========================================================================
   4. Header
   ========================================================================== */

.hsa-header {
	position: relative;
	z-index: 40;
	background: var(--hsa-header-bg);
	border-bottom: 1px solid var(--hsa-border);
	color: var(--hsa-header-txt);
}

.hsa-topbar {
	background: var(--hsa-heading);
	color: #fff;
	font-family: var(--hsa-font-meta);
	font-size: var(--hsa-text-xs);
}

.hsa-topbar__inner {
	display: flex;
	min-height: 2.4rem;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.hsa-topbar__date { margin: 0; opacity: .7; }

.hsa-topbar__end {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-left: auto;
}

.hsa-topbar__nav .hsa-menu {
	display: flex;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hsa-topbar__nav a {
	letter-spacing: .06em;
	text-decoration: none;
	text-transform: uppercase;
	opacity: .85;
}

.hsa-topbar__nav a:hover { opacity: 1; }

@media (max-width: 47.99rem) {
	.hsa-topbar__date,
	.hsa-topbar__nav { display: none; }
	.hsa-topbar__inner { justify-content: center; }
}

.hsa-masthead {
	/* Own its background rather than relying on `.hsa-header` behind it —
	   once `.hsa-header__sticky` is pulled into `position: fixed`, it paints
	   independently of its non-fixed ancestor and would otherwise be see-through. */
	background: var(--hsa-header-bg);
}

.hsa-masthead__inner {
	display: grid;
	align-items: center;
	gap: 1rem;
	/* Equal flexible outer columns keep the logo visually centred between the
	   burger and search/CTA controls even when those two differ in width —
	   `auto 1fr auto` would instead centre it within the leftover space,
	   dragging it toward whichever side is narrower. */
	grid-template-columns: 1fr auto 1fr;
	padding-block: clamp(.85rem, 2.5vw, 1.5rem);
}

/*
 * Pin each item to its own column explicitly. The burger is display:none on
 * desktop, and without these it drops out of auto-placement entirely — the
 * logo slides into column 1 and the actions into column 2, leaving column 3
 * empty and the logo far left of centre.
 */
.hsa-masthead__inner > .hsa-burger { grid-column: 1; }
.hsa-masthead__inner > .hsa-logo   { grid-column: 2; }
.hsa-masthead__end                 { grid-column: 3; }

.hsa-masthead__end {
	display: flex;
	align-items: center;
	gap: .5rem;
	justify-self: end;
}

.hsa-burger {
	/* Visible at every width by default — the "burger" arrangement (below)
	   uses it as the only navigation, on desktop and mobile alike. The
	   "inline" arrangement hides it above the category-bar breakpoint, once
	   it has a visible row of desks to show instead. */
	display: inline-flex;
	justify-self: start;
	padding: .5rem;
	border: 0;
	background: none;
	cursor: pointer;
}

.hsa-logo { justify-self: center; }
.hsa-logo img { max-height: var(--hsa-logo-height, 3.5rem); width: auto; }

.hsa-logo--text a {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	text-decoration: none;
}

.hsa-logo__name {
	color: var(--hsa-heading);
	font-family: var(--hsa-font-heading);
	font-size: clamp(1.25rem, 3.5vw, 1.9rem);
	font-weight: var(--hsa-weight-heading);
	line-height: 1.05;
	letter-spacing: -.01em;
}

.hsa-logo__tagline {
	color: var(--hsa-muted);
	font-family: var(--hsa-font-meta);
	font-size: var(--hsa-text-xs);
	letter-spacing: .05em;
	text-transform: uppercase;
}

/*
 * The masthead (logo + search) and the category bar stick together as one
 * unit, so search stays reachable while scrolling — not just navigation.
 * The topbar and ticker sit outside this wrapper and scroll away normally.
 */
.hsa-header__sticky.is-stuck {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 60;
	background: var(--hsa-header-bg);
	box-shadow: 0 2px 14px rgba(0, 0, 0, .09);
}

/* Category bar — the primary navigation, directly under the masthead. */
.hsa-catbar {
	border-top: 1px solid var(--hsa-border);
	background: var(--hsa-header-bg);
}

.hsa-menu--categories {
	display: flex;
	margin: 0;
	padding: 0;
	gap: clamp(1rem, 2.4vw, 2rem);
	justify-content: center;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}

.hsa-menu--categories::-webkit-scrollbar { display: none; }

.hsa-menu--categories > li { position: relative; flex: 0 0 auto; }

.hsa-menu--categories > li > .hsa-menu__link {
	display: block;
	padding-block: .9rem;
	color: var(--hsa-header-txt);
	font-family: var(--hsa-font-meta);
	font-size: var(--hsa-text-sm);
	font-weight: 600;
	letter-spacing: .07em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
}

.hsa-menu--categories > li:hover > .hsa-menu__link,
.hsa-menu--categories > .current-menu-item > .hsa-menu__link,
.hsa-menu--categories > .current-menu-ancestor > .hsa-menu__link {
	color: var(--hsa-primary);
	border-bottom-color: var(--hsa-primary);
}

@media (max-width: 61.99rem) {
	.hsa-catbar { display: none; }
}

/*
 * Masthead arrangements — Customizer → Header & Navigation → Masthead.
 *
 * "burger" (the base styling above — burger | centred logo | search) is the
 * same shape at every width: the drawer is the only navigation, so the
 * burger never hides. "inline" puts the desks in a visible row below the
 * masthead instead, so on desktop the burger gives way to a plain
 * logo-left / search-right row; below the category-bar breakpoint it still
 * has nowhere to put a row of desks, so it borrows the burger shape too —
 * the one layout that actually fits a phone.
 */
@media (min-width: 62rem) {
	.hsa-header-inline .hsa-burger { display: none; }

	.hsa-header-inline .hsa-masthead__inner {
		grid-template-columns: auto 1fr;
	}

	.hsa-header-inline .hsa-masthead__inner > .hsa-logo {
		grid-column: 1;
		justify-self: start;
	}

	.hsa-header-inline .hsa-masthead__end {
		grid-column: 2;
	}
}

.hsa-submenu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 5;
	min-width: 13rem;
	margin: 0;
	padding: .5rem 0;
	list-style: none;
	background: var(--hsa-surface);
	border: 1px solid var(--hsa-border);
	box-shadow: 0 12px 30px rgba(0, 0, 0, .1);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .16s, transform .16s, visibility .16s;
}

.has-submenu:hover > .hsa-submenu,
.has-submenu:focus-within > .hsa-submenu,
.has-submenu.is-open > .hsa-submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.hsa-submenu a {
	display: block;
	padding: .5rem 1rem;
	font-size: var(--hsa-text-sm);
	text-decoration: none;
}

.hsa-submenu a:hover { background: var(--hsa-surface-alt); color: var(--hsa-primary); }

.hsa-menu__toggle {
	display: none;
	padding: .25rem;
	border: 0;
	background: none;
	cursor: pointer;
}

/* ==========================================================================
   5. Ticker
   ========================================================================== */

.hsa-ticker {
	background: var(--hsa-heading);
	color: #fff;
	overflow: hidden;
}

.hsa-ticker__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.hsa-ticker__label {
	flex: 0 0 auto;
	padding: .5rem .75rem;
	margin-left: calc(clamp(1rem, 4vw, 2.5rem) * -1);
	background: var(--hsa-primary);
	color: var(--hsa-on-primary);
	font-family: var(--hsa-font-meta);
	font-size: var(--hsa-text-xs);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.hsa-ticker__viewport {
	display: flex;
	overflow: hidden;
	flex: 1;
	mask-image: linear-gradient(90deg, transparent, #000 2rem, #000 calc(100% - 2rem), transparent);
}

.hsa-ticker__track {
	display: flex;
	flex: 0 0 auto;
	gap: 2.5rem;
	margin: 0;
	padding: .5rem 1.25rem .5rem 0;
	list-style: none;
	white-space: nowrap;
	animation: hsa-marquee 45s linear infinite;
}

.hsa-ticker:hover .hsa-ticker__track,
.hsa-ticker:focus-within .hsa-ticker__track { animation-play-state: paused; }

.hsa-ticker__item a {
	font-size: var(--hsa-text-sm);
	text-decoration: none;
	opacity: .9;
}

.hsa-ticker__item a:hover { opacity: 1; text-decoration: underline; }

.hsa-ticker__item::before {
	content: "•";
	margin-right: 2.5rem;
	color: var(--hsa-primary);
}

.hsa-ticker__track > li:first-child::before { content: none; margin: 0; }

@keyframes hsa-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
	.hsa-ticker__track { animation: none; }
	.hsa-ticker__viewport { overflow-x: auto; }
	.hsa-ticker__track:last-child { display: none; }
}

/* ==========================================================================
   6. Drawer & search
   ========================================================================== */

.hsa-drawer {
	position: fixed;
	inset: 0;
	z-index: 100;
}

.hsa-drawer[hidden] { display: none; }

.hsa-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .5);
	opacity: 0;
	transition: opacity .25s ease;
}

.hsa-drawer__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	display: flex;
	width: min(22rem, 88vw);
	flex-direction: column;
	gap: 1.25rem;
	padding: 1.25rem;
	background: var(--hsa-surface);
	overflow-y: auto;
	/* Off-screen until .is-open — JS removes [hidden] a frame before adding
	   .is-open, so this transition plays on both open and close instead of
	   only on open like a @keyframes entrance animation would. */
	transform: translateX(-100%);
	transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}

.hsa-drawer.is-open .hsa-drawer__scrim { opacity: 1; }
.hsa-drawer.is-open .hsa-drawer__panel { transform: translateX(0); }

.hsa-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.hsa-menu--drawer,
.hsa-menu--drawer-utility {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hsa-menu--drawer > li { border-bottom: 1px solid var(--hsa-border); }

.hsa-menu--drawer .hsa-menu__link {
	display: block;
	padding: .8rem 0;
	font-family: var(--hsa-font-meta);
	font-weight: 600;
	letter-spacing: .04em;
	text-decoration: none;
	text-transform: uppercase;
	font-size: var(--hsa-text-sm);
}

.hsa-menu--drawer .has-submenu { position: relative; }

.hsa-menu--drawer .hsa-menu__toggle {
	position: absolute;
	top: .4rem;
	right: 0;
	display: block;
	padding: .5rem;
}

.hsa-menu--drawer .hsa-menu__chevron {
	display: block;
	width: .5rem;
	height: .5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .18s;
}

.hsa-menu--drawer .hsa-menu__toggle[aria-expanded="true"] .hsa-menu__chevron {
	transform: rotate(-135deg);
}

.hsa-menu--drawer .hsa-submenu {
	position: static;
	display: none;
	min-width: 0;
	padding: 0 0 .5rem 1rem;
	border: 0;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none;
}

.hsa-menu--drawer .has-submenu.is-open > .hsa-submenu { display: block; }

.hsa-menu--drawer-utility a {
	display: block;
	padding: .45rem 0;
	color: var(--hsa-muted);
	font-size: var(--hsa-text-sm);
	text-decoration: none;
}

.hsa-drawer__foot { margin-top: auto; padding-top: 1rem; }

.hsa-searchpanel {
	position: relative;
	padding-block: 1.5rem;
	background: var(--hsa-surface-alt);
	border-bottom: 1px solid var(--hsa-border);
	animation: hsa-fade .18s ease;
}

.hsa-searchpanel[hidden] { display: none; }

.hsa-searchpanel .hsa-container {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.hsa-searchpanel .hsa-searchform { flex: 1; }

@keyframes hsa-fade { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
   7. Cards
   ========================================================================== */

.hsa-card {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: .85rem;
}

.hsa-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--hsa-radius);
	background: var(--hsa-surface-alt);
	aspect-ratio: 3 / 2;
}

.hsa-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}

.hsa-card:hover .hsa-card__img { transform: scale(1.04); }

.hsa-card__body { display: flex; min-width: 0; flex-direction: column; }

.hsa-card__title {
	margin: 0;
	font-size: var(--hsa-text-card);
	line-height: 1.25;
}

.hsa-card__title a { text-decoration: none; }
.hsa-card__title a:hover { color: var(--hsa-primary); }

.hsa-card__excerpt {
	margin: .5rem 0 0;
	color: var(--hsa-muted);
	font-size: var(--hsa-text-sm);
	line-height: 1.55;
}

.hsa-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem;
	margin-top: .6rem;
	color: var(--hsa-muted);
	font-family: var(--hsa-font-meta);
	font-size: var(--hsa-text-xs);
}

.hsa-meta__sep { opacity: .5; }

.hsa-card__index {
	color: var(--hsa-primary);
	font-family: var(--hsa-font-heading);
	font-size: 1.15rem;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	opacity: .85;
}

/* Compact — small image beside the text. */
.hsa-card--compact {
	flex-direction: row;
	align-items: flex-start;
	gap: .9rem;
}

.hsa-card--compact .hsa-card__media {
	flex: 0 0 5.5rem;
	aspect-ratio: 1 / 1;
}

@media (min-width: 30rem) {
	.hsa-card--compact .hsa-card__media { flex-basis: 7.5rem; aspect-ratio: 3 / 2; }
}

.hsa-card--compact .hsa-card__title { font-size: var(--hsa-text-sm); line-height: 1.35; }

/* Wide — generous lead treatment. */
.hsa-card--wide .hsa-card__media { aspect-ratio: 16 / 9; }
.hsa-card--wide .hsa-card__title { font-size: var(--hsa-text-h2); }
.hsa-card--wide .hsa-card__excerpt { font-size: var(--hsa-text-base); }

/* Overlay — text sits on the image. */
.hsa-card--overlay {
	position: relative;
	min-height: 20rem;
	justify-content: flex-end;
	border-radius: var(--hsa-radius);
	overflow: hidden;
	isolation: isolate;
}

.hsa-card--overlay .hsa-card__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	border-radius: 0;
	aspect-ratio: auto;
}

.hsa-card--overlay .hsa-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .88) 8%, rgba(0, 0, 0, .35) 50%, rgba(0, 0, 0, .05));
}

.hsa-card--overlay .hsa-card__body { padding: 1.5rem; color: #fff; }
.hsa-card--overlay .hsa-card__title,
.hsa-card--overlay .hsa-card__title a { color: #fff; }
.hsa-card--overlay .hsa-card__title a:hover { color: #fff; text-decoration: underline; }
.hsa-card--overlay .hsa-card__excerpt,
.hsa-card--overlay .hsa-card__meta { color: rgba(255, 255, 255, .82); }
.hsa-card--overlay .hsa-kicker { color: #fff; }

/* Text only. */
.hsa-card--text { gap: 0; }

/* ==========================================================================
   8. Layout engine
   ========================================================================== */

.hsa-grid {
	display: grid;
	gap: var(--hsa-gutter);
	grid-template-columns: 1fr;
}

/* Two columns from the small breakpoint, then the declared count.
   auto-fit with a floor keeps 3- and 4-column grids from crushing on tablets. */
@media (min-width: 34rem) {
	.hsa-grid--2,
	.hsa-grid--3,
	.hsa-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 52rem) {
	.hsa-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hsa-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 68rem) {
	.hsa-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* A story with no featured image would otherwise start its headline higher
   than its neighbours and leave the row ragged. A tinted panel at the same
   aspect ratio keeps the grid even without inventing a fake image. */
.hsa-grid > .hsa-card.no-thumb:not(.hsa-card--text):not(.hsa-card--overlay)::before {
	content: "";
	display: block;
	aspect-ratio: 3 / 2;
	border-radius: var(--hsa-radius);
	background:
		linear-gradient(135deg, transparent 45%, rgba(var(--hsa-primary-rgb), .07) 45%, rgba(var(--hsa-primary-rgb), .07) 55%, transparent 55%),
		var(--hsa-surface-alt);
}

.hsa-list { display: grid; gap: 0; }

.hsa-list > .hsa-card {
	padding-block: 1.25rem;
	border-bottom: 1px solid var(--hsa-border);
}

.hsa-list > .hsa-card:first-child { padding-top: 0; }
.hsa-list > .hsa-card:last-child { border-bottom: 0; }

/* A single-column list has the whole container to work with, so its rows get a
   larger image and a headline at card size rather than the compact default. */
@media (min-width: 44rem) {
	.hsa-list--1 > .hsa-card--compact { gap: 1.5rem; }
	.hsa-list--1 > .hsa-card--compact .hsa-card__media { flex-basis: 15rem; }
	.hsa-list--1 > .hsa-card--compact .hsa-card__title { font-size: var(--hsa-text-card); }
}

@media (min-width: 44rem) {
	.hsa-list--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--hsa-gutter);
	}
}

/* Stack — lead plus side column. */
.hsa-stack { display: grid; gap: var(--hsa-gutter); }

@media (min-width: 56rem) {
	.hsa-stack--hero { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
	.hsa-stack--mixed { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}

.hsa-stack__aside {
	display: grid;
	align-content: start;
	gap: 0;
}

.hsa-stack__aside > .hsa-card {
	padding-block: 1rem;
	border-bottom: 1px solid var(--hsa-border);
}

.hsa-stack__aside > .hsa-card:first-child { padding-top: 0; }
.hsa-stack__aside > .hsa-card:last-child { border-bottom: 0; }

.hsa-stack--3 { grid-template-columns: 1fr; }
.hsa-stack__row { display: grid; gap: var(--hsa-gutter); }
.hsa-stack__row--lead { grid-template-columns: 1fr; }

.hsa-stack__numbered,
.hsa-numbered {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.hsa-stack__numbered > li,
.hsa-numbered > li {
	padding-block: .9rem;
	border-bottom: 1px solid var(--hsa-border);
}

.hsa-stack__numbered > li:first-child,
.hsa-numbered > li:first-child { padding-top: 0; }

.hsa-stack__numbered > li:last-child,
.hsa-numbered > li:last-child { border-bottom: 0; }

.hsa-numbered .hsa-card,
.hsa-stack__numbered .hsa-card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: .75rem;
	align-items: start;
}

.hsa-numbered .hsa-card__body,
.hsa-stack__numbered .hsa-card__body { grid-column: 2; }

.hsa-numbered .hsa-card__index,
.hsa-stack__numbered .hsa-card__index {
	grid-row: 1;
	grid-column: 1;
	padding-top: .1rem;
}

/* Carousel. */
.hsa-carousel { position: relative; }

.hsa-carousel__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(15rem, 22rem);
	gap: var(--hsa-gutter);
	overflow-x: auto;
	padding-bottom: .75rem;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	overscroll-behavior-x: contain;
}

.hsa-carousel__track > .hsa-card { scroll-snap-align: start; }

.hsa-carousel__nav {
	display: none;
	gap: .5rem;
	justify-content: flex-end;
	margin-top: .75rem;
}

@media (min-width: 48rem) { .hsa-carousel__nav { display: flex; } }

.hsa-carousel__btn {
	width: 2.4rem;
	height: 2.4rem;
	border: 1px solid var(--hsa-border);
	border-radius: 50%;
	background: var(--hsa-surface);
	cursor: pointer;
	transition: background .15s, border-color .15s;
}

.hsa-carousel__btn:hover {
	background: var(--hsa-primary);
	border-color: var(--hsa-primary);
	color: var(--hsa-on-primary);
}

/* ==========================================================================
   9. Sections
   ========================================================================== */

.hsa-section { padding-block: var(--hsa-section-space); }

.hsa-section--alt { background: var(--hsa-surface-alt); }

.hsa-section--dark {
	background: var(--hsa-heading);
	color: #fff;
}

.hsa-section--dark h2,
.hsa-section--dark h3,
.hsa-section--dark h4,
.hsa-section--dark .hsa-card__title a { color: #fff; }

.hsa-section--dark .hsa-card__excerpt,
.hsa-section--dark .hsa-card__meta { color: rgba(255, 255, 255, .72); }

.hsa-section--dark .hsa-list > .hsa-card,
.hsa-section--dark .hsa-stack__aside > .hsa-card { border-color: rgba(255, 255, 255, .16); }

.hsa-section--brand {
	background: var(--hsa-primary);
	color: var(--hsa-on-primary);
}

.hsa-section--brand h2 { color: inherit; }

.hsa-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: clamp(1.25rem, 3vw, 2rem);
	border-bottom: 2px solid var(--hsa-border);
	padding-bottom: .6rem;
}

.hsa-section--dark .hsa-section__head { border-bottom-color: rgba(255, 255, 255, .2); }

.hsa-section__title {
	position: relative;
	margin: 0;
	font-size: clamp(1.05rem, 2.4vw, 1.35rem);
	letter-spacing: .1em;
	text-transform: uppercase;
}

.hsa-section__title > span {
	position: relative;
	display: inline-block;
	padding-left: .75rem;
}

.hsa-section__title > span::before {
	content: "";
	position: absolute;
	top: .1em;
	bottom: .1em;
	left: 0;
	width: 4px;
	background: var(--hsa-primary);
}

.hsa-section__more {
	flex: 0 0 auto;
	color: var(--hsa-primary);
	font-family: var(--hsa-font-meta);
	font-size: var(--hsa-text-xs);
	font-weight: 700;
	letter-spacing: .09em;
	text-decoration: none;
	text-transform: uppercase;
}

.hsa-section__more:hover { text-decoration: underline; }

.hsa-section--hero { padding-top: clamp(1.5rem, 3vw, 2.5rem); }

.hsa-empty { color: var(--hsa-muted); }

.hsa-adzone { padding-block: 1.25rem; text-align: center; }
.hsa-inline-ad { margin-block: 2rem; text-align: center; }

/* ==========================================================================
   10. Article
   ========================================================================== */

.hsa-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	padding-top: 1.5rem;
	color: var(--hsa-muted);
	font-family: var(--hsa-font-meta);
	font-size: var(--hsa-text-xs);
}

.hsa-breadcrumbs a { text-decoration: none; }
.hsa-breadcrumbs a:hover { color: var(--hsa-primary); }
.hsa-breadcrumbs__sep { opacity: .5; }

.hsa-pagehead { padding-block: clamp(1.75rem, 5vw, 3rem) 0; }
.hsa-pagehead__title { margin-bottom: .35em; }

.hsa-pagehead__desc,
.hsa-pagehead__count { color: var(--hsa-muted); max-width: 46rem; }

.hsa-pagehead__children {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.hsa-pagehead__children a {
	display: inline-block;
	padding: .3rem .75rem;
	border: 1px solid var(--hsa-border);
	border-radius: 999px;
	font-family: var(--hsa-font-meta);
	font-size: var(--hsa-text-xs);
	text-decoration: none;
}

.hsa-pagehead__children a:hover {
	border-color: var(--hsa-primary);
	color: var(--hsa-primary);
}

.hsa-pagehead__search { max-width: 30rem; margin-top: 1.25rem; }

.hsa-article__head {
	max-width: var(--hsa-narrow);
	margin-inline: auto;
	padding-block: clamp(1.25rem, 3vw, 2rem);
	text-align: center;
}

.hsa-article--wide .hsa-article__head,
.hsa-article--sidebar .hsa-article__head {
	max-width: none;
	text-align: left;
}

.hsa-article__title { margin-bottom: .4em; }

.hsa-article__standfirst {
	color: var(--hsa-muted);
	font-size: clamp(1.05rem, 2.2vw, 1.25rem);
	line-height: 1.5;
}

.hsa-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .75rem 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--hsa-border);
	margin-top: 1.5rem;
}

.hsa-article--wide .hsa-byline,
.hsa-article--sidebar .hsa-byline { justify-content: flex-start; }

.hsa-byline__author { display: flex; align-items: center; gap: .6rem; }

.hsa-byline__avatar { border-radius: 50%; }

.hsa-byline__by { font-family: var(--hsa-font-meta); font-size: var(--hsa-text-sm); }

.hsa-byline__name { font-weight: 600; text-decoration: none; }
.hsa-byline__name:hover { color: var(--hsa-primary); }

.hsa-byline__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	color: var(--hsa-muted);
	font-family: var(--hsa-font-meta);
	font-size: var(--hsa-text-xs);
}

.hsa-article__figure {
	max-width: var(--hsa-container);
	margin: clamp(1.25rem, 3vw, 2rem) auto 0;
	padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.hsa-article__img { width: 100%; border-radius: var(--hsa-radius); }

.hsa-article__caption {
	margin-top: .6rem;
	color: var(--hsa-muted);
	font-family: var(--hsa-font-meta);
	font-size: var(--hsa-text-xs);
}

.hsa-article--narrow .hsa-layout__main {
	max-width: var(--hsa-narrow);
	margin-inline: auto;
}

.hsa-prose { font-size: clamp(1.02rem, 1.6vw, 1.13rem); }

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

.hsa-prose h2 { margin-top: 2em; }
.hsa-prose h3 { margin-top: 1.6em; }

.hsa-prose a { color: var(--hsa-primary); }

.hsa-prose img,
.hsa-prose figure { border-radius: var(--hsa-radius); }

.hsa-prose figcaption {
	margin-top: .5rem;
	color: var(--hsa-muted);
	font-family: var(--hsa-font-meta);
	font-size: var(--hsa-text-xs);
}

.hsa-prose blockquote {
	margin: 2em 0;
	padding-left: 1.5rem;
	border-left: 4px solid var(--hsa-primary);
	color: var(--hsa-heading);
	font-family: var(--hsa-font-heading);
	font-size: 1.2em;
	line-height: 1.4;
}

.hsa-prose ul,
.hsa-prose ol { padding-left: 1.4em; }

.hsa-prose li + li { margin-top: .4em; }

.hsa-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--hsa-text-sm);
}

.hsa-prose th,
.hsa-prose td {
	padding: .6rem .75rem;
	border: 1px solid var(--hsa-border);
	text-align: left;
}

.hsa-prose th { background: var(--hsa-surface-alt); }

.hsa-prose code {
	padding: .15em .4em;
	background: var(--hsa-surface-alt);
	border-radius: 3px;
	font-size: .9em;
}

.hsa-prose pre {
	padding: 1rem;
	background: var(--hsa-heading);
	border-radius: var(--hsa-radius);
	color: #f4f4f4;
	overflow-x: auto;
}

.hsa-article__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin-top: 2.5rem;
}

.hsa-article__tags-label {
	color: var(--hsa-muted);
	font-family: var(--hsa-font-meta);
	font-size: var(--hsa-text-xs);
	letter-spacing: .08em;
	text-transform: uppercase;
}

.hsa-article__tags a {
	display: inline-block;
	padding: .25rem .7rem;
	background: var(--hsa-surface-alt);
	border-radius: 999px;
	font-size: var(--hsa-text-xs);
	text-decoration: none;
}

.hsa-article__tags a:hover { background: var(--hsa-primary); color: var(--hsa-on-primary); }

.hsa-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-top: 2rem;
	padding-block: 1.25rem;
	border-block: 1px solid var(--hsa-border);
}

.hsa-share__label {
	color: var(--hsa-muted);
	font-family: var(--hsa-font-meta);
	font-size: var(--hsa-text-xs);
	letter-spacing: .08em;
	text-transform: uppercase;
}

.hsa-share__list {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hsa-share__link {
	display: inline-flex;
	width: 2.3rem;
	height: 2.3rem;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--hsa-border);
	border-radius: 50%;
	background: none;
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
}

.hsa-share__link:hover {
	background: var(--hsa-primary);
	border-color: var(--hsa-primary);
	color: var(--hsa-on-primary);
}

.hsa-share__link--copy {
	width: auto;
	padding-inline: .9rem;
	border-radius: 999px;
	font-family: var(--hsa-font-meta);
	font-size: var(--hsa-text-xs);
}

.hsa-authorbox {
	display: flex;
	gap: 1.25rem;
	margin-top: 2.5rem;
	padding: 1.5rem;
	background: var(--hsa-surface-alt);
	border-radius: var(--hsa-radius);
}

.hsa-authorbox__avatar { flex: 0 0 auto; border-radius: 50%; }

.hsa-authorbox__eyebrow {
	margin: 0 0 .2rem;
	color: var(--hsa-muted);
	font-family: var(--hsa-font-meta);
	font-size: var(--hsa-text-xs);
	letter-spacing: .08em;
	text-transform: uppercase;
}

.hsa-authorbox__name { margin: 0 0 .5rem; font-size: var(--hsa-text-h4); }
.hsa-authorbox__name a { text-decoration: none; }
.hsa-authorbox__bio { margin: 0 0 .6rem; color: var(--hsa-muted); font-size: var(--hsa-text-sm); }

.hsa-authorbox__more {
	color: var(--hsa-primary);
	font-family: var(--hsa-font-meta);
	font-size: var(--hsa-text-xs);
	font-weight: 700;
	letter-spacing: .07em;
	text-decoration: none;
	text-transform: uppercase;
}

.hsa-progress {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 200;
	width: 100%;
	height: 3px;
	pointer-events: none;
}

.hsa-progress > span {
	display: block;
	width: 0;
	height: 100%;
	background: var(--hsa-primary);
	transition: width .1s linear;
}

/* ==========================================================================
   11. Sidebar & widgets
   ========================================================================== */

.hsa-sidebar { min-width: 0; }

.hsa-sidebar__inner {
	/* Matches .hsa-section--hero's padding-top so the first widget heading
	   (e.g. "Popular Posts") lines up with where the story column's content
	   actually starts, instead of sitting flush against the header above it. */
	padding-top: clamp(1.5rem, 3vw, 2.5rem);
	padding-left: 1.75rem;
	border-left: 1px solid var(--hsa-border);
}

@media (max-width: 61.99rem) {
	.hsa-sidebar__inner {
		padding-left: 0;
		border-left: 0;
	}
}

@media (min-width: 62rem) {
	.hsa-sidebar.is-sticky .hsa-sidebar__inner {
		position: sticky;
		top: 5rem;
	}
}

.hsa-sidebar .widget { padding: 0; }

.hsa-sidebar .widget + .widget {
	margin-top: 1.75rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--hsa-border);
}

.widget + .widget { margin-top: 2.25rem; }

.widget__title {
	margin: 0 0 1rem;
	border-bottom: 2px solid var(--hsa-border);
	padding-bottom: .5rem;
	font-size: var(--hsa-text-sm);
	letter-spacing: .1em;
	text-transform: uppercase;
}

.widget__title > span {
	position: relative;
	display: inline-block;
	padding-left: .7rem;
}

.widget__title > span::before {
	content: "";
	position: absolute;
	top: .1em;
	bottom: .1em;
	left: 0;
	width: 3px;
	background: var(--hsa-primary);
}

.widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.widget li + li {
	margin-top: .6rem;
	padding-top: .6rem;
	border-top: 1px solid var(--hsa-border);
}

.widget a { text-decoration: none; }
.widget a:hover { color: var(--hsa-primary); }

.hsa-footer .widget__title { color: #fff; border-bottom-color: rgba(255, 255, 255, .18); }

/* ==========================================================================
   12. HSA TV
   ========================================================================== */

.hsa-tv { padding-block: var(--hsa-section-space); }

.hsa-tv--dark {
	background: #0e0e0e;
	color: #fff;
}

.hsa-tv--dark .hsa-section__title,
.hsa-tv--dark .hsa-tv__headline a,
.hsa-tv--dark .hsa-tv__clip-title a { color: #fff; }

.hsa-tv--dark .hsa-section__head { border-bottom-color: rgba(255, 255, 255, .18); }

.hsa-tv__head { align-items: flex-end; }

.hsa-tv__tagline {
	margin: .35rem 0 0;
	color: var(--hsa-muted);
	font-size: var(--hsa-text-sm);
	text-transform: none;
	letter-spacing: 0;
}

.hsa-tv--dark .hsa-tv__tagline { color: rgba(255, 255, 255, .68); }

.hsa-tv__sections { margin-bottom: 1.5rem; }

.hsa-menu--tv {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hsa-menu--tv a {
	display: inline-block;
	padding: .35rem .85rem;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 999px;
	font-family: var(--hsa-font-meta);
	font-size: var(--hsa-text-xs);
	letter-spacing: .05em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.hsa-tv:not(.hsa-tv--dark) .hsa-menu--tv a { border-color: var(--hsa-border); }

.hsa-menu--tv a:hover {
	background: var(--hsa-primary);
	border-color: var(--hsa-primary);
	color: var(--hsa-on-primary);
}

.hsa-tv__grid { display: grid; gap: var(--hsa-gutter); }

@media (min-width: 56rem) {
	.hsa-tv__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

.hsa-tv__player {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--hsa-radius);
	background: #000;
	aspect-ratio: 16 / 9;
}

.hsa-tv__img { width: 100%; height: 100%; object-fit: cover; opacity: .92; transition: opacity .3s, transform .5s; }
.hsa-tv__player:hover .hsa-tv__img { opacity: 1; transform: scale(1.03); }

.hsa-tv__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: inline-flex;
	width: 4.25rem;
	height: 4.25rem;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--hsa-primary);
	color: var(--hsa-on-primary);
	transform: translate(-50%, -50%);
	transition: transform .2s;
}

.hsa-tv__player:hover .hsa-tv__play { transform: translate(-50%, -50%) scale(1.08); }

.hsa-tv__play--sm { width: 2.1rem; height: 2.1rem; }

.hsa-tv__duration {
	position: absolute;
	right: .6rem;
	bottom: .6rem;
	padding: .15rem .45rem;
	background: rgba(0, 0, 0, .78);
	border-radius: 3px;
	color: #fff;
	font-family: var(--hsa-font-meta);
	font-size: var(--hsa-text-xs);
	font-variant-numeric: tabular-nums;
}

.hsa-tv__body { padding-top: 1rem; }

.hsa-tv__headline { margin: 0 0 .5rem; font-size: var(--hsa-text-h3); }
.hsa-tv__headline a { text-decoration: none; }

.hsa-tv__excerpt { margin: 0; color: var(--hsa-muted); font-size: var(--hsa-text-sm); }
.hsa-tv--dark .hsa-tv__excerpt { color: rgba(255, 255, 255, .7); }

.hsa-tv__rail { display: grid; align-content: start; gap: 1rem; }

.hsa-tv__clip {
	display: grid;
	grid-template-columns: 7.5rem minmax(0, 1fr);
	gap: .85rem;
	align-items: start;
}

.hsa-tv__clip-media {
	position: relative;
	overflow: hidden;
	border-radius: var(--hsa-radius);
	background: #000;
	aspect-ratio: 16 / 9;
}

.hsa-tv__clip-img { width: 100%; height: 100%; object-fit: cover; }

.hsa-tv__clip-title {
	margin: 0;
	font-size: var(--hsa-text-sm);
	line-height: 1.35;
}

.hsa-tv__clip-title a { text-decoration: none; }
.hsa-tv__clip-title a:hover { color: var(--hsa-primary); }

/* ==========================================================================
   13. Newsletter, follow band, footer
   ========================================================================== */

.hsa-newsletter { display: grid; gap: 1.5rem; align-items: center; }

@media (min-width: 52rem) {
	.hsa-newsletter--section,
	.hsa-newsletter--footer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; }
}

.hsa-newsletter__title { margin: 0 0 .35rem; color: inherit; font-size: var(--hsa-text-h2); }
.hsa-newsletter__text { margin: 0; opacity: .85; }

.hsa-subscribe { display: flex; flex-wrap: wrap; gap: .5rem; }

.hsa-subscribe__input {
	flex: 1 1 12rem;
	min-width: 0;
	padding: .8rem 1rem;
	border: 1px solid rgba(0, 0, 0, .18);
	border-radius: var(--hsa-radius);
	background: #fff;
	color: #101010;
}

.hsa-newsletter__consent {
	margin: .65rem 0 0;
	font-size: var(--hsa-text-xs);
	opacity: .75;
}

.hsa-newsletter--sidebar { display: block; }
.hsa-newsletter--sidebar .hsa-newsletter__title { font-size: var(--hsa-text-h4); }
.hsa-newsletter--sidebar .hsa-subscribe { flex-direction: column; }
.hsa-newsletter--sidebar .hsa-subscribe__btn { width: 100%; }

.hsa-section--brand .hsa-subscribe__btn {
	background: var(--hsa-heading);
	color: #fff;
}

.hsa-section--brand .hsa-subscribe__btn:hover { background: #000; }

.hsa-follow {
	padding-block: clamp(1.5rem, 4vw, 2.5rem);
	background: var(--hsa-surface-alt);
	border-top: 1px solid var(--hsa-border);
}

.hsa-follow__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
}

.hsa-follow__title { margin: 0 0 .2rem; font-size: var(--hsa-text-h4); }
.hsa-follow__text { margin: 0; color: var(--hsa-muted); font-size: var(--hsa-text-sm); }

.hsa-social {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hsa-social a {
	display: inline-flex;
	width: 2.3rem;
	height: 2.3rem;
	align-items: center;
	justify-content: center;
	border: 1px solid currentColor;
	border-radius: 50%;
	opacity: .75;
	transition: opacity .15s, background .15s, color .15s, border-color .15s;
}

.hsa-social a:hover {
	background: var(--hsa-primary);
	border-color: var(--hsa-primary);
	color: var(--hsa-on-primary);
	opacity: 1;
}

.hsa-social--topbar a { width: 1.75rem; height: 1.75rem; border: 0; }
.hsa-social--follow a { width: 2.7rem; height: 2.7rem; }

.hsa-footer {
	padding-block: clamp(2.5rem, 6vw, 4rem) 1.5rem;
	background: var(--hsa-footer-bg);
	color: var(--hsa-footer-txt);
}

.hsa-footer a { text-decoration: none; }
.hsa-footer a:hover { color: var(--hsa-primary); }

.hsa-footer__top { display: grid; gap: 2.5rem; }

@media (min-width: 56rem) {
	.hsa-footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 4rem; }
}

.hsa-footer__logo img { max-height: 3rem; filter: brightness(0) invert(1); }
.hsa-footer__logo .hsa-logo__name { color: #fff; }
.hsa-footer__logo .hsa-logo__tagline { color: rgba(255, 255, 255, .6); }

.hsa-footer__about {
	max-width: 26rem;
	margin: 1rem 0;
	font-size: var(--hsa-text-sm);
	opacity: .8;
}

.hsa-footer__columns {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 44rem) {
	.hsa-footer__columns {
		grid-template-columns: repeat(var(--hsa-footer-cols, 4), minmax(0, 1fr));
	}
}

.hsa-footer__menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hsa-footer__menu li + li { margin-top: .55rem; }

.hsa-footer__menu a { font-size: var(--hsa-text-sm); opacity: .85; }
.hsa-footer__menu a:hover { opacity: 1; }

.hsa-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, .14);
}

.hsa-footer__copy { margin: 0; font-size: var(--hsa-text-xs); opacity: .7; }

.hsa-menu--legal {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--hsa-text-xs);
}

.hsa-totop {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 70;
	display: inline-flex;
	width: 2.75rem;
	height: 2.75rem;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: var(--hsa-primary);
	color: var(--hsa-on-primary);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
	cursor: pointer;
}

.hsa-totop[hidden] { display: none; }

/* ==========================================================================
   14. Forms, buttons, pagination
   ========================================================================== */

.hsa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	padding: .8rem 1.5rem;
	border: 0;
	border-radius: var(--hsa-radius);
	background: var(--hsa-primary);
	color: var(--hsa-on-primary);
	font-family: var(--hsa-font-meta);
	font-size: var(--hsa-text-sm);
	font-weight: 700;
	letter-spacing: .07em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .15s, transform .15s;
}

.hsa-btn:hover { background: var(--hsa-primary-dk); }
.hsa-btn:active { transform: translateY(1px); }

.hsa-btn--sm { padding: .5rem 1rem; font-size: var(--hsa-text-xs); }

.hsa-iconbtn {
	display: inline-flex;
	width: 2.4rem;
	height: 2.4rem;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: none;
	cursor: pointer;
	transition: background .15s;
}

.hsa-iconbtn:hover { background: var(--hsa-surface-alt); }

.hsa-searchform { display: flex; gap: .5rem; }

.hsa-searchform__input {
	flex: 1;
	min-width: 0;
	padding: .7rem .9rem;
	border: 1px solid var(--hsa-border);
	border-radius: var(--hsa-radius);
	background: var(--hsa-surface);
}

.hsa-searchform__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-inline: 1rem;
	border: 0;
	border-radius: var(--hsa-radius);
	background: var(--hsa-primary);
	color: var(--hsa-on-primary);
	cursor: pointer;
}

.hsa-pagination { margin-top: 2.5rem; }

.hsa-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	justify-content: center;
}

.hsa-pagination .page-numbers {
	display: inline-flex;
	min-width: 2.4rem;
	height: 2.4rem;
	align-items: center;
	justify-content: center;
	padding-inline: .6rem;
	border: 1px solid var(--hsa-border);
	border-radius: var(--hsa-radius);
	font-family: var(--hsa-font-meta);
	font-size: var(--hsa-text-sm);
	text-decoration: none;
}

.hsa-pagination .page-numbers:hover,
.hsa-pagination .page-numbers.current {
	background: var(--hsa-primary);
	border-color: var(--hsa-primary);
	color: var(--hsa-on-primary);
}

/* --- "Load more" / infinite scroll --------------------------------------- */

.hsa-loadmore {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .75rem;
	margin-top: 2.5rem;
}

.hsa-loadmore__btn[disabled] { opacity: .6; cursor: progress; }

.hsa-loadmore__status {
	margin: 0;
	color: var(--hsa-muted);
	font-family: var(--hsa-font-meta);
	font-size: var(--hsa-text-sm);
	min-height: 1.2em; /* Reserve the line so appending rows never jumps. */
}

/* Infinite scroll still renders the button as the retry/fallback affordance,
   but it should not look like the primary way to advance. */
.hsa-loadmore[data-mode="infinite"] .hsa-loadmore__btn {
	background: transparent;
	color: var(--hsa-muted);
	border: 1px solid var(--hsa-border);
}

/* ==========================================================================
   15. Comments
   ========================================================================== */

.hsa-comments {
	max-width: var(--hsa-narrow);
	margin: 3rem auto 0;
	padding-top: 2rem;
	border-top: 1px solid var(--hsa-border);
}

.hsa-comments__title { font-size: var(--hsa-text-h3); }

.hsa-comments__list,
.hsa-comments__list .children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hsa-comments__list .children { margin-left: 1.5rem; padding-left: 1rem; border-left: 2px solid var(--hsa-border); }

.hsa-comments__list > li { margin-top: 1.5rem; }

/* --- A single comment ---------------------------------------------------- */

.hsa-comment__body {
	padding: 1.25rem 1.35rem;
	border: 1px solid var(--hsa-border);
	border-radius: var(--hsa-radius);
	background: var(--hsa-surface);
}

/* A newsroom reply should read as different in kind, not just indented. */
.hsa-comment--staff > .hsa-comment__body {
	border-color: rgba(var(--hsa-primary-rgb), .45);
	background: rgba(var(--hsa-primary-rgb), .045);
}

.hsa-comment__head {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-bottom: .75rem;
}

.hsa-comment__avatar {
	flex: 0 0 auto;
	border-radius: 50%;
}

.hsa-comment__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .25rem .6rem;
	min-width: 0;
}

.hsa-comment__author,
.hsa-comment__author a {
	color: var(--hsa-heading);
	font-family: var(--hsa-font-meta);
	font-size: var(--hsa-text-sm);
	font-weight: 700;
	text-decoration: none;
}

.hsa-comment__author a:hover { color: var(--hsa-primary); }

.hsa-comment__badge {
	padding: .1rem .45rem;
	border-radius: 2rem;
	background: var(--hsa-primary);
	color: var(--hsa-on-primary);
	font-family: var(--hsa-font-meta);
	font-size: var(--hsa-text-xs);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.hsa-comment__date {
	color: var(--hsa-muted);
	font-family: var(--hsa-font-meta);
	font-size: var(--hsa-text-xs);
}

.hsa-comment__moderation {
	margin-bottom: .6rem;
	color: var(--hsa-muted);
	font-size: var(--hsa-text-sm);
	font-style: italic;
}

.hsa-comment__text > :last-child { margin-bottom: 0; }

.hsa-comment__actions {
	display: flex;
	gap: 1rem;
	margin-top: .85rem;
}

.hsa-comment__actions a {
	color: var(--hsa-primary);
	font-family: var(--hsa-font-meta);
	font-size: var(--hsa-text-xs);
	font-weight: 700;
	letter-spacing: .06em;
	text-decoration: none;
	text-transform: uppercase;
}

.hsa-comment__actions a:hover { text-decoration: underline; }

.hsa-comment__pingback { margin: 0; font-size: var(--hsa-text-sm); }

/* --- The form ------------------------------------------------------------ */

.hsa-comments .comment-respond { margin-top: 2.5rem; }

/*
 * The form carries `hsa-commentform` only — comment_form()'s `class_form`
 * argument replaces WordPress's default `comment-form` class rather than
 * adding to it, so selectors must use ours. The child <p> classes below are
 * still core's.
 */
.hsa-commentform { display: grid; gap: 1rem; }

.hsa-commentform > p { margin: 0; grid-column: 1 / -1; }

/* Name / email / website read better side by side than as a tall stack. */
@media (min-width: 40rem) {
	.hsa-commentform { grid-template-columns: repeat(12, 1fr); }

	.hsa-commentform > .comment-form-author,
	.hsa-commentform > .comment-form-email,
	.hsa-commentform > .comment-form-url {
		grid-column: span 4;
	}
}

.hsa-commentform label {
	display: block;
	margin-bottom: .3rem;
	color: var(--hsa-muted);
	font-family: var(--hsa-font-meta);
	font-size: var(--hsa-text-xs);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.hsa-commentform input[type="text"],
.hsa-commentform input[type="email"],
.hsa-commentform input[type="url"],
.hsa-commentform textarea {
	width: 100%;
	padding: .7rem .9rem;
	border: 1px solid var(--hsa-border);
	border-radius: var(--hsa-radius);
	background: var(--hsa-surface);
	color: var(--hsa-ink);
	font-family: inherit;
	font-size: var(--hsa-text-base);
}

.hsa-commentform input:focus,
.hsa-commentform textarea:focus {
	outline: 2px solid var(--hsa-primary);
	outline-offset: 1px;
	border-color: transparent;
}

.hsa-commentform textarea { min-height: 9rem; resize: vertical; }

.hsa-commentform .comment-notes,
.hsa-commentform .comment-form-cookies-consent label {
	color: var(--hsa-muted);
	font-family: var(--hsa-font-meta);
	font-size: var(--hsa-text-xs);
	letter-spacing: 0;
	text-transform: none;
}

.hsa-commentform .comment-form-cookies-consent {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.hsa-commentform .comment-form-cookies-consent label { margin: 0; }

.hsa-commentform .submit {
	padding: .8rem 1.5rem;
	border: 0;
	border-radius: var(--hsa-radius);
	background: var(--hsa-primary);
	color: var(--hsa-on-primary);
	font-family: var(--hsa-font-meta);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
}

.hsa-commentform .submit:hover { background: var(--hsa-primary-dk); }

.hsa-comments__closed {
	padding: .9rem 1.1rem;
	border-radius: var(--hsa-radius);
	background: var(--hsa-surface-alt);
	color: var(--hsa-muted);
	font-size: var(--hsa-text-sm);
}

/* ==========================================================================
   16. Utilities, 404, accessibility
   ========================================================================== */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	top: .5rem;
	left: .5rem;
	z-index: 999;
	width: auto;
	height: auto;
	padding: .75rem 1.25rem;
	clip: auto;
	clip-path: none;
	background: var(--hsa-primary);
	color: var(--hsa-on-primary);
	font-weight: 700;
}

.hsa-404 { padding-block: clamp(3rem, 8vw, 6rem); }

.hsa-404__inner { max-width: 40rem; margin-inline: auto; text-align: center; }

.hsa-404__code {
	margin: 0;
	color: var(--hsa-border);
	font-family: var(--hsa-font-heading);
	font-size: clamp(4rem, 16vw, 8rem);
	line-height: 1;
}

.hsa-404__title { margin-top: -.25em; }
.hsa-404__text { color: var(--hsa-muted); }
.hsa-404__search { margin-block: 1.5rem; }

.hsa-404__cats {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	justify-content: center;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

.hsa-404__cats a {
	display: inline-block;
	padding: .35rem .85rem;
	border: 1px solid var(--hsa-border);
	border-radius: 999px;
	font-family: var(--hsa-font-meta);
	font-size: var(--hsa-text-xs);
	text-decoration: none;
}

.hsa-404__cats a:hover { border-color: var(--hsa-primary); color: var(--hsa-primary); }

.hsa-noresults {
	padding-block: 3rem;
	text-align: center;
}

.hsa-noresults__title { font-size: var(--hsa-text-h3); }

/* Print — strip the furniture, keep the story. */
@media print {
	.hsa-header,
	.hsa-footer,
	.hsa-follow,
	.hsa-share,
	.hsa-totop,
	.hsa-sidebar,
	.hsa-ticker,
	.hsa-adzone,
	.hsa-section--newsletter,
	.hsa-section--newsletter-band { display: none !important; }

	body { color: #000; font-size: 12pt; }
	.hsa-prose a::after { content: " (" attr(href) ")"; font-size: .85em; }
}