.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}


/* 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}}