/* ============================================================== *
   Club 1984; "This club is watching you"
   Editorial activist layout: a print-style manifesto sidebar beside
   a dark CCTV map. Eyes follow your cursor.
   ============================================================== */

:root {
  --bg:        #0a0a0e;
  --bg-2:      #101016;
  --surface:   #15151d;
  --surface-2: #1c1c27;
  --text:      #ecebf2;
  --reader:    #c9c8d4;
  --muted:     #9a9aa8;
  --faint:     #6b6b7a;
  --line:      rgba(255, 255, 255, 0.10);
  --line-2:    rgba(255, 255, 255, 0.18);

  --red:       #ff3838;
  --red-bright:#ff5a4f;
  --red-deep:  #b3121b;
  --red-glow:  rgba(255, 56, 56, 0.45);
  --hud:       #57f0c0;

  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.7);

  --radius:    18px;
  --radius-sm: 11px;

  --sans:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Anton", "Inter", sans-serif;
  --label:   "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html, body { height: 100%; }
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh; /* exact visible viewport; % height resolves to the large
                     viewport on mobile Chrome and hides content behind the URL bar */
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ----------------------------------------------------------------
   Masthead
   ---------------------------------------------------------------- */
.masthead {
  flex: none;
  padding: 12px 24px 14px;
  background:
    radial-gradient(120% 150% at 50% -40%, rgba(255,56,56,0.14), transparent 60%),
    var(--bg);
  border-bottom: 1px solid var(--line);
  user-select: none;
  -webkit-user-select: none;
  position: sticky;
  top: 0;
  z-index: 30;
}
.masthead__top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }

.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); }
.eye--brand { --eye: 21.6px; }
.brand__word { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font-family: var(--display); font-weight: 400; font-size: 18.4px; letter-spacing: 0.03em; }

.masthead__tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.rec { display: inline-flex; align-items: center; gap: 7px; font-family: var(--label); font-size: 10.4px; font-weight: 600; letter-spacing: 0.17em; color: var(--red-bright); }
.rec__dot { width: 9.6px; height: 9.6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px 1px var(--red-glow); animation: recflash 1.15s ease-in-out infinite; }
@keyframes recflash { 0%, 100% { opacity: 1; } 50% { opacity: 0.15; } }

.masthead__hero { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 3vw, 30px); margin-top: 6px; }
.masthead__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(26px, 3.8vw, 46px);
  line-height: 1.0;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 0 24px rgba(255, 56, 56, 0.32);
}
.eyerow { display: flex; align-items: center; gap: 11px; }
.eyerow .eye { --eye: 36px; }

.masthead__count { margin: 14px auto 0; max-width: 680px; text-align: center; font-family: var(--label); font-size: 14px; line-height: 1.5; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.masthead__count b { color: var(--red-bright); font-weight: 800; }
.masthead__count-party { display: block; margin-top: 2px; }
.masthead__count-party b { color: var(--hud); }
.masthead__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 13px; }

/* Enough horizontal room: lift the headline up into the top band so it sits
   tight to the top, flanked by the small brand mark (left) and REC (right).
   Below this width the centered headline would crowd those corners, so it
   stays stacked underneath. */
@media (min-width: 1120px) {
  .masthead__hero { margin-top: -22px; }
}

/* ----------------------------------------------------------------
   The eye
   ---------------------------------------------------------------- */
.eye {
  position: relative;
  width: var(--eye, 24px); height: var(--eye, 24px);
  flex: none; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 42%, #f5f2ea 52%, #eccfc9 74%, #d49a93 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3), inset 0 -2px 6px rgba(0,0,0,0.18);
  transition: box-shadow 0.3s var(--ease), transform 0.25s var(--ease);
}
.eye__iris {
  /* Centred with margin:auto (not a % translate) so the cursor-tracking JS can
     apply a PURE-pixel translate. Safari won't interpolate a transition between
     a %-translate and a calc() translate, which froze the eyes there. */
  position: absolute; inset: 0; margin: auto;
  width: 56%; height: 56%; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #44565c 0 34%, #71868d 38%, #2b343a 72%, #0d1316 100%);
  transition: transform 0.16s var(--ease), background 0.3s var(--ease);
}
.eye__pupil {
  position: absolute; left: 50%; top: 50%;
  width: 52%; height: 52%; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #04060a;
}
.eye__pupil::after { content: ""; position: absolute; top: 12%; left: 16%; width: 32%; height: 32%; border-radius: 50%; background: rgba(255,255,255,0.85); }
.eye.is-watching, .eye:hover { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3), 0 0 16px var(--red-glow); }
.eye.is-watching .eye__iris, .eye:hover .eye__iris {
  background: radial-gradient(circle at 50% 50%, #ff7b72 0 32%, #ff2d2d 40%, #8c0f12 80%, #220406 100%);
}
.eye--blink { animation: blink 3s var(--ease) infinite; }

/* The safe-venue face; a mint smiley in round shades (can't see you, just
   vibing), never tracking. The two dark lenses are painted as background
   radial-gradients; ::before draws the smile.
   Kept after the .is-watching/:hover rules above so the green glow wins. */
.eye--closed {
  /* flat mint face, two big round lenses; the brat round-shades smiley */
  background:
    radial-gradient(circle at 29% 41%, #10150f 0 21%, rgba(0,0,0,0) 22%),
    radial-gradient(circle at 71% 41%, #10150f 0 21%, rgba(0,0,0,0) 22%),
    #8ce4ae;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25), 0 0 0 3px rgba(87,240,192,0.22), 0 0 14px rgba(87,240,192,0.45);
}
/* bridge + temple arms: one thin bar edge-to-edge through the lens centres */
.eye--closed::after {
  content: ""; position: absolute; left: 0; right: 0; top: 38.5%;
  height: max(2px, 5%);
  background: #10150f;
}
.eye--closed::before {
  content: ""; position: absolute; inset: 34% 0 0 0; margin: auto;
  width: 46%; height: 40%; border-radius: 50%;
  border: 3px solid transparent; border-bottom-color: #10150f;
}
/* at map-pin size the smile hugs the bottom edge; lift it, keep it clearly
   smaller than the face, and halve the stroke so it reads as a smile, not a bowl */
.venue-pin .eye--closed::before {
  inset: 18% 0 0 0; width: 38%; height: 26%; border-width: 1.5px;
}
.eye--closed:hover, .eye--closed.is-watching {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25), 0 0 0 4px rgba(87,240,192,0.3), 0 0 20px rgba(87,240,192,0.6);
}
.eye--party { animation: bop 1.8s var(--ease) infinite; } /* the REC ping tempo, repurposed as a dance beat */
@keyframes bop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-1.5px) scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .eye--party { animation: none; } }

/* ----------------------------------------------------------------
   Shell: sidebar (reader) + mainbar (map stage)
   ---------------------------------------------------------------- */
.shell {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(360px, 440px) 1fr;
}

.reader {
  min-height: 0;
  overflow-y: auto;                 /* fitReader scales to fit; scroll is the safety net so text never clips */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border-right: 1px solid var(--line);
  background:
    radial-gradient(80% 30% at 0% 0%, rgba(255,56,56,0.06), transparent 70%),
    var(--bg);
}
.reader__inner { width: 100%; padding: 24px 34px; font-size: 20px; } /* font-size is the fit handle (JS) */

/* --- Collapsible panel ---
   Desktop: a clickable handle on the panel's right edge collapses it to a thin
   strip you can click anywhere to reopen. */
.reader { position: relative; }
.reader__handle-text { display: none; }
.reader__handle {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 6;
  width: 20px; padding: 0;
  display: grid; place-items: center;
  border: none; background: transparent;
  color: var(--muted); cursor: pointer; opacity: 0.85;
  transition: opacity 0.18s var(--ease), color 0.18s var(--ease), background 0.18s var(--ease);
}
.reader__handle:hover { opacity: 1; color: var(--text); background: rgba(255, 255, 255, 0.06); }
.reader__chevron { width: 16px; height: 16px; transform: rotate(180deg); transition: transform 0.25s var(--ease); } /* « (collapse) */

@media (min-width: 769px) {
  body.is-collapsed .shell { grid-template-columns: 26px 1fr; }
  body.is-collapsed .reader { overflow: hidden; cursor: pointer; }
  body.is-collapsed .reader__inner { display: none; }
  body.is-collapsed .reader__handle { width: 100%; opacity: 0.9; }
  body.is-collapsed .reader__handle:hover { opacity: 1; background: rgba(255, 255, 255, 0.06); }
  body.is-collapsed .reader__chevron { transform: rotate(0deg); width: 20px; height: 20px; } /* » (expand), slightly larger */
}

/* Mobile reopen tab; a thin "^" strip under the header, shown only when the
   panel is collapsed. Mirrors the desktop edge handle's whole-area hover. */
.maptab { display: none; }
@media (max-width: 768px) {
  .maptab {
    position: absolute; top: 0; left: 0; right: 0; z-index: 25;
    height: 26px; padding: 0;
    display: none; place-items: center;
    border: none; background: rgba(255, 255, 255, 0.05);
    color: var(--muted); cursor: pointer;
    transition: background 0.18s var(--ease), color 0.18s var(--ease);
  }
  .maptab svg { width: 22px; height: 22px; }
  .maptab:hover, .maptab:active { background: rgba(255, 255, 255, 0.1); color: var(--text); }
  body.is-collapsed .maptab { display: grid; }
}

/* Editorial scrollbar */
.reader::-webkit-scrollbar { width: 10px; }
.reader::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 10px; border: 3px solid var(--bg); }
.reader::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* --- Editorial typography: three weight levels --- */
.reader__kicker {
  margin: 0 0 26px;
  font-family: var(--label);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hud);
}

/* Level 1; beats: the bold lines that carry the argument */
.beat {
  margin: 1.5em 0 0.4em;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 1.4em;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
}
.beat--lead { margin-top: 0; }

/* Level 2; body: the connective tissue */
.body {
  margin: 0 0 0.9em;
  font-family: var(--sans);
  font-size: 0.95em;
  line-height: 1.55;
  color: var(--reader);
}
.body:last-child { margin-bottom: 0; }

/* Level 3; links + source line */
.reader a {
  color: var(--red-bright);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 90, 79, 0.5);
  border-radius: 3px;
  transition: color 0.18s var(--ease), background 0.18s var(--ease),
              text-decoration-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.reader a:hover {
  color: #fff;
  background: rgba(255, 56, 56, 0.16);
  text-decoration-color: var(--red);
  box-shadow: 0 0 0 3px rgba(255, 56, 56, 0.16);
}
.reader .body a[target="_blank"]::after,
.reader .beat a[target="_blank"]::after {
  content: "↗";
  font-size: 0.72em;
  vertical-align: 0.32em;
  margin-left: 1px;
  opacity: 0.75;
}

.reader__cta { margin-top: 2.4em; padding-top: 1.7em; border-top: 1px solid var(--line); }
.beat--cta { color: var(--red-bright); margin-top: 0; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.05em; }
.reader__source { margin: 1.7em 0 0; font-family: var(--label); font-size: 11px; letter-spacing: 0.05em; color: var(--faint); }
.reader__source a { font-weight: 700; }

/* ----------------------------------------------------------------
   Map stage (mainbar)
   ---------------------------------------------------------------- */
.stage { position: relative; min-height: 0; overflow: hidden; }
#map { position: absolute; inset: 0; z-index: 0; }
.leaflet-container { background: #07070a !important; font-family: var(--sans); }
.leaflet-tile-pane { filter: brightness(0.82) contrast(1.05) saturate(0.7); }

.fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.fx__scan { position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.028) 0 1px, transparent 1px 3px); opacity: 0.6; }
.fx__vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(125% 80% at 50% 38%, transparent 42%, rgba(0,0,0,0.6) 100%),
    radial-gradient(100% 60% at 50% 0%, rgba(255,56,56,0.08), transparent 60%);
}

/* ----------------------------------------------------------------
   Map markers
   ---------------------------------------------------------------- */
.venue-pin { display: flex; align-items: center; height: 26px; width: max-content; cursor: pointer; }
.venue-pin .eye { --eye: 22px; }
/* Surveilling venues stay mid-scan on the map: a thin red ring hugging
   the eye's own edge, not a diffuse haze that bleeds into the cluster
   around it. The safe-venue shades face is untouched. */
.venue-pin:not(.is-safe) .eye {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3), 0 0 0 2px var(--red-glow);
}
.venue-pin:not(.is-safe) .eye__iris {
  background: radial-gradient(circle at 50% 50%, #ff7b72 0 32%, #ff2d2d 40%, #8c0f12 80%, #220406 100%);
}
.venue-pin__label {
  margin-left: 8px;
  padding: 3px 11px;
  font-weight: 600; font-size: 12.5px; letter-spacing: 0.01em;
  white-space: nowrap; color: var(--text);
  background: rgba(16, 16, 22, 0.82);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: 100px;
  box-shadow: var(--shadow-md);
  transition: transform 0.25s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.venue-pin:hover .eye { transform: scale(1.12); }
.venue-pin.is-featured .eye { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3), 0 0 0 3px rgba(255,56,56,0.25), 0 0 14px var(--red-glow); }
.venue-pin.is-selected .eye { transform: scale(1.16); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3), 0 0 0 4px rgba(255,56,56,0.3), 0 0 20px var(--red-glow); }
.venue-pin.is-selected .venue-pin__label { color: #fff; background: var(--red-deep); border-color: var(--red); }
.venue-pin.is-safe .venue-pin__label { border-color: rgba(87, 240, 192, 0.35); }
.venue-pin.is-safe.is-selected .venue-pin__label { color: #fff; background: #0b3d31; border-color: var(--hud); }
/* A clustered member is simply not drawn while folded into an overlay —
   its real location dot never moves; it reappears in place on zoom-in. */
.venue-pin.is-clustered { display: none; }

/* When dots are separate but their labels would overlap, hide the lower
   one's name (the dot stays at its true spot; the name shows on hover). */
.venue-pin.is-label-hidden .venue-pin__label { opacity: 0; visibility: hidden; }
.venue-pin.is-label-hidden:hover .venue-pin__label { opacity: 1; visibility: visible; }

/* Cluster overlay: one eye + a single panel listing every venue in the group */
.cluster { display: flex; align-items: center; cursor: pointer; }
.cluster__eye { --eye: 26px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3), 0 0 0 3px rgba(255,56,56,0.22), 0 0 16px var(--red-glow); }
/* A cluster hiding surveilling venues scans in red just like a single pin. */
.cluster:not(.cluster--safe) .cluster__eye .eye__iris {
  background: radial-gradient(circle at 50% 50%, #ff7b72 0 32%, #ff2d2d 40%, #8c0f12 80%, #220406 100%);
}
/* An all-pledged huddle wears the mint shades face, not a red eye. */
.cluster--safe .cluster__eye {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25), 0 0 0 3px rgba(87,240,192,0.22), 0 0 14px rgba(87,240,192,0.45);
}
.cluster__list {
  margin-left: 9px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 5px;
  background: rgba(16, 16, 22, 0.92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-md);
}
.cluster__item {
  appearance: none; -webkit-appearance: none; border: none; background: none;
  font-family: var(--sans); font-weight: 600; font-size: 12.5px; letter-spacing: 0.01em;
  color: var(--text); text-align: left; white-space: nowrap; cursor: pointer;
  padding: 5px 11px; border-radius: 9px;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.cluster__item:hover { background: var(--red-deep); color: #fff; }

/* ----------------------------------------------------------------
   Detail card (overlays the map stage)
   ---------------------------------------------------------------- */
.detail {
  position: absolute;
  z-index: 20;
  top: 18px; left: 18px; max-height: calc(100% - 36px);
  width: 372px;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  opacity: 0;
  transform: translateX(-14px) scale(0.985);
  transform-origin: left center;
  pointer-events: none;
  transition: opacity 0.42s var(--ease), transform 0.42s var(--ease);
}
.detail.is-open { opacity: 1; transform: none; pointer-events: auto; }
.detail__close {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: rgba(10,10,14,0.6); color: var(--text);
  font-size: 19px; line-height: 1; cursor: pointer;
  backdrop-filter: blur(6px);
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.detail__close:hover { transform: rotate(90deg); background: var(--red-deep); border-color: var(--red); }
.detail__media {
  position: relative; height: 176px; flex: none;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 20px 22px 18px; overflow: hidden;
  background: radial-gradient(90% 120% at 80% 10%, rgba(255,56,56,0.22), transparent 55%), linear-gradient(180deg, #15151d, #0c0c12);
  border-bottom: 1px solid var(--line);
}
.detail__media .fx__scan { position: absolute; inset: 0; opacity: 0.5; }
.detail__rec { position: absolute; top: 14px; left: 18px; display: inline-flex; align-items: center; gap: 7px; font-family: var(--label); font-size: 10px; letter-spacing: 0.16em; color: var(--red-bright); }
.detail__rec i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: ping 1.8s var(--ease) infinite; }
.detail__watcher { position: absolute; top: 6px; right: 16px; --eye: 96px; opacity: 0.92; }
.detail__tactic {
  position: relative; z-index: 1; align-self: flex-start;
  font-family: var(--label); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--hud);
  padding: 5px 11px; border: 1px solid rgba(87, 240, 192, 0.35);
  border-radius: 100px; background: rgba(87, 240, 192, 0.08); margin-bottom: 11px;
}
.detail__city {
  position: relative; z-index: 1; align-self: flex-start;
  font-family: var(--label); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text);
  padding: 5px 11px; border: 1px solid var(--line-2);
  border-radius: 100px; background: rgba(255, 255, 255, 0.06); margin-bottom: 11px;
}
.detail__name { position: relative; z-index: 1; margin: 0; font-family: var(--display); font-weight: 400; line-height: 1.0; letter-spacing: 0.01em; text-transform: uppercase; }
.detail__venue { display: block; font-size: 38px; color: var(--red-bright); }
.detail__watching { display: block; margin-top: 0.22em; font-size: 17px; letter-spacing: 0.08em; color: var(--muted); }
.detail__venue--party { color: var(--hud); }
.detail__watching--party { color: rgba(87, 240, 192, 0.75); }
.detail__body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 22px 24px; }
.detail__scan { margin: 0 0 18px; }
.detail__tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--label); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--red-bright);
  padding: 6px 13px; border-radius: 100px;
  border: 1px solid rgba(255, 90, 79, 0.4); background: rgba(255, 56, 56, 0.08);
}
.detail__tag svg { width: 14px; height: 14px; }
.detail__tags { display: flex; flex-wrap: wrap; gap: 8px; }
/* Data opt-out policy tag; colour signals how trapped your data is. */
.detail__tag.is-hud { color: var(--hud); border-color: rgba(87, 240, 192, 0.45); background: rgba(87, 240, 192, 0.08); }
.detail__optout.is-red    { color: #ff6a5f; border-color: rgba(255, 90, 79, 0.45);  background: rgba(255, 56, 56, 0.10); }
.detail__optout.is-orange { color: #ffab4d; border-color: rgba(255, 159, 61, 0.45); background: rgba(255, 159, 61, 0.10); }
.detail__optout.is-yellow { color: #ffd54a; border-color: rgba(255, 210, 74, 0.45); background: rgba(255, 210, 74, 0.10); }
.detail__tracked { margin: 11px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.detail__blurb { margin: 0 0 16px; font-size: 16px; font-weight: 600; line-height: 1.42; color: var(--text); }
.detail__desc { margin: 0 0 20px; font-size: 14px; line-height: 1.66; color: var(--muted); }
.detail__facts { list-style: none; margin: 0 0 22px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: 13px; }
.detail__fact { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; font-size: 13.5px; color: var(--text); }
.detail__fact svg { width: 17px; height: 17px; margin-top: 1px; color: var(--red); }
.detail__fact a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.detail__fact a:hover { color: var(--red-bright); border-color: var(--red); }
.detail__fact--stat { color: var(--hud); font-family: var(--label); font-size: 12px; letter-spacing: 0.04em; }
.detail__fact--stat svg { color: var(--hud); }
.detail__actions { display: grid; gap: 10px; }

/* ----------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 20px;
  font-family: var(--sans); font-weight: 700; font-size: 14.5px; letter-spacing: 0.01em;
  border-radius: 100px; text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s var(--ease), color 0.18s var(--ease);
}
.btn svg { width: 16px; height: 16px; }
.btn--primary { color: #fff; background: var(--red); box-shadow: 0 8px 22px rgba(255, 56, 56, 0.34); }
.btn--primary:hover { background: var(--red-bright); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(255, 56, 56, 0.46); }
.btn--primary:active { transform: translateY(0); }
.btn--party { color: #04251a; background: var(--hud); box-shadow: 0 8px 22px rgba(87, 240, 192, 0.28); white-space: normal; text-align: center; }
.btn--party:hover { background: #7cf5cf; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(87, 240, 192, 0.4); }
.btn--ghost { color: var(--text); background: transparent; border-color: var(--line-2); }
.btn--ghost:hover { background: var(--surface-2); border-color: var(--faint); }
.btn--sm { padding: 12px 20px; font-size: 14px; }

/* ----------------------------------------------------------------
   Hint
   ---------------------------------------------------------------- */
.hint {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 10;
  display: flex; align-items: center; gap: 9px;
  padding: 10px 18px; font-size: 13px; color: var(--muted);
  background: rgba(16, 16, 22, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 100px; box-shadow: var(--shadow-md);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.hint__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: ping 2.2s var(--ease) infinite; }
.hint.is-hidden { opacity: 0; transform: translateX(-50%) translateY(8px); pointer-events: none; }

/* ----------------------------------------------------------------
   Watchlist / action modal
   ---------------------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; }
.modal[hidden] { display: none; }
.modal__scrim { position: absolute; inset: 0; background: rgba(4, 4, 7, 0.74); backdrop-filter: blur(6px); animation: fade 0.3s var(--ease); }
.modal__panel {
  position: relative; width: min(440px, calc(100vw - 36px)); padding: 34px 30px 28px; text-align: center;
  background: radial-gradient(120% 80% at 50% -10%, rgba(255,56,56,0.2), transparent 60%), var(--surface);
  border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  animation: pop 0.4s var(--ease);
}
.modal__close {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--text);
  font-size: 18px; cursor: pointer; transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.modal__close:hover { background: var(--red-deep); border-color: var(--red); transform: rotate(90deg); }
.eye--xl { --eye: 84px; margin: 0 auto 18px; }
.modal__kicker { margin: 0 0 8px; font-family: var(--label); font-size: 10.5px; letter-spacing: 0.2em; color: var(--hud); }
.modal__title { margin: 0 0 12px; font-family: var(--display); font-weight: 400; font-size: 36px; line-height: 1.04; text-transform: uppercase; letter-spacing: 0.01em; }
.modal__body { margin: 0 auto 20px; max-width: 360px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.modal__body b { color: var(--text); font-weight: 700; }
.modal__petition { width: 100%; margin: 22px 0 0; }
.modal__form { display: flex; flex-direction: column; gap: 10px; }
.modal__input {
  width: 100%; padding: 13px 16px; font-family: var(--sans); font-size: 14.5px; color: var(--text);
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 100px; text-align: center;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.modal__input::placeholder { color: var(--faint); }
.modal__input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(255,56,56,0.2); }
.modal__fine { margin: 16px 0 0; font-family: var(--label); font-size: 10.5px; letter-spacing: 0.05em; color: var(--faint); }

/* --- Stepped "Say no to surveillance" action modal ---
   One 8px spacing scale: 16px between sections + outer padding, 8px from a
   heading to its content and between items. Sections are separated by
   whitespace only; the cards carry the borders (one separation system). */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.modal__panel--steps { padding: 0; overflow: hidden; max-height: calc(100dvh - 8px); display: flex; flex-direction: column; }
.modal__panel--steps .modal__close { width: 28px; height: 28px; top: 20px; right: 20px; font-size: 15px; }
.modal__scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 20px; }

.step { text-align: left; }
/* A divider line + breathing room separates each of the three steps. */
.step + .step { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.step__head { display: flex; align-items: center; gap: 9px; margin: 0 0 11px; }
.step__num { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--red); color: #fff; font-family: var(--label); font-weight: 800; font-size: 13px; transform: translateY(-1px); }
.step__title { margin: 0; line-height: 1; font-family: var(--display); font-weight: 400; font-size: 18.5px; letter-spacing: 0.05em; text-transform: uppercase; }
.step__deck { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.step__deck a { color: var(--red-bright); font-weight: 600; }

.step__btns { display: flex; flex-direction: column; gap: 8px; }
.petition {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px; text-align: left;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text); text-decoration: none;
  font-family: var(--sans); font-weight: 600; font-size: 13.5px; line-height: 1.3;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease), transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.petition:hover { border-color: var(--red); background: #24242f; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,0.35); }
.petition__icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: rgba(255,56,56,0.12); color: var(--red-bright); }
.petition__icon svg { width: 18px; height: 18px; display: block; }
.petition__label { flex: 1; }
.petition__go { flex: none; display: grid; place-items: center; color: var(--faint); transition: color 0.18s var(--ease), transform 0.18s var(--ease); }
.petition__go svg { width: 16px; height: 16px; display: block; }
.petition:hover .petition__go { color: var(--red-bright); transform: translate(2px, -2px); }

.step__btn { width: 100%; white-space: normal; line-height: 1.3; border-radius: var(--radius-sm); padding: 16px; }
.step__btn--join { color: var(--text); background: rgba(255, 56, 56, 0.10); border-color: rgba(255, 90, 79, 0.55); padding: 18px 16px; font-size: 15px; gap: 8px; box-shadow: 0 0 18px rgba(255, 56, 56, 0.12); }
.step__btn--join:hover { background: rgba(255, 56, 56, 0.17); border-color: var(--red); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(255, 56, 56, 0.22); }
.step__logo { height: 19px; width: auto; flex: none; }

/* IG + TikTok (with @handle) stacked left; square Bluesky + X stacked right. */
.socials { display: grid; grid-template-columns: 1fr 60px; grid-auto-rows: 60px; gap: 8px; }
.social { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); text-decoration: none; transition: border-color 0.18s var(--ease), background 0.18s var(--ease), transform 0.18s var(--ease), box-shadow 0.18s var(--ease); }
.social:hover { border-color: var(--red); background: #24242f; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,0.35); }
.social svg { width: 22px; height: 22px; flex: none; }
.social--main { justify-content: flex-start; gap: 13px; padding: 0 20px; }
.social--main svg { width: 25px; height: 25px; }
.social--sq { padding: 0; }
.social__handle { color: var(--muted); font-size: 14px; font-weight: 600; letter-spacing: 0.01em; }

/* ----------------------------------------------------------------
   Leaflet controls
   ---------------------------------------------------------------- */
.leaflet-control-zoom { border: 1px solid var(--line) !important; border-radius: 100px !important; box-shadow: var(--shadow-md) !important; overflow: hidden; }
.leaflet-control-zoom a {
  width: 40px !important; height: 40px !important; line-height: 40px !important; color: var(--text) !important;
  background: rgba(16, 16, 22, 0.9) !important; backdrop-filter: blur(10px); font-size: 19px !important; border: none !important;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.leaflet-control-zoom a:hover { background: #000 !important; color: var(--red-bright) !important; }
.leaflet-bar a:first-child { border-bottom: 1px solid var(--line) !important; }
.leaflet-control-attribution { background: rgba(10, 10, 14, 0.8) !important; color: var(--faint) !important; font-family: var(--sans) !important; font-size: 10.5px !important; border-radius: 100px 0 0 0 !important; padding: 3px 9px !important; }
.leaflet-control-attribution a { color: var(--muted) !important; }
.leaflet-right .leaflet-control { margin-right: 18px; }
.leaflet-top .leaflet-control { margin-top: 18px; }

/* ----------------------------------------------------------------
   Motion
   ---------------------------------------------------------------- */
@keyframes ping { 0% { box-shadow: 0 0 0 0 var(--red-glow); } 70% { box-shadow: 0 0 0 10px rgba(255, 56, 56, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 56, 56, 0); } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.06); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: none; } }

/* ----------------------------------------------------------------
   Responsive; stack the manifesto above the map
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
  .masthead { padding: 15px 16px 16px; }
  /* No brand size bump on mobile; inherit the (smaller) desktop sizes so
     CLUB 1984 never renders larger than on desktop. */
  .masthead__tools { position: absolute; top: 14px; right: 14px; z-index: 2; }
  .masthead__tools .rec { font-size: 9.5px; letter-spacing: 0.08em; gap: 5px; }
  .masthead__tools .rec__dot { width: 7px; height: 7px; box-shadow: 0 0 7px 1px var(--red-glow); }
  .btn--sm { padding: 10px 14px; font-size: 12.5px; }
  .masthead__hero { margin-top: 13px; }
  .masthead__hero .eyerow { display: none; }
  .masthead__title { font-size: clamp(21px, 6.4vw, 30px); }
  .masthead__count { margin-top: 11px; font-size: 11px; letter-spacing: 0.13em; }
  .masthead__actions { margin-top: 11px; }

  /* Mobile: full-screen map; the manifesto drops from under the header
     (open on first load) and retracts up behind it. A big "Show Map" button
     closes it; a thin "^" tab under the header reopens it. */
  .shell { display: block; position: relative; overflow: hidden; }
  .stage { position: absolute; inset: 0; height: auto; }
  .reader {
    position: absolute; top: 0; left: 0; right: 0; height: 100%; z-index: 30;
    overflow: hidden; border-right: none; border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
    transform: translateY(0); transition: transform 0.34s var(--ease);
  }
  body.is-collapsed .reader { transform: translateY(-100%); } /* retract up behind the header */
  .reader__inner { padding: 12px 18px 10px; max-width: none; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  /* Tighter spacing on mobile so fitReader can settle on a larger font. */
  .reader .beat { margin-top: 0.6em; margin-bottom: 0.22em; font-size: 1.28em; }
  .reader .body { margin-bottom: 0.5em; line-height: 1.4; }
  .reader__handle {
    position: static; inset: auto; z-index: auto;
    flex: none; width: 100%; height: auto; padding: 12px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    border: none; border-radius: 0; opacity: 1;
    background: var(--red); color: #fff; cursor: pointer;
    font-family: var(--sans); font-weight: 700; font-size: 14.5px; letter-spacing: 0.01em;
  }
  .reader__handle:hover, .reader__handle:active { background: var(--red-bright); }
  .reader__chevron { display: none; }
  .reader__handle-text { display: inline; }
  .hint { bottom: 24px; }
  body.is-collapsed .mapctl { top: 38px; }
  body.is-collapsed .leaflet-top .leaflet-control { margin-top: 38px; }

  .detail {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto; z-index: 45;
    max-height: 80vh; border-radius: var(--radius) var(--radius) 0 0;
    transform: translateY(16px); transform-origin: bottom center;
  }
  .detail.is-open { transform: none; }
  .detail::before { content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 40px; height: 4px; border-radius: 100px; background: rgba(255,255,255,0.25); z-index: 4; }
  .detail__name { font-size: 30px; }
  .modal__title { font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ----------------------------------------------------------------
   Map controls; search + city selector (upper-left of the map)
   ---------------------------------------------------------------- */
.mapctl {
  position: absolute; top: 16px; left: 16px; z-index: 18;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  max-width: calc(100% - 32px);
}
.search {
  display: flex; align-items: center; gap: 9px;
  height: 44px; padding: 0 16px;
  background: rgba(16, 16, 22, 0.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 100px;
  box-shadow: var(--shadow-md);
}
.search svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.search input {
  border: none; background: none; outline: none; padding: 0;
  width: 184px; max-width: 44vw;
  color: var(--text); font-family: var(--sans); font-size: 14px;
}
.search input::placeholder { color: var(--faint); }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search__clear {
  display: grid; place-items: center; flex: none;
  width: 22px; height: 22px; margin-right: -4px; padding: 0;
  border: none; border-radius: 50%;
  background: rgba(255, 255, 255, 0.12); color: var(--text); cursor: pointer;
  opacity: 0; transform: scale(0.7); pointer-events: none;
  transition: opacity 0.15s var(--ease), transform 0.15s var(--ease), background 0.15s var(--ease);
}
.search__clear svg { width: 12px; height: 12px; color: inherit; }
.search__clear:hover { background: var(--red-deep); }
/* reveal the clear button only once text has been entered */
.search input:not(:placeholder-shown) ~ .search__clear { opacity: 1; transform: none; pointer-events: auto; }

.cityselect {
  height: 44px; padding: 0 38px 0 16px;
  color: var(--text); font-family: var(--sans); font-size: 14px; font-weight: 600;
  background-color: rgba(16, 16, 22, 0.92);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a9aa8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 100px;
  -webkit-appearance: none; appearance: none; cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: border-color 0.2s var(--ease);
}
.cityselect:hover { border-color: var(--faint); }
.cityselect:focus { outline: none; border-color: var(--red); }
.cityselect option { background: var(--surface); color: var(--text); }

/* --- Custom city dropdown: button + listbox with venue-count pills --- */
.citymenu { position: relative; }
.citymenu .cityselect { display: none; } /* state holder only; the button is the UI */
.citybtn {
  display: inline-flex; align-items: center; gap: 9px;
  height: 44px; padding: 0 38px 0 16px;
  color: var(--text); font-family: var(--sans); font-size: 14px; font-weight: 600;
  background-color: rgba(16, 16, 22, 0.92);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a9aa8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 100px;
  cursor: pointer; box-shadow: var(--shadow-md);
  transition: border-color 0.2s var(--ease);
}
.citybtn:hover { border-color: var(--faint); }
.citybtn:focus-visible { outline: none; border-color: var(--red); }
.citymenu__list {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 30;
  min-width: 240px; max-height: 320px; overflow-y: auto;
  padding: 6px;
  background: rgba(16, 16, 22, 0.97);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-lg);
}
.citymenu__item {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; padding: 9px 12px;
  border: none; border-radius: 10px; background: none;
  color: var(--text); font-family: var(--sans); font-size: 13.5px; font-weight: 600;
  text-align: left; cursor: pointer;
  transition: background 0.15s var(--ease);
}
.citymenu__item:hover { background: rgba(255, 255, 255, 0.07); }
.citymenu__item[aria-selected="true"] { background: rgba(255, 56, 56, 0.12); }
/* The count pill: red segment = venues that watch, green = venues pledged. */
.citypill {
  display: inline-flex; flex: none; overflow: hidden;
  border-radius: 999px;
  font-size: 11px; font-weight: 800; line-height: 1;
}
.citypill b { padding: 4px 8px; font-weight: 800; }
.citypill__watch { background: rgba(255, 56, 56, 0.2); color: var(--red-bright); }
.citypill__party { background: rgba(87, 240, 192, 0.16); color: var(--hud); }
.citybtn .citypill { margin-right: -6px; }

/* "Open on my location" button; matches the control pills. */
.geobtn {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; padding: 0;
  background: rgba(16, 16, 22, 0.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 50%;
  box-shadow: var(--shadow-md);
  color: var(--muted); cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.geobtn:hover { border-color: var(--faint); color: var(--text); }
.geobtn:focus-visible { outline: none; border-color: var(--red); color: var(--text); }
.geobtn svg { width: 18px; height: 18px; }
.geobtn.is-locating { color: var(--red-bright); border-color: var(--red); }
.geobtn.is-locating svg { animation: recflash 1.1s ease-in-out infinite; }

/* Markers filtered out by search */
.venue-pin.is-filtered { opacity: 0; pointer-events: none; }

/* Desktop: drop the detail card below the search controls so both show */
@media (min-width: 769px) { .detail { top: 76px; } }
@media (max-width: 768px) {
  .mapctl { top: 12px; left: 12px; }
  .search input { width: 132px; }
}