/* HIPHOPHAVEN PREMIUM FEATURE — composition preserved from the approved cover-story system (hairline
   grid, staggered display lines, one accent, byline rail, CTA conclusion), now built on the photo-backed
   publishing object: ribbon fused to the top edge, photograph at 0px gap, copy beneath the photograph.
   HipHopHaven blue #1FA6D9. */
.hhpf{position:relative;overflow:hidden;background:#0B1820;color:#fff;border-radius:0;
 padding:0;border-top:7px solid #1FA6D9}
/* ===== RIBBON FUSED TO THE PUBLISHING OBJECT: no gap, no detachment, no second rail =====
   The shared RibbonRail's root is .rr-host (assets/ribbon-rail.css owns all its geometry — nothing is
   redeclared here); this only removes any inherited outer spacing so the seam to the photo is 0px. */
.hhpf>.rr-host{margin:0!important;padding:0!important;border-radius:0!important;display:block}
/* ===== THE APPROVED PHOTOGRAPH — 0px gap to the ribbon above, nothing painted over it =====
   The 1200x675 derivative carries the HipHopHaven blue matte baked in (stored 'contain' decision), so
   the image is shown at its own ratio: no crop, no scale-to-fill, no blurred duplicate behind it. */
.hhpf__media{margin:0;padding:0;font-size:0;line-height:0;background:#06131B}
.hhpf__media .hh-media{margin:0!important;padding:0!important;border:0!important;border-radius:0!important;
 aspect-ratio:auto!important;display:block;width:100%;box-sizing:border-box}
.hhpf__media img{display:block;width:100%;height:auto;margin:0}
/* ===== THE EDITORIAL COMPOSITION — beneath the photograph, never over it ===== */
.hhpf__body{position:relative;padding:clamp(24px,3.4vw,44px) clamp(20px,3.4vw,46px) clamp(26px,3vw,40px)}
.hhpf__grid{position:absolute;inset:0;pointer-events:none;opacity:.5;
 background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 84px),
 repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 84px),
 radial-gradient(120% 90% at 82% 10%,rgba(31,166,217,.32),transparent 62%)}
.hhpf__body>*{position:relative}
.hhpf__label{margin:0 0 clamp(12px,1.8vw,20px);font-size:12.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#7FD5F5}
.hhpf__h{margin:0;display:flex;flex-direction:column;gap:2px;font-weight:900;letter-spacing:-.022em;line-height:.98;
 font-size:clamp(30px,4.4vw,58px);text-transform:none;color:#fff;text-wrap:pretty}
.hhpf__line{display:block;padding-left:calc(var(--i) * clamp(8px,1.2vw,22px))}
.hhpf__dek{margin:clamp(16px,2.2vw,24px) 0 0;max-width:56ch;font-size:clamp(17px,1.5vw,20px);line-height:1.45;color:#CFE6F0}
.hhpf__by{margin:14px 0 0;font-size:14px;font-weight:700;letter-spacing:.02em;color:#8FA6B2;
 border-top:1px solid rgba(127,213,245,.28);padding-top:14px}
/* the production CTA — never a default link. These values MIRROR the one shared capsize rule
   `.hh-cta-full` in css/hiphophaven-skin.css (58px floor / 22px / weight 900 / uppercase / one line);
   the markup also carries .hh-cta-full so the shared rule governs wherever the skin is loaded. */
.hhpf__cta{margin:clamp(20px,2.6vw,30px) 0 0;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;text-transform:uppercase;
 white-space:nowrap;letter-spacing:.03em;color:#06212E;background:#1FA6D9;border:2.5px solid #1FA6D9;
 border-radius:999px;cursor:pointer;text-decoration:none;
 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)}
.hhpf__cta:hover{background:#4FC4F5;border-color:#4FC4F5;color:#04222F;text-decoration:none;transform:translateY(-2px)}
.hhpf__cta:active{transform:scale(.98)}
.hhpf__cta:focus-visible{outline:3px solid #fff;outline-offset:3px}
.hhpf__u{font-size:1.15em;line-height:1;display:inline-flex}
/* the fixture disclosure travels with the photograph — honesty, never hidden */
.hhpf__credit{margin:18px 0 0;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7E93A0}
@media (prefers-reduced-motion:reduce){.hhpf__cta{transition:none}.hhpf__cta:hover{transform:none}}
/* ===== NARROW-WIDTH CTA: NO BLEED, STILL ONE LINE, STILL >=44px =====
   MEASURED DEFECT this fixes: the pill is white-space:nowrap, so at 22px the label needs ~339px. The
   mobile content box is 228px at a 320 viewport and 286px at 390, and because .hhpf is overflow:hidden
   the excess was CLIPPED rather than scrolled — document scrollWidth stayed equal to clientWidth, so an
   overflow check read "0" while the reader actually lost the words "FULL STORY". Measured clipping was
   91.4px at 320, 33.4px at 390, and a 13.4px bleed past the content box at 430.
   The order's 22px / one-line figure is the DESKTOP target (proven at 1440 and 768, 359.4x58.3, 22px,
   900, 1 line); at narrow widths the binding gates are no bleed and a >=44px hit target. So the pill
   becomes full-width of the content box and the label steps down ONLY as far as needed to stay on one
   line. Padding tightens to 12px to buy back width before any type is sacrificed. Label, weight,
   uppercase, radius, colour and control count are unchanged.
   NOT CHANGED, AND FLAGGED INSTEAD: the shared `.hh-cta-full` rule in css/hiphophaven-skin.css keeps
   font-size:22px below 600px, so any OTHER surface using it in a narrow column has the same latent clip.
   That is a separate authorized change, not something to alter quietly from inside this component. */
@media (max-width:600px){
 .hhpf__line{padding-left:calc(var(--i) * 6px)}
 .hhpf__body{padding-left:12px;padding-right:12px}
 .hhpf__cta{min-height:52px;padding:12px;font-size:min(22px,5.2vw);letter-spacing:.02em;
  width:100%;max-width:100%;box-sizing:border-box}}