:root {
  --paper:#f3f0e8;
  --paper-deep:#e5e0d4;
  --ink:#151612;
  --muted:#686a62;
  --line:#c8c3b7;
  --accent:#151612;
  --dc:#ffffff;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; overflow-x:hidden; }
h1,h2,h3 { font-family:Georgia,'Times New Roman',serif; font-weight:400; letter-spacing:-.03em; margin:0; }
.eyebrow { margin:0; color:var(--muted); font:700 10px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.16em; }

.site-header { height:60px; padding:0 3.5vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.site-header p { margin:0; color:var(--muted); font:700 9px ui-monospace,monospace; letter-spacing:.12em; }
.wordmark { font:700 11px ui-monospace,monospace; letter-spacing:.14em; text-decoration:none; color:inherit; }
.wordmark span { color:var(--muted); font-weight:400; }

main { width:min(1380px,95vw); margin-inline:auto; }
.intro { padding:24px 0 15px; max-width:860px; }
.intro h1 { font-size:clamp(25px,3.1vw,40px); line-height:.98; margin:7px 0 10px; }
.intro .dek { margin:0; font:400 clamp(13px,1.15vw,15px)/1.5 Georgia,serif; color:#3a3b35; max-width:820px; }

.workspace { display:grid; grid-template-columns:336px 1fr; gap:0; border:1px solid var(--ink); border-bottom:none;
  height:clamp(480px, calc(100vh - 84px), 820px); }
.panel { border-right:1px solid var(--ink); background:var(--paper-deep); min-width:0; overflow-y:auto; }
.mode-toggle { display:flex; border-bottom:1px solid var(--ink); }
.mode-toggle button { flex:1; padding:12px 10px; border:0; border-right:1px solid var(--line); background:transparent; color:var(--muted); font:700 10px ui-monospace,monospace; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; }
.mode-toggle button:last-child { border-right:0; }
.mode-toggle button:hover { color:var(--ink); }
.mode-toggle button[aria-selected="true"] { background:var(--accent); color:#fff8ef; }

.picker { display:flex; flex-direction:column; border-bottom:1px solid var(--line); }
.picker button { display:flex; flex-direction:column; gap:1px; text-align:left; padding:6px 14px; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; }
.picker button b { font:700 9px ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; color:inherit; }
.picker button span { font:11px/1.15 Georgia,serif; color:var(--muted); }
.picker button:last-child { border-bottom:0; }
.picker button:hover { color:var(--ink); background:rgba(0,0,0,.03); }
.picker button[aria-selected="true"] { color:var(--ink); background:var(--paper); box-shadow:inset 3px 0 0 var(--accent); }
.picker button[aria-selected="true"] span { color:var(--ink); }

.readout { padding:16px 16px 20px; }
.readout h2 { font-size:22px; margin:8px 0 3px; }
.readout h3 { font-size:20px; margin:6px 0 3px; }
.readout .sub { margin:0; color:var(--muted); font:12.5px/1.4 Georgia,serif; }
.metrics { margin:13px 0 14px; display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
.metrics div { background:var(--paper-deep); padding:8px 10px; }
.metrics dt { margin:0; color:var(--muted); font:700 8px ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
.metrics dd { margin:5px 0 0; font:400 17px/1 ui-monospace,monospace; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.match-label { margin-top:4px; }
.dc-note { margin:14px 0 0; padding-top:12px; border-top:1px solid var(--line); color:var(--muted); font:11.5px/1.5 Georgia,serif; }

.map-wrap { margin:0; display:flex; flex-direction:column; min-width:0; height:100%; }
#map { position:relative; flex:1 1 auto; min-height:0; background:#20221f; }
.map-wrap figcaption { padding:8px 14px; border-top:1px solid var(--ink); color:var(--muted); font:10.5px/1.4 Arial,sans-serif; background:var(--paper-deep); }

.map-banner { position:absolute; z-index:1100; top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:11px 16px; background:var(--accent); color:#fff8ef; border-bottom:1px solid var(--ink);
  font:400 clamp(13px,1.35vw,16px)/1.35 Georgia,serif; letter-spacing:-.01em;
  transition:opacity .35s ease; }
.map-banner b { font-weight:700; }
.map-banner.gone { opacity:0; pointer-events:none; }

.map-head { padding:9px 14px; display:flex; flex-direction:column; gap:7px; border-bottom:1px solid var(--ink); background:var(--paper-deep); }
.equation { margin:0; overflow-x:auto; white-space:nowrap; color:var(--muted); font:400 12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:-.01em; }
.equation b { color:var(--ink); font-weight:700; }
.equation .eq-out { color:var(--accent); }
.legend { display:flex; flex-wrap:wrap; gap:7px 24px; }
.lg { display:flex; align-items:center; gap:8px; min-width:0; }
.lg > i { flex:0 0 auto; width:13px; height:13px; }
.lg-dc > i { background:#fff; border:1px solid var(--ink); }
.lg-place > i { background:transparent; border:2px solid #b7b0a0; }
.lg b { font:700 9px ui-monospace,monospace; letter-spacing:.05em; text-transform:uppercase; color:var(--ink); white-space:nowrap; }
.lg > span { color:var(--muted); font:12px/1.2 Georgia,serif; white-space:nowrap; }

.zoom-track { display:flex; align-items:center; gap:14px; padding:7px 0 1px; margin-top:1px; border-top:1px solid var(--line); }
.zt-end { flex:0 0 auto; color:var(--muted); font:700 8px/1.3 ui-monospace,monospace; letter-spacing:.05em; text-transform:uppercase; }
.zt-end-r { text-align:right; }
.zt-end i { color:var(--line); font-style:normal; font-weight:400; }
.zoom-track input[type=range] { flex:1; height:16px; margin:0; appearance:none; background:transparent; cursor:ew-resize; }
.zoom-track input[type=range]:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.zoom-track input[type=range]::-webkit-slider-runnable-track { height:2px; background:var(--ink); }
.zoom-track input[type=range]::-moz-range-track { height:2px; background:var(--ink); }
.zoom-track input[type=range]::-webkit-slider-thumb { appearance:none; width:15px; height:15px; margin-top:-6.5px; border:3px solid var(--paper-deep); border-radius:50%; background:var(--ink); box-shadow:0 0 0 1px var(--ink); }
.zoom-track input[type=range]::-moz-range-thumb { width:12px; height:12px; border:3px solid var(--paper-deep); border-radius:50%; background:var(--ink); box-shadow:0 0 0 1px var(--ink); }

.leaflet-container { background:#20221f; font-family:ui-monospace,monospace; cursor:default; }
.leaflet-container:active { cursor:default; }

.method { padding:34px 0 70px; max-width:820px; }
.method p { margin:12px 0 0; font:400 14px/1.6 Georgia,serif; color:#3a3b35; }
.method strong { font-weight:700; }
.src-head { margin-top:28px; }
.sources { margin:10px 0 0; border-top:1px solid var(--line); }
.sources div { display:grid; grid-template-columns:190px 1fr; gap:16px; padding:9px 0; border-bottom:1px solid var(--line); }
.sources dt { color:var(--ink); font:700 9px ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
.sources dd { margin:0; color:var(--muted); font:12px/1.5 Georgia,serif; }
.sources a, .method a { color:var(--ink); text-underline-offset:2px; }
.sources a:hover, .method a:hover { opacity:.6; }
@media (max-width:620px) { .sources div { grid-template-columns:1fr; gap:3px; } }

footer { border-top:1px solid var(--ink); padding:26px 3.5vw 60px; display:grid; grid-template-columns:1fr auto 1fr; gap:14px; color:var(--muted); font:700 9px ui-monospace,monospace; letter-spacing:.08em; }
footer p { margin:0; }
footer p:nth-child(2) { text-align:center; letter-spacing:.02em; }
footer p:last-child { text-align:right; }

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .map-banner, * { transition-duration:.01ms !important; }
}

@media (max-width:920px) {
  .workspace { grid-template-columns:1fr; height:auto; }
  .panel { border-right:0; border-bottom:1px solid var(--ink); overflow:visible; }
  .picker { flex-flow:row wrap; }
  .picker button { flex:1 1 40%; border-right:1px solid var(--line); }
  .map-wrap { height:auto; }
  #map { flex:none; height:62vh; min-height:400px; }
  footer { grid-template-columns:1fr; }
  footer p, footer p:nth-child(2), footer p:last-child { text-align:left; }
}