:root{
  --p:30px;
  --s:1rem;
  --c:black;
  --fs:48px;
  --fsSmall:14px;
  --fsSmallTitles:12px;
  --fsMin:10px;
  --fsDefault:1.8rem;
  --fsLarge:3.0rem;
  --headerH:72px;
  --c2:yellow;
  --c3:#ddd;
  --serif:'Junicode';
  --sans:'inter ui';
}
body{
  font:var(--fsDefault) var(--serif),libre baskerville,eb garamond, serif;
  color:var(--c);
  background:#fff;
}
body>header{
  justify-content: space-between;
  height: var(--headerH);
  font-weight: bold;
}
.project-list{
  display: none;
  position: absolute;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  top:var(--headerH);
  background: var(--c2);
  left:40%;
  width:calc(100% - 40%);
  /* height:calc(100vh - var(--headerH)); */
  overflow: auto;
  padding: var(--p);
  font-weight: bold;
  z-index: 3;
}
.mobile{display: none}

body.project-list-open .project-list{
  display: flex;
}

.project-list .project{
  width:190px;
  margin:calc(var(--p)/2);
  /* margin:calc(var(--p)/1) var(--p); */
  color: black;
  text-align: center;
  position: relative;
  border:1px solid transparent;
}
.project.low{width:140px;}
.project.high{width:290px;}

.project-list .project a{
  color:inherit;
  padding: 0;
  box-sizing: border-box;
  display: block;
}
.project .imagelink{
  background: white;
}
.project-list .project:hover img{
  opacity: .7;
}
.project-list .project:active img{
 opacity: .4;
}
.project-list .project img{
  opacity: 1;
  display: block;
  width:100%;
  margin-bottom: 5px;
  transition: all .1s ease-in-out;
}

/* Limbs */
body.islimb{
  background: var(--c3);
  font-family: var(--sans);
}
body.islimb .text-box{
  font-size:.8em;
  line-height: 1.5em;
}
.limb-list {
  line-height:1.1em;
  width: 100%;
  margin-top: var(--p);
  margin-bottom:0;
  text-align: center;
}
.limb{
  display: inline-block;
  margin:0px calc(var(--p)/2) 0 0;
}
.limb a{
  white-space: nowrap;
  padding:5px 10px;
  font-size: var(--fsMin);
}
.limb a:hover{
  background:white;
}


/* Header btn */

.text-box, .media-box{
  padding: var(--p);
}
.text-box{
  font-size: var(--fsDefault);
  line-height: 1.3em;
}

body>header a, body>header .button{
  font-family: var(--sans);
  font-size: var(--fsSmallTitles);
  text-transform: uppercase;
  padding: var(--p);
  letter-spacing: 1px;
 }
body>header a span{
 text-decoration: none;
 border-bottom: 1px solid black;
}
body>header a span:hover{
  /* color:var(--c2); */
  border-bottom: 1px solid transparent;
  background:var(--c2);
}

/* Logo modifification depending on authors */
.letter-d, .letter-w, .dash{opacity: .2}
body.degoutin .letter-d,
body.wagon .letter-w,
body.wagon.degoutin .dash
{opacity: 1;}
body .logo>span{border-color:rgba(0, 0, 0, .1);}
body.wagon.degoutin .logo>span{border-color:black;}
body.basic-page .logo>span span,
body.home .logo>span span,
body .logo>span:hover span{opacity: 1; border-color: black;}

body>header .button{
 text-transform: uppercase;
 cursor: pointer;
}
body>header .button:hover, body.project-list-open .button{
  background: var(--c2);
  color:black;
}
body>header .button:after{
  content: " ▼";
  transform: rotate(-90deg);
  display: inline-block;
  top: -2px;
  position: relative;
  right: -4px;
  transition: transform .1s linear;
}
.project-list-open header .button:after{
  transform: rotate(0deg)
}

/* Home page */

body.home .text-box{
  font-size: var(--fsLarge);
}

/* Project page  */

.project .text-box h2{
  font-size: 1.2rem;
  /* letter-spacing:  */
  margin-bottom: calc(var(--p)/2);
}
.text-box{
  padding-top:0;
  font-size: var(--fsDefault);
  position: relative;
}

.project .text-box a:hover{
  /* color:var(--c2); */
  background: var(--c2);
}
.text-box h1{
  font-size: var(--fsLarge);
  line-height: 1.1em;
  margin-bottom:calc(var(--p)/2);
}
.text-box h2{
  font-size: var(--fsSmall);
  line-height: 1.1em;
  font-weight: bold;
  font-family: var(--sans);
  margin-bottom:calc(var(--p)/3);
  margin-top:calc(var(--p));
  letter-spacing: 1px;
  text-transform: uppercase;
}
.text-box h2:first-child{
  margin-top: 0;
}
.text-box header{
  margin-bottom:var(--p);
}
.text-box img, .media-box img{
  width:100%;
}
.text-box .images{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  font-weight: bold;
  padding: var(--p);
}
.text-box .images.full-image{
  padding-left: 0;
  padding-right: 0;
}
.text-box .images.full-image figure{
  width:100%;
  top:0!important; left:0!important; /* No random position */
  padding: 0;
}
.content-box.separated-images{
  position: relative;
}
.text-box .images.separated-images{
  position: absolute;
  right: -100%;
  top:0;
  width: 100%;
}

.text-box figure{
  width:33%;
  padding: calc(var(--p)/4);
  line-height:.7em;
  position: relative;
}
.text-box figure img{
  display: block;
}
.text-box figure.low{width:20%;}
.text-box figure.high{width:35%;}
.text-box iframe{
  width:100%;
  height: auto;
}
.video-container p{  /* Forced video captions */
  font-size: var(--fsSmall);
  font-family: var(--sans);
}
figcaption, .video-container p{
  /* line-height: 1.1em;
  letter-spacing: 0px; */
  text-align: center;
  margin-top: 2px;
}
.text-box .text p, .text-box .text li{
  margin-bottom:.5em;
}


/* Media box */

.media-box{
  padding-left:0;
  padding-top:0;
  font-size: var(--fsSmall);
  line-height: 1.3em;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: flex-start;
}
.media-text-box{
  font-weight: bold;
  letter-spacing: 0px;
  font-size: var(--fsSmall);
  align-items: flex-start;
  line-height: 1.4em;
}
.media-text-box p, .text-box li{
  position: relative;
  padding-left:1.5em;
}
.media-text-box p::before, .text-box li:before{
  position: absolute;
  top:.1em;
  left:0;
  content:"—";
}

.media-box .main-image{
  width:100%;
  height: auto;
  display: block;
  align-self: flex-start;
  margin-bottom: var(--p);
}

.video-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  margin-bottom: var(--p);
  background: gray;
}
.video-container p.small{
  position: absolute;
  bottom: -30px;
  width: 100%;
}
#video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.media-text-box{
  width:calc(50% - var(--p));
}
.media-text-box .block{
  margin-bottom: calc(var(--p)/2);
}
.media-text-box h2{
  margin-bottom:calc(var(--p)/4);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: var(--fsSmallTitles);
}

/* About page */

/* .about .text-box{
  font-size: calc(var(--fsDefault)/1.5);
  font-family: var(--sans);
  font-weight: bold;
} */

.pswp{
  font-weight: bold;
  text-align: center;
}
.small{
  font-family: var(--sans);
  font-size: var(--fsMin);
  letter-spacing: 0px;
  line-height: 1.2em;
  /* word-spacing: .1em; */
  font-weight: bold;
}
small{
  font-size: var(--fsSmall);
}
em, i{font-style: italic;}
a{
  color:var(--c);
  text-decoration: none;
}
.text-box a, .media-box a{
  text-decoration: underline;
}
.text-box a:hover, .media-box a:hover{
  background: var(--c2);
  text-decoration: none;
}
.container{
  display: flex;
  flex-wrap: wrap;
  padding: var(--p);
  justify-content: space-between;
}

.b11{width:100%;}
.b12{width:50%;}
.b13{width:33.33%;}
.b23{width:66.66%;}
.b14{width:25%;}
.b34{width:75%;}
.b15{width:20%;}
.b25{width:40%;}
.b35{width:60%;}
.b45{width:80%;}
.nopadding-side {padding-right: 0; padding-left: 0;}
.nopadding-vert {padding-top: 0; padding-bottom: 0;}
.nopadding {padding: 0;}

::selection{
  background: yellow;
}

@media (max-width:1500px) {
  .page-list>.box{
    width:50%;
  }
}

@media (max-width:1200px) {
  :root{
    --fsLarge:2.8rem;
    --fsDefault:1.5rem;
  }
  .page-list>.b35{
    width:30%;
  }
  .page-list>.b25{
    width:70%;
  }
}

@media (max-width:1000px) {
  main .box{
    width:100%;
    padding-left:0;
    padding-right:0;
  }
  .mobile{display: flex;}
  .mobile-menu-btn{display: inline-block;}
  .desktop{display: none;}
  .mobile-menu{width:100%; justify-content: space-around;}
  .page-list>.b35{width:100%;}
  .text-box, .media-box{padding:var(--p)!important;}
  .project-list{
    padding-top:0;
    left:0;
    width:100%;
  }
  .text-box .images.separated-images{
    position: static;
    margin-top:0;
    width: auto;
  }
}
@media (max-width:700px){
  .media-text-box{width:100%;}
}

@media (max-width:500px){
  :root{--p:15px; --headerH:42px; --fsLarge:2.3rem;}
  header>.box{width:50%;}
  .box{
    width:100%;
    padding-left:0;
    padding-right:0;
  }
  .project-list .project, .images figure{
    width:50%!important;
     margin:0;
    top:0!important;
    padding:calc(var(--p));
  }
}