@charset "UTF-8";

/**
 * navigation.css 1.0.0
 *
 * Navigation components — nav base, buttons, menus, contextual, social, pagination.
 * Submit button styles also defined here (shared with nav.buttons).
 *
 * SECTIONS
 * VARS        — nav gap, button tokens, contextual height
 * ANIMATIONS  — a/button transitions, #navigation open/close
 * NAV         — base nav element
 * BUTTONS     — nav.buttons, .button, button, input[type=submit]
 * POST TAGS   — nav.post-tags, .post-tag
 * READ-MORE   — .read-more
 * MORE LINK   — .more-link overlay
 * PRIMARY     — nav.primary
 * SECONDARY   — footer nav.secondary
 * ALIAS       — nav.alias (header top)
 * MENU        — .menu, .menu.collapsible, submenus
 * NAVIGATION  — #navigation mobile overlay
 * NAVBAR      — nav.navbar
 * SITEMAP     — nav.sitemap
 * CONTEXTUAL  — nav.contextual, breadcrumb, sticky, filters
 * GO BUTTONS  — .go-back, .go-to-the-top
 * SOCIAL      — nav.socialbar, nav.sharebar, .copy-toast
 * PAGINATION  — nav.pagination
 * SCROLLTO    — nav.scroll-to
 * CUSTOM      — project-specific nav overrides
 */


/* ============================================== */
/* ==================== VARS ==================== */
/* ============================================== */


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

:root {
	--nav-font-family: var(--font-family-sans);
	--nav-font-size: 1em;
	--nav-gap: 1em;
	--nav-anchor-padding: 1em;
}


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

:root {
	--button-text-color: var(--bright-color);
	--button-background-color: var(--dark-color);
	--button-hover-text-color: var(--dark-color);
	--button-hover-background-color: var(--accent-color);
	--button-text-transform: uppercase;
	--button-letter-spacing: .125em;
	--button-font-size: calc(var(--font-size) * .625);
	--button-font-weight: var(--font-weight-bold);
	--button-padding: 1em 1.5em;
	--button-radius: calc(var(--button-font-size) * 4);
}
.rounded {
	--button-radius: 2em;
}


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

:root {
	--contextual-height: 0px;
}


/* ==================================================== */
/* ==================== 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);
}
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);
}


/* ========== CUSTOM ========== */

/* here for custom animation overrides */


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


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

nav {
	position: relative;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--nav-gap);
	font-family: var(--nav-font-family);
	font-size: var(--nav-font-size);
	line-height: 1;
	pointer-events: none;
}
nav a {
	display: inline-flex;
	align-items: center;
	line-height: 1;
	margin: 0;
	padding: var(--nav-anchor-padding);
	text-decoration: none;
	pointer-events: auto;
}
nav a::after {
	display: none; /* reset underline from global a */
}
nav a + a {
	margin-top: 0;
}


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

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


/* ========== CUSTOM ========== */

nav.full,
nav.inline {
	width: 100%;
}
nav.vertical {
	flex-direction: column;
}
nav.centered {
	justify-content: center;
}


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

/**
 * nav.buttons
 * a.button
 * button (form)
 * input[type=submit]
 */


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

nav.buttons a,
.button,
button,
input[type=submit] {
	position: relative;
	z-index: 10;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--nav-gap);
	font-family: var(--nav-font-family);
	font-size: var(--button-font-size);
	font-weight: var(--button-font-weight);
	letter-spacing: var(--button-letter-spacing);
	text-transform: var(--button-text-transform);
	text-decoration: none;
	white-space: nowrap;
	width: auto;
	border: 0 !important;
	padding: var(--button-padding);
	color: var(--button-text-color);
	background: var(--button-background-color);
	border-radius: var(--button-radius);
}
nav.buttons a.active,
.button.active,
button.active {
	color: var(--button-hover-text-color);
	background: var(--button-hover-background-color);
}
.button::after,
button::after {
	display: none; /* reset underline from global a — nav.buttons a::after covered by nav a::after */
}


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

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


/* ========== ROUNDED ========== */

/* cf. VARS */


/* ========== ICONS ========== */

/* Icon only — ex. <span class="icon-about button"> */

[class^="icon-"].button {
	aspect-ratio: 1/1;
	height: auto;
}


/* ========== IN CONTENT ========== */

h1 .button,
h2 .button,
h3 .button,
h4 .button,
h5 .button,
h6 .button,
p .button {
	margin-top: 0;
}


/* ========== CONTAINER ========== */

/* For multiple nav.buttons */

nav.buttons-container {
	gap: var(--global-spacing);
}
nav.buttons-container > nav.buttons {
	width: 100%;
	margin: 0;
}


/* ========== LARGE ========== */

/* Like form input height */

.buttons.large,
.button.large,
button.large {
	--button-font-size: calc(var(--font-size) * .75);
	--button-padding: 1.5em 2em;
}


/* ========== CENTERED ========== */

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


/* =================================================== */
/* ==================== 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,
.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,
	.post-tag:hover {
		color: var(--button-hover-text-color);
		background: var(--button-hover-background-color);
	}
}
@media (hover: none) {
	nav.post-tags a:active,
	.post-tag:active,
	nav.post-tags a.hover,
	.post-tag.hover {
		color: var(--button-hover-text-color);
		background: var(--button-hover-background-color);
	}
}


/* =================================================== */
/* ==================== READ-MORE ==================== */
/* =================================================== */

/*
.read-more {
	margin-right: .5em;
}
*/


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

/** unused **/

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

.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);
	background: rgba(var(--dark-rgb), .9);
	opacity: 0;
}


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

@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);
	}
}


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

.more-link .label {
	position: relative !important;
	font-size: var(--font-size) !important;
	line-height: 1 !important;
	margin-top: .25em;
	transform: translateY(.25em);
}


/* ========== IN GRID / FOCUS ========== */

.focus .more-link,
.grid .item .more-link {
	aspect-ratio: var(--poster-ratio);
}


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

.more-link {
	transition: opacity var(--duration-fast) var(--easeInQuint);
}
.more-link::before,
.more-link .label {
	transition: transform var(--duration-fast) var(--easeInQuint);
}


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


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

nav.primary {
	--nav-gap: 0;
	--accent-color: var(--dark-color);
}
nav.primary a {
	white-space: nowrap;
	opacity: .33;
}
nav.primary a.active {
	opacity: 1;
}


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

@media (hover: hover) {
	nav.primary a:hover {
		opacity: 1;
	}
}
@media (hover: none) {
	nav.primary a:active,
	nav.primary a.hover {
		opacity: 1;
	}
}


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

nav.secondary {
	--nav-gap: 0;
	flex-direction: row;
	white-space: nowrap;
}


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

nav.alias {
	--nav-gap: 0;
	--nav-font-size: .75em;
}
nav.alias.only-mobile {
	--nav-font-size: 1em;
	order: -1;
}
/*
nav.alias a {
	padding: 1em;
}
nav.alias.only-mobile {
	font-size: 1em;
	margin: 0 0 0 auto;
}
#navigation nav.alias {
	justify-content: center;
	font-size: .625em;
	margin-top: 0;
}
*/

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

/**
 * nav.menu
 * .menu
 * .menu.collapsible (mobile only)
 * ul.menu > li > a + ul.menu > li > a
 * in: nav.sitemap
 */


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

.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 DEFAULT ========== */

.has-menu .menu a {
	font-size: .75em;
	width: 100%;
}


/* ========== HAS-MENU HOVERING ========== */

/* Hovering menus with submenus */

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);
}

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


/* ========== HAS-MENU EXPANDED ========== */

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


/* ========== @MEDIA ========== */

/* .menu > * — padding for collapsible-toggle */

@media (max-width: 1000px) {
	.menu {
		flex-direction: column;
	}
	.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;
	}
	/*
	.menu a.collapsible-toggle {
		display: none;
		visibility: hidden;
	}
	.menu.collapsible {
		max-height: none !important;
	}
	.menu.collapsible > * {
		opacity: 1;
	}
	*/
}


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


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

#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 CONTENT ========== */

#navigation .navigation-content {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	padding: var(--gutter-gap);
	background: var(--bright-color);
}
#navigation .navigation-content > * {
	pointer-events: auto;
	opacity: 0;
	margin: auto;
	transform: translate3d(0, -3em, 0);
}


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

#navigation nav.navbar {
	--nav-font-size: .75em;
}


/* ========== BODY EXPANDED ========== */

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 ========== */

#navigation-expand {
	position: relative;
	z-index: 2100;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 2em; /*var(--gutter-gap);*/
}


/* ========== @MEDIA ========== */

/*
@media (min-width: 1000px) {
	#navigation-expand {
		display: none;
	}
}
*/

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

/*
nav.navbar {
	font-size: .75em;
	flex-direction: row;
	justify-content: center;
}
*/
nav.navbar {
	--nav-gap: 0;
}

/* ================================================= */
/* ==================== SITEMAP ==================== */
/* ================================================= */

/** unused **/

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

/*
 * #contextual     — under header
 * nav.contextual  — contextual nav for sections / actions for page
 */


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

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: var(--font-size) 0;
}
nav.contextual > * {
	pointer-events: auto;
}
nav.contextual > * + * {
	margin-top: 0;
}


/* ========== MODE ========== */

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;
}


/* ========== FX ========== */

/* TODO: move to swipers.js */

nav.swiperable {
	padding: 0 calc(var(--gutter-gap) * 2);
}
nav.swiperable::before {
	content: "";
	position: absolute;
	z-index: 20;
	inset: 0;
	pointer-events: none;
	background: var(--bright-color);
	background: linear-gradient(90deg,
		rgba(var(--bright-rgb), 1) 0%,
		rgba(var(--bright-rgb), 0) calc(var(--gutter-gap) * 2),
		rgba(var(--bright-rgb), 0) calc(100% - var(--gutter-gap) * 2),
		rgba(var(--bright-rgb), 1) 100%
	);
	margin-left: calc(var(--gutter-gap) * -2);
	margin-right: calc(var(--gutter-gap) * -2);
}

nav.contextual.swiperable,
nav.contextual nav.swiperable {
	width: 100%;
}
nav.contextual.swiperable .swiper-slide,
nav.contextual.swiperable a {
	width: auto;
}


/* ========== CENTERED ========== */

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(--bright-color);
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--duration-fast);
}
nav.contextual.sticky.is-stuck::after,
nav.filters.sticky.is-stuck::after,
nav.actions.sticky.is-stuck::after {
	opacity: 1;
}
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%);
}


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

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


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


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

a.go-back {
	position: fixed;
	z-index: 1000;
	left: var(--gutter-gap);
}
nav.contextual .go-back {
	margin-right: auto;
	margin-left: var(--gutter-gap) !important;
}


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

a.go-to-the-top {
	/*position: fixed;
	z-index: 1000;
	right: var(--gutter-gap);
	bottom: calc(var(--font-size) * 3 + var(--gutter-gap));
	transform: translate(100%, 0);
	*/
	position: relative;
	aspect-ratio: 1/1;
	opacity: 0;
	border-radius: 0;
}
a.go-to-the-top::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	display: block;
	height: 100%;
	aspect-ratio: 1/1;
	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;
}


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

@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);
	}
}


/* ========== @MEDIA ========== */

@media (max-width: 1000px) {
	a.go-back {
		bottom: calc(var(--font-size) * 3 + var(--gutter-gap));
	}
}
@media (min-width: 1000px) {
	a.go-back {
		top: 50%;
		transform: translate(0, -50%);
	}
}


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

/**
 * socialbar — in #navigation / footer — with .buttons
 */


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

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;
}


/* ========== SHAREBAR ========== */

nav.sharebar {
	font-size: .875em;
}
nav.buttons.sharebar > *:not(span) {
	padding: 1em;
}


/* ========== COPY / PASTE ========== */

.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 ==================== */
/* ==================================================== */


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

nav.pagination {
	display: flex;
	gap: 1.5em;
	justify-content: center;
	font-size: calc(var(--font-size) * .75);
}
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: 4em;
	aspect-ratio: 1/1;
	border-radius: 50%;
}
nav.pagination > *::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--button-background-color);
	border-radius: 50%;
	pointer-events: none;
}
nav.pagination .active {
	color: var(--button-hover-text-color);
}
nav.pagination .active::after {
	background: var(--button-hover-background-color);
	transform: scale(1.25);
}


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

@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: scale(1.25);
	}
}
@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: scale(1.25);
	}
}


/* ================================================== */
/* ==================== SCROLLTO ==================== */
/* ================================================== */

nav.scroll-to {
	gap: 0;
}


/* ================================================ */
/* ==================== CUSTOM ==================== */
/* ================================================ */

nav.page-title {
	--nav-gap: .25em;
}
nav.page-title a:not(.active):not(:hover) {
	opacity: .25;
}




/* ================================================ */
/* ==================== CUSTOM ==================== */
/* ================================================ */


/* ========== BUTTONS ALT ========== */

/* Inverted variant — light background, dark text */

nav.filters a,
nav.buttons.alt a,
.button.alt,
button.alt {
	color: var(--button-hover-text-color);
	background: var(--button-hover-background-color);
}
nav.filters a:hover,
nav.filters a.active,
nav.buttons.alt a:hover,
nav.buttons.alt a.active,
.button.alt.active,
button.alt.active {
	color: var(--button-text-color);
	background: var(--button-background-color);
}

@media (hover: hover) {
	nav.filters a:hover,
	nav.buttons.alt a:hover,
	.button.alt:hover,
	button.alt:hover {
		color: var(--button-text-color);
		background: var(--button-background-color);
	}
}
@media (hover: none) {
	nav.filters a:active,
	nav.buttons.alt a:active,
	.button.alt:active,
	button.alt:active,
	nav.filters a.hover,
	nav.buttons.alt a.hover,
	.button.alt.hover,
	button.alt.hover {
		color: var(--button-text-color);
		background: var(--button-background-color);
	}
}


/* ========== BUTTONS SMALL ========== */

nav.buttons.small > *,
.button.small,
button.small {
	font-size: calc(var(--button-font-size) * .75);
}



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

nav.primary {
	font-size: 1.5em;
}
nav.primary a {
	text-align: center;
	padding: 1em;
}

@media (max-width: 1000px) {
	nav.primary {
		position: fixed;
		z-index: 1000;
		top: 50%;
		left: 0;
		padding: 1.25rem;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}
	.primary-expand {
		display: none !important;
	}
}
@media (min-width: 1000px) {
	.primary-expand {
		display: none !important;
	}
}


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

/* Children grow equally */

.menu > * {
	flex-grow: 1;
	flex-basis: 0;
}

/* Submenu */

.menu .menu {
	flex-direction: column;
	font-size: .75em;
	margin: 0;
}
.menu .menu a {
	padding: .75em var(--nav-anchor-padding);
}


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

@media (max-width: 760px) {
	#navigation .navigation-content {
		gap: 0;
	}
}
@media (min-width: 760px) {
	#navigation .navigation-content {
		gap: var(--gutter-gap);
	}
	#navigation .copyright,
	#navigation nav.secondary {
		display: none;
	}
}


/* ========== SITEMAP ========== */

nav.sitemap {
	margin: 0 auto;
	white-space: nowrap;
}

@media (min-width: 760px) {
	nav.sitemap > .menu {
		width: 100%;
	}
}


/* ========== SOCIALBAR ========== */

nav.socialbar,
nav.sharebar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}


/* ========== EXPANDED ========== */

/* Mobile — blur and hide main content */

@media (max-width: 1000px) {
	body.expanded main {
		filter: blur(.25rem);
		opacity: .25;
		pointer-events: none;
	}
	body.expanded .shapeSVG {
		opacity: .25;
	}
	nav.primary {
		transform: translate(-100%, -50%);
	}
	body.expanded nav.primary {
		transform: translate(0, -50%);
	}
	footer nav.contextual {
		transform: translate(0%, 200%);
	}
	body.expanded footer nav.contextual {
		transform: translate(0, 0%);
	}
}
@media (min-width: 1000px) {
	body.expanded main {
		filter: none;
		opacity: 1;
		pointer-events: auto;
	}
	body.expanded .shapeSVG {
		opacity: 1;
	}
	nav.primary,
	body.expanded nav.primary {
		transform: none;
	}
	footer nav.contextual,
	body.expanded footer nav.contextual {
		transform: none;
	}
}


/* ========== PAGE TITLE ========== */

nav.page-title {
	--nav-gap: .25em;
}
nav.page-title a:not(.active):not(:hover) {
	opacity: .25;
}