/* ==========================================================================
 * lc-explore.css — map-forward "Explore / Things to Do" directory styling for
 * /explore/ (forked from lc-restaurants-app.css, generic .lc-* classes).
 *
 * OTA information architecture (sidebar / results / demoted map), Lowcountry
 * Magazine skin. The type rule IS the aesthetic: SERIF for content (place
 * names, blurbs), MONTSERRAT-UPPERCASE 11px/2px-tracked for chrome (every
 * label, eyebrow, filter heading, button) — echoing the site nav. Both fonts
 * are already loaded by the theme; nothing here loads a font.
 *
 * Attractions are a places-to-visit directory — NO price, NO booking. The
 * restaurant fork's Reserve pill + price-rate rules are dropped; a Free/Paid
 * admission badge takes the rail's place. The shell/card/sidebar/popup/detail
 * classes are kept verbatim so the shared mobile bottom-bar reveal
 * (.lc-bottombar__panel .lc-sidebar) keeps working.
 * ========================================================================== */

.lc-app {
  --lc-ink:      #1d2721;
  --lc-muted:    #6b7772;
  --lc-line:     #e3e6e3;
  --lc-bg:       #ffffff;
  --lc-bg-soft:  #f6f7f5;
  --lc-accent:   #2f6f57;   /* lowcountry green */
  --lc-gold:     #b8863b;   /* featured accent  */
  --lc-shadow:   0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08);
  --lc-shadow-lift: 0 6px 18px rgba(0,0,0,.14);

  --lc-serif: "PT Serif", Georgia, "Times New Roman", serif;
  --lc-sans:  "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --lc-side-w: 264px;

  box-sizing: border-box;
  color: var(--lc-ink);
  background: var(--lc-bg);
  font-family: var(--lc-serif);
  font-size: 15px;
  line-height: 1.45;
}
.lc-app *, .lc-app *::before, .lc-app *::after { box-sizing: border-box; }

/* ---- the chrome voice ---------------------------------------------------
   One rule, applied everywhere a label/eyebrow/button appears. */
.lc-fgroup__head,
.lc-sidebar__title,
.lc-count,
.lc-sortwrap__label,
.lc-check__label,
.lc-check__count,
.lc-btn,
.lc-clear,
.lc-sheet-close,
.lc-viewtoggle button,
.lc-card__sub,
.lc-card__view,
.lc-card__ribbon,
.lc-chip,
.lc-admission,
.lc-pop__cta,
.lc-app select {
  font-family: var(--lc-sans);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 600;
}

/* ---- form controls ------------------------------------------------------ */
.lc-app input[type="text"],
.lc-app input[type="number"],
.lc-app select {
  height: 38px;
  width: 100%;
  padding: 0 10px;
  border: 1px solid var(--lc-line);
  border-radius: 2px;
  background: var(--lc-bg);
  color: var(--lc-ink);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.lc-app input[type="text"],
.lc-app input[type="number"] {
  font-family: var(--lc-serif);
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
}
.lc-app select {
  padding-right: 26px;
  background-image: linear-gradient(45deg, transparent 50%, var(--lc-muted) 50%),
                    linear-gradient(135deg, var(--lc-muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) 17px, calc(100% - 10px) 17px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.lc-app input:focus,
.lc-app select:focus { border-color: var(--lc-accent); }
.lc-app input::placeholder { color: var(--lc-muted); }

.lc-btn {
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--lc-line);
  border-radius: 2px;
  background: var(--lc-bg);
  color: var(--lc-ink);
  cursor: pointer;
  white-space: nowrap;
}
.lc-btn:hover { background: var(--lc-bg-soft); border-color: var(--lc-muted); }
.lc-btn.is-on,
.lc-btn--primary { background: var(--lc-accent); border-color: var(--lc-accent); color: #fff; }

/* ---- Top chrome bar (below 1200px only) --------------------------------- */
.lc-topbar {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--lc-bg);
  border-bottom: 1px solid var(--lc-line);
  position: relative;
  z-index: 500;
}
.lc-topbar__spacer { flex: 1 1 auto; }
.lc-filters-toggle,
.lc-maptoggle,
.lc-viewtoggle { display: none; }

.lc-viewtoggle {
  border: 1px solid var(--lc-line);
  border-radius: 2px;
  overflow: hidden;
}
.lc-viewtoggle button {
  border: 0;
  background: var(--lc-bg);
  color: var(--lc-ink);
  padding: 11px 16px;
  cursor: pointer;
}
.lc-viewtoggle button.is-on { background: var(--lc-accent); color: #fff; }

/* ---- Three-column shell ------------------------------------------------- */
.lc-shell {
  display: flex;
  align-items: stretch;
  height: calc(100vh - 220px);   /* JS overrides with a measured value */
  min-height: 480px;
}

/* --- column 1: sidebar --- */
.lc-sidebar {
  flex: 0 0 var(--lc-side-w);
  width: var(--lc-side-w);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--lc-bg);
  border-right: 1px solid var(--lc-line);
}
.lc-sidebar__inner { padding: 20px 18px 32px; }
.lc-sidebar__head { display: none; }   /* bottom-sheet header, mobile only */

.lc-fgroup { margin-bottom: 22px; }
.lc-fgroup__head {
  color: var(--lc-ink);
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--lc-line);   /* the hairline rule */
}
.lc-fgroup__body--row { display: flex; gap: 8px; }
.lc-fgroup__body--row .lc-num { width: 50%; }

/* --- custom checkbox: 15px square, accent fill + white tick when checked --- */
.lc-check {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 0;
  cursor: pointer;
  user-select: none;
}
.lc-check input {
  position: absolute;
  opacity: 0;
  width: 15px; height: 15px;
  margin: 0;
  cursor: pointer;
}
.lc-check__box {
  flex: 0 0 auto;
  position: relative;
  width: 15px; height: 15px;
  border: 1px solid var(--lc-line);
  border-radius: 2px;
  background: var(--lc-bg);
  transition: background .12s ease, border-color .12s ease;
}
.lc-check:hover .lc-check__box { border-color: var(--lc-accent); }
.lc-check input:focus-visible ~ .lc-check__box { outline: 2px solid var(--lc-accent); outline-offset: 2px; }
.lc-check input:checked ~ .lc-check__box {
  background: var(--lc-accent);
  border-color: var(--lc-accent);
}
/* white tick */
.lc-check__box::after {
  content: "";
  position: absolute;
  left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .12s ease;
}
.lc-check input:checked ~ .lc-check__box::after { transform: rotate(45deg) scale(1); }

.lc-check__label {
  flex: 1 1 auto;
  color: var(--lc-ink);
  line-height: 1.35;
}
.lc-check__count {
  flex: 0 0 auto;
  color: var(--lc-muted);
  letter-spacing: 1px;
  font-weight: 500;
}
.lc-check.is-empty .lc-check__label,
.lc-check.is-empty .lc-check__count { color: var(--lc-muted); opacity: .5; }

.lc-clear {
  display: block;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--lc-accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lc-clear:hover { color: var(--lc-ink); }

/* --- column 2: results --- */
.lc-results {
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--lc-bg-soft);
}
.lc-results__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--lc-line);
  background: var(--lc-bg-soft);
  position: sticky;
  top: 0;
  z-index: 5;
}
.lc-count {
  color: var(--lc-ink);
  white-space: nowrap;
  flex: 1 1 auto;
}
.lc-sortwrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.lc-sortwrap__label { color: var(--lc-muted); }
.lc-sortwrap select { width: auto; min-width: 150px; height: 34px; }
.lc-sortwrap select { background-position: calc(100% - 15px) 15px, calc(100% - 10px) 15px; }

/* ---- Result cards (horizontal) ------------------------------------------ */
.lc-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px;
}
.lc-card {
  position: relative;
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr) auto;
  gap: 16px;
  padding: 14px;
  background: var(--lc-bg);
  border: 1px solid var(--lc-line);
  border-radius: 3px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.lc-card:hover,
.lc-card.is-active { box-shadow: var(--lc-shadow-lift); border-color: var(--lc-muted); }
.lc-card.is-active { outline: 1px solid var(--lc-accent); outline-offset: -1px; }
.lc-card--featured { border-left: 2px solid var(--lc-gold); }

.lc-card__media {
  position: relative;
  width: 208px;
  height: 156px;
  background: #e7eae8;
  border-radius: 2px;
  overflow: hidden;
}
.lc-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lc-card__noimg {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--lc-muted);
  font-size: 13px;
  background: var(--lc-bg-soft);
}
.lc-card__ribbon {
  position: absolute;
  top: 10px; left: 0;
  background: var(--lc-gold);
  color: #fff;
  font-size: 9px;
  letter-spacing: 1.5px;
  padding: 4px 9px;
  border-radius: 0 2px 2px 0;
}

.lc-card__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 2px;
}
.lc-card__name {
  margin: 0;
  font-family: var(--lc-serif);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--lc-ink);
}
.lc-card__sub { color: var(--lc-muted); font-size: 10px; }
.lc-card__rating { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* --- rail: admission badge (top) + View action (bottom) --- */
.lc-card__rail {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  text-align: right;
  padding-left: 8px;
  min-width: 108px;
}
.lc-card__admission { display: flex; justify-content: flex-end; }
.lc-card__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.lc-card__view {
  border: 1px solid var(--lc-accent);
  color: var(--lc-accent);
  padding: 8px 14px;
  border-radius: 2px;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.lc-card:hover .lc-card__view { background: var(--lc-accent); color: #fff; }

/* --- Free / Paid admission pill --- */
.lc-admission {
  font-size: 10px;
  letter-spacing: 1.5px;
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid var(--lc-line);
  white-space: nowrap;
  line-height: 1.7;
}
.lc-admission--free { color: #fff; background: var(--lc-accent); border-color: var(--lc-accent); }
.lc-admission--paid { color: var(--lc-muted); background: var(--lc-bg-soft); }

/* --- editorial: notable-for hook line --- */
.lc-card__bestfor, .lc-detail__bestfor {
  font-family: var(--lc-serif); font-size: 13px; color: var(--lc-ink);
  margin-top: 6px; line-height: 1.5;
}
.lc-detail__bestfor { font-size: 14px; margin-top: 10px; }

/* --- column 3: map --- */
.lc-map {
  flex: 0 0 38%;
  width: 38%;
  min-width: 380px;
  min-height: 300px;
  background: #dfe4e2;
  border-left: 1px solid var(--lc-line);
}

/* ---- List states / footer ---------------------------------------------- */
.lc-state {
  padding: 48px 24px;
  text-align: center;
  color: var(--lc-muted);
  font-family: var(--lc-serif);
  font-size: 15px;
}
.lc-loadmore-wrap { padding: 4px 20px 24px; text-align: center; }
.lc-attr {
  margin: 0 20px;
  padding: 14px 0 24px;
  font-family: var(--lc-serif);
  font-size: 12px;
  line-height: 1.5;
  color: var(--lc-muted);
  border-top: 1px solid var(--lc-line);
}
.lc-spinner {
  padding: 18px; text-align: center;
  color: var(--lc-muted);
  font-family: var(--lc-sans);
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
}

/* ---- Rating star markers (L.divIcon) -----------------------------------
   Leaflet transforms the wrapper element to position it, so the wrapper is
   given zero size and the visible pill is an inner span centered on the
   coordinate via its own translate(-50%,-50%). */
.lc-marker-wrap { background: none !important; border: none !important; width: 0; height: 0; }
.lc-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-block;
  padding: 3px 9px;
  background: var(--lc-bg);
  color: var(--lc-ink);
  font-family: var(--lc-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  line-height: 1.2;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 1px 4px rgba(0,0,0,.28);
  white-space: nowrap;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .1s ease;
}
.lc-marker--featured { background: var(--lc-gold); color: #fff; border-color: var(--lc-gold); }
.lc-marker--active {
  transform: translate(-50%, -50%) scale(1.18);
  z-index: 1000 !important;
  box-shadow: 0 3px 12px rgba(0,0,0,.4);
  background: var(--lc-accent);
  color: #fff;
  border-color: var(--lc-accent);
}

/* ---- Marker popup card -------------------------------------------------- */
.lc-pop .leaflet-popup-content-wrapper {
  padding: 0;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(0,0,0,.28);
}
.lc-pop .leaflet-popup-content { margin: 0; width: 212px !important; line-height: 1.35; }
.lc-pop a.lc-pop__card,
.lc-pop__card { display: block; text-decoration: none; color: var(--lc-ink); cursor: pointer; }
.lc-pop__media { width: 100%; height: 132px; background: var(--lc-bg-soft); overflow: hidden; }
.lc-pop__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lc-pop__media--empty {
  display: flex; align-items: center; justify-content: center;
  color: var(--lc-muted); font-size: 12px;
}
.lc-pop__body { padding: 10px 11px 11px; }
.lc-pop__addr {
  font-family: var(--lc-serif);
  font-size: 15px; font-weight: 700; line-height: 1.25;
  color: var(--lc-ink);
}
.lc-pop__meta { font-family: var(--lc-serif); font-size: 12.5px; color: var(--lc-ink); margin-top: 4px; }
.lc-pop__meta b { font-weight: 700; }
.lc-pop__actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.lc-pop__actions .lc-admission { font-size: 9px; letter-spacing: 1.5px; padding: 2px 8px; }
.lc-pop__cta { margin-top: 0; font-size: 9px; color: var(--lc-accent); }
.lc-pop__card:hover .lc-pop__cta { text-decoration: underline; }
.lc-pop__state {
  padding: 20px 16px; text-align: center; color: var(--lc-muted);
  font-family: var(--lc-sans); font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
}

/* ---- Real-data bits (Google Places): rating star ------------------------ */
.lc-star { color: var(--lc-gold); }
.lc-card__rating, .lc-detail__rating {
  font-family: var(--lc-serif); font-size: 14px; color: var(--lc-ink); margin-top: 4px;
}
.lc-card__rating b, .lc-detail__rating b { font-weight: 700; }
.lc-rev { color: var(--lc-muted); font-size: 13px; }
.lc-card__addr {
  font-family: var(--lc-serif); font-size: 12.5px; line-height: 1.4;
  color: var(--lc-muted); margin-top: 6px;
}

/* ==========================================================================
   TABLET (960–1199px): map behind a "Show map" toggle; sidebar stays.
   ========================================================================== */
@media (max-width: 1199px) {
  .lc-topbar { display: flex; }
  .lc-maptoggle { display: inline-flex; align-items: center; }

  .lc-shell[data-view="list"] .lc-map { display: none; }
  .lc-shell[data-view="map"]  .lc-results { display: none; }
  .lc-shell[data-view="map"]  .lc-map { display: block; flex: 1 1 auto; width: auto; }

  .lc-card { grid-template-columns: 176px minmax(0, 1fr) auto; }
  .lc-card__media { width: 176px; height: 132px; }
}

/* ==========================================================================
   MOBILE (<960px): sidebar = bottom-bar reveal panel (or a bottom sheet in the
   no-bottombar fallback); map behind List/Map; cards full-width with the photo
   on TOP.
   ========================================================================== */
@media (max-width: 959px) {
  .lc-maptoggle { display: none; }
  .lc-viewtoggle { display: inline-flex; }

  /* The site-wide bottom bar (lc-mobile-nav) adopted the Filters reveal +
     List/Map, so .lc-topbar is left holding nothing but its own padding and
     border — hide it, giving mobile ONE bar instead of two. lc-explore.js adds
     this class to the root ONLY after the handover succeeded, so if the bottom
     bar is absent the topbar keeps rendering as the fallback. */
  .lc-app.lc-has-bottombar .lc-topbar { display: none; }

  .lc-shell { height: auto; min-height: 0; display: block; }

  /* --- sidebar: no longer a bottom sheet -----------------------------------
     The site bottom bar's funnel reveal (lc-mobile-nav addReveal) MOVES the
     .lc-sidebar into its docked .lc-bottombar__panel on mobile and returns it
     to the shell (column 1) on desktop. So the fixed slide-up sheet is retired:
     the sidebar becomes a plain full-width, stacked block. These base mobile
     rules also cover the no-bottombar FALLBACK (the sidebar renders inline at
     the top of the shell, still inside .lc-app so its tokens resolve). */
  .lc-sidebar {
    width: auto;
    max-height: none;
    border-right: 0;
  }
  /* Sheet header + its "Done" button are retired — the reveal panel supplies
     its own funnel button and close affordances. */
  .lc-sidebar__head { display: none; }

  /* --- sidebar INSIDE the bottom bar's reveal panel ------------------------
     The panel lives at <body> level, OUTSIDE .lc-app, so the app's design
     tokens and its `.lc-app input` / box-sizing rules no longer reach the moved
     sidebar. Re-declare exactly what the filter UI needs — the same pattern the
     detail overlay uses. The panel itself owns the scroll + skin; render the
     groups full-width. */
  .lc-bottombar__panel .lc-sidebar {
    --lc-ink: #1d2721; --lc-muted: #6b7772; --lc-line: #e3e6e3;
    --lc-bg: #ffffff; --lc-bg-soft: #f6f7f5; --lc-accent: #2f6f57; --lc-gold: #b8863b;
    --lc-serif: "PT Serif", Georgia, "Times New Roman", serif;
    --lc-sans: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
    width: auto;
    max-height: none;
    overflow: visible;
    -webkit-overflow-scrolling: auto;
    border-right: 0;
    background: transparent;
    color: var(--lc-ink);
    font-family: var(--lc-serif);
    font-size: 15px;
    line-height: 1.45;
  }
  .lc-bottombar__panel .lc-sidebar,
  .lc-bottombar__panel .lc-sidebar *,
  .lc-bottombar__panel .lc-sidebar *::before,
  .lc-bottombar__panel .lc-sidebar *::after { box-sizing: border-box; }
  .lc-bottombar__panel .lc-sidebar__inner { padding: 12px 15px 16px; }
  .lc-bottombar__panel .lc-sidebar__head,
  .lc-bottombar__panel .lc-sheet-close { display: none; }
  .lc-bottombar__panel .lc-sidebar input[type="text"] {
    height: 38px; width: 100%; padding: 0 10px;
    border: 1px solid var(--lc-line); border-radius: 2px;
    background: var(--lc-bg); color: var(--lc-ink); outline: none;
    -webkit-appearance: none; appearance: none;
    font-family: var(--lc-serif); font-size: 14px;
    text-transform: none; letter-spacing: 0;
  }
  .lc-bottombar__panel .lc-sidebar input[type="text"]:focus { border-color: var(--lc-accent); }
  .lc-bottombar__panel .lc-sidebar input[type="text"]::placeholder { color: var(--lc-muted); }

  /* --lc-shell-h is measured and published by sizeShell() in lc-explore.js: it
     accounts for the real shell offset AND the fixed bottom bar's height. The
     calc() is only a first-paint / no-JS fallback. */
  .lc-results, .lc-map { width: 100%; }
  /* The results list is NOT its own scroller on mobile — the cards flow and the PAGE scrolls.
     Measured on the listings directory, which had the same shape: a fixed-height pane sitting
     below a screenful of heading crops the first card and reads as the end of the page, and a
     scroll gesture inside it either moves a hidden inner scrollbar or does nothing, with no
     way for the reader to tell which they are getting. height:auto here deliberately drops
     the --lc-shell-h dependency for list view; the map below still needs it. */
  .lc-shell[data-view="list"] .lc-results {
    display: block;
    height: auto;
    overflow: visible;
  }
  .lc-shell[data-view="map"]  .lc-map {
    display: block; height: var(--lc-shell-h, calc(100vh - 120px));
    min-width: 0; border-left: 0;
  }

  .lc-results__head { padding: 14px 14px 10px; }
  .lc-sortwrap__label { display: none; }
  .lc-sortwrap select { min-width: 132px; }
  .lc-cards { padding: 14px; gap: 14px; }

  /* --- photo on top --- */
  .lc-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .lc-card__media { width: 100%; height: 190px; }
  .lc-card__rail {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    padding-left: 0;
    padding-top: 10px;
    border-top: 1px solid var(--lc-line);
  }
  .lc-card__actions { flex-direction: row; align-items: center; gap: 10px; }
  .lc-attr { margin: 0 14px; }
}

@media (max-width: 420px) {
  .lc-card__media { height: 160px; }
  .lc-topbar { padding: 10px 12px; }
  .lc-btn { padding: 0 12px; }
}

/* ==========================================================================
 * Detail overlay — fallback only (cards carry real permalinks). Appended to
 * <body>, so it is OUTSIDE .lc-app and must declare its own tokens.
 * ========================================================================== */
.lc-detail {
  --lc-ink: #1d2721; --lc-muted: #6b7772; --lc-line: #e3e6e3;
  --lc-bg: #fff; --lc-bg-soft: #f6f7f5; --lc-accent: #2f6f57; --lc-gold: #b8863b;
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(20, 30, 25, .55);
  -webkit-tap-highlight-color: transparent;
}
.lc-detail__panel {
  position: relative; background: var(--lc-bg); color: var(--lc-ink);
  width: 100%; max-width: 560px; max-height: calc(100vh - 48px);
  overflow-y: auto; border-radius: 4px;
  box-shadow: 0 12px 48px rgba(0,0,0,.4);
  font-family: "PT Serif", Georgia, serif;
}
.lc-detail__close {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.9); color: var(--lc-ink);
  font-size: 26px; line-height: 40px; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.lc-detail__close:hover { background: #fff; }
.lc-detail__media {
  position: relative; height: 240px; background: var(--lc-bg-soft);
}
.lc-detail__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lc-detail__media--empty {
  display: flex; align-items: center; justify-content: center;
  color: var(--lc-muted);
  font: 600 11px/1 "Montserrat", sans-serif; letter-spacing: 2px; text-transform: uppercase;
}
.lc-detail__body { padding: 20px 22px 24px; }
.lc-detail__name { font-family: "PT Serif", Georgia, serif; font-size: 26px; margin: 0 0 4px; color: var(--lc-ink); }
.lc-detail__sub {
  font: 600 10px/1.4 "Montserrat", sans-serif; letter-spacing: 2px; text-transform: uppercase;
  color: var(--lc-muted); margin-bottom: 10px;
}
.lc-detail__blurb { font-size: 15px; line-height: 1.6; margin: 14px 0; color: var(--lc-ink); }
.lc-detail__rate { margin-top: 18px; }
.lc-detail__rating { margin-top: 8px; font-size: 15px; }
.lc-detail__addr {
  font-family: var(--lc-serif); font-size: 14px; line-height: 1.5;
  color: var(--lc-muted); margin-top: 12px;
}
.lc-detail__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.lc-detail__book {
  flex: 1 1 auto; text-align: center;
  font-family: var(--lc-sans); font-weight: 600; font-size: 12px;
  letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none;
  background: var(--lc-accent); color: #fff;
  padding: 13px 18px; border-radius: 3px;
}
.lc-detail__book:hover { background: #285f4a; }
.lc-detail__call {
  flex: 0 0 auto; text-align: center;
  font-family: var(--lc-sans); font-weight: 600; font-size: 12px;
  letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none;
  border: 1px solid var(--lc-line); color: var(--lc-ink);
  padding: 13px 18px; border-radius: 3px;
}
.lc-detail__call:hover { border-color: var(--lc-accent); color: var(--lc-accent); }
@media (max-width: 959px) {
  /* Bottom sheet on mobile, clearing the fixed bottom bar. */
  .lc-detail { align-items: flex-end; padding: 0; }
  .lc-detail__panel {
    max-width: none; border-radius: 12px 12px 0 0;
    max-height: calc(100vh - var(--lc-bottombar-h, 56px) - env(safe-area-inset-bottom, 0px) - 24px);
  }
  .lc-detail__media { height: 200px; }
}


/* ---- Loading ghost (lc-motion.css, specimen 01) ---------------------------
   The placeholder mirrors .lc-card__media at EVERY breakpoint. A ghost of the
   wrong size still lets the layout jump when the real cards land, which is the
   one thing it exists to prevent — so these track the card rules above, and have
   to be changed with them. */
.lc-skel-grid { --lc-skel-thumb: 208px; --lc-skel-thumb-h: 156px; --lc-skel-radius: 2px; }
@media (max-width: 1199px) {
  .lc-skel-grid { --lc-skel-thumb: 176px; --lc-skel-thumb-h: 132px; }
}
@media (max-width: 959px) {
  /* the card stacks here — media goes full width, so the ghost stops being a row */
  .lc-skel-card.is-row { grid-template-columns: 1fr; }
  .lc-skel-grid { --lc-skel-thumb-h: 190px; }
}
@media (max-width: 420px) {
  .lc-skel-grid { --lc-skel-thumb-h: 160px; }
}


/* ==========================================================================
 * THE OPENING BAND  (.lcx-open — server-rendered by lc-explore-directory.php,
 * a SIBLING of #lc-explore-app, above it)
 *
 * The archive shipped with no heading at all. The page's own wp_head rule hides
 * .uk-article-title / .tm-page-title inside #tm-main so that an app-shell
 * directory can supply its own title in its own voice; this one never supplied
 * one. Every class below is deliberately outside that rule.
 *
 * A masthead, not a hero. sizeShell() in lc-explore.js measures the space left
 * BELOW this band and gives the remainder to the shell, so every pixel here is a
 * pixel off the first screen of the directory. Held near 100px on a laptop, and
 * trimmed again under 820px of window height, for exactly that reason.
 *
 * It sits above .lc-app and so cannot inherit the app's custom properties. It
 * re-declares only the three it needs, at the app's own values.
 * ========================================================================== */
.lcx-open {
  --lcx-ink:  #1d2721;
  /* One step darker than the app's own --lc-muted (#6b7772), which measures
     4.34:1 against this ground — under the 4.5:1 AA floor, and every use of the
     token here is 10px uppercase, so the large-text exemption does not apply.
     This one measures 5.71:1 without reading as a second grey family. */
  --lcx-muted: #5a645f;
  --lcx-line: #e3e6e3;

  box-sizing: border-box;
  background: #f6f7f5;
  border-bottom: 1px solid var(--lcx-line);
  padding: clamp(17px, 1.9vw, 25px) clamp(20px, 5vw, 56px) clamp(15px, 1.7vw, 21px);
}
.lcx-open *, .lcx-open *::before, .lcx-open *::after { box-sizing: border-box; }

.lcx-open__h {
  margin: 0;
  font-family: "PT Serif", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--lcx-ink);
  max-width: 26ch;
  text-wrap: balance;
}

/* Scale, spread and cost — the three things a reader cannot get from a map of
   pins. Set apart from the heading by weight and case rather than by a rule. */
.lcx-open__facts {
  margin: 11px 0 0;
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1.9;
  color: var(--lcx-muted);
}
.lcx-open__sep { color: #b9c0bb; }
/* A wrap lands BETWEEN facts, never through the middle of one. */
.lcx-open__fact { white-space: nowrap; }

/* ---- wide screens: heading and facts share one baseline -------------------
   Below 1100px they stack. Above it the fact line moves to the far end of a
   measure that was otherwise ~800px of nothing beside a 500px heading, which
   returns ~28px of height to the map. */
@media (min-width: 1100px) {
  .lcx-open {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 48px;
  }
  .lcx-open__facts { margin: 0 0 4px; text-align: right; flex: 0 0 auto; }
}

/* ---- and wider still: the heading straightens out to one line -------------
   The 26ch measure below is right for a stacked heading and wrong for this one:
   it holds the title to two lines while the quarter of the band beside it stays
   empty, which reads as an unresolved block rather than a masthead rule. Where
   the row is wide enough to carry the title and the facts on ONE baseline, it
   does — and the band gives ~38px of height back to the map.

   1360px is the width at which the measured title (727px at 38px) and fact line
   (424px) plus their gap clear the gutters. Narrower than that the cap stays on,
   because a heading squeezed into the space a non-shrinking fact line leaves is
   three ragged lines, which is worse than two even ones. */
@media (min-width: 1360px) {
  .lcx-open__h { max-width: none; }
}

/* ---- short laptops --------------------------------------------------------
   Height is the axis these bands get wrong: the band is the same size whatever
   the window height, while the shell below is measured from its bottom edge. On
   a 768px-tall laptop that difference is the whole of the first card. Sizes
   only — same band, ~20px shorter. */
@media (min-width: 701px) and (max-height: 820px) {
  .lcx-open { padding-top: 14px; padding-bottom: 12px; }
  .lcx-open__h { font-size: clamp(24px, 2.6vw, 30px); }
}

/* ---- narrow ---------------------------------------------------------------
   Gutter drops to the sidebar's own 18px, where the band is the full width of a
   phone and a 56px indent would be a third of the measure. */
@media (max-width: 700px) {
  .lcx-open { padding: 15px 18px 13px; }
  .lcx-open__h { font-size: clamp(23px, 6.9vw, 30px); max-width: none; }
  .lcx-open__facts { margin-top: 8px; font-size: 9px; letter-spacing: 1.1px; line-height: 1.85; }
}

/* ==========================================================================
 * THE VOID PANEL — what the results column holds when the filters return nothing.
 *
 * The shape is the sidebar's own vocabulary turned ninety degrees: a heading in
 * the chrome voice with a hairline under it, then a ledger of the reader's
 * choices with a count beside each. The column already reads that way on the
 * left, so the panel arrives as the same page rather than as a component.
 *
 * ONE white surface appears on this screen and it is the row worth pressing.
 * Everything else sits on the column's own ground, so white means actionable
 * here — the recommended row, and the three cards below it.
 * ========================================================================== */

/* ---- the bar above the panel -------------------------------------------
   A sort control cannot order nothing, and the count line now carries the
   panel's headline for a reader who is not looking at it — so the bar keeps
   its one announcement and loses its height. Collapsed rather than removed:
   display:none would take the headline out of the accessibility tree with it,
   and the sticky strip left behind would otherwise read as a rule under
   nothing. */
.lc-results.is-void .lc-results__head {
  padding: 0;
  min-height: 0;
  border-bottom: 0;
}
.lc-results.is-void .lc-sortwrap { display: none; }
.lc-results.is-void .lc-count {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- the panel ---------------------------------------------------------- */
.lc-void {
  /* The results column grows with the viewport; a ledger does not. Past about
     this width the act at the right edge loses its tie to the value at the
     left, and the headline runs past a readable measure. */
  max-width: 640px;
  padding: 34px 20px 22px;
}

.lc-void__head {
  margin: 0;
  font-family: var(--lc-serif);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--lc-ink);
  /* Two or three lines of serif carry the weight a single long line does not,
     and this is the only mass on the screen until the photographs below. */
  max-width: 440px;
  text-wrap: balance;
}

.lc-void__sub {
  margin: 14px 0 0;
  font-family: var(--lc-serif);
  font-size: 17px;
  /* Pixels, for the same reason as the row figures: this line is held open
     before the sentence exists and both heights have to agree. */
  line-height: 26px;
  /* The answer, not a qualification of the headline — so it is set in ink at
     reading size rather than dropped to the muted grey used for asides. Set a
     step above body copy so the opening reads as a display line and a deck
     rather than as a heading with a caption under it. */
  color: var(--lc-ink);
  max-width: 500px;
  /* These sentences are assembled from a town name and a figure, so their
     length is not knowable here — the two lines they usually take must not be
     allowed to end on a one-word last line. */
  text-wrap: pretty;
}
.lc-void__sub:empty { display: none; }

/* The deck names the recommended filter, so it is written by the same reply that
   fills the row figures and lands at the same moment. Reserving the figures
   alone leaves this line to appear underneath the headline and shove the ledger,
   the shelf and the photographs down the page — measured at 40px, which is the
   larger of the two movements.
   Held open on the same condition the panel itself uses to decide whether there
   is a deck at all: a superlative over one filter is a sentence about nothing,
   so a single-row list is never given one, and the panel marks itself accordingly
   rather than leaving a selector to work the same rule out for a second time.
   One line is reserved, which is what the sentence takes at this column width;
   where it wraps, what is left to absorb is a line rather than the whole
   paragraph. */
.lc-void.is-decked .lc-void__sub:empty {
  display: block;
  min-height: 26px;
}

/* ---- the way out of an off-map result -----------------------------------
   The only filled element the panel ever draws. It is the whole hierarchy in
   this state: with it on screen the list below needs no demoting. */
.lc-void__go {
  display: inline-block;
  margin-top: 22px;
  padding: 14px 22px;
  border: 1px solid var(--lc-accent);
  border-radius: 2px;
  background: var(--lc-accent);
  color: #fff;
  font-family: var(--lc-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.lc-void__go:hover { background: #285f4a; border-color: #285f4a; }
/* Darker still under the finger. The first pair is the fallback and is the same
   shade as the hover above, so a browser without color-mix loses the distinct
   press rather than the press feedback. */
.lc-void__go:active {
  background: #285f4a;
  background: color-mix(in srgb, var(--lc-accent) 78%, #000);
  border-color: #285f4a;
  border-color: color-mix(in srgb, var(--lc-accent) 78%, #000);
}
/* An accent ring on an accent fill is not a ring. */
.lc-void__go:focus-visible { outline: 2px solid var(--lc-ink); outline-offset: 3px; }

/* ---- the ledger --------------------------------------------------------- */
.lc-void__acts { margin-top: 30px; }
/* Where the map is the way out, the filters are the second answer and a rule
   says so without restating it in words. */
.lc-void__go + .lc-void__acts {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--lc-line);
}

.lc-void__lbl {
  margin: 0 0 2px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--lc-line);   /* the sidebar's hairline rule */
  font-family: var(--lc-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--lc-ink);
}

.lc-void__list {
  /* Pulled out past the panel's padding so the row's ground bleeds wider than
     its text: the text column stays aligned under the headline while the
     hover state reads as a row of a table rather than as a chip. */
  margin: 0 -14px;
  padding: 0;
  list-style: none;
  /* Closed at the foot as well as the head: a ledger that trails off leaves the
     clear-all below it belonging to nothing. */
  border-bottom: 1px solid var(--lc-line);
}
.lc-void__list li + li { border-top: 1px solid var(--lc-line); }

.lc-void__drop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
  row-gap: 0;            /* the spans carry their own spacing — see __n:empty */
  width: 100%;
  padding: 12px 14px 13px;
  border: 0;
  border-radius: 2px;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background .16s ease, box-shadow .16s ease;
}
/* Elevation answers the pointer; the accent is spoken for. A row lit accent on
   hover is indistinguishable from the recommended row sitting next to it, which
   costs the recommendation the moment the reader moves the mouse. */
.lc-void__drop:hover {
  background: var(--lc-bg);
  box-shadow: var(--lc-shadow), inset 2px 0 0 var(--lc-muted);
}
/* Full-bleed rows sit against the column's edge, so an outset ring would be
   clipped on one side. */
.lc-void__drop:focus-visible { outline: 2px solid var(--lc-accent); outline-offset: -2px; }
/* Pressing a row refetches the directory, so the press is acknowledged before
   the results can answer: the lift goes and the row settles back onto the page. */
.lc-void__drop:active { box-shadow: inset 2px 0 0 var(--lc-muted); }

.lc-void__dim,
.lc-void__val,
.lc-void__n { grid-column: 1; }
/* Anchored to the value's own line rather than centred over the whole block, so
   it holds the same optical position whether or not the row carries a count. */
.lc-void__act { grid-column: 2; grid-row: 2; align-self: center; }

.lc-void__dim {
  display: block;
  margin-bottom: 5px;
  font-family: var(--lc-sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--lc-muted);
}
.lc-void__val {
  display: block;
  font-family: var(--lc-serif);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--lc-ink);
}
.lc-void__n {
  display: block;
  margin-top: 6px;
  font-family: var(--lc-sans);
  font-weight: 500;
  font-size: 10px;
  /* Stated in pixels rather than inherited, because the line this figure
     occupies has to be reserved before the figure exists and the two heights
     must agree exactly — see .is-probing below. */
  line-height: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--lc-muted);
}
/* A probe that never answered, and every row in the off-map state, carry no
   number. Taking the span out of flow entirely is what stops the row keeping
   a third line of empty space where the figure would have gone. */
.lc-void__n:empty { display: none; }

/* ---- while the figures are still being asked for ------------------------
   The per-row counts answer about a second and a half after the rows paint, so
   collapsing their line in the meantime would grow every row at once and shove
   the photographs down the page while the opening sentence is still being read.
   The line is held open instead: the same 14px box the figure will occupy, plus
   the same margin above it, so the row is its final height from first paint.

   Empty and reserved, not filled with a placeholder character — there is
   nothing to announce yet, and a dash or an ellipsis here would be a figure the
   panel does not have.

   A row whose request fails keeps no reserved line: the class comes off when
   the requests settle, and the rule above then collapses it as before. */
.lc-void.is-probing .lc-void__n:empty {
  display: block;
  min-height: 14px;
}

.lc-void__act {
  font-family: var(--lc-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--lc-muted);
  /* Drawn at rest, not revealed on hover: there is no hover on a phone, and the
     row has to say it is pressable before it is touched. The hairline token is
     tuned for white and all but vanishes on this column's ground, so the rule
     is mixed from the muted token instead — which keeps it tracking the theme
     rather than a hex typed in here. The shorthand above is the fallback. */
  border-bottom: 1px solid var(--lc-line);
  border-bottom-color: color-mix(in srgb, var(--lc-muted) 45%, transparent);
  padding-bottom: 2px;
  transition: color .16s ease, border-color .16s ease;
}
.lc-void__drop:hover .lc-void__act,
.lc-void__drop:focus-visible .lc-void__act {
  color: var(--lc-ink);
  border-color: var(--lc-ink);
}

/* ---- the recommended row -----------------------------------------------
   The one filter whose removal recovers the most. It is lit rather than
   labelled: the white ground the other rows only reach under the pointer, plus
   the accent, which nothing else in the list may use. Flat at rest — elevation
   still means "pointing at this" — and it lifts on hover like any other row. */
.lc-void__list .is-widest .lc-void__drop {
  background: var(--lc-bg);
  box-shadow: inset 3px 0 0 var(--lc-accent);
}
.lc-void__list .is-widest .lc-void__drop:hover {
  box-shadow: var(--lc-shadow), inset 3px 0 0 var(--lc-accent);
}
.lc-void__list .is-widest .lc-void__drop:active {
  box-shadow: inset 3px 0 0 var(--lc-accent);
}
.lc-void__list .is-widest .lc-void__n,
.lc-void__list .is-widest .lc-void__act { color: var(--lc-accent); }
/* The figure this row is recommended FOR — it carries the weight the muted
   counts on the other rows do not. */
.lc-void__list .is-widest .lc-void__n { font-weight: 600; }
.lc-void__list .is-widest .lc-void__act {
  border-color: rgba(47, 111, 87, .4);
  border-color: color-mix(in srgb, var(--lc-accent) 45%, transparent);
}
.lc-void__list .is-widest .lc-void__drop:hover .lc-void__act,
.lc-void__list .is-widest .lc-void__drop:focus-visible .lc-void__act { border-color: var(--lc-accent); }

/* ---- clear all ----------------------------------------------------------
   The last resort, and not always the best move — with a recommended row above
   it, dropping that one filter recovers more than dropping all of them. So it
   is drawn quiet and kept off the white: at rest it is an outline on the
   column's own ground, and it goes white on hover like everything else here
   that answers a pointer. */
.lc-void__clear {
  margin-top: 18px;
  padding: 11px 18px;
  border: 1px solid var(--lc-line);
  border-radius: 2px;
  background: none;
  color: var(--lc-ink);
  font-family: var(--lc-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.lc-void__clear:hover { background: var(--lc-bg); border-color: var(--lc-muted); }
.lc-void__clear:active { background: var(--lc-bg); border-color: var(--lc-ink); }
.lc-void__clear:focus-visible { outline: 2px solid var(--lc-accent); outline-offset: 2px; }

/* ---- the shelf ----------------------------------------------------------
   The directory resuming. The rule running off the heading is the seam: above
   it the reader's dead end, below it live results again. */
.lc-voidshelf { padding-top: 4px; }
.lc-voidshelf__h {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 0 20px;
  font-family: var(--lc-serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--lc-ink);
}
.lc-voidshelf__h::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--lc-line);
}
.lc-voidshelf .lc-cards { padding-top: 14px; }

@media (max-width: 959px) {
  /* 14px is the card list's own gutter here, and the panel sits directly above
     it — the headline, the ledger's text column and the card edges all have to
     land on the same line. The row bleed is cut to match, which is also what
     keeps the accent edge off the screen's edge on a phone. */
  .lc-void { padding: 26px 14px 22px; }
  .lc-void__head { font-size: 25px; max-width: 340px; }
  .lc-void__sub { font-size: 15px; margin-top: 11px; }
  .lc-void__acts { margin-top: 26px; }
  .lc-void__list { margin: 0 -6px; }
  .lc-void__drop { padding: 13px 6px 14px; column-gap: 12px; }
  .lc-void__val { font-size: 17px; }
  .lc-voidshelf__h { padding: 0 14px; font-size: 19px; }
  .lc-voidshelf .lc-cards { padding-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .lc-void__go,
  .lc-void__drop,
  .lc-void__act,
  .lc-void__clear { transition: none; }
}


/* ==========================================================================
 * THE CARD OVER THE MAP — the void panel's answer, in the view that cannot show it.
 *
 * In map view the results column is display:none, so the panel lives inside a hidden
 * element and a phone gets an empty map with no sentence on it at all. This is the
 * same answer, in the one place it can be read there.
 *
 * AN OVERLAY RATHER THAN A BAND, and the reason is what it sits on: a band above the
 * bar costs about 120px of the 731 the map has at 414, in the state where the reader
 * has least on screen, while this costs none. Nothing is hidden underneath either —
 * a dead end has no pins anywhere, and the off-map case has none in frame by
 * definition.
 *
 * It carries the panel's vocabulary at the sizes a card can hold: one white surface,
 * square, a hairline, and the single accent control that is the way out.
 * ========================================================================== */
.lc-mapvoid {
  position: absolute;
  left: 12px;
  right: 12px;
  /* Clear of the attribution, which Leaflet draws in the last 17px of the pane and
     which the licence requires stay legible. The pane's foot meets the bottom bar
     exactly, so this offset is measured from a real edge rather than guessed. */
  bottom: 34px;
  /* Under the bottom bar's 985 and under Leaflet's own controls at 1000, over every
     map pane. The bar has to stay pressable with this on screen, and the attribution
     has to stay readable. */
  z-index: 900;
  box-sizing: border-box;
  padding: 16px 16px 14px;
  background: var(--lc-bg);
  border: 1px solid var(--lc-line);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .16);
  font-family: var(--lc-serif);
}
.lc-mapvoid * { box-sizing: border-box; }

.lc-mapvoid__head {
  margin: 0;
  /* The panel's headline at the size a card over a map can carry: two lines is the
     most this surface should spend before the control. */
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--lc-ink);
  /* Clear of the close control, which is absolute in the corner. */
  padding-right: 30px;
  text-wrap: balance;
}

.lc-mapvoid__sub {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--lc-ink);
  text-wrap: pretty;
}

/* The way out, and the only filled element on the card — the same treatment the panel
   gives the same action, at the size this surface can hold. */
.lc-mapvoid__go {
  display: inline-block;
  margin-top: 12px;
  padding: 13px 18px;
  border: 1px solid var(--lc-accent);
  background: var(--lc-accent);
  color: #fff;
  font-family: var(--lc-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.lc-mapvoid__go:hover { background: #285f4a; border-color: #285f4a; }
.lc-mapvoid__go:active {
  background: #285f4a;
  background: color-mix(in srgb, var(--lc-accent) 78%, #000);
  border-color: #285f4a;
  border-color: color-mix(in srgb, var(--lc-accent) 78%, #000);
}
/* An accent ring on an accent fill is not a ring. */
.lc-mapvoid__go:focus-visible { outline: 2px solid var(--lc-ink); outline-offset: 3px; }

/* Dismissal is not remembered — the reasoning is in lc-explore.js. The target is the
   full 44px the bar's own controls carry, drawn smaller than it measures. */
.lc-mapvoid__close {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--lc-muted);
  font-family: var(--lc-sans);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.lc-mapvoid__close:hover { color: var(--lc-ink); }
.lc-mapvoid__close:focus-visible { outline: 2px solid var(--lc-accent); outline-offset: -4px; }

@media (prefers-reduced-motion: reduce) {
  .lc-mapvoid__go { transition: none; }
}