body { font-family: system-ui, sans-serif; line-height:1.4; margin:2rem; }
li   { margin:.5rem 0; }
#controls {
  margin: 1rem 0;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
:root{
  --clr-bg: #ffffff;
  --clr-text: #1b1b1e;
  --clr-muted:#5e8b7e;   /* sage */
  --clr-accent:#d74e09;  /* tomato */
  --radius: .5rem;
  }

#controls input,
#controls select {
  padding: 0.4em;
  font-size: 1rem;
}
    /* ───────────── CSS VARIABLES & PALLETE ───────────── */


    /* ───────────── RESET / BASE ───────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:system-ui,sans-serif;color:var(--clr-text);background:var(--clr-bg);line-height:1.5;}
a{color:var(--clr-accent);text-decoration:none;}
img{max-width:100%;display:block;}

    /* ───────────── LAYOUT ───────────── */
header{padding:.75rem 1rem;position:sticky;top:0;z-index:999;background:#fff;border-bottom:1px solid #e4e4e7;}
nav{max-width:1200px;margin:0 auto;display:flex;gap:1rem;flex-wrap:wrap;font-size:.95rem;}

.hero {
  position: relative;
  padding: clamp(2rem,5vw,4rem) 1rem 1.5rem 1rem;
  background:
    linear-gradient(rgba(30,40,40,0.54), rgba(0,0,0,0.54)),
    url('hero_image.png') center/cover no-repeat;
  color: #fff;
  text-align: center;
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.09);
}
.hero h1{
  font-size:clamp(2rem,5vw,2.8rem);
  margin-bottom:.7rem;
  letter-spacing:0.5px;
  font-weight:800;
  color:#fff;
  text-shadow:0 2px 16px rgba(0,0,0,0.10);
}
.hero-tagline {
  font-size:1.13em;
  color:#fff;
  font-weight:600;
  margin:0.4em 0 0.25em 0;
  letter-spacing:.1px;
  text-shadow:0 1px 12px rgba(0,0,0,0.10);
  opacity:.98;
}
.hero-help {
  color:#f7f7f8;
  font-size:0.97em;
  opacity:.92;
  margin-top:.2em;
  margin-bottom:0;
  text-shadow:0 1px 10px rgba(0,0,0,0.10);
}
@media (max-width: 600px) {
  .hero {
    padding: 1.2em 0 .7em 0;
  }
  .hero h1 { font-size:1.35em; }
  .hero-tagline { font-size:1em; }
}

    /* ───────────── FILTER BAR ───────────── */
.filter-bar{
  position:sticky;top:64px; /* header height */
  background:#f7f7f8;
  padding:.75rem 1rem;
  display:flex;gap:1rem;flex-wrap:wrap;align-items:center;
  border-bottom:1px solid #e4e4e7;
  z-index:998;
}
.filter-bar input,.filter-bar select{
  font-size:1rem;padding:.4em;border:1px solid #ccc;border-radius:var(--radius);
}

    /* ───────────── CARD GRID ───────────── */
.grid{
  max-width:1200px;margin:1.5rem auto;padding:0 1rem;
  display:grid;
  gap:clamp(.75rem,2vw,1.25rem);
  grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));
}
.card{
  background:#fff;border-radius:var(--radius);
  box-shadow:0 1px 3px rgb(0 0 0 / .08);
  padding:1rem;
  transition:transform .15s ease,box-shadow .15s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:0 4px 8px rgb(0 0 0 / .12);} 
.card h2{font-size:1.1rem;margin-bottom:.25rem;}
.card .meta{font-size:.9rem;color:var(--clr-muted);} 
.badge{display:inline-block;background:var(--clr-accent);color:#fff;font-size:.75rem;padding:.15em .5em;border-radius:999px;margin-left:.25rem;}

/* ───────────── MAP ───────────── */
#map-wrapper{max-width:1200px;margin:0 auto;padding:0 1rem;}
#map{height:320px;border-radius:var(--radius);overflow:hidden;margin-bottom:1.5rem;}

/* ───────────── MODAL ───────────── */
.modal {
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  background: rgba(0,0,0,0.36);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background: #fff;
  padding: 2rem 1.5rem 1.5rem 1.5rem;
  border-radius: var(--radius);
  box-shadow: 0 6px 24px rgb(0 0 0 / .12);
  max-width: 420px;
  width: 90vw;
  position: relative;
  animation: modal-in .24s cubic-bezier(.4,1.2,.4,1);
}
@keyframes modal-in {
  from { transform: translateY(50px) scale(.95); opacity: 0;}
  to { transform: translateY(0) scale(1); opacity: 1;}
}

#close-modal {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.6rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--clr-muted);
  transition: color .18s;
}
#close-modal:hover { color: var(--clr-accent); }

#modal-details h2 {
  margin-top: 0;
  margin-bottom: .5rem;
}
#modal-details p {
  margin-bottom: .35rem;
}
#modal-details .badge {
  margin-left: .3em;
}

/* Responsive adjustments */
@media(max-width:600px){
  header{position:static;}
  .filter-bar{top:0;}
}

/* ───────────── VENDOR HIGHLIGHT INVITE ───────────── */
.vendor-highlight-invite {
  margin-top: 1.5em;
  color: var(--clr-muted);
  font-size: 0.98em;
  text-align: center;
}
.vendor-highlight-invite a {
  color: var(--clr-accent);
  text-decoration: underline;
  font-weight: bold;
  transition: color 0.2s;
}
.vendor-highlight-invite a:hover {
  color: var(--clr-primary, #1b1b1e);
}