:root { color-scheme: light dark; }
body { font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
       max-width: 960px; margin: 2rem auto; padding: 0 1rem; }
h1, h2, h3 { line-height: 1.2; }
a { color: #0f6fdc; text-decoration: none; }
a:hover { text-decoration: underline; }

nav { margin-bottom: 1.5rem; display: flex; gap: 1rem;
      align-items: center; flex-wrap: wrap; font-size: 0.9rem; }
nav .home { opacity: 0.8; }
nav form { flex: 1; min-width: 240px; }
nav input[type=search] { width: 100%; padding: 0.4rem 0.6rem;
                         border: 1px solid #ccc6; border-radius: 6px;
                         font: inherit; background: transparent;
                         color: inherit; }

.filter-bar { display: flex; flex-wrap: wrap; gap: 0.4rem;
              align-items: center; margin: 0 0 1.5rem; font-size: 0.85rem; }
.filter-bar .label { opacity: 0.6; margin-right: 0.2rem; }
.filter-bar .pill { padding: 4px 10px; border-radius: 999px;
                    border: 1px solid #ccc6; text-decoration: none;
                    color: inherit; cursor: pointer; }
.filter-bar .pill:hover { background: #0f6fdc11; text-decoration: none; }
.filter-bar .pill.active { background: #0f6fdc; border-color: #0f6fdc;
                           color: white; }
.filter-bar .group { display: flex; gap: 0.3rem; align-items: center; }
.filter-bar .sep { width: 1px; height: 1.4em; background: #ccc6;
                   margin: 0 0.4rem; }

.park { margin: 2rem 0; }
.venues { list-style: none; padding: 0; display: grid;
          grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
          gap: 1rem; }
.venue-card { border: 1px solid #ccc4; border-radius: 8px; overflow: hidden; }
.venue-card a { color: inherit; display: block; }
.venue-card img { width: 100%; height: 140px; object-fit: cover;
                  display: block; background: #ddd2; }
.venue-card .body { padding: 0.75rem 1rem; }
.venue-card h3 { margin: 0 0 0.25rem; font-size: 1.05rem; }
.meta { font-size: 0.8rem; opacity: 0.75; }
.badges { margin-top: 0.4rem; font-size: 0.75rem; }
.badge { display: inline-block; padding: 2px 6px; border-radius: 4px;
         background: #0f6fdc22; color: #0a4d99; margin-right: 4px; }

.menu-group { margin: 1.25rem 0 1.5rem; }
.menu-group h3 { margin-bottom: 0.4rem; border-bottom: 1px solid #ccc4;
                 padding-bottom: 0.2rem; }
.item { margin: 0.6rem 0; }
.item .title { font-weight: 600; }
.item .price { float: right; opacity: 0.8; font-variant-numeric: tabular-nums; }
.item .desc { font-size: 0.9rem; opacity: 0.85; clear: both; }

.hero { width: 100%; max-height: 320px; object-fit: cover;
        border-radius: 8px; margin: 1rem 0; }

.result-section { margin: 1.5rem 0; }
.result-section h2 { font-size: 1.1rem; opacity: 0.85;
                     border-bottom: 1px solid #ccc4; padding-bottom: 0.2rem; }
.item-result { padding: 0.6rem 0; border-bottom: 1px dashed #ccc4; }
.item-result .where { font-size: 0.85rem; opacity: 0.7; }
.empty { opacity: 0.6; font-style: italic; padding: 1rem 0; }
.loading { opacity: 0.6; }