/* ===== HGN RIBBON RAIL — HIPHOPHAVEN EDITORIAL RIBBON (second founder amendment, Sep 1 2026) =====
   ONE central component. Geometry lives ONLY here; every mounted instance (article document, Article
   Tab, cards, FlipCard faces, HavenFlip leaves, Premium) inherits it. Markup unchanged:
     .rr-host > .rr[data-brand] > .rr__strip > a.rr__pennant(img) + .rr__tag(a / a)

   GEOMETRY DONOR: the live RapHaven production article ribbon (raphaven.com, Ice Spice/McDonald's):
     black frame · 5px red keyline · 52px black band · red pennant 82x36 (logo at 82% of pennant height,
     notch at 90%) · red category block 126x35 in Bebas Neue 20/900 · photo directly beneath.
   SCALE LAW (founder): pennant 10–14% of rail width, logo ≥70% of usable pennant height, category block
   with the same visual weight as the donor, readable without zooming; at 390/320 the mark stays a real
   wordmark, never an icon.
   BRAND TRANSLATION ONLY: red → HipHopHaven blue (#0896CC, the approved site-icon flat blue — identical
   to the mark's own field, so the wordmark reads as the pennant itself, no nested square); RapHaven logo →
   the exact supplied HipHopHaven mark (file untouched, display-sized); categories → real WP taxonomy. */
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");

.rr,.rr *{box-sizing:border-box}
.rr{
 --rr-accent:#E32219;--rr-black:#000;--rr-white:#fff;
 --rr-key:7px;          /* blue keyline above and below the band */
 --rr-band:72px;        /* black editorial band */
 --rr-pennant-h:64px;   /* brand pennant height (inset 4px in the band) */
 --rr-pennant-min:12%;  /* pennant never narrower than ~12% of the strip (>10% of the rail) */
 --rr-tag-h:52px;       /* category block height */
 --rr-tag-fs:25px;      /* Bebas Neue category size */
 --rr-inset:12px;       /* pennant / tag inset from the rail edges (donor 15 / 13) */
 display:block;width:100%;margin:0;padding:var(--rr-key) 0;border:0;background:var(--rr-accent);
 font-family:'Bebas Neue','Barlow Condensed',Oswald,'Arial Narrow',Impact,sans-serif;
 position:relative;z-index:2;container-type:inline-size;container-name:rr}
.rr__strip{display:flex;align-items:center;justify-content:space-between;gap:12px;
 height:var(--rr-band);margin:0;padding:0 var(--rr-inset);background:var(--rr-black);position:relative}
/* LEFT BRAND PENNANT — a substantial blue flag carrying the hand-lettered mark; V-notch tail at 90% (donor) */
.rr__pennant{flex:0 0 auto;min-width:var(--rr-pennant-min);height:var(--rr-pennant-h);
 display:flex;align-items:center;justify-content:flex-start;gap:0;
 padding:0 calc(var(--rr-pennant-h) * .22) 0 calc(var(--rr-pennant-h) * .14);
 background:var(--rr-accent);text-decoration:none;position:relative;
 clip-path:polygon(0 0,100% 0,90% 50%,100% 100%,0 100%)}
.rr__pennant img{height:118%;width:auto;aspect-ratio:1/1;object-fit:contain;display:block;margin:-9% 0;flex:none}
/* the supplied mark is a square field with the lettering on ~73% of its height; displayed at 118% of the pennant
   (field colour identical to the pennant, edges clipped by the pennant's own shape) the WORDMARK occupies ~86%
   of the usable pennant height — display sizing only, the file is untouched */
/* RIGHT CATEGORY PENNANT — the record's real WordPress categories, donor weight */
.rr__tag{flex:0 1 auto;max-width:none;height:var(--rr-tag-h);display:flex;align-items:center;justify-content:center;
 gap:.35em;padding:0 16px;background:var(--rr-accent)}
.rr__tag a,.rr__tag span{color:var(--rr-white);font-size:var(--rr-tag-fs);font-weight:900;line-height:1;
 letter-spacing:.01em;text-transform:uppercase;text-decoration:none;white-space:nowrap;font-family:inherit}
.rr__tag a:hover{text-decoration:underline}
.rr__tag a{display:flex;align-items:center;align-self:stretch;height:100%;position:relative}
/* 44px touch extender grows UPWARD inside the band (never over the media) */
/* INVISIBLE HIT AREA ONLY (accessibility, Sep 2): the category links' touch target spans the full band height
   (>=44px at every step) while the painted block is unchanged — the extender never reaches the media. */
.rr__tag a::after{content:"";position:absolute;left:0;right:0;top:calc(-1 * (var(--rr-band) - var(--rr-tag-h)) / 2);height:var(--rr-band);pointer-events:auto}
.rr__tag .rr__sep{opacity:.82}
.rr__pennant:focus-visible,.rr__tag a:focus-visible{outline:3px solid var(--rr-white);outline-offset:2px}
/* the tag is the record's real words — it may never be clipped */
.rr__tag{overflow:visible}
.rr__tag a,.rr__tag span{overflow:visible;text-overflow:clip}

/* ---- FUSION LAW: the rail's bottom keyline IS the transition to the photograph — zero gap, never a seam ---- */
.rr-host{container-type:inline-size;container-name:rrbox;display:block}
.rr-host+figure,.rr-host+.hh-media,.rr-host+.hh-poster,.rr-host+.fs-media,.rr-host+.hgnad__hero,
.rr-host+picture,.rr-host+img,.rr-host+.hh-backmedia,.rr-host+.hgn-kwrap,.rr-host+.hgn-media,.rr-host+.hhpf__media{margin-top:0!important}
.rr-host+.hgnad__hero{width:100%!important;max-width:none!important;margin-inline:0!important}

/* ---- BRAND CONFIGURATION: the only permitted difference ---- */
.rr[data-brand="hiphophaven"]{--rr-accent:#0896CC}
.rr[data-brand="raphaven"]{--rr-accent:#E32219}
.rr[data-brand="musichaven"]{--rr-accent:#C8A44D}

/* ---- RESPONSIVE LADDER (container-driven, so cards and narrow columns step with their own width) ----
   The mark stays a readable wordmark at every step; pennant and tag never collide or clip. */
@container rrbox (max-width:900px){
 .rr{--rr-band:66px;--rr-pennant-h:58px;--rr-tag-h:48px;--rr-tag-fs:23px}}
@container rrbox (max-width:600px){
 .rr{--rr-key:6px;--rr-band:60px;--rr-pennant-h:52px;--rr-pennant-min:24%;--rr-tag-h:42px;--rr-tag-fs:20px;--rr-inset:10px}}
@container rrbox (max-width:430px){
 .rr{--rr-band:56px;--rr-pennant-h:48px;--rr-pennant-min:26%;--rr-tag-h:40px;--rr-tag-fs:19px;--rr-inset:9px}
 .rr__tag{padding:0 12px}}
@container rrbox (max-width:330px){
 .rr{--rr-band:52px;--rr-pennant-h:44px;--rr-pennant-min:27%;--rr-tag-h:38px;--rr-tag-fs:17.5px;--rr-inset:8px}
 .rr__tag{padding:0 10px;gap:.3em}}
@container rrbox (max-width:260px){
 .rr{--rr-band:48px;--rr-pennant-h:40px;--rr-pennant-min:28%;--rr-tag-h:36px;--rr-tag-fs:16px;--rr-inset:7px}
 .rr__strip{gap:8px}.rr__tag{padding:0 8px;gap:.25em}}