/***GLOBAL VARIABLES
*****************************************************/
:root {
  /***TEXT***/
  --fontSize: 0.75rem;
  --fontSizeLarge: 1rem;
  --fontWeight: 400;
  --letterSpacing: .06em;
  --wordSpacing: 0em;
  --lineHeight: 1.2;

  /***SPACES***/
  --spaceY: calc(var(--fontSize) * var(--lineHeight));
  --spaceX: calc(var(--fontSize) * var(--lineHeight)*1.25);
  --bodySpaces: 0;
  --rowGutter: calc(var(--fontSize) * var(--lineHeight));
  --colGutter: calc(var(--spaceX) * 1);
  --mainTopSpace: calc(var(--rowGutter)*1);
  --mainBottomSpace: calc(var(--rowGutter)*3);

  /***SIZES***/
  --headerHeight: calc(var(--spaceY)*2 + var(--rowGutter));
  --mainWidth: 100%;
  --mainHeight: calc(100vh - var(--mainTopSpace) - var(--mainBottomSpace));
  --footerHeight: calc(var(--spaceY)*2 + var(--rowGutter));

  /***GRIDS***/
  --oneColGrid: repeat(1, 1fr);
  --twoColsGrid: repeat(2, 1fr);
  --threeColsGrid: repeat(3, 1fr);
  --fourColsGrid: repeat(4, 1fr);
  --sixColsGrid: repeat(6, 1fr);
  --eightColsGrid: repeat(8, 1fr);
  --twelveColsGrid: repeat(12, 1fr);
  --gridGap: var(--rowGutter) var(--colGutter);

  /***COLOR***/
  --paletteWhite: #EFEFEF;
  --paletteGray: #999;
  --paletteBlack: #000000;
  --paletteYellow: #e4ff00;
  --paletteAlpha: transparent;
  --backColor: var(--paletteWhite);
  --textColor: var(--paletteBlack);
  --linkColor: var(--paletteBlack);
  --hoverColor: var(--paletteGray);

  /***DECORATION***/
  --linkDeco: underline;
  --borderWidth: 2px;
  --borderLine: var(--borderWidth) solid var(--textColor);

  /***TRANSITION***/
  --transitionDuration: 0.2s;
}
  
/***FONTS
*****************************************************/
@font-face {
  	font-family: "Druk Wise Medium";
  	src: url("media/fonts/druk-wide-wedium.woff");
}
@font-face {
  	font-family: "Maison Neue Mono";
  	src: url("media/fonts/maison-neue-mono.woff");
}
@font-face {
  	font-family: "Maison Neue Mono Italic";
  	src: url("media/fonts/maison-neue-mono-italic.woff");
}
/*
.font_size {
  	font-size: var(--fontSize);
  	line-height: var(--lineHeight);
}
.font_size_L {
  font-size: var(--fontSizeLarge);
  line-height: var(--lineHeight);
}
.font_size_S {
  	font-size: var(--fontSizeSmall);
  	line-height: var(--lineHeight);
}
*/
.uppercase {
  	text-transform: uppercase;
}
.lowercase {
  	text-transform: lowercase;
}
.line_through {
  	text-decoration: line-through;
}
/***FONT SMOOTH***/
* {
  	-webkit-font-smoothing: smooth;
  	-moz-osx-font-smoothing: smooth;
  	text-rendering: geometricPrecision;
}

/***RESET
*****************************************************/
::-webkit-scrollbar {
  	display: none;
}
::selection {
  	color: var(--textColor);
  	background-color: var(--paletteYellow);
}
::-moz-selection {
  	color: var(--textColor);
  	background-color: var(--paletteYellow);
}
img::selection {
  	color: transparent;
  	background-color: transparent;
}
img::-moz-selection {
  	color: transparent;
  	background-color: transparent;
}
*,
*::before,
*::before {
  	box-sizing: border-box;
}
html {
  	scroll-behavior: smooth;
}
body {
    position: relative;
    margin: var(--bodySpaces);
    color: var(--textColor);
    background: var(--backColor);
    font-family: Maison Neue Mono, sans-serif;
    font-size: var(--fontSize);
    line-height: var(--lineHeight);
    overflow-anchor: none;
}
ul {
    display: block;
    list-style-type: none;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 0;
}
li {
  display: inline;
}
a {	
    color: var(--linkColor);
    text-decoration: none;
    transition-property: color;
    transition-duration: var(--transitionDuration);
}
a:hover span {	
    background: var(--paletteYellow);
}
h1, h2, h3 {
    margin: 0;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding: 0;
    font-size: var(--fontSize);
    font-style: normal;
    font-weight: 400;
}
p {
    display: block;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0;
}
span {
  display: inline;
}
img, video {
  	vertical-align: middle;
}
form, input, textarea, submit,
iframe, embed, audio {
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    font: inherit;
    font-size: inherit;
    color: var(--textColor);
    background: transparent;
}
input[name="submit"] {
	cursor: pointer;
}
::placeholder {
  color: var(--textColor);
  opacity: 1;
}
:-ms-input-placeholder {
  color: var(--textColor);
}
::-ms-input-placeholder {
  color: var(--textColor);
}

/***LOADING
*****************************************************/
.loading {
    transition: opacity var(--transitionDuration);
}
.loading:not(.loaded) {
	opacity: 0;
}
.loading.loaded {
	opacity: 1;
}

/***HEADER AND MENU
*****************************************************/
header {
    width: 100%;
    min-height: var(--headerHeight);
    /*
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    */
    position: fixed;
    bottom: 0;
    padding: var(--spaceY) var(--spaceX);
    display: grid;
    grid-template-columns: var(--eightColsGrid);
    grid-gap: var(--gridGap);
    /*
    display: flex;
    justify-content: space-between;
    align-items: start;
    /*
    background: var(--backColor);
    */
    z-index: 300;
}
h1.site_name {
	grid-colum: 1/2;
    min-height: var(--rowGutter);
    font-family: "Druk Wise Medium", sans-serif;
    font-size: var(--fontSizeLarge);
    letter-spacing: var(--letterSpacing);
    text-transform: lowercase;
}
h1.site_name.w_w_w {
    min-height: var(--rowGutter);
    font-family: "Druk Wise Medium", sans-serif;
    font-size: var(--fontSizeLarge);
    letter-spacing: var(--letterSpacing);
    text-transform: lowercase;
}
h1.site_name.w_w_w {
	grid-column: 1 / 2;
}
h1.site_name.w_n {
	grid-column: 2 / 3;
}
nav.menu {
    display: inherit;
    grid-column: 6 / 9;
    display: grid;
    grid-template-columns: var(--threeColsGrid);
    grid-gap: var(--gridGap);
    align-items: end;
}
nav.menu ul {
  	display: flex;
  	gap: var(--colGutter);
}
nav.menu ul:not(:last-child) {
  	justify-content: start;
}
nav.menu ul:last-child {
  	justify-content: space-between;
}
nav.menu li.menu_item {
  	display: inherit;
}
h1.site_name a:hover,
nav.menu a:hover {	
  color: var(--hoverColor);
}

/***W LOGO***/
.w_logo {
	width: 100%;
	height: calc(100% - var(--headerHeight) + var(--spaceY));
    position: fixed;
    top: 0;
    left: 0;
    padding: var(--spaceY) var(--spaceX);
    display: grid;
    grid-template-columns: var(--eightColsGrid);
    grid-gap: var(--gridGap);
    transform: scaleX(-1);
  	opacity: 1;
    transition: opacity var(--transitionDuration);
    cursor: pointer;
    z-index: 99;
}
.w_logo:not(.intro) {
	pointer-events: none;
}
.w_logo.intro {
	pointer-events: auto;
}
.w_logo.hide {
  	opacity: 0;
    pointer-events: none;
}
svg#w_box {
    grid-column: 3 / 7;
    align-self: center;
}
.w_path {
	fill: none;
    stroke: #000000;
    stroke: #000000;
    stroke-width: 37.5;
    stroke-miterlimit: 10;
    stroke-dasharray: 4500;
    stroke-dashoffset: 4500;
}
.w_path.draw {
  	animation: dash 2.5s normal forwards ease-in-out;
}
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

/***MAIN CONTENT
*****************************************************/
main.content {
  	min-height: var(--mainHeight);
}
body:not(.index):not(.artworks_index):not(.artist_index):not(.exhibitions) main.content {
  	margin: var(--spaceY) var(--spaceX);
}
body.index main.content,
body.artworks_index main.content,
body.artist_index main.content,
body.exhibitions main.content {
  	margin: var(--mainTopSpace) 0 var(--mainBottomSpace);
    overflow-x: auto;
  	overflow-y: hidden;
}

/***THUMBNAIL GRID***/
section.thumb_grid {
	height: var(--mainHeight);
    column-count: 8;
    column-gap: var(--colGutter);
    column-fill: auto;
    padding: 0 var(--spaceX);
}
section.thumb_grid.scroll_x {
  overflow-x: hidden;
}
section.thumb_grid:nth-last-col(-1) {
	border: 2px solid red;
}
article.thumb {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    margin-bottom: calc(var(--rowGutter)*1);
}
article.thumb a:hover span {
  	background: var(--paletteYellow);
}
article.thumb .thumb_data {
    margin-top: calc(var(--rowGutter)*0.25);
    /*
    overflow-wrap: break-word;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
	*/
}
article.thumb .thumb_data.active span {
    background: var(--paletteYellow);
}

/***ARTWORKS THUMBNAIL MEDIA***/
body.index article.thumb .thumb_media,
body.artworks_index article.thumb .thumb_media,
body.artist_index article.thumb .thumb_media {
    width: 100%;
    height: calc(100vh - var(--headerHeight)*2);
    padding: 0 var(--spaceX);
    display: grid;
    grid-template-columns: var(--eightColsGrid);
    grid-gap: var(--gridGap);
    perspective-origin: center;
    perspective: 500vh;
    position: fixed;
    top: var(--headerHeight);
    left: 0;
    pointer-events: none;
}
body.index article.thumb .thumb_media img,
body.artworks_index article.thumb .thumb_media img,
body.artist_index article.thumb .thumb_media img {
    width: 100%;
    max-height: calc(100vh - var(--headerHeight)*2);
    object-fit: contain;
    object-position: center; 
    opacity: 0;
    grid-column: 3 / 7;
    align-self: center;
    justify-self: center;
    transform: rotateY(90deg);
    transform-style: preserve-3d;
    animation: spin 3s linear infinite reverse;
    animation-play-state: paused;
    transition: opacity var(--transitionDuration), transform var(--transitionDuration);
    pointer-events: none;
}
body.index article.thumb:hover .thumb_media img,
body.artworks_index article.thumb:hover .thumb_media img,
body.artist_index article.thumb:hover .thumb_media img {
  	opacity: 1;
  	animation-play-state: running;
}

/***EXHIBITIONS THUMBNAIL MEDIA***/
body.exhibitions article.thumb .thumb_media {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    display: flex;
    justify-content: center;
    pointer-events: none;
}
body.exhibitions article.thumb .thumb_media img {
    object-position: center; 
    opacity: 0;
    transition: opacity var(--transitionDuration);
    pointer-events: none;
}
body.exhibitions article.thumb .thumb_media img:not(.cover) {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; 
}
body.exhibitions article.thumb .thumb_media img.cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
body.exhibitions article.thumb:hover .thumb_media img {
  	opacity: 1 !important;
}

/***ROTATION ANIMATION***/
@keyframes spin {
	0% {
		transform-style: preserve-3d;
    	transform: rotateY(90deg);
  	}
  	100% {
    	transform-style: preserve-3d;
    	transform: rotateY(-90deg);
  	}
} 

/***ARTICLE (ARTWORKS AND EXHIBS)
*****************************************************/
article.article_grid {
    /*width: 100%;*/
    height: calc(100vh - var(--spaceY)*2);
    display: grid;
    grid-template-columns: var(--eightColsGrid);
    grid-gap: var(--gridGap);
}
article.article_grid .main_data {
	grid-column: 1 / 2;
    align-self: start;
	z-index: 100;
}
/*
body.artworks article.article_grid .article_media,
body.artist_file article.article_grid .article_media {
    width: 100%;
    height: calc(100vh - var(--headerHeight)*2);
    grid-column: 3 / 7;
    align-self: center;
    justify-self: center;
    position: relative;
}
*/
body.artworks article.article_grid .article_media,
body.artist_file article.article_grid .article_media {
    width: 100%;
    height: calc(100vh - var(--spaceY) - var(--headerHeight));
    grid-column: 3 / 7;
    align-self: start;
    justify-self: center;
    position: relative;
}
body.edition  article.article_grid .article_media {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
}
.article_media .slider {
	width: 100%;
	height: 100%;
	position: relative;
}
.article_media .slider .slides {
	width: 100%;
	height: 100%;
	position: relative;
}
.slider .slides .slide {
	width: 100%;
	height: 100%;
	position: absolute;
    display: flex;
    justify-content: center;
    align-itmes: center;
	opacity: 0;
	transition-property: opacity;
    transition-duration: var(--transitionDuration);
}
.slider .slides .slide.active {
	opacity: 1;
}
.slider .slides .slide img {
    object-position: center;
}
body.artist_file .slider .slides .slide img {
	width: 100%;
	height: 100%;
    object-fit: contain;
}
body.edition .slider .slides .slide img {
	max-width: 100%;
	max-height: 100%;
}
body.edition .slider .slides .slide img:not(.cover) {
	object-fit: contain;
}
body.edition .slider .slides .slide img.cover {
	object-fit: cover;
    width: 100%;
	height: 100%;
}
.article_media .slider_nav {
	width: 100%;
    height: 100%;
	/*height: calc(100vh - var(--spaceY) - var(--headerHeight));*/
	position: absolute;
	top: 0;
	display: flex;
	justify-content: space-between;
    gap: var(--colGutter);
}
body.artsit_file .article_media .slider_nav {
	padding: var(--spaceY) var(--spaceX);
}
body.edition .article_media .slider_nav {
	padding: var(--spaceY) var(--spaceX) var(--headerHeight);
}
.article_media .slider_nav .prev,
.article_media .slider_nav .next {
	width: 50%;
	height: 100%;
	display: grid;
    grid-gap: var(--gridGap);
	align-items: center;
	cursor: pointer;
}

body.artist_file .article_media .slider_nav .prev,
body.artist_file .article_media .slider_nav .next {
	grid-template-columns: var(--twoColsGrid);
}
body.artist_file .article_media .slider_nav .prev span {
	grid-column: 1 / 2;
    transform: translateX(calc((100% + var(--colGutter))*-1));
}
body.artist_file .article_media .slider_nav .next span {
	grid-column: 2 / 3;
    transform: translateX(calc(100% + var(--colGutter)));
}
body.edition .article_media .slider_nav .prev,
body.edition .article_media .slider_nav .next {
	grid-template-columns: var(--fourColsGrid);
}
body.edition .article_media .slider_nav .prev span {
	grid-column: 2 / 3;
}
body.edition .article_media .slider_nav .next span {
	grid-column: 3 / 4;
}
.plus_button svg.plus_icon {
	/*
	width: calc(100% * 0.75);
	*/
	fill: none;
	stroke: var(--textColor);
	stroke-width: 1px;
	cursor: pointer;
}
.plus_button svg.plus_icon line {	
	vector-effect: non-scaling-stroke;
}
/*
.article_media .slider_nav .prev {
	justify-content: start;
}
body.artist_file .article_media .slider_nav .prev span {
	translate: calc((100 + var(--colGutter)) * -1);
}

body.edition .article_media .slider_nav .prev span {
	margin-left: var(--spaceX);
}
.article_media .slider_nav .next {
	justify-content: end;
}
body.artist_file .article_media .slider_nav .next span {
	translate: calc(100 + var(--colGutter));
}
body.edition .article_media .slider_nav .next span {
	margin-right: var(--spaceX);
}
.article_media .slider_footer {
	width: 100%;
	height: 50px;
}
*/
/*
.article_media .slider_footer .count {
	width: 100%;
}
.article_media .slider_footer .captions {
	width: 100%;
}
*/
article.article_grid .secondary_data {
	grid-column: 7 / 8;
    z-index: 100;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: var(--rowGutter);
}
article.article_grid .related_data {
	grid-column: 8 / 9;
    z-index: 100;
    align-self: start;
}
.related_data .data_list {
	margin-bottom: calc(var(--rowGutter)*3);
}
.related_data .data_list:not(:has(.data_item)) {
    -webkit-display: none;
 	-moz-display: none;
    display: none !important;
}
.related_data .data_list .list_title {
	margin-bottom: var(--rowGutter);
}
.related_data .data_list .data_item:not(:last-child) {
	margin-bottom: calc(var(--rowGutter)*1);
}
.related_data .data_list .data_item a:hover span {
  	background: var(--paletteYellow);
}

/***PUBLICATIONS
*****************************************************/
article.publications_grid {
    width: 100%;
    height: var(--mainHeight);
    display: grid;
    grid-template-columns: var(--eightColsGrid);
    grid-gap: var(--gridGap);
}
article.publications_grid .publications_list {
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: var(--rowGutter);
}
article.publications_grid .publication_item,
article.publications_grid .cover_item {
	cursor: pointer;
}
article.publications_grid .publication_item:hover span {
	background: var(--paletteYellow);
}
article.publications_grid .publications_covers {
    grid-column: 4 / 6;
    align-self: start;
    display: grid;
    grid-template-columns: var(--fourColsGrid);
    grid-gap: var(--gridGap);
}
article.publications_grid .publications_covers img {
    width: 100%;
    height: auto;
}
article.publications_grid .publications_covers .cover_item {
	align-self: start;
}
article.publications_grid .publications_covers .cover_item:hover {
	/*
	background: var(--paletteYellow);
    */
    background: var(--paletteGray);
    mix-blend-mode: multiply;
}
article.publications_grid .publications_covers .cover_item:hover img {
	filter: grayscale(1);
	mix-blend-mode: screen;
}
article.publications_grid .publication_cover {
    grid-column: 6 / 8;
    align-self: start;
    position: relative;
    opacity: 0;
    transition: opacity var(--transitionDuration);
}
article.publications_grid .publication_cover.active {
    opacity: 1;
}
article.publications_grid .publication_cover img {
    width: 100%;
    height: auto;
    position: absolute;
}
article.publications_grid .publication_data {
    grid-column: 8 / 9;
}

/***MULTIPLE ARTISTS***/
/*
.item_artist > span {
	white-space: nowrap;
}
*/
.item_artist span:not(:last-child):after {
	content: ", "
}

/***INFO
*****************************************************/
article.info_grid {
    width: 100%;
    height: var(--mainHeight);
    display: grid;
    position: relative;
    grid-template-columns: var(--eightColsGrid);
    grid-gap: var(--gridGap);
}
article.info_grid .info_artists {
  	width: 100%;
  	grid-column: 1 / 3;
    align-self: start;
}
/*
article.info_grid .info_exhibitions {
  	width: 100%;
  	grid-column: 3 / 4;
    align-self: start;
}
article.info_grid .info_fairs {
  	width: 100%;
  	grid-column: 4 / 5;
    align-self: start;
}
*/
article.info_grid .info_about {
  	width: 100%;
  	grid-column: 6 / 8;
    align-self: start;
}
article.info_grid .info_images {
  	/*grid-column: 5 / 8;*/
    width: calc(37.5% - var(--spaceX)*1.5);
    position: fixed;
    right: calc(12.5% + var(--colGutter));
    bottom: var(--headerHeight);
    /*
    transform: translate(-50%, -50%);
    */
    cursor: grab;
}
article.info_grid .info_images .images_frames {
  	width: 100%;
    /*position: relative;*/
}
.info_images .images_frames img {
  	width: 100%;
    position: absolute;
    bottom: 0;
    transition: var(--transitionDuration);
}
.info_images .images_frames img.active {
	opacity: 1;
}
.info_images .images_frames img:not(.active) {
	opacity: 0;
}
article.info_grid .info_contact {
	width: 100%;
  	grid-column: 8 / 9;
    position: absolute;
    rigth: 0;
    display: flex;
    flex-direction: column;
    gap: calc(var(--rowGutter)*2);
    align-self: start;
}
article.info_grid .info_contact img.vector_logo {
	height: calc(var(--rowGutter)*2.25);
    margin-bottom: calc(var(--rowGutter)*0.75);
}
article.info_grid .info_contact .contact_venues:not(:last-child) {
    margin-bottom: calc(var(--rowGutter)*1);
}

/***SUBSCRIPTION FORM***/
.form_container {
    width: 400px;
    height: calc(var(--rowGutter)*15);
    position: fixed;
    display: flex;
    background: var(--paletteYellow);
    border-radius: 50%;
}
.subscription_form {
	width: 100%;
    height: 100%;
    padding: 60px 70px;
}
form.subscription_form input {
    display: block;
}
form.subscription_form input[type="text"] {
    width: 100%;
}

/***FOOTER
*****************************************************/
footer {
    width: 100%;
    min-height: var(--footerHeight);
    display: flex;
    justify-content: space-between;
    align-items: start;
    padding: var(--spaceY) var(--spaceX);
}
nav.footer_menu ul {
  	display: flex;
  	justify-content: end;
  	gap: var(--colGutter);
}