::selection {
	background-color: black;
	color: white;
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

:root {
	--padding: 4px;
	--gap: 3px;
	--line: calc(1.7rem + var(--padding) * 2 + 1px);
	--margin: var(--line);
	--header: calc(var(--line) * 3 + var(--padding));
	--transition: width 0.6s cubic-bezier(0.3, 0, 0.2, 1),
		height 0.6s cubic-bezier(0.3, 0, 0.2, 1),
		min-height 0.6s cubic-bezier(0.3, 0, 0.2, 1),
		padding 0.6s cubic-bezier(0.3, 0, 0.2, 1),
		opacity 0.3s ease-in-out;
}

html,
body {
	height: 100%;
	overflow: hidden;
}

html {
	font-size: 10px;
}

body {
	--vh: 100vh;
	--color: black;
	--background: white;
	--highlight: #CCC;
	--hline: rgb(110, 110, 110);
	--filter: invert(0);
	--nfilter: invert(1);
	/* --hline: black; */
	padding: var(--margin) var(--margin) 0;
	color: var(--color);
	font: 1.3rem/1.7rem "Helvetica Neue";
	hyphens: auto;
	background-color: var(--background);
}

body.invert {
	--color: white;
	--background: black;
	--highlight: #333;
	--hline: #333;
	--filter: invert(1);
	--nfilter: invert(0);
	-webkit-font-smoothing: antialiased;
}

body::after {
	content: "";
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
	border: var(--margin) solid var(--background);
	border-bottom: 0;
	pointer-events: none;
}

body.no-select * {
	-webkit-user-select: none;
	user-select: none;
}

body.no-nothing * {
	-webkit-user-select: none;
	user-select: none;
	pointer-events: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 1em;
	font-weight: normal;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease-in-out;
}

a:hover,
a.hover {
	color: var(--highlight);
}

li {
	list-style: none;
}

.no-wrap {
	white-space: nowrap;
}

span.indent {
	display: inline-block;
	width: 5rem;
}

p.indent {
	text-indent: 5rem;
}

.grid {
	display: flex;
	align-content: flex-start;
	margin-left: calc(-1 * var(--gap));
	margin-right: calc(-1 * var(--gap));
	position: relative;
}

.header.grid,
.image.grid,
.image_index.grid,
.text_informations.grid,
.text_menu.grid {
	flex-wrap: wrap;
}

.grid > * {
	padding: 0 var(--gap);
	position: relative;
}

.width-1-32 {
	width: calc((100vw - var(--margin) * 2 + var(--gap) * 2) / 32);
}

.width-1-16 {
	width: calc((100vw - var(--margin) * 2 + var(--gap) * 2) / 16);
}

.width-1-8 {
	width: calc((100vw - var(--margin) * 2 + var(--gap) * 2) / 8);
}

.width-3-8 {
	width: calc((100vw - var(--margin) * 2 + var(--gap) * 2) / 8 * 3);
}

.width-7-8 {
	width: calc((100vw - var(--margin) * 2 + var(--gap) * 2) / 8 * 7);
}

.width-1-6 {
	width: calc((100vw - var(--margin) * 2 + var(--gap) * 2) / 6);
}

.width-1-4 {
	width: calc((100vw - var(--margin) * 2 + var(--gap) * 2) / 4);
}

.width-1-3 {
	width: calc((100vw - var(--margin) * 2 + var(--gap) * 2) / 3);
}

.width-1-2 {
	width: calc((100vw - var(--margin) * 2 + var(--gap) * 2) / 2);
}

.header_title {
	padding-bottom: calc(var(--padding) + 1px);
}

.header_title,
.text_title,
.text_filters,
.text_project--opened,
.image_title {
	position: relative;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 3;
	background-color: var(--background);
}

.text_title,
.image_title {
	text-transform: uppercase;
}

.text_title,
.text_filters,
.text_project {
	height: var(--line);
	line-height: var(--line);
}

.header::after,
.header_title::after,
.text_title::after,
.text_filters::after,
.text_project::after,
.image_title::before,
.image_title::after {
	content: "";
	height: 1px;
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: var(--hline);
}

.header::after,
.text_filters::after,
.text_project::after,
.image_title::before,
.image_title::after {
	right: var(--gap);
	left: var(--gap);
}

.image_title::before {
	top: 0;
	bottom: auto;
}

.header {
	height: var(--header);
	overflow: hidden;
	transition: var(--transition);
}

.header_wrapper {
	width: calc(100% + 24px);
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
}

.header_wrapper--closed {
	overflow-y: hidden;
}

.header_about {
	height: 100%;
	position: relative;
}

.header_title {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.header_about .header_title {
	cursor: pointer;
	transition: color 0.15s ease-in-out;
}

.header_about .header_title:hover {
	color: var(--highlight);
}

.header_title > span {
	width: 50%;
	position: relative;
}

.header_contact .header_title > span {
	display: none;
}

.header_title > span::before {
	content: "";
	display: block;
	width: 11px;
	height: 1px;
	margin-top: -1px;
	position: absolute;
	top: 50%;
	right: 0;
	background-color: var(--color);
	transition: background-color 0.15s ease-in-out;
}

.header_title > span::after {
	content: "";
	display: block;
	width: 1px;
	height: 11px;
	margin-top: -6px;
	position: absolute;
	top: 50%;
	right: 5px;
	background-color: var(--color);
	transition: background-color 0.15s ease-in-out;
}

.header_title--opened > span::after {
	display: none;
}

.header_content {
	padding: var(--padding) 0 calc(var(--padding) + 1px);
}

.header_content > p {
	transition: opacity 0.3s ease-in-out;
}

.header_content--hidden > p:not(:first-child) {
	opacity: 0;
}

.header_content > .text_subtitle::before {
	content: "";
	height: 1px;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	background-color: var(--hline);
}

.header_content > p + p {
	text-indent: 5rem;
}

.header_content > .text_subtitle {
	height: calc(var(--line) + 1px);
	margin: var(--padding) 0;
	line-height: calc(var(--line) + 1px);
	text-indent: 0;
}

.header_content > .text_subtitle ~ p {
	text-indent: 0;
}

.header_content > p.indent {
	text-indent: 5rem;
}

.text {
	--textHeight: calc((var(--vh) - var(--margin) - var(--header)) / 2);
	height: var(--textHeight);
	min-height: calc(var(--line) - 1px);
	max-height: calc(100% - var(--header) - var(--line) * 2 - var(--margin));
	overflow: hidden;
	position: relative;
	transition: var(--transition);
}

.text--full {
	max-height: var(--textHeight);
}

.text_content {
	height: calc(100% + 1px);
	overflow: hidden;
	transition: var(--transition);
}

.text_content::before,
.text_content::after {
	content: "";
	display: block;
	width: var(--gap);
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 5;
	background-color: var(--background);
}

.text_content::before {
	left: 0;
}

.text_content::after {
	right: 0;
}

.text--project > .width-1-2:last-child,
.text--typeface > .width-1-2:first-child,
.text--project > .width-1-2:last-child .text_project,
.text--typeface > .width-1-2:first-child .text_project {
	width: calc((100vw - var(--margin) * 2 + var(--gap) * 2) / 4 * 3);
}

.text--project > .width-1-2:first-child,
.text--typeface > .width-1-2:last-child,
.text--project > .width-1-2:first-child .text_project,
.text--typeface > .width-1-2:last-child .text_project {
	width: calc((100vw - var(--margin) * 2 + var(--gap) * 2) / 4);
}

.text_wrapper {
	width: calc(100% + 24px);
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
}

.text_title {
	cursor: pointer;
}

.text_filters {
	top: var(--line);
}

.text_filters > div {
	overflow: hidden;
	white-space: nowrap;
	transition: var(--transition);
}

.text--project > .width-1-2:first-child .text_projectDate,
.text--project > .width-1-2:first-child .text_projectClient,
.text--project > .width-1-2:first-child .text_projectType,
.text--typeface > .width-1-2:last-child .text_projectDate,
.text--typeface > .width-1-2:last-child .text_projectClient,
.text--typeface > .width-1-2:last-child .text_projectType {
	width: 0;
	padding: 0;
}

.text--project > .width-1-2:first-child .text_projectTitle,
.text--project > .width-1-2:last-child .text_projectTitle,
.text--project > .width-1-2:last-child .text_projectClient,
.text--project > .width-1-2:last-child .text_projectType,
.text--typeface > .width-1-2:last-child .text_projectTitle,
.text--typeface > .width-1-2:first-child .text_projectTitle,
.text--typeface > .width-1-2:first-child .text_projectClient,
.text--typeface > .width-1-2:first-child .text_projectType {
	width: calc((100vw - var(--margin) * 2 + var(--gap) * 2) / 4);
}

.text_filter {
	display: inline-block;
	padding-right: 1.2rem;
	position: relative;
	cursor: pointer;
	transition: color 0.15s ease-in-out;
	user-select: none;
}

.text_filter:hover {
	color: var(--highlight);
}

.text_filter--active::after {
	content: "";
	display: block;
	width: 5px;
	height: 5px;
	position: absolute;
	top: 9px;
	right: 0;
	border: 1px solid var(--color);
	border-top: 0;
	border-right: 0;
	transform: rotate(-45deg);
	transition: border-color 0.15s ease-in-out;
}

.text_filter--ascending::after {
	top: 12px;
	transform: rotate(135deg);
}

.text_project {
	width: calc((100vw - var(--margin) * 2 + var(--gap) * 2) / 2);
	overflow: hidden;
	transition: var(--transition);
}

.text_project:hover {
	color: var(--color);
}

.text_project.text_project--closed {
	height: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
	transition-delay: 0s, 0.3s, 0s, 0.3s, 0s;
}

.text_project.text_project--opened {
	top: calc(var(--line) * 2);
	pointer-events: none;
}

.text_project.loading::before {
	content: "";
	width: 12px;
	height: 12px;
	position: absolute;
	top: calc(var(--line) / 2);
	right: calc(var(--gap) + 12px);
	transform: translate(50%, -50%);
	border: 1px solid var(--color);
	border-radius: 11px;
	border-left-color: transparent;
	transition: border-color 0.15s ease-in-out;
	animation: rotate 1s cubic-bezier(0.3, 0, 0.2, 1) infinite;
}

@keyframes rotate {
	from {
		transform: translate(50%, -50%) rotate(0deg);
	}

	to {
		transform: translate(50%, -50%) rotate(360deg);
	}
}

.text_project > div {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: var(--transition);
}

.text_project > div:empty::before {
	content: "-";
}

.text_details ul,
.text_about {
	padding: calc(var(--padding) + 1px) 0;
}

.text_link {
	display: inline-block;
	width: 100%;
	height: var(--line);
	z-index: 1;
	border: 1px solid var(--hline);
	line-height: var(--line);
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.15s ease-in-out;
}

.text_link:first-child {
	border-top: 0;
}

.text_link:hover {
	color: var(--background);
	background-color: var(--color);
}

.text_informations {
	/* overflow: hidden; */
	transition: opacity 0.3s ease-in-out, visibility 0s;
}

.text_informations--hidden {
	/* height: 0; */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease-in-out, visibility 0s 0.3s;
}

.text_informations > :first-child > div {
	height: calc(var(--textHeight) - var(--line) * 3);
	overflow: auto;
	position: static;
	position: -webkit-sticky;
	position: sticky;
	top: calc(var(--line) * 3);
	scrollbar-width: none;
}

.text_informations > .width-1-8 > div::-webkit-scrollbar,
.text_informations > .width-1-4 > div::-webkit-scrollbar {
	display: none;
}

.text_informations > .width-1-8 > div > .text_details {
	display: none;
}

.text_informations > .width-1-4 > div > .text_details {
	overflow: hidden;
}

.text_informations > .width-1-8 > div > .text_details:empty,
.text_informations > .width-1-4 > div > .text_details:empty {
	display: none;
}

.text_informations > .width-1-4 > div > .text_details li {
	width: calc((100vw - var(--margin) * 2 + var(--gap) * 2) / 4 - var(--gap) * 2);
}

.text_details ul {
	position: relative;
}

.text_details li {
	/* padding-left: 1.8rem; */
	position: relative;
	transition: background-color 0.15s ease-in-out;
}

.text_details li::before {
	/* content: "";
  display: block;
  width: 11px;
  height: 1px;
  position: absolute;
  top: 8px;
  left: 0;
  background-color: var(--color); */
}

.text_details li::after {
	/* content: "";
  display: block;
  width: 7px;
  height: 7px;
  position: absolute;
  top: 8px;
  left: 0;
  border: 1px solid var(--color);
  border-bottom: 0;
  border-left: 0;
  transform: translate(3px, -3px) rotate(45deg); */
}

.text_details li.text_partner::after {
	width: 1px;
	height: 11px;
	position: absolute;
	top: 3px;
	left: 5px;
	background-color: var(--color);
	border: none;
	transform: none;
}

li.text_partner + li:not(.text_partner) {
	margin-top: 1.7rem;
}

.text_about {
	position: relative;
}

.text_about > p + p {
	text-indent: 5rem;
}

.text_about:empty {
	display: none;
}

.text_about:empty + .text_subtitle {
	border-top: none;
}

.text_about,
.text_subtitle,
.text_menu,
.text_single,
.text_sample,
.text_words,
.text_waterfall,
.text_glyphs {
	position: relative;
}

.text_about:not(:last-child)::after,
.text_subtitle::after,
.text_menu::after,
.text_single::after,
.text_sample::after,
.text_words::after,
.text_waterfall::after,
.text_glyphs::after,
.text_details ul:not(:last-child)::after {
	content: "";
	height: 1px;
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: var(--hline);
}

.text_menu::after,
.text_words::after,
.text_waterfall::after {
	right: var(--gap);
	left: var(--gap);
}

.text_sample,
.text_words,
.text_waterfall,
.text_glyphs {
	font-family: var(--defaultFontFamily);
	font-size: calc(var(--defaultFontSize) * 1px);
	font-feature-settings: var(--defaultFontFeatures);
	line-height: 1.307692;
}

.text_subtitle,
.text_menu {
	height: var(--line);
	line-height: var(--line);
	position: relative;
	text-transform: capitalize;
}

.text_menu {
	overflow: hidden;
	transition: var(--transition);
}

.text_menu::before {
	content: "";
	height: 1px;
	position: absolute;
	top: calc(var(--line) - 1px);
	right: var(--gap);
	left: var(--gap);
	background-color: var(--hline);
}

.text_menu--global {
	justify-content: space-between;
	min-height: var(--line);
	max-height: calc(var(--textHeight) - var(--line) * 10);
	position: static;
	position: -webkit-sticky;
	position: sticky;
	top: calc(var(--line) * 3);
	z-index: 2;
	background-color: var(--background);
}

.text_menu > .width-1-8:first-child span::after {
	content: " ";
}

.text_menu > .text_cuts,
.text_menu > .text_features {
	flex: 0 0 calc(100% + 24px);
	height: calc(100% - var(--line));
	overflow-x: hidden;
	overflow-y: auto;
	position: relative;
}

.text_cut,
.text_feature {
	height: var(--line);
	position: relative;
	cursor: pointer;
	transition: color 0.15s ease-in-out;
}

.text_feature {
	text-transform: none;
}

.text_cut:hover,
.text_feature:hover {
	color: var(--highlight);
}

.text_cut::after,
.text_feature::after {
	content: "";
	height: 1px;
	position: absolute;
	bottom: 0;
	background-color: var(--hline);
}

.text_cut::after {
	right: 0;
	left: 0;
}

.text_cut > span::after {
	content: " ";
}

.text_feature::after {
	right: var(--gap);
	left: var(--gap);
}

.text_feature > div:last-child {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.text_feature > div:first-child::before {
	content: "";
	display: block;
	width: 11px;
	height: 1px;
	margin-top: -1px;
	position: absolute;
	top: 50%;
	left: var(--gap);
	background-color: var(--color);
	transition: background-color 0.15s ease-in-out;
}

.text_feature > div:first-child::after {
	content: "";
	display: block;
	width: 1px;
	height: 11px;
	margin-top: -6px;
	position: absolute;
	top: 50%;
	left: calc(var(--gap) + 5px);
	background-color: var(--color);
	transition: background-color 0.15s ease-in-out;
}

.text_feature--selected > div:first-child::after {
	display: none;
}

.text_feature:hover > div:first-child::before,
.text_feature:hover > div:first-child::after {
	background-color: var(--highlight);
}

.text_checkbox,
.text_select,
.text_slider {
	display: inline-block;
	padding-right: 1.2rem;
	position: relative;
	cursor: pointer;
	transition: color 0.15s ease-in-out;
	user-select: none;
}

.text_checkbox:hover,
.text_select:hover,
.text_slider:hover span:nth-of-type(1) {
	color: var(--highlight);
}

/* .text_select {
  opacity: 0.25;
  pointer-events: none;
} */

.text_checkbox::before {
	content: "";
	display: block;
	width: 9px;
	height: 9px;
	margin-top: -5px;
	position: absolute;
	top: 50%;
	right: -4px;
	border: 1px solid var(--color);
	transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.text_checkbox--active::before {
	background-color: var(--color);
	border: none;
}

.text_checkbox--active::after {
	content: "";
	display: block;
	width: 7px;
	height: 7px;
	margin-top: -4px;
	position: absolute;
	top: 50%;
	right: -3px;
	border: 1px solid var(--background);
	transition: border-color 0.15s ease-in-out;
}

.text_select::after {
	content: "";
	display: block;
	width: 5px;
	height: 5px;
	position: absolute;
	top: 9px;
	right: 0;
	border: 1px solid var(--color);
	border-top: 0;
	border-right: 0;
	transform: rotate(-45deg);
	transition: border-color 0.15s ease-in-out;
}

.text_select--opened::after {
	top: 12px;
	transform: rotate(135deg);
}

.text_slider {
	display: flex;
	padding-right: 0;
	position: relative;
}

.text_slider span:nth-of-type(1) {
	width: 5rem;
	transition: color 0.15s ease-in-out;
}

.text_slider span:nth-of-type(2) {
	position: absolute;
	left: 0;
}

.text_slider span:nth-of-type(1),
.text_slider--active span:nth-of-type(2) {
	visibility: visible;
}

.text_slider--active span:nth-of-type(1),
.text_slider:not(.text_slider--active) span:nth-of-type(2) {
	visibility: hidden;
}

.text_slider span:nth-of-type(2)::after {
	content: "px";
	text-transform: none;
}

.text_slider--active span:nth-of-type(2):focus {
	outline: 0;
}

.text_slider--active span:nth-of-type(2):focus::before {
	content: "";
	height: 1px;
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: var(--color);
	transition: background-color 0.15s ease-in-out;
}

.text_slider > div {
	width: calc(100% - 5rem);
	position: relative;
	cursor: ew-resize;
}

.text_slider > div::before {
	content: "";
	display: block;
	height: 1px;
	margin-top: -1px;
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	background-color: var(--hline);
	transition: background-color 0.15s ease-in-out;
}

.text_slider-handle {
	content: "";
	display: block;
	width: 9px;
	height: 9px;
	margin-top: -5px;
	position: absolute;
	top: 50%;
	left: 0;
	background-color: var(--color);
	border-radius: 9px;
	transition: background-color 0.15s ease-in-out;
}

.text_slider-max {
	width: 1px;
	height: 9px;
	margin-top: -5px;
	position: absolute;
	top: 50%;
	left: 0;
	background-color: var(--color);
	pointer-events: none;
	transition: background-color 0.15s ease-in-out;
}

.text_single {
	min-height: var(--line);
	padding: 0;
	font-size: 6rem;
	line-height: 1.3076923077;
	text-align: center;
}

.text_single > div {
	padding: calc(var(--factor) * 0.307692em) 0;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
}

.text_single > div:not(:focus)::after {
	content: "";
	display: inline-block;
	width: 1px;
	height: 1.2em;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background-color: var(--color);
	animation: blink 1s infinite;
	transition: background-color 0.15s ease-in-out;
}

@keyframes blink {
	0% {
		opacity: 0;
	}

	50% {
		opacity: 0;
	}

	50.001% {
		opacity: 1;
	}

	100% {
		opacity: 1;
	}
}

.text_sample {
	padding-top: 0.307692em;
	padding-bottom: calc(0.307692em + 1px);
}

.text_single > div:focus,
.text_sample:focus {
	outline: 0;
}

.text_words,
.text_waterfall {
	padding-top: 0.307692em;
	padding-bottom: calc(0.307692em + 1px);
}

.text_words > div > p {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.text_words > div > p:nth-of-type(n+7) {
	display: none;
}

.text_waterfall > div {
	overflow: hidden;
	white-space: nowrap;
}

.text_waterfall > div:nth-child(2) {
	font-size: calc((var(--defaultFontSize) * 1px - 1.3rem) / 3 * 2 + 1.3rem);
}

.text_waterfall > div:nth-child(3) {
	font-size: calc((var(--defaultFontSize) * 1px - 1.3rem) / 3 + 1.3rem);
}

.text_waterfall > div:nth-child(4) {
	font-size: 1.3rem;
}

.text_waterfall > div:nth-child(5),
.text_waterfall > div:nth-child(6) {
	display: none;
}

.text_opentype {
	height: var(--line);
	margin-top: calc(var(--line) * -1);
	position: static;
	position: -webkit-sticky;
	position: sticky;
	top: calc(var(--line) * 3);
	z-index: 2;
	line-height: var(--line);
	pointer-events: none;
}

.toggle-opentype {
	pointer-events: all;
}

.text_glyphs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(1.8em, 1fr));
	padding: 0;
	position: relative;
}

.text_glyphs:last-child {
	margin-bottom: var(--margin);
}

.text_glyphs::before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	border-left: 1px solid var(--hline);
	border-right: 1px solid var(--hline);
	pointer-events: none;
	transition: border-color 0.15s ease-in-out;
}

.text_glyphs + .text_subtitle::before {
	content: "";
	height: 1px;
	position: absolute;
	right: 0;
	top: -1px;
	left: 0;
	background-color: var(--hline);
	transition: background-color 0.15s ease-in-out;
}

.text_glyph {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	line-height: 1.8em;
	cursor: default;
}

.text_glyph--alt {
	/* display: none; */
	/* color: var(--highlight); */
}

.text_glyph--show {
	display: flex;
}

.text_glyph--active {
	background-color: var(--color);
	-webkit-font-smoothing: antialiased;
	color: var(--background);
	transition: background-color 0.15s ease-in-out;
}

/* .text_glyph--active:hover {
  background-color: initial;
  color: var(--color);
  font-feature-settings: normal;
} */

.text_glyph::before {
	content: "";
	width: calc(100% + 1px);
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	border: 1px solid var(--hline);
	border-top: 0;
	border-left: 0;
	transition: border-color 0.15s ease-in-out;
}

.text_glyph--group {
	position: relative;
	cursor: pointer;
}

.text_glyph--group::after {
	content: "";
	width: 4px;
	height: 4px;
	position: absolute;
	top: 0;
	right: 0;
	background-color: var(--color);
	border-radius: 4px;
	transition: background-color 0.15s ease-in-out;
}

.text_glyph-separator {
	width: 100%;
	grid-column: 1 / -1;
	margin-top: -1px;
	border-bottom: 1px solid var(--hline);
	transition: border-color 0.15s ease-in-out;
}

.image {
	--imageHeight: calc((var(--vh) - var(--margin) - var(--header)) / 2);
	height: var(--imageHeight);
	min-height: calc(var(--line) * 2 + var(--margin));
	max-height: calc(100% - var(--header) - var(--line) + 1px);
	overflow: hidden;
	position: relative;
	transition: var(--transition);
}

.image--closed {
	min-height: 0;
}

.image_title {
	display: flex;
	justify-content: space-between;
	width: 100%;
	height: calc(var(--line) + 1px);
	line-height: calc(var(--line) + 1px);
	cursor: ns-resize;
	transition: color 0.15s ease-in-out;
}

.image_title:hover {
	color: var(--highlight);
}

.image--closed .image_title {
	cursor: default;
}

.image_title span {
	position: relative;
}

.image--closed .image_title span {
	opacity: 0.25
}

.image_title span::before,
.image_title span::after {
	content: "";
	display: block;
	width: 5px;
	height: 5px;
	position: absolute;
	top: 8px;
	right: 2px;
	border: 1px solid var(--color);
	border-top: 0;
	border-right: 0;
	transform: rotate(135deg);
	transition: border-color 0.15s ease-in-out;
}

.image_title span::after {
	top: 14px;
	transform: rotate(-45deg);
}

.image_content {
	height: calc(100% - var(--line));
	padding: 0 var(--gap);
	overflow: hidden;
	transition: width 0s 0.3s, height 0s 0.3s, padding 0s 0.3s;
}

.image--typeface .image_content:first-of-type,
.image--project .image_content:last-of-type {
	width: calc(100vw - var(--margin) * 2 + var(--gap) * 2);
}

.image--typeface .image_content:last-of-type,
.image--project .image_content:first-of-type {
	width: 0;
	height: 0;
	padding: 0;
}

.image_index {
	width: calc(100% + 24px);
	height: 100%;
	padding-top: calc(var(--margin) - var(--gap));
	overflow-x: hidden;
	overflow-y: auto;
	transition: opacity 0.3s ease-in-out, visibility 0s;
}

.image_index::after {
	content: "";
	display: block;
	width: 100%;
	height: calc(var(--margin) - var(--gap));
}

.image_index--hidden {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease-in-out, visibility 0s 0.3s;
}

.image_project {
	position: relative;
}

.image_project::before {
	content: "";
	display: block;
	padding-top: calc(75% + var(--gap) * 2);
}

.image_project > img {
	width: calc(100% - var(--gap) * 2);
	height: calc(100% - var(--gap) * 2);
	position: absolute;
	top: var(--gap);
	left: var(--gap);
	object-fit: cover;
	object-position: center;
	background-color: #DDD;
}

.image_content:first-of-type .image_project > img {
	filter: var(--filter);
	/* transition: all 0.15s ease-in-out; */
}

.image_content:first-of-type .image_project.hover > img {
	filter: var(--nfilter);
	background-color: white;
}

.image_content:last-of-type .image_project > img {
	filter: var(--filter);
	/* transition: filter 0.15s ease-in-out; */
}

.image_content:last-of-type .image_project.hover > img {
	filter: var(--nfilter);
}

.image_gallery {
	height: 100%;
	min-height: calc(var(--line) * 6);
	margin: 0;
	padding: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	right: var(--gap);
	left: var(--gap);
	transition: opacity 0.3s ease-in-out, visibility 0s;
}

.image_gallery--hidden {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease-in-out, visibility 0s 0.3s;
}

.image_gallery > .image_wrapper {
	width: auto;
	height: 100%;
	padding: var(--margin) 0;
	overflow-x: auto;
	overflow-y: hidden;
	font-size: 0;
	white-space: nowrap;
}

.image_gallery > .image_wrapper > img,
.image_video,
.image_video > img,
.image_video > iframe {
	display: inline-block;
	width: auto;
	height: 100%;
	position: relative;
}

.image_gallery > .image_wrapper > img,
.image_video {
	padding: 0 var(--gap);
}

.image_gallery > .image_wrapper > img:first-child,
.image_gallery > .image_wrapper > .image_video:first-child {
	padding-left: 0;
}

.image_gallery > .image_wrapper > img:last-child,
.image_gallery > .image_wrapper > .image_video:last-child {
	padding-right: 0;
}

.image_gallery > .image_wrapper > img,
.image_video > img {
	background-position: var(--gap) 0;
	background-size: calc(100% - var(--gap) * 2) 100%;
	background-repeat: no-repeat;
}

.image_gallery > .image_wrapper > img:first-child,
.image_gallery > .image_wrapper > .image_video:first-child,
.image_gallery > .image_wrapper > img:last-child,
.image_gallery > .image_wrapper > .image_video:last-child {
	background-size: calc(100% - var(--gap) * 1) 100%;
}

.image_gallery > .image_wrapper > img:first-child:last-child,
.image_gallery > .image_wrapper > .image_video:first-child:last-child {
	background-size: 100% 100%;
}

.image_gallery > .image_wrapper > img:first-child,
.image_gallery > .image_wrapper > .image_video:first-child {
	background-position: 0 0;
}

.image_gallery .ui-ready {
	/* cursor: pointer; */
}

.lazyload {
	image-rendering: -webkit-crisp-edges;
	image-rendering: -moz-crisp-edges;
	image-rendering: -o-crisp-edges;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
}

.image_video {
	cursor: pointer;
}

.image_video > img {
	transition: opacity 0.3s ease-in-out, visibility 0s 0s;
}

.image_video > iframe {
	width: calc(100% - var(--gap) * 2);
	position: absolute;
	top: 0;
	left: var(--gap);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease-in-out, visibility 0s 0.3s;
}

.image_video:first-child > iframe,
.image_video:last-child > iframe {
	width: calc(100% - var(--gap));
}

.image_video:first-child > iframe {
	left: 0;
}

.image_video:first-child:last-child > iframe {
	width: 100%;
}

.image_video--playing > img {
	opacity: 0;
	visibility: hidden;
	transition-delay: 0s, 0.3s;
}

.image_video--playing > iframe {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s, 0s;
}

.image_video::before,
.image_video::after {
	content: "";
	display: block;
	width: 0px;
	height: 0px;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	transition: opacity 0.3s ease-in-out, visibility 0s, border-color 0.15s ease-in-out;
}

.image_video::before {
	margin-top: -8px;
	margin-left: -12px;
	border: 14px solid transparent;
	border-left-color: var(--color);
	border-left-width: 23px;
}

.image_video::after {
	margin-top: -6px;
	margin-left: -11px;
	border: 12px solid transparent;
	border-left-color: var(--background);
	border-left-width: 20px;
}

.image_video--playing::before,
.image_video--playing::after {
	opacity: 0;
	visibility: hidden;
	transition-delay: 0s, 0.3s;
}

/* START : INSPECTOR */

.text_inspector {
	height: calc(1.2em + var(--line) * 2);
	margin-top: -1px;
	margin-bottom: -1px;
	/* overflow: hidden; */
	position: relative;
	font-size: 12vw;
	line-height: 1.2;
	text-align: center;
}

.inspector_letter {
	display: block;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	font-family: var(--defaultFontFamily);
}

.inspector_letter:empty::before {
	content: "Aa";
}

.text_inspector > div {
	width: 100%;
	height: 1px;
	position: absolute;
	left: 0;
	z-index: -1;
	background-color: var(--hline);
}

.text_inspector > div::before,
.text_inspector > div::after {
	display: block;
	position: absolute;
	top: 0;
	/* color: var(--highlight); */
	font-size: 1.3rem;
	line-height: calc(var(--line) + 1px);
}

.text_inspector > div::before {
	content: attr(data-label);
	left: 0;
}

.text_inspector > div::after {
	content: attr(data-value);
	right: 0;
}

.inspector_ascender {
	top: 0;
}

/* .text_inspector > .inspector_feature:empty {
	display: none;
} */

.text_inspector > .inspector_feature {
	height: calc(var(--line) + 1px);
	bottom: 0;
	background: none;
	border: 1px solid var(--hline);
	border-left: 0;
	border-right: 0;
	/* color: var(--highlight); */
	font-size: 1.3rem;
	line-height: calc(var(--line) - 1px);
	text-align: right;
}

.text_inspector > .inspector_feature:empty::after {
	content: "[none]";
	line-height: inherit;
}

.text_inspector > .inspector_feature::before {
	content: "OpenType Feature";
	line-height: inherit;
}

.text_inspector + li {
	padding-top: 0.307692em;
}

/* END : INSPECTOR */

@media (min-width: 1920px) {
	.text_words > div {
		column-count: 2;
	}

	.text_words > div > p:nth-of-type(n+7) {
		display: block;
	}

	.text_words > div > p:nth-of-type(odd):last-child {
		display: none;
	}
}

@media (min-width: 1600px), (min-width: 680px) and (max-width: 1023px) {
	.text_waterfall > div {
		width: calc((100vw - var(--margin) * 2 + var(--gap) * 2) / 12);
	}

	.text_waterfall > div:nth-child(5),
	.text_waterfall > div:nth-child(6) {
		display: block;
	}

	.text_waterfall > div:nth-child(2) {
		font-size: calc((var(--defaultFontSize) * 1px - 1.3rem) / 5 * 4 + 1.3rem);
	}

	.text_waterfall > div:nth-child(3) {
		font-size: calc((var(--defaultFontSize) * 1px - 1.3rem) / 5 * 3 + 1.3rem);
	}

	.text_waterfall > div:nth-child(4) {
		font-size: calc((var(--defaultFontSize) * 1px - 1.3rem) / 5 * 2 + 1.3rem);
	}

	.text_waterfall > div:nth-child(5) {
		font-size: calc((var(--defaultFontSize) * 1px - 1.3rem) / 5 + 1.3rem);
	}

	.text_waterfall > div:nth-child(6) {
		font-size: 1.3rem;
	}
}

@media (max-width: 1440px) {
	:root {
		--line: 24px;
	}

	html {
		font-size: 9px;
	}
}

@media (max-width: 1023px) {
	.text--typeface .text_informations > div {
		width: calc((100vw - var(--margin) * 2 + var(--gap) * 2) / 4 * 3);
	}

	.text_informations > :first-child > div {
		height: auto;
	}

	.text--typeface .text_informations > :first-child > div > .text_details {
		display: none;
	}

	.text_menu > .width-1-8 {
		width: calc((100vw - var(--margin) * 2 + var(--gap) * 2) / 4);
	}

	.text_words > div {
		width: calc((100vw - var(--margin) * 2 + var(--gap) * 2) / 5 * 2);
	}

	.text_waterfall > div {
		width: calc((100vw - var(--margin) * 2 + var(--gap) * 2) / 8);
	}

	.text_feature > div:first-child {
		width: calc((100vw - var(--margin) * 2 + var(--gap) * 2) / 4);
	}

	.text_feature > div:last-child {
		width: calc((100vw - var(--margin) * 2 + var(--gap) * 2) / 2);
	}
}

@media (max-width: 680px) {
	:root {
		--header: calc(var(--line) * 2 + var(--padding) * 3 - 1px);
	}

	header > .width-1-2,
	.header_about > .header_wrapper > .width-1-2 {
		width: calc(100vw - var(--margin) * 2 + var(--gap) * 2);
	}

	.header_about {
		height: calc(100% - var(--header) - 1px);
	}

	/* .header_contact > .header_content > .width-1-4:first-of-type,
	.header_contact > .header_content > .width-1-4:last-of-type {
		width: calc((100vw - var(--margin) * 2 + var(--gap) * 2) / 2);
	} */

	.header_contact::after {
		content: "";
		height: 1px;
		position: absolute;
		right: var(--gap);
		bottom: 0;
		left: var(--gap);
		background-color: var(--hline);
	}

	.header_contact .header_title span {
		display: initial;
		cursor: pointer;
	}

	.header_about .header_title {
		display: none;
	}

	.header_content--hidden > p:not(:first-child) {
		opacity: 1;
	}

	/* .text_projectDate,
	.text--project > .width-1-2:last-child .text_projectDate,
	.text--typeface > .width-1-2:first-child .text_projectDate {
		width: calc((100vw - var(--margin) * 2 + var(--gap) * 2) / 8);
	} */

	.text--typeface .text_informations > div {
		width: calc(100vw - var(--margin) * 2 + var(--gap) * 2);
	}

	.text_projectTitle,
	.text--project > .width-1-2:last-child .text_projectTitle,
	.text--project > .width-1-2:last-child .text_projectClient,
	.text--project > .width-1-2:last-child .text_projectType,
	.text--typeface > .width-1-2:first-child .text_projectTitle,
	.text--typeface > .width-1-2:first-child .text_projectClient,
	.text--typeface > .width-1-2:first-child .text_projectType {
		width: calc((100vw - var(--margin) * 2 + var(--gap) * 2) / 3);
	}

	.text--project > .width-1-2:first-child .text_projectDate,
	.text--typeface > .width-1-2:last-child .text_projectDate,
	.text--project > .width-1-2:first-child .text_projectTitle,
	.text--typeface > .width-1-2:last-child .text_projectTitle {
		width: 0;
		padding: 0;
	}

	.text_projectType {
		width: 0;
		padding: 0;
	}

	.text--project > .width-1-2:last-child .text_projectType,
	.text--typeface > .width-1-2:first-child .text_projectType {
		padding: 0 var(--gap);
	}

	.text--project > .width-1-2:last-child,
	.text--typeface > .width-1-2:first-child,
	.text--project > .width-1-2:last-child .text_project,
	.text--typeface > .width-1-2:first-child .text_project,
	.text_informations > .width-1-8,
	.text_informations > .width-1-4,
	.text_informations > .width-1-2 {
		width: calc(100vw - var(--margin) * 2 + var(--gap) * 2);
	}

	.text--project > .width-1-2:first-child,
	.text--typeface > .width-1-2:last-child,
	.text--project > .width-1-2:first-child .text_project,
	.text--typeface > .width-1-2:last-child .text_project {
		width: 0;
		padding: 0;
	}

	.text_menu > .width-1-8,
	.text_menu > .width-1-4 {
		width: calc((100vw - var(--margin) * 2 + var(--gap) * 2) / 3);
	}

	.text_feature > div:first-child {
		width: calc((100vw - var(--margin) * 2 + var(--gap) * 2) / 3);
	}

	.text_feature > div:last-child {
		width: calc((100vw - var(--margin) * 2 + var(--gap) * 2) / 3 * 2);
	}

	.text_opentype {
		position: static;
	}

	.text_opentype > .width-1-8 {
		width: calc((100vw - var(--margin) * 2 + var(--gap) * 2) / 2);
	}

	.text_informations > .width-1-4 > div > .text_details li {
		width: calc(100vw - var(--margin) * 2 + var(--gap) * 2);
	}

	.text_select::after {
		top: 8px;
	}

	.text_select--opened::after {
		top: 10px;
	}

	.text_words > .width-1-4 {
		width: calc((100vw - var(--margin) * 2 + var(--gap) * 2) / 2);
	}

	.text_waterfall > div {
		width: calc((100vw - var(--margin) * 2 + var(--gap) * 2) / 4);
	}

	.text_waterfall > div:nth-child(2) {
		font-size: calc((var(--defaultFontSize) * 1px - 1.3rem) / 3 * 2 + 1.3rem);
	}

	.image_project {
		width: calc((100vw - var(--margin) * 2 + var(--gap) * 2) / 2);
	}
}

@media (max-width: 480px), (orientation: landscape) and (max-height: 560px) {
	.header_title > span::before {
		margin-top: -1px;
	}

	.header_title > span::after {
		margin-top: -6px;
	}

	.text_filter {
		padding-right: 1rem;
	}

	.text_filter--active::after {
		top: 8px;
	}

	.text_filter--ascending::after {
		top: 10px;
	}

	.text_project.text_project--opened {
		top: calc(var(--line) * 2);
	}

	.text_bonus,
	.text_details {
		top: calc(var(--line) * 3);
	}

	.text_details li::before,
	.text_details li::after {
		top: 6px;
	}

	.text_details li.text_partner::after {
		top: 1px;
	}

	.text_menu--global {
		top: calc(var(--line) * 3);
	}

	.image_title span::before {
		top: 8px;
	}

	.image_title span::after {
		top: 12px;
	}
}

@media (orientation: landscape) and (min-width: 681px) and (max-height: 560px) {
	:root {
		--header: calc(var(--line) + var(--padding) + 15px * 3 - 1px);
	}

	.text_filter {
		padding-right: 1rem;
	}

	.text_filter--active::after {
		top: 8px;
	}

	.text_filter--ascending::after {
		top: 11px;
	}
}

@media (orientation: landscape) and (max-width: 680px) and (max-height: 560px) {
	:root {
		--header: calc(var(--line) + var(--padding) + 15px * 3 - 1px);
		--margin: calc(var(--line) / 2);
	}
}

@media (max-width: 480px) {
	:root {
		--header: calc(var(--line) + var(--padding) + 15px * 3 - 1px);
		--margin: calc(var(--line) / 2);
	}

	.header_about {
		height: calc(100% - var(--header) - 2px);
	}
}