/* ------------------------------------------------------------
 * scan.css — warm-utility baseline.
 * Themes (css/themes/*.css) layer decoration over this only.
 * ------------------------------------------------------------ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,800&family=Inter:wght@400;500;600;700&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #F9F4EB;
  --card: #FFFFFF;
  --warm: #E8DBC4;
  --muted: #8A7560;
  --copper: #B66C45;
  --ink: #2D2620;
  --danger: #B0382A;
  --soft: #FDF8EE;
  --radius: 12px;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --hero-height: 24rem;
}

html, body { min-height: 100%; }

body {
  font-family: var(--font-body);
  background: linear-gradient(to bottom, #F9F4EB 0%, #F5EFE3 100%);
  color: var(--ink);
  line-height: 1.55;
  display: grid;
  place-items: start center;
  padding: 1.25rem;
  min-height: 100vh;
}

body.lost-mode { background: #fff5f5; }

.card {
  background: var(--card);
  border-radius: var(--radius);
  width: 100%;
  max-width: 32rem;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(45, 38, 32, 0.04),
    0 8px 36px rgba(45, 38, 32, 0.10);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--warm);
}

.brand {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-size: 1.05rem;
}

.template-tag {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--copper);
  text-transform: uppercase;
}

.hero {
  background: var(--danger);
  color: #fff;
  padding: 1rem 1.25rem;
  text-align: center;
}

.lost-banner { font-weight: 800; letter-spacing: 0.1em; font-size: 0.8rem; }
.lost-message { font-size: 0.95rem; margin-top: 0.25rem; }

main.body { padding: 1.25rem; }

.block { padding: 0.9rem 1.25rem; }
.block + .block { border-top: 1px solid var(--warm); }
.block:first-child { padding-top: 1.1rem; }
.block:last-child { padding-bottom: 1.1rem; }

.block-heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.85rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.block-paragraph {
  font-size: 1rem;
  color: var(--ink);
}

.block-image {
  margin: 0 -1.25rem 1.1rem;
  overflow: hidden;
}
.block-image figure { margin: 0; }
.block-image img {
  display: block;
  width: 100%;
  max-height: var(--hero-height);
  object-fit: cover;
  object-position: top center;
}
.block-image figcaption {
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
  padding: 0.4rem 1.25rem;
}

/* Flat facts — no card background, just hairlines from sibling blocks */
.block-facts dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.6rem 1.1rem;
  font-size: 0.85rem;
  line-height: 1.5;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
}
.block-facts dt {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--copper);
}
.block-facts dd { margin: 0; color: var(--ink); word-break: break-word; }

.block-contact a,
.block-link a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  background: var(--ink);
  color: #fff;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.block-contact a:hover,
.block-link a:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(45, 38, 32, 0.18);
}

.block-link a {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--warm);
}

/* Flat location — no card background */
.block-location {
  background: transparent;
  border: 0;
  padding: 0;
}
.block-location .loc-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  margin-bottom: 0.1rem;
}
.block-location .loc-address {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.1rem;
}
.block-location a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--copper);
  margin-top: 0.55rem;
  text-decoration: none;
}

.block-icon {
  display: inline-grid;
  place-items: center;
  width: 1.5rem; height: 1.5rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  font-size: 0.85rem;
}

.actions {
  border-top: 1px solid var(--warm);
  padding: 1.25rem;
  display: grid;
  gap: 0.75rem;
  background: var(--soft);
}

button.primary,
a.primary,
button.secondary {
  cursor: pointer;
  border: 0;
  border-radius: 10px;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  text-align: center;
  text-decoration: none;
  display: block;
  width: 100%;
  box-sizing: border-box;
}

button.primary,
a.primary { background: var(--copper); color: #fff; }
button.primary:hover,
a.primary:hover { opacity: 0.88; }
button.primary:disabled { opacity: 0.5; cursor: progress; }

button.secondary {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--warm);
}

details {
  border: 1px solid var(--warm);
  border-radius: 10px;
  background: var(--card);
  overflow: hidden;
}
details summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.85rem 1rem;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
details summary::before { content: '›'; font-size: 1.1rem; color: var(--copper); transition: transform 0.2s; display: inline-block; }
details[open] summary::before { transform: rotate(90deg); }
details summary::-webkit-details-marker { display: none; }

.contact-form { display: grid; gap: 0.75rem; margin-top: 0.75rem; }
.contact-form label { display: grid; gap: 0.25rem; font-size: 0.9rem; color: var(--muted); }
.contact-form input,
.contact-form textarea {
  font: inherit;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--warm);
  border-radius: 8px;
  width: 100%;
  resize: vertical;
}

.status { font-size: 0.9rem; color: var(--muted); }
.status.ok { color: #2D5F4D; }
.status.err { color: var(--danger); }

/* Guest photo upload section */
/* Guestbook section */
.guestbook-section {
  border-top: 1px solid var(--warm);
  padding: 1.25rem;
  background: var(--soft);
  display: grid;
  gap: 0.9rem;
}
.guestbook-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--ink);
  margin: 0;
}
.guestbook-entries {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.guestbook-empty {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
}
.gb-entry {
  background: var(--card);
  border: 1px solid var(--warm);
  border-radius: var(--radius);
  padding: 0.65rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.gb-entry--new {
  border-color: var(--copper);
}
.gb-message {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
}
.gb-author {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}
.guestbook-form {
  display: grid;
  gap: 0.6rem;
}
.guestbook-form label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--ink);
}
.guestbook-form input,
.guestbook-form textarea {
  padding: 0.5rem 0.7rem;
  border: 1.5px solid var(--warm);
  border-radius: var(--radius);
  background: var(--card);
  font-size: 0.9rem;
  color: var(--ink);
  font-family: inherit;
  resize: vertical;
}
.guestbook-form input:focus,
.guestbook-form textarea:focus {
  outline: none;
  border-color: var(--copper);
}

.guest-photos {
  border-top: 1px solid var(--warm);
  padding: 1.25rem;
  background: var(--soft);
  display: grid;
  gap: 0.75rem;
}
.guest-photos-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--ink);
}
.gp-drop {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--warm);
  border-radius: var(--radius);
  padding: 1.5rem 1rem;
  cursor: pointer;
  transition: border-color 0.15s;
}
.gp-drop:hover { border-color: var(--copper); }
.gp-pick-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 500;
}
.gp-pick-icon { font-size: 1.75rem; }
.gp-queue {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.gp-thumb {
  width: 60px;
  height: 60px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid var(--warm);
}
.gp-form {
  display: grid;
  gap: 0.6rem;
}
.gp-label {
  display: grid;
  gap: 0.2rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.gp-label input {
  font: inherit;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--warm);
  border-radius: 8px;
  width: 100%;
}

.footer {
  padding: 1rem 1.25rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.8rem;
  border-top: 1px solid var(--warm);
}

.footer a { color: var(--copper); text-decoration: none; }

@keyframes block-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.block {
  animation: block-fade-in 0.4s ease both;
  animation-delay: calc(var(--block-index, 0) * 60ms);
}

@media (prefers-reduced-motion: reduce) {
  .block { animation: none; }
  .block-contact a,
  .block-link a,
  .block-location a { transition: none; }
}

/* Gallery carousel — horizontal swipe + dots */
.block-gallery {
  margin: 0 -1.25rem;  /* bleed to card edges, matching .block-image */
  padding: 0;
  overflow: hidden;
}
.gal-rail {
  display: flex;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.gal-rail::-webkit-scrollbar { display: none; }
.gal-slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  position: relative;
  aspect-ratio: 4/3;
}
.gal-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.gal-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.6rem 0.8rem;
  background: linear-gradient(transparent, rgba(0,0,0,0.6));
  color: white;
  font-size: 0.85rem;
}
.gal-dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 1.25rem 0.6rem;
}
.gal-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--muted);
  opacity: 0.4;
  transition: width 0.2s ease, opacity 0.2s ease, background 0.2s ease;
  display: block;
  text-indent: -9999px;
  cursor: pointer;
}
.gal-dot--active {
  opacity: 1;
  width: 26px;
  background: var(--copper);
}

/* Lightbox */
.gal-lb {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.gal-lb.is-open { display: flex; }

.gal-lb-inner {
  position: relative;
  max-width: min(90vw, 640px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gal-lb-img {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 6px;
  display: block;
}
.gal-lb-caption {
  margin-top: 0.5rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  text-align: center;
}

.gal-lb-close,
.gal-lb-prev,
.gal-lb-next {
  position: fixed;
  background: rgba(255, 255, 255, 0.15);
  border: 0;
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.gal-lb-close { top: 1rem; right: 1rem; }
.gal-lb-prev  { top: 50%; left: 0.75rem; transform: translateY(-50%); }
.gal-lb-next  { top: 50%; right: 0.75rem; transform: translateY(-50%); }

.gal-lb-close:hover,
.gal-lb-prev:hover,
.gal-lb-next:hover { background: rgba(255, 255, 255, 0.28); }

/* Schedule block */
.block-schedule .sched-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  margin-bottom: 0.7rem;
}
.sched-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sched-item {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0 0.75rem;
  padding: 0.6rem 0;
  border-left: 2px solid var(--warm);
  padding-left: 0.85rem;
  position: relative;
}
.sched-item::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 0.85rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--copper);
}
.sched-time {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--copper);
  padding-top: 0.1rem;
  white-space: nowrap;
}
.sched-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.sched-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}
.sched-desc {
  font-size: 0.78rem;
  color: var(--muted);
}

/* Socials block */
.block-socials { background: transparent; border: 0; padding: 0.25rem 0; }
.socials-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}
.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.social-btn:hover { transform: translateY(-2px); opacity: 0.85; }
.social-btn .social-text { font-size: 0.7rem; font-weight: 700; }
.social-btn.social-instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.social-btn.social-tiktok   { background: #010101; }
.social-btn.social-facebook { background: #1877f2; }
.social-btn.social-twitter  { background: #000; }
.social-btn.social-youtube  { background: #ff0000; }
.social-btn.social-linkedin { background: #0a66c2; }
.social-btn.social-spotify  { background: #1db954; }

/* Video block */
.block-video { padding: 0; overflow: hidden; }
.video-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  border-radius: var(--radius);
  overflow: hidden;
}
.video-wrap iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}
.video-caption {
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
  margin-top: 0.5rem;
  padding: 0 0.5rem;
}

/* Button (CTA) block */
.block-button { background: transparent; border: 0; padding: 0.25rem 0; }
.cta-btn {
  display: block;
  width: 100%;
  padding: 1rem 1.5rem;
  border-radius: var(--radius);
  background: var(--copper);
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(45, 38, 32, 0.22);
}

/* Separator block */
.block-separator { background: transparent; border: 0; padding: 0.25rem 0; }
.separator-line {
  border: none;
  border-top: 1px solid var(--warm);
  margin: 0.5rem 0;
}

/* ---- Decorative background patterns ---- */
/* Uses body::before with mask-image + background-color: var(--copper) so the
   pattern color always matches the active theme without hardcoding hex values.
   body { isolation: isolate } creates a stacking context so that z-index: -1
   on ::before puts the pattern behind all body content (card, sections) while
   still showing above the body gradient. */

html body.bg-paws,
html body.bg-hearts,
html body.bg-rings,
html body.bg-cross,
html body.bg-balloons,
html body.bg-confetti,
html body.bg-stars,
html body.bg-flowers,
html body.bg-champagne,
html body.bg-cake,
html body.bg-baby,
html body.bg-ihs,
html body.bg-penis,
html body.bg-diamond,
html body.bg-crown,
html body.bg-notes,
html body.bg-kiss,
html body.bg-bow,
html body.bg-dove,
html body.bg-suitcase,
.bg-prev {
  isolation: isolate;
}

html body.bg-paws::before,
html body.bg-hearts::before,
html body.bg-rings::before,
html body.bg-cross::before,
html body.bg-balloons::before,
html body.bg-confetti::before,
html body.bg-stars::before,
html body.bg-flowers::before,
html body.bg-champagne::before,
html body.bg-cake::before,
html body.bg-baby::before,
html body.bg-ihs::before,
html body.bg-penis::before,
html body.bg-diamond::before,
html body.bg-crown::before,
html body.bg-notes::before,
html body.bg-kiss::before,
html body.bg-bow::before,
html body.bg-dove::before,
html body.bg-suitcase::before,
.bg-prev[class*=" bg-"]::before,
.bg-prev[class^="bg-"]::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--copper);
  opacity: 0.09;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
}

html body.bg-paws::before, .bg-prev.bg-paws::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cellipse cx='40' cy='52' rx='9' ry='10' fill='black'/%3E%3Ccircle cx='23' cy='38' r='5' fill='black'/%3E%3Ccircle cx='34' cy='31' r='5' fill='black'/%3E%3Ccircle cx='46' cy='31' r='5' fill='black'/%3E%3Ccircle cx='57' cy='38' r='5' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cellipse cx='40' cy='52' rx='9' ry='10' fill='black'/%3E%3Ccircle cx='23' cy='38' r='5' fill='black'/%3E%3Ccircle cx='34' cy='31' r='5' fill='black'/%3E%3Ccircle cx='46' cy='31' r='5' fill='black'/%3E%3Ccircle cx='57' cy='38' r='5' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 80px 80px;
  mask-size: 80px 80px;
}

html body.bg-hearts::before, .bg-prev.bg-hearts::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 46C30 46 12 34 12 21C12 14 18 9 24 9C27 9 30 12 30 12C30 12 33 9 36 9C42 9 48 14 48 21C48 34 30 46 30 46Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 46C30 46 12 34 12 21C12 14 18 9 24 9C27 9 30 12 30 12C30 12 33 9 36 9C42 9 48 14 48 21C48 34 30 46 30 46Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 60px 60px;
  mask-size: 60px 60px;
}

html body.bg-rings::before, .bg-prev.bg-rings::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='50'%3E%3Ccircle cx='22' cy='25' r='13' fill='none' stroke='black' stroke-width='3'/%3E%3Ccircle cx='42' cy='25' r='13' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='50'%3E%3Ccircle cx='22' cy='25' r='13' fill='none' stroke='black' stroke-width='3'/%3E%3Ccircle cx='42' cy='25' r='13' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E");
  -webkit-mask-size: 70px 50px;
  mask-size: 70px 50px;
}

html body.bg-cross::before, .bg-prev.bg-cross::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='80'%3E%3Crect x='27' y='10' width='6' height='40' rx='1' fill='black'/%3E%3Crect x='15' y='24' width='30' height='6' rx='1' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='80'%3E%3Crect x='27' y='10' width='6' height='40' rx='1' fill='black'/%3E%3Crect x='15' y='24' width='30' height='6' rx='1' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 60px 80px;
  mask-size: 60px 80px;
}

html body.bg-balloons::before, .bg-prev.bg-balloons::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='90'%3E%3Ccircle cx='30' cy='30' r='20' fill='black'/%3E%3Cpolygon points='30,50 27,57 33,57' fill='black'/%3E%3Cpath d='M30 57 Q38 70 26 82' stroke='black' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='90'%3E%3Ccircle cx='30' cy='30' r='20' fill='black'/%3E%3Cpolygon points='30,50 27,57 33,57' fill='black'/%3E%3Cpath d='M30 57 Q38 70 26 82' stroke='black' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  -webkit-mask-size: 60px 90px;
  mask-size: 60px 90px;
}

html body.bg-confetti::before, .bg-prev.bg-confetti::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ccircle cx='10' cy='12' r='4' fill='black'/%3E%3Crect x='38' y='6' width='6' height='6' transform='rotate(20 41 9)' fill='black'/%3E%3Ccircle cx='70' cy='22' r='4' fill='black'/%3E%3Crect x='6' y='55' width='5' height='5' transform='rotate(-15 9 58)' fill='black'/%3E%3Ccircle cx='52' cy='60' r='4' fill='black'/%3E%3Crect x='80' y='75' width='6' height='6' transform='rotate(30 83 78)' fill='black'/%3E%3Ccircle cx='22' cy='85' r='4' fill='black'/%3E%3Crect x='60' y='40' width='5' height='5' transform='rotate(45 63 43)' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ccircle cx='10' cy='12' r='4' fill='black'/%3E%3Crect x='38' y='6' width='6' height='6' transform='rotate(20 41 9)' fill='black'/%3E%3Ccircle cx='70' cy='22' r='4' fill='black'/%3E%3Crect x='6' y='55' width='5' height='5' transform='rotate(-15 9 58)' fill='black'/%3E%3Ccircle cx='52' cy='60' r='4' fill='black'/%3E%3Crect x='80' y='75' width='6' height='6' transform='rotate(30 83 78)' fill='black'/%3E%3Ccircle cx='22' cy='85' r='4' fill='black'/%3E%3Crect x='60' y='40' width='5' height='5' transform='rotate(45 63 43)' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 100px 100px;
  mask-size: 100px 100px;
}

html body.bg-stars::before, .bg-prev.bg-stars::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpolygon points='30,6 36,22 52,22 40,33 44,49 30,39 16,49 20,33 8,22 24,22' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpolygon points='30,6 36,22 52,22 40,33 44,49 30,39 16,49 20,33 8,22 24,22' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 60px 60px;
  mask-size: 60px 60px;
}

html body.bg-flowers::before, .bg-prev.bg-flowers::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70'%3E%3Cellipse cx='35' cy='20' rx='6' ry='11' fill='black'/%3E%3Cellipse cx='35' cy='20' rx='6' ry='11' transform='rotate(72 35 35)' fill='black'/%3E%3Cellipse cx='35' cy='20' rx='6' ry='11' transform='rotate(144 35 35)' fill='black'/%3E%3Cellipse cx='35' cy='20' rx='6' ry='11' transform='rotate(216 35 35)' fill='black'/%3E%3Cellipse cx='35' cy='20' rx='6' ry='11' transform='rotate(288 35 35)' fill='black'/%3E%3Ccircle cx='35' cy='35' r='5' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70'%3E%3Cellipse cx='35' cy='20' rx='6' ry='11' fill='black'/%3E%3Cellipse cx='35' cy='20' rx='6' ry='11' transform='rotate(72 35 35)' fill='black'/%3E%3Cellipse cx='35' cy='20' rx='6' ry='11' transform='rotate(144 35 35)' fill='black'/%3E%3Cellipse cx='35' cy='20' rx='6' ry='11' transform='rotate(216 35 35)' fill='black'/%3E%3Cellipse cx='35' cy='20' rx='6' ry='11' transform='rotate(288 35 35)' fill='black'/%3E%3Ccircle cx='35' cy='35' r='5' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 70px 70px;
  mask-size: 70px 70px;
}

html body.bg-champagne::before, .bg-prev.bg-champagne::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='92'%3E %3Cpath d='M6,6 L46,6 Q42,50 29,54 L29,72 L34,72 L34,78 L18,78 L18,72 L23,72 L23,54 Q10,50 6,6 Z' fill='black'/%3E %3Ccircle cx='18' cy='28' r='2.5' fill='white'/%3E %3Ccircle cx='30' cy='16' r='2' fill='white'/%3E %3Ccircle cx='26' cy='38' r='2' fill='white'/%3E %3Ccircle cx='36' cy='30' r='1.5' fill='white'/%3E %3Ccircle cx='20' cy='44' r='1.5' fill='white'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='92'%3E %3Cpath d='M6,6 L46,6 Q42,50 29,54 L29,72 L34,72 L34,78 L18,78 L18,72 L23,72 L23,54 Q10,50 6,6 Z' fill='black'/%3E %3Ccircle cx='18' cy='28' r='2.5' fill='white'/%3E %3Ccircle cx='30' cy='16' r='2' fill='white'/%3E %3Ccircle cx='26' cy='38' r='2' fill='white'/%3E %3Ccircle cx='36' cy='30' r='1.5' fill='white'/%3E %3Ccircle cx='20' cy='44' r='1.5' fill='white'/%3E %3C/svg%3E");
  -webkit-mask-size: 52px 92px;
  mask-size: 52px 92px;
}

html body.bg-cake::before, .bg-prev.bg-cake::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='75'%3E%3Crect x='10' y='44' width='50' height='22' rx='3' fill='black'/%3E%3Crect x='16' y='28' width='38' height='17' rx='3' fill='black'/%3E%3Crect x='29' y='16' width='5' height='13' rx='2' fill='black'/%3E%3Cellipse cx='31' cy='13' rx='4' ry='6' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='75'%3E%3Crect x='10' y='44' width='50' height='22' rx='3' fill='black'/%3E%3Crect x='16' y='28' width='38' height='17' rx='3' fill='black'/%3E%3Crect x='29' y='16' width='5' height='13' rx='2' fill='black'/%3E%3Cellipse cx='31' cy='13' rx='4' ry='6' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 70px 75px;
  mask-size: 70px 75px;
}

html body.bg-baby::before, .bg-prev.bg-baby::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70'%3E%3Cellipse cx='35' cy='44' rx='11' ry='15' fill='black'/%3E%3Ccircle cx='22' cy='26' r='4' fill='black'/%3E%3Ccircle cx='29' cy='20' r='4' fill='black'/%3E%3Ccircle cx='37' cy='18' r='4' fill='black'/%3E%3Ccircle cx='45' cy='21' r='4' fill='black'/%3E%3Ccircle cx='50' cy='29' r='4' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70'%3E%3Cellipse cx='35' cy='44' rx='11' ry='15' fill='black'/%3E%3Ccircle cx='22' cy='26' r='4' fill='black'/%3E%3Ccircle cx='29' cy='20' r='4' fill='black'/%3E%3Ccircle cx='37' cy='18' r='4' fill='black'/%3E%3Ccircle cx='45' cy='21' r='4' fill='black'/%3E%3Ccircle cx='50' cy='29' r='4' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 70px 70px;
  mask-size: 70px 70px;
}

html body.bg-ihs::before, .bg-prev.bg-ihs::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70'%3E%3Ccircle cx='35' cy='35' r='9' fill='none' stroke='black' stroke-width='2.5'/%3E%3Crect x='33' y='4' width='4' height='16' rx='2' fill='black'/%3E%3Crect x='33' y='50' width='4' height='16' rx='2' fill='black'/%3E%3Crect x='4' y='33' width='16' height='4' rx='2' fill='black'/%3E%3Crect x='50' y='33' width='16' height='4' rx='2' fill='black'/%3E%3Crect x='49' y='9' width='4' height='13' rx='2' transform='rotate(45 51 15)' fill='black'/%3E%3Crect x='17' y='9' width='4' height='13' rx='2' transform='rotate(-45 19 15)' fill='black'/%3E%3Crect x='49' y='48' width='4' height='13' rx='2' transform='rotate(-45 51 55)' fill='black'/%3E%3Crect x='17' y='48' width='4' height='13' rx='2' transform='rotate(45 19 55)' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70'%3E%3Ccircle cx='35' cy='35' r='9' fill='none' stroke='black' stroke-width='2.5'/%3E%3Crect x='33' y='4' width='4' height='16' rx='2' fill='black'/%3E%3Crect x='33' y='50' width='4' height='16' rx='2' fill='black'/%3E%3Crect x='4' y='33' width='16' height='4' rx='2' fill='black'/%3E%3Crect x='50' y='33' width='16' height='4' rx='2' fill='black'/%3E%3Crect x='49' y='9' width='4' height='13' rx='2' transform='rotate(45 51 15)' fill='black'/%3E%3Crect x='17' y='9' width='4' height='13' rx='2' transform='rotate(-45 19 15)' fill='black'/%3E%3Crect x='49' y='48' width='4' height='13' rx='2' transform='rotate(-45 51 55)' fill='black'/%3E%3Crect x='17' y='48' width='4' height='13' rx='2' transform='rotate(45 19 55)' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 70px 70px;
  mask-size: 70px 70px;
}

html body.bg-penis::before, .bg-prev.bg-penis::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='92'%3E %3Crect x='18' y='42' width='16' height='42' rx='8' fill='black'/%3E %3Cpath d='M12,44 Q11,18 26,14 Q41,18 40,44 Q34,50 26,50 Q18,50 12,44 Z' fill='black'/%3E %3Cellipse cx='26' cy='46' rx='13' ry='4' fill='white'/%3E %3Cellipse cx='12' cy='68' rx='10' ry='13' fill='black'/%3E %3Cellipse cx='40' cy='68' rx='10' ry='13' fill='black'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='92'%3E %3Crect x='18' y='42' width='16' height='42' rx='8' fill='black'/%3E %3Cpath d='M12,44 Q11,18 26,14 Q41,18 40,44 Q34,50 26,50 Q18,50 12,44 Z' fill='black'/%3E %3Cellipse cx='26' cy='46' rx='13' ry='4' fill='white'/%3E %3Cellipse cx='12' cy='68' rx='10' ry='13' fill='black'/%3E %3Cellipse cx='40' cy='68' rx='10' ry='13' fill='black'/%3E %3C/svg%3E");
  -webkit-mask-size: 52px 92px;
  mask-size: 52px 92px;
}

html body.bg-diamond::before, .bg-prev.bg-diamond::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54'%3E%3Cpolygon points='27,4 50,22 27,50 4,22' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54'%3E%3Cpolygon points='27,4 50,22 27,50 4,22' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 54px 54px;
  mask-size: 54px 54px;
}

html body.bg-crown::before, .bg-prev.bg-crown::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='55'%3E%3Cpath d='M5,42 L12,16 L26,32 L35,8 L44,32 L58,16 L65,42 Z' fill='black'/%3E%3Crect x='5' y='42' width='60' height='9' rx='2' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='55'%3E%3Cpath d='M5,42 L12,16 L26,32 L35,8 L44,32 L58,16 L65,42 Z' fill='black'/%3E%3Crect x='5' y='42' width='60' height='9' rx='2' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 70px 55px;
  mask-size: 70px 55px;
}

html body.bg-notes::before, .bg-prev.bg-notes::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='80'%3E%3Crect x='34' y='12' width='4' height='36' fill='black'/%3E%3Cellipse cx='28' cy='50' rx='10' ry='7' transform='rotate(-10 28 50)' fill='black'/%3E%3Crect x='38' y='12' width='18' height='4' fill='black'/%3E%3Crect x='38' y='24' width='18' height='4' fill='black'/%3E%3Crect x='56' y='12' width='4' height='16' fill='black'/%3E%3Cellipse cx='50' cy='42' rx='10' ry='7' transform='rotate(-10 50 42)' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='80'%3E%3Crect x='34' y='12' width='4' height='36' fill='black'/%3E%3Cellipse cx='28' cy='50' rx='10' ry='7' transform='rotate(-10 28 50)' fill='black'/%3E%3Crect x='38' y='12' width='18' height='4' fill='black'/%3E%3Crect x='38' y='24' width='18' height='4' fill='black'/%3E%3Crect x='56' y='12' width='4' height='16' fill='black'/%3E%3Cellipse cx='50' cy='42' rx='10' ry='7' transform='rotate(-10 50 42)' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 70px 80px;
  mask-size: 70px 80px;
}

html body.bg-kiss::before, .bg-prev.bg-kiss::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='74' height='56'%3E %3Cpath d='M8,26 C10,10 20,10 28,18 C32,12 42,12 46,18 C54,10 64,10 66,26 C54,34 20,34 8,26 Z' fill='black'/%3E %3Cpath d='M8,26 C14,44 26,52 37,52 C48,52 60,44 66,26 C54,34 20,34 8,26 Z' fill='black'/%3E %3Cellipse cx='37' cy='42' rx='12' ry='5' fill='white'/%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='74' height='56'%3E %3Cpath d='M8,26 C10,10 20,10 28,18 C32,12 42,12 46,18 C54,10 64,10 66,26 C54,34 20,34 8,26 Z' fill='black'/%3E %3Cpath d='M8,26 C14,44 26,52 37,52 C48,52 60,44 66,26 C54,34 20,34 8,26 Z' fill='black'/%3E %3Cellipse cx='37' cy='42' rx='12' ry='5' fill='white'/%3E %3C/svg%3E");
  -webkit-mask-size: 74px 56px;
  mask-size: 74px 56px;
}

html body.bg-bow::before, .bg-prev.bg-bow::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='50'%3E%3Cellipse cx='20' cy='25' rx='16' ry='11' fill='black'/%3E%3Cellipse cx='50' cy='25' rx='16' ry='11' fill='black'/%3E%3Ccircle cx='35' cy='25' r='6' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='50'%3E%3Cellipse cx='20' cy='25' rx='16' ry='11' fill='black'/%3E%3Cellipse cx='50' cy='25' rx='16' ry='11' fill='black'/%3E%3Ccircle cx='35' cy='25' r='6' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 70px 50px;
  mask-size: 70px 50px;
}

html body.bg-dove::before, .bg-prev.bg-dove::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='60'%3E%3Cellipse cx='38' cy='35' rx='20' ry='10' fill='black'/%3E%3Cellipse cx='22' cy='29' rx='12' ry='6' fill='black' transform='rotate(-25 22 29)'/%3E%3Cellipse cx='54' cy='29' rx='12' ry='6' fill='black' transform='rotate(25 54 29)'/%3E%3Ccircle cx='52' cy='27' r='6' fill='black'/%3E%3Cpolygon points='58,25 68,20 60,30' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='60'%3E%3Cellipse cx='38' cy='35' rx='20' ry='10' fill='black'/%3E%3Cellipse cx='22' cy='29' rx='12' ry='6' fill='black' transform='rotate(-25 22 29)'/%3E%3Cellipse cx='54' cy='29' rx='12' ry='6' fill='black' transform='rotate(25 54 29)'/%3E%3Ccircle cx='52' cy='27' r='6' fill='black'/%3E%3Cpolygon points='58,25 68,20 60,30' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 80px 60px;
  mask-size: 80px 60px;
}

html body.bg-suitcase::before,
.bg-prev[class*=" bg-"]::before,
.bg-prev[class^="bg-"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='70'%3E%3Crect x='8' y='24' width='48' height='36' rx='5' fill='black'/%3E%3Crect x='22' y='13' width='20' height='13' rx='3' fill='black'/%3E%3Crect x='26' y='17' width='12' height='9' rx='2' fill='white'/%3E%3Crect x='6' y='38' width='52' height='4' fill='white'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='70'%3E%3Crect x='8' y='24' width='48' height='36' rx='5' fill='black'/%3E%3Crect x='22' y='13' width='20' height='13' rx='3' fill='black'/%3E%3Crect x='26' y='17' width='12' height='9' rx='2' fill='white'/%3E%3Crect x='6' y='38' width='52' height='4' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-size: 64px 70px;
  mask-size: 64px 70px;
}