/* Readable labels stay above the paint. No animation dependency or delayed clicks. */
.pi-nav, .pi-nav.scrolled { background:#080808; border-bottom:1px solid #363636; box-shadow:none; padding:14px 28px; gap:20px; }
.pi-nav-links { gap:6px; align-items:center; }
.pi-nav-links a, .top-nav a {
 --spray:#ed006a; --spray-motion:pi-spray-sweep;
 position:relative; isolation:isolate; display:inline-flex; align-items:center; justify-content:center;
 box-sizing:border-box; min-height:46px; padding:12px 15px; overflow:hidden;
 color:#fff; background:#080808; border:1px solid transparent; border-radius:0;
 font-family:Oswald,Impact,'Arial Narrow',sans-serif; font-size:18px; font-weight:700; line-height:1.3; letter-spacing:.09em;
 text-transform:uppercase; text-decoration:none; white-space:nowrap; text-shadow:none;
 box-shadow:none; transition:border-color .12s ease, background-color .12s ease;
}
.pi-nav-links a[href="/"], .top-nav a[href="/"] { --spray:#ed006a; --spray-motion:pi-spray-sweep; }
.pi-nav-links a[href*="#gallery"], .top-nav a[href*="#gallery"] { --spray:#ed006a; --spray-motion:pi-spray-burst; }
.pi-nav-links a[href*="current-projects"], .top-nav a[href*="current-projects"] { --spray:#ed006a; --spray-motion:pi-spray-rise; }
.pi-nav-links a[href*="artist.html"], .top-nav a[href*="artist.html"] { --spray:#ed006a; --spray-motion:pi-spray-slash; }
.pi-nav-links a[href*="contact"], .top-nav a[href*="contact"] { --spray:#ed006a; --spray-motion:pi-spray-double; }
.pi-nav-links a::before, .top-nav a::before {
 content:""; position:absolute; z-index:-1; pointer-events:none; inset:4px -4px;
 background:var(--spray); opacity:0; transform-origin:left center;
 clip-path:polygon(0 20%,7% 14%,9% 23%,20% 8%,23% 17%,36% 10%,40% 19%,54% 9%,57% 17%,71% 8%,74% 22%,88% 11%,100% 20%,98% 76%,91% 86%,85% 79%,71% 94%,67% 84%,52% 92%,48% 82%,35% 95%,31% 83%,17% 92%,14% 80%,2% 87%);
}
.pi-nav-links a::after, .top-nav a::after {
 content:""; position:absolute; z-index:-1; pointer-events:none; inset:0; opacity:0;
 background:radial-gradient(circle at 7% 17%,var(--spray) 1px,transparent 2px),radial-gradient(circle at 19% 79%,var(--spray) 1px,transparent 2px),radial-gradient(circle at 79% 12%,var(--spray) 1.5px,transparent 2.5px),radial-gradient(circle at 92% 68%,var(--spray) 1px,transparent 2px),radial-gradient(circle at 57% 89%,var(--spray) 1px,transparent 2px);
}
.pi-nav-links a:is(:hover,:focus-visible), .top-nav a:is(:hover,:focus-visible) { color:#fff; background:#080808; border-color:transparent; box-shadow:inset 0 -3px #fff; }
.pi-nav-links a:is(:hover,:focus-visible)::before, .top-nav a:is(:hover,:focus-visible)::before { opacity:.65; animation:var(--spray-motion) .3s cubic-bezier(.2,.8,.3,1) both; }
.pi-nav-links a:is(:hover,:focus-visible)::after, .top-nav a:is(:hover,:focus-visible)::after { opacity:.8; animation:pi-spray-speckle .28s ease-out both; }
.pi-nav-links a:focus-visible, .top-nav a:focus-visible, .pi-menu-toggle:focus-visible { outline:3px solid #fff; outline-offset:4px; }
.pi-menu-toggle { min-height:46px; padding:10px 14px; border:2px solid #fff; border-radius:0; color:#fff; background:#080808; font-family:Oswald,Impact,sans-serif; font-size:18px; letter-spacing:.08em; font-weight:700; box-shadow:4px 4px 0 #ed006a; }
@keyframes pi-spray-sweep { from { clip-path:inset(0 100% 0 0); transform:rotate(-5deg); } to { transform:rotate(-2deg); } }
@keyframes pi-spray-burst { from { transform:scale(.12); opacity:0; } 65% { transform:scale(1.08); } to { transform:scale(1); opacity:.65; } }
@keyframes pi-spray-rise { from { transform:translateY(100%) skewX(-12deg); } to { transform:translateY(0) skewX(-4deg); } }
@keyframes pi-spray-slash { from { clip-path:inset(0 0 0 100%); transform:rotate(-12deg); } to { transform:rotate(-4deg); } }
@keyframes pi-spray-double { 0% { clip-path:inset(0 100% 48% 0); } 48% { clip-path:inset(0 0 48% 0); } 100% { clip-path:inset(0); } }
@keyframes pi-spray-speckle { from { transform:scale(.75); opacity:0; } to { transform:scale(1); opacity:.8; } }
@media (max-width:1100px) {
 .pi-nav { padding:12px 20px; }
 .pi-menu-toggle { display:block; width:auto; flex:0 0 auto; margin:0; }
 .pi-nav-links { display:none; position:absolute; top:100%; left:0; right:0; margin:0; padding:14px 20px 20px; background:#080808; border-bottom:1px solid #363636; max-height:calc(100dvh - 125px); overflow-y:auto; align-items:stretch; }
 .pi-nav.menu-open .pi-nav-links { display:flex; flex-direction:column; gap:10px; }
 .pi-nav-links a { display:flex; justify-content:flex-start; width:100%; min-height:50px; padding:14px 18px; font-size:20px; }
 .pi-nav-logo { min-width:0; }
 .pi-nav-logo span { font-size:14px; letter-spacing:.06em; }
}
@media (max-width:480px) { .pi-nav { gap:10px; padding:12px 16px; } .top-nav { gap:8px; } .top-nav a { font-size:17px; padding:11px 12px; } }
@media (prefers-reduced-motion:reduce) {
 .pi-nav, .pi-nav-links a, .top-nav a { transition:none; }
 .pi-nav-links a::before, .pi-nav-links a::after, .top-nav a::before, .top-nav a::after { animation:none !important; }
}

/* Hard-edged paint registration marks; no pastel pills or glow. */
.pi-nav { border-bottom:2px solid #343434; }
.pi-nav-links a { border-right:1px solid #383838; }
.pi-nav-links li:last-child a { border-right:0; }
.pi-nav-links a::after, .top-nav a::after { background:radial-gradient(ellipse at 4% 23%,var(--spray) 2px,transparent 3px),radial-gradient(circle at 94% 77%,var(--spray) 2px,transparent 3px),radial-gradient(circle at 73% 6%,#fff 1px,transparent 2px),radial-gradient(circle at 16% 92%,var(--spray) 2px,transparent 3px),repeating-linear-gradient(174deg,transparent 0 13px,#080808 14px 15px,transparent 16px 29px); }
@media (max-width:1100px) { .pi-nav-links a { border-right:0; border-bottom:1px solid #3b3b3b; } .pi-nav.menu-open .pi-nav-links { gap:3px; } }
