/* Mobile/tablet layout. Desktop artwork stays on its original 1440 × 800 canvas. */
.map-scene,.contact-scene{display:contents}
.mobile-top{display:none}
@media(max-width:600px), (max-width:1024px) and (pointer:coarse){
  :root{--gutter:24px;--header-space:224px}
  html{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto;scroll-padding-top:20px}
  body{display:block;height:auto;min-height:100svh;overflow:visible;-webkit-text-size-adjust:100%}
  .stage{position:relative;inset:auto;margin:0;width:100%;height:auto;min-height:100svh;transform:none!important;overflow:hidden}
  .screen{position:relative;inset:auto;min-height:100svh;padding:calc(var(--header-space) + env(safe-area-inset-top)) var(--gutter) calc(40px + env(safe-area-inset-bottom));background-position:right top;background-size:1440px 800px;overflow:hidden;isolation:isolate}
  .screen[hidden]{display:none}
  .paper-fill{inset:12px 10px;width:auto;height:auto;z-index:-1;background:linear-gradient(135deg,#454441f5,#343331f8);clip-path:polygon(1% 0,12% .5%,25% 0,45% .3%,68% 0,88% .4%,99% 0,100% 15%,99.5% 35%,100% 60%,99.4% 82%,100% 99%,83% 99.5%,66% 99%,46% 100%,23% 99.4%,1% 100%,0 80%,.6% 55%,0 30%)}
  .header,.stage[data-page=home] .header{left:var(--gutter);right:var(--gutter);top:calc(20px + env(safe-area-inset-top));gap:24px;align-items:center;justify-content:space-between;max-width:600px;margin-inline:auto}
  .sticker,.stage[data-page=home] .sticker{flex:0 0 126px;width:126px;height:82.6px;border-radius:13px;background-size:1008px 560px;background-position:-68.6px -56.7px}
  .sticker:hover{transform:none}
  .stage[data-page=home] .signature-window{left:6.3px;top:34.3px;width:113.4px;height:39.9px}
  .signature{width:42px;height:71.4px;left:35.7px;top:-16.1px}
  .header nav,.stage[data-page=home] .header nav{gap:0;padding:0}
  nav a,.stage[data-page=home] nav a{display:flex;align-items:center;width:max-content;height:auto;min-height:44px;font-size:14px;line-height:20px;letter-spacing:-.35px}
  nav a[aria-current=page]::before{left:-13px;top:19px;width:5px;height:5px}
  a:focus-visible,button:focus-visible{outline-offset:3px}
  .home{padding:0;height:100svh;min-height:600px;background:#0c0c12}
  .home video{position:absolute;inset:0;object-fit:cover;object-position:43% center;transform:scale(1.1);transform-origin:center top}
  .hero-shade{background:linear-gradient(180deg,#08081099 0,transparent 43%,#08081099 100%)}
  .hero-name{left:var(--gutter);bottom:calc(36px + env(safe-area-inset-bottom));width:min(76vw,418px);height:auto;aspect-ratio:418 / 64}
  .hero-name img{width:102.8708%;height:auto;left:-1.6746%;top:-64.84375%}
  .video-control{right:var(--gutter);bottom:calc(108px + env(safe-area-inset-bottom));width:44px;height:44px}

  .about{display:flex;flex-direction:column;align-items:center}
  .character-picker{position:relative;inset:auto;order:1;width:100%;max-width:360px;gap:16px;justify-content:center}
  .character-option{width:calc(50% - 8px);max-width:160px;font-size:14px;letter-spacing:0;padding-bottom:12px}
  .mini-character{width:120px;height:120px;margin:auto}
  .character{position:relative;inset:auto;order:2;width:min(100%,400px);height:auto;aspect-ratio:1;margin:24px auto 0}
  .rotation-control{position:relative;inset:auto;order:3;min-height:44px;margin:8px 0 28px;letter-spacing:0;font-size:13px;padding:8px 12px}
  .bio{position:relative;inset:auto;order:4;width:100%;max-width:560px}
  .bio h2{font-size:18px;line-height:1.4;margin:0 0 18px;color:#c3c1ba;letter-spacing:.5px}
  .bio p{font-size:17px;line-height:1.65;max-width:none}

  .work{display:flex;flex-direction:column;align-items:center}
  .radar{position:relative;left:auto!important;top:auto!important;flex:none;width:101.25px;height:100.5px;background-size:1080px 600px;background-position:-460.5px -48.75px;margin:0 0 28px}
  .clients{position:relative;inset:auto;width:100%;max-width:600px;columns:auto;display:block;margin:0;padding:0}
  .clients li{font-size:16px;line-height:1.5;margin:0 0 17px;gap:12px;break-before:auto!important}
  .clients li::before{font-size:18px;color:#e4453b}
  .map-scene{display:block;position:relative;width:calc(100% + 12px);max-width:600px;height:330px;margin:24px -6px 0;background:url('assets/map-clean.png') right center / 880px 489px;box-shadow:0 12px 30px #0004;overflow:hidden;border:1px solid #ffffff18}
  .map-label{font-size:11px!important;line-height:16px;min-width:0;white-space:normal;max-width:135px;padding:4px 5px;background:#0c1119bb}
  .map-label::before{content:'';display:inline-block;width:5px;height:5px;background:#fff;margin-right:6px;vertical-align:middle}
  .m1{left:6%;top:12%}.m2{left:68%;top:8%}.m3{left:45%;top:39%}.m4{left:7%;top:66%}.m5{left:66%;top:67%}.m6{left:48%;top:86%}

  .photos{display:flex;flex-direction:column;align-items:center;padding-inline:16px}
  .gallery{position:relative;inset:auto;order:1;width:100%;max-width:620px;height:auto;display:grid;grid-template-columns:30px minmax(0,1fr) 30px;align-items:center;gap:10px;touch-action:pan-y}
  .photo-main{position:relative;inset:auto;width:100%;height:clamp(290px,48svh,500px);box-shadow:0 12px 28px #0004}
  .photo-prev,.photo-next{position:relative;inset:auto;width:30px;height:110px;opacity:.5}
  .gallery img,.gallery video{display:block}
  .gallery-controls{position:relative;inset:auto;order:2;margin:24px auto 0;gap:48px;justify-content:center}
  .gallery-controls button,.gallery-controls button:first-child,.gallery-controls button:last-child{width:92px;height:64px;min-height:44px;padding:4px}
  .photo-count{position:relative;inset:auto;order:3;display:block;margin:12px 0 26px;font-size:13px}
  .disk{position:relative;inset:auto;order:4;width:auto;max-width:100%;margin:0 auto;padding:14px 8px;font-size:clamp(27px,7vw,40px);line-height:1.2;letter-spacing:-1px}
  .disk span{font-size:22px;margin-top:0}

  .contacts{display:flex;flex-direction:column;align-items:center;background-image:url('assets/about-background.png')}
  .phone-number{position:relative;inset:auto;width:100%;font-size:clamp(27px,7.8vw,46px);line-height:1.3;letter-spacing:-1px;white-space:nowrap;margin:28px 0 32px}
  .socials{position:relative;inset:auto;width:100%;max-width:480px;gap:8px;justify-content:space-between;margin:0 0 38px}
  .socials a,.socials button{width:44px;height:48px;flex:0 0 44px}
  .socials svg{width:34px;height:34px}
  .socials .email-icon{font-size:46px}
  .contact-scene{display:block;position:relative;width:calc(100% + 12px);max-width:480px;height:430px;margin:0 -6px;background:url('assets/contacts-clean.png') right center / 900px 500px;overflow:hidden;box-shadow:0 12px 30px #0004}
  .contact-hotspot{min-height:44px;font-size:12px;padding:8px;background:#1715199e;width:auto}
  .tg{left:9%;top:10%}.mail{left:auto;right:4%;top:27%}.sound{left:3%;top:52%;font-size:11px}.insta{left:auto;right:3%;top:83%;font-size:11px}
  .toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));width:max-content;max-width:calc(100% - 32px);font-size:15px;white-space:normal;text-align:center;z-index:30}
  .mobile-top:not([hidden]){display:flex;position:fixed;right:16px;bottom:calc(14px + env(safe-area-inset-bottom));align-items:center;gap:7px;min-height:44px;border:1px solid #ffffff40;background:#171615ed;padding:8px 14px;font-size:13px;z-index:15;box-shadow:0 4px 16px #0006}
}
@media(min-width:601px) and (max-width:1024px) and (pointer:coarse){
  :root{--gutter:40px}
  .clients{columns:2;column-gap:32px}.clients li:nth-child(11){break-before:column!important}
  .bio{padding-bottom:20px}
  .gallery{grid-template-columns:60px minmax(0,1fr) 60px;gap:20px}
  .photo-prev,.photo-next{width:60px;height:140px}
}
@media(max-width:360px) and (pointer:coarse), (max-width:360px){
  :root{--gutter:18px}
  .header,.stage[data-page=home] .header{gap:16px}
  nav a,.stage[data-page=home] nav a{font-size:13px}
  .mini-character{width:108px;height:108px}
  .socials{gap:4px}
}
@media(max-width:1024px) and (pointer:coarse) and (orientation:landscape){
  .home{min-height:480px}
  .home video{object-position:center;transform-origin:top left}
}