/* ============================================================
   BUBBLE HOUSE — Website UI kit styles
   Paper-first, poster-first, hand-drawn. Loads on top of
   ../../colors_and_type.css (tokens + semantic type classes).
   ============================================================ */

*{box-sizing:border-box}
html{scroll-behavior:smooth}

/* Branding-font signature: black Luckybones letters with the soft pale-lime
   offset shadow from the type specimen. Applied on light/paper grounds only. */
.bh-display,.ecard-title,.value-h{
  text-shadow:2px 3px 0 #DCE9A6;
}
body{
  margin:0;background:var(--paper-white);color:var(--ink);
  font-family:var(--font-sans);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block}
button{font-family:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}

/* paper grain overlay (whole page) */
.bh-grain::before{
  content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;
  opacity:.05;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");
}

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:200;display:flex;align-items:center;justify-content:space-between;
  padding:14px 30px;background:rgba(248,247,245,.82);backdrop-filter:blur(8px);
  border-bottom:1.5px solid var(--ink)}
.nav-logo{height:34px}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-link{font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink);position:relative;padding:4px 0}
.nav-link::after{content:"";position:absolute;left:0;right:100%;bottom:-1px;height:7px;background:var(--dopamine-yellow);z-index:-1;transition:right .22s cubic-bezier(.34,1.2,.64,1)}
.nav-link:hover::after{right:0}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:14px;text-transform:uppercase;
  letter-spacing:.04em;padding:13px 26px;border-radius:999px;border:1.5px solid var(--ink);
  background:var(--ink);color:var(--paper-white);transition:transform .14s cubic-bezier(.34,1.4,.64,1),background .14s,color .14s}
.btn:hover{transform:translateY(-2px) rotate(-1deg)}
.btn:active{transform:scale(.97)}
.btn--pink{background:var(--bubble-pink);color:var(--ink)}
.btn--yellow{background:var(--dopamine-yellow);color:var(--ink)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper-white)}
.btn--sm{padding:9px 18px;font-size:12px}
.btn--lg{padding:16px 34px;font-size:16px}

/* ---------- TAPE / STICKER ---------- */
.tape{display:inline-block;font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink);background:var(--dopamine-yellow);padding:6px 12px;border:1.5px solid var(--ink);
  border-radius:2px;box-shadow:var(--shadow-tape)}
.tape--pink{background:var(--bubble-pink)}
.mk{padding:1px 7px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.mk--y{background:var(--dopamine-yellow)}
.mk--p{background:var(--bubble-pink)}

/* ---------- SECTION SHELL ---------- */
.section{max-width:var(--maxw);margin:0 auto;padding:84px 30px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:12px;text-transform:uppercase;
  letter-spacing:.18em;color:var(--ink)}
.eyebrow .dot{width:9px;height:9px;border-radius:50%;background:var(--poster-red)}

/* ---------- HERO ---------- */
.hero{position:relative;overflow:hidden;min-height:88vh;display:flex;flex-direction:column;justify-content:center;
  padding:60px 30px 40px}
.hero-spray{position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(circle at 18% 30%, rgba(245,213,234,.85), transparent 45%),
    radial-gradient(circle at 82% 22%, rgba(175,196,214,.8), transparent 42%),
    radial-gradient(circle at 70% 82%, rgba(244,240,0,.45), transparent 46%),
    radial-gradient(circle at 30% 88%, rgba(166,176,106,.55), transparent 48%),
    var(--paper-white);
  filter:saturate(1.05)}
.hero-inner{position:relative;z-index:3;max-width:var(--maxw);margin:0 auto;width:100%}
.hero-word{height:min(34vh,300px);width:auto;max-width:92vw}
.hero-doodle{position:absolute;z-index:2;animation:wobble 5s ease-in-out infinite}
.hero-bubble{position:absolute;z-index:1;border-radius:50%;border:2px solid var(--ink);bottom:-90px;pointer-events:none}

/* hero photo drop-slot */
.hero-photo{position:relative;margin:40px 0 0;max-width:680px;aspect-ratio:16/8;
  background:var(--bg-warm);border:1.5px solid var(--ink);border-radius:2px;box-shadow:var(--shadow-tape);
  transform:rotate(-1deg);overflow:visible}
.hero-photo image-slot{border-radius:0;background:var(--bg-warm)}
.hero-photo-cap{position:absolute;bottom:-13px;left:18px;z-index:3;background:var(--bubble-pink)}
@media(max-width:760px){.hero-photo{aspect-ratio:16/10;margin-top:30px}}

/* marquee */
.marquee{overflow:hidden;white-space:nowrap;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
  background:var(--dopamine-yellow);padding:10px 0}
.marquee-track{display:inline-flex;gap:28px;animation:marq 22s linear infinite;will-change:transform}
.marquee-word{font-family:var(--font-display);font-size:22px;color:var(--ink);text-transform:uppercase}
.marquee-star{font-size:18px;align-self:center}

/* ---------- EVENT CARD ---------- */
.events-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:34px}
.ecard{background:#fff;border:1.5px solid var(--ink);border-radius:2px;box-shadow:var(--shadow-tape);
  display:flex;flex-direction:column;
  overflow:hidden;transition:transform .18s cubic-bezier(.34,1.3,.64,1),box-shadow .18s}
.ecard:nth-child(odd){transform:rotate(-0.7deg)}
.ecard:nth-child(even){transform:rotate(0.7deg)}
.ecard:hover{transform:translateY(-6px) rotate(0deg);box-shadow:7px 9px 0 rgba(17,17,17,.92)}
/* portrait-friendly flyer frame: standing flyers show in full (contain),
   on a soft sprayed backing so the letterbox reads as intentional paper */
.ecard-img{position:relative;height:460px;overflow:hidden;border-bottom:1.5px solid var(--ink);
  background:
    radial-gradient(circle at 24% 18%, rgba(245,213,234,.55), transparent 56%),
    radial-gradient(circle at 82% 84%, rgba(175,196,214,.5), transparent 56%),
    var(--paper-white)}
.ecard-img image-slot{background:transparent}
.ecard-img img{width:100%;height:100%;object-fit:cover;filter:contrast(1.05) saturate(1.05)}
.ecard-date{position:absolute;top:10px;left:10px}
.ecard-status{position:absolute;top:10px;right:10px}
.ecard-bd{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px;flex:1;cursor:pointer}
.ecard-title{font-family:var(--font-display);font-size:30px;line-height:.95;margin:4px 0 4px}
.ecard-meta{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;flex-wrap:wrap}

/* ---------- LINEUP ---------- */
.lineup{background:var(--ink);color:var(--paper-white)}
.lineup .section{padding-top:74px;padding-bottom:74px}
.lineup .eyebrow{color:var(--paper-white)}
.lineup-row{display:flex;align-items:center;gap:18px;padding:16px 4px;border-bottom:1.5px solid rgba(248,247,245,.22)}
.lineup-row:last-child{border-bottom:none}
.lineup-time{font-weight:800;font-size:13px;color:rgba(248,247,245,.55);width:130px;flex-shrink:0;font-variant-numeric:tabular-nums}
.lineup-name{font-family:var(--font-display);font-size:clamp(26px,4.4vw,46px);line-height:1;flex:1;color:var(--paper-white);transition:color .15s;text-decoration:none;cursor:pointer}
.lineup-row:hover .lineup-name{color:var(--dopamine-yellow)}
.lineup-tag{font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--paper-white);
  border:1.5px solid var(--dopamine-yellow);color:var(--dopamine-yellow);border-radius:999px;padding:4px 12px;flex-shrink:0}

/* ---------- CONCEPT / VALUES ---------- */
.concept{position:relative;overflow:hidden}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:34px;border:1.5px solid var(--ink);background:var(--ink)}
.value{background:var(--paper-white);padding:26px 22px;min-height:170px;display:flex;flex-direction:column;justify-content:space-between;transition:background .18s}
.value:hover{background:var(--bubble-pink)}
.value-num{font-weight:800;font-size:12px;color:var(--ink-mute)}
.value-h{font-family:var(--font-display);font-size:25px;line-height:1;margin-top:14px}
.value-p{font-weight:500;font-size:13.5px;color:var(--ink-soft);line-height:1.5;margin-top:8px}

/* ---------- FOOTER ---------- */
.footer{background:var(--ink);color:var(--paper-white);padding:60px 30px 30px}
.footer-inner{max-width:var(--maxw);margin:0 auto}
.footer-top{display:grid;grid-template-columns:1.7fr 1fr 1.2fr;gap:40px 56px;align-items:start}
.footer-logo{height:42px}
.news{display:flex;gap:10px;margin-top:16px}
.news input{font-family:inherit;font-size:14px;padding:12px 16px;border-radius:999px;border:1.5px solid var(--paper-white);
  background:transparent;color:var(--paper-white);min-width:230px}
.news input::placeholder{color:rgba(248,247,245,.5)}
.socials{display:flex;gap:14px;margin-top:18px}
.social{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--paper-white);display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.social:hover{background:var(--dopamine-yellow);color:var(--ink);border-color:var(--dopamine-yellow)}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:46px;padding-top:20px;
  border-top:1px solid rgba(248,247,245,.2);font-weight:600;font-size:12px;color:rgba(248,247,245,.55);text-transform:uppercase;letter-spacing:.08em}

/* ---------- MODAL ---------- */
.scrim{position:fixed;inset:0;z-index:500;background:rgba(17,17,17,.55);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:24px;animation:fade .2s ease}
.modal{background:var(--paper-white);border:1.5px solid var(--ink);border-radius:16px;box-shadow:var(--shadow-lift);
  width:min(440px,94vw);max-height:92vh;overflow:auto;animation:pop .22s cubic-bezier(.34,1.4,.64,1)}
.modal-head{position:relative;padding:22px 24px;border-bottom:1.5px solid var(--ink)}
.modal-close{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--ink);
  background:#fff;display:flex;align-items:center;justify-content:center}
.modal-close:hover{background:var(--bubble-pink)}
.modal-bd{padding:22px 24px 26px}
.stepper{display:flex;align-items:center;gap:14px}
.step-btn{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--ink);background:#fff;font-size:22px;font-weight:800;display:flex;align-items:center;justify-content:center}
.step-btn:hover{background:var(--dopamine-yellow)}
.qty{font-family:var(--font-display);font-size:34px;min-width:46px;text-align:center}

/* ---------- ANIMATIONS ---------- */
@keyframes wobble{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes drift{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:.9}100%{transform:translateY(-120vh) translateX(40px);opacity:0}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:scale(.92) translateY(10px)}to{opacity:1;transform:none}}

/* ---------- RESPONSIVE ---------- */
@media(max-width:880px){
  .events-grid{grid-template-columns:1fr 1fr}
  .values{grid-template-columns:1fr 1fr}
  .nav-links .nav-link:not(:last-child){display:none}
}
@media(max-width:720px){
  .footer-top{grid-template-columns:1fr;gap:36px}
}
@media(max-width:560px){
  .events-grid{grid-template-columns:1fr}
  .values{grid-template-columns:1fr}
  .section{padding:56px 20px}
}

/* ============================================================
   FtD ↔ BUBBLE HOUSE INTEGRATION
   ============================================================ */

/* top ribbon — the explicit "powered by FtD" crossing point back to the dark world */
.bh-ribbon{display:flex;align-items:center;justify-content:center;gap:18px;position:relative;
  background:var(--ink);color:var(--paper-white);padding:9px 20px;
  font-family:var(--font-sans);font-weight:800;font-size:11.5px;text-transform:uppercase;
  letter-spacing:.16em;border-bottom:1.5px solid var(--ink);overflow:hidden}
.bh-ribbon::before{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 180% at 0% 50%, rgba(255,56,243,.22), transparent 55%),
  radial-gradient(120% 180% at 100% 50%, rgba(255,56,243,.16), transparent 55%);pointer-events:none}
.bh-ribbon-back{color:rgba(248,247,245,.7);transition:color .18s}
.bh-ribbon-mid{display:inline-flex;align-items:center;gap:10px;color:rgba(248,247,245,.85)}
.bh-ribbon-mid img{height:13px;width:auto;display:block;transform:translateY(.5px)}
.bh-ribbon-bh{height:16px !important;filter:invert(1);opacity:.95;margin-right:2px}
.bh-ribbon-by{color:rgba(248,247,245,.6)}
.bh-ribbon-x{color:#ff38f3;font-size:13px}
.bh-ribbon:hover .bh-ribbon-back{color:#ff38f3}
@media(max-width:560px){.bh-ribbon{gap:12px;font-size:10px;letter-spacing:.1em}}

/* nav cross-link pill into the agency world */
.bh-nav-cross{border:1.5px solid var(--ink);border-radius:999px;padding:7px 14px !important}
.bh-nav-cross::after{display:none}
.bh-nav-cross:hover{background:var(--ink);color:var(--paper-white)}
.bh-nav-cross-logo{height:13px;width:auto;display:block;transition:filter .15s}
.bh-nav-cross:hover .bh-nav-cross-logo{filter:invert(1)}

/* hero "a Follow the Dopamine night" tape badge */
.hero-powered{display:inline-flex;align-items:center;gap:8px;margin-bottom:22px;
  transition:transform .14s cubic-bezier(.34,1.4,.64,1)}
.hero-powered:hover{transform:translateY(-2px) rotate(-1.5deg)}

/* footer: powered-by lockup + agency cross-links */
.footer-powered{display:inline-flex;align-items:center;gap:11px;margin-top:18px;
  padding:10px 16px;border:1.5px solid rgba(248,247,245,.3);border-radius:999px;
  transition:border-color .18s,background .18s}
.footer-powered span{font-family:var(--font-sans);font-weight:800;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.16em;color:rgba(248,247,245,.6)}
.footer-powered img{height:14px;width:auto;display:block}
.footer-powered:hover{border-color:#ff38f3;background:rgba(255,56,243,.08)}
.footer-cross{display:flex;flex-direction:column;gap:13px}
.footer-cross a{font-family:var(--font-sans);font-weight:600;font-size:14px;line-height:1.2;
  color:rgba(248,247,245,.7);transition:color .15s}
.footer-cross a:hover{color:var(--dopamine-yellow)}

/* ============================================================
   ENTRY HANDOFF OVERLAY — dramatic black→paper bubble-burst
   ============================================================ */
.enter{position:fixed;inset:0;z-index:9999;overflow:hidden;background:#000;
  display:flex;align-items:center;justify-content:center}
.enter-ftd{position:relative;z-index:2;text-align:center;color:#ff38f3;
  display:flex;flex-direction:column;align-items:center;
  animation:enterFtd 1.05s cubic-bezier(.7,0,.3,1) both}
.enter-ftd-mark{height:clamp(40px,9vw,118px);width:auto;display:block;
  filter:drop-shadow(0 0 38px rgba(255,56,243,.55))}
.enter-ftd small{display:block;font-family:var(--font-sans);font-size:12px;letter-spacing:.4em;
  color:rgba(255,255,255,.5);margin-top:1.6em;font-weight:700;text-transform:uppercase}
.enter-burst{position:absolute;z-index:3;border-radius:50%;border:2px solid #ff38f3;
  left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;opacity:0;
  animation:enterBurst 1s ease-out .85s both}
.enter-paper{position:absolute;inset:0;z-index:4;background:var(--paper-white);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;
  clip-path:circle(0% at 50% 50%);
  animation:enterPaper 1.05s cubic-bezier(.5,0,.1,1) .95s both}
.enter-paper img{height:min(20vh,150px);width:auto;
  animation:enterWord 1s cubic-bezier(.34,1.4,.64,1) 1.25s both}
.enter-paper .enter-tag{font-family:var(--font-sans);font-weight:800;font-size:13px;
  text-transform:uppercase;letter-spacing:.22em;color:var(--ink-mute);
  opacity:0;animation:enterFade .5s ease 1.5s both}
.enter--done{animation:enterOut .45s ease 2.15s both;pointer-events:none}

@keyframes enterFtd{
  0%{opacity:0;transform:scale(.9)}
  22%{opacity:1;transform:scale(1)}
  72%{opacity:1;transform:scale(1.02)}
  100%{opacity:0;transform:scale(1.18)}
}
@keyframes enterBurst{
  0%{opacity:0;transform:scale(.2)}
  35%{opacity:1}
  100%{opacity:0;transform:scale(34)}
}
@keyframes enterPaper{from{clip-path:circle(0% at 50% 50%)}to{clip-path:circle(150% at 50% 50%)}}
@keyframes enterWord{0%{opacity:0;transform:scale(.7) rotate(-6deg)}100%{opacity:1;transform:none}}
@keyframes enterFade{to{opacity:1}}
@keyframes enterOut{to{opacity:0;visibility:hidden}}
@media(prefers-reduced-motion:reduce){.enter{display:none}}

/* ---------- SIGN-UP FORM EMBED ---------- */
.signup-frame{
  background:var(--paper-white);
  border:1.5px solid var(--ink);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-tape);
  overflow:hidden;
  position:relative;
}
.signup-frame iframe{display:block;width:100%;border:0;background:var(--paper-white)}

/* native sign-up form (paper-styled) — mirrors the Google booking form,
   then hands off to it to actually submit */
.signup-frame{padding:34px 34px 32px}
.signup-doodle{position:absolute;top:-26px;right:24px;height:74px;animation:wobble 5s ease-in-out infinite;pointer-events:none;z-index:2}
.signup-form{display:flex;flex-direction:column;gap:22px;position:relative;z-index:1}
.signup-field{display:flex;flex-direction:column;gap:8px}
.signup-label{font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-mute)}
.signup-label em{font-style:normal;color:var(--ink-soft)}
.signup-field input{font-family:inherit;font-size:15px;font-weight:600;padding:13px 16px;border-radius:999px;
  border:1.5px solid var(--ink);background:var(--paper-white);color:var(--ink);width:100%}
.signup-field textarea{font-family:inherit;font-size:15px;font-weight:600;padding:13px 16px;border-radius:18px;
  border:1.5px solid var(--ink);background:var(--paper-white);color:var(--ink);width:100%;resize:vertical}
.signup-field input::placeholder,.signup-field textarea::placeholder{color:var(--ink-mute);font-weight:500}
.signup-field input:focus,.signup-field textarea:focus{outline:none;box-shadow:var(--shadow-tape)}
.signup-chips{display:flex;flex-wrap:wrap;gap:9px}
.signup-chip{font-family:inherit;font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;
  padding:9px 15px;border-radius:999px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);
  cursor:pointer;transition:transform .14s cubic-bezier(.34,1.4,.64,1),background .14s,color .14s}
.signup-chip:hover{transform:translateY(-2px) rotate(-1deg)}
.signup-chip.is-on{background:var(--dopamine-yellow)}
.signup-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:2px}
.signup-fine{font-weight:600;font-size:12px;color:var(--ink-mute);max-width:280px;line-height:1.4}

/* ---------- FROM-THE-FLOOR GALLERY ---------- */
.gallery{position:relative;overflow:hidden}
.gallery-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;row-gap:46px}
.gphoto{margin:0;position:relative;background:#fff;border:1.5px solid var(--ink);border-radius:2px;
  aspect-ratio:4/5;
  box-shadow:var(--shadow-tape);overflow:visible;transform:rotate(var(--rot,0deg));
  transition:transform .18s cubic-bezier(.34,1.3,.64,1),box-shadow .18s}
.gphoto:hover{transform:translateY(-5px) rotate(0deg);box-shadow:7px 9px 0 rgba(17,17,17,.92);z-index:4}
.gphoto image-slot{border-radius:0;background:var(--bg-warm,#D8D5CF)}
.gphoto-cap{position:absolute;bottom:-12px;left:14px;z-index:3}
.gphoto--pink .gphoto-cap{background:var(--bubble-pink)}
.gphoto--blue .gphoto-cap{background:var(--dust-blue)}
.gphoto--green .gphoto-cap{background:var(--moss-green)}
@media(max-width:880px){
  .gallery-grid{grid-template-columns:repeat(3,1fr);row-gap:40px}
}
@media(max-width:560px){
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .signup-row{grid-template-columns:1fr}
}

/* ============================================================
   HERO LAYOUT — text left, photo right (repositioned)
   ============================================================ */
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:0;align-items:center}
/* text becomes a taped-paper card that overlaps onto the photo — interlocked,
   not two blocks floating apart */
.hero-col{min-width:0;position:relative;z-index:3;
  background:var(--paper-white);border:1.5px solid var(--ink);
  box-shadow:var(--shadow-tape);border-radius:2px;
  padding:38px 42px;margin-right:-78px}
/* header bigger, supporting copy a touch smaller */
.hero-word{height:min(40vh,360px)}
.hero-col .bh-lead{font-size:1.06rem;max-width:430px}
.hero-grid .hero-photo{margin:18px 0;max-width:none;width:100%;aspect-ratio:4/5;z-index:1}
@media(max-width:880px){
  .hero-grid{grid-template-columns:1fr;gap:0}
  .hero-col{margin-right:0;margin-bottom:-46px;z-index:3}
  .hero-grid .hero-photo{aspect-ratio:16/10;max-width:680px;margin:0 auto}
  .hero-word{height:min(34vh,300px)}
}

/* ============================================================
   TWEAKS — expressive feel-knobs
   composure (geometry register) · accent (--dopamine-yellow override)
   · doodles (--doodle-op + rendered count)
   ============================================================ */
.hero-doodle{opacity:var(--doodle-op,1)}

/* CALM — editorial, grown-up: straighten everything, soften the zine shadow,
   drop the bubbly lime offset on display type */
[data-composure="calm"]{--shadow-tape:0 10px 28px rgba(17,17,17,.12)}
[data-composure="calm"] .ecard:not(:hover),
[data-composure="calm"] .gphoto:not(:hover),
[data-composure="calm"] .hero-photo{transform:none}
[data-composure="calm"] .bh-display,
[data-composure="calm"] .ecard-title,
[data-composure="calm"] .value-h{text-shadow:none}

/* CHAOS — pasted on a wall: harder offset, more tilt across cards + stickers */
[data-composure="chaos"]{--shadow-tape:5px 7px 0 rgba(17,17,17,.95)}
[data-composure="chaos"] .ecard:nth-child(2n):not(:hover){transform:rotate(-2.8deg)}
[data-composure="chaos"] .ecard:nth-child(3n):not(:hover){transform:rotate(2.4deg)}
[data-composure="chaos"] .ecard:nth-child(4n):not(:hover){transform:rotate(-1.6deg)}
[data-composure="chaos"] .hero-photo{transform:rotate(-2.6deg)}
[data-composure="chaos"] .hero-powered{transform:rotate(-2.5deg)}
[data-composure="chaos"] .ecard-date,
[data-composure="chaos"] .ecard-status,
[data-composure="chaos"] .gphoto-cap{transform:rotate(-2deg)}

/* ============================================================
   "Replace photo" affordance — a branded, always-visible pill
   layered on every drop-slot so swapping an image is obvious
   and never depends on the slot's clipped hover controls.
   ============================================================ */
.bh-replace{
  position:absolute;z-index:7;display:inline-flex;align-items:center;gap:6px;
  padding:6px 11px 6px 9px;margin:0;
  font-family:var(--font-sans);font-weight:800;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;line-height:1;
  color:var(--ink);background:var(--paper-white);
  border:1.5px solid var(--ink);border-radius:999px;
  box-shadow:2px 3px 0 rgba(17,17,17,.9);
  cursor:pointer;opacity:.62;
  transition:opacity .16s ease,transform .16s cubic-bezier(.34,1.3,.64,1),background .16s ease;
}
.bh-replace[data-corner="br"]{right:12px;bottom:12px}
.bh-replace[data-corner="tr"]{right:12px;top:12px}
.bh-replace svg{width:14px;height:14px;stroke:currentColor}
.bh-replace .bh-replace-lbl{white-space:nowrap}
.bh-imgwrap:hover .bh-replace{opacity:1}
.bh-replace:hover{background:var(--dopamine-yellow);transform:translateY(-2px) rotate(-1.5deg)}
.bh-replace:focus-visible{opacity:1;outline:none;background:var(--dopamine-yellow)}
.bh-replace:active{transform:scale(.96)}
@media(hover:none){.bh-replace{opacity:1}}