:root{--hat-accent:#E32219;--hat-deep:#9A1C13;--hat-ink:#0E1216;--hat-mut:#59636D}
/* HAVEN CATEGORY RIBBON RAIL + ARTICLE TAB — one stylesheet, every Haven site.
   Only --hat-accent / --hat-deep change per brand; geometry is identical network-wide.
   Approved RapHaven treatment, preserved from the live raphaven.com article presentation:
   black top rail · RapHaven pennant at the left · red category ribbon at the right.
   Labels are always populated from the article's real category mapping — never hardcoded.
   The overlay is a RapHaven component. Only the brand-neutral behaviour pattern is shared;
   no foreign brand tokens, labels, navigation or styling. */

/* ---------- category ribbon rail ---------- */
.rh-rail{display:flex;align-items:stretch;justify-content:space-between;gap:12px;
 /* padding-right:0 — a right padding here left a black end-cap between the red category ribbon and
    the rail's right edge. The 9px top/bottom band is the approved donor anatomy shared with the
    pennant and is preserved exactly; only the end-cap is removed. */
 background:#0B0D10;border-top:5px solid var(--hat-accent,#E32219);padding:9px 0;min-height:56px}
.rh-rail__pennant{display:flex;align-items:center;flex:none;text-decoration:none;
 background:var(--hat-accent,#E32219);padding:6px 26px 6px 14px;align-self:stretch;
 clip-path:polygon(0 0,100% 0,88% 50%,100% 100%,0 100%);box-shadow:0 3px 0 var(--hat-deep,#9A1C13)}
.rh-rail__pennant img{display:block;height:30px;width:auto}
.rh-rail__pennant:hover{filter:brightness(1.07)}
.rh-rail__pennant:focus-visible{outline:3px solid #fff;outline-offset:2px}
.rh-rail__cats{display:flex;align-items:center;flex-wrap:wrap;gap:0;margin:0;align-self:center;
 background:linear-gradient(180deg,color-mix(in oklab,var(--hat-accent,#E32219) 86%,#fff),var(--hat-accent,#E32219) 55%,var(--hat-deep,#9A1C13));
 box-shadow:0 3px 0 var(--hat-deep,#9A1C13),inset 0 1px 0 rgba(255,255,255,.26);
 padding:7px 16px}
.rh-rail__cats a,.rh-rail__cats span{color:#fff;text-decoration:none;font-weight:900;
 font-size:clamp(15px,1.5vw,21px);letter-spacing:.02em;text-transform:uppercase;line-height:1.05;
 text-shadow:2px 2px 0 rgba(11,13,16,.35)}
.rh-rail__cats a:hover{text-decoration:underline;color:#fff}
.rh-rail__cats i{color:rgba(255,255,255,.72);font-style:normal;font-weight:900;padding:0 7px}
@media (max-width:599px){
 .rh-rail{min-height:48px}
 .rh-rail__pennant{padding:5px 20px 5px 10px}
 .rh-rail__pennant img{height:22px}
 .rh-rail__cats{padding:5px 11px}
 .rh-rail__cats a,.rh-rail__cats span{font-size:13px}
}
@media (max-width:359px){.rh-rail__cats a,.rh-rail__cats span{font-size:11.5px}.rh-rail__cats i{padding:0 4px}}

/* ---------- PER-CARD RAIL — ITS OWN ROW AT THE TOP OF EVERY CARD ----------
   Card order is fixed: rail → media → headline → excerpt/byline → actions.
   The rail is NOT an overlay: it occupies its own full-width row immediately above the media, so it
   can never sit at the bottom of a photograph, cross the subject, or float over the image. Exact
   Ice Spice donor anatomy — black rail, red keylines top and bottom, the real mark in its red
   notched pennant at the left, the live category ribbon at the right. */
.hat-mwrap{display:block;position:relative;container-type:inline-size;container-name:hatrail}
.hat-mrail{position:static;display:flex;align-items:stretch;justify-content:space-between;gap:10px;
 /* padding:0 — a right padding here would leave a black end-cap between the red category ribbon
    and the rail's right edge. The intentional Ice Spice black field is the CENTER gap, not an
    end-cap, so the gap stays and the ribbon runs to the rail's inner right boundary.
    overflow:hidden lets the ribbon inherit the rail's approved upper-right corner. */
 width:100%;box-sizing:border-box;padding:0;min-height:44px;overflow:hidden;
 background:#0B0D10;
 border-top:4px solid var(--hat-accent,#E32219);
 border-bottom:4px solid var(--hat-accent,#E32219);
 border-radius:10px 10px 0 0}
.hat-mrail__pennant{display:flex;align-items:center;flex:none;align-self:stretch;
 background:var(--hat-accent,#E32219);padding:5px 24px 5px 12px;
 clip-path:polygon(0 0,100% 0,86% 50%,100% 100%,0 100%)}
.hat-mrail__pennant img{display:block;height:26px;width:auto;object-fit:contain}
.hat-mrail__cats{display:flex;align-items:center;flex-wrap:nowrap;overflow:hidden;margin:0;align-self:stretch;
 /* min-width:0 so the ribbon shrinks with the card instead of overflowing the rail's clip */
 min-width:0;
 /* align-self:stretch — the ribbon completely occupies the rail's upper-right corner. margin-right
    and any right-side spacer are 0 by construction: the rail has no padding. */
 background:linear-gradient(180deg,color-mix(in oklab,var(--hat-accent,#E32219) 86%,#fff),var(--hat-accent,#E32219) 58%,var(--hat-deep,#9A1C13));
 box-shadow:0 2px 0 var(--hat-deep,#9A1C13),inset 0 1px 0 rgba(255,255,255,.26);padding:4px 12px}
.hat-mrail__cats span,.hat-mrail__cats a{color:#fff;font-weight:900;font-size:14px;letter-spacing:.02em;
 text-transform:uppercase;line-height:1.05;white-space:nowrap;text-shadow:2px 2px 0 rgba(11,13,16,.35)}
.hat-mrail__cats a{text-decoration:none}
.hat-mrail__cats a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:2px}
.hat-mrail__cats a:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hat-mrail__cats i{color:rgba(255,255,255,.72);font-style:normal;font-weight:900;padding:0 7px}
/* the media sits flush beneath its rail — square that shared edge */
.hat-mwrap>.hat-mrail+*,.hat-mwrap>.hat-mrail+.hgn-media,.hat-mwrap>.hat-mrail+.hh-media,
.hat-mwrap>.hat-mrail+.ffc-media,.hat-mwrap>.hat-mrail+.hf-leaf__media{
 border-top-left-radius:0;border-top-right-radius:0;margin-top:0;
 /* no second keyline: the rail's own bottom keyline is the only line at this seam */
 border-top:0}
.hat-mwrap>.hat-mrail+* img{border-top-left-radius:0;border-top-right-radius:0}
@media (max-width:599px){
 .hat-mrail{min-height:38px;border-top-width:3px;border-bottom-width:3px}
 .hat-mrail__pennant{padding:4px 19px 4px 9px}
 .hat-mrail__pennant img{height:20px}
 .hat-mrail__cats{padding:3px 9px}
 .hat-mrail__cats span,.hat-mrail__cats a{font-size:11.5px}
}
@media (max-width:359px){.hat-mrail__cats span,.hat-mrail__cats a{font-size:10px}.hat-mrail__cats i{padding:0 4px}}
/* CARD-WIDTH SCALING: the same step-downs keyed to the card, so a narrow specimen or grid tile gets
   a rail that fits whatever the viewport happens to be. */
@container hatrail (max-width:340px){
 .hat-mrail{min-height:38px;border-top-width:3px;border-bottom-width:3px}
 .hat-mrail__pennant{padding:4px 17px 4px 8px}
 .hat-mrail__pennant img{height:18px}
 .hat-mrail__cats{padding:3px 8px}
 .hat-mrail__cats span,.hat-mrail__cats a{font-size:11px;letter-spacing:0}
 .hat-mrail__cats i{padding:0 4px}
}
@container hatrail (max-width:240px){
 .hat-mrail{min-height:34px;gap:0}
 .hat-mrail__pennant{padding:3px 13px 3px 6px}
 .hat-mrail__pennant img{height:15px}
 .hat-mrail__cats{padding:2px 6px}
 .hat-mrail__cats span,.hat-mrail__cats a{font-size:9.5px;letter-spacing:0}
 /* one category only at this width — a second would guarantee a cut label */
 .hat-mrail__cats i,.hat-mrail__cats i+*{display:none}
}

/* ---------- internal full-story overlay (never a popup, never a new tab) ---------- */
.rho{position:fixed;inset:0;z-index:9000;display:none;padding:26px 20px;overflow:hidden}
.rho[data-open="true"]{display:grid;place-items:center}
.rho__scrim{position:absolute;inset:0;background:rgba(9,7,8,.78)}      /* dim, never blurred */
.rho__panel{position:relative;width:min(860px,100%);max-height:calc(100vh - 52px);
 display:flex;flex-direction:column;background:#fff;color:var(--hat-ink,#0E1216);
 border:3px solid var(--hat-accent,#E32219);border-radius:4px;
 box-shadow:0 36px 90px rgba(0,0,0,.55);animation:rho-in .22s cubic-bezier(.2,.8,.2,1)}
@keyframes rho-in{from{opacity:0;transform:translateY(12px) scale(.99)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rho__panel{animation:none}}
.rho__top{display:flex;align-items:center;gap:10px;flex:none;background:#0B0D10;padding:0}
.rho__top .rh-rail{flex:1;min-width:0;border-top:0}
.rho__close{flex:none;align-self:stretch;min-width:56px;min-height:44px;margin:0;padding:0 16px;cursor:pointer;
 border:0;border-left:1px solid rgba(255,255,255,.18);background:#0B0D10;color:#fff;
 font-family:inherit;font-size:12.5px;font-weight:900;line-height:1;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.rho__perm--secondary{background:transparent!important;color:var(--hat-deep,#9A1C13)!important;
 border:2px solid var(--hat-deep,#9A1C13)!important;box-shadow:none!important;font-size:12px!important}
.rho__close:hover{background:var(--hat-accent,#E32219)}
.rho__close:focus-visible{outline:3px solid #fff;outline-offset:-4px}
.rho__scroll{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;
 overscroll-behavior:contain;padding:20px 26px 30px}
.rho__scroll:focus-visible{outline:3px solid var(--hat-accent,#E32219);outline-offset:-3px}
.rho__eyebrow{margin:0 0 6px;font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--hat-deep,#9A1C13)}
.rho__panel h1{margin:0 0 8px;font-size:clamp(24px,3.2vw,38px);line-height:1.07;font-weight:900;letter-spacing:-.015em}
.rho__dek{margin:0 0 8px;font-size:17.5px;line-height:1.5;font-weight:600;color:#2A333B}
.rho__meta{margin:0 0 16px;font-size:13px;font-weight:700;color:var(--hat-mut,#59636D)}
.rho__body p{margin:0 0 16px;font-size:17px;line-height:1.68}
.rho__body img,.rho__body iframe,.rho__body video{max-width:100%;height:auto;display:block;border-radius:6px}
.rho__body figure{margin:0 0 18px}
.rho__body figcaption{margin-top:6px;font-size:12.5px;color:var(--hat-mut,#59636D);font-weight:700}
.rho__hero{margin:0 0 16px}
.rho__hero img{width:100%;height:auto;display:block;border-radius:6px}
.rho__credit{margin:6px 0 0;font-size:11.5px;font-weight:700;letter-spacing:.03em;color:var(--hat-mut,#59636D)}
.rho__foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:22px;padding-top:16px;
 border-top:2px solid var(--hat-ink,#0E1216)}
.rho__perm{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 16px;
 background:var(--hat-accent,#E32219);color:#fff;font-size:13px;font-weight:900;letter-spacing:.05em;
 text-transform:uppercase;text-decoration:none;
 box-shadow:0 3px 0 var(--hat-deep,#9A1C13),inset 0 1px 0 rgba(255,255,255,.26)}
.rho__perm:hover{filter:brightness(1.07);color:#fff}
.rho__canon{margin:0;font-size:11.5px;font-weight:700;color:var(--hat-mut,#59636D);word-break:break-all}
body.rho-locked{overflow:hidden}
@media (max-width:599px){
 .rho{padding:12px 10px}
 .rho__panel{max-height:calc(100vh - 24px);border-width:2px}
 .rho__scroll{padding:16px 14px 24px}
 .rho__body p{font-size:16.5px}
}
@media (max-width:359px){.rho{padding:8px 6px}.rho__scroll{padding:14px 11px 20px}}
@media (forced-colors:active){.rho__panel{border:3px solid CanvasText}.rho__close{border:2px solid ButtonText}}

/* FLAT FLIP CARDS — adopted by this engine's late-render path, which reveals faces by visibility
   rather than by rotating the inner. Neutralising the back's own rotation and the hidden backface
   is what stops a revealed back face from rendering blank. */
/* PHYSICAL FLIP (restored 2026-08-28): this stylesheet no longer neutralises any transform.
   Broad transform:none!important rules here were cancelling the approved rotation for every flip
   card on every page that loads this file — the reason a card appeared to flash instead of turn.
   Cards adopted by this engine now rotate through the same approved physics; both faces stay
   mounted and backface-visibility decides which one paints. */
.hh-flipcard--flat .hh-flipinner{transition:transform .34s cubic-bezier(.2,.8,.2,1)}
.hh-flipcard--flat.flipped .hh-flipinner{transform:rotateY(180deg)}

/* a media well that was authored to hold only an image becomes a two-row stack once it owns a rail:
   the rail is row 1 at its natural height, the photograph is row 2 and keeps the well's ratio. */
.hat-mwrap.hh-media,.hat-mwrap.ffc-media,.hat-mwrap.hgn-media{
 display:grid;grid-template-rows:auto 1fr;aspect-ratio:auto;overflow:hidden}
.hat-mwrap.hh-media>img,.hat-mwrap.ffc-media>img,.hat-mwrap.hgn-media>img,
.hat-mwrap.hh-media>picture,.hat-mwrap.hgn-media>picture{
 grid-row:2;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.hat-mwrap>.hat-mrail{grid-row:1}
/* §1 the rail is the CARD's top row: the rail+photo block bleeds out of the card's padding to the
   card's own edges (values measured from the host in haven-articletab.js) and takes the card's
   top corner radius, so the black rail runs the full width of the card — never banding on a
   photo well inset by card padding. */
.hat-mwrap.hat-bleed{margin-left:calc(-1 * var(--hat-bleed,0px));margin-right:calc(-1 * var(--hat-bleed-r,0px));
 margin-top:calc(-1 * var(--hat-bleed-t,0px));
 border-radius:var(--hat-round,0px) var(--hat-round,0px) 0 0;overflow:hidden}
.hat-mwrap.hat-bleed>.hat-mrail{border-radius:0}

/* ══ FUSED EDITORIAL HERO ═════════════════════════════════════════════════════════════════════
   One constructed editorial object, not three stacked cards. The rail, the media and the headline
   slab share ONE wrapper, ONE width owner, ONE border and ONE shadow, with gap:0 and no internal
   padding at the seams. The rail stays in normal flow — never absolute, sticky, negative-margined
   or translated into contact — so it can never cover photography, copy or a control.
   Corner ownership: the wrapper clips, so the rail owns the top corners and the copy slab the
   bottom ones, and no child carries an independent radius, border or shadow at an internal seam. */
.rh-editorial-hero{display:grid;gap:0;margin:0 0 20px;background:#fff;
 border:2px solid #0B0D10;border-radius:16px;overflow:hidden;
 box-shadow:0 18px 44px rgba(11,13,16,.16)}
.rh-editorial-hero>*{margin:0;border-radius:0}
.rh-editorial-hero .hat-mwrap>*{margin:0}
.rh-editorial-hero>.hat-mwrap{margin:0;border:0;box-shadow:none;border-radius:0}
.rh-editorial-hero .hat-mrail{border-radius:0}
.rh-editorial-hero .hat-mrail__pennant{border-top-left-radius:0}
/* the media sits flush under the rail and flush on the copy slab: the WRAPPER owns the outer radius,
   border and shadow, so every welded descendant is square, unbordered and unshadowed. This covers
   .hgn-media itself (where the 12px radius and both shadows live), its frame, its picture and its
   img — the earlier rule reached only the inner frame, which is why the bottom corners survived. */
.rh-editorial-hero .hgn-media,.rh-editorial-hero .hh-media,.rh-editorial-hero .hgn-media__frame,
.rh-editorial-hero .ffc-media,.rh-editorial-hero picture,.rh-editorial-hero img{
 border:0;box-shadow:none;border-radius:0;padding:0}
.rh-editorial-hero .hgn-media img,.rh-editorial-hero .hgn-media picture,
.rh-editorial-hero .hat-mwrap img,.rh-editorial-hero .hat-mwrap picture,
.rh-editorial-hero .hh-media img,.rh-editorial-hero .ffc-media img{
 border-radius:0;box-shadow:none;border:0}
.rh-editorial-hero img{display:block;width:100%}
.rh-editorial-hero__copy{display:grid;gap:10px;padding:20px 22px 22px;min-width:0}
.rh-editorial-hero__copy>*{margin:0}
.rh-editorial-hero__copy h1{font-size:clamp(26px,3.4vw,40px);line-height:1.1;letter-spacing:-.02em}
@media (max-width:599px){
 .rh-editorial-hero{border-radius:14px;margin-bottom:16px}
 .rh-editorial-hero__copy{padding:16px 16px 18px;gap:8px}
}
/* the Article Tab's close bar is shell chrome only — no mark, no category tag, no ribbon */
.rho__top{justify-content:flex-end}
.rho__top .rho__close{border-left:0}
.rho__scroll .rh-editorial-hero{margin-bottom:18px}