/* ============================================================
   DECORATIVE LAYERS + DOODLES
   ------------------------------------------------------------
   - Background scribbles
   - Handwritten overlays
   - Vendor cards
============================================================ */

.bg-layers .scribbles {
  position: absolute;
  inset: -4vh -4vw;
  will-change: transform, opacity;
  background-image:
    /* journal lines */
    repeating-linear-gradient(
      177deg,
      rgba(90,50,20,.15) 0px,
      rgba(90,50,20,.15) 2px,
      transparent 2px,
      transparent 50px
    ),
    /* scribbly arcs */
    radial-gradient(ellipse 40px 12px at 20% 30%, rgba(90,50,20,.12) 25%, transparent 30%),
    radial-gradient(ellipse 30px 10px at 70% 65%, rgba(90,50,20,.1) 25%, transparent 30%),
    /* cross-hatch clusters */
    repeating-linear-gradient(
      45deg,
      rgba(90,50,20,.08) 0 2px,
      transparent 2px 12px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(90,50,20,.08) 0 2px,
      transparent 2px 12px
    );
  background-size: 
    100% 60px,
    280px 280px,
    320px 320px,
    180px 180px,
    220px 220px;
  opacity: 0.28;
  mix-blend-mode: multiply;
  z-index: 2;
  pointer-events: none;
}

/* Handwritten doodles */
.note-doodle {
  position: absolute;
  z-index: 15;
  max-width: 140px;
  pointer-events: none;
  opacity: 0.95;
  transform-origin: center;
}
.spotlight-doodle { top: 575px; left: 100%; transform: rotate(-16deg); }
.about-doodle     { bottom: -225px; right: 100%; transform: rotate(-3deg); }
.map-doodle       { top: 3250px; right: -20%; transform: rotate(8deg); }

/* Vendor cards */
.vendor-card {
  text-align: center;
  padding: 18px;
}
.vendor-card .photo.placeholder {
  width: 100%; height: 120px;
  display: flex; justify-content: center; align-items: center;
  font-family: "Fraunces", serif;
  font-size: 20px; font-weight: 700;
  color: var(--muted);
  border-radius: var(--radius-md);
  background: var(--paper-alt);
  margin-bottom: 12px;
  border: 1px dashed var(--line);
}
