:root { --ink:#1d312d; --muted:#64736e; --paper:#f6f5f0; --white:#fffefa; --line:#dfe3dc; --accent:#e96949; --accent-dark:#bc4f34; --green:#25473e; }
* { box-sizing:border-box; }
html,body { width:100%; height:100%; overflow:hidden; overscroll-behavior:none; }
body { position:fixed; inset:0; margin:0; background:var(--paper); color:var(--ink); font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
button,input { font:inherit; }
button { cursor:pointer; }
a { color:inherit; }
.app-shell { height:100dvh; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.site-header { height:62px; flex:none; padding:0 clamp(16px,3vw,48px); display:flex; align-items:center; justify-content:space-between; background:var(--white); border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:11px; font-size:23px; letter-spacing:-.065em; font-weight:790; text-decoration:none; color:var(--ink); }
.brand:hover { color:var(--ink); }
.brand-mark { display:grid; place-items:center; width:41px; height:41px; }
.brand-mark img { display:block; width:41px; height:41px; }
.header-right { display:flex; align-items:center; gap:30px; }
.header-caption { font-size:13px; color:#74817c; }
.preview-pill { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:100px; color:#375b4c; background:#edf3ec; font-size:10px; font-weight:800; letter-spacing:.12em; white-space:nowrap; }
.live-dot,.map-tag-dot { width:6px; height:6px; display:block; border-radius:50%; background:#79a986; }
.main-content { width:100%; max-width:1800px; flex:1; min-height:0; margin:0 auto; padding:0 clamp(16px,3vw,48px); display:flex; flex-direction:column; overflow:hidden; }
.intro { flex:none; padding:12px 0 11px; display:flex; justify-content:space-between; gap:30px; align-items:end; }
.eyebrow,.section-number,.place-overline,.meta-label,.site-footer { font-size:10px; font-weight:800; letter-spacing:.16em; }
.eyebrow { display:flex; align-items:center; gap:10px; color:#a4543d; margin-bottom:7px; }
.eyebrow-line { display:inline-block; width:18px; height:1px; background:#a4543d; }
h1 { font-size:clamp(27px,2.65vw,39px); font-weight:760; line-height:1.04; letter-spacing:-.067em; margin:0; }
h1 em { font-style:normal; color:var(--accent); }
.intro p { margin:0 0 3px; max-width:370px; font-size:13px; line-height:1.5; color:#77837f; }
.explorer { flex:1; min-height:0; display:grid; grid-template-columns:minmax(290px,340px) minmax(0,1fr); grid-template-rows:minmax(0,.85fr) minmax(0,1fr); border:1px solid #d6dcd5; border-radius:15px; overflow:hidden; background:var(--white); box-shadow:0 20px 55px rgba(32,53,46,.06); }
.search-pane { grid-column:1; grid-row:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:23px 25px 22px; border-bottom:1px solid var(--line); z-index:2; }
.pane-heading { display:flex; align-items:center; gap:10px; color:#ad6250; margin-bottom:25px; white-space:nowrap; }
.section-number { color:#aa614d; }
.tiny-rule { width:20px; height:1px; background:#cfd6ce; }
.pane-hint { font-size:11px; color:#83908a; overflow:hidden; text-overflow:ellipsis; }
.search-label { font-size:24px; line-height:1.2; letter-spacing:-.045em; font-weight:700; display:block; margin-bottom:16px; }
.search-field { display:flex; align-items:center; gap:12px; height:53px; padding:5px 6px 5px 15px; border:1px solid #cdd7cf; border-radius:8px; background:#fff; transition:border-color .2s,box-shadow .2s; }
.search-field:focus-within { border-color:#647e6e; box-shadow:0 0 0 3px #dbe9df; }
.search-field>svg { color:#6a7b72; flex:none; }
.search-field input { flex:1; min-width:0; border:0; outline:0; background:transparent; font-size:13px; color:var(--ink); }
.search-field input::placeholder { color:#9aa69f; }
.search-field input::-webkit-search-cancel-button { cursor:pointer; }
.search-field button { width:41px; height:41px; display:grid; place-items:center; border:0; border-radius:6px; background:var(--green); color:white; transition:background .2s,transform .2s; }
.search-field button:hover { background:#396452; transform:translateX(1px); }
.search-field button:focus-visible,.quick-search button:focus-visible,.primary-button:focus-visible,.secondary-link:focus-visible,.results button:focus-visible { outline:3px solid #b0cbb9; outline-offset:3px; }
.search-credit { margin:7px 0 0; color:#87948b; font-size:10px; line-height:1.2; }
.search-credit a { text-decoration:underline; text-underline-offset:2px; }
.quick-search { display:flex; align-items:center; gap:6px; margin-top:18px; flex-wrap:wrap; }
.quick-search span { color:#a3aaa4; font-size:9px; font-weight:850; letter-spacing:.14em; margin-right:4px; }
.quick-search button { border:1px solid #dee4dc; background:#f7f9f5; color:#52635a; font-size:11px; padding:6px 11px; border-radius:20px; transition:background .2s; }
.quick-search button:hover { background:#eaf0e9; }
.form-note { color:#87948b; font-size:11px; margin:21px 0 0; }
.search-status { font-size:12px; line-height:1.4; margin-top:15px; padding:11px 12px; background:#f2f4ee; border-radius:6px; color:#4b6054; }
.search-status.error { background:#fff1eb; color:#9c4939; }
.results { position:fixed; z-index:1200; max-height:310px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; border:1px solid #cedbd0; border-radius:8px; background:#fff; box-shadow:0 15px 38px #17352838; }
.results button { width:100%; border:0; background:white; display:flex; gap:11px; text-align:left; padding:11px; color:var(--ink); }
.results button+button { border-top:1px solid #edf0eb; }
.results button:hover { background:#f5f8f3; }
.results button[aria-selected="true"] { background:#eaf2e9; }
.result-message { padding:13px 14px; color:var(--muted); font-size:12px; line-height:1.4; }
.result-pin { color:var(--accent); flex:none; padding-top:1px; }
.result-main { min-width:0; }
.result-main strong { display:block; font-size:12px; font-weight:700; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.result-main small { display:block; color:#849187; font-size:11px; margin-top:2px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.place-pane { grid-column:1; grid-row:2; min-height:0; overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; padding:23px 25px 27px; }
.place-pane .pane-heading { margin-bottom:20px; }
.place-body { display:flex; flex:1; flex-direction:column; }
.place-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.place-title-row>div { min-width:0; }
.place-overline { color:#ad6f55; margin-bottom:8px; }
h2 { font-size:clamp(30px,2.7vw,42px); line-height:1.06; font-weight:730; letter-spacing:-.065em; margin:0; overflow-wrap:anywhere; }
h2.reverse-address { font-size:clamp(21px,1.9vw,28px); line-height:1.18; letter-spacing:-.035em; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.place-icon { background:#fff3ed; border:1px solid #f9e3d8; width:45px; height:45px; border-radius:10px; display:grid; place-items:center; color:var(--accent); flex:none; }
.place-icon svg { width:23px; height:23px; }
.place-description { color:#718079; font-size:13px; line-height:1.58; margin:16px 0 23px; max-width:320px; }
.location-meta { display:grid; grid-template-columns:1fr 1fr; gap:15px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:16px 0; margin-top:auto; }
.location-meta>div { min-width:0; }
.location-meta>div+div { border-left:1px solid var(--line); padding-left:16px; }
.meta-label { display:block; font-size:9px; color:#98a39b; margin-bottom:5px; }
.location-meta strong { font-size:13px; white-space:nowrap; letter-spacing:-.018em; }
.place-actions { display:flex; align-items:center; gap:13px; flex-wrap:wrap; margin-top:21px; }
.primary-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--accent); border:1px solid var(--accent); color:#fff; padding:11px 14px; border-radius:6px; font-size:12px; font-weight:700; transition:background .2s,transform .2s; }
.primary-button:hover { background:var(--accent-dark); transform:translateY(-1px); }
.secondary-link { font-size:11px; font-weight:680; text-decoration:none; color:#51695d; white-space:nowrap; }
.secondary-link:hover { color:var(--accent-dark); text-decoration:underline; }
.map-frame { grid-column:2; grid-row:1 / span 2; min-height:0; min-width:0; position:relative; isolation:isolate; background:#e7ebe3; }
#map { position:absolute; inset:0; z-index:0; cursor:grab; }
#map.leaflet-dragging { cursor:grabbing; }
/* Cover fractional-pixel seams between Leaflet's 256px raster tiles. */
#map img.leaflet-tile { width:257px!important; height:257px!important; border:0!important; outline:0!important; mix-blend-mode:normal; }
.map-topline { position:absolute; z-index:500; top:16px; left:16px; right:16px; display:flex; align-items:center; justify-content:space-between; gap:10px; pointer-events:none; }
.layer-switch { display:inline-flex; align-items:center; gap:3px; border:1px solid #e8ebe5; border-radius:7px; padding:4px; background:#fffefa; box-shadow:0 5px 20px #18362921; pointer-events:auto; }
.layer-switch button { border:0; border-radius:4px; background:transparent; color:#5e7166; padding:8px 11px; font-size:11px; font-weight:720; line-height:1; white-space:nowrap; }
.layer-switch button:hover { background:#eaf0e9; }
.layer-switch button.active { background:var(--green); color:#fff; }
.layer-switch button.active:hover { background:#315949; }
.layer-switch button:focus-visible { outline:3px solid #b0cbb9; outline-offset:3px; }
.map-coordinates { position:absolute; z-index:500; bottom:17px; left:16px; display:inline-flex; align-items:center; gap:8px; background:#fffef9; color:#687a6c; box-shadow:0 5px 20px #18362918; border:1px solid #e8ebe5; border-radius:5px; padding:9px 11px; font-size:10px; font-weight:650; pointer-events:none; }
.map-tip { display:flex; align-items:center; gap:8px; position:absolute; bottom:25px; left:50%; transform:translateX(-50%); z-index:500; border-radius:100px; background:#25473e; color:#fff; white-space:nowrap; pointer-events:none; padding:10px 16px; box-shadow:0 10px 24px #1d34273d; font-size:11px; font-weight:650; transition:opacity .2s; }
.map-tip.hidden { opacity:0; }
.leaflet-control-zoom { border:0!important; box-shadow:0 5px 22px #18362922!important; }
.leaflet-control-zoom a { color:#355548!important; background:#fffef9!important; border-color:#e1e6df!important; width:37px!important; height:37px!important; line-height:37px!important; font-size:21px!important; }
.leaflet-control-zoom a:hover { background:#f4f7f1!important; }
.leaflet-bottom.leaflet-right .leaflet-control { margin-right:16px; margin-bottom:12px; }
.leaflet-control-attribution { background:#ffffffd9!important; font-size:10px!important; }
.custom-pin { position:relative; display:block; width:24px; height:24px; background:var(--accent); border:4px solid #fff; border-radius:50%; box-shadow:0 4px 10px #373c3366,0 0 0 1px #e96949; }
.custom-pin:before { content:""; position:absolute; inset:-11px; border:2px solid #e96949a6; border-radius:50%; }
.site-footer { flex:none; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:7px 1px 10px; color:#849088; letter-spacing:.09em; line-height:1.5; }
.site-footer>span:last-child { font-size:10px; font-weight:500; letter-spacing:0; }
.site-footer a { text-decoration:underline; text-decoration-color:#bbc8bb; text-underline-offset:2px; }
.footer-slash { color:var(--accent); padding:0 5px; }
@media(max-width:900px) { .intro p { display:none; } .explorer { grid-template-columns:minmax(270px,310px) minmax(0,1fr); } .search-pane,.place-pane { padding-left:22px; padding-right:22px; } .place-actions { align-items:flex-start; flex-direction:column; } .map-coordinates { display:none; } }
@media(max-width:680px) {
  .site-header { height:54px; padding:0 14px; }
  .brand { font-size:21px; }
  .intro,.site-footer,.preview-pill { display:none; }
  .header-caption { display:block; max-width:115px; text-align:right; line-height:1.25; font-size:12px; }
  .main-content { padding:8px; }
  .explorer { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto; border-radius:10px; }
  .search-pane,.map-frame,.place-pane { min-width:0; }
  .search-pane { grid-column:1; grid-row:1; max-height:min(35dvh,220px); padding:10px 12px; }
  .search-pane .pane-heading,.quick-search,.form-note { display:none; }
  .search-label { font-size:16px; margin-bottom:5px; }
  .search-field { height:44px; }
  .search-field button { width:36px; height:34px; }
  .search-status { margin-top:8px; padding:7px 9px; }
  .results button { min-height:46px; }
  .map-frame { grid-column:1; grid-row:2; min-height:0; z-index:3; }
  .map-topline { top:8px; left:8px; right:8px; gap:5px; }
  .place-pane { grid-column:1; grid-row:3; max-height:min(30dvh,200px); padding:9px 12px 10px; border-top:1px solid var(--line); }
  .place-pane .pane-heading,.place-overline,.place-icon { display:none; }
  h2 { font-size:clamp(20px,5.5vw,27px); }
  h2.reverse-address { font-size:clamp(17px,4vw,21px); line-height:1.2; }
  .place-description { max-width:none; margin:4px 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:11px; }
  .place-description.reverse-address { white-space:normal; overflow:visible; }
  .location-meta { gap:8px; padding:5px 0; margin-top:6px; }
  .location-meta>div+div { padding-left:9px; }
  .meta-label { margin-bottom:1px; }
  .location-meta strong { font-size:11px; }
  .place-actions { align-items:center; flex-direction:row; gap:8px; margin-top:7px; }
  .primary-button { padding:7px 9px; font-size:11px; }
  .secondary-link { font-size:10px; }
  .map-tip { display:none; }
}
@media(max-width:390px) { .place-actions { align-items:center; flex-direction:row; } .location-meta { gap:8px; } }
@media (min-width:520px) and (max-width:680px) and (max-height:500px) {
  .explorer { grid-template-columns:minmax(210px,38%) minmax(0,1fr); grid-template-rows:minmax(0,1fr) minmax(0,1fr); }
  .search-pane { grid-column:1; grid-row:1; max-height:none; }
  .map-frame { grid-column:2; grid-row:1 / span 2; }
  .place-pane { grid-column:1; grid-row:2; max-height:none; }
  .place-description { display:none; }
}
@media(max-width:360px) { .layer-switch button { padding:7px 6px; font-size:9px; } }

/* The layer menu stays compact over the map and scrolls independently. */
.layer-picker { position:relative; pointer-events:auto; min-width:0; }
.layer-trigger { display:flex; align-items:center; gap:8px; min-height:40px; max-width:min(330px,calc(100vw - 140px)); padding:7px 11px; background:#fffefa; border:1px solid #e8ebe5; border-radius:7px; box-shadow:0 5px 20px #18362921; color:var(--ink); font-size:11px; font-weight:740; }
.layer-trigger:hover,.layer-trigger[aria-expanded=true] { background:#f4f7f2; }
.layer-trigger-icon { font-size:19px; line-height:1; color:#5a7666; }
.layer-trigger-title { white-space:nowrap; }
.active-layer-label { color:#75867b; padding-left:8px; border-left:1px solid #dbe2d9; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.layer-chevron { font-size:17px; margin-left:1px; line-height:1; }
.overlay-count { display:inline-grid; place-items:center; flex:none; min-width:19px; height:19px; border-radius:10px; padding:0 5px; background:#e96949; color:white; font-size:10px; }
.layer-panel { position:absolute; top:calc(100% + 8px); left:0; width:min(335px,calc(100vw - 38px)); max-height:min(630px,calc(100dvh - 110px)); display:flex; flex-direction:column; background:#fffefa; border:1px solid #e0e6dd; border-radius:10px; box-shadow:0 18px 52px #17352840; overflow:hidden; }
.layer-panel[hidden] { display:none; }
.layer-panel-header { display:flex; justify-content:space-between; align-items:center; padding:18px 17px 10px; }
.layer-panel-header strong { font-size:15px; letter-spacing:-.025em; }
.layer-panel-header span { font-size:10px; font-weight:700; color:#8a968d; }
.layer-search-label { display:flex; align-items:center; gap:8px; margin:0 14px 9px; padding:0 11px; height:38px; border:1px solid #d8e1d8; border-radius:6px; color:#718478; }
.layer-search-label:focus-within { border-color:#74977c; box-shadow:0 0 0 3px #dbe9df; }
.layer-search-label span { font-size:23px; line-height:1; }
.layer-search-label input { border:0; outline:0; background:none; min-width:0; flex:1; font-size:12px; color:var(--ink); }
.layer-list { min-height:0; overflow:auto; overscroll-behavior:contain; padding:1px 9px 8px; scrollbar-width:thin; }
.layer-group-title { margin:9px 7px 5px; padding-top:10px; border-top:1px solid #e9ede7; color:#a4614e; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.layer-group-title:first-child { border:0; padding-top:0; margin-top:4px; }
.layer-option { display:flex; align-items:center; width:100%; padding:8px 9px; gap:10px; border:0; border-radius:6px; background:transparent; text-align:left; color:var(--ink); }
.layer-option:hover { background:#eef3ec; }
.layer-option[aria-pressed=true] { background:#eaf2e9; }
.layer-option .layer-radio { flex:none; width:17px; height:17px; border:1.5px solid #acb9ad; border-radius:50%; display:grid; place-items:center; }
.layer-option.overlay .layer-radio { border-radius:4px; }
.layer-option[aria-pressed=true] .layer-radio { border-color:#315c46; background:#315c46; color:white; }
.layer-option[aria-pressed=true] .layer-radio::after { content:""; width:6px; height:6px; background:white; border-radius:50%; }
.layer-option.overlay[aria-pressed=true] .layer-radio::after { content:"✓"; width:auto; height:auto; background:none; font-size:12px; line-height:1; }
.layer-option-text { min-width:0; flex:1; }
.layer-option-text strong { display:block; font-size:12px; font-weight:680; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.layer-option-text small { display:block; color:#88968d; font-size:10px; line-height:1.3; margin-top:2px; }
.layer-empty { padding:18px 10px; font-size:12px; color:#76887a; }
.layer-footnote { margin:0; padding:11px 16px 13px; border-top:1px solid #e9ede7; background:#fafbf7; color:#819085; font-size:10px; line-height:1.35; }
.layer-trigger:focus-visible,.layer-option:focus-visible { outline:3px solid #b0cbb9; outline-offset:2px; }
@media(max-width:680px) { .layer-trigger { max-width:calc(100vw - 139px); gap:6px; padding:7px 9px; } .layer-trigger-title { display:none; } .active-layer-label { border:0; padding:0; max-width:150px; } .layer-panel { position:fixed; z-index:1000; top:62px; left:8px; width:min(335px,calc(100vw - 16px)); max-height:calc(100dvh - 70px); } }
@media(max-width:360px) { .active-layer-label { max-width:105px; } .layer-trigger { max-width:calc(100vw - 124px); } }