/* Venues: the directory and a venue's page. Dark, neon, each venue in its circle's colour (--c). */
.vn-page { --c: #4be3ff; color: #eef4ff; padding-bottom: 120px; }
.vn-bg { background: radial-gradient(80% 50% at 15% 0%, color-mix(in srgb, var(--c) 18%, transparent), transparent 60%), radial-gradient(60% 40% at 100% 20%, rgba(169, 139, 255, .12), transparent 65%), #04070d; }
.vn-head { display: grid; gap: 12px; margin: 10px 0 14px; }
.vn-head h1, .vn-hero h1 { margin: 2px 0 6px; font: 600 clamp(30px, 7.5vw, 48px)/1.05 "Source Serif 4", Georgia, serif; color: #fff; overflow-wrap: anywhere; }
.vn-lede { margin: 0; color: #9fb4c8; font-size: 15px; line-height: 1.45; }
.vn-head .mc-btn { justify-self: start; }
.vn-bar { display: grid; gap: 10px; margin-bottom: 12px; }
.vn-list { display: grid; gap: 8px; }
.vn-empty { color: #8ea2bf; font-size: 14px; margin: 0; padding: 8px 2px; }
.vn-card { appearance: none; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; text-align: left; padding: 12px; border-radius: 14px; cursor: pointer; color: #eef4ff; text-decoration: none; font: inherit;
  border: 1px solid color-mix(in srgb, var(--c) 35%, rgba(255, 255, 255, .08)); background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--c) 14%, transparent), transparent 55%), linear-gradient(165deg, rgba(20, 34, 64, .95), rgba(8, 12, 26, .96)); box-shadow: 0 12px 28px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .07); }
.vn-card.is-partner { border-color: #ffd76a; box-shadow: 0 0 0 1px rgba(255, 215, 106, .5), 0 0 24px rgba(255, 215, 106, .18), 0 12px 28px rgba(0, 0, 0, .38); }
.vn-card-dot { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; border: 1.5px solid var(--c); background: color-mix(in srgb, var(--c) 18%, #0a1220); }
.vn-card-dot svg { width: 20px; height: 20px; }
.vn-card-main { display: grid; gap: 4px; min-width: 0; }
.vn-card-main b { font: 600 16px/1.25 "Source Serif 4", Georgia, serif; overflow-wrap: anywhere; }
.vn-card-main small { color: #9fb4c8; font-size: 12.5px; overflow-wrap: anywhere; }
.vn-card-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.vn-card-tags:empty { display: none; }
.vn-tag { font-style: normal; font: 700 10.5px/1 Inter, system-ui, sans-serif; padding: 4px 7px; border-radius: 7px; color: #cfe0f2; background: rgba(255, 255, 255, .07); white-space: nowrap; }
.vn-tag.is-partner { color: #2a1d00; background: #ffd76a; } .vn-tag.is-score { color: #ffe7a6; background: rgba(255, 215, 106, .14); }
.vn-tag.is-here { color: #04121c; background: #39ff88; } .vn-tag.is-mine { color: #04121c; background: var(--c); }

/* a venue's page */
.vn-hero { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 14px; align-items: center; margin: 10px 0 14px; }
.vn-hero-dot { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; border: 1.5px solid var(--c); background: radial-gradient(circle at 40% 30%, color-mix(in srgb, var(--c) 45%, #0a1220), #0a1220 80%); box-shadow: 0 0 26px color-mix(in srgb, var(--c) 45%, transparent); }
.vn-hero-dot svg { width: 28px; height: 28px; }
.vn-hero .mc-kicker { color: color-mix(in srgb, var(--c) 75%, #fff); }
.vn-nums { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.vn-num { display: grid; gap: 3px; justify-items: center; padding: 10px 4px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03); text-align: center; }
.vn-num b { font: 600 20px/1 "Source Serif 4", Georgia, serif; color: #fff; } .vn-num small { font-size: 10.5px; color: #8ea2bf; line-height: 1.2; }
.vn-map { height: 170px; min-height: 0; border-radius: 14px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); }
.vn-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.vn-act { appearance: none; flex: 1 1 auto; min-height: 46px; padding: 10px 14px; border-radius: 12px; cursor: pointer; border: 1px solid color-mix(in srgb, var(--c) 40%, rgba(255, 255, 255, .1)); background: linear-gradient(165deg, rgba(22, 36, 66, .9), rgba(9, 14, 30, .95)); color: #eef4ff; font: 600 15px/1.1 Inter, system-ui, sans-serif; }
.vn-act.is-main { border-color: var(--c); background: radial-gradient(120% 160% at 50% 0%, color-mix(in srgb, var(--c) 40%, transparent), rgba(8, 14, 28, .95) 75%); box-shadow: 0 0 20px color-mix(in srgb, var(--c) 40%, transparent); }
.vn-act.is-on { color: #04121c; border-color: #39ff88; background: #39ff88; box-shadow: 0 0 22px rgba(57, 255, 136, .5); }
.vn-sec { display: grid; gap: 8px; margin-top: 20px; }
.vn-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.vn-link { appearance: none; border: 0; background: none; padding: 4px 2px; color: color-mix(in srgb, var(--c) 70%, #fff); font: 600 14px/1 Inter, system-ui, sans-serif; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.vn-ties { display: flex; flex-wrap: wrap; gap: 7px; }
.vn-bar-row { display: grid; grid-template-columns: minmax(96px, 34%) minmax(0, 1fr) 34px; gap: 10px; align-items: center; }
.vn-bar-label { font-size: 14px; color: #dbe8f7; overflow-wrap: anywhere; }
.vn-track { display: block; height: 10px; border-radius: 6px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.vn-track i { display: block; height: 100%; width: var(--w); border-radius: 6px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 60%, #0a1220), var(--c)); box-shadow: 0 0 12px var(--c); animation: vn-grow .9s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--i, 0) * 70ms); transform-origin: left; }
@keyframes vn-grow { from { transform: scaleX(0); } }
.vn-bar-row b { font: 600 14px/1 ui-monospace, monospace; color: #fff; text-align: right; }
.vn-people { display: grid; grid-template-columns: 118px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.vn-people-label { font: 700 10.5px/1.2 ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: #8ea2bf; }
.vn-faces { display: flex; min-width: 0; } .vn-people small { color: #9fb4c8; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
.vn-face { font-style: normal; display: grid; place-items: center; width: 32px; height: 32px; margin-right: -7px; border-radius: 50%; overflow: hidden; border: 2px solid #0a1220; background: color-mix(in srgb, var(--c) 40%, #1d2a48); color: #fff; font: 700 13px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.vn-face img { width: 100%; height: 100%; object-fit: cover; }
.vn-about { margin: 0; color: #cfdcec; font: 16px/1.55 "Source Serif 4", Georgia, serif; white-space: pre-wrap; overflow-wrap: anywhere; }
.vn-post-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.vn-post-form textarea { width: 100%; box-sizing: border-box; padding: 12px; border-radius: 12px; border: 1px solid rgba(143, 210, 255, .25); background: rgba(4, 8, 18, .6); color: #fff; font: 16px/1.4 Inter, system-ui, sans-serif; resize: none; outline: none; }
.vn-post-form button { appearance: none; justify-self: end; padding: 10px 18px; border-radius: 10px; border: 1px solid var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); color: #fff; font: 600 15px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.vn-post { display: grid; gap: 5px; padding: 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03); }
.vn-post-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; } .vn-post-head b { font-size: 14.5px; } .vn-post-head small { color: #8ea2bf; font-size: 12px; margin-right: auto; }
.vn-post p { margin: 0; color: #dbe8f7; font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.vn-error { margin: 6px 0 0; padding: 9px 12px; border-radius: 10px; color: #ffd6dd; background: rgba(255, 93, 115, .12); border: 1px solid rgba(255, 93, 115, .45); font-size: 14px; }
.vn-error[hidden] { display: none; }
@media (max-width: 420px) { .vn-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vn-people { grid-template-columns: 96px minmax(0, 1fr) auto; } }
@media (prefers-reduced-motion: reduce) { .vn-track i { animation: none; } }