/* ==========================================================================
   SwiftMatch theme styles. Colours reference the CSS custom properties
   defined in style.css and optionally overridden per-site via the
   Customizer (see functions.php: swiftmatch_customizer_css()).
   ========================================================================== */

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/*
 * Baseline image safety net: nothing here relies on this (cards, the hero,
 * etc. all size their own <img> explicitly), it just guarantees that any
 * image a site owner pastes straight into post content, a widget, or a
 * shortcode never overflows its column on a narrow screen.
 */
img {
	max-width: 100%;
	height: auto;
}

.swm-container {
	max-width: var(--swm-max-width);
	margin: 0 auto;
	padding: 0 var(--swm-gutter, 20px);
}

/*
 * A long unbroken string - a song title with no spaces, a pasted URL, a
 * hashtag - cannot wrap, so it prises its column open and makes the whole
 * document wider than the screen. Every browser on iOS then shrinks the
 * entire page to fit, which shows up as the site pulling in from the right
 * edge with a blank strip beside it, rather than as one wide word.
 *
 * Set here, on the wrapper, so it is inherited by card titles, excerpts,
 * widgets and anything else added later, instead of having to be remembered
 * for each one.
 */
.swm-site-content,
.swm-footer {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* ---------- Header ---------- */

.swm-header {
	background: var(--swm-accent);
	border-bottom: 1px solid rgba(0, 0, 0, .08);
	position: sticky;
	top: 0;
	z-index: 50;
}

/* Auto-hide on scroll-down / reveal on scroll-up, mobile only (see
   initHeaderAutoHide() in assets/js/main.js), and only the horizontal pill
   menu row, not the whole header, so the logo/search/dark-mode/grid icons
   stay put and reachable while scrolling. The pill nav already has
   overflow:hidden, collapsing its max-height (rather than sliding it with
   a transform, which would leave an empty gap behind) shrinks it clean out
   of the way and lets the content below settle up into its place. */
.swm-header-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	padding: 14px var(--swm-gutter, 20px);
}

.swm-branding {
	flex: 0 1 auto;
	min-width: 0;
}

.swm-branding img {
	/* A comfortable header logo height. The Customizer's custom-logo control
	   allows a much bigger upload (flex-height/flex-width), that's just so a
	   wide or tall logo doesn't get forced into an awkward crop, the actual
	   on-page size is capped here instead of shown at full upload size. */
	max-height: 40px;
	width: auto;
}

.swm-site-title {
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: middle;
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--swm-accent-contrast);
}

.swm-site-tagline {
	margin: 0;
	font-size: .75rem;
	color: var(--swm-accent-contrast);
	opacity: .75;
}

.swm-pill-nav {
	flex: 1 1 240px;
	min-width: 0;
	overflow: hidden;
}

.swm-pill-nav-inner {
	overflow-x: auto;
	scrollbar-width: none;
	padding: 0;
}

.swm-pill-nav-inner::-webkit-scrollbar {
	display: none;
}

.swm-nav-menu {
	display: flex;
	gap: 10px;
	width: max-content;
	padding: 0;
}

@media (max-width: 720px) {
	.swm-pill-nav {
		flex: 1 1 100%;
		order: 3;
		max-height: 64px;
		opacity: 1;
		background: var(--swm-surface);
		border-bottom: 1px solid var(--swm-border);
		margin: 14px calc(var(--swm-gutter, 20px) * -1) -14px;
		transition: max-height .25s ease, opacity .2s ease;
	}

	.swm-nav-menu {
		padding: 12px var(--swm-gutter, 20px);
	}

	.swm-header-actions {
		margin-left: auto;
	}

	.swm-header.swm-header--hidden .swm-pill-nav {
		max-height: 0;
		opacity: 0;
	}
}


.swm-nav-menu a {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--swm-surface-2);
	font-weight: 800;
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--swm-text);
	padding: 10px 18px;
	border-radius: 999px;
	white-space: nowrap;
}

.swm-nav-menu a:hover,
.swm-nav-menu .current-menu-item > a {
	background: var(--swm-accent);
	color: var(--swm-accent-contrast);
}

/*
 * Optional nav icons: add one of these as a "CSS Class" to a menu item in
 * Appearance > Menus (enable "CSS Classes" under Screen Options first) to
 * get a small icon before its label. Entirely optional, plain text labels
 * work fine without any of this.
 */
.swm-nav-menu li[class*="icon-"] > a::before {
	content: "";
	display: inline-block;
	width: 15px;
	height: 15px;
	background-color: currentColor;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
}

.swm-nav-menu li.icon-home > a::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M3 11l9-8 9 8'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M3 11l9-8 9 8'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3C/svg%3E");
}

.swm-nav-menu li.icon-music > a::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E");
}

.swm-nav-menu li.icon-stories > a::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cline x1='8' y1='8' x2='16' y2='8'/%3E%3Cline x1='8' y1='13' x2='16' y2='13'/%3E%3Cline x1='8' y1='18' x2='12' y2='18'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cline x1='8' y1='8' x2='16' y2='8'/%3E%3Cline x1='8' y1='13' x2='16' y2='13'/%3E%3Cline x1='8' y1='18' x2='12' y2='18'/%3E%3C/svg%3E");
}

.swm-nav-menu li.icon-albums > a::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E");
}

.swm-nav-menu li.icon-articles > a::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cline x1='4' y1='6' x2='20' y2='6'/%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cline x1='4' y1='18' x2='14' y2='18'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cline x1='4' y1='6' x2='20' y2='6'/%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cline x1='4' y1='18' x2='14' y2='18'/%3E%3C/svg%3E");
}

.swm-menu-hint {
	display: flex;
	align-items: center;
	padding: 0 4px;
}

.swm-menu-hint a {
	color: var(--swm-text-muted);
	font-size: .78rem;
	white-space: nowrap;
}

.swm-header-actions {
	flex: none;
	display: flex;
	align-items: center;
	gap: 6px;
}

.swm-icon-btn {
	background: transparent;
	border: none;
	color: var(--swm-accent-contrast);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: .9;
}

.swm-icon-btn:hover {
	opacity: 1;
	background: rgba(255, 255, 255, .12);
}

.swm-search-panel,
.swm-utility-panel {
	background: var(--swm-surface);
	border-top: 1px solid var(--swm-border);
	padding: 14px 0;
}

.swm-utility-menu {
	display: flex;
	flex-direction: column;
}

.swm-utility-menu a {
	display: block;
	padding: 10px 4px;
	font-weight: 600;
	color: var(--swm-text);
	border-bottom: 1px solid var(--swm-border);
}

.swm-utility-menu li:last-child a {
	border-bottom: none;
}

.swm-utility-menu a:hover {
	color: var(--swm-accent);
}

.swm-menu-hint-static {
	color: var(--swm-text-muted);
	font-size: .85rem;
}

.swm-menu-hint-static a {
	color: var(--swm-accent);
}

.swm-search-form {
	position: relative;
	display: flex;
	align-items: center;
	background: var(--swm-surface);
	border: 1px solid var(--swm-border);
	border-radius: 999px;
	padding: 4px 4px 4px 18px;
	box-shadow: var(--swm-shadow);
}

.swm-search-form-icon {
	flex: 0 0 auto;
	color: var(--swm-text-muted);
	margin-right: 8px;
}

.swm-search-input {
	flex: 1;
	min-width: 0;
	padding: 10px 0;
	background: transparent;
	border: none;
	color: var(--swm-text);
}

.swm-search-input:focus {
	outline: none;
}

.swm-search-submit {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--swm-accent);
	color: var(--swm-accent-contrast);
	border: none;
	border-radius: 50%;
	cursor: pointer;
}

/* ---------- Layout: main + sidebar ---------- */

/*
 * padding-top/-bottom only, and deliberately NOT the "padding" shorthand:
 * these elements are also .swm-container (for the max-width + left/right
 * gutter), and a shorthand here would reset that gutter's left/right value
 * to 0, pinning every image and card flush against the edge of the screen.
 */
.swm-archive,
.swm-single {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 40px;
	padding-top: 32px;
	padding-bottom: 60px;
	align-items: start;
}

/*
 * The homepage has no sidebar, its own "Trending" section already lives in
 * the main content flow, so its sections use the full container width.
 */
.swm-front-page {
	padding-top: 32px;
	padding-bottom: 60px;
}

.swm-front-main {
	min-width: 0;
}

.swm-sidebar {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
	position: sticky;
	top: 100px;
	align-self: start;
}

/* ---------- Section heading ---------- */

.swm-home-section {
	margin-bottom: 44px;
}

/* A visible rule between one homepage section and the next (New Music,
   Stories, Albums, Trending/Latest...), so each block reads as its own
   section instead of just floating whitespace between them. Scoped to the
   homepage only, and to section-follows-section/hero so it never adds a
   stray line above the very first section. */
.swm-front-page .swm-front-main > .swm-home-section + .swm-home-section,
.swm-front-page .swm-front-main > .swm-hero + .swm-home-section {
	border-top: 1px solid var(--swm-border);
	padding-top: 40px;
}

.swm-section-heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--swm-border);
	padding-bottom: 14px;
}

.swm-section-heading h2 {
	position: relative;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.2;
	margin: 0;
	padding-bottom: 10px;
}

.swm-section-heading h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 52px;
	height: 3px;
	border-radius: 2px;
	background: var(--swm-accent);
}

.swm-see-all {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: .85rem;
	font-weight: 700;
	color: var(--swm-accent);
	white-space: nowrap;
}

/* ---------- Cards ---------- */

.swm-card-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}

.swm-card {
	position: relative;
	min-width: 0;
}

.swm-card-thumb,
.swm-card-img {
	max-width: 100%;
}

.swm-card--grid,
.swm-card--plain {
	display: flex;
	flex-direction: column;
}

/*
 * Every card in a grid gets the same box: surface, border, radius, shadow,
 * padding. "The Latest" used to be the one exception — it rendered as bare
 * thumbnails and titles butted up against each other with nothing between
 * them, so on the homepage one post's title ran straight into the next
 * post's picture and the section read as a jumble rather than a list of
 * separate stories. There is no reason for it to be the odd one out.
 */
.swm-card--grid,
.swm-card--plain {
	background: var(--swm-surface);
	border: 1px solid var(--swm-border);
	border-radius: var(--swm-radius-lg);
	box-shadow: var(--swm-shadow);
	padding: 10px;
	transition: box-shadow .18s ease, transform .18s ease;
}

.swm-card--grid:hover,
.swm-card--plain:hover {
	box-shadow: var(--swm-shadow-lg, var(--swm-shadow));
	transform: translateY(-2px);
}

.swm-card--grid .swm-card-thumb {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--swm-radius);
	background: var(--swm-surface-2);
}

.swm-card--plain .swm-card-thumb {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--swm-radius);
	background: var(--swm-surface-2);
}

.swm-card--grid .swm-card-img,
.swm-card--plain .swm-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.swm-card-img--placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--swm-surface), var(--swm-surface-2));
}

/* Same trap as the footer tags: a flex/grid item reports its longest word
   as its minimum width unless "anywhere" is used, so one unbroken word in a
   title or excerpt widens the whole listing — and with it the page. */
.swm-card-body,
.swm-card-title,
.swm-card-excerpt,
.swm-card-excerpt-wrap {
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.swm-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.swm-card--grid .swm-card-body {
	padding-top: 10px;
}

.swm-card--plain .swm-card-body {
	padding-top: 10px;
}

.swm-card-cat {
	display: inline-block;
	font-size: .7rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--swm-accent);
	margin-bottom: 4px;
}

.swm-card-title {
	font-size: .98rem;
	margin: 0 0 8px;
}

.swm-card-title a:hover {
	color: var(--swm-accent);
}

.swm-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: auto;
}

.swm-card--grid .swm-card-footer,
.swm-card--plain .swm-card-footer {
	padding-top: 10px;
	border-top: 1px dashed var(--swm-border);
}

.swm-card-meta {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 14px;
	font-size: .76rem;
	color: var(--swm-text-muted);
	min-width: 0;
}

.swm-card-meta-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.swm-card-meta-row span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.swm-card-meta-time {
	color: var(--swm-text-muted);
}

.swm-card-meta-author b {
	color: var(--swm-accent);
}

.swm-card-excerpt {
	font-size: .88rem;
	color: var(--swm-text-muted);
	margin: 4px 0 8px;
}

.swm-card-excerpt-wrap {
	margin-bottom: 8px;
}

.swm-card-readmore {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: .8rem;
	font-weight: 700;
	color: var(--swm-accent);
}

.swm-card-readmore:hover {
	text-decoration: underline;
}

/*
 * The excerpt + Read More are a "wider screens only" touch, on the 2-column
 * mobile grid they'd crowd out the meta/bookmark row, so mobile keeps the
 * card compact (title + meta) instead.
 */
@media (max-width: 960px) {
	.swm-card--grid .swm-card-excerpt-wrap,
	.swm-card--plain .swm-card-excerpt-wrap {
		display: none;
	}
}

/* List style (archives, "The Latest") */

.swm-list {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.swm-card--list {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 16px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--swm-border);
}

.swm-card--list .swm-card-thumb {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: var(--swm-radius);
	overflow: hidden;
	background: var(--swm-surface);
	box-shadow: var(--swm-shadow);
}

.swm-card--list .swm-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Compact style (sidebar trending) */

.swm-card--compact {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 10px;
	align-items: center;
}

.swm-card--compact .swm-card-thumb {
	width: 56px;
	height: 56px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--swm-surface-2);
}

.swm-card--compact .swm-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.swm-card--compact .swm-card-title {
	font-size: .85rem;
	margin: 0;
}

/* ---------- Bookmark/save button ---------- */

.swm-bookmark-btn {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--swm-surface);
	border: 1px solid var(--swm-border);
	color: var(--swm-text-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.swm-bookmark-btn:hover {
	color: var(--swm-accent);
	border-color: var(--swm-accent);
}

.swm-bookmark-btn--overlay {
	position: absolute;
	bottom: 14px;
	right: 14px;
	z-index: 2;
	background: rgba(15, 12, 20, .55);
	border: none;
	color: #fff;
	backdrop-filter: blur(2px);
}

.swm-bookmark-btn--overlay:hover {
	color: #fff;
	background: rgba(15, 12, 20, .75);
}

.swm-bookmark-btn--rail {
	position: static;
	width: 38px;
	height: 38px;
}

.swm-bookmark-btn.is-saved {
	color: var(--swm-accent);
}

.swm-bookmark-btn.is-saved svg {
	fill: currentColor;
}

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

.swm-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 24px;
	margin-bottom: 44px;
}

.swm-hero-feature {
	position: relative;
}

.swm-hero-feature-thumb {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	border-radius: var(--swm-radius-lg);
	overflow: hidden;
	background: var(--swm-surface);
	box-shadow: var(--swm-shadow);
}

.swm-hero-feature-thumb .swm-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.swm-hero-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	background: var(--swm-accent);
	color: var(--swm-accent-contrast);
	font-size: .75rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 6px 14px;
	border-radius: 999px;
}

.swm-hero-feature-meta {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 40px 60px 16px 20px;
	background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .75));
	border-radius: 0 0 var(--swm-radius-lg) var(--swm-radius-lg);
}

.swm-hero-author {
	color: #fff;
	font-size: .8rem;
	opacity: .85;
}

.swm-hero-feature-title {
	color: #fff;
	font-size: 1.4rem;
	margin: 4px 0 0;
}

.swm-hero-feature-title a {
	color: inherit;
}

.swm-hero-cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 12px;
	background: var(--swm-accent);
	color: var(--swm-accent-contrast);
	font-size: .78rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .03em;
	padding: 9px 16px;
	border-radius: 999px;
}

.swm-hero-side {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.swm-hero-side-item {
	position: relative;
	/* Plain flexbox on purpose, not CSS Grid: a grid built from one column
	   fixed-row item (the thumbnail) and another spanning two implicit rows
	   (arrow-over-bookmark) renders inconsistently across browsers when
	   those row tracks are never explicitly declared (this is what caused
	   the large blank gap under some thumbnails). Flexbox's align-items
	   simply centers every child against the tallest one, no implicit-row
	   guessing involved. */
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--swm-surface);
	border: 1px solid var(--swm-border);
	border-radius: var(--swm-radius);
	padding: 10px;
	box-shadow: var(--swm-shadow);
}

.swm-hero-side-thumb {
	display: block;
	flex: none;
	width: 84px;
	height: 84px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--swm-surface-2);
}

.swm-hero-side-thumb .swm-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.swm-hero-side-body {
	flex: 1 1 auto;
	min-width: 0;
}

.swm-hero-side-title {
	font-size: .92rem;
	margin: 0 0 4px;
}

.swm-hero-side-actions {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.swm-hero-side-arrow {
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: 50%;
	border: 1px solid var(--swm-border);
	background: var(--swm-surface);
	color: var(--swm-text-muted);
	display: flex;
	align-items: center;
	justify-content: center;
}

.swm-hero-side-arrow svg {
	width: 18px;
	height: 18px;
}

.swm-hero-side-arrow:hover {
	border-color: var(--swm-accent);
	color: var(--swm-accent);
}

.swm-hero-side-item .swm-bookmark-btn {
	flex: none;
	width: 34px;
	height: 34px;
	border: 1px solid var(--swm-border);
	background: var(--swm-surface);
}

.swm-hero-side-item .swm-bookmark-btn svg {
	width: 18px;
	height: 18px;
}

/* ---------- Carousel (Trending) ---------- */

.swm-carousel-controls {
	display: flex;
	gap: 8px;
}

.swm-carousel-btn {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--swm-border);
	background: var(--swm-surface);
	color: var(--swm-text);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.swm-carousel-btn:hover {
	border-color: var(--swm-accent);
	color: var(--swm-accent);
}

.swm-carousel-track {
	display: flex;
	gap: 18px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 4px;
}

.swm-carousel-track::-webkit-scrollbar {
	display: none;
}

.swm-carousel-track > .swm-card {
	flex: 0 0 auto;
	width: 240px;
	scroll-snap-align: start;
}

/* ---------- Back to top ---------- */

.swm-back-to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--swm-accent);
	color: var(--swm-accent-contrast);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
	z-index: 60;
}

.swm-back-to-top[hidden] {
	display: none;
}

/* ---------- Sidebar widgets ---------- */

.swm-widget {
	background: var(--swm-surface);
	border: 1px solid var(--swm-border);
	border-radius: var(--swm-radius);
	padding: 18px;
}

.swm-widget-title {
	font-size: 1rem;
	margin-bottom: 14px;
}

/* ---------- Homepage: Latest + Trending sidebar ---------- */

/* The Latest column is the main content; Trending Now sits beside it as a
   sticky sidebar-style column at the same level, desktop only. On mobile
   this collapses to one column and Trending simply falls in after Latest
   in source order, so it appears underneath rather than beside it. */
.swm-latest-trending-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 32px;
	align-items: start;
}

.swm-latest-col {
	min-width: 0;
}

/*
 * This column is roughly two thirds of the page, not the whole of it, so the
 * standard four-across grid put four cards into the space three belong in —
 * each one too narrow for its own title, which is the other half of why the
 * section looked crowded and hard to read. Three across here, and the
 * responsive steps below have to be repeated for this selector because it is
 * more specific than the plain .swm-card-grid rules in the media queries.
 */
.swm-latest-col .swm-card-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 960px) {
	.swm-latest-col .swm-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.swm-latest-col .swm-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
}

.swm-trending-col {
	position: sticky;
	top: 100px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.swm-trending-widget .swm-section-heading,
.swm-search-widget .swm-section-heading {
	margin-bottom: 14px;
}

.swm-trending-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.swm-trending-item {
	display: flex;
	align-items: center;
	gap: 10px;
}

.swm-trending-rank {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--swm-surface-2);
	color: var(--swm-accent);
	font-size: .78rem;
	font-weight: 800;
}

.swm-trending-item .swm-card {
	flex: 1 1 auto;
	min-width: 0;
}

@media (max-width: 960px) {
	.swm-latest-trending-grid {
		grid-template-columns: 1fr;
	}

	.swm-trending-col {
		position: static;
	}
}

/* ---------- Load more ---------- */

.swm-load-more-wrap {
	text-align: center;
	margin-top: 28px;
}

.swm-load-more {
	background: var(--swm-surface);
	border: 1px solid var(--swm-border);
	color: var(--swm-text);
	padding: 12px 28px;
	border-radius: var(--swm-radius);
	font-weight: 700;
	cursor: pointer;
}

.swm-load-more:hover {
	border-color: var(--swm-accent);
	color: var(--swm-accent);
}

.swm-no-results {
	color: var(--swm-text-muted);
}

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

.swm-breadcrumbs {
	font-size: .82rem;
	color: var(--swm-text-muted);
	margin-bottom: 18px;
}

.swm-breadcrumbs a:hover {
	color: var(--swm-accent);
}

.swm-breadcrumb-current {
	color: var(--swm-text);
}

/* ---------- Archive header ---------- */

.swm-archive-header {
	margin-bottom: 24px;
}

.swm-archive-header h1 {
	font-size: 1.6rem;
}

.swm-archive-description {
	color: var(--swm-text-muted);
}

/* ---------- Single post ---------- */

.swm-post-header {
	max-width: 760px;
	margin: 0 auto 20px;
	text-align: center;
}

.swm-post-cat-pill {
	display: inline-block;
	background: var(--swm-surface-2);
	color: var(--swm-accent);
	font-size: .72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .03em;
	padding: 6px 14px;
	border-radius: 999px;
	margin-bottom: 14px;
}

.swm-post-title {
	font-size: 2.1rem;
	margin: 0 0 12px;
}

.swm-post-subtitle {
	font-size: 1.05rem;
	color: var(--swm-text-muted);
	margin: 0 0 18px;
}

.swm-post-meta {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: .85rem;
	color: var(--swm-text-muted);
}

.swm-post-meta a {
	color: var(--swm-text-muted);
}

.swm-post-meta-avatar {
	display: inline-flex;
	line-height: 0;
}

.swm-post-meta-avatar img {
	width: 26px;
	height: 26px;
	border-radius: 50%;
}

.swm-post-meta-author {
	font-weight: 700;
	color: var(--swm-text);
}

.swm-post-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.swm-meta-dot {
	color: var(--swm-border);
}

.swm-post-meta-divider {
	max-width: var(--swm-max-width);
	height: 1px;
	background: var(--swm-border);
	margin: 20px 0;
}

.swm-post-thumb {
	border-radius: 0;
	overflow: hidden;
	margin: 0 0 28px;
	background: var(--swm-surface);
}

.swm-post-body {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 24px;
	align-items: start;
}

.swm-post-share-rail {
	position: sticky;
	top: 100px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.swm-post-content-col {
	min-width: 0;
}

.swm-post-content {
	font-size: 1.03rem;
	line-height: 1.75;
}

/* Drop cap on the article's opening paragraph, matching the reference
   design's large lead letter. */
.swm-post-content > p:first-of-type::first-letter {
	float: left;
	font-family: var(--swm-font-heading);
	font-weight: 800;
	font-size: 3.6em;
	line-height: .82;
	padding: .05em .08em 0 0;
	color: var(--swm-accent);
}

.swm-post-content img {
	display: block;
	margin: 20px auto;
	border-radius: var(--swm-radius);
}

/* ------------------------------------------------------------------
   Nothing pasted into a post may be wider than the column.
   ------------------------------------------------------------------
   One over-wide element makes the whole document wider than the phone
   screen, and WebKit — which every browser on iOS runs on — responds by
   shrinking the entire page to fit. That is why a single wide element
   left a blank strip down the right of the site and pulled the header
   in from the edge, rather than just sticking out on its own.

   The cure is to make the content fit, not to clip it. Clipping with
   overflow hides the symptom by cutting the right-hand side off
   whatever was too wide. So media is capped here, and the things that
   genuinely cannot shrink — tables, code blocks — scroll sideways
   inside their own box instead, staying readable while the page keeps
   the right width. */

.swm-post-content iframe,
.swm-post-content video,
.swm-post-content embed,
.swm-post-content object,
.swm-post-content img,
.swm-post-content svg,
.swm-post-content canvas {
	max-width: 100%;
}

/* An embed carrying width="560" also carries height="315"; releasing the
   height stops it letterboxing once the width is capped. */
.swm-post-content iframe,
.swm-post-content video {
	width: 100%;
}

/* A long unbroken URL or hashtag is the other classic culprit — it
   cannot wrap, so it prises the column open by itself. */
.swm-post-content {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* Tables scroll instead of being cut off. display:block is what makes a
   table scrollable at all. */
.swm-post-content table {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.swm-post-content pre {
	max-width: 100%;
	overflow-x: auto;
	white-space: pre-wrap;
	word-break: break-word;
}

/* A wrapper carrying an inline pixel width — common in pasted embed
   code — is reached by none of the above, so cap direct children too. */
.swm-post-content > * {
	max-width: 100%;
}

.swm-post-content a {
	color: var(--swm-accent);
	text-decoration: underline;
}

/* Streaming/download box */

.swm-stream-box {
	background: var(--swm-surface);
	border: 1px solid var(--swm-border);
	border-radius: var(--swm-radius);
	padding: 18px;
	margin: 24px 0;
}

.swm-embed {
	margin-bottom: 14px;
}

.swm-embed iframe {
	width: 100%;
	border: 0;
	border-radius: 8px;
}

.swm-stream-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.swm-stream-btn {
	background: var(--swm-accent);
	color: var(--swm-accent-contrast);
	padding: 10px 18px;
	border-radius: 999px;
	font-weight: 700;
	font-size: .85rem;
}

.swm-stream-btn:hover {
	opacity: .88;
}

/* Tags + share footer row */

.swm-post-footer-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	margin: 28px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--swm-border);
}

.swm-post-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.swm-post-tags a {
	background: var(--swm-surface-2);
	padding: 6px 12px;
	border-radius: 999px;
	font-size: .8rem;
	color: var(--swm-text-muted);
}

.swm-post-tags a:hover {
	color: var(--swm-accent);
}

/* Share (row = footer row / rail = sticky vertical sidebar) */

.swm-share {
	display: flex;
	align-items: center;
	gap: 10px;
}

.swm-share--row {
	flex-wrap: wrap;
}

.swm-share--rail {
	flex-direction: column;
}

.swm-share-label {
	font-weight: 700;
	font-size: .85rem;
	color: var(--swm-text-muted);
}

.swm-share-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--swm-border);
	background: var(--swm-surface);
	color: var(--swm-text-muted);
}

.swm-share--row .swm-share-btn {
	width: auto;
	height: auto;
	padding: 8px;
	border-radius: 50%;
}

.swm-share--rail .swm-share-btn {
	width: 38px;
	height: 38px;
	border-radius: 50%;
}

.swm-share-btn:hover {
	border-color: var(--swm-accent);
	color: var(--swm-accent);
}

.swm-share-copy-tip {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	background: var(--swm-text);
	color: var(--swm-bg);
	font-size: .7rem;
	font-weight: 600;
	padding: 4px 9px;
	border-radius: 6px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease;
}

.swm-share-copy.is-copied .swm-share-copy-tip {
	opacity: 1;
}

/* The rail is a nice-to-have on wide screens; on narrower layouts the
   footer row's share buttons are always available, so the rail just
   steps out of the way instead of cramping the article column. */
@media (max-width: 900px) {
	.swm-post-body {
		grid-template-columns: 1fr;
	}

	.swm-post-share-rail {
		display: none;
	}
}

/* About the author */

.swm-author-box {
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--swm-surface);
	border: 1px solid var(--swm-border);
	border-radius: var(--swm-radius);
	padding: 20px;
	margin-top: 24px;
}

.swm-author-avatar img {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: block;
}

.swm-author-info {
	flex: 1 1 auto;
	min-width: 0;
}

.swm-author-kicker {
	display: block;
	font-size: .72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--swm-text-muted);
	margin-bottom: 4px;
}

.swm-author-name {
	font-size: 1.1rem;
	margin: 0 0 6px;
}

.swm-author-archive-link {
	font-size: .85rem;
	font-weight: 700;
	color: var(--swm-accent);
}

.swm-author-website-btn {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--swm-border);
	color: var(--swm-text-muted);
}

.swm-author-website-btn:hover {
	border-color: var(--swm-accent);
	color: var(--swm-accent);
}

/* ---------- Comments ---------- */

.swm-comments {
	margin-top: 40px;
	padding-top: 30px;
	border-top: 1px solid var(--swm-border);
}

.swm-comments-title {
	font-size: 1.2rem;
	margin-bottom: 18px;
}

.swm-comment-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 24px;
}

.swm-comment-list ol {
	margin-top: 12px;
	padding-left: 24px;
}

.swm-comment-form input[type="text"],
.swm-comment-form input[type="email"],
.swm-comment-form input[type="url"],
.swm-comment-form textarea {
	width: 100%;
	padding: 10px 14px;
	background: var(--swm-surface);
	border: 1px solid var(--swm-border);
	border-radius: var(--swm-radius);
	color: var(--swm-text);
	margin-bottom: 12px;
}

.swm-comment-submit {
	background: var(--swm-accent);
	color: var(--swm-accent-contrast);
	border: none;
	padding: 10px 22px;
	border-radius: var(--swm-radius);
	font-weight: 700;
	cursor: pointer;
}

/* ---------- Footer ---------- */

/*
 * One centred column: links row, popular tags, social icons, copyright.
 * Everything is centred and capped in width so the footer reads as a tidy
 * sign-off rather than a second sitemap.
 */
.swm-footer {
	background: #0e0c12;
	color: rgba(255, 255, 255, .68);
	margin-top: 48px;
	padding: 44px 0 26px;
}

.swm-footer-inner {
	text-align: center;
}

.swm-footer-widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 24px;
	margin-bottom: 32px;
	text-align: left;
}

.swm-footer-block {
	margin-bottom: 30px;
}

.swm-footer-block-title {
	color: #fff;
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin: 0 0 16px;
	opacity: .75;
}

/* The links row. Wraps onto as many lines as it needs, stays centred. */
.swm-footer-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.swm-footer-menu li {
	margin: 0;
}

.swm-footer-menu a {
	font-size: .95rem;
	font-weight: 600;
	color: rgba(255, 255, 255, .82);
	transition: color .15s ease;
}

.swm-footer-menu a:hover,
.swm-footer-menu a:focus {
	color: #fff;
}

.swm-footer .swm-menu-hint-static a {
	color: rgba(255, 255, 255, .55);
	font-size: .85rem;
	text-decoration: underline;
}

/* Popular tags: small pills, deliberately quieter than the links above. */
.swm-tag-cloud {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * THE FIX FOR THE FLOATING SITE.
 *
 * "overflow-wrap: break-word" is not enough here, and that is a genuine
 * trap: it lets a long word break onto the next line, but it does NOT
 * reduce the element's intrinsic minimum width. A flex item still reports
 * its longest word as its minimum size and refuses to shrink below it, so
 * one tag like "DownloadLatestNaijaMusicMp3FreeOn..." pushed the whole
 * page wider than the phone — and WebKit then shrank the entire site to
 * fit, which is what the blank strip down the right-hand side was.
 *
 * "anywhere" is the one that also shrinks the minimum width, and
 * min-width:0 lets the flex item act on it.
 */
.swm-footer-menu li,
.swm-tag-cloud li {
	min-width: 0;
}

.swm-footer-menu a,
.swm-tag-cloud a {
	overflow-wrap: anywhere;
	word-break: break-word;
}

.swm-tag-cloud a {
	display: inline-block;
	padding: 6px 13px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .1);
	color: rgba(255, 255, 255, .72);
	font-size: .82rem;
	line-height: 1.3;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.swm-tag-cloud a:hover,
.swm-tag-cloud a:focus {
	background: var(--swm-accent);
	border-color: var(--swm-accent);
	color: var(--swm-accent-contrast);
}

/* Social icons. */
.swm-footer-social {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
}

.swm-footer-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	color: rgba(255, 255, 255, .8);
	transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

.swm-footer-social a:hover,
.swm-footer-social a:focus {
	background: var(--swm-accent);
	color: var(--swm-accent-contrast);
	transform: translateY(-2px);
}

.swm-footer-bottom {
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.swm-copyright {
	font-size: .82rem;
	color: rgba(255, 255, 255, .5);
	margin: 0;
}

@media (max-width: 600px) {
	.swm-footer { padding: 34px 0 22px; }
	.swm-footer-menu { gap: 10px 20px; }
	.swm-footer-menu a { font-size: .9rem; }
	.swm-footer-widgets { text-align: center; }
}

/* ---------- DMCA notice ---------- */

.swm-dmca {
	margin: 32px 0 0;
	padding: 18px 20px;
	border: 1px solid var(--swm-border);
	border-left: 4px solid var(--swm-accent);
	border-radius: var(--swm-radius);
	background: var(--swm-surface-2);
}

.swm-dmca-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	font-size: .82rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--swm-text);
}

.swm-dmca-title svg {
	flex: 0 0 auto;
	color: var(--swm-accent);
}

.swm-dmca-text {
	margin: 0;
	font-size: .9rem;
	line-height: 1.6;
	color: var(--swm-text-muted);
}

.swm-dmca-action {
	margin: 10px 0 0;
}

.swm-dmca-action a {
	font-size: .88rem;
	font-weight: 700;
	color: var(--swm-accent);
	border-bottom: 1px solid currentColor;
}

/* ---------- Simplified comment form ---------- */

.swm-comment-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 16px;
}

.swm-comment-field label {
	font-size: .85rem;
	font-weight: 700;
	color: var(--swm-text);
}

.swm-comment-field .swm-optional {
	font-weight: 500;
	color: var(--swm-text-muted);
}

.swm-comment-field input[type="text"],
.swm-comment-field textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--swm-border);
	border-radius: var(--swm-radius);
	background: var(--swm-surface);
	color: var(--swm-text);
	font-size: .95rem;
	line-height: 1.5;
}

.swm-comment-field textarea {
	resize: vertical;
	min-height: 130px;
}

.swm-comment-field input[type="text"]:focus,
.swm-comment-field textarea:focus {
	outline: none;
	border-color: var(--swm-accent);
	box-shadow: 0 0 0 3px rgba(128, 128, 128, .18);
}

/* comments.php gives the form the class "swm-comment-form", not WordPress's
   own "comment-form", so both are listed here - miss that and none of this
   applies. WordPress prints the name field above the comment box for logged
   out visitors; the box is the point, so it is ordered first and the
   optional name sits under it. */
.swm-comment-form,
.comment-form {
	display: flex;
	flex-direction: column;
}

.swm-comment-form .comment-form-comment,
.comment-form .comment-form-comment { order: 1; }

.swm-comment-form .comment-form-author,
.comment-form .comment-form-author  { order: 2; }

.swm-comment-form .form-submit,
.comment-form .form-submit          { order: 3; margin: 0; }


/* ---------- Misc ---------- */

.swm-setup-hint {
	background: var(--swm-surface);
	border: 1px dashed var(--swm-border);
	border-radius: var(--swm-radius);
	padding: 16px;
	color: var(--swm-text-muted);
}

.swm-setup-hint a {
	color: var(--swm-accent);
}

.swm-404 {
	display: block;
	text-align: center;
	padding: 60px 0;
}

.swm-404 .swm-search-form {
	max-width: 420px;
	margin: 20px auto;
}

.swm-home-link {
	display: inline-block;
	margin-top: 16px;
	color: var(--swm-accent);
	font-weight: 700;
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
	.swm-archive,
	.swm-single {
		grid-template-columns: 1fr;
	}

	.swm-sidebar {
		position: static;
	}

	.swm-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.swm-hero {
		grid-template-columns: 1fr;
	}

	.swm-hero-feature-thumb {
		aspect-ratio: 4 / 5;
	}
}

@media (max-width: 480px) {
	.swm-carousel-track > .swm-card {
		width: 180px;
	}

	.swm-back-to-top {
		right: 16px;
		bottom: 16px;
	}

	.swm-hero-feature-title {
		font-size: 1.15rem;
	}

	.swm-hero-feature-meta {
		padding: 32px 52px 14px 14px;
	}

	.swm-hero-cta {
		padding: 8px 13px;
		font-size: .72rem;
	}

	.swm-hero-side-item {
		gap: 10px;
		padding: 8px;
	}

	.swm-hero-side-thumb {
		width: 60px;
		height: 60px;
	}

	.swm-hero-side-arrow,
	.swm-hero-side-item .swm-bookmark-btn {
		width: 30px;
		height: 30px;
	}
}

@media (max-width: 720px) {
	.swm-header-top {
		position: relative;
	}

	.swm-branding img {
		max-height: 32px;
	}

	.swm-card--list {
		grid-template-columns: 100px 1fr;
	}
}

@media (max-width: 520px) {
	/*
	 * "1fr" means "minmax(auto, 1fr)", and that auto minimum is the track's
	 * min-content size — so the column CANNOT shrink below the widest thing
	 * inside it. An image whose max-width:100% resolves against a track that
	 * is itself still being sized falls back to its intrinsic width, and the
	 * grid quietly grows past the screen. Safari answers a page wider than
	 * the viewport by shrinking the whole page, which is the blank strip down
	 * the right-hand side.
	 *
	 * The base rule and the 960px rule both use minmax(0, 1fr) already. This
	 * breakpoint was the only one written as a bare 1fr — and it is the only
	 * one that applies at phone width, which is why the fault appeared only
	 * on a phone, and only on the homepage and single posts: the category
	 * archive has no card grid at all.
	 */
	.swm-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
}