/* Reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root {--vh:100vh}
:root {--grey:#9d9c9d}
:root {--lightGrey:#e3e3e3}

/* Regles */

img{height:100%;}
figure{height:100%;}

/* Typographie */

@font-face{
    font-family:"suisseBPIntl";
    src:url('SuisseBPIntl-Regular.otf');
    font-weight:400;
    font-style:normal;
}

a{
  text-decoration:none;
  color:black;
}
h1{
  color:var(--grey);
  display:inline;
}
p{color:black;}
span{padding-right:1em;}

/* Structure */

html{
  font-size:100%;
  overscroll-behavior:none;
}
body{
  display:flex;
  flex-direction:column;
  height:var(--vh);
  font-family:'suisseBPIntl';
  font-size:0.8em; 
  line-height:1.2em;
  letter-spacing:0.4px;
}

/* header */

#header{
  position:fixed;
  top:0;
  width:100vw;
  display:flex;
  flex-direction:column;
  background-color:white;
  z-index:100;
}
#header-top{
  display:flex;
  justify-content:space-between;
  flex-shrink:0;
  padding:10px;
}
.mobile-link{
  position:absolute;
  height:100%;
  width:calc(100% - 30px - 2em);
  pointer-events:none;  
}
nav{
  display:none;
  position:absolute;
  margin-top:calc(4.8em + 20px);
  height:calc(100vh - 4.8em - 20px);
  width:100%;
  background-color:white;
}
#menu-button{
  cursor:pointer;
  width:2em;
  user-select:none;
  padding:4px 10px 10px 10px;
  font-size:1.4em;
  text-align:center;
}
#menu-content{border-bottom:0.9px solid black;}
.menu-item{
  border-top:0.9px solid black;
  background-color:white;
  padding:7px 10px 5px 10px;
}
.menu-item:hover{background-color: var(--lightGrey);}
.menu-sub{display:none;}
.sub-title{
  cursor:pointer;
  user-select:none;
}
.show{display:block !important;}
#logo svg{fill:black;}

/* home */

#showcase{
  display:block;
  margin-top:100vh;
  padding:0px 10px 0px 10px;
}
.preview{
  position:relative; 
  margin-bottom:10px;
  height:calc(100vh - 4.8em - 30px);
  width:calc(80vh - 3.84em - 24px);
  z-index:1;
  scroll-margin-top:calc(4.8em + 30px);
}
.preview img{
  display:block;
  position:relative;
  height:100%;
  width:100%;
}
.preview-link{
  display:flex;
  position:absolute;
  left:0px;
  top:0px;
  height:100%;
  width:100%;
  padding:10px;
  background-color:var(--lightGrey);
  opacity:0;
  transition:opacity 0.05s;
}
.preview-link:hover{opacity:1;}
.preview-link p{align-self:center;}

/* project */

#content{
  overflow-x:auto;
  overflow-y:hidden;
}
#wrap, #content{
  display:flex;
  flex-wrap:nowrap;
  flex-direction:row;
  margin-top:calc(4.8em + 20px);
  height:calc(100vh - 4.8em - 20px);
  width:100vw;
}
.hide-scroll::-webkit-scrollbar {
  display: none;
}
.hide-scroll{
  -ms-overflow-style: none;
  scrollbar-width: none;
  overflow-x:hidden !important;
}

.block{
  display:flex;
  flex: 0 0 auto;
  height:100%;
  padding:0px 10px 10px 0px;
}
.block:first-child{padding:0px 10px 10px 10px;}

/* intro */

.block-type-intro{
  justify-content:space-between;
  min-width:100vw;
}

/* gallery */

.block-type-text{
  flex-direction:column;
  width:40vw;
}
.block-type-text p{
  margin-bottom:1em;
}
.block-type-line {
  width:calc(80vh - 3.84em - 24px);
  visibility:hidden;
}
.block-type-gallery{
  padding-right:10px;
}
.block-type-gallery figure{  
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.block-type-gallery ul{
  height:30vw;
  display:flex;
  flex-direction:row;
  justify-content:flex-start;
}
.block-type-gallery li{
  list-style-type:none;
  padding-right:10px;
}
.block-type-gallery li:last-child{padding-right:0px;}
.block-type-gallery img{
  width:20vw;
  height:100%;
  object-fit:cover;
}
.block-type-gallery figcaption{width:40vw;}
.project-title{padding:0px 10px 0px 10px}
.block-type-video video{height:100%;}

/* images */

img.smalllandscape{height:66%;}
img.smallportrait{height:75%;}
img.top{align-self:start;}
img.bottom{align-self:end;}

/* credits */

.block-type-credits {
  display:block;
  width:calc(100vw - 10px);
}

/* previous and next page */

#projects-nav{
  display:flex;
  flex-direction:column;
  position:absolute;
  top:calc(4.8em + 20px);
}
#next{
  display:none;
  width:calc(80vh - 3.84em - 24px);
  overflow-x:auto;
  margin-top:calc(100vh - 4.8em - 20px);
  margin-left:10px;
}
#prev{
  display:none;
  left:10px;
  width:calc(80vh - 3.84em - 24px);
  margin-left:10px;
  overflow-x:auto;
}
.no-margin{margin-top:0px !important;}

/* editorial */

#editorial-image{
  height:100%;
  float:left;
  padding:0px 10px 10px 10px;
}
#editorial-image img{
  height:100%;
}
#editorial-text{
  width:40vw;
  padding-right:10px;
}
#editorial-text p{margin-bottom:1.2em;}

/* media queries */

@media screen and (min-width:1600px){
  html{font-size:120%}
}
@media screen and (min-width:1150px) and (max-width: 1300px){
  html{font-size:80%}
}
@media screen and (min-width:940px) and (max-width: 1150px){
  html{font-size:70%}
}
@media screen and (max-width: 940px){
  html{font-size:80%}
  #editorial-image{
    height:auto;
    width:100vw;
    padding:0px 10px 10px 10px;
  }
  #editorial-image img{
    width:100%;
    height:auto;
  }
  #editorial-text{
    width:100vw;
    padding:0px 10px 0px 10px;
  }
  #editorial-text p{margin-bottom:1.2em;}
}
@media screen and (max-width:940px) and (max-aspect-ratio: 3/4){
  
  /*rules*/

  .mobile-link{pointer-events:auto;}
  .spare{display:none;}

  /*structure*/

  #showcase{
    display:block;
    margin-top:100vh;
    padding:0px 10px 0px 10px;
  }
  #next{
    min-height:calc(100vh - 4.8em - 20px);
    margin-top:calc(1.3 * (100vw - 20px) - 10px); 
  }
  #next, #prev{width:calc(100vw - 20px)}
  .preview{
    position:relative; 
    margin-bottom:10px;
    width:calc(100vw - 20px);
    height:auto;
    z-index:1;
    scroll-margin-top:calc(4.8em + 20px);
  }
  .block{scroll-margin-left:-50vw;}
  .block-type-intro{
    justify-content:space-between;
    width:auto;
    align-items:start;
  }
  .block-type-intro img{
    width:calc(100vw - 20px);
    height:auto !important;

  }
  .block-type-line {
    width:calc(100vw - 30px);
    visibility:hidden;
  }
  .block-type-text{
    flex-direction:column;
    width:calc(100vw - 10px);
    padding-right:10px;
  }
  .block-type-image img{
    width:calc(100vw - 20px);
    height:100%;
    object-fit:contain;
    object-position:top;
  }
  img.top{object-position:top;}
  img.bottom{object-position:bottom !important;}
  .block-type-gallery img{
    width:calc(50vw - 15px);
    height:100%;
    object-fit:cover;
  }
  .block-type-gallery ul{
    height:50%;
  }
  .block-type-gallery figcaption{width:calc(100vw - 20px)}
  .block-type-video video{
    height:auto;
    width:calc(100vw - 20px);
  }
  #wrap{
    flex-direction:column;
    margin-top:calc(4.8em + 20px);
    height:auto;
    width:100vw;
  }