/* Dhwani sticky player (public/player/dhwani-player.js). Works on the new pages and the old WordPress pages. */
.dp{--dp-gold:#f2b736;--dp-gold-hi:#ffe3a1;--dp-ink:#060504;--dp-paper:#f3ece0;--dp-mute:#8f8574;--dp-line:rgba(243,236,224,.14);
  --dp-font:var(--display,"Archivo","Arial Narrow",system-ui,-apple-system,"Segoe UI",sans-serif);--dp-mono:var(--mono,"JetBrains Mono",ui-monospace,Menlo,monospace);
  --dp-bottom:calc(20px + env(safe-area-inset-bottom,0px));
  font:400 15px/1.4 var(--dp-font);color:var(--dp-paper);-webkit-font-smoothing:antialiased}
.dp *,.dp *::before,.dp *::after{box-sizing:border-box}
.dp button{font:inherit;color:inherit;margin:0;text-transform:none;letter-spacing:normal;box-shadow:none;min-height:0;line-height:1}

/* the sticky button */
.dp-fab{all:unset;box-sizing:border-box;position:fixed;z-index:9990;right:20px;bottom:var(--dp-bottom);cursor:pointer;display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 20px 0 18px;border-radius:999px;background:var(--dp-gold);color:var(--dp-ink)!important;font:700 14px/1 var(--dp-font)!important;white-space:nowrap;box-shadow:0 10px 34px rgba(0,0,0,.5),0 0 0 0 rgba(242,183,54,.5);transition:background .3s,transform .4s cubic-bezier(.2,.9,.2,1),opacity .3s;animation:dp-in .5s cubic-bezier(.2,.9,.2,1) both}
.dp-fab:hover{background:var(--dp-gold-hi);transform:translateY(-2px)}
.dp-fab:focus-visible{outline:2px solid var(--dp-paper);outline-offset:3px}
.dp-eq{display:inline-flex;gap:2px;align-items:flex-end;height:14px}
.dp-eq i{width:3px;height:40%;background:currentColor;border-radius:2px}
.dp-eq i:nth-child(2){height:80%}.dp-eq i:nth-child(3){height:55%}.dp-eq i:nth-child(4){height:30%}
.dp-fab:hover .dp-eq i{animation:dp-eq .9s ease-in-out infinite alternate}
.dp-fab:hover .dp-eq i:nth-child(2){animation-delay:-.3s}.dp-fab:hover .dp-eq i:nth-child(3){animation-delay:-.6s}.dp-fab:hover .dp-eq i:nth-child(4){animation-delay:-.15s}
.dp:not([data-view="idle"]) .dp-fab{display:none}
@keyframes dp-eq{0%{height:20%}100%{height:100%}}
@keyframes dp-in{from{opacity:0;transform:translateY(16px)}}

/* the player (hidden until something plays) */
.dp-player{display:none}
.dp[data-view="full"] .dp-player{position:fixed;inset:0;z-index:9991;display:grid;place-items:center;padding:16px}
.dp-shade{display:none}
.dp[data-view="full"] .dp-shade{display:block;position:absolute;inset:0;background:rgba(6,5,4,.92);animation:dp-fade .25s both}
.dp-box{position:relative;width:min(1160px,100%);max-height:calc(100svh - 32px);display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;padding:18px;border-radius:26px;background:#100d09;border:1px solid rgba(242,183,54,.22);box-shadow:0 30px 80px rgba(0,0,0,.6);animation:dp-up .4s cubic-bezier(.2,.9,.2,1) both}
@keyframes dp-fade{from{opacity:0}}
@keyframes dp-up{from{opacity:0;transform:translateY(24px) scale(.97)}}
.dp-main{display:grid;gap:14px;align-content:center;min-width:0}
.dp-media{position:relative;border-radius:16px;overflow:hidden;background:#000}
.dp-media.v{aspect-ratio:16/9}
.dp-media.v .dp-art{display:none}
.dp-media.v iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.dp-media.a{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:16px;align-items:center;padding:16px;background:radial-gradient(120% 120% at 0% 0%,rgba(242,183,54,.22),transparent 60%),#0b0907}
.dp-art{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.5);display:block}
.dp-art[hidden]{display:none}
.dp-frame{width:100%;min-width:0}
.dp-media.a iframe{display:block;width:100%;height:152px;border:0;border-radius:12px}
.dp-info{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;min-width:0}
.dp-now{min-width:0}
.dp-now b{display:block;font-size:clamp(22px,2.4vw,32px);font-weight:850;letter-spacing:-.02em;line-height:1.05;color:var(--dp-paper)}
.dp-now small{display:block;color:var(--dp-mute);font-size:15px;margin-top:4px}
.dp-sw{display:inline-flex;padding:4px;border-radius:999px;border:1px solid var(--dp-line)}
.dp-sw[hidden]{display:none}
.dp-sw button{all:unset;cursor:pointer;padding:10px 16px;border-radius:999px;font:600 13px/1 var(--dp-font);color:var(--dp-mute);transition:background .3s,color .3s}
.dp-sw button[aria-pressed="true"]{background:var(--dp-gold);color:var(--dp-ink)}
.dp-ctl{display:flex;align-items:center;gap:8px;font:500 12px/1 var(--dp-mono);letter-spacing:.08em;color:var(--dp-mute)}
.dp-ctl .dp-count{margin-left:auto}
.dp-ctl button{all:unset;box-sizing:border-box;cursor:pointer;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--dp-line);color:var(--dp-paper);font:400 24px/1 var(--dp-font);transition:border-color .2s,color .2s,background .2s}
.dp-ctl button:hover{border-color:var(--dp-gold);color:var(--dp-gold)}
.dp-ctl .dp-toggle{position:relative;width:52px;height:52px;background:var(--dp-gold);border-color:var(--dp-gold);color:var(--dp-ink)}
.dp-ctl .dp-toggle:hover{background:var(--dp-gold-hi);color:var(--dp-ink)}
.dp-ic{display:block;width:0;height:0;margin-left:4px;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent currentColor}
.dp-playing .dp-ic{width:14px;height:17px;margin:0;border:0;border-left:5px solid currentColor;border-right:5px solid currentColor}
.dp-hint{display:none;margin-left:auto;color:var(--dp-gold);font:600 13px/1.2 var(--dp-font);letter-spacing:0;text-align:right}
.dp-nudge .dp-hint{display:block;animation:dp-in .4s both}
.dp-nudge .dp-count{display:none}
.dp-nudge .dp-toggle{animation:dp-pulse 1.6s ease-out infinite}
@keyframes dp-pulse{0%{box-shadow:0 0 0 0 rgba(242,183,54,.6)}100%{box-shadow:0 0 0 18px rgba(242,183,54,0)}}
.dp-ctl button:focus-visible,.dp-list button:focus-visible,.dp-top button:focus-visible,.dp-sw button:focus-visible{outline:2px solid var(--dp-gold-hi);outline-offset:2px}
.dp-list{list-style:none;margin:0;padding:0 4px 0 0;overflow:auto;max-height:calc(100svh - 70px);display:grid;gap:2px;align-content:start;scrollbar-width:thin;scrollbar-color:rgba(242,183,54,.4) transparent}
.dp-list li{margin:0;padding:0;list-style:none}
.dp-list li::before,.dp-list li::marker{content:none}
.dp-list button{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 8px;border-radius:10px;color:var(--dp-paper)}
.dp-list button:hover{background:rgba(255,255,255,.04)}
.dp-list button[aria-current="true"]{background:rgba(242,183,54,.14)}
.dp-list img,.dp-noart{width:44px;height:44px;object-fit:cover;border-radius:8px;background:#1a140b;display:block}
.dp-list b{display:block;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dp-list small{display:block;font-size:12px;color:var(--dp-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dp-list em{font-style:normal;color:var(--dp-gold);font-size:12px;letter-spacing:.2em}
.dp-top{position:absolute;top:-14px;right:-14px;display:flex;gap:8px}
.dp-top button{all:unset;box-sizing:border-box;cursor:pointer;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#1c160e;border:1px solid rgba(242,183,54,.35);color:var(--dp-paper);font:400 20px/1 var(--dp-font)}
.dp-top .dp-close{background:var(--dp-gold);border-color:var(--dp-gold);color:var(--dp-ink);font-size:24px}

/* small player: stays in the corner on every page and keeps playing */
.dp[data-view="mini"] .dp-player{display:block;position:fixed;z-index:9990;right:20px;bottom:var(--dp-bottom);width:340px}
.dp[data-view="mini"] .dp-list,.dp[data-view="mini"] .dp-sw,.dp[data-view="mini"] .dp-art{display:none}
.dp[data-view="mini"] .dp-box{width:100%;grid-template-columns:1fr;gap:10px;padding:10px;border-radius:18px;animation:dp-in .35s cubic-bezier(.2,.9,.2,1) both;box-shadow:0 16px 50px rgba(0,0,0,.6)}
.dp[data-view="mini"] .dp-main{gap:8px}
.dp[data-view="mini"] .dp-media{border-radius:10px}
.dp[data-view="mini"] .dp-media.a{display:block;justify-items:stretch;padding:0;background:none}
.dp[data-view="mini"] .dp-media.a iframe{height:80px}
.dp[data-view="mini"] .dp-now b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dp[data-view="mini"] .dp-now small{font-size:12px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dp[data-view="mini"] .dp-ctl button{width:36px;height:36px;font-size:20px}
.dp[data-view="mini"] .dp-ctl .dp-toggle{width:42px;height:42px}
.dp[data-view="mini"] .dp-top{top:-12px;right:-8px;gap:6px}
.dp[data-view="mini"] .dp-top button{width:32px;height:32px;font-size:16px}

/* the homepage has its own "Our songs" button in the dock at the bottom centre; the player sits above the dock where they would touch */
body:has(.dock) .dp-fab{display:none}
@media(max-width:1100px){body:has(.dock) .dp{--dp-bottom:calc(88px + env(safe-area-inset-bottom,0px))}}
html.player-open .dock{opacity:0;pointer-events:none}

@media(max-width:820px){
  .dp[data-view="full"] .dp-player{padding:0;place-items:end stretch}
  .dp-box{grid-template-columns:1fr;width:100%;max-height:92svh;overflow:auto;border-radius:22px 22px 0 0;padding:14px 14px calc(14px + env(safe-area-inset-bottom,0px))}
  .dp-list{max-height:none;overflow:visible}
  .dp-media.a{grid-template-columns:1fr;justify-items:center}.dp-art{max-width:220px}
  .dp-top{top:10px;right:10px;z-index:2}
  .dp[data-view="mini"] .dp-player{left:8px;right:8px;width:auto}
  .dp[data-view="mini"] .dp-box{max-height:none;overflow:visible;border-radius:16px;padding:8px}
  .dp[data-view="mini"] .dp-main{grid-template-columns:132px minmax(0,1fr);align-items:center;gap:6px 10px}
  .dp[data-view="mini"] .dp-media.a{grid-column:1/-1}
  .dp[data-view="mini"] .dp-media.a~.dp-info{display:none}
  .dp[data-view="mini"] .dp-ctl{grid-column:1/-1}
  .dp[data-view="mini"] .dp-top{top:-14px;right:4px}
  .dp-fab{right:12px;height:44px;padding:0 16px 0 14px;font-size:13px!important}
}
@media(prefers-reduced-motion:reduce){.dp *,.dp-fab{animation:none!important;transition:none!important}}
