:root{
  --bg:#D8CCB6; --paper:#E7DBC8; --paper-dark:#CBBCA0; --border:#8F7D63;
  --ink:#2A231B; --muted:#5A4E3C; --shadow:rgba(42,35,27,.25);
}
*{box-sizing:border-box}
html,body,#app{height:100%;margin:0}
body{
  color:var(--ink); background:var(--bg);
  font-family:"Crimson Text", Georgia, serif;
  overflow:hidden;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:900;
  background:
    linear-gradient(90deg, transparent 49.7%, rgba(42,35,27,.05) 50%, transparent 50.3%),
    linear-gradient(0deg, transparent 49.7%, rgba(42,35,27,.035) 50%, transparent 50.3%),
    radial-gradient(circle at 50% 45%, transparent 45%, rgba(42,35,27,.08) 100%),
    repeating-radial-gradient(circle at 20% 30%, rgba(42,35,27,.06) 0 1px, transparent 1px 4px);
  opacity:.8; mix-blend-mode:multiply;
}
#app{display:grid; grid-template-rows:auto 1fr; min-height:100%}
.app-header{
  position:fixed; left:0; right:0; top:0; z-index:650;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:12px 18px 11px;
  background:rgba(231,219,200,.96);
  border-bottom:1px solid var(--border);
  box-shadow:0 6px 24px var(--shadow);
}
.title-group{min-width:250px}
.kicker,.ribbon-kicker,label,.legend-title,.count-label,.header-button,.sources-button,.multi-trigger,.multi-option,.filter-heading,.filter-summary,.icon-button,select{
  font-family:"IBM Plex Mono", ui-monospace, monospace; letter-spacing:.04em;
}
.kicker{font-size:10px; text-transform:uppercase; color:var(--muted); margin:0 0 4px}
h1{font-family:"Libre Baskerville", Georgia, serif; font-size:28px; line-height:1.05; margin:0}
.subtitle{font-size:16px; margin:4px 0 0; color:var(--muted)}
.header-actions{display:flex; align-items:center; gap:9px; flex-wrap:wrap; justify-content:flex-end}
.count-label{font-size:11px; color:var(--muted); margin-right:3px}
.header-button,.sources-button,.text-button,.ghost-button{
  border:1px solid var(--border); background:#efe2cc; color:var(--ink);
  padding:7px 10px; cursor:pointer; border-radius:3px;
}
.header-button:hover,.sources-button:hover,.multi-trigger:hover,.filter-heading:hover{background:#eadcc6}

.map-wrap{position:relative; min-width:0; height:100vh; padding-top:0}
#map{height:100%; width:100%; background:#cbbca0; z-index:1}
.leaflet-pane{z-index:200}
.leaflet-tile-pane{z-index:200}
.leaflet-overlay-pane{z-index:300}
.leaflet-marker-pane{z-index:420}
.leaflet-tooltip-pane{z-index:450}
.leaflet-popup-pane{z-index:460}

.filter-panel{
  position:fixed; top:92px; left:18px; z-index:620;
  width:min(760px, calc(100vw - 36px));
  background:rgba(231,219,200,.96);
  border:1px solid var(--border);
  box-shadow:0 8px 26px var(--shadow);
}
.filter-heading{
  width:100%; border:0; background:transparent; color:var(--ink);
  padding:9px 12px; display:flex; justify-content:space-between; align-items:center; cursor:pointer;
  text-transform:uppercase; font-size:12px;
}
.filter-summary{text-transform:none; color:var(--muted); font-size:10px; margin-left:10px}
.filter-body{display:flex; gap:10px; padding:0 12px 12px; align-items:flex-start}
.filter-panel.collapsed .filter-body{display:none}
.multi-select{position:relative; min-width:165px}
.multi-trigger{
  width:100%; text-align:left; padding:8px 10px; color:var(--ink); cursor:pointer;
  border:1px solid var(--border); background:#efe2cc; border-radius:3px;
}
.multi-trigger::after{content:"▾"; float:right; color:var(--muted)}
.multi-menu{
  display:none; position:absolute; top:calc(100% + 4px); left:0; z-index:640;
  min-width:230px; max-height:300px; overflow:auto;
  background:rgba(231,219,200,.98); border:1px solid var(--border);
  box-shadow:0 10px 26px var(--shadow); padding:6px;
}
.multi-select.open .multi-menu{display:block}
.multi-option{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  border:0; background:transparent; color:var(--ink); padding:7px 8px; cursor:pointer;
  font-size:12px; border-radius:2px;
}
.multi-option[aria-pressed="true"]{background:var(--ink); color:var(--paper)}
.multi-option[aria-pressed="false"]{background:#efe2cc; color:var(--ink); margin:2px 0}
.multi-box{
  width:12px; height:12px; border:1px solid currentColor; display:inline-block;
  background:transparent; flex:0 0 auto;
}
.multi-option[aria-pressed="true"] .multi-box{background:currentColor; outline:1px solid var(--paper); outline-offset:-3px}

.legend-panel{
  position:fixed; top:86px; right:18px; z-index:610;
  width:300px; max-width:calc(100vw - 36px);
  background:rgba(231,219,200,.97); border:1px solid var(--border);
  box-shadow:0 8px 26px var(--shadow);
}
.legend-panel.collapsed{display:none}
.legend-title{
  display:flex; justify-content:space-between; align-items:center; cursor:pointer;
  border-bottom:1px solid var(--border); padding:9px 11px; text-transform:uppercase; font-size:12px;
}
.legend-body{padding:11px}
.legend-section{margin:0 0 12px}
.legend-section label{display:block;font-size:10px;text-transform:uppercase;margin-bottom:6px;color:var(--muted)}
select{
  width:100%; padding:8px 9px; background:#f0e6d5; color:var(--ink);
  border:1px solid var(--border); border-radius:3px;
}
.legend-row{display:flex;align-items:center;gap:9px;margin:7px 0;font-size:14px}
.swatch{width:16px;height:16px;border:1.5px solid var(--ink);display:inline-block;flex:0 0 auto}
.circle{border-radius:50%}.diamond{transform:rotate(45deg)}.ring{border-radius:50%;background:transparent!important}.dashed{border-style:dashed;border-radius:50%}
.scale-dot{border-radius:50%; background:#5A4E3C; display:inline-block; opacity:.72; vertical-align:middle}

.sources-button{
  position:fixed; left:18px; bottom:18px; z-index:570;
  background:rgba(239,226,204,.95);
}

.loading{
  position:absolute; z-index:700; left:50%; top:50%; transform:translate(-50%,-50%);
  background:rgba(231,219,200,.95); border:1px solid var(--border); padding:12px 16px;
  font-family:"IBM Plex Mono"; font-size:12px;
}
.memorial-marker{filter: drop-shadow(0 2px 4px rgba(42,35,27,.35));}
.leaflet-marker-icon.is-hovered{ transform-origin:center center; filter:brightness(1.08); }

.info-panel{
  position:fixed; right:18px; bottom:18px; z-index:630;
  width:380px; max-width:calc(100vw - 36px); max-height:min(62vh, 560px);
  background:rgba(239,226,204,.98); color:var(--ink);
  border:1px solid var(--border); box-shadow:0 14px 42px rgba(42,35,27,.34);
  display:flex; flex-direction:column;
}
.info-panel.collapsed{display:none}
.info-panel.minimized .info-content{display:none}
.info-header{
  cursor:move; user-select:none; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 11px; border-bottom:1px solid var(--border);
  font-family:"Libre Baskerville"; font-weight:700; font-size:14px; background:rgba(231,219,200,.96);
}
.icon-button{
  border:1px solid var(--border); background:#efe2cc; color:var(--ink);
  width:24px; height:24px; line-height:18px; cursor:pointer; border-radius:2px;
}
.info-content{overflow:auto; padding:12px 14px; font-size:15px; line-height:1.32}
.info-content p{margin:9px 0}
.popup-title{font-family:"Libre Baskerville"; font-size:17px; margin-bottom:3px}
.meta{font-family:"IBM Plex Mono"; font-size:11px; color:var(--muted)}
.info-content a,.modal-card a{color:#473620}

.modal{position:fixed; inset:0; background:rgba(42,35,27,.45); display:none; z-index:2000; align-items:center; justify-content:center; padding:24px}
.modal[aria-hidden="false"]{display:flex}
.modal-card{max-width:760px; max-height:80vh; overflow:auto; background:var(--paper); border:1px solid var(--border); padding:22px; box-shadow:0 18px 60px rgba(0,0,0,.35); position:relative}
.close{position:absolute; right:12px; top:8px; border:0; background:transparent; font-size:28px; cursor:pointer}
.source-item{border-top:1px solid var(--border); padding:9px 0}
.made{font-family:"IBM Plex Mono";font-size:12px}
.leaflet-control-attribution{font-family:"IBM Plex Mono"; font-size:10px; background:rgba(231,219,200,.8)!important}
.leaflet-control-zoom{display:none}

@media (max-width:760px){
  .app-header{align-items:flex-start; flex-direction:column; gap:8px; padding:10px 12px}
  h1{font-size:24px}.subtitle{font-size:14px}.header-actions{justify-content:flex-start}
  .filter-panel{top:128px; left:10px; width:calc(100vw - 20px)}
  .filter-body{flex-direction:column}.multi-select{width:100%}.multi-menu{position:static; max-height:170px; width:100%; margin-top:4px}
  .legend-panel{top:128px; right:10px; width:calc(100vw - 20px)}
  .info-panel{right:10px; bottom:10px; width:calc(100vw - 20px)}
  .sources-button{left:10px; bottom:10px}
  .count-label{width:100%}
}