/*
 * Shortlist pages (directory revamp phase 5, T1): the home, results,
 * neighbourhood and map pages, and the parts they print (sl-card, sl-filter-row,
 * sl-event-tile, sl-kind-tile, sl-hood-card, sl-map-band).
 *
 * Loaded only while directory.shortlist is on (inc/shortlist/routes.php), after
 * T2's controls block (handle hm-sl-controls), whose --sl-* tokens carry every
 * colour, font and radius used here. Nothing in this file restyles an existing
 * class: every selector is .sl-* and new.
 *
 * Widths: the boards are 1360 (desktop), 1024 (tablet) and 390 (phone); the
 * breakpoints here are 1100px and 768px.
 */

/* ── Page frame ──────────────────────────────────────────────────────────── */
.sl-main{ background:var(--sl-cream); color:var(--sl-ink); font-family:var(--sl-f-body); --sl-gutter:40px; --sl-band-h:480px; }
.sl-main *,.sl-main *::before,.sl-main *::after{ box-sizing:border-box; }
.sl-main img{ display:block; max-width:100%; }
.sl-main p{ margin:0; }
.sl-wrap{ width:100%; max-width:1360px; margin:0 auto; padding:0 var(--sl-gutter); }
.sl-section{ width:100%; max-width:1360px; margin:0 auto; padding:88px var(--sl-gutter) 0; }
.sl-home > .sl-section:last-of-type{ padding-bottom:88px; }

/* ── Section head: kicker marker, heading, hook, amber rule ──────────────── */
.sl-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:30px; }
/* The sections are link targets (#around-town from the mega menu, #this-week, #labels…):
   a jump lands below the sticky header, not under it. */
.sl-main section[id],.sl-main .sl-legend[id]{ scroll-margin-top:calc(var(--hm-sticky-top, 130px) + 8px); }
.sl-head-text{ min-width:0; }
.sl-kicker{ margin:0 0 12px !important; line-height:1; }
.sl-kicker span{ display:inline-block; padding:4px 7px 2px; background:var(--sl-hl); color:var(--sl-hl-ink);
  font:400 15px/1 var(--sl-f-kick); letter-spacing:.14em; text-transform:uppercase; }
.sl-h2{ margin:0; font:600 40px/1.05 var(--sl-f-serif); letter-spacing:-.015em; color:var(--sl-ink); }
.sl-hook{ margin:6px 0 0 !important; max-width:64ch; font:400 15px/1.5 var(--sl-f-body); color:var(--sl-ink-2); }
.sl-rule{ display:block; width:40px; height:3px; margin-top:14px; background:var(--sl-hl-2); }
.sl-see{ flex:none; padding-bottom:1px; font:700 13px/1.2 var(--sl-f-body); letter-spacing:.08em; text-transform:uppercase;
  color:var(--sl-hl-2); text-decoration:none; }
.sl-see:hover,.sl-see:focus-visible{ color:var(--sl-hl-2); background-image:linear-gradient(var(--sl-hl),var(--sl-hl));
  background-size:100% 5px; background-position:0 95%; background-repeat:no-repeat; }
.sl-tabs{ display:flex; gap:8px; padding-bottom:2px; }
.sl-tabs[hidden]{ display:none; }

/* Rails: a row of cards that scrolls sideways when it does not fit */
.sl-rail{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:24px; }
.sl-ruled{ display:grid; gap:24px; }
.sl-ruled-item{ position:relative; min-width:0; }
.sl-ruled > .sl-ruled-item + .sl-ruled-item::before{ content:''; position:absolute; left:-12px; top:0; bottom:0; width:1px; background:var(--sl-line); }

/* ── sl-card (template-parts/sl-card.php) ────────────────────────────────── */
.sl-card{ position:relative; min-width:0; display:flex; flex-direction:column; font-family:var(--sl-f-body); color:var(--sl-ink); }
.sl-card p{ margin:0; }
.sl-card-pic{ position:relative; display:block; overflow:hidden; aspect-ratio:1; background:var(--sl-panel); }
.sl-card-pic img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.sl-card:hover .sl-card-pic img{ transform:scale(1.045); }
/* A scraped tile is small (about 112px): shown at its own size, centred in the
   frame, never enlarged, never zoomed on hover. */
.sl-card-pic.is-scraped{ display:flex; align-items:center; justify-content:center; }
.sl-card-pic.is-scraped img{ width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; border-radius:var(--sl-r-nest); }
.sl-card:hover .sl-card-pic.is-scraped img{ transform:none; }
.sl-card-pic.is-empty{ display:flex; align-items:center; justify-content:center; }
.sl-card-initial{ font:600 44px/1 var(--sl-f-serif); color:var(--sl-line); }
.sl-card-badge{ position:absolute; left:8px; bottom:8px; display:inline-flex; align-items:center; height:22px; padding:0 9px;
  border-radius:var(--sl-r-pill); background:var(--sl-cream); color:var(--sl-ink);
  font:400 13px/1 var(--sl-f-kick); letter-spacing:.08em; text-transform:uppercase; }
.sl-card-body{ display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.sl-card-note{ margin-top:12px !important; font-size:13px; line-height:1.3; color:var(--sl-ink-2); }
.sl-card-kicker{ margin-top:12px !important; font:400 14px/1.15 var(--sl-f-kick); letter-spacing:.1em; text-transform:uppercase; color:var(--sl-ink-2); }
.sl-card-note + .sl-card-kicker{ margin-top:10px !important; }
.sl-card-title{ margin:4px 0 0; font:600 19px/1.2 var(--sl-f-serif); letter-spacing:-.01em; color:var(--sl-ink); }
.sl-card-title a{ color:var(--sl-ink); text-decoration:none; }
.sl-card:hover .sl-card-title a,
.sl-card-title a:focus-visible{ background-image:linear-gradient(var(--sl-hl),var(--sl-hl)); background-size:100% 6px; background-position:0 92%;
  background-repeat:no-repeat; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.sl-card-hood{ margin-top:4px !important; font-size:14px; line-height:1.4; color:var(--sl-ink-2); }
.sl-card-tagline{ margin-top:4px !important; font-size:14.5px; line-height:1.45; color:var(--sl-ink-2); }
.sl-card-labels{ margin-top:12px; display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px; }
.sl-card-whatson{ margin-top:10px !important; font-size:14px; line-height:1.45; color:var(--sl-ink-2); }
.sl-card-whatson-k{ font-weight:700; color:var(--sl-ink); }
.sl-card-whatson a{ color:var(--sl-brand); text-decoration:none; }
.sl-card-whatson a:hover{ color:var(--sl-ink); }

/* row: the results list (Results.png) */
.sl-card.is-row{ flex-direction:row; gap:16px; padding:14px 0; border-bottom:1px solid var(--sl-line); }
.sl-card.is-row .sl-card-pic{ flex:none; width:88px; height:88px; aspect-ratio:auto; }
.sl-card.is-row .sl-card-body{ flex:1; gap:5px; }
.sl-card.is-row .sl-card-kicker{ margin-top:0 !important; line-height:1.1; }
.sl-card.is-row .sl-card-title{ margin:0; font-size:23px; line-height:1.15; }
.sl-card.is-row .sl-card-tagline{ margin:0 !important; }
.sl-card.is-row .sl-card-labels{ margin-top:4px; }
.sl-card.is-row .sl-card-whatson{ margin-top:0 !important; }

/* small: the nearby strip, a pin's popup, the map page's newest picks */
.sl-card.is-small .sl-card-pic{ aspect-ratio:3 / 2; }
.sl-card.is-small .sl-card-kicker{ margin-top:10px !important; font-size:13px; }
.sl-card.is-small .sl-card-title{ font-size:18px; }
.sl-card.is-small .sl-card-tagline{ font-size:13.5px; line-height:1.4; }
.sl-card.is-small .sl-card-labels{ margin-top:8px; }

/* ── Hero (home) ─────────────────────────────────────────────────────────── */
.sl-hero{ position:relative; }
.sl-hero-media{ position:relative; height:540px; overflow:hidden; background:var(--sl-bark); }
.sl-hero-img{ position:absolute; inset:0; width:100%; height:100%; max-width:none !important; object-fit:cover; object-position:50% 40%; }
.sl-hero-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(21,34,27,.14) 0%, rgba(21,34,27,0) 26%, rgba(21,34,27,0) 38%, rgba(21,34,27,.74) 100%); }
.sl-hero-media.is-plain .sl-hero-scrim{ background:linear-gradient(160deg, var(--sl-brand) 0%, var(--sl-bark) 70%); opacity:.9; }
.sl-hero-inner{ position:relative; height:100%; padding-bottom:84px; display:flex; align-items:flex-end; justify-content:space-between; gap:40px; }
.sl-hero-text{ min-width:0; }
.sl-mark{ display:inline-block; padding:.16em .32em .1em; background:var(--sl-hl); color:var(--sl-hl-ink);
  font-family:var(--sl-f-mark, 'Archivo', 'Helvetica Neue', Arial, sans-serif); font-size:30px; font-weight:800; letter-spacing:-.045em; line-height:1; }
.sl-hero-h1{ margin:18px 0 0; max-width:14ch; font:500 74px/1.03 var(--sl-f-serif); letter-spacing:-.02em; color:var(--sl-cream);
  text-shadow:0 2px 22px rgba(21,34,27,.74); }
.sl-hero-credit{ flex:none; margin:0 0 8px !important; text-align:right; color:var(--sl-cream); }
.sl-hero-credit-k{ display:block; font:400 14px/1 var(--sl-f-kick); letter-spacing:.14em; text-transform:uppercase; }
.sl-hero-credit-t{ display:inline-block; margin-top:7px; font:600 15px/1.3 var(--sl-f-body); color:var(--sl-cream); }
.sl-hero-panel-wrap{ position:relative; z-index:2; margin-top:-40px; }
.sl-hero-panel{ display:inline-flex; align-items:center; gap:10px; max-width:100%; padding:12px; border-radius:var(--sl-r-band);
  background:var(--sl-cream); box-shadow:0 18px 40px -22px rgba(21,34,27,.35); }
.sl-hero-panel .sl-search{ width:520px; flex:none; }
.sl-hero-sep{ flex:none; width:1px; height:26px; margin:0 2px; background:var(--sl-line); }
.sl-hero-selects{ display:flex; gap:8px; min-width:0; }
/* A select is as wide as its longest option (a guide's title): the board's widths. */
.sl-hero-selects .sl-select{ width:112px; text-overflow:ellipsis; }
.sl-hero-selects .sl-select[name="hood"],.sl-hero-selects [data-sl-jump],.sl-hero-selects .sl-select[name="label"]{ width:96px; }
.sl-hero-open[hidden]{ display:none; }
/* The pinger: only the hero's Open now chip pulses (with a reduced-motion guard). */
@keyframes sl-hero-ping{ 0%{ transform:scale(1); opacity:.55; } 75%,100%{ transform:scale(3.2); opacity:0; } }
.sl-chip.is-live .sl-dot{ position:relative; }
.sl-chip.is-live .sl-dot::after{ content:''; position:absolute; inset:0; border-radius:50%; background:var(--sl-brand);
  animation:sl-hero-ping 1.7s cubic-bezier(0,0,.2,1) infinite; }
@media (prefers-reduced-motion:reduce){ .sl-chip.is-live .sl-dot::after{ animation:none; opacity:0; } }

/* ── On this week (event tiles) ──────────────────────────────────────────── */
.sl-week{ padding-top:72px; }
/* Five tiles across, the rest a scroll away (the window can hold more than five). */
.sl-week-rail{ grid-auto-columns:calc((100% - 96px) / 5); overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; padding-bottom:6px; }
.sl-week-rail > *{ scroll-snap-align:start; }
.sl-event{ min-width:0; display:flex; flex-direction:column; }
.sl-event[hidden]{ display:none; }
.sl-event-pic{ position:relative; display:block; aspect-ratio:16 / 9; background:var(--sl-panel); }
.sl-event-pic img{ width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.sl-event:hover .sl-event-pic img{ transform:scale(1.045); }
.sl-event-when{ margin-top:14px !important; font:400 14px/1.15 var(--sl-f-kick); letter-spacing:.1em; text-transform:uppercase; color:var(--sl-ink-2); }
.sl-event-head{ margin-top:6px; display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.sl-event-title{ margin:0; min-width:0; font:600 19px/1.22 var(--sl-f-serif); letter-spacing:-.01em; }
.sl-event-title a{ color:var(--sl-ink); text-decoration:none; }
.sl-event:hover .sl-event-title a,.sl-event-title a:focus-visible{ background-image:linear-gradient(var(--sl-hl),var(--sl-hl));
  background-size:100% 6px; background-position:0 92%; background-repeat:no-repeat; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.sl-event-head .sl-share{ flex:none; }
.sl-event-at{ margin-top:8px !important; font-size:14px; line-height:1.4; color:var(--sl-ink-2); }
.sl-event-at a{ color:var(--sl-brand); font-weight:600; text-decoration:none; }
.sl-event-at a:hover{ color:var(--sl-ink); }
.sl-empty-note{ font-size:15px; color:var(--sl-ink-2); }
.sl-share.is-done{ border-color:var(--sl-brand); color:var(--sl-brand); }

/* ── The map band (MapCards card 2, "the bleed") ─────────────────────────── */
.sl-mapband-section{ padding-top:88px; }
.sl-mapband{ position:relative; height:var(--sl-band-h); overflow:hidden; background:#E9ECE7; }
.sl-mapband-map{ position:absolute; inset:0; display:block; overflow:hidden; }
.sl-mapband-canvas{ position:absolute; left:50%; top:50%; display:block; width:max(100%, calc(var(--sl-band-h) * var(--sl-mapband-ratio, 2))); aspect-ratio:var(--sl-mapband-ratio, 2);
  transform:translate(-50%,-50%); transition:transform .5s ease; }
.sl-mapband-canvas img{ position:absolute; inset:0; width:100%; height:100%; max-width:none !important; object-fit:fill; }
.sl-mapband-canvas.is-plain{ background:#E9ECE7; }
.sl-mapband-map:hover .sl-mapband-canvas{ transform:translate(-50%,-50%) scale(1.03); }
.sl-mapband-pin{ position:absolute; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:var(--sl-hl);
  box-shadow:0 0 0 1.2px var(--sl-ink); }
.sl-mapband-wash{ position:absolute; inset:0; background:rgba(250,250,248,.32); }
/* The basemap picture is OpenStreetMap data: its credit, bottom right, on a cream wash for contrast. */
.sl-mapband-credit{ position:absolute; right:8px; bottom:6px; z-index:2; margin:0 !important; padding:2px 7px; border-radius:var(--sl-r-pill);
  background:rgba(250,250,248,.88); font:400 11.5px/1.3 var(--sl-f-body); color:var(--sl-ink-2); }
.sl-mapband-credit a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.sl-mapband-credit a:hover{ color:var(--sl-ink); }
.sl-mapband-inner{ position:relative; max-width:1360px; height:100%; margin:0 auto; pointer-events:none; }
.sl-mapband-count{ position:absolute; right:var(--sl-gutter); top:30px; box-shadow:0 8px 18px -10px rgba(21,34,27,.35); }
.sl-mapband-card{ position:absolute; left:var(--sl-gutter); bottom:40px; width:470px; max-width:calc(100% - 2 * var(--sl-gutter));
  padding:28px 30px 30px; border-radius:var(--sl-r-band); background:var(--sl-cream); box-shadow:0 26px 50px -30px rgba(21,34,27,.35); pointer-events:auto; }
.sl-mapband-card .sl-kicker{ margin-bottom:14px !important; }
.sl-mapband-card .sl-btn{ margin-top:22px; }
.sl-btn svg{ flex:none; }

/* ── Pick a kind of place ────────────────────────────────────────────────── */
.sl-kind-grid{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; }
.sl-kind{ min-width:0; }
.sl-kind-pic{ position:relative; display:block; aspect-ratio:1; background:var(--sl-panel); text-decoration:none; }
.sl-kind-pic img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.sl-kind-pic:hover img{ transform:scale(1.045); }
.sl-kind-pic.is-empty{ background:linear-gradient(160deg, var(--sl-brand), var(--sl-bark)); }
.sl-kind-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(21,34,27,0) 45%, rgba(21,34,27,.78) 100%); }
.sl-kind-name{ position:absolute; left:14px; right:10px; bottom:10px; font:400 32px/1 var(--sl-f-kick); letter-spacing:.04em; text-transform:uppercase; color:var(--sl-cream); }
.sl-kind-pic:hover .sl-kind-name{ text-decoration:underline; text-decoration-color:var(--sl-hl); text-decoration-thickness:4px; text-underline-offset:5px; }
.sl-kind-hook{ margin-top:10px !important; font-size:14px; line-height:1.45; color:var(--sl-ink-2); }

/* ── Around town ─────────────────────────────────────────────────────────── */
.sl-hood-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:250px; gap:16px; }
.sl-hood-grid > .sl-hood.is-big{ grid-column:1 / 3; grid-row:1 / 3; }
.sl-hood-row{ margin-top:16px; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:16px; }
.sl-hood{ position:relative; display:block; min-width:0; min-height:0; background:var(--sl-panel); color:var(--sl-cream); text-decoration:none; }
.sl-hood.is-small{ aspect-ratio:1.5; }
.sl-hood.is-empty{ background:linear-gradient(160deg, #2C5A43, var(--sl-bark)); }
.sl-hood-pic{ position:absolute; inset:0; overflow:hidden; }
.sl-hood-pic img{ width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.sl-hood:hover .sl-hood-pic img{ transform:scale(1.045); }
.sl-hood-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(21,34,27,0) 38%, rgba(21,34,27,.74) 100%); }
.sl-hood.is-empty .sl-hood-scrim{ background:none; }
.sl-hood-text{ position:absolute; left:16px; right:16px; bottom:14px; display:flex; flex-direction:column; align-items:flex-start; gap:7px; }
.sl-hood-name{ font:600 27px/1.05 var(--sl-f-serif); letter-spacing:-.01em; color:var(--sl-cream); }
.sl-hood:hover .sl-hood-name{ text-decoration:underline; text-decoration-color:var(--sl-hl); text-decoration-thickness:4px; text-underline-offset:6px; }
.sl-hood.is-big .sl-hood-text{ left:22px; right:22px; bottom:20px; gap:10px; }
.sl-hood.is-big .sl-hood-name{ font-size:44px; }
.sl-hood.is-small .sl-hood-text{ left:10px; right:8px; bottom:8px; gap:5px; }
.sl-hood.is-small .sl-hood-name{ font-size:17px; line-height:1.1; }
/* Parts of town 13 and on: out of sight until "All N" (#sl-more-hoods) is followed. */
.sl-hood-rest{ display:none; }
.sl-hood-rest:target{ display:grid; scroll-margin-top:calc(var(--hm-sticky-top, 130px) + 8px); }

/* ── The guides, newest picks, venues, recently updated ──────────────────── */
.sl-guide-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:48px; }
.sl-guide-grid > .sl-ruled-item + .sl-ruled-item::before{ left:-24px; }
/* T3's hover list opens 360px wide from the card's left: in the last column it
   opens from the right instead, so it never runs past the page edge. */
.sl-guide-grid > .sl-ruled-item:nth-child(4n) .sl-guide-card__pop{ left:auto; right:10px; }
.sl-venue-rail{ grid-auto-columns:calc((100% - 96px) / 5); }
.sl-venue-rail .sl-card-pic{ aspect-ratio:3 / 2; }
.sl-venue-rail .sl-card-kicker{ margin-top:14px !important; }
.sl-newest-grid{ grid-template-columns:repeat(5,minmax(0,1fr)); }
.sl-update-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:48px; }
.sl-update-grid > .sl-ruled-item + .sl-ruled-item::before{ left:-24px; }
.sl-update-head{ display:grid; grid-template-columns:56px minmax(0,1fr) auto; gap:12px; align-items:start; }
.sl-update-pic{ display:block; width:56px; height:56px; background:var(--sl-panel); }
.sl-update-pic img{ width:100%; height:100%; object-fit:cover; }
.sl-update-pic.is-scraped img{ object-fit:contain; }
.sl-update-name{ margin:6px 0 0; font:600 19px/1.2 var(--sl-f-serif); letter-spacing:-.01em; }
.sl-update-name a{ color:var(--sl-ink); text-decoration:none; }
.sl-update:hover .sl-update-name a{ background-image:linear-gradient(var(--sl-hl),var(--sl-hl)); background-size:100% 6px; background-position:0 92%; background-repeat:no-repeat; }
.sl-update-meta{ margin-top:4px !important; font-size:13.5px; color:var(--sl-ink-2); }
.sl-update-date{ display:flex; flex-direction:column; align-items:flex-end; font:400 14px/1.15 var(--sl-f-kick); letter-spacing:.1em; text-transform:uppercase; color:var(--sl-ink-2); }
.sl-update-body{ position:relative; margin:18px 0 0; padding:0 0 0 26px; border:0; }
.sl-update-body::before{ content:'\201C'; position:absolute; left:0; top:-6px; font:600 30px/1 var(--sl-f-serif); color:var(--sl-bronze); }
.sl-update-body p{ font:italic 400 17px/1.5 var(--sl-f-serif); color:var(--sl-ink); display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }
.sl-update-more{ display:inline-block; margin-top:14px; font-size:14px; font-weight:600; color:var(--sl-brand); text-decoration:none; }
.sl-update-more:hover{ color:var(--sl-ink); }

/* ── What gets a place on here + the labels legend ───────────────────────── */
.sl-how{ margin-top:88px; padding:72px 0 80px; background:var(--sl-panel); }
.sl-ways{ list-style:none; margin:0; padding:0 0 40px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; border-bottom:1px solid var(--sl-line); }
.sl-ways li{ display:flex; gap:22px; margin:0; }
.sl-ways-n{ flex:none; font:600 44px/1 var(--sl-f-serif); color:var(--sl-bronze); }
.sl-ways-t{ margin:6px 0 0; font:600 21px/1.25 var(--sl-f-serif); color:var(--sl-ink); }
.sl-ways p{ margin-top:8px !important; font-size:15.5px; line-height:1.6; color:var(--sl-ink-2); }
.sl-legend{ margin-top:36px; }
.sl-legend-h{ margin:0 0 20px; font:600 22px/1.2 var(--sl-f-serif); color:var(--sl-ink); }
.sl-legend-list{ margin:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:24px 32px; }
.sl-legend-list > div{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; min-width:0; }
.sl-legend-list dt{ display:flex; margin:0; }
.sl-legend-list dd{ margin:0; font-size:15px; line-height:1.5; color:var(--sl-ink-2); }
.sl-legend-line{ margin-top:24px !important; max-width:64ch; font:400 15px/1.5 var(--sl-f-body); color:var(--sl-ink-2); }

/* ── Results, neighbourhood and map pages: list beside a map ─────────────── */
.sl-split{ display:grid; grid-template-columns:minmax(0,570px) minmax(0,1fr); align-items:start; background:var(--sl-cream); }
.sl-split-list{ min-width:0; padding:24px 24px 80px; border-right:1px solid var(--sl-line); background:var(--sl-cream); }
/* The map sticks flush under whichever header shows: sl-results.js measures it
   into --sl-map-top (the theme's --hm-sticky-top is the fallback). */
.sl-split-map{ position:sticky; top:var(--sl-map-top, var(--hm-sticky-top, 130px)); height:calc(100vh - var(--sl-map-top, var(--hm-sticky-top, 130px))); min-height:420px; background:#F1F2F3; }
.sl-split.is-collapsed{ grid-template-columns:0 minmax(0,1fr); }
.sl-split.is-collapsed .sl-split-list{ visibility:hidden; overflow:hidden; padding:0; border:0; }
.sl-crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font:400 14px/1 var(--sl-f-kick); letter-spacing:.14em; text-transform:uppercase; color:var(--sl-ink-2); }
.sl-crumbs a{ color:var(--sl-ink-2); text-decoration:none; }
.sl-crumbs a:hover{ color:var(--sl-ink); }
.sl-crumbs-here{ position:relative; }
.sl-crumbs-here summary{ display:inline-flex; align-items:center; gap:5px; cursor:pointer; color:var(--sl-hl-2); list-style:none; }
.sl-crumbs-here summary::-webkit-details-marker{ display:none; }
.sl-crumbs-menu{ position:absolute; left:0; top:calc(100% + 8px); z-index:40; min-width:220px; max-height:320px; overflow:auto; margin:0; padding:6px; list-style:none;
  background:#fff; border:1px solid var(--sl-line); border-radius:var(--sl-r-panel); box-shadow:0 24px 48px -24px rgba(21,34,27,.35);
  font:500 14px/1.3 var(--sl-f-body); letter-spacing:0; text-transform:none; }
.sl-crumbs-menu a{ display:block; padding:8px 10px; border-radius:10px; color:var(--sl-ink); }
.sl-crumbs-menu a:hover,.sl-crumbs-menu a[aria-current]{ background:var(--sl-panel); }
.sl-page-h1{ margin:14px 0 0; font:600 36px/1.08 var(--sl-f-serif); letter-spacing:-.018em; color:var(--sl-ink); }
.sl-intro{ margin-top:8px !important; font-size:15.5px; line-height:1.5; color:var(--sl-ink-2); }
.sl-split-list > .sl-rule{ margin-top:14px; }
/* "What gets a place on here" */
.sl-what{ margin-top:18px; border-top:1px solid var(--sl-line); border-bottom:1px solid var(--sl-line); }
.sl-what summary{ display:flex; align-items:center; gap:10px; padding:11px 0; cursor:pointer; list-style:none; font-size:15px; font-weight:500; color:var(--sl-ink); }
.sl-what summary::-webkit-details-marker{ display:none; }
.sl-what summary svg{ margin-left:auto; color:var(--sl-ink-2); transition:transform .15s; }
.sl-what[open] summary svg{ transform:rotate(180deg); }
.sl-what-q{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%;
  border:1.5px solid var(--sl-hl-2); color:var(--sl-hl-2); font:700 12px/1 var(--sl-f-body); }
.sl-what-body{ padding:6px 0 22px; }
.sl-what-body .sl-ways{ grid-template-columns:1fr; gap:16px; padding-bottom:18px; }
.sl-what-body .sl-ways-n{ font-size:30px; }
.sl-what-body .sl-ways-t{ margin-top:2px; font-size:17px; }
.sl-what-body .sl-ways p{ font-size:14px; margin-top:4px !important; }
.sl-what-body .sl-legend{ margin-top:18px; }
.sl-what-body .sl-legend-h{ font-size:17px; margin-bottom:12px; }
.sl-what-body .sl-legend-list{ grid-template-columns:1fr 1fr; gap:14px 18px; }
.sl-what-body .sl-legend-list dd{ font-size:13.5px; }
.sl-what-body .sl-legend-line{ font-size:13.5px; }

/* The filter row (template-parts/sl-filter-row.php) */
.sl-filters{ margin-top:16px; }
.sl-filters .sl-search{ width:100%; }
.sl-filter-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:14px; }
.sl-chip-open[hidden]{ display:none; }
.sl-pop{ position:relative; }
.sl-pop > summary{ list-style:none; }
.sl-pop > summary::-webkit-details-marker{ display:none; }
.sl-pop > summary svg{ transition:transform .15s; }
.sl-pop[open] > summary svg{ transform:rotate(180deg); }
.sl-pop-panel{ position:absolute; left:0; top:calc(100% + 8px); z-index:40; width:290px; max-width:calc(100vw - 32px); padding:8px;
  background:#fff; border:1px solid var(--sl-line); border-radius:var(--sl-r-panel); box-shadow:0 24px 48px -24px rgba(21,34,27,.35); }
.sl-pop-panel fieldset{ margin:0; padding:0; border:0; max-height:300px; overflow:auto; }
.sl-check{ display:flex; align-items:center; gap:12px; padding:10px 10px; border-radius:10px; cursor:pointer; font-size:15px; color:var(--sl-ink); }
.sl-check:hover{ background:var(--sl-panel); }
.sl-check input{ width:18px; height:18px; margin:0; accent-color:var(--sl-ink); flex:none; }
.sl-check:has(input:checked){ background:var(--sl-panel); }
.sl-pop-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:6px; padding:12px 10px 4px; border-top:1px solid var(--sl-line); }
.sl-pop-clear{ font-size:14px; font-weight:600; color:var(--sl-brand); text-decoration:underline; text-underline-offset:3px; }
.sl-chosen{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:12px; }
.sl-chosen[hidden],.sl-chosen [hidden]{ display:none; }
.sl-clear{ font-size:13px; font-weight:600; color:var(--sl-brand); text-decoration:underline; text-underline-offset:3px; }
.sl-countbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:16px; font-size:13.5px; color:var(--sl-ink-2); }
.sl-count-line{ min-width:0; }
.sl-chip-open.is-on .sl-count{ background:var(--sl-ink); color:#fff; }
/* The list */
.sl-list{ list-style:none; margin:12px 0 0; padding:0; border-top:1px solid var(--sl-line); }
.sl-list > li{ margin:0; padding:0; }
.sl-list > li[hidden]{ display:none; }
.sl-list .sl-card.is-row{ transition:background .15s, box-shadow .15s; }
.sl-list .sl-card.is-row:hover,.sl-list .sl-card.is-row.is-active{ background:var(--sl-panel); box-shadow:-12px 0 0 var(--sl-panel), 12px 0 0 var(--sl-panel); }
.sl-more{ padding:26px 0 0; text-align:center; }
.sl-more[hidden]{ display:none; }
.sl-more-text{ font-size:13px; color:var(--sl-ink-2); }
.sl-more .sl-btn{ margin-top:10px; }
.sl-empty,.sl-none{ padding:28px 0 8px; }
.sl-empty[hidden]{ display:none; }
.sl-empty-h{ font:600 22px/1.25 var(--sl-f-serif); color:var(--sl-ink); }
.sl-empty .sl-btn-2,.sl-none .sl-btn-2{ margin-top:16px; }
/* The map column */
.sl-map-box{ position:relative; width:100%; height:100%; }
/* MapLibre's own sheet (loaded later) makes the container position:relative,
   so it carries an explicit size as well as the inset. */
.sl-map-box > .sl-map{ position:absolute; inset:0; width:100%; height:100%; }
.sl-map-static{ display:none; }
.sl-map-collapse{ position:absolute; left:0; top:50%; z-index:5; width:22px; height:44px; margin-top:-22px; display:flex; align-items:center; justify-content:center;
  padding:0; border:1px solid var(--sl-line); border-left:0; border-radius:0 8px 8px 0; background:#fff; color:var(--sl-hl-2); cursor:pointer; }
.sl-split.is-collapsed .sl-map-collapse svg{ transform:rotate(180deg); }
.sl-map-guide{ position:absolute; left:50%; top:14px; z-index:6; display:flex; align-items:center; gap:8px; transform:translateX(-50%); }
.sl-map-guide[hidden]{ display:none; }
.sl-map-guide-pill{ height:36px; background:#fff; box-shadow:0 8px 18px -12px rgba(21,34,27,.4); }
.sl-map-guide-k{ font:400 14px/1 var(--sl-f-kick); letter-spacing:.12em; text-transform:uppercase; color:var(--sl-hl-2); }
.sl-map-guide .is-icon{ height:36px; width:36px; background:#fff; }
/* MapLibre pins and popups drawn by sl-map.js */
.sl-pin-tag{ display:inline-flex; align-items:center; gap:7px; padding:0; border:0; background:none; cursor:pointer; transform:translateY(0); }
.sl-pin-tag i{ display:block; width:14px; height:14px; border-radius:50%; background:var(--sl-bark); box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--sl-bark); }
.sl-pin-tag span{ padding:5px 10px 4px; border-radius:var(--sl-r-pill); background:var(--sl-bark); color:#fff; font:400 15px/1 var(--sl-f-kick); letter-spacing:.06em; text-transform:uppercase;
  box-shadow:0 6px 14px -8px rgba(21,34,27,.6); white-space:nowrap; }
.sl-pop-card .maplibregl-popup-content{ padding:0; border-radius:var(--sl-r-card); overflow:hidden; box-shadow:0 24px 48px -24px rgba(21,34,27,.45); }
.sl-pop-card .maplibregl-popup-close-button{ z-index:2; width:26px; height:26px; margin:6px; border-radius:50%; background:rgba(250,250,248,.92); font-size:16px; line-height:1; }
.sl-pop-card .sl-card{ width:240px; }
.sl-pop-card .sl-card-body{ padding:0 14px 14px; }
.sl-pop-card .sl-card-pic{ border-radius:0; }
.sl-pop-card .sl-card-labels .sl-badge,.sl-pop-card .sl-card-labels .sl-label{ font-size:12px; white-space:normal; text-align:left; }
/* The map page's sidebar */
.sl-side-section{ margin-top:30px; padding-top:30px; border-top:1px solid var(--sl-line); }
.sl-side-section .sl-head{ margin-bottom:18px; }
.sl-side-section .sl-h2{ font-size:30px; }
.sl-side-section .sl-tabs{ margin-bottom:16px; }
.sl-side-rail{ grid-auto-columns:250px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; padding-bottom:8px; margin-right:-24px; padding-right:24px; }
.sl-side-rail > *{ scroll-snap-align:start; }
.sl-side-rail[hidden]{ display:none; }
.sl-side-guides{ display:flex; flex-direction:column; }
.sl-best-guides{ display:flex; flex-direction:column; gap:28px; }
.sl-best-guide .sl-guide-onmap{ margin-top:12px; }
.sl-best-guide.is-on .sl-guide-onmap{ border-color:var(--sl-hl-2); color:var(--sl-hl-2); }

/* ── Tablet (the 1024 boards) ────────────────────────────────────────────── */
@media (max-width:1099px){
  .sl-main{ --sl-gutter:24px; --sl-band-h:400px; }
  .sl-section{ padding-top:72px; }
  .sl-h2{ font-size:34px; }
  .sl-hero-media{ height:460px; }
  .sl-hero-h1{ font-size:60px; }
  .sl-hero-panel{ display:flex; flex-wrap:wrap; width:100%; }
  .sl-hero-panel .sl-search{ flex:1 1 360px; width:auto; }
  .sl-hero-sep{ display:none; }
  .sl-hero-selects{ flex:1 1 100%; flex-wrap:wrap; }
  .sl-rail{ grid-auto-columns:minmax(250px, 30%); overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
    margin-right:calc(-1 * var(--sl-gutter)); padding-right:var(--sl-gutter); padding-bottom:6px; }
  .sl-rail > *{ scroll-snap-align:start; }
  .sl-kind-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .sl-kind-pic{ aspect-ratio:2 / 1; }
  .sl-hood-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:280px; grid-auto-rows:190px; }
  .sl-hood-grid > .sl-hood.is-big{ grid-column:1 / -1; grid-row:auto; }
  .sl-hood-row{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:170px; overflow-x:auto; margin-right:calc(-1 * var(--sl-gutter)); padding-right:var(--sl-gutter); }
  .sl-hood-rest:target{ grid-auto-flow:row; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-columns:auto; overflow:visible; margin-right:0; padding-right:0; }
  .sl-guide-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 48px; }
  .sl-guide-grid > .sl-ruled-item:nth-child(2n+1)::before{ display:none; }
  .sl-guide-grid > .sl-ruled-item:nth-child(4n) .sl-guide-card__pop{ left:10px; right:auto; }
  .sl-guide-grid > .sl-ruled-item:nth-child(2n) .sl-guide-card__pop{ left:auto; right:10px; }
  .sl-newest-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 48px; }
  .sl-newest-grid > .sl-ruled-item::before{ display:none; }
  .sl-newest-grid .sl-card{ flex-direction:row; gap:16px; padding:16px 0; border-bottom:1px solid var(--sl-line); }
  .sl-newest-grid .sl-card-pic{ flex:none; width:96px; height:96px; aspect-ratio:auto; }
  .sl-newest-grid .sl-card-note{ margin-top:0 !important; }
  .sl-update-grid{ gap:32px; }
  .sl-update-grid > .sl-ruled-item + .sl-ruled-item::before{ left:-16px; }
  .sl-ways{ gap:28px; }
  .sl-legend-list{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .sl-split{ grid-template-columns:minmax(0,430px) minmax(0,1fr); }
  .sl-split-list{ padding:20px 20px 64px; }
  .sl-page-h1{ font-size:32px; }
}

/* ── Phone (the 390 boards) ──────────────────────────────────────────────── */
@media (max-width:767px){
  .sl-main{ --sl-gutter:16px; --sl-band-h:300px; }
  .sl-section{ padding-top:56px; }
  .sl-head{ flex-direction:column; align-items:flex-start; gap:16px; margin-bottom:22px; }
  .sl-h2{ font-size:30px; }
  .sl-hook{ font-size:14px; }
  .sl-hero-media{ height:440px; }
  .sl-hero-inner{ padding-bottom:56px; }
  .sl-hero-h1{ font-size:44px; line-height:1.04; }
  .sl-mark{ font-size:24px; }
  .sl-hero-credit{ display:none; }
  .sl-hero-panel-wrap{ margin-top:-34px; }
  .sl-hero-panel{ padding:10px; gap:8px; }
  .sl-hero-panel .sl-search{ flex:1 1 100%; }
  .sl-hero-selects{ flex:1 1 0; min-width:0; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .sl-hero-selects::-webkit-scrollbar{ display:none; }
  .sl-hero-open{ flex:none; }
  .sl-week{ padding-top:56px; }
  .sl-rail{ grid-auto-columns:78%; }
  /* The phone band: the map strip, then the label card overlapping its foot and running below it */
  .sl-mapband{ height:auto; overflow:visible; background:none; }
  .sl-mapband-map{ position:relative; inset:auto; height:var(--sl-band-h); background:#E9ECE7; }
  .sl-mapband-inner{ position:static; height:auto; }
  .sl-mapband-count{ top:16px; right:var(--sl-gutter); }
  .sl-mapband-card{ position:relative; left:auto; bottom:auto; width:auto; max-width:none; margin:-56px var(--sl-gutter) 0; padding:20px 20px 22px; }
  .sl-mapband-card .sl-h2{ font-size:30px; }
  .sl-mapband-card .sl-btn{ width:100%; height:44px; }
  .sl-mapband-credit{ bottom:auto; top:calc(var(--sl-band-h) - 56px - 26px); right:var(--sl-gutter); }   /* above the label card's overlap */
  .sl-kind-grid{ gap:10px; }
  .sl-kind-pic{ aspect-ratio:1; }
  .sl-kind-name{ font-size:22px; left:10px; bottom:8px; }
  .sl-kind-hook{ display:none; }
  .sl-hood-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:236px; grid-auto-rows:170px; gap:10px; }
  .sl-hood.is-big .sl-hood-name{ font-size:30px; }
  .sl-hood-name{ font-size:20px; }
  .sl-hood-row{ grid-auto-columns:140px; gap:10px; margin-top:10px; }
  .sl-hood-rest:target{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sl-guide-grid{ display:grid; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:80%; overflow-x:auto; gap:24px;
    margin-right:calc(-1 * var(--sl-gutter)); padding-right:var(--sl-gutter); }
  .sl-guide-grid > .sl-ruled-item::before{ display:none; }
  .sl-newest-grid{ grid-template-columns:1fr; }
  .sl-newest-grid .sl-card-pic{ width:80px; height:80px; }
  .sl-update-grid{ grid-template-columns:1fr; gap:28px; }
  .sl-update-grid > .sl-ruled-item + .sl-ruled-item::before{ left:0; right:0; top:-14px; bottom:auto; width:auto; height:1px; }
  .sl-how{ margin-top:56px; padding:52px 0 56px; }
  .sl-ways{ grid-template-columns:1fr; gap:22px; }
  .sl-legend-list{ grid-template-columns:1fr; gap:16px; }
  /* Results: the map sits behind the list's sheet (ResultsPhone / ResultsPhoneSheet) */
  .sl-split{ display:flex; flex-direction:column; align-items:stretch; }
  .sl-split-list{ min-width:0; width:100%; }
  .sl-split-map{ order:-1; position:sticky; top:var(--sl-map-top, var(--hm-sticky-top, 70px)); z-index:0; height:62vh; min-height:340px; }
  .sl-split-list{ position:relative; z-index:1; margin-top:-24px; padding:22px 16px 56px; border:0; border-radius:var(--sl-r-panel) var(--sl-r-panel) 0 0;
    box-shadow:0 -14px 30px -18px rgba(21,34,27,.35); }
  .sl-split-list::before{ content:''; position:absolute; left:50%; top:9px; width:36px; height:4px; margin-left:-18px; border-radius:4px; background:var(--sl-line); }
  .sl-map-static{ position:absolute; inset:0; z-index:1; display:block; width:100%; height:100%; padding:0; border:0; overflow:hidden; background:#E9ECE7; cursor:pointer; }
  .sl-map-static .sl-mapband-canvas{ width:max(100%, calc(62vh * var(--sl-mapband-ratio, 2))); }
  .sl-map-box.is-live .sl-map-static{ display:none; }
  .sl-map-collapse{ display:none; }
  .sl-page-h1{ margin-top:12px; font-size:25px; }
  .sl-card.is-row .sl-card-pic{ width:72px; height:72px; }
  .sl-card.is-row .sl-card-title{ font-size:20px; }
  .sl-card.is-row .sl-card-tagline{ font-size:14px; }
  .sl-countbar{ flex-wrap:wrap; }
  /* One row of chips that scrolls sideways; a popover opens as a sheet from the foot */
  .sl-filter-row{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-right:-16px; padding-right:16px; }
  .sl-filter-row::-webkit-scrollbar{ display:none; }
  .sl-filter-row > *{ flex:none; }
  .sl-pop-panel{ position:fixed; left:0; right:0; top:auto; bottom:0; z-index:1100; width:auto; max-width:none; padding:10px 12px 16px;
    border-radius:var(--sl-r-panel) var(--sl-r-panel) 0 0; box-shadow:0 -20px 40px -20px rgba(21,34,27,.45); }
  .sl-pop-panel fieldset{ max-height:56vh; }
  .sl-map-guide{ top:10px; max-width:calc(100% - 20px); }
}

@media (prefers-reduced-motion:reduce){
  .sl-card-pic img,.sl-event-pic img,.sl-kind-pic img,.sl-hood-pic img,.sl-mapband-canvas{ transition:none; }
  .sl-card:hover .sl-card-pic img,.sl-event:hover .sl-event-pic img,.sl-kind-pic:hover img,.sl-hood:hover .sl-hood-pic img{ transform:none; }
  .sl-mapband-map:hover .sl-mapband-canvas{ transform:translate(-50%,-50%); }
}