:root {
  color-scheme: light;
  --cream: #ECE3D6;
  --cream-2: #E6DBCB;
  --card: #FBF8F3;
  --ink: #221D1A;
  --muted: #6E6259;
  --rust: #B23A2E;
  --rust-dim: #9C332A;
  --border: #E4D9CC;
  --yellow: #FFDE59;
  --yellow-dim: #F0C82E;
  --headline-shadow-color: #812C2C;
  --headline-shadow: 0.14em 0.14em 0 var(--headline-shadow-color);
  --headline-outline: 1.5px var(--rust);

  --font-headline: "Bevan", Georgia, "Times New Roman", serif;
  --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Source Serif 4", Georgia, serif;

  --radius: 10px;
  --radius-sm: 6px;
  --radius-card: 16px;
  --shadow-1: 0 1px 2px rgba(34,29,26,.05), 0 1px 1px rgba(34,29,26,.04);
  --shadow-2: 0 10px 24px -12px rgba(34,29,26,.22), 0 2px 6px rgba(34,29,26,.06);
  --shadow-3: 0 20px 40px -16px rgba(34,29,26,.28), 0 4px 10px rgba(34,29,26,.08);

  /* Category color-block palette. Each category gets its own hue spaced
   * around the wheel (no more reusing one color for two categories, as the
   * old Google-Calendar-derived set did for game/class and artsy/deals),
   * pushed toward the vivid end so the set feels bright and happy rather
   * than muted. Outdoor and Music sit a few degrees apart in the same
   * green family, echoing the old Sage/Basil pairing, but differ enough
   * in lightness/saturation to read as distinct.
   * One custom property per category so the hex only lives in one place —
   * both the card grid and the list-style entry rows read from these. */
  --catclr-queer: #DA2F76;     /* Magenta */
  --catclr-cultural: #CD1D23;  /* Crimson */
  --catclr-market: #D4431E;    /* Coral */
  --catclr-theater: #F5D15C;   /* Gold (light — pairs with ink text, see below) */
  --catclr-music: #117845;     /* Forest green */
  --catclr-artsy: #177EB2;     /* Azure */
  --catclr-game: #2D4ED2;      /* Cobalt */
  --catclr-nightlife: #972FB1; /* Magenta violet */
  --catclr-film: #78695E;      /* Warm slate */
  --catclr-class: #603BCE;     /* Indigo */
  --catclr-outdoor: #2FBE5E;   /* Spring green, darkened for text contrast — pairs with ink text, see below */
  --catclr-deals: #198383;     /* Teal */
  --catclr-misc: #7C6EA2;      /* Muted lavender */

  /* Venue-type color blocks — after four tries at a palette of its own
   * (contrast-matched muted tones, then a brighter version of the same
   * hues, then a full retro-poster repaint, then warm-only, then jewel
   * tones), bella asked to just reuse the event category colors outright.
   * So every --venueclr-* is a direct alias of a --catclr-* value — same
   * hex, not a lookalike — with a semantic pairing where one exists
   * (Market/Market, Cultural/Cultural, Park/Outdoor, Resources/Misc since
   * both are their side's catch-all bucket, Bar/Nightlife, Gallery/Artsy,
   * School/Class) and an arbitrary leftover pairing where it doesn't.
   * Cafe and Park inherit Theater/Outdoor's light-hue exception, so they
   * pair with dark ink text below instead of white, same as those two do
   * on the events side. Two entries have no --catclr-* match and stand on
   * their own: "Other" (the catch-all for names venueType() can't
   * classify, see app.js) is a standalone rose/fuchsia, picked to sit in
   * the gap between the palette's two closest hues (Nightlife's magenta
   * violet and Queer's magenta) and to stay clear of black, white, gray
   * and gold; "Historic" was originally aliased to Film's warm slate, but
   * that reads as brown/gray, so it's now a standalone moss green instead. */
  --venueclr-library: var(--catclr-music);    /* = Music, Forest green */
  --venueclr-museum: var(--catclr-queer);     /* = Queer, Magenta */
  --venueclr-cafe: #F2711C;                   /* Vivid orange — standalone, no --catclr-* match; Theater's gold alias read as dark-gold/brown, which bella has ruled out */
  --venueclr-bar: var(--catclr-nightlife);    /* = Nightlife, Magenta violet */
  --venueclr-gallery: var(--catclr-artsy);    /* = Artsy, Azure */
  --venueclr-park: var(--catclr-outdoor);     /* = Outdoor, Spring green (light — pairs with ink text) */
  --venueclr-market: var(--catclr-market);    /* = Market, Coral */
  --venueclr-cultural: var(--catclr-cultural); /* = Cultural, Crimson */
  --venueclr-shopping: var(--catclr-deals);   /* = Deals, Teal */
  --venueclr-hotel: var(--catclr-game);       /* = Game, Cobalt */
  --venueclr-resources: var(--catclr-misc);   /* = Misc, Muted lavender (catch-all, kept muted) */
  --venueclr-historic: #307C1D; /* Moss green — bella flagged Film's warm slate as reading brown/gray, so this one is standalone, no --catclr-* match */
  --venueclr-school: var(--catclr-class);     /* = Class, Indigo */
  --venueclr-other: #B12595;   /* Rose/fuchsia — no --catclr-* equivalent */

  --rail-bg: rgba(251,248,243,.86);

  /* The active view-switch pill is always yellow, in both themes, so its
   * text needs to stay dark regardless of theme — unlike --ink, which
   * flips light in dark mode. */
  --inkfix: #221D1A;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --cream: #1B1714;
  --cream-2: #221C17;
  --card: #262019;
  --ink: #F3ECE2;
  --muted: #A89C8C;
  --border: #3A3128;

  --rail-bg: rgba(38,32,25,.86);
}

* { box-sizing: border-box; }

::selection { background: rgba(178,58,46,.22); color: var(--ink); }

html {
  scrollbar-color: var(--rust) var(--cream-2);
}

body {
  font-family: var(--font-body);
  background:
    radial-gradient(ellipse 900px 500px at 12% -8%, rgba(178,58,46,.05), transparent 60%),
    var(--cream);
  color: var(--ink);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Nav */
.rail {
  position: sticky; top: 0; z-index: 20;
  background: var(--rail-bg);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
.rail-in {
  max-width: 1100px; margin: 0 auto; padding: 0 20px; height: 58px;
  display: flex; align-items: center; gap: 20px;
  overflow-x: auto; scrollbar-width: none;
}
.rail-in::-webkit-scrollbar { display: none; }
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-headline); font-size: 19px; font-weight: 400;
  color: var(--ink); text-decoration: none; cursor: pointer; letter-spacing: 0;
}
.brand::before {
  content: "";
  width: 10px; height: 10px; border-radius: 2px;
  background: var(--yellow);
  transform: rotate(45deg);
  flex: none;
}
.brand span { color: var(--rust); }

/* Nav links to List/Map/Venues/Saved/Info, sitting in the sticky top
 * rail so they stay reachable from every page, including the Saved and
 * event-detail views. The hero used to duplicate List/Map/Saved in its own
 * pill (.viewswitch) below the headline — removed 2026-09 as redundant
 * with this bar. */
.top-nav {
  display: flex; align-items: center; gap: 2px; flex: none;
  background: var(--cream-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px;
}
.top-nav button {
  background: none; border: none; padding: 7px 14px; font-size: 13px;
  font-family: var(--font-body); font-weight: 600; color: var(--muted); cursor: pointer;
  white-space: nowrap;
  border-radius: 999px; transition: color .15s ease, background-color .15s ease;
}
.top-nav button:hover { color: var(--rust); }
.top-nav button[aria-pressed="true"] { background: var(--rust); color: #FBF8F3; font-weight: 700; }

.rail-end { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
.ig-link {
  display: inline-flex; align-items: center; gap: 6px; color: var(--muted);
  font-family: var(--font-body); font-size: 13px; text-decoration: none;
  padding: 7px 10px; border-radius: var(--radius-sm);
  transition: color .15s ease, background-color .15s ease;
  white-space: nowrap;
}
.ig-link:hover { color: var(--rust); background: rgba(178,58,46,.07); }
.rail-end button {
  background: none; border: none; color: var(--muted); font-size: 13px;
  font-family: var(--font-body);
  cursor: pointer; padding: 7px 10px; border-radius: var(--radius-sm);
  transition: color .15s ease, background-color .15s ease;
}
.rail-end button:hover { color: var(--rust); background: rgba(178,58,46,.07); }
.rail-end .theme-toggle {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--card); color: var(--ink);
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.rail-end .theme-toggle:hover { border-color: var(--rust); color: var(--rust); background: var(--card); }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

@media (max-width: 560px) {
  .rail-in { gap: 10px; padding: 0 14px; }
  .brand { font-size: 16px; }
  .top-nav button { padding: 7px 10px; font-size: 12.5px; }
  .rail-end { gap: 4px; }
  .rail-end form button { padding: 7px 8px; font-size: 12.5px; }
}

/* App footer — sits below every view (list/map/venues/saved/info/detail)
   so the page has a landing spot instead of ending on the last card. Not
   tied to showView's per-view display toggling, since it should stay put
   no matter which main is showing. */
.app-footer {
  max-width: 1100px; margin: 48px auto 0; padding: 28px 20px 36px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center;
}
.app-footer .brand { pointer-events: auto; }
.app-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; }
.app-footer-links a {
  color: var(--muted); font-size: 13px; text-decoration: none;
}
.app-footer-links a:hover { color: var(--rust); }
.app-footer-note { margin: 0; color: var(--muted); font-size: 12.5px; }
.app-footer-legal { font-size: 12px; opacity: .8; max-width: 520px; }

/* Hero — a single full-bleed photo instead of the old tiled collage of
 * differently-lit stock photos, which is what read as a dated blog banner.
 * The scrim below evens out its color temp against the yellow/rust type,
 * echoing the full-bleed-photo-plus-bold-type treatment the Instagram/TikTok
 * decks use. Only hero-philly.jpg is high-enough resolution to hold up at
 * full-bleed size — the other five hero-*.jpg files went soft when scaled,
 * so this stays a single static photo rather than a crossfading set until
 * higher-res replacements exist. */
.hero-banner {
  position: relative;
  display: flex; align-items: center;
  min-height: calc(100vh - 58px);
  min-height: calc(100svh - 58px);
  overflow: hidden;
  isolation: isolate;
}
.hero-photo {
  position: absolute; inset: 0; z-index: -2;
  background-image: url("img/hero-philly.jpg");
  background-size: cover; background-position: center 68%;
  filter: saturate(1.2) contrast(1.08) sepia(.16) hue-rotate(-6deg) brightness(.88);
}

.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(0deg, rgba(20,13,9,.82) 0%, rgba(20,13,9,.32) 42%, rgba(20,13,9,.12) 62%, rgba(20,13,9,.34) 100%),
    radial-gradient(ellipse 900px 500px at 14% -6%, rgba(178,58,46,.28), transparent 60%);
}

.hero-content {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 100px 20px 64px;
  width: 100%;
  text-align: center;
}
.hero-kicker {
  font-weight: 700; font-size: clamp(13px, 1.4vw, 15px);
  margin: 0; letter-spacing: .08em; text-transform: uppercase;
  color: var(--yellow);
  -webkit-text-stroke: 1px var(--headline-shadow-color);
  paint-order: stroke fill;
}
.hero-content h1 {
  font-family: var(--font-headline); font-weight: 400; font-style: normal;
  font-size: clamp(40px, 6.5vw, 76px); margin: 0; letter-spacing: 0; line-height: 1.03;
  color: var(--yellow);
  -webkit-text-stroke: var(--headline-outline);
  paint-order: stroke fill;
  text-shadow: 0.1em 0.1em 0 var(--headline-shadow-color);
  max-width: 20ch; text-wrap: balance;
}
.hero-updated { color: #E7DFD3; font-size: 15px; margin: 4px 0 0; letter-spacing: .01em; text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 2px 10px rgba(0,0,0,.5); }

.scroll-cue {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(251,248,243,.16); border: 1px solid rgba(251,248,243,.3);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  animation: scroll-cue-bounce 2.2s ease-in-out infinite;
  transition: background-color .15s ease, border-color .15s ease;
}
.scroll-cue:hover { background: rgba(251,248,243,.28); border-color: rgba(251,248,243,.5); }
@keyframes scroll-cue-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(7px); }
}

@media (max-width: 780px) {
  .hero-content { padding: 88px 20px 56px; }
  .scroll-cue { bottom: 16px; }
}

/* Filters */
.filterbar { padding: 16px 0 20px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.filterbar select, .venues-toolbar select {
  font-family: var(--font-body); font-size: 13px; padding: 9px 30px 9px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--card); color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23443A30' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.filterbar select:hover, .venues-toolbar select:hover { border-color: #D8C8B4; }
.search-input {
  font-family: var(--font-body); font-size: 13px; padding: 9px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--card); color: var(--ink);
  flex: 1 1 240px; min-width: 180px; transition: border-color .15s ease, box-shadow .15s ease;
}
.search-input::placeholder { color: #A79C8E; }
.search-input:hover { border-color: #D8C8B4; }
.search-input:focus { outline: none; border-color: var(--rust); box-shadow: 0 0 0 3px rgba(178,58,46,.12); }
.chip {
  font-family: var(--font-body); font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card); color: var(--muted); cursor: pointer;
  transition: all .15s ease;
}
.chip:hover { border-color: var(--rust); color: var(--rust); }
.chip[aria-pressed="true"] { background: var(--rust); color: var(--card); border-color: var(--rust); }

.datefilter-menu { position: relative; }
.datefilter-popover {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 10; width: 250px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px; box-shadow: var(--shadow-3);
}
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-header span { font-family: var(--font-body); font-size: 13px; font-weight: 600; }
.cal-nav {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border); background: var(--card);
  color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1;
}
.cal-nav:hover { border-color: var(--rust); color: var(--rust); }
.cal-weekdays, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-weekdays span { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--muted); padding-bottom: 4px; }
.cal-day {
  aspect-ratio: 1; border: none; background: none; border-radius: 50%; font-family: var(--font-body);
  font-size: 12.5px; color: var(--ink); cursor: pointer;
}
.cal-day:hover { background: rgba(178,58,46,.1); color: var(--rust); }
.cal-day.today { font-weight: 700; color: var(--rust); }
.cal-day.in-range { background: rgba(178,58,46,.1); border-radius: 0; }
.cal-day.selected { background: var(--rust); color: var(--card); font-weight: 600; }
.cal-clear {
  width: 100%; margin-top: 10px; padding-top: 10px; border: none; border-top: 1px solid var(--border);
  background: none; color: var(--muted); font-family: var(--font-body); font-size: 12.5px; cursor: pointer;
}
.cal-clear:hover { color: var(--rust); }

/* List view */
.day-group { margin: 30px 0; scroll-margin-top: 90px; }
.day-heading {
  position: relative;
  font-family: var(--font-display); font-weight: 600; font-size: 17px; margin: 0 0 14px;
  padding: 0 0 8px 14px; border-bottom: 2px solid var(--ink); letter-spacing: 0;
}
.day-heading::before {
  content: ""; position: absolute; left: 0; top: 3px; bottom: 11px; width: 5px;
  background: var(--yellow); border-radius: 2px;
}
.day-heading a:hover { color: var(--rust); }
.leaflet-popup-content a:hover { color: var(--rust); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.card {
  position: relative;
  background: var(--card); border: 5px solid var(--border); border-radius: var(--radius-card);
  padding: 18px; scroll-margin-top: 90px; box-shadow: var(--shadow-1);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: #DACBB7; }
.card.highlight { outline: 2px solid var(--rust); outline-offset: 1px; }
.save-toggle {
  position: absolute; top: 14px; right: 14px; background: none; border: none;
  cursor: pointer; font-size: 19px; line-height: 1; color: #C9BBA9; padding: 2px;
  transition: color .15s ease, transform .15s ease;
}
.save-toggle:hover { color: var(--rust); transform: scale(1.1); }
.save-toggle[aria-pressed="true"] { color: var(--rust); }
.attended-toggle {
  position: absolute; top: 14px; right: 42px; background: none; border: none;
  cursor: pointer; font-size: 17px; line-height: 1; color: #C9BBA9; padding: 2px;
  transition: color .15s ease, transform .15s ease;
}
.attended-toggle:hover { color: var(--rust); transform: scale(1.1); }
.attended-toggle[aria-pressed="true"] { color: var(--rust); }
.card-title { font-family: var(--font-body); font-weight: 700; font-size: 16px; margin: 0 0 5px; padding-right: 26px; letter-spacing: -.005em; }
.card.has-attended-toggle .card-title { padding-right: 50px; }
.card-title a { color: var(--ink); text-decoration: none; }
.card-title a:hover { color: var(--rust); }
.card-meta { color: var(--muted); font-size: 13px; margin: 0 0 10px; }
.card-meta a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 2px; }
.card-meta a:hover { color: var(--rust); text-decoration-color: var(--rust); }
.card-desc { font-size: 13.5px; line-height: 1.55; color: var(--ink); margin: 0 0 12px; opacity: .85; }
.subvenue-list { list-style: none; margin: 0; padding: 8px 0 0; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--muted); }
.subvenue-list li { padding: 2px 0; }
/* Related-venue rows (e.g. Kelly Writers House on Penn's card) are links to
   another venue's own page, not a plain department count — needs to read as
   clickable against the same muted list styling above. */
.related-venue-list a { color: var(--rust); text-decoration: underline; text-underline-offset: 2px; }
.related-venue-list a:hover { color: var(--rust-dim); }
.card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tag {
  font-family: var(--font-body); font-size: 11px; font-weight: 600; color: var(--rust); background: rgba(178,58,46,.07);
  padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(178,58,46,.14); cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.tag:hover { background: rgba(178,58,46,.16); border-color: rgba(178,58,46,.3); }
/* --rust reads at ~3:1 against dark-mode card backgrounds (it was only
   tuned for the light theme's cream/card tones), which is why tags were
   hard to read in dark mode. Lighten just the tag text/fill for dark mode
   rather than changing --rust globally, since --rust's contrast is fine
   everywhere it's used against light or white surfaces. */
:root[data-theme="dark"] .tag { color: #E8735F; background: rgba(232,115,95,.14); border-color: rgba(232,115,95,.3); }
:root[data-theme="dark"] .tag:hover { background: rgba(232,115,95,.24); border-color: rgba(232,115,95,.45); }
.card-links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--border); }
.card-link {
  font-family: var(--font-body); font-weight: 600; font-size: 12px; line-height: 1; color: var(--rust); text-decoration: none;
  border: none; background: none; cursor: pointer; padding: 0;
}
.card-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.badge-free {
  display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .03em; color: var(--inkfix);
  background: var(--yellow); padding: 2px 8px; border-radius: 999px; vertical-align: 1px;
}
.badge-soldout {
  display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .03em; color: #FBF8F3;
  background: #B3261E; padding: 2px 8px; border-radius: 999px; vertical-align: 1px;
}
.card.sold-out .card-title, .entry.sold-out .entry-title { opacity: .6; }
.card.sold-out .card-photo img, .entry.sold-out .entry-photo img { filter: grayscale(.7); }
/* Fixed light text rather than --ink — same reasoning as .top-nav's active
 * pill (line ~160): a solid --rust chip needs to stay legible against the
 * chip's own background, not flip with the page theme. */
.badge-accessible {
  display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .03em; color: #FBF8F3;
  background: var(--rust); padding: 2px 8px; border-radius: 999px; vertical-align: 1px;
}

/* Category accents — a thin colored border + a small dot-and-label,
   replacing the old full-color-block treatment (ported from the layout
   mockup, 2026-09). Each category rule only sets one custom property;
   the border and label styling below both derive from it, so plain --ink/
   --muted text works everywhere now — nothing has a colored background
   anymore, so the old per-category white-text/light-category contrast
   overrides this block used to need are gone too (see git history if that
   logic is ever needed again). Shared between .card and .entry so the
   13-color mapping only lives once, in the --catclr-* custom properties. */
.card.cat-queer, .entry.cat-queer { --cat-color: var(--catclr-queer); }
.card.cat-cultural, .entry.cat-cultural { --cat-color: var(--catclr-cultural); }
.card.cat-market, .entry.cat-market { --cat-color: var(--catclr-market); }
.card.cat-theater, .entry.cat-theater { --cat-color: var(--catclr-theater); }
.card.cat-music, .entry.cat-music { --cat-color: var(--catclr-music); }
.card.cat-artsy, .entry.cat-artsy { --cat-color: var(--catclr-artsy); }
.card.cat-game, .entry.cat-game { --cat-color: var(--catclr-game); }
.card.cat-nightlife, .entry.cat-nightlife { --cat-color: var(--catclr-nightlife); }
.card.cat-film, .entry.cat-film { --cat-color: var(--catclr-film); }
.card.cat-class, .entry.cat-class { --cat-color: var(--catclr-class); }
.card.cat-outdoor, .entry.cat-outdoor { --cat-color: var(--catclr-outdoor); }
.card.cat-deals, .entry.cat-deals { --cat-color: var(--catclr-deals); }
.card.cat-misc, .entry.cat-misc { --cat-color: var(--catclr-misc); }

.card[class*="cat-"] { border-color: var(--cat-color); }
.card[class*="cat-"]:hover { border-color: var(--cat-color); }

/* .entry rows stay flush/full-bleed (see the negative margin on .entry) —
   a full box border would fight that layout, so categorized rows get a
   colored left-edge accent instead of the .card treatment's all-around
   border. */
.entry[class*="cat-"] { border-left: 5px solid var(--cat-color); padding-left: 11px; margin-left: -11px; }

.card-cat, .entry-cat {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--cat-color, var(--muted));
}
.card-cat::before, .entry-cat::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none;
}
.card-cat { margin: 0 0 6px; }

.panel .card[class*="cat-"] { border: 5px solid var(--cat-color); }

/* Venue-type accents — thin colored border + a small dot-and-label,
   mirroring the category treatment above instead of the old full-color
   block (ported from the layout mockup, 2026-09; see git history if that
   look is ever needed again). Each rule only sets one custom property;
   the border and badge styling below both derive from it. */
.card.venue-type-library { --venue-color: var(--venueclr-library); }
.card.venue-type-museum { --venue-color: var(--venueclr-museum); }
.card.venue-type-cafe { --venue-color: var(--venueclr-cafe); }
.card.venue-type-bar { --venue-color: var(--venueclr-bar); }
.card.venue-type-gallery { --venue-color: var(--venueclr-gallery); }
.card.venue-type-park { --venue-color: var(--venueclr-park); }
.card.venue-type-market { --venue-color: var(--venueclr-market); }
.card.venue-type-cultural { --venue-color: var(--venueclr-cultural); }
.card.venue-type-shopping { --venue-color: var(--venueclr-shopping); }
.card.venue-type-hotel { --venue-color: var(--venueclr-hotel); }
.card.venue-type-resources { --venue-color: var(--venueclr-resources); }
.card.venue-type-historic { --venue-color: var(--venueclr-historic); }
.card.venue-type-school { --venue-color: var(--venueclr-school); }
.card.venue-type-other { --venue-color: var(--venueclr-other); }

.card[class*="venue-type-"] { border-color: var(--venue-color); }
.card[class*="venue-type-"]:hover { border-color: var(--venue-color); }
.card[class*="venue-type-"] .venue-type-badge { color: var(--venue-color, var(--muted)); }

.empty { color: var(--muted); font-size: 14px; padding: 60px 0; text-align: center; font-family: var(--font-body); }

.load-more-wrap { display: flex; justify-content: center; margin: 10px 0 40px; }
.load-more-btn {
  font-family: var(--font-body); font-size: 13.5px; font-weight: 600; padding: 12px 28px; border-radius: 999px;
  border: 1px solid var(--rust); background: var(--card); color: var(--rust); cursor: pointer;
  transition: all .15s ease;
}
.load-more-btn:hover { background: var(--rust); color: var(--card); }

/* Style picker (Cards / List) — a small segmented control next to the
   filter row, only meaningful on the main list view. */
.stylepicker { display: flex; padding: 3px; gap: 2px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); }
.stylepicker button {
  background: transparent; border: none; padding: 7px 14px; font-size: 12.5px;
  font-family: var(--font-body); font-weight: 600; color: var(--muted); cursor: pointer;
  border-radius: 999px; transition: background-color .15s ease, color .15s ease;
}
.stylepicker button:hover { color: var(--rust); }
.stylepicker button[aria-pressed="true"] { background: var(--rust); color: var(--card); }

/* List style — a single-column feed of entry rows with a sticky day-jump
   sidebar, ported from the redesign sandbox. Cards style (.cards, .card
   above) remains the default. */
.layout { display: grid; grid-template-columns: 150px 1fr; gap: 0 32px; align-items: start; }
.rail-nav { position: sticky; top: 78px; display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
.rail-nav-item {
  background: none; border: none; text-align: left; cursor: pointer;
  font-family: var(--font-body); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); padding: 6px 0 6px 12px; border-left: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.rail-nav-item:hover { color: var(--rust); }
.rail-nav-item.on { color: var(--rust); border-left-color: var(--rust); }

.day-heading-big { display: flex; align-items: baseline; gap: 14px; margin: 0 0 18px; }
.day-heading-big .day-num { font-family: var(--font-display); font-weight: 600; font-size: 38px; line-height: 1; color: var(--rust); }
.day-heading-big .day-name { font-family: var(--font-display); font-size: 18px; font-weight: 600; }
.day-heading-big .day-line { flex: 1; height: 1px; background: var(--border); }
/* Forecast chip beside a day heading; empty (and so invisible) when no forecast. */
.day-wx {
  font-family: var(--font-body, inherit); font-size: 13px; font-weight: 600;
  color: var(--ink-soft, var(--ink)); white-space: nowrap;
}
.day-heading .day-wx { margin-left: 8px; font-weight: 500; }
.day-wx-sep { color: var(--muted); font-weight: 400; margin: 0 8px 0 0; }
.day-wx-link { color: inherit; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; }
.day-wx-link:hover { color: var(--rust); text-decoration-color: var(--rust); }
.day-heading-big .day-wx { align-self: center; }
.day-wx:empty { display: none; }

.entries { display: flex; flex-direction: column; gap: 2px; }
.entry {
  position: relative;
  display: grid; grid-template-columns: 76px 1fr; gap: 20px; align-items: start;
  padding: 18px 16px; margin: 0 -16px; border-radius: var(--radius);
  background: var(--card); border-top: 1px solid var(--border);
  scroll-margin-top: 90px;
}
.entry.has-photo { grid-template-columns: 76px 1fr 84px; }
.entry:first-child { border-top: none; }
.entry[class*="cat-"] { border-top: none; }
.entry-photo {
  display: block; width: 84px; height: 84px; border-radius: var(--radius-sm);
  overflow: hidden; background: var(--border);
}
.entry-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.entry.has-photo .save-toggle {
  background: rgba(255,255,255,.9); border-radius: 50%; width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-1);
  font-size: 15px; top: 10px; right: 10px;
}
.entry-time { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .02em; padding-top: 3px; }
.entry-title { font-family: var(--font-body); font-weight: 700; font-size: 17px; margin: 0 0 5px; padding-right: 26px; letter-spacing: -.005em; }
.entry-title a { color: var(--ink); }
.entry-title a:hover { color: var(--rust); }
.entry-meta { font-size: 12.5px; color: var(--muted); margin: 0 0 8px; }
.entry-meta a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 2px; }
.entry-meta a:hover { color: var(--rust); text-decoration-color: var(--rust); }
.entry-desc { font-size: 13px; line-height: 1.55; color: var(--ink); opacity: .82; margin: 0 0 10px; }
.entry-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.entry-tags .tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--muted);
  padding: 3px 9px; border: 1px solid var(--border); background: var(--card); border-radius: 999px;
}
.entry-cat {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.entry-cat::before { background: var(--cat-color, currentColor); }
.entry-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }

@media (max-width: 820px) {
  .layout { grid-template-columns: 1fr; }
  .rail-nav { position: static; flex-direction: row; flex-wrap: wrap; top: auto; }
  .entry { grid-template-columns: 60px 1fr; }
  .entry.has-photo { grid-template-columns: 60px 1fr 64px; gap: 14px; }
  .entry-photo { width: 64px; height: 64px; }
}

@media (max-width: 480px) {
  .entry.has-photo { grid-template-columns: 60px 1fr; }
  .entry-photo { display: none; }
}

/* Detail view */
.back-link {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted);
  text-decoration: none; margin: 24px 0 18px; transition: color .15s ease, gap .15s ease;
}
.back-link:hover { color: var(--rust); gap: 9px; }
.detail-card {
  position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 36px; max-width: 640px; box-shadow: var(--shadow-2);
}
.detail-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--yellow), var(--rust));
}
.detail-title {
  font-family: var(--font-display); font-weight: 600; font-style: normal; font-size: clamp(24px, 3.2vw, 30px); margin: 0 0 12px;
  text-wrap: balance; letter-spacing: 0;
}
.detail-actions-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 20px; }
.detail-save {
  font-family: var(--font-body); font-size: 14px; font-weight: 600; padding: 9px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--card); color: var(--muted); cursor: pointer;
  transition: all .15s ease;
}
.detail-save:hover { color: var(--rust); border-color: var(--rust); }
.detail-save[aria-pressed="true"] { color: var(--rust); border-color: var(--rust); background: rgba(178,58,46,.08); }
.lists-menu { position: relative; }
.lists-toggle {
  appearance: none; -webkit-appearance: none;
  font-family: var(--font-body); font-size: 14px; font-weight: 600; padding: 9px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--card); color: var(--muted); cursor: pointer;
  transition: all .15s ease;
}
.lists-toggle:hover { color: var(--rust); border-color: var(--rust); }
.lists-popover {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 10; width: max-content; min-width: 220px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px; box-shadow: var(--shadow-3);
}
.lists-popover-row { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 5px 0; cursor: pointer; }
.lists-popover-empty { font-size: 12px; color: var(--muted); margin: 0 0 8px; }
.lists-popover .lists-new-form { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--border); }

/* The same "+ List" trigger also sits inline in a card's footer row or an
   entry's action row, styled to match the plain text links around it
   instead of the detail page's bordered pill button. */
.card-links .lists-toggle, .entry-actions .lists-toggle {
  appearance: none; -webkit-appearance: none; display: block;
  font-family: var(--font-body); font-weight: 600; font-size: 12px; line-height: 1; color: var(--rust);
  background: none; border: none; padding: 0;
}
.card-links .lists-toggle:hover, .entry-actions .lists-toggle:hover {
  color: var(--rust); text-decoration: underline; text-underline-offset: 2px;
}
/* Anchored to the card/entry itself (not the narrow inline trigger) and
   spanning its padded width, so the popover never spills past the card's
   own edge into a neighboring card in the grid. */
.card-links .lists-menu, .entry-actions .lists-menu { position: static; }
.card-links .lists-popover, .entry-actions .lists-popover {
  top: 100%; left: 18px; right: 18px; margin-top: 8px; width: auto; min-width: 0;
}
.entry-actions .lists-popover { left: 16px; right: 16px; }
/* .card's z-index stays auto normally, and .cards is a grid — grid items
   paint in plain document order regardless of a descendant's own z-index,
   so an open popover here would still render *underneath* the next card
   in the grid, both hiding it and stealing its clicks. Only while a card's
   own popover is open does it need to jump above its neighbors. */
.card:has(> .card-links > .lists-menu > .lists-popover:not([hidden])),
.entry:has(> div > .entry-actions > .lists-menu > .lists-popover:not([hidden])) {
  z-index: 20;
}
.lists-new-form { display: flex; gap: 6px; }
.lists-new-form input[type="text"] {
  font-family: var(--font-body); font-size: 13px; padding: 7px 11px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--cream); color: var(--ink); min-width: 0; flex: 1;
}
.lists-new-form input[type="text"]:focus { outline: none; border-color: var(--rust); box-shadow: 0 0 0 3px rgba(178,58,46,.12); }
.lists-new-form button {
  font-family: var(--font-body); font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--rust); background: var(--rust); color: var(--card); cursor: pointer;
  transition: opacity .15s ease;
}
.lists-new-form button:hover { opacity: 0.88; }

/* Saved view */
.saved-header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 12px; margin: 28px 0 10px;
}
.saved-header .detail-title {
  margin: 0; color: var(--yellow); text-shadow: var(--headline-shadow);
  -webkit-text-stroke: var(--headline-outline);
  paint-order: stroke fill;
  font-family: var(--font-headline); font-weight: 400;
}
.saved-new-list-form { flex: 1 1 320px; max-width: 420px; }
.saved-new-list-form input[type="text"] { min-width: 220px; }
.saved-list-search { display: block; width: 100%; max-width: 320px; margin: 0 0 18px; }
.saved-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.saved-list-count { color: var(--muted); font-weight: 400; font-size: 14px; font-family: var(--font-body); }
.saved-list-actions { display: inline-flex; align-items: center; gap: 12px; }
.delete-list-btn, .rename-list-btn {
  font-family: var(--font-body); font-size: 12px; color: var(--muted); background: none; border: none; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 2px;
}
.delete-list-btn:hover { color: var(--rust); text-decoration-color: var(--rust); }
.rename-list-btn:hover { color: var(--ink); text-decoration-color: var(--ink); }
.move-list-btn {
  font-size: 14px; line-height: 1; color: var(--muted); background: none; border: none; cursor: pointer; padding: 2px 4px;
}
.move-list-btn:hover:not(:disabled) { color: var(--ink); }
.move-list-btn:disabled { opacity: 0.3; cursor: default; }
.saved-past-title { margin: 36px 0 10px; color: var(--muted); }
.saved-past-group { opacity: 0.7; }

/* Saved view polish: kicker + summary under the title, each list as a
   panel with a top stripe in its top category color, and illustrated empty states. */
/* The page header (Saved/Venues/Info) is a photo banner, same treatment as
   the front-page hero, so the yellow headline with its rust shadow always
   sits on a photo instead of the tan page background. Uses banner-skyline.jpg
   (a wide dusk skyline panorama). */
.saved-header {
  position: relative; isolation: isolate; overflow: hidden;
  margin: 24px 0 22px; padding: 34px 28px; min-height: 150px;
  border-radius: var(--radius-card); box-shadow: var(--shadow-2);
}
.saved-header::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url("img/banner-skyline.jpg") center 62% / cover;
  filter: saturate(1.1) brightness(.9);
}
.saved-header::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(0deg, rgba(30,14,30,.55) 0%, rgba(30,14,30,.22) 55%, rgba(30,14,30,.12) 100%);
}
/* Saved's own banner: busy aerial street grid, so a heavier, even scrim
   keeps the yellow title and summary readable. */
.saved-header--aerial::before {
  background: url("img/banner-saved.jpg") center 44% / cover;
  filter: saturate(1.05) brightness(.85);
}
.saved-header--aerial::after {
  background: linear-gradient(90deg, rgba(24,14,10,.62) 0%, rgba(24,14,10,.42) 55%, rgba(24,14,10,.28) 100%);
}
.saved-header .lists-new-form, .saved-header .venues-toolbar {
  background: var(--rail-bg); padding: 8px 10px; border-radius: var(--radius);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.saved-header-text { flex: 1 1 280px; }
.saved-kicker {
  margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--yellow);
  -webkit-text-stroke: 1px var(--headline-shadow-color); paint-order: stroke fill;
}
.saved-sub { margin: 10px 0 0; color: #E7DFD3; font-size: 15px; text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 2px 10px rgba(0,0,0,.5); }
.saved-panel {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 20px 22px 22px; box-shadow: var(--shadow-1); position: relative; overflow: hidden;
}
.saved-panel::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: var(--saved-accent, var(--yellow));
}
.saved-panel .day-heading { margin-top: 6px; }
.saved-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 34px 20px 30px; margin: 4px 0 0;
  border: 2px dashed var(--border); border-radius: var(--radius);
  background: color-mix(in srgb, var(--cream) 45%, transparent);
}
.saved-empty-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 50%; margin-bottom: 12px;
  background: var(--yellow); color: var(--inkfix); font-size: 28px; line-height: 1;
  box-shadow: 0.14em 0.14em 0 var(--headline-shadow-color);
}
.saved-empty-icon svg { display: block; }
.saved-photo-strip { display: inline-flex; margin-left: auto; padding-right: 4px; }
.saved-photo-strip img {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: block;
  border: 2px solid var(--card); margin-left: -10px; box-shadow: var(--shadow-1); background: var(--border);
}
.saved-photo-strip img:first-child { margin-left: 0; }
@media (max-width: 600px) { .saved-photo-strip { display: none; } }
.saved-empty-title { margin: 0 0 4px; font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--ink); }
.saved-empty-hint { margin: 0; max-width: 42ch; color: var(--muted); font-size: 14px; line-height: 1.5; }
.saved-empty-cta {
  margin-top: 16px; font-family: var(--font-body); font-size: 13px; font-weight: 600; padding: 8px 18px;
  border-radius: var(--radius-sm); border: 1px solid var(--rust); background: var(--rust); color: var(--card); cursor: pointer;
  transition: opacity .15s ease;
}
.saved-empty-cta:hover { opacity: .88; }
@media (max-width: 600px) { .saved-panel { padding: 16px 14px 18px; } }

/* Info view */
.account-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; margin: 0 0 10px; max-width: 640px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
}
.account-row .card-meta { margin: 0 0 2px; }
.account-email { font-family: var(--font-body); font-weight: 700; font-size: 15px; margin: 0; }
.saved-search-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 14px 18px; margin: 10px 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
}
.saved-search-row .card-title, .saved-search-row .card-meta { margin: 0 0 4px; padding-right: 0; }
/* Info view — same look as the How It Works / About pages: photo hero,
 * diamond-ruled section heads, colored accent cards, round + badges. */
.info-hero {
  position: relative; isolation: isolate; overflow: hidden;
  margin: 24px 0 22px; padding: 56px 36px 40px; min-height: 230px;
  display: flex; align-items: flex-end;
  border-radius: 22px; box-shadow: var(--shadow-2);
}
.info-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url("img/cityhall.jpg") 60% 26% / cover no-repeat;
  filter: saturate(1.15) contrast(1.05);
}
.info-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(20,13,9,.72) 0%, rgba(20,13,9,.22) 60%, rgba(20,13,9,.08) 100%);
}
.info-hero .detail-title {
  margin: 0; font-size: clamp(40px, 7vw, 64px); line-height: 1.05; color: var(--yellow);
  font-family: var(--font-headline); font-weight: 400;
  -webkit-text-stroke: var(--headline-outline); paint-order: stroke fill;
  text-shadow: 0.1em 0.1em 0 var(--headline-shadow-color);
}
.info-hero .saved-sub { margin-top: 12px; font-size: 16px; }

.info-account {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 16px 20px; margin: 0 0 6px; background: var(--card);
  border: 1px solid var(--border); border-left: 5px solid var(--yellow); border-radius: 6px 16px 16px 6px;
  box-shadow: var(--shadow-1);
}
.info-account-label { margin: 0 0 2px; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--rust); }
.info-account-main { margin: 0; font-weight: 700; font-size: 16px; overflow-wrap: anywhere; }
.info-account-btn {
  font-size: 13.5px; font-weight: 700; padding: 10px 18px; border-radius: 999px; text-decoration: none;
  background: var(--rust); color: #FBF8F3; transition: background-color .15s ease, transform .15s ease;
}
.info-account-btn:hover { background: var(--rust-dim); transform: translateY(-1px); }

.info-head { text-align: center; margin: 54px 0 24px; }
.info-kicker { margin: 0 0 6px; font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--rust); }
.info-head h2 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 4.2vw, 36px); line-height: 1.15; }

.info-tour { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.info-tile {
  --c: var(--rust);
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left;
  padding: 22px 20px 20px; border-radius: 20px; border: 0; cursor: pointer;
  font-family: var(--font-body); color: #fff; background: var(--c);
  box-shadow: var(--shadow-2); position: relative; overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.info-tile::after { content: "\2192"; position: absolute; right: 18px; top: 18px; font-size: 20px; opacity: .65; transition: transform .15s ease; }
.info-tile:hover { transform: translateY(-3px) rotate(-.4deg); box-shadow: var(--shadow-3); }
.info-tile:hover::after { transform: translateX(4px); }
.info-tile-ico {
  width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.2); margin-bottom: 12px;
}
.info-tile-label { font-family: var(--font-display); font-weight: 700; font-size: 21px; }
.info-tile-blurb { font-size: 13.5px; line-height: 1.4; opacity: .9; }

.info-faq-group {
  --c: var(--rust);
  display: flex; align-items: center; gap: 10px; margin: 34px 0 10px;
  font-size: 12.5px; font-family: var(--font-body); font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--c);
}
.info-faq-group::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: currentColor; transform: rotate(45deg); flex: none; }
.info-faq-group::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, currentColor 25%, transparent); }
.info-faq { --c: var(--rust); display: flex; flex-direction: column; gap: 10px; }
.info-g1 { --c: #B23A2E; }
.info-g2 { --c: #2D4ED2; }
.info-g3 { --c: #117845; }
:root[data-theme="dark"] .info-g1 { --c: #E8735F; }
:root[data-theme="dark"] .info-g2 { --c: #7C93F5; }
:root[data-theme="dark"] .info-g3 { --c: #3FBF84; }
.info-faq details {
  background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-1);
  position: relative; overflow: hidden;
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.info-faq details::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--c); transform: scaleY(0); transform-origin: top; transition: transform .25s ease;
}
.info-faq details:hover { border-color: color-mix(in srgb, var(--c) 45%, var(--border)); transform: translateY(-1px); }
.info-faq details[open] { box-shadow: var(--shadow-2); border-color: color-mix(in srgb, var(--c) 40%, var(--border)); transform: none; }
.info-faq details[open]::before { transform: scaleY(1); }
.info-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 17px 20px; font-size: 15.5px; font-weight: 700; line-height: 1.35; cursor: pointer; list-style: none; user-select: none;
}
.info-faq summary::-webkit-details-marker { display: none; }
.info-faq summary::after {
  content: "+"; width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 600; line-height: 1; padding-bottom: 1px;
  color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent);
  transition: transform .25s ease, background-color .2s ease, color .2s ease;
}
.info-faq details:hover summary::after { background: color-mix(in srgb, var(--c) 22%, transparent); }
.info-faq details[open] summary::after { transform: rotate(135deg); background: var(--c); color: #fff; }
.info-faq details > p {
  margin: 0; padding: 0 64px 20px 20px; color: var(--muted); font-size: 15px; line-height: 1.65;
  animation: info-faq-in .25s ease;
}
@keyframes info-faq-in { from { opacity: 0; transform: translateY(-5px); } }

.info-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.info-contact-card {
  display: flex; flex-direction: column; gap: 4px; padding: 26px 24px; border-radius: 22px;
  text-decoration: none; box-shadow: var(--shadow-2); position: relative; overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.info-contact-card:hover { transform: translateY(-3px) rotate(-.4deg); box-shadow: var(--shadow-3); }
.info-contact-card::after { content: "\2192"; position: absolute; right: 22px; top: 22px; font-size: 22px; opacity: .6; transition: transform .15s ease; }
.info-contact-card:hover::after { transform: translateX(4px); }
.info-contact-ig { background: var(--rust); color: #FBF8F3; }
.info-contact-mail { background: var(--yellow); color: #221D1A; }
.info-contact-ico {
  width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.28); margin-bottom: 12px;
}
.info-contact-ig .info-contact-ico { background: rgba(255,255,255,.16); }
.info-contact-label { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.info-contact-val { font-family: var(--font-display); font-weight: 700; font-size: clamp(17px, 2.6vw, 21px); overflow-wrap: anywhere; }

.info-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 34px 0 10px; }
.info-more a {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; text-decoration: none;
  font-size: 14px; font-weight: 700; color: var(--ink); background: var(--card); border: 1px solid var(--border);
  transition: color .15s ease, border-color .15s ease, transform .15s ease;
}
.info-more a:hover { color: var(--rust); border-color: var(--rust); transform: translateY(-1px); }

@media (max-width: 860px) { .info-tour { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .info-hero { padding: 44px 22px 28px; min-height: 190px; border-radius: 18px; }
  .info-contact { grid-template-columns: 1fr; }
  .info-faq details > p { padding-right: 20px; }
  .info-head { margin-top: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .info-tile, .info-tile::after, .info-contact-card, .info-contact-card::after, .info-account-btn, .info-more a,
  .info-faq details, .info-faq summary::after, .info-faq details::before { transition: none; }
  .info-tile:hover, .info-contact-card:hover { transform: none; }
  .info-faq details > p { animation: none; }
}

/* Venues view */
.venues-toolbar { display: flex; align-items: center; gap: 10px; flex: 1 1 320px; max-width: 620px; flex-wrap: wrap; }
.venues-toolbar .search-input { flex: 1 1 180px; }
.venues-toolbar select { flex: 0 0 auto; }
.venues-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
/* .card-photo is the same bleed-to-edge treatment as .venue-card-photo
   (venues grid), reused on the event cards/list — both are just "a photo
   pinned to the top of a card", one keyed to the venue's own listing, the
   other to whichever event is being shown (via its venue's photos, see
   showEventPhotos in app.js). */
.venue-card-photo, .card-photo {
  display: block; margin: -18px -18px 14px;
  border-radius: calc(var(--radius-card) - 5px) calc(var(--radius-card) - 5px) 0 0;
  overflow: hidden; aspect-ratio: 16 / 10; background: var(--border);
}
.venue-card-photo img, .card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card.has-venue-photo .save-toggle, .card.has-venue-photo .attended-toggle {
  background: rgba(255,255,255,.9); border-radius: 50%; width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-1);
}
.venue-type-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-body); font-size: 10.5px; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px;
}
.venue-type-badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none;
}
/* Drawn with a CSS border-triangle instead of a Unicode arrow glyph — those
   render at wildly inconsistent (often tiny) sizes across fonts/devices,
   which is why the icon kept looking like a dot no matter the font-size. */
.saved-list-label { display: inline-flex; align-items: center; }
.collapse-toggle {
  background: none; border: none; cursor: pointer; padding: 0; margin-right: 5px;
  width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center;
}
.collapse-toggle::before {
  content: ""; width: 0; height: 0;
  border-style: solid; border-width: 5px 0 5px 7px;
  border-color: transparent transparent transparent var(--ink);
  transition: transform .15s ease, border-color .15s ease;
}
.collapse-toggle[aria-expanded="true"]::before { transform: rotate(90deg); }
.collapse-toggle:hover::before { border-color: transparent transparent transparent var(--rust); }

.detail-facts {
  display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--muted); font-size: 14px;
  margin: 0 0 22px; padding-bottom: 22px; border-bottom: 1px solid var(--border);
}
.detail-facts strong { color: var(--ink); }
.detail-facts a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 2px; }
.detail-facts a:hover { color: var(--rust); text-decoration-color: var(--rust); }
.detail-desc { font-size: 15px; line-height: 1.7; color: var(--ink); margin: 0 0 24px; white-space: pre-line; opacity: .9; }
.detail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 26px; }
.detail-actions a {
  display: inline-block; padding: 11px 20px; background: var(--rust); color: var(--card);
  border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; text-decoration: none;
  box-shadow: var(--shadow-1); transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.detail-actions a:hover { background: var(--rust-dim); transform: translateY(-1px); box-shadow: var(--shadow-2); }
#venue-map { height: 220px; border-radius: var(--radius-sm); margin-top: 4px; border: 1px solid var(--border); isolation: isolate; }

/* Venue hero — a blurred backdrop built from the venue's own lead photo
   (or, lacking one, a brand-color gradient) with a crisp circular avatar
   and the venue name centered on top. Stays within .wrap's rounded-card
   language rather than breaking out edge-to-edge, so it reads as part of
   the same light-theme site instead of a jarring dark insert. */
.venue-hero {
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius-card);
  margin: 24px 0 20px; box-shadow: var(--shadow-2);
  background: linear-gradient(135deg, var(--rust), var(--yellow-dim));
}
.venue-hero-bg {
  position: absolute; inset: -20px; z-index: 0;
  background-size: cover; background-position: center;
  filter: blur(24px) brightness(.7) saturate(1.15); transform: scale(1.15);
}
.venue-hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.55) 85%);
}
.venue-hero-content {
  position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 44px 24px; text-align: center;
}
.venue-hero-avatar {
  width: 96px; height: 96px; border-radius: 50%; flex: none;
  background-size: cover; background-position: center; background-color: var(--rust);
  border: 3px solid rgba(255,255,255,.9); box-shadow: var(--shadow-3);
}
.venue-hero-avatar-fallback {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 28px; color: #fff;
}
.venue-hero-name {
  font-family: var(--font-headline); font-weight: 400; font-size: clamp(24px, 4vw, 36px);
  color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.5); margin: 0; letter-spacing: .01em;
  text-wrap: balance;
}
.venue-info-card { max-width: none; }
.venue-info-card::before { display: none; }
.venue-gallery-section { margin: 0 0 28px; }
.venue-gallery-section .venue-photo-panel { aspect-ratio: auto; height: min(46vw, 380px); }
.venue-photo-panel {
  position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3;
  background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-2);
}
.venue-photo-slide { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.venue-photo-slide[hidden] { display: none; }
.venue-photo-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px;
  border-radius: 50%; border: none; background: rgba(0, 0, 0, .45); color: #fff; font-size: 20px;
  line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background-color .15s ease;
}
.venue-photo-nav:hover { background: rgba(0, 0, 0, .7); }
.venue-photo-prev { left: 10px; }
.venue-photo-next { right: 10px; }
.venue-photo-dots {
  position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 7px;
}
.venue-photo-dot {
  width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .8);
  background: rgba(255, 255, 255, .35); padding: 0; cursor: pointer; transition: background-color .15s ease;
}
.venue-photo-dot.active { background: #fff; }

/* Creator mode — only ever rendered for the one account matching
   CREATOR_EMAIL in app.js, so this never shows for a regular subscriber. */
.creator-card { max-width: none; margin: 0 0 28px; }
.creator-card-title {
  font-family: var(--font-display); font-weight: 600; font-size: 16px; margin: 0 0 14px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em;
}
.creator-series-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin: 0 0 10px; cursor: pointer; }
.creator-field-label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin: 0 0 6px; }
.creator-note-input {
  width: 100%; min-height: 64px; resize: vertical; font-family: var(--font-body); font-size: 14px;
  padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--cream);
  color: var(--ink); box-sizing: border-box;
}
.creator-actions-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; }
.creator-btn {
  font-family: var(--font-body); font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--card); color: var(--muted); cursor: pointer;
  transition: all .15s ease;
}
.creator-btn:hover { color: var(--rust); border-color: var(--rust); }
.creator-hint { font-size: 12px; color: var(--muted); font-style: italic; }
.creator-status { font-size: 12px; color: var(--muted); }
.creator-photo-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.creator-photo-item { position: relative; width: 84px; height: 84px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.creator-photo-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.creator-photo-delete {
  position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; border: none;
  background: rgba(0, 0, 0, .6); color: #fff; font-size: 14px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background-color .15s ease;
}
.creator-photo-delete:hover { background: rgba(178, 58, 46, .9); }
.creator-photo-picker { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.creator-photo-pick {
  width: 64px; height: 64px; border-radius: 8px; overflow: hidden; padding: 0; cursor: pointer;
  border: 2px solid var(--border); background: none; transition: border-color .15s ease;
}
.creator-photo-pick:hover { border-color: var(--rust); }
.creator-photo-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 1000px) {
  .detail-card { max-width: none; }
}

@media (max-width: 600px) {
  .venue-hero-content { padding: 32px 18px; }
  .venue-hero-avatar { width: 76px; height: 76px; }
}

.lightbox {
  position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .88);
  display: flex; align-items: center; justify-content: center;
}
.lightbox[hidden] { display: none; }
.lightbox-img {
  max-width: min(90vw, 1100px); max-height: 88vh; object-fit: contain;
  border-radius: 8px; box-shadow: var(--shadow-2); cursor: default;
}
.lightbox-close {
  position: absolute; top: 18px; right: 24px; width: 40px; height: 40px; border-radius: 50%;
  border: none; background: rgba(255, 255, 255, .12); color: #fff; font-size: 26px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background-color .15s ease;
}
.lightbox-close:hover { background: rgba(255, 255, 255, .25); }
.lightbox .lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px;
  border-radius: 50%; border: none; background: rgba(255, 255, 255, .12); color: #fff; font-size: 26px;
  line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background-color .15s ease;
}
.lightbox .lightbox-nav:hover { background: rgba(255, 255, 255, .25); }
.lightbox-prev { left: 18px; }
.lightbox-next { right: 18px; }

/* Map view */
.mapshell { display: grid; grid-template-columns: 1fr 380px; gap: 0; height: calc(100vh - 190px); min-height: 420px; }
#map { height: 100%; border-radius: 14px 0 0 14px; border: 1px solid var(--border); border-right: none; }
.panel {
  background: var(--card); border: 1px solid var(--border); border-left: none;
  border-radius: 0 14px 14px 0; overflow-y: auto; padding: 18px;
}
.panel .empty { padding: 20px 0; }
.panel .card { border: none; border-bottom: 1px solid var(--border); border-radius: 0; padding: 14px 0; box-shadow: none; }
.panel .card:hover { transform: none; }
.panel .card:last-child { border-bottom: none; }

/* A category color block is its own visual box, not a flat list row — it
   needs the padding back (the plain, uncategorized card above deliberately
   drops it to blend into the panel) plus rounded corners and spacing to
   read as a card rather than a stripe. */
.panel .card[class*="cat-"] { border-radius: var(--radius-card); padding: 16px; margin-bottom: 10px; }
.panel .card[class*="cat-"]:last-child { margin-bottom: 0; border-bottom: 5px solid var(--cat-color); }

.leaflet-popup-content { font-family: var(--font-body); font-size: 13px; }
.leaflet-popup-content b { font-family: var(--font-body); font-weight: 600; }
.leaflet-popup-content-wrapper { border-radius: var(--radius-sm); }

@media (max-width: 720px) {
  .mapshell { grid-template-columns: 1fr; height: auto; }
  #map { height: 55vh; border-radius: 12px; border-right: 1px solid var(--border); }
  .panel { border-radius: 12px; border-left: 1px solid var(--border); margin-top: 12px; max-height: 65vh; }
}

/* Creator-only inline text editing (app.js: t(), applyEditAffordances()) —
   same idea/markup as marketing.css's copy for the public pages. */
body.site-editing [data-editable] {
  outline: 1px dashed var(--rust); outline-offset: 3px; border-radius: 3px;
  cursor: text;
}
body.site-editing [data-editable]:focus { outline-style: solid; background: rgba(255,222,89,.12); }

.site-edit-bar {
  position: fixed; bottom: 18px; right: 18px; z-index: 2000;
  display: flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 10px; box-shadow: var(--shadow-3);
}
.site-edit-btn {
  font-family: inherit; font-weight: 600; font-size: 13px; cursor: pointer;
  border-radius: 999px; padding: 9px 16px; border: 1px solid var(--rust);
  background: transparent; color: var(--rust);
}
.site-edit-btn:hover { background: rgba(178,58,46,.08); }
.site-edit-btn-save { background: var(--rust); color: var(--card); }
.site-edit-btn-save:hover { background: var(--rust-dim); }
.site-edit-btn:disabled { opacity: .6; cursor: default; }
.site-edit-status { font-size: 12.5px; color: var(--muted); padding: 0 4px; }

/* Scrollbars (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--cream-2); }
::-webkit-scrollbar-thumb { background: #CBB9A2; border-radius: 999px; border: 2px solid var(--cream-2); }
::-webkit-scrollbar-thumb:hover { background: var(--rust); }

/* Ticket-stub treatment for event cards (2026-10): a date tab on the photo's
   top-left corner and a perforated, category-tinted tear-off footer with side
   notches. Scoped to :is(.cards, .panel) > .card.ticket so venue cards and the map panel's
   flat list rows are untouched. The notches are filled with --cream so they
   read as bites out of the border; the cards sit directly on the page. */
.date-tab { display: none; }
:is(.cards, .panel) > .card.ticket .date-tab {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; min-width: 52px; padding: 6px 9px 5px;
  background: var(--card); color: var(--ink); border: 3px solid var(--cat-color, var(--border)); border-radius: 8px;
  box-shadow: var(--shadow-1); line-height: 1; transform: rotate(-3deg);
}
:is(.cards, .panel) > .card.ticket .date-tab .m { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
:is(.cards, .panel) > .card.ticket .date-tab .d { font-family: var(--font-headline); font-size: 24px; margin-top: 2px; }
:is(.cards, .panel) > .card.ticket .date-tab .w { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cat-color, var(--muted)); margin-top: 2px; }
:is(.cards, .panel) > .card.ticket.cat-outdoor .date-tab .w { color: #1E8A43; }
:root[data-theme="dark"] :is(.cards, .panel) > .card.ticket.cat-outdoor .date-tab .w { color: var(--catclr-outdoor); }
:is(.cards, .panel) > .card.ticket:not(.has-venue-photo) { padding-top: 52px; }
:is(.cards, .panel) > .card.ticket:not(.has-venue-photo) .date-tab { top: -14px; }
:is(.cards, .panel) > .card.ticket .card-photo { overflow: visible; }
:is(.cards, .panel) > .card.ticket .card-photo img { border-radius: calc(var(--radius-card) - 5px) calc(var(--radius-card) - 5px) 0 0; }
:is(.cards, .panel) > .card.ticket .card-links {
  position: relative; margin: auto -18px -18px; padding: 14px 18px;
  border-top: 2px dashed var(--cat-color, var(--border));
  background: color-mix(in srgb, var(--cat-color, var(--border)) 7%, var(--card));
  border-radius: 0 0 calc(var(--radius-card) - 5px) calc(var(--radius-card) - 5px);
}
:is(.cards, .panel) > .card.ticket .card-links::before, :is(.cards, .panel) > .card.ticket .card-links::after {
  content: ""; position: absolute; top: -12px; width: 24px; height: 24px; box-sizing: border-box;
  border-radius: 50%; background: var(--notch-bg, var(--cream)); border: 5px solid var(--cat-color, var(--border));
}
:is(.cards, .panel) > .card.ticket .card-links::before { left: -17px; clip-path: inset(0 0 0 50%); }
:is(.cards, .panel) > .card.ticket .card-links::after { right: -17px; clip-path: inset(0 50% 0 0); }
:is(.cards, .panel) > .card.ticket { display: flex; flex-direction: column; }

/* Map panel: its cards sit on --card (not the page cream) and use 16px padding
   elsewhere, so give ticket cards here the full 18px and a matching notch fill. */
.panel > .card.ticket { --notch-bg: var(--card); padding: 18px; margin-bottom: 18px; }
.panel > .card.ticket:not(.has-venue-photo) { padding-top: 52px; }

/* Map pins and controls (2026-10): category-colored teardrops over the stock
   tiles; the tiles themselves stay as they were for street-level detail. */
.map-pin { background: none; border: 0; filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); transition: transform .15s ease; transform-origin: 50% 100%; }
.map-pin:hover { transform: scale(1.15); z-index: 900 !important; }
.map-pin svg { display: block; overflow: visible; }
.map-pin .pin-count { font: 400 14px var(--font-headline); fill: #fff; }
.map-pin .pin-count-dark { fill: var(--inkfix); }
.leaflet-bar { border: none !important; box-shadow: none !important; display: flex; flex-direction: column; gap: 6px; }
.leaflet-bar a, .leaflet-bar a:hover {
  width: 36px; height: 36px; line-height: 32px; border-radius: 50% !important; background: var(--card); color: var(--ink);
  border: 2px solid var(--ink) !important; box-shadow: 2px 2px 0 var(--ink); font-weight: 700;
}
.leaflet-bar a:active { transform: translate(2px, 2px); box-shadow: none; }
.leaflet-popup-content-wrapper { background: var(--card); color: var(--ink); border: 2px solid var(--ink); border-radius: 12px; box-shadow: 3px 3px 0 var(--ink); }
.leaflet-popup-tip { background: var(--card); border: 2px solid var(--ink); }

/* Map view style switch + heat view (2026-10). Pins stay the default. */
.map-modes { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 12px; background: var(--card); border: 1px solid var(--border); border-radius: 999px; }
.map-modes button { font: 600 13px var(--font-body); color: var(--muted); background: none; border: 0; border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.map-modes button[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.heat-legend { display: flex; align-items: center; gap: 8px; background: var(--card); color: var(--muted); border: 1.5px solid var(--border); border-radius: 12px; padding: 7px 11px; font: 600 11.5px var(--font-body); box-shadow: var(--shadow-1); }
.heat-bar { display: inline-flex; border-radius: 4px; overflow: hidden; border: 1px solid var(--border); }
.heat-bar i { width: 22px; height: 10px; display: block; }
.hood-tip { font: 600 12px var(--font-body); background: var(--ink); color: var(--cream); border: 0; border-radius: 8px; box-shadow: none; }
.hood-tip::before { display: none; }
.hood-rank { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.hood-row { position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 9px 12px 13px; background: var(--card); color: var(--ink); border: 1px solid var(--border); border-radius: 10px; font: 600 14px var(--font-body); cursor: pointer; text-align: left; overflow: hidden; }
.hood-row:hover { border-color: var(--rust); }
.hood-n { font-variant-numeric: tabular-nums; color: var(--muted); }
.hood-bar { position: absolute; left: 0; bottom: 0; height: 5px; }
.hood-back { background: none; border: 0; padding: 0 0 8px; cursor: pointer; }

/* Store-app build: no links out to subscribe / manage billing. */
.in-app a[href="/links"],
.in-app a[href*="stripe.com"],
.in-app .info-account-btn { display: none !important; }

/* Phone layout (<=560px). Kept at the end of the file so these override the
   desktop rules above. Targets ~360px-wide phones: no horizontal scrolling,
   a 16px side gutter, and the nav/filters wrapping into full-width rows. */
@media (max-width: 560px) {
  .wrap { padding: 0 16px; }
  .rail-in { flex-wrap: wrap; height: auto; row-gap: 10px; padding: 10px 16px; overflow-x: visible; }
  .rail-in .brand { order: 0; }
  .rail-end { order: 1; margin-left: auto; gap: 4px; }
  .rail-end .ig-link { display: none; }
  .top-nav { order: 2; flex: 1 1 100%; width: 100%; justify-content: space-between; }
  .top-nav button { flex: 1 1 0; min-width: 0; padding: 8px 2px; font-size: 12.5px; }

  .hero-content { padding: 72px 16px 56px; gap: 14px; }
  .hero-content h1 { font-size: 44px; }

  /* .filterbar's own padding shorthand would zero the side gutter from .wrap,
     so the dropdowns, search, and date picker run into the screen edges. */
  .filterbar { gap: 8px; padding: 14px 16px 16px; }
  .filterbar select, .venues-toolbar select { flex: 1 1 calc(50% - 4px); min-width: 0; max-width: none; }
  .venues-toolbar { flex: 1 1 100%; max-width: none; gap: 8px; }
  .venues-toolbar .search-input { flex: 1 1 100%; }
  .search-input { flex: 1 1 100%; min-width: 0; width: 100%; }
  .datefilter-menu { flex: 1 1 100%; }
  .datefilter-toggle { width: 100%; text-align: center; }
  .datefilter-popover { width: auto; left: 0; right: 0; }
  .filterbar .chip { font-size: 12.5px; padding: 8px 13px; }
  .stylepicker { margin-left: auto; }

  .card { padding: 16px; }
  .cards { gap: 14px; }

  .entry { grid-template-columns: 56px 1fr; gap: 14px; padding: 16px 12px; margin: 0 -12px; }
  .entry.has-photo { grid-template-columns: 56px 1fr; }
  .entry-photo { display: none; }

  .detail-card { padding: 22px 18px; }
  .back-link { margin: 18px 0 14px; }

  .app-footer { padding: 24px 16px 32px; }
}

/* ---------- Touch & phone usability (mobile audit 2026-10-19) ----------
   iOS Safari zooms the whole page when a focused field is under 16px, so
   phone inputs are 16px. On touch screens, small controls get a 44px hit
   area (::after) without changing how they look. Tags are the exception:
   a 44px box on each would overlap the neighbouring tags in a wrapped row,
   so they only get more padding. */
@media (max-width: 600px) {
  .search-input, .filterbar select, .venues-toolbar select, .lists-new-form input[type="text"] { font-size: 16px; }
}
@media (pointer: coarse) {
  .search-input, .filterbar select, .venues-toolbar select, .chip { min-height: 44px; }
  .top-nav button { min-height: 44px; }
  .rail-end .theme-toggle { width: 44px; height: 44px; }
  .rail-end a.demo-subscribe, .demo-ribbon a { min-height: 44px; display: inline-flex; align-items: center; }
  .rail-end form button { min-height: 44px; }
  /* Leaflet's +/- buttons are 30px by default; the map's main zoom control on a phone. */
  /* leaflet.css loads after this file and sets 30px on .leaflet-touch .leaflet-bar a, so match it with more specificity. */
  body .leaflet-touch .leaflet-control-zoom a { width: 44px; height: 44px; line-height: 44px; font-size: 24px; }
  .tag { padding: 10px 13px; }
  /* Inline card footer links and the heart: a 44px hit area that does not
     change the card layout (padding here would add ~30px to every card). */
  .save-toggle, .card-link { position: relative; }
  .save-toggle::after, .card-link::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
}

/* Phone hero: shorter so the search box and the top of the first event cards
   fit above the fold on a 390x844 screen. Desktop keeps its full-height hero. */
@media (max-width: 560px) {
  .hero-banner { min-height: 0; }
  .hero-content { padding: 36px 16px 28px; gap: 10px; }
  .scroll-cue { display: none; }
}

/* Shown over the map for a moment when a phone user touches it with one finger
   (see addTwoFingerHint in app.js). */
.map-gesture-hint {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 1000;
  background: rgba(34,29,26,.85); color: #FBF8F3; font-size: 13px; font-weight: 600; line-height: 1.3;
  padding: 8px 14px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .25s ease;
}
.map-gesture-hint.show { opacity: 1; }

/* ---------- Map view on phones (mobile audit, 2026-10-20) ----------
   Sizing: the map is the small viewport height minus the sticky header and the
   Pins/Busiest bar (--map-h, measured by syncMapChrome in app.js). It is read once
   per orientation, not from the live height, so the map does not resize (and jump)
   when the browser toolbar slides away mid-scroll. Desktop sizing
   (the two-column grid above) is untouched. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (pointer: coarse) { body.view-map { overscroll-behavior-y: none; } } /* no rubber-band bounce behind the map on phones */
.map-pin svg { margin: 0 auto; }
@media (max-width: 720px) { #map { height: max(160px, var(--map-h, 55vh)); } }
/* Phones held sideways are wider than 720px but only ~400px tall: keep the
   side-by-side layout, fit it to the screen instead of the 420px desktop minimum. */
@media (pointer: coarse) and (min-width: 721px) and (max-height: 520px) {
  .mapshell { height: max(160px, var(--map-h, calc(100vh - 112px))); min-height: 160px; }
}

/* Clusters (touch screens) */
.map-cluster { background: none; border: 0; }
.map-cluster > div {
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--rust); color: #fff; border: 3px solid var(--card); box-shadow: 0 2px 6px rgba(0,0,0,.35);
  font: 400 15px var(--font-headline);
}

/* Popups: 14px+ text, rows that are real links with 44px tap height */
.ev-popup .leaflet-popup-content { font-size: 14px; line-height: 1.35; margin: 10px 14px; max-width: min(300px, calc(100vw - 64px)) !important; /* narrower on touch screens: see the coarse block */ max-height: 440px; max-height: min(60dvh, 440px); overflow-y: auto; overscroll-behavior: contain; }
.ev-popup .pop { display: flex; flex-direction: column; min-width: 200px; }
.ev-popup .pop-venue { display: flex; align-items: center; min-height: 44px; font: 700 15px/1.3 var(--font-body); padding: 0 28px 0 0; color: var(--ink); text-decoration: none; }
.ev-popup .pop-row { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 44px; padding: 6px 0; border-top: 1px solid var(--border); color: var(--ink); text-decoration: none; }
.ev-popup .pop-row b { font-weight: 600; font-size: 14px; }
.ev-popup .pop-row .pop-when { font-size: 14px; color: var(--muted); }
.ev-popup .pop-row .pop-go { font-size: 14px; font-weight: 700; color: var(--rust); margin-top: 2px; }
.ev-popup .pop-all { position: sticky; bottom: 0; background: var(--card); display: flex; align-items: center; min-height: 44px; border-top: 1px solid var(--border); font-weight: 700; font-size: 14px; color: var(--rust); text-decoration: none; }

/* Visible keyboard focus on everything inside the map */
.leaflet-marker-icon:focus-visible, .leaflet-container:focus-visible, .leaflet-bar a:focus-visible,
.leaflet-popup-close-button:focus-visible, .ev-popup a:focus-visible, .map-modes button:focus-visible {
  outline: 3px solid var(--rust); outline-offset: 2px;
}

@media (pointer: coarse) {
  .ev-popup .leaflet-popup-content { max-width: min(300px, calc(100vw - 88px)) !important; }
  .leaflet-container.popup-open .leaflet-control-zoom { visibility: hidden; }
  .map-modes button { min-height: 44px; padding: 0 16px; }
  /* leaflet.css styles this as .leaflet-container a.leaflet-popup-close-button (24px), so match its specificity */
  .leaflet-container .ev-popup a.leaflet-popup-close-button { width: 44px; height: 44px; padding: 0; top: 0; right: 0; font: 400 26px/44px var(--font-body); text-align: center; color: var(--ink); }
  /* The credit stays, but its box no longer swallows taps meant for pins under it */
  .leaflet-container .leaflet-control-attribution { font-size: 11px; white-space: nowrap; pointer-events: none; } /* leaflet.css loads later; the extra class beats it */
  .leaflet-container .leaflet-control-attribution a { pointer-events: auto; position: relative; }
  .leaflet-container .leaflet-control-attribution a::after { content: ""; position: absolute; left: -8px; right: -8px; top: 50%; height: 44px; transform: translateY(-50%); } /* 44px hit area, no taller credit bar */
}

/* ---------- Phone filters + event quick-action bar (mobile pass 2026-10-20) ----------
   Filters collapse behind one button so the first events are on screen without
   scrolling past six controls. Desktop never sees the button or the bar. */
.filters-toggle, .filters-done, .detail-bar { display: none; }
.filter-panel { display: contents; } /* desktop: children lay out exactly as before */
@media (max-width: 560px) {
  .filterbar .filters-toggle { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 auto; justify-content: center; }
  .filters-count { background: var(--rust); color: var(--card); border-radius: 999px; min-width: 20px; padding: 0 6px; font-size: 12px; line-height: 20px; text-align: center; }
  .filters-count[hidden] { display: none; }
  .filterbar .filters-done { display: inline-flex; align-items: center; }
  .filters-toggle[aria-expanded="true"] { border-color: var(--rust); }
  /* Closed: just the search box, the Filters button and the Cards/List switch.
     Open: the rest drops down as a card over the list, so nothing shifts. */
  .filterbar { position: relative; }
  .filter-panel { display: none; }
  .filterbar.filters-open .filter-panel {
    display: flex; flex-wrap: wrap; gap: 8px; position: absolute; left: 16px; right: 16px; top: calc(100% - 8px); z-index: 80;
    padding: 14px; background: var(--card); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-3);
  }
  /* Half-width selects clip "All neighborhoods" at 16px, so each gets its own row. */
  .filter-panel select { flex: 1 1 100%; }
  .filters-toggle svg { flex: none; }
  .filters-done { flex: 1 1 100%; justify-content: center; background: var(--rust); border-color: var(--rust); color: var(--card); font-weight: 600; }
  .filterbar .search-input { order: 0; }
  .filterbar .filters-toggle { order: 1; }
  .filterbar .stylepicker { order: 2; margin-left: 0; }

  #detail-body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .detail-bar {
    display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--card); border-top: 1px solid var(--border); box-shadow: 0 -4px 14px rgba(0,0,0,.08);
  }
  .detail-bar > * {
    flex: 1 1 0; min-width: 0; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
    padding: 0 6px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--ink);
    font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer;
  }
  .detail-bar > [aria-pressed="true"] { background: var(--rust); border-color: var(--rust); color: var(--card); }
}