:root{
  --saffron:#e8a33d; --saffron-dk:#c9862a; --cacao:#4a2c17;
  --ink:#2c1e13; --muted:#8a7663; --cream:#faf6ef; --line:#e6dccb; --card:#fff;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--cream); display:flex; flex-direction:column;
}
header{
  display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between;
  padding:14px 20px; background:var(--cacao); color:#fff; border-bottom:3px solid var(--saffron);
}
.brand h1{margin:0;font-size:19px;letter-spacing:.2px}
.brand p{margin:2px 0 0;font-size:12.5px;color:#d9c9b6}
.tabs{display:flex;gap:6px}
.tabs button{
  background:rgba(255,255,255,.09); color:#f0e6d8; border:1px solid rgba(255,255,255,.18);
  padding:7px 16px; border-radius:999px; cursor:pointer; font-size:13.5px;
}
.tabs button:hover{background:rgba(255,255,255,.17)}
.tabs button.on{background:var(--saffron); color:#3a2405; border-color:var(--saffron); font-weight:600}

main{flex:1; display:flex; min-height:0}
#facets{
  width:250px; flex:0 0 250px; padding:14px; background:#fff; border-right:1px solid var(--line);
  overflow-y:auto;
}
#q{
  width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:8px;
  font-size:13.5px; background:var(--cream); color:var(--ink);
}
#q:focus{outline:2px solid var(--saffron); outline-offset:1px}
.facet-block{margin-top:16px}
.facet-block h2{
  margin:0 0 6px; font-size:10.5px; text-transform:uppercase; letter-spacing:.9px; color:var(--muted);
}
.facet-block label{
  display:flex; align-items:center; gap:7px; padding:3px 0; font-size:13px; cursor:pointer;
}
.facet-block label input{accent-color:var(--saffron-dk); margin:0}
.facet-block .n{margin-left:auto; color:var(--muted); font-size:11.5px; font-variant-numeric:tabular-nums}
button.ghost{
  margin-top:16px; width:100%; padding:7px; background:none; border:1px solid var(--line);
  border-radius:8px; color:var(--muted); cursor:pointer; font-size:12.5px;
}
button.ghost:hover{border-color:var(--saffron); color:var(--cacao)}
.stats{margin:12px 0 0; font-size:11.5px; color:var(--muted); line-height:1.6}

#stage{flex:1; position:relative; min-width:0; display:flex; flex-direction:column}
.view{display:none; flex:1; min-height:0}
.view.on{display:block}
#map{position:absolute; inset:0; background:#eee6d8}
.hint{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%); z-index:500;
  margin:0; padding:6px 14px; background:rgba(74,44,23,.86); color:#fff;
  border-radius:999px; font-size:12px;
}
.loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);z-index:600;background:var(--cream)}
.loading.off{display:none}

/* Map popups: .pop had no rule at all, so thumbnails rendered at natural size
 * (portrait phone photos ~3000px tall) and burst out of Leaflet's default 300px
 * popup. Constrain the media and let the popup size itself. */
.pop{width:180px}
.pop img{
  display:block; width:100%; height:104px; object-fit:cover;
  border-radius:6px; margin:0 0 6px; background:#efe7da;
}
.pop b{display:block; font-size:12.5px; line-height:1.3; color:var(--cacao)}
.pop span{display:block; font-size:11px; color:var(--muted); margin-top:1px}
.pop button{
  margin-top:7px; width:100%; padding:5px 0; cursor:pointer;
  background:var(--saffron); color:#3a2405; border:0; border-radius:6px;
  font-size:12px; font-weight:600;
}
.leaflet-popup-content{margin:10px 12px;line-height:1.35}
.leaflet-popup-content-wrapper{border-radius:10px}

#timeline{padding:18px 20px 40px; height:100%; overflow-y:auto}
.month{margin-bottom:26px}
.month h3{
  position:sticky; top:0; margin:0 0 10px; padding:7px 0; font-size:13px; text-transform:uppercase;
  letter-spacing:1px; color:var(--cacao); background:var(--cream); border-bottom:2px solid var(--saffron);
}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:12px}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden;
  cursor:pointer; transition:transform .12s, box-shadow .12s;
}
.card:hover{transform:translateY(-2px); box-shadow:0 6px 16px rgba(74,44,23,.13)}
.card .thumb{aspect-ratio:4/3; background:#efe7da; display:block; width:100%; object-fit:cover}
.card .meta{padding:6px 8px 8px}
.card .meta b{display:block; font-size:12px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.card .meta span{font-size:11px; color:var(--muted)}
.ph{aspect-ratio:4/3; display:grid; place-items:center; background:#efe7da; color:#b3a08a; font-size:11px}

#names{padding:18px 20px 40px; height:100%; overflow-y:auto}
#names .group{margin-bottom:28px}
#names .group h3{
  margin:0 0 10px; font-size:14px; color:var(--cacao); border-bottom:2px solid var(--saffron); padding-bottom:5px;
}
#names .group p{margin:0 0 10px; font-size:12px; color:var(--muted)}
.empty{color:var(--muted); font-size:13px; padding:30px 0}

.lightbox{
  position:fixed; inset:0; background:rgba(28,18,10,.9); z-index:2000; display:none;
  place-items:center; padding:24px;
}
.lightbox.on{display:grid}
.lb-inner{
  max-width:1000px; width:100%; position:relative;
  max-height:calc(100vh - 48px); display:flex; flex-direction:column;
}

/* width:auto is the fix: the old `width:100%` forced every image to the full
 * 1000px box, so a 9:16 portrait video letterboxed itself into a huge black
 * slab that looked like it had escaped the lightbox. */
#lb-body{min-height:0; flex:1; display:flex; align-items:center; justify-content:center}
#lb-body img,#lb-body video{
  width:auto; height:auto; max-width:100%; max-height:calc(100vh - 150px);
  object-fit:contain; border-radius:10px; background:#000;
}
#lb-body iframe{width:100%; aspect-ratio:16/9; border:0; border-radius:10px; max-height:calc(100vh - 150px)}
#lb-title{color:#cbb9a4; font-size:12.5px; text-align:center; margin:10px 0 0}
.lb-close{
  position:absolute; right:0; top:-34px; background:none; border:0; color:#fff;
  font-size:30px; line-height:1; cursor:pointer; opacity:.8;
}
.lb-close:hover{opacity:1}

@media (max-width:760px){
  main{flex-direction:column}
  #facets{width:100%; flex:0 0 auto; border-right:0; border-bottom:1px solid var(--line); max-height:44vh}
  #map{position:relative; height:64vh}
  .brand p{display:none}
}