@charset "UTF-8";

/**
 * navigations.css 2.0.0
 * Author: hybrid.
 *
 * Navigation components — nav base, menus, contextual, social, pagination.
 * Button styles defined in buttons.css.
 * Submit button styles shared via --button-* tokens.
 *
 * Sections
 * CONFIG     — nav tokens, context overrides
 * ANIMATIONS — #navigation open/close, expand, contextual sticky
 * RESET      — nav anchor underline override (moved to reset.css)
 * CORE       — nav base, alignment, post-tags, more-link, primary, secondary,
 *              menu, navigation, navbar, contextual, go-buttons, social,
 *              pagination, scrollto
 * THEME      — project-specific overrides
 *
 * Dependencies
 * --gutter-gap        defined in structure.css
 * --section-gap       defined in structure.css
 * --content-max-width defined in structure.css
 * --header-height     defined in structure.css
 * --contextual-height defined in structure.css
 * --content-spacing   defined in spacing.css
 * --stroke-width      defined in structure.css
 * --button-*          defined in buttons.css
 */



/* ================================================================================================== */
/* ============================================= CONFIG ============================================= */
/* ================================================================================================== */


/* ============================== NAV ============================== */

:root {
	--nav-font-size: 1em;
	--nav-gap: 1em;

	--nav-anchor-padding: 1em;
	--nav-anchor-gap: .5em;
	--nav-anchor-transform: none; /*scale(1.25)*/

	--pagination-height: 3em;
}
nav,
.go-back {
	--anchor-hover-color: currentColor;
}


/* ============================== GO-BACK ============================== */

:root {
	--go-back-font-size: 2.5em;
}
@media (min-width: 760px) {
	:root {
		--go-back-font-size: 5em;
	}
}



/* ====================================================================================================== */
/* ============================================= ANIMATIONS ============================================= */
/* ====================================================================================================== */


/* ============================== DEFAULT ============================== */

a,
button {
	transition:
		/*color var(--duration-fast) var(--ease),
		text-decoration var(--duration-fast) var(--ease),
		background var(--duration-fast) var(--ease),
		opacity var(--duration-fast) var(--ease),
		border var(--duration-fast) var(--ease),
		width var(--duration-fast) var(--easeInOutQuint),
		transform var(--duration-fast) var(--easeInOutQuint),
		filter var(--duration-fast) var(--easeInOutQuint);*/
		color var(--duration-fast) var(--ease),
		text-decoration var(--duration-fast) var(--ease),
		background var(--duration-fast) var(--ease),
		opacity var(--duration-fast) var(--ease),
		border var(--duration-fast) var(--ease),
		width var(--duration-fast) var(--elastic),
		transform var(--duration-fast) var(--elastic),
		filter var(--duration-fast) var(--elastic);
}
a::before,
a::after,
a span,
a span::before,
a span::after {
	transition: inherit;
}


/* ============================== NAVIGATION ============================== */

#navigation {
	transition:
		visibility .01s linear calc(var(--duration-normal) * 1.5),
		height var(--duration-normal) var(--easeInQuint) calc(var(--duration-normal) / 2);
}
body.expanded #navigation {
	transition:
		visibility .01s linear,
		height var(--duration-normal) var(--easeOutQuint);
}
#navigation .navigation-content > * {
	transition:
		opacity var(--duration-normal) var(--easeInQuint),
		transform var(--duration-normal) var(--easeInQuint);
}
body.expanded #navigation .navigation-content > * {
	transition:
		opacity var(--duration-normal) var(--easeOutQuint) calc(var(--duration-normal) / 2),
		transform var(--duration-normal) var(--easeOutQuint) calc(var(--duration-normal) / 2);
}


/* ============================== EXPAND ============================== */

[data-navigation-target] .label,
[data-navigation-target] .label::before,
[data-navigation-target] .label::after {
	transition: all var(--duration-normal) var(--easeInOutQuint);
}


/* ============================== CONTEXTUAL ============================== */

nav.contextual.sticky::after {
	transition: opacity var(--duration-fast);
}



/* ================================================================================================ */
/* ============================================= CORE ============================================= */
/* ================================================================================================ */


/* ============================== NAV ============================== */

/* =============== DEFAULT =============== */

nav {
	position: relative;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--nav-gap);
	width: 100%;
	font-size: var(--nav-font-size);
	line-height: 1;
	pointer-events: none;
}
nav a {
	display: inline-flex;
	align-items: center;
	gap: var(--nav-anchor-gap);
	line-height: 1;
	width: auto;
	margin: 0;
	padding: var(--nav-anchor-padding);
	text-decoration: none;
}
nav > * {
	pointer-events: auto;
}
nav > * + * {
	margin-top: 0 !important;
}


/* =============== HOVER =============== */

@media (hover: hover) {
	nav a:hover {
		color: var(--anchor-hover-color);
	}
}
@media (hover: none) {
	nav a.active,
	nav a.hover {
		color: var(--anchor-hover-color);
	}
}


/* =============== DIRECTION =============== */

nav.vertical {
	flex-direction: column;
}


/* =============== ALIGNMENT =============== */

nav.is-center,
nav.is-center .menu {
	justify-content: center;
}
nav.is-right,
nav.is-right .menu {
	justify-content: flex-end;
}
nav.is-justify,
nav.is-justify .menu {
	justify-content: space-between;
}
nav.is-stretch,
nav.is-stretch .menu {
	flex-wrap: nowrap;
}
nav.is-stretch > *,
nav.is-stretch .menu > * {
	flex: 1 1 0;
}







/* ============================== POST TAGS ============================== */

nav.post-tags {
	gap: calc(var(--nav-gap) / 2);
	--button-text-color: var(--bright-color);
	--button-background-color: var(--accent-color);
	--button-hover-text-color: var(--accent-color);
	--button-hover-background-color: var(--light-color);
	--button-radius: 3em;
}
nav.post-tags a,
.post-tag {
	display: inline-block;
	font-size: calc(var(--font-size) * .625);
	padding: calc(var(--nav-anchor-padding) / 2) var(--nav-anchor-padding);
	width: auto;
	max-width: 100%;
	white-space: nowrap;
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	color: var(--button-text-color);
	background: var(--button-background-color);
	border-radius: var(--button-radius);
}
nav.post-tags a.active,
a.post-tag.active {
	color: var(--button-hover-text-color);
	background: var(--button-hover-background-color);
}
nav.post-tags .post-tag + * {
	margin-top: 0;
}


/* =============== HOVER =============== */

@media (hover: hover) {
	nav.post-tags a:hover,
	a.post-tag:hover {
		color: var(--button-hover-text-color);
		background: var(--button-hover-background-color);
	}
}
@media (hover: none) {
	nav.post-tags a:active,
	a.post-tag:active,
	nav.post-tags a.hover,
	a.post-tag.hover {
		color: var(--button-hover-text-color);
		background: var(--button-hover-background-color);
	}
}


/* ============================== MORE LINK ============================== */

/* unused */

.more-link {
	position: absolute;
	z-index: 20;
	inset: 0;
	font-size: 0;
	line-height: 0;
	margin: 0;
	border: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: var(--bright-color);
	opacity: 0;
}
.more-link .label {
	position: relative !important;
	font-size: var(--font-size) !important;
	line-height: 1 !important;
	margin-top: .25em;
	transform: translateY(.25em);
}
.focus .more-link,
.grid .item .more-link {
	aspect-ratio: var(--poster-ratio);
}
.more-link {
	transition: opacity var(--duration-fast) var(--easeInQuint);
}
.more-link::before,
.more-link .label {
	transition: transform var(--duration-fast) var(--easeInQuint);
}

@media (hover: hover) {
	.more-link:hover {
		opacity: 1;
	}
	.more-link:hover .label {
		transform: translateY(0);
	}
}
@media (hover: none) {
	.more-link:active,
	.more-link.hover {
		opacity: 1;
	}
	.more-link:active .label,
	.more-link.hover .label {
		transform: translateY(0);
	}
}


/* ============================== PRIMARY ============================== */

nav.primary {
	--nav-gap: 0;
	--nav-anchor-padding: 0;
	text-transform: uppercase;
	white-space: nowrap;
	text-align: center;
	width: auto;
	max-width: var(--content-max-width);
	font-size: 1.25em;
}
nav.primary .menu {
	align-items: center;
	justify-content: center;
}
nav.primary a {
	gap: .25em;
}
nav.primary a.active {
	pointer-events: none;
}


#heading nav.primary { margin: 0 -1em 0 auto; }
/*
nav.primary a span {
	position: relative;
	padding: .5em;
}
nav.primary a span::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: .5em;
	height: var(--stroke-width);
	width: 0%;
	border-radius: var(--stroke-width);
	color: currentColor;
	background-color: currentColor;
	transform: translate(0, -.25em);
	pointer-events: none;
}
*/
nav.primary a::before,
nav.primary a::after {
	content: "";
	position: relative;
	display: inline-flex;
	justify-content: center;
	flex-grow: 1;
	flex-basis: 0;
	font-size: 1.5em;
	height: auto;
	width: 0;
	margin: auto;
	transform: none;
	pointer-events: none;
}
nav.primary .menu :not(:last-child) a::after,
nav.primary a:not(:last-child)::after {
	content: "・";
}
nav.primary a:not(:last-child)::after {
	visibility: hidden;
}

@media (min-width: 1400px) {
	nav.primary {
		font-size: 2em;
	}
}

/* =============== HOVER =============== */
/*
@media (hover: hover) {
	nav.primary a:hover span::after,
	nav.primary .menu .active a span::after,
	nav.primary a.active span::after {
		width: calc(100% - 1em);
	}
}
@media (hover: none) {
	nav.primary a.hover span::after,
	nav.primary .menu .active a span::after,
	nav.primary a.active span::after {
		width: calc(100% - 1em);
	}
}
*/

/* ============================== SECONDARY ============================== */

nav.secondary {
	--nav-anchor-padding: calc(var(--nav-anchor-padding) / 2);
	flex-direction: row;
}


/* ============================== MENU ============================== */

.menu {
	display: flex;
	flex-wrap: wrap;
	text-align: left;
	margin: 0;
}
.menu > * {
	position: relative;
	list-style: none;
	margin: 0;
}
.menu a {
	display: inline-flex;
	flex-direction: row;
	color: inherit;
	/*padding: var(--nav-anchor-padding);*/
	margin: 0;
}
.has-menu .menu a {
	font-size: .75em;
	width: 100%;
}
nav:not(.expanded) .has-menu .menu:not(.collapsible) {
	position: absolute;
	top: 100%;
	left: 0;
	flex-direction: column;
	background: var(--bright-color);
	opacity: 0;
	pointer-events: none;
	transform: translateY(-2em);
	visibility: hidden;
}

@media (hover: hover) {
	nav:not(.expanded) .has-menu:hover .menu:not(.collapsible) {
		opacity: 1;
		pointer-events: all;
		transform: translateY(0);
		visibility: visible;
	}
}
@media (hover: none) {
	nav:not(.expanded) .has-menu.hover .menu:not(.collapsible) {
		opacity: 1;
		pointer-events: all;
		transform: translateY(0);
		visibility: visible;
	}
}

nav.expanded .menu .menu {
	flex-direction: column;
}

@media (max-width: 1000px) {
	.menu {
		flex-direction: row;
	}
	/*.menu > * {
		padding: 0 2em;
	}*/
	.menu .menu > * {
		padding: 0;
	}
	.menu a.collapsible-toggle {
		position: absolute;
		top: 0;
		left: 0;
		width: 3em;
		aspect-ratio: 1/1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		visibility: visible;
	}
}
@media (min-width: 1000px) {
	.menu {
		flex-direction: row;
	}
}


/* ============================== NAVIGATION ============================== */

#navigation {
	position: fixed;
	z-index: 1300;
	top: var(--header-height);
	right: 0;
	display: flex;
	height: 0;
	width: 100%;
	overflow: hidden;
	visibility: hidden;
	scroll-behavior: smooth;
}
body.expanded #navigation {
	overflow: auto;
	visibility: visible;
	height: calc(100svh - var(--header-height));
}
#navigation .navigation-content {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	padding: var(--gutter-gap) var(--section-gap-x);
	background: var(--bright-color);
}
#navigation .navigation-content > * {
	pointer-events: auto;
	opacity: 0;
	/*margin: auto;*/
	transform: translate3d(0, -3em, 0);
}
#navigation nav.navbar {
	--nav-font-size: .75em;
}



#navigation .navigation-content.items-center > * {
	margin-block: auto;
}


/* =============== EXPAND =============== */

body.expanded {
	overflow: hidden;
}
body.expanded #navigation .navigation-content {
	overflow: auto;
}
body.expanded #navigation .navigation-content > * {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

#navigation-expand {
	position: relative;
	z-index: 2100;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 1em;
}
@media (min-width: 1000px) {
	#navigation-expand {
		display: none;
	}
}




/* ============================== CONTEXTUAL ============================== */

nav.contextual {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	font-size: var(--font-size);
	line-height: 1;
	white-space: nowrap;
	width: 100%;
	max-width: none;
	padding: 1em 0;
}
nav.contextual > *:not(nav) {
	pointer-events: auto;
}
nav.contextual > * + * {
	margin-top: 0;
}
nav.contextual.main a {
	padding: .5em;
	margin: 0;
}
nav.contextual.main *:not(.swiper-controls) a::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: .5em;
	display: block !important;
	height: var(--stroke-width);
	width: 0%;
	border-radius: var(--stroke-width);
	color: currentColor;
	background-color: currentColor;
	pointer-events: none;
	transform: none;
}
nav.contextual.main a:hover::after,
nav.contextual.main a.active::after {
	width: calc(100% - 1em);
}
nav.contextual .mode {
	flex-shrink: 0;
}
nav.contextual > .mode:first-child {
	margin-right: auto;
}
nav.contextual > .mode:first-child + .filters.swiperable *:first-child {
	margin-left: auto;
}
nav.swiperable {
	padding: 0 calc(var(--gutter-gap) * 2);
}
nav.swiperable::before {
	content: "";
	position: absolute;
	z-index: 5;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(90deg,
		rgba(var(--theme-rgb), 1) 0%,
		rgba(var(--theme-rgb), 0) calc(var(--gutter-gap) * 2),
		rgba(var(--theme-rgb), 0) calc(100% - var(--gutter-gap) * 2),
		rgba(var(--theme-rgb), 1) 100%
	);
}
nav.contextual.swiperable,
nav.contextual nav.swiperable {
	width: 100%;
}
nav.contextual.swiperable .swiper-slide,
nav.contextual.swiperable a {
	width: auto;
}
nav.contextual.centered a:first-child,
nav.contextual.centered nav a:first-child,
nav.contextual.centered .swiper-slide:first-child {
	margin-left: auto;
}
nav.contextual.centered a:last-child,
nav.contextual.centered nav a:last-child,
nav.contextual.centered .swiper-slide:last-child {
	margin-right: auto;
}


/* =============== BREADCRUMB =============== */

nav.contextual.breadcrumb {
	font-size: calc(var(--title-font-size) * 2 / 3);
	width: calc(100% - var(--section-gap) * 2);
	margin: 0 auto;
	max-width: var(--content-max-width);
}
nav.contextual.breadcrumb + * {
	margin-top: var(--gutter-gap);
}
nav.contextual.breadcrumb a:not(.current):not(.active):not(:hover) {
	opacity: .33;
}
nav.contextual.breadcrumb a.current {
	z-index: 30;
}
nav.contextual.breadcrumb .swiperable {
	padding: 0;
}
nav.contextual.breadcrumb a {
	padding: 1em .5em;
}
nav.contextual.breadcrumb > *:first-child {
	margin-left: -.5em;
}
nav.contextual.breadcrumb > *:last-child {
	margin-right: -.5em;
}


/* =============== STICKY =============== */

main nav.contextual.sticky,
nav.filters.sticky,
nav.actions.sticky {
	position: sticky;
	z-index: 100;
	top: calc(var(--header-height) + var(--contextual-height));
	overflow: visible;
}
nav.contextual.sticky::after,
nav.filters.sticky::after,
nav.actions.sticky::after {
	content: '';
	position: absolute;
	z-index: -1;
	top: 0;
	left: 50%;
	height: 100%;
	width: 100svw;
	transform: translateX(-50%);
	background: var(--background-color);
	pointer-events: none;
}
nav.contextual.sticky {
	position: sticky;
	z-index: 1100;
	top: var(--header-height);
}
nav.sticky .swiperable::before {
	opacity: 0;
}
nav.sticky.is-stuck .swiperable::before {
	opacity: 1;
}
nav[data-grid-active-filters] {
	position: fixed;
	z-index: 100;
	top: 50%;
	right: 2rem;
	transform: translate(0, -50%);
}

@media (max-width: 760px) {
	nav.contextual {
		flex-wrap: wrap;
	}
	nav.contextual fieldset {
		order: -1;
	}
}


/* ============================== FILTERS ============================== */

nav.filters {
	width: 100%;
	justify-content: flex-start;
}
nav.filters.is-center {
	justify-content: center;
}


/* ============================== GO BUTTONS ============================== */

/* =============== GO-BACK =============== */

.go-back {
	display: inline-flex;
	font-size: var(--go-back-font-size);
	width: auto;
}
.go-back::after {
	display: none;
}
nav.contextual .go-back {
	margin-right: auto;
	margin-left: var(--gutter-gap) !important;
}


/* =============== GO-TO-THE-TOP =============== */

a.go-to-the-top {
	--button-text-color: var(--dark-color);
	--button-background-color: var(--light-color);
	position: fixed;
	z-index: 1000;
	right: var(--gutter-gap);
	bottom: calc(var(--font-size) * 3 + var(--gutter-gap));
	transform: translate(100%, 0);
	aspect-ratio: 1/1;
	opacity: 0;
}
a.go-to-the-top::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	display: block;
	height: 100%;
	aspect-ratio: 1/1;
	color: var(--button-text-color);
	background: var(--button-background-color);
	border-radius: 50%;
	transform-origin: center;
	pointer-events: none;
}
body.scrolled a.go-to-the-top {
	transform: translate(0, 0);
	opacity: 1;
}

@media (hover: hover) {
	a.go-to-the-top:hover::after {
		background: var(--button-hover-background-color);
		transform: scale(1.25);
	}
}
@media (hover: none) {
	a.go-to-the-top:active::after,
	a.go-to-the-top.hover::after {
		background: var(--button-hover-background-color);
		transform: scale(1.25);
	}
}


/* ============================== SOCIAL ============================== */

nav.socialbar,
nav.sharebar {
	white-space: nowrap;
}
nav.socialbar:not(.buttons),
nav.sharebar:not(.buttons) {
	gap: 0;
}
nav.socialbar > .title,
nav.sharebar > .title {
	margin-right: 1em;
}
nav.socialbar a > *,
nav.sharebar a > * {
	display: block;
	height: 1em;
	width: 1em;
}
nav.sharebar {
	font-size: .875em;
}
nav.buttons.sharebar > *:not(span) {
	padding: 1em;
}
.copy-toast {
	position: fixed;
	z-index: 10000;
	bottom: var(--gutter-gap);
	left: 50%;
	transform: translateX(-50%);
	color: var(--bright-color);
	background: var(--dark-color);
	font-size: .875em;
	padding: 1em;
	border-radius: .5em;
	opacity: 0;
	visibility: hidden;
	transition: all var(--duration-fast) ease;
}
.copy-toast.show {
	opacity: 1;
	visibility: visible;
}
.copy-toast.error {
	background: var(--alert-color);
}


/* ============================== PAGINATION ============================== */

nav.pagination {
	justify-content: center;
	--button-radius: 50%;
	--button-text-color: var(--dark-color);
	--button-background-color: var(--bright-color);
	--button-hover-text-color: var(--bright-color);
	--button-hover-background-color: var(--dark-color);
}
nav.pagination > * {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	text-align: center;
	justify-content: center;
	font-family: inherit;
	color: var(--button-text-color);
	height: var(--pagination-height);
	aspect-ratio: 1/1;
	border-radius: var(--button-radius);
}
nav.pagination > span {
	background: var(--button-background-color);
}
nav.pagination > *::after,
nav.pagination a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	display: block;
	height: 100%;
	background: var(--button-background-color);
	transform-origin: center;
	border-radius: var(--button-radius);
	pointer-events: none;
}
nav.pagination .active {
	color: var(--button-hover-text-color);
}
nav.pagination .active::after {
	background: var(--button-hover-background-color);
	transform: var(--nav-anchor-transform);
}

@media (hover: hover) {
	nav.pagination a:hover {
		color: var(--button-hover-text-color);
	}
	nav.pagination a:hover::after {
		background: var(--button-hover-background-color);
		transform: var(--nav-anchor-transform);
	}
}
@media (hover: none) {
	nav.pagination a:active,
	nav.pagination a.hover {
		color: var(--button-hover-text-color);
	}
	nav.pagination a:active::after,
	nav.pagination a.hover::after {
		background: var(--button-hover-background-color);
		transform: var(--nav-anchor-transform);
	}
}



/* ================================================================================================= */
/* ============================================= THEME ============================================= */
/* ================================================================================================= */

/* here for project-specific overrides */

/* ============================== MAINTENANCE ============================== */

body.maintenance main {
	justify-content: center;
}


/* =============== LABEL =============== */

.maintenance-label {
	position: fixed;
	z-index: 10000;
	bottom: 0;
	left: 0;
	font-size: .75em;
	line-height: 1;
	font-weight: var(--font-weight-bold);
	padding: 1em;
	background: var(--alert-color);
}


/* ============================== ADMIN ONLY ============================== */

/* for hidden pages visible onlyy to admins **/

nav a.admin-only {
	text-decoration: line-through;
}


/* =============== LABEL =============== */

.hidden-label {
	position: fixed;
	z-index: 10000;
	bottom: 0;
	right: 0;
	font-size: .75em;
	line-height: 1;
	font-weight: var(--font-weight-bold);
	padding: 1em;
	background: var(--alert-color);
}


/* ============================== MENU ============================== */

.menu a span {
	position: relative;
	padding: .5em;
}
.menu a span::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: .5em;
	display: block;
	height: var(--stroke-width);
	width: 0%;
	border-radius: var(--stroke-width);
	color: currentColor;
	background-color: currentColor;
	transform: translate(0, -.25em);
	pointer-events: none;
}


/* =============== HOVER =============== */

@media (hover: hover) {
	.menu a:hover span::after,
	.menu .active a span::after,
	.menu a.active span::after {
		width: calc(100% - 1em);
	}
}
@media (hover: none) {
	.menu a.hover span::after,
	.menu .active a span::after,
	.menu a.active span::after {
		width: calc(100% - 1em);
	}
}

/* ============================== NAVBAR ============================== */

nav.navbar {
	--nav-gap: 0;
}


/* ============================== ALIAS ============================== */

nav.alias {
	--nav-font-size: .75em;
	--nav-gap: 0;
}
nav.scroll-to {
	--nav-gap: 0;
}


/* ============================== GO-BACK ============================== */

a.go-back {
	margin-top: var(--content-spacing);
}


/* ============================== LEGACY ============================== */

/* nav.centered → nav.is-center */
nav.centered,
.centered nav { justify-content: center; }

/* nav.align-right → nav.is-right */
nav.align-right,
.align-right nav { justify-content: flex-end; }

/* nav.justified → nav.is-justify */
nav.justified { justify-content: space-between; }

/* nav.stretched → nav.is-stretch */
nav.stretched { flex-wrap: nowrap; }
nav.stretched > * { flex: 1 1 0; }

/* nav.buttons.centered → nav.buttons.is-center */
nav.buttons.centered { width: 100%; justify-content: center; }
.button.centered { margin-left: auto; margin-right: auto; }

/* nav.contextual.centered → nav.contextual.is-center */
nav.contextual.centered a:first-child,
nav.contextual.centered nav a:first-child,
nav.contextual.centered .swiper-slide:first-child { margin-left: auto; }
nav.contextual.centered a:last-child,
nav.contextual.centered nav a:last-child,
nav.contextual.centered .swiper-slide:last-child { margin-right: auto; }

/* nav.filters.centered → nav.filters.is-center */
nav.filters.centered { justify-content: center; }