/* =========================================================
   $CLOWN — MEME STASH
   builds on style.css; only what the wall needs lives here.
   ========================================================= */

.mhero{
  position:relative;text-align:center;overflow:hidden;
  padding:34px 16px 26px;
  background:
    radial-gradient(circle at 50% 0,rgba(255,201,60,.45),transparent 62%),
    repeating-conic-gradient(from 0deg at 50% -10%,var(--red) 0 9deg,var(--cream) 9deg 18deg);
  border-bottom:7px solid var(--ink);
}
.mhero__bulbs{
  position:absolute;top:0;left:0;right:0;height:26px;
  background:radial-gradient(circle,var(--yellow) 32%,transparent 34%) 0 0/38px 26px repeat-x;
  filter:drop-shadow(0 0 7px var(--gold));
  animation:bulbBlink .85s steps(2) infinite;pointer-events:none;
}
.mhero__kicker{
  position:relative;display:inline-block;font-family:var(--font-big);
  font-size:clamp(10px,1.6vw,15px);
  background:var(--ink);color:var(--lime);padding:6px 13px;border:4px solid var(--lime);
  transform:rotate(-2deg);margin-bottom:12px;
}
.mhero__title{
  position:relative;font-family:var(--font-shade);
  font-size:clamp(44px,11vw,120px);line-height:.9;
  color:var(--gold);-webkit-text-stroke:3px var(--ink);
  text-shadow:0 9px 0 var(--red-dk);
}
.mhero__sub{
  position:relative;display:inline-block;margin:14px auto 0;
  background:rgba(253,246,227,.9);border:3px dashed var(--ink);border-radius:8px;
  padding:9px 16px;font-size:clamp(14px,2vw,19px);max-width:62ch;
}
.mhero__tools{
  position:relative;display:flex;gap:10px;justify-content:center;
  flex-wrap:wrap;margin-top:18px;
}
.mfind{
  font-family:var(--font-body);font-weight:700;font-size:16px;
  padding:12px 16px;border:5px solid var(--ink);border-radius:10px;
  background:var(--cream);color:var(--ink);
  box-shadow:var(--shadow);min-width:min(280px,80vw);
}
.mfind:focus{outline:none;background:#fff;box-shadow:9px 9px 0 var(--ink)}

/* ---------- the wall ---------- */
.mwrap{
  padding:34px 16px 60px;
  background:repeating-linear-gradient(90deg,var(--red) 0 60px,var(--cream) 60px 120px);
  border-bottom:7px solid var(--ink);
}
.mgrid{
  column-count:4;column-gap:20px;
  max-width:1320px;margin:0 auto;
}
@media (max-width:1100px){ .mgrid{column-count:3} }
@media (max-width:760px) { .mgrid{column-count:2;column-gap:14px} }
@media (max-width:460px) { .mgrid{column-count:1} }

.meme{
  break-inside:avoid;margin:0 0 20px;
  background:#fff;border:4px solid var(--ink);
  box-shadow:var(--shadow);overflow:hidden;
}
.meme:hover{
  transform:rotate(0) scale(1.025)!important;
  box-shadow:10px 10px 0 var(--ink);
  position:relative;z-index:5;
}
.meme__img{
  display:block;width:100%;height:auto;cursor:zoom-in;
  background:var(--cream);
  aspect-ratio:var(--ar);      /* reserved from the manifest, so nothing jumps */
}
.meme__bar{
  display:flex;gap:6px;padding:8px;background:var(--ink);
}
.meme__btn{
  flex:1;text-align:center;text-decoration:none;cursor:pointer;
  font-family:var(--font-big);font-size:12px;letter-spacing:.5px;
  padding:9px 6px;border:3px solid var(--ink);border-radius:6px;
  color:var(--ink);
}
.meme__btn--save{background:var(--lime)}
.meme__btn--post{background:var(--cyan)}
.meme__btn:hover{background:var(--gold);transform:scale(1.05)}
.meme__btn:active{transform:scale(.94)}
.meme__btn:focus-visible{outline:3px solid var(--pink);outline-offset:2px}

.mempty{
  text-align:center;font-family:var(--font-hand);
  font-size:clamp(16px,2.4vw,22px);color:var(--ink);
  background:var(--cream);border:4px solid var(--ink);
  max-width:520px;margin:0 auto;padding:16px 20px;
}

/* ---------- bottom CTA ---------- */
.mcta{
  padding:52px 16px 60px;text-align:center;
  background:linear-gradient(180deg,#1a0b2e,#3b0d3f);
  border-bottom:7px solid var(--pink);
}
.mcta .section-sub{color:var(--gold)}
.mcta__row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:22px}

/* ---------- lightbox ---------- */
.lb{
  position:fixed;inset:0;z-index:9990;
  background:rgba(6,4,8,.93);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.lb__stage{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  max-width:min(1100px,92vw);max-height:92vh;
}
.lb__stage img{
  max-width:100%;max-height:78vh;width:auto;height:auto;
  border:5px solid var(--ink);background:#fff;
  box-shadow:0 18px 60px rgba(0,0,0,.6);
}
.lb__bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
}
.lb__count{
  font-family:"Courier New",monospace;font-weight:700;
  color:var(--gold);font-variant-numeric:tabular-nums;
}
.lb__close,.lb__nav{
  position:absolute;cursor:pointer;
  font-family:var(--font-big);color:var(--ink);
  background:var(--gold);border:4px solid var(--ink);border-radius:50%;
  width:52px;height:52px;line-height:1;font-size:24px;
  box-shadow:4px 4px 0 var(--ink);
}
.lb__close{top:16px;right:16px;font-size:20px}
.lb__nav{top:50%;transform:translateY(-50%);font-size:32px}
.lb__nav--prev{left:14px}
.lb__nav--next{right:14px}
.lb__close:hover,.lb__nav:hover{background:var(--pink);color:#fff}
.lb__close:focus-visible,.lb__nav:focus-visible{outline:3px solid var(--lime);outline-offset:3px}

@media (max-width:620px){
  .lb__nav{width:44px;height:44px;font-size:26px}
  .lb__stage img{max-height:66vh}
  .mwrap{padding:22px 12px 44px}
}
@media (prefers-reduced-motion:reduce){
  .mhero__bulbs{animation:none}
  .meme:hover{transform:none!important}
}

/* =========================================================
   POST HELPER
   X cannot attach a picture from a link, so the paste step
   gets said out loud instead of hidden in a toast.
   ========================================================= */
.pm{
  position:fixed;inset:0;z-index:9995;
  background:rgba(6,4,8,.92);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.pm__box{
  position:relative;text-align:center;
  background:var(--cream);border:6px solid var(--ink);border-radius:14px;
  box-shadow:var(--shadow-lg);
  padding:26px 26px 22px;max-width:min(460px,92vw);
}
.pm__x{
  position:absolute;top:-16px;right:-16px;cursor:pointer;
  width:44px;height:44px;border-radius:50%;font-size:17px;
  font-family:var(--font-big);background:var(--gold);color:var(--ink);
  border:4px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
}
.pm__x:hover{background:var(--pink);color:#fff}
.pm__thumb{
  width:120px;height:120px;object-fit:cover;margin:0 auto 14px;
  border:4px solid var(--ink);box-shadow:4px 4px 0 var(--ink);
  transform:rotate(-2deg);
}
.pm__status{
  font-family:var(--font-big);font-size:clamp(17px,2.6vw,23px);
  color:#0f7a1c;margin-bottom:12px;
}
.pm__status--bad{color:var(--red)}
.pm__steps{
  text-align:left;margin:0 auto 18px;padding-left:22px;
  font-size:16px;line-height:1.75;max-width:34ch;
}
.pm__steps b{background:var(--yellow);padding:1px 6px;border:2px solid var(--ink);border-radius:4px}
.pm__row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
@media (max-width:420px){
  .pm__box{padding:20px 16px 18px}
  .pm__thumb{width:96px;height:96px}
}