/* HipHopHaven reconstructed theme chrome — tokens sampled from approved source (CLAUDE.md). Font stack PROVISIONAL (Open Item 1): neutral news sans, no designer substitution. */
:root{--hh-blue:#0895CC;--hh-blue-bright:#0F9FE1;--hh-ink:#0E1216;--hh-paper:#FFFFFF;--hh-line:#E3E7EB;--hh-mut:#59636D;--hh-font:'Helvetica Neue',Helvetica,Arial,sans-serif}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--hh-font);color:var(--hh-ink);background:var(--hh-paper);font-size:17px;line-height:1.55}
img{max-width:100%;display:block}
a{color:var(--hh-blue);text-decoration:none}a:hover{color:var(--hh-blue-bright);text-decoration:underline}
[hidden]{display:none!important}
.wrap{max-width:1240px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px}.skip:focus{position:fixed;left:8px;top:8px;background:#fff;padding:8px 12px;z-index:99;border:2px solid var(--hh-blue)}
button{font-family:var(--hh-font);cursor:pointer}
:focus-visible{outline:3px solid var(--hh-blue-bright);outline-offset:2px}
.hh-provenance{background:var(--hh-ink);color:#fff;font-size:12.5px;padding:6px 20px;text-align:center;letter-spacing:.02em}
.hh-provenance strong{color:var(--hh-blue-bright)}
/* THE CYPHER — integrated headline bar */
.hh-cypher{display:flex;align-items:stretch;background:linear-gradient(180deg,#10161C,#0B0F13);border-bottom:1px solid rgba(24,175,238,.35);color:#fff;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -10px 20px rgba(9,150,205,.07)}
.hh-cypher__label{display:flex;align-items:center;gap:9px;background:linear-gradient(135deg,#0996CD,#0388D5);color:#fff;font-weight:900;font-size:12.5px;letter-spacing:.14em;padding:0 16px;min-height:44px;white-space:nowrap;box-shadow:2px 0 0 #065E82,inset 0 1px 0 rgba(255,255,255,.35);text-transform:uppercase}
a.hh-cypher__label:hover{text-decoration:none;color:#fff;filter:brightness(1.06)}
.hh-cypher__eq{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.hh-cypher__eq i{width:3px;background:#fff;height:7px;transform-origin:bottom;animation:hh-eq 1s ease-in-out infinite alternate}
.hh-cypher__eq i:nth-child(2){height:12px;animation-delay:.2s}
.hh-cypher__eq i:nth-child(3){height:9px;animation-delay:.45s}
@keyframes hh-eq{from{transform:scaleY(.45)}to{transform:scaleY(1.1)}}
.hh-cypher__lead{display:block;line-height:44px;color:#fff;font-weight:800;font-size:14px;padding:0 16px;border-right:1px solid rgba(24,175,238,.4);white-space:nowrap;max-width:34%;overflow:hidden;text-overflow:ellipsis;flex-shrink:0}
.hh-cypher__lead:hover{color:#18AFEE;text-decoration:none}
.hh-cypher__viewport{flex:1;overflow:hidden;display:flex;align-items:center;-webkit-mask-image:linear-gradient(90deg,transparent,#000 26px,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(90deg,transparent,#000 26px,#000 calc(100% - 26px),transparent)}
.hh-cypher__track{display:flex;width:max-content;animation:hh-cy 38s linear infinite}
.hh-cypher:hover .hh-cypher__track,.hh-cypher:focus-within .hh-cypher__track{animation-play-state:paused}
.hh-cypher__set{display:flex;align-items:center}
.hh-cypher__set a{color:#E8F4FA;font-size:13.5px;font-weight:600;white-space:nowrap;padding:0 6px}
.hh-cypher__set a:hover{color:#18AFEE}
.hh-cypher__dot{color:#0F9FE1;font-weight:900;padding:0 8px}
@keyframes hh-cy{to{transform:translateX(-50%)}}
.hh-cypher__search{display:flex;align-items:center;justify-content:center;min-width:48px;min-height:44px;background:transparent;border:0;border-left:1px solid rgba(24,175,238,.4);color:#fff;font-size:17px;cursor:pointer}
.hh-cypher__search:hover{background:rgba(9,150,205,.3);color:#fff;text-decoration:none}
/* identity band */
.hh-idband{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:16px 24px 14px;background:radial-gradient(40% 130% at 50% 44%,rgba(9,150,205,.10),transparent 64%),#fff;box-shadow:0 8px 20px rgba(6,40,58,.06)}
.hh-idband::before{content:"";position:absolute;top:50%;left:24px;right:24px;height:1px;background:linear-gradient(90deg,rgba(9,150,205,.4),transparent 26%,transparent 74%,rgba(9,150,205,.4))}
.hh-idband>*{position:relative}
.hh-idband__socials{display:flex;gap:8px;justify-self:start;align-items:center}
.hh-idband__socials a{width:44px;height:44px;border-radius:50%;border:1px solid rgba(14,18,22,.28);color:var(--hh-ink);display:grid;place-items:center;font-size:13.5px;font-weight:800;background:#fff}
.hh-idband__socials a:hover{background:var(--hh-blue);border-color:var(--hh-blue);color:#fff;text-decoration:none}
.hh-idband__logo{justify-self:center;text-align:center;display:block}
.hh-idband__logo:hover{text-decoration:none}
.hh-idband__logo img{width:190px;height:190px;object-fit:contain;margin:0 auto;display:block}
.hh-idband__desc{display:block;margin-top:4px;color:var(--hh-mut);font-size:12px;letter-spacing:.02em}
.hh-idband__utils{display:flex;gap:10px;justify-self:end;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.hh-plate{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid rgba(14,18,22,.35);border-left:4px solid var(--hh-blue);font-weight:800;font-size:14px;color:var(--hh-ink);background:#fff}
.hh-plate:hover{border-color:var(--hh-blue);color:#065E82;text-decoration:none}
.hh-plate--solid{background:var(--hh-ink);color:#fff;border-color:var(--hh-ink)}
.hh-plate--solid:hover{background:var(--hh-blue);border-color:var(--hh-blue);color:#fff}
@media (min-width:900px) and (max-width:1199px){.hh-idband__logo img{width:160px;height:160px}}
@media (max-width:899px){.hh-cypher__lead{display:none}.hh-cypher__track{animation-duration:48s}.hh-idband{grid-template-columns:auto 1fr auto;padding:10px 14px;gap:10px}.hh-idband::before{display:none}.hh-idband__socials{display:none}.hh-idband__logo img{width:124px;height:124px}.hh-idband__desc{display:none}.hh-idband__utils .hh-plate{display:none}}
@media (min-width:600px) and (max-width:899px){.hh-idband__logo img{width:150px;height:150px}}
@media (max-width:379px){.hh-idband__logo img{width:112px;height:112px}}
@media (prefers-reduced-motion:reduce){.hh-cypher__track{animation:none}.hh-cypher__eq i{animation:none}.hh-cypher__set--dup{display:none}}
.hh-footprov{font-size:12px;color:#8C99A4;display:block;margin-top:6px}
@media (min-width:900px){.hh-idband .hh-searchbtn{display:none}}
.hh-idband__left{display:flex;align-items:center;gap:8px;justify-self:start}
/* header v3 — MusicHaven header system, HipHopHaven-skinned */
.hh-topsocials{display:flex;justify-content:center;align-items:center;gap:18px;padding:14px 0;background:#fff;border-bottom:1px solid #2E353B}
.hh-topsocials a{width:88px;height:88px;border-radius:20px;border:2px solid var(--hh-ink);background:#fff;display:grid;place-items:center;overflow:hidden;padding:9px;text-decoration:none;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.hh-topsocials img{width:100%;height:100%;object-fit:contain;display:block}
.hh-topsocials a:hover{border-color:var(--hh-blue);box-shadow:0 4px 0 rgba(9,150,205,.4);transform:translateY(-2px);text-decoration:none}
.hh-topsocials a:focus-visible{outline:3px solid var(--hh-blue);outline-offset:3px}
@media (max-width:899px){.hh-topsocials{gap:12px;padding:10px 0}.hh-topsocials a{width:62px;height:62px;border-radius:15px;padding:6px}}
@media (max-width:379px){.hh-topsocials{gap:8px}.hh-topsocials a{width:52px;height:52px;border-radius:13px;padding:5px}}
.hh-upl{border:2px dashed rgba(24,175,238,.6);border-radius:14px;padding:14px;text-align:center;color:#AFC6D2;font-size:13.5px;margin-top:14px;font-weight:600}
.hh-upl input{display:none}
.hh-upl label{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:2px solid #fff;color:#fff;font-weight:800;cursor:pointer;margin-bottom:8px}
.hh-upl label:hover{border-color:var(--hh-blue-bright);color:var(--hh-blue-bright)}
.hh-nmf-media video,.hh-nmf-media img{width:100%;border-radius:18px;display:block;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.hh-cyphwrap{padding:10px 12px 0;background:#fff}
.hh-band{background:linear-gradient(180deg,#0A93D6,#0998DE 45%,#0E9FE0);border-bottom:1px solid rgba(6,94,130,.35)}
.hh-band .mh-brandband__bannerimg{width:auto;max-width:100%;height:340px;object-fit:contain;margin:0 auto;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.hh-band .mh-brandband__banner{display:flex;justify-content:center}
.mh-utilitybar{background:#fff;position:relative}
.hh-tipbubble{position:absolute;left:20px;top:50%;transform:translateY(-56%) rotate(-3deg);background:#fff;border:2px solid var(--hh-ink);color:var(--hh-ink);font-weight:900;font-size:14px;letter-spacing:.02em;padding:10px 18px;border-radius:14px;min-height:44px;display:inline-flex;align-items:center;gap:6px;box-shadow:0 5px 0 rgba(6,94,130,.4);text-decoration:none;z-index:2}
.hh-tipbubble:hover{color:#065E82;border-color:#0388D5;text-decoration:none;transform:translateY(-60%) rotate(-3deg)}
.hh-tipbubble::after{content:"";position:absolute;left:20px;bottom:-12px;width:0;height:0;border:12px solid transparent;border-top-color:var(--hh-ink);border-bottom:0}
.hh-tipbubble::before{content:"";position:absolute;left:23px;bottom:-8px;width:0;height:0;border:9px solid transparent;border-top-color:#fff;border-bottom:0;z-index:1}
.hh-tipbubble:hover::after{border-top-color:#0388D5}
.hh-menupill{display:none}
.hh-cattabs{border-top:1px solid #2E353B;border-bottom:1px solid #2E353B}
.hh-cattabs .mh-genrepicker{flex-wrap:wrap;justify-content:center}
.hh-cattabs .mh-genrepill{text-decoration:none}
.hh-artisttags{padding:8px 16px 10px;background:#fff;border-bottom:1px solid #2E353B}
.hh-artisttags__label{display:block;text-align:center;font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#065E82;margin:0 0 6px}
.hh-artisttags__row{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;max-width:1240px;margin:0 auto}
.hh-artisttags__row .mh-chip{justify-content:center;text-align:center;min-height:40px;font-size:12.5px;white-space:normal;padding:5px 8px;text-decoration:none;background:#fff;border:2px solid rgba(24,175,238,.9);border-radius:999px;color:#065E82;font-weight:800;box-shadow:0 8px 16px rgba(6,40,58,.16),0 3px 0 rgba(6,74,102,.5),inset 0 1px 0 rgba(255,255,255,.7);transition:transform .16s ease,box-shadow .16s ease}
.hh-artisttags__row .mh-chip:hover{transform:translateY(-2px);color:#0388D5;text-decoration:none}
/* Cypher legibility */
.hh-cyphwrap .mh-pulsebar__inner{min-height:56px}
.hh-cyphwrap .mh-pulsebar__label{font-size:13.5px}
.hh-cyphwrap .mh-ticker__lead{font-size:16px}
.hh-cyphwrap .mh-ticker__item{font-size:15px}
@media (max-width:899px){.hh-cyphwrap{padding:0}.hh-cyphwrap .mh-pulsebar{border-radius:0;border-left:0;border-right:0}.hh-band .mh-brandband__bannerimg{height:200px}.hh-menupill{display:inline-flex}.hh-artisttags__row{grid-template-columns:repeat(4,1fr)}.hh-cyphwrap .mh-ticker__lead,.hh-cyphwrap .mh-ticker__item{font-size:14.5px}.hh-tipbubble{position:static;transform:rotate(-2deg);margin:4px 10px 8px 4px}.hh-tipbubble:hover{transform:rotate(-2deg)}}
@media (min-width:600px) and (max-width:899px){.hh-band .mh-brandband__bannerimg{height:260px}}
@media (max-width:379px){.hh-band .mh-brandband__bannerimg{height:170px}}
/* header */
.hh-brandbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:22px;padding-bottom:22px}
.hh-logo-lockup{display:flex;align-items:center;gap:18px;color:var(--hh-ink)}.hh-logo-lockup:hover{text-decoration:none;color:var(--hh-ink)}
.hh-logo{width:104px;height:104px;object-fit:contain}
.hh-sitetitle{display:block;font-size:40px;font-weight:900;letter-spacing:-0.01em;line-height:1}
.hh-sitedesc{display:block;margin-top:6px;color:var(--hh-mut);font-size:14.5px}
.hh-utils{display:flex;align-items:center;gap:12px}
.hh-searchbtn,.hh-menubtn{background:#fff;border:1px solid rgba(14,18,22,.35);min-height:44px;min-width:44px;padding:0 14px;font-size:15px;font-weight:800}
.hh-searchbtn:hover,.hh-menubtn:hover{border-color:var(--hh-blue);color:#065E82}
.hh-tipline{font-weight:700;padding:10px 6px;min-height:44px;display:inline-flex;align-items:center}
.hh-subscribe{background:var(--hh-blue);color:#fff;font-weight:800;padding:0 18px;min-height:44px;display:inline-flex;align-items:center}
.hh-subscribe:hover{background:var(--hh-blue-bright);color:#fff;text-decoration:none}
.hh-search{border-top:1px solid var(--hh-line);background:#F6F8F9}
.hh-search form{display:flex;gap:10px;padding-top:14px;padding-bottom:14px;align-items:center}
.hh-search input{flex:1;min-height:44px;border:1px solid var(--hh-line);padding:0 12px;font-size:16px}
.hh-search button{min-height:44px;padding:0 16px;border:1px solid var(--hh-ink);background:var(--hh-ink);color:#fff;font-weight:700}
.hh-search .hh-search-close{background:#fff;color:var(--hh-ink)}
.hh-nav{background:#fff;border-top:1px solid #2E353B;border-bottom:1px solid #2E353B}
.hh-nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.hh-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.hh-nav ul a{display:block;color:var(--hh-ink);font-weight:800;font-size:14.5px;padding:13px 15px;text-transform:uppercase;letter-spacing:.06em}
.hh-nav ul a:hover{color:#065E82;box-shadow:inset 0 -3px 0 var(--hh-blue);text-decoration:none;background:none}
.hh-nav ul a[aria-current]{color:#065E82;box-shadow:inset 0 -3px 0 var(--hh-blue);background:rgba(9,150,205,.07)}
.hh-socials{display:flex;gap:8px;align-items:center}
.hh-socials a{width:30px;height:30px;border-radius:50%;background:#2A3138;color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800}
.hh-socials a:hover{background:var(--hh-blue);text-decoration:none;color:#fff}
/* drawer */
.hh-drawer{position:fixed;inset:0;background:rgba(14,18,22,.55);z-index:60}
.hh-drawer-panel{background:#fff;width:min(360px,88vw);height:100%;margin-left:auto;padding:20px;overflow:auto}
.hh-drawer-panel nav a{display:block;padding:13px 8px;font-size:18px;font-weight:800;color:var(--hh-ink);border-bottom:1px solid var(--hh-line);text-transform:uppercase}
.hh-drawer-close{margin-bottom:14px}
.hh-drawer-panel .hh-subscribe,.hh-drawer-panel .hh-tipline{margin-top:14px;display:inline-flex}
.hh-drawer-panel .hh-socials{display:flex;gap:8px;margin-top:16px}
.hh-drawer-panel .hh-socials a{width:44px;height:44px;border-radius:50%;border:1px solid rgba(14,18,22,.28);background:#fff;color:var(--hh-ink);display:grid;place-items:center;font-size:13.5px;font-weight:800}
.hh-drawer-panel .hh-socials a:hover{background:var(--hh-blue);border-color:var(--hh-blue);color:#fff}
/* layout */
.hh-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:40px;padding-top:12px;padding-bottom:50px}
.hh-main{min-width:0}
.hh-cats{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px;padding:0}
.hh-cats a{background:var(--hh-blue);color:#fff;font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:4px 9px}
.hh-cats a:hover{background:var(--hh-ink);text-decoration:none;color:#fff}
.hh-media{margin:0 0 14px;aspect-ratio:16/9;overflow:hidden;background:#EDF1F4}
.hh-media img{width:100%;height:100%;object-fit:cover}
.hh-media.imgfail{background:var(--hh-blue);display:grid;place-items:center}
.hh-media.imgfail img{display:none}
.hh-media.imgfail::after{content:attr(data-t);font-weight:900;color:#fff;font-size:clamp(26px,3.4vw,54px);letter-spacing:.01em;text-transform:uppercase;padding:18px;text-align:center;line-height:1.04}
.hh-meta{color:var(--hh-mut);font-size:15.5px;margin:8px 0 0}
.hh-lead{margin-bottom:44px}
.hh-lead .hh-title{font-size:clamp(30px,3.4vw,46px);line-height:1.08;font-weight:900;letter-spacing:-0.015em;margin:6px 0 10px}
.hh-lead .hh-dek{font-size:18.5px;color:#2A333B;margin:0}
.hh-title a{color:var(--hh-ink)}.hh-title a:hover{color:var(--hh-blue);text-decoration:none}
.hh-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px 32px}
.hh-card{transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.hh-card:hover{transform:translateY(-2px)}
.hh-card .hh-title{font-size:25px;line-height:1.18;font-weight:900;letter-spacing:-0.01em;margin:6px 0 0}
/* sidebar */
.hh-sidebar{border-left:1px solid var(--hh-line);padding-left:32px}
.hh-widget{margin-bottom:34px}
.hh-widget h2{font-size:19px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;border-bottom:3px solid var(--hh-ink);padding-bottom:8px;margin:0 0 14px}
.hh-widget ul{list-style:none;margin:0;padding:0}
.hh-widget li{padding:9px 0;border-bottom:1px solid var(--hh-line)}
.hh-widget li a{color:var(--hh-ink);font-weight:700;font-size:15.5px;line-height:1.3}
.hh-widget li a:hover{color:var(--hh-blue)}
.hh-widget .hh-count{color:var(--hh-mut);font-weight:400}
.hh-widget form{display:flex;gap:8px}
.hh-widget input{flex:1;min-height:44px;border:1px solid var(--hh-line);padding:0 10px;font-size:15px;min-width:0}
.hh-widget form button{min-height:44px;padding:0 14px;background:var(--hh-ink);color:#fff;border:0;font-weight:700}
/* dark bands — two-column, no dead right side */
.hh-bandgrid{display:grid;grid-template-columns:1.05fr 1fr;gap:38px;align-items:center}
@media (max-width:899px){.hh-bandgrid{grid-template-columns:1fr;gap:22px}}
.hh-poster--band{background:linear-gradient(135deg,#18AFEE,#0996CD 55%,#0388D5);aspect-ratio:16/10;width:100%;height:auto;border-radius:18px;box-shadow:0 18px 40px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.25)}
.hh-steps{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px}
.hh-steps li{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;color:#D5DDE3}
.hh-steps li b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--hh-blue);color:#fff;font-size:13.5px;flex:none}
.hh-bandgrid .hh-services{max-width:none;margin:0}
@media (min-width:900px) and (max-width:1120px){.hh-bandgrid .hh-services{grid-template-columns:repeat(2,minmax(0,1fr))}.hh-chip{font-size:16px}}
/* expansion modules — MusicHaven Edge language, HipHopHaven tokens (frozen first screen untouched) */
.hh-mod{padding:46px 0;border-top:1px solid var(--hh-line)}
.hh-mod.hh-dark{border-top:0;border-radius:28px;padding:42px 36px;margin:30px 0 4px;border:1.5px solid rgba(24,175,238,.4);box-shadow:0 24px 50px rgba(6,40,58,.22),0 4px 0 rgba(6,94,130,.4),inset 0 1px 0 rgba(255,255,255,.1)}
.hh-kicker{color:var(--hh-blue);font-size:13.5px;font-weight:900;text-transform:uppercase;letter-spacing:.14em;margin:0 0 10px}
.hh-mod h2{font-size:clamp(26px,2.6vw,36px);font-weight:900;letter-spacing:-0.01em;line-height:1.08;margin:0 0 8px}
.hh-mod .hh-modnote{color:var(--hh-mut);font-size:14px;margin:14px 0 0}
.hh-dark{background:var(--hh-ink);color:#fff}
.hh-dark h2,.hh-dark .hh-title a{color:#fff}
.hh-dark .hh-modnote{color:#AFC6D2;font-weight:600}
.hh-mod.hh-dark>.hh-bandgrid p:not(.hh-kicker):not(.hh-poster__kicker):not(.hh-poster__big):not(.hh-modnote){color:#EAF3F8;font-weight:600}
.hh-steps li{color:#EAF3F8}
.hh-btn{display:inline-flex;align-items:center;min-height:46px;padding:0 24px;background:var(--hh-blue);color:#fff;font-weight:800;font-size:15.5px;border:0;border-radius:999px;box-shadow:0 3px 0 #065E82,0 10px 22px rgba(6,94,130,.3),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}
.hh-btn:hover{background:var(--hh-blue-bright);color:#fff;text-decoration:none;transform:translateY(-2px);filter:brightness(1.04)}
.hh-btn:active{transform:translateY(1px) scale(.99);box-shadow:0 1px 0 #065E82,0 5px 12px rgba(6,94,130,.3),inset 0 1px 0 rgba(255,255,255,.35)}
.hh-btn--xl{min-height:64px;padding:0 36px;font-size:22px;font-weight:900;letter-spacing:.02em;text-shadow:0 2px 0 rgba(6,74,102,.55);box-shadow:0 4px 0 #065E82,0 14px 28px rgba(6,94,130,.35),inset 0 2px 0 rgba(255,255,255,.4)}
.hh-btn--ghost{background:transparent;border:2px solid currentColor;color:inherit}
.hh-btn--ghost:hover{background:rgba(8,149,204,.12)}
.hh-save{min-height:44px;padding:0 16px;border:2px solid var(--hh-ink);background:#fff;font-weight:800;font-size:14.5px;color:var(--hh-ink)}
a.hh-save{display:inline-flex;align-items:center;text-decoration:none}
a.hh-save:hover{color:#065E82;border-color:var(--hh-blue);text-decoration:none}
.hh-save.is-on{background:var(--hh-blue);border-color:var(--hh-blue);color:#fff}
a.hh-save.is-on:hover{color:#fff}
.hh-dark .hh-save{border-color:#fff;background:transparent;color:#fff}
.hh-dark .hh-save.is-on{background:var(--hh-blue);border-color:var(--hh-blue)}
/* typography posters — complete compositions, never a music-note tile */
.hh-poster{display:flex;flex-direction:column;justify-content:space-between;background:var(--hh-blue);color:#fff;aspect-ratio:16/9;padding:18px;border-radius:10px;overflow:hidden;margin:0 0 4px}
.hh-poster--ink{background:var(--hh-ink)}.hh-poster--ink .hh-poster__big{color:var(--hh-blue-bright)}
.hh-poster__kicker{font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;opacity:.9;margin:0}
.hh-poster__big{font-weight:900;font-size:clamp(28px,2.6vw,42px);line-height:.98;text-transform:uppercase;letter-spacing:-0.01em;margin:8px 0 0;text-wrap:balance}
.hh-poster__rule{height:4px;background:currentColor;width:38%;margin:12px 0 0}
.hh-poster__num{position:absolute;display:none}
.hh-statelabel{font-size:12px;color:var(--hh-mut);font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin:10px 0 0}
.demo-focus{outline:3px solid var(--hh-blue-bright);outline-offset:2px}
.hh-facnote{font-size:14.5px;color:var(--hh-mut);margin:6px 0 0}
/* flip */
.hh-flipbtn__u{color:#18AFEE;font-weight:900;margin-left:10px;font-size:1.35em;line-height:1}
.hh-back .hh-readlink--top{display:inline-flex;font-size:16.5px;font-weight:900;margin:0 0 6px;color:#18AFEE}
.hh-fliprow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));gap:26px;margin-top:24px}
.hh-flipcard{perspective:1400px;min-height:0;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.hh-flipcard:hover{transform:translateY(-3px)}
.hh-flipinner{display:grid;grid-template-columns:1fr;min-height:0;transform-style:preserve-3d;transition:transform .34s cubic-bezier(.2,.8,.2,1)}
.hh-flipcard.flipped .hh-flipinner{transform:rotateY(180deg)}
@media (prefers-reduced-motion:reduce){.hh-flipinner{transition:none}}
.hh-face{backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1.5px solid rgba(9,150,205,.38);border-radius:18px;background:#fff;padding:18px;display:flex;flex-direction:column;gap:10px;min-height:0;box-shadow:0 16px 38px rgba(6,40,58,.12),0 3px 0 rgba(6,94,130,.25),inset 0 1px 0 rgba(255,255,255,.5)}
.hh-front .hh-media{margin-bottom:4px;border-radius:10px}
.hh-face{grid-area:1/1}
.hh-back{transform:rotateY(180deg);background:var(--hh-ink);color:#fff;border-color:rgba(24,175,238,.45)}
.hh-back .hh-dek{font-size:18px;line-height:1.55;margin:0}
.hh-back .hh-meta{color:#9FB0BD}
.hh-flipbtn{margin-top:auto;min-height:68px;padding:0 28px;border:2px solid var(--hh-ink);border-radius:999px;background:#fff;font-weight:900;font-size:22px;letter-spacing:-0.01em;display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;text-decoration:none;color:var(--hh-ink)}
.hh-flipbtn:hover{background:var(--hh-ink);color:#fff;text-decoration:none}
.hh-flipbtn:hover .hh-flipbtn__u{color:#18AFEE}
.hh-backnav{margin-top:auto;padding-top:12px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hh-backnav .hh-flipbtn{margin-top:0}
.hh-flipbtn--read{background:#18AFEE;border-color:#18AFEE;color:#0E1216}
.hh-flipbtn--read .hh-flipbtn__u{color:#0E1216}
.hh-back .hh-flipbtn--read:hover{background:#fff;border-color:#fff;color:#0E1216}
.hh-back .hh-flipbtn--read:hover .hh-flipbtn__u{color:#0E1216}
.hh-flipbtn--return{min-height:50px;padding:0 18px;font-size:15.5px;font-weight:800}
.hh-backmedia{margin:-2px 0 4px}
/* RIBBON FUSION LAW: 0px gap, 0px overlap. The -2px above is a legacy nudge from before the shared
   RibbonRail existed; once a .rr-host sits directly on top of the back media it produced a measured -2px
   ribbon-to-media OVERLAP on every FlipCard back face (front faces measured 0.00). Scoped to the adjacent
   case only, so every other .hh-backmedia keeps its existing metrics and the protected FlipCard spacing
   ledger cannot move where no ribbon is involved. */
.rr-host+.hh-backmedia{margin-top:0}
.hh-backmedia .hh-media{border-radius:10px;overflow:hidden;aspect-ratio:16/9;margin:0}
.hh-backmedia .hh-media img{width:100%;height:100%;object-fit:cover;display:block}
.hh-backmedia .hh-poster--ink{background:var(--hh-blue)}
.hh-backmedia .hh-poster--ink .hh-poster__kicker,.hh-backmedia .hh-poster--ink .hh-poster__big,.hh-backmedia .hh-poster--ink .hh-poster__rule{color:#fff!important}
.hh-backmedia .hh-poster{margin:0}
.hh-back .hh-flipbtn{border-color:#fff;background:transparent;color:#fff}
.hh-back .hh-flipbtn:hover{background:#fff;color:var(--hh-ink)}
.hh-back .hh-flipbtn--read,.hh-flipbtn--read{background:#18AFEE;border-color:#18AFEE;color:#0E1216}
.hh-back .hh-flipbtn--read .hh-flipbtn__u{color:#0E1216}
.hh-back .hh-flipbtn--read:hover{background:#fff;border-color:#fff;color:#0E1216}
.hh-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:6px}
.hh-readlink{font-weight:800}
.hh-back .hh-readlink{color:var(--hh-blue-bright)}
.hh-ext{font-size:12px;color:var(--hh-mut)}
/* orbit */
.hh-orbitgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;margin-top:22px}
.hh-artist{border:1.5px solid rgba(9,150,205,.3);border-radius:18px;overflow:hidden;padding:0 0 14px;text-align:center;background:#fff;box-shadow:0 10px 26px rgba(6,40,58,.1),0 3px 0 rgba(6,94,130,.2);transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease}
.hh-artist:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(6,40,58,.16),0 3px 0 rgba(6,94,130,.3)}
.hh-artist .hh-init{background:var(--hh-blue);color:#fff;font-weight:900;font-size:52px;display:grid;place-items:center;aspect-ratio:1/1;letter-spacing:.02em}
.hh-artist h3{font-size:18px;font-weight:900;margin:12px 10px 10px;line-height:1.15}
/* services */
.hh-services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0 22px;max-width:760px}
.hh-chip{display:flex;align-items:center;gap:8px;background:#fff;color:var(--hh-ink);border:1px solid var(--hh-line);padding:6px 12px 6px 6px;font-weight:700;font-size:18px;min-height:48px;width:100%;min-width:0;overflow-wrap:anywhere}
.hh-chip img{width:32px;height:32px;object-fit:contain;background:#fff;padding:2px}
/* newsletter */
.hh-newsform{display:flex;gap:10px;max-width:520px;margin-top:18px}
.hh-newsform input{flex:1;min-height:46px;border:1px solid var(--hh-line);padding:0 12px;font-size:16px;min-width:0}
/* category columns */
.hh-catcols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:22px}
.hh-catcol h3{font-size:17px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;border-bottom:3px solid var(--hh-blue);padding-bottom:8px;margin:0 0 6px}
.hh-catcol ul{list-style:none;margin:0;padding:0}
.hh-catcol li{padding:10px 0;border-bottom:1px solid var(--hh-line)}
.hh-catcol li a{color:var(--hh-ink);font-weight:700;font-size:15.5px;line-height:1.3}
/* footer */
.hh-footer{background:var(--hh-ink);color:#B9C4CD;margin-top:20px}
.hh-footer .wrap{padding-top:26px;padding-bottom:26px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;font-size:14px}
.hh-footer a{color:#fff}
/* app bar */
.hh-appbar{display:none}
body.expanded .hh-appbar{position:fixed;bottom:0;left:0;right:0;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);display:flex;z-index:50;padding-bottom:env(safe-area-inset-bottom)}
.hh-appbar button{flex:1;background:none;border:0;color:#fff;font-size:17px;font-weight:800;min-height:76px;border-top:4px solid transparent}
.hh-appbar button[aria-current]{border-top-color:var(--hh-blue-bright);color:var(--hh-blue-bright)}
body.expanded.narrow-pad main{padding-bottom:96px}
@media (min-width:900px){body.expanded .hh-appbar{display:none!important}}
/* toast */
.hh-toast{position:fixed;left:50%;transform:translateX(-50%);bottom:76px;background:var(--hh-ink);color:#fff;padding:12px 18px;font-size:14.5px;z-index:70;max-width:92vw;text-align:center;border-left:4px solid var(--hh-blue-bright)}
/* responsive */
@media (max-width:1023px){.hh-layout{grid-template-columns:1fr}.hh-sidebar{border-left:0;padding-left:0;border-top:3px solid var(--hh-ink);padding-top:26px}}
@media (min-width:900px){.hh-menubtn{display:none}}
@media (max-width:899px){.hh-nav{display:none}.hh-tipline{display:none}.hh-searchbtn span{display:none}.hh-brandbar{padding-top:14px;padding-bottom:14px}.hh-logo{width:72px;height:72px}.hh-sitetitle{font-size:27px}.hh-sitedesc{font-size:12.5px}}
@media (max-width:699px){.hh-grid{grid-template-columns:1fr}.hh-catcols{grid-template-columns:1fr}.hh-subscribe{display:none}.hh-drawer-panel .hh-subscribe{display:inline-flex}.hh-lead .hh-title{font-size:30px}.hh-card .hh-title{font-size:22px}.hh-hubgrid{grid-template-columns:1fr!important}}
@media (max-width:379px){.wrap{padding-left:14px;padding-right:14px}.hh-brandbar{flex-wrap:wrap;gap:10px}.hh-logo{width:56px;height:56px}.hh-sitetitle{font-size:21px}.hh-sitedesc{font-size:11px}.hh-utils{gap:8px}.hh-mod.hh-dark{padding:32px 20px}.hh-provenance{font-size:11.5px;padding:6px 12px}}

/* ===== accounts, sign-up questionnaire, For You, demand signal ===== */
.hh-acct{position:relative;display:inline-flex}
.hh-acct__cta{background:var(--hh-ink);color:#fff;border-color:var(--hh-ink)}
.hh-acct__cta:hover{background:var(--hh-blue);border-color:var(--hh-blue);color:#fff}
.hh-acct__btn{cursor:pointer;gap:8px}
.hh-acct__av{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--hh-blue);color:#fff;font-size:11.5px;font-weight:900;letter-spacing:.02em}
.hh-acct__car{font-size:11px;opacity:.7}
.hh-acct__menu{position:absolute;right:0;top:calc(100% + 8px);z-index:70;min-width:250px;background:#fff;border:2px solid var(--hh-ink);box-shadow:0 18px 40px rgba(6,40,58,.24);padding:6px}
.hh-acct__who{margin:0;padding:12px 14px 12px;border-bottom:1px solid var(--hh-line);font-size:13.5px;font-weight:800;color:var(--hh-ink);word-break:break-all}
.hh-acct__who span{display:block;font-weight:600;font-size:12.5px;color:var(--hh-mut);margin-top:3px}
.hh-acct__menu a,.hh-acct__menu button{display:block;width:100%;text-align:left;padding:11px 14px;font-size:15px;font-weight:700;color:var(--hh-ink);text-decoration:none;background:none;border:0;font-family:inherit;cursor:pointer;min-height:44px}
.hh-acct__menu a:hover,.hh-acct__menu button:hover{background:#F2F7FA;color:#065E82;text-decoration:none}
.hh-acct__out{border-top:1px solid var(--hh-line)!important;color:#8A2E17!important}
/* sign-up shell */
.hh-signhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
.hh-signhead__step{margin:0;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--hh-mut)}
.hh-progress{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;list-style:none;padding:0;margin:0 0 30px}
.hh-progress li{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--hh-mut);border-top:5px solid var(--hh-line);padding-top:8px;display:flex;align-items:center;gap:6px}
.hh-progress li span{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:var(--hh-line);color:var(--hh-ink);font-size:11px}
.hh-progress li.is-now{color:var(--hh-ink);border-top-color:var(--hh-blue)}
.hh-progress li.is-now span{background:var(--hh-blue);color:#fff}
.hh-progress li.is-done{color:#065E82;border-top-color:#065E82}
.hh-progress li.is-done span{background:#065E82;color:#fff}
.hh-signh1{font-size:clamp(30px,3.4vw,46px);font-weight:900;letter-spacing:-0.02em;line-height:1.04;margin:0 0 8px}
.hh-signdek{font-size:18px;color:var(--hh-mut);max-width:640px;margin:0 0 4px;text-wrap:pretty}
.hh-signgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:38px;align-items:start;margin-top:8px}
.hh-signaside{background:var(--hh-ink);color:#EAF3F8;padding:24px 22px;position:sticky;top:16px}
.hh-perks{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.hh-perks li{font-size:14.5px;line-height:1.45;padding-left:16px;border-left:3px solid var(--hh-blue)}
.hh-perks strong{display:block;color:#fff;font-size:15.5px}
.hh-form{display:grid;gap:4px;max-width:460px;margin-top:22px}
.hh-lbl{font-size:12.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--hh-ink);margin-top:14px}
.hh-lbl span{color:var(--hh-mut);font-weight:700;letter-spacing:.04em;text-transform:none}
.hh-in{min-height:52px;border:2px solid var(--hh-ink);padding:0 14px;font-size:17px;font-family:inherit;width:100%;background:#fff;color:var(--hh-ink)}
.hh-in:focus{outline:3px solid var(--hh-blue);outline-offset:1px}
.hh-consent{font-size:14px;color:var(--hh-mut);line-height:1.45;margin:16px 0 18px;max-width:460px}
.hh-consent input{width:20px;height:20px;accent-color:var(--hh-blue);margin-right:8px;vertical-align:-4px}
.hh-signbody{padding-bottom:10px}
.hh-signnav{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:34px;padding-top:20px;border-top:1px solid var(--hh-line)}
.hh-signnav .hh-btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
.hh-warn{color:#8A2E17;font-weight:800;margin:18px 0 0}
/* artist picker */
.hh-srchwrap{position:relative;max-width:520px;margin:22px 0 14px}
.hh-srchico{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:20px;color:var(--hh-mut)}
.hh-srch{width:100%;min-height:54px;border:2px solid var(--hh-ink);padding:0 16px 0 44px;font-size:17px;font-family:inherit;background:#fff;color:var(--hh-ink)}
.hh-srch:focus{outline:3px solid var(--hh-blue);outline-offset:1px}
.hh-lanes{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.hh-lane{min-height:38px;padding:0 14px;border:1.5px solid var(--hh-line);background:#fff;font-family:inherit;font-size:13.5px;font-weight:800;color:var(--hh-mut);cursor:pointer}
.hh-lane:hover{border-color:var(--hh-blue);color:#065E82}
.hh-lane.is-on{background:var(--hh-ink);border-color:var(--hh-ink);color:#fff}
.hh-bubgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:20px 14px;margin:0 0 28px}
.hh-bub{background:none;border:0;padding:0;font-family:inherit;cursor:pointer;display:grid;gap:9px;justify-items:center;text-align:center}
.hh-bub__disc{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1/1;border-radius:50%;background:#EEF3F6;color:#5B6771;font-size:clamp(24px,3.4vw,34px);font-weight:900;letter-spacing:.02em;border:3px solid transparent;transition:transform .16s ease,background .16s ease,color .16s ease,border-color .16s ease}
.hh-bub:hover .hh-bub__disc{transform:translateY(-3px);background:#DFEAF1;color:var(--hh-ink)}
.hh-bub.is-on .hh-bub__disc{background:var(--hh-blue);color:#fff;border-color:var(--hh-ink)}
.hh-bub__tick{position:absolute;right:-2px;bottom:-2px;width:30px;height:30px;border-radius:50%;background:var(--hh-ink);color:#fff;font-size:15px;display:grid;place-items:center;border:2px solid #fff}
.hh-bub__name{font-size:14px;font-weight:800;line-height:1.2;color:var(--hh-ink)}
.hh-bub.is-on .hh-bub__name{color:#065E82}
.hh-bub:focus-visible .hh-bub__disc{outline:3px solid var(--hh-blue);outline-offset:3px}
.hh-tray{position:sticky;bottom:0;background:#fff;border-top:2px solid var(--hh-ink);padding:14px 0;display:flex;flex-wrap:wrap;align-items:center;gap:12px;z-index:20}
.hh-tray__count{font-size:14px;font-weight:800;color:var(--hh-mut);white-space:nowrap}
.hh-tray__count strong{font-size:22px;color:var(--hh-blue)}
.hh-tray__list{display:flex;flex-wrap:wrap;gap:8px}
.hh-tray__empty{font-size:14px;color:var(--hh-mut)}
.hh-trayx{min-height:38px;padding:0 12px;border:1.5px solid var(--hh-blue);background:#F2F9FC;color:#065E82;font-family:inherit;font-size:13.5px;font-weight:800;cursor:pointer}
.hh-trayx:hover{background:var(--hh-blue);color:#fff}
/* option chips + toggles */
.hh-opts{display:flex;flex-wrap:wrap;gap:10px}
.hh-opt{min-height:50px;padding:8px 18px;border:2px solid var(--hh-line);background:#fff;font-family:inherit;font-size:15.5px;font-weight:800;color:var(--hh-ink);cursor:pointer;display:grid;gap:1px;text-align:left}
.hh-opt em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--hh-mut)}
.hh-opt:hover{border-color:var(--hh-blue);color:#065E82}
.hh-opt.is-on{background:var(--hh-blue);border-color:var(--hh-blue);color:#fff}
.hh-opt.is-on em{color:rgba(255,255,255,.82)}
.hh-flags{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.hh-flag{display:flex;gap:12px;align-items:flex-start;text-align:left;padding:14px 16px;border:2px solid var(--hh-line);background:#fff;font-family:inherit;cursor:pointer;min-height:44px}
.hh-flag:hover{border-color:var(--hh-blue)}
.hh-flag.is-on{border-color:var(--hh-blue);background:#F2F9FC}
.hh-flag__sw{flex:0 0 auto;width:44px;height:26px;border-radius:999px;background:#D5DDE3;position:relative;transition:background .16s ease;margin-top:2px}
.hh-flag__sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .16s ease}
.hh-flag.is-on .hh-flag__sw{background:var(--hh-blue)}
.hh-flag.is-on .hh-flag__sw::after{transform:translateX(18px)}
.hh-flag span strong{display:block;font-size:15.5px;color:var(--hh-ink)}
.hh-flag span{font-size:13.5px;color:var(--hh-mut);line-height:1.4}
.hh-flag__soon{display:block;font-style:normal;font-size:12px;font-weight:800;letter-spacing:.04em;color:#8A2E17;margin-top:4px}
/* tiers + review */
.hh-tierbox{border:2px solid var(--hh-ink);padding:20px 22px;margin-top:30px;background:#F7FAFC}
.hh-tiers{list-style:none;padding:0;margin:0;display:grid;gap:12px;counter-reset:t}
.hh-tiers li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--hh-mut);line-height:1.45}
.hh-tiers li span{flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;background:var(--hh-ink);color:#18AFEE;font-size:13px;font-weight:900}
.hh-tiers strong{display:block;color:var(--hh-ink);font-size:16px}
.hh-review{display:grid;gap:0;margin-top:24px;border-top:1px solid var(--hh-line)}
.hh-revrow{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--hh-line);font-size:16px}
.hh-revrow span{font-size:12.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--hh-mut)}
.hh-revrow div{font-weight:700;text-wrap:pretty}
.hh-revrow a{font-size:14px;font-weight:800}
/* For You */
.hh-why{font-size:13px;font-weight:800;color:#065E82;margin:6px 0 0;letter-spacing:.01em}
.hh-fystrip{border-top:0;border-left:5px solid var(--hh-blue);padding-left:22px;margin-bottom:10px}
.hh-tiergrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.hh-tiercard{display:grid;gap:8px;align-content:start;padding:16px 18px;background:rgba(255,255,255,.06);border:1px solid rgba(24,175,238,.4);color:#fff;text-decoration:none}
.hh-tiercard:hover{background:rgba(24,175,238,.16);border-color:#18AFEE;color:#fff;text-decoration:none}
.hh-tierpill{justify-self:start;font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;background:#18AFEE;color:var(--hh-ink);padding:3px 8px}
.hh-tiercard strong{font-size:17px;line-height:1.2;font-weight:900}
.hh-tiercard__m{font-size:12.5px;color:#AFC6D2}
/* demand signal */
.hh-bars{display:grid;gap:9px;margin-top:16px;max-width:660px}
.hh-bar{display:grid;grid-template-columns:180px minmax(0,1fr) 34px;gap:12px;align-items:center;font-size:15px}
.hh-bar__n{font-weight:800}
.hh-bar__t{height:16px;background:#EEF3F6}
.hh-bar__f{display:block;height:100%;background:var(--hh-blue)}
.hh-bar__v{font-weight:900;color:var(--hh-mut);text-align:right}
.hh-spec{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:16px}
.hh-specrow{border-left:3px solid var(--hh-blue);padding:0 0 0 14px}
.hh-specrow strong{display:block;font-size:16px;font-weight:900;margin-bottom:4px}
.hh-specrow p{margin:0;font-size:14.5px;color:var(--hh-mut);line-height:1.45}
@media (max-width:1023px){.hh-signgrid{grid-template-columns:1fr}.hh-signaside{position:static}}
@media (max-width:899px){.hh-progress{grid-template-columns:repeat(6,1fr)}.hh-progress li{font-size:0;gap:0;justify-content:center}.hh-progress li span{font-size:11px}.hh-acct__menu{right:auto;left:0}}
@media (max-width:699px){.hh-bubgrid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:16px 10px}.hh-revrow{grid-template-columns:1fr auto;gap:4px 12px}.hh-revrow span{grid-column:1/-1}.hh-bar{grid-template-columns:120px minmax(0,1fr) 30px;font-size:14px}.hh-signnav{flex-wrap:wrap}}
@media (max-width:379px){.hh-bubgrid{grid-template-columns:repeat(3,1fr)}.hh-bub__name{font-size:12.5px}.hh-flags{grid-template-columns:1fr}}
.hh-steps--stack li{margin-bottom:12px}
.hh-steps--stack strong{display:block;color:#18AFEE;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:2px}

@media (max-width:379px){.hh-flipbtn{font-size:19px;min-height:60px;padding:0 20px}}

@media (max-width:460px){.hh-backnav{flex-direction:column;align-items:stretch}.hh-backnav .hh-flipbtn{width:100%;align-self:stretch}}

/* ---- FLIP CARD — donor geometry (founder rebuild, Aug 23) ----
   The Aug 7 build gave every news card a fixed 566px box and pinned the action with
   margin-top:auto. With no deck on the front that produced a blank cavity between the
   headline and the button — the defect the founder rejected.
   Rhythm now: media → category row → headline → deck → byline → full-width action,
   each following the last with a real gap. No arbitrary min-height, no spacer, no
   absolutely positioned button. Rows align by grid stretch, not by padding a hole. */
.hh-grid{align-items:stretch}
.hh-flipcard--news{height:auto;min-height:0}
/* Both faces used to share one grid cell, so the cell grew to the TALLER face (the back).
   That — not a spacer — was what left 128px of cavity under the front deck. The back is now
   absolutely stacked over the front, so the card is exactly as tall as its front rhythm. */
.hh-flipcard--news .hh-flipinner{min-height:0;height:auto;position:relative}
.hh-flipcard--news .hh-front{position:relative;height:auto}
.hh-flipcard--news .hh-back{height:auto}
/* the base .hh-face also carries the legacy 660px min-height — the last piece of the cavity */
.hh-flipcard--news .hh-face{min-height:0;overflow:hidden;margin:0;gap:12px}
.hh-flipcard--news .hh-front .hh-media{aspect-ratio:16/10;border-radius:10px;overflow:hidden;margin:0;flex:none}
.hh-flipcard--news .hh-front .hh-media img{width:100%;height:100%;object-fit:cover;display:block}
.hh-flipcard--news .hh-cats{margin:0}
.hh-flipcard--news .hh-front .hh-title{font-size:23px;line-height:1.16;margin:0;
 display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* the deck is visible on the front — it is what fills the old cavity */
.hh-flipcard--news .hh-front .hh-dek{font-size:16px;line-height:1.5;color:#2A333B;margin:0;
 display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hh-flipcard--news .hh-front .hh-meta{margin:0}
/* full-width oversized action, following the deck — never pushed to the floor */
.hh-flipcard--news .hh-front .hh-flipbtn{margin-top:2px;width:100%;font-size:22px;min-height:68px}
.hh-flipcard--news .hh-back .hh-dek{font-size:16.5px;line-height:1.5;
 display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hh-flipcard--news .hh-back .hh-backmedia{flex:none}
.hh-flipcard--news .hh-back .hh-actions{margin:0}
.hh-flipcard--news .hh-backmedia .hh-media{aspect-ratio:16/10}
.hh-flipcard--news .hh-back .hh-backnav{margin-top:auto}
.hh-flipcard--lead .hh-front .hh-media,.hh-flipcard--lead .hh-backmedia .hh-media{aspect-ratio:16/9}
.hh-flipcard--lead .hh-front .hh-title{font-size:clamp(29px,3.3vw,42px);line-height:1.06;-webkit-line-clamp:unset;display:block;overflow:visible;text-overflow:clip;text-wrap:balance;overflow-wrap:normal;hyphens:none}
.hh-flipcard--lead .hh-front .hh-dek{font-size:18px;line-height:1.45;-webkit-line-clamp:2}
.hh-flipcard--lead .hh-back .hh-dek{font-size:19px;-webkit-line-clamp:5}
@media (max-width:900px){.hh-flipcard--news .hh-front .hh-title{font-size:22px}}
@media (max-width:379px){.hh-flipcard--news .hh-front .hh-title{font-size:21px}
 .hh-flipcard--news .hh-front .hh-flipbtn{font-size:19px;min-height:60px}}

/* Rapsody QA stack — noindex fixtures, first item in the real stacks */
.hh-main{display:flex;flex-direction:column}
.hh-qastack{margin:0 0 30px;order:-1}
.hh-qastack__hd{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;margin:0 0 14px;
 padding-bottom:10px;border-bottom:2px solid var(--hh-ink)}
.hh-qastack__hd h2{font-size:20px;font-weight:900;letter-spacing:-.01em;margin:0}
.hh-qastack__tag{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
 background:#FDF0D5;border:1px solid #E8CE94;color:#7A5A11;border-radius:3px;padding:3px 8px}
.hh-qastack__grid{display:grid;grid-template-columns:1fr 1fr;gap:36px 32px;align-items:stretch}
@media (max-width:699px){.hh-qastack__grid{grid-template-columns:1fr}}
/* Regular News representation: photo + headline + excerpt only */
.hh-regcard{border:1.5px solid rgba(9,150,205,.38);border-radius:18px;background:#fff;padding:18px;
 display:flex;flex-direction:column;gap:12px;height:100%}
.hh-regcard .hh-media{aspect-ratio:16/10;border-radius:10px;margin:0;flex:none}
.hh-regcard .hh-title{font-size:23px;line-height:1.16;margin:0}
.hh-regcard .hh-dek{font-size:16px;line-height:1.5;color:#2A333B;margin:0}
.hh-regcard .hh-meta{margin:0}
.hh-regcard .hh-flipbtn{margin-top:auto;width:100%}
/* portrait art direction inside the donor media well — blue editorial matte, no blur duplicate */
.hh-media--portrait{background:linear-gradient(168deg,#0F9FE1 0%,#0895CC 46%,#0673A0 100%);
 position:relative;display:grid;place-items:center}
.hh-media--portrait::after{content:"";position:absolute;z-index:2;inset:8px;border:1px solid rgba(255,255,255,.34);border-radius:6px;pointer-events:none}
/* the well takes the SOURCE ratio — contain then fills it exactly, no bars, no crop.
   BOUNDED: a bare 2/3 ties well height to card width, so a wide card produced a ~2000px well.
   The plate is capped and centred instead — ratio preserved at every width. */
.hh-media--portrait{box-sizing:content-box!important;aspect-ratio:2/3!important;
 padding:20px!important;max-width:min(100%,340px)!important;margin-inline:auto!important}
@media (max-width:600px){.hh-media--portrait{padding:18px!important}}
/* nothing inside the plate may lay out at the image's intrinsic 1364px */
.hh-media--portrait picture,.hh-media--portrait .hgn-pic{max-width:100%!important;max-height:100%!important}
.hh-media--portrait img{max-width:100%!important}
.hh-media--portrait img{width:100%;height:100%;object-fit:contain!important;
 object-position:calc(var(--fx-d,.5) * 100%) calc(var(--fy-d,.37) * 100%);position:relative;z-index:1}
@media (max-width:600px){.hh-media--portrait img{
 object-position:calc(var(--fx-m,.5) * 100%) calc(var(--fy-m,.31) * 100%)}}

/* ---- WCAG 2.5.8 target size: header utility pills ----
   The APPROVED visible pill geometry is unchanged. Only an invisible, centred interaction
   extender is added so the real hit area is never under 44x44 CSS px. Nothing moves. */
.mh-utilpill,.hh-menupill,.hh-searchbtn,.hh-menubtn,.mh-pulsebar__search{position:relative}
.mh-utilpill::after,.hh-menupill::after,.hh-searchbtn::after,.hh-menubtn::after,.mh-pulsebar__search::after{
 content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
 width:100%;min-width:44px;height:100%;min-height:44px;pointer-events:auto}
/* ---- RapHaven donor geometry, measured from the approved fliplab captures ----
   Every value below is the donor ratio applied to the HipHopHaven card width, so the two
   systems match at identical viewports. One deliberate deviation: the action pill floors at
   44px for the touch gate (donor ratio alone yields 40px at a 1240 wrap). */
.hh-grid{--rh-gap:.0734;--rh-pad:.0527;--rh-media:.5686;--rh-m2c:.0414;--rh-cat:.0603;--rh-c2h:.0527;--rh-act:.1017;
 display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:29px;align-items:start}
.hh-flipcard--news{--w:394px;height:auto;min-height:0;perspective:1400px;position:relative}
.hh-flipcard--news .hh-flipinner{min-height:0;height:auto;position:relative}
.hh-flipcard--news .hh-face{position:relative;height:auto;min-height:0;margin:0;display:flex;flex-direction:column;
 border:3px solid #0F9FE1;border-radius:14px;background:#fff;padding:calc(var(--w) * var(--rh-pad));
 box-shadow:0 6px 18px rgba(6,40,58,.10)}
/* the back is stacked over the front so one face never inflates the other's cell */
.hh-flipcard--news .hh-back{overflow:hidden}
.hh-flipcard--news .hh-front .hh-media,.hh-flipcard--news .hh-backmedia .hh-media{
 aspect-ratio:16/9.1;border-radius:8px;overflow:hidden;margin:0;flex:none}
.hh-flipcard--news .hh-media img{width:100%;height:100%;object-fit:cover;display:block}
.hh-flipcard--news .hh-cats{margin:calc(var(--w) * var(--rh-m2c)) 0 0;display:flex;flex-wrap:wrap;gap:8px;flex:none}
.hh-flipcard--news .hh-cats a{min-height:calc(var(--w) * var(--rh-cat));display:inline-flex;align-items:center;
 padding:0 11px;border-radius:3px;background:#0F9FE1;color:#fff;font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.hh-flipcard--news .hh-cats a:hover{background:#0879B3;color:#fff}
.hh-flipcard--news .hh-title{margin:calc(var(--w) * var(--rh-c2h)) 0 0;font-size:26px;line-height:1.14;font-weight:900;letter-spacing:-0.02em;
 display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hh-flipcard--news .hh-front .hh-dek{margin:10px 0 0;font-size:15.5px;line-height:1.5;color:#54626C;
 display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hh-flipcard--news .hh-meta{margin:10px 0 0;font-size:13.5px;color:#6B7883}
/* donor action pill: full inner width, follows the content, no auto spacer */
.hh-flipcard--news .hh-flipbtn{width:100%;margin:14px 0 0;min-height:max(44px,calc(var(--w) * var(--rh-act)));
 display:flex;align-items:center;justify-content:center;gap:10px;border:2px solid #0F9FE1;border-radius:6px;
 background:#fff;color:#0B4A66;font-family:inherit;font-size:17px;font-weight:900;letter-spacing:.02em;cursor:pointer}
.hh-flipcard--news .hh-flipbtn:hover{background:#0F9FE1;color:#fff}
.hh-flipcard--news .hh-flipbtn__u{font-size:1.35em;line-height:1;color:inherit;margin:0}
.hh-flipcard--news .hh-back .hh-dek{font-size:16px;line-height:1.5;margin:12px 0 0;-webkit-line-clamp:5;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.hh-flipcard--news .hh-backnav{margin:14px 0 0;display:grid;gap:9px}
.hh-flipcard--news .hh-backnav .hh-flipbtn{margin:0}
.hh-flipcard--lead{--w:1240px;grid-column:1/-1}
.hh-flipcard--lead .hh-title{font-size:clamp(30px,3.2vw,44px);-webkit-line-clamp:unset;display:block;overflow:visible;text-overflow:clip;text-wrap:balance;overflow-wrap:normal;hyphens:none}
.hh-flipcard--lead .hh-front .hh-media,.hh-flipcard--lead .hh-backmedia .hh-media{aspect-ratio:16/6.4}
.hh-flipcard--lead .hh-flipbtn{max-width:520px}
@media (max-width:1000px){.hh-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.hh-flipcard--news{--w:340px}}
@media (max-width:640px){
 .hh-grid{grid-template-columns:minmax(0,1fr);gap:20px}
 .hh-flipcard--news{--w:min(390px,92vw)}
 .hh-flipcard--news .hh-title{font-size:24px}
 .hh-flipcard--lead{--w:min(390px,92vw)}
}

/* donor ratios bound to the real card width (container query = no guessed --w) */
.hh-grid .hh-flipcard--news{container-type:inline-size;container-name:hhcard}
.hh-grid .hh-flipcard--news .hh-face{padding:5.27cqw;gap:0;border-width:3px;border-radius:14px;border-color:#0F9FE1}
.hh-grid .hh-flipcard--news .hh-cats{margin-top:4.14cqw}
.hh-grid .hh-flipcard--news .hh-cats a{min-height:max(24px,6.03cqw)}
.hh-grid .hh-flipcard--news .hh-title{margin-top:5.27cqw}
.hh-grid .hh-flipcard--news .hh-front .hh-dek{margin-top:2.5cqw}
.hh-grid .hh-flipcard--news .hh-meta{margin-top:2.5cqw}
.hh-grid .hh-flipcard--news .hh-flipbtn{margin:3.5cqw 0 0;min-height:max(44px,10.17cqw);width:100%;
 border-radius:6px;font-size:max(15px,4.3cqw);padding:0 12px}
.hh-grid .hh-flipcard--news .hh-backnav .hh-flipbtn{margin:0}
.hh-grid .hh-flipcard--lead .hh-flipbtn{max-width:520px;font-size:19px}

.hh-grid{gap:2.34%!important;row-gap:34px!important;grid-template-columns:minmax(0,1fr)!important}
@media (min-width:760px){.hh-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (min-width:1080px){.hh-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}

.hh-media--portrait{grid-template-rows:100%;grid-template-columns:100%;overflow:hidden}
.hh-media--portrait img{min-width:0;min-height:0;max-height:100%}

.hh-media--portrait picture,.hh-media--portrait .hgn-pic{display:block;width:100%;height:100%;min-width:0;min-height:0;position:relative;z-index:1}

/* ===== EMERGENCY FLIP REPAIR — RapHaven donor engine (founder order, 2026-08-25) =====
   STABLE-HEIGHT LAW (§5): both faces share one grid cell and stretch to one footprint, so a face
   can never collapse the wrapper or leave a detached action strip. Face visibility is CLASS-driven
   only; a stranded [hidden] attribute from any legacy path is neutralized, cannot blank a card,
   cannot take focus, cannot intercept a pointer. Backface prefixed for Safari. */
.hh-flipcard{perspective:1400px}
.hh-flipcard .hh-flipinner{display:grid;position:static;min-height:0;transform-style:preserve-3d}
.hh-flipcard .hh-face{grid-area:1/1;position:relative;inset:auto;height:auto;min-height:0;overflow:hidden;
 backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:visibility 0s linear .17s}
.hh-flipcard .hh-back{transform:rotateY(180deg);visibility:hidden;pointer-events:none}
.hh-flipcard.flipped .hh-back{visibility:visible;pointer-events:auto}
.hh-flipcard.flipped .hh-front{visibility:hidden;pointer-events:none}
.hh-flipcard .hh-face[hidden]{display:flex}
@media (prefers-reduced-motion:reduce){.hh-flipcard .hh-face{transition:none}}
/* donor terminal rhythm: the action group closes each face; back deck clamps keep the faces
   within a few px of each other so the shared cell never opens a cavity */
.hh-flipcard--news .hh-front .hh-flipbtn{margin-top:auto}
.hh-flipcard--news .hh-back .hh-backnav{margin-top:auto}
.hh-flipcard--news .hh-back .hh-dek{-webkit-line-clamp:4}
/* §9 link law: the photo is a doorway to the article on BOTH faces */
.hh-flipcard .hh-media{cursor:pointer}
/* ===== ARTICLE TYPE REPAIR (§8) — blue is an accent, never long-form body copy ===== */
#app article h1,#hgn-article h1,.hh-doc h1{color:#0B1820!important}
#app article p,#hgn-article p,.hh-doc__copy p{color:#17242C!important;font-size:18px!important;line-height:1.65!important;font-weight:400}
#app article .hh-dek,#hgn-article .hgn-dek,.hh-doc .hh-dek{color:#263842!important}
#app article figcaption,#hgn-article figcaption,#app article .hh-credit,#hgn-article .hgn-credit,.hh-doc figcaption,.hh-doc__credit{color:#50616B!important;font-size:14.5px!important;line-height:1.5}
#app article .hh-meta,#hgn-article .hgn-meta,#app article time,#hgn-article time,.hh-doc .hh-fs__meta{color:#50616B!important}
#app article blockquote,#hgn-article blockquote,.hh-doc__copy blockquote{color:#17242C!important;border-left:3px solid #1FA6D9}
#app article p a,#hgn-article p a,.hh-doc__copy p a,.hh-doc__copy li a{color:#0A6A92!important;text-decoration:underline}
#app article p a:hover,#hgn-article p a:hover,.hh-doc__copy p a:hover,.hh-doc__copy li a:hover{color:#075070!important}
@media (max-width:600px){#app article p,#hgn-article p,.hh-doc__copy p{font-size:17px!important;line-height:1.6!important}}


/* ===== 640x640 DEFAULT POST FOOTPRINT (founder course correction, Aug 28) =====
   The square BOX is the default logical display for every standard surface. The source ratio never
   sets the card height; the long portrait survives only as the deliberate PORTRAIT EDITORIAL ROW. */
.hh-media--sq{aspect-ratio:1/1!important;max-width:640px;margin-inline:auto;background:#0F9FE1;border-radius:10px;overflow:hidden;padding:0!important;box-sizing:border-box!important;max-height:none!important;display:block;position:relative}
.hh-media--sq picture{display:block;width:100%;height:100%;max-width:100%!important;max-height:100%!important}
.hh-media--sq img{width:100%!important;height:100%!important;display:block;object-fit:cover;object-position:calc(var(--fx-d,.5) * 100%) calc(var(--fy-d,.37) * 100%);max-width:none!important;max-height:none!important;min-width:0;min-height:0}
.hh-media--sq[data-crop="contain"] img{object-fit:contain;object-position:50% 50%}
@media (max-width:600px){.hh-media--sq img{object-position:calc(var(--fx-m,.5) * 100%) calc(var(--fy-m,.31) * 100%)}
 .hh-media--sq[data-crop="contain"] img{object-position:50% 50%}}
/* every standard card surface takes the square box, whatever ratio it used before */
.hh-flipcard--news .hh-front .hh-media--sq,.hh-flipcard--news .hh-backmedia .hh-media--sq,
.hh-flipcard--lead .hh-front .hh-media--sq,.hh-flipcard--lead .hh-backmedia .hh-media--sq,
.hh-regcard .hh-media--sq,#app article .hh-media--sq,#hgn-article .hh-media--sq{aspect-ratio:1/1!important}
.hh-media--sq.imgfail{background:var(--hh-blue)}
.hh-media--sq.imgfail img{display:none!important}

/* ===== PORTRAIT EDITORIAL ROW — OPTIONAL, EDITOR-SELECTED (never automatic) ===== */
.hh-row{display:grid;grid-template-columns:clamp(240px,28%,300px) minmax(0,1fr);gap:30px;align-items:center;
 border:3px solid #0F9FE1;border-radius:16px;background:#fff;padding:22px;margin:0 0 29px;
 box-shadow:0 3px 0 rgba(9,150,205,.28),0 16px 32px rgba(11,24,32,.09)}
.hh-row .hh-media--row{max-width:300px!important;aspect-ratio:1705/2560!important;padding:0!important;
 border-radius:10px;margin:0;max-height:none!important;overflow:hidden}
.hh-row .hh-media--row img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:50% 22%}
.hh-row .hh-media--row::after{inset:0;border-radius:10px}
.hh-row__body{min-width:0;display:flex;flex-direction:column;gap:13px;align-items:flex-start}
.hh-row__eyebrow{margin:0;font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#0A6A92}
.hh-row .hh-title{font-size:clamp(28px,2.7vw,40px);line-height:1.06;margin:0;color:#0B1820}
.hh-row .hh-dek{font-size:18px;line-height:1.5;color:#2A333B;margin:0}
.hh-row .hh-meta{margin:0}
@media (max-width:700px){.hh-row{grid-template-columns:minmax(0,1fr);gap:18px;padding:18px}
 .hh-row .hh-media--row{margin-inline:auto}.hh-row .hh-title{font-size:26px}}

/* ===== ARTICLE TAB — donor document architecture in HipHopHaven blue ===== */
.hh-doc{display:block}
.hh-doc__stage{background:#0B0F12;border-top:6px solid #0F9FE1;border-radius:12px 12px 0 0;overflow:hidden;padding:0 0 2px}
.hh-doc__stage .hh-ribbon{margin:0;border-radius:0}
.hh-doc__stage .hh-media--sq,.hh-doc__stage .hh-doc__hero{border-radius:0;margin:8px auto 0;background:#0B0F12;aspect-ratio:16/9!important}
.hh-doc__h1{color:#fff!important;font-size:clamp(30px,4.3vw,50px);line-height:1.02;letter-spacing:-.015em;
 text-transform:uppercase;margin:0;padding:20px 22px 24px;font-weight:900}
.hh-crumbs{display:flex;flex-wrap:wrap;gap:9px;font-size:14.5px;color:#50616B;padding:16px 2px 0;margin:0}
.hh-crumbs a{color:#0A6A92}
.hh-crumbs [aria-current]{color:#8894A0}
.hh-doc__credit{font-size:12.5px;color:#50616B;margin:6px 0 0}
.hh-doc__copy>p:first-child{border-left:4px solid #0F9FE1;padding-left:16px}
.hh-doc__related{border-top:2px solid rgba(9,150,205,.3);margin-top:24px;padding-top:14px}
.hh-doc__relhead{margin:0 0 8px;font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#0A6A92}
.hh-doc__related ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:7px}
.hh-doc__related a{font-weight:700}

/* FRONT/BACK MEDIA IDENTITY (§6): the card-scoped object-fit rules used to beat the crop attribute,
   so the front cropped while the back contained the SAME derivative. The record decides, not the face. */
.hh-flipcard--news .hh-media--sq[data-crop="contain"] img,.hh-flipcard--lead .hh-media--sq[data-crop="contain"] img,
.hh-regcard .hh-media--sq[data-crop="contain"] img,.hh-doc__stage .hh-media--sq[data-crop="contain"] img,
.hgn-kwrap .hh-media--sq[data-crop="contain"] img{object-fit:contain!important;object-position:50% 50%!important}
.hh-flipcard--news .hh-media--sq[data-crop="cover"] img,.hh-flipcard--lead .hh-media--sq[data-crop="cover"] img,
.hh-regcard .hh-media--sq[data-crop="cover"] img,.hh-doc__stage .hh-media--sq[data-crop="cover"] img{object-fit:cover!important}

/* the row's media column is a grid item: the portrait plate's auto inline margins made it shrink-to-fit
   (150px instead of the 240-300px track), so the row column is sized explicitly here. */
.hh-row .hh-media--row{width:100%!important;margin-inline:0!important;max-width:300px!important;align-self:center}
@media (max-width:700px){.hh-row .hh-media--row{margin-inline:auto!important;max-width:min(88vw,300px)!important}}

/* ARTICLE TAB MASTHEAD — matched to the founder's reference capture (structure only; HipHopHaven identity).
   Thick brand rule over the black card, mark left, live category pill right, thin brand rule under. */
.hh-doc__stage{border-top:7px solid #1FA6D9}
.hh-doc__rail{display:flex;align-items:center;justify-content:space-between;gap:14px;background:#000;
 border-bottom:3px solid #1FA6D9;padding:9px 10px}
.hh-doc__mark{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:56px;height:56px;border-radius:3px}
.hh-doc__mark img{width:100%;height:100%;object-fit:contain;display:block}
.hh-doc__cat{background:#1FA6D9;color:#fff;font-weight:900;text-transform:uppercase;letter-spacing:.015em;
 font-size:clamp(14px,1.55vw,23px);line-height:1;padding:11px 17px;text-decoration:none;white-space:nowrap}
.hh-doc__cat:hover{background:#0F8FC4}
.hh-doc__stage>.hh-media{margin:8px auto 0!important;max-width:calc(100% - 16px)!important}
@media (max-width:520px){.hh-doc__mark{width:46px;height:46px}.hh-doc__cat{padding:9px 12px;white-space:normal}}

/* FOUNDER DIRECTIVE (Aug 28): the Article Tab hero is the reference's edge-to-edge landscape frame —
   the wide plate fills the black card, photo cropped on its focal point, no matte bars. */
.hh-doc__stage>.hh-media{aspect-ratio:16/9!important;width:calc(100% - 16px)!important;max-width:1200px!important;margin:8px auto 0!important;overflow:hidden!important;border-radius:0!important;box-sizing:border-box!important;padding:0!important}
.hh-doc__stage>.hh-media img{width:100%!important;height:100%!important;display:block!important;visibility:visible!important;opacity:1!important}
.hh-doc__stage>.hh-media[data-crop="contain"] img{object-fit:contain!important;object-position:center!important}
.hh-doc__stage>.hh-media[data-crop="cover"] img{object-fit:cover!important;object-position:calc(var(--fx-d,.5)*100%) calc(var(--fy-d,.37)*100%)!important}
.hh-doc__stage>.hh-media::after{content:none!important}


.hh-doc__hero{aspect-ratio:16/9!important;width:calc(100% - 16px)!important;max-width:1200px!important;margin:8px auto 0!important;background:#000!important;overflow:hidden!important;display:block!important;box-sizing:border-box!important;padding:0!important}
.hh-doc__hero img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;display:block!important;max-width:none!important}


/* Article Tab hero — the founder's reference frame: edge-to-edge landscape inside the black card. */
.hh-doc__hero img{width:100%!important;height:100%!important;object-fit:cover!important;
 object-position:calc(var(--fx-d,.5)*100%) calc(var(--fy-d,.08)*100%)!important;display:block!important;max-width:none!important}
@media (max-width:600px){.hh-doc__hero{aspect-ratio:4/3!important}}

/* HAVEN CORE BOOKMARK (Aug 28) — icon only. Replaces the oversized labelled Save Story box. */
.hh-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hh-save--icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;
 background:transparent;border:2px solid rgba(31,166,217,.55);border-radius:999px;color:#18AFEE;cursor:pointer;
 font:inherit;line-height:1;transition:background .15s cubic-bezier(.2,.8,.2,1),transform .15s cubic-bezier(.2,.8,.2,1)}
.hh-save--icon .hh-save__glyph{font-size:22px;line-height:1}
.hh-save--icon:hover{background:rgba(31,166,217,.16);border-color:#1FA6D9}
.hh-save--icon:active{transform:scale(.94)}
.hh-save--icon:focus-visible{outline:3px solid #fff;outline-offset:2px}
.hh-save--icon.is-on{background:#18AFEE;border-color:#18AFEE;color:#06212E}
.hh-save--icon.is-on .hh-save__glyph::before{content:'\2605'}
.hh-save--icon.is-on .hh-save__glyph{font-size:0}
.hh-save--icon.is-on .hh-save__glyph::before{font-size:22px}

/* ===== ARTICLE TAB EDITORIAL RENDERING (founder, Aug 28) =====
   The Article Tab is the SAME article as the Regular Article route, so its typography comes from the
   shared block above. These rules only add the newsroom floors the overlay context needs and remove
   every browser-default presentation. No transform:scale, no zoom, no miniature wrapper. */
.hh-fs__body{padding:0 0 26px}
.hh-doc{max-width:none;padding:0}
.hh-doc__stage{padding-bottom:0}
/* brand/category rail — structured grid: fixed non-shrinking logo cell + flexible category region */
.hh-doc__rail{display:grid!important;grid-template-columns:56px minmax(0,1fr);align-items:center;
 column-gap:16px;background:#000;border-bottom:3px solid #1FA6D9;padding:10px 14px}
.hh-doc__mark{width:56px;height:56px;flex:0 0 56px;display:flex;align-items:center;justify-content:center;
 position:static;margin:0;transform:none;overflow:visible}
.hh-doc__mark img{width:56px;height:56px;object-fit:contain;display:block}
.hh-doc__cat{justify-self:end;min-width:0;max-width:100%;overflow-wrap:anywhere;text-align:right;
 background:#1FA6D9;color:#fff;font-weight:900;text-transform:uppercase;letter-spacing:.015em;
 font-size:clamp(14px,1.5vw,22px);line-height:1.1;padding:11px 17px;text-decoration:none}
@media (max-width:600px){.hh-doc__rail{grid-template-columns:44px minmax(0,1fr);column-gap:12px;padding:9px 12px}
 .hh-doc__mark,.hh-doc__mark img{width:44px;height:44px;flex-basis:44px}}
/* headline / deck / metadata hierarchy */
.hh-doc__h1{font-size:clamp(32px,4vw,44px)!important;line-height:1.04!important;font-weight:900;
 padding:22px 24px 26px!important;text-wrap:balance}
@media (max-width:600px){.hh-doc__h1{font-size:30px!important;padding:18px 18px 20px!important}}
.hh-doc>.hh-crumbs,.hh-doc>.hh-fs__meta,.hh-doc>.hh-doc__credit,.hh-doc>.hh-doc__copy,
.hh-doc>.hh-doc__related,.hh-doc>.dsp-set{padding-left:24px;padding-right:24px;box-sizing:border-box}
@media (max-width:600px){.hh-doc>.hh-crumbs,.hh-doc>.hh-fs__meta,.hh-doc>.hh-doc__credit,
 .hh-doc>.hh-doc__copy,.hh-doc>.hh-doc__related,.hh-doc>.dsp-set{padding-left:18px;padding-right:18px}}
.hh-doc .hh-fs__meta{font-size:14px!important;font-weight:700;letter-spacing:.01em;margin:12px 0 0}
.hh-doc__credit{margin:4px 0 0}
/* body: real measure, real rhythm, no default lists or rules */
.hh-doc__copy{max-width:68ch;font-family:inherit}
.hh-doc__copy p{margin:0 0 1em}
.hh-doc__copy p:last-child{margin-bottom:0}
.hh-doc__copy h2,.hh-doc__copy h3{color:#0B1820!important;font-size:26px!important;line-height:1.15!important;
 font-weight:900;letter-spacing:-.01em;margin:1.5em 0 .5em}
@container hhdoc (max-width:600px){.hh-doc__copy h2,.hh-doc__copy h3{font-size:22px!important}}
.hh-doc__copy ul,.hh-doc__copy ol{margin:0 0 1em;padding:0 0 0 1.1em;display:flex;flex-direction:column;gap:.5em}
.hh-doc__copy li{color:#17242C;font-size:18px;line-height:1.6}
@media (max-width:600px){.hh-doc__copy li{font-size:17px}}
.hh-doc__copy li::marker{color:#1FA6D9;font-weight:800}
.hh-doc__copy hr{border:0;border-top:2px solid rgba(9,150,205,.28);margin:1.6em 0}
.hh-doc__copy a{font-weight:700;text-decoration-thickness:2px;text-underline-offset:2px}
.hh-doc__copy a:focus-visible{outline:3px solid #1FA6D9;outline-offset:2px}
/* breadcrumbs + category links are NAVIGATION, never body links */
.hh-doc .hh-crumbs a,.hh-doc__rail a{text-decoration:none;font-weight:800;letter-spacing:.02em}
.hh-doc .hh-crumbs a{color:#0A6A92;font-size:13.5px;text-transform:uppercase}
.hh-doc .hh-crumbs a:hover{color:#075070;text-decoration:underline}
/* Related Coverage — the component, not a raw list of blue links */
.hh-doc__related ul{padding-left:0;list-style:none;gap:0}
.hh-doc__related li{border-top:1px solid rgba(9,150,205,.22)}
.hh-doc__related li:first-child{border-top:0}
.hh-doc__related a{display:block;padding:12px 0;color:#0B1820!important;font-size:18px;line-height:1.25;
 font-weight:800;text-decoration:none}
.hh-doc__related a:hover{color:#0A6A92!important}
.hh-doc__related a:focus-visible{outline:3px solid #1FA6D9;outline-offset:2px}
/* the close control keeps a 44x44 target */
.hh-fs__x{min-width:44px;min-height:44px}

.hh-doc .hh-dek{font-size:19px;line-height:1.4;margin:10px 0 0;font-weight:500}
@media (max-width:600px){.hh-doc .hh-dek{font-size:17.5px}}
.hh-fs__foot,.hh-fs__note{display:none!important}

/* the wide well was inheriting padding/border from the generic media rule, so 436px wide computed 253px
   tall (1.725) instead of 245 (1.778). Box the frame explicitly. */
.hh-doc__hero,.hh-doc__stage .hh-media--wide{box-sizing:border-box!important;padding:0!important;border:0!important}
/* the rail scales from the ARTICLE CONTAINER, not the viewport — so a 390px article column inside a wider
   window gets the mobile mark, exactly as it would on a 390px device. */
.hh-doc{container-type:inline-size;container-name:hhdoc}
@container hhdoc (max-width:600px){
 .hh-doc__rail{grid-template-columns:44px minmax(0,1fr);column-gap:12px;padding:9px 12px}
 .hh-doc__mark,.hh-doc__mark img{width:44px;height:44px;flex-basis:44px}
 .hh-doc__h1{font-size:30px!important;padding:18px 18px 20px!important}
 .hh-doc__copy p,.hh-doc__copy li{font-size:17px!important;line-height:1.6!important}
 .hh-doc>.hh-crumbs,.hh-doc>.hh-fs__meta,.hh-doc>.hh-doc__credit,.hh-doc>.hh-doc__copy,
 .hh-doc>.hh-doc__related{padding-left:18px;padding-right:18px}}

/* the HGN article document owns its own typography — the legacy .hh-doc block must not reach inside it
   (that override is what painted the headline slab navy-on-black). */
.hgnad h1,.hgnad h2,.hgnad h3,.hgnad p,.hgnad a,.hgnad li{font-family:inherit}
.hgnad__h1{color:#fff!important}
.hh-fs__body{padding:0}