/*MAIN BOX MODULE*/





.card, .text, .projcard{
  opacity: 0;
  position: relative;
  top: 1em;
  left: 0;
  /*transform: scale(0.9);*/

  

  background-color: var(--orange);
  
  color: var(--black);
  position: relative;
  z-index: 0;

  /*background:  -moz-linear-gradient(-30deg, transparent 40px, #c00 10px), -moz-linear-gradient(0deg, #c00 0px, #c00 0px), -moz-linear-gradient(0deg, #c00 0px, #c00 0px), -moz-linear-gradient(0deg, #c00 0px, #c00 0px) ;
  background:  -o-linear-gradient(-30deg, transparent 40px, #c00 10px), -o-linear-gradient(0deg, #c00 0px, #c00 0px), -o-linear-gradient(0deg, #c00 0px, #c00 0px), -o-linear-gradient(0deg, #c00 0px, #c00 0px);
  background:  -webkit-linear-gradient(-30deg, transparent 40px, #c00 10px), -webkit-linear-gradient(0deg, #c00 0px, #c00 0px), -webkit-linear-gradient(0deg, #c00 0px, #c00 0px), -webkit-linear-gradient(0deg, #c00 0px, #c00 0px);

  background-position: top left, bottom right, top right, bottom left;
  -moz-background-size: 51% 51%;
  -webkit-background-size: 51% 51%;
  background-size: 51% 51%;
  background-repeat: no-repeat;*/

  border-radius: 0px var( --padding ) var( --padding ) var( --padding );
  border-radius: 0px 3vw 3vw 3vw;
  margin: var(--padding);
  margin: var(--padding) auto var(--padding) auto; 
  float: none !important; 
  /*margin:  0 auto;*/
 /* margin-top: var(--padding);
  margin-bottom: var(--padding);*/
  transition: all 0.6s var(--ease);
  overflow: hidden;
  max-width: 1600px;
  box-sizing: border-box;
  min-height: calc( (100vw - ( 2 * var(--padding) )  ) * 0.4517133956);
  min-height: calc( ( clamp(400px, 100vw, 1600px) - ( 2 * var(--padding) ) ) * 0.4517133956);
  /*max-height: max( ( (1800px + (var(--padding) * 2 ) ) - ( 2 * var(--padding) )  ) * 0.4517133956);*/
}

/*.card:first-of-type{
  margin-top: calc( var(--padding) + 1em );
}*/
.card:first-child{
  margin-top: calc( var(--padding) + 1em );
}

.show{
  opacity: 1;
  top: 0;
  transform: scale(1);
  /*transition: top 0.6s ease-in-out, opacity 0.6s ease-in-out, transform 0.3s ease-in-out;*/
  transition: all 0.6s var(--ease);
}

.cardwrap{
  padding: var(--padding) 0 var(--padding) 0;
}

.cardclear{
  background-color: none;
}

.card:after{
  content: '';
    position: absolute;
    background-color: black;
    height: 4vw;
    width: 25%;
    top: 0;
    left: 0;
    transform-origin: top left;
    transform: rotate(-60deg) translateX(-100px);
    transform: rotate(-60deg) translateX(-50%) translateY(-1.5vw);
    overflow: hidden;
    pointer-events: none;
}

.card p{
  margin-bottom: calc(1.3333rem / 2);
}

.cardcontent blockquote{
  margin-bottom:  calc(1.3333rem / 2);
  font-style: italic;
  display: block;
}

.cardcontent blockquote:before{
  /*position: absolute;*/
  content: "‘";
  /*font-size: 4em;*/
  margin-left: -0.4em;
  /*margin-top: -0.4em;*/
}


.cardcontent cite{
  font-style: normal;
  display: block;
  text-transform: uppercase;
}

.cardcontent .text{

}


.cardinner, .cardcontent .projtext{
  column-count: 2;
  column-gap: calc(var(--padding) / 2);
  padding: 0 var(--padding) calc(var(--padding) + 3rem ) var(--padding);
  column-fill: auto;
  /*max-height: calc( (100vw - ( 2 * var(--padding) )  ) * 0.4517133956);*/
}

.projcard .projtext{
  padding-bottom: 0;

  /*height: calc( (100vw - ( 8 * var(--padding) ) ) * 0.4517133956);
    max-height: calc( (100vw - ( 2 * var(--padding) ) ) * 0.4517133956);*/
}

.cardinner > div, .projtext{
  -webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;

}

.card:last-of-type{
  padding-bottom: var(--padding);
  margin-bottom: 0;
}

.small{
  font-size: 0.75em;
}
.aside{
  position: absolute;
  left: var(--padding);
  margin-top: 2rem;
}

.width{
  max-width: 48%;
}

/*.cardlimit:before{
  content: '';
  position: absolute;
  height: 80%;
  bottom: 0;
  left: var( --padding );
  width: calc( 100% - ( var( --padding ) * 2 ) ) ;
  background: linear-gradient(180deg, rgba(231,68,32,0) 0%, rgba(231,68,32,1) 95%, rgba(231,68,32,1) 100%);
  pointer-events: none;
  transition: height 0.6s ease-out;
}*/

.active.cardlimit:before{
  height: 0%;
}

.cardlimit{
  max-height: calc( (100vw - ( 2 * var(--padding) )  ) * 0.4517133956);
  /*transition: max-height 0.6s ease-out;*/
}

.carddrop{
  position: absolute;
  bottom: 0;
  padding: calc( var(--padding) / 2 );
  box-sizing: border-box;
  text-transform: uppercase;
  z-index: 99;
  cursor: pointer;
  transition: all 0.6s ease-out;
  opacity: 1;
  width: 100%;
  display: block;
  text-align: center;
  background-color: var(--orange);
  border-top: 0.125vw solid black;
}
.hidebutt{
  display: none;
}
.arrow{
  margin-left: 0.25em;
    display: inline-block;
    position: relative;
    top: -0.05em;
    height: 0.55em;
}
.active .carddrop{
  opacity: 1;
  /*pointer-events: none;*/
}

.exhibit3 svg{
  position: relative;
  margin-left: 0.25em;
  top: unset;
}

.exhibit3:hover svg{
  margin-left: 0.25em;
}

.active .arrow{
  transform: scaleY(-1);
}

.image{
  position: relative;
  padding: 0;
  max-height: calc( (100vw - ( 2 * var(--padding) )  ) * 0.4517133956);
  color: white;
  background-color: black;
}

.image img{
  width: 100%;
  height: 100%;
  height: calc( (100vw - ( 2 * var(--padding) )  ) * 0.4517133956);
  object-fit: cover;
}

.card video{
  width: 100%;
  height: 100%;
  height: calc( (100vw - ( 2 * var(--padding) )  ) * 0.4517133956);
  object-fit: cover;
  pointer-events: none;
}

.image figcaption{
  position: absolute;
  bottom: var(--padding);
  left: var(--padding);
  font-size: 0.8em;
  padding-right: var(--padding);
  line-height: 1.4em;
  letter-spacing: 0.025em;
  /*mix-blend-mode: exclusion;
  color: white;*/
  /*text-shadow: 0 0 1px white, 0 0 1px white, 0 0 1px white, 0 0 1px white;*/
}
figcaption.center{
  width: 100%;
  text-align: center;
  position: absolute;
  left: 0;
  padding-right: 0;
}
.image h4{
      position: absolute;
    top: var(--padding);
    display: block;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}
.black{
  color: black;
}






/*SPECIFICS*/
#intro{
  padding: var(--padding);
  max-height: calc( (100vw - ( 2 * var(--padding) )  ) * 0.4517133956);
}







#colophon{

}

#colophon a{
  color: inherit;
  text-decoration: none;
}

#colophon a:hover:after{
  content: ' \1F517';
    color: black;
    display: inline-block;
    margin-left: 0.25em;
    font-size: 0.8em;
    line-height: 1em;
}

#colophon h3{
  text-transform: uppercase;
}
#colophon span{
  font-weight: bold;
}

.colophoninner{
  column-count: 3;
  column-gap: calc(var(--padding) / 2);
  padding: 0 var(--padding) calc(var(--padding) + 1rem ) var(--padding);
}
.colophoninner p{
  -webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}





#essay{
  /*overflow: visible;*/
}
.essayitem{
  height: 33.3333%;
  display: block;
  position: relative;
  height: calc( ( (100vw - ( 2 * var(--padding) )  ) * 0.4517133956) / 3);
  background-color: var(--orange);
  transition: top 0.2s ease-in-out;
  top: 0;
  text-decoration: none;
  color: inherit;
}

.essayitem:not(:first-of-type){
  /*transition: none;*/
}

.essayitem:after{
  content: '';
  position: absolute;
  top: 0;
  width: calc(100% + 4px);
  margin-left: -2px;
  background-repeat: no-repeat;
  height: 100%;
  background-image: url(../imgs/border2.svg);
}
.essayitem:before{
  content: 'READ ESSAY';
  position: absolute;
  bottom: -1em;
  width: 100%;
  height: 1em;
  text-align: center;
  font-size: 0.75em;
}

.essayitem.armando:before{
  content: 'VIEW WORKS';
  position: absolute;
  bottom: -1em;
  width: 100%;
  height: 1em;
  text-align: center;
  font-size: 0.75em;
}
.essayitem:first-of-type:after{
  content: '';
  position: absolute;
  top: 0;
  width: calc(100% + 4px);
  margin-left: -2px;
  background-repeat: no-repeat;
  height: 100%;
  background-image: none;

}
.essayitem header{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.essayitem header h3{
  margin-bottom: 0em;
}
.essayitem:hover{
  top: -1.5em;
}


.subpage h4{
  margin-bottom: 0.65em;
}

.subpage h2{
  line-height: 1em;
}

/*EXHIBIT*/

.type-video{
  background-color: black;
}

.type-video .cardwrap{
  padding-top: 0;
  padding-bottom: 0;
}
.embed-container, .type-video figure, .type-header figure { 
  position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; 
} 
.type-video iframe, .type-video object, .type-video embed, .type-header iframe { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: calc(100% + 2px); 
  height: 100%;
  border: 0px;
}

figure.thin{
  padding-bottom: 41.979166666667%;
      /*border-bottom: 1px solid black;*/
}

.projcard{
  padding-top: 0;
  padding-bottom: 0;
}
.type-header{
  background: linear-gradient(180deg, var(--orange) 0%, var(--orange) 68%, rgba(0,0,0,1) 100%);
}
.type-header .cardwrap{
padding-bottom: 0;
margin-bottom: -1px;
}
.type-image .cardwrap, .type-image{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.type-image{
  background-color: var(--black);
}

.type-image figcaption{
      bottom: calc(var(--padding) / 2 );
          left: calc(var(--padding) / 2 );
          font-size: 0.75em;
          position: absolute;
}

.type-image img{
  width: 100%;
  /*height: calc( (100vw - ( 2 * var(--padding) ) ) * 0.4517133956);*/
  height: calc( (100vw - ( 2 * var(--padding) ) ) * 0.452);
  object-fit: cover;
}

.type-headerimage .cardwrap{
  padding-bottom: 0em;
}

iframe{
  margin-left: -1px;
  background-color: rgba(0, 0, 0, 0);
}

.play{
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  color: white;
  transition: all 0.6s var(--ease);
  padding: 1em;
  display: none;
}
.play:after{
  content: 'PLAY';
  display: block;
}

.hide{
  bottom: 2em;
  transition: all 0.6s var(--ease);
}

.hide:after{
  content: 'PAUSE' !important;
}

.card.type-plain{
  background-color: rgba(0,0,0,0);
  min-height: unset;
  border-radius: unset;
  /*border-radius: 3vw;*/
}
.type-plain .cardwrap, .type-plain{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.type-plain:after{
  display: none;
}
.type-plain figcaption{
  color: white;
  font-size: 0.75em;
  width: 100%;
  line-height: 1.2em;
  margin-top: 0.75em;
}
.type-plain figcaption span{
  height: 0.8em;
  width: 0.8em;
  background-color: white;
  border-radius: 50%;
  display: inline-block;
  top: 0.05em;
  position: relative;
  margin-right: 0.25em;
}
.type-plain figcaption svg{
  height: 0.75em;
  display: inline-block;
  top: 0.05em;
  position: relative;
  margin-right: 0.25em;
}
.type-plain img{
  width: 100%;
}
.captionin figcaption svg{
  display: none;
}

.captionin figcaption{
  position: absolute;
  bottom: calc(var(--padding) / 1.5);
  left: calc(var(--padding) / 1.5);
  color: black;
}

.round{
    border-radius: 3vw;
    overflow: hidden;
}

sup{
  position: relative;
  width: 0.8em;
    display: inline-block;
}

sup a{
  position: absolute;
  font-size: 0.75em;
  bottom: -0.25em;
  color: var(--orange);
  background-color: black;
  width: 1.25em;
  height: 1.25em;
  line-height: 1em;
  text-align: center;
  padding-top: 0.125em;
  text-decoration: none;
  border-radius: 50%;
  letter-spacing: -0.0525em;
}
sup a:hover{
  transform: scale(1.1);
}

.type-footnotes{
  font-size: 0.75em;
  list-style: inside;
  line-height: 1.25em;
}

.footnotes-container{
  column-count: 2;
  column-gap: calc(var(--padding) / 2);
  padding: 0 var(--padding) calc(var(--padding) + 3rem ) var(--padding);
  column-fill: auto;
}
.footnotes-container ol{
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 0px;
  list-style: none;
}
.footnotes-container li{
  margin-bottom: 0.5em;
  margin-left: 1.5em;
}
.footnotes-container li a{
  text-decoration: none;
  color: inherit;
  border-bottom: 2px solid black;
}
.footnotes-container li a:hover{
  border-bottom: 0px solid black;
}
.footnotes-container li::before{
  margin-left: -2em;
  counter-increment: counter;
  content: counter(counter) ". ";
  text-align: right;
  width: 1.5em;
  display: inline-block;
}



.card.finisher{
  width: calc( 100% - (var(--padding) * 2 ) );
  display: block;
  min-height: unset;
  background-color: unset;
  padding-bottom: 0;
  line-height: 0;
  margin-top: calc(var(--padding) * 3);
  border-radius: unset;
}
.card.finisher>svg{
  width: 100%;
}
.card.finisher span{
  position: absolute;
  left: 50%;
  top: calc( 50% - 0.125em);
  transform: translate(-50%,-50%);
  color: var(--white);
  text-transform: uppercase;
  text-align: center;
      width: 100%;
}
.card.finisher span svg{
  position: absolute;
  left: 50%;
  top: calc( 100% + 2em);
  transform: translate(-50%,-50%);
  transition: top 0.3s var(--ease);
}

.card.finisher:hover span svg{
  top: calc( 100% + 3em);
}