/* Reset */

:root {
  --borders: 40px;
  --project-section: 120px;
  --project-text-top-bottom: 120px;
  --project-text-left-right: 80px;
  --spacing: 40px;
  --spacing-3-wide: 41px;  
  --radius: 12px;
  --headersize: 20px;
  --fontsize: 16px;
  --lineheight: 28px; /* 24px */
  --organic:"cubic-bezier(0.35, 0, 0.65, 1)";
  --elastic:"cubic-bezier(0, 0, 0.1, 1)";
  --magnetic:"cubic-bezier(1, 0, 0.86, 1)";
  --link-hover: #777; /* #724397; */
  --selection: rgba(165, 51, 255, 0.2);
}

::-moz-selection {
  background: rgba(165, 51, 255, 0.2);
}

::selection {
  background: rgba(165, 51, 255, 0.2);
}

@media only screen and (max-width: 1024px) {
  :root {
    --borders: 40px;
    --project-section: 40px;
    --project-text-top-bottom: 80px;
    --project-text-left-right: 40px;
    --spacing: 40px;
    --spacing-3-wide: 40px;    
    --radius: 12px;
  }
}

@media only screen and (max-width: 768px) {
  :root {
    --borders: 24px;
    --project-section: 0px;
    --project-text-top-bottom: 72px;
    --project-text-left-right: 24px;
    --spacing: 0px;
    --radius: 12px;
  }
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  color:#000;
  background:#fff;
  font-family: Arial, Helvetica, Geneva, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 12px;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,article,aside,canvas,details,figcaption,figure,footer,hgroup,menu,nav,section,summary,time,mark,audio,video {
  margin: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

fieldset,img{
  border: 0;
  margin: 0;
}

textarea {
  height: 2.4em;
}

a {
  outline: none;
}

address,caption,cite,code,dfn,th,var {
  font-style: normal;
  font-weight: normal;
}

li {
  list-style: none;
}

caption,th {
  text-align: left;
}

h1,h2,h3,h4,h5,h6 {
  font-size: 100%;
  font-weight: normal;
}

q:before,q:after {
  content: '';
}

abbr,acronym {
  border: 0;
  font-variant: normal;
}
  
sup {
  vertical-align: text-top;
}
  
sub {
  vertical-align: text-bottom;
}
  
input,textarea,select {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  outline-style: none;
  outline-width: 0px;
  font-size: 100%;
}

legend {
  color: #000;
}

del,ins {
  text-decoration: none;
}


/* Base */

html, body {
  background-color: #fff;
  overflow-x: hidden;
  height: 100%;
  font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  /*letter-spacing: 0.01em;*/
}

a {
  color: inherit;
  text-decoration: none;
  transition: 0.1s ease-in-out;
}

a:hover {
  color: var(--link-hover);
}

.portfolio {
  width: 100%;
}

.portfolio {
  width: 100vw;
  height: 100dvh;  
}

.profile {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 33vw;
  height: 100dvh;
  color: #000;
  align-items: center;
  justify-content: center;
  padding: var(--borders);
  overflow: auto;
  z-index: 2;
  pointer-events: none;
}

.profile .bio {
  width: 300px;
  margin: 40px auto;
  text-align: center;
}

.profile img {
  width: 100px;
  height: 100px;
  border-radius: 100px;
}
.profile h1 {
  padding: 24px 0 8px;
  font-size: 32px;
  font-weight: 500;
  pointer-events: all;
}

.profile p {
  margin: 16px 0;
  color: #111;
  font-size: var(--fontsize);
  line-height: var(--lineheight);
  font-weight: normal;
  text-align: left;
  pointer-events: all;  
}

.profile p:last-child {
  margin-bottom: 0;
}

.profile p a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(82,85,88,0.25);
}

.profile p a:hover {
  color: var(--link-hover);
  border-bottom-color: rgba(114,67,151,0.25);
}

.projects {
  width: 100vw;
  height: 100dvh;
  position: fixed;
  padding-left: 33vw;
  top: 0;
  border-radius: var(--radius);
  overflow: hidden;
}

.project {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  transition: opacity 0.667s cubic-bezier(0.25, 0, 0.25, 1);
  opacity: 0;
}

.project.active {
  opacity: 1.0;
  z-index: 5;
}

.project img {
  display: block;
  position: relative;
  z-index: 1;
  overflow: hidden;  
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 3;
  object-fit: cover;
  backface-visibility: hidden;
  transform: scale(1);
  transition-duration: 0.3s;
  transition-timing-function: var(--organic);
}

a.project.zoom:hover img {
  transform: scale(1.02);
}

.project h3 {
  position: absolute;
  bottom: 18px;
  right: 20px;
  padding: 0;
  font-size: 14px;
  z-index: 10;
  color: #fff;
}

.project h3 a {
  color: inherit;
  font-weight: 600;
}

.project h3 a:hover {
  text-decoration: none;
  opacity: 0.7;
}

.project.fade:before {
  content: '';
  position: absolute;
  /*width: 100%;*/
  /*height: 96px;*/
  background: linear-gradient(165deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.125) 75%, rgba(0,0,0,0.2) 100%);
  width: 480px;
  height: 128px;
  right: 0;
  bottom: 0;
  z-index: 10;
}

.project.fade.nearby:before {
  background: linear-gradient(165deg, rgba(242,240,253,0) 50%, rgba(179,186,204,0.5) 75%, rgba(179,186,204,1) 100%);
}


/* Tablet */

.ipad .profile, .ipad .projects {
  height: calc(100dvh - 25px)
}

.ipad .project {
  transition: opacity 0.667s ease-out;
}

.portfolio {
  padding: 0;
}

.projects {
  overflow: auto;
  padding-right: var(--borders);
  scroll-behavior: smooth;
  /*scroll-snap-type: y mandatory; */
}

.projects .project {
  display: block;
  position: relative;
  margin-top: calc(var(--borders) / 2);
  opacity: 1;
  height: calc(100dvh - (var(--borders) * 2 ));
  scroll-snap-align: center;
  border-radius: var(--radius);
}


.projects .project:first-child {
  margin-top: var(--borders);
}

.projects .two-up {
  display: flex;
  flex-direction: row;
  gap: calc(var(--borders) / 2);
  margin-top: calc(var(--borders) / 2);
}

.projects .two-up .project {
  margin-top: 0;
  width: calc(50% - calc(var(--borders) / 4));
}

.projects .two-up .project:first-child {
  margin-top: 0;
}

.projects .project.narrow {
  height: calc(50dvh - (var(--borders) * 1.25));
}

/*
.projects .three-up {
  display: flex;
  flex-direction: row;
  gap: calc(var(--borders) / 2);
  margin-top: calc(var(--borders) / 2);
}

.projects .three-up .project {
  margin-top: 0;
  width: calc(50% - calc(var(--borders) / 4));
  height: calc(50dvh - (var(--borders) * 1.5));
}

.projects .three-up .project:first-child {
  margin-top: 0;
}
*/

.projects {
  padding-bottom: var(--borders);
}

.project h3 {
  bottom: 20px;
  right: 24px;
}

.project .button {
  position: absolute;
  bottom: 24px;
  padding: 12px;
  left: 24px;
  font-size: 14px;
  z-index: 10;
  color: #222;
  font-weight: 600;
  background-color: #fff;
  border-radius: 8px;
}

.portfolio .split {
  width: 100%;
  height: calc(60dvh - (var(--borders) * 2 ));
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: calc(var(--borders) / 2);
}

.portfolio .split .project {
  width: 100%;
  height: 100%;
  position: relative;
}

.portfolio .split .project:first-child {
  margin-top: calc(var(--borders) / 2);
}


@media only screen and (max-height: 650px) {
  .profile {
    align-items: flex-start;
  }
}

/* iPad Pro */

@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation:landscape) {

  .ipad .profile, .ipad .projects {
    height: 100%
  }

}


/* Mobile */

@media screen and (max-width: 768px) {

  .profile p {
    width: 200px;
    margin-left: auto;
    margin-right: auto;
  }

  .projects .project {
    width: calc(100vw - 24px);
    margin-left: 12px;
    margin-right: 12px;
    height: calc(100dvh - (var(--borders) * 8 ));
  }

  .projects .two-up .project:first-child, .projects .two-up .project {
    width: calc(100vw - 24px);
    margin-left: 12px;
    margin-right: 12px;
    /*height: calc(100dvh - (var(--borders) * 8 ));*/
  }

  .projects .project.map img {
    object-position: 51%;
  }

  .projects .project.arrival img {
    object-position: 53%;
  }

  .projects .project.nearby img {
    object-position: 30%;
  }

  .projects .project.iphone img {
    object-position: 55%;
  }

  .projects .project.raw img {
    object-position: 49%;
  }  

  .projects .project.site img {
    object-position: 63%;
  }  

}

@media screen and (max-width: 767px) {
  
  html, body {
    height: auto;
    overflow: auto;
  }

  .profile {
    width: 100%;
    height: auto;
    position: relative;
    padding: 40px 0; 
  }

  .profile .bio {
    width: 100%;
    max-width: 300px;
  }

  .profile p {
    width: 100%;
    max-width: 300px;
  }  

  .projects {
    width: 100%;
    height: auto;
    float: none;
    right: 0;
    position: relative;
  }

  .project.places img {
    object-position: 28% 65%;
  }

  .projects {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
  }

  .projects .project:first-child {
    margin-top: 0;
  }

  .portfolio {
    height: auto;
  }

  .projects .two-up {
    display: flex;
    flex-direction: column;
    gap: calc(var(--borders) / 2);
    margin-top: calc(var(--borders) / 2);
  }

  .projects .two-up .project {
    margin-top: 0;
    width: 100%;
  }

  .projects .two-up .project:first-child {
    margin-top: 0;
  }

  .projects .two-up .project:first-child, .projects .two-up .project {
    width: calc(100vw - 24px);
    margin-left: 12px;
    margin-right: 12px;
  }

  .projects .two-up:last-child .project:last-child {
    margin-bottom: calc(var(--borders) / 2);
  }


}