*{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
}
a:hover{
  color:inherit;text-decoration:underline
}
button:hover{
  color:inherit;text-decoration:underline
}
hr{
  all:unset;
  display:block;
  height:1px;
  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;
} */

/* wcześniej były margin top i bottom 20 i 25 */
.brand{
font-size:2.1rem;
font-weight:500;
margin: 20vh 8vh 15vh 6vh;
line-height:1.1;
max-width: 45vw;
min-width: 0;
text-wrap: balance;
}

.brand2{
font-size:2.1rem;
font-weight:500;
margin: 4vh 8vh 15vh 6vh;
line-height:1.1;
max-width: 45vw;
min-width: 0;
text-wrap: balance;
}

@media (max-width: 1200px) {
  .brand,
  .brand2 {
    font-size: calc(2.1rem * 0.75);
  }
  .brand {
    margin: 15vh 8vh 5vh 6vh;
  }
  .brand2 {
      margin: 3vh 8vh 5vh 8vh;
  }
}

/* .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:400;
font-size:11.5px;
line-height:1.4;
max-width:35.5vw;
}
.mw30vw{
max-width:30vw
}

.mw40vw{
max-width:80vw
}
.margin10{
  margin-top:10px;
}
.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:35.5vw;
}

.newsletter{
margin-top: 9vh;
max-width:35.5vw;
display:flex;
flex-direction:column;
gap:0.5rem
}

.newsletter_c{
margin-top: 9vh;
max-width:35.5vw;
display:flex;
flex-direction:column;
gap:0.5rem
}

.newsletter-form{
display:flex;
gap:.75rem;
align-items:flex-end;
width:100%;
}

.newsletter-form input{
flex:1;
min-width:0;
border:0;
background:transparent;
padding:.2rem 0;
font-size:.7rem;
letter-spacing:.05em;
color:#000;
text-transform:uppercase;
}

.newsletter-form input:focus{outline:none}
.newsletter-form button{
color:#000;
border:0;
font-weight: 600;
background:transparent;
margin:.2rem 0;
font-size:.7rem;
letter-spacing:0.005em;
cursor:pointer
}

.newsletter input::placeholder{
  font-size:10px;
  font-weight:600;
  letter-spacing:0.005em;
  color:#c2c2c2;
}

.newsletter_c input::placeholder{
  font-size:10px;
  font-weight:600;
  letter-spacing:0.005em;
  color:#c2c2c2;
}
.newsletter-form input.is-thank-you::placeholder{
  font-size:.7rem;
  font-weight:600;
  letter-spacing:0.005em;
  color:#000;
  opacity:1;
}

.newsletter-form input:-webkit-autofill{
-webkit-box-shadow:0 0 0 1000px transparent inset;
-webkit-text-fill-color:#000;
}

.newsletter-form button:disabled{
  cursor:default;
  opacity:.65;
}

.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:860px){
.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 .75rem 0 1rem;
}
.content {
  order:2;
}
.sidebar{
  order:3;
  display:flex;
  flex-direction:column;
  padding:0 .75rem 2rem 1rem;
}

.brand {
  max-width:100%;
  margin:3rem 0rem 1rem 0rem;
  font-size:1.5rem;
}
.contact{
  margin:calc(var(--nav-font-size) * 5) 0 1rem 0;
}
.side-text{
  max-width:100%
}
.content{
  position:relative;height:60vh
}
.gallery{
  inset:0 .75rem;
}
.newsletter{
  margin:calc(var(--nav-font-size) * 3) 0 2rem 0;
  max-width:100vw;
}

.newsletter_c{
  margin:calc(var(--nav-font-size) * 1) 0 0rem 0;
  max-width:100vw;
}


.newsletter-form input{
  font-size:16px;
  transform:scale(.9);
  transform-origin:left bottom;
}

.social-link{
  margin:calc(var(--nav-font-size) * 2) 0 0rem 0;
}

@media (hover:hover) and (pointer:fine){
  button:hover{
    color:inherit;
    text-decoration:underline;
  }
}

}

::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;
  text-wrap: pretty;
}

.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:860px){
  .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-media{
    padding:0 .75rem;
  }
  .project-desc{
    text-align:left;
    margin-left:0;
    max-width:100%;
  }
}

.works-single{
  min-height:100vh;
}

.works-layout{
  display:grid;
  grid-template-columns:40% 60%;
  min-height:100vh;
}

.works-list{
  padding-top:20vh;
  padding-right:12vw;
  display:flex;
  flex-direction:column;
  gap:2.5rem;
}

@media (max-width: 1200px) {
  .works-list {
    padding-top: 12vh;
  }
}

.works-item{
  display:flex;
  flex-direction:column;
  gap:0.7rem;
}

.works-link{
  display:inline-block;
}

.works-desc{
  margin-left:0;
  text-align:left;
  max-width:40ch;
}

.works-preview{
  position:sticky;
  top:0;
  height:100vh;
}

.works-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.project-page-sidebar{
  padding-top:0;
}

.project-page-content{
  margin-top:57.1vh;
  display:flex;
  flex-direction:column;
  gap:0.6rem;
}

.project-page-title{
  font-size:small;
  font-weight:660;
  letter-spacing:0.05em;
  line-height:1;
  margin-bottom:2rem;
}

.project-title2{
  font-size:12px;
  font-weight:600;
  letter-spacing:0.01em;
  line-height:1;
}

.works-page-description{
  margin-bottom:15px;
  font-size:11.5px;
  line-height:1.45;
  font-weight:350;
}

.project-page-description{
  margin-top:15px;
  margin-bottom:1rem;
  font-size:11.5px;
  line-height:1.45;
  font-weight:350;
  text-wrap: pretty;
}

.project-page-description p + p{
  margin-top:1rem;
}

.project-page-spec{
  margin-top:0rem;
  font-size:11.5px;
  line-height:1.45;
  font-weight:350;
}

.phone{
  font-weight:500;
  letter-spacing:0.01em;
  font-size:11.5px;
  line-height:1.45;
  font-weight:350;
}

@media(max-width:860px){
  .works-list{order:1;}
  .works-layout{
    display:flex;
    flex-direction:column;
    padding-top:calc(var(--nav-font-size) * 5);
  }
  .works-list{
    padding-top:0;
    padding-right:0;
    gap:2rem;
  }
  .works-preview{
    position:relative;
    height:60vh;
    margin:0 .75rem;
  }
  .brand2 {
  max-width:100%;
  margin:3rem 0rem 1rem 0rem;
  font-size:1.5rem;
  }
  .project-page-content{
    margin:calc(var(--nav-font-size) * 3) 0 1rem 0;
    max-width:100%;
  }
}

@media (max-width:860px) and (orientation:landscape){
  .content, 
  .works-preview{
    height:120vh;
  }
}

@media (min-width:580px) and (orientation:landscape){
  .brand, .brand2{
    text-align: center;
    text-wrap: balance;
  } 
 }