/* =============================================================
   Lancaster Live Music — The Bulletin
   Newsprint direction. Cream paper, two-ink palette (black + red),
   serif typography, ruled hairlines as the primary visual device.
   ============================================================= */

:root {
  --paper: #f3ecdc;
  --paper-shade: #ebe3d0;
  --paper-deep: #e3dabe;
  --paper-input: #faf6ea; /* soft, a hair lighter than the page: "fillable" without stark #fff */
  --ink: #1a1208;
  --ink-soft: #4a3e2c;
  --ink-faint: #5e5240;
  --rule: #2a1f10;
  --rule-soft: rgba(42, 31, 16, 0.35);
  --red: #a82a16;
  --red-deep: #8a1f10;
  --good: #2a7a3a;   /* status: "Listed" — from the venue's calendar */
  --review: #2c557d; /* status: "Needs review" — not yet checked */
  --highlight: rgba(168, 42, 22, 0.08);
  --serif: "Playfair Display", "Times New Roman", serif;
  --display: var(--serif); /* Playfair headline alias of --serif */
  --body: "EB Garamond", Georgia, serif;
  --stamp: "Special Elite", "Courier New", monospace;
}

* , *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background:
    radial-gradient(circle at 12% 8%, rgba(160, 130, 80, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 88% 78%, rgba(130, 90, 50, 0.05) 0%, transparent 45%),
    var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.5;
  min-height: 100vh;
}
/* Newsprint grain removed for crisper text (legibility pass). */
body::before { display: none; }
.wrap {
  max-width: 1080px; margin: 0 auto; padding: 0 56px;
  position: relative; z-index: 2;
}

a { color: inherit; text-decoration: none; }

/* =============================================================
   Masthead
   ============================================================= */
.masthead { padding: 36px 0 14px; position: relative; }
.preline {
  font-family: var(--body);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 18px;
}
.preline > * { flex: 1; }
.preline > :nth-child(2) { text-align: center; }
.preline > :nth-child(3) { text-align: right; }

.word {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 900;
  font-size: 96px;
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin: 0;
  text-align: center;
}
.word .amp { color: var(--red); font-weight: 400; }
.subhead {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ink-soft);
  text-align: center;
  margin-top: 8px;
}
.dateline {
  font-family: var(--body);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  margin-top: 18px;
  border-top: 1px solid var(--rule);
  border-bottom: 4px double var(--rule);
  padding: 12px 0;
  display: flex; justify-content: space-between; align-items: center;
}
/* The Vol/No dateline tag and the rotated masthead stamp were removed in the
   declutter pass — their markup no longer exists, so their CSS is gone too. */

/* =============================================================
   View tabs (top nav)
   ============================================================= */
.topnav .wrap {
  display: flex; justify-content: center; gap: 0;
  border-bottom: 1px solid var(--rule);
}
.topnav a {
  font-family: var(--body); font-weight: 500;
  font-size: 14.5px;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--ink-soft);
  padding: 14px 22px;
  border-right: 1px solid var(--rule);
  cursor: pointer;
  transition: 0.12s;
}
.topnav a:first-child { border-left: 1px solid var(--rule); }
.topnav a:hover { background: var(--paper-shade); color: var(--ink); }
.topnav a.on { color: var(--paper); background: var(--ink); }
.topnav a.on:hover { background: var(--ink); }
.topnav .topnav-spacer {
  flex: 1; border: 0; cursor: default; padding: 0;
  background: none;
}
.topnav .topnav-spacer:hover { background: none; }
.topnav .topnav-side {
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.12em;
  border-right: 1px solid var(--rule);
  background: none;
}
.topnav .topnav-side:hover { background: var(--paper-shade); color: var(--ink); }

/* =============================================================
   Category chip row — top-of-bar primary view selector.
   Sits above the refine row. Multi-select; can't clear last.
   ============================================================= */
.cats {
  border-bottom: 1px solid var(--rule-soft);
  background: var(--paper);
}
.cats .wrap {
  display: flex; flex-wrap: wrap; gap: 6px 10px;
  align-items: center;
  padding: 12px 56px;
}
.cats-label {
  font-family: var(--body);
  font-style: italic;
  font-size: 14.5px;
  color: var(--ink);
  font-weight: 500;
  margin-right: 4px;
}
/* Event-type chips — rounded, icon-led pills, deliberately a different species
   from the hard square uppercase time tabs (.topnav) above. */
.cat-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--body);
  font-size: 13.5px;
  background: var(--paper);
  color: var(--ink-soft);
  border: 1px solid var(--rule-soft);
  border-radius: 999px;
  padding: 5px 13px;
  cursor: pointer;
  transition: 0.12s;
}
.cat-btn i { font-size: 15px; line-height: 1; }
.cat-btn:hover { border-color: var(--rule); color: var(--ink); }
.cat-btn.on   { background: var(--highlight); color: var(--red); border-color: var(--red); font-weight: 500; }
.cat-btn.on:hover { background: rgba(168,42,22,0.16); border-color: var(--red); color: var(--red); }

/* ── Top declutter pass (cohesive with the redesign) ───────────────────── */
.scope-strip { display: none; }   /* redundant with the Where picker above */

/* List <-> Map toggle on the time views (Tonight / Weekend / Week) */
.layout-bar { display: flex; justify-content: flex-end; padding: 16px 0 0; }
.layout-toggle { display: inline-flex; border: 1px solid var(--rule); }
.lt-btn {
  font-family: var(--body); font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em;
  background: var(--paper); color: var(--ink-soft); border: 0; border-right: 1px solid var(--rule);
  padding: 7px 16px; cursor: pointer; transition: 0.12s;
}
.lt-btn:last-child { border-right: 0; }
.lt-btn.on { background: var(--ink); color: var(--paper); }
.lt-btn:not(.on):hover { background: var(--paper-shade); color: var(--ink); }

/* =============================================================
   Refine bar
   ============================================================= */
.refine .wrap {
  display: flex; gap: 16px; flex-wrap: wrap;
  padding: 16px 56px 22px;
  align-items: baseline;
  font-family: var(--body); font-size: 14.5px;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
}
.refine .label { font-style: italic; color: var(--ink); font-weight: 500; }
.refine .r-btn {
  background: none; border: 0;
  font-family: inherit; font-size: inherit; color: var(--ink-soft);
  cursor: pointer;
  padding: 2px 0;
  border-bottom: 1px dotted var(--ink-faint);
}
.refine .r-btn:hover { color: var(--ink); border-bottom-color: var(--ink); }
.refine .r-btn.on {
  color: var(--red);
  border-bottom: 2px solid var(--red);
  font-weight: 700;
}
.refine .spacer { flex: 1; }
/* =============================================================
   Location + radius picker — replaces the old town dropdown.
   Anchored under the refine row; opens a small panel below.
   ============================================================= */
.refine { position: relative; }
.where-pick {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-style: italic;
  color: var(--ink);
}
.where-pick .wp-label { color: var(--ink); font-weight: 500; }
.wp-anchor, .wp-radius {
  font: inherit; font-style: italic;
  background: none; border: 0;
  color: var(--red);
  padding: 2px 0;
  cursor: pointer;
  border-bottom: 1px dotted var(--red);
}
.wp-anchor:hover, .wp-radius:hover { color: var(--red-deep); border-bottom-color: var(--red-deep); }
.wp-anchor.open, .wp-radius.open { color: var(--red-deep); border-bottom-style: solid; }
.wp-caret { font-style: normal; font-size: 0.85em; margin-left: 2px; }
.wp-within { color: var(--ink-soft); font-style: italic; }

.wp-panel {
  position: absolute;
  top: 100%; right: 56px;
  z-index: 50;
  margin-top: -1px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 0;
  box-shadow: 0 12px 24px rgba(42, 31, 16, 0.15);
  width: min(880px, calc(100vw - 56px));
}
.wp-panel-inner { display: grid; grid-template-columns: 1.2fr 1fr 1.1fr; gap: 0; }
.wp-col-preview { background: var(--paper-shade); }
.wp-mini-map {
  width: 100%; height: 180px;
  border: 1px solid var(--rule);
  background: var(--paper-shade);
}
.wp-mini-meta {
  margin-top: 10px;
  font-family: var(--body);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
}
.wp-mini-meta b { font-style: normal; color: var(--ink); font-weight: 600; }
.wp-col { padding: 18px 20px; }
.wp-col + .wp-col { border-left: 1px solid var(--rule-soft); }
.wp-col-head {
  font-family: var(--body);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-soft);
  font-weight: 700;
  margin-bottom: 12px;
}
.wp-towns {
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  max-height: 240px;
  overflow-y: auto;
}
.wp-town {
  font: inherit;
  font-family: var(--serif);
  font-size: 15px;
  background: none; border: 0;
  padding: 4px 2px;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  border-bottom: 1px solid transparent;
}
.wp-town:hover { color: var(--red); border-bottom-color: var(--red); }
.wp-town.on { color: var(--red); font-weight: 700; border-bottom-color: var(--red); }
.wp-zip {
  display: flex; gap: 8px; align-items: stretch;
  margin-bottom: 10px;
}
.wp-zip input {
  font: inherit;
  font-family: var(--stamp);
  font-size: 16px;
  letter-spacing: 0.12em;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  background: var(--paper-shade);
  width: 110px;
  color: var(--ink);
}
.wp-zip input:focus { outline: 0; border-color: var(--red); }
.wp-zip button {
  font-family: var(--body);
  font-size: 12.5px;
  text-transform: uppercase; letter-spacing: 0.16em;
  background: var(--ink); color: var(--paper);
  border: 0; padding: 0 14px;
  cursor: pointer;
}
.wp-zip button:hover { background: var(--red); }
.wp-hint {
  font-family: var(--body);
  font-style: italic;
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.wp-reset {
  font-family: var(--body); font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
  background: none; border: 0;
  padding: 4px 0;
  cursor: pointer;
  border-bottom: 1px dotted var(--ink-faint);
}
.wp-reset:hover { color: var(--red); border-bottom-color: var(--red); }

#wp-radius-panel { width: auto; right: 56px; }
.wp-radii {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 14px 18px;
}
.wp-radii button {
  font-family: var(--body);
  font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.16em;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule);
  padding: 8px 14px;
  cursor: pointer;
}
.wp-radii button:hover { background: var(--ink); color: var(--paper); }

/* =============================================================
   Mileage radius SLIDER — always visible in the Where area.
   Replaces the old radius pill + 5/10/15/25/50 button panel. Brand
   styling: cream track, red fill + thumb, paper page background.
   ============================================================= */
.wp-radius-slider { margin: 10px 0 2px; }
.wp-rs-row { display: flex; align-items: baseline; justify-content: space-between; }
.wp-rs-label {
  font-family: var(--body);
  font-size: 12.5px;
  font-style: italic;
  color: var(--ink-soft);
}
.wp-rs-input {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 16px; margin: 5px 0 0;
  /* The element background is the TRACK on WebKit (JS paints a red fill gradient onto
     it in reflectRadiusUi); the runnable-track pseudo stays transparent so it shows. */
  background:
    linear-gradient(to right, var(--red) 0%, var(--red) 8%, transparent 8%, transparent 100%);
  background-color: var(--paper-deep);
  border-radius: 999px;
  border: 1px solid var(--rule-soft);
  cursor: pointer;
}
.wp-rs-input:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 999px; }
/* Track (transparent on WebKit so the element-level fill gradient shows through) */
.wp-rs-input::-webkit-slider-runnable-track {
  height: 14px; border-radius: 999px;
  background: transparent;
}
.wp-rs-input::-moz-range-track {
  height: 14px; border-radius: 999px;
  background: transparent;
}
.wp-rs-input::-moz-range-progress { height: 14px; border-radius: 999px; background: var(--red); }
/* Thumb */
.wp-rs-input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; margin-top: -1px;
  border-radius: 50%;
  background: var(--red);
  border: 2px solid var(--paper);
  box-shadow: 0 1px 3px rgba(42, 31, 16, 0.35);
}
.wp-rs-input::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--red);
  border: 2px solid var(--paper);
  box-shadow: 0 1px 3px rgba(42, 31, 16, 0.35);
}
.wp-rs-input:hover::-webkit-slider-thumb { background: var(--red-deep); }
.wp-rs-input:hover::-moz-range-thumb { background: var(--red-deep); }
.wp-rs-scale {
  display: flex; justify-content: space-between;
  font-family: var(--body); font-size: 10.5px;
  color: var(--ink-faint); letter-spacing: 0.04em;
  margin-top: 1px;
}
.wp-rs-hint {
  margin-top: 6px;
  font-family: var(--body); font-size: 11.5px; font-style: italic;
  color: var(--ink-faint); line-height: 1.35;
}

/* =============================================================
   Scope strip — always-visible "you're looking at …"
   Sits between the refine bar and the content. Doubles as a CTA
   to open the location picker.
   ============================================================= */
.scope-strip {
  border-bottom: 1px solid var(--rule-soft);
  background:
    repeating-linear-gradient(135deg, rgba(184, 51, 31, 0.03) 0 8px, transparent 8px 16px),
    var(--paper-shade);
}
.scope-strip .wrap {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 56px;
}
.scope-marker {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--red);
  border: 2px solid var(--paper);
  box-shadow: 0 1px 0 rgba(0,0,0,0.18);
  flex: 0 0 auto;
}
.scope-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--ink);
  flex: 1;
}
.scope-line b {
  font-style: normal;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 1px solid var(--rule-soft);
  padding-bottom: 1px;
}
.scope-change {
  font-family: var(--body);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
  padding: 7px 14px;
  cursor: pointer;
  transition: 0.12s;
}
.scope-change:hover { background: var(--ink); color: var(--paper); }

/* =============================================================
   Section heads (used inside views)
   ============================================================= */
.section-head { text-align: center; padding: 30px 0 22px; }
.section-head .kicker {
  font-family: var(--body);
  font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--red);
  font-weight: 700;
}
.section-head h2 {
  font-family: var(--serif);
  font-size: 56px;
  line-height: 1;
  font-weight: 900;
  margin: 8px 0 6px;
  letter-spacing: -0.01em;
}
.section-head .deck {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: var(--ink-soft);
  max-width: 640px;
  margin: 4px auto 0;
}

/* =============================================================
   Listings — scan-tuned timetable rows
   A time rail (one scan column) · a ruled category bug · the details.
   Shared by Tonight, Weekend, Search and the event-detail view.
   ============================================================= */
.listings { padding: 20px 0 8px; }
.listing {
  display: grid;
  grid-template-columns: 64px 34px 1fr;
  column-gap: 16px;
  padding: 16px 0 17px;
  border-top: 1px dashed var(--rule-soft);
}
.listing:first-child { border-top: 0; }

/* Time rail — bold red start time against a continuous vertical rule */
.sc-time {
  text-align: right;
  border-right: 1px solid var(--rule);
  padding: 2px 13px 0 0;
  line-height: 1.06;
}
.sc-time .sc-date {
  display: block; font-family: var(--body);
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--ink-soft); margin-bottom: 3px;
}
.sc-time .sc-h { font-family: var(--body); font-weight: 700; font-size: 19px; color: var(--red); }
.sc-time .sc-ap {
  display: block; font-family: var(--body); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); margin-top: 3px;
}
.sc-time .sc-end {
  display: block; font-family: var(--body); font-style: italic;
  font-size: 11px; color: var(--ink-faint); margin-top: 4px;
}
.sc-time .started-tag { display: block; margin-top: 5px; font-size: 11px; }

/* Category section bug (Option A) — thin line mark in a ruled circle */
.sc-bug {
  width: 32px; height: 32px; margin-top: 1px;
  border: 1px solid var(--rule); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
}
.sc-bug svg { width: 17px; height: 17px; display: block; }
.sc-bug i { font-size: 18px; line-height: 1; }

/* Details column */
.sc-body { min-width: 0; }
.sc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.listing .artist {
  font-family: var(--serif); font-size: 23px; font-weight: 700;
  line-height: 1.12; margin: 0; letter-spacing: -0.01em;
}
.listing .artist em { font-style: italic; font-weight: 400; }

/* Status — round dot; green "Listed", blue "Needs review".
   Generic base (NOT scoped to a view) so every view inherits the same dot. */
.conf {
  font-family: var(--body); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.01em; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px; color: var(--review);
}
.conf::before {
  content: ""; flex: 0 0 9px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--review);
}
.conf.mid { color: var(--review); }
.conf.mid::before { background: var(--review); }
.conf.hi { color: var(--good); }
.conf.hi::before { background: var(--good); }
/* Mid-confidence has no label, so it was rendering as a bare unexplained dot. Hide the
   labelless badge (keep the intentional dot-only .conf-dot used in compact calendar cells). */
.conf:empty:not(.conf-dot) { display: none; }
.range-head .rh-clear { margin-left: 8px; font-size: 12.5px; color: var(--red); text-decoration: underline; }
/* Dot-only status (tiny week/month grid cells): the ::before dot, no label text. */
.conf-dot { gap: 0; vertical-align: middle; }
.conf-dot::before { flex: 0 0 7px; width: 7px; height: 7px; }

.listing .venue {
  font-family: var(--body); font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-soft); margin-top: 4px;
}
.listing .venue b { color: var(--ink); font-weight: 700; }
.listing .meta {
  margin-top: 7px; display: flex; flex-wrap: wrap; gap: 4px 8px;
  align-items: baseline; font-size: 13px; color: var(--ink-soft); font-style: italic;
}
.listing .meta .pbadge { font-style: normal; }
.listing .meta span::before { content: "·"; margin-right: 8px; color: var(--ink-faint); }
.listing .meta span:first-child::before { content: ""; margin: 0; }
.listing .desc { font-size: 15px; line-height: 1.5; color: var(--ink); margin-top: 7px; }
.listing .desc b { color: var(--red); font-weight: 700; }
.listing .source {
  display: inline-block; font-family: var(--body); font-size: 12.5px;
  color: var(--red); font-style: italic; border-bottom: 1px solid var(--red);
}
.listing .source:hover { color: var(--red-deep); border-bottom-color: var(--red-deep); }
.listing .ev-actions { margin-top: 11px; }

/* Mobile — collapse the rail inline; keep a compact category bug so the
   at-a-glance category read survives on phones. */
@media (max-width: 600px) {
  .listing { grid-template-columns: 28px 1fr; column-gap: 12px; }
  .sc-time {
    grid-column: 1 / -1;
    text-align: left; border-right: 0; padding: 0 0 4px;
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  }
  .sc-time .sc-date, .sc-time .sc-ap, .sc-time .sc-end { display: inline; margin: 0; }
  .sc-time .sc-h { font-size: 16px; }
  .sc-bug { width: 26px; height: 26px; }
  .sc-bug svg { width: 14px; height: 14px; }
  .sc-bug i { font-size: 15px; }
  .sc-top { gap: 10px; }
}

/* =============================================================
   Period header bar (Day / Week / Month nav)
   ============================================================= */
.period-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 30px 0 18px;
  border-bottom: 1px solid var(--rule);
}
.period-bar .pb-left { display: flex; align-items: baseline; gap: 18px; }
.period-bar h2 {
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  margin: 0;
  letter-spacing: -0.015em;
}
.period-bar h2 em { color: var(--red); font-style: italic; font-weight: 400; }
.period-bar .count {
  font-family: var(--body);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 16px;
}
.period-nav { display: flex; gap: 8px; align-items: center; }
.period-nav button {
  font-family: var(--body); font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.16em;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
  padding: 8px 14px;
  cursor: pointer;
  transition: 0.12s;
}
.period-nav button:hover { background: var(--ink); color: var(--paper); }
.period-nav button.today { font-weight: 700; }
/* At the current period there's nothing earlier to show — prev reads as inert. */
.period-nav button:disabled { opacity: 0.3; cursor: default; }
.period-nav button:disabled:hover { background: var(--paper); color: var(--ink); }

/* =============================================================
   Day view — timeline
   ============================================================= */
.daygrid {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 0;
  border-top: 4px double var(--rule);
  border-bottom: 4px double var(--rule);
}
.daygrid .hour {
  font-family: var(--body);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
  padding: 14px 16px 14px 0;
  text-align: right;
  border-right: 1px solid var(--rule);
  border-top: 1px solid var(--rule-soft);
  font-feature-settings: "tnum";
}
.daygrid .hour:first-of-type { border-top: 0; }
.daygrid .hour.cell-empty,
.daygrid .slot.cell-empty {
  min-height: 78px;
}
.daygrid .slot {
  border-top: 1px solid var(--rule-soft);
  padding: 8px 0 8px 24px;
  display: flex; flex-direction: column; gap: 8px;
  position: relative;
}
.daygrid .slot:first-of-type { border-top: 0; }
.daygrid .slot.empty::before {
  content: "—";
  color: var(--ink-faint);
  font-style: italic;
  font-size: 14px;
  align-self: center;
  position: absolute; left: 24px; top: 50%; transform: translateY(-50%);
}
.day-show {
  border-left: 3px solid var(--red);
  padding: 4px 0 4px 14px;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 14px;
  align-items: baseline;
}
.day-show .sc-bug { align-self: start; margin-top: 1px; }
.day-show .ds-body { min-width: 0; }
.day-show .ds-artist {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}
.day-show .ds-venue {
  font-family: var(--body);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  margin-top: 2px;
}
.day-show .ds-venue b { color: var(--ink); font-weight: 700; }
.day-show .ds-meta {
  font-family: var(--body);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 4px;
}
.day-show .ds-meta .red { color: var(--red); font-style: normal; font-weight: 600; }
.day-show .ds-actions {
  font-family: var(--body);
  font-size: 12.5px;
  text-align: right;
  white-space: nowrap;
}
.day-show .ds-actions a {
  display: block;
  color: var(--ink-soft);
  font-style: italic;
  border-bottom: 1px solid var(--rule-soft);
  margin-bottom: 4px;
}
.day-show .ds-actions a:hover { color: var(--red); border-bottom-color: var(--red); }
/* Status dot inherits the generic base .conf — no view-scoped override here. */
.day-show .ds-actions .conf { justify-content: flex-end; }

/* =============================================================
   Week view — 7-column schedule grid
   ============================================================= */
.weekgrid {
  display: grid;
  grid-template-columns: 70px repeat(7, minmax(0, 1fr));
  border-top: 4px double var(--rule);
  border-bottom: 4px double var(--rule);
  margin-bottom: 26px;
}
.weekgrid .wd-head,
.weekgrid .wd-time {
  font-family: var(--body);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
  text-align: center;
  padding: 12px 8px;
  border-right: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule);
}
.weekgrid .wd-head { background: var(--paper-shade); font-weight: 700; color: var(--ink); }
.weekgrid .wd-head.today { background: var(--ink); color: var(--paper); }
.weekgrid .wd-head .num {
  display: block;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: 2px;
}
.weekgrid .wd-time {
  text-align: right; padding-right: 12px;
  border-right: 1px solid var(--rule);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 0;
  padding-top: 10px;
  font-size: 11.5px;
}
.weekgrid .wd-cell {
  border-right: 1px solid var(--rule-soft);
  border-top: 1px solid var(--rule-soft);
  min-height: 64px;
  padding: 4px 6px;
  position: relative;
}
.weekgrid .wd-cell.today { background: var(--highlight); }
.weekgrid .wd-cell:last-child { border-right: 0; }
/* Days already gone: muted column, never populated (forward-looking calendar). */
.weekgrid .wd-head.past { opacity: 0.38; }
.weekgrid .wd-cell.past { background: var(--paper-deep); }
.week-show {
  display: block;
  padding: 4px 6px;
  margin-bottom: 4px;
  border-left: 2px solid var(--red);
  background: var(--paper-shade);
  cursor: pointer;
  transition: 0.12s;
}
.week-show:hover { background: var(--ink); color: var(--paper); }
.week-show:hover .ws-venue { color: var(--paper); }
.week-show .ws-time {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--red);
  display: flex; align-items: center; gap: 5px;
}
/* Compact inline category mark for the tiny grid cells (no ruled circle) */
.ws-bug, .ms-bug { display: inline-flex; align-items: center; color: var(--ink-soft); }
.ws-bug i, .ms-bug i { font-size: 13px; line-height: 1; }
.week-show:hover .ws-time,
.week-show:hover .ws-bug { color: var(--paper); }
.week-show .ws-artist {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.005em;
  margin-top: 1px;
}
.week-show .ws-venue {
  font-family: var(--body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  margin-top: 1px;
}

/* =============================================================
   Month view — classic calendar grid
   ============================================================= */
.monthgrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-top: 4px double var(--rule);
  border-left: 1px solid var(--rule);
}
.monthgrid .md-head {
  font-family: var(--body);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  text-align: center;
  padding: 12px 4px;
  background: var(--paper-shade);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.monthgrid .md-cell {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  min-height: 130px;
  padding: 10px 12px;
  display: flex; flex-direction: column;
  gap: 4px;
  background: var(--paper);
}
.monthgrid .md-cell.other { background: var(--paper-deep); color: var(--ink-faint); }
.monthgrid .md-cell.other .md-num { color: var(--ink-faint); }
.monthgrid .md-cell.today { background: var(--highlight); }
.monthgrid .md-num {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  display: flex; justify-content: space-between; align-items: baseline;
}
.monthgrid .md-cell.today .md-num::after {
  content: "Today";
  font-family: var(--body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--red);
  text-transform: uppercase;
}
.monthgrid .md-summary {
  font-family: var(--body);
  font-size: 11.5px;
  font-style: italic;
  color: var(--red);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.monthgrid .md-show {
  font-family: var(--body);
  font-size: 12.5px;
  line-height: 1.3;
  padding: 2px 0 2px 8px;
  border-left: 2px solid var(--red);
  cursor: pointer;
}
.monthgrid .md-show .ms-bug { margin-right: 3px; vertical-align: middle; }
.monthgrid .md-show .conf-dot { margin-right: 4px; }
.monthgrid .md-show .ms-time {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-right: 4px;
  font-size: 11px;
}
.monthgrid .md-show .ms-artist {
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -0.005em;
}
.monthgrid .md-show:hover .ms-artist { text-decoration: underline; }
.monthgrid .md-more {
  font-family: var(--body);
  font-style: italic;
  font-size: 12px;
  color: var(--ink-soft);
  border-bottom: 1px dotted var(--ink-faint);
  display: inline-block;
  align-self: flex-start;
  margin-top: 2px;
  cursor: pointer;
}

/* =============================================================
   Single-day Calendar — Outlook/Google-style day grid
   A vertical time axis with absolutely-positioned event blocks;
   concurrent events split into side-by-side columns.
   ============================================================= */
.daygrid-wrap { margin-top: 2px; }
.daygrid {
  display: block;         /* override a stale earlier `.daygrid{display:grid;...}` rule that
                             otherwise traps the lane in a 110px grid column */
  position: relative;
  border-top: 4px double var(--rule);
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  padding: 0;
  overflow: hidden;
}
/* Fixed left gutter holding the hour labels; stays put while the lane scrolls sideways. */
.dg-axis { position: absolute; top: 0; left: 0; width: 64px; height: 100%; z-index: 3; background: var(--paper); pointer-events: none; }
.dg-scroll { margin-left: 64px; height: 100%; overflow-x: auto; overflow-y: hidden; }
.dg-hour-label {
  position: absolute;            /* top set inline */
  left: 8px;
  margin-top: -7px;              /* center the label on its gridline */
  width: 48px;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  text-align: right;
  text-transform: lowercase;
}
.dg-hour-line {
  position: absolute;            /* top set inline */
  left: 0;
  right: 0;
  border-top: 1px solid var(--rule-soft);
}
.dg-lane { position: relative; height: 100%; }
.dg-scrollhint { font-family: var(--body); font-size: 12px; font-style: italic; color: var(--ink-soft); margin: 0 0 6px; }
.dg-event {
  position: absolute;
  max-width: 420px;   /* a lonely event expands-to-fill; cap it so it isn't an absurd full-track bar */
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  text-align: left;
  font-family: var(--body);
  background: var(--paper-input);
  border: 1px solid var(--rule-soft);
  border-left: 3px solid var(--red);
  border-radius: 5px;
  padding: 3px 7px;
  cursor: pointer;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(26, 18, 8, 0.08);
  transition: box-shadow 0.12s ease, transform 0.12s ease;
}
.dg-event:hover { box-shadow: 0 3px 10px rgba(26, 18, 8, 0.18); z-index: 30; transform: translateY(-1px); }
.dg-event:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; z-index: 31; }
/* Cascaded overflow cards (a denser hour than the column cap) read as a small stack. */
.dg-event.is-over { box-shadow: -2px 2px 7px rgba(26, 18, 8, 0.22); }
.dg-event.is-over:hover { z-index: 40; }
.dg-ev-time {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--red-deep);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dg-ev-act {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--ink);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.dg-ev-venue {
  font-size: 11px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dg-ev-badge { margin-top: 1px; }
.dg-ev-badge .pbadge { font-size: 10px; padding: 0 6px; }
/* Tight blocks (short events): collapse to one line - time + act only. */
.dg-event.is-tight { padding: 2px 7px; gap: 0; flex-direction: row; align-items: baseline; }
.dg-event.is-tight .dg-ev-act { font-size: 12px; -webkit-line-clamp: 1; }
.dg-event.is-tight .dg-ev-venue,
.dg-event.is-tight .dg-ev-badge { display: none; }
.dg-event.is-tight .dg-ev-time { margin-right: 5px; }

/* "+N more" chip for dense clusters that exceed the visible column cap. */
.dg-more {
  position: absolute;            /* top/left/height/width set inline */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0;
  background: var(--paper-shade);
  border: 1px dashed var(--red);
  border-radius: 5px;
  color: var(--red-deep);
  font-family: var(--body);
  cursor: pointer;
  padding: 2px;
  overflow: hidden;
  z-index: 5;
  transition: background 0.12s ease;
}
.dg-more:hover { background: var(--highlight); z-index: 32; }
.dg-more:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; z-index: 33; }
.dg-more-n { font-weight: 800; font-size: 14px; line-height: 1; }
.dg-more-lab { font-size: 10px; letter-spacing: 0.05em; text-transform: lowercase; opacity: 0.85; }
/* Overflow popup: a small list of the hidden overlapping events. */
.dg-more-pop {
  position: absolute;            /* top/left set in JS */
  z-index: 60;
  width: min(280px, 86%);
  max-height: 320px; overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(26, 18, 8, 0.28);
}
.dg-more-pop[hidden] { display: none; }
.dg-more-pop-head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--body); font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-faint);
  padding: 8px 10px; border-bottom: 1px solid var(--rule-soft);
  position: sticky; top: 0; background: var(--paper);
}
.dg-more-x { background: none; border: 0; font-size: 20px; line-height: 1; cursor: pointer; color: var(--ink-soft); padding: 0 2px; }
.dg-more-x:hover { color: var(--red); }
.dg-more-pop-list { display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.dg-more-ev {
  display: flex; flex-direction: column; gap: 1px;
  text-align: left; font-family: var(--body);
  background: var(--paper-input);
  border: 1px solid var(--rule-soft);
  border-left: 3px solid var(--red);
  border-radius: 5px;
  padding: 5px 8px; cursor: pointer; color: var(--ink);
}
.dg-more-ev:hover { box-shadow: 0 2px 8px rgba(26, 18, 8, 0.15); }
.dg-more-ev:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }

/* Dense-day nudge: invites narrowing by distance / category (tied to the real filters). */
.dg-nudge {
  display: flex; align-items: flex-start; gap: 8px;
  background: var(--highlight);
  border: 1px solid var(--rule-soft);
  border-left: 3px solid var(--red);
  border-radius: 8px;
  padding: 9px 12px;
  margin: 0 0 10px;
  font-family: var(--body); font-size: 13px; color: var(--ink-soft); line-height: 1.4;
}
.dg-nudge .ti { color: var(--red); font-size: 16px; margin-top: 1px; flex: none; }
.dg-nudge-act {
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--red); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.dg-nudge-act:hover { color: var(--red-deep); }

/* Time-TBA strip below the grid */
.dg-tba {
  margin-top: 14px;
  border-top: 1px solid var(--rule-soft);
  padding-top: 12px;
}
.dg-tba-head {
  font-family: var(--body);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.dg-tba-n { font-style: italic; font-weight: 600; letter-spacing: 0.04em; }
.dg-tba-list { display: flex; flex-wrap: wrap; gap: 8px; }
.dg-tba-ev {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
  font-family: var(--body);
  background: var(--paper-input);
  border: 1px solid var(--rule-soft);
  border-left: 3px solid var(--red);
  border-radius: 5px;
  padding: 5px 9px;
  cursor: pointer;
  color: var(--ink);
  min-width: 160px;
  max-width: 240px;
}
.dg-tba-ev:hover { box-shadow: 0 2px 8px rgba(26, 18, 8, 0.15); }
.dg-tba-ev:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }

/* =============================================================
   Map view — Leaflet host inside a newsprint frame
   ============================================================= */
.mapview {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 36px;
  padding: 30px 0;
}
.mapcanvas {
  position: relative;
  background: var(--paper-shade);
  border: 4px double var(--rule);
  aspect-ratio: 5 / 4;
  overflow: hidden;
  /* Leaflet's own CSS gives its zoom control z-index:1000, far above our sticky toolbar
     (z-index 40-60). Without an isolated stacking context here, that z-index escapes
     overflow:hidden's visual clip and paints OVER the sticky header on scroll. isolation
     traps it inside this box so it can never out-stack page chrome. */
  isolation: isolate;
}
.leaflet-host {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  background: var(--paper-shade);
}

/* Tone the Carto Positron tiles to the bulletin cream. The tile <img> elements
   carry the .bulletin-tiles class set in the JS tileLayer options. */
.bulletin-tiles {
  filter:
    sepia(0.32)
    saturate(0.78)
    brightness(0.99)
    contrast(0.94)
    hue-rotate(-6deg);
  mix-blend-mode: multiply;
}

/* Leaflet UI — match newsprint typography */
.leaflet-container,
.leaflet-control,
.leaflet-popup-content { font-family: var(--body); color: var(--ink); }
.leaflet-control-attribution {
  background: rgba(243, 236, 220, 0.85) !important;
  font-family: var(--body) !important;
  font-size: 10.5px !important;
  font-style: italic !important;
  color: var(--ink-soft) !important;
  padding: 2px 6px !important;
}
.leaflet-control-attribution a { color: var(--red); }
.leaflet-control-zoom a {
  background: var(--paper) !important;
  border: 1px solid var(--rule) !important;
  color: var(--ink) !important;
  font-family: var(--serif);
}
.leaflet-control-zoom a:hover { background: var(--ink) !important; color: var(--paper) !important; }

/* County stamp (kept) overlays the map */
.mapcanvas .county-stamp {
  position: absolute;
  bottom: 12px; right: 14px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: 20px;
  color: var(--ink-soft);
  text-align: right;
  line-height: 1.05;
  user-select: none;
  background: rgba(243, 236, 220, 0.78);
  padding: 6px 10px 4px;
  border: 1px solid var(--rule-soft);
  z-index: 500;
  pointer-events: none;
}
.mapcanvas .county-stamp small {
  display: block;
  font-family: var(--body);
  font-style: normal;
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Custom red drop pin (replaces Leaflet default marker icon) */
.venue-pin {
  position: relative;
  cursor: pointer;
  user-select: none;
}
.venue-pin .vp-dot {
  display: block;
  width: 14px; height: 14px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--red);
  border: 2px solid var(--paper);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.22), 0 4px 8px rgba(42, 31, 16, 0.18);
  margin-left: -1px;
}
.venue-pin .vp-label {
  position: absolute;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: -0.005em;
  text-align: center;
  line-height: 1.15;
  color: var(--ink);
  white-space: nowrap;
  pointer-events: none;
  /* Labels are hidden by default — they collide in dense city clusters.
     Reveal on hover/active for the focused pin only. */
  opacity: 0;
  background: rgba(243, 236, 220, 0.94);
  padding: 4px 8px 3px;
  border: 1px solid var(--rule-soft);
  box-shadow: 0 4px 10px rgba(42, 31, 16, 0.18);
  transition: opacity .14s;
}
.venue-pin .vp-label small {
  display: block;
  font-family: var(--body);
  font-weight: 400;
  font-style: italic;
  font-size: 11.5px;
  color: var(--red);
  margin-top: 1px;
  letter-spacing: 0;
}
.venue-pin:hover .vp-dot,
.venue-pin.active .vp-dot {
  background: var(--ink);
  transform: rotate(-45deg) scale(1.25);
}
.venue-pin:hover .vp-label,
.venue-pin.active .vp-label { opacity: 1; }
.venue-pin:hover, .venue-pin.active { z-index: 1000 !important; }

/* Anchor cross for the radius origin */
.anchor-mark .anchor-cross {
  width: 16px; height: 16px;
  position: relative;
}
.anchor-mark .anchor-cross::before,
.anchor-mark .anchor-cross::after {
  content: ""; position: absolute;
  background: var(--red);
}
.anchor-mark .anchor-cross::before { left: 7px; top: 0; width: 2px; height: 16px; }
.anchor-mark .anchor-cross::after  { top: 7px; left: 0; height: 2px; width: 16px; }

/* Map side panel */
.map-side {
  border-left: 4px double var(--rule);
  padding-left: 28px;
}
/* Event-list side (Zillow split) — compact rows linked to the map pins */
.map-day {
  font-family: var(--body); font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--red); font-weight: 700;
  margin: 16px 0 4px; padding: 0 4px 4px; border-bottom: 1px solid var(--rule-soft);
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  cursor: pointer; transition: background 0.12s, color 0.12s; border-radius: 2px;
}
.map-day .md-cue { font-family: var(--body); font-weight: 600; font-size: 11px; flex: none;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--red); opacity: 0.85; white-space: nowrap; }
.map-day:hover, .map-day:focus-visible { background: var(--highlight); color: var(--red-deep); outline: none; }
.map-day:hover .md-cue, .map-day:focus-visible .md-cue { opacity: 1; text-decoration: underline; }
.map-day:focus-visible { box-shadow: inset 0 0 0 2px var(--red); }
/* Day strip: jump straight into any day in range from Map view */
.map-daybar { display: flex; align-items: center; gap: 14px; margin: 0 0 10px; padding: 0 0 10px;
  border-bottom: 1px solid var(--rule-soft); }
.map-daybar .mdb-lead { flex: none; font-family: var(--stamp); font-size: 10.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-faint); }
.map-daybar .mdb-scroll { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: thin; scrollbar-color: var(--rule-soft) transparent; }
.map-daybar .mdb-scroll::-webkit-scrollbar { height: 8px; }
.map-daybar .mdb-scroll::-webkit-scrollbar-thumb { background: var(--rule-soft); border-radius: 999px; }
.map-daybar .mdb-scroll::-webkit-scrollbar-track { background: transparent; }
.mdb-day { flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 64px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; padding: 7px 11px;
  cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; color: var(--ink-soft); }
.mdb-day:hover, .mdb-day:focus-visible { background: var(--highlight); border-color: var(--red); color: var(--red-deep); outline: none; }
.mdb-day .mdb-dow { font-family: var(--body); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.mdb-day:hover .mdb-dow, .mdb-day:focus-visible .mdb-dow { color: var(--red); }
.mdb-day .mdb-date { font-family: var(--serif); font-weight: 700; font-size: 14.5px; color: var(--ink); white-space: nowrap; }
.mdb-day:hover .mdb-date, .mdb-day:focus-visible .mdb-date { color: var(--red-deep); }
.mdb-day .mdb-n { font-family: var(--body); font-size: 10px; color: var(--ink-faint); white-space: nowrap; }
.map-daybar .mdb-more { flex: none; font-family: var(--body); font-size: 11.5px; font-style: italic; color: var(--ink-faint); }
.map-ev {
  display: grid; grid-template-columns: 30px 1fr; gap: 11px;
  padding: 9px 6px; border-top: 1px dashed var(--rule-soft);
  cursor: pointer; transition: background 0.12s;
}
.map-ev:first-of-type { border-top: 0; }
.map-ev .me-icon {
  width: 28px; height: 28px; border: 1px solid var(--rule); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--ink); margin-top: 1px;
}
.map-ev .me-icon i { font-size: 15px; line-height: 1; }
.map-ev .me-main { min-width: 0; }
.map-ev .me-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.map-ev .me-art { font-family: var(--serif); font-weight: 700; font-size: 16px; letter-spacing: -0.005em; line-height: 1.15; }
.map-ev .me-when { font-family: var(--body); font-weight: 700; font-size: 12px; color: var(--red); white-space: nowrap; }
.map-ev .me-sub { font-family: var(--body); font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.map-ev .me-sub b { color: var(--ink); font-weight: 700; }
.map-ev:hover, .map-ev.active { background: var(--highlight); }
.map-side h3 {
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  margin: 0 0 14px;
  line-height: 1.1;
}
.map-side h3 em { color: var(--red); font-style: italic; }
.map-side .deck {
  font-family: var(--body);
  font-style: italic;
  font-size: 14.5px;
  color: var(--ink-soft);
  margin-bottom: 18px;
  border-bottom: 1px dashed var(--ink-faint);
  padding-bottom: 14px;
}
/* (The legacy .map-venue side-panel rows were replaced by the .map-ev
   event-list split; their CSS has been removed as dead code.) */

/* =============================================================
   By Venue list view
   ============================================================= */
.venue-list { padding: 30px 0; }
.venue-block {
  border-top: 4px double var(--rule);
  padding: 24px 0 16px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 36px;
}
.venue-block .vb-head h3 {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 900;
  line-height: 1;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}
.venue-block .vb-head .vb-meta {
  font-family: var(--body);
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
}
.venue-block .vb-head .vb-source {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--body);
  font-size: 13.5px;
  font-style: italic;
  color: var(--red);
  border-bottom: 1px solid var(--red);
}
.venue-block .vb-shows { display: flex; flex-direction: column; }
.venue-block .vb-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 18px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--ink-faint);
  font-size: 15px;
}
.venue-block .vb-row .vbr-when {
  font-family: var(--body);
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--red);
  font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
/* Compact ruled bug for the venue/band list when-cells */
.vb-row .sc-bug, .bb-row .sc-bug {
  flex: 0 0 auto; width: 24px; height: 24px; margin-top: 0; color: var(--ink);
}
.vb-row .sc-bug i, .bb-row .sc-bug i { font-size: 14px; }
.venue-block .vb-row .vbr-artist {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.005em;
}
.venue-block .vb-row .vbr-tags {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 13px;
  text-align: right;
  white-space: nowrap;
}

/* =============================================================
   Band link affordance — applies anywhere artist names are
   rendered through artistLink().
   ============================================================= */
.band-link {
  color: var(--ink);
  border-bottom: 1px solid var(--rule-soft);
  transition: 0.12s;
}
.band-link:hover {
  color: var(--red);
  border-bottom-color: var(--red);
}

/* "Watched" badge — both for venues and bands on the watchlist */
.watched {
  display: inline-block;
  margin-left: 10px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--good);
  text-transform: uppercase;
  border: 1px solid var(--good);
  padding: 2px 6px 1px;
  vertical-align: middle;
}

/* =============================================================
   By Band view
   ============================================================= */
.band-list { padding: 22px 0; }
.band-block {
  border-top: 4px double var(--rule);
  padding: 22px 0 14px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 36px;
}
.band-block .bb-head h3 {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}
.band-block .bb-meta {
  font-family: var(--body);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.band-block .bb-desc {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15.5px;
  color: var(--ink-soft);
  margin-bottom: 6px;
  line-height: 1.45;
}
.band-block .bb-shows { display: flex; flex-direction: column; }
.band-block .bb-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 18px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--ink-faint);
  font-size: 15px;
  align-items: baseline;
}
.band-block .bb-row .bbr-when {
  font-family: var(--body);
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--red);
  font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
.band-block .bb-row .bbr-venue {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.005em;
}
.band-block .bb-row .bbr-tags {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 13px;
  text-align: right;
  white-space: nowrap;
}
.band-block .bb-empty {
  font-family: var(--serif); font-style: italic;
  color: var(--ink-faint); font-size: 14.5px;
  padding: 10px 0;
}

.band-uncovered {
  margin-top: 28px;
  padding: 22px 24px;
  background: var(--paper-shade);
  border: 1px dashed var(--ink-faint);
}
.band-uncovered h3 {
  font-family: var(--serif);
  font-size: 22px;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.band-uncovered h3 em { color: var(--red); font-style: italic; }
.band-uncovered .bu-deck {
  font-family: var(--serif); font-style: italic;
  font-size: 15px;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.band-uncovered .bu-list {
  list-style: none; padding: 0; margin: 0;
  columns: 2; gap: 20px;
  font-family: var(--body);
  font-size: 14.5px;
}
.band-uncovered .bu-list li { padding: 3px 0; break-inside: avoid; }
.band-uncovered .bu-meta { color: var(--ink-faint); font-style: italic; }

/* Band detail body — single-column variant of venue detail */
.bd-body { padding: 28px 0; }
.bd-sources {
  margin: 8px 0 6px;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}
.bd-sources a {
  font-family: var(--body); font-style: italic;
  font-size: 13.5px;
  color: var(--red);
  border-bottom: 1px solid var(--red);
}

/* =============================================================
   Venue detail page
   ============================================================= */
.venue-link {
  color: var(--ink);
  border-bottom: 1px solid var(--rule-soft);
  transition: 0.12s;
}
.venue-link:hover {
  color: var(--red);
  border-bottom-color: var(--red);
}

.vd-back {
  padding: 18px 0 10px;
  font-family: var(--body); font-style: italic; font-size: 14px;
}
.vd-back a {
  color: var(--ink-soft);
  border-bottom: 1px dotted var(--ink-faint);
}
.vd-back a:hover { color: var(--red); border-bottom-color: var(--red); }

.vd-head {
  border-top: 4px double var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 26px 0 22px;
  text-align: center;
}
.vd-head .vd-eyebrow {
  font-family: var(--body);
  font-size: 12.5px;
  text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--red);
  font-weight: 700;
}
.vd-head .vd-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 900;
  font-size: 64px;
  line-height: 1;
  margin: 8px 0 6px;
  letter-spacing: -0.02em;
}
.vd-head .vd-addr {
  font-family: var(--body);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.vd-head .vd-source {
  display: inline-block;
  font-family: var(--body); font-style: italic;
  color: var(--red);
  border-bottom: 1px solid var(--red);
  padding-bottom: 1px;
}
.vd-head .vd-source:hover { color: var(--red-deep); border-bottom-color: var(--red-deep); }
.vd-head .vd-desc {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 640px;
  margin: 14px auto 0;
  line-height: 1.5;
}

.vd-body {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 36px;
  padding: 28px 0;
}
.vd-section {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  padding-bottom: 6px;
  border-bottom: 4px double var(--rule);
}
.vd-section em { font-style: italic; color: var(--red); }

.vd-list { display: flex; flex-direction: column; }
.vd-show {
  padding: 18px 0;
  border-bottom: 1px dashed var(--ink-faint);
}
.vd-show:last-child { border-bottom: 0; }
.vd-show .vd-when {
  font-family: var(--body);
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--red);
  margin-bottom: 6px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
/* Status dot inherits the generic base .conf — no view-scoped override here. */
.vd-show .vd-artist {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.vd-show .vd-meta {
  font-family: var(--body);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.vd-show .vd-blurb {
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--ink);
  margin: 6px 0 8px;
}
.vd-show .vd-tickets {
  font-family: var(--body); font-style: italic;
  font-size: 13px;
  color: var(--red);
  border-bottom: 1px solid var(--red);
}
.vd-show .vd-tickets:hover { color: var(--red-deep); border-bottom-color: var(--red-deep); }
.vd-empty {
  font-family: var(--serif); font-style: italic; font-size: 18px;
  color: var(--ink-soft);
  padding: 22px 0;
}

.vd-right {
  border-left: 4px double var(--rule);
  padding-left: 28px;
}
.vd-map {
  width: 100%; height: 280px;
  border: 1px solid var(--rule);
  background: var(--paper-shade);
  /* Same fix as .mapcanvas: contain Leaflet's absolutely-positioned children (its zoom
     control included) and isolate its z-index:1000 so it can't escape onto the sticky
     header on scroll. */
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.vd-map-meta {
  margin-top: 10px;
  font-family: var(--body);
  font-style: italic;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.vd-coords {
  font-family: var(--stamp);
  font-style: normal;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}

/* =============================================================
   Empty state
   ============================================================= */
.empty {
  text-align: center;
  padding: 80px 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ink-soft);
}

/* =============================================================
   About page
   ============================================================= */
.about-page { padding-bottom: 24px; }
.about-article {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 0;
}
.about-lede { text-align: center; padding: 12px 0 18px; }
.about-lede .kicker {
  font-family: var(--body);
  font-size: 12.5px;
  text-transform: uppercase; letter-spacing: 0.35em;
  color: var(--red); font-weight: 700;
}
.about-lede h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 900;
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 8px 0 14px;
}
.about-lede p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0 auto;
  max-width: 580px;
}
.about-lede b { font-style: normal; color: var(--ink); }
.about-lede em { color: var(--red); font-style: italic; }

.about-article h3 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 32px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
}
.about-article p {
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 14px;
}
.about-article p b { color: var(--ink); }
.about-article p em { color: var(--ink-soft); font-style: italic; }
.about-article a { color: var(--red); border-bottom: 1px solid var(--red); }
.about-article a:hover { color: var(--red-deep); border-bottom-color: var(--red-deep); }

.about-legend {
  display: grid; gap: 16px;
  padding: 18px 22px;
  border: 1px solid var(--rule);
  background: var(--paper-shade);
  margin: 14px 0 18px;
}
.about-legend > div {
  display: flex; gap: 14px; align-items: flex-start;
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.45;
}
.about-legend > div b { color: var(--ink); }
.about-legend > div span { color: var(--ink-soft); }
.leg-dot {
  display: inline-block; flex: 0 0 auto;
  width: 12px; height: 12px;
  border-radius: 50%;
  margin-top: 6px;
  background: var(--red);
}
.leg-dot.hi  { background: var(--good); }
.leg-dot.mid { background: var(--review); }

.about-future {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 14px;
  padding-left: 22px;
}
.about-future li { margin-bottom: 6px; }
.about-future b { color: var(--ink); }

.about-colophon {
  margin-top: 36px;
  padding-top: 16px;
  border-top: 4px double var(--rule);
  font-family: var(--body);
  font-size: 13px;
  color: var(--ink-faint);
  text-align: center;
  line-height: 1.7;
}
.about-colophon i { font-style: italic; }

/* =============================================================
   Coverage page
   ============================================================= */
.coverage-page { padding-bottom: 24px; }
.coverage-page .about-lede { padding: 12px 0 22px; }

.cov-section {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 4px double var(--rule);
}
.cov-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 4px;
}
.cov-section-head h3 {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
.cov-count {
  font-family: var(--body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--red);
  text-transform: uppercase;
}
.cov-deck {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-soft);
  margin: 0 0 16px;
  line-height: 1.5;
}
.cov-deck em { color: var(--red); }

.cov-list { display: flex; flex-direction: column; }
.cov-row {
  display: grid;
  grid-template-columns: 1.4fr 1.4fr auto;
  gap: 18px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--ink-faint);
  align-items: baseline;
}
.cov-row:last-child { border-bottom: 0; }
.cov-row .cov-name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.005em;
}
.cov-row .cov-name a {
  color: var(--ink);
  border-bottom: 1px solid var(--rule-soft);
}
.cov-row .cov-name a:hover { color: var(--red); border-bottom-color: var(--red); }
.cov-row .cov-meta {
  font-family: var(--body);
  font-style: italic;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.cov-row .cov-src {
  font-family: var(--body); font-style: italic;
  font-size: 13px;
  color: var(--red);
  border-bottom: 1px solid var(--red);
}
.cov-row .cov-src.cov-src-none {
  color: var(--ink-faint);
  border-bottom: 0;
}

.cov-cats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.cov-cat {
  border: 1px solid var(--rule);
  padding: 14px 16px;
  background: var(--paper-shade);
}
.cov-cat b {
  display: block;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.cov-cat span {
  font-family: var(--body);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
}

/* Inline legend dot used in the coverage colophon */
.leg-inline {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--red);
  margin: 0 4px 0 8px;
  vertical-align: middle;
}
.leg-inline.hi  { background: var(--good); }
.leg-inline.mid { background: var(--review); }

/* =============================================================
   Newsletter signup band
   ============================================================= */
.newsletter {
  border-top: 4px double var(--rule);
  border-bottom: 1px solid var(--rule);
  background:
    repeating-linear-gradient(0deg, rgba(184, 51, 31, 0.02) 0 1px, transparent 1px 6px),
    var(--paper-shade);
}
.newsletter .wrap {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  padding: 32px 56px;
  align-items: center;
}
.newsletter .nl-eyebrow {
  font-family: var(--body);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  color: var(--red);
  font-weight: 700;
  margin-bottom: 6px;
}
.newsletter h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 900;
  font-size: 32px;
  line-height: 1.05;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.newsletter p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
}
.nl-form {
  display: flex; flex-direction: column; gap: 10px;
}
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.nl-form input[type="email"] {
  font: inherit;
  font-family: var(--body);
  font-size: 16px;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
}
.nl-form input[type="email"]:focus { outline: 0; border-color: var(--red); }
.nl-form button {
  font-family: var(--body);
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  padding: 12px 18px;
  cursor: pointer;
}
.nl-form button:hover { background: var(--red); }
.nl-prefs { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.nl-prefs-label { font-family: var(--body); font-size: 13px; color: var(--ink-soft); }
.nl-prefs .nl-chip {
  font-family: var(--body); font-size: 12.5px; text-transform: none; letter-spacing: 0;
  padding: 5px 12px; border: 1px solid var(--rule); background: transparent;
  color: var(--ink-soft); border-radius: 999px; cursor: pointer;
}
.nl-prefs .nl-chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.nl-prefs .nl-chip:hover { border-color: var(--red); color: var(--ink); }
.nl-geo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--body); font-size: 13px; color: var(--ink-soft); }
.nl-geo-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.nl-geo-fields { display: inline-flex; align-items: center; gap: 6px; }
.nl-geo-fields[hidden] { display: none; }
.nl-geo select { font-family: var(--body); font-size: 13px; padding: 4px 6px; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); color: var(--ink); }
.nl-prefs-hint { font-family: var(--body); font-size: 12.5px; color: var(--red); margin: 0; font-style: italic; }
.nl-status {
  font-family: var(--body); font-style: italic; font-size: 13.5px;
}
.nl-status.ok  { color: var(--good); }
.nl-status.err { color: var(--red); }

/* =============================================================
   Page footer
   ============================================================= */
.page-foot {
  border-top: 4px double var(--rule);
  margin-top: 40px;
}
.page-foot .wrap {
  padding: 22px 56px 30px;
  font-family: var(--body);
  font-size: 13.5px;
  color: var(--ink-soft);
  font-style: italic;
}
.page-foot .legend {
  display: flex; flex-wrap: wrap; gap: 18px 28px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--ink-faint);
  font-style: normal;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
}
.page-foot .legend .dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; margin-right: 8px;
  vertical-align: middle;
  background: var(--red);
}
.page-foot .legend .dot.hi  { background: var(--good); }
.page-foot .legend .dot.mid { background: var(--review); }
.page-foot .masthead-note {
  margin: 14px 0 18px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 760px;
}
.page-foot .masthead-note b { font-style: normal; color: var(--red); font-weight: 700; }
/* Search bar */
.searchbar { border-bottom: 1px solid var(--rule); }
.searchbar .wrap { padding: 10px 20px; }
#search-input {
  width: 100%; box-sizing: border-box; font-family: var(--body); font-size: 15px;
  padding: 10px 14px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink);
}
#search-input:focus { outline: 0; border-color: var(--red); }

/* Event-card action links (Directions / + Calendar alongside Venue calendar) */
.ev-actions { display: flex; flex-wrap: wrap; gap: 7px 16px; align-items: baseline; }
.ev-act {
  font-family: var(--body); font-size: 12.5px; color: var(--ink-soft);
  text-decoration: none; border-bottom: 1px solid transparent;
}
.ev-act:hover { color: var(--red); border-bottom-color: currentColor; }
/* Share button styled to match the .ev-act links */
button.ev-act.ev-share, button.ev-act.ev-details { background: none; border: none; border-bottom: 1px solid transparent; padding: 0; cursor: pointer; }

/* Price / ticket clarity badge — explicit Free vs ticket vs unknown */
.pbadge { display: inline-block; font-family: var(--body); font-size: 11.5px; line-height: 1.5; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--ink-faint); }
.pbadge-free { background: var(--ink); color: var(--paper); border-color: var(--ink); letter-spacing: .3px; }
.pbadge-ticket { color: var(--ink); }
.pbadge-tba { color: var(--ink-soft); font-style: italic; border-style: dashed; }

/* Past-event dimming (Tonight view) */
.listing.is-past { opacity: .5; }
.started-tag { color: var(--red); font-style: italic; font-size: .85em; }

/* Single-event detail back link */
.detail-back { margin: 2px 0 12px; }
.detail-back a { color: var(--red); text-decoration: none; font-family: var(--body); font-size: 13px; }
.detail-back a:hover { text-decoration: underline; }

/* Genre/scene select in the refine row */
.genre-pick { display: inline-flex; align-items: center; }
.genre-pick select { font-family: var(--body); font-size: 12.5px; padding: 2px 6px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); border-radius: 4px; cursor: pointer; }

/* Per-event weather chip (Open-Meteo; shown for events within the forecast window) */
.wx {
  align-self: flex-start; font-family: var(--body); font-size: 12.5px;
  color: var(--ink-soft); margin: 2px 0 4px;
  padding: 2px 9px; border-radius: 999px; border: 1px solid var(--rule);
}
.wx-outdoor { color: var(--ink); border-color: var(--ink-faint); }
.wx-indoor { opacity: .7; }
.wx-warn { color: var(--red); border-color: var(--red); font-weight: 600; }

/* Weekend day grouping */
.wknd-eyebrow {
  font-family: var(--body); text-transform: uppercase; letter-spacing: 1.2px;
  font-size: 12.5px; color: var(--red); margin: 22px 0 8px; padding-bottom: 4px;
  border-bottom: 1px solid var(--rule);
}

/* "Use my location" button in the where panel */
.wp-geo {
  flex-basis: 100%; font-family: var(--body); font-size: 13.5px;
  padding: 10px 14px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  cursor: pointer; margin-bottom: 6px; text-align: left;
}
.wp-geo:hover { background: var(--red); border-color: var(--red); }
.wp-geo:disabled { opacity: .6; cursor: default; }

.comingup { margin-top: 6px; }
.cu-head {
  font-family: var(--body, system-ui, sans-serif); font-style: italic;
  color: var(--ink-soft, #555); margin-bottom: 12px; font-size: 15px;
}
.cu-row {
  display: grid; grid-template-columns: 160px 1fr auto auto; gap: 10px 18px;
  align-items: baseline; padding: 11px 4px; border-bottom: 1px solid var(--rule, #e3dcc9);
  text-decoration: none; color: inherit;
}
.cu-map { align-self: center; line-height: 0; }
.cu-map:empty { display: none; }
.cu-row:hover { background: var(--paper-shade, rgba(0,0,0,.035)); }
.cu-when { font-family: var(--body, system-ui, sans-serif); font-size: 13px; color: var(--red, #b8331f); font-weight: 600; }
.cu-what { font-family: var(--display, Playfair Display, serif); font-size: 17px; }
.cu-where { font-family: var(--body, system-ui, sans-serif); font-size: 13px; color: var(--ink-soft, #555); }
@media (max-width: 600px) {
  .cu-row { grid-template-columns: 1fr; gap: 2px; }
}
/* New & Notable — restaurants */
.resto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 4px; }
.resto { border: 1px solid var(--rule); padding: 16px; background: var(--paper); display: flex; flex-direction: column; gap: 5px; }
.resto-status { font-family: var(--body); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--ink-faint); color: var(--ink-soft); }
.resto-status.st-just-opened { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.resto-status.st-opening-soon { color: var(--red); border-color: var(--red); }
.resto-name { font-family: var(--display); font-size: 19px; margin: 4px 0 0; }
.resto-town { font-family: var(--body); font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--ink-soft); }
.resto-what { font-family: var(--body); font-size: 14px; color: var(--ink); }
.resto-note { font-family: var(--body); font-size: 13px; color: var(--ink-soft); font-style: italic; }
.resto-src { font-family: var(--body); font-size: 12.5px; color: var(--red); text-decoration: none; margin-top: 4px; border-bottom: 1px solid transparent; align-self: flex-start; }
.resto-src:hover { border-bottom-color: currentColor; }
.asof { font-style: italic; color: var(--ink-soft); }

/* Locals are talking (r/lancaster) */
.chatter { margin-top: 30px; border-top: 4px double var(--rule); padding-top: 16px; }
.chatter-head { font-family: var(--display); font-size: 18px; margin-bottom: 10px; }
.chatter-head a { color: var(--red); }
.chatter-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 9px 2px; border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit; }
.chatter-row:hover { background: var(--paper-shade, rgba(0,0,0,.03)); }
.chatter-title { font-family: var(--body); font-size: 14.5px; }
.chatter-place { font-family: var(--body); font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--ink-soft); white-space: nowrap; }
.chatter-foot { font-family: var(--body); font-size: 12px; font-style: italic; color: var(--ink-soft); margin-top: 10px; }

/* Data-source provenance (coverage page) */
.cov-sources { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.src-h { font-family: var(--body); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-soft); margin-bottom: 8px; }
.src-conc { text-transform: none; letter-spacing: 0; font-style: italic; color: var(--red); margin-left: 6px; }
.src-row { display: grid; grid-template-columns: 1fr 80px auto; gap: 10px; align-items: center; padding: 4px 0; font-family: var(--body); font-size: 13px; }
.src-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src-bar { background: var(--paper-shade, rgba(0,0,0,.06)); height: 7px; border-radius: 999px; overflow: hidden; }
.src-bar > span { display: block; height: 100%; background: var(--red); }
.src-n { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
@media (max-width: 700px) { .cov-sources { grid-template-columns: 1fr; } }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--ink, #1a1208); color: var(--paper, #f3ecdc);
  padding: 10px 16px; border-radius: 0 0 8px 0;
  font-family: var(--body, system-ui, sans-serif); font-size: 14px; text-decoration: none;
}
.skip-link:focus { left: 0; }
.page-foot .foot-links {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  padding-top: 12px; margin-top: 6px;
  font-size: 13px;
  border-top: 1px dashed var(--ink-faint);
}
.page-foot .foot-links a {
  color: var(--ink-soft); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.page-foot .foot-links a:hover { color: var(--red); border-bottom-color: currentColor; }
.page-foot .colophon {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-style: italic;
  font-size: 12.5px;
  color: var(--ink-faint);
}

/* =============================================================
   Honest freshness note in the masthead — reads as part of the
   dateline (same --body small-caps), not a typewriter stamp.
   ============================================================= */
.freshness {
  text-align: center;
  margin-top: 8px;
  font-family: var(--body);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* =============================================================
   Music-only scope — "coming later" note + muted category cards
   ============================================================= */
.cats-soon {
  font-family: var(--body);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-faint);
  margin-left: 6px;
}
.cov-cat.cov-cat-soon {
  opacity: 0.55;
  background: var(--paper);
  border-style: dashed;
}
.cov-cat.cov-cat-soon b { color: var(--ink-soft); }

/* =============================================================
   Honest empty / low-data state
   ============================================================= */
.empty-honest {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
  padding: 64px 0 72px;
}
.empty-honest .eh-kicker {
  font-family: var(--body);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  color: var(--red);
  font-weight: 700;
}
.empty-honest .eh-lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  line-height: 1.35;
  color: var(--ink);
  margin: 10px 0 6px;
}
.empty-honest .eh-cta {
  font-family: var(--body);
  font-size: 16px;
  color: var(--ink-soft);
  margin: 0 0 16px;
}
.empty-honest .eh-actions { margin-top: 4px; }
.empty-honest .eh-jump {
  font-family: var(--body);
  font-style: italic;
  font-size: 15px;
  color: var(--red);
  border-bottom: 1px solid var(--red);
  padding-bottom: 1px;
}
.empty-honest .eh-jump:hover { color: var(--red-deep); border-bottom-color: var(--red-deep); }
.map-empty .empty-honest { padding: 28px 0 8px; text-align: left; }
.map-empty .empty-honest .eh-lead { font-size: 20px; }

/* =============================================================
   Newsletter — not-yet-active state + neutral status note
   ============================================================= */
.nl-form.nl-inactive input[type="email"] { background: var(--paper-shade); }
.nl-form.nl-inactive button {
  background: var(--ink-faint);
  cursor: not-allowed;
}
.nl-form.nl-inactive button:hover { background: var(--ink-faint); }
.nl-status.note { color: var(--ink-soft); }
.nl-status a { color: var(--red); border-bottom: 1px solid var(--red); }

/* =============================================================
   Accessibility — visible keyboard focus for all interactive
   elements. Uses :focus-visible so it only appears for keyboard
   users, not on mouse click. A solid red outline reads on cream.
   ============================================================= */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible,
.topnav a:focus-visible,
.cat-btn:focus-visible,
.r-btn:focus-visible,
.wp-anchor:focus-visible,
.wp-radius:focus-visible,
.wp-town:focus-visible,
.scope-change:focus-visible,
.period-nav button:focus-visible,
.week-show:focus-visible,
.md-show:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-radius: 1px;
}
.nl-form input[type="email"]:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 1px;
  border-color: var(--red);
}
/* Keep a focus cue for the zip input too (it intentionally drops the default). */
.wp-zip input:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }

/* =============================================================
   Responsive — tablet (≤ 900px) and mobile (≤ 600px)
   The bulletin layout prioritises desktop reading. On narrower
   screens we shrink the gutters, restack the masthead and tabs,
   collapse multi-column listings to one, and let the calendar
   grids scroll horizontally rather than crush their cells.
   ============================================================= */

@media (max-width: 900px) {
  .wrap { padding: 0 28px; }
  .page-foot .wrap, .refine .wrap,
  .searchbar .wrap, .cats .wrap { padding-left: 28px; padding-right: 28px; }

  .masthead { padding-top: 24px; }
  .word { font-size: 64px; }
  .subhead { font-size: 18px; }
  .preline { letter-spacing: 0.32em; font-size: 11px; gap: 8px; }
  .dateline { font-size: 11px; letter-spacing: 0.16em; }

  .masthead { text-align: center; }

  /* Tabs become a horizontally scrollable strip */
  .topnav .wrap {
    overflow-x: auto;
    justify-content: flex-start;
    border-bottom: 1px solid var(--rule);
    scrollbar-width: thin;
  }
  .topnav a { padding: 12px 16px; flex: 0 0 auto; }

  /* Refine bar wraps tighter */
  .refine .wrap { padding-top: 12px; padding-bottom: 16px; gap: 12px; }
  .cats .wrap { padding: 10px 28px; }
  .cat-btn { padding: 5px 10px; font-size: 12px; letter-spacing: 0.12em; }

  /* Location picker — panels fill the viewport */
  .wp-panel, #wp-radius-panel { right: 18px; left: 18px; width: auto; }
  .wp-panel-inner { grid-template-columns: 1fr; }
  .wp-col + .wp-col { border-left: 0; border-top: 1px solid var(--rule-soft); }
  .wp-mini-map { height: 160px; }

  /* Scope strip — compact on narrow screens */
  .scope-strip .wrap { padding: 10px 18px; flex-wrap: wrap; gap: 10px; }
  .scope-line { font-size: 15px; }
  .scope-change { padding: 6px 12px; font-size: 11.5px; }

  /* Today view — one column */
  .listings { column-count: 1; column-rule: 0; }

  /* Day view — narrower hour gutter, actions move below body */
  .daygrid { grid-template-columns: 64px 1fr; }
  .daygrid .hour { padding-right: 10px; font-size: 11px; letter-spacing: 0.14em; }
  .daygrid .slot { padding-left: 14px; }
  .day-show { grid-template-columns: 1fr; gap: 6px; }
  .day-show .sc-bug { display: none; }
  .day-show .ds-actions { text-align: left; }
  .day-show .ds-actions a { display: inline-block; }

  /* Period bar stacks on narrow screens */
  .period-bar { flex-direction: column; align-items: flex-start; gap: 12px; }
  .period-bar h2 { font-size: 30px; }
  .period-bar .pb-left { flex-wrap: wrap; }

  /* Week view — let the 7-day grid scroll horizontally rather than
     squishing each cell to unreadable widths */
  .weekgrid {
    display: grid;
    grid-template-columns: 56px repeat(7, minmax(108px, 1fr));
    overflow-x: auto;
  }
  .week-show .ws-artist { font-size: 13px; }

  /* Month view — same treatment, but tighter min column width */
  .monthgrid {
    grid-template-columns: repeat(7, minmax(96px, 1fr));
    overflow-x: auto;
  }
  .monthgrid .md-cell { min-height: 100px; padding: 8px 10px; }
  .monthgrid .md-num { font-size: 18px; }
  .monthgrid .md-show { font-size: 11.5px; }

  /* Single-day grid — narrower axis gutter, still column-splits concurrent events. */
  .daygrid { padding-left: 48px; }
  .dg-hour-label { left: 4px; width: 38px; font-size: 10px; }
  .dg-hour-line { left: 48px; }
  .dg-event { padding: 2px 5px; }
  .dg-ev-act { font-size: 12px; }
  .dg-ev-venue { font-size: 10px; }
  .dg-ev-time { font-size: 10px; }
  .dg-tba-ev { min-width: 140px; max-width: 100%; flex: 1 1 140px; }

  /* Map — stack canvas above the side panel */
  .mapview { grid-template-columns: 1fr; gap: 24px; }
  .map-side { border-left: 0; border-top: 4px double var(--rule); padding-left: 0; padding-top: 18px; }
  .map-day { padding-top: 14px; padding-bottom: 12px; min-height: 44px; align-items: center; }
  .map-daybar { flex-direction: column; align-items: stretch; gap: 10px; }
  .mdb-day { min-height: 48px; justify-content: center; }

  /* By venue — stack header above shows */
  .venue-block { grid-template-columns: 1fr; gap: 14px; }
  .venue-block .vb-head h3 { font-size: 28px; }
  .venue-block .vb-row { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
  .venue-block .vb-row .vbr-tags { text-align: left; white-space: normal; }

  /* Venue detail — stack the map below the show list */
  .vd-body { grid-template-columns: 1fr; gap: 24px; }
  .vd-right { border-left: 0; border-top: 4px double var(--rule); padding-left: 0; padding-top: 18px; }
  .vd-head .vd-title { font-size: 40px; }

  /* By Band — stack header above shows */
  .band-block { grid-template-columns: 1fr; gap: 12px; }
  .band-block .bb-head h3 { font-size: 24px; }
  .band-block .bb-row { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
  .band-block .bb-row .bbr-tags { text-align: left; white-space: normal; }
  .band-uncovered .bu-list { columns: 1; }

  /* Coverage — stack rows */
  .cov-row { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
  .cov-cats { grid-template-columns: 1fr; }
  .cov-section-head h3 { font-size: 22px; }

  /* Newsletter — stack form below the pitch on narrow screens */
  .newsletter .wrap { grid-template-columns: 1fr; gap: 18px; padding: 24px 28px; }
  .newsletter h2 { font-size: 24px; }
  .newsletter p { font-size: 15px; }

  /* About page — smaller hero, tighter spacing */
  .about-lede h2 { font-size: 32px; }
  .about-lede p { font-size: 16.5px; }
  .about-article h3 { font-size: 22px; margin-top: 24px; }
  .about-article p, .about-future { font-size: 16px; }

  /* Section heads */
  .section-head h2 { font-size: 40px; }
  .section-head .deck { font-size: 17px; }
}

@media (max-width: 600px) {
  .wrap { padding: 0 18px; }
  .page-foot .wrap, .refine .wrap,
  .searchbar .wrap, .cats .wrap { padding-left: 18px; padding-right: 18px; }

  .word { font-size: 48px; line-height: 0.95; }
  .subhead { font-size: 16px; }
  .preline {
    /* Single-row preline crushes on tiny phones — let it stack */
    flex-direction: column; gap: 4px;
    letter-spacing: 0.28em; font-size: 10px;
  }
  .preline > * { flex: 0 0 auto; text-align: center; }
  .preline > :nth-child(2),
  .preline > :nth-child(3) { text-align: center; }
  .dateline {
    flex-direction: column; gap: 4px; align-items: center;
    border-bottom-width: 3px;
    padding: 10px 0;
  }

  .topnav a { padding: 10px 14px; font-size: 13px; letter-spacing: 0.14em; }

  .section-head { padding: 22px 0 16px; }
  .section-head h2 { font-size: 32px; }
  .section-head .kicker { letter-spacing: 0.22em; font-size: 11.5px; }
  .section-head .deck { font-size: 15.5px; }

  .listing .artist { font-size: 22px; }
  .listing .venue { font-size: 12.5px; letter-spacing: 0.1em; }

  .period-bar h2 { font-size: 24px; }
  .period-nav button { padding: 7px 10px; font-size: 11.5px; letter-spacing: 0.12em; }
}

/* =============================================================
   Print — a newspaper should print like a newspaper.
   Drop the page grain, the sticky bits, and any colour washes
   that won't reproduce well on home printers. Keep the rules.
   ============================================================= */
@media print {
  body { background: #fff; }
  body::before { display: none; }
  .topnav, .refine, .period-nav { display: none; }
  .wrap { max-width: 100%; padding: 0 32px; }
  .listings { column-count: 2; }
  a { color: inherit; border-bottom: 0 !important; }
  .weekgrid, .monthgrid { overflow: visible; }
  .page-foot { page-break-before: avoid; }
}

/* =============================================================
   Respect users who ask for less motion.
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =============================================================
   Touch targets — the refine row and genre select are primary
   engagement controls; give them a comfortable hit area on phones.
   ============================================================= */
@media (max-width: 700px) {
  .refine .r-btn { min-height: 44px; padding: 10px 2px; }
  .genre-pick select { min-height: 44px; }
}

/* Comfortable 44px hit areas for the primary nav/filter controls on phones,
   and a capped Map split so the canvas never eats the whole viewport. */
@media (max-width: 600px) {
  .topnav a { min-height: 44px; display: flex; align-items: center; }
  .cat-btn { min-height: 44px; }
  .lt-btn { min-height: 44px; }
  .scope-change, .period-nav button, .wp-radii button { min-height: 44px; }
  .wp-anchor, .wp-radius { min-height: 44px; display: inline-flex; align-items: center; }
  .mapcanvas { aspect-ratio: auto; height: 56vh; max-height: 420px; }
}

/* =============================================================
   Prerendered static content (crawlable; the app hydrates over it)
   + dedicated ad landing pages.
   ============================================================= */
.pr-home { margin-top: 8px; }
.pr-h { font-family: var(--display); font-size: 24px; margin: 0 0 4px; }
.pr-sub { font-family: var(--body); color: var(--ink-soft); margin: 0 0 16px; }
.pr-list { list-style: none; margin: 0; padding: 0; }
.pr-item { font-family: var(--body); font-size: 14px; padding: 7px 0; border-bottom: 1px solid var(--rule); }
.pr-when { color: var(--ink-soft); font-size: 12.5px; }
.pr-act { color: var(--red); text-decoration: none; font-weight: 600; }
.pr-act:hover { text-decoration: underline; }
.pr-at { color: var(--ink); }
.pr-price { color: var(--ink-soft); font-style: italic; }
.pr-cat { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--ink-soft); }
.pr-empty { font-family: var(--body); color: var(--ink-soft); font-style: italic; }

.lp { max-width: 820px; }
.lp-cta { display: inline-block; font-family: var(--body); font-size: 15px; color: var(--paper); background: var(--ink); padding: 10px 18px; border-radius: 4px; text-decoration: none; margin: 6px 0 18px; }
.lp-cta:hover { background: var(--red); color: var(--paper); }
.lp-cta-low { margin-top: 22px; }
.lp-list { margin-top: 6px; }

/* =============================================================
   Feedback — "Letters to the editor". A small fixed tab opens a
   compact paper-styled dialog. Two-ink palette, ruled hairlines,
   serif headline — matches the rest of the bulletin. Sits above the
   map (z 500) but below the skip-link (z 2000).
   ============================================================= */
.fb-tab {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 1200;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--body);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--rule);
  padding: 10px 14px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(42, 31, 16, 0.22);
  transition: background 0.12s;
}
.fb-tab:hover { background: var(--red); }
.fb-tab .ti { font-size: 16px; }

.fb-backdrop {
  position: fixed; inset: 0;
  z-index: 1300;
  background: rgba(26, 18, 8, 0.4);
}
.fb-dialog {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 1400;
  width: min(380px, calc(100vw - 36px));
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: 0 16px 36px rgba(42, 31, 16, 0.28);
}
.fb-form { padding: 18px 20px 16px; }
.fb-head { position: relative; padding-right: 24px; }
.fb-eyebrow {
  font-family: var(--body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--red);
  font-weight: 700;
}
.fb-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.12;
  color: var(--ink);
  margin: 6px 0 0;
}
.fb-close {
  position: absolute; top: -4px; right: -4px;
  background: none; border: 0;
  font-family: var(--serif);
  font-size: 26px; line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 4px 6px;
}
.fb-close:hover { color: var(--red); }
.fb-deck {
  font-family: var(--body);
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.45;
  margin: 8px 0 14px;
}
.fb-label {
  display: block;
  font-family: var(--body);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
  font-weight: 700;
  margin: 12px 0 6px;
}
.fb-opt { text-transform: none; letter-spacing: 0; font-weight: 400; font-style: italic; }
.fb-textarea, .fb-email {
  width: 100%;
  font: inherit;
  font-family: var(--body);
  font-size: 16px;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
}
.fb-textarea { resize: vertical; min-height: 84px; }
.fb-textarea:focus, .fb-email:focus { outline: 0; border-color: var(--red); }
.fb-textarea:focus-visible, .fb-email:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; border-color: var(--red); }
.fb-textarea.fb-invalid, .fb-email.fb-invalid { border-color: var(--red); }

.fb-sentiment { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.fb-sentiment-label { font-family: var(--body); font-size: 13px; color: var(--ink-soft); }
.fb-thumb {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.fb-thumb .ti { font-size: 18px; }
.fb-thumb:hover { border-color: var(--red); color: var(--ink); }
.fb-thumb[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
#fb-up[aria-pressed="true"] { background: var(--good); border-color: var(--good); }
#fb-down[aria-pressed="true"] { background: var(--red); border-color: var(--red); }

.fb-status {
  font-family: var(--body); font-style: italic; font-size: 13.5px;
  margin-top: 12px;
}
.fb-status.ok  { color: var(--good); }
.fb-status.err { color: var(--red); }

.fb-actions { margin-top: 14px; }
.fb-submit {
  font-family: var(--body);
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  padding: 12px 22px;
  cursor: pointer;
}
.fb-submit:hover { background: var(--red); }
.fb-submit[disabled] { opacity: 0.55; cursor: default; }
.fb-submit[disabled]:hover { background: var(--ink); }
.fb-privacy {
  font-family: var(--body);
  font-style: italic;
  font-size: 12px;
  color: var(--ink-faint);
  margin: 12px 0 0;
}

/* Phones: keep the tab unobtrusive and the dialog comfortably tappable. */
@media (max-width: 600px) {
  .fb-tab {
    right: 12px; bottom: 12px;
    min-height: 44px;
    padding: 10px 14px;
  }
  .fb-dialog {
    right: 8px; left: 8px; bottom: 8px;
    width: auto;
    max-height: calc(100vh - 16px);
  }
  .fb-thumb { width: 44px; height: 44px; }
  .fb-submit { min-height: 44px; }
}

/* Don't print the floating feedback affordance. */
@media print { .fb-tab, .fb-backdrop, .fb-dialog { display: none !important; } }


/* === #8/#30 share-sheet a11y === */
/* #8/#30 Share-sheet accessibility: >=44px touch targets.
   The share sheet markup is injected from bulletin.js (<style id="ll-nav-css">);
   these later same-specificity rules in the real stylesheet win over the
   padding-only definitions there. */
.share-opt { min-height: 44px; min-width: 44px; box-sizing: border-box; }
.share-x { min-height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center; }


/* === #19 taxonomy two-tier bar === */
/* ── #19 Two-tier category bar (groups + per-group sub-filters) ───────────── */
/* The single #cat-bar flex container now holds two stacked rows. Each .cat-row
   is itself a full-width flex line so the rows never share a line on wrap. */
.cats .wrap { flex-direction: column; align-items: stretch; }
.cat-row {
  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center;
}
/* Sub-filter row sits just under the groups, visually subordinate: a hairline
   rule + slight inset, and smaller chips so the hierarchy reads at a glance. */
.cat-row-subs {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--rule-soft);
}
.cat-btn.sub {
  font-size: 12.5px;
  padding: 4px 11px;
  background: var(--highlight);
  border-color: var(--rule-soft);
}
.cat-btn.sub i { font-size: 14px; }
.cat-btn.sub:hover { border-color: var(--rule); color: var(--ink); }
.cat-btn.sub.on { background: var(--red); color: var(--paper); border-color: var(--red); font-weight: 500; }
.cat-btn.sub.on:hover { background: var(--red); color: var(--paper); filter: brightness(1.06); }
.cat-btn.sub.on i { color: var(--paper); }
@media (max-width: 700px) {
  .cat-row-subs { gap: 6px 8px; }
  .cat-btn.sub { font-size: 12px; padding: 4px 9px; }
}

/* ---- Per-event mini-map: glanceable "where in Lancaster County" (shared county-base.svg + a dot) ---- */
.sc-body { position: relative; }
.sc-geo { float: right; width: 62px; margin: 2px 0 6px 14px; line-height: 0; text-decoration: none; display: block; }
.ll-mini { display: block; width: 62px; aspect-ratio: 100 / 92; position: relative;
  background: #f7f2e7 url("county-base.svg") center / 100% 100% no-repeat;
  border: 1px solid var(--rule-soft); border-radius: 3px; }
.ll-mini-dot { position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: var(--red); border: 1.5px solid #fff; transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px rgba(42,31,16,.3); transition: transform .12s ease; }
.ll-mini.is-adj .ll-mini-dot { background: var(--review); }
.sc-geo:hover .ll-mini { border-color: var(--ink-faint); }
.sc-geo:hover .ll-mini-dot { background: var(--red-deep); transform: translate(-50%, -50%) scale(1.18); }
@media (max-width: 620px) {
  .sc-geo { width: 48px; margin-left: 10px; }
  .ll-mini { width: 48px; }
  .ll-mini-dot { width: 7px; height: 7px; }
}
.day-show .sc-geo, .vb-row .sc-geo, .bb-row .sc-geo { display: none; } /* compact rows: skip the thumbnail */

/* ---- "Plan my night" concierge nav CTA ---- */
.topnav-cta { color: var(--red) !important; font-weight: 600; border-bottom-color: transparent !important; }
.topnav-cta:hover { color: var(--red-deep) !important; border-bottom-color: var(--red) !important; }

/* ============================================================================
   Browse unification + masthead compression (design pass, 2026-06-26)
   Goal: keep the editorial identity but stop the chrome from burying the first
   event. Compress the masthead, fuse the four filter bands into ONE control
   zone, make the tab strip persist, and make "selected" obvious.
   ============================================================================ */
/* --- masthead: moderate compression so the headline + a listing peek above the fold --- */
.masthead { padding: 22px 0 6px; }
.word { font-size: 72px; }
.subhead { font-size: 16.5px; margin-top: 3px; }
.dateline { margin-top: 10px; padding: 8px 0; border-bottom-width: 3px; }
.freshness { margin-top: 4px; }
@media (max-width: 600px) { .masthead { padding: 16px 0 4px; } .word { font-size: 46px; } }

/* --- sticky tab strip: half the views were undiscoverable once you scrolled --- */
.topnav { position: sticky; top: 0; z-index: 60; background: var(--paper); }
.topnav .wrap { box-shadow: inset 0 -1px 0 var(--rule); }

/* --- fuse the filter bands into one cohesive "browse" zone --- */
.cats, .searchbar, .refine { background: var(--paper-shade); border-bottom: 0; }
.cats { padding-top: 9px; padding-bottom: 5px; border-top: 1px solid var(--rule); }
.searchbar { border-bottom: 0; }
.searchbar .wrap { padding-top: 5px; padding-bottom: 5px; }
.searchbar input { background: var(--paper); }
.refine { border-top: 1px dashed var(--rule-soft); padding: 6px 0 8px; box-shadow: 0 2px 0 var(--rule-soft); }

/* --- selected category chip: make "on" unmistakable (was a faint cream highlight) --- */
.cat-btn.on, .cat-btn.on:hover { background: var(--red); color: #fff; border-color: var(--red); font-weight: 500; }
.cat-btn.on i { color: #fff; }

/* --- mobile: cue that the tab strip scrolls horizontally (it silently overflowed) --- */
@media (max-width: 900px) {
  .topnav .wrap { -webkit-mask-image: linear-gradient(to right, #000 87%, transparent); mask-image: linear-gradient(to right, #000 87%, transparent); scroll-snap-type: x proximity; }
  .topnav a { scroll-snap-align: start; }
}

/* ============================================================================
   Map view maturation (Zillow-style): clustered pins + rich click popups
   ============================================================================ */
/* cluster bubble: in-brand ink circle with a count */
.vp-cluster { background: transparent; }
.vp-cluster span { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 50%; background: var(--ink); color: var(--paper); font-family: var(--display); font-size: 14px;
  border: 2px solid var(--paper); box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.marker-cluster-small span, .marker-cluster-medium span, .marker-cluster-large span { background: var(--ink); }

/* rich popup card */
.ll-pop .leaflet-popup-content-wrapper { background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; box-shadow: 0 6px 22px rgba(26,18,8,.22); }
.ll-pop .leaflet-popup-content { margin: 12px 14px; }
.ll-pop .leaflet-popup-tip { background: var(--paper); border: 1px solid var(--rule); }
.lp-card { font-family: var(--body); }
.lp-name { margin: 0 0 2px; font-family: var(--display); font-size: 18px; line-height: 1.1; }
.lp-name a { color: var(--ink); text-decoration: none; }
.lp-name a:hover { color: var(--red); }
.lp-town { font-size: 12px; color: var(--ink-faint); margin-bottom: 8px; }
.lp-shows { list-style: none; margin: 0; padding: 0; border-top: 1px dashed var(--rule-soft); }
.lp-shows li { padding: 5px 0; border-bottom: 1px dotted var(--rule-soft); font-size: 13.5px; }
.lp-when { color: var(--red); font-weight: 600; }
.lp-act { display: block; color: var(--ink); }
.lp-cat { font-family: var(--stamp); text-transform: uppercase; letter-spacing: 0.08em; font-size: 10px; color: var(--ink-faint); }
.lp-more { font-size: 12px; color: var(--ink-faint); font-style: italic; padding-top: 5px; }
.lp-actions { display: flex; gap: 14px; margin-top: 9px; font-size: 13.5px; }
.lp-actions a { color: var(--red); }
.venue-pin.is-adj .vp-dot { background: var(--review); }

/* ---- Active-filter summary (removable tokens + Clear all) ---- */
.aff { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; padding: 4px 0 6px; border-bottom: 1px dashed var(--rule-soft); }
.aff-lab { font-family: var(--stamp); text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; color: var(--ink-faint); }
.aff-token { font-family: var(--body); font-size: 13.5px; padding: 4px 10px; border: 1px solid var(--red); border-radius: 999px; background: var(--highlight); color: var(--red-deep); cursor: pointer; line-height: 1.2; }
.aff-token span { font-weight: 700; margin-left: 2px; }
.aff-token:hover { background: var(--red); color: #fff; }
.aff-clearall { font-family: var(--body); font-size: 13px; color: var(--ink-soft); background: none; border: 0; border-bottom: 1px solid var(--rule-soft); cursor: pointer; padding: 2px 0; margin-left: 4px; }
.aff-clearall:hover { color: var(--red); border-bottom-color: var(--red); }

/* ---- Mobile: collapse filter chrome so events sit above the fold (ads land mostly on mobile) ---- */
.filters-toggle { display: none; }
@media (max-width: 760px) {
  .searchbar .wrap { display: flex; gap: 8px; align-items: center; }
  .searchbar input { flex: 1 1 auto; min-width: 0; }
  .filters-toggle { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; min-height: 40px;
    font-family: var(--body); font-size: 14px; padding: 6px 12px; border: 1px solid var(--rule-soft);
    border-radius: 999px; background: var(--paper); color: var(--ink); cursor: pointer; }
  /* Category chips: one horizontal-scroll row instead of 4 stacked rows */
  .cats .cat-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, #000 90%, transparent); mask-image: linear-gradient(to right, #000 90%, transparent); }
  .cats .cat-row .cat-btn { flex: 0 0 auto; }
  /* Refine row hidden until the user opens Filters */
  .refine { display: none; }
  body.filters-open .refine { display: block; }
  body.filters-open .filters-toggle { background: var(--red); color: #fff; border-color: var(--red); }
}

/* ---- Map side-list cap notice ---- */
.map-cap { font-family: var(--body); font-size: 13px; font-style: italic; color: var(--ink-faint); padding: 8px 0 4px; border-bottom: 1px dashed var(--rule-soft); margin-bottom: 8px; }

/* ---- Bigger touch targets for per-event actions on phones (were ~18-20px) ---- */
@media (max-width: 760px) {
  .ev-actions { gap: 4px 8px; }
  .ev-act, .listing .source, button.ev-act.ev-share {
    min-height: 40px; display: inline-flex; align-items: center;
    padding: 4px 10px; border: 1px solid var(--rule-soft); border-radius: 6px; border-bottom: 1px solid var(--rule-soft);
  }
  .ev-act:hover, .listing .source:hover { border-color: var(--red); }
}

/* ===================== Masthead email capture (compact) =====================
   The campaign funnel is "ad sells the visit, site captures the email." This compact
   form now lives in the masthead's center gap (was a separate full-width row), so a cold
   visitor still sees the email ask above the fold with no extra vertical row. It flexes
   to fill the gap between the brand and the date stamp, and wraps onto its own line on
   narrow screens. Reuses the subscribe backend via the preserved #nl-hero* hooks. */
.nl-hero {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  flex: 1 1 360px; min-width: 0; justify-content: center;
}
.nl-hero-pitch {
  margin: 0; font-family: var(--body); font-size: 13.5px; color: var(--ink); line-height: 1.25;
  text-align: right; flex: 0 1 auto; min-width: 0;
}
.nl-hero-pitch strong { color: var(--red-deep); font-weight: 700; }
.nl-hero-sub { color: var(--ink-soft); }
.nl-hero-form { display: flex; gap: 7px; flex: 0 1 auto; }
.nl-hero-form input {
  font-family: var(--body); font-size: 14px; padding: 6px 10px; width: 168px; min-width: 0;
  border: 1px solid var(--rule-soft); border-radius: 7px; background: var(--paper-input); color: var(--ink);
}
.nl-hero-form input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px var(--highlight); }
.nl-hero-form button {
  font-family: var(--body); font-weight: 600; font-size: 13.5px; padding: 6px 14px; cursor: pointer;
  border: 1px solid var(--red-deep); border-radius: 7px; background: var(--red); color: #fff; white-space: nowrap;
}
.nl-hero-form button:hover { background: var(--red-deep); }
.nl-hero-status { flex: 1 1 100%; margin: 0; text-align: center; }
/* The compact form drops below the brand line on narrow viewports (mobile masthead). */
@media (max-width: 860px) {
  .nl-hero { flex: 1 1 100%; order: 3; justify-content: flex-start; gap: 8px 12px; }
  .nl-hero-pitch { text-align: left; font-size: 13px; }
  .nl-hero-form { flex: 1 1 auto; }
  .nl-hero-form input { flex: 1 1 auto; width: auto; font-size: 16px; }
}

/* ============================================================================
   HEADER REDESIGN (agent handoff): slim masthead + paper toolbar + browse rail.
   Wired to existing JS via preserved ids/classes/data-attrs. Namespaced .lh-*.
   ============================================================================ */
/* ---- Tier 0: slim masthead ---- */
.lh-masthead { background:
    radial-gradient(circle at 12% 6%, rgba(160,130,80,.06) 0%, transparent 50%), var(--paper);
  border-bottom: 2px solid var(--ink); }
.lh-mast-in { max-width: 1280px; margin: 0 auto; padding: 9px 28px 7px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.lh-brand { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.lh-word { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 900;
  font-size: 29px; line-height: 1; color: var(--ink); }
.lh-word .amp { color: var(--red); font-style: italic; font-weight: 900; }
.lh-tagline { font-family: var(--body); font-style: italic; font-size: 14px; color: var(--ink-faint); }
.lh-mast-meta { text-align: right; }
.lh-mast-date { font-size: 11px; text-transform: uppercase; letter-spacing: .17em; color: var(--ink-soft); }
.lh-mast-fresh { font-family: var(--stamp); font-size: 10px; letter-spacing: .1em; color: #9a8a6f; margin-top: 3px; }

/* ---- Tier 1: the one toolbar ---- */
.lh-toolbar { background: var(--paper-shade); border-bottom: 1px solid var(--ink);
  position: sticky; top: 0; z-index: 60; }
.lh-tool-in { max-width: 1280px; margin: 0 auto; padding: 7px 28px;
  display: flex; align-items: center; gap: 10px; }
.lh-railtoggle { display: none; } /* desktop: rail always shown */
/* time-view pill (reuses .topnav for JS hook; reset the old strip styles) */
.lh-toolbar .topnav.lh-views { position: static; background: none; border: 0; padding: 0; margin: 0;
  display: inline-flex; flex: none; overflow: hidden; box-shadow: none;
  border: 1.5px solid var(--ink); border-radius: 999px; }
.lh-toolbar .topnav.lh-views::after { content: none; }
.lh-views a { font-family: var(--body); font-size: 13.5px; color: var(--ink-soft);
  padding: 8px 16px; border: 0; border-left: 1px solid var(--rule-soft); background: transparent;
  white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.lh-views a:first-child { border-left: 0; }
.lh-views a.on { background: var(--ink); color: var(--paper); font-weight: 600; }
.lh-views a:hover:not(.on) { background: rgba(42,31,16,.06); color: var(--ink); }
.lh-search { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 9px;
  background: var(--paper); border: 1px solid var(--ink); border-radius: 9px; padding: 8px 13px; }
.lh-search .ti { font-size: 17px; color: var(--ink-faint); }
.lh-search input { flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font-family: var(--body); font-size: 15px; color: var(--ink); }
.lh-search input::placeholder { color: #9a8a6f; }
/* "Plan my night" now lives in the toolbar as a right-aligned outlined pill,
   instead of floating on its own wasted row below the toolbar. */
.lh-plan { flex: none; margin-left: auto; font-family: var(--body); font-size: 13.5px; font-style: italic;
  color: var(--red); text-decoration: none; white-space: nowrap; padding: 7px 15px;
  border: 1.5px solid var(--red); border-radius: 999px; background: var(--paper);
  display: inline-flex; align-items: center; gap: 5px; }
.lh-plan:hover { color: #fff; background: var(--red); border-color: var(--red-deep); text-decoration: none; }
.lh-display { display: inline-flex; flex: none; border: 1px solid var(--ink); border-radius: 999px; overflow: hidden; }
.lh-display button { font-family: var(--body); font-size: 13px; color: var(--ink-soft); background: transparent;
  border: 0; border-left: 1px solid var(--rule-soft); padding: 8px 13px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; }
.lh-display button:first-child { border-left: 0; }
.lh-display button.on { background: var(--ink); color: var(--paper); font-weight: 600; }

/* ---- Shell: rail + content ---- */
.lh-shell { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 234px 1fr; align-items: start; }
.lh-rail { background: #efe7d4; border-right: 1px solid var(--ink); padding: 18px 20px 26px;
  position: sticky; top: var(--toolbar-h, 49px); align-self: start; max-height: calc(100vh - var(--toolbar-h, 49px)); overflow: auto; }
.lh-rail-h { font-family: var(--stamp); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: #9a8a6f; margin: 0 0 9px; }
.lh-rail-sec + .lh-rail-sec .lh-rail-h { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--rule-soft); }
/* categories in the rail (renderCategoryBar fills #cat-bar) */
.lh-rail #cat-bar .cat-row { display: block; padding: 0; margin: 0; border: 0; background: none; overflow: visible; }
.lh-rail #cat-bar .cats-label { display: none; }
.lh-rail #cat-bar .cat-btn { display: flex; align-items: center; gap: 8px; width: 100%;
  font-family: var(--body); font-size: 14.5px; color: var(--ink-soft); background: none; border: 0;
  border-radius: 6px; padding: 6px 7px; margin: 0 0 1px; cursor: pointer; text-align: left; }
.lh-rail #cat-bar .cat-btn .ti { font-size: 15px; color: inherit; }
.lh-rail #cat-bar .cat-btn:hover { background: rgba(42,31,16,.05); color: var(--ink); }
.lh-rail #cat-bar .cat-btn.on { color: var(--red); font-weight: 600; background: rgba(168,42,22,.07); }
.lh-rail #cat-bar .cat-row-subs { margin: 2px 0 0 12px; padding-left: 8px; border-left: 1px solid var(--rule-soft); }
.lh-rail #cat-bar .cat-btn.sub { font-size: 13px; padding: 4px 7px; }
/* refine as a checkbox list */
.lh-rail .refine { display: block; padding: 0; background: none; border: 0; }
.lh-rail .refine .label, .lh-rail .refine .spacer { display: none; }
.lh-rail .refine .r-btn { display: flex; align-items: center; gap: 9px; width: 100%;
  font-family: var(--body); font-size: 13.5px; color: var(--ink-soft); background: none; border: 0;
  padding: 5px 7px; cursor: pointer; text-align: left; }
.lh-rail .refine .r-btn::before { content: ""; width: 15px; height: 15px; flex: none;
  border: 1px solid #9a8a6f; border-radius: 4px; background: var(--paper-input); display: inline-block; }
.lh-rail .refine .r-btn.on { color: var(--ink); font-weight: 600; }
.lh-rail .refine .r-btn.on::before { content: "\2713"; background: var(--red); border-color: var(--red-deep);
  color: #fff; font-size: 11px; line-height: 15px; text-align: center; }
.lh-rail .genre-pick { display: block; margin: 8px 0 0; }
.lh-rail .genre-pick select { width: 100%; font-family: var(--body); font-size: 13px; color: var(--ink);
  padding: 6px 8px; border: 1px solid var(--rule-soft); border-radius: 7px; background: var(--paper-input); }
/* ---- Find section at the top of the rail: search + where filter ---- */
.lh-rail-find { margin-bottom: 4px; }
.lh-rail .lh-search { display: flex; align-items: center; gap: 8px; width: 100%; flex: none;
  background: var(--paper-input); border: 1px solid var(--rule); border-radius: 8px; padding: 7px 11px; margin: 0 0 10px; }
.lh-rail .lh-search .ti { font-size: 16px; color: var(--ink-faint); }
.lh-rail .lh-search input { flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font-family: var(--body); font-size: 14.5px; color: var(--ink); }
.lh-rail .lh-search input::placeholder { color: #9a8a6f; }
.lh-rail .lh-where { display: block; position: static; }
/* In the rail the location panels render inline (static) so the rail's own
   overflow never clips them; they push the categories down and the rail scrolls. */
.lh-rail .lh-where .wp-panel { position: static; width: auto; margin: 8px 0 0; z-index: auto;
  border: 1px solid var(--rule-soft); border-radius: 9px; background: var(--paper); box-shadow: none; }
.lh-rail .lh-where .wp-panel-inner { display: block; padding: 12px 13px; }
.lh-rail .lh-where .wp-col-preview { display: none; }
.lh-rail .lh-where .wp-geo { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; background: var(--paper-shade); color: var(--red-deep); border: 1px solid var(--rule-soft);
  border-radius: 8px; padding: 8px 12px; font-family: var(--body); font-size: 13px; cursor: pointer; margin: 0 0 11px; }
.lh-rail .lh-where .wp-geo:hover { background: var(--highlight); border-color: var(--red); }
.lh-rail .lh-where .wp-col { padding: 0; border: 0; }
.lh-rail .lh-where .wp-col + .wp-col { margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--rule-soft); }
.lh-rail .lh-where .wp-towns { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; max-height: 200px; overflow: auto; }
.lh-rail .lh-where .wp-radii { display: flex; flex-wrap: wrap; gap: 6px; }
.lh-rail .lh-where .wp-radii button { font-family: var(--body); font-size: 13px; border: 1px solid var(--rule-soft);
  border-radius: 999px; padding: 5px 11px; background: var(--paper-input); cursor: pointer; }
/* where picker in the rail */
.lh-rail .where-pick { display: block; }
.lh-rail .wp-anchor { display: inline-flex; align-items: center; gap: 7px; font-family: var(--body);
  font-size: 13.5px; font-style: italic; color: var(--ink); border: 1px solid var(--ink);
  border-radius: 999px; padding: 6px 13px; background: none; cursor: pointer; }
.lh-rail .wp-anchor .ti { color: var(--red); }
.lh-rail .wp-within { display: inline-block; margin-top: 8px; font-size: 12.5px; color: var(--ink-soft); }
.lh-rail .wp-radius { font-family: var(--body); font-size: 12.5px; border: 1px solid var(--rule-soft);
  border-radius: 999px; padding: 3px 9px; background: var(--paper-input); cursor: pointer; }
.lh-rail .scope-strip { background: none; border: 0; padding: 10px 0 0; margin: 10px 0 0;
  border-top: 1px solid var(--rule-soft); display: block; font-size: 12px; color: var(--ink-soft); }
.lh-rail .scope-strip .scope-marker { display: none; }
.lh-rail .scope-strip .scope-line { display: block; line-height: 1.4; }
.lh-rail .scope-strip .scope-change { display: inline-block; margin-top: 5px; font-size: 12px;
  font-style: italic; color: var(--red); background: none; border: 0; padding: 0; cursor: pointer; }
/* rail lists + submit */
.lh-rail-link { display: flex; align-items: center; gap: 8px; font-family: var(--body); font-size: 14px;
  color: var(--ink-soft); text-decoration: none; padding: 5px 7px; border-radius: 6px; }
.lh-rail-link .ti { font-size: 15px; }
.lh-rail-link:hover { background: rgba(42,31,16,.05); color: var(--ink); }
.lh-rail-link.on { color: var(--red); font-weight: 600; background: rgba(168,42,22,.07); }
.lh-rail-foot { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--rule-soft); }
.lh-rail-submit { display: inline-flex; align-items: center; gap: 6px; font-family: var(--body);
  font-size: 13px; font-style: italic; color: var(--red); text-decoration: none; }
.lh-rail-submit:hover { color: var(--red-deep); }
/* content pane */
.view-pane { padding: 18px 30px 30px; min-width: 0; }

/* ---- Mobile ---- */
@media (max-width: 860px) {
  .lh-mast-in { padding: 12px 16px 10px; }
  .lh-word { font-size: 24px; }
  .lh-tagline { display: none; }
  .lh-tool-in { flex-wrap: wrap; padding: 9px 14px; gap: 9px; }
  .lh-railtoggle { display: inline-flex; align-items: center; gap: 6px; order: 0; flex: none;
    font-family: var(--body); font-size: 13.5px; color: var(--ink); background: var(--paper);
    border: 1px solid var(--ink); border-radius: 999px; padding: 7px 14px; cursor: pointer; }
  .lh-toolbar .topnav.lh-views { order: 2; flex: 1 1 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .lh-search { order: 1; flex: 1 1 60%; }
  .lh-display { order: 0; }
  .lh-plan { order: 0; }
  .lh-shell { grid-template-columns: 1fr; }
  .lh-rail { display: none; position: static; max-height: none; border-right: 0;
    border-bottom: 1px solid var(--ink); }
  body.filters-open .lh-rail { display: block; }
  .view-pane { padding: 14px 16px 26px; }
}

/* ============================================================================
   RANGE x MODE: the "Dates" pill button, custom-range panel, range-list day
   subheads, and the Calendar (density) grid.
   ============================================================================ */
/* the Dates <button> sits in the same pill as the range links */
.lh-views button.lh-date { font-family: var(--body); font-size: 13.5px; color: var(--ink-soft);
  padding: 8px 16px; border: 0; border-left: 1px solid var(--rule-soft); background: transparent;
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.lh-views button.lh-date.on { background: var(--ink); color: var(--paper); font-weight: 600; }
.lh-views button.lh-date:hover:not(.on) { background: rgba(42,31,16,.06); color: var(--ink); }

/* custom-range panel (drops below the toolbar) */
.lh-dates-panel { background: var(--paper-shade); border-bottom: 1px solid var(--ink); }
.lh-dates-in { max-width: 1280px; margin: 0 auto; padding: 10px 28px; display: flex; gap: 14px;
  align-items: center; flex-wrap: wrap; font-family: var(--body); font-size: 14px; color: var(--ink-soft); }
.lh-dates-in label { display: inline-flex; gap: 6px; align-items: center; }
.lh-dates-in input { font-family: var(--body); font-size: 14px; padding: 6px 8px;
  border: 1px solid var(--rule-soft); border-radius: 7px; background: var(--paper-input); color: var(--ink); }
.lh-dates-in button { font-family: var(--body); font-weight: 600; font-size: 14px; padding: 7px 16px;
  border: 1px solid var(--red-deep); border-radius: 8px; background: var(--red); color: #fff; cursor: pointer; }
.lh-dates-in button:hover { background: var(--red-deep); }

/* range-list day subheads (next 7 / next 30 / custom multi-day) */
.rl-day { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  margin: 24px 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--ink); }
.rl-day:first-of-type { margin-top: 8px; }
.rl-day-name { font-family: var(--serif); font-weight: 800; font-size: 19px; color: var(--ink); }
.rl-day-n { font-family: var(--body); font-style: italic; font-size: 13px; color: var(--ink-soft); }

/* Calendar (density) grid */
.cal-legend { display: flex; gap: 16px; flex-wrap: wrap; font-family: var(--body); font-size: 12px;
  color: var(--ink-soft); margin: 4px 0 12px; }
.cal-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cal-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-head { font-family: var(--stamp); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); padding: 0 2px 4px; }
.cal-cell { min-height: 96px; border: 1px solid var(--rule-soft); border-radius: 6px; padding: 6px 7px;
  display: flex; flex-direction: column; gap: 5px; }
.cal-cell.muted { background: repeating-linear-gradient(45deg,#ece4d0,#ece4d0 6px,#e7dec9 6px,#e7dec9 12px) !important;
  opacity: .5; border-color: transparent; }
.cal-cell.today { box-shadow: 0 0 0 2px var(--red); }
.cal-cell.has { cursor: pointer; }
.cal-cell.has:hover { border-color: var(--ink); }
.cal-cell.has:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
.cal-hd { display: flex; justify-content: space-between; align-items: baseline; }
.cal-num { font-family: var(--serif); font-weight: 700; font-size: 15px; color: var(--ink); }
.cal-cell.today .cal-num { color: var(--red); }
.cal-n { font-size: 11px; font-weight: 700; color: var(--ink); }
.cal-bar { display: flex; height: 5px; border-radius: 3px; overflow: hidden; gap: 1px; }
.cal-bar span { display: block; }
.cal-top { font-size: 11px; line-height: 1.25; color: var(--ink-soft); font-style: italic;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (max-width: 860px) {
  .calgrid { gap: 3px; }
  .cal-cell { min-height: 62px; padding: 4px 5px; gap: 3px; }
  .cal-top { display: none; }
  .cal-head { font-size: 9px; }
  .lh-dates-in { padding: 9px 14px; gap: 10px; }
}

.ev-detail-link{color:inherit;text-decoration:none}
.ev-detail-link:hover{color:var(--red);text-decoration:underline}

/* Act name -> "all dates for <act>". Inherits the card headline's typography;
   a subtle dotted-underline affordance appears on hover/focus so the name reads
   as a real link without shouting over the newspaper look. */
.act-link{color:inherit;text-decoration:none;cursor:pointer}
.act-link:hover,.act-link:focus-visible{color:var(--red);text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px}

/* Act view banner: "All dates for <act>" + N shows · M venues + Clear (×). */
.act-banner{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  border-top:3px double var(--ink);border-bottom:1px solid var(--rule,rgba(0,0,0,.18));
  padding:14px 0 16px;margin:0 0 12px}
.act-banner .act-eyebrow{font-family:var(--sans,var(--serif));text-transform:uppercase;
  letter-spacing:.14em;font-size:11px;font-weight:700;color:var(--ink-faint,#7a6f58)}
.act-banner .act-title{font-family:var(--serif);font-weight:900;font-size:30px;line-height:1.05;
  margin:3px 0 5px;letter-spacing:-0.01em}
.act-banner .act-count{font-family:var(--serif);font-size:15px;color:var(--ink)}
.act-banner .act-count b{color:var(--red)}
.act-clear{flex:0 0 auto;background:transparent;border:1px solid var(--rule,rgba(0,0,0,.28));
  border-radius:4px;padding:6px 12px;font-family:var(--serif);font-size:13px;color:var(--ink-faint,#7a6f58);
  cursor:pointer;line-height:1;white-space:nowrap}
.act-clear:hover,.act-clear:focus-visible{color:var(--red);border-color:var(--red)}
@media (max-width:560px){.act-banner .act-title{font-size:24px}}

/* merged calendar: clickable day affordances */
.monthgrid .md-cell [data-day]{cursor:pointer}
.monthgrid .md-cell .md-num[data-day]:hover,.monthgrid .md-cell .md-summary[data-day]:hover,.monthgrid .md-cell .md-more:hover{color:var(--red);text-decoration:underline}

/* Where/location picker, relocated into the top toolbar (prominent + panel no longer clipped) */
.lh-where { position: relative; flex: 0 0 auto; }
.lh-where .where-pick { display: inline-flex; align-items: center; gap: 6px; }
.lh-where .wp-anchor { display: inline-flex; align-items: center; gap: 6px; font-family: var(--body);
  font-size: 13.5px; color: var(--ink); border: 1px solid var(--ink); border-radius: 999px;
  padding: 8px 13px; background: var(--paper); cursor: pointer; white-space: nowrap; }
.lh-where .wp-anchor .ti { color: var(--red); }
.lh-where .wp-anchor:hover, .lh-where .wp-anchor.open { background: var(--paper-shade); border-color: var(--red-deep); }
.lh-where .wp-within { font-size: 12.5px; color: var(--ink-soft); margin-left: 4px; white-space: nowrap; }
.lh-where .wp-radius { font-family: var(--body); font-size: 12.5px; border: 1px solid var(--rule-soft);
  border-radius: 999px; padding: 4px 9px; background: var(--paper-input); cursor: pointer; }
.lh-where .wp-panel { position: absolute; top: calc(100% + 6px); right: 0; left: auto; margin-top: 0;
  width: min(720px, calc(100vw - 36px)); z-index: 200; border: 1px solid var(--rule);
  border-radius: 10px; box-shadow: 0 16px 40px rgba(42,31,16,.22); }
.lh-where .scope-strip { display: none; }
@media (max-width: 860px) {
  .lh-where { order: 3; }
  .lh-where .wp-panel { position: fixed; left: 12px; right: 12px; top: auto; width: auto; }
}

/* Bug-hunt: mobile - free the viewport (toolbar scrolls away) + 44px tap targets */
@media (max-width: 860px) {
  .lh-toolbar { position: static; }
  .lh-display button, #filters-toggle, .lh-rail-link, #wp-towns button, .wp-radii button { min-height: 44px; }
}

/* ===== Bug round 2: toolbar fit, compact Where dropdown, rail scrollbar, dates quick-picks ===== */
/* Toolbar: wrap instead of crushing the search field into a sliver */
.lh-tool-in { flex-wrap: wrap; }
.lh-search { flex: 1 1 200px; min-width: 150px; }

/* Compact Where dropdown (was an oversized 3-column mega-panel with a full-height red block) */
.lh-where .wp-panel { width: min(440px, calc(100vw - 36px)); }
.lh-where #wp-radius-panel { right: 0; left: auto; width: auto; }
.lh-where .wp-panel-inner { display: block; padding: 14px 16px; }
.lh-where .wp-geo { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%;
  background: var(--paper-shade); color: var(--red-deep); border: 1px solid var(--rule-soft); border-radius: 8px;
  padding: 9px 12px; font-family: var(--body); font-size: 13.5px; text-transform: none; letter-spacing: 0;
  cursor: pointer; margin: 0 0 12px; }
.lh-where .wp-geo:hover { background: var(--highlight); border-color: var(--red); }
.lh-where .wp-col { padding: 0; border: 0 !important; }
.lh-where .wp-col + .wp-col { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule-soft) !important; }
.lh-where .wp-col-preview { display: none; }   /* drop the heavy area-preview map in the compact dropdown */
.lh-where .wp-towns { max-height: 200px; gap: 2px 14px; }
.lh-where .wp-town { font-size: 14px; }
.lh-where .wp-col-head { margin-bottom: 8px; }

/* Subtle rail scrollbar (was a stark default bar that didn't fit the paper theme) */
.lh-rail { scrollbar-width: thin; scrollbar-color: var(--rule-soft) transparent; }
.lh-rail::-webkit-scrollbar { width: 8px; }
.lh-rail::-webkit-scrollbar-track { background: transparent; }
.lh-rail::-webkit-scrollbar-thumb { background: var(--rule-soft); border-radius: 999px; border: 2px solid #efe7d4; }
.lh-rail:hover::-webkit-scrollbar-thumb { background: var(--ink-faint); }

/* Dates dropdown quick-picks (Next 90 / Next 365) */
.lh-dates-quick { display: inline-flex; gap: 8px; }
.lh-dates-quick a { font-family: var(--body); font-size: 13px; color: var(--red); text-decoration: none;
  border: 1px solid var(--rule-soft); border-radius: 999px; padding: 5px 12px; white-space: nowrap; }
.lh-dates-quick a:hover { background: var(--highlight); border-color: var(--red); }
.lh-dates-sep { font-family: var(--body); font-style: italic; font-size: 12.5px; color: var(--ink-soft); }

/* Compact range header (replaced the big "N shows across the county" block) */
.range-head { font-family: var(--body); font-size: 14px; color: var(--ink-soft); margin: 2px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--rule-soft); }
.range-head .rh-n { font-weight: 700; color: var(--ink); }
.range-head .rh-dot { color: var(--ink-faint); }
.range-head .rh-label { font-style: italic; }

/* ===== Perf/QA round: mobile Where + radius panels must stay reachable =====
   The desktop #wp-radius-panel rule (right:0) has ID specificity and otherwise
   wins on phones, jamming the radius picker against the right edge; and the anchor
   panel had no height bound, pushing the zip field + Reset below the fold. This
   block comes AFTER those rules, so equal-specificity #wp-radius-panel wins by
   source order. Both render as a bottom sheet that scrolls internally. */
@media (max-width: 860px) {
  .lh-where .wp-panel,
  .lh-where #wp-radius-panel {
    position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px;
    width: auto; max-height: 72vh; overflow-y: auto;
    box-shadow: 0 -8px 40px rgba(42, 31, 16, .26);
  }
}

/* ===== Event details popup (Details button on cards + map rows) ===== */
.ev-details { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.ev-details .ti { font-size: 14px; }
.map-ev .me-details { margin-top: 5px; font-family: var(--body); font-size: 11.5px; font-weight: 600;
  color: var(--red); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.map-ev .me-details:hover { text-decoration: underline; color: var(--red-deep); }

.details-back { position: fixed; inset: 0; z-index: 9000; background: rgba(22, 20, 15, .5);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.details-card { background: var(--paper); border: 1px solid var(--ink); border-radius: 14px;
  max-width: 460px; width: 100%; max-height: 88vh; overflow: auto; padding: 22px 22px 18px;
  position: relative; box-shadow: 0 24px 70px rgba(22, 20, 15, .4); }
.details-x { position: absolute; top: 8px; right: 12px; background: none; border: 0; font-size: 30px;
  line-height: 1; cursor: pointer; color: var(--ink); opacity: .5; }
.details-x:hover { opacity: 1; }
.dm-kicker { font-family: var(--stamp); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--red); }
.dm-title { font-family: var(--serif); font-weight: 700; font-size: 24px; line-height: 1.15; margin: 4px 30px 12px 0; color: var(--ink); }
.dm-line { font-family: var(--body); font-size: 14.5px; color: var(--ink-soft); margin: 5px 0; display: flex; gap: 8px; align-items: baseline; }
.dm-line .ti { color: var(--red); font-size: 15px; flex: none; }
.dm-line a { color: var(--ink); }
.dm-line a:hover { color: var(--red); }
.dm-when.dm-tba { color: var(--ink-faint); font-style: italic; }
.dm-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 11px 0; }
.dm-meta span { font-family: var(--body); font-size: 11.5px; color: var(--ink-soft);
  background: var(--paper-shade); border: 1px solid var(--rule-soft); border-radius: 999px; padding: 2px 9px; }
.dm-desc { font-family: var(--body); font-size: 14px; line-height: 1.5; color: var(--ink); margin: 11px 0; }
.dm-fresh { font-family: var(--body); font-size: 11.5px; color: var(--ink-faint); margin: 12px 0 14px;
  display: flex; align-items: center; gap: 5px; }
.dm-fresh .ti { font-size: 13px; }
.dm-actions { display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--rule-soft); padding-top: 14px; }
.dm-btn { font-family: var(--body); font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center;
  gap: 5px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--ink); background: var(--paper);
  color: var(--ink); cursor: pointer; text-decoration: none; }
.dm-btn:hover { background: var(--highlight); border-color: var(--red); color: var(--red-deep); }
.dm-btn.dm-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.dm-btn.dm-primary:hover { background: var(--red-deep); border-color: var(--red-deep); color: var(--paper); }
.dm-btn.dm-ghost { border-color: var(--rule-soft); color: var(--ink-soft); font-weight: 400; }
.dm-btn .ti { font-size: 15px; }
@media (max-width: 860px) {
  .details-back { padding: 0; align-items: flex-end; }
  .details-card { max-width: 100%; border-radius: 16px 16px 0 0; max-height: 90vh; }
  .dm-btn { min-height: 44px; }
}

/* ===== Result-control bar: List/Map/Calendar + Search + Where, moved down next to
   the listings to slim the top toolbar and keep filtering controls touching results. ===== */
.lh-content { min-width: 0; }
.lh-resultbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 30px; border-bottom: 1px solid var(--rule-soft); background: var(--paper);
  position: sticky; top: 49px; z-index: 40; }
.lh-resultbar .lh-display { flex: none; order: 0; }
.lh-resultbar .lh-search { flex: 1 1 240px; min-width: 160px; order: 1; }
.lh-resultbar .lh-where { flex: none; order: 2; }
@media (max-width: 860px) {
  .lh-resultbar { position: static; padding: 12px 16px; gap: 10px; }
  .lh-resultbar .lh-search { flex: 1 1 100%; order: 2; }   /* search on its own row, display + where above */
  .lh-resultbar .lh-where { order: 1; }
}

/* ===== Saved searches: "Save this search" button + modal ===== */
.aff-save { margin-left: 4px; font-family: var(--body); font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--red); background: var(--red); color: var(--paper); cursor: pointer; }
.aff-save:hover { background: var(--red-deep); border-color: var(--red-deep); }

/* Always-visible "save this search as a weekly email" CTA, under the results header. */
.save-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 0 0 16px; padding: 12px 16px; background: var(--paper-shade);
  border: 1px solid var(--rule); border-left: 4px solid var(--red); border-radius: 8px; }
.save-cta-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.save-cta-kicker { display: inline-flex; align-items: center; gap: 6px; font-family: var(--stamp);
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--red); }
.save-cta-kicker .ti { font-size: 13px; }
.save-cta-head { font-family: var(--body); font-weight: 700; font-size: 16.5px; line-height: 1.2; color: var(--ink); }
.save-cta-sub { font-family: var(--body); font-size: 13px; color: var(--ink-faint); line-height: 1.35; }
.save-cta-btn { flex: none; font-family: var(--body); font-size: 14px; font-weight: 600;
  color: var(--paper); background: var(--red); border: 1px solid var(--red); border-radius: 999px;
  padding: 9px 18px; cursor: pointer; white-space: nowrap; }
.save-cta-btn:hover { background: var(--red-deep); border-color: var(--red-deep); }
.save-cta-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.save-cta-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.save-cta-share { display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-family: var(--body); font-size: 14px; font-weight: 600; color: var(--red);
  background: transparent; border: 1px solid var(--red); border-radius: 999px;
  padding: 9px 16px; cursor: pointer; white-space: nowrap; }
.save-cta-share:hover { background: var(--highlight); }
.save-cta-share:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.save-cta-share .ti { font-size: 15px; }
/* ?customize=1 attention pulse: a brief ~2s highlight to draw the eye, no auto-open. */
.save-cta.pulse { animation: saveCtaPulse 0.55s ease-in-out 0s 3; }
@keyframes saveCtaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(168, 42, 22, 0); border-left-color: var(--red); }
  50%      { box-shadow: 0 0 0 5px rgba(168, 42, 22, .28); border-left-color: var(--red-deep); background: var(--highlight); }
}
@media (prefers-reduced-motion: reduce) { .save-cta.pulse { animation: none; box-shadow: 0 0 0 3px rgba(168, 42, 22, .25); } }
@media (max-width: 860px) {
  .save-cta { flex-direction: column; align-items: flex-start; gap: 10px; }
  .save-cta-actions { width: 100%; flex-direction: column; gap: 8px; }
  .save-cta-share, .save-cta-btn { width: 100%; text-align: center; justify-content: center; min-height: 44px; white-space: normal; }
}

.ss-back { position: fixed; inset: 0; z-index: 9100; background: rgba(22, 20, 15, .5);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.ss-card { background: var(--paper); border: 1px solid var(--ink); border-radius: 14px;
  max-width: 440px; width: 100%; padding: 24px 24px 20px; position: relative; box-shadow: 0 24px 70px rgba(22, 20, 15, .4); }
.ss-x { position: absolute; top: 8px; right: 12px; background: none; border: 0; font-size: 30px; line-height: 1; cursor: pointer; color: var(--ink); opacity: .5; }
.ss-x:hover { opacity: 1; }
.ss-kicker { font-family: var(--stamp); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--red); }
.ss-title { font-family: var(--serif); font-weight: 700; font-size: 23px; line-height: 1.15; margin: 4px 30px 12px 0; color: var(--ink); }
.ss-crit { display: flex; align-items: baseline; gap: 8px; font-family: var(--body); font-size: 15px; color: var(--ink);
  background: var(--highlight); border: 1px solid var(--rule-soft); border-radius: 8px; padding: 9px 12px; margin: 0 0 14px; }
.ss-crit .ti { color: var(--red); font-size: 15px; flex: none; }
.ss-form { display: flex; gap: 8px; }
.ss-form input { flex: 1; min-width: 0; font-family: var(--body); font-size: 15px; color: var(--ink); background: var(--paper-input); border: 1px solid var(--rule); border-radius: 8px; padding: 9px 12px; }
.ss-form button { flex: none; font-family: var(--body); font-size: 14px; font-weight: 600; color: var(--paper); background: var(--ink); border: 1px solid var(--ink); border-radius: 8px; padding: 9px 16px; cursor: pointer; }
.ss-form button:hover { background: var(--red-deep); border-color: var(--red-deep); }
.ss-form button:disabled { opacity: .6; cursor: default; }
.ss-fine { font-family: var(--body); font-size: 12px; color: var(--ink-faint); margin: 10px 0 0; }
.ss-status { font-family: var(--body); font-size: 13.5px; color: var(--red-deep); margin: 10px 0 0; font-weight: 600; }
@media (max-width: 860px) {
  .ss-back { padding: 0; align-items: flex-end; }
  .ss-card { max-width: 100%; border-radius: 16px 16px 0 0; }
  .ss-form { flex-wrap: wrap; } .ss-form input, .ss-form button { flex: 1 1 100%; min-height: 44px; }
}

/* ============================================================
   Resizable + collapsible panels (rail | content, map | side-list)
   ============================================================ */
.lh-shell { grid-template-columns: var(--rail-w, 234px) minmax(0, 1fr); position: relative; }
.lh-rail-splitter {
  position: fixed; top: var(--toolbar-h, 49px);
  left: calc(max(0px, (100vw - 1280px) / 2) + var(--rail-w, 234px) - 7px);
  width: 14px; height: calc(100vh - var(--toolbar-h, 49px)); z-index: 40; cursor: col-resize;
  display: flex; align-items: center; justify-content: center; background: transparent; touch-action: none; }
.lh-rail-splitter::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
  transform: translateX(-50%); background: var(--rule); opacity: .55; transition: opacity .12s, width .12s; }
.lh-rail-splitter:hover::before, .lh-rail-splitter:focus-visible::before, .lh-rail-splitter.dragging::before { opacity: 1; width: 2px; }
.lh-rail-splitter:focus-visible { outline: none; }
.lh-rail-grip { position: relative; width: 7px; height: 34px; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--paper); box-shadow: 0 1px 2px rgba(42, 31, 16, .2); opacity: .8; transition: opacity .12s, transform .12s; }
.lh-rail-splitter:hover .lh-rail-grip, .lh-rail-splitter.dragging .lh-rail-grip,
.mapview-splitter:hover .lh-rail-grip, .mapview-splitter.dragging .lh-rail-grip { opacity: 1; }
.lh-rail-splitter.dragging .lh-rail-grip, .mapview-splitter.dragging .lh-rail-grip { transform: scale(.94); }
.lh-rail-grip::after { content: "\22EE"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 11px; line-height: 1; color: var(--ink-soft); }
.lh-rail-collapse { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--rule-soft); border-radius: 6px;
  background: var(--paper); color: var(--ink-soft); cursor: pointer; font-size: 14px; line-height: 1; transition: background .12s, color .12s; z-index: 5; }
.lh-rail-collapse:hover { background: var(--ink); color: var(--paper); }
body.rail-collapsed .lh-shell { grid-template-columns: 44px minmax(0, 1fr); }
body.rail-collapsed .lh-rail { padding: 14px 0; overflow: hidden; }
body.rail-collapsed .lh-rail-sec, body.rail-collapsed .lh-rail-foot { display: none; }
body.rail-collapsed .lh-rail-splitter { display: none; }
body.rail-collapsed .lh-rail-collapse { right: 9px; }
.lh-rail-stub { display: none; writing-mode: vertical-rl; transform: rotate(180deg); margin: 40px auto 0;
  font-family: var(--stamp); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); user-select: none; }
body.rail-collapsed .lh-rail-stub { display: block; }
/* ---- map | side-list ---- */
.mapview { grid-template-columns: minmax(0, 1fr) var(--mapside-w, 320px); position: relative; }
.mapview-splitter { position: absolute; top: 0; bottom: 0; right: calc(var(--mapside-w, 320px) + 18px - 7px);
  width: 14px; z-index: 600; cursor: col-resize; display: flex; align-items: center; justify-content: center; background: transparent; touch-action: none; }
.mapview-splitter::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
  transform: translateX(-50%); background: var(--rule); opacity: .5; transition: opacity .12s, width .12s; }
.mapview-splitter:hover::before, .mapview-splitter:focus-visible::before, .mapview-splitter.dragging::before { opacity: 1; width: 2px; }
.mapview-splitter:focus-visible { outline: none; }
@media (max-width: 860px) {
  .lh-rail-splitter, .lh-rail-collapse, .lh-rail-stub, .mapview-splitter { display: none !important; }
  .lh-shell, body.rail-collapsed .lh-shell { grid-template-columns: 1fr; }
  .mapview { grid-template-columns: 1fr; }
  /* A persisted desktop "rail collapsed" state must NOT empty the mobile Filters panel.
     On mobile the rail opens as a full sheet, so always revive its contents + reset padding. */
  body.rail-collapsed .lh-rail-sec, body.rail-collapsed .lh-rail-foot { display: block; }
  body.rail-collapsed .lh-rail { padding: 18px 20px 26px; overflow: auto; }
  body.rail-collapsed .lh-rail-stub { display: none !important; }
}