/* =========================================================
   PARTY BOX — gallery catalogue page
   A scrapbook "wall" of real-install polaroids you can scroll
   through and filter by occasion. Loads on top of home.css
   (nav, buttons, footer, lightbox & brand tokens come from there).
   ========================================================= */
:root{--hand:"Caveat","Segoe Script",cursive}

/* ---- banner ---- */
.gx-hero{position:relative;text-align:center;padding:64px 22px 30px;
  background:radial-gradient(120% 90% at 50% -10%,#241811,#160f0a 70%);color:var(--cream);overflow:hidden}
.gx-hero::before,.gx-hero::after{content:"";position:absolute;border-radius:50%;filter:blur(2px);opacity:.5}
.gx-hero::before{width:120px;height:150px;left:7%;top:30%;
  background:radial-gradient(circle at 36% 30%,#fff,#f7b8cf 60%,#d76b95);box-shadow:0 0 0 0 transparent}
.gx-hero::after{width:90px;height:112px;right:9%;top:24%;
  background:radial-gradient(circle at 36% 30%,#fff,#a9d6f2 60%,#5f95cf)}
.gx-hero .eyebrow{color:var(--gold);position:relative}
.gx-hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(38px,6vw,68px);
  line-height:1.02;margin:6px 0 0;position:relative}
.gx-hero h1 em{font-style:italic;color:var(--gold)}
.gx-hero p{color:#d8c8ad;max-width:600px;margin:16px auto 0;position:relative;font-size:16px}
.gx-hero .gx-count{display:inline-block;margin-top:18px;font-weight:800;font-size:13px;letter-spacing:.04em;
  color:var(--gold-light);background:rgba(231,192,115,.14);border:1px solid rgba(231,192,115,.34);
  border-radius:999px;padding:7px 16px;position:relative}

/* ---- filter chips (sticky) ---- */
.gx-filters{position:sticky;top:68px;z-index:40;background:rgba(255,248,239,.86);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--parchment-deep);padding:14px 0}
.gx-filters-in{max-width:var(--maxw);margin:0 auto;padding:0 22px;display:flex;gap:10px;
  flex-wrap:wrap;justify-content:center}
.gx-chip{font-family:var(--sans);font-weight:800;font-size:13.5px;cursor:pointer;
  border:1.5px solid var(--parchment-deep);background:var(--cream);color:var(--ink-soft);
  border-radius:999px;padding:8px 16px;transition:all .15s ease;white-space:nowrap}
.gx-chip:hover{border-color:var(--gold-deep);color:var(--ink);transform:translateY(-1px)}
.gx-chip.on{background:linear-gradient(180deg,var(--gold),var(--gold-deep));color:#3a2a10;
  border-color:transparent;box-shadow:0 6px 16px rgba(199,154,69,.34)}
.gx-chip .n{opacity:.6;font-weight:700;margin-left:4px}

/* ---- the polaroid wall ---- */
.gx-wall-wrap{max-width:1240px;margin:0 auto;padding:40px 22px 64px}
.gx-wall{columns:4 248px;column-gap:26px}
.gx-card{break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 30px;position:relative;
  background:#fffdf6;padding:13px 13px 0;border-radius:3px;border:1px solid rgba(70,45,15,.06);
  box-shadow:0 14px 30px rgba(40,24,8,.18),0 2px 5px rgba(40,24,8,.12);
  cursor:pointer;transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s;
  transform:rotate(var(--r,0deg));will-change:transform}
.gx-card:hover{transform:rotate(0deg) translateY(-4px) scale(1.025);z-index:6;
  box-shadow:0 26px 50px rgba(40,24,8,.28)}
.gx-card .gx-img{width:100%;display:block;border-radius:2px;background:#ece0c8;object-fit:cover}
.gx-cap{font-family:var(--hand);font-size:23px;line-height:1.06;color:#5a4326;text-align:center;
  padding:9px 6px 4px}
.gx-sub{font-family:var(--hand);font-size:16px;color:#9a7d52;text-align:center;padding:0 8px 14px;line-height:1.15}
.gx-tag{position:absolute;top:22px;left:-7px;font-family:var(--sans);font-weight:800;font-size:10.5px;
  letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--gold-deep);
  padding:4px 11px 4px 9px;border-radius:3px;box-shadow:0 4px 10px rgba(120,80,20,.35);
  transform:rotate(-3deg)}
.gx-tag::after{content:"";position:absolute;left:0;bottom:-5px;border:2.5px solid transparent;
  border-top-color:#9a6d18;border-right-color:#9a6d18}
/* washi tape (shared visual vocabulary with the home wheel) */
.gx-card .tape{position:absolute;top:-10px;left:50%;width:78px;height:23px;
  transform:translateX(-50%) rotate(-4deg);opacity:.82;pointer-events:none;border-radius:2px;
  box-shadow:0 2px 5px rgba(40,24,8,.16);mix-blend-mode:multiply}
.gx-card:nth-child(even) .tape{transform:translateX(-50%) rotate(5deg)}
.tape-0{background:#f7b8cf;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.55) 0 5px,transparent 5px 11px)}
.tape-1{background:#a9d6f2;background-image:radial-gradient(rgba(255,255,255,.65) 2px,transparent 2.6px);background-size:11px 11px}
.tape-2{background:#ffd98f;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.5) 0 4px,transparent 4px 9px),repeating-linear-gradient(90deg,rgba(180,120,20,.18) 0 4px,transparent 4px 9px)}
.tape-3{background:#bfe3c8;background-image:radial-gradient(rgba(60,120,80,.28) 1.4px,transparent 2px),radial-gradient(rgba(60,120,80,.2) 1.4px,transparent 2px);background-size:13px 13px,13px 13px;background-position:0 0,6px 6px}
.tape-4{background:#d9c3f3;background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,.5) 0 5px,transparent 5px 11px)}

/* staggered reveal on load */
.gx-card{opacity:0;transform:translateY(16px) rotate(var(--r,0deg))}
.gx-card.in{opacity:1;transform:rotate(var(--r,0deg));transition:opacity .5s ease,transform .5s ease}
.gx-card.in:hover{transform:rotate(0deg) translateY(-4px) scale(1.025)}

.gx-empty{text-align:center;color:var(--ink-soft);padding:60px 20px;font-size:16px}

@media(max-width:980px){
  .gx-wall{columns:3 220px}
  .gx-filters{top:60px}
}
@media(max-width:680px){
  .gx-wall{columns:2 150px;column-gap:16px}
  .gx-card{margin-bottom:20px;padding:9px 9px 0}
  .gx-cap{font-size:19px}
  .gx-sub{display:none}
}
@media(prefers-reduced-motion:reduce){
  .gx-card{transition:none}
  .gx-card.in{transition:none}
}