@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* 
Regular 400
Medium 500
SemiBold 600
Bold 700

*/



html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Inter", sans-serif;
    color: black;
    font-weight: 350;
    font-size: 26px;
    line-height: 100%;
/* or 42px */
    letter-spacing: 0px;
    background-color: white;
}

a {
    color: black;
    text-decoration: none;
    transition: opacity 0.3s;
}

a:hover {
    opacity: 0.5;
}


.container {

margin: 0 auto 100px;
padding: 0px 15px;
max-width: 1200px;

margin-bottom: 0%;
}

 /* ===== Header / nav ===== */
.header {
padding: 15px 15px;
}

.header .container {
    padding: 0px 0px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}


.logo {
    font-size: 26px;
    letter-spacing: 0px;
}

.header__nav {
    display: flex;
    gap: 30px;
}

.header__link {
    font-size: 26px;
    letter-spacing: -1px;
    color: #9E9EA4;
}

.header__link__black {
    color: #000000;
}

/* ===== Welcome section ===== */
.main {

}

.welcome {

}

.container {
align-items: center;
}

.welcome .welcome__desc {
display: flex;
margin: 15px 0px;
max-width: 1200px;
gap: 32px;
justify-content: space-between;
margin-top: 40px;
margin-bottom: 40px;
}

.welcome__img {
width: 150px;
height: 150px;
object-fit: cover;
object-position: center;
}

.welcome_title {
    margin-bottom: 0px;
    margin-top: 0px;
    font-size: 57px;
    letter-spacing: -1px;
    font-weight: 850;
    line-height: 91%;
    width: 1000px;
    hyphens: manual;
    -webkit-hyphens: manual;
    hyphenate-character: "\2010";

    /* or 82px */
    color: #000000;

}

.experience_text {

font-weight: 370;
font-size: 35px;
line-height: 110%;
/* or 56px */
letter-spacing: -1px;
max-width: 1200px;
margin-bottom: 64px;
margin-top: 40px;
color: #000000;


}

.experience_text span {
    font-weight: 500;
}
.selected_works {
font-size: 26px;
margin-top: 0px;
margin-bottom: 15px;
}

@media (max-width: 900px) {
  body {
    overflow-x: clip;
  }

  .header .container {
    align-items: flex-start;
    gap: 12px;
  }

  .logo {
    max-width: 140px;
    flex-shrink: 0;
  }

  .header__nav {
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .header__link {
    font-size: 25px;
  }

  .header__link--desktop {
    display: none;
  }

  .welcome .welcome__desc {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
    max-width: 100%;
    margin-top: 15px;
    margin-bottom: 15px;
  }

  .welcome__img {
    display: block;
    width: 100%;
    height: 208px;
    object-fit: cover;
    object-position: center;
  }

  .welcome_title {
    width: 100%;
    min-width: 0;
    font-size: 57px;
    font-weight: 850;
    line-height: 0.86;
    letter-spacing: -0.55px;
  }

  .experience_text {
    max-width: 100%;
  }
}


.workscards {
  overflow: visible;
}

.workscards .container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 100px;
overflow: visible;
}

.work__card {
  position: relative;
  overflow: visible;
}

.work__card--soon .soon-sticker,
.work__card--soon img.soon-sticker {
  position: absolute;
  width: 506px;
  height: auto;
  max-width: none;
  left: 50%;
  top: -240px;
  transform: translateX(-65%);
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.work__card--soon {
  cursor: pointer;
}

.work__card--soon:hover .soon-sticker,
.work__card--soon:focus-within .soon-sticker,
.work__card--soon.is-soon .soon-sticker,
.work__card--soon:hover img.soon-sticker,
.work__card--soon:focus-within img.soon-sticker,
.work__card--soon.is-soon img.soon-sticker {
  opacity: 1;
}

.workcard__img {
width: 100%;
width: 378px;
height: 227px;
object-fit: cover;
object-position: center;
}

.works__title {
margin-top: 8px;
width: 378px;
margin-bottom: 40px;
font-size: 26px;
line-height: 100%;
/* or 55px */
letter-spacing: 0px;
font-weight: 350;
}

@media (max-width: 900px) {
  .workscards .container {
    flex-direction: column;
    gap: 0;
    margin-bottom: 50px;
  }

  .work__card {
    width: 100%;
  }

  .workcard__img {
    width: 100%;
    height: 227px;
  }

  .works__title {
    width: 100%;
  }

  .work__card--soon .soon-sticker,
  .work__card--soon img.soon-sticker {
    width: 350px;
    max-width: none;
    height: auto;
    left: auto;
    right: 0;
    top: 150px;
    bottom: auto;
    transform: none;
  }

  .work__card--soon:hover .soon-sticker,
  .work__card--soon:focus-within .soon-sticker,
  .work__card--soon:hover img.soon-sticker,
  .work__card--soon:focus-within img.soon-sticker {
    opacity: 0;
  }

  .work__card--soon.is-soon {
    z-index: 2;
  }

  .work__card--soon.is-soon .soon-sticker,
  .work__card--soon.is-soon img.soon-sticker {
    opacity: 1;
    pointer-events: auto;
  }
}

 /* ===== Project list Selected works ===== */

.project__list {
padding: 0px 24px;
}

.project__list__block {
max-width: 1200px;
margin-left: auto;    
margin-right: auto;
margin-bottom: 0px;
}

.container8 {
    max-width: 1200px;
    align-items: baseline;
    display: flex;
    justify-content: space-between;
    margin-left: auto;    
    margin-right: auto;
    margin-top: 13px;
    padding: 0px 0px;
    margin-bottom: 0px;
    
}

.h3 {
font-size: 26px;
}


.project-list-wrap {
    box-sizing: border-box;
    width: calc(100% - 30px);
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
  }

 .project-list {
    min-width: 0;
    border-top: 1px solid #000000;
  }
 
  .project-list a {
    display: grid;
    grid-template-columns: 316px 35px 250px auto;
    align-items: center;
    gap: 30px;
    min-width: 0;
    padding: 15px 0px;
    text-decoration: none;
    color: #000000;
    border-bottom: 1px solid #000000;
    font-size: 14px;
    line-height: 1.2;
  }
 
  .project-list a:hover {
    opacity: 0.5;
  }
 
  .project-name {
    min-width: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
 
  .project-year {
    min-width: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
 
  .project-tags {
    min-width: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
 
  .project-source {
    min-width: 0;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Tablet */
  @media (max-width: 900px) {
    .project-list a {
      grid-template-columns: 1fr 60px 160px auto;
      gap: 16px;
      padding: 15px 0px;
      font-size: 14px;
    }
  }
 
  /* Mobile */
  @media (max-width: 600px) {
    .project-list a {
      grid-template-columns: 1fr 44px 96px 70px;
      gap: 10px;
      padding: 15px 0px;
      font-size: 12px;
    }
  }
 
  /* Very small phones */
  @media (max-width: 400px) {
    .project-list a {
      grid-template-columns: 1fr 40px 80px 60px;
      gap: 7px;
      padding: 15px 0px;
      font-size: 12px;
    }
  }



 /* ===== Footer OLD ===== */

.container__footer {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
margin-top: 100px;

}
.text__block_card {
font-size: 16px;
height: 270px;
background-color: rgb(255, 255, 255);
}

.card__img {
width: 100%;
height: 162px;
object-fit: cover;
display: block;

}


.text__block__title {
font-size: 16px;
margin-top: 0;
margin-bottom: 0px;
}

.text__descr {
font-size: 16px;
margin-top: 0;
margin-bottom: 0px;
}

.list {
    display: grid;
    grid-template-columns: 143px 164px 206px 206px 350px;
    column-gap: 30px;

}

 
.list {
    grid-template-columns: 1fr 1fr
}


 /* ===== Footer ===== */
 
  .site-footer {
    box-sizing: border-box;
    width: calc(100% - 30px);
    max-width: 1200px;
    margin: 0 auto;
    padding: 140px 0 40px;
 
    display: grid;
    grid-template-columns: 170px 170px 170px 210px auto;
    grid-template-areas: "education skills contacts exhibitions image";
    gap: 36px;
    align-items: start;
  }
 
  .footer-col {
    font-size: 16px;
    line-height: 1.4;
  }
 
  .footer-col h4 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 4px;
  }
 
  .footer-col p {
    margin: 0 0 20px;
  }
 
  .footer-col p:last-child {
    margin-bottom: 0;
  }
 
  .footer-col a {
    text-decoration: none;
    transition: opacity 0.2s ease;
  }

  .footer-col a:hover {
    opacity: 0.5;
  }
 
  .footer-col a.link-underline {
    text-decoration: underline;
  }

  .footer-col--education   { grid-area: education; }
  .footer-col--skills      { grid-area: skills; }
  .footer-col--contacts    { grid-area: contacts; }
  .footer-col--exhibitions { grid-area: exhibitions; }
 
  .footer-col--image {
    grid-area: image;
    flex: 1 1 auto;
    margin-top: auto;
  }
 
  .footer-col--image img {
    width: 100%;   
    height: 100%;
    object-fit: contain;
  }
 
  /* ===== Tablet: keep 4 text columns, let image drop under ===== */
  @media (max-width: 1000px) {
    .site-footer {
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-areas:
        "education skills contacts exhibitions"
        "image     image  image    image";
    }
 
    .footer-col--image {
      margin-top: 24px;
    }
 
    .footer-col--image img {
      width: 180px;
    }
  }
 
  /* ===== Mobile: 2 columns, education+skills stacked left, contacts+exhibitions stacked right, image spans full width below ===== */
  @media (max-width: 600px) {
    .site-footer {
      padding: 40px 0 32px;
      grid-template-columns: 1fr 1fr;
      grid-template-areas:
        "education contacts"
        "skills    exhibitions"
        "image     image";
      gap: 32px 16px;
    }
 
    .footer-col {
      font-size: 15px;
    }
 
    .footer-col h4 {
      font-size: 15px;
    }
 
    .footer-col p {
      margin-bottom: 16px;
    }
 
    .footer-col--image {
      margin-top: 8px;
    }
 
    .footer-col--image img {
      display: block;
      width: 100%;
      max-width: 320px;
      margin-left: auto;
      margin-right: auto;
    }
  }