/* HIPHOPHAVEN FULL STORY overlay + CATEGORY RIBBON — HipHopHaven ink/blue only. */
html.hh-fs-lock,html.hh-fs-lock body{overflow:hidden}
.hh-fs{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;padding:24px}
.hh-fs[hidden]{display:none}
.hh-fs__scrim{position:absolute;inset:0;background:rgba(6,20,28,.72)}
.hh-fs__panel{position:relative;width:min(860px,100%);max-height:min(90vh,1000px);display:flex;flex-direction:column;background:#fff;border:3px solid #0F9FE1;border-radius:16px;box-shadow:0 24px 60px rgba(4,26,38,.45);opacity:0;transform:translateY(10px);transition:opacity .18s ease,transform .18s ease}
.hh-fs.is-in .hh-fs__panel{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.hh-fs__panel{transition:none;opacity:1;transform:none}}
.hh-fs__bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;background:#0E1216;border-radius:13px 13px 0 0}
.hh-fs__brand{color:#fff;font-size:12.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.hh-fs__x{min-height:44px;padding:0 16px;border:2px solid #0F9FE1;border-radius:999px;background:transparent;color:#fff;font:inherit;font-size:14.5px;font-weight:800;cursor:pointer}
.hh-fs__x:hover{background:#0F9FE1}
.hh-fs__x:focus-visible{outline:3px solid #fff;outline-offset:2px}
.hh-fs__body{overflow:auto;-webkit-overflow-scrolling:touch;padding:18px 22px 26px}
.hh-fs__body:focus{outline:none}
.hh-fs__h1{font-size:clamp(26px,3vw,40px);font-weight:900;line-height:1.08;letter-spacing:-0.02em;color:#0B1820;margin:12px 0 8px;text-wrap:balance}
.hh-fs__meta{margin:0 0 14px;font-size:15px;color:#50616B}
.hh-fs__body .hh-media{margin:0 0 14px;aspect-ratio:16/9.1;border-radius:8px;overflow:hidden;position:relative;background:linear-gradient(150deg,#0879B3,#0E1216)}
.hh-fs__body .hh-media img{width:100%;height:100%;object-fit:cover;display:block}
.hh-fs__body .hh-media figcaption{position:absolute;left:0;right:0;bottom:0;padding:8px 12px;background:linear-gradient(0deg,rgba(8,22,30,.9),transparent);color:#DDE7ED;font-size:12.5px}
.hh-fs__copy{font-size:18px;line-height:1.65;color:#17242C}
.hh-fs__copy p{margin:0 0 14px}
.hh-fs__copy h2{font-size:22px;font-weight:900;margin:22px 0 8px;color:#0B1820}
.hh-fs__copy a{color:#0A6A92}
.hh-fs__note{margin:18px 0 0;font-size:13px;color:#59636D;border-top:1px solid rgba(9,150,205,.28);padding-top:12px}
.hh-fs__foot{margin-top:14px}
@media (max-width:600px){.hh-fs{padding:0}.hh-fs__panel{width:100%;max-height:100vh;height:100vh;border-radius:0;border-width:0 0 0 0;border-top:3px solid #0F9FE1}.hh-fs__bar{border-radius:0}.hh-fs__body{padding:14px 14px 30px}}
/* CATEGORY RIBBON — black rail, HipHopHaven pennant left, blue category ribbon right. Per-article mapping. */
/* CANONICAL RAIL — donor geometry (rail 62 / pennant 98 with the angled tail / logo box 51 / category
   ribbon 62 flush to the right edge, no end-cap). Only the accent and the mark are HipHopHaven.
   Rail bottom sits directly on the media: no bottom margin, ever. */
.hh-ribbon{display:flex;align-items:stretch;height:62px;margin:0;border-radius:0;overflow:hidden;background:#0E1216;flex-wrap:nowrap}
.hh-ribbon__pennant{flex:0 0 98px;width:98px;display:inline-flex;align-items:center;justify-content:center;
 padding:0 14px 0 8px;background:#1FA6D9;color:#fff;white-space:nowrap;
 clip-path:polygon(0 0,100% 0,calc(100% - 15px) 50%,100% 100%,0 100%)}
.hh-ribbon__pennant img{width:51px;height:51px;object-fit:contain;display:block}
.hh-ribbon__cats{display:inline-flex;align-items:center;gap:9px;margin-left:auto;height:62px;padding:0 24px;
 background:#1FA6D9;clip-path:polygon(18px 0,100% 0,100% 100%,0 100%)}
.hh-ribbon__cats a,.hh-ribbon__cats span{color:#fff;font-size:18px;font-weight:900;letter-spacing:.04em;
 text-transform:uppercase;text-decoration:none;white-space:nowrap;line-height:1}
@media (max-width:600px){
 .hh-ribbon{height:54px}
 .hh-ribbon__pennant{flex:0 0 82px;width:82px;padding:0 12px 0 6px}
 .hh-ribbon__pennant img{width:42px;height:42px}
 .hh-ribbon__cats{height:54px;padding:0 16px;margin-left:auto;width:auto;clip-path:polygon(15px 0,100% 0,100% 100%,0 100%)}
 .hh-ribbon__cats a,.hh-ribbon__cats span{font-size:16px}}
.hh-ribbon__cats a:hover{text-decoration:underline}
.hh-ribbon__sep{opacity:.7}
.hh-back .hh-ribbon{background:#000}

