@charset "UTF-8";

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


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

nav.sticky .swiperable:before {
	opacity: 0;
}
nav.sticky.is-stuck .swiperable:before {
	opacity: 1;
}
main nav.contextual.sticky,
nav.filters.sticky,
nav.actions.sticky {
	position: sticky;
	z-index: 100;
	top: calc(var(--header-height) + var(--contextual-height));
	top: calc(var(--header-height) + var(--contextual-height));
	overflow: visible;
}
/*
main nav.contextual.sticky.is-stuck,
nav.filters.sticky.is-stuck,
nav.actions.sticky.is-stuck {
	background: var(--bright-color);
}
*/
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);
}



/**************************/
/**************************/
/********** VARS **********/
/**************************/
/**************************/

/********************************/
/********** CONTEXTUAL **********/
/********************************/

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

/****************************/
/********** COLORS **********/
/****************************/

:root {
	--nav-gap: 0; /*1em;*/

	--button-text-color: var(--bright-color);
	--button-background-color: var(--dark-color);

	--button-hover-text-color: var(--dark-color);
	--button-hover-background-color: var(--bright-color);

	--button-font-size: .75rem;
	--button-radius: 0;
}

.rounded {
	--button-radius: 2em;
}

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

/*************************/
/*************************/
/********** NAV **********/
/*************************/
/*************************/

/*****************************/
/********** DEFAULT **********/
/*****************************/

nav {
	position: relative;
	display: -webkit-inline-box;
	display: -webkit-inline-flex;
	display: -moz-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap;
	-webkit-box-align: center;
	-webkit-align-items: center;
	   -moz-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: var(--nav-gap);
	line-height: 1;
}
nav a {
	display: -webkit-inline-box;
	display: -webkit-inline-flex;
	display: -moz-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	   -moz-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	line-height: 1;
	margin: 0;
	text-decoration: none;
}

/****************************/
/********** CUSTOM **********/
/****************************/

nav.full {
	width: 100%;
}
nav.inline {
	width: 100%;
}
nav.inline > * + * {
	margin-top: 0;
}
nav.vertical {
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-webkit-flex-direction:column;
	   -moz-box-orient:vertical;
	   -moz-box-direction:normal;
	    -ms-flex-direction:column;
	        flex-direction:column;
}
nav.centered {
	-webkit-box-pack:center;
	-webkit-justify-content:center;
	   -moz-box-pack:center;
	    -ms-flex-pack:center;
	        justify-content:center;
}

/*****************************/
/*****************************/
/********** BUTTONS **********/
/*****************************/
/*****************************/

/**
nav.buttons
a.button
button (form)

buttons > a / span

nav.buttons			: short line under (text-decoration)
nav.buttons.large	: larger line under (border-bottom)
**/

/*****************************/
/********** DEFAULT **********/
/*****************************/

nav.buttons {
	gap: var(--nav-gap);
	background: none;
}
nav.buttons a,
nav.buttons button,
.button,
button {
	position: relative;
	z-index: 10;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 1em;
	font-size: var(--button-font-size);
	line-height: 1;
	/*text-transform: uppercase;*/
	text-decoration: none;
	white-space: nowrap;
	width: auto;
	padding: 1em;
	border: 0 !important;
	color: var(--button-text-color);
	background: var(--button-background-color);
	-webkit-border-radius: var(--button-radius);
	   -moz-border-radius: var(--button-radius);
	        border-radius: var(--button-radius);
}
nav.buttons a:hover,
.button:hover,
button:hover,
nav.buttons a.active,
.button.active,
button.active {
	color: var(--button-hover-text-color);
	background:var(--button-hover-background-color);
}
nav.buttons a > *,
nav.buttons > .button,
.button > *,
button > * {
	line-height: inherit;
	margin: 0;
}

/*************************/
/********** ALT **********/
/*************************/

/*nav.contextual a,*/
nav.filters a,
nav.buttons.alt a,
.button.alt,
button.alt {
	color: var(--button-hover-text-color);
	background:var(--button-hover-background-color);
}
/*nav.contextual a:hover,
nav.contextual a.active,*/
nav.filters a:hover,
nav.filters a.active,
nav.buttons.alt a:hover,
.button.alt:hover,
button.alt:hover,
nav.buttons.alt a.active,
.button.alt.active,
button.alt.active {
	color: var(--button-text-color);
	background: var(--button-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;
}

/****************************/
/********** CUSTOM **********/
/****************************/

/********** LARGE **********/
/** like form inputs **/

nav.buttons.large > *,
.button.large,
button.large {
	font-size: var(--font-size);
	min-height: var(--input-min-height);
	padding: 1em 2em;
}

/********** SMALL **********/

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

/********** MIN **********/
/** icon only in mobile **/

@media (max-width: 1000px) {
	#alias a {
		aspect-ratio: 1/1;
		height: 100%;
	}
}
/*
nav.buttons.min {
	--nav-gap: 0;
}
*/







/********** CENTERED **********/

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


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

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

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

/*****************************/
/********** 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;
}
.more-link:hover {
	opacity: 1;
}

/***************************/
/********** LABEL **********/
/***************************/

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

/*************************************/
/********** 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;
	font-size: 1.5em;
}
nav.primary a {
	white-space: nowrap;
	text-align: center;
	padding: 1em;
	opacity: .33;
}
nav.primary a.active,
nav.primary a:hover {
	opacity: 1;
	/*color: var(--bright-color);
	background: var(--dark-color);*/
}

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

@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;
	}
}
@media (min-width:1000px) {
	.primary-expand {
		display:none !important;
	}
}

/***************************/
/***************************/
/********** ALIAS **********/
/***************************/
/***************************/

/**
on top of header / #navigation
**/

/*****************************/
/********** DEFAULT **********/
/*****************************/

nav.alias {
	font-size: .75em;
	justify-content: flex-end;
}
nav.alias a {
	padding: 1em;
}

/****************************/
/********** ON TOP **********/
/****************************/

nav.alias.only-mobile {
	font-size: 1em;
	margin: 0 0 0 auto;
}

/***********************************/
/********** IN NAVIGATION **********/
/***********************************/

#navigation nav.alias {
	justify-content: center;
	font-size: .625em;
	margin-top: 0;
}





/**************************/
/**************************/
/********** 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;
	gap: 0;
}
.menu > * {
	flex-grow: 1;
	flex-basis: 0;
}
.menu > * {
	position:relative;
	list-style: none;
	margin: 0;
}
.menu a {
	display: inline-flex;
	flex-direction: row;
	/*gap: 1em;*/
	color: inherit;
	padding: var(--font-size);
	/*border: 0 !important;*/
}
.menu .menu {
	flex-direction: column;
	font-size: .75em;
	margin: 0;
}
.menu .menu a {
	padding: .75em var(--font-size);
}

/*********************************/
/********** COLLAPSIBLE **********/
/*********************************/

/*
menu.collapsible > li > a.collapsible + .menu
*/
/*
.menu.collapsible {
	display: flex;
	max-height: none;
}
.menu.collapsible > * {
	opacity: 1;
}
.menu a.collapsible-toggle {
	display: none;
	visibility: hidden;
}
.menu a.collapsible-toggle:before {
	display: none;
}
*/

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

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

@media (max-width:760px) {
	.menu {
		flex-direction: column;
		/*font-size: 1.25em;*/
	}
	.menu > * {
		padding: 0 2em;
	}
	.menu .menu > * {
		padding: 0;
	}
}
@media (min-width:760px) {
	.menu {
		flex-direction:row;
		/*gap: 2em 1em;
		font-size:1.5em;*/
	}
	.menu .menu {
		/*margin-left: .375em;*/
	}
}

/** mobile **/
@media (max-width:760px) {
	.menu a.collapsible-toggle {
		position: absolute;
		top: 0;
		left: 0;
		height: 3em;
		width: 3em;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		visibility: visible;
	}
	.menu a.collapsible-toggle > * {
		margin:auto;
	}
	.menu a.collapsible-toggle + .menu {
		flex-wrap: nowrap;
		opacity: 0;
		max-height: 0;
		overflow: hidden;
		margin: 0;
	}
	.menu a.collapsible-toggle + .menu.opened {
		opacity: 1;
		max-height: 10em;
	}
}
/** desktop **/
@media (min-width:760px) {
	.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 MOBILE **********/
/***************************************/

/********** NAVIGATION EXPANDED **********/

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

/********** NAVIGATION-EXPAND **********/

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

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

body.expanded {
	overflow:hidden;
}

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

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

/*****************************/
/*****************************/
/********** SITEMAP **********/
/*****************************/
/*****************************/

/* based on .menu */

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

/********** MENU **********/

nav.sitemap .menu a {
	/*padding: .5em;*/ /* for focus-visible */
	/*visibility: hidden;*/
}
/*
body.expanded nav.sitemap .menu a {
	visibility: visible;
}
nav.sitemap .menu a em {
	font-style: normal;
}
*/

/********** SUB MENU **********/
/*
nav.sitemap .menu .menu {
	gap:0;
}
nav.sitemap .menu .menu a {
	padding:.25em;
}
*/

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

/** mobile **/
@media (max-width:760px) {
	
}
/** desktop **/
@media (min-width:760px) {
	nav.sitemap > .menu {
		width:100%;
	}
}
/*
@media (min-width:1000px) {
	nav.sitemap {
		font-size:1.25em;
	}
}
@media (min-width:1200px) {
	nav.sitemap {
		font-size:1.5em;
	}
}
*/

/********************************/
/********************************/
/********** CONTEXTUAL **********/
/********************************/
/********************************/

/*
#contextual		== under header
nav.contextual	== ??

in header = contextual nav for sections
in footer = 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;
	overflow: hidden;
}
nav.contextual > * + * {
	margin-top: 0;
}

/**************************/
/********** MODE **********/
/**************************/

nav.contextual .mode {
	/*z-index: 300;*/ /* filters are 200 */
	flex-shrink: 0; /* prevent shrinking */
}
nav.contextual > .mode:first-child {
	margin-right: auto;
}
nav.contextual > .mode:first-child + .filters.swiperable *:first-child {
	margin-left: auto;
}

/************************/
/********** FX **********/
/************************/
/*
nav.contextual.swiperable,
nav.swiperable {
	padding: 0 calc(var(--gutter-gap) * 2);
}
nav.contextual.swiperable:before,
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%);
}
*/

/* TODO : IN 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;
}
*/

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

/*************************/
/********** NAV **********/
/*************************/
/*
nav.contextual,
nav.contextual.swiperable {
	overflow: hidden;
}
*/
/******************************/
/********** CENTERED **********/
/******************************/
/*
nav.contextual.centered nav {
	margin: 0 auto;
	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;
}

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

nav.contextual .go-back {
	margin-right: auto;
	margin-left: var(--gutter-gap) !important;
}

/******************************/
/******************************/
/********** EXPANDED **********/
/******************************/
/******************************/
/*
body.expanded header nav.alias {
	transform: translateY(-100%);
}
*/

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

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

/****************************/
/****************************/
/********** SOCIAL **********/
/****************************/
/****************************/

/**
socialbar > in #navigation / footer
with .buttons !
**/

/*****************************/
/********** DEFAULT **********/
/*****************************/

nav.socialbar,
nav.sharebar {
	display: flex;
	flex-wrap: wrap; /* for mobile */
	align-items: center;
	gap: 0;
	white-space: nowrap;
	line-height: 1;
}
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%;
	-webkit-transform: translateX(-50%);
	   -moz-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	     -o-transform: translateX(-50%);
	        transform: translateX(-50%);
	color: var(--bright-color);
	background: var(--dark-color);
	font-size: .875em;
	padding: 1em;
	-webkit-border-radius: .5em;
	   -moz-border-radius: .5em;
	        border-radius: .5em;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all var(--duration-fast) ease;
	-o-transition: all var(--duration-fast) ease;
	-moz-transition: all var(--duration-fast) ease;
	transition: all var(--duration-fast) ease;
}
.copy-toast.show {
	opacity: 1;
	visibility: visible;
}
.copy-toast.error {
	background: #f44336;
}

/********************************/
/********************************/
/********** PAGINATION **********/
/********************************/
/********************************/

nav.pagination {
	display: flex;
	gap: 1em;
	font-size: var(--font-size);
}
nav.pagination > * {
	display: inline-flex;
	align-items: center;
	text-align: center;
	justify-content: center;
	font-family: inherit;
	color: var(--bright-color);
	background: var(--dark-color);
	height: 2.5em;
	aspect-ratio: 1/1;
	border-radius: 50%;
}
nav.pagination .active,
nav.pagination a:hover {
	color: var(--dark-color);
	background: var(--yellow-color);
}