/* ===========================================================================
   Haven Recirculating Flip Feature — .hff contract.
   Reuses the approved flip geometry (perspective, rotateY, hidden inactive
   face). Brand identity comes ONLY from [data-hff-brand] token scopes.
   =========================================================================== */
.hff{position:relative;display:flex;flex-direction:column;gap:18px;min-width:0;padding:clamp(16px,2.4vw,28px);border-radius:var(--mh-radius);background:var(--hff-plate,linear-gradient(180deg,#FFF,#FBF7FF));border:1.5px solid var(--mh-line);box-shadow:0 14px 34px rgba(43,21,61,.12);isolation:isolate;color:var(--mh-ink)}
.hff *{min-width:0}
.hff__head{display:flex;flex-direction:column;gap:8px}
.hff__eyebrow{margin:0;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:var(--mh-radius-pill);font-size:.72rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:var(--hff-pill-ink,var(--mh-ink));background:var(--hff-pill,var(--mh-grad-gold));box-shadow:0 5px 14px rgba(200,164,77,.32)}
.hff__rotation{margin:0;align-self:flex-start;padding:5px 13px;border-radius:var(--mh-radius-pill);font-size:.68rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--mh-violet-ink);background:rgba(107,63,160,.1);border:1.5px dashed rgba(107,63,160,.4)}
.hff__title{margin:2px 0 0;font-family:var(--mh-serif);font-weight:900;font-size:clamp(1.5rem,3.6vw,2.3rem);line-height:1.08;letter-spacing:-.015em;text-wrap:balance}
.hff__deck{margin:0;font-family:var(--mh-serif);font-style:italic;font-size:clamp(1rem,2vw,1.18rem);line-height:1.5;color:var(--mh-ink-soft);max-width:60ch;text-wrap:pretty}
.hff__question{margin:0;font-size:.95rem;font-weight:900;letter-spacing:.02em;color:var(--hff-accent,var(--mh-gold-ink))}
.hff__pub{margin:0;font-size:.74rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--mh-muted)}
.hff__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:clamp(12px,1.8vw,20px)}

/* ---- Card: approved flip geometry ---- */
.hff-card{perspective:1200px;min-width:0}
.hff-card:focus-visible{outline:3px solid var(--hff-accent,var(--mh-gold-ink));outline-offset:4px;border-radius:18px}
.hff-card__inner{position:relative;width:100%;min-height:400px;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.hff-card.is-flipped .hff-card__inner{transform:rotateY(180deg)}
.hff-card__face{position:absolute;inset:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:8px;padding:14px;border-radius:18px;overflow:hidden;backface-visibility:hidden;background:#FFF;border:1.5px solid var(--mh-line);box-shadow:0 10px 24px rgba(43,21,61,.12)}
.hff-card__face--back{transform:rotateY(180deg);background:var(--hff-backplate,#FBF7FF)}
.hff-card:not(.is-flipped) .hff-card__face--back,.hff-card.is-flipped .hff-card__face--front{visibility:hidden}
.hff-card__face>*{min-height:0;min-width:0}
/* Scrolling content flow — long copy scrolls inside the card, never under the pill. */
.hff-card__flow{display:flex;flex-direction:column;gap:6px;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.hff-card__face--front{grid-template-rows:auto minmax(0,1fr) auto}
/* Dedicated opaque action row. Its own background and top rule mean nothing can
   ever read through it, whatever the face beneath is doing. */
.hff-card__acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-top:10px;border-top:1px solid rgba(26,14,36,.1);background:inherit}
.hff-card__face--back .hff-card__acts{border-top-color:rgba(26,14,36,.14)}
.hff-card__art{position:relative;display:grid;place-items:center;aspect-ratio:1/1;border-radius:12px;overflow:hidden;flex:none;background:radial-gradient(120% 130% at 78% -8%,var(--hff-glow,rgba(228,200,120,.4)),transparent 58%),var(--hff-artgrad,linear-gradient(160deg,#4A2A5C,#2B153D))}
.hff-card__art img{width:100%;height:100%;object-fit:cover;display:block}
/* Missing approved portrait renders the QA frame at full media geometry — the
   well is never filled with explanatory copy, and never an initial glyph. */
.hff-card__credit{position:absolute;left:0;right:0;bottom:0;padding:5px 9px;font-size:.62rem;font-weight:800;letter-spacing:.05em;color:#F3ECE0;background:linear-gradient(0deg,rgba(20,12,28,.88),rgba(20,12,28,0))}
.hff-card__name{margin:2px 0 0;font-family:var(--mh-serif);font-weight:900;font-size:1.25rem;line-height:1.1}
.hff-card__idline{margin:0;font-size:.82rem;line-height:1.45;color:var(--mh-ink-soft)}
/* Read More ↻ at exactly 1.5×: .84→1.26rem, 44→66px, 10/18→15/27px. */
.hff-card__flip{white-space:nowrap;min-height:66px;padding:15px 27px;border-radius:var(--mh-radius-pill);cursor:pointer;font:inherit;font-size:1.26rem;font-weight:900;color:var(--mh-violet-ink);background:linear-gradient(180deg,#FFF,#F3ECFA);border:3px solid rgba(107,63,160,.32);flex:none}
.hff-card__flip:hover{background:rgba(107,63,160,.12)}
.hff-card__reveal{display:flex;flex-direction:column;gap:5px;overflow-y:auto}
.hff-card__song{margin:0;font-family:var(--mh-serif);font-weight:900;font-size:1.35rem;line-height:1.12;color:var(--hff-accent,var(--mh-gold-ink))}
.hff-card__facts{margin:0;font-size:.84rem;font-weight:800;color:var(--mh-ink-soft)}
.hff-card__orig{margin:4px 0 0;padding:8px 11px;border-radius:10px;font-size:.84rem;line-height:1.5;background:rgba(200,164,77,.14);border:1px solid rgba(200,164,77,.4)}
.hff-card__note{margin:0;font-size:.86rem;line-height:1.55;color:var(--mh-ink-soft);text-wrap:pretty}
.hff-card__links{margin:2px 0 0;display:flex;flex-wrap:wrap;gap:12px;font-size:.8rem;font-weight:800}
.hff-card__vote{margin-top:6px;align-self:flex-start;min-height:44px;padding:11px 22px;border-radius:var(--mh-radius-pill);cursor:pointer;font:inherit;font-size:.88rem;font-weight:900;color:var(--hff-pill-ink,var(--mh-ink));background:var(--hff-pill,var(--mh-grad-gold));border:0;box-shadow:0 6px 16px rgba(200,164,77,.36);flex:none}
.hff-card__vote:hover{filter:brightness(1.05)}
.hff-card__vote[aria-pressed="true"]{outline:3px solid var(--mh-violet-ink);outline-offset:2px}
.hff-card__blocked{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:12px;background:rgba(26,14,36,.05);border:1.5px dashed var(--mh-line)}
.hff-card__blockedhead{margin:0;font-size:.78rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:#7A4E10}
.hff-card__blockedbody{margin:0;font-size:.84rem;line-height:1.55;color:var(--mh-ink-soft)}

/* ---- Poll ---- */
.hff__poll{padding:16px;border-radius:16px;background:var(--hff-pollplate,#1A0E24);color:#F3ECE0}
.hff__pollhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-bottom:10px}
.hff__pollstatus{margin:0;font-size:.78rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase;color:var(--mh-gold-bright)}
.hff__pollhint{margin:0;font-size:.8rem;color:rgba(243,236,224,.74)}
.hff__results{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.hff__result{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr) auto;gap:10px;align-items:center}
.hff__resultname{font-size:.88rem;font-weight:900;color:#FFF}
.hff__result[data-mine] .hff__resultname{color:var(--mh-gold-bright)}
.hff__resultbar{height:14px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
.hff__resultbar i{display:block;height:100%;border-radius:999px;background:var(--hff-pill,var(--mh-grad-gold));transition:width .4s ease}
.hff__resultnum{font-size:.82rem;font-weight:800;font-variant-numeric:tabular-nums;color:rgba(243,236,224,.86);white-space:nowrap}
.hff__resultsheld{margin:0;font-size:.88rem;color:rgba(243,236,224,.8)}
.hff__polltotal{margin:12px 0 0;font-size:.72rem;font-weight:700;letter-spacing:.03em;color:rgba(243,236,224,.62)}

/* ---- Foot ---- */
.hff__foot{display:flex;flex-direction:column;gap:10px;padding-top:12px;border-top:1px solid var(--mh-line)}
.hff__sources{margin:0;font-size:.78rem;font-weight:700;color:var(--mh-ink-soft)}
.hff__actions{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.hff__related{font-size:.9rem;font-weight:900;color:var(--hff-accent,var(--mh-gold-ink))}
.hff__share{min-height:44px;padding:10px 18px;border-radius:var(--mh-radius-pill);cursor:pointer;font:inherit;font-size:.84rem;font-weight:900;color:var(--mh-violet-ink);background:none;border:2px solid rgba(107,63,160,.32)}
.hff__share:hover{background:rgba(107,63,160,.1)}
.hff__live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hff :focus-visible{outline:3px solid var(--hff-accent,var(--mh-gold-ink));outline-offset:3px;border-radius:8px}

/* ---- Mobile: clean stack, never a sideways carousel ---- */
@media (max-width:560px){
.hff__grid{grid-template-columns:minmax(0,1fr)}
.hff-card__inner{min-height:380px}
.hff__result{grid-template-columns:minmax(0,1fr);gap:5px}
.hff__resultnum{justify-self:start}
.hff-card__vote,.hff-card__flip{width:100%;text-align:center;justify-content:center;display:inline-flex;align-items:center}
}
@media (prefers-reduced-motion:reduce){.hff-card__inner{transition:none}.hff__resultbar i{transition:none}}
@media (forced-colors:active){
.hff,.hff-card__face,.hff__poll{border:1px solid CanvasText}
.hff__eyebrow,.hff-card__vote{forced-color-adjust:none;background:Highlight;color:HighlightText;border:1px solid CanvasText}
.hff__resultbar{border:1px solid CanvasText}.hff__resultbar i{background:Highlight}
}

/* ===========================================================================
   BRAND SCOPES — identity only; behaviour and DOM are shared.
   MusicHaven is authored. The other five are DECLARED seams: HipHopHaven and
   RapHaven carry only their founder-stated palette anchors; SportsHaven,
   CannaHaven and FitHaven inherit the neutral default. BRAND_PENDING: full
   treatments must be authored against each site's approved constitution in its
   own project — a recoloured MusicHaven card is not a brand renderer.
   =========================================================================== */
[data-hff-brand="musichaven"]{
--hff-accent:#8A5A1E;
--hff-pill:linear-gradient(180deg,#E4C878,#C8A44D); /* @kind color */
--hff-pill-ink:#1A0E24;
--hff-plate:linear-gradient(180deg,#FFF,#FBF7FF); /* @kind color */
--hff-backplate:#FBF7FF;
--hff-pollplate:#1A0E24;
--hff-artgrad:linear-gradient(160deg,#4A2A5C,#2B153D); /* @kind color */
--hff-glow:rgba(228,200,120,.4);
--hff-glowink:rgba(228,200,120,.92);
}
[data-hff-brand="hiphophaven"]{ /* BRAND_PENDING */
--hff-accent:#0F4C81;
--hff-pill:linear-gradient(180deg,#1FA6D9,#137FAD); /* @kind color */
--hff-pill-ink:#FFF;
--hff-artgrad:linear-gradient(160deg,#12283A,#0A1622); /* @kind color */
--hff-glow:rgba(31,166,217,.4);
--hff-glowink:rgba(141,197,247,.92);
--hff-pollplate:#0A1622;
}
[data-hff-brand="raphaven"]{ /* BRAND_PENDING */
--hff-accent:#B01E2E;
--hff-pill:linear-gradient(180deg,#E32219,#B01B14); /* @kind color */
--hff-pill-ink:#FFF;
--hff-artgrad:linear-gradient(160deg,#1C1C1C,#000); /* @kind color */
--hff-glow:rgba(227,34,25,.4);
--hff-glowink:rgba(255,150,160,.92);
--hff-pollplate:#141414;
}
[data-hff-brand="sportshaven"],[data-hff-brand="cannahaven"],[data-hff-brand="fithaven"]{/* BRAND_PENDING: no approved constitution in this project — neutral defaults */}

/* ===========================================================================
   HavenFlip Feature leaves — the edition plays as a leaf book, so these style
   the CONTENT of a leaf. The book frame, sheet physics, edge arrows and
   reduced-motion behavior all belong to .hfb (the production engine) and are
   never restyled here. No card grid, no two-face geometry.
   =========================================================================== */
.hff-leaf{display:flex;flex-direction:column;gap:12px;min-height:0}
.hff-leaf--entity{display:grid;grid-template-columns:minmax(180px,38%) 1fr;gap:clamp(14px,3vw,26px);align-items:start}
.hff-leaf__kicker{margin:0;font-size:.72rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--hff-accent-ink,#8A5A1E)}
.hff-leaf__q{margin:0;font-family:"Playfair Display",Georgia,serif;font-weight:900;font-size:clamp(1.5rem,3.6vw,2.3rem);line-height:1.1;letter-spacing:-.02em;text-wrap:pretty}
.hff-leaf__deck{margin:0;font-size:.98rem;line-height:1.6;max-width:62ch}
.hff-leaf__by{margin:0;font-size:.8rem;opacity:.8}
.hff-leaf__cue{margin:auto 0 0;font-size:.76rem;font-weight:800;letter-spacing:.04em;opacity:.75}
.hff-leaf__art{position:relative;display:block;border-radius:14px;overflow:hidden;background:rgba(0,0,0,.06)}
.hff-leaf__art img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.hff-leaf__credit{position:absolute;inset:auto 0 0 0;padding:5px 8px;font-size:.62rem;font-weight:700;background:rgba(20,12,28,.72);color:#F6EFE2}
.hff-leaf__flow{display:flex;flex-direction:column;gap:8px;min-width:0}
.hff-leaf__name{margin:0;font-family:"Playfair Display",Georgia,serif;font-weight:900;font-size:clamp(1.3rem,3vw,1.9rem);line-height:1.08}
.hff-leaf__idline{margin:0;font-size:.86rem;opacity:.82}
.hff-leaf__reveal{display:flex;flex-direction:column;gap:7px}
.hff-leaf__song{margin:0;font-weight:900;font-size:1.05rem}
.hff-leaf__facts{margin:0;font-size:.82rem;font-weight:700;opacity:.8}
.hff-leaf__orig{margin:0;font-size:.9rem;line-height:1.5}
.hff-leaf__note{margin:0;font-size:.88rem;line-height:1.55}
.hff-leaf__links{display:flex;flex-wrap:wrap;gap:12px;margin:2px 0 0;font-size:.82rem;font-weight:800}
.hff-leaf__vote{align-self:flex-start;margin-top:4px;min-height:44px;padding:11px 20px;border-radius:999px;border:2px solid var(--hff-accent,#D4A23A);background:var(--hff-accent,#D4A23A);color:var(--hff-accent-on,#241505);font:inherit;font-size:.86rem;font-weight:900;cursor:pointer;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.55),0 8px 18px -12px rgba(0,0,0,.5)}
.hff-leaf__vote:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.hff-leaf__vote[aria-pressed="true"]{background:transparent;color:inherit}
.hff-leaf__blocked{border-radius:12px;padding:12px 14px;border:1.5px dashed currentColor;opacity:.9}
.hff-leaf__blockedhead{margin:0 0 4px;font-size:.8rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.hff-leaf__blockedbody{margin:0;font-size:.84rem;line-height:1.5}
.hff-leaf__cta{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:11px 22px;border-radius:999px;border:2px solid currentColor;text-decoration:none;font-weight:900;font-size:.88rem}
@media (max-width:640px){.hff-leaf--entity{grid-template-columns:1fr}.hff-leaf__art img{aspect-ratio:4/3}}