/* Register-overzicht: gestapelde mini-cards + klikbare kaarten + bromvlieg.
   Vult register.css aan (die zet body als gecentreerd grid voor losse kaarten). */

body.register-gallery { grid-auto-flow: row; gap: 80px; align-content: start; }

.gallery-head { text-align: center; max-width: 478px; margin: 6px auto 0; }
/* Titel in hetzelfde font/stijl als de subtitel (STOUTENBURGER ALMANAC), maar 1.7× zo groot */
.gallery-head h1 { font-family: var(--body); font-weight: 600; font-size: 22px; color: #9a8a6f; margin: 0;
  letter-spacing: .22em; text-transform: uppercase; }
.gallery-head p { font-family: var(--body); font-size: 13px; color: #6b6258; margin: 9px 0 0; letter-spacing: .22em; text-transform: uppercase; }

/* Flip-kaarten in het overzicht: vaste maat, subtiele hover-lift (flip via klik) */
.register-gallery .flip { width: 478px; transition: transform .28s cubic-bezier(.2,.7,.2,1); }
.register-gallery .flip:hover { transform: translateY(-6px); }
.register-gallery .colophon { padding-top: 14px; }
@media (prefers-reduced-motion: reduce) { .register-gallery .flip { transition: none; } .register-gallery .flip:hover { transform: none; } }

/* Mascotte — wordt door JS op een willekeurige kaart geplaatst (geen animatie) */
.bromvlieg { position: fixed; top: 0; left: 0; width: 48px; height: auto; z-index: 9999;
  pointer-events: none; opacity: 0;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
/* Achterkant-mascotte — áchter de kaart (kaart verbergt haar beentjes) */
.bromvlieg-back { position: fixed; top: 0; left: 0; width: 48px; height: auto;
  pointer-events: none; opacity: 0;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }