/* Liia Petrova — mobile/tablet pass. Desktop remains untouched. */
@media (max-width: 900px){
  html{-webkit-text-size-adjust:100%;scroll-padding-top:64px}
  body{overscroll-behavior-y:none}
  a,button,[role="button"]{-webkit-tap-highlight-color:transparent}
  img,video,canvas{max-width:100%}

  /* Main + project headers: same visual size, better touch targets and safe-area handling. */
  .site-header,.liia-header{
    padding-top:max(18px,env(safe-area-inset-top));
    padding-left:max(20px,env(safe-area-inset-left));
    padding-right:max(20px,env(safe-area-inset-right));
  }
  .site-header .logo,.site-header .site-nav button,
  .liia-header .liia-logo,.liia-header nav a,.liia-header nav button{
    min-height:36px;display:flex;align-items:center;justify-content:center;
  }

  /* Main: mobile horizontal pieces must never trap vertical page scrolling. */
  .pieces-viewport{
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x pan-y;
    overscroll-behavior-x:contain;
  }
  .pieces-guide{user-select:none}

  /* Project index: the centered/visible project becomes sharp on touch. */
  .project-card.is-mobile-active img{filter:grayscale(.08) blur(0) contrast(1.03);transform:scale(1)}

  /* INFO: softer field and less empty delay before the copy begins. */
  #info{gap:4vh!important}
  .info-visual{height:40svh!important;min-height:300px;max-height:430px}
  .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;will-change:auto;
    -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;
  }

  /* Main contact overlay: remove desktop overlap trick on small screens. */
  .contact-panel{
    margin-left:0!important;
    padding:7vh max(20px,env(safe-area-inset-right)) max(28px,calc(20px + env(safe-area-inset-bottom))) max(20px,env(safe-area-inset-left))!important;
    background:#fff!important;
  }
  .contact-top{align-items:flex-start;gap:18px}
  .contact-close{min-height:36px;padding:0 0 0 8px;white-space:nowrap}
  .contact-links a{overflow-wrap:anywhere}

  /* Every project intro is a stable mobile viewport. */
  #intro{height:100svh!important;min-height:100svh}
  #intro video{height:100%!important;width:100%!important;object-fit:cover!important}
  .project-meta{
    left:max(20px,env(safe-area-inset-left))!important;
    bottom:max(28px,calc(18px + env(safe-area-inset-bottom)))!important;
  }
  .project-scroll{
    right:max(20px,env(safe-area-inset-right))!important;
    bottom:max(28px,calc(18px + env(safe-area-inset-bottom)))!important;
  }

  /* Project contact. */
  .liia-contact{
    padding:max(7vh,calc(34px + env(safe-area-inset-top))) max(20px,env(safe-area-inset-right)) max(24px,calc(14px + env(safe-area-inset-bottom))) max(20px,env(safe-area-inset-left))!important;
  }
  .liia-contact-top{gap:18px;align-items:flex-start}
  .liia-contact-close{min-height:36px;padding-left:8px;white-space:nowrap}
  .liia-contact-links a{overflow-wrap:anywhere}

  /* Project endings. */
  .project-end{
    padding-left:max(20px,env(safe-area-inset-left))!important;
    padding-right:max(20px,env(safe-area-inset-right))!important;
    padding-bottom:max(5vh,calc(20px + env(safe-area-inset-bottom)))!important;
  }

  /* WAKE — readable video wall on tablet/mobile rather than six tiny columns. */
  #tvwall{height:auto!important;min-height:100svh;padding:9vh max(18px,env(safe-area-inset-right)) 9vh max(18px,env(safe-area-inset-left));box-sizing:border-box}
  #tvwall .tvgrid{width:100%!important;height:auto!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-template-rows:none!important;grid-auto-rows:auto;gap:5px!important}
  #tvwall .tv{aspect-ratio:4/5;min-width:0}
  #tvModal video{max-width:92vw!important;max-height:80svh!important}
  #tvModalClose{top:max(18px,env(safe-area-inset-top))!important;right:max(20px,env(safe-area-inset-right))!important;font-size:11px!important}
  #wakeField{height:82svh!important;min-height:560px}

  /* Full-image stories: let photography determine height instead of forcing desktop 100vh. */
  .wakeSlide,.piece-slide,.concept-wrap{height:auto!important;min-height:0!important}
  .wakeSlide img,.piece-slide img,.concept-wrap img{width:100%!important;height:auto!important;object-fit:contain!important;display:block}

  /* ONTO — desktop slides become clean editorial images on small screens. */
  #seamBlend{display:none!important}
  .slide-full{height:auto!important;min-height:0!important;padding:6vh 0!important;margin-top:0!important;overflow:hidden!important}
  .slide-full>img{width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important}
  #cardsReveal{height:78svh!important;min-height:560px;margin-top:0!important;touch-action:manipulation}
  #cardsReveal .card-center{max-width:46vw!important;max-height:46svh!important}
  #cardsReveal .card-side{max-width:38vw!important;max-height:40svh!important}
  #cardsReveal .cards-hint{bottom:max(24px,calc(14px + env(safe-area-inset-bottom)))!important;font-size:12px!important;letter-spacing:.08em!important}
  #materialsStage{height:100svh!important;min-height:620px;margin-top:0!important}
  #materialsStage .concept-slide{
    position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;
    padding:9vh 8vw;background:rgba(250,250,250,.94);color:#0a0a0a;opacity:0;pointer-events:none;
    transition:opacity .45s ease;font-family:'Inter',Arial,sans-serif;text-transform:uppercase;
  }
  #materialsStage .concept-slide.show{opacity:1}
  #materialsStage .concept-slide p{font-size:clamp(11px,2.4vw,15px);line-height:1.4;margin:0 0 1.5em;letter-spacing:.015em}

  /* RAW clickable strip remains tappable without accidental horizontal overflow. */
  .pieces-wrap{overflow:hidden}
  .pieces-wrap a{touch-action:manipulation}
}

@media (max-width: 600px){
  /* Header stays compact even at 320–390px widths. */
  .site-nav,.liia-header nav{gap:10px!important}
  .site-nav button,.liia-header nav a,.liia-header nav button{font-size:9px!important;letter-spacing:.07em!important}

  .pieces-head{gap:12px!important}
  .pieces-guide{font-size:8px!important;letter-spacing:.1em!important}
  .pieces-viewport{padding-left:22vw!important;padding-right:22vw!important;scroll-padding-inline:22vw!important}
  .pieces-track{padding-right:22vw!important}
  .piece-item{flex-basis:56vw!important}
  .piece-item:nth-child(4n+1){flex-basis:49vw!important}.piece-item:nth-child(4n+2){flex-basis:60vw!important}.piece-item:nth-child(4n+3){flex-basis:46vw!important}.piece-item:nth-child(4n){flex-basis:55vw!important}

  #projects{padding-left:20px!important;padding-right:20px!important}
  .project-card{width:88vw!important}.project-card:nth-child(2n){width:76vw!important}.project-card:nth-child(3){width:90vw!important}.project-card:nth-child(4){width:80vw!important}

  .info-visual{width:88vw!important;min-height:280px}
  .info-copy p{font-size:14px!important;line-height:1.58!important}
  .info-labels,.info-contact{grid-template-columns:88px minmax(0,1fr)!important}

  #tvwall .tvgrid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px!important}
  #wakeField{height:72svh!important;min-height:500px}

  #cardsReveal{height:72svh!important;min-height:520px}
  #cardsReveal .card-center{max-width:50vw!important;max-height:42svh!important}
  #cardsReveal .card-side{max-width:40vw!important;max-height:36svh!important}

  .project-end .next{margin-top:12vh!important}
}

@media (max-width: 360px){
  .site-header,.liia-header{padding-left:14px!important;padding-right:14px!important}
  .site-nav,.liia-header nav{gap:7px!important}
  .pieces-guide{white-space:normal;max-width:74px;text-align:right}
  .contact-links,.liia-contact-links{grid-template-columns:78px minmax(0,1fr)!important;font-size:10px!important}
  .info-labels,.info-contact{grid-template-columns:78px minmax(0,1fr)!important;font-size:9px!important}
}

@media (orientation:landscape) and (max-height:520px){
  #hero,#intro{height:100dvh!important;min-height:100dvh!important}
  .project-meta{bottom:18px!important}.project-scroll{bottom:18px!important}
  .project-meta h1{font-size:clamp(34px,10vh,54px)!important}
  #pieces{padding-top:14vh!important}
  .piece-item{height:78vh!important}.piece-link{height:64vh!important}.pieces-track{min-height:78vh!important}
  .info-visual{height:70vh!important;min-height:260px}
}

/* --- Mobile QA fixes, Sept 2026 --- */
@media (max-width: 900px){
  img,video,canvas{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

  /* Home hero: separate nav from custom-jewelry label. */
  .site-nav{gap:14px!important}
  .f6{
    top:11.6%!important;
    right:max(20px,env(safe-area-inset-right))!important;
    max-width:42vw!important;
    text-align:right!important;
    line-height:1.15!important;
    font-size:10px!important;
  }

  /* Main pieces: show several objects on mobile, not only one large one. */
  .pieces-head{margin-bottom:7vh!important}
  .pieces-viewport{
    padding-left:8vw!important;
    padding-right:8vw!important;
    scroll-padding-inline:8vw!important;
  }
  .pieces-track{
    gap:6vw!important;
    min-height:42svh!important;
    padding-right:8vw!important;
  }
  .piece-item{flex-basis:34vw!important;height:37svh!important}
  .piece-item:nth-child(4n+1){flex-basis:30vw!important}
  .piece-item:nth-child(4n+2){flex-basis:36vw!important}
  .piece-item:nth-child(4n+3){flex-basis:32vw!important}
  .piece-item:nth-child(4n){flex-basis:35vw!important}
  .piece-link{height:24svh!important;min-height:170px!important}
  .piece-link img{filter:grayscale(1) blur(2.7px) contrast(1.02)!important;opacity:.58!important;transform:scale(.98)!important}
  .piece-item.is-active img,.project-card.is-mobile-active img{filter:grayscale(.08) blur(0) contrast(1.03)!important;opacity:1!important;transform:scale(1)!important}

  /* Project intros: never crop the opening animation on mobile. */
  #intro{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    background:#f3f3f1!important;
    overflow:hidden!important;
  }
  #intro video{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    background:#f3f3f1!important;
  }

  /* Keep header readable on project pages. */
  .liia-header nav{gap:12px!important}
  .liia-header a,.liia-header button{font-size:9px!important}

  /* Contact overlays: force black controls/links on iPhone. */
  .liia-contact,
  .contact-overlay{color:#0a0a0a!important}
  .liia-contact a,.liia-contact a:visited,.liia-contact a:active,
  .contact-overlay a,.contact-overlay a:visited,.contact-overlay a:active,
  .liia-contact-close,.liia-contact-close:visited,.liia-contact-close:active,
  .contact-close,.contact-close:visited,.contact-close:active{
    color:#0a0a0a!important;
    -webkit-text-fill-color:#0a0a0a!important;
  }

  /* WAKE modal must sit above header and close cleanly. */
  #tvModal{z-index:3000!important}
  #tvModalClose{z-index:3001!important;color:#fff!important;-webkit-text-fill-color:#fff!important}

  /* Remove problematic dots/canvas field on WAKE mobile. */
  #wakeCanvasWrap,#wakeField{display:none!important}

  /* ONTO final text overlay should not appear on mobile. */
  #materialsStage .concept-slide{display:none!important}
}

@media (max-width: 600px){
  .f6{top:12.2%!important;max-width:46vw!important;font-size:9px!important}
  .pieces-viewport{padding-left:7vw!important;padding-right:7vw!important;scroll-padding-inline:7vw!important}
  .pieces-track{gap:5vw!important;padding-right:7vw!important;min-height:39svh!important}
  .piece-item{flex-basis:35vw!important;height:35svh!important}
  .piece-item:nth-child(4n+1){flex-basis:31vw!important}
  .piece-item:nth-child(4n+2){flex-basis:38vw!important}
  .piece-item:nth-child(4n+3){flex-basis:33vw!important}
  .piece-item:nth-child(4n){flex-basis:36vw!important}
  .piece-link{height:22svh!important;min-height:150px!important}
}

/* --- Mobile refinement pass: white backgrounds, stable hero, complete animations --- */
@media (max-width: 900px){
  html,body,
  #hero,#pieces,#projects,#info,
  main,#intro,.slide-full,#cardsReveal,#materialsStage,
  .wakeSlide,.piece-slide,.concept-wrap,#tvwall,
  .project-end,.contact-overlay,.liia-contact{
    background:#fff!important;
  }

  /* Make the first selected piece sharp immediately and show more neighbors. */
  .pieces-head{margin-bottom:5.4vh!important}
  .pieces-viewport{padding-left:5vw!important;padding-right:5vw!important;scroll-padding-inline:5vw!important}
  .pieces-track{gap:4vw!important;padding-right:5vw!important;min-height:36svh!important}
  .piece-item{flex-basis:30vw!important;height:32svh!important}
  .piece-item:nth-child(4n+1){flex-basis:27vw!important}
  .piece-item:nth-child(4n+2){flex-basis:31vw!important}
  .piece-item:nth-child(4n+3){flex-basis:29vw!important}
  .piece-item:nth-child(4n){flex-basis:30vw!important}
  .piece-link{height:20svh!important;min-height:138px!important}
  .piece-meta{opacity:1!important;transform:none!important}

  /* Hero should stay visually stable on iPhone while toolbars change. */
  #hero{
    height:100svh!important;
    min-height:100svh!important;
    max-height:100svh!important;
    overflow:hidden!important;
  }
  .hero-photo{inset:0!important}
  .hero-photo img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:50% 50%!important;
    transform:none!important;
  }

  /* Project/mobile headers on white backgrounds should stay black. */
  .site-header,.liia-header,
  .project-meta,.project-scroll{
    color:#0a0a0a!important;
    mix-blend-mode:normal!important;
  }
  .logo,.site-nav button,
  .liia-header a,.liia-header button{color:#0a0a0a!important}

  /* Pure white intro background + complete opening animations. */
  #intro{
    background:#fff!important;
    height:100svh!important;
    min-height:100svh!important;
    max-height:100svh!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  #intro video{
    background:#fff!important;
    width:100%!important;
    height:100%!important;
    max-height:74svh!important;
    object-fit:contain!important;
    object-position:center center!important;
    display:block!important;
  }

  /* All still/animated slides should show the full composition on white. */
  .wakeSlide,.piece-slide,.concept-wrap,.slide-full{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
    background:#fff!important;
  }
  .wakeSlide img,.piece-slide img,.concept-wrap img,.slide-full>img{
    width:auto!important;
    height:auto!important;
    max-width:100%!important;
    max-height:76svh!important;
    object-fit:contain!important;
    margin:0 auto!important;
    display:block!important;
  }

  /* Remove beige/yellow transition sources on ONTO mobile. */
  .slide-full[style],#cardsReveal[style],#materialsStage[style]{
    background:#fff!important;
    background-color:#fff!important;
    background-image:none!important;
  }
  #materialsStage video,#materialsStage img{background:#fff!important;object-fit:contain!important}
  #materialsStage .materials-grain{display:none!important}

  /* Keep the intro labels placed lower and readable. */
  .project-meta{bottom:max(26px,calc(18px + env(safe-area-inset-bottom)))!important}
  .project-scroll{bottom:max(26px,calc(18px + env(safe-area-inset-bottom)))!important}
}

@media (max-width: 600px){
  .pieces-viewport{padding-left:4vw!important;padding-right:4vw!important;scroll-padding-inline:4vw!important}
  .pieces-track{gap:3.5vw!important;padding-right:4vw!important;min-height:34svh!important}
  .piece-item{flex-basis:31vw!important;height:30svh!important}
  .piece-item:nth-child(4n+1){flex-basis:28vw!important}
  .piece-item:nth-child(4n+2){flex-basis:32vw!important}
  .piece-item:nth-child(4n+3){flex-basis:30vw!important}
  .piece-item:nth-child(4n){flex-basis:31vw!important}
  .piece-link{height:18svh!important;min-height:122px!important}
  #intro video{max-height:70svh!important}
  .wakeSlide img,.piece-slide img,.concept-wrap img,.slide-full>img{max-height:72svh!important}
}