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

body.register-gallery { display:block; padding:0; background:#fbf8f5;
  --site-corner-accent:#000;
  --site-corner-bg:rgba(251,248,245,.20);
  --site-corner-filter:blur(5px) saturate(1.04);
  /* Het register is een SYS-deck met SBA-kaarten. Op deze voordeur spreekt het
     gedeelde vel daarom expliciet Stoutenburger-groen, niet systeembruin. */
  --vel-ink:#34452d; --vel-ink-rgb:52,69,45;
  --vel-dash:rgba(52,69,45,.40); --vel-secondary:rgba(52,69,45,.68); }

/* ── beeldbanner: één panorama uit de bestaande materiaalbeelden ─────────── */
.register-gallery .topbanner { position:relative; width:100%; aspect-ratio:3072/512;
  min-height:300px; overflow:hidden; }
.sb-banner-mosaic { position:absolute; inset:0; display:grid;
  grid-template-columns:repeat(5,1fr); background:#d8d1c3; }
.sb-banner-mosaic img { width:100%; height:100%; min-width:0; object-fit:cover;
  object-position:center; filter:saturate(.76) sepia(.10) contrast(.94); }
.sb-banner-mosaic img:nth-child(1) { object-position:50% 47%; }
.sb-banner-mosaic img:nth-child(2) { object-position:48% 48%; }
.sb-banner-mosaic img:nth-child(3) { object-position:52% 48%; }
.sb-banner-mosaic img:nth-child(4) { object-position:50% 46%; }
.sb-banner-mosaic img:nth-child(5) { object-position:50% 45%; }
.sb-banner-wash { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,rgba(251,248,245,.08),rgba(251,248,245,.02) 35% 65%,rgba(251,248,245,.08)); }
.register-gallery .book-wave { position:absolute; left:0; right:0; bottom:-1px;
  width:100%; height:clamp(28px,4vw,64px); display:block; z-index:4; pointer-events:none; }
.register-gallery .topbanner-title { position:absolute; inset:0 0 clamp(28px,4vw,64px) 0;
  z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:12px; }
.register-gallery .site-banner-title::before,
.register-gallery .site-banner-title::after { display:none; }
.sb-tb-compass { width:min(5.5vw,78px); height:min(5.5vw,78px); object-fit:contain;
  margin:0 auto 10px; }
.sb-tb-title { margin:0; font:600 clamp(20px,2.1vw,34px)/1 var(--serif);
  letter-spacing:.12em; text-transform:uppercase; color:#34452d; }
.sb-tb-curated { margin:8px 0 0; font:600 clamp(9px,.85vw,11px)/1 var(--body);
  letter-spacing:.3em; text-transform:uppercase; color:#4e6840; }
.sb-tb-rule { display:flex; align-items:center; justify-content:center; width:210px; margin:8px auto; }
.sb-tb-rule::before,.sb-tb-rule::after { content:""; flex:1; height:1px; }
.sb-tb-rule::before { background:linear-gradient(to left,rgba(78,104,64,.72),transparent); }
.sb-tb-rule::after { background:linear-gradient(to right,rgba(78,104,64,.72),transparent); }
.sb-tb-rule span { width:8px; height:8px; margin:0 12px; border:1.5px solid #4e6840;
  transform:rotate(45deg); }
.sb-tb-lede { margin:0; font:400 clamp(12px,1.2vw,15px)/1.55 var(--body); color:#34452d; }

.gallery-head { text-align:center; max-width:550px; margin:0 auto; padding:20px 20px 0; }
.gallery-head .dv-link { margin-top: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; }

.register-cards { display:flex; flex-direction:column; align-items:center; gap:80px;
  padding:52px 16px 80px; }

/* Flip-kaarten in het overzicht: vaste maat. De projectbrede hover-lift staat
   bij de gedeelde kaartbediening in card-tools.njk. */
.register-gallery .flip { width: 550px; }
.register-gallery .colophon { padding-top: 14px; }

@media (max-width:760px) {
  .register-gallery .book-wave { display:none; }
  .register-gallery .topbanner { aspect-ratio:auto; height:56vh; min-height:400px; }
  @supports (height:1svh) { .register-gallery .topbanner { height:56svh; } }
  .register-gallery .topbanner-title { inset:0; }
  .sb-banner-mosaic { grid-template-columns:repeat(3,1fr); }
  .sb-banner-mosaic img:nth-child(n+4) { display:none; }
  .sb-tb-compass { width:68px; height:68px; }
  .sb-tb-title { font-size:clamp(22px,7vw,30px); }
  .sb-tb-lede { font-size:15px; }
  .register-cards { gap:52px; padding-inline:12px; }
}

/* 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)); }