/* ============================================================
   bh-embed.css
   Authentic Bubble House (paper-poster) styling for the single
   BubbleHouse section embedded inside the DARK FtD homepage.
   ALL tokens + rules are scoped under .bh-scope so they never
   touch FtD's dark :root tokens.
   ============================================================ */

@font-face {
  font-family: 'Luckybones';
  src: url('bh/fonts/Luckybones-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}

.bh-scope{
  --paper:#F8F7F5;
  --bubble-pink:#F5D5EA;
  --dopamine-yellow:#F4F000;
  --bh-ink:#111111;
  --bh-ink-soft:#3A3A38;
  --bh-ink-mute:#8A8880;
  --poster-red:#E5203A;
  --moss-green:#A6B06A;
  --dust-blue:#AFC4D6;
  --bh-display:'Luckybones','Bagel Fat One',system-ui,sans-serif;
  --bh-sans:'Archivo','Helvetica Neue',Arial,sans-serif;
  --bh-shadow-tape:3px 4px 0 rgba(17,17,17,.9);
}

/* the portal panel — a slab of the paper world dropped into the black page */
.bhp{position:relative;border-radius:var(--r-xl);overflow:hidden;color:var(--bh-ink);
  border:1.5px solid var(--bh-ink);
  background:
    radial-gradient(circle at 14% 22%, rgba(245,213,234,.9), transparent 46%),
    radial-gradient(circle at 88% 16%, rgba(175,196,214,.85), transparent 44%),
    radial-gradient(circle at 78% 90%, rgba(244,240,0,.5), transparent 48%),
    radial-gradient(circle at 22% 92%, rgba(166,176,106,.55), transparent 48%),
    var(--paper);
  box-shadow:0 30px 80px rgba(0,0,0,.55);
}
.bhp::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.bhp-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;gap:8px;align-items:stretch}
.bhp-body{padding:46px 44px 48px;display:flex;flex-direction:column;align-items:flex-start;gap:20px}

.bhp-tape{display:inline-flex;align-items:center;gap:8px;font-family:var(--bh-sans);font-weight:800;
  font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--bh-ink);
  background:var(--dopamine-yellow);padding:7px 13px;border:1.5px solid var(--bh-ink);
  border-radius:2px;box-shadow:var(--bh-shadow-tape);transform:rotate(-1.5deg)}

.bhp-word{height:clamp(64px,9vw,118px);width:auto;display:block}
.bhp-blurb{font-family:var(--bh-sans);font-weight:500;font-size:16.5px;line-height:1.55;
  color:var(--bh-ink-soft);max-width:42ch;text-wrap:pretty}
.bhp-blurb em{font-style:italic;color:var(--bh-ink)}

.bhp-line{display:flex;flex-wrap:wrap;gap:9px}
.bhp-mk{font-family:var(--bh-sans);font-weight:800;font-size:13px;text-transform:uppercase;
  letter-spacing:.02em;color:var(--bh-ink);background:var(--dopamine-yellow);
  padding:3px 9px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.bhp-mk:nth-child(2n){background:var(--bubble-pink)}

.bhp-meta{display:flex;gap:30px;flex-wrap:wrap;border-top:1.5px solid var(--bh-ink);padding-top:18px;width:100%}
.bhp-meta .k{font-family:var(--bh-sans);font-weight:800;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.16em;color:var(--bh-ink-mute)}
.bhp-meta .v{font-family:var(--bh-sans);font-weight:800;font-size:16px;text-transform:uppercase;
  letter-spacing:.01em;color:var(--bh-ink);margin-top:5px;font-stretch:75%}

/* the cross-over button — ink pill, lift+tilt like the real BH buttons */
.bhp-cta{display:inline-flex;align-items:center;gap:10px;font-family:var(--bh-sans);font-weight:800;
  font-size:14px;text-transform:uppercase;letter-spacing:.04em;padding:14px 26px;border-radius:999px;
  border:1.5px solid var(--bh-ink);background:var(--bh-ink);color:var(--paper);
  transition:transform .14s cubic-bezier(.34,1.4,.64,1)}
.bhp-cta:hover{transform:translateY(-2px) rotate(-1deg)}
.bhp-cta:active{transform:scale(.97)}

/* taped flyer poster on the right */
.bhp-poster{position:relative;margin:30px 36px 30px 6px;align-self:center}
.bhp-poster img{width:100%;height:100%;max-height:430px;object-fit:cover;display:block;
  border:1.5px solid var(--bh-ink);border-radius:2px;box-shadow:6px 8px 0 rgba(17,17,17,.92);
  transform:rotate(2.2deg);filter:contrast(1.05) saturate(1.05)}
.bhp-stamp{position:absolute;top:-14px;left:-14px;z-index:3;background:var(--poster-red);color:#fff;
  font-family:var(--bh-sans);font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.1em;
  padding:8px 12px;border:1.5px solid var(--bh-ink);border-radius:2px;box-shadow:var(--bh-shadow-tape);
  transform:rotate(-6deg)}

/* scattered doodles + bubble outlines */
.bhp-doodle{position:absolute;z-index:3;pointer-events:none}
.bhp-bub{position:absolute;z-index:1;border-radius:50%;border:2px solid var(--bh-ink);pointer-events:none;opacity:.5}

@media(max-width:980px){
  .bhp-grid{grid-template-columns:1fr}
  .bhp-body{padding:34px 26px 30px}
  .bhp-poster{margin:0 26px 30px;order:2}
  .bhp-poster img{transform:rotate(1deg);max-height:300px}
}