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

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