/* HipHopHaven skin for the MusicHaven component system.
   Loads AFTER styles.css. Behavior/geometry kept; identity retokened to the
   approved blue/black/white. Fonts: PROVISIONAL neutral stack (Open Item 1) —
   never Playfair, and the hand-lettered wordmark is never set in any font. */
:root{
--mh-bg:#FFFFFF;--mh-surface:#FFFFFF;--mh-surface-2:#F2F7FA;
--mh-ink:#0E1216;--mh-ink-soft:#25313A;--mh-muted:#59636D;
--mh-line:rgba(14,18,22,.16);--mh-line-soft:rgba(14,18,22,.08);
--mh-gold:#0996CD;--mh-gold-bright:#18AFEE;--mh-gold-ink:#065E82;
--mh-violet:#0388D5;--mh-violet-ink:#065E82;
--mh-plum:#0E1216;--mh-plum-2:#090C0F;--mh-grape:#152028;
--mh-night:#0E1216;--mh-night-2:#152028;
--mh-night-text:#F4F8FB;--mh-night-muted:#9FB0BD;
--mh-pulsebar:linear-gradient(100deg,#0E1216 0%,#10161B 52%,#0B2A3A 100%);
--mh-serif:'Helvetica Neue',Helvetica,Arial,sans-serif;
--mh-sans:'Helvetica Neue',Helvetica,Arial,sans-serif;
--mh-shadow:0 16px 44px rgba(6,40,58,.16);--mh-shadow-soft:0 8px 22px rgba(6,40,58,.12);
--mh-grad-gold:linear-gradient(135deg,#18AFEE,#0996CD);
--mh-grad-violet:linear-gradient(135deg,#0388D5,#18AFEE);
}
:root,.mh-skin-default{
--sk-bg:#FFFFFF;--sk-panel:#F2F7FA;--sk-accent:#0996CD;--sk-accent-2:#0388D5;
--sk-text:#0E1216;--sk-muted:#59636D;--sk-chip-bg:#0996CD;--sk-chip-text:#FFFFFF;
--sk-glow:rgba(9,150,205,.26);--sk-grad:linear-gradient(135deg,#18AFEE,#0996CD);
}
h1,h2,h3,h4{font-weight:900;letter-spacing:-0.015em;line-height:1.16}
/* Blue fills carry white text (MusicHaven's gold carried dark) */
.mh-btn--gold,.mh-btn--gold:hover,.mh-btn--gold:focus{color:#fff}
.mh-btn--gold{box-shadow:0 3px 0 #065E82,0 10px 22px rgba(6,94,130,.3),inset 0 1px 0 rgba(255,255,255,.35)}
.mh-btn--gold:hover{box-shadow:0 10px 26px rgba(9,150,205,.42)}
.mh-btn--gold:active{box-shadow:0 1px 0 #065E82,0 5px 12px rgba(6,94,130,.3),inset 0 1px 0 rgba(255,255,255,.35)}
:focus-visible{outline-color:#0996CD}
.mh-on-dark :focus-visible,.mh-skinned :focus-visible{outline-color:#18AFEE}
.is-success::before{color:#065E82}
.mh-on-dark .is-success::before,.mh-skinned .is-success::before{color:#18AFEE}
/* Hardcoded plum/gold hexes in components.css that tokens can't reach — re-anchored to ink/brand blue */
.mh-appbar{background:linear-gradient(180deg,#152028 0%,#0E1216 100%);border-top:1.5px solid rgba(24,175,238,.5);box-shadow:0 -10px 30px rgba(4,10,14,.4),inset 0 1px 0 rgba(255,255,255,.08)}
.mh-genrepill{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 30%),linear-gradient(135deg,#0B2A3A,#0E4A66);border:2px solid rgba(24,175,238,.9);color:#fff;box-shadow:0 20px 42px rgba(6,40,58,.3),0 4px 0 rgba(6,74,102,.6),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -10px 20px rgba(0,0,0,.18)}
.mh-genrepill.is-focus .mh-genrepill__icon{color:#7FD5F7}
.mh-genrepill.is-focus{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 30%),linear-gradient(135deg,#065E82,#0996CD);border:2px solid rgba(24,175,238,.9);color:#fff;box-shadow:0 20px 42px rgba(6,40,58,.3),0 4px 0 rgba(6,74,102,.6),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -10px 20px rgba(0,0,0,.18)}
.mh-genrepill.is-focus .mh-genrepill__label,.mh-genrepill .mh-genrepill__label{color:inherit}
body{background:#FFFFFF}
.mh-genrepill--more{background:transparent;border-style:dashed;box-shadow:none;color:var(--mh-muted)}
.mh-wingpill--primary,.mh-utilpill--primary{background:linear-gradient(135deg,#0B2A3A,#0E4A66);color:#fff;border-color:rgba(24,175,238,.85)}
.mh-wingpill--primary:hover,.mh-utilpill--primary:hover{color:#fff}
.mh-wingpill--primary .mh-wingpill__icon,.mh-utilpill--primary .mh-utilpill__icon{color:#7FD5F7}
.mh-utilpill--login{background:linear-gradient(180deg,#FFFFFF,#EAF6FC);border-color:rgba(6,94,130,.3)}
.mh-pulsebar{border-color:rgba(24,175,238,.55);box-shadow:0 16px 34px rgba(6,14,20,.34),0 3px 0 rgba(6,94,130,.4),inset 0 1px 0 rgba(255,255,255,.14)}
.mh-pulsebar::before{background:radial-gradient(42% 220% at 0% 50%,rgba(24,175,238,.18),transparent 55%)}
.mh-pulsebar__label{box-shadow:0 6px 16px rgba(9,150,205,.45),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -3px 6px rgba(6,94,130,.3)}
.mh-pulsebar__eq span{background:#0E1216}
.mh-sticker{box-shadow:0 4px 14px rgba(9,150,205,.32)}
.mh-sticker__dot{background:#0E1216}
.mh-chip--era{border-color:rgba(9,150,205,.55)}
.mh-chip--mood{border-color:rgba(3,136,213,.35)}
.mh-edge-gold{border-color:rgba(24,175,238,.6)}
.mh-skinned.mh-card{border-color:rgba(9,150,205,.5)}
.mh-card:not(.mh-skinned):hover{border-color:rgba(9,150,205,.55);box-shadow:0 16px 38px rgba(6,40,58,.16)}
.mh-brandband{background:radial-gradient(46% 130% at 50% 46%,rgba(24,175,238,.12),transparent 62%),var(--mh-bg)}
.mh-genrebar{background:var(--mh-bg)}
.mh-services-band{background:var(--mh-surface)}
.mh-posterband{border-color:rgba(24,175,238,.6);box-shadow:0 24px 50px rgba(6,40,58,.16),0 4px 0 rgba(9,150,205,.28),inset 0 1px 0 rgba(255,255,255,.6);background:linear-gradient(180deg,#FFFFFF,#EAF6FC)}
.mh-poster-tile .mh-bubble__ring{box-shadow:0 6px 16px rgba(9,150,205,.3)}
.mh-join{background:radial-gradient(110% 160% at 85% -20%,rgba(24,175,238,.14),transparent 55%),radial-gradient(90% 140% at 5% 120%,rgba(3,136,213,.2),transparent 55%),var(--mh-night)}
.mh-zonebar{border-color:rgba(24,175,238,.5);box-shadow:0 16px 32px rgba(6,40,58,.22),0 3px 0 rgba(6,94,130,.35),inset 0 1px 0 rgba(255,255,255,.12)}
.mh-zonebar--plum{background:linear-gradient(100deg,#0E1216 0%,#152028 100%)}
.mh-zonebar--grape{background:linear-gradient(100deg,#0B2A3A 0%,#0E1216 100%)}
.mh-zonebar--gold{background:linear-gradient(100deg,#065E82 0%,#0996CD 100%)}
.mh-zonebar__icon{border-color:rgba(24,175,238,.6)}
.mh-slide{border-color:rgba(24,175,238,.55);box-shadow:0 28px 60px rgba(6,40,58,.3),0 5px 0 rgba(6,94,130,.4),inset 0 1px 0 rgba(255,255,255,.14)}
@media (hover:hover){.mh-heroslider__slide:hover .mh-slide{box-shadow:0 36px 72px rgba(6,40,58,.34),0 6px 0 rgba(6,94,130,.45)}}
@keyframes mh-pulse{0%{box-shadow:0 0 0 0 rgba(24,175,238,.6)}70%{box-shadow:0 0 0 12px rgba(24,175,238,0)}100%{box-shadow:0 0 0 0 rgba(24,175,238,0)}}
.mh-sticker{color:#fff}
/* Hardcoded gold rims/underlines from the Edge system re-anchor to brand blue/ink */
.mh-card,.mh-flipcard__face{border-color:rgba(9,150,205,.38)}

.mh-flipcard__u{color:#18AFEE;font-weight:900}
.mh-appbar button{min-height:76px}.mh-appbar__glyph{font-size:1.6em}.mh-appbar__label{font-size:1.05rem;font-weight:800}
.mh-card__title{font-size:1.34rem}.mh-card__dek{font-size:1.08rem}.mh-card__meta{font-size:1rem}.mh-flipcard__title{font-size:1.45rem}.mh-flipcard__meta{font-size:1.02rem}
.mh-slide__title,.mh-hero__title,.mh-zone-head__title,.mh-zonebar__title{line-height:1.18;padding-bottom:.04em}
/* Naming law: headlines never cut off */
.mh-card__title,.mh-card__dek,.mh-slide__title,.mh-heroslider__title,.mh-zone-head__title,.mh-zone-head__dek,.mh-zonebar__title,.mh-zonebar__subtitle,.mh-flipcard__title{display:block;-webkit-line-clamp:initial;-webkit-box-orient:initial;overflow:visible;max-height:none;text-overflow:clip;white-space:normal}

/* ===== FULL-STORY CONTROL — CAPSIZED (founder, Aug 29) =====
   The in-component route control is 1.5x its old rendered treatment: real all-caps, >=22px, weight 900,
   58px desktop floor / 52px mobile, inside its own action area. FlipCard fronts keep READ MORE and are
   NOT touched by this rule. */
.hh-cta-full,.mh-pfh__cta .mh-btn,.mh-hero__actions .mh-btn--gold{
 display:inline-flex;align-items:center;justify-content:center;gap:10px;
 min-height:58px;padding:14px 26px;font-size:22px;font-weight:900;line-height:1.05;white-space:nowrap;
 text-transform:uppercase;letter-spacing:.015em;border-radius:999px;text-decoration:none;
 background:#1FA6D9;color:#04222F;border:2.5px solid #1FA6D9;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 3px 0 rgba(4,54,78,.55);
 transition:background .15s cubic-bezier(.2,.8,.2,1),transform .15s cubic-bezier(.2,.8,.2,1)}
.hh-cta-full:hover,.mh-pfh__cta .mh-btn:hover,.mh-hero__actions .mh-btn--gold:hover{
 background:#4FC4F5;border-color:#4FC4F5;color:#04222F;text-decoration:none;transform:translateY(-2px)}
.hh-cta-full:active,.mh-pfh__cta .mh-btn:active{transform:scale(.98)}
.hh-cta-full:focus-visible,.mh-pfh__cta .mh-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (max-width:600px){
 .hh-cta-full,.mh-pfh__cta .mh-btn,.mh-hero__actions .mh-btn--gold{min-height:52px;font-size:22px;padding:12px 16px}
 .mh-listen{min-height:52px;padding:12px 16px;font-size:19px}
 .hh-listendrawer{width:100%}}

/* ===== LISTEN — the drawer trigger, not a link ===== */
.mh-listen{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;
 min-width:44px;padding:12px 22px;font:inherit;font-size:19px;font-weight:800;line-height:1.05;
 text-transform:uppercase;letter-spacing:.03em;border-radius:999px;cursor:pointer;
 background:rgba(255,255,255,.10);color:#fff;border:2.5px solid rgba(255,255,255,.62);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.mh-listen:hover{background:rgba(255,255,255,.2);border-color:#fff}
.mh-listen:focus-visible{outline:3px solid #fff;outline-offset:3px}
.mh-listen[aria-expanded="true"]{background:#1FA6D9;border-color:#1FA6D9;color:#04222F}
.mh-listen__glyph{font-size:1.25em;line-height:1}
.hh-listendrawer{border:2px solid rgba(31,166,217,.5);border-radius:14px;overflow:hidden;background:#fff;
 margin:0;max-width:100%}
.hh-listendrawer[hidden]{display:none}
@media (max-width:600px){.hh-listendrawer{border-radius:12px;margin-inline:0}}

/* the LISTEN drawer's transport — the provider frame is visible and real, not a decorative strip */
.hhla{padding:14px}
.hhla__id{margin:0 0 10px}
.hhla__track{margin:0;font:800 19px/1.2 'Barlow Condensed',system-ui,sans-serif;color:#0B1820;text-transform:uppercase}
.hhla__prov{margin:3px 0 0;font:700 11.5px/1.4 'Helvetica Neue',Arial,sans-serif;letter-spacing:.06em;color:#59636D;text-transform:uppercase}
.hhla__stage{width:100%;max-width:440px;aspect-ratio:16/9;background:#04222F;border-radius:10px;overflow:hidden}
.hhla__stage iframe,.hhla__stage .hhha__frame{width:100%;height:100%;border:0;display:block}
.hhla__row{display:flex;align-items:center;gap:14px;margin-top:12px;flex-wrap:wrap}
.hhla__t{display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:12px 24px;border-radius:999px;
 background:#1FA6D9;color:#04222F;border:2.5px solid #1FA6D9;font:900 19px/1 'Barlow Condensed',system-ui,sans-serif;
 text-transform:uppercase;letter-spacing:.03em;cursor:pointer;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 3px 0 rgba(4,54,78,.55)}
.hhla__t:hover{background:#4FC4F5;border-color:#4FC4F5}
.hhla__t:focus-visible{outline:3px solid #04222F;outline-offset:3px}
.hhla__read{margin:0;font:700 13px/1.3 'Helvetica Neue',Arial,sans-serif;letter-spacing:.05em;color:#0B1820;text-transform:uppercase}