/* ================= MALIBU "STACKED CHROME" BUTTONS (v21) =================
   Load AFTER theme-plum.css.  Brutalist offset-block idea, Malibu-style:
   - sharp rectangles with two clipped (chamfered) corners, top-left + bottom-right
   - chrome-silver foil face (normal) / plum candy-metal face (current page + primary CTA)
   - instead of a flat slab behind: a thin offset "ghost frame" in plum-chrome
     (silver-chrome behind plum buttons); the face slides onto it on hover and seats on press
   - heavy condensed caps (Anton, already loaded by every page), wide tracking
   - inline-SVG up-right arrow on CTAs that nudges on hover
   - tiny diamond glint tucked in the clipped corner of the primary buttons
   The diamond signature logo is not touched. */
:root{
--bb-ink:#140812;--bb-champ:#fff3dc;
--bb-arw-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 18L17 7M8.5 6H18v9.5' fill='none' stroke='%23140812' stroke-width='3.2' stroke-linecap='square'/%3E%3C/svg%3E");
--bb-arw-champ:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 18L17 7M8.5 6H18v9.5' fill='none' stroke='%23fff3dc' stroke-width='3.2' stroke-linecap='square'/%3E%3C/svg%3E");
--bb-glint:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.5' stop-color='%23f3d6ff' stop-opacity='.5'/%3E%3Cstop offset='1' stop-color='%23b862a6' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='10' cy='10' r='9' fill='url(%23g)' opacity='.55'/%3E%3Cpath d='M10 0.5L11.3 8.7 19.5 10 11.3 11.3 10 19.5 8.7 11.3 0.5 10 8.7 8.7z' fill='%23fff'/%3E%3C/svg%3E");
--bb-frame-pk:linear-gradient(135deg,#f0d2e8 0%,#a0458f 22%,#5e1a55 45%,#e7bfdc 62%,#7e3170 82%,#c58ab6 100%);
--bb-frame-si:linear-gradient(135deg,#ffffff 0%,#b9b3c0 25%,#f4f1f6 48%,#6b5f70 72%,#e7e2ea 100%);
}

/* ---------- shared geometry (all block buttons) ---------- */
html body:not(#_b) .qb-nav a,html body:not(#_b) .qb-soc a,html body:not(#_b) .footer .socials a,html body:not(#_b) .nav-r.socials a,
html body:not(#_b) .hero .cta .btn,html body:not(#_b) .nf .cta .btn,html body:not(#_b) .modal .newsForm .btn,html body:not(#_b) .au-form .btn,html body:not(#_b) #contactForm .btn,html body:not(#_b) .signup .newsForm .btn,html body:not(#_b) .yt-sub .btn{
 --cut:7px;--off:3px;--push:0px;--sw:1.5px;
 --face-foil:var(--t-silver);--face-edge:var(--t-edge);--face-bevel:var(--t-bevel);--face-sheen:var(--t-sheen);
 --diag:rgba(255,255,255,.9);--frame:var(--bb-frame-pk);--arw:none;--glint:none;--shine:100%;
 position:relative;isolation:isolate;overflow:visible;z-index:0;
 border:0;border-radius:0;outline-offset:4px;
 background:var(--glint) 0 0/9px 9px no-repeat;
 box-shadow:none;color:var(--bb-ink);
 font-family:var(--disp);font-weight:400;text-transform:uppercase;line-height:1;
 text-shadow:0 1px 0 rgba(255,255,255,.55);
 filter:drop-shadow(0 2px 2px rgba(0,0,0,.75));
 transform:translate(var(--push),var(--push));
 transition:transform .18s cubic-bezier(.3,.7,.3,1),filter .25s}
/* the face: foil + bevel + sheen + chrome rim, chamfered */
html body:not(#_b) .qb-nav a::before,html body:not(#_b) .qb-soc a::before,html body:not(#_b) .footer .socials a::before,html body:not(#_b) .nav-r.socials a::before,
html body:not(#_b) .hero .cta .btn::before,html body:not(#_b) .nf .cta .btn::before,html body:not(#_b) .modal .newsForm .btn::before,html body:not(#_b) .au-form .btn::before,html body:not(#_b) #contactForm .btn::before,html body:not(#_b) .signup .newsForm .btn::before,html body:not(#_b) .yt-sub .btn::before{
 content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 top:0;right:0;width:auto;height:auto;filter:none;opacity:1;transform:none;
 border:var(--sw) solid transparent;
 clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
 background-image:var(--arw),
  linear-gradient(to bottom right,transparent 50%,var(--diag) 50%,var(--diag) calc(50% + 1.4px),transparent calc(50% + 1.4px)),
  linear-gradient(to top left,transparent 50%,rgba(40,10,35,.75) 50%,rgba(40,10,35,.75) calc(50% + 1.4px),transparent calc(50% + 1.4px)),
  linear-gradient(105deg,transparent 40%,rgba(255,255,255,.55) 48%,#fff 50%,rgba(255,255,255,.55) 52%,transparent 60%),
  var(--face-sheen),var(--face-bevel),var(--face-foil),var(--face-edge);
 background-size:var(--asz,0px) var(--asz,0px),var(--cut) var(--cut),var(--cut) var(--cut),300% 100%,100% 100%,100% 100%,256px 256px,100% 100%;
 background-position:right var(--ax,0px) top 50%,0 0,100% 100%,var(--shine) 0,0 0,0 0,var(--fx,0) var(--fy,0),0 0;
 background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,repeat,no-repeat;
 background-origin:padding-box,border-box,border-box,padding-box,padding-box,padding-box,padding-box,border-box;
 background-clip:padding-box,border-box,border-box,padding-box,padding-box,padding-box,padding-box,border-box;
 transition:background-position .2s cubic-bezier(.3,.7,.3,1)}
/* the ghost frame: thin chamfered outline offset down-right (ring + diagonal stroke via mask) */
html body:not(#_b) .qb-nav a::after,html body:not(#_b) .qb-soc a::after,html body:not(#_b) .footer .socials a::after,html body:not(#_b) .nav-r.socials a::after,
html body:not(#_b) .hero .cta .btn::after,html body:not(#_b) .nf .cta .btn::after,html body:not(#_b) .modal .newsForm .btn::after,html body:not(#_b) .au-form .btn::after,html body:not(#_b) #contactForm .btn::after,html body:not(#_b) .signup .newsForm .btn::after,html body:not(#_b) .yt-sub .btn::after{
 content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
 padding:var(--sw);box-sizing:border-box;
 background:var(--frame);
 clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
 -webkit-mask:linear-gradient(to top left,transparent 50%,#000 50%,#000 calc(50% + var(--sw) + .2px),transparent calc(50% + var(--sw) + .2px)) 100% 100%/var(--cut) var(--cut) no-repeat border-box,linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0) border-box;
 -webkit-mask-composite:source-over,xor;
 mask:linear-gradient(to top left,transparent 50%,#000 50%,#000 calc(50% + var(--sw) + .2px),transparent calc(50% + var(--sw) + .2px)) 100% 100%/var(--cut) var(--cut) no-repeat border-box add,linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0) border-box;
 transform:translate(calc(var(--off) - var(--push)),calc(var(--off) - var(--push)));
 transition:transform .18s cubic-bezier(.3,.7,.3,1)}

/* ---------- primary: current page + Listen Now + popup Register + 404 Back Home ---------- */
html body:not(#_b) .qb-nav a.on,html body:not(#_b) .hero .cta .btn:not(.line),html body:not(#_b) .nf .cta .btn:not(.line),html body:not(#_b) .modal .newsForm .btn,html body:not(#_b) .au-form .btn,html body:not(#_b) #contactForm .btn,html body:not(#_b) .signup .newsForm .btn,html body:not(#_b) .yt-sub .btn{
 --face-foil:var(--t-pink);--face-edge:var(--t-edge-pk);
 --face-bevel:linear-gradient(180deg,rgba(240,215,235,.42) 0%,rgba(255,255,255,.06) 32%,rgba(0,0,0,0) 55%,rgba(20,3,18,.45) 100%);
 --face-sheen:linear-gradient(115deg,transparent 30%,rgba(240,220,236,.2) 45%,transparent 60%);
 --diag:#f6dcef;--frame:var(--bb-frame-si);--glint:var(--bb-glint);
 color:var(--bb-champ);text-shadow:0 -1px 0 rgba(15,2,13,.8),0 1px 2px rgba(15,2,13,.6);
 filter:drop-shadow(0 2px 2px rgba(0,0,0,.75)) drop-shadow(0 0 7px rgba(var(--pk),.55))}

/* ---------- hover / focus: face slides onto the frame, shine sweeps, arrow nudges; press seats it ---------- */
html body:not(#_b) .qb-nav a:hover,html body:not(#_b) .qb-nav a:focus-visible,html body:not(#_b) .qb-soc a:not(.soon):hover,html body:not(#_b) .qb-soc a:not(.soon):focus-visible,
html body:not(#_b) .footer .socials a:not(.soon):hover,html body:not(#_b) .footer .socials a:not(.soon):focus-visible,html body:not(#_b) .nav-r.socials a:not(.soon):hover,html body:not(#_b) .nav-r.socials a:not(.soon):focus-visible,
html body:not(#_b) .hero .cta .btn:hover,html body:not(#_b) .hero .cta .btn:focus-visible,html body:not(#_b) .nf .cta .btn:hover,html body:not(#_b) .nf .cta .btn:focus-visible,html body:not(#_b) .modal .newsForm .btn:hover,html body:not(#_b) .au-form .btn:hover,html body:not(#_b) #contactForm .btn:hover,html body:not(#_b) .signup .newsForm .btn:hover,html body:not(#_b) .yt-sub .btn:hover,html body:not(#_b) .modal .newsForm .btn:focus-visible,html body:not(#_b) .au-form .btn:focus-visible,html body:not(#_b) #contactForm .btn:focus-visible,html body:not(#_b) .signup .newsForm .btn:focus-visible,html body:not(#_b) .yt-sub .btn:focus-visible{
 --push:calc(var(--off) * .5);--shine:0%;--ax:calc(var(--ax0,0px) - 3px);
 background:var(--glint) 0 0/9px 9px no-repeat;border:0;box-shadow:none;transform:translate(var(--push),var(--push))}
html body:not(#_b) .qb-nav a:hover,html body:not(#_b) .qb-soc a:not(.soon):hover,html body:not(#_b) .footer .socials a:not(.soon):hover,html body:not(#_b) .nav-r.socials a:not(.soon):hover,html body:not(#_b) .hero .cta .btn.line:hover,html body:not(#_b) .nf .cta .btn.line:hover{
 color:var(--bb-ink);filter:drop-shadow(0 2px 2px rgba(0,0,0,.75)) drop-shadow(0 0 6px rgba(var(--pk),.5)) brightness(1.04)}
html body:not(#_b) .qb-nav a.on:hover,html body:not(#_b) .hero .cta .btn:not(.line):hover,html body:not(#_b) .nf .cta .btn:not(.line):hover,html body:not(#_b) .modal .newsForm .btn:hover,html body:not(#_b) .au-form .btn:hover,html body:not(#_b) #contactForm .btn:hover,html body:not(#_b) .signup .newsForm .btn:hover,html body:not(#_b) .yt-sub .btn:hover{
 color:var(--bb-champ);filter:drop-shadow(0 2px 2px rgba(0,0,0,.75)) drop-shadow(0 0 11px rgba(var(--pk),.85))}
html body:not(#_b) .qb-nav a:active,html body:not(#_b) .qb-soc a:not(.soon):active,html body:not(#_b) .footer .socials a:not(.soon):active,html body:not(#_b) .nav-r.socials a:not(.soon):active,
html body:not(#_b) .hero .cta .btn:active,html body:not(#_b) .nf .cta .btn:active,html body:not(#_b) .modal .newsForm .btn:active,html body:not(#_b) .au-form .btn:active,html body:not(#_b) #contactForm .btn:active,html body:not(#_b) .signup .newsForm .btn:active,html body:not(#_b) .yt-sub .btn:active{--push:var(--off);transform:translate(var(--push),var(--push))}
html body:not(#_b) .qb-nav a:focus-visible,html body:not(#_b) .qb-soc a:focus-visible,html body:not(#_b) .footer .socials a:focus-visible,html body:not(#_b) .nav-r.socials a:focus-visible,
html body:not(#_b) .hero .cta .btn:focus-visible,html body:not(#_b) .nf .cta .btn:focus-visible,html body:not(#_b) .modal .newsForm .btn:focus-visible,html body:not(#_b) .au-form .btn:focus-visible,html body:not(#_b) #contactForm .btn:focus-visible,html body:not(#_b) .signup .newsForm .btn:focus-visible,html body:not(#_b) .yt-sub .btn:focus-visible{outline:2px solid var(--bb-champ);outline-offset:5px}
/* arrow vertical nudge (up) rides on the same background-position transition */
html body:not(#_b) .hero .cta .btn:hover::before,html body:not(#_b) .hero .cta .btn:focus-visible::before,html body:not(#_b) .nf .cta .btn:hover::before,html body:not(#_b) .modal .newsForm .btn:hover::before,html body:not(#_b) .au-form .btn:hover::before,html body:not(#_b) #contactForm .btn:hover::before,html body:not(#_b) .signup .newsForm .btn:hover::before,html body:not(#_b) .yt-sub .btn:hover::before{
 background-position:right var(--ax) top calc(50% - 3px),0 0,100% 100%,var(--shine) 0,0 0,0 0,var(--fx,0) var(--fy,0),0 0}

/* ---------- quickbar page buttons ---------- */
html body:not(#_b) .qb-nav{gap:10px 11px}
html body:not(#_b) .qb-nav a{--cut:6px;--off:3px;padding:8px 13px 7px;font-size:.8rem;letter-spacing:.16em}
html body:not(#_b) .qb-nav a.on{--off:4px}

/* ---------- CTAs: Listen Now / All Music (+ 404) ---------- */
html body:not(#_b) .hero .cta,html body:not(#_b) .nf .cta{gap:16px 18px;margin-top:30px}
html body:not(#_b) .hero .cta .btn,html body:not(#_b) .nf .cta .btn{--cut:10px;--off:5px;--sw:1.6px;--asz:14px;--ax0:18px;--ax:18px;
 display:inline-flex;align-items:center;padding:15px 44px 14px 26px;font-size:1rem;letter-spacing:.2em}
html body:not(#_b) .hero .cta .btn.line,html body:not(#_b) .nf .cta .btn.line{--arw:var(--bb-arw-ink)}
html body:not(#_b) .hero .cta .btn:not(.line),html body:not(#_b) .nf .cta .btn:not(.line){--arw:var(--bb-arw-champ)}

/* ---------- popup Register ---------- */
html body:not(#_b) .modal .newsForm{gap:14px}
html body:not(#_b) .modal .newsForm .btn,html body:not(#_b) .au-form .btn,html body:not(#_b) #contactForm .btn,html body:not(#_b) .signup .newsForm .btn,html body:not(#_b) .yt-sub .btn{--cut:9px;--off:4px;--asz:13px;--ax0:16px;--ax:16px;--arw:var(--bb-arw-champ);
 display:flex;align-items:center;justify-content:center;padding:15px 40px 14px;font-size:.95rem;letter-spacing:.22em;margin-right:4px}

/* ---------- social buttons: icon-only chamfered plates, one row, 30px total ---------- */
html body:not(#_b) .qb-soc{display:grid;grid-template-columns:repeat(4,1fr)!important;gap:11px;width:min(92vw,620px);margin-top:4px;padding-right:3px}
html body:not(#_b) .qb-soc a,html body:not(#_b) .qb-soc a.soon{--cut:6px;--off:3px;height:27px;width:auto;padding:0;display:flex;align-items:center;justify-content:center}
html body:not(#_b) .footer .socials{gap:12px}
html body:not(#_b) .footer .socials a,html body:not(#_b) .nav-r.socials a{--cut:5px;--off:3px;width:28px;height:27px;border-radius:0;display:grid;place-items:center}
html body:not(#_b) .nav-r.socials{gap:10px}
html body:not(#_b) .qb-soc a svg,html body:not(#_b) .footer .socials svg,html body:not(#_b) .nav-r.socials svg{width:16px;height:16px;fill:var(--bb-ink);filter:drop-shadow(0 1px 0 rgba(255,255,255,.7))}
/* TikTok (not linked yet): dimmer, inert, no frame glow */
html body:not(#_b) .qb-soc a.soon,html body:not(#_b) .footer .socials a.soon,html body:not(#_b) .nav-r.socials a.soon{
 opacity:.4;filter:saturate(.4) brightness(.78);cursor:default;transform:none;background:none;box-shadow:none}
html body:not(#_b) .qb-soc a.soon:hover,html body:not(#_b) .footer .socials a.soon:hover,html body:not(#_b) .nav-r.socials a.soon:hover{transform:none;filter:saturate(.4) brightness(.78);color:var(--bb-ink)}

@media(max-width:420px){html body:not(#_b) .qb-nav{gap:9px 9px}html body:not(#_b) .qb-nav a{padding:8px 10px 7px;font-size:.76rem;letter-spacing:.13em}}
@media(max-width:359px){html body:not(#_b) .qb-nav a{padding:7px 8px 6px;letter-spacing:.1em}}

/* ---------- reduced motion: same looks, no sliding/sweeping ---------- */
@media(prefers-reduced-motion:reduce){
 html body:not(#_b) .qb-nav a,html body:not(#_b) .qb-soc a,html body:not(#_b) .footer .socials a,html body:not(#_b) .nav-r.socials a,html body:not(#_b) .hero .cta .btn,html body:not(#_b) .nf .cta .btn,html body:not(#_b) .modal .newsForm .btn,html body:not(#_b) .au-form .btn,html body:not(#_b) #contactForm .btn,html body:not(#_b) .signup .newsForm .btn,html body:not(#_b) .yt-sub .btn,
 html body:not(#_b) .qb-nav a::before,html body:not(#_b) .qb-soc a::before,html body:not(#_b) .footer .socials a::before,html body:not(#_b) .nav-r.socials a::before,html body:not(#_b) .hero .cta .btn::before,html body:not(#_b) .nf .cta .btn::before,html body:not(#_b) .modal .newsForm .btn::before,html body:not(#_b) .au-form .btn::before,html body:not(#_b) #contactForm .btn::before,html body:not(#_b) .signup .newsForm .btn::before,html body:not(#_b) .yt-sub .btn::before,
 html body:not(#_b) .qb-nav a::after,html body:not(#_b) .qb-soc a::after,html body:not(#_b) .footer .socials a::after,html body:not(#_b) .nav-r.socials a::after,html body:not(#_b) .hero .cta .btn::after,html body:not(#_b) .nf .cta .btn::after,html body:not(#_b) .modal .newsForm .btn::after,html body:not(#_b) .au-form .btn::after,html body:not(#_b) #contactForm .btn::after,html body:not(#_b) .signup .newsForm .btn::after,html body:not(#_b) .yt-sub .btn::after{transition:none!important}
 html body:not(#_b) .qb-nav a,html body:not(#_b) .qb-soc a,html body:not(#_b) .footer .socials a,html body:not(#_b) .nav-r.socials a,html body:not(#_b) .hero .cta .btn,html body:not(#_b) .nf .cta .btn,html body:not(#_b) .modal .newsForm .btn,html body:not(#_b) .au-form .btn,html body:not(#_b) #contactForm .btn,html body:not(#_b) .signup .newsForm .btn,html body:not(#_b) .yt-sub .btn{--shine:100%!important;--push:0px!important}
}
/* phones: keep Listen Now + All Music side by side */
@media(max-width:480px){html body:not(#_b) .hero .cta,html body:not(#_b) .nf .cta{gap:12px 14px;flex-wrap:nowrap}
 html body:not(#_b) .hero .cta .btn,html body:not(#_b) .nf .cta .btn{--cut:8px;--off:4px;--asz:12px;--ax0:12px;--ax:12px;padding:14px 32px 13px 16px;font-size:.9rem;letter-spacing:.15em}}
/* final polish: heavier frames on the hero CTAs + current page, slightly bigger arrows */
html body:not(#_b) .hero .cta .btn,html body:not(#_b) .nf .cta .btn{--sw:2px;--asz:14px}
html body:not(#_b) .qb-nav a.on{--sw:2px}
@media(max-width:480px){html body:not(#_b) .hero .cta .btn,html body:not(#_b) .nf .cta .btn{--asz:13px}}

/* ================= v22: QUICKBAR NAV = CTA style + 3-LAYER STAIRCASE =================
   Same clipped face, Anton caps, up-right arrow and hover as Listen Now / All Music,
   but depth = face -> solid grey block -> solid near-black block (thin plum rim), stepping down-right.
   The two back blocks are solid copies of the clipped shape made with zero-blur drop-shadows,
   so they follow the chamfer exactly. --push moves the face; the grey step shrinks by the same
   amount, so the blocks stay put while the face slides down onto them. */
html body:not(#_b) .quickbar .qb-nav{gap:12px 13px;padding:0 6px 6px 0}
html body:not(#_b) .quickbar .qb-nav a{
 --cut:7px;--sw:1.5px;--step:3px;--push:0px;
 --arw:var(--bb-arw-ink);--asz:10px;--ax0:10px;--ax:10px;
 --l2:#8e8692;--l3:#0a060a;--rim:#b862a6;
 display:inline-flex;align-items:center;padding:8px 25px 7px 12px;font-size:.78rem;letter-spacing:.16em;
 filter:drop-shadow(calc(var(--step) - var(--push)) calc(var(--step) - var(--push)) 0 var(--l2))
        drop-shadow(var(--step) var(--step) 0 var(--l3))
        drop-shadow(1.1px 1.1px 0 var(--rim))
        drop-shadow(0 3px 4px rgba(0,0,0,.6));
 transform:translate(var(--push),var(--push));
 transition:transform .18s cubic-bezier(.3,.7,.3,1),filter .18s cubic-bezier(.3,.7,.3,1)}
html body:not(#_b) .quickbar .qb-nav a::after{content:none;display:none}
/* current page: plum candy face + champagne arrow, same grey + black layers, plum glow */
html body:not(#_b) .quickbar .qb-nav a.on{
 --arw:var(--bb-arw-champ);--sw:1.5px;
 filter:drop-shadow(calc(var(--step) - var(--push)) calc(var(--step) - var(--push)) 0 var(--l2))
        drop-shadow(var(--step) var(--step) 0 var(--l3))
        drop-shadow(1.1px 1.1px 0 var(--rim))
        drop-shadow(0 0 7px rgba(var(--pk),.6))}
/* hover/focus: face slides half-way down, shine sweeps, arrow nudges up-right; press seats it on the grey */
html body:not(#_b) .quickbar .qb-nav a:hover,html body:not(#_b) .quickbar .qb-nav a:focus-visible{--push:1.5px;--shine:0%;--ax:7px;color:var(--bb-ink)}
html body:not(#_b) .quickbar .qb-nav a.on:hover,html body:not(#_b) .quickbar .qb-nav a.on:focus-visible{color:var(--bb-champ)}
html body:not(#_b) .quickbar .qb-nav a:active{--push:var(--step)}
html body:not(#_b) .quickbar .qb-nav a:hover::before,html body:not(#_b) .quickbar .qb-nav a:focus-visible::before{
 background-position:right var(--ax) top calc(50% - 2px),0 0,100% 100%,var(--shine) 0,0 0,0 0,var(--fx,0) var(--fy,0),0 0}
html body:not(#_b) .quickbar .qb-nav a:focus-visible{outline-offset:8px}
@media(max-width:420px){html body:not(#_b) .quickbar .qb-nav{gap:11px 10px}
 html body:not(#_b) .quickbar .qb-nav a{--asz:9px;--ax0:9px;--ax:9px;padding:8px 23px 7px 9px;font-size:.74rem;letter-spacing:.12em}
 html body:not(#_b) .quickbar .qb-nav a:hover{--ax:7px}}
@media(max-width:359px){html body:not(#_b) .quickbar .qb-nav a{padding:7px 18px 6px 8px;letter-spacing:.09em}}
/* 5 page buttons (incl. Sign in) on one line at phone widths */
@media(max-width:420px){html body:not(#_b) .quickbar .qb-nav{gap:10px 6px;flex-wrap:wrap;justify-content:center}
 html body:not(#_b) .quickbar .qb-nav a{--asz:8px;--ax0:6px;--ax:6px;padding:8px 17px 7px 7px;font-size:.7rem;letter-spacing:.07em}
 html body:not(#_b) .quickbar .qb-nav a:hover{--ax:4px}}
@media(max-width:374px){html body:not(#_b) .quickbar .qb-nav a{padding:7px 15px 6px 6px;font-size:.66rem;letter-spacing:.05em}}
@media(prefers-reduced-motion:reduce){html body:not(#_b) .quickbar .qb-nav a,html body:not(#_b) .quickbar .qb-nav a::before{transition:none!important}
 html body:not(#_b) .quickbar .qb-nav a,html body:not(#_b) .quickbar .qb-nav a:hover,html body:not(#_b) .quickbar .qb-nav a:active{--push:0px!important;--shine:100%!important}}

/* fix: about bio overflow on phones */
.about>*{min-width:0}.about p{max-width:100%;overflow-wrap:break-word}
@media(min-width:821px){.about p{max-width:52ch}}
.ig-follow .btn{white-space:normal;max-width:100%;text-align:center;line-height:1.35}

/* v23: all 5 page buttons (HOME..SIGN IN) on ONE row on phones (375 / 390 / 430) */
@media(max-width:480px){html body:not(#_b) .quickbar .qb-nav{gap:10px 5px;flex-wrap:nowrap;justify-content:center;padding:0 5px 6px 0}
 html body:not(#_b) .quickbar .qb-nav a{flex:0 0 auto;min-width:0;white-space:nowrap;--asz:8px;--ax0:5px;--ax:5px;padding:8px 17px 7px 7px;font-size:.74rem;letter-spacing:.07em}
 html body:not(#_b) .quickbar .qb-nav a:hover{--ax:3px}}
@media(max-width:374px){html body:not(#_b) .quickbar .qb-nav{gap:10px 4px}
 html body:not(#_b) .quickbar .qb-nav a{padding:7px 15px 6px 6px;font-size:.68rem;letter-spacing:.05em}}

/* v24: phone row spans the full width of the social row below (buttons grow evenly) */
@media(max-width:480px){html body:not(#_b) .quickbar .qb-nav{gap:10px 6px;justify-content:space-between;width:100%;box-sizing:border-box;padding:0 4px 6px 0}
 html body:not(#_b) .quickbar .qb-nav a{flex:1 1 0;justify-content:center;text-align:center;padding-left:5px;padding-right:15px}}
@media(max-width:374px){html body:not(#_b) .quickbar .qb-nav{gap:10px 4px}
 html body:not(#_b) .quickbar .qb-nav a{padding-left:4px;padding-right:13px}}

/* v25: phones — bigger button content (labels/arrow ~13-15%, social icons ~19%) */
@media(max-width:480px){html body:not(#_b) .quickbar .qb-nav{gap:10px 5px}
 html body:not(#_b) .quickbar .qb-nav a{--asz:9.2px;--ax0:5px;--ax:5px;font-size:.84rem;letter-spacing:.03em;padding:9px 16px 8px 4px}
 html body:not(#_b) .quickbar .qb-nav a:hover{--ax:3px}
 html body:not(#_b) .qb-soc a,html body:not(#_b) .qb-soc a.soon{height:30px}
 html body:not(#_b) .qb-soc a svg{width:19px;height:19px}}
@media(max-width:374px){html body:not(#_b) .quickbar .qb-nav{gap:10px 4px}
 html body:not(#_b) .quickbar .qb-nav a{font-size:.76rem;letter-spacing:.02em;padding:8px 14px 7px 3px}}

/* ---------- phone fit (v6): gap between page row + social row; home hero fits above the fold ---------- */
@media (max-width:479.98px){
 html body:not(#_b) .quickbar .qb-soc{margin-top:10px}
 html body:not(#_b) #home.hero .hero-inner{padding-top:22px;padding-bottom:16px;gap:12px;min-height:0}
 html body:not(#_b) #home.hero{min-height:0}
 html body:not(#_b) #home .hero-cover{width:clamp(170px,calc(100svh - 432px),300px);height:auto;aspect-ratio:1/1;margin-left:auto;margin-right:auto}
 html body:not(#_b) #home .hero-copy .release-title{margin-top:4px;margin-bottom:4px}
 html body:not(#_b) #home .hero .cta,html body:not(#_b) #home.hero .cta{margin-top:12px}
}

/* v9: footer MAILING LIST "Sign Up" = same plum candy-metal style as Sign in / popup Register */
html body:not(#_b) .signup .newsForm .btn{flex:0 0 auto;white-space:nowrap}

/* ---------- v12: HOMEPAGE quickbar socials = radiant app colors ("found them after days in a dark jungle").
   Lit-from-within brand faces + own-hue bloom + glossy top highlight + slow staggered pulse.
   IG gradient swirls, TikTok cyan/pink glitch-offsets, YouTube hot red, X black with white neon rim.
   Home page only (body.page-home .qb-soc); footer + nav socials untouched. Motion off with reduced motion. ---------- */
@property --igA{syntax:'<angle>';inherits:true;initial-value:45deg}
html body.page-home:not(#_b) .qb-soc a:not(.soon){
 --face-foil:linear-gradient(transparent,transparent);
 --face-bevel:linear-gradient(180deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.2) 34%,rgba(255,255,255,0) 50%,rgba(0,0,0,.22) 100%);
 --face-sheen:radial-gradient(120% 90% at 50% 120%,rgba(255,255,255,.28),transparent 60%);
 --diag:rgba(255,255,255,.95);--glow:255,255,255;--frame:linear-gradient(135deg,rgba(var(--glow),.95),rgba(var(--glow),.45));
 filter:drop-shadow(0 0 3px rgba(var(--glow),.95)) drop-shadow(0 0 10px rgba(var(--glow),.7)) drop-shadow(0 0 22px rgba(var(--glow),.45))}
html body.page-home:not(#_b) .qb-soc a[aria-label="YouTube"]{--glow:255,24,24;--face-edge:radial-gradient(120% 140% at 50% 40%,#ff6b5e 0%,#ff1a1a 38%,#e60000 70%,#a80000 100%)}
html body.page-home:not(#_b) .qb-soc a[aria-label="X"]{--glow:235,240,255;--face-edge:radial-gradient(120% 140% at 50% 30%,#2a2a2e 0%,#0b0b0d 55%,#000 100%);--diag:#fff}
html body.page-home:not(#_b) .qb-soc a[aria-label="X"]::before{box-shadow:inset 0 0 0 1px rgba(255,255,255,.9)}
html body.page-home:not(#_b) .qb-soc a[aria-label="TikTok"]{--glow:37,244,238;--face-edge:linear-gradient(115deg,rgba(37,244,238,.35) 0%,#0a0a0a 28%,#000 50%,#0a0a0a 72%,rgba(254,44,85,.4) 100%);
 filter:drop-shadow(-2px 0 4px rgba(37,244,238,.9)) drop-shadow(2px 0 4px rgba(254,44,85,.9)) drop-shadow(0 0 16px rgba(37,244,238,.45)) drop-shadow(0 0 22px rgba(254,44,85,.35))}
html body.page-home:not(#_b) .qb-soc a[aria-label="Instagram"]{--glow:214,41,118;--face-edge:linear-gradient(var(--igA),#feda75 0%,#fa7e1e 24%,#d62976 50%,#962fbf 74%,#4f5bd5 100%);
 filter:drop-shadow(0 0 3px rgba(250,126,30,.9)) drop-shadow(-4px 0 10px rgba(254,218,117,.55)) drop-shadow(4px 0 12px rgba(150,47,191,.7)) drop-shadow(0 0 22px rgba(214,41,118,.5))}
html body.page-home:not(#_b) .qb-soc a:not(.soon) svg{fill:#fff;filter:drop-shadow(0 0 2px rgba(255,255,255,.9)) drop-shadow(0 1px 1px rgba(0,0,0,.4))}
html body.page-home:not(#_b) .qb-soc a[aria-label="TikTok"] svg{filter:drop-shadow(-1.4px -1px 0 #25f4ee) drop-shadow(1.4px 1px 0 #fe2c55) drop-shadow(0 0 2px rgba(255,255,255,.6))}
html body.page-home:not(#_b) .qb-soc a:not(.soon):hover,html body.page-home:not(#_b) .qb-soc a:not(.soon):focus-visible{color:#fff;filter:drop-shadow(0 0 4px rgba(var(--glow),1)) drop-shadow(0 0 14px rgba(var(--glow),.85)) drop-shadow(0 0 30px rgba(var(--glow),.6)) brightness(1.12) saturate(1.2)}
@media (prefers-reduced-motion:no-preference){
 html body.page-home:not(#_b) .qb-soc a:not(.soon){animation:qsPulse 3.6s ease-in-out infinite}
 html body.page-home:not(#_b) .qb-soc a:not(.soon):nth-child(2){animation-delay:-.9s}
 html body.page-home:not(#_b) .qb-soc a:not(.soon):nth-child(3){animation-delay:-1.8s}
 html body.page-home:not(#_b) .qb-soc a:not(.soon):nth-child(4){animation-delay:-2.7s}
 html body.page-home:not(#_b) .qb-soc a[aria-label="Instagram"]{animation:qsPulse 3.6s ease-in-out infinite,igSwirl 9s linear infinite}
 html body.page-home:not(#_b) .qb-soc a[aria-label="TikTok"] svg{animation:ttGlitch 4.2s steps(1,end) infinite}
 html body.page-home:not(#_b) .qb-soc a:not(.soon):hover{animation-play-state:paused}
}
@keyframes qsPulse{0%,100%{opacity:.9}50%{opacity:1}}
@keyframes igSwirl{to{--igA:405deg}}
@keyframes ttGlitch{0%,86%,100%{filter:drop-shadow(-1.4px -1px 0 #25f4ee) drop-shadow(1.4px 1px 0 #fe2c55) drop-shadow(0 0 2px rgba(255,255,255,.6))}
 88%{filter:drop-shadow(-2.6px .5px 0 #25f4ee) drop-shadow(2.4px -.6px 0 #fe2c55) drop-shadow(0 0 3px rgba(255,255,255,.8))}
 91%{filter:drop-shadow(1px -1.4px 0 #25f4ee) drop-shadow(-1.2px 1.6px 0 #fe2c55) drop-shadow(0 0 2px rgba(255,255,255,.6))}
 94%{filter:drop-shadow(-2px 1px 0 #25f4ee) drop-shadow(2px -1px 0 #fe2c55) drop-shadow(0 0 2px rgba(255,255,255,.6))}}

/* ---------- v13: social buttons pass 2 (TikTok bolder cyan/pink, whiter X, deeper YouTube red, Instagram sunset) ---------- */
@property --sunX{syntax:'<percentage>';inherits:true;initial-value:50%}
/* TikTok */
html body.page-home:not(#_b) .qb-soc a[aria-label="TikTok"]{
 --face-edge:linear-gradient(90deg,#25f4ee 0,#25f4ee 2.5px,rgba(37,244,238,.55) 5px,#050505 22%,#000 50%,#050505 78%,rgba(254,44,85,.6) calc(100% - 5px),#fe2c55 calc(100% - 2.5px),#fe2c55 100%);
 --frame:linear-gradient(90deg,#25f4ee 0%,#25f4ee 45%,#fe2c55 55%,#fe2c55 100%);--diag:#25f4ee;
 filter:drop-shadow(-3px 0 3px rgba(37,244,238,1)) drop-shadow(3px 0 3px rgba(254,44,85,1)) drop-shadow(-6px 0 14px rgba(37,244,238,.7)) drop-shadow(6px 0 14px rgba(254,44,85,.7))}
html body.page-home:not(#_b) .qb-soc a[aria-label="TikTok"] svg,html body.page-home:not(#_b) .qb-soc a[aria-label="TikTok"]:hover svg{fill:#fff;filter:drop-shadow(-2px -1.5px 0 #25f4ee) drop-shadow(2px 1.5px 0 #fe2c55)}
/* X */
html body.page-home:not(#_b) .qb-soc a[aria-label="X"]{--frame:linear-gradient(#fff,#fff);--diag:#fff;
 filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 8px rgba(255,255,255,.85)) drop-shadow(0 0 20px rgba(255,255,255,.5))}
html body.page-home:not(#_b) .qb-soc a[aria-label="X"]::before{border-color:rgba(255,255,255,.95)}
html body.page-home:not(#_b) .qb-soc a[aria-label="X"] svg{fill:#fff;stroke:#fff;stroke-width:.9px;stroke-linejoin:round;filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 5px rgba(255,255,255,.95))}
/* YouTube */
html body.page-home:not(#_b) .qb-soc a[aria-label="YouTube"]{
 --face-edge:linear-gradient(180deg,#ff0000 0%,#f00000 50%,#d40000 100%);
 --face-bevel:linear-gradient(180deg,rgba(255,255,255,.3) 0%,rgba(255,255,255,.08) 30%,rgba(255,255,255,0) 48%,rgba(60,0,0,.25) 100%);
 --face-sheen:linear-gradient(transparent,transparent);--frame:linear-gradient(135deg,#ff3030,#b00000);--diag:#ff8080;
 filter:drop-shadow(0 0 3px rgba(255,0,0,1)) drop-shadow(0 0 10px rgba(255,0,0,.85)) drop-shadow(0 0 24px rgba(230,0,0,.6))}
/* Instagram: sunset */
html body.page-home:not(#_b) .qb-soc a[aria-label="Instagram"]{
 --face-edge:linear-gradient(180deg,#4a1486 0%,#8e1f9c 20%,#d3217e 40%,#f9285a 56%,#fd5a2a 72%,#ff9a2a 86%,#ffd25a 100%);
 --face-sheen:radial-gradient(60% 95% at var(--sunX) 108%,rgba(255,246,190,.95) 0%,rgba(255,214,90,.7) 28%,rgba(255,150,40,.25) 55%,transparent 72%);
 --face-bevel:linear-gradient(180deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.08) 30%,rgba(255,255,255,0) 46%,rgba(0,0,0,0) 100%);
 --frame:linear-gradient(180deg,#b23cc7,#ff8a2a);--diag:#ffe7b0;
 filter:drop-shadow(0 0 3px rgba(255,140,50,.95)) drop-shadow(0 -3px 10px rgba(200,40,150,.6)) drop-shadow(0 4px 12px rgba(255,190,60,.75)) drop-shadow(0 0 26px rgba(255,90,60,.45))}
@media (prefers-reduced-motion:no-preference){
 html body.page-home:not(#_b) .qb-soc a[aria-label="Instagram"]{animation:qsPulse 3.6s ease-in-out infinite,igSun 10s ease-in-out infinite alternate}
 html body.page-home:not(#_b) .qb-soc a[aria-label="TikTok"] svg{animation:ttGlitch2 4.2s steps(1,end) infinite}
}
@keyframes igSun{from{--sunX:30%}to{--sunX:70%}}
@keyframes ttGlitch2{0%,86%,100%{filter:drop-shadow(-2px -1.5px 0 #25f4ee) drop-shadow(2px 1.5px 0 #fe2c55)}
 88%{filter:drop-shadow(-3.4px .6px 0 #25f4ee) drop-shadow(3.2px -.8px 0 #fe2c55)}
 91%{filter:drop-shadow(1.2px -2px 0 #25f4ee) drop-shadow(-1.4px 2.2px 0 #fe2c55)}
 94%{filter:drop-shadow(-2.6px 1.2px 0 #25f4ee) drop-shadow(2.6px -1.2px 0 #fe2c55)}}
html body.page-home:not(#_b) .qb-soc a[aria-label="TikTok"]{filter:drop-shadow(-2.5px 0 2px rgba(37,244,238,1)) drop-shadow(3px 0 2px rgba(254,44,85,1)) drop-shadow(3px 0 5px rgba(254,44,85,1)) drop-shadow(-6px 0 12px rgba(37,244,238,.65)) drop-shadow(7px 0 14px rgba(254,44,85,.85))}
html body.page-home:not(#_b) .qb-soc a[aria-label="YouTube"] svg,html body.page-home:not(#_b) .qb-soc a[aria-label="Instagram"] svg{fill:#fff;filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 4px rgba(255,255,255,.75)) drop-shadow(0 1px 1px rgba(80,0,0,.35))}
@keyframes qsPulse{0%,100%{opacity:.97}50%{opacity:1}} /* gentler: lower opacity greyed the white icons */

/* ---------- v14: NOW STREAMING platform pills in brand colors (tinted+glowing rim at rest, full fill+bloom when selected) ---------- */
html body:not(#_b) .ch-btn.spotify{--c:#1db954;--cr:29,185,84;--ink:#000}
html body:not(#_b) .ch-btn.apple{--c:#fa243c;--cr:250,36,60;--ink:#fff}
html body:not(#_b) .ch-btn.amazon{--c:#25d1da;--cr:37,209,218;--ink:#001518}
html body:not(#_b) .ch-btn{background:linear-gradient(180deg,rgba(var(--cr),.26),rgba(var(--cr),.1) 55%,rgba(8,4,8,.9));border:1.5px solid rgba(var(--cr),.9);color:#fff;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 10px rgba(var(--cr),.25),0 0 10px rgba(var(--cr),.4);transition:background .25s,box-shadow .25s,color .25s,transform .2s}
html body:not(#_b) .ch-btn svg{color:var(--c);filter:drop-shadow(0 0 3px rgba(var(--cr),.8))}
html body:not(#_b) .ch-btn:hover{border-color:var(--c);color:#fff;box-shadow:inset 0 0 12px rgba(var(--cr),.35),0 0 18px rgba(var(--cr),.65)}
html body:not(#_b) .ch-btn.on{color:var(--ink);border-color:rgba(255,255,255,.75);
 background:linear-gradient(180deg,rgba(255,255,255,.32) 0%,rgba(255,255,255,.06) 42%,rgba(255,255,255,0) 52%,rgba(0,0,0,.12) 100%),var(--c);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 0 2px rgba(var(--cr),.45),0 0 14px rgba(var(--cr),.9),0 0 32px rgba(var(--cr),.55)}
html body:not(#_b) .ch-btn.on svg{color:var(--ink);filter:none}
html body:not(#_b) .ch-btn.na{opacity:.45}
@media (prefers-reduced-motion:reduce){html body:not(#_b) .ch-btn{transition:none}html body:not(#_b) .ch-btn:hover{transform:none}}

/* ---------- v15: crisp TikTok note: 3 stacked hard-edged paths (cyan up-left, pink down-right, white on top), no blur ---------- */
html body.page-home:not(#_b) .qb-soc a[aria-label="TikTok"] svg.tt-sharp{width:17px;height:17px;filter:none!important;animation:none!important;shape-rendering:geometricPrecision;overflow:visible}
html body.page-home:not(#_b) .qb-soc a[aria-label="TikTok"] .tt-c{transform:translate(-1.6px,-1.3px)}
html body.page-home:not(#_b) .qb-soc a[aria-label="TikTok"] .tt-p{transform:translate(1.6px,1.3px)}
html body.page-home:not(#_b) .qb-soc a[aria-label="TikTok"] .tt-w{fill:#fff}
@media (prefers-reduced-motion:no-preference){
 html body.page-home:not(#_b) .qb-soc a[aria-label="TikTok"] .tt-c{animation:ttC 4.2s steps(1,end) infinite}
 html body.page-home:not(#_b) .qb-soc a[aria-label="TikTok"] .tt-p{animation:ttP 4.2s steps(1,end) infinite}}
@keyframes ttC{0%,86%,100%{transform:translate(-1.6px,-1.3px)}88%{transform:translate(-2.6px,.4px)}91%{transform:translate(1px,-1.6px)}94%{transform:translate(-2.2px,1px)}}
@keyframes ttP{0%,86%,100%{transform:translate(1.6px,1.3px)}88%{transform:translate(2.6px,-.5px)}91%{transform:translate(-1.2px,1.8px)}94%{transform:translate(2.2px,-1px)}}

/* ---------- v16: platform pills icon-only at every width (name kept for screen readers via aria-label) ---------- */
html body:not(#_b) .ch-btn{justify-content:center!important;gap:0!important}
html body:not(#_b) .ch-btn span{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;display:block!important}
html body:not(#_b) .ch-btn svg{width:24px;height:24px}

/* ===== NAV-WAVE BEGIN (top nav experiment (colour map follows social order X,TikTok,YouTube,IG): silver chrome catching the social-button glow below). Delete from here to NAV-WAVE END to restore the old metallic nav. ===== */
/* v19: old silver face untouched (::before); ::after = coloured light bounced up from the social row, same chamfer clip,
   strongest at the bottom edge, fading upward. One 500%-wide colour map sliced per button so it reads as one continuous row. */
html body:not(#_b) .quickbar .qb-nav a::after{content:"";display:block;position:absolute;inset:0;z-index:-1;pointer-events:none;border:0;
 clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
 background-image:
  linear-gradient(0deg,rgba(255,255,255,.6) 0,rgba(255,255,255,.45) 1px,rgba(255,255,255,0) 2.6px),
  linear-gradient(90deg,rgba(var(--rg),.3) 0,rgba(var(--rg),0) 3px,rgba(var(--rg),0) calc(100% - 3px),rgba(var(--rg),.3) 100%),
  var(--navmap,linear-gradient(90deg,#ffffff 0%,#dfe8ff 14%,#25f4ee 26%,#fe2c55 34%,#25f4ee 45%,#ff0000 60%,#ff1a1a 70%,#d62976 82%,#fa7e1e 91%,#962fbf 100%)),
  var(--navmap,linear-gradient(90deg,#ffffff 0%,#dfe8ff 14%,#25f4ee 26%,#fe2c55 34%,#25f4ee 45%,#ff0000 60%,#ff1a1a 70%,#d62976 82%,#fa7e1e 91%,#962fbf 100%));
 background-size:100% 100%,100% 100%,var(--nms,500%) 100%,var(--nms,500%) 100%;background-repeat:no-repeat;
 background-position:0 0,0 0,var(--nmx,var(--rx)) 0,var(--nmx,var(--rx)) 0;
 -webkit-mask-image:linear-gradient(0deg,#000 0%,rgba(0,0,0,.8) 12%,rgba(0,0,0,.45) 30%,rgba(0,0,0,.15) 50%,transparent 66%);
         mask-image:linear-gradient(0deg,#000 0%,rgba(0,0,0,.8) 12%,rgba(0,0,0,.45) 30%,rgba(0,0,0,.15) 50%,transparent 66%);
 -webkit-mask-composite:source-over;mask-composite:add;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-clip:border-box;mask-clip:border-box;-webkit-mask-origin:border-box;mask-origin:border-box;
 padding:0;transform:none;mix-blend-mode:normal;opacity:.62;filter:saturate(1.1)}
html body:not(#_b) .quickbar .qb-nav a:nth-child(1){--rx:0%;--rg:225,235,255}
html body:not(#_b) .quickbar .qb-nav a:nth-child(2){--rx:25%;--rg:37,244,238}
html body:not(#_b) .quickbar .qb-nav a:nth-child(3){--rx:50%;--rg:255,20,20}
html body:not(#_b) .quickbar .qb-nav a:nth-child(4){--rx:75%;--rg:255,40,90}
html body:not(#_b) .quickbar .qb-nav a:nth-child(5){--rx:100%;--rg:230,60,140}
/* v32 = v21 SOFT strength (matches Malibu's 2:59 PM screenshot), colours aligned to current social order; was: v23 = v20 POP strength (v21 soft kept in /workspace/revert/back-pocket-nav-soft); v20 POP: coloured light spilling just below each button + 3rd-layer bottom glow */
html body:not(#_b) .quickbar .qb-nav a,html body:not(#_b) .quickbar .qb-nav a.on{
 filter:drop-shadow(calc(var(--step) - var(--push)) calc(var(--step) - var(--push)) 0 var(--l2)) drop-shadow(var(--step) var(--step) 0 var(--l3))
  drop-shadow(1.1px 1.1px 0 var(--rim)) drop-shadow(0 3px 5px rgba(var(--rg),.42)) drop-shadow(0 5px 9px rgba(var(--rg),.2))}
/* v24: on the homepage js/main.js (navMap) measures the nav vs the social row and sets --navmap/--nms/--nmx/--rg per button so each x reflects the social button physically below it. Other pages use the % map above. */
/* ===== NAV-WAVE END ===== */

/* v27/v28: homepage YouTube logo: play triangle slightly redder/richer than the plain cutout (semi-opaque red over the button) */
html body.page-home:not(#_b) .qb-soc a[aria-label="YouTube"] svg .yt-play{fill:#e8141c!important;opacity:.55}
/* v30: homepage IG logo = official glyph: white rounded-square outline, lens ring and dot; official IG gradient inside the strokes */
html body.page-home:not(#_b) .qb-soc a[aria-label="Instagram"] svg .ig-face{fill:url(#igLogoG)!important}
/* v29: homepage X logo: inner diagonal drawn as a real thin near-black line (was a cutout washed out by the glow/stroke) */
html body.page-home:not(#_b) .qb-soc a[aria-label="X"] svg .x-line{fill:#050505!important;stroke:none!important;opacity:1}
/* v31: homepage X logo = brushed silver/chrome glyph (crisp, no glow on the glyph); dark inner line kept; button glow/rim unchanged */
html body.page-home:not(#_b) .qb-soc a[aria-label="X"] svg{filter:drop-shadow(0 .6px 0 rgba(0,0,0,.6))!important;stroke:url(#xSilverG)!important;stroke-width:.7px}
html body.page-home:not(#_b) .qb-soc a[aria-label="X"] svg path:not(.x-line){fill:url(#xSilverG)!important}