/* HAVEN FLIP PUBLISHING — News Flip Card spec, FlipGrid Crown Balance, Flipshow book.
   Geometry is brand-invariant (§5/§14): only --hnf-* color tokens change per [data-haven-brand]. */
[data-haven-brand="musichaven"]{--hnf-accent:#D4A23A;--hnf-accent-ink:#8A5A1E;--hnf-back:#FBF7FF;--hnf-face:#FFFDF6;--hnf-ink:#1A0E24}
[data-haven-brand="hiphophaven"]{--hnf-accent:#1FA6D9;--hnf-accent-ink:#137FAD;--hnf-back:#F2FAFE;--hnf-face:#FFFFFF;--hnf-ink:#0E1B22}
[data-haven-brand="raphaven"]{--hnf-accent:#E32219;--hnf-accent-ink:#B01B14;--hnf-back:#FFF6F5;--hnf-face:#FFFFFF;--hnf-ink:#1C0F0E}
/* ---- News Flip Card: exact founder type/box spec ---- */
.hnf-card{display:grid;min-height:520px;perspective:1400px;min-width:0}
.hnf-card__inner{grid-area:1/1;display:grid;min-height:520px;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.hnf-card.is-flipped .hnf-card__inner{transform:rotateY(180deg)}
/* Faces are TWO grid tracks: a scrolling content flow and a dedicated, opaque
   action row. The action row is structurally incapable of overlapping copy —
   it is its own track, not a margin-auto element floating over clipped text
   (that translucent-button-over-clipped-text bleed was the real cause). */
.hnf-face{grid-area:1/1;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:10px;min-height:520px;padding:14px;border-radius:16px;overflow:hidden;backface-visibility:hidden;background:var(--hnf-face);color:var(--hnf-ink);border:1.5px solid color-mix(in srgb,var(--hnf-accent) 45%,transparent);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.85),0 12px 26px -14px rgba(20,10,30,.35)}
.hnf-face--front{gap:10px}
.hnf-face--back{gap:10px;transform:rotateY(180deg);position:relative;background:var(--hnf-back)}
.hnf-flow{display:flex;flex-direction:column;gap:8px;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.hnf-face--back .hnf-flow{gap:6px}
.hnf-action{display:grid;padding-top:10px;border-top:1.5px solid color-mix(in srgb,var(--hnf-accent) 28%,transparent);background:var(--hnf-face)}
.hnf-face--back .hnf-action{background:var(--hnf-back)}
.hnf-card:not(.is-flipped) .hnf-face--back,.hnf-card.is-flipped .hnf-face--front{visibility:hidden}
.hnf-cat{margin:0;font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--hnf-accent-ink)}
.hnf-art{position:relative;display:grid;place-items:center;aspect-ratio:16/9;border-radius:12px;overflow:hidden;flex:none;background:linear-gradient(135deg,color-mix(in srgb,var(--hnf-accent) 55%,#2A1A38),#241530);color:#FFF9EC;font-family:var(--mh-serif);font-weight:900;font-size:2.6rem}
.hnf-hl{margin:0;font-family:var(--mh-serif);font-size:25px;font-weight:900;line-height:1.18;text-wrap:pretty}
.hnf-by{margin:0;font-size:15.5px;font-weight:400;color:color-mix(in srgb,var(--hnf-ink) 72%,transparent)}
/* Read More ↻ — canonical control, scaled EXACTLY 1.5× from the previous spec
   (29px→43.5px · 58→87px min-height · 8/14→12/21px padding · 10→15px gap ·
   2.5→3.75px border). The glyph is 1.9em, so it scales 1.5× with the type
   rather than being enlarged separately. No transform:scale() — the text, the
   glyph, the spacing and the physical target all grew together. Full-width
   pills stay 100% of their action row; they do not become 150% wide. */
.hnf-flip{margin-top:0;width:100%;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;gap:15px;min-height:87px;padding:12px 21px;border-radius:var(--mh-radius-pill);border:3.75px solid var(--hnf-accent);cursor:pointer;font:inherit;font-size:43.5px;font-weight:900;line-height:1.1;color:var(--hnf-accent-ink);background:linear-gradient(180deg,#FFFFFF,color-mix(in srgb,var(--hnf-accent) 12%,#FFFFFF));box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9),0 3px 8px -3px rgba(20,10,30,.4)}
.hnf-flip:hover{filter:brightness(1.04)}.hnf-flip:active{transform:translateY(1px)}
.hnf-flip:focus-visible{outline:3px solid var(--hnf-accent-ink);outline-offset:3px}
.hnf-glyph{font-size:1.9em;line-height:1;display:inline-flex;align-items:center;flex:none}
.hnf-toplink{display:inline-flex;align-items:baseline;gap:8px;font-size:18px;font-weight:900;color:var(--hnf-accent-ink);text-decoration:none}
.hnf-toplink:hover{text-decoration:underline}
.hnf-quick{margin:0;font-size:17.5px;font-weight:500;line-height:1.5;text-wrap:pretty}
.hnf-save{align-self:flex-start;min-height:44px;padding:9px 16px;border-radius:var(--mh-radius-pill);border:2px solid color-mix(in srgb,var(--hnf-accent) 60%,transparent);cursor:pointer;font:inherit;font-size:14.5px;font-weight:800;color:var(--hnf-accent-ink);background:none}
.hnf-save[aria-pressed="true"]{background:var(--hnf-accent);color:#FFF}
.hnf-note{margin:0;font-size:12px;color:color-mix(in srgb,var(--hnf-ink) 65%,transparent)}
/* ---- FlipGrid: Crown Balance (incomplete row centered ON TOP) ---- */
.hfg{display:flex;flex-direction:column;gap:18px}
.hfg-row{display:grid;grid-template-columns:repeat(var(--hfg-cols,3),minmax(0,1fr));gap:18px}
.hfg-row[data-crown="true"]{display:flex;justify-content:center}
.hfg-row[data-crown="true"]>*{flex:0 1 calc((100% - (var(--hfg-cols,3) - 1)*18px)/var(--hfg-cols,3));min-width:0}
.hfg-rail{height:10px;border-radius:6px;background:linear-gradient(180deg,color-mix(in srgb,var(--hnf-accent) 40%,#B9A8C9),color-mix(in srgb,var(--hnf-accent) 22%,#8E7BA6));box-shadow:inset 0 2px 3px rgba(20,10,30,.35)}
@media (max-width:699px){.hnf-hl{font-size:22px}.hnf-flip{font-size:36px}.hfg-row{grid-template-columns:minmax(0,1fr)}.hfg-row[data-crown="true"]{flex-direction:column}.hfg-row[data-crown="true"]>*{flex-basis:auto}}
/* 320–360px: 1.5× type physically cannot hold "Read More ↻" on one line inside
   a 260px card interior (label+glyph alone measure ~261px at 36px). The
   zero-overflow law wins at these two widths only; 390px and up keep the full
   1.5× value. Nothing is clipped and the label never wraps. */
@media (max-width:360px){.hnf-flip{font-size:30px;gap:12px;padding:12px 12px;min-height:74px}}
/* ---- Article Tab: the canonical article, centrally, inside the same page ---- */
.hat-scrim{position:fixed;inset:0;display:grid;place-items:center;padding:clamp(12px,3vw,40px);background:rgba(20,10,30,.34);z-index:60}
.hat-panel{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr);width:min(820px,100%);max-height:min(880px,92vh);border-radius:20px;overflow:hidden;background:var(--hnf-face,#FFFDF6);color:var(--hnf-ink,#1A0E24);border:2px solid color-mix(in srgb,var(--hnf-accent,#D4A23A) 55%,transparent);box-shadow:0 40px 90px -40px rgba(20,10,30,.7)}
.hat-head{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;padding:16px 18px;border-bottom:1.5px solid color-mix(in srgb,var(--hnf-accent,#D4A23A) 30%,transparent)}
.hat-body{padding:18px;overflow-y:auto;overscroll-behavior:contain}
.hat-close{flex:none;min-width:44px;min-height:44px;border-radius:var(--mh-radius-pill);border:2px solid var(--hnf-accent,#D4A23A);cursor:pointer;font:inherit;font-size:20px;font-weight:900;color:var(--hnf-accent-ink,#8A5A1E);background:#FFF}
.hat-close:focus-visible{outline:3px solid var(--hnf-accent-ink,#8A5A1E);outline-offset:3px}
/* ---- HavenFlip: an immersive editorial flip book. The reader handles the
   sheets themselves — no page counter, no numbered buttons, no dots, no arrows
   parked outside the frame. An internal leaf index exists for state, deep links
   and analytics only; it is never rendered. ---- */
/* The book frame reserves a control gutter on each side. The leaf and the
   turning sheet live BETWEEN the gutters, so Previous/Next never intersect copy,
   photography or a CTA — the arrows sit outside the active leaf, not over it. */
.hfb{position:relative;overflow:hidden;perspective:2000px;perspective-origin:50% 42%;padding:0 var(--hfb-gutter,76px);border-radius:18px;background:var(--hnf-face);border:1.5px solid color-mix(in srgb,var(--hnf-accent) 45%,transparent);box-shadow:0 26px 60px -30px rgba(26,14,36,.5),inset 0 1px 0 rgba(255,255,255,.7);touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:grab}
.hfb:active{cursor:grabbing}
.hfb::before{content:"";position:absolute;top:10px;bottom:10px;left:var(--hfb-gutter,76px);width:11px;border-radius:18px 0 0 18px;background:linear-gradient(90deg,color-mix(in srgb,var(--hnf-accent) 40%,transparent),transparent);pointer-events:none;z-index:4}
.hfb__leaf,.hfb__sheet{display:grid;gap:10px;padding:22px 30px;min-height:430px;border-radius:18px;background:var(--hnf-face);color:var(--hnf-ink)}
.hfb__leaf{position:relative;z-index:1}
.hfb__sheet{position:absolute;inset:0 var(--hfb-gutter,76px);z-index:2;transform-origin:left center;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 30px 64px -26px rgba(26,14,36,.55);will-change:transform}
.hfb__sheet.is-anim,.hfb__sheet[data-anim="true"]{transition:transform .5s cubic-bezier(.32,.72,.28,1)}
/* Real Previous/Next buttons — 52×72px plum-and-gold controls with a 30px SVG
   chevron at a 3px non-scaling stroke, 12px inside the book frame, vertically
   centred, full opacity, above every leaf, photograph, video and embed. Siblings
   of the leaf stack, so the fold clip can never hide them. Edge tap, drag,
   swipe and ArrowLeft/ArrowRight all still work. */
.hfb__edge{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:72px;display:inline-flex;align-items:center;justify-content:center;border:3px solid var(--hnf-accent,#D4A23A);border-radius:14px;background:#1A0E24;color:#F6EFE2;cursor:pointer;z-index:6;opacity:1;padding:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 12px 26px -14px rgba(26,14,36,.7)}
.hfb__edge--prev{left:12px}
.hfb__edge--next{right:12px}
.hfb__edge:hover{background:#2A1636;border-color:var(--hnf-accent,#D4A23A)}
.hfb__edge:active{transform:translateY(-50%) scale(.97)}
.hfb__edge:focus-visible{outline:3px solid var(--hnf-accent,#D4A23A);outline-offset:2px}
.hfb__edge[disabled]{opacity:.5;pointer-events:none;cursor:default}
.hfb__edge svg{display:block;width:30px;height:30px}
@media (max-width:430px){.hfb__edge{width:48px;height:64px}.hfb__edge svg{width:26px;height:26px}}
/* Narrow widths: side gutters cannot coexist with a readable leaf, so the
   numberless controls move to a dedicated rail immediately BELOW the leaf —
   still outside it, still never over copy or photography. */
@media (max-width:700px){
.hfb{--hfb-gutter:0px;padding:0 0 100px;display:flex;flex-direction:column;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px)}
.hfb__leaf{flex:1 1 auto;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y} /* scrollable leaf resets touch-action:auto — pan-y keeps vertical reading scroll AND lets horizontal swipes reach the page-turn */
.hfb__sheet{inset:0 0 100px}
.hfb::before{left:0}
.hfb__edge{top:auto;bottom:16px;transform:none}
.hfb__edge:active{transform:scale(.97)}
.hfb__edge--prev{left:16px}
.hfb__edge--next{right:16px}
}
.hfb-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* Leaf media well: real photography, a real poster or a real resolved embed
   fills it. There is no decorative gradient stand-in — a leaf with no media
   record is a copy-led leaf, and a leaf that expected media says so. */
.hfb__media{position:relative;display:block;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#241530}
.hfb__media img,.hfb__media iframe{display:block;width:100%;height:100%;border:0;object-fit:cover}
.hfb__media--tall{aspect-ratio:4/3}
.hfb__mediafail{display:grid;place-items:center;aspect-ratio:16/9;border-radius:12px;border:2px dashed #C2413B;background:#FFF3F3;color:#7A231F;font-size:.8rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase;text-align:center;padding:12px}
@media (max-width:560px){.hfb__leaf,.hfb__sheet{padding:18px 22px}}
/* Reduced motion: the leaf changes immediately — no 3D sheet, same content,
   same history and the same one-pageview-per-turn accounting. */
@media (prefers-reduced-motion:reduce){.hfb__sheet{display:none}.hnf-card__inner{transition:none}}
/* ---- Flipshow Gallery: article-width flipper book ---- */
.hfs{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center}
.hfs-book{perspective:1600px;border-radius:18px;min-width:0}
.hfs-page{display:flex;flex-direction:column;gap:10px;min-height:480px;padding:18px;border-radius:18px;background:var(--hnf-face);color:var(--hnf-ink);border:1.5px solid color-mix(in srgb,var(--hnf-accent) 45%,transparent);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.85),0 18px 40px -20px rgba(20,10,30,.45);transform-origin:left center}
.hfs-page.is-turning{animation:hfsTurn .5s cubic-bezier(.2,.8,.2,1)}
@keyframes hfsTurn{from{transform:rotateY(-70deg);opacity:.2}to{transform:rotateY(0);opacity:1}}
.hfs-art{display:grid;place-items:center;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--hnf-accent) 60%,#2A1A38),#1C1128);color:#FFF9EC;font-family:var(--mh-serif);font-weight:900;font-size:3rem}
.hfs-pill{display:inline-flex;align-items:center;justify-content:center;min-width:58px;min-height:58px;padding:10px;border-radius:var(--mh-radius-pill);border:2.5px solid var(--hnf-accent);cursor:pointer;font:inherit;font-size:26px;font-weight:900;color:var(--hnf-accent-ink);background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.45));box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9),0 3px 8px -3px rgba(20,10,30,.4)}
.hfs-pill:disabled{opacity:.4;cursor:not-allowed}
.hfs-pill:focus-visible,.hfs-dot:focus-visible,.hnf-save:focus-visible{outline:3px solid var(--hnf-accent-ink);outline-offset:3px}
.hfs-dots{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}
.hfs-dot{min-width:44px;min-height:44px;border-radius:10px;border:1.5px solid color-mix(in srgb,var(--hnf-accent) 50%,transparent);cursor:pointer;font:inherit;font-size:.85rem;font-weight:800;color:var(--hnf-ink);background:none}
.hfs-dot[aria-current="true"]{background:var(--hnf-accent);color:#FFF}
@media (max-width:560px){.hfs{grid-template-columns:minmax(0,1fr)}.hfs-nav{display:flex;justify-content:space-between;order:2}}
@media (prefers-reduced-motion:reduce){.hnf-card__inner{transition:none}.hfs-page.is-turning{animation:none}}
/* ---- Template chrome pills (literal states; no style holes) ---- */
.fp-pill{min-height:44px;padding:10px 18px;border-radius:999px;border:1.5px solid rgba(185,156,74,.55);cursor:pointer;font:inherit;font-size:.85rem;font-weight:800;color:#4A2A5C;background:#FFFDF6;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.6),0 2px 6px -2px rgba(26,14,36,.3)}
.fp-pill[aria-pressed="true"]{background:#2B153D;border-color:#2B153D;color:#F3ECE0}
.fp-pill:focus-visible{outline:3px solid #8A5A1E;outline-offset:3px}
.fp-brand{border-width:2px;font-weight:900}
.fp-brand[data-brand="musichaven"]{border-color:#D4A23A}.fp-brand[data-brand="musichaven"][aria-pressed="true"]{background:#D4A23A;border-color:#D4A23A;color:#FFF}
.fp-brand[data-brand="hiphophaven"]{border-color:#1FA6D9}.fp-brand[data-brand="hiphophaven"][aria-pressed="true"]{background:#1FA6D9;border-color:#1FA6D9;color:#FFF}
.fp-brand[data-brand="raphaven"]{border-color:#E32219}.fp-brand[data-brand="raphaven"][aria-pressed="true"]{background:#E32219;border-color:#E32219;color:#FFF}
.fp-check{margin:0 0 4px;font-size:.82rem;font-weight:700;color:#8A7A5E}.fp-check[data-ok="true"]{color:#1E7A46}
.fp-pv{font-weight:800;color:#1E7A46}.fp-pv[data-pv="no"]{color:#8A7A5E}