/***GLOBAL VARIABLES
*****************************************************/
:root {
    /***TEXT***/
    /*
    --fontSize: 0.8rem;
    --fontSize: clamp(0.75rem, 0.8vw, 0.85rem);
    --fontSizeLarge: clamp(1.15rem, 1.2vw, 1.25rem);
    */
    --fontSize: 0.7rem;
    --fontSizeLarge: 1.1rem;
	--fontWeight: 400;
    --letterSpacing: .02em;
    --wordSpacing: 0em;
    --lineHeight: 1.2;

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

    /***SIZES***/
    --headerHeight: calc(var(--rowGutter)*3);
    --mainWidth: 100%;
    --mainHeight: calc(100vh - var(--headerHeight) - var(--mainTopSpace));

    /***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: #F5F5F5;
    --paletteGray: #CCCCCC;
    --paletteBlack: #000000; 
    --paletteAlpha: transparent;
    --backColor: var(--paletteWhite);
    --textColor: var(--paletteBlack);
    --linkColor: var(--paletteBlack);
    --hoverColor: var(--paletteGray);

    /***APPEARANCE***/
    --linkDeco: underline;
    --borderWidth: 1px;
    --borderLine: var(--borderWidth) solid var(--textColor);
    --opacityLevel: 0.2;

    /***TRANSITION***/
    --transitionDuration: 0.3s;
}
  
/***FONTS
*****************************************************/
* {
    /*
    -webkit-font-smoothing: smooth;
    -moz-osx-font-smoothing: smooth;
    text-rendering: geometricPrecision;
    */
}
@font-face {
    font-family: Bodoni;
    src: url("fonts/bodoni-175.woff");
}
@font-face {
    font-family: Bodoni Italic;
    src: url("fonts/bodoni-175-italic.woff");
}
.font_size {
  	font-size: var(--fontSize);
  	line-height: var(--lineHeight);
    letter-spacing: var(--letterSpacing);
}
.font_size_L {
  	font-size: var(--fontSizeLarge);
  	line-height: var(--lineHeight);
    letter-spacing: calc(var(--letterSpacing)/2);
}
/*
.font_size_S {
  	font-size: var(--fontSizeSmall);
  	line-height: var(--lineHeight);
}
*/
.uppercase {
  	text-transform: uppercase;
}
.lowercase {
  	text-transform: lowercase;
}
i, .italic {
	font-family: "Bodoni Italic", serif;
}
.same_line {
	white-space: nowrap;
}

/***RESET
*****************************************************/
::-webkit-scrollbar {
    display: none;
}
::selection {
    color: rgba(0, 0, 0, var(--opacityLevel));
    background-color: transparent;
}
::-moz-selection {
    color: rgba(0, 0, 0, var(--opacityLevel));
    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: "Bodoni", serif;
    /*
    font-size: min(1vw, var(--fontSize));
    */
    font-size: var(--fontSize);
    line-height: var(--lineHeight);
    letter-spacing: var(--letterSpacing);
}
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;
}
ol {
    display: block;
    /*list-style-type: decimal;*/
    margin-block-start:0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0;
    list-style-position: inside;
}
/*
li {
  display: inline;
}
*/
a {	
    color: var(--linkColor);
    text-decoration: none;
    transition-property: opacity;
    transition-duration: var(--transitionDuration);
}
/*
a:hover {	
    opacity: var(--opacityLevel);
}
*/
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: min(1vw, var(--fontSize));
    */
    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;
}
img.lazy {
	opacity: 0;
    transition: opacity var(--transitionDuration);
}
img.lazy.loaded {
	opacity: 1;
}
form, input, textarea, submit,
iframe, embed, audio {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: inherit;
}

/***GENERAL
*****************************************************/
.authorship span:not(:nth-last-child(2)):not(:last-child):after,
.edition span:not(:nth-last-child(2)):not(:last-child):after {
	content: ", ";
}
body#es .authorship span:nth-last-child(2):after,
body#es .edition span:nth-last-child(2):after {
	content: " y ";
}
body#en .authorship span:nth-last-child(2):after,
body#en .edition span:nth-last-child(2):after {
	content: " and ";
}

/***HEADER AND MENU
*****************************************************/
header.desktop {
    width: 100%;
    min-height: var(--headerHeight);
    position: fixed;
    top: 0;
    padding: var(--rowGutter) var(--colGutter);
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: var(--rowGutter) var(--colGutter);
    background: var(--backColor);
    z-index: 100;
}
header.desktop a:hover {
    opacity: var(--opacityLevel);
}
header.desktop > nav.menu {
    display: inherit;
}
header.desktop > nav.menu > ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0 calc(var(--colGutter)*5);
}
header.desktop > nav.menu li.menu_item {
    position: relative;
    display: inherit;
}
header.desktop > nav.menu li.menu_item.has_sub > a{
    cursor: default;
}
header.desktop > nav.menu > ul > li:hover > a {
	opacity: var(--opacityLevel);
    transition: var(--transitionDuration);
}
/*
nav.menu > ul > li > a:hover {
	opacity: 1 !important;
}
*/
header.desktop > nav.menu li.menu_item ul.sub_menu,
header.desktop > nav.menu li.menu_item ol.sub_menu {
	min-width: 25vw;
    max-height: calc(100vh - var(--rowGutter)*2);
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: var(--colGutter) 0;
    top: var(--rowGutter);
    padding: calc(var(--rowGutter)*0.75 + var(--mainTopSpace)) calc(var(--rowGutter)*3) var(--rowGutter) 0;
    background: var(--backColor);
    opacity: 0;
    transition: opacity var(--transitionDuration);
    pointer-events: none;
    overflow-y: scroll;
}
header.desktop > nav.menu li.menu_item:hover > ul.sub_menu,
header.desktop > nav.menu li.menu_item:hover > ol.sub_menu {
    opacity: 1;
    pointer-events: auto;
}
header.desktop > nav.menu ul.sub_menu li.sub_menu_item {
    display: block;
    /*
    white-space: nowrap;
    overflow: hidden;
	*/
}
header.desktop > nav.menu ol.sub_menu li.sub_menu_item {
    white-space: nowrap;
}
header.desktop > nav.menu ol.sub_menu li.sub_menu_item::marker {
    position: absolute;
}
header.desktop > nav.menu ol.sub_menu li.sub_menu_item a {
    padding-left: calc(var(--colGutter)*1);
}
/*
header.desktop > nav.menu ol.sub_menu li.sub_menu_item span {
    position: absolute;
    left: 0;
}
*/
header.desktop > nav.menu ul.sub_menu li.sub_menu_item a p,
header.desktop > nav.menu ol.sub_menu li.sub_menu_item a p {
    display: flex;
    gap: calc(var(--colGutter)*1.5);
}
header.desktop > nav.lang_switch ul {
    display: flex;
    justify-content: end;
    flex-wrap: wrap;
    gap: 0 var(--colGutter);
}
header.desktop > nav.lang_switch ul .inactive {
    opacity: var(--opacityLevel);
}
header.desktop > nav.lang_switch ul .inactive:hover {
    opacity: 1;
}

/***MAIN CONTENT
*****************************************************/
main.content {
    position: relative;
    opacity: 1;
    transition: opacity var(--transitionDuration);
    mix-blend-mode: multiply;
    overflow-x: hidden;
}
main.content.hide {
    opacity: var(--opacityLevel);
}

/***OVERVIEW***/
body.overview main.content {
    padding: calc(var(--headerHeight) + var(--mainTopSpace)) var(--colGutter) var(--mainBottomSpace);
    /*
    margin-top: var(--mainMarginTop);
    */
}
/*
section.thumb_grid {
	column-count: 8;
    column-gap: var(--colGutter);
}
*/
.thumb {
    display: flex;
    flex-direction: column;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    margin-bottom: calc(var(--rowGutter)*2);
    transition: var(--transitionDuration);
}
a.thumb {
    cursor: pointer;
}
.thumb .thumb_media {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: calc(var(--rowGutter)*0.5);
}
.thumb .thumb_media img {
    width: 100%;
    object-fit: contain;
    object-position: center;
}
.thumb .thumb_data {
    display: flex;
    gap: 0 calc(var(--colGutter)*1.5);
    /*
    margin-top: calc(var(--rowGutter)*0.5);
    margin-bottom: calc(var(--rowGutter)*2);
    */
    transition: opacity var(--transitionDuration);
}
.thumb .thumb_data .collab span:not(:last-child):after {
    content: ", ";
}
.thumb .thumb_data .thumb_text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}
.thumb.active {
    opacity: 1;
}
.thumb.inactive .thumb_media,
.thumb.inactive .thumb_data {
    opacity: var(--opacityLevel);
    transition: opacity var(--transitionDuration);
}
.thumb.inactive:hover .thumb_media {
    opacity: 1;
}
section.thumb_grid a.thumb:not(.inactive):hover .thumb_data {
    opacity: var(--opacityLevel);
}
div.deactivation_layer {
	width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    cursor: pointer;
}

/***RELATIONS***/
body.relations {
    overflow-y: hidden;
}
body.relations main.content {
    padding-top: calc(var(--headerHeight) + var(--mainTopSpace));
}
.horizontal_scroll {
    width: auto;
    height: calc(var(--mainHeight) - (var(--rowGutter)*0.75));
    display: grid;
    grid-template-columns: repeat(4, calc(25% - var(--colGutter)*0.75));
    grid-template-rows: minmax(100%, 1fr);
    grid-gap: var(--colGutter);
    padding: 0 var(--colGutter);
    overflow-x: scroll;
}
/*
article.column.scroll_y {
    overflow-y: scroll !important;
}
*/
article.column .article_media {
    margin-bottom: calc(var(--rowGutter)*0.5);
    max-height: calc(100vh - var(--headerHeight) - var(--mainTopSpace) - var(--rowGutter)*6);
	overflow-y: hidden;
}
article.column .article_media img {
    width: 100%;
}
article.column a .article_data {
    transition: opacity var(--transitionDuration);
}
article.column a:hover .article_data {
    opacity: var(--opacityLevel);
}
article.column .article_data .data_header {
    display: flex;
    gap: 0 calc(var(--colGutter)*1.5);
}
article.column .article_data .article_text {
    max-height: calc(var(--mainHeight) - var(--rowGutter)*6.5);
    margin-top: calc(var(--rowGutter)*1.5);
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 40;
    -webkit-box-orient: vertical;
}
article.column .article_data .article_text span.paragraph {
    display: block;
}
article.column .article_data .article_text span.paragraph:not(:last-child) {
    margin-bottom: var(--rowGutter);
}

/***ARTWORKS, TEXTS, EXHIBITIONS***/
body.artwork,
body.artwork_series,
body.exhibition,
body.publication,
body.workshop {
    height: 100%;
    overflow: hidden;
}
body.artwork main.content,
body.artwork_series main.content,
body.exhibition main.content,
body.text main.content,
body.publication main.content,
body.workshop main.content {
    display: grid;
    grid-template-columns: var(--fourColsGrid);
    grid-gap: var(--colGutter);
    padding: 0 var(--colGutter);
}
/*
body.workshop main.content {
    display: grid;
    grid-template-columns: var(--eightColsGrid);
    grid-gap: var(--colGutter);
    padding: 0 var(--colGutter);
}
*/

/***THUMB COLUMN***/
section.thumb_column {
    grid-column: 1 / 2;
    display: grid;
    grid-template-columns: var(--twoColsGrid);
    grid-template-rows: min-content;
    grid-gap: 0 var(--colGutter);
    height: 100vh;
    padding: calc(var(--headerHeight) + var(--mainTopSpace)) 0 var(--mainBottomSpace);
    position: relative;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.thumb_column .thumb {
    grid-column: 1 / 2;
    position: relative;
    height: auto;
}
.thumb_column .thumb:not(.active) {
    opacity: var(--opacityLevel);
}
.thumb_column .thumb:hover {
    opacity: 1;
    transition: var(--transitionDuration);
}
.thumb_column .buy a:hover,
.thumb_column .download a:hover,
.article_text .download a:hover {
    opacity: var(--opacityLevel);
    transition: var(--transitionDuration);
}

/***ARTICLE COLUMN***/
section.article_column {
	height: 100vh;
    grid-column: 2 / 5;
    display: grid;
    grid-template-columns: var(--threeColsGrid);
    grid-gap: var(--colGutter);
    position: relative;
    padding: calc(var(--headerHeight) + var(--mainTopSpace)) 0 calc(var(--rowGutter)*2 + var(--mainBottomSpace));
    overflow-y: auto;
}

/***MULTIMEDIA***/
section.multimedia {
    height: calc(100vh - var(--headerHeight) - var(--mainTopSpace) - var(--rowGutter));
}
section.article_column > section.multimedia {
	grid-column: 1 / 4;
}
body:not(.publication):not(.workshop) section.multimedia {
	grid-column: 2 / 5;
    position: -webkit-sticky;
    position: sticky;
    top: calc(var(--headerHeight) + var(--mainTopSpace));
}
body.workshop section.multimedia {
	grid-column: 1 / 4;
}
.slider {
	width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: left;
    align-items: start;
}
.slide {
	width: 100%;
    height: 100%;
    position: absolute;
}
.slide:not(.active) {
    display: none;
}
.slide.active {
    display: block;
}
.slide img,
.slide video {
	width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: top left;
}
.prev, .next {
	width: 50%;
	height: 100%;
	position: absolute;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    align-items: center;
}
.prev {
	top: 0;
	left: 0;
    justify-content: start;
    cursor: w-resize;
}
.next {
	top: 0;
	right: 0;
    justify-content: end;
    cursor: e-resize;
}
.caption {
	position: absolute;
}
.pagination {
	position: absolute;
    top: 0;
    left: calc(var(--colGutter)*-1);
    translate: -100% 0;
}

/***PUBLICATION***/
section.publication_text {
	grid-column: 1 / 3;
}

/***TEXT***/
body.text {
    height: 100%;
    overflow: hidden;
}
section.article_text {
    grid-column: 2 / 4;
    height: 100vh;
    padding: calc(var(--headerHeight) + var(--mainTopSpace)) 0 calc(var(--rowGutter)*3 + var(--mainBottomSpace));
    position: relative;
    overflow-y: auto;
}
section.article_text .text_header {
    margin-bottom: calc(var(--rowGutterLarge)*3);
}
section.article_text .paragraph:not(:last-child) {
    margin-bottom: calc(var(--rowGutterLarge)*1);
}

/***WORKSHOPS***/
section.workshop_text {
    grid-column: 1 / 3;
    height: auto;
    margin-top: calc(var(--rowGutter)*2);
    /*
    padding: calc(var(--headerHeight) + var(--mainTopSpace)) 0 calc(var(--rowGutter)*2 + var(--mainBottomSpace));
    position: relative;
    */
}
section.workshop_text .participants,
section.workshop_text .guests {
	margin-top: calc(var(--rowGutter)*2);  
}
section.workshop_text .participants span:not(:last-child):after,
section.workshop_text .guests span:not(:last-child):after {
 	content: ","   
}

/***BIO***/
body.bio {
    height: 100%;
    overflow: hidden;
}
body.bio main.content {
    height: 100%;
    display: grid;
    grid-template-columns: var(--fourColsGrid);
    grid-gap: var(--colGutter);
    padding: 0 var(--colGutter);
    overflow: hidden;
}
.contact_col {
    grid-column: 1/2;
    height: 100vh;
    padding: calc(var(--headerHeight) + var(--mainTopSpace)) 0 var(--mainBottomSpace);
    display: flex;
    flex-direction: column;
	overflow: hidden;
}
.contact_col section.contact {
	height: 100%;
}
.contact_col section.bio_footer {
	justify-self: end;
}
.contact_col section.bio_footer p.credit {
	color: #999999;
}
.contact_col section.bio_footer p.credit a {
	color: #999999;
    transition: var(--transitionDuration);
}
.contact_col section.bio_footer p.credit a:hover {
	color: var(--textColor);
}
.bio_col {
    grid-column: 2/3;
    height: 100vh;
    padding: calc(var(--headerHeight) + var(--mainTopSpace)) 0 calc(var(--rowGutter)*3 + var(--mainBottomSpace));
    position: relative;
    overflow-y: auto;
}
.bio_col .bio_headline {
    margin-bottom: var(--rowGutterLarge);
}
.bio_col .paragraph:not(:last-child) {
    margin-bottom: var(--rowGutterLarge);
}
.bio_row > span {
	white-space: nowrap;
}
.contact .bio_row > span,
.education .bio_row > span {
    flex: 0 0 60px;
}
.lists .bio_row > span {
    flex: 0 0 25px;
}
.bio_img_col {
    padding: calc(var(--headerHeight) + var(--mainTopSpace)) 0 calc(var(--rowGutter)*3 + var(--mainBottomSpace));
}
.bio_img_col img {
    width: 100%;
}