.skip-link{position:fixed;top:12px;left:12px;z-index:100;padding:10px 14px;background:var(--ink);color:var(--paper);font:500 11px 'DM Mono',monospace;text-transform:uppercase;text-decoration:none;transform:translateY(-160%);transition:transform .2s ease}
.skip-link:focus{transform:translateY(0)}
a,button{transition:color .2s ease,background-color .2s ease,border-color .2s ease,opacity .2s ease}
a:focus-visible,button:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
.nav>a:not(.nav-contact):hover,.site-footer>a:hover{color:var(--orange)}
.nav-contact:hover{background:var(--ink);color:var(--paper)}
.filter{position:relative;min-height:28px}
.filter:after{content:'';position:absolute;left:0;right:0;bottom:-18px;height:2px;background:var(--orange);transform:scaleX(0);transition:transform .2s ease}
.filter.active:after{transform:scaleX(1)}
.project-card{isolation:isolate}
a.project-card{color:var(--ink);text-decoration:none;cursor:pointer}
.project-visual:before{transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease}
.project-card:hover .project-visual:before{transform:scale(1.04)}
.project-card:hover .visual-b:before{transform:rotate(45deg) scale(1.04)}
.project-card:hover .visual-c:before{transform:rotate(-16deg) scale(1.04)}
.text-link:hover{border-color:var(--lime);color:var(--lime)}

@media(max-width:700px){
  .site-header{position:relative;z-index:20}
  .menu-toggle{position:relative;z-index:2;padding:10px;margin-right:-10px;cursor:pointer}
  .menu-toggle span{transition:transform .25s ease}
  .menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
  .menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}
  .nav.mobile-open{display:flex;position:absolute;top:69px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:18px 6vw 24px;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 18px 35px #17231d12}
  .nav.mobile-open a{padding:15px 0;font-size:12px}
  .nav.mobile-open .nav-contact{margin-top:8px;padding:13px 16px;text-align:center}
  .hero-kicker{white-space:nowrap}
  .hero-bottom{max-width:72vw}
  .project-card:hover{transform:none}
}

@media(max-width:390px){h1{font-size:17vw}.hero-kicker .kicker-line{display:none}.filter-bar{gap:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}