:root{--ink:#15130f;--paper:#d7d2c8}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--paper);font-family:Arial,Helvetica,sans-serif}
.site-nav{position:fixed;z-index:50;left:50%;top:max(26px,env(safe-area-inset-top));transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:clamp(20px,3vw,48px);width:min(94%,980px);padding:0 16px;background:transparent;border:0;box-shadow:none}
.nav-link{appearance:none;border:0;background:none;padding:5px 0;color:var(--ink);text-decoration:none;text-transform:uppercase;letter-spacing:.18em;font-size:clamp(.69rem,1vw,.82rem);line-height:1;cursor:pointer;white-space:nowrap;position:relative;text-shadow:0 1px 10px rgba(238,233,224,.32)}
.nav-link::after{content:"";position:absolute;left:0;right:.18em;bottom:-7px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s ease}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1);transform-origin:left}
.view-stack{position:fixed;inset:0;width:100%;height:100%;overflow:hidden;background:var(--paper)}
.site-view{position:absolute;inset:0;width:100%;height:100%;border:0;display:none;background:var(--paper);overflow:auto;-webkit-overflow-scrolling:touch}
.site-view.active{display:block;z-index:1;animation:viewFade .55s ease both}
@keyframes viewFade{from{opacity:0}to{opacity:1}}
.sound-toggle{position:fixed;z-index:70;right:max(22px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));width:74px;height:64px;padding:0;border:0;background:transparent!important;box-shadow:none!important;cursor:pointer;filter:drop-shadow(0 7px 10px rgba(26,20,14,.18));transition:transform .25s ease,opacity .25s ease}
.sound-toggle:hover{transform:scale(1.06)}
.sound-toggle img{width:100%;height:100%;object-fit:contain;display:block;background:transparent}
.sound-toggle.muted{opacity:.52;filter:grayscale(.9) drop-shadow(0 7px 10px rgba(26,20,14,.12))}
.sound-toggle.playing{animation:radioPulse 2.8s ease-in-out infinite}
.status-dot{display:none}
@keyframes radioPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@media(max-width:700px){.site-nav{top:18px;width:100%;gap:15px;padding:0 12px;overflow-x:auto;justify-content:flex-start;scrollbar-width:none}.site-nav::-webkit-scrollbar{display:none}.nav-link{font-size:.64rem;letter-spacing:.14em}.sound-toggle{width:62px;height:54px;right:12px;bottom:12px}}

/* v9 — prevent the radio/icon flash before the asset is decoded */
.sound-toggle{visibility:hidden;opacity:0}
html.ui-ready .sound-toggle{visibility:visible}
html.ui-ready .sound-toggle.playing{opacity:1}
html.ui-ready .sound-toggle.muted{opacity:.52}

/* Music view: keep navigation out of the artwork until the visitor approaches it. */
.site-nav{transition:opacity .38s ease,transform .38s cubic-bezier(.22,.7,.2,1),background-color .38s ease;}
body.music-view-active .site-nav{top:0;padding:26px 16px 24px;opacity:0;transform:translateX(-50%) translateY(-10px);background:linear-gradient(to bottom,rgba(20,18,15,.22),transparent);}
body.music-view-active .site-nav:hover,
body.music-view-active .site-nav:focus-within{opacity:1;transform:translateX(-50%) translateY(0);}
@media (hover:none),(max-width:700px){body.music-view-active .site-nav{top:18px;padding:0 12px;opacity:1;transform:translateX(-50%);background:transparent;}}

/* v10.1 — brighter navigation only inside the Music view */
body.music-view-active .nav-link{
  color:#f6f1e8;
  text-shadow:0 1px 12px rgba(0,0,0,.48),0 0 22px rgba(255,248,236,.18);
}
body.music-view-active .site-nav:hover,
body.music-view-active .site-nav:focus-within{
  background:linear-gradient(to bottom,rgba(18,16,14,.34),rgba(18,16,14,.08) 72%,transparent);
}
@media (hover:none),(max-width:700px){
  body.music-view-active .nav-link{
    color:#f6f1e8;
    text-shadow:0 1px 10px rgba(0,0,0,.48);
  }
}