/**
 * Header and footer treatment.
 *
 * Loaded after skin.css. The aim is a header that feels like part of a game
 * site rather than a bar with links on it: a lit accent edge, depth that
 * appears on scroll, and motion that responds to the pointer instead of
 * running on a loop.
 *
 * Every effect here animates transform, opacity or filter only.
 */

/* ==========================================================================
   Header
   ========================================================================== */

.wpx-header {
	position: relative;
	background:
		linear-gradient(180deg, rgb(from var(--wpx-surface-2) r g b / 0.98), rgb(from var(--wpx-surface-1) r g b / 0.98));
	border-block-end: 0;
	box-shadow: none;
	isolation: isolate;
}

/* A lit edge along the top, brightest under the pointer. */
.wpx-header::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 2px;
	background: linear-gradient(
		90deg,
		transparent,
		var(--wpx-accent) 20%,
		var(--wpx-secondary) 50%,
		var(--wpx-accent) 80%,
		transparent
	);
	opacity: 0.85;
}

/* And a soft bloom below it, so the header sits on the page rather than
   being cut out of it. */
.wpx-header::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -1px;
	height: 1px;
	background: linear-gradient( 90deg, transparent, var(--wpx-border) 15%, var(--wpx-border) 85%, transparent );
}

.wpx-header.is-sticky {
	background: rgb(from var(--wpx-surface-1) r g b / 0.86);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* Browsers without backdrop-filter get a solid bar rather than an unreadable
   translucent one. */
@supports not (backdrop-filter: blur(1px)) {
	.wpx-header.is-sticky { background: var(--wpx-surface-1); }
}

.wpx-header.is-scrolled {
	box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.7);
}

/* --- Logo ---------------------------------------------------------------- */

.wpx-header__brand {
	display: flex;
	align-items: center;
	transition: transform 320ms var(--wpx-ease-out);
}

.wpx-header__brand:hover { transform: translateY(-1px); }

.wpx-header__brand img,
.wpx-logo-text {
	transition: filter 320ms var(--wpx-ease), transform 320ms var(--wpx-ease-out);
}

.wpx-header__brand:hover img {
	filter: drop-shadow(0 0 10px rgb(from var(--wpx-accent) r g b / 0.55));
}

.wpx-logo-text {
	position: relative;
	background: linear-gradient( 92deg, var(--wpx-text), var(--wpx-text) 40%, var(--wpx-accent) );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* --- Navigation ---------------------------------------------------------- */

.wpx-header__inner .wpx-menu > li {
	position: relative;
	border-inline-start-color: rgb(from var(--wpx-border) r g b / 0.7);
}

.wpx-header__inner .wpx-menu > li > a {
	overflow: hidden;
	z-index: 1;
}

/* Fill sweeps up from the bottom on hover, behind the label. */
.wpx-header__inner .wpx-menu > li > a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient( 180deg, transparent, rgb(from var(--wpx-accent) r g b / 0.18) );
	transform: translateY(100%);
	transition: transform 320ms var(--wpx-ease-out);
	display: block;
}

.wpx-header__inner .wpx-menu > li > a:hover::after,
.wpx-header__inner .wpx-menu > .current-menu-item > a::after {
	transform: translateY(0);
}

/* The accent bar under the item grows from the centre out. */
.wpx-header__inner .wpx-menu > li > a::before {
	inset-inline: 10%;
	height: 3px;
	border-radius: 3px 3px 0 0;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 320ms var(--wpx-ease-out);
	box-shadow: 0 0 12px rgb(from var(--wpx-accent) r g b / 0.8);
}

.wpx-header__inner .wpx-menu > li > a:hover::before,
.wpx-header__inner .wpx-menu > .current-menu-item > a::before {
	transform: scaleX(1);
}

/* The icon lifts and takes the accent colour with it. */
.wpx-menu__icon {
	transition: transform 320ms var(--wpx-ease-out), color 240ms var(--wpx-ease);
}

.wpx-header__inner .wpx-menu > li > a:hover .wpx-menu__icon {
	transform: translateY(-2px) scale(1.12);
	color: var(--wpx-accent);
}

.wpx-header__inner .wpx-menu > li > a:hover .wpx-menu__label { color: #fff; }
.wpx-header__inner .wpx-menu > li > a:hover .wpx-menu__sub { color: var(--wpx-text-muted); }

/* --- Submenus ------------------------------------------------------------ */

.wpx-menu ul {
	border-radius: var(--wpx-radius);
	border-top: 2px solid var(--wpx-accent);
	background: rgb(from var(--wpx-surface-2) r g b / 0.98);
	backdrop-filter: blur(10px);
}

.wpx-menu ul li a {
	border-radius: var(--wpx-radius-sm);
	transition: background var(--wpx-transition), padding-inline-start var(--wpx-transition);
}

.wpx-menu ul li a:hover {
	background: rgb(from var(--wpx-accent) r g b / 0.16);
	padding-inline-start: var(--wpx-space-4);
}

/* --- Top bar ------------------------------------------------------------- */

.wpx-header__top {
	background: rgb(from var(--wpx-bg) r g b / 0.6);
	border-block-start: 0;
	border-block-end: 1px solid rgb(from var(--wpx-border) r g b / 0.6);
}

.wpx-header__top .wpx-social__link {
	background: transparent;
	border-inline-end: 1px solid rgb(from var(--wpx-border) r g b / 0.6);
	position: relative;
	overflow: hidden;
}

.wpx-header__top .wpx-social__link::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wpx-accent);
	transform: translateY(100%);
	transition: transform 260ms var(--wpx-ease-out);
}

.wpx-header__top .wpx-social__link:hover::before { transform: translateY(0); }
.wpx-header__top .wpx-social__link .wpx-icon { position: relative; z-index: 1; }
.wpx-header__top .wpx-social__link:hover { color: #fff; }

/* --- Search -------------------------------------------------------------- */

/* The field widens when it takes focus, so searching feels like opening
   something rather than typing into a slot. */
.wpx-header .wpx-search__input {
	transition: width 320ms var(--wpx-ease-out), background var(--wpx-transition), border-color var(--wpx-transition), box-shadow var(--wpx-transition);
	background: rgb(from var(--wpx-bg) r g b / 0.55);
}

.wpx-header .wpx-search { transition: flex-basis 320ms var(--wpx-ease-out); }

.wpx-header .wpx-search:focus-within .wpx-search__input {
	background: var(--wpx-surface-1);
	box-shadow: 0 0 0 3px rgb(from var(--wpx-accent) r g b / 0.25), 0 8px 24px rgb(0 0 0 / 0.4);
}

.wpx-header .wpx-search__submit {
	transition: background 240ms var(--wpx-ease), transform 240ms var(--wpx-ease-out);
}

.wpx-header .wpx-search__submit:hover { transform: scale(1.06); }

/* --- Mobile -------------------------------------------------------------- */

@media (max-width: 899px) {
	.wpx-nav.is-open {
		animation: wpx-slide-down 280ms var(--wpx-ease-out);
	}

	.wpx-nav.is-open .wpx-menu > li {
		animation: wpx-rise 320ms var(--wpx-ease-out) backwards;
	}

	.wpx-nav.is-open .wpx-menu > li:nth-child(1) { animation-delay: 40ms; }
	.wpx-nav.is-open .wpx-menu > li:nth-child(2) { animation-delay: 80ms; }
	.wpx-nav.is-open .wpx-menu > li:nth-child(3) { animation-delay: 120ms; }
	.wpx-nav.is-open .wpx-menu > li:nth-child(4) { animation-delay: 160ms; }
	.wpx-nav.is-open .wpx-menu > li:nth-child(n+5) { animation-delay: 200ms; }
}

@keyframes wpx-slide-down {
	from { opacity: 0; transform: translateY(-10px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.wpx-footer {
	position: relative;
	margin-block-start: var(--wpx-space-8);
	background:
		linear-gradient( 180deg, rgb(from var(--wpx-surface-1) r g b / 0.6), rgb(from var(--wpx-bg) r g b / 0.96) );
	border-block-start: 0;
	overflow: hidden;
}

/* Matching lit edge at the top. */
.wpx-footer::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 2px;
	background: linear-gradient( 90deg, transparent, var(--wpx-accent) 25%, var(--wpx-secondary) 50%, var(--wpx-accent) 75%, transparent );
	opacity: 0.7;
}

/* A slow accent glow behind the columns. It drifts rather than pulses —
   a looping pulse in peripheral vision is tiring to sit next to. */
.wpx-footer::after {
	content: "";
	position: absolute;
	inset-inline-start: 50%;
	top: -140px;
	width: 620px;
	height: 320px;
	margin-inline-start: -310px;
	background: radial-gradient( closest-side, rgb(from var(--wpx-accent) r g b / 0.16), transparent );
	pointer-events: none;
	filter: blur(12px);
}

.wpx-footer__widgets {
	position: relative;
	z-index: 1;
	padding-block: var(--wpx-space-7);
}

/* --- Column headings ------------------------------------------------------ */

.wpx-footer .wpx-widget__title {
	font-size: var(--wpx-text-base);
	letter-spacing: 0.14em;
}

.wpx-footer .wpx-widget__title::before {
	inset-inline: 30%;
	background: linear-gradient( 90deg, transparent, var(--wpx-accent), transparent );
	opacity: 1;
	height: 2px;
}

.wpx-footer .wpx-widget__title::after {
	color: var(--wpx-secondary);
	text-shadow: 0 0 10px rgb(from var(--wpx-accent) r g b / 0.7);
}

/* --- Links ---------------------------------------------------------------- */

.wpx-footer .wpx-widget li {
	border-block-end: 1px solid rgb(from var(--wpx-border) r g b / 0.5);
	transition: border-color var(--wpx-transition);
}

.wpx-footer .wpx-widget li:hover { border-color: var(--wpx-accent); }

.wpx-footer .wpx-widget li a {
	border-block-end: 0;
	transition: color var(--wpx-transition), transform 260ms var(--wpx-ease-out), padding-inline-start var(--wpx-transition);
}

.wpx-footer .wpx-widget li a::before {
	transition: transform 260ms var(--wpx-ease-out), border-color var(--wpx-transition);
}

.wpx-footer .wpx-widget li a:hover {
	color: var(--wpx-accent);
	padding-inline-start: var(--wpx-space-5);
}

.wpx-footer .wpx-widget li a:hover::before {
	transform: rotate(45deg) translate(2px, -2px);
}

/* --- Bottom bar ----------------------------------------------------------- */

.wpx-footer__bar {
	position: relative;
	z-index: 1;
	border-block-start: 1px solid rgb(from var(--wpx-border) r g b / 0.6);
	background: rgb(from var(--wpx-bg) r g b / 0.5);
}

.wpx-copyright { letter-spacing: 0.02em; }

.wpx-footer-menu a {
	position: relative;
	color: var(--wpx-text-dim);
	transition: color var(--wpx-transition);
}

.wpx-footer-menu a::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -3px;
	height: 1px;
	background: var(--wpx-accent);
	transform: scaleX(0);
	transition: transform 260ms var(--wpx-ease-out);
}

.wpx-footer-menu a:hover { color: var(--wpx-text); }
.wpx-footer-menu a:hover::after { transform: scaleX(1); }

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

.wpx-to-top {
	background: linear-gradient( 145deg, var(--wpx-accent), var(--wpx-secondary) );
	box-shadow: 0 8px 24px rgb(from var(--wpx-accent) r g b / 0.35);
}

.wpx-to-top:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 30px rgb(from var(--wpx-accent) r g b / 0.5);
}

/* ==========================================================================
   Motion opt-out
   ========================================================================== */

.wpx-motion-off .wpx-header *,
.wpx-motion-off .wpx-footer * { transition: none !important; animation: none !important; }

@media (prefers-reduced-motion: reduce) {
	.wpx-header *,
	.wpx-footer * { transition-duration: 1ms !important; animation: none !important; }
}

/* ==========================================================================
   Header — clean style (default)
   ==========================================================================
   One row, plain links, no boxes or dividers. The stacked style below keeps
   the boxed treatment for anyone who wants it.
   ========================================================================== */

.wpx-header-clean .wpx-header__inner {
	min-height: 76px;
	gap: var(--wpx-space-6);
	align-items: center;
}

/* No dividers, no cell borders. */
.wpx-header-clean .wpx-header__inner .wpx-menu > li,
.wpx-header-clean .wpx-header__inner .wpx-menu > li:last-child {
	border: 0;
}

.wpx-header-clean .wpx-header__inner .wpx-menu { gap: var(--wpx-space-1); }

.wpx-header-clean .wpx-header__inner .wpx-menu > li > a {
	flex-direction: row;
	align-items: center;
	gap: var(--wpx-space-2);
	padding: var(--wpx-space-2) var(--wpx-space-3);
	border-radius: var(--wpx-radius);
	text-align: start;
	background: transparent;
}

/* The subtitle belongs to the stacked style only. */
.wpx-header-clean .wpx-menu__sub { display: none; }

/* A quiet inline icon rather than a large stacked one. */
.wpx-header-clean .wpx-menu__icon {
	width: 15px;
	height: 15px;
	opacity: 0.55;
}

.wpx-header-noicons .wpx-menu__icon { display: none; }

.wpx-header-clean .wpx-menu__label {
	font-size: var(--wpx-text-sm);
	font-weight: var(--wpx-weight-medium);
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--wpx-text-muted);
	transition: color 240ms var(--wpx-ease);
}

/* Hover: a thin line grows under the label, the icon brightens, nothing
   moves. Restrained on purpose — the boxed fill was the loud part. */
.wpx-header-clean .wpx-header__inner .wpx-menu > li > a::after { display: none; }

.wpx-header-clean .wpx-header__inner .wpx-menu > li > a::before {
	inset-inline: var(--wpx-space-3);
	bottom: 2px;
	height: 2px;
	border-radius: 2px;
	box-shadow: none;
	transform: scaleX(0);
	transform-origin: center;
}

.wpx-header-clean .wpx-header__inner .wpx-menu > li > a:hover::before,
.wpx-header-clean .wpx-header__inner .wpx-menu > .current-menu-item > a::before {
	transform: scaleX(1);
}

.wpx-header-clean .wpx-header__inner .wpx-menu > li > a:hover .wpx-menu__label,
.wpx-header-clean .wpx-header__inner .wpx-menu > .current-menu-item > a .wpx-menu__label {
	color: var(--wpx-text);
}

.wpx-header-clean .wpx-header__inner .wpx-menu > li > a:hover .wpx-menu__icon {
	opacity: 1;
	color: var(--wpx-accent);
	transform: none;
}

.wpx-header-clean .wpx-header__inner .wpx-menu > .current-menu-item > a .wpx-menu__icon {
	opacity: 1;
	color: var(--wpx-accent);
}

/* Search sits at the end, narrower and calmer. */
.wpx-header-clean .wpx-header__search { margin-inline-start: auto; }

.wpx-header-clean .wpx-search { min-width: 220px; }

.wpx-header-clean .wpx-search__input {
	border-radius: var(--wpx-radius-pill);
	border-color: rgb(from var(--wpx-border) r g b / 0.8);
	font-size: var(--wpx-text-sm);
}

.wpx-header-clean .wpx-search__submit {
	background: transparent;
	color: var(--wpx-text-dim);
	inset-inline-end: 4px;
	height: calc(100% - 8px);
	top: 4px;
	width: 34px;
	border-radius: var(--wpx-radius-pill);
}

.wpx-header-clean .wpx-search__submit:hover {
	background: var(--wpx-accent);
	color: var(--wpx-accent-ink);
}

/* The top bar is for the stacked look; the clean header carries its own
   social row inline instead of a second strip. */
.wpx-header-clean .wpx-header__top {
	background: transparent;
	border-block-end: 0;
}

.wpx-header-clean .wpx-header__top .wpx-social__link {
	border: 0;
	border-radius: var(--wpx-radius);
	width: 32px;
	height: 32px;
}

.wpx-header-clean .wpx-header__top .wpx-social__link::before { border-radius: var(--wpx-radius); }

/* A softer top edge — a hairline rather than a bright bar. */
.wpx-header-clean.wpx-header-clean .wpx-header::before,
body.wpx-header-clean .wpx-header::before {
	height: 1px;
	opacity: 0.5;
}

@media (max-width: 899px) {
	.wpx-header-clean .wpx-header__inner { min-height: 62px; gap: var(--wpx-space-3); }
	.wpx-header-clean .wpx-header__search { flex-basis: 100%; margin-inline-start: 0; }
	.wpx-header-clean .wpx-search { min-width: 0; }
}

/* ==========================================================================
   Footer — alignment
   ==========================================================================
   Headings were centred while their content ran left, and the column set
   floated away from the container edge. Everything now shares one left edge
   with the copyright line below it.
   ========================================================================== */

.wpx-footer__widgets {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	justify-content: stretch;
	gap: var(--wpx-space-6);
	align-items: start;
}

.wpx-footer .wpx-widget__title {
	text-align: start;
	padding-block-end: var(--wpx-space-4);
	font-size: var(--wpx-text-sm);
	letter-spacing: 0.16em;
}

/* Divider starts at the same left edge as the text under it. */
.wpx-footer .wpx-widget__title::before {
	inset-inline: 0 auto;
	width: 44px;
	bottom: var(--wpx-space-2);
	height: 2px;
	background: linear-gradient( 90deg, var(--wpx-accent), transparent );
	opacity: 1;
}

/* The centred mark does not belong on a left-aligned heading. */
.wpx-footer .wpx-widget__title::after { content: none; }

.wpx-footer .wpx-widget > *:not(.wpx-widget__title) { padding: 0; }

.wpx-footer .wpx-widget p {
	margin: 0;
	max-width: 34ch;
	line-height: 1.7;
}

.wpx-footer .wpx-widget li:first-child a { padding-block-start: 0; }

/* Bottom bar lines up with the columns above it. */
.wpx-footer__bar-inner { padding-block: var(--wpx-space-2); }

/* The clean header folds its second row away, so nothing should reserve
   space for it. */
.wpx-header-clean .wpx-header__top { display: none; }

/* Social icons now sit in the main row beside the search field. */
.wpx-header-clean .wpx-slot--right {
	gap: var(--wpx-space-3);
}

.wpx-header-clean .wpx-slot--right .wpx-social {
	gap: var(--wpx-space-1);
	border: 0;
}

.wpx-header-clean .wpx-slot--right .wpx-social__link {
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: var(--wpx-radius);
	background: transparent;
	overflow: hidden;
	position: relative;
}

.wpx-header-clean .wpx-slot--right .wpx-social__link::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--wpx-radius);
	background: var(--wpx-accent);
	transform: scale(0.6);
	opacity: 0;
	transition: transform 240ms var(--wpx-ease-out), opacity 200ms var(--wpx-ease);
}

.wpx-header-clean .wpx-slot--right .wpx-social__link:hover::before {
	transform: scale(1);
	opacity: 1;
}

.wpx-header-clean .wpx-slot--right .wpx-social__link .wpx-icon {
	position: relative;
	z-index: 1;
}

.wpx-header-clean .wpx-slot--right .wpx-social__link:hover { color: #fff; }

/* ==========================================================================
   Adjustments
   ========================================================================== */

/* Hero card runs the width of the banner rather than sitting in a narrow
   column on one side. */
.wpx-hero__card {
	width: min(100%, 1080px);
	padding: var(--wpx-space-7);
}

.wpx-hero__subtitle { max-width: 68ch; }

@media (max-width: 700px) {
	.wpx-hero__card { padding: var(--wpx-space-5); }
}

/* Search pinned to the right edge of the header row. The centre slot takes
   the slack so the right slot lands against the container edge. */
.wpx-header-clean .wpx-header__inner .wpx-row-builder {
	justify-content: flex-start;
	flex-wrap: nowrap;
}

.wpx-header-clean .wpx-header__inner .wpx-slot--left { margin-inline-end: var(--wpx-space-5); }

.wpx-header-clean .wpx-header__inner .wpx-slot--center {
	flex: 1 1 auto;
	justify-content: flex-start;
	min-width: 0;
}

.wpx-header-clean .wpx-header__inner .wpx-slot--right {
	margin-inline-start: auto;
	flex: 0 0 auto;
}

@media (max-width: 899px) {
	.wpx-header-clean .wpx-header__inner .wpx-row-builder { flex-wrap: wrap; }
	.wpx-header-clean .wpx-header__inner .wpx-slot--right { margin-inline-start: auto; }
}

/* The banner no longer contains the strip, so it only needs the hero's gap. */
.wpx-banner + .wpx-shell { padding-block-start: var(--wpx-space-5); }

/* Strip now sits in the content column; keep it flush with the grid below. */
.wpx-main > .wpx-strip { margin-block: 0 var(--wpx-space-5); }

/* ==========================================================================
   Tabs — separated pills
   ==========================================================================
   They were butted together in one solid red bar, so the selected tab was
   indistinguishable from the rest. Now each is its own pill with space
   between, and only the active one carries the accent.
   ========================================================================== */

.wpx-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wpx-space-2);
	background: transparent;
	border-radius: 0;
	overflow: visible;
	padding: 0;
	margin-block-end: var(--wpx-space-5);
}

.wpx-tabs__tab {
	position: relative;
	overflow: hidden;
	gap: var(--wpx-space-2);
	padding: var(--wpx-space-3) var(--wpx-space-5);
	border: 1px solid var(--wpx-border);
	border-radius: var(--wpx-radius-pill);
	background: rgb(from var(--wpx-surface-2) r g b / 0.9);
	color: var(--wpx-text-muted);
	font-size: var(--wpx-text-sm);
	font-weight: var(--wpx-weight-medium);
	text-transform: none;
	letter-spacing: 0.01em;
	transition:
		color 220ms var(--wpx-ease),
		border-color 220ms var(--wpx-ease),
		background 220ms var(--wpx-ease),
		transform 220ms var(--wpx-ease-out),
		box-shadow 220ms var(--wpx-ease);
}

.wpx-tabs__tab .wpx-icon {
	color: var(--wpx-text-dim);
	transition: color 220ms var(--wpx-ease), transform 260ms var(--wpx-ease-out);
}

.wpx-tabs__tab:hover {
	background: var(--wpx-surface-3);
	border-color: var(--wpx-border-strong);
	color: var(--wpx-text);
	transform: translateY(-2px);
	box-shadow: none;
}

.wpx-tabs__tab:hover .wpx-icon { color: var(--wpx-accent); transform: scale(1.1); }

.wpx-tabs__tab[aria-selected="true"] {
	background: linear-gradient( 135deg, var(--wpx-accent), var(--wpx-secondary) );
	border-color: transparent;
	color: var(--wpx-accent-ink);
	font-weight: var(--wpx-weight-bold);
	box-shadow: 0 6px 18px -4px rgb(from var(--wpx-accent) r g b / 0.55);
}

.wpx-tabs__tab[aria-selected="true"] .wpx-icon {
	color: var(--wpx-accent-ink);
	transform: none;
}

/* A sheen crosses the active pill once when it is chosen. */
.wpx-tabs__tab[aria-selected="true"]::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 -50%;
	width: 40%;
	background: linear-gradient( 100deg, transparent, rgb(255 255 255 / 0.35), transparent );
	transform: skewX(-18deg);
	animation: wpx-sheen 900ms var(--wpx-ease-out);
}

@keyframes wpx-sheen {
	from { left: -50%; }
	to   { left: 130%; }
}

.wpx-motion-off .wpx-tabs__tab,
.wpx-motion-off .wpx-tabs__tab::after { transition: none; animation: none; }

@media (prefers-reduced-motion: reduce) {
	.wpx-tabs__tab:hover { transform: none; }
	.wpx-tabs__tab::after { animation: none; }
}

@media (max-width: 600px) {
	.wpx-tabs__tab { flex: 1 1 auto; justify-content: center; padding-inline: var(--wpx-space-4); }
	.wpx-tabs__tab .wpx-menu__label { display: inline; }
}

/* ==========================================================================
   Header row width
   ==========================================================================
   The builder row is the only child of .wpx-header__inner, which is itself a
   flex container. Without a flex basis the row only took the width of its
   own contents, so the right slot's auto margin had no slack to push into
   and the search field sat wherever the nav ended. Make the row fill the
   container and the slots line up against the real edges.
   ========================================================================== */

.wpx-header__inner,
.wpx-header__top .wpx-container,
.wpx-footer__bar .wpx-container {
	display: flex;
}

.wpx-header__inner > .wpx-row-builder,
.wpx-header__top .wpx-container > .wpx-row-builder,
.wpx-footer__bar .wpx-container > .wpx-row-builder {
	flex: 1 1 100%;
	width: 100%;
	min-width: 0;
}

/* With real slack available, the slots can claim their edges. */
.wpx-row-builder > .wpx-slot--left  { margin-inline-end: 0; }
.wpx-row-builder > .wpx-slot--center { flex: 1 1 auto; min-width: 0; }
.wpx-row-builder > .wpx-slot--right { margin-inline-start: auto; }

/* Footer bottom bar: copyright left, menu right. */
.wpx-footer__bar .wpx-row-builder { align-items: center; }

/* ==========================================================================
   Mobile
   ==========================================================================
   Written for a 360px phone first, then relaxed upward. The desktop rules
   above assume room the phone does not have — an oversized logo, a nav row
   that wraps into the search field, and a tab strip wider than the screen.
   ========================================================================== */

@media (max-width: 899px) {

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

	.wpx-header-clean .wpx-header__inner .wpx-row-builder {
		flex-wrap: wrap;
		align-items: center;
		gap: var(--wpx-space-2);
		padding-block: var(--wpx-space-2);
	}

	/* Logo, then the toggle at the far end; search drops to its own line. */
	.wpx-header__inner .wpx-slot--left  { order: 1; margin-inline-end: auto; }
	.wpx-header__inner .wpx-slot--center { order: 2; flex: 0 0 auto; margin-inline-start: auto; }
	.wpx-header__inner .wpx-slot--right { order: 3; flex-basis: 100%; margin-inline-start: 0; }

	/* The logo was running at desktop size and swallowing the row. */
	.wpx-header__brand img,
	.custom-logo {
		max-height: 38px;
		width: auto;
	}

	.wpx-logo-text { font-size: var(--wpx-text-lg); }

	/* --- Menu toggle ------------------------------------------------------ */

	/* It was rendering as a single dash: the bar sat at the midpoint but its
	   two pseudo-elements had no reliable box to offset from. Give the
	   button a fixed size and the bars explicit geometry. */
	.wpx-nav-toggle {
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		flex: none;
		background: rgb(from var(--wpx-surface-3) r g b / 0.8);
		border: 1px solid var(--wpx-border);
		border-radius: var(--wpx-radius);
	}

	.wpx-nav-toggle__bar,
	.wpx-nav-toggle__bar::before,
	.wpx-nav-toggle__bar::after {
		position: absolute;
		inset-inline: auto;
		left: 50%;
		width: 20px;
		height: 2px;
		margin-left: -10px;
		background: var(--wpx-text);
		border-radius: 2px;
	}

	.wpx-nav-toggle__bar { top: 50%; margin-top: -1px; }
	.wpx-nav-toggle__bar::before { content: ""; top: -7px; left: 0; margin-left: 0; }
	.wpx-nav-toggle__bar::after  { content: ""; top: 7px;  left: 0; margin-left: 0; }

	.wpx-nav-toggle[aria-expanded="true"] .wpx-nav-toggle__bar::before { transform: translateY(7px) rotate(45deg); }
	.wpx-nav-toggle[aria-expanded="true"] .wpx-nav-toggle__bar::after  { transform: translateY(-7px) rotate(-45deg); }

	/* --- Mobile nav panel -------------------------------------------------- */

	.wpx-header-clean .wpx-nav {
		flex-basis: 100%;
		order: 4;
	}

	.wpx-header-clean .wpx-nav.is-open {
		display: block;
		padding-block: var(--wpx-space-2) var(--wpx-space-3);
		border-block-start: 1px solid var(--wpx-border);
		margin-block-start: var(--wpx-space-2);
	}

	.wpx-header-clean .wpx-header__inner .wpx-menu { flex-direction: column; gap: 0; }

	.wpx-header-clean .wpx-header__inner .wpx-menu > li { width: 100%; }

	/* Full-width rows with a real touch target. */
	.wpx-header-clean .wpx-header__inner .wpx-menu > li > a {
		justify-content: flex-start;
		gap: var(--wpx-space-3);
		min-height: 46px;
		padding-inline: var(--wpx-space-3);
		border-radius: var(--wpx-radius);
	}

	.wpx-header-clean .wpx-menu__icon { width: 18px; height: 18px; opacity: 0.8; }
	.wpx-header-clean .wpx-menu__label { font-size: var(--wpx-text-base); }

	/* The growing underline reads as a glitch on a stacked list. */
	.wpx-header-clean .wpx-header__inner .wpx-menu > li > a::before { display: none; }

	.wpx-header-clean .wpx-header__inner .wpx-menu > .current-menu-item > a {
		background: rgb(from var(--wpx-accent) r g b / 0.14);
		color: var(--wpx-text);
	}

	.wpx-header-clean .wpx-header__inner .wpx-menu > .current-menu-item > a .wpx-menu__label { color: var(--wpx-text); }

	/* --- Search ------------------------------------------------------------ */

	.wpx-header-clean .wpx-header__search { width: 100%; margin-inline-start: 0; }
	.wpx-header-clean .wpx-search { min-width: 0; width: 100%; }
	.wpx-header-clean .wpx-search__input { font-size: 16px; } /* stops iOS zooming on focus */

	/* Suggestions should use the whole width, not the field's box. */
	.wpx-search__results { max-height: 55vh; }

	/* --- Banner and hero ---------------------------------------------------- */

	.wpx-banner { padding-block-start: var(--wpx-space-3); }

	.wpx-hero { min-height: 0; }

	.wpx-hero__inner {
		min-height: 0;
		padding: var(--wpx-space-3);
	}

	.wpx-hero__card {
		width: 100%;
		padding: var(--wpx-space-5) var(--wpx-space-4);
	}

	.wpx-hero__title { font-size: var(--wpx-text-2xl); }
	.wpx-hero__badge { font-size: 10px; padding: 6px var(--wpx-space-3); }
	.wpx-hero__cta { width: 100%; justify-content: center; min-height: 46px; }

	/* --- Cover strip -------------------------------------------------------- */

	/* A swipeable rail rather than a wrapped grid. */
	.wpx-strip {
		grid-auto-columns: 108px;
		gap: var(--wpx-space-2);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-block-end: var(--wpx-space-2);
	}

	.wpx-strip__item { scroll-snap-align: start; }

	/* --- Tabs ---------------------------------------------------------------- */

	/* They were running off the edge of the screen. Scroll them instead of
	   wrapping, so the row stays one line and every tab is reachable. */
	.wpx-tabs__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		padding-block-end: var(--wpx-space-2);
		margin-inline: calc(var(--wpx-space-3) * -1);
		padding-inline: var(--wpx-space-3);
		scrollbar-width: none;
	}

	.wpx-tabs__list::-webkit-scrollbar { display: none; }

	.wpx-tabs__tab {
		flex: 0 0 auto;
		scroll-snap-align: start;
		padding: var(--wpx-space-2) var(--wpx-space-4);
		min-height: 40px;
	}

	.wpx-tabs__tab .wpx-menu__label { display: inline; }

	/* --- Grid ----------------------------------------------------------------- */

	/* Two columns on a phone; the desktop track cap would leave one lonely
	   card with a gap beside it. */
	.wpx-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wpx-space-3);
	}

	.wpx-card__title { font-size: var(--wpx-text-xs); }
	.wpx-card__meta { font-size: 10px; gap: var(--wpx-space-1); }
	.wpx-card__views { font-size: 10px; }

	/* Hover effects do not apply on touch, and the lift leaves cards stuck in
	   a raised state after a tap. */
	.wpx-cards-ribbon .wpx-card:hover,
	.wpx-cards-ribbon .wpx-card:focus-within { transform: none; box-shadow: none; }

	.wpx-cards-ribbon .wpx-card:active { transform: scale(0.98); }

	/* --- Shell and sidebar ------------------------------------------------------ */

	.wpx-shell { padding-block: var(--wpx-space-4); gap: var(--wpx-space-5); }

	.wpx-has-bg.wpx-boxed .wpx-shell,
	body:not(.wpx-has-bg).wpx-boxed .wpx-shell { padding-inline: var(--wpx-space-3); }

	.wpx-sidebar { margin-block-start: var(--wpx-space-4); }

	/* --- Single game -------------------------------------------------------------- */

	.wpx-game__lead { grid-template-columns: 1fr; }

	.wpx-game__cover { max-width: 200px; margin-inline: auto; }

	.wpx-game__title { font-size: var(--wpx-text-2xl); }

	.wpx-specs__row { grid-template-columns: 1fr; gap: 2px; padding-block: var(--wpx-space-2); }

	.wpx-screenshots__grid { grid-template-columns: repeat(2, 1fr); gap: var(--wpx-space-2); }

	.wpx-download { min-height: 48px; }

	.wpx-stores .wpx-button { width: 100%; justify-content: center; min-height: 46px; }

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

	.wpx-footer__widgets { padding-block: var(--wpx-space-5); }

	.wpx-footer__bar-inner { flex-direction: column; align-items: flex-start; gap: var(--wpx-space-2); }

	.wpx-footer .wpx-widget li a { min-height: 40px; display: flex; align-items: center; }

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

	.wpx-to-top {
		width: 42px;
		height: 42px;
		inset-block-end: var(--wpx-space-3);
		inset-inline-end: var(--wpx-space-3);
	}

	/* --- Breadcrumbs and pagination ------------------------------------------------------ */

	.wpx-breadcrumbs ol { font-size: var(--wpx-text-xs); }

	.wpx-pagination { flex-direction: column; gap: var(--wpx-space-3); padding: var(--wpx-space-3); }
	.wpx-pagination a,
	.wpx-pagination span { min-width: 42px; height: 42px; }
}

/* Very narrow phones: one card per row reads better than two cramped ones. */
@media (max-width: 400px) {
	.wpx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wpx-space-2); }
	.wpx-hero__title { font-size: var(--wpx-text-xl); }
	.wpx-hero__card { padding: var(--wpx-space-4) var(--wpx-space-3); }
	.wpx-screenshots__grid { grid-template-columns: 1fr; }
}

/* Tablets: three columns, sidebar still below. */
@media (min-width: 600px) and (max-width: 899px) {
	.wpx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.wpx-game__lead { grid-template-columns: 200px minmax(0, 1fr); }
	.wpx-game__cover { margin-inline: 0; }
	.wpx-footer__bar-inner { flex-direction: row; align-items: center; }
}

/* Any touch device, regardless of width: no sticky hover states. */
@media (hover: none) {
	.wpx-strip__item:hover,
	.wpx-card:hover { transform: none; box-shadow: none; }

	.wpx-button::after { display: none; }
}

/* ==========================================================================
   Mobile header — search inside the menu panel
   ==========================================================================
   A phone header should be logo and one button. The search field had its own
   full-width row, which pushed the page down before anything had been read.
   It now lives inside the panel the menu button opens.
   ========================================================================== */

/* The in-panel copy is mobile only. */
.wpx-nav__search { display: none; }

@media (max-width: 899px) {

	/* Header row: logo, then the toggle. Nothing else. */
	.wpx-header-clean .wpx-header__inner .wpx-row-builder {
		flex-wrap: wrap;
		justify-content: space-between;
		gap: var(--wpx-space-2);
	}

	.wpx-header__inner .wpx-slot--left {
		order: 1;
		flex: 0 1 auto;
		margin-inline-end: 0;
		min-width: 0;
	}

	.wpx-header__inner .wpx-slot--center {
		order: 2;
		flex: 0 0 auto;
		margin-inline-start: auto;
	}

	/* The standalone search row is gone; its slot holds nothing else that
	   needs a line of its own on a phone. */
	.wpx-header__inner .wpx-slot--right {
		order: 3;
		flex: 0 0 auto;
		margin-inline-start: var(--wpx-space-2);
	}

	.wpx-header-clean .wpx-header__search { display: none; }

	/* Social icons, if any are set, stay on the top row beside the toggle. */
	.wpx-header__inner .wpx-slot--right .wpx-social { gap: 0; }

	/* --- The panel --------------------------------------------------------- */

	.wpx-nav__search {
		display: block;
		margin-block-end: var(--wpx-space-3);
	}

	.wpx-nav__search .wpx-search { width: 100%; min-width: 0; }

	.wpx-nav__search .wpx-search__input {
		font-size: 16px;
		min-height: 46px;
		border-radius: var(--wpx-radius);
		background: var(--wpx-surface-1);
	}

	.wpx-nav__search .wpx-search__submit {
		width: 46px;
		height: 46px;
		top: 0;
		inset-inline-end: 0;
		border-radius: 0 var(--wpx-radius) var(--wpx-radius) 0;
		background: var(--wpx-accent);
		color: var(--wpx-accent-ink);
	}

	/* The suggestion list must clear the panel, not sit under the menu. */
	.wpx-nav__search .wpx-search__results { max-height: 50vh; }

	/* Panel itself. */
	.wpx-header-clean .wpx-nav.is-open {
		padding-block: var(--wpx-space-3);
	}

	/* The header can get tall once the panel is open; let it scroll rather
	   than trapping the page behind a full-height sticky bar. */
	.wpx-header.is-sticky {
		max-height: 100vh;
		overflow-y: auto;
	}

	/* Keep the logo from being squeezed by a long site title. */
	.wpx-header__brand { min-width: 0; }
	.wpx-logo-text {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 62vw;
	}
}

/* ==========================================================================
   Mobile corrections
   ========================================================================== */

@media (max-width: 899px) {

	/* 1. The menu button sat beside the logo instead of at the far edge.
	      The desktop rule `.wpx-header-clean .wpx-header__inner
	      .wpx-slot--center` carries three classes, so it outranked the
	      two-class mobile rule that was meant to override it — the centre
	      slot kept growing and its contents stayed left-aligned. Match the
	      specificity and push the button to the end. */
	.wpx-header-clean .wpx-header__inner .wpx-slot--center {
		flex: 0 0 auto;
		justify-content: flex-end;
		margin-inline-start: auto;
		min-width: 0;
	}

	.wpx-header-clean .wpx-header__inner .wpx-slot--left {
		flex: 0 1 auto;
		margin-inline-end: var(--wpx-space-2);
	}

	/* 2. The tab rail was pulled outside the container by negative margins,
	      so the last tab ran off the screen edge. Wrap them instead — three
	      short labels fit on two lines with nothing hidden, and there is no
	      swipe to discover. */
	.wpx-tabs__list {
		flex-wrap: wrap;
		overflow-x: visible;
		margin-inline: 0;
		padding-inline: 0;
		gap: var(--wpx-space-2);
	}

	.wpx-tabs__tab {
		flex: 1 1 auto;
		min-width: 0;
		justify-content: center;
		padding-inline: var(--wpx-space-3);
	}

	.wpx-tabs__tab .wpx-menu__label {
		display: inline;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* Narrow phones: two tabs per row, the third spanning underneath. */
@media (max-width: 480px) {
	.wpx-tabs__tab {
		flex: 1 1 calc(50% - var(--wpx-space-2));
		font-size: var(--wpx-text-xs);
		padding-inline: var(--wpx-space-2);
	}

	.wpx-tabs__tab .wpx-icon { width: 14px; height: 14px; }
}

/* ==========================================================================
   Cover strip — auto-scrolling rail
   ========================================================================== */

.wpx-strip-wrap {
	position: relative;
	margin-block: 0 var(--wpx-space-5);
}

/* The visible scrollbar under the rail was the giveaway that this was a
   manual list. It scrolls itself now, so the bar only adds noise. */
.wpx-strip {
	scrollbar-width: none;
	-ms-overflow-style: none;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	margin-block: 0;
}

.wpx-strip::-webkit-scrollbar { display: none; }

/* Fade the ends so covers slide out of view rather than being chopped. */
.wpx-strip-wrap.has-overflow::before,
.wpx-strip-wrap.has-overflow::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 56px;
	z-index: 2;
	pointer-events: none;
}

.wpx-strip-wrap.has-overflow::before {
	inset-inline-start: 0;
	background: linear-gradient( to right, var(--wpx-surface-1), transparent );
}

.wpx-strip-wrap.has-overflow::after {
	inset-inline-end: 0;
	background: linear-gradient( to left, var(--wpx-surface-1), transparent );
}

/* --- Arrows -------------------------------------------------------------- */

.wpx-strip__nav {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin-top: -17px;
	padding: 0;
	background: rgb(from var(--wpx-bg) r g b / 0.75);
	color: var(--wpx-text);
	border: 1px solid var(--wpx-border);
	border-radius: var(--wpx-radius-pill);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: opacity 200ms var(--wpx-ease), background 200ms var(--wpx-ease), transform 200ms var(--wpx-ease-out);
	backdrop-filter: blur(6px);
}

.wpx-strip__nav--prev { inset-inline-start: 6px; }
.wpx-strip__nav--next { inset-inline-end: 6px; }

.wpx-strip-wrap.has-overflow:hover .wpx-strip__nav,
.wpx-strip__nav:focus-visible { opacity: 1; }

.wpx-strip__nav:hover {
	background: var(--wpx-accent);
	color: var(--wpx-accent-ink);
	transform: scale(1.08);
	box-shadow: none;
}

.wpx-strip__nav:disabled {
	opacity: 0 !important;
	pointer-events: none;
}

/* Touch devices have no hover, so the arrows stay visible there. */
@media (hover: none) {
	.wpx-strip-wrap.has-overflow .wpx-strip__nav { opacity: 1; }
	.wpx-strip__nav { width: 30px; height: 30px; margin-top: -15px; }
}

/* Scroll snapping fights a continuous auto-scroll, so it is only used where
   the visitor is doing the scrolling. */
@media (hover: hover) {
	.wpx-strip { scroll-snap-type: none; }
	.wpx-strip__item { scroll-snap-align: none; }
}

/* ==========================================================================
   Sidebar post list
   ========================================================================== */

.wpx-postlist__items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wpx-postlist .wpx-postlist__items { padding: var(--wpx-space-2); }

.wpx-postlist__item {
	display: block;
	border: 0;
	margin: 0;
}

.wpx-postlist__item + .wpx-postlist__item { margin-block-start: 2px; }

.wpx-postlist__link {
	display: flex;
	gap: var(--wpx-space-3);
	align-items: center;
	padding: var(--wpx-space-2);
	border-radius: var(--wpx-radius);
	color: var(--wpx-text-muted);
	transition: background var(--wpx-transition), transform 220ms var(--wpx-ease-out);
}

.wpx-postlist__link:hover {
	background: var(--wpx-surface-3);
	color: var(--wpx-text);
	transform: translateX(2px);
}

/* --- Media --------------------------------------------------------------- */

.wpx-postlist__media {
	position: relative;
	flex: none;
	display: block;
	overflow: hidden;
	border-radius: var(--wpx-radius-sm);
	border: 1px solid var(--wpx-border);
}

.wpx-postlist--thumb .wpx-postlist__media {
	width: 64px;
	height: 64px;
}

.wpx-postlist--thumb .wpx-postlist__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 320ms var(--wpx-ease-out);
}

.wpx-postlist__link:hover .wpx-postlist__media img { transform: scale(1.08); }

/* The badge would cover a 64px thumbnail, so it only shows on the card
   layout where there is room for it. */
.wpx-postlist--thumb .wpx-badge { display: none; }

/* --- Card layout ---------------------------------------------------------- */

.wpx-postlist--card .wpx-postlist__link {
	flex-direction: column;
	align-items: stretch;
	gap: var(--wpx-space-2);
	padding: var(--wpx-space-2);
}

.wpx-postlist--card .wpx-postlist__link:hover { transform: translateY(-2px); }

.wpx-postlist--card .wpx-postlist__media { width: 100%; aspect-ratio: 2 / 3; }

.wpx-postlist--card .wpx-postlist__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wpx-postlist--card .wpx-badge {
	position: absolute;
	inset-block-start: var(--wpx-space-2);
	inset-inline-start: var(--wpx-space-2);
	z-index: 1;
}

.wpx-postlist--card .wpx-postlist__title { text-align: center; }

/* --- Text layout ---------------------------------------------------------- */

.wpx-postlist--text .wpx-postlist__link {
	position: relative;
	padding-inline-start: var(--wpx-space-5);
}

.wpx-postlist--text .wpx-postlist__link::before {
	content: "";
	position: absolute;
	inset-inline-start: 6px;
	top: 50%;
	width: 6px;
	height: 6px;
	margin-top: -4px;
	border-top: 2px solid var(--wpx-accent);
	border-right: 2px solid var(--wpx-accent);
	transform: rotate(45deg);
	transition: transform 220ms var(--wpx-ease-out);
}

.wpx-postlist--text .wpx-postlist__link:hover::before { transform: rotate(45deg) translate(2px, -2px); }

.wpx-postlist--text .wpx-postlist__item + .wpx-postlist__item {
	border-block-start: 1px solid var(--wpx-border);
	margin-block-start: 0;
}

/* --- Body ----------------------------------------------------------------- */

.wpx-postlist__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.wpx-postlist__title {
	font-size: var(--wpx-text-sm);
	font-weight: var(--wpx-weight-medium);
	line-height: 1.35;
	color: inherit;

	/* Two lines then ellipsis, so one long title cannot push the column. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wpx-postlist__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wpx-space-2);
	font-size: var(--wpx-text-xs);
	color: var(--wpx-text-dim);
}

/* --- Sticky --------------------------------------------------------------- */

/* Only where there is room, and only when the block is short enough that
   pinning it does not trap the page. */
@media (min-width: 900px) {
	.wpx-postlist.is-sticky {
		position: sticky;
		top: calc(var(--wpx-space-5) + 90px);
		max-height: calc(100vh - 120px);
		overflow-y: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wpx-postlist__link:hover { transform: none; }
	.wpx-postlist__link:hover .wpx-postlist__media img { transform: none; }
}

/* ==========================================================================
   Logo size
   ========================================================================== */

.wpx-header__brand img,
.wpx-header__brand .custom-logo {
	height: var(--wpx-logo-height, 46px);
	width: auto;
	max-height: none;
	object-fit: contain;
}

@media (max-width: 899px) {
	.wpx-header__brand img,
	.wpx-header__brand .custom-logo {
		height: var(--wpx-logo-height-mobile, 36px);
		max-height: none;
	}
}

/* ==========================================================================
   Sidebar — post list corrections
   ==========================================================================
   The generic sidebar rules (uppercase links, chevron marker, tall rows)
   were written for category widgets and were landing on the post list too,
   which is why the arrows floated beside the thumbnails and the titles
   shouted. Scope those rules away from this block.
   ========================================================================== */

.wpx-sidebar .wpx-postlist li { display: block; border-block-end: 0; }

.wpx-sidebar .wpx-postlist li a {
	display: flex;
	padding: var(--wpx-space-2);
	text-transform: none;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: normal;
	min-height: 0;
}

.wpx-sidebar .wpx-postlist li a::before { content: none; }

.wpx-sidebar .wpx-postlist li a:hover { padding-inline-start: var(--wpx-space-2); }

/* The text-only layout keeps its own marker. */
.wpx-sidebar .wpx-postlist--text li a { padding-inline-start: var(--wpx-space-5); }
.wpx-sidebar .wpx-postlist--text li a:hover { padding-inline-start: var(--wpx-space-5); }

/* Titles read as titles, not as headings. */
.wpx-postlist__title {
	text-transform: none;
	letter-spacing: normal;
	font-size: var(--wpx-text-sm);
	font-weight: var(--wpx-weight-medium);
	color: var(--wpx-text);
}

.wpx-postlist__meta { text-transform: none; letter-spacing: normal; }

/* Bigger thumbnails with a dark mat, so a white logo image does not glare. */
.wpx-postlist--thumb .wpx-postlist__media {
	width: 72px;
	height: 72px;
	background: var(--wpx-surface-3);
}

.wpx-postlist--thumb .wpx-postlist__media img { object-fit: contain; padding: 2px; }

.wpx-postlist__link { gap: var(--wpx-space-3); align-items: flex-start; }

.wpx-postlist__body { padding-block-start: 2px; }

/* Row separators instead of a floating stack. */
.wpx-postlist__item + .wpx-postlist__item {
	margin-block-start: 0;
	border-block-start: 1px solid rgb(from var(--wpx-border) r g b / 0.6);
	padding-block-start: 2px;
}

.wpx-postlist .wpx-postlist__items { padding: var(--wpx-space-2) var(--wpx-space-3); }

/* ==========================================================================
   Sidebar position
   ==========================================================================
   It began level with the breadcrumbs, which put the first widget higher
   than the article it sits beside. Drop it to the line the content proper
   starts on.
   ========================================================================== */

@media (min-width: 900px) {
	.wpx-sidebar { padding-block-start: var(--wpx-space-6); }

	/* On the front page there are no breadcrumbs to clear. */
	.home .wpx-sidebar,
	.blog .wpx-sidebar { padding-block-start: 0; }
}

.wpx-sidebar .wpx-widget:last-child { margin-block-end: 0; }