/* HGN PHOTO SYSTEM — media portal, King stacks, stream. HipHopHaven identity only.
   The photo is an editorial object living INSIDE the approved blue environment; a deliberate
   perimeter of brand field stays visible on desktop and mobile. No blur-fill, no white card. */
.hgn{--b:#0F9FE1;--b-hot:#18AFEE;--b-deep:#0996CD;--ink:#0B0E10;--pap:#F2F7FA;--mut:#93A5AF;--rule:#233038}

/* ---------- the media portal ---------- */
.hgn-media{position:relative;margin:0;aspect-ratio:var(--ratio,4/5);overflow:hidden;isolation:isolate;
 background:#0A1218;border-radius:2px}
/* the signature field: layered blue light + fine editorial grain, always visible around the photo */
.hgn-media__field{position:absolute;inset:0;z-index:0;pointer-events:none;
 background:
  radial-gradient(120% 82% at 50% -14%,rgba(24,175,238,.44),transparent 62%),
  radial-gradient(90% 60% at 8% 108%,rgba(9,150,205,.34),transparent 66%),
  repeating-linear-gradient(112deg,rgba(255,255,255,.028) 0 1px,transparent 1px 13px),
  linear-gradient(168deg,#123243 0%,#0A1A24 52%,#0E2836 100%)}
.hgn-media__field::after{content:"";position:absolute;inset:0;
 box-shadow:inset 0 0 0 1px rgba(24,175,238,.34),inset 0 1px 0 rgba(255,255,255,.1)}
.hgn-pic{display:block;position:relative;z-index:1;width:100%;height:100%}
.hgn-media img{display:block;width:100%;height:100%;
 object-position:calc(var(--fx-d)*100%) calc(var(--fy-d)*100%)}
@media(max-width:600px){.hgn-media img{object-position:calc(var(--fx-m)*100%) calc(var(--fy-m)*100%)}}
.hgn-media--cover img{object-fit:cover}
/* premium inset: the portrait is placed, not squeezed — brand field frames it on every side */
/* the portrait gets a defined stage inside the field — a deliberate perimeter, not a hairline */
.hgn-media--contain{padding:clamp(16px,5.2%,34px)}
.hgn-media--contain img{object-fit:contain;filter:drop-shadow(0 20px 38px rgba(2,14,22,.66))}
.hgn-media--contain .hgn-pic{height:100%}
.hgn-media--contain::after{content:"";position:absolute;z-index:0;inset:clamp(9px,3%,20px);pointer-events:none;
 box-shadow:inset 0 0 0 1px rgba(24,175,238,.22);
 background:radial-gradient(90% 70% at 50% 8%,rgba(24,175,238,.16),transparent 70%)}
.hgn-media__kick{position:absolute;z-index:2;left:0;bottom:0;padding:7px 11px;
 background:linear-gradient(180deg,transparent,rgba(6,16,22,.9));width:100%;
 font-size:10.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#BFE3F5}
.hgn-media.is-failed .hgn-pic{display:none}
.hgn-media.is-failed::after{content:"Image unavailable \u2014 reserved frame";position:absolute;inset:0;z-index:2;
 display:grid;place-items:center;text-align:center;padding:14px;color:#9DB6C4;font-size:12px;font-weight:700;letter-spacing:.08em}
.hgn-fail{display:grid;place-items:center;background:#0A1218;box-shadow:inset 0 0 0 1px rgba(24,175,238,.3);
 color:#9DB6C4;font-size:12px;font-weight:700;text-align:center;padding:14px}

/* ---------- shared card language ---------- */
.hgn-sec{padding:34px 0;border-top:1px solid var(--rule)}
.hgn-sec:first-of-type{border-top:0}
.hgn-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px}
.hgn-head h2{margin:0;font-size:clamp(21px,2.5vw,30px);font-weight:900;letter-spacing:-.02em;text-transform:uppercase}
.hgn-head p{margin:0;font-size:13px;color:var(--mut)}
.hgn-kick{margin:0 0 6px;font-size:11.5px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--b)}
.hgn-cats{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 7px}
.hgn-cats a{font-size:10.5px;font-weight:900;letter-spacing:.11em;text-transform:uppercase;color:#08191F;
 background:var(--b);padding:3px 9px;text-decoration:none;border-radius:1px}
.hgn-cats a:hover{background:var(--b-hot)}
/* long-headline stress: clamp instead of collapse, on every surface */
.hgn-ttl{margin:0;font-size:19px;font-weight:900;line-height:1.13;letter-spacing:-.015em;text-wrap:balance;
 display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.hgn-exc{margin:7px 0 0;font-size:14px;line-height:1.5;color:#A9BCC6;text-wrap:pretty;
 display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.hgn-flip__sum{margin:0;font-size:15px;line-height:1.5;color:#CBDCE4;text-wrap:pretty;
 display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.hgn-ttl a{color:#fff;text-decoration:none}
.hgn-ttl a:hover{color:var(--b-hot)}
.hgn-exc{margin:7px 0 0;font-size:14px;line-height:1.5;color:#A9BCC6;text-wrap:pretty}
.hgn-meta{margin:8px 0 0;font-size:11.5px;color:#7E939F}
.hgn-badge{display:inline-block;background:#2A2411;border:1px solid #6B5A17;color:#E8CE94;
 font-size:9.5px;font-weight:900;letter-spacing:.1em;padding:2px 7px;border-radius:2px;margin-left:6px;vertical-align:middle}

/* ---------- King stacks: stacks in the site language, never a hero box ---------- */
/* King grid follows the configured 1–6 count so three items never sit in a four-column
   grid with a dead slot — the stack must read as deliberate editorial pressure. */
.hgn-king{display:grid;gap:16px}
.hgn-king__grid{display:grid;gap:16px;grid-template-columns:repeat(var(--king-n,3),minmax(0,1fr))}
.hgn-king__grid>*{min-width:0}
@media(max-width:1100px){.hgn-king__grid{grid-template-columns:repeat(min(var(--king-n,3),2),minmax(0,1fr))}}
@media(max-width:680px){.hgn-king__grid{grid-template-columns:minmax(0,1fr)}}
.hgn-kcard{display:flex;flex-direction:column;background:linear-gradient(172deg,#101B22,#0A1218);
 border:1px solid var(--rule);border-top:3px solid var(--b);padding:0 0 16px;min-width:0}
.hgn-kcard:hover{border-color:rgba(24,175,238,.55)}
.hgn-kcard__b{padding:13px 15px 0;min-width:0}
.hgn-kcard__rank{position:absolute;z-index:3;top:9px;left:9px;display:grid;place-items:center;min-width:26px;height:26px;
 padding:0 7px;background:var(--b);color:#08191F;font-size:12px;font-weight:900;letter-spacing:.04em}
.hgn-kwrap{position:relative}

/* ---------- flip card (approved engine geometry, feature-mode wiring) ---------- */
.hgn-flip{position:relative;perspective:1300px;min-width:0}
.hgn-flip__in{position:relative;width:100%;height:100%;transform-style:preserve-3d;
 transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.hgn-flip.is-back .hgn-flip__in{transform:rotateY(180deg)}
.hgn-flip__f{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
 display:flex;flex-direction:column;background:linear-gradient(172deg,#101B22,#0A1218);
 border:1px solid var(--rule);border-top:3px solid var(--b);overflow:hidden}
.hgn-flip__back{transform:rotateY(180deg);padding:15px;gap:9px}
.hgn-flip__front .hgn-kcard__b{padding:13px 15px 0}
.hgn-flipbtn{margin:auto 15px 15px;min-height:52px;border:2px solid var(--b);border-radius:999px;
 background:linear-gradient(180deg,#12435A,#0B2231);color:#DFF3FC;font-family:inherit;font-size:15px;font-weight:900;
 letter-spacing:.06em;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;
 box-shadow:inset 0 1px 0 rgba(190,231,250,.34),0 3px 0 rgba(4,26,38,.8);transition:transform .16s cubic-bezier(.2,.8,.2,1)}
.hgn-flipbtn:hover{background:var(--b);color:#08191F;transform:translateY(-2px)}
.hgn-flipbtn:active{transform:scale(.98)}
.hgn-flipbtn__g{font-size:1.3em}
.hgn-flip__back .hgn-kick{color:var(--b-hot)}
.hgn-flip__sum{margin:0;font-size:15px;line-height:1.5;color:#CBDCE4;text-wrap:pretty}
.hgn-kcard{overflow:hidden}
.hgn-flip__acts{margin-top:auto;display:grid;gap:8px}
.hgn-read{min-height:52px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;
 background:var(--b);color:#08191F;font-size:15.5px;font-weight:900;letter-spacing:.05em;text-decoration:none;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 3px 0 rgba(4,26,38,.7)}
.hgn-read:hover{background:var(--b-hot);color:#08191F}
.hgn-return{min-height:44px;border:1px solid rgba(255,255,255,.3);border-radius:999px;background:transparent;
 color:#BFD3DD;font-family:inherit;font-size:13px;font-weight:800;cursor:pointer}
/* Category pills keep the approved compact HipHopHaven proportion; the hit area is extended
   to 44px with a transparent pseudo-element rather than redesigning the pill. */
.hgn-cats{position:relative}
.hgn-cats a{min-height:24px;display:inline-flex;align-items:center;position:relative}
.hgn-cats a::before{content:"";position:absolute;inset:-10px -6px;border-radius:3px}
.hgn-pg button{min-height:44px}
.hgn-return:hover{border-color:#fff;color:#fff}
:where(.hgn-flipbtn,.hgn-read,.hgn-return,.hgn-more,.hgn-pg a,.hgn-pg button):focus-visible{outline:3px solid #F5CA40;outline-offset:3px}

/* ---------- stream ---------- */
.hgn-blocklab{display:flex;align-items:center;gap:10px;margin:26px 0 12px;
 font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--b)}
.hgn-blocklab::after{content:"";flex:1;height:1px;background:var(--rule)}
.hgn-stream{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(258px,100%),1fr))}
.hgn-stream>*{min-width:0}
.hgn-slot{border:1px dashed #2E3C45;background:#0C1418;padding:13px 15px;min-height:118px;display:grid;align-content:start;gap:5px}
.hgn-slot p{margin:0;font-size:12.5px;line-height:1.45;color:#7E939F}
.hgn-slot b{font-size:13.5px;font-weight:900;letter-spacing:.02em;color:#A9BCC6}
.hgn-morewrap{display:grid;justify-items:center;gap:9px;margin-top:26px}
.hgn-more{min-height:56px;padding:0 34px;border:2px solid var(--b);border-radius:999px;background:var(--b);color:#08191F;
 font-family:inherit;font-size:16px;font-weight:900;letter-spacing:.09em;cursor:pointer;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 4px 0 rgba(4,26,38,.7)}
.hgn-more:hover{background:var(--b-hot);transform:translateY(-2px)}
.hgn-more[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.hgn-count{font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums}
.hgn-pg{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin-top:22px}
.hgn-pg a,.hgn-pg button{min-height:44px;min-width:44px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;
 border:1px solid var(--rule);border-radius:2px;background:#0C1418;color:#C6D6DE;font-family:inherit;font-size:14px;
 font-weight:800;text-decoration:none;cursor:pointer}
.hgn-pg a[aria-current="page"]{background:var(--b);border-color:var(--b);color:#08191F}
.hgn-pg a:hover,.hgn-pg button:hover{border-color:var(--b);color:#fff}

/* ---------- jumbotron image centre (same media object + art direction) ---------- */
.hgn-jumbo{position:relative;display:grid;grid-template-columns:1fr minmax(0,760px) 1fr;gap:0;align-items:stretch;
 background:linear-gradient(180deg,#0B1F2B,#08161E);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.hgn-jumbo__wing{position:relative;min-height:100%;
 background:radial-gradient(120% 100% at 50% 0%,rgba(24,175,238,.24),transparent 68%)}
.hgn-jumbo__wing::after{content:"";position:absolute;inset:0;
 background:repeating-linear-gradient(112deg,rgba(255,255,255,.02) 0 1px,transparent 1px 12px)}
.hgn-jumbo__c{padding:18px}
.hgn-jumbo__lab{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:10px}
.hgn-jumbo__lab span{font-size:10.5px;font-weight:900;letter-spacing:.15em;text-transform:uppercase;color:var(--b)}
@media(max-width:900px){.hgn-jumbo{grid-template-columns:1fr}.hgn-jumbo__wing{display:none}}

/* ---------- article landing page ---------- */
.hgn-art{max-width:820px;margin-inline:auto}
.hgn-art h1{margin:8px 0 10px;font-size:clamp(28px,4vw,46px);font-weight:900;line-height:1.05;letter-spacing:-.025em;text-wrap:balance}
.hgn-art__lede{font-size:18px;line-height:1.6;color:#B7C8D1;max-width:62ch;text-wrap:pretty}
.hgn-art__body p{font-size:17px;line-height:1.68;color:#C6D6DE;max-width:66ch;margin:0 0 15px;text-wrap:pretty}
.hgn-cap{margin:9px 0 0;font-size:12.5px;color:#8CA0AB;max-width:62ch}
.hgn-cap b{color:#B7C8D1;font-weight:700}
.hgn-note{margin:18px 0 0;padding:12px 15px;border-left:3px solid var(--b);background:rgba(15,159,225,.09);
 font-size:13.5px;line-height:1.55;color:#B7C8D1}

@media(prefers-reduced-motion:reduce){
 .hgn-flip__in{transition:none!important}
 .hgn-flipbtn:hover,.hgn-more:hover{transform:none}
}
@media(forced-colors:active){
 .hgn-kcard,.hgn-flip__f,.hgn-flipbtn,.hgn-read,.hgn-more{border:1px solid CanvasText}
 .hgn-media__field{display:none}
}
@media(max-width:600px){
 .hgn-sec{padding:26px 0}
 .hgn-stream,.hgn-king__grid{grid-template-columns:minmax(0,1fr)}
 .hgn-ttl{font-size:18px}
 .hgn-more{width:100%}
 .hgn-jumbo__c{padding:13px}
}

/* ARTICLE TYPE REPAIR (founder order §8, 2026-08-25) */
#hgn-article h1{color:#0B1820!important}
#hgn-article p{color:#17242C!important;font-size:18px!important;line-height:1.65!important}
#hgn-article figcaption,#hgn-article .hgn-credit{color:#50616B!important}
#hgn-article .hgn-dek{color:#263842!important}
#hgn-article .hgn-meta,#hgn-article time{color:#50616B!important}
#hgn-article p a{color:#0A6A92!important;text-decoration:underline}
@media (max-width:600px){#hgn-article p{font-size:17px!important}}

/* MEDIA GUARD (Aug 27): an editorial image paints only once it has DECODED. Pending or failed shows
   the approved HipHopHaven plate underneath — never a broken glyph, never a raw alt string. */
.hgn-media img,.hh-media img{opacity:0;transition:opacity .18s ease}
.hgn-media img.is-decoded,.hh-media img.is-decoded{opacity:1}
@media (prefers-reduced-motion:reduce){.hgn-media img,.hh-media img{transition:none}}
.hgn-media{background:#0879B3}
.hgn-media.is-failed::after,.hh-media.imgfail[data-plate]::after{content:attr(data-plate)!important;position:absolute;inset:0;z-index:3;background:linear-gradient(168deg,#0F9FE1 0%,#0895CC 46%,#0673A0 100%);display:grid;place-items:center;padding:16px;text-align:center;color:#fff;font-weight:900;font-size:clamp(18px,2.2vw,30px);line-height:1.06;letter-spacing:-0.01em;text-transform:uppercase}

/* DEADLOCK FIX (Aug 27): the legacy failure rules (`.hh-media.imgfail img{display:none}`,
   `.hgn-media.is-failed .hgn-pic{display:none}`) removed the image from layout, so a guarded image
   in the plate state had NO BOX — the browser then resolved the smallest candidate and never decoded
   it, which kept the plate on forever. A guarded image therefore keeps its box in every state and is
   hidden only visually, UNDER the plate, so it can always finish loading and clear its own plate. */
.hh-media.imgfail img[data-mediaguard]{display:block!important;visibility:hidden;opacity:0}
.hgn-media.is-failed .hgn-pic:has(img[data-mediaguard]){display:block!important;visibility:hidden}
.hh-media.imgfail img[data-mediaguard].is-decoded,
.hgn-media.is-failed .hgn-pic:has(img[data-mediaguard].is-decoded){visibility:visible;opacity:1}

/* the plate is a STATE OF LAST RESORT: if the well holds a decoded photograph, the plate cannot draw,
   no matter what class an earlier state left behind. */
.hgn-media:has(img[data-mediaguard].is-decoded)::after,
.hh-media:has(img[data-mediaguard].is-decoded)::after{content:none!important;background:none!important}
.hh-media--portrait:has(img.is-decoded)::after{content:""!important;background:none!important}