/* One top bar for every page: same height, padding, type and burger position everywhere.
   Loaded by index, shop, about and selling. Change sizes here and all pages follow. */
:root{--bar-h:80px;--bar-pl:32px;--bar-pr:100px}
header.bar,.hdtop{position:fixed!important;top:0!important;left:0!important;right:0!important;height:var(--bar-h)!important;box-sizing:border-box!important;margin:0!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;padding:0 max(var(--bar-pr),calc(env(safe-area-inset-right,0px) + var(--bar-pr))) 0 max(var(--bar-pl),env(safe-area-inset-left,0px))!important}
header.bar>.in{max-width:none!important;width:100%!important;margin:0!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:space-between!important}
header.bar .home,.hdtop .hdw{font-family:inherit!important;font-weight:800!important;font-size:15px!important;line-height:1.2!important;letter-spacing:.08em!important;text-transform:uppercase;white-space:nowrap;margin:0!important;padding:6px 0!important;height:auto!important;display:inline-flex!important;align-items:center}
header.bar .home .lbl{text-transform:uppercase;letter-spacing:.08em}
.pills,.hdsec,.hdtop nav{display:flex!important;align-items:center!important;gap:clamp(14px,2.2vw,28px)!important;margin:0 0 0 auto!important;flex-wrap:nowrap!important}
.pills a,.hdsec a,.hdtop nav a{font-family:inherit!important;font-weight:700!important;font-size:15px!important;line-height:1.2!important;letter-spacing:0!important;text-transform:none!important;padding:6px 0!important;margin:0!important;height:auto!important;display:inline-block!important;white-space:nowrap}
.pills a::after,.hdsec a::after,.hdtop nav a::after{bottom:0!important}
.hdb,.burger{position:fixed!important;top:max(16px,env(safe-area-inset-top,0px))!important;right:max(32px,env(safe-area-inset-right,0px))!important;width:48px!important;height:48px!important;gap:5px!important}
.hdb span,.burger span{width:20px!important}
.hdb[aria-expanded=true] span:nth-child(1),.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)!important}
.hdb[aria-expanded=true] span:nth-child(3),.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)!important}
@media(max-width:700px){:root{--bar-pl:20px;--bar-pr:84px}.pills,.hdsec,.hdtop nav{display:none!important}.hdb,.burger{right:max(20px,env(safe-area-inset-right,0px))!important}}

/* ---- Logo arrow (same on every page): arrow fades in, label slides right to make room ---- */
header.bar .home,.hdtop .hdw{position:relative!important}
header.bar .home .arr,.hdtop .hdw .arr{position:absolute!important;left:0!important;top:50%!important;transform:translateY(-50%) translateX(-6px)!important;opacity:0;transition:opacity .45s ease,transform .45s cubic-bezier(.22,.61,.36,1)!important}
header.bar .home .lbl,.hdtop .hdw .lbl{display:inline-block;transition:transform .45s cubic-bezier(.22,.61,.36,1)!important}
header.bar .home:hover .lbl,header.bar .home:focus-visible .lbl,.hdtop .hdw:hover .lbl,.hdtop .hdw:focus-visible .lbl{transform:translateX(1.5em)}
header.bar .home:hover .arr,header.bar .home:focus-visible .arr,.hdtop .hdw:hover .arr,.hdtop .hdw:focus-visible .arr{opacity:1;transform:translateY(-50%) translateX(0)!important}

/* ---- Bar tone: dark and cream gradients crossfade instead of swapping ---- */
header.bar,.hdtop{background:none!important}
header.bar::before,.hdtop::before,header.bar::after,.hdtop::after{content:""!important;position:absolute!important;left:0!important;right:0!important;top:0!important;height:100%!important;z-index:-1!important;pointer-events:none!important;-webkit-mask-image:none!important;mask-image:none!important;transition:opacity .5s ease!important}
header.bar::before,.hdtop::before{background:linear-gradient(rgba(11,9,7,.8),rgba(11,9,7,.45) 60%,rgba(11,9,7,0))!important;opacity:1}
header.bar::after,.hdtop::after{background:linear-gradient(rgba(244,238,226,.82),rgba(244,238,226,.45) 60%,rgba(244,238,226,0))!important;opacity:0}
header.bar.tone-light::before,.hdtop.tone-light::before,header.bar.on-orange::before,.hdtop.on-orange::before{opacity:0}
header.bar.tone-light::after,.hdtop.tone-light::after{opacity:1}

/* over an orange section the bar gets an orange fade of its own, so page content never runs under the ink text */
header.bar.on-orange::after,.hdtop.on-orange::after{background:linear-gradient(rgba(255,106,31,.94),rgba(255,106,31,.55) 60%,rgba(255,106,31,0))!important;opacity:1!important}

/* ---- Soft color changes everywhere (hover, focus, section tone) ---- */
html a,html a *,html button,html input,html textarea,html select{transition:color .4s ease,background-color .4s ease,border-color .4s ease,opacity .4s ease,box-shadow .4s ease,text-decoration-color .4s ease,-webkit-text-stroke-color .4s ease,-webkit-text-fill-color .4s ease}
header.bar,.hdtop{transition:transform .28s ease,opacity .28s ease,color .5s ease!important}
header.bar a,.hdtop a,.pills a,.hdsec a{transition:color .5s ease,opacity .4s ease,text-shadow .5s ease!important}
header.bar .home,.hdtop .hdw{transition:color .5s ease!important}
.pills a::after,.hdsec a::after,.hdtop nav a::after{transition:transform .35s ease,background-color .5s ease!important}
.hdb,.burger{transition:transform .28s ease,opacity .28s ease,background-color .4s ease,border-color .4s ease!important}
.hdb span,.burger span{transition:transform .3s ease,opacity .3s ease,background-color .4s ease!important}
.hdm a,.menu a{transition:color .4s ease,border-color .4s ease,background-color .4s ease!important}
.igc-s,.more b,.pnav button,#contact .sent button,.evtags a.evtag,.btn{transition:color .4s ease,background-color .4s ease,border-color .4s ease,opacity .4s ease,transform .3s ease!important}
.shops .c{transition:color .5s ease,-webkit-text-stroke-color .5s ease,-webkit-text-fill-color .5s ease!important}
#locations .trk{transition:opacity .45s ease!important}
@media(prefers-reduced-motion:reduce){header.bar .home .arr,.hdtop .hdw .arr,header.bar .home .lbl,.hdtop .hdw .lbl,header.bar::before,header.bar::after,.hdtop::before,.hdtop::after{transition:none!important}}

/* scrolling is eased in /smooth-scroll.js; the browser's own smooth-scroll would fight it */
html{scroll-behavior:auto!important}

/* Homepage only: no menus while the turntable is showing. They fade in once the visitor dives through the record. */
html.hd-home header.bar,html.hd-home .hdtop,html.hd-home .hdb,html.hd-home .burger{transition:opacity .5s ease,visibility 0s linear 0s}
html.hd-home:not(.passed) header.bar,html.hd-home:not(.passed) .hdtop,html.hd-home:not(.passed) .hdb,html.hd-home:not(.passed) .burger{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:opacity .3s ease,visibility 0s linear .3s}