/* "Rockin' Jesus Essentials" on the homepage (inc/kd-essentials.php). The record is the album page's look B, cream
   daylight (album/page/kd-album.src.css, [data-k=b]), rescoped to .kde so it cannot touch the rest of the page. */

.kde{--ink:#13181d;--clay:#8f4d3f;--sand:#d8a066;--mut:#6f6861;
  --serif:Lora,Georgia,"Times New Roman",serif;--sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --spring:cubic-bezier(.32,.72,0,1);--pop:cubic-bezier(.34,1.42,.64,1);--sine:cubic-bezier(.37,0,.63,1);
  --bg:#faf7f3;--surface:#fff;--text:#13181d;--btn:#8f4d3f;--btn-ink:#fff;--shell:rgba(143,77,63,.05);
  --ring:rgba(19,24,29,.075);--core-hi:rgba(255,255,255,.95);--glow:rgba(216,160,102,.5);--glow2:rgba(216,160,102,.15);
  --groove:rgba(143,77,63,.1);--floor:rgba(66,36,20,.36);--rim:rgba(19,24,29,.12);
  position:relative;overflow-x:clip;background:var(--bg);color:var(--text);padding:72px 6vw!important}
:root[data-theme=dark] .kde{--bg:#161009;--surface:#211811;--text:#f3ece2;--clay:#d78b67;--btn:#d78b67;--btn-ink:#1a120a;--mut:#a2978b;
  --shell:rgba(216,160,102,.05);--ring:rgba(243,236,226,.08);--core-hi:rgba(255,236,214,.07);--glow:rgba(216,160,102,.27);
  --glow2:rgba(215,139,103,.09);--groove:rgba(216,160,102,.075);--floor:rgba(0,0,0,.62);--rim:rgba(216,160,102,.3)}
.kde *,.kde *::before,.kde *::after{box-sizing:border-box}
.kde img{display:block}
.kde :focus-visible{outline:2px solid var(--sand);outline-offset:3px}
.kde p,.kde h2,.kde ol{margin:0}
.kde-in{max-width:1180px;margin:0 auto;display:grid;gap:28px;align-items:center}
@media (min-width:960px){.kde-in{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px}}

/* the words */
.kde-eyebrow{font:700 13px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--clay)}
.kde-h{margin-top:12px!important;font:600 clamp(32px,4.6vw,52px)/1.08 var(--serif);letter-spacing:-.01em;color:var(--text)}
.kde-album{margin-top:12px!important;font:17px/1.4 var(--sans);color:var(--text)}
.kde-credits{margin-top:10px!important;font:15px/1.6 var(--sans);color:var(--mut);max-width:52ch}

/* four songs, one after another */
.kde-songs{list-style:none;padding:0;margin-top:22px!important;display:grid;gap:8px;max-width:520px}
.kde-song{display:grid;grid-template-columns:28px 1fr;align-items:center;gap:4px 10px;padding:10px 14px;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--ring)}
.kde-n{font:600 14px/1 var(--serif);color:var(--clay);text-align:center}
.kde-t{font:600 16px/1.3 var(--sans);color:var(--text)}
.kde-song audio{grid-column:1/-1;width:100%;height:40px}
.kde-live .kde-song{grid-template-columns:44px 1fr;padding:8px 14px 8px 8px;cursor:pointer;transition:box-shadow .3s var(--spring),background .3s}
.kde-live .kde-song audio{display:none}
.kde-play{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--shell);box-shadow:inset 0 0 0 1px var(--ring);color:var(--clay);cursor:pointer}
.kde-play svg{width:18px;height:18px;fill:currentColor}
.kde-bar{grid-column:2;height:3px;border-radius:2px;background:var(--ring);overflow:hidden}
.kde-bar i{display:block;height:100%;width:var(--p,0%);background:var(--clay)}
.kde-song.on{box-shadow:inset 0 0 0 1.5px var(--clay)}
.kde-song.on .kde-play{background:var(--btn);color:var(--btn-ink)}

/* the buy */
.kde-buy{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.kde-btn{display:inline-flex;align-items:center;min-height:52px;padding:0 26px;border-radius:999px;background:var(--btn);color:var(--btn-ink)!important;
  font:700 15px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;text-decoration:none!important;box-shadow:0 14px 28px -16px rgba(80,30,15,.6)}
.kde-btn:hover{filter:brightness(1.06)}
.kde-price{font:600 20px/1 var(--serif);color:var(--text)}
.kde-price del{opacity:.5;font-size:.8em}

/* the record: look B, rescoped */
.kde-stage{position:relative;height:304px;--w:212px;--t:5px;--os:.79;perspective:760px;perspective-origin:50% 36%;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:manipulation}
@media (min-width:600px){.kde-stage{height:420px;--w:262px;--os:.86;perspective:1000px}}
@media (min-width:960px){.kde-stage{height:520px;--w:min(300px,22vw);--t:7px;--os:.9;perspective:1200px}}
.kde-stage .halo{position:absolute;left:50%;top:47%;width:calc(var(--w)*3.2);aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,var(--glow),var(--glow2) 50%,transparent)}
.kde-stage .halo::after{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-radial-gradient(circle,var(--groove) 0 1px,transparent 1.6px 8px);-webkit-mask:radial-gradient(closest-side,transparent 33%,#000 52%,transparent 97%);mask:radial-gradient(closest-side,transparent 33%,#000 52%,transparent 97%)}
.kde-stage .floorwrap{position:absolute;left:50%;top:calc(47% + var(--w)*.6);width:calc(var(--w)*1.12);height:calc(var(--w)*.17);translate:-50% 0;pointer-events:none;transition:transform 1.1s var(--spring)}
.kde-stage .floor{width:100%;height:100%;border-radius:50%;background:radial-gradient(closest-side,var(--floor),transparent);animation:kde-floor 5.2s var(--sine) -2.6s infinite alternate}
.kde-stage.out .floorwrap{transform:scaleX(calc(1.9*var(--os)))}
.kde-stage .tilt{position:absolute;left:50%;top:47%;width:var(--w);height:var(--w);margin:calc(var(--w)/-2) 0 0 calc(var(--w)/-2);transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform 1s var(--spring)}
.kde-stage .float,.kde-stage .turn,.kde-stage .shift{position:absolute;inset:0;transform-style:preserve-3d}
.kde-stage .float{animation:kde-float 5.2s var(--sine) -2.6s infinite alternate}
.kde-stage .turn{transform:rotateY(-21deg) rotateX(9deg) rotateZ(-.8deg);animation:kde-turn 12s var(--sine) -6s infinite alternate}
.kde-stage .shift{transform:translateX(-11%);transition:transform 1.15s var(--spring) .2s}
.kde-stage.out .shift{transform:scale(var(--os)) translateX(-55%);transition:transform 1.3s var(--pop)}
.kde-stage .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.kde-stage .front{transform:translateZ(calc(var(--t)/2));overflow:hidden;border-radius:1.5px;background:linear-gradient(#6d1710,#3a140c 58%,#1d110b)}
.kde-stage .front img{width:100%;height:100%;object-fit:cover}
.kde-stage .front::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.32)}
.kde-stage .gloss{position:absolute;inset:-10% -60%;pointer-events:none;background:linear-gradient(100deg,transparent 38%,rgba(255,244,228,.36) 47.5%,rgba(255,244,228,.07) 54%,transparent 62%);mix-blend-mode:soft-light;animation:kde-glint 12s var(--sine) -6s infinite alternate}
.kde-stage .back{transform:rotateY(180deg) translateZ(calc(var(--t)/2));background:linear-gradient(135deg,#e3d4c0,#c9b397)}
.kde-stage .edge{position:absolute;background:linear-gradient(90deg,#b08b66,#d9be9b 45%,#a4805c)}
.kde-stage .edge.top{left:0;width:100%;top:calc(var(--t)/-2);height:var(--t);transform:rotateX(90deg)}
.kde-stage .edge.bot{left:0;width:100%;top:calc(100% - var(--t)/2);height:var(--t);transform:rotateX(-90deg)}
.kde-stage .edge.spine{top:0;height:100%;left:calc(var(--t)/-2);width:var(--t);transform:rotateY(-90deg)}
.kde-stage .rec{position:absolute;left:2%;top:2%;width:96%;height:96%;transform-style:preserve-3d;transform:translateX(24%);transition:transform 1s var(--spring) .45s}
.kde-stage.out .rec{transform:translateX(116.5%);transition:transform 1.3s var(--pop)}
.kde-stage .rt{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 1px var(--rim);transition:transform .7s var(--spring),box-shadow .7s var(--spring)}
.kde-stage.out .rt{transform:translateZ(calc(var(--w)*.09)) rotateY(15deg) rotateX(-5deg);box-shadow:0 0 0 1px var(--rim),0 34px 60px -30px rgba(30,14,6,.6);transition:transform 1.2s var(--spring) .55s,box-shadow 1.2s var(--spring) .55s}
.kde-stage .disc{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle closest-side,transparent 0 37.6%,#09090a 38% 41.4%,transparent 41.9%),
    radial-gradient(circle closest-side,transparent 0 49.4%,rgba(255,255,255,.075) 49.7% 50.3%,transparent 50.6% 59.4%,rgba(255,255,255,.075) 59.7% 60.3%,transparent 60.6% 69.4%,rgba(255,255,255,.075) 69.7% 70.3%,transparent 70.6% 79.4%,rgba(255,255,255,.07) 79.7% 80.3%,transparent 80.6% 89.4%,rgba(255,255,255,.065) 89.7% 90.3%,transparent 90.6%),
    repeating-radial-gradient(circle,#0d0d0f 0 .7px,#1d1d21 1.1px,#0d0d0f 1.6px),#0f0f11;
  box-shadow:inset 0 0 0 1.5px #050506,inset 0 0 0 3px rgba(255,255,255,.05);
  -webkit-mask:radial-gradient(circle closest-side,transparent 0 2.4%,#000 2.9%);mask:radial-gradient(circle closest-side,transparent 0 2.4%,#000 2.9%);
  animation:kde-spin 2.4s linear infinite paused}
.kde-stage.out .disc,.kde.playing .kde-stage .disc{animation-play-state:running}
.kde-stage .lbl{position:absolute;left:50%;top:50%;width:38%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;display:grid;place-content:center;gap:2px;text-align:center;
  background:radial-gradient(circle at 42% 36%,#a65c49,#7a3d31);box-shadow:inset 0 0 0 1px #d8a066;color:#f6e8d3;font-family:var(--sans)}
.kde-stage .lbl b{font-size:calc(var(--w)*.026);letter-spacing:.04em;text-transform:uppercase}
.kde-stage .lbl i{font-style:normal;font-size:calc(var(--w)*.022);letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.kde-stage .sheen{position:absolute;inset:0;border-radius:50%;pointer-events:none;mix-blend-mode:screen;
  background:conic-gradient(from 222deg,transparent 0deg,rgba(255,238,215,.27) 20deg,transparent 44deg 180deg,rgba(255,238,215,.2) 200deg,transparent 224deg);
  -webkit-mask:radial-gradient(circle closest-side,transparent 0 38%,#000 39%);mask:radial-gradient(circle closest-side,transparent 0 38%,#000 39%);
  animation:kde-sheen 12s var(--sine) -6s infinite alternate}
.kde-stage .pullbtn{position:absolute;right:2px;bottom:4px;z-index:3;display:grid;place-items:center;width:52px;height:52px;padding:5px;border:0;border-radius:50%;background:var(--shell);box-shadow:inset 0 0 0 1px var(--ring);cursor:pointer;transition:transform .6s var(--spring)}
.kde-stage .pullbtn:active{transform:scale(.94)}
.kde-stage .pullbtn span{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:var(--surface);box-shadow:inset 0 1px 1px var(--core-hi),0 10px 22px -14px rgba(58,32,18,.5)}
.kde-stage .pullbtn svg{width:22px;height:22px;fill:none;stroke:var(--clay);stroke-width:1.3;stroke-linecap:round;transition:transform 1.2s var(--spring)}
.kde-stage.out .pullbtn svg{transform:translateX(3px) rotate(200deg)}
@media (min-width:960px){.kde-stage .pullbtn{right:8%;bottom:10%}}

@keyframes kde-float{from{transform:translateY(-7px)}to{transform:translateY(7px)}}
@keyframes kde-turn{from{transform:rotateY(-34deg) rotateX(11deg) rotateZ(-1.8deg)}to{transform:rotateY(-8deg) rotateX(7deg) rotateZ(.4deg)}}
@keyframes kde-glint{from{transform:translateX(-22%)}to{transform:translateX(22%)}}
@keyframes kde-sheen{from{transform:rotate(-16deg)}to{transform:rotate(16deg)}}
@keyframes kde-floor{from{transform:scale(.88);opacity:.72}to{transform:scale(1.05);opacity:1}}
@keyframes kde-spin{to{transform:rotate(1turn)}}
@media (prefers-reduced-motion:reduce){.kde *,.kde *::before,.kde *::after{animation:none!important;transition:none!important}}
@media print{.kde-stage,.kde-songs{display:none}}