/*
Theme Name: DJ Joker Refresh
Description: A focused music and social links homepage for DJ Joker.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Template: Dj-Joker_v2
Text Domain: dj-joker-refresh
*/

:root{--djj-bg:#101010;--djj-panel:#181818;--djj-cream:#f3efe7;--djj-muted:#aaa69e;--djj-red:#fa2639;--djj-line:#353331;--djj-green:#c8f36b}
body.djj-refresh-body{margin:0;min-height:100vh;background:var(--djj-bg);color:var(--djj-cream);font-family:Arial,Helvetica,sans-serif}
.djj-refresh,.djj-refresh *{box-sizing:border-box}
.djj-refresh{max-width:1180px;min-height:100vh;margin:0 auto;padding:30px 42px 24px;display:flex;flex-direction:column;background:radial-gradient(ellipse at 78% 22%,rgba(250,38,57,.11),transparent 34%),linear-gradient(135deg,#101010 0%,#151515 65%,#101010 100%);color:var(--djj-cream)}
.djj-refresh a{color:inherit;text-decoration:none}
.djj-top{display:flex;align-items:center;justify-content:space-between}
.djj-brand{display:flex;gap:12px;align-items:center;font-size:12px;letter-spacing:.18em;font-weight:700}
.djj-mark{width:34px;height:34px;border:1px solid #555;border-radius:50%;display:grid;place-items:center;color:var(--djj-red);font-size:20px;line-height:1}
.djj-top-note{color:var(--djj-muted);font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.djj-main{display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:center;flex:1;padding:54px 0 60px}
.djj-eyebrow{font-size:11px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--djj-red);display:flex;align-items:center;gap:11px}
.djj-eyebrow:before{content:"";width:30px;height:1px;background:var(--djj-red)}
.djj-intro h1{font-size:clamp(64px,9.4vw,130px);line-height:.84;letter-spacing:-.085em;margin:24px 0 22px;font-weight:800;color:var(--djj-cream)}
.djj-intro h1 span{display:block;color:transparent;-webkit-text-stroke:1.5px var(--djj-cream)}
.djj-tag{font-size:15px;color:var(--djj-muted);letter-spacing:.04em;margin:0 0 34px}
.djj-listen{display:inline-flex;align-items:center;gap:13px;border-radius:3px;background:var(--djj-red);padding:15px 20px;color:white!important;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;transition:transform .2s,background .2s}
.djj-listen:hover{transform:translateY(-2px);background:#ff3b4d}
.djj-arrow{font-size:18px;line-height:10px}
.djj-links-label{font-size:10px;color:var(--djj-muted);letter-spacing:.22em;text-transform:uppercase;margin:45px 0 13px}
.djj-links{display:flex;flex-wrap:wrap;gap:9px}
.djj-link{display:flex;align-items:center;gap:11px;background:var(--djj-panel);border:1px solid var(--djj-line);padding:12px 14px;min-width:146px;font-size:12px;transition:border-color .2s,transform .2s}
.djj-link:hover{border-color:var(--djj-red);transform:translateY(-2px)}
.djj-icon{width:22px;height:22px;display:grid;place-items:center;color:var(--djj-red);font-weight:bold;font-size:15px}
.djj-link small{display:block;color:var(--djj-muted);font-size:9px;letter-spacing:.12em;text-transform:uppercase;margin-top:3px}
.djj-visual{position:relative;justify-self:center;width:min(100%,430px);aspect-ratio:.88;display:grid;place-items:center}
.djj-visual:before{content:"";position:absolute;inset:8% 7% 6% 14%;border:1px solid rgba(243,239,231,.18);transform:rotate(5deg)}
.djj-visual:after{content:"";position:absolute;inset:3% 13% 11% 8%;border:1px solid rgba(250,38,57,.65);transform:rotate(-5deg)}
.djj-portrait{position:relative;z-index:1;width:75%;aspect-ratio:.83;object-fit:cover;object-position:center 35%;filter:grayscale(100%);border:7px solid var(--djj-bg);box-shadow:0 20px 70px #0009}
.djj-corner{position:absolute;z-index:2;left:4%;top:9%;font-size:45px;line-height:1;color:var(--djj-red);font-weight:300}
.djj-stamp{position:absolute;z-index:2;right:0;bottom:8%;background:var(--djj-green);color:#111;padding:13px 15px;font-size:10px;line-height:1.5;letter-spacing:.15em;text-transform:uppercase;font-weight:bold;transform:rotate(-5deg)}
.djj-soundline{position:absolute;z-index:2;bottom:4%;left:8%;display:flex;gap:4px;align-items:center;height:22px}
.djj-soundline i{display:block;width:2px;background:var(--djj-cream);opacity:.8;border-radius:2px}
.djj-soundline i:nth-child(5n+1){height:7px}.djj-soundline i:nth-child(5n+2){height:14px}.djj-soundline i:nth-child(5n+3){height:20px}.djj-soundline i:nth-child(5n+4){height:11px}.djj-soundline i:nth-child(5n){height:17px}
.djj-foot{border-top:1px solid var(--djj-line);padding-top:17px;display:flex;justify-content:space-between;gap:18px;color:#817d77;font-size:10px;letter-spacing:.08em}
.djj-foot a{color:var(--djj-muted)}
@media(max-width:760px){.djj-refresh{padding:22px 22px 18px}.djj-top-note{font-size:9px}.djj-main{grid-template-columns:1fr;gap:22px;padding:54px 0 42px}.djj-intro{order:1}.djj-visual{order:0;width:min(75vw,330px);aspect-ratio:1.1;margin:0 auto 6px}.djj-portrait{width:69%;aspect-ratio:.92}.djj-corner{top:5%;left:8%;font-size:34px}.djj-stamp{bottom:5%;right:4%;font-size:8px;padding:10px 12px}.djj-eyebrow{font-size:9px}.djj-intro h1{font-size:clamp(62px,18vw,100px);margin:18px 0}.djj-tag{font-size:13px;margin-bottom:24px}.djj-links-label{margin-top:32px}.djj-link{flex:1 1 calc(50% - 9px);min-width:0}.djj-foot{font-size:8px;gap:14px}.djj-foot>*:last-child{text-align:right}}
@media(prefers-reduced-motion:reduce){.djj-refresh *{scroll-behavior:auto!important;transition:none!important}}