/* ================================================================
   Lid Life Event Finder v2 — Stylesheet
   Palette : Red · Ink · Bone · Steel
   Fonts   : Anton (display) · Barlow Condensed (body) · JetBrains Mono (meta)
   Radii   : 0 everywhere (square corners by design)
   Shadows : none except map popup
   ================================================================ */

/* ── Variables ─────────────────────────────────────────────────── */
:root {
  --ll-red:     #D6202A;
  --ll-red-dk:  #A0141C;
  --ll-ink:     #0E0E10;
  --ll-steel:   #6B6E75;
  --ll-bone:    #F4F1EA;
  --ll-bone-2:  #EFECE5;
  --ll-bone-3:  #DCD8CF;
  --ll-hiviz:   #E8FF3A;
  --ll-border:  #E5E1D8;

  --f-display: "Anton",           "Impact",      sans-serif;
  --f-body:    "Barlow Condensed","Arial Narrow", Arial, sans-serif;
  --f-mono:    "JetBrains Mono",  "SF Mono",     Consolas, monospace;

  /* layout */
  --hdr-h:     60px;
  --cat-h:     46px;
  --tap:        44px;
}

/* ── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  background:  var(--ll-bone);
  color:       var(--ll-ink);
  font-family: var(--f-body);
  font-weight: 500;
  min-height:  100dvh;
  /* room for mobile nav */
  padding-bottom: 56px;
}

img { display: block; max-width: 100%; }
a   { color: inherit; }
button, select, input, textarea {
  font-family: inherit;
  font-size:   inherit;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── HEADER ─────────────────────────────────────────────────────── */
.site-header {
  position:   sticky;
  top:        0;
  z-index:    200;
  background: var(--ll-ink);
  height:     var(--hdr-h);
}

.hdr-inner {
  max-width:   1440px;
  margin:      0 auto;
  padding:     0 24px;
  height:      100%;
  display:     flex;
  align-items: center;
  gap:         20px;
}

/* Brand */
.hdr-brand {
  display:     flex;
  align-items: center;
  gap:         10px;
  text-decoration: none;
  flex-shrink: 0;
}
.hdr-logo { border-radius: 0; }
.brand-text {
  display:        flex;
  flex-direction: column;
  gap:            1px;
}
.brand-name {
  font-family:    var(--f-display);
  font-size:      20px;
  color:          var(--ll-bone);
  text-transform: uppercase;
  letter-spacing: -0.3px;
  line-height:    1;
}
.brand-sub {
  font-family:    var(--f-mono);
  font-size:      7px;
  color:          var(--ll-red);
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* Nav */
.hdr-nav {
  display:    flex;
  gap:        20px;
  flex:       1;
}
.hdr-nav-link {
  font-family:    var(--f-mono);
  font-size:      9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          rgba(244,241,234,0.5);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom:  2px solid transparent;
  transition:     color 0.12s, border-color 0.12s;
}
.hdr-nav-link:hover { color: var(--ll-bone); }
.hdr-nav-link.is-active {
  color:        var(--ll-bone);
  border-color: var(--ll-red);
}

/* Search bar */
.hdr-search {
  display:     flex;
  align-items: center;
  gap:         8px;
  background:  rgba(255,255,255,0.07);
  border:      1px solid rgba(255,255,255,0.12);
  padding:     0 10px;
  height:      36px;
  flex:        0 1 240px;
}
.hdr-search-ico {
  color:       rgba(244,241,234,0.4);
  width:       14px;
  height:      14px;
  flex-shrink: 0;
}
.hdr-search-inp {
  background:  none;
  border:      none;
  outline:     none;
  color:       var(--ll-bone);
  font-family: var(--f-body);
  font-size:   13px;
  width:       100%;
  min-width:   0;
}
.hdr-search-inp::placeholder { color: rgba(244,241,234,0.35); }
.hdr-locate-btn {
  background: none;
  border:     none;
  cursor:     pointer;
  color:      rgba(244,241,234,0.5);
  padding:    4px;
  display:    flex;
  align-items: center;
  flex-shrink: 0;
  transition: color 0.12s;
}
.hdr-locate-btn:hover { color: var(--ll-bone); }
.hdr-locate-btn svg  { width: 14px; height: 14px; }

/* Submit CTA */
.hdr-cta {
  font-family:    var(--f-mono);
  font-size:      11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background:     var(--ll-red);
  color:          var(--ll-bone);
  border:         none;
  padding:        0 16px;
  height:         36px;
  cursor:         pointer;
  white-space:    nowrap;
  flex-shrink:    0;
  transition:     background 0.12s;
}
.hdr-cta:hover { background: var(--ll-red-dk); }

/* Avatar placeholder */
.hdr-avatar {
  width:         32px;
  height:        32px;
  border-radius: 50%;
  background:    rgba(255,255,255,0.15);
  flex-shrink:   0;
}

/* ── CATEGORY FILTER BAR ────────────────────────────────────────── */
.cat-bar {
  background:  var(--ll-ink);
  border-top:  1px solid rgba(255,255,255,0.07);
  height:      var(--cat-h);
  position:    sticky;
  top:         var(--hdr-h);
  z-index:     190;
}

.cat-bar-inner {
  max-width:   1440px;
  margin:      0 auto;
  padding:     0 24px;
  height:      100%;
  display:     flex;
  align-items: center;
}

.cat-pills {
  display:      flex;
  gap:          6px;
  overflow-x:   auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding:      2px 0;
}
.cat-pills::-webkit-scrollbar { display: none; }

.cat-pill {
  font-family:    var(--f-mono);
  font-size:      11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding:        6px 14px;
  background:     transparent;
  color:          rgba(244,241,234,0.55);
  border:         1px solid rgba(255,255,255,0.14);
  cursor:         pointer;
  white-space:    nowrap;
  min-height:     30px;
  display:        inline-flex;
  align-items:    center;
  border-radius:  0;
  transition:     background 0.12s, color 0.12s, border-color 0.12s;
}
.cat-pill:hover {
  color:        var(--ll-bone);
  border-color: rgba(255,255,255,0.3);
}
.cat-pill.active {
  background:   var(--ll-red);
  border-color: var(--ll-red);
  color:        var(--ll-bone);
}

/* ── SUB-FILTERS ────────────────────────────────────────────────── */
.sub-filters {
  background:   var(--ll-bone-2);
  border-bottom: 1px solid var(--ll-border);
}

.sub-filters-inner {
  max-width:   1440px;
  margin:      0 auto;
  padding:     10px 24px;
  display:     flex;
  flex-wrap:   wrap;
  gap:         10px 24px;
  align-items: center;
}

/* Date chips */
.date-chips {
  display:    flex;
  flex-wrap:  wrap;
  gap:        5px;
}

.chip {
  font-family:    var(--f-mono);
  font-size:      11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding:        5px 10px;
  background:     transparent;
  color:          var(--ll-steel);
  border:         1px solid var(--ll-border);
  cursor:         pointer;
  border-radius:  0;
  white-space:    nowrap;
  transition:     background 0.12s, color 0.12s, border-color 0.12s;
}
.chip:hover {
  color:        var(--ll-ink);
  border-color: var(--ll-ink);
}
.chip.active {
  background:   var(--ll-ink);
  color:        var(--ll-bone);
  border-color: var(--ll-ink);
}

/* Location meta (radius + clear) */
.loc-group { display: flex; flex-direction: column; gap: 4px; }

.radius-row {
  display:     flex;
  align-items: center;
  gap:         10px;
  font-size:   12px;
}
.radius-row input[type="range"] {
  accent-color: var(--ll-red);
  width:        100px;
}
.radius-val {
  font-family:    var(--f-mono);
  font-size:      9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          var(--ll-ink);
  min-width:      34px;
}
.btn-clear-loc {
  font-family:    var(--f-mono);
  font-size:      9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  background:     none;
  border:         none;
  color:          var(--ll-red);
  cursor:         pointer;
  padding:        0;
  text-decoration: underline;
}
.loc-msg {
  font-family: var(--f-mono);
  font-size:   10px;
  min-height:  14px;
  color:       var(--ll-steel);
}
.loc-msg.info  { color: var(--ll-ink); }
.loc-msg.error { color: var(--ll-red); }

/* ── RESULTS BAR ────────────────────────────────────────────────── */
.results-bar {
  border-bottom: 2px solid var(--ll-ink);
}
.results-bar-inner {
  max-width:      1440px;
  margin:         0 auto;
  padding:        28px 24px 20px;
  display:        flex;
  align-items:    flex-end;
  justify-content: space-between;
  gap:            16px;
  flex-wrap:      wrap;
}

.results-eyebrow {
  font-family:    var(--f-mono);
  font-size:      9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          var(--ll-red);
  margin-bottom:  6px;
}
.results-heading {
  font-family:    var(--f-display);
  font-size:      clamp(28px, 4vw, 48px);
  text-transform: uppercase;
  letter-spacing: -0.5px;
  color:          var(--ll-ink);
  line-height:    1;
}

.view-controls {
  display:     flex;
  align-items: center;
  gap:         8px;
  flex-shrink: 0;
}

.view-btn {
  font-family:    var(--f-mono);
  font-size:      11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding:        9px 16px;
  background:     transparent;
  color:          var(--ll-steel);
  border:         1px solid var(--ll-border);
  cursor:         pointer;
  border-radius:  0;
  transition:     background 0.12s, color 0.12s, border-color 0.12s;
  min-height:     var(--tap);
}
.view-btn:hover,
.view-btn.active {
  background:   var(--ll-ink);
  color:        var(--ll-bone);
  border-color: var(--ll-ink);
}

.sort-sel {
  font-family:    var(--f-mono);
  font-size:      11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding:        9px 12px;
  background:     var(--ll-bone);
  color:          var(--ll-ink);
  border:         1px solid var(--ll-border);
  border-radius:  0;
  cursor:         pointer;
  appearance:     none;
  -webkit-appearance: none;
  min-height:     var(--tap);
  padding-right:  28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%230E0E10'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 10px center;
}

/* ── EVENT LIST ─────────────────────────────────────────────────── */
.event-list {
  max-width: 1440px;
  margin:    0 auto;
  padding:   0 24px;
}

/* Single event row */
.event-row {
  display:       flex;
  align-items:   flex-start;
  gap:           20px;
  padding:       22px 0;
  border-bottom: 1px solid var(--ll-border);
}
.event-row:first-child { border-top: none; }

/* DATE BLOCK */
.date-block {
  background:     var(--ll-ink);
  color:          var(--ll-bone);
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  min-width:      52px;
  padding:        10px 12px;
  flex-shrink:    0;
  text-align:     center;
}
.db-d {
  font-family:    var(--f-display);
  font-size:      30px;
  line-height:    1;
  letter-spacing: -0.5px;
}
.db-m {
  font-family:    var(--f-mono);
  font-size:      9px;
  letter-spacing: 2px;
  color:          var(--ll-red);
  text-transform: uppercase;
  margin-top:     3px;
}
.db-w {
  font-family:    var(--f-mono);
  font-size:      8px;
  letter-spacing: 1px;
  color:          rgba(244,241,234,0.45);
  text-transform: uppercase;
  margin-top:     2px;
}

/* Row body */
.row-body {
  flex: 1;
  min-width: 0;
}

.cat-badge {
  display:        inline-block;
  background:     var(--ll-red);
  color:          var(--ll-bone);
  font-family:    var(--f-mono);
  font-size:      8px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding:        3px 8px;
  border-radius:  0;
  margin-bottom:  7px;
}
.cat-badge.user-badge {
  background: var(--ll-ink);
  margin-left: 5px;
}

.row-title {
  font-family:    var(--f-display);
  font-size:      clamp(16px, 2.2vw, 22px);
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color:          var(--ll-ink);
  line-height:    1.05;
  margin-bottom:  6px;
}

.row-loc {
  display:        flex;
  align-items:    flex-start;
  gap:            5px;
  font-family:    var(--f-mono);
  font-size:      9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color:          var(--ll-steel);
  margin-bottom:  8px;
  line-height:    1.4;
}
.row-loc svg {
  width:       11px;
  height:      11px;
  flex-shrink: 0;
  margin-top:  1px;
  color:       var(--ll-red);
}

.row-desc {
  font-family:           var(--f-body);
  font-size:             14px;
  font-weight:           400;
  color:                 var(--ll-steel);
  line-height:           1.45;
  display:               -webkit-box;
  -webkit-line-clamp:    2;
  -webkit-box-orient:    vertical;
  overflow:              hidden;
}

/* Row actions */
.row-actions {
  display:        flex;
  flex-direction: column;
  gap:            7px;
  flex-shrink:    0;
  min-width:      120px;
  max-width:      140px;
}

.btn-event {
  display:        block;
  font-family:    var(--f-mono);
  font-size:      11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding:        10px 14px;
  text-align:     center;
  text-decoration: none;
  border-radius:  0;
  transition:     opacity 0.12s;
}
.btn-event:hover { opacity: 0.82; }

.btn-event-primary {
  background: var(--ll-ink);
  color:      var(--ll-bone);
  border:     none;
  cursor:     pointer;
}
.btn-event-secondary {
  background: transparent;
  color:      var(--ll-ink);
  border:     1px solid var(--ll-ink);
}
.btn-event-secondary svg {
  display:     inline;
  width:       9px;
  height:      9px;
  vertical-align: middle;
  margin-right: 3px;
}

/* ── EMPTY / LOADING STATES ─────────────────────────────────────── */
.empty-state, .loading-state {
  max-width:   1440px;
  margin:      0 auto;
  padding:     80px 24px;
  text-align:  center;
}
.empty-state h3, .loading-state h3 {
  font-family:    var(--f-display);
  font-size:      28px;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  margin-bottom:  10px;
}
.empty-state p, .loading-state p {
  color:       var(--ll-steel);
  font-size:   15px;
  margin-bottom: 20px;
}
.btn-reset {
  font-family:    var(--f-mono);
  font-size:      11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding:        11px 20px;
  background:     var(--ll-ink);
  color:          var(--ll-bone);
  border:         none;
  cursor:         pointer;
}

/* Spinner */
.spinner {
  width:  36px; height: 36px;
  border: 3px solid var(--ll-border);
  border-top-color: var(--ll-red);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin: 0 auto 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── PAGINATION ─────────────────────────────────────────────────── */
.pagination {
  max-width:   1440px;
  margin:      0 auto;
  padding:     28px 24px 40px;
  display:     flex;
  align-items: center;
  gap:         6px;
  flex-wrap:   wrap;
}
.page-btn {
  font-family:    var(--f-mono);
  font-size:      11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding:        9px 14px;
  background:     transparent;
  color:          var(--ll-steel);
  border:         1px solid var(--ll-border);
  cursor:         pointer;
  border-radius:  0;
  min-height:     var(--tap);
  transition:     background 0.12s, color 0.12s;
}
.page-btn:hover:not(:disabled),
.page-btn.active {
  background:   var(--ll-ink);
  color:        var(--ll-bone);
  border-color: var(--ll-ink);
}
.page-btn:disabled { opacity: 0.35; cursor: default; }
.page-gap {
  color:     var(--ll-steel);
  padding:   0 4px;
  font-family: var(--f-mono);
  font-size: 10px;
}

/* ── MAP VIEW LAYOUT ────────────────────────────────────────────── */
.main-content { position: relative; }

/* When map mode is active the body gets .is-map-mode */
body.is-map-mode .sub-filters  { display: none; }
body.is-map-mode .results-bar  { display: none; }
body.is-map-mode #pagination   { display: none; }
body.is-map-mode .site-footer  { display: none; }

body.is-map-mode #main-content {
  display:   flex;
  flex-direction: row;
  height:    calc(100dvh - var(--hdr-h) - var(--cat-h));
  overflow:  hidden;
}

/* Sidebar */
.map-sidebar {
  width:          380px;
  flex-shrink:    0;
  height:         100%;
  overflow-y:     auto;
  background:     var(--ll-bone);
  border-right:   2px solid var(--ll-ink);
  display:        flex;
  flex-direction: column;
}
.map-sidebar-hdr {
  padding:        24px 20px 16px;
  border-bottom:  1px solid var(--ll-border);
  flex-shrink:    0;
  background:     var(--ll-bone-2);
}
.map-sidebar-eyebrow {
  font-family:    var(--f-mono);
  font-size:      9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          var(--ll-red);
  margin-bottom:  5px;
}
.map-sidebar-heading {
  font-family:    var(--f-display);
  font-size:      26px;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color:          var(--ll-ink);
}

.btn-back-list {
  display:        block;
  width:          100%;
  margin-top:     14px;
  font-family:    var(--f-mono);
  font-size:      11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background:     var(--ll-ink);
  color:          var(--ll-bone);
  border:         none;
  padding:        11px 16px;
  cursor:         pointer;
  text-align:     left;
  transition:     background 0.12s;
}
.btn-back-list:hover { background: #1e1e20; }

.map-sidebar-list { flex: 1; }

/* Compact sidebar event rows */
.sidebar-row {
  display:       flex;
  align-items:   flex-start;
  gap:           12px;
  padding:       14px 16px;
  border-bottom: 1px solid var(--ll-border);
  transition:    background 0.1s;
}
.sidebar-row:hover { background: var(--ll-bone-2); }
.sidebar-row .date-block {
  min-width: 40px;
  padding:   7px 8px;
}
.sidebar-row .db-d { font-size: 20px; }
.sidebar-row .db-m { font-size: 8px; }
.sidebar-row .db-w { font-size: 7px; }
.sidebar-row-body  { flex: 1; min-width: 0; }
.sidebar-row-title {
  font-family:    var(--f-display);
  font-size:      14px;
  text-transform: uppercase;
  color:          var(--ll-ink);
  line-height:    1.1;
  margin:         5px 0 3px;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}
.sidebar-row-loc {
  font-family:    var(--f-mono);
  font-size:      8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color:          var(--ll-steel);
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}

/* Map canvas */
.map-pane {
  flex:       1;
  height:     100%;
  min-width:  0;
}

/* ── MAP PINS ────────────────────────────────────────────────────── */
.ll-map-pin {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  pointer-events: auto;
}
.ll-pin-label {
  font-family:    var(--f-mono);
  font-size:      9px;
  font-weight:    500;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding:        4px 9px;
  white-space:    nowrap;
  line-height:    1;
  box-shadow:     0 2px 6px rgba(0,0,0,0.4);
}
.ll-pin-tip {
  width:  0;
  height: 0;
  border-left:  5px solid transparent;
  border-right: 5px solid transparent;
  /* border-top-color set inline per pin */
  border-top-width:  6px;
  border-top-style:  solid;
  border-top-color:  var(--ll-red);
}

/* ── MAP POPUPS ──────────────────────────────────────────────────── */
.leaflet-popup-content-wrapper {
  background:    var(--ll-bone)  !important;
  border-radius: 0             !important;
  box-shadow:    0 6px 20px rgba(0,0,0,0.4) !important;
  border:        1px solid var(--ll-border) !important;
  padding:       0 !important;
  overflow:      hidden;
}
.leaflet-popup-content {
  margin: 0 !important;
  width:  auto !important;
}
.leaflet-popup-tip {
  background: var(--ll-bone) !important;
}

.ll-popup {
  padding:   16px;
  min-width: 220px;
  max-width: 280px;
}
.ll-popup-meta {
  font-family:    var(--f-mono);
  font-size:      9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          var(--ll-steel);
  margin-bottom:  6px;
}
.ll-popup-meta .ll-meta-date { color: var(--ll-red); }
.ll-popup-meta .ll-meta-more {
  display:        inline-block;
  background:     rgba(214,32,42,0.1);
  color:          var(--ll-red);
  font-size:      8px;
  padding:        1px 5px;
  margin-left:    4px;
  vertical-align: middle;
}
.ll-popup-title {
  font-family:    var(--f-display);
  font-size:      17px;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  color:          var(--ll-ink);
  line-height:    1.1;
  margin-bottom:  5px;
}
.ll-popup-loc {
  font-family:    var(--f-mono);
  font-size:      8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color:          var(--ll-steel);
  margin-bottom:  12px;
  line-height:    1.4;
}
.ll-popup-btns {
  display:     flex;
  gap:         8px;
  border-top:  1px solid var(--ll-border);
  padding-top: 10px;
}
.ll-popup-btn {
  flex:           1;
  font-family:    var(--f-mono);
  font-size:      10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding:        8px 10px;
  text-decoration: none;
  text-align:     center;
  display:        block;
  border-radius:  0;
}
.ll-popup-btn-primary {
  background: var(--ll-ink);
  color:      var(--ll-bone);
}
.ll-popup-btn-secondary {
  background: transparent;
  color:      var(--ll-ink);
  border:     1px solid var(--ll-ink);
}

/* ── FOOTER ─────────────────────────────────────────────────────── */
.site-footer {
  background:   var(--ll-bone-3);
  border-top:   1px solid var(--ll-border);
  padding:      20px 24px;
  text-align:   center;
}
.footer-inner {
  font-family:    var(--f-mono);
  font-size:      9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          var(--ll-steel);
}
.footer-inner a { color: var(--ll-red); text-decoration: none; }

/* ── OVERLAY + MODAL ────────────────────────────────────────────── */
.overlay {
  position:   fixed;
  inset:      0;
  background: rgba(14,14,16,0.75);
  z-index:    300;
  opacity:    0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.overlay.show { opacity: 1; pointer-events: auto; }

.modal {
  position:   fixed;
  inset:      0;
  z-index:    400;
  display:    flex;
  align-items: flex-start;
  justify-content: center;
  padding:    40px 16px;
  overflow-y: auto;
  pointer-events: none;
  opacity:    0;
  transform:  translateY(16px);
  transition: opacity 0.2s, transform 0.2s;
}
.modal.show {
  opacity:       1;
  transform:     none;
  pointer-events: auto;
}

.modal-box {
  background:  var(--ll-bone);
  width:       100%;
  max-width:   680px;
  border:      2px solid var(--ll-ink);
  overflow:    hidden;
}

.modal-head {
  background:  var(--ll-red);
  padding:     28px 28px 22px;
  display:     flex;
  justify-content: space-between;
  align-items: flex-start;
  gap:         16px;
}
.modal-eyebrow {
  font-family:    var(--f-mono);
  font-size:      9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          rgba(244,241,234,0.7);
  margin-bottom:  6px;
}
.modal-title {
  font-family:    var(--f-display);
  font-size:      clamp(26px, 5vw, 40px);
  text-transform: uppercase;
  letter-spacing: -0.5px;
  color:          var(--ll-bone);
  line-height:    1;
  margin-bottom:  6px;
}
.modal-sub {
  font-family: var(--f-body);
  font-size:   14px;
  color:       rgba(244,241,234,0.75);
}
.modal-close-btn {
  background:  none;
  border:      none;
  cursor:      pointer;
  color:       rgba(244,241,234,0.7);
  padding:     6px;
  flex-shrink: 0;
  transition:  color 0.12s;
}
.modal-close-btn:hover { color: var(--ll-bone); }
.modal-close-btn svg { width: 22px; height: 22px; display: block; }

.modal-body { padding: 28px; }
.hidden     { display: none !important; }

/* Form */
.field { margin-bottom: 18px; }
.field-row-2 {
  display:  grid;
  grid-template-columns: 1fr 1fr;
  gap:      16px;
  margin-bottom: 18px;
}
.field-lbl {
  display:        block;
  font-family:    var(--f-mono);
  font-size:      9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          var(--ll-steel);
  margin-bottom:  6px;
}
.req { color: var(--ll-red); }
.field-inp {
  display:     block;
  width:       100%;
  background:  var(--ll-bone-2);
  border:      1px solid var(--ll-border);
  border-radius: 0;
  padding:     10px 12px;
  font-family: var(--f-body);
  font-size:   14px;
  font-weight: 500;
  color:       var(--ll-ink);
  outline:     none;
  transition:  border-color 0.12s;
  appearance:  none;
  -webkit-appearance: none;
}
.field-inp:focus {
  border-color: var(--ll-ink);
  background:   var(--ll-bone);
}
.field-inp::placeholder { color: var(--ll-steel); }
.field-textarea { resize: vertical; min-height: 90px; }

.form-actions {
  display:   flex;
  gap:       12px;
  margin-top: 24px;
}
.btn-submit-primary {
  font-family:    var(--f-mono);
  font-size:      12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background:     var(--ll-ink);
  color:          var(--ll-bone);
  border:         none;
  padding:        14px 24px;
  cursor:         pointer;
  flex:           1;
  border-radius:  0;
  transition:     background 0.12s;
}
.btn-submit-primary:hover { background: #1e1e20; }
.btn-submit-cancel {
  font-family:    var(--f-mono);
  font-size:      12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background:     transparent;
  color:          var(--ll-ink);
  border:         1px solid var(--ll-ink);
  padding:        13px 20px;
  cursor:         pointer;
  border-radius:  0;
  transition:     background 0.12s;
}
.btn-submit-cancel:hover { background: var(--ll-bone-3); }

.form-note {
  font-family: var(--f-body);
  font-size:   12px;
  color:       var(--ll-steel);
  margin-top:  14px;
  line-height: 1.5;
}

/* Success state */
.modal-success {
  padding:    48px 28px;
  text-align: center;
}
.success-check {
  width:         56px;
  height:        56px;
  background:    var(--ll-red);
  display:       flex;
  align-items:   center;
  justify-content: center;
  margin:        0 auto 20px;
}
.success-check svg { width: 28px; height: 28px; color: var(--ll-bone); }
.success-title {
  font-family:    var(--f-display);
  font-size:      32px;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  margin-bottom:  8px;
}
.success-sub {
  color:      var(--ll-steel);
  font-size:  15px;
  margin-bottom: 4px;
}

/* ── TOAST ───────────────────────────────────────────────────────── */
.toast {
  position:    fixed;
  bottom:      72px; /* above mobile nav */
  left:        50%;
  transform:   translateX(-50%) translateY(12px);
  background:  var(--ll-ink);
  color:       var(--ll-bone);
  font-family: var(--f-mono);
  font-size:   9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding:     10px 20px;
  z-index:     600;
  opacity:     0;
  pointer-events: none;
  transition:  opacity 0.2s, transform 0.2s;
  white-space: nowrap;
}
.toast.show {
  opacity:   1;
  transform: translateX(-50%) translateY(0);
}

/* ── MOBILE BOTTOM NAV ──────────────────────────────────────────── */
.mob-nav {
  position:        fixed;
  bottom:          0;
  left:            0;
  right:           0;
  z-index:         250;
  background:      var(--ll-ink);
  display:         none; /* shown at mobile via media query */
  border-top:      2px solid rgba(255,255,255,0.06);
  padding-bottom:  env(safe-area-inset-bottom);
}
.mob-item {
  flex:           1;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            3px;
  padding:        9px 4px 7px;
  background:     none;
  border:         none;
  border-top:     3px solid transparent;
  color:          rgba(244,241,234,0.45);
  cursor:         pointer;
  font-family:    var(--f-mono);
  font-size:      7px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition:     color 0.12s, border-color 0.12s;
}
.mob-item svg { width: 20px; height: 20px; }
.mob-item.active {
  color:        var(--ll-bone);
  border-top-color: var(--ll-red);
}
.mob-item:hover:not(.active) { color: rgba(244,241,234,0.75); }

/* ── RESPONSIVE ──────────────────────────────────────────────────── */

/* Tablet — 900px */
@media (max-width: 900px) {
  body.is-map-mode #map-sidebar { width: 300px; }
}

/* Mobile — 768px */
@media (max-width: 768px) {

  /* Show mobile nav */
  .mob-nav {
    display: flex;
  }

  /* Reduce body padding for mobile nav */
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }

  /* Header: hide nav and search on small screens */
  .hdr-nav    { display: none; }
  .hdr-search { display: none; }
  .hdr-inner  { gap: 12px; }

  .hdr-cta {
    font-size:      10px;
    letter-spacing: 1px;
    padding:        0 12px;
    height:         32px;
  }

  /* Sub-filters */
  .sub-filters-inner { flex-direction: column; gap: 10px; }

  /* Date chips */
  .date-chips {
    flex-wrap:    nowrap;
    overflow-x:   auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .date-chips::-webkit-scrollbar { display: none; }

  /* Results bar */
  .results-bar-inner {
    padding:   18px 16px 14px;
    gap:       10px;
  }
  .results-heading { font-size: 26px; }
  .results-eyebrow { font-size: 8px; }
  .view-controls   { gap: 6px; }
  .sort-sel        { font-size: 10px; padding: 8px 28px 8px 10px; }
  .view-btn        { font-size: 10px; padding: 8px 12px; }

  /* Event list */
  .event-list { padding: 0 16px; }

  /* Collapse to compact row on mobile */
  .event-row {
    flex-wrap: wrap;
    gap:       12px;
    padding:   16px 0;
  }
  .date-block {
    min-width: 44px;
    padding:   8px 10px;
  }
  .db-d { font-size: 24px; }
  .row-title { font-size: 16px; }

  /* Actions go full-width below */
  .row-actions {
    flex-direction: row;
    min-width:      100%;
    max-width:      none;
    flex-wrap:      wrap;
  }
  .btn-event { flex: 1; min-width: 100px; font-size: 10px; }

  /* Map mode: sidebar hidden by default on mobile, map fills width */
  body.is-map-mode #map-sidebar {
    display:  none !important;
  }
  body.is-map-mode #main-content {
    flex-direction: column;
  }
  body.is-map-mode #map-container {
    flex: 1;
  }

  /* Pagination */
  .pagination { padding: 20px 16px 32px; gap: 5px; }
  .page-btn   { font-size: 10px; padding: 8px 10px; min-height: 36px; }

  /* Toast above mobile nav */
  .toast { bottom: calc(64px + env(safe-area-inset-bottom)); }

  /* Modal */
  .modal         { padding: 0; align-items: flex-end; }
  .modal-box     { max-width: 100%; border-left: none; border-right: none; border-bottom: none; }
  .field-row-2   { grid-template-columns: 1fr; }
  .modal-body    { padding: 20px 16px; }
  .modal-head    { padding: 20px 16px 16px; }
  .form-actions  { flex-direction: column; }
  .btn-submit-primary, .btn-submit-cancel { flex: none; width: 100%; }
}

/* Very small phones */
@media (max-width: 380px) {
  .brand-name { font-size: 16px; }
  .brand-sub  { font-size: 6px; }
}