*{margin:0;padding:0;box-sizing:border-box}

:root{
--nav-font-size:0.75rem;
}

body{
font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
/* font-family: "Neue Haas Grotesk Text", "Helvetica Neue", Helvetica, Arial, sans-serif; */
background:#fff;
color:#000;
min-height:100vh;
overflow-y:scroll;
overflow-x:hidden;
scrollbar-gutter:stable;
}
a{color:inherit;text-decoration:none
}
hr{
  all:unset;
  display:block;
  height:0.7px;
  background:#c2c2c2;
}
.layout{
display:grid;
grid-template-columns: 40% 60%;
grid-template-areas:"sidebar content";
min-height:100vh;
}
.nav{
position:fixed;
top:0;
left:0;
right:0;
z-index:1000;
background:transparent;
padding:2rem 1.5rem 0 2rem;
}
.sidebar{
grid-area:sidebar;
background:#fff;
color:#000;
padding:0 1.5rem 2rem 2rem;
display:grid;
grid-template-rows:auto auto;
gap:2rem;
min-height:auto;
min-width: 0;
}
/* 
.brand{
font-size: 1.5rem;
font-weight:600;
padding:15% 5% 10%;
line-height:1.1;
max-width: 45vw;
} */

.brand{
font-size:2.1rem;
font-weight:500;
margin: 20vh 8vh 25vh 8vh;
line-height:1.1;
max-width: 45vw;
min-width: 0;
overflow-wrap: anywhere;
}

/* .brand{
  font-family: "Neue Haas Grotesk Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size:2rem;
  margin: 10vh 8vh 10vh 8vh;
  font-weight:500;
  letter-spacing:0.01em;
  line-height:1;
  max-width: 45vw;
} */

.nav ul{
font-size:x-small;
font-weight:660;
list-style:none;
display:flex;
gap:0.5rem;
line-height:1;
}
.side-text{
display:flex;
flex-direction:column;
gap:1rem;
font-weight:450;
font-size:small;
line-height:1.4;
max-width:45vw;
}

.contact{
display:flex;
flex-direction:column;
margin-top: 30vh;
margin-bottom: 7vh;
gap:1rem;
font-weight:450;
font-size:small;
line-height:1.4;
max-width:45vw;
}

.newsletter{
margin-top: 10vh;
max-width:30vw;
display:flex;
flex-direction:column;
gap:1rem
}
.newsletter-form{
display:flex;
gap:.75rem;
align-items:flex-end
}
.newsletter-form input{
flex:1;
border:0;
background:transparent;
padding:.2rem 0;
font-size:.7rem;
letter-spacing:.05em;
}
.newsletter-form input:focus{outline:none}
.newsletter-form button{
border:0;
font-weight: 550;
background:transparent;
margin:.2rem 0;
font-size:.7rem;
letter-spacing:.05em;
cursor:pointer
}
.newsletter-form button:focus-visible{
outline:1px solid #000;
outline-offset:2px
}
.social-link{
  margin: 10px 0;
  font-size:x-small;
  font-weight:600;
  letter-spacing: 0.05em;
}
.sr-only{
position:absolute;
width:1px;
height:1px;
margin:-1px;
clip:rect(0 0 0 0);
overflow:hidden
}
.content{
grid-area:content;
position:sticky;
top:0;
height:100vh;
background:#fff;
overflow:hidden
}
.gallery{
position:absolute;
inset:0
}
.gallery img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
opacity:0;
transition:opacity .8s ease
}
.gallery img.is-active{opacity:1}

@media(max-width:960px){
.layout {
  display:flex;
  flex-direction:column;
  padding-top:calc(var(--nav-font-size) * 5);
}
.nav{
  position:fixed;
  top:calc(var(--nav-font-size) * 2);
  left:0;
  right:0;
  z-index:1000;
  background:transparent;
  padding:0 1.5rem 0 2rem;
}
.content {
  order:2;
}
.sidebar{
  order:3;
  display:flex;
  flex-direction:column;
  padding:0 1.5rem 2rem 2rem;
}
.brand{max-width:100%;margin:15vh 8vh 15vh 8vh;margin:15svh 8vh 15svh 8vh;font-size:1.5rem;}
.contact{margin-top:15vh;margin-top:15svh}
.side-text{max-width:100%}
.content{position:relative;height:60vh}
}

::placeholder {
  color: #c2c2c2;
}

.index-list{
  margin-top:0;
}

.project{
  display:grid;
  grid-template-columns:40% 60%;
  grid-template-rows:auto auto;
  grid-template-areas:
    ". media"
    ". info";
  row-gap:1.5lh;
  margin-bottom:6lh;
}

.project-info{
  grid-area:info;
  padding:0 2rem 0 0;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
  min-width:0;
}

.project-title{
  font-size:0.9rem;
  letter-spacing:0.05em;
  font-weight:500;
  line-height:1.1;
}

.project-desc{
  font-size:0.9rem;
  line-height:1.1;
  text-align:right;
  margin-left:auto;
  max-width:36ch;
  overflow-wrap:anywhere;
}

.project-media{
  grid-area:media;
  min-width:0;
  height:100%;
}

.project-media img{
  width:100%;
  height:100%;
  min-height:100vh;
  object-fit:cover;
  display:block;
}

.project:last-child{
  margin-bottom:6.5lh;
}

@media(max-width:960px){
  .index-list{
    padding-top:calc(var(--nav-font-size) * 5);
  }

  .project{
    grid-template-columns:1fr;
    grid-template-areas:
      "media"
      "info";
    row-gap:1.25lh;
    margin-bottom:4lh;
  }

  .project-info{
    padding:0 1.5rem;
    flex-direction:column;
    align-items:flex-start;
    gap:0.75rem;
  }

  .project-media img{
    min-height:60vh;
  }

  .project-desc{
    text-align:left;
    margin-left:0;
    max-width:100%;
  }
}