/* Liia Petrova — final site system. Keeps the existing hero and project art direction intact. */
html,body{max-width:100%;overflow-x:hidden}
.site-header{transition:transform .34s cubic-bezier(.22,.61,.36,1),opacity .24s ease;will-change:transform,opacity}
.site-header.is-hidden{transform:translateY(-130%);opacity:0}
.site-header:focus-within{transform:none;opacity:1}
.logo,.site-nav button,.scroll-hint,.pieces-arrows button,.contact-close{cursor:none}
button:focus-visible,a:focus-visible,[role="button"]:focus-visible{outline:1px solid currentColor;outline-offset:5px}
#projects .projects-head h2,#pieces .section-kicker{max-width:12ch}
.project-card{will-change:transform}
.project-image{border:0}
.info-copy{align-self:center}
.info-labels{display:grid;grid-template-columns:150px 1fr;gap:9px 28px;margin:36px 0 0;font-size:12px;line-height:1.45;text-transform:uppercase;letter-spacing:.055em}
.info-labels .label{opacity:.55}
.info-labels .value{max-width:420px}
.contact-overlay.custom-mode .contact-panel{background:#fff}
.contact-overlay.custom-mode .contact-top h2::after{content:" / CUSTOM";font-size:.22em;letter-spacing:.08em;vertical-align:top;margin-left:.7em}
@media (max-width:900px){
  .logo,.site-nav button,.scroll-hint,.pieces-arrows button,.contact-close{cursor:auto}
}
@media (max-width:767px){
  :root{--pad:20px}
  .site-header{grid-template-columns:auto 1fr;padding:18px 20px 0;mix-blend-mode:difference}
  .site-nav{grid-column:2;justify-self:end;gap:13px}
  .site-nav button{font-size:9px;letter-spacing:.085em}
  #pieces{height:auto;min-height:100svh;padding:9vh 0 5vh;display:flex;flex-direction:column;justify-content:center}
  .pieces-head{padding:0 20px;margin:0 0 10vh;align-items:flex-end}
  .section-kicker{font-size:clamp(38px,11vw,54px);line-height:.92;max-width:8ch}
  .scroll-hint{font-size:10px}
  .pieces-viewport{width:100%;padding:0 24vw 8px;scroll-snap-type:x proximity;scroll-padding-inline:24vw;overscroll-behavior-x:contain}
  .pieces-track{gap:12vw;min-height:60svh;padding-right:24vw;align-items:center}
  .piece-item{height:58svh;flex-basis:52vw;scroll-snap-align:center;scroll-snap-stop:normal}
  .piece-item:nth-child(4n+1){flex-basis:46vw}.piece-item:nth-child(4n+2){flex-basis:58vw}.piece-item:nth-child(4n+3){flex-basis:43vw}.piece-item:nth-child(4n){flex-basis:53vw}
  .piece-link{height:48svh}
  .piece-link img{max-width:100%;max-height:100%;filter:grayscale(1) blur(4px) contrast(1.02);opacity:.5;transform:scale(.96)}
  .piece-item.is-active img{filter:grayscale(.08) blur(0) contrast(1.03);opacity:1;transform:scale(1)}
  .piece-meta{font-size:9px;margin-top:12px;opacity:0}
  .piece-item.is-active .piece-meta{opacity:1}
  .pieces-foot{padding:1vh 20px 0;grid-template-columns:auto 1fr;gap:18px}
  .pieces-arrows{display:none}
  #projects{padding:12vh 20px 14vh}
  .projects-head{margin-bottom:10vh;align-items:flex-end}
  .projects-head h2{font-size:clamp(38px,11vw,54px);line-height:.92;max-width:8ch}
  .projects-head small{font-size:8px}
  .project-grid{display:flex;flex-direction:column;gap:12vh;width:100%}
  .project-card{transform:none!important;margin:0!important;width:82vw;align-self:flex-start}
  .project-card:nth-child(2n){align-self:flex-end;width:72vw}
  .project-card:nth-child(3){width:88vw}
  .project-card:nth-child(4){width:76vw}
  .project-image{aspect-ratio:4/5}
  .project-image img{filter:grayscale(1) blur(2px) contrast(1.02)}
  .project-card:focus img,.project-card:active img{filter:grayscale(.08) blur(0)}
  .project-caption{font-size:12px;margin-top:12px;align-items:flex-start}
  .project-caption small{font-size:8px}
  #info{display:flex;flex-direction:column;min-height:100svh;padding:11vh 20px 9vh;gap:7vh;align-items:stretch}
  .info-visual{height:52svh;width:82vw;align-self:flex-end}
  .info-copy h2{font-size:clamp(46px,14vw,72px);margin-bottom:28px}
  .info-copy p{font-size:14px;line-height:1.55}
  .info-labels{grid-template-columns:95px 1fr;gap:8px 18px;font-size:10px;margin-top:30px}
  .info-contact{grid-template-columns:95px 1fr;gap:9px 18px;margin-top:36px;font-size:10px;overflow-wrap:anywhere}
  .contact-overlay{display:block;padding:0}
  .contact-panel{min-height:100svh;padding:7vh 20px 4vh}
  .contact-top h2{font-size:clamp(48px,16vw,78px)}
  .contact-links{grid-template-columns:92px 1fr;gap:12px 14px;font-size:11px;overflow-wrap:anywhere}
  .site-footer{padding:18px 20px 24px;font-size:8px;gap:10px}
}
@media (max-width:430px){
  .f2{left:39%;max-width:59vw}
  .project-caption{display:grid;grid-template-columns:1fr auto}
}

/* Final mobile polish: keep INFO portrait as a soft field, not a hard image card. */
@media (max-width:767px){
  .info-visual{overflow:hidden;background:#fff}
  .info-visual img{
    width:112%!important;height:112%!important;object-fit:cover!important;object-position:50% 46%!important;
    filter:grayscale(1) blur(13px) contrast(1.02)!important;opacity:.86!important;
    -webkit-mask-image:radial-gradient(ellipse 70% 72% at 50% 50%,#000 28%,rgba(0,0,0,.9) 48%,rgba(0,0,0,.58) 64%,rgba(0,0,0,.22) 76%,transparent 88%)!important;
    mask-image:radial-gradient(ellipse 70% 72% at 50% 50%,#000 28%,rgba(0,0,0,.9) 48%,rgba(0,0,0,.58) 64%,rgba(0,0,0,.22) 76%,transparent 88%)!important;
  }
}