:root {
    --cream:#f5f0e6; --cream-deep:#ece4d4; --cream-card:#fbf8f1;
    --amber:#c4893b; --amber-soft:#dcb079; --forest:#3d4a3a;
    --brown:#5c4033; --burgundy:#722f37; --burgundy-dark:#5a242b; --sage:#6b6f5e; --ink:#2c2620;
    --accent:#722f37;          /* dark red — the star */
    --shadow:0 14px 38px rgba(44,38,32,0.16); --shadow-sm:0 6px 18px rgba(44,38,32,0.10);
  }
  * { box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body { margin:0; padding:0; font-family:'Lato',sans-serif; color:var(--ink); background:var(--cream); line-height:1.6; }
  h1,h2,h3 { font-family:'Cormorant Garamond',serif; font-weight:600; margin:0; }
  a { color:inherit; }
  .wrap { max-width:1100px; margin:0 auto; padding:0 24px; }
  .eyebrow { font-family:'Lato',sans-serif; font-weight:700; letter-spacing:0.32em; text-transform:uppercase; font-size:11px; color:var(--accent); margin:0; }

  .pill { display:inline-flex; align-items:center; gap:8px; font-family:'Lato',sans-serif; font-weight:700; font-size:13px; letter-spacing:0.04em; padding:12px 24px; border-radius:999px; text-decoration:none; cursor:pointer; border:1.5px solid var(--accent); transition:all 0.18s ease; }
  .pill.solid { background:var(--accent); border-color:var(--accent); color:var(--cream); }
  .pill.solid:hover { background:var(--burgundy-dark); border-color:var(--burgundy-dark); transform:translateY(-2px); }
  .pill.ghost { background:transparent; color:var(--accent); }
  .pill.ghost:hover { background:var(--accent); color:var(--cream); transform:translateY(-2px); }

  /* ---------- nav: dark green, light uppercase links ---------- */
  .nav { position:sticky; top:0; z-index:1100; background:var(--forest); border-bottom:1px solid rgba(0,0,0,0.18); }
  .nav .wrap { display:flex; align-items:center; justify-content:space-between; height:58px; }
  .nav .brand { font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:600; color:var(--cream); text-decoration:none; }
  .nav .links { display:flex; gap:26px; align-items:center; }
  .nav .links a { text-decoration:none; font-size:12px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--cream); opacity:0.92; }
  .nav .links a:hover { color:var(--amber-soft); opacity:1; }

  /* ---------- full-screen map ---------- */
  .map-section { padding:0; }
  .map-frame { position:relative; width:100%; height:calc(100vh - 58px); }
  #mapcanvas { width:100%; height:100%; background:var(--cream); }
  .leaflet-tile-pane { filter:sepia(0.22) saturate(0.85) brightness(1.03) hue-rotate(-8deg); }

  /* floating, centered filter bar over the map */
  .filters {
    position:absolute; z-index:1000; top:16px; left:50%; transform:translateX(-50%);
    display:flex; gap:8px; align-items:center; flex-wrap:nowrap;
    background:rgba(245,240,230,0.94); padding:8px 10px; border-radius:999px;
    box-shadow:var(--shadow-sm); border:1px solid rgba(92,64,51,0.16);
    max-width:calc(100vw - 28px); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .filters::-webkit-scrollbar { display:none; }
  /* when the place panel is open, slide the filter bar clear of it instead of
     leaving it centered (and stuck) over/under the panel — and shrink its max-width
     to match the narrower space that's left, otherwise it still tries to stretch
     almost the full viewport width and ends up overhanging off the right edge */
  .map-frame.panel-open .filters { left:calc(400px + 34px); transform:none; max-width:calc(100vw - 400px - 48px); }
  @media (max-width:600px){ .map-frame.panel-open .filters { display:none; } }
  .chip { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:7px; line-height:1; border:1.5px solid rgba(92,64,51,0.28); background:var(--cream-card); color:var(--brown); font-family:'Lato',sans-serif; font-size:13px; font-weight:700; letter-spacing:0.02em; padding:9px 15px; border-radius:999px; cursor:pointer; transition:all 0.15s ease; white-space:nowrap; user-select:none; }
  .chip svg { flex:0 0 auto; }

  /* Browse (lists + cities) dropdown */
  .browse { position:relative; flex:0 0 auto; }
  .browse-menu { position:absolute; top:calc(100% + 8px); left:0; z-index:1300; min-width:200px; max-height:320px; overflow-y:auto; background:var(--cream-card); border:1px solid rgba(92,64,51,0.2); border-radius:14px; box-shadow:var(--shadow); padding:6px; }
  .bm-head { font-family:'Lato',sans-serif; font-size:9px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--sage); padding:8px 10px 4px; }
  .bm-item { display:block; width:100%; text-align:left; border:none; background:transparent; font-family:'Cormorant Garamond',serif; font-size:16px; color:var(--ink); padding:6px 10px; border-radius:8px; cursor:pointer; }
  .bm-item:hover { background:var(--accent); color:var(--cream); }

  /* active list/city banner */
  .viewbanner[hidden] { display:none; }
  .viewbanner { position:absolute; z-index:1000; top:66px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:10px; background:var(--forest); color:var(--cream); padding:8px 10px 8px 16px; border-radius:999px; box-shadow:var(--shadow-sm); max-width:calc(100vw - 28px); }
  .viewbanner .vb-label { font-family:'Cormorant Garamond',serif; font-size:18px; font-style:italic; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .viewbanner button { flex:0 0 auto; font-family:'Lato',sans-serif; font-size:10px; font-weight:700; letter-spacing:0.04em; border:1px solid rgba(245,240,230,0.5); background:transparent; color:var(--cream); border-radius:999px; padding:5px 10px; cursor:pointer; white-space:nowrap; }
  .viewbanner button:hover { background:var(--amber); border-color:var(--amber); color:var(--forest); }
  .chip[aria-pressed="false"] { opacity:0.4; }
  .chip:hover { transform:translateY(-1px); }
  .chip[aria-pressed="true"] { color:var(--cream); }
  .chip.coffee[aria-pressed="true"]{ background:var(--brown); border-color:var(--brown); }
  .chip.restaurant[aria-pressed="true"]{ background:var(--burgundy); border-color:var(--burgundy); }
  .chip.bookstore[aria-pressed="true"]{ background:var(--forest); border-color:var(--forest); }
  .chip.design[aria-pressed="true"]{ background:var(--amber); border-color:var(--amber); }
  .chip.other[aria-pressed="true"]{ background:var(--sage); border-color:var(--sage); }

  .status { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1200; background:var(--cream); border:1px solid rgba(92,64,51,0.25); padding:16px 22px; border-radius:8px; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:18px; color:var(--brown); box-shadow:var(--shadow-sm); }

  /* pins */
  .pin { width:34px; height:34px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); display:flex; align-items:center; justify-content:center; box-shadow:0 3px 6px rgba(44,38,32,0.4); border:2px solid var(--cream); }
  .pin svg { transform:rotate(45deg); }

  /* picking a place from the "places in view" list pans to it (no zoom change)
     and flashes the pin so it's easy to spot without losing the map's current
     zoom/bounds — see highlightMarker() in map.js */
  .pin.highlight { animation:pin-bounce 0.45s ease-in-out 2; box-shadow:0 0 0 9px rgba(114,47,55,0.45), 0 3px 6px rgba(44,38,32,0.4); z-index:1000; }
  @keyframes pin-bounce { 0%,100% { transform:rotate(-45deg) scale(1); } 50% { transform:rotate(-45deg) scale(1.35); } }
  .marker-cluster-small.highlight, .marker-cluster-medium.highlight, .marker-cluster-large.highlight { animation:cluster-bounce 0.45s ease-in-out 2; box-shadow:0 0 0 9px rgba(114,47,55,0.45); }
  @keyframes cluster-bounce { 0%,100% { transform:scale(1); } 50% { transform:scale(1.3); } }

  /* popup card (legacy, kept for reference/unused now that place details open in the side panel) */
  .leaflet-popup-content-wrapper { background:var(--cream-card); border-radius:10px; border:1px solid rgba(92,64,51,0.22); box-shadow:var(--shadow); padding:0; overflow:hidden; }
  .leaflet-popup-content { margin:0; width:268px !important; }
  .leaflet-popup-tip { background:var(--cream-card); }

  /* ---------- place side panel (Google-Maps-style detail panel) ---------- */
  .place-panel {
    position:absolute; z-index:1400; top:0; left:0; height:100%; width:400px; max-width:92vw;
    background:var(--cream-card); box-shadow:var(--shadow); overflow-y:auto;
    transform:translateX(-105%); transition:transform 0.28s ease;
  }
  .place-panel.open { transform:translateX(0); }
  .panel-close {
    position:absolute; top:12px; right:12px; z-index:5; width:32px; height:32px; border-radius:50%;
    border:none; background:rgba(44,38,32,0.55); color:#fff; font-size:20px; line-height:1;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
  }
  .panel-close:hover { background:rgba(44,38,32,0.8); }
  .place-panel .slides, .place-panel .slides img { height:300px; }
  @media (max-width:600px){ .place-panel { width:100%; max-width:100%; } }

  /* ---------- places-in-view list (shown on the left before a pin is opened) ---------- */
  .place-list {
    position:absolute; z-index:1350; top:0; left:0; height:100%; width:400px; max-width:92vw;
    background:var(--cream-card); box-shadow:var(--shadow);
    transform:translateX(-105%); transition:transform 0.28s ease;
    display:flex; flex-direction:column;
  }
  .place-list.open { transform:translateX(0); }
  /* headline + short description + one photo for a curated list view — pulled
     from the "Lists" tab in the sheet; hidden whenever there's no list active
     (default "places in view" browsing) or the list has no content filled in yet */
  .list-hero { flex:0 0 auto; padding:20px 20px 4px; border-bottom:1px solid rgba(92,64,51,0.15); }
  .list-hero-photo { width:100%; height:150px; border-radius:10px; overflow:hidden; background:var(--cream-deep); margin-bottom:14px; }
  .list-hero-photo img { width:100%; height:100%; object-fit:cover; display:block; }
  .list-hero-title { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:26px; color:var(--brown); margin:0 0 8px; }
  .list-hero-desc { font-family:'Lato',sans-serif; font-size:13px; line-height:1.6; color:var(--brown); opacity:0.85; margin:0 0 18px; }
  .place-list .list-header {
    flex:0 0 auto; padding:18px 20px 12px; border-bottom:1px solid rgba(92,64,51,0.15);
    font-family:'Cormorant Garamond',serif; font-style:italic; font-size:19px; color:var(--brown);
  }
  .place-list .list-scroll { flex:1 1 auto; overflow-y:auto; }
  .place-list .list-empty { padding:20px; font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--brown); opacity:0.65; }
  .place-row {
    display:flex; align-items:center; gap:10px; padding:12px 20px; cursor:pointer;
    border-bottom:1px solid rgba(92,64,51,0.08);
  }
  .place-row:hover { background:rgba(92,64,51,0.06); }
  .place-row .dot { width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
  .place-row .name { font-family:'Lato',sans-serif; font-size:14px; font-weight:700; color:var(--brown); flex:1 1 auto; }
  .place-row .cat { font-family:'Lato',sans-serif; font-size:11px; color:var(--brown); opacity:0.65; white-space:nowrap; }
  @media (max-width:600px){ .place-list { display:none; } }

  /* handle that opens/closes the places-in-view list — sits in the bottom-left
     corner, closed by default so the map gets the full stage on first paint, and
     slides along with the panel so it doubles as a close handle once it's open */
  .list-toggle {
    position:absolute; z-index:1360; bottom:20px; left:0;
    display:flex; align-items:center; gap:7px; border:none;
    background:var(--forest); color:var(--cream); border-radius:0 999px 999px 0;
    padding:12px 18px 12px 14px; font-family:'Lato',sans-serif; font-weight:700; font-size:11px;
    letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; box-shadow:var(--shadow-sm);
    transition:transform 0.28s ease;
  }
  .list-toggle:hover { background:var(--burgundy); }
  .map-frame.list-open .list-toggle { transform:translateX(400px); }
  .map-frame.panel-open .list-toggle { display:none; }
  @media (max-width:600px){ .list-toggle { display:none; } }

  /* a curated list is the whole point of a #list= link — no need for the
     category filter bar while one's open */
  .map-frame.list-view .filters { display:none; }

  @media (min-width:601px){
    .map-frame.list-open .filters {
      left:calc(400px + 34px); transform:none; max-width:calc(100vw - 400px - 48px);
    }
  }

  /* slideshow */
  .slides { position:relative; width:100%; height:160px; background:var(--cream-deep); border-bottom:1px solid rgba(92,64,51,0.18); }
  .slides img { display:none; width:100%; height:160px; object-fit:cover; cursor:zoom-in; }
  .slides img.on { display:block; }
  .slides.no-photo { display:flex; align-items:center; justify-content:center; }
  .slides.no-photo img { cursor:default; }
  .no-photo-inner { display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--sage); }
  .no-photo-inner span { font-family:'Lato',sans-serif; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; }

  /* full-screen photo gallery */
  .lightbox { position:fixed; inset:0; z-index:2000; background:rgba(20,16,12,0.94); display:none; align-items:center; justify-content:center; }
  .lightbox.open { display:flex; }
  .lightbox img { max-width:92vw; max-height:88vh; object-fit:contain; border-radius:4px; }
  .lightbox-close, .lightbox-nav { border:none; background:rgba(255,255,255,0.12); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; }
  .lightbox-close:hover, .lightbox-nav:hover { background:rgba(255,255,255,0.24); }
  .lightbox-close { position:absolute; top:18px; right:20px; width:40px; height:40px; border-radius:50%; font-size:20px; }
  .lightbox-nav { position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; font-size:22px; }
  .lightbox-nav.prev { left:16px; } .lightbox-nav.next { right:16px; }
  .lightbox-count { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,0.75); font-family:'Lato',sans-serif; font-size:12px; letter-spacing:0.08em; }
  @media (max-width:600px){ .lightbox-nav { width:38px; height:38px; font-size:18px; } }

  /* marker clusters, tinted to match the site palette */
  .marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background:rgba(196,137,59,0.35); }
  .marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div { background:var(--brown); color:var(--cream); font-family:'Lato',sans-serif; font-weight:700; }
  .leaflet-tooltip.place-tip { font-family:'Lato',sans-serif; font-size:10.5px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; background:var(--forest); color:var(--cream); border:none; padding:5px 9px; border-radius:6px; }
  .leaflet-tooltip.place-tip::before { border-top-color:var(--forest); }
  .snav { position:absolute; top:50%; transform:translateY(-50%); width:28px; height:28px; border:none; border-radius:50%; background:rgba(44,38,32,0.55); color:#fff; font-size:16px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
  .snav:hover { background:rgba(44,38,32,0.8); }
  .snav.prev { left:8px; } .snav.next { right:8px; }
  .dots { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); display:flex; gap:5px; }
  .dots i { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.6); }
  .dots i.on { background:#fff; }

  .card-body { padding:14px 16px 16px; }
  .tagrow { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:7px; }
  .tags { display:flex; flex-wrap:wrap; gap:5px; }
  .tag { display:inline-flex; align-items:center; gap:4px; font-family:'Lato',sans-serif; font-size:9.5px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; border:1px solid; border-radius:999px; padding:3px 8px; }
  .tag svg { flex:0 0 auto; }
  .copyicon { flex:0 0 auto; display:inline-flex; align-items:center; gap:4px; height:24px; padding:0 9px; font-family:'Lato',sans-serif; font-size:10px; font-weight:700; letter-spacing:0.04em; line-height:1; cursor:pointer; border:1px solid rgba(92,64,51,0.3); border-radius:999px; background:transparent; color:var(--sage); transition:all 0.15s; white-space:nowrap; }
  .copyicon svg { display:block; }
  .copyicon:hover { background:var(--accent); border-color:var(--accent); color:var(--cream); }
  .copyicon.done { background:var(--accent); border-color:var(--accent); color:var(--cream); }
  .chip.showall { border-color:var(--accent); color:var(--accent); }
  .chip.showall[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:var(--cream); }
  .about p + p { margin-top:14px; }
  .about-grid { display:grid; grid-template-columns:0.85fr 1fr; gap:44px; align-items:center; text-align:left; }
  .about-grid .rule { margin:0 0 10px; }
  .about-photo img { width:100%; aspect-ratio:5/6; object-fit:cover; border-radius:16px; box-shadow:var(--shadow); display:block; }
  @media (max-width:760px){
    .about-grid { grid-template-columns:1fr; gap:26px; text-align:center; }
    .about-grid .rule { margin:0 auto 10px; }
    .about-photo { max-width:340px; margin:0 auto; }
  }
  .card-cat { font-size:9.5px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; margin:0 0 4px; font-family:'Lato',sans-serif; }
  .card-cat.coffee{color:var(--brown);} .card-cat.restaurant{color:var(--burgundy);} .card-cat.bookstore{color:var(--forest);} .card-cat.design{color:var(--amber);} .card-cat.other{color:var(--sage);}
  .card-name { font-size:23px; line-height:1.05; margin:0 0 8px; color:var(--ink); }
  .card-desc { font-size:13px; line-height:1.5; color:#4a423a; margin:0 0 10px; }
  .card-meta { font-size:11.5px; color:var(--sage); margin:0 0 5px; display:flex; gap:5px; align-items:flex-start; }
  .card-meta.addr::before { content:"\1F4CD"; }
  .card-meta.seen::before { content:"\2766"; color:var(--accent); }
  .card-links { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
  .card-links a, .card-links button { flex:1 1 auto; text-align:center; text-decoration:none; font-family:'Lato',sans-serif; font-size:11px; font-weight:700; letter-spacing:0.04em; padding:8px 6px; border-radius:999px; border:1.5px solid var(--accent); color:var(--accent); background:transparent; transition:all 0.15s; white-space:nowrap; cursor:pointer; }
  .card-links a:hover, .card-links button:hover { background:var(--accent); color:var(--cream); }
  .card-links a.solid { background:var(--accent); border-color:var(--accent); color:var(--cream); }
  .card-links a.solid:hover { background:var(--burgundy-dark); border-color:var(--burgundy-dark); }

  /* about */
  .about { padding:70px 0; text-align:center; }
  .about h2 { font-size:clamp(26px,4.5vw,38px); color:var(--forest); }
  .about p { max-width:640px; margin:14px auto 0; font-size:16px; color:#4a423a; }
  .rule { width:54px; height:3px; background:var(--accent); border:none; margin:0 auto 6px; border-radius:2px; }

  /* footer */
  footer { background:var(--forest); color:var(--cream); padding:60px 0 40px; text-align:center; border-top:4px solid var(--accent); }
  footer .quote { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:clamp(22px,4vw,32px); margin:0 0 6px; }
  footer .small { color:var(--cream-deep); opacity:0.85; font-size:13px; }
  footer .social { display:flex; gap:12px; justify-content:center; margin:24px 0 18px; flex-wrap:wrap; }
  footer .social a { color:var(--cream); text-decoration:none; font-weight:700; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; border:1.5px solid rgba(245,240,230,0.5); padding:10px 22px; border-radius:999px; transition:all 0.15s; }
  footer .social a:hover { background:var(--accent); border-color:var(--accent); color:var(--cream); }
  footer .est { margin-top:22px; font-size:11px; letter-spacing:0.3em; text-transform:uppercase; color:var(--amber-soft); }

  .chip:focus-visible, .pill:focus-visible, .card-links a:focus-visible, footer .social a:focus-visible, .snav:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }