:root{--ink:#111;--yellow:#f9c51b;--coral:#ef4d43;--teal:#3bb3c0;--cream:#fff2d1}
*{box-sizing:border-box}
html{background:var(--ink);scroll-behavior:smooth}
body{margin:0;background:var(--cream);font-family:system-ui,sans-serif}
.skip-link{position:fixed;top:10px;left:10px;z-index:100;padding:10px 15px;border:3px solid var(--ink);background:var(--yellow);color:var(--ink);font-weight:900;transform:translateY(-160%)}
.skip-link:focus{transform:none}
.art-experience{width:100%;overflow:hidden}
.desktop-art{position:relative;width:100%;max-width:1800px;margin:0 auto;background:var(--cream)}
.desktop-art>img{display:block;width:100%;height:auto}
.hotspot{position:absolute;z-index:4;display:block;border-radius:8px;text-decoration:none}
.hotspot span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.hotspot:hover{background:rgba(255,255,255,.11);outline:4px dashed var(--yellow);outline-offset:-5px}
.hotspot:focus-visible{background:rgba(255,255,255,.16);outline:5px solid white;outline-offset:-6px;box-shadow:0 0 0 9px var(--ink)}
.home{left:35.3%;top:1.1%;width:5.1%;height:5.4%}
.find{left:42.1%;top:1.1%;width:8%;height:5.4%}
.festivals{left:51.2%;top:1.1%;width:7.3%;height:5.4%}
.owners{left:59.7%;top:1.1%;width:8.4%;height:5.4%}
.about{left:69.2%;top:1.1%;width:5.1%;height:5.4%}
.app{left:75.3%;top:1.1%;width:13.7%;height:5.4%}
.find-near{left:3.9%;top:38.1%;width:17.8%;height:6.9%}
.browse{left:22.5%;top:38.1%;width:10.5%;height:6.9%}
.more-trucks{left:15%;top:67.2%;width:19%;height:4.5%}
.live-map{left:36.8%;top:48.4%;width:29.5%;height:25%}
.festival-lineup{left:17.7%;top:88.2%;width:18%;height:5.2%}
.join{left:55.5%;top:88%;width:13.9%;height:5.5%}
.mobile-art{display:none}
.prototype-tools{position:fixed;right:13px;bottom:13px;z-index:20;display:flex;gap:6px;padding:6px;border:3px solid var(--ink);border-radius:999px;background:var(--cream);box-shadow:4px 4px 0 var(--ink)}
.prototype-tools a{padding:6px 10px;border:2px solid var(--ink);border-radius:999px;background:var(--teal);color:var(--ink);font-size:11px;font-weight:900;text-decoration:none}
.prototype-tools a:first-child{background:var(--yellow)}

@media(max-width:700px){
  body{background:var(--cream)}
  .desktop-art{display:none}
  .mobile-art{display:block;padding-top:56px;background:var(--cream)}
  .mobile-nav{position:fixed;top:0;right:0;left:0;z-index:30;display:flex;justify-content:center;gap:7px;height:56px;padding:8px;border-bottom:4px solid var(--ink);background:var(--yellow)}
  .mobile-nav a{display:flex;align-items:center;padding:4px 9px;border:3px solid var(--ink);background:var(--cream);color:var(--ink);font-size:10px;font-weight:1000;text-decoration:none;box-shadow:3px 3px 0 var(--ink);transform:rotate(-1deg)}
  .mobile-nav a:nth-child(2){background:var(--teal);transform:rotate(1deg)}
  .mobile-nav a:nth-child(3){background:var(--coral);color:white}
  .art-crop{position:relative;display:block;width:100%;border-bottom:5px solid var(--ink);background-image:url("image-mockups/fudtruk-mascot-world.png");background-repeat:no-repeat;color:transparent;text-decoration:none}
  .art-crop:focus-visible{outline:6px solid var(--yellow);outline-offset:-8px}
  .art-crop span{position:absolute;width:1px;height:1px;overflow:hidden}
  .crop-hero-copy{height:70vw;background-size:200vw 133.333vw;background-position:0 0}
  .crop-mascot{height:70vw;background-size:200vw 133.333vw;background-position:-100vw 0}
  .crop-rolling{height:55vw;background-size:256vw 170.667vw;background-position:0 -75vw}
  .crop-map{height:55vw;background-size:256vw 170.667vw;background-position:-83.333vw -75vw}
  .crop-how{height:55vw;background-size:256vw 170.667vw;background-position:-158.333vw -75vw}
  .crop-festival{height:55vw;background-size:256vw 170.667vw;background-position:0 -115vw}
  .crop-owner{height:55vw;background-size:256vw 170.667vw;background-position:-125vw -115vw}
  .prototype-tools{right:8px;bottom:8px;transform:scale(.86);transform-origin:right bottom}
}

@media(min-width:1801px){.desktop-art{border-inline:5px solid var(--ink)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}