body {
opacity: 0;
animation: fadeIn 0.2s ease forwards;
}


@keyframes fadeIn {
to {
opacity: 1;
}

}

@view-transition {
navigation: auto;
}

@font-face {
  font-family: "ABC Gaisyr Mono";
  src: url("../assets/fonts/ABCGaisyrMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/** {
  border: 1px solid red;

}*/

:root {
  --bg: #E0E2E1;
  --text: #3A3A3C;
  --text-light: #606060;
}

html {
  scroll-behavior: smooth;
}

body {
  display:flex;
  flex-direction: column;
  margin: 0;
  font-family: "ABC Gaisyr Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  background: var(--bg);
  color: var(--text);
  padding: 12px;
  font-kerning: normal;
  
   
}

main{
display: flex;
flex-direction: row;
line-height: 1.6;
  align-items: flex-start;
  gap:64px;
  flex: 1 0 0;
  align-self: stretch;
}

.column-left{
display: flex;
max-width: 576px;
flex-direction: column;
align-items: flex-start;
gap: 64px;
flex: 1 0 0;

}

.column-right{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
}

.navbar {
  display: flex;
  align-items: flex-start;
  gap: 42px;

}


h1 {
  margin:0;
  padding:0;
  font-size: 50px;
  font-weight: 600;
  letter-spacing: -1.2px;
  color: var(--text);
  line-height: 60px;
  font-family: "ABC Gaisyr Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

.mobile-break{
      display:none;
    }

h2{
  font-weight:400;

}

h3{
  font-size: 16.3px;
  font-style: normal;
  font-weight: 350;
  line-height: 130%;
  letter-spacing: 0.231px;

}

h4 {
  font-size: 14px;
font-style: normal;
font-weight: 350;
line-height: 17px; /* 141.667% */
letter-spacing: 0.231px;
padding:0;
margin:0;
}

p {
  font-size: 14px;
font-style: normal;
font-weight: 200;
line-height: 148%;
letter-spacing: 0.3px;
color: var(--text-light);
}

a{
  color:var(--text);

}

a:hover{
  color:var(--text-light);

}

h2, h3, p{
padding:0;
margin:0;
}

.works-list{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding:0;
  margin:0;
  list-style: none;
  align-self: stretch;
  flex: 1 0 0;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 14px; /* 116.667% */
  letter-spacing: 0.231px;
}

.works-number{
  display:inline-block;
  vertical-align: top;
}

.works-title{
  display:inline-block;
  vertical-align: top;
  font-family: Inter, sans-serif;
  max-width: 325px;
  font-size: 14px;
  padding-left:12px;
font-style: normal;
font-weight: 400px;
line-height: 124%;
letter-spacing: 0.231px;
white-space: normal; /* allow wrapping */
overflow-wrap: break-word; /* break long words if needed */
word-wrap: break-word; /* legacy support */
}

.works-title a{
  text-decoration: none;
}

.works-title a:hover{
  text-decoration: underline;
  text-underline-offset: 4px;
}

.works-spacer{
  margin-left:24px;
  margin-right:24px;

}

.works-spacer-active{
  color: #F2654D;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 42px;
  margin: 0;
  padding: 0;
  font-size: 33px;
font-style: normal;
font-weight: 400;
line-height: 38px; /* 122.581% */
letter-spacing: -1px;
}

.nav-links a {
  text-decoration: none;
  color: var(--text-light);
}

.nav-links a[aria-current="page"] {
  color: var(--text);
}


.nav-links a:hover {
  color: var(--text);
}

.works-feed{
  padding:0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 48px;
  align-self: stretch;
  flex: 1 0 0;
}

.works-item{
  display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
align-self: stretch;
padding:0;
scroll-margin-top: 24px;
}

.works-img{
  width: 100%;
  height: auto;
  object-fit: cover;
}

.button{
  position: relative;
display: inline-flex;
width: auto;
padding: 6px 12px;
align-items: center;
gap: 4px;
border-radius: 9999px;
border: 2px solid var(--text);
background: transparent;
color: var(--text);
font-family: Inter, sans-serif;
font-size: 14px;
font-style: normal;
letter-spacing: 0.231px;
font-weight: 400;
text-decoration: none;
}

.copy-link{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 9999px;
  border: 2px solid var(--text);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.copy-link:hover{
  background: var(--text);
  color: var(--bg);
}

.copy-link-success{
  border-color: #2E9E5B;
  color: #2E9E5B;
}

.copy-link-error{
  border-color: #F2654D;
  color: #F2654D;
}

.email-link{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 9999px;
  border: 2px solid var(--text);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
}

.email-link:hover{
  background: var(--text);
  color: var(--bg);
}

.email-contact{
  display: flex;
  align-items: center;
  gap: 12px;
}

.email-copy{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 9999px;
  border: 2px solid var(--text);
  background: transparent;
  color: var(--text);
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-style: normal;
  letter-spacing: 0.231px;
  font-weight: 400;
  cursor: pointer;
}

.email-copy:hover{
  background: var(--text);
  color: var(--bg);
}

.email-copy-confirm{
  font-family: Inter, sans-serif;
  font-size: 14px;
  color: var(--text-light);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.email-copy-confirm.visible{
  opacity: 1;
}

.tag-filters{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-self: stretch;
  gap: 12px;
  margin-top: 24px;
  margin-bottom: 0;
}

.tag-filters-contact{
  margin-left: auto;
}

.tag-filter{
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 9999px;
  border: 2px solid var(--text);
  background: transparent;
  color: var(--text);
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-style: normal;
  letter-spacing: 0.231px;
  font-weight: 400;
  cursor: pointer;
}

.tag-filter:hover{
  background: var(--text);
  color: var(--bg);
}

.tag-filter.active{
  background: var(--text);
  color: var(--bg);
}

.button:hover{
  background: var(--text);
  color: var(--bg);
}

.works-text-container{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}

.works-text-left{
  display: flex;
  flex:1;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}

.works-actions{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.works-text-right{
  display: flex;
  flex:1;
  flex-direction: column;
  padding-right: 24px;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}

.premiere-selected-works{
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: stretch;
  margin-top: 24px;
  padding-right: 12px;
}

.premiere-links{
  display: inline-grid;
row-gap: 12px;
column-gap: 12px;
align-self: stretch;
grid-template-rows: repeat(3,fit-content(100%));
grid-template-columns: repeat(3,minmax(0,1fr));
grid-auto-flow: row;
}

.premiere-links a{
  line-height:130%;
  text-align:left;
  padding: 6px 28px 6px 12px;
  white-space: normal; /* allow wrapping */
word-wrap: break-word; /* legacy support */
}

.button-icon {
  flex-shrink: 0;
}

svg{
  transform: translateY(1px);
}

footer{
  display: flex;
align-items: flex-start;
align-self: stretch;
border-top: 1px solid var(--text);
margin-top: 48px;
}

footer p{
  padding-top:12px;
  color: var(--text);
}

.footer-copyright{
  font-size: 16.3px;
  font-style: normal;
  font-weight: 350;
  line-height: 130%;
  letter-spacing: 0.231px;
}


/*MOBILE STYLING*/

@media (max-width: 1332px) {
  .premiere-links{
    grid-template-rows: repeat(9,fit-content(100%));
    grid-template-columns: repeat(1,minmax(0,1fr));
    
  }

  .premiere-links a{
    width:fit-content;
  }

}

@media (max-width: 791px) {
  .premiere-links a{
    max-width: 226px;
  }
}

/*TABLET STYLING*/

@media (max-width: 768px) {
  .works-text-container{
    flex-direction: column;
  }

  .works-text-right{
    max-width: 100%;
    padding-right: 0px;
  }
}


@media (max-width: 700px) {

    .selected-works{
      display:none;

    }

    .name-firstname{
      display: inline-block;
      text-indent: 24px;
      line-height: 83%;
      margin-top: 24px;
    }

    .name-lastname{
      display: inline-block;
      transform: translateY(-12px);
      line-height: 106%;
    }

    .mobile-break{
      display:block;
    }

    main{
      flex-direction: column;
      gap:24px;
    }

    .works-text-container{
      flex-direction: column;
      padding-right: 32px;
    }

    .works-text-right{
      max-width:100%;
      padding-right: 0px;
    }

    .nav-links{
    gap:32px;

}

    .tag-filters{
      margin-top: 24px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      align-self: stretch;
      gap: 12px;
      margin-bottom: 8px;
    }


}