
:root{
  color-scheme: dark;
  --plane:#17171a; --surface:#1f1f22; --ink:#f2f2ee; --ink2:#b8b8b1; --muted:#86867f;
  --line:#2e2e31; --border:rgba(255,255,255,.13);
  --fallen:#3987e5; --raised:#d95926;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--plane);color:var(--ink);font-family:var(--sans);
     -webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}

/* masthead */
header.top{border-bottom:1px solid var(--line);margin-bottom:34px}
.top .wrap{display:flex;align-items:baseline;gap:26px;padding-top:20px;padding-bottom:16px;
  flex-wrap:wrap}
.brand{font-weight:660;letter-spacing:-.015em;font-size:16px;text-decoration:none;white-space:nowrap}
.brand small{display:block;font-weight:400;font-size:10.5px;color:var(--muted);
  letter-spacing:.10em;text-transform:uppercase;margin-top:3px}
nav{display:flex;gap:20px;margin-left:auto;font-size:13px}
nav a{color:var(--ink2);text-decoration:none;padding-bottom:2px;border-bottom:1.5px solid transparent}
nav a:hover{color:var(--ink)}
nav a[aria-current]{color:var(--ink);border-bottom-color:var(--ink)}

h1{font-size:26px;font-weight:640;letter-spacing:-.018em;margin:0 0 8px}
.lede{color:var(--ink2);font-size:14.5px;line-height:1.6;max-width:62ch;margin:0 0 26px}
.sn{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--muted)}
footer{margin-top:64px;border-top:1px solid var(--line);padding:22px 0 44px;
  font-size:12px;color:var(--muted);line-height:1.7}

/* daily drop */
.drop{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(240px,.85fr);gap:34px;
  align-items:start}
@media(max-width:820px){.drop{grid-template-columns:1fr}}
.drop img{width:100%;border-radius:3px;display:block;background:var(--surface);
  border:1px solid var(--border)}
.meta dt{font-size:10.5px;letter-spacing:.10em;text-transform:uppercase;color:var(--muted);
  margin-top:16px}
.meta dd{margin:3px 0 0;font-size:14.5px}
.meta dd:first-of-type{font-size:15px}
.tag{display:inline-block;font-size:11px;font-weight:620;letter-spacing:.05em;
  text-transform:uppercase;padding:3px 9px;border-radius:99px;color:#fff}
.tag.fallen{background:var(--fallen)} .tag.raised{background:var(--raised)}

/* wall */
.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}
.controls .grp{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.controls label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-right:4px}
button.chip{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:7px 13px;border-radius:0;cursor:pointer;border:1px solid var(--ink);
  background:transparent;color:var(--ink);transition:background .12s,color .12s}
button.chip:hover{background:rgba(242,242,238,.09)}
button.chip[aria-pressed=true]{background:var(--ink);color:var(--plane)}
.count{font-size:12.5px;color:var(--muted);margin:12px 0 16px;font-variant-numeric:tabular-nums}
#wall{position:relative;width:100%}
#wall a{position:absolute;display:block;border-radius:2px;overflow:hidden;background:var(--surface);
  transition:transform .55s cubic-bezier(.22,.61,.36,1),opacity .3s;will-change:transform}
#wall a img{width:100%;height:100%;object-fit:cover;display:block}
#wall a::after{content:"";position:absolute;inset:0;border-radius:2px;
  box-shadow:inset 0 0 0 1px var(--border)}
#wall a:hover{z-index:5}
#wall a:hover::after{box-shadow:inset 0 0 0 2px var(--ink)}

/* specimen */
.spec{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(230px,.8fr);gap:34px;
  align-items:start}
@media(max-width:820px){.spec{grid-template-columns:1fr}}
.spec img.plate{width:100%;border-radius:3px;display:block;border:1px solid var(--border)}
.pager{display:flex;gap:14px;margin-top:26px;font-size:13px}
.pager a{color:var(--ink2);text-decoration:none}
.pager a:hover{color:var(--ink)}
.note{background:var(--surface);border:1px solid var(--border);border-radius:4px;
  padding:12px 14px;font-size:13px;line-height:1.6;color:var(--ink2);margin-top:18px}

/* notes */
.finding{background:var(--surface);border:1px solid var(--border);border-radius:4px;
  padding:22px 24px;margin-bottom:16px}
.finding h2{font-size:18px;font-weight:640;letter-spacing:-.012em;margin:0 0 4px}
.finding .k{font-size:10.5px;letter-spacing:.10em;text-transform:uppercase;color:var(--muted);
  margin-bottom:12px}
.finding p{font-size:14.5px;line-height:1.65;color:var(--ink2);margin:0 0 12px;max-width:70ch}
.finding p strong{color:var(--ink)}
.big{font-size:40px;font-weight:660;letter-spacing:-.025em;line-height:1;margin:4px 0 2px}
.figrow{display:flex;flex-wrap:wrap;gap:30px;margin:16px 0 22px}
.figrow div{min-width:120px}
.figrow .lab{font-size:12px;color:var(--muted);line-height:1.45;max-width:22ch}
table.t{border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums;margin:6px 0 14px}
table.t td,table.t th{padding:5px 16px 5px 0;text-align:left;border-bottom:1px solid var(--line)}
table.t th{color:var(--muted);font-weight:600;font-size:11px;letter-spacing:.05em;
  text-transform:uppercase}

/* map */
#map{height:min(72vh,720px);width:100%;border:1px solid var(--border);border-radius:3px;
  background:#101012;margin-top:4px}
#map .leaflet-tile-pane{filter:invert(1) hue-rotate(185deg) brightness(.72) contrast(.92)
  saturate(.35);opacity:.55}
.leaflet-container{background:#101012!important;font-family:var(--sans)}
.leaflet-control-attribution{background:rgba(23,23,26,.86)!important;color:var(--muted)!important;
  font-size:10.5px;padding:2px 7px}
.leaflet-control-attribution a{color:var(--ink2)!important}
.leaflet-bar a{background:var(--surface)!important;color:var(--ink)!important;
  border-color:var(--border)!important}
.leaflet-popup-content-wrapper{background:var(--surface);color:var(--ink);border-radius:4px;
  box-shadow:0 6px 22px rgba(0,0,0,.5)}
.leaflet-popup-tip{background:var(--surface)}
.leaflet-popup-content{margin:0;width:186px!important}
.pop img{width:100%;display:block;border-radius:3px 3px 0 0}
.pop .b{padding:9px 11px 11px}
.pop .sn{font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.04em}
.pop .k{font-size:13.5px;font-weight:600;margin:3px 0 1px}
.pop .d{font-size:12px;color:var(--ink2)}
.pop a.go{display:inline-block;margin-top:7px;font-size:12px;color:var(--ink)}
.legend{display:flex;gap:18px;align-items:center;margin:14px 0 2px;font-size:12.5px;
  color:var(--ink2);flex-wrap:wrap}
.legend i{width:11px;height:11px;border-radius:50%;display:inline-block;margin-right:6px;
  vertical-align:-1px}
