.site-header{position:sticky;top:0;z-index:200;transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .25s ease;background:#fff}
.djd-hid{transform:translateY(-100%)}
.djd-scrolled{box-shadow:0 2px 14px rgba(0,0,0,.12)}
@media(prefers-reduced-motion:reduce){.site-header{transition:none}}


@media(max-width:600px){
  /* Share buttons: wrap on narrow screens */
  .djd-share{flex-wrap:wrap;gap:0.5em;justify-content:flex-start}
  /* Related posts: reduce padding on mobile */
  .djd-related{padding:1.5em 0 2em}
  .djd-related h3{font-size:1em}
  /* Newsletter: tighter padding */
  .djd-nl-wrap{padding:1.5em 1em}
  .djd-nl-wrap h3{font-size:1em}
  /* Genre grid: tighter margins */
  .djd-genre-grid-wrap{margin:2em 0 1em}
  /* Footer: reduce padding */
  .djd-footer{padding:2em 1em 0}
  .djd-footer-brand{font-size:1em}
  /* Social row: tighten up */
  .djd-social-row{padding:0.75em 0 1em}
  /* Wordmark: scale if needed */
  .site-title svg{max-width:140px;height:auto}
}
@media(max-width:480px){
  /* Share buttons: full-width stacked on very small screens */
  .djd-share-btn{font-size:0.78em;padding:6px 10px}
  /* Related posts cards: single column already via grid */
  .djd-related-card-img{height:140px}
  /* Genre chips: slightly smaller */
  .djd-genre-letter-group a{font-size:0.78em;padding:4px 10px}
}


@media(max-width:600px){
  .djd-nl{padding:1.5em 1em}
  .djd-nl h3{font-size:1.05em}
  .djd-related-posts{padding:1.5em 0 2em}
  .djd-related-posts h3{font-size:1.05em}
  .djd-related-grid{gap:1em}
}
@media(max-width:480px){
  .djd-nl h3{font-size:1em}
  .djd-related-posts h3{font-size:1em}
}


.djd-reading-time{display:inline-flex;align-items:center;gap:0.35em;font-size:0.78em;color:#999;margin:0 0 1.25em;letter-spacing:0.06em;text-transform:uppercase;font-weight:500;font-family:inherit}
.djd-rt-icon{color:#4dd9c0;font-style:normal;font-size:1.05em}

#djdww{--bg:#0f0e22;--card:#1b1a35;--line:rgba(245,240,232,.14);--text:#F5F0E8;--muted:#bdb6d6;--gold:#c8a951;--pink:#ff3366;--mint:#5ee9c5;position:relative;width:100%!important;max-width:1200px!important;left:auto!important;transform:none!important;color:var(--text);font-size:17px;line-height:1.6;margin-bottom:40px}
#djdww *{box-sizing:border-box}
body:has(#djdww) .entry-header{display:none!important}
#main:has(#djdww) .main-content,.main-content:has(#djdww){width:100%!important;max-width:100%!important;flex:1 1 100%!important}
.entry-content:has(#djdww){overflow:visible!important}
.entry-content #djdww h1,.entry-content #djdww h2,.entry-content #djdww h3{font-family:"Bricolage Grotesque",system-ui,sans-serif!important;color:#f5f0e8!important;letter-spacing:-.01em;margin:0!important}
#djdww p{margin:0 0 12px!important}
#djdww a{color:var(--mint)}
#djdww .ww-eyebrow{display:inline-flex;align-items:center;gap:10px;font:800 12px/1 system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--mint);margin:0 0 14px!important}
#djdww .ww-hero{position:relative;overflow:hidden;padding:56px 44px 48px;border-radius:28px;border:1px solid var(--line);background:radial-gradient(900px 400px at 85% -10%,rgba(255,51,102,.22),transparent 60%),radial-gradient(700px 380px at 0% 120%,rgba(94,233,197,.14),transparent 60%),#12112a;margin:8px 0 26px}
.entry-content #djdww .ww-hero h1{font-size:clamp(36px,6vw,64px)!important;line-height:1.02!important;max-width:760px;margin:0 0 18px!important}
#djdww .ww-hero h1 em{font-style:normal;color:var(--pink)}
#djdww .ww-lede{font-size:19px!important;color:#e6e1f4!important;max-width:680px}
#djdww .ww-ctas{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 0}
#djdww .ww-btn{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:11px 22px;border-radius:999px;font-weight:700;font-size:1rem;text-decoration:none!important;border:1px solid transparent;transition:transform .2s,border-color .2s}
#djdww .ww-btn:hover{transform:translateY(-2px)}
#djdww .ww-btn.pink{background:var(--pink);color:#fff!important;box-shadow:0 10px 24px rgba(255,51,102,.28)}
#djdww .ww-btn.ghost{border-color:rgba(245,240,232,.35);color:#fff!important;background:rgba(255,255,255,.03)}
#djdww .ww-btn.ghost:hover{border-color:var(--mint)}
#djdww .ww-jump{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0;padding:0;list-style:none}
#djdww .ww-jump li{margin:0}
#djdww .ww-jump a{display:inline-block;padding:9px 15px;border-radius:999px;border:1px solid rgba(245,240,232,.22);color:#e6e1f4!important;text-decoration:none!important;font:700 14px/1 system-ui,sans-serif}
#djdww .ww-jump a:hover{border-color:var(--mint);color:var(--mint)!important}
#djdww .ww-disc{position:absolute;right:-60px;top:-40px;width:300px;height:300px;opacity:.5;pointer-events:none}
#djdww .ww-disc svg{width:100%;height:100%;animation:wwSpin 26s linear infinite}
@keyframes wwSpin{to{transform:rotate(360deg)}}
#djdww section{scroll-margin-top:90px}
#djdww .ww-sec{padding:34px 0 8px}
.entry-content #djdww h2{font-size:clamp(1.55rem,3.6vw,2.2rem)!important;line-height:1.12!important;margin:0 0 .8rem!important}
.entry-content #djdww h2:after{content:"";display:block;width:64px;height:4px;border-radius:4px;margin-top:12px;background:linear-gradient(90deg,#ff3366,#c8a951,#5ee9c5)}
.entry-content #djdww h3{font-size:1.3rem!important;line-height:1.2!important;margin:0 0 8px!important}
#djdww .ww-muted{color:var(--muted)!important}
#djdww .ww-card{position:relative;padding:26px;border-radius:22px;border:1px solid var(--line);background:var(--card)}
#djdww .ww-row{display:grid;grid-template-columns:64px 1fr;gap:18px;align-items:start}
#djdww .ww-ico{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.04);border:1px solid var(--line)}
#djdww .ww-ico svg{width:30px;height:30px}
#djdww .ww-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
#djdww .ww-go{display:inline-flex;gap:6px;align-items:center;font-weight:700;text-decoration:none!important;color:var(--mint)!important;margin-top:4px}
#djdww .ww-go:hover{text-decoration:underline!important}
#djdww .ww-book{background:linear-gradient(120deg,rgba(255,51,102,.16),rgba(200,169,81,.10)),var(--card)}
#djdww .ww-pitch{border-color:rgba(255,51,102,.35)}
#djdww .ww-steps{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:12px}
#djdww .ww-steps li{position:relative;margin:0;padding:16px 18px 16px 56px;border-radius:16px;background:var(--card);border:1px solid var(--line)}
#djdww .ww-steps li:before{content:"";position:absolute;left:20px;top:22px;width:14px;height:14px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 5px rgba(94,233,197,.15)}
#djdww .ww-steps li:nth-child(2):before{background:var(--gold);box-shadow:0 0 0 5px rgba(200,169,81,.18)}
#djdww .ww-steps li:nth-child(3):before{background:var(--pink);box-shadow:0 0 0 5px rgba(255,51,102,.18)}
#djdww .ww-steps strong{color:#fff}
#djdww .ww-rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
#djdww .ww-rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){#djdww .ww-rv{opacity:1;transform:none;transition:none}#djdww .ww-disc svg{animation:none}}
@media(max-width:760px){#djdww .ww-grid{grid-template-columns:1fr}#djdww .ww-hero{padding:34px 22px 30px}#djdww .ww-disc{width:200px;height:200px;right:-70px;top:-50px;opacity:.35}#djdww .ww-card{padding:20px}#djdww .ww-row{grid-template-columns:1fr;gap:12px}#djdww .ww-lede{font-size:17px!important}}

/* Newsletter CTA: switch to dark bg to match site dark theme —
   cream text (#f5f0e8) on #141328 = 16:1, well above WCAG AA */
.djd-nl{background:#141328!important;border:1px solid rgba(77,217,192,0.3)!important;border-left:3px solid #4dd9c0!important}
/* Newsletter button: darken coral to #c0244a so white text = 4.9:1 (AA pass) */
.djd-nl-btn{background:#c0244a!important;border-color:#c0244a!important}
.djd-nl-btn:hover{background:#a01e3e!important;border-color:#a01e3e!important}
/* Hire DJ nav button: dark navy text on teal bg = 5.3:1 (AA pass) */
nav .djd-hire-btn a,#masthead .djd-hire-btn a,.djd-hire-btn a{color:#0f0e1a!important;font-weight:700!important}



.djdph{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px;align-items:center;margin:0 0 30px}
.djdph-text p{margin:0 0 .6em;font-size:1.12rem;line-height:1.7}
.djdph-text p:last-child{margin-bottom:0}
.djdph-art{position:relative;border-radius:18px;overflow:hidden;border:1px solid rgba(245,240,232,.12);background:linear-gradient(135deg,#16152A 0%,#0F0E1A 100%);box-shadow:0 20px 60px -30px rgba(94,233,197,.35);aspect-ratio:440/260}
.djdph-svg{display:block;width:100%;height:100%}
.djdph-svg .ph-spin{animation:phSpin 7s linear infinite}
.djdph-svg .ph-eq{animation:phEq 1.1s ease-in-out infinite alternate;transform-box:view-box}
.djdph-svg .ph-bob{animation:phBob 3.2s ease-in-out infinite}
.djdph-svg .ph-pulse{animation:phPulse 1.1s ease-in-out infinite;transform-box:view-box}
.djdph-svg .ph-wave{animation:phWave 4s linear infinite}
.djdph-svg .ph-draw{stroke-dasharray:600;stroke-dashoffset:600;animation:phDraw 1.6s ease forwards .2s}
.djdph-svg path.ph-draw[stroke-dasharray="6 7"]{stroke-dashoffset:0;animation:phMarch 1.2s linear infinite}
.djdph-svg .ph-pop{opacity:0;animation:phPop .6s cubic-bezier(.3,1.6,.5,1) forwards;transform-box:view-box}
.djdph-svg .ph-step{animation:phStep 2s steps(1) infinite;opacity:.25}
.djdph-svg .ph-knob{animation:phKnob 5s ease-in-out infinite;transform-box:view-box}
.djdph-svg .ph-thump{animation:phThump .6s ease-in-out infinite;transform-box:view-box}
.djdph-svg .ph-blink{animation:phBlink 1.6s steps(2) infinite}
.djdph-svg .ph-arm{animation:phArm 6s ease-in-out infinite;transform-box:view-box}
@keyframes phSpin{to{transform:rotate(360deg)}}
@keyframes phEq{0%{transform:scaleY(.35)}100%{transform:scaleY(1)}}
@keyframes phBob{50%{transform:translateY(-6px)}}
@keyframes phPulse{50%{transform:scale(1.35);opacity:.35}}
@keyframes phWave{to{transform:translateX(-56px)}}
@keyframes phDraw{to{stroke-dashoffset:0}}
@keyframes phMarch{to{stroke-dashoffset:-26}}
@keyframes phPop{0%{opacity:0;transform:scale(.3)}100%{opacity:1;transform:scale(1)}}
@keyframes phStep{0%,12%{opacity:1}13%,100%{opacity:.25}}
@keyframes phKnob{50%{transform:rotate(70deg)}}
@keyframes phThump{50%{transform:scale(1.08)}}
@keyframes phBlink{50%{opacity:.35}}
@keyframes phArm{50%{transform:rotate(3deg)}}
@media (max-width:780px){.djdph{grid-template-columns:1fr;gap:18px}.djdph-art{order:-1}}
@media (prefers-reduced-motion:reduce){.djdph-svg *{animation:none!important;opacity:1!important;stroke-dashoffset:0!important}}

@media only screen and (min-width:782px){.h-dh .djd-breadcrumb{display:none!important}}
.djdtl-title,.djdtl-dek,.djdtw-title,.mm-title,.djdgl-title,.djdgl-dek,.djdmm-title,.djdmm-dek,.djdtb-title,.djdtb-dek,.djdfs-title,.djdfa-title,.djdfa-dek{display:none!important}


.djdts{margin:48px 0 8px;padding:26px 0 0;border-top:1px solid rgba(245,240,232,.12)}
.djdts-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin:0 0 16px}
.djdts-k{font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#5EE9C5;margin:0}
.djdts-sub{margin:0;color:rgba(245,240,232,.7);font-size:15px}
.djdts-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.djdts a.djdts-c{display:flex;flex-direction:column;background:#16152A;border:1px solid rgba(245,240,232,.12);border-radius:14px;overflow:hidden;color:#F5F0E8;text-decoration:none!important;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.djdts a.djdts-c:hover,.djdts a.djdts-c:focus-visible{transform:translateY(-4px);border-color:var(--c);box-shadow:0 16px 36px -16px var(--c)}
.djdts-art{display:block;aspect-ratio:440/260;background:linear-gradient(135deg,#16152A,#0F0E1A);border-bottom:1px solid rgba(245,240,232,.08)}
.djdts-art svg{display:block;width:100%;height:100%}
.djdts-body{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px;flex:1}
.djdts .djdts-t{font-family:"Bricolage Grotesque",Barlow,sans-serif;font-weight:800;font-size:18px;line-height:1.2;color:#F5F0E8!important}
.djdts-d{font-size:14px;line-height:1.5;color:rgba(245,240,232,.72)}
.djdts .djdts-go{margin-top:auto;padding-top:6px;font-size:13px;font-weight:600;color:var(--c)!important;white-space:nowrap}
.djdts-all{margin:14px 0 0;font-size:14px}
.djdts-all a{color:#5EE9C5}
.djdts .djdph-svg *{animation-play-state:paused}
.djdts a.djdts-c:hover .djdph-svg *,.djdts a.djdts-c:focus-visible .djdph-svg *{animation-play-state:running}
.djdts .ph-pop,.djdts .ph-draw{animation-play-state:running!important}
@media (max-width:620px){.djdts-g{grid-template-columns:1fr 1fr;gap:10px}.djdts-d{display:none}.djdts-t{font-size:15px}.djdts-body{padding:10px 12px 12px}}

/* Lift the accent from ochre to a brighter, higher chroma gold. */
:root{--djd-gold-bright:#ffc93c;--djd-gold-lift:#ffe08a;--djd-gold-deep:#c8901b}

/* The theme paints its gold as rgb(200,169,81). Low saturation is what made */
/* it read flat on the dark panels. These map the same roles to a lit gold. */
a[style*="200, 169, 81"],span[style*="200, 169, 81"]{color:#ffc93c}
.has-gold-color,.has-accent-color{color:#ffc93c}
.has-gold-background-color,.has-accent-background-color{background-color:#ffc93c}

/* Section eyebrows and small caps labels carry most of the gold on the site. */
.djd-eyebrow,.djd-kicker,.wp-block-heading em,.entry-meta a,.cat-links a{color:#ffc93c}

/* Rules and dividers: a flat gold hairline is the other thing that dulls it. */
hr.wp-block-separator{border-color:rgba(255,201,60,.45)}

/* Buttons: a gradient reads lit rather than painted. */
.wp-block-button__link{background-image:linear-gradient(95deg,#34f5e1,#ffc93c);color:#0f0e1a;border:0;font-weight:600}
.wp-block-button__link:hover{background-image:linear-gradient(95deg,#5cf8e8,#ffe08a);color:#0f0e1a}
.wp-block-button.is-style-outline .wp-block-button__link{background-image:none;color:#ffc93c;border:1px solid rgba(255,201,60,.55)}
.wp-block-button.is-style-outline .wp-block-button__link:hover{background:rgba(255,201,60,.12);color:#ffe08a}

/* Links inside body copy: brighter on hover so the page feels alive. */
.entry-content a:not(.wp-block-button__link):hover{color:#ffe08a}

/* Give headings a little depth instead of flat fill. */
.entry-content h2,.entry-content h3{text-shadow:0 1px 0 rgba(0,0,0,.35)}
/* Repoint the theme accent tokens from the old ochre to the lit gold, so the */
/* rest of the site reads as one palette rather than two. */
:root{
--newspack-theme-color-link:#ffc93c;
--newspack-theme-color-link-hover:#c8901b;
--newspack-theme-color-secondary:#ffc93c;
--newspack-theme-color-secondary-variation:#c8901b;
--newspack-secondary-color:#ffc93c;
--wp--preset--color--secondary:#ffc93c;
}

/* The related post headlines at the foot of an article set no colour on the */
/* anchor, so they fell through to the theme link colour. Pin them to cream. */
/* Button shaped links inside an article were taking the article link colour
   from an !important rule, which put gold text on their own gold fill. Give
   them back their dark label. */
html body.single .entry-content a.djd-inline-cta-btn,
html body.single .entry-content a.wp-block-button__link{color:#0f0e1a !important}

html body .djd-related-grid .djd-related-item-title a{color:#f5f0e8 !important}
html body .djd-related-grid .djd-related-item-title a:hover{color:#ffc93c !important}

/* Hire DJ nav button — highest-priority specificity to beat dark theme overrides */
#masthead .menu-item.djd-hire-btn > a,
.main-navigation .menu-item.djd-hire-btn > a,
ul.menu .djd-hire-btn > a,
li.djd-hire-btn > a{background:#ffffff!important;color:#0f0e1a!important;border-radius:2px!important}
/* Newsletter submit button — hard override for cascade winner */
.djd-nl .djd-nl-btn,.djd-nl button{background:#c0244a!important;color:#ffffff!important;border-color:#c0244a!important}


/* Card hover lift effect */
.post, article.type-post, .cat-featured-post {
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    border-radius: 4px;
    overflow: hidden;
}
.post:hover, article.type-post:hover, .cat-featured-post:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
/* Fix section category label headings (were 15px, smaller than body) */
.article-section-title, .cat-section-title, .section-header__title {
    font-size: 11px !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
/* Respect user reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}


/* Hide Newspack credit bar entirely — block footer has own copyright + privacy link */
.site-info { display: none !important; }
/* Hide duplicate text-only social links (○ Instagram ○ SoundCloud) inside footer block.
   The standalone SVG icon row (Find us) is kept. */
footer .djd-social-row { display: none !important; }

.djd-share-bar{display:flex;align-items:center;gap:8px;margin:2em 0 1em;padding:1em 0;border-top:1px solid rgba(255,255,255,0.1);flex-wrap:wrap}.djd-share-label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.6;margin-right:4px}.djd-share-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:4px;font-size:13px;font-weight:500;text-decoration:none!important;border:1px solid rgba(255,255,255,0.2);background:rgba(255,255,255,0.05);color:inherit!important;cursor:pointer;transition:background .15s,border-color .15s,transform .15s;font-family:inherit;line-height:1}.djd-share-btn:hover{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.35);transform:translateY(-1px)}.djd-share-x:hover{border-color:#1d9bf0;color:#1d9bf0!important}.djd-share-fb:hover{border-color:#1877f2;color:#1877f2!important}.djd-share-copy:hover{border-color:#aaa}

.djd-related{margin:2.5em 0;padding:2em 0;border-top:1px solid rgba(255,255,255,0.1)}
.djd-related-title{font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.6;margin:0 0 1.2em}
.djd-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2em}
@media(max-width:640px){.djd-related-grid{grid-template-columns:1fr}}
@media(min-width:641px) and (max-width:900px){.djd-related-grid{grid-template-columns:repeat(2,1fr)}}
.djd-related-card{display:flex;flex-direction:column;text-decoration:none!important;color:inherit!important;border:1px solid rgba(255,255,255,0.08);border-radius:4px;overflow:hidden;transition:transform .2s,box-shadow .2s}
.djd-related-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,0.35);border-color:rgba(255,255,255,0.18)}
.djd-related-thumb{aspect-ratio:16/9;overflow:hidden;background:#1a1a1a}
.djd-related-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.djd-related-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#1e1e1e,#2a2a2a)}
.djd-related-body{padding:.8em .9em .9em;flex:1}
.djd-related-cat{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.55;margin-bottom:.4em}
.djd-related-heading{font-size:.9em;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}


.djd-breadcrumb{font-size:11px;letter-spacing:.05em;opacity:.55;margin-bottom:1.2em;padding:.4em 0}
.djd-breadcrumb a{color:inherit;text-decoration:none;opacity:.8}
.djd-breadcrumb a:hover{opacity:1;text-decoration:underline}
.djd-breadcrumb .breadcrumb_last{opacity:1}