/* ===========================================================================
   Drea Jeann — brand theme layered on UIkit 3 (stock uikit.min.css)
   Replicates the live YOOtheme look: Bodoni Moda headings, Commissioner body,
   Cairo navbar/buttons, wine + rose + orchid palette, soft lilac/blue glow
   backgrounds, glowing pill buttons, blush-veiled photo banners.
   =========================================================================== */
:root{
  --dj-wine:#812b3b;          /* big headings, home tile titles (9.0:1 on white) */
  --dj-rose:#c4819a;          /* release titles — 22px bold = large text, 3.0:1 */
  --dj-orchid:#d86bc7;        /* social icons + decorative (3.1:1, fine for graphics) */
  --dj-orchid-text:#c935b2;   /* navbar labels: live #d86bc7 lifted to WCAG AA 4.5:1 */
  --dj-logo:#b86bac;
  --dj-ink:#3d3d3d;           /* body text */
  --dj-ink-strong:#1d1d1f;
  --dj-grey:#767676;          /* active/hover nav (live #939393 lifted to 4.5:1) */
  --dj-muted-bg:#b9b9c3;      /* footer band */
  --dj-veil:rgba(255,242,242,.68);  /* blush overlay on page banners */
}

/* ---- Base typography (live: html 19px Commissioner) ---- */
html{font-family:'Commissioner',sans-serif;font-size:19px;color:var(--dj-ink);background:#fff}
body{line-height:1.5}
h1,h2,h3,h4,h5,h6,.uk-h1,.uk-h2,.uk-h3,.uk-heading-large{
  font-family:'Bodoni Moda',serif;font-weight:700;color:var(--dj-ink-strong);letter-spacing:0;margin:0 0 20px}
h1,.uk-h1{font-size:2.23125rem;line-height:1.2}
h2,.uk-h2{font-size:2.23125rem;line-height:1.2}
h3,.uk-h3{font-size:22px;line-height:1.4}
.uk-heading-large{font-size:3.4rem;line-height:1.1;color:var(--dj-wine)}
@media (min-width:960px){ .uk-heading-large{font-size:4rem} }
@media (min-width:1200px){ .uk-heading-large{font-size:6rem} }
.uk-text-danger{color:var(--dj-wine)!important}
.uk-text-primary{color:var(--dj-rose)!important}
p{margin:0 0 20px}
em{color:inherit}
a{color:var(--dj-wine)}
:focus-visible{outline:2px solid var(--dj-wine);outline-offset:3px}

.dj-skip{position:absolute;left:-9999px;top:0;z-index:2000;background:#fff;padding:10px 16px;color:var(--dj-ink-strong)}
.dj-skip:focus{left:10px;top:10px}

/* ---- Sections: white with the live site's faint lilac/blue glow ---- */
.tm-page{background:#fff;overflow-x:clip}
.dj-glow{background:#fff;background-image:
  radial-gradient(ellipse closest-corner at 30% 40%,rgba(169,131,229,.08),transparent 80%),
  radial-gradient(ellipse closest-corner at 50% 60%,rgba(106,175,245,.07),transparent 80%),
  radial-gradient(ellipse closest-corner at 70% 50%,rgba(106,175,245,.05),transparent 80%)}
.uk-section-large{padding-top:70px;padding-bottom:70px}
.uk-container-xlarge{max-width:1600px}

/* ---- Header ---- */
.uk-navbar-container:not(.uk-navbar-transparent){background:#fff}
.tm-headerbar-top{padding:20px 0}
.dj-logo img{display:block;width:400px;max-width:none;height:auto}
.tm-header-mobile .dj-logo img{width:auto;height:50px}
@media (min-width:640px){ .tm-header-mobile .dj-logo img{height:64px} }
.tm-header-mobile .uk-navbar-toggle{color:var(--dj-ink)}

.dj-nav>li>a{font-family:'Cairo',sans-serif;font-size:20px;text-transform:none;
  color:var(--dj-orchid-text);min-height:60px;padding:0 20px;
  transition:color .1s ease-in-out}
@media (min-width:960px){ .dj-nav>li>a{padding:0 30px} }
.dj-nav>li>a:hover,.dj-nav>li.uk-active>a{color:var(--dj-grey);
  background-image:radial-gradient(at 50% bottom,rgba(169,131,229,.1),rgba(169,131,229,0))}

.dj-social{list-style:none;margin:0;padding:0;gap:15px;align-items:center}
.dj-social a{display:block;line-height:0;transition:opacity .1s}
.dj-social a:hover{opacity:.7}

/* offcanvas: white panel, Bodoni menu (live) */
.uk-offcanvas-bar{background:#fff;color:var(--dj-ink)}
.uk-offcanvas-bar .uk-offcanvas-close{color:var(--dj-ink)}
.uk-nav-primary{font-family:'Bodoni Moda',serif;font-weight:700;font-size:22px;line-height:1.5}
.uk-offcanvas-bar .uk-nav-primary>li>a{color:var(--dj-ink-strong)}
.uk-offcanvas-bar .uk-nav-primary>li.uk-active>a,
.uk-offcanvas-bar .uk-nav-primary>li>a:hover{color:var(--dj-wine)}

/* ---- Home hero: full-height photo, focal point top-centre ---- */
.dj-hero{position:relative;min-height:60vh;overflow:hidden;background:#cfd8dc}
.dj-hero picture,.dj-hero img{position:absolute;inset:0;width:100%;height:100%}
.dj-hero img{object-fit:cover;object-position:top center}

/* ---- Page banners (Music / Videos / About): photo + blush veil + big title ---- */
.dj-banner{position:relative;min-height:50vh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.dj-banner picture,.dj-banner img,.dj-banner::after{position:absolute;inset:0;width:100%;height:100%}
.dj-banner img{object-fit:cover;object-position:center}
.dj-banner--top img{object-position:top center}
.dj-banner::after{content:"";background:var(--dj-veil)}
.dj-banner h1{position:relative;z-index:1;margin:0;text-align:center}

/* ---- Image tiles + release cards ---- */
.dj-tile{display:block;text-decoration:none!important}
.dj-tile img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.dj-tile h2{margin:20px 0 0;font-size:22px;line-height:1.4}
.dj-tile:hover img{opacity:.92}

.dj-release img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.dj-release h2{margin:20px 0 20px;font-size:22px;line-height:1.4}
.dj-release h2 a{color:inherit;text-decoration:none}
.dj-release h2 a:hover{color:var(--dj-wine)}

/* ---- Glowing pill button (live .uk-button-secondary) ---- */
.uk-button{font-family:'Cairo',sans-serif;font-size:16px;line-height:42px;padding:0 30px;
  border-radius:500px;text-transform:none}
.uk-button-secondary{position:relative;z-index:0;background:transparent!important;color:var(--dj-ink-strong)!important;border:none}
.uk-button-secondary::before,.uk-button-secondary::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit}
.uk-button-secondary::before{background-image:conic-gradient(from 60deg,#9ddafe,#dcbdf7,#fea2cb,#fbabda,#9ddafe);
  filter:blur(7px);transition:filter .1s ease-in-out}
.uk-button-secondary::after{background:#fff;border:3px solid #fff}
.uk-button-secondary:hover::before{filter:blur(14px)}
.uk-button-secondary:active::after{background:rgba(255,211,255,.8)}

/* ---- Videos: click-to-play YouTube cards (iframe loads only on click) ---- */
.dj-video{position:relative;display:block;aspect-ratio:16/9;background:#1d1d1f;overflow:hidden;cursor:pointer}
.dj-video img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.dj-video:hover img{transform:scale(1.03)}
.dj-video .dj-play{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;
  border-radius:50%;background:rgba(255,255,255,.88);box-shadow:0 0 18px rgba(216,107,199,.55);
  transition:background .15s ease, box-shadow .15s ease}
.dj-video .dj-play::after{content:"";position:absolute;left:27px;top:21px;
  border-style:solid;border-width:13px 0 13px 21px;border-color:transparent transparent transparent var(--dj-wine)}
.dj-video:hover .dj-play,.dj-video:focus-visible .dj-play{background:#fff;box-shadow:0 0 26px rgba(216,107,199,.85)}
.dj-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.dj-video-title{margin:16px 0 0;font-size:20px;line-height:1.4}
.dj-video-kind{font-family:'Commissioner',sans-serif;font-weight:400;font-size:14px;color:var(--dj-ink)}

/* ---- About: portrait + bio ---- */
.dj-portrait{display:block;width:100%;height:auto}
.dj-about-heading{color:#939393}   /* live "muted" title, lifted to 3:1 (large text) */
.dj-bio p{line-height:1.55}

/* ---- Footer band ---- */
footer.uk-section-muted{background:var(--dj-muted-bg);color:var(--dj-ink)}
footer .uk-text-small{font-size:14px}

/* ---- 404 ---- */
.dj-404{min-height:40vh;display:flex;align-items:center}