/* ==========================================================================
   SHARED PAGES (round 3): events, search, listing, event, town, brand
   --------------------------------------------------------------------------
   Loads after shell.css. These pages are identical in every section; only
   the section class (accent colours) and the small object art change.
   Every class here is prefixed sp- so nothing collides with section files.
   It never restyles header, footer, .card, .ev, chips, buttons or search.
   Two additive modifiers are defined here and requested for shell.css
   (see notes/shared-pages.md): .ev--art (object tile on an event card)
   and .sp-art (fallback card art for all eight sections).

   No JavaScript anywhere. Filters are GET forms; toggles are native
   <details> or :checked. Nothing starts hidden or transparent.
   ========================================================================== */

/* ---------- 0. Object sprite holder (inline <svg> of <symbol>s) ---------- */
.sp-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sp-obj { display: block; width: 100%; height: 100%; }

/* ---------- 1. Fallback card art for all eight sections ----------
   <div class="card-art sp-art" aria-hidden="true">
     <span class="sp-art-lbl">Music · Asheville</span>
     <svg class="sp-art-obj"><use href="#o-music"/></svg>
     <span class="sp-art-est">Est.<b>2002</b></span>
   </div>
   The card's own sec-* class sets the ground and the texture below. */
.sp-art { background: var(--sec-deep); isolation: isolate; }
.sp-art::before { content: ""; position: absolute; inset: 0; z-index: -1; }
.sp-art-lbl {
  position: absolute; z-index: 2; left: 16px; top: 15px; max-width: calc(100% - 140px);
  font: 500 10.5px/1.25 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sec-mist);
}
.card-art .sp-art-obj {                 /* beats shell's .card-art svg { width:100% } */
  position: absolute; right: 14px; top: 50%; width: 90px; height: 90px; translate: 0 -50%;
  transition: rotate .5s ease, translate .3s ease;
}
.card:hover .card-art .sp-art-obj { translate: 0 -54%; }
.card.sec-music:hover .card-art .sp-art-obj { rotate: 90deg; translate: 0 -50%; }
.sp-art-est {
  position: absolute; left: 16px; bottom: 12px; display: grid; place-items: center;
  width: 50px; height: 50px; border-radius: 50%; rotate: -8deg;
  background: var(--sec-accent); color: var(--sec-deep);
  box-shadow: 0 0 0 3px var(--sec-deep), 0 0 0 4px var(--sec-accent);
  font: 500 8px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; text-align: center; padding-top: 5px;
}
.sp-art-est b { display: block; font: 700 15px/1 var(--font-ui); letter-spacing: -.01em; margin-top: 1px; }
.sp-art-kind {
  position: absolute; left: 16px; bottom: 14px;
  font: 600 12px/1 var(--font-ui); color: var(--sec-deep); background: var(--sec-accent);
  padding: 5px 8px; border-radius: 2px;
}

/* section textures (decorative; same tokens everywhere) */
.sec-music > .sp-art::before, .sec-music.sp-tex::before {
  background: radial-gradient(circle, rgba(244,235,218,.09) 1.2px, transparent 1.6px) 0 0 / 7px 7px; }
.sec-theater > .sp-art::before, .sec-theater.sp-tex::before {
  background:
    linear-gradient(180deg, #E2B86B 0 2px, transparent 2px),
    repeating-linear-gradient(90deg, rgba(142,27,50,.42) 0 5px, rgba(92,14,31,.25) 5px 9px, transparent 9px 16px) left / 34px 100% no-repeat,
    repeating-linear-gradient(90deg, rgba(142,27,50,.42) 0 5px, rgba(92,14,31,.25) 5px 9px, transparent 9px 16px) right / 34px 100% no-repeat; }
.sec-dance > .sp-art::before, .sec-dance.sp-tex::before {
  background:
    linear-gradient(45deg, transparent 46%, rgba(244,224,77,.55) 46% 54%, transparent 54%) 62% 70% / 16px 16px no-repeat,
    linear-gradient(-45deg, transparent 46%, rgba(244,224,77,.55) 46% 54%, transparent 54%) 62% 70% / 16px 16px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 63px, rgba(255,255,255,.07) 63px 64px); }
.sec-visual > .sp-art::before, .sec-visual.sp-tex::before {
  background:
    linear-gradient(180deg, transparent 13px, rgba(195,198,207,.25) 13px 14px, transparent 14px),
    radial-gradient(ellipse 50% 90% at 78% 0%, rgba(157,176,255,.2), transparent 70%); }
.sec-craft > .sp-art::before, .sec-craft.sp-tex::before {
  background:
    radial-gradient(circle, rgba(233,164,106,.16) 1px, transparent 1.5px) 0 0 / 9px 11px,
    radial-gradient(circle, rgba(242,227,211,.10) 1px, transparent 1.5px) 4px 5px / 13px 9px;
  outline: 1.5px dashed rgba(233,164,106,.45); outline-offset: -7px; }
.sec-literary > .sp-art::before, .sec-literary.sp-tex::before {
  background:
    linear-gradient(90deg, transparent 30px, rgba(178,58,58,.5) 30px 31px, transparent 31px),
    repeating-linear-gradient(0deg, rgba(232,220,188,.08) 0 1px, transparent 1px 15px); }
.sec-film > .sp-art::before, .sec-film.sp-tex::before {
  background:
    repeating-linear-gradient(90deg, rgba(244,245,244,.22) 0 9px, transparent 9px 20px) 0 5px / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, rgba(244,245,244,.22) 0 9px, transparent 9px 20px) 0 calc(100% - 5px) / 100% 6px no-repeat,
    radial-gradient(ellipse 60% 80% at 100% 0%, rgba(103,216,230,.16), transparent 70%); }
.sec-museums > .sp-art::before, .sec-museums.sp-tex::before {
  background:
    linear-gradient(180deg, transparent 70%, rgba(211,214,216,.16) 70% calc(70% + 1px), rgba(0,0,0,.18) calc(70% + 1px)),
    radial-gradient(ellipse 70% 60% at 30% 70%, rgba(211,214,216,.08), transparent 70%); }
.sec-home > .sp-art::before, .sec-home.sp-tex::before {
  background: radial-gradient(circle, rgba(166,227,176,.08) 1.2px, transparent 1.6px) 0 0 / 8px 8px; }
.sp-tex { position: relative; isolation: isolate; }
.sp-tex::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* ---------- 2. Event card with an object tile (.ev--art): now in shell.css §11b ---------- */
.ev-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font: 500 12.5px/1.3 var(--font-mono); color: var(--muted); }
.sp-price { display: inline-block; padding: 2px 7px; border-radius: 3px; font: 600 11.5px/1.3 var(--font-ui); letter-spacing: .02em; }
.sp-price--free { background: #E3EEE4; color: #2F6B45; }                   /* 5.32:1 */
.sp-price--tix  { background: #EDEBE6; color: #17181A; }                   /* 14.91:1 */
.sp-price--unk  { background: transparent; color: var(--muted); border: 1px solid var(--line); }

/* ---------- 3. Shared page hero ---------- */
.sp-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--sec-deep); color: var(--night-text);
  padding: clamp(36px, 5vw, 64px) 0 clamp(40px, 5vw, 64px);
}
.sp-hero .eyebrow { color: var(--sec-accent); }
.sp-h1 {
  font-family: var(--sec-display); font-weight: var(--sec-display-weight);
  text-transform: var(--sec-display-case); letter-spacing: var(--sec-display-track);
  line-height: var(--sec-display-leading); font-size: var(--hero-size);
  color: #fff; text-wrap: balance; max-width: 16ch;
}
.sp-h1 em { font-style: italic; color: var(--sec-accent); }
.sp-hero-sub { margin-top: 18px; max-width: 54ch; color: var(--sec-mist); font-size: 18px; }
.sp-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 4vw, 56px); align-items: center; }

/* breadcrumb */
.sp-crumbs { font: 500 12.5px/1.4 var(--font-mono); letter-spacing: .06em; color: var(--sec-mist); margin-bottom: 18px; }
.sp-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; }
.sp-crumbs li + li::before { content: "/"; margin: 0 10px; opacity: .6; }
.sp-crumbs a { color: var(--night-text); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); }
.sp-crumbs a:hover { border-bottom-color: currentColor; }
.sp-crumbs--light { color: var(--muted); }
.sp-crumbs--light a { color: var(--ink); border-bottom-color: var(--line); }

/* section legend chips on dark (links to filtered views) */
.sp-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; list-style: none; }
.sp-legend a {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 9px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18);
  color: var(--night-text); text-decoration: none; font: 600 13.5px/1 var(--font-ui);
}
.sp-legend a:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); }
.sp-legend .sw { width: 12px; height: 12px; border-radius: 2px; background: linear-gradient(135deg, var(--sec-deep) 0 50%, var(--sec-sig) 50%); box-shadow: 0 0 0 1px rgba(255,255,255,.35); }

/* ---------- 4. EVENTS: hero ticket pile ---------- */
.sp-tix-pile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; padding: 8px 0; }
.sp-tix {
  position: relative; display: grid; grid-template-columns: 62px minmax(0, 1fr); height: 74px;
  background: var(--sec-deep); color: var(--night-text); border-radius: 5px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 12px 24px rgba(0,0,0,.35);
  -webkit-mask: radial-gradient(circle 7px at 62px 0, transparent 98%, #000) , radial-gradient(circle 7px at 62px 100%, transparent 98%, #000);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  mask: radial-gradient(circle 7px at 62px 0, transparent 98%, #000), radial-gradient(circle 7px at 62px 100%, transparent 98%, #000);
  mask-composite: intersect;
}
.sp-tix:nth-child(odd)  { rotate: -2.2deg; }
.sp-tix:nth-child(even) { rotate: 1.8deg; translate: 0 10px; }
.sp-tix:nth-child(4n+1) { translate: 12px 0; }
.sp-tix-stub { background: var(--sec-deep-2); padding: 9px; border-right: 2px dashed rgba(255,255,255,.22); display: grid; place-items: center; }
.sp-tix-stub svg { width: 46px; height: 46px; }
.sp-tix-body { padding: 11px 12px 10px 14px; display: flex; flex-direction: column; justify-content: center; gap: 5px; min-width: 0; border-top: 3px solid var(--sec-sig); }
.sp-tix-sec { font: 500 10.5px/1 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--sec-accent); }
.sp-tix-what { font: 700 15px/1.15 var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-tix-when { font: 500 11px/1 var(--font-mono); color: var(--sec-mist); letter-spacing: .06em; }
/* one gentle loop: the pile breathes (first frame = resting pose) */
@keyframes sp-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.sp-tix-pile .sp-tix:nth-child(3) { animation: sp-bob 6s ease-in-out infinite; }
.sp-tix-pile .sp-tix:nth-child(6) { animation: sp-bob 6s ease-in-out 3s infinite; }

/* ---------- 5. EVENTS: filter bar (GET form, no JS) ---------- */
.sp-filters { background: var(--card); border-bottom: 1px solid var(--line); box-shadow: 0 6px 18px rgba(17,18,20,.05); }
.sp-filters form { padding-top: 18px; padding-bottom: 18px; display: grid; gap: 14px; }
.sp-frow { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 10px 16px; }
fieldset.sp-frow { display: block; }                      /* <legend> cannot be a grid item: float it into the label column */
fieldset.sp-frow > legend { float: left; width: 92px; padding-top: 13px; }
fieldset.sp-frow > .sp-toggles { margin-left: 108px; }
.sp-flabel { font: 500 11px/1.2 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.sp-fset { border: 0; margin: 0; padding: 0; min-width: 0; }
.sp-fset legend { padding: 0; }
.sp-toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-toggle { position: relative; display: inline-flex; }
.sp-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }   /* the label is the visible control */
.sp-toggle span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border-radius: var(--r-pill);
  border: 1.5px solid #B9B4AA; background: var(--card); color: var(--ink); font: 600 14px/1 var(--font-ui); cursor: pointer;
}
.sp-toggle span .sw { width: 12px; height: 12px; border-radius: 2px; background: linear-gradient(135deg, var(--sec-deep) 0 50%, var(--sec-sig) 50%); box-shadow: 0 0 0 1px rgba(0,0,0,.2); }
.sp-toggle:hover span { border-color: var(--sec-ink); }
.sp-toggle input:checked + span { background: var(--sec-deep); border-color: var(--sec-deep); color: var(--sec-accent); }
.sp-toggle input:checked + span::before { content: "\2713"; font-weight: 700; }
.sp-toggle input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 6px rgba(17,18,20,.85); }
.sp-frow--split { grid-template-columns: 92px minmax(0, 1fr) auto; }
.sp-select { min-height: 40px; padding: 0 36px 0 12px; border: 1.5px solid #8A8D92; border-radius: var(--r-ctl); background: var(--card); font: 600 14.5px/1 var(--font-ui); max-width: 100%; }
.sp-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.sp-inline .sp-flabel { margin-right: 2px; }
.sp-factions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; justify-content: flex-end; }
.sp-more { display: none; }
.sp-clear { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.sp-resultline {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px;
  padding-top: 20px; padding-bottom: 4px; font-size: 15.5px; color: var(--muted);
}
.sp-resultline b { color: var(--ink); }
.sp-views { display: inline-flex; border: 1.5px solid var(--sec-deep); border-radius: var(--r-ctl); overflow: hidden; }
.sp-views a { padding: 8px 14px; font: 600 14px/1 var(--font-ui); color: var(--sec-deep); text-decoration: none; background: var(--card); }
.sp-views a[aria-current="true"] { background: var(--sec-deep); color: var(--sec-accent); }
.sp-views a + a { border-left: 1.5px solid var(--sec-deep); }
/* the group clips (overflow: hidden), so the ring is drawn inside each link (WCAG 2.4.7) */
.sp-views a:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--focus), inset 0 0 0 5px #17181A !important; }

/* ---------- 6. EVENTS: two-week calendar strip ---------- */
.sp-strip-wrap { margin-top: 18px; }
.sp-strip { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(76px, 1fr)); gap: 6px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: thin; }
.sp-strip a {
  display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 10px 10px 9px; border-radius: 4px;
  background: var(--card); border: 1px solid var(--line); color: var(--ink); text-decoration: none;
}
.sp-strip a:hover { border-color: var(--sec-ink); box-shadow: var(--shadow-1); }
.sp-strip .dow { font: 500 10.5px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.sp-strip .num { font: 700 26px/1 var(--font-ui); letter-spacing: -.02em; }
.sp-strip .dots { display: flex; flex-wrap: wrap; gap: 3px; min-height: 9px; }
.sp-strip .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--sec-sig); box-shadow: 0 0 0 1px rgba(0,0,0,.28); }
.sp-strip .cnt { font: 500 11px/1.2 var(--font-mono); color: var(--muted); }
.sp-strip .wknd a { background: var(--sec-tint); }
.sp-strip .today a { background: var(--sec-deep); border-color: var(--sec-deep); color: #fff; }
.sp-strip .today .dow, .sp-strip .today .cnt { color: var(--sec-mist); }
.sp-strip .today .num { color: var(--sec-accent); }
.sp-strip .today .dots i { box-shadow: 0 0 0 1px rgba(255,255,255,.5); }
.sp-strip .quiet .num { color: var(--muted); }

/* ---------- 7. EVENTS: day groups + empty state ---------- */
.sp-day { padding-top: 34px; scroll-margin-top: 12px; }
.sp-day-h {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding-bottom: 12px; margin-bottom: 16px;
  border-bottom: 2px solid var(--sec-deep);
}
.sp-day-h h2 { font: 400 32px/1.05 var(--sec-display); letter-spacing: -.01em; color: var(--sec-deep); }
.sp-day-h h2 em { font-style: italic; color: var(--sec-ink); }
.sp-day-h .date { font: 500 13px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sp-day-h .count { margin-left: auto; font: 500 12.5px/1 var(--font-mono); color: var(--muted); }
.sp-evgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sp-evgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.sp-empty {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px 24px; align-items: center;
  padding: 24px 26px; background: var(--card); border: 1.5px dashed #B9B4AA; border-radius: var(--r-card);
}
.sp-empty svg { width: 96px; height: 96px; grid-row: span 3; }
.sp-empty h3 { font: 700 20px/1.25 var(--font-ui); }
.sp-empty p { color: var(--muted); max-width: 62ch; }
.sp-empty .actions { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 6px; }

/* quiet day (no events) inside the day list: one line, so every strip link has a target */
.sp-quiet { padding: 12px 16px; border: 1.5px dashed #B9B4AA; border-radius: var(--r-card); background: var(--card); color: var(--muted); font-size: 15px; }
.sp-quiet a { font-weight: 600; }

/* by-art-form panels on events.html (#music ... #museums): compact rows */
.sp-bysec-ev { scroll-margin-top: 12px; }
.sp-secpanel.sp-bysec-ev li a { grid-template-columns: 92px minmax(0, 1fr); gap: 2px 14px; padding: 10px 16px; }
.sp-secpanel.sp-bysec-ev li .when { grid-row: 1 / span 2; grid-column: 1; align-self: center; font: 500 12px/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.sp-secpanel.sp-bysec-ev li b { grid-column: 2; font-size: 15.5px; }
.sp-secpanel.sp-bysec-ev li .at { grid-column: 2; font: 400 14px/1.35 var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--muted); }
.sp-bysec-ev:target { outline: 3px solid var(--focus); outline-offset: 3px; }

/* ---------- 8. EVENTS: month calendar view ---------- */
.sp-month { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--card); }
.sp-month-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; background: var(--sec-deep); color: #fff; }
.sp-month-h h3 { font: 400 26px/1 var(--sec-display); }
.sp-month-h a { color: var(--sec-accent); font-weight: 600; font-size: 14.5px; }
.sp-month table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sp-month th { font: 500 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 10px 8px; text-align: left; border-bottom: 1px solid var(--line); }
.sp-month td { vertical-align: top; height: 118px; padding: 8px 7px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sp-month td:last-child { border-right: 0; }
.sp-month tr:last-child td { border-bottom: 0; }
.sp-month .d { font: 700 14px/1 var(--font-ui); display: block; margin-bottom: 6px; }
.sp-month .out { background: #F3F1EC; }
.sp-month .out .d, .sp-month .past .d { color: #6A6E74; font-weight: 500; }
.sp-month .is-today { background: var(--sec-tint); box-shadow: inset 0 3px 0 var(--sec-deep); }
.sp-month .is-today .d::after { content: " Today"; font: 500 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sec-ink); }
.sp-month ul { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; }
.sp-month li { min-width: 0; }
.sp-month li a {
  display: block; padding: 3px 6px; border-left: 3px solid var(--sec-sig); background: var(--sec-tint);
  font: 600 12px/1.25 var(--font-ui); color: var(--ink); text-decoration: none;
  white-space: normal; overflow-wrap: anywhere; border-radius: 0 2px 2px 0;   /* names wrap, never cut (WCAG 1.4.12) */
}
.sp-month li a:hover { text-decoration: underline; }
.sp-month .d-link { display: none; }            /* phones only: one link per day (see the 760px block) */
.sp-month .more { font: 500 11px/1.2 var(--font-mono); color: var(--muted); }

/* ---------- 9. SEARCH ---------- */
.sp-sbar { background: var(--sec-deep); color: var(--night-text); padding: 28px 0 30px; }
.sp-sbar .search { max-width: 860px; box-shadow: 0 0 0 1px rgba(0,0,0,.2), 0 12px 28px rgba(0,0,0,.35); }
.sp-sbar .search-field input { font-weight: 600; }
.sp-shead { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 14px 30px; padding-top: 30px; }
.sp-shead h1 { font: 400 clamp(2rem, 3.6vw, 2.75rem)/1.05 var(--sec-display); color: var(--sec-deep); letter-spacing: -.01em; }
.sp-shead h1 q { font-style: italic; color: var(--sec-ink); quotes: "\201C" "\201D"; }
.sp-scount { margin-top: 8px; color: var(--muted); }
.sp-scount b { color: var(--ink); }
.sp-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; }
.sp-applied { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.sp-applied .lbl { font: 500 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }

.sp-slayout { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); padding-top: 26px; padding-bottom: var(--block-y); align-items: start; }
.sp-side { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 6px 18px 18px; }
.sp-side h2 { font: 700 17px/1 var(--font-ui); padding: 14px 0 6px; display: flex; justify-content: space-between; align-items: center; }
.sp-side h2 a { font: 600 13px/1 var(--font-ui); }
.sp-facet { border: 0; margin: 0; padding: 14px 0 12px; border-top: 1px solid var(--line); min-width: 0; }
.sp-facet legend { font: 500 11px/1.2 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding: 0; margin-bottom: 10px; float: left; width: 100%; }
.sp-facet legend + * { clear: both; }
.sp-check { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 5px 0; font-size: 15px; cursor: pointer; }
.sp-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--sec-ink); }
.sp-check .n { font: 500 12px/1 var(--font-mono); color: var(--muted); }
.sp-check .sw { display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin-right: 8px; vertical-align: -1px; background: linear-gradient(135deg, var(--sec-deep) 0 50%, var(--sec-sig) 50%); box-shadow: 0 0 0 1px rgba(0,0,0,.2); }
.sp-check.is-zero { color: #6A6E74; }
.sp-side .btn { width: 100%; margin-top: 8px; }
.sp-side .sp-select { width: 100%; margin-top: 4px; }
.sp-mfilters { display: none; }
.sp-applied--m, .sp-sort--m { display: none; }   /* phone copies (search page) */
.sp-mfilters-toggle { display: none; }            /* phones only (below); at desktop its label is hidden, so no tab stop */
.sp-mf-label .c { display: none; }
.sp-mfilters-toggle:checked ~ .sp-mfilters .sp-mf-label .o ,
[class*="elementor-widget-ncd-"]:has(> .sp-mfilters-toggle:checked) ~ [class*="elementor-widget-ncd-"] .sp-mfilters .sp-mf-label .o{ display: none; }
.sp-mfilters-toggle:checked ~ .sp-mfilters .sp-mf-label .c ,
[class*="elementor-widget-ncd-"]:has(> .sp-mfilters-toggle:checked) ~ [class*="elementor-widget-ncd-"] .sp-mfilters .sp-mf-label .c{ display: inline; }
.sp-mfilters-toggle:focus-visible ~ .sp-mfilters .sp-mf-label ,
[class*="elementor-widget-ncd-"]:has(> .sp-mfilters-toggle:focus-visible) ~ [class*="elementor-widget-ncd-"] .sp-mfilters .sp-mf-label{ outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 6px rgba(17,18,20,.85); }

.sp-mapph {
  position: relative; border-radius: var(--r-card); overflow: hidden; margin: 0 0 22px;
  background: #E9EDE6; border: 1px solid var(--line);
}
.sp-mapph svg { width: 100%; height: auto; }
.sp-mapph .land { fill: #F6F3EA; stroke: #9DB3A2; stroke-width: 2; stroke-linejoin: round; }
.sp-mapph .grid { stroke: #D5DDD3; stroke-width: 1; }
.sp-mapph .rg { font: 500 12px var(--font-mono); letter-spacing: .3em; fill: #55595F; }   /* 6.35:1 on the land fill */
.sp-mapph .pin circle { stroke: #fff; stroke-width: 2.5; }
.sp-mapph .pin text { font: 700 13px var(--font-ui); fill: #fff; text-anchor: middle; }
.sp-mapph-tag {
  position: absolute; left: 12px; bottom: 10px; font: 500 11px/1.3 var(--font-mono); letter-spacing: .08em;
  background: rgba(255,255,255,.92); color: var(--muted); padding: 5px 8px; border: 1px dashed #9A9690;
}
.sp-mapph-legend { position: absolute; right: 12px; bottom: 10px; display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: flex-end; max-width: 70%;
  font: 600 12px/1.2 var(--font-ui); background: rgba(255,255,255,.92); padding: 6px 9px; border-radius: 3px; }
.sp-mapph-legend span { display: inline-flex; align-items: center; gap: 5px; }
.sp-mapph-legend i { width: 9px; height: 9px; border-radius: 50%; background: var(--sec-sig); box-shadow: 0 0 0 1px rgba(0,0,0,.3); }

.sp-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.sp-num {
  position: absolute; right: 10px; top: 10px; z-index: 2; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: var(--ink); font: 700 12px/1 var(--font-ui);
  box-shadow: 0 0 0 2px var(--sec-sig);
}
.sp-results .card-art .sp-art-obj { right: 44px; }
.sp-did { margin-top: 6px; font-size: 15px; color: var(--muted); }
.sp-did a { font-weight: 600; }
.sp-subhead { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 34px 0 14px; }
.sp-subhead h2 { font: 700 20px/1.2 var(--font-ui); }
.sp-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 30px; list-style: none; }
.sp-pager a, .sp-pager span {
  min-width: 42px; min-height: 42px; display: grid; place-items: center; padding: 0 12px; border-radius: var(--r-ctl);
  border: 1px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px;
}
.sp-pager [aria-current="page"] { background: var(--sec-deep); color: var(--sec-accent); border-color: var(--sec-deep); }
.sp-pager .gap { border: 0; background: none; min-width: 20px; padding: 0; }

/* ---------- 10. LISTING + EVENT pages ---------- */
.sp-lhero { background: var(--sec-deep); color: var(--night-text); padding: 26px 0 40px; }
.sp-lhero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.sp-lkicker { font: 500 12.5px/1.3 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sec-accent); margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.sp-lkicker .ev-sec, .sp-lkicker .ev-sec::before { color: var(--sec-accent); }
.sp-lfacts { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 18px; list-style: none; }
.sp-lfacts li { display: flex; flex-direction: column; gap: 4px; }
.sp-lfacts b { font: 700 24px/1 var(--font-ui); color: #fff; letter-spacing: -.01em; }
.sp-lfacts span { font: 500 11px/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sec-mist); }
.sp-laddr { margin-top: 16px; color: var(--sec-mist); font-size: 16px; }
.sp-lhero .chips { margin-top: 16px; }
/* genre tags = links to search filtered by that term. Outline chips on the dark hero:
   #fff text on any --sec-deep >= 15:1; --sec-mist border >= 8:1 on every --sec-deep (needs 3:1).
   Hover/focus fills with --sec-accent (dark text on it >= 8:1). */
.sp-lhero .sp-ltags, .sp-lstrip .sp-ltags { gap: 8px; }
.sp-lhero .sp-ltags a.chip, .sp-lstrip .sp-ltags a.chip {
  min-height: 34px; padding: 6px 14px; font-size: 14px; color: #fff;
  background: rgba(255,255,255,.07); border: 1.5px solid var(--sec-mist);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.sp-lhero .sp-ltags a.chip:hover, .sp-lhero .sp-ltags a.chip:focus-visible, .sp-lstrip .sp-ltags a.chip:hover, .sp-lstrip .sp-ltags a.chip:focus-visible {
  background: var(--sec-accent); border-color: var(--sec-accent); color: var(--sec-deep);
}
.sp-lhero .sp-ltags a.chip:hover { text-decoration: underline; text-underline-offset: .18em; }
.sp-lactions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.sp-lhero .btn--ghost { color: #fff; border-color: rgba(255,255,255,.55); }
/* hero object: ONE <use href="#o-SECTION"> picks the art; the section class picks the motion.
   Music spins like a record on a platter; every other object floats gently on a soft stage light. */
.sp-lart { position: relative; aspect-ratio: 1; max-width: 340px; width: 100%; justify-self: center; display: grid; place-items: center; }
.sp-lart > * { grid-area: 1 / 1; }
.sp-lart-stage {
  width: 92%; height: 92%; border-radius: 50%;
  background: radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--sec-sig) 26%, transparent) 0, color-mix(in srgb, var(--sec-sig) 8%, transparent) 52%, transparent 70%);
}
.sp-lart > .sp-secobj { width: 88%; height: 88%; filter: drop-shadow(0 18px 30px rgba(0,0,0,.45)); animation: sp-float 7s ease-in-out infinite; }
.sec-music .sp-lart > .sp-secobj { width: 100%; height: 100%; animation: sp-spin 14s linear infinite; }
.sec-music .sp-lart-stage { display: none; }              /* the record is its own disc */
@keyframes sp-spin { to { rotate: 360deg; } }
@keyframes sp-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.sp-lart .sp-art-est { left: 2%; bottom: 6%; top: auto; width: 82px; height: 82px; font-size: 10px; }
.sp-lart .sp-art-est b { font-size: 24px; }

/* status / verification */
.sp-status {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px 20px; align-items: center;
  background: #FFF1C7; color: #17181A; border: 1px solid #E6CF84; border-left: 6px solid #C99A2E;
  border-radius: var(--r-card); padding: 16px 20px; margin-top: -22px; position: relative; box-shadow: var(--shadow-1);
}
.sp-status-ico { width: 36px; height: 36px; border-radius: 50%; background: #6B4A00; color: #FFF1C7; display: grid; place-items: center; font: 700 20px/1 var(--font-ui); }
.sp-status b { font-weight: 700; }
.sp-status p { font-size: 15.5px; }
.sp-status .acts { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.sp-status .acts a { color: #6B4A00; font-weight: 700; font-size: 14.5px; }      /* 7.16:1 */

.sp-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 3px; font: 600 12.5px/1.2 var(--font-ui); }
.sp-badge--review { background: #FFF1C7; color: #6B4A00; box-shadow: inset 0 0 0 1px #E6CF84; }
.sp-badge--claimed { background: #EDEBE6; color: #17181A; box-shadow: inset 0 0 0 1px #CFCAC0; }
.sp-badge--verified { background: #E3EEE4; color: #2F6B45; box-shadow: inset 0 0 0 1px #A9CBB1; }
.sp-badge::before { font-weight: 700; }
.sp-badge--review::before { content: "!"; }
.sp-badge--claimed::before { content: "\25CF"; font-size: 9px; }
.sp-badge--verified::before { content: "\2713"; }

.sp-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: st; }
.sp-steps li { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 14px 16px; display: grid; gap: 8px; align-content: start; }
.sp-steps li.is-now { border: 2px solid #C99A2E; box-shadow: var(--shadow-1); }
.sp-steps .sp-badge { justify-self: start; }
.sp-steps .now { font: 500 10.5px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: #6B4A00; }
.sp-steps p { font-size: 14.5px; color: var(--muted); }

.sp-lbody { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(24px, 4vw, 56px); padding-top: 40px; padding-bottom: var(--block-y); align-items: start; }
.sp-lsec + .sp-lsec { margin-top: 44px; }
.sp-lsec > h2 { font: 700 23px/1.2 var(--font-ui); letter-spacing: -.01em; margin-bottom: 14px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sp-lsec > h2 .sample-note { font-weight: 500; }
.sp-lead { font-size: 18.5px; line-height: 1.6; max-width: 62ch; }
.sp-dl { display: grid; grid-template-columns: 170px minmax(0, 1fr); border-top: 1px solid var(--line); margin: 0; }
.sp-dl dt, .sp-dl dd { padding: 11px 0; border-bottom: 1px solid var(--line); margin: 0; }
.sp-dl dt { font: 500 12px/1.5 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: 13px; }
.sp-dl dd { font-size: 16px; }
.sp-dl .unk { color: var(--muted); }
.sp-dl .unk b { font-weight: 700; color: var(--ink); margin-right: 8px; }
.sp-src { font-size: 14px; color: var(--muted); margin-top: 14px; max-width: 70ch; }

.sp-aside { display: grid; gap: 18px; position: sticky; top: 16px; }
.sp-box { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 18px; }
.sp-box h3 { font: 700 18px/1.25 var(--font-ui); margin-bottom: 8px; }
.sp-box p { font-size: 15px; color: var(--muted); }
.sp-box .btn { width: 100%; margin-top: 14px; }
.sp-box--ink { background: var(--sec-deep); color: var(--night-text); border-color: var(--sec-deep); }
.sp-box--ink h3 { color: #fff; }
.sp-box--ink p { color: var(--sec-mist); }
.sp-streetmap { position: relative; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--line); background: #ECEAE3; }
.sp-streetmap svg { width: 100%; height: auto; }
.sp-streetmap { margin: 0; scroll-margin-top: 16px; }
.sp-streetmap:target { outline: 3px solid var(--focus); outline-offset: 3px; box-shadow: 0 0 0 7px rgba(17,18,20,.85); }
.sp-mapaddr { font-size: 15px; margin-top: -6px; line-height: 1.5; }
.sp-mapaddr b { font-weight: 700; }
.sp-mapaddr .link-arrow { display: inline-block; margin-top: 6px; }

/* off-site link glyph (paired with sr-only " (opens in a new tab)") */
.sp-ext { display: inline-block; margin-left: .2em; font-weight: 700; line-height: 1; text-decoration: none; }
.btn .sp-ext { margin-left: -3px; font-size: 1.05em; }

/* listing: suggest-a-correction form (static design; the build swaps form.cr-form for the live WS Form) */
.sp-correct { scroll-margin-top: 16px; }
.sp-correct-lead { font-size: 16.5px; color: var(--muted); max-width: 62ch; margin-bottom: 18px; }
.cr-form {
  display: grid; gap: 18px; padding: clamp(20px, 3vw, 30px);
  background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--sec-ink);
  border-radius: var(--r-card); box-shadow: var(--shadow-1);
}
.cr-form .field > label { font: 500 12px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.cr-form .field textarea { min-height: 128px; font: inherit; resize: vertical; }
.cr-form .field input, .cr-form .field textarea { width: 100%; }
.cr-form .field input:hover, .cr-form .field textarea:hover { border-color: var(--ink); }
.cr-fixed input[readonly] {
  background: var(--sec-tint); border-style: dashed; font-weight: 700; color: var(--ink); cursor: default;
}
.cr-hint { font-size: 13.5px; color: var(--muted); }
.cr-opt { margin-left: 6px; padding: 1px 6px; border: 1px solid var(--line); border-radius: 3px; font-size: 10.5px; color: var(--muted); letter-spacing: .08em; }
.cr-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.cr-check {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; cursor: pointer;
  padding: 14px 16px; background: var(--sec-tint); border-radius: var(--r-ctl); font-size: 15px; color: var(--ink);
}
.cr-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--sec-ink); }
.cr-check b { display: block; font-weight: 700; font-size: 16px; }
.cr-check:hover { box-shadow: inset 0 0 0 1.5px var(--sec-ink); }
.cr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

/* event page ticket hero: the same ticket language as the .ev cards (dark date stub, a perforated
   edge of round bites between stub and body), scaled up. The outline is --sec-accent: >= 7:1 against
   every --sec-deep hero ground (needs 3:1), so the ticket's edge always reads on the dark hero. */
.sp-ticket {
  --tk-r: 6px; --tk-pitch: 18px;                 /* perforation bite radius + spacing (.ev uses 4px / 12px) */
  position: relative; display: grid; grid-template-columns: 170px minmax(0, 1fr) minmax(0, 300px); border-radius: 8px; overflow: hidden;
  background: var(--card); color: var(--ink);
  box-shadow: 0 0 0 2px var(--sec-accent), 0 20px 50px rgba(0,0,0,.4);
}
.sp-ticket-stub {
  position: relative; background: var(--sec-deep-2); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 26px 12px; text-align: center;
}
.sp-ticket-stub::after {                        /* perforation: white bites into the stub, as on .ev-date */
  content: ""; position: absolute; top: 0; bottom: 0; right: calc(-1 * var(--tk-r)); width: calc(2 * var(--tk-r));
  background: radial-gradient(circle at var(--tk-r) 50%, var(--card) calc(var(--tk-r) - .5px), transparent var(--tk-r)) 0 calc(var(--tk-pitch) / -2) / calc(2 * var(--tk-r)) var(--tk-pitch) repeat-y;
}
.sp-ticket-stub .ev-dow { font-size: 13px; }
.sp-ticket-stub .ev-day { font-size: 72px; margin: 8px 0 6px; }
.sp-ticket-stub .ev-mon { font-size: 15px; }
.sp-ticket-stub .time { margin-top: 16px; font: 500 14px/1 var(--font-mono); color: var(--sec-mist); letter-spacing: .08em; }
.sp-ticket-main { padding: 28px 30px 26px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sp-ticket-main .ev-kicker { font-size: 12.5px; }
.sp-ticket-main h1 {
  font-family: var(--sec-display); font-weight: var(--sec-display-weight); text-transform: var(--sec-display-case);
  letter-spacing: var(--sec-display-track); line-height: var(--sec-display-leading); font-size: clamp(1.9rem, 3.4vw, 3rem);
  color: var(--sec-deep); text-wrap: balance; overflow-wrap: anywhere;
}
.sp-ticket-main .where { font-size: 18px; }
.sp-ticket .btn--ghost { color: var(--sec-ink); border-color: currentColor; }   /* white ticket inside a dark hero */
.sp-ticket-main .where a { font-weight: 700; color: var(--ink); }
.sp-ticket-art { position: relative; background: var(--sec-deep-2); display: grid; place-items: center; padding: 20px; border-left: 4px solid var(--sec-sig); }
.sp-ticket-art svg { width: 100%; max-width: 220px; height: auto; filter: drop-shadow(0 12px 22px rgba(0,0,0,.4)); animation: sp-float 7s ease-in-out infinite; }
.sec-music .sp-ticket-art svg { animation: sp-spin 14s linear infinite; }
.sp-samplebar {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 4px; padding: 7px 11px; align-self: flex-start;
  background: #FFF1C7; color: #6B4A00; border: 1px solid #E6CF84; border-radius: 3px; font: 600 13px/1.3 var(--font-ui);
}
.sp-cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.sp-cal { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: 14.5px; }
.sp-cal b { font: 500 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.sp-cal a { font-weight: 600; }

/* ---------- 11. TOWN ---------- */
.sp-thero { padding-bottom: 0; }
.sp-thero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: end; }
.sp-thero-copy { padding-bottom: clamp(36px, 5vw, 64px); }
.sp-coords { font: 500 12px/1 var(--font-mono); letter-spacing: .14em; color: var(--sec-mist); margin-top: 22px; }
.sp-ridge { width: 100%; height: auto; display: block; }
.sp-ridge .obj { transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes sp-sun { 0%, 100% { opacity: 1; } 50% { opacity: .82; } }
.sp-ridge .sun { animation: sp-sun 8s ease-in-out infinite; }

.sp-known { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; list-style: none; }
.sp-known li { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; }
.sp-known-top { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--sec-deep); border-bottom: 3px solid var(--sec-sig); }
.sp-known-top svg { width: 40px; height: 40px; flex: none; }
.sp-known-top span { font: 500 11px/1.2 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sec-accent); }
.sp-known-body { padding: 14px 16px 16px; display: grid; gap: 6px; }
.sp-known-body h3 { font: 700 17.5px/1.25 var(--font-ui); }
.sp-known-body p { font-size: 15px; color: var(--muted); }
.sp-known-body a { font-weight: 600; }
.sp-prose { font-size: 19px; line-height: 1.65; max-width: 66ch; }
.sp-prose + .sp-prose { margin-top: 14px; }

.sp-bysec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sp-secpanel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.sp-secpanel > header { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--sec-deep); border-bottom: 3px solid var(--sec-sig); }
.sp-secpanel > header svg { width: 44px; height: 44px; flex: none; }
.sp-secpanel > header h3 { font: 700 18px/1.2 var(--font-ui); color: #fff; }
.sp-secpanel > header a { margin-left: auto; color: var(--sec-accent); font-weight: 600; font-size: 14px; white-space: nowrap; }
.sp-secpanel ul { list-style: none; }
.sp-secpanel li a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; padding: 11px 16px; text-decoration: none; color: var(--ink); border-top: 1px solid var(--line); }
.sp-secpanel li:first-child a { border-top: 0; }
.sp-secpanel li a:hover { background: var(--sec-tint); }
.sp-secpanel li b { font-weight: 700; font-size: 16px; }
.sp-secpanel li span { font: 500 11.5px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sec-ink); grid-column: 1; }
.sp-secpanel li em { font-style: normal; font-size: 14px; color: var(--muted); grid-row: 1 / span 2; grid-column: 2; align-self: center; text-align: right; }

.sp-nearby { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
.sp-nearby a { display: inline-flex; flex-direction: column; gap: 3px; padding: 12px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); text-decoration: none; color: var(--ink); min-width: 0; }
.sp-nearby a:hover { border-color: var(--sec-ink); }
.sp-nearby b { font-size: 16px; }
.sp-nearby span { font-size: 13.5px; color: var(--muted); }

/* For community leaders: native <details>, closed by default */
.sp-leaders { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); }
.sp-leaders > summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 18px; align-items: center;
  padding: 20px 22px;
}
.sp-leaders > summary::-webkit-details-marker { display: none; }
.sp-leaders > summary .ico { width: 44px; height: 44px; border-radius: 4px; background: var(--sec-deep); display: grid; place-items: center; }
.sp-leaders > summary .ico svg { width: 30px; height: 30px; }
.sp-leaders > summary b { font: 700 19px/1.25 var(--font-ui); display: block; color: var(--ink); }
.sp-leaders > summary > span:nth-child(2) > span { font-size: 15px; color: var(--muted); }
.sp-leaders > summary .tog { font: 600 14px/1 var(--font-ui); color: var(--sec-ink); border: 1.5px solid currentColor; border-radius: var(--r-pill); padding: 9px 14px; white-space: nowrap; }
.sp-leaders > summary .tog::after { content: " \25BE"; }
.sp-leaders[open] > summary .tog::after { content: " \25B4"; }
.sp-leaders[open] > summary .tog .o { display: none; }
.sp-leaders:not([open]) > summary .tog .c { display: none; }
.sp-leaders > summary:hover .tog { background: var(--sec-tint); }
.sp-leaders-body { padding: 4px 22px 24px; border-top: 1px solid var(--line); }
.sp-index { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px 40px; align-items: start; padding-top: 22px; }
.sp-index-score { font: 700 64px/1 var(--font-ui); letter-spacing: -.03em; color: var(--sec-deep); }
.sp-index-score small { display: block; font: 500 11px/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.sp-pilot { margin-top: 10px; }
.sp-compbar { display: flex; height: 18px; border-radius: 3px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.sp-compbar i { display: block; height: 100%; }
.sp-comp { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 22px; margin-top: 16px; }
.sp-comp li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.sp-comp li i { width: 12px; height: 12px; border-radius: 2px; align-self: center; }
.sp-comp li b { font: 700 16px/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.sp-fine { font-size: 14px; color: var(--muted); margin-top: 16px; max-width: 80ch; }

/* ---------- 12. BRAND (team page only) ---------- */
.sp-team-flag {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 3px;
  background: var(--focus); color: #17181A; font: 600 12.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
}
.sp-bnav { position: sticky; top: 0; z-index: 5; background: var(--card); border-bottom: 1px solid var(--line); }
.sp-bnav ul { list-style: none; display: flex; gap: 4px 22px; overflow-x: auto; padding-top: 12px; padding-bottom: 12px; scrollbar-width: none; }
.sp-bnav a { font: 600 14px/1 var(--font-ui); white-space: nowrap; color: var(--ink); text-decoration: none; }
.sp-bnav a:hover { text-decoration: underline; }
.sp-pal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sp-palcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.sp-palhead { background: var(--sec-deep); padding: 16px 16px 14px; display: flex; align-items: center; gap: 14px; border-bottom: 4px solid var(--sec-sig); }
.sp-palhead svg { width: 48px; height: 48px; flex: none; }
.sp-palhead b { display: block; font: 700 17px/1.2 var(--font-ui); color: #fff; }
.sp-palhead span { font: 500 11px/1.3 var(--font-mono); letter-spacing: .1em; color: var(--sec-accent); }
.sp-sw { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sp-sw div { padding: 8px 8px 9px; min-height: 64px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; font: 500 10px/1.25 var(--font-mono); }
.sp-sw div b { font-weight: 500; letter-spacing: .04em; }
.sp-palpairs { padding: 10px 14px 12px; font: 500 11.5px/1.6 var(--font-mono); color: var(--muted); border-top: 1px solid var(--line); }
.sp-palpairs b { color: var(--ink); font-weight: 600; }

.sp-type { display: grid; gap: 0; border-top: 1px solid var(--line); }
.sp-typerow { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 8px 28px; padding: 18px 0; border-bottom: 1px solid var(--line); align-items: center; }
.sp-typerow .meta { font: 500 11.5px/1.5 var(--font-mono); color: var(--muted); }
.sp-typerow .meta b { display: block; font: 700 15px/1.3 var(--font-ui); color: var(--ink); }
.sp-typerow .spec { font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.05; color: var(--sec-deep); overflow-wrap: anywhere; }

.sp-objs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sp-objcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.sp-objcard figure { margin: 0; background: var(--sec-deep); padding: 22px; display: grid; place-items: center; border-bottom: 3px solid var(--sec-sig); }
.sp-objcard figure svg { width: 120px; height: 120px; }
.sp-objcard div { padding: 14px 16px 16px; display: grid; gap: 6px; }
.sp-objcard h3 { font: 700 17px/1.2 var(--font-ui); }
.sp-objcard p { font-size: 14px; color: var(--muted); }
.sp-objcard .tag { font: 500 11px/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sec-ink); }

.sp-anat { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 28px 48px; align-items: start; }
.sp-anat + .sp-anat { margin-top: 40px; }
.sp-anat-fig { position: relative; }
.sp-callout { position: absolute; z-index: 3; width: 24px; height: 24px; border-radius: 50%; background: var(--focus); color: #17181A; display: grid; place-items: center; font: 700 12.5px/1 var(--font-ui); box-shadow: 0 0 0 2px #17181A; }
.sp-anat ol { display: grid; gap: 10px; padding-left: 0; list-style: none; counter-reset: an; }
.sp-anat ol li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; font-size: 15.5px; counter-increment: an; }
.sp-anat ol li::before { content: counter(an); width: 24px; height: 24px; border-radius: 50%; background: var(--focus); color: #17181A; display: grid; place-items: center; font: 700 12.5px/1 var(--font-ui); box-shadow: 0 0 0 2px #17181A; }
.sp-anat code, .sp-tokens code, .sp-dodont code { font: 500 13px/1.4 var(--font-mono); background: #EFECE4; padding: 1px 5px; border-radius: 2px; }

.sp-dodont { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sp-dd { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.sp-dd-demo { padding: 18px; min-height: 110px; display: grid; place-items: center; border-bottom: 1px solid var(--line); }
.sp-dd-txt { padding: 12px 16px 14px; font-size: 14.5px; display: grid; gap: 4px; }
.sp-dd-txt b { font: 700 12px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.sp-dd--do .sp-dd-txt b { color: #2F6B45; }
.sp-dd--dont .sp-dd-txt b { color: #A3162B; }          /* 6.9:1 on white */
.sp-dd--do { box-shadow: inset 0 4px 0 #2F6B45; }
.sp-dd--dont { box-shadow: inset 0 4px 0 #A3162B; }

.sp-tokens { width: 100%; border-collapse: collapse; font-size: 14.5px; background: var(--card); border: 1px solid var(--line); }
.sp-tokens th, .sp-tokens td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.sp-tokens th { font: 500 11px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); background: #F3F1EC; }
.sp-tablewrap { overflow-x: auto; }

/* ---------- 13. Responsive ---------- */
@media (max-width: 1080px) {
  .sp-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-known { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-objs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-pal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-ticket { grid-template-columns: 150px minmax(0, 1fr); }
  /* the section object drops into the foot of the date stub (as .ev--art does on phones) */
  .sp-ticket-stub { padding-bottom: 104px; }
  .sp-ticket-art { position: absolute; left: 0; bottom: 0; width: 150px; padding: 0 0 22px; background: transparent; border: 0; }
  .sp-ticket-art svg { width: 68px; }
  .sp-evgrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-comp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .sp-hero-grid, .sp-lhero-grid, .sp-thero-grid { grid-template-columns: minmax(0, 1fr); }
  .sp-slayout, .sp-lbody { grid-template-columns: minmax(0, 1fr); }
  .sp-aside { position: static; }
  .sp-lart { max-width: 220px; justify-self: start; order: -1; }
  .sp-lart .sp-art-est { width: 66px; height: 66px; }
  .sp-lart .sp-art-est b { font-size: 19px; }
  .sp-thero-copy { padding-bottom: 8px; }
  .sp-index { grid-template-columns: minmax(0, 1fr); }
  .sp-anat { grid-template-columns: minmax(0, 1fr); }
  .sp-side { display: none; }                       /* phones get the quick-filter rail + toggle below */
  .sp-mfilters { display: block; margin-bottom: 18px; }
  .sp-mfilters-toggle { display: block; }         /* still .sr-only: the label below is the visible control */
  .sp-mfilters-toggle:checked ~ .sp-slayout .sp-side ,
  [class*="elementor-widget-ncd-"]:has(> .sp-mfilters-toggle:checked) ~ [class*="elementor-widget-ncd-"] .sp-slayout .sp-side{ display: block; }
  /* phones (user, 2026-10-11): art-form chips first, then what's applied; sort and the
     full filters open from one small Filters button instead of big form fields */
  .sp-shead .sp-sort, .sp-shead + .sp-applied { display: none; }
  .sp-mf-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
  .sp-mf-row .filter-row { flex: 1 1 auto; min-width: 0; margin: 0 0 0 calc(-1 * var(--gutter)); padding-right: 4px; }
  .sp-mf-label {
    flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px;
    border: 1.5px solid var(--sec-ink); border-radius: var(--r-pill); background: var(--card); color: var(--sec-ink);
    font: 600 14px/1 var(--font-ui); cursor: pointer;
  }
  .sp-mf-label svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .sp-mfilters-toggle:checked ~ .sp-mfilters .sp-mf-label ,
  [class*="elementor-widget-ncd-"]:has(> .sp-mfilters-toggle:checked) ~ [class*="elementor-widget-ncd-"] .sp-mfilters .sp-mf-label{ background: var(--sec-deep); color: var(--sec-accent); border-color: var(--sec-deep); }
  .sp-applied--m { display: flex; margin-top: 10px; }
  .sp-applied--m .chip { font-size: 12.5px; }
  .sp-sort--m { display: none; margin-top: 14px; }
  .sp-mfilters-toggle:checked ~ .sp-mfilters .sp-sort--m ,
  [class*="elementor-widget-ncd-"]:has(> .sp-mfilters-toggle:checked) ~ [class*="elementor-widget-ncd-"] .sp-mfilters .sp-sort--m{ display: flex; }
}
@media (max-width: 760px) {
  .sp-frow, .sp-frow--split { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  fieldset.sp-frow > legend { float: none; width: auto; padding: 0 0 8px; }
  fieldset.sp-frow > .sp-toggles { margin-left: 0; }
  .sp-factions { justify-content: flex-start; }
  /* Events filters on phones (user, 2026-10-11): art form and dates stay as one
     swipeable row each; town and price open under "More filters" (CSS-only
     checkbox); Clear all left, a normal-size Show events button on the right. */
  .sp-filters form { gap: 12px; padding-top: 14px; padding-bottom: 14px; }
  .sp-filters fieldset.sp-frow > legend { padding-bottom: 6px; }
  .sp-filters fieldset.sp-frow > .sp-toggles { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 4px; }
  .sp-filters .sp-toggles::-webkit-scrollbar { display: none; }
  .sp-filters .sp-toggle { flex: none; }
  .sp-filters .sp-toggle span { min-height: 36px; padding: 0 12px; font-size: 13.5px; }
  .sp-more {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 14px;
    border: 1.5px solid var(--line); border-radius: var(--r-ctl); background: var(--paper, transparent);
    font: 600 14.5px/1 var(--font-ui); color: var(--ink); cursor: pointer;
  }
  .sp-more span { margin-left: auto; font-weight: 500; color: var(--muted); font-size: 13px; }
  .sp-more::after { content: "+"; font: 600 20px/1 var(--font-ui); width: 16px; text-align: center; }
  .sp-more-toggle:checked + .sp-more::after { content: "\2212"; }
  .sp-more-toggle:focus-visible + .sp-more { outline: 3px solid var(--focus); outline-offset: 2px; }
  .sp-more-toggle:not(:checked) ~ .sp-frow--split > .sp-flabel,
  [class*="elementor-widget-ncd-"]:has(> .sp-more-toggle:not(:checked)) ~ [class*="elementor-widget-ncd-"] .sp-frow--split > .sp-flabel,
  .sp-more-toggle:not(:checked) ~ .sp-frow--split > .sp-inline ,
  [class*="elementor-widget-ncd-"]:has(> .sp-more-toggle:not(:checked)) ~ [class*="elementor-widget-ncd-"] .sp-frow--split > .sp-inline{ display: none; }
  .sp-filters .sp-inline { flex-direction: column; align-items: stretch; gap: 10px; }
  .sp-filters .sp-select { width: 100%; min-height: 44px; }
  .sp-filters .sp-factions { justify-content: space-between; margin-top: 2px; }
  .sp-filters .sp-factions .btn { min-height: 40px; padding: 0 18px; font-size: 14.5px; }
  .sp-evgrid, .sp-evgrid--3 { grid-template-columns: minmax(0, 1fr); }
  .sp-strip { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .sp-month th { padding: 8px 2px; font-size: 9.5px; letter-spacing: .04em; text-align: center; }
  .sp-month td { height: 58px; padding: 6px 3px; }
  .sp-month .d { text-align: center; font-size: 13px; }
  .sp-month .is-today .d::after { content: ""; }
  /* phones: the whole day cell is one link to that day (WCAG 2.5.8); the per-event links are for wider screens */
  .sp-month td.has-ev { position: relative; padding: 0; }
  .sp-month td.has-ev > .d, .sp-month td.has-ev > ul { display: none; }
  .sp-month .d-link { display: flex; flex-direction: column; align-items: center; gap: 5px; min-height: 58px; padding: 6px 3px; color: var(--ink); text-decoration: none; }
  .sp-month .d-link .d { margin: 0; }
  .sp-month .d-link .dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; }
  .sp-month .d-link .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--sec-sig); box-shadow: 0 0 0 1px rgba(0,0,0,.3); }
  .sp-month .more { display: none; }
  .sp-month-h h3 { font-size: 22px; }
  .sp-empty { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .sp-empty svg { width: 64px; height: 64px; grid-row: auto; }
  .sp-results { grid-template-columns: minmax(0, 1fr); }
  .sp-mapph-legend { display: none; }
  .sp-mapph .pin text, .sp-mapph .rg { display: none; }   /* 5px tall at phone width; the result list carries the places (WCAG 1.4.4) */
  .sp-status { grid-template-columns: auto minmax(0, 1fr); margin-top: -16px; align-items: start; padding: 14px 16px; }
  .sp-status-ico { width: 28px; height: 28px; font-size: 16px; }
  .sp-status .acts { grid-column: 1 / -1; }
  .sp-steps { grid-template-columns: minmax(0, 1fr); }
  .sp-dl { grid-template-columns: minmax(0, 1fr); }
  .sp-dl dt { border-bottom: 0; padding-bottom: 0; }
  .sp-dl dd { padding-top: 2px; }
  .sp-ticket { grid-template-columns: minmax(0, 1fr); }
  .sp-ticket-stub { flex-direction: row; gap: 14px; justify-content: flex-start; padding: 14px 84px 14px 18px; }
  .sp-ticket-stub::after { top: auto; left: 0; right: 0; bottom: calc(-1 * var(--tk-r)); width: auto; height: calc(2 * var(--tk-r));
    background: radial-gradient(circle at 50% var(--tk-r), var(--card) calc(var(--tk-r) - .5px), transparent var(--tk-r)) calc(var(--tk-pitch) / -2) 0 / var(--tk-pitch) calc(2 * var(--tk-r)) repeat-x; }
  .sp-ticket-art { left: auto; right: 14px; top: 14px; bottom: auto; width: 44px; padding: 0; }
  .sp-ticket-art svg { width: 44px; filter: none; }
  .sp-ticket-stub { padding-right: 70px; }
  .sp-ticket-stub .time { white-space: nowrap; }
  .sp-ticket-stub .ev-day { font-size: 44px; margin: 0; }
  .sp-ticket-stub .time { margin: 0 0 0 auto; }
  .sp-ticket-main { padding: 22px 20px; }
  .cr-row { grid-template-columns: minmax(0, 1fr); }
  .cr-form { padding: 18px 16px; }
  .sp-ticket-main h1 { font-size: 1.65rem; }
  .sp-known { grid-template-columns: minmax(0, 1fr); }
  .sp-bysec { grid-template-columns: minmax(0, 1fr); }
  .sp-prose { font-size: 17.5px; }
  .sp-leaders > summary { grid-template-columns: auto minmax(0, 1fr); padding: 16px; }
  .sp-leaders > summary .tog { grid-column: 1 / -1; justify-self: start; }
  .sp-leaders-body { padding: 4px 16px 20px; }
  .sp-comp { grid-template-columns: minmax(0, 1fr); }
  .sp-objs, .sp-pal, .sp-dodont { grid-template-columns: minmax(0, 1fr); }
  /* brand page, phones: keep the team reference scannable (and under the 16k screenshot cap) */
  .sp-sw div { min-height: 44px; padding: 6px; }
  .sp-sw div b { display: none; }                       /* hex only; token order is fixed: deep, deep-2, accent, sig / ink, tint, paper, mist */
  .sp-palpairs { padding: 8px 12px 10px; font-size: 11px; }
  .sp-palhead { padding: 12px; }
  .sp-palhead svg { width: 36px; height: 36px; }
  .sp-objcard { display: grid; grid-template-columns: 96px minmax(0, 1fr); }
  .sp-objcard figure { padding: 12px; border-bottom: 0; border-right: 3px solid var(--sec-sig); align-content: start; }
  .sp-objcard figure svg { width: 72px; height: 72px; }
  .sp-objcard div { padding: 12px 14px; }
  .sp-dd-demo { min-height: 0; padding: 14px; }
  .sp-dd-demo > span { transform: scale(.82); }
  .sp-same { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; overflow-x: auto;
    margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 14px; scroll-snap-type: x mandatory; }
  .sp-same > * { scroll-snap-align: start; }
  .sp-anat-fig { max-width: 340px; }
  .sp-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sp-rules .sp-known-top { padding: 10px; gap: 8px; }
  .sp-rules .sp-known-top svg { width: 30px; height: 30px; }
  .sp-rules .sp-known-top span { font-size: 9.5px; letter-spacing: .1em; }
  .sp-rules .sp-known-body { padding: 10px 12px 12px; }
  .sp-rules .sp-known-body h3 { font-size: 15px; }
  .sp-rules .sp-known-body p { font-size: 13.5px; }
  .sp-typerow { grid-template-columns: minmax(0, 1fr); }
  .sp-tix-pile { gap: 12px 12px; }
  .sp-tix { grid-template-columns: 50px minmax(0, 1fr); height: 64px;
    -webkit-mask: radial-gradient(circle 6px at 50px 0, transparent 98%, #000), radial-gradient(circle 6px at 50px 100%, transparent 98%, #000);
    mask: radial-gradient(circle 6px at 50px 0, transparent 98%, #000), radial-gradient(circle 6px at 50px 100%, transparent 98%, #000);
    -webkit-mask-composite: source-in; mask-composite: intersect; }
  .sp-tix-stub { padding: 6px; }
  .sp-tix-stub svg { width: 36px; height: 36px; }
  .sp-tix-body { padding: 8px 8px 8px 10px; }
  .sp-tix-what { font-size: 13px; }
  .sp-tix:nth-child(4n+1) { translate: 0 0; }
  .sp-h1 { max-width: none; }
}
@media (max-width: 760px) {
  /* phones: the object moves into the date stub so the title gets the full width */
  .sp-tix-what { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 12.5px; line-height: 1.15; }
  .sp-tix-when { display: none; }
}
@media (max-width: 420px) {
  .sp-lfacts b { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .sp-tix-pile .sp-tix, .sp-lart > .sp-secobj, .sec-music .sp-lart > .sp-secobj, .sp-ticket-art svg, .sec-music .sp-ticket-art svg, .sp-ridge .sun { animation: none; }
  .sp-lhero .sp-ltags a.chip { transition: none; }
}

/* town: provisional label next to the leaders-panel title */
.sp-prov { display: flex; width: max-content; margin: 6px 0 2px; font-size: 12px; }
.sp-weekend-next { margin-top: 22px; }

/* events.html on phones: keep the full superset under one screen-capture length */
@media (max-width: 760px) {
  .sp-secpanel.sp-bysec-ev li a { grid-template-columns: 70px minmax(0, 1fr); gap: 0 10px; padding: 7px 12px; }
  .sp-secpanel.sp-bysec-ev li .when { font-size: 11px; letter-spacing: .02em; }
  .sp-secpanel.sp-bysec-ev li b { font-size: 15px; line-height: 1.3; }
  .sp-secpanel.sp-bysec-ev li .at { font-size: 13px; }
  .sp-tix-pile .sp-tix:nth-child(n+5) { display: none; }   /* decorative: four tickets are enough at phone width */
}

/* ==========================================================================
   14. E. RAY CULTURAL INDEX (town.html score card, towns.html)
   The ring: six arcs sized by each part's maximum points (25/20/20/15/10/10),
   each filled to the town's sub-score. Missing data is hatched, never zero.
   Fill #2F6B45 on track #DCE6DD: 4.96:1 (graphic, needs 3:1).
   ========================================================================== */
.ix-ring .ix-track { fill: none; stroke: #DCE6DD; }
.ix-ring rect.ix-track { fill: #EEF3EE; stroke: none; }
.ix-ring .ix-hatch { fill: #B9C8BC; }
.ix-ring .ix-fill { fill: none; stroke: #2F6B45; }
.ix-ring .ix-n { font: 600 12px var(--font-mono); fill: #55595F; text-anchor: middle; }
.ix-ring .ix-big { font: 400 54px/1 var(--sec-display, "Instrument Serif"), Georgia, serif; fill: #0E1A14; text-anchor: middle; letter-spacing: -.02em; }
.ix-ring .ix-of { font: 500 11px var(--font-mono); letter-spacing: .2em; fill: #55595F; text-anchor: middle; }

.ix-band { position: relative; margin-top: -28px; padding-bottom: 8px; }
.ix-card {
  display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px 48px; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 30px 36px;
  box-shadow: 0 2px 4px rgba(17,18,20,.06), 0 18px 40px rgba(17,18,20,.12);
  border-top: 5px solid transparent;
  border-image: linear-gradient(90deg, #F2C14E 0 12.5%, #D2394A 0 25%, #D66A98 0 37.5%, #5B72FF 0 50%, #E08A4F 0 62.5%, #9A86E8 0 75%, #67D8E6 0 87.5%, #C9CDD1 0) 1;
}
.ix-fig { margin: 0; display: grid; justify-items: center; gap: 10px; }
.ix-fig .ix-ring { width: 100%; max-width: 280px; height: auto; }
.ix-cap { display: inline-flex; align-items: center; gap: 8px; font: 500 11px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ix-mark svg { width: 22px; height: 22px; display: block; }
.ix-h { font: 400 clamp(1.9rem, 3.2vw, 2.6rem)/1.05 var(--sec-display); color: var(--sec-deep); margin: 2px 0 10px; }
.ix-h b { font-weight: 400; color: var(--sec-ink); }
.ix-lede { color: var(--muted); max-width: 64ch; font-size: 16.5px; }
.ix-bars { list-style: none; display: grid; gap: 8px; margin-top: 18px; padding: 0; }
.ix-row { display: grid; grid-template-columns: 24px minmax(0, 1.25fr) minmax(0, 1fr) 96px; gap: 4px 14px; align-items: center; }
.ix-i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--sec-deep); color: var(--sec-accent); font: 600 11px/1 var(--font-mono); }
.ix-name { font: 600 15px/1.25 var(--font-ui); color: var(--ink); }
.ix-name small { display: block; font: 400 13px/1.3 var(--font-ui); color: var(--muted); }
.ix-bar { height: 10px; border-radius: 5px; background: #DCE6DD; overflow: hidden; }
.ix-bar i { display: block; height: 100%; background: #2F6B45; border-radius: 5px; }
.ix-row.is-missing .ix-bar { background: repeating-linear-gradient(45deg, #EEF3EE 0 4px, #B9C8BC 4px 6px); }
.ix-val { font: 500 13px/1.2 var(--font-mono); color: var(--muted); text-align: right; white-space: nowrap; }
.ix-val b { font: 700 16px/1 var(--font-ui); color: var(--ink); }
.ix-foot { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; font-size: 14.5px; }
.ix-foot a { font-weight: 600; }

/* leaders panel: deeper breakdown */
.sp-next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 40px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.sp-next h3 { font: 700 17px/1.3 var(--font-ui); margin-bottom: 10px; }
.sp-room, .sp-steps-list { display: grid; gap: 8px; padding-left: 20px; font-size: 15px; }
.sp-room b { font-variant-numeric: tabular-nums; }
.sp-room small { color: var(--muted); }

/* towns.html */
.tw-map { position: relative; margin: 0; }
.tw-map svg { width: 100%; height: auto; overflow: visible; }
.tw-map .land { fill: #17291F; stroke: #A6E3B0; stroke-opacity: .55; stroke-width: 2; stroke-linejoin: round; }
.tw-map .rg { font: 500 12px var(--font-mono); letter-spacing: .3em; fill: #BAC5BD; }
.tw-map .dot circle { fill: #A6E3B0; stroke: #0E1A14; stroke-width: 2; }
.tw-map .dot text { font: 700 11px var(--font-ui); fill: #0E1A14; text-anchor: middle; }
.tw-map .dot .lbl { font: 600 13px var(--font-ui); fill: #ECE9E2; paint-order: stroke; stroke: #0E1A14; stroke-width: 4px; stroke-linejoin: round; }
.tw-mapnote { font: 500 11px/1.4 var(--font-mono); color: var(--sec-mist); margin-top: 8px; }
.tw-region + .tw-region { margin-top: 44px; }
.tw-region > h3 { display: flex; align-items: baseline; gap: 14px; font: 400 30px/1.1 var(--sec-display); color: var(--sec-deep); padding-bottom: 10px; margin-bottom: 16px; border-bottom: 2px solid var(--sec-deep); }
.tw-region > h3 span { font: 500 12px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tw-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; list-style: none; padding: 0; }
.tw-card { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-1); transition: transform .2s ease, box-shadow .2s ease; height: 100%; }
.tw-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.tw-card .ix-ring { width: 76px; height: 76px; }
.tw-card .ix-ring .ix-big { font-size: 25px; }
.tw-card b { display: block; font: 700 17px/1.2 var(--font-ui); }
.tw-card:hover b { text-decoration: underline; text-underline-offset: .15em; }
.tw-card .sc { display: block; font: 600 22px/1.1 var(--font-ui); color: var(--sec-ink); margin-top: 4px; font-variant-numeric: tabular-nums; }
.tw-card .sc small { font: 500 11px var(--font-mono); color: var(--muted); letter-spacing: .08em; }
.tw-card .note { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.tw-card.is-built { border-color: var(--sec-ink); box-shadow: 0 0 0 1px var(--sec-ink), var(--shadow-1); }
.tw-rank { list-style: none; padding: 0; display: grid; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 8px 0; }
.tw-rank a { display: grid; grid-template-columns: 36px minmax(110px, 180px) 110px minmax(0, 1fr) 60px; gap: 14px; align-items: center; padding: 7px 18px; color: var(--ink); text-decoration: none; }
.tw-rank a:hover { background: var(--sec-tint); }
.tw-rank .n { font: 600 12px/1 var(--font-mono); color: var(--muted); }
.tw-rank .c { font-weight: 700; }
.tw-rank .r { font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tw-rank .b { height: 12px; background: #DCE6DD; border-radius: 6px; overflow: hidden; }
.tw-rank .b i { display: block; height: 100%; background: #2F6B45; border-radius: 6px; }
.tw-rank .v { font: 700 15px/1 var(--font-ui); text-align: right; font-variant-numeric: tabular-nums; }
.tw-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; list-style: none; padding: 0; counter-reset: h; }
.tw-how li { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px 18px; display: grid; gap: 6px; }
.tw-how li b { font: 700 16.5px/1.25 var(--font-ui); }
.tw-how li .pts { font: 500 12px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sec-ink); }
.tw-how li p { font-size: 14.5px; color: var(--muted); }

@media (max-width: 1080px) {
  .tw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ix-card { grid-template-columns: minmax(0, 1fr); padding: 24px; }
  .ix-fig .ix-ring { max-width: 240px; }
  .tw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tw-how { grid-template-columns: minmax(0, 1fr); }
  .sp-next { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .ix-band { margin-top: -18px; }
  .ix-card { padding: 20px 16px; }
  .ix-row { grid-template-columns: 22px minmax(0, 1fr) 84px; }
  .ix-bar { grid-column: 2 / -1; grid-row: 2; }
  .ix-name small { display: none; }
  .tw-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .tw-card { grid-template-columns: 60px minmax(0, 1fr); padding: 10px 14px; }
  .tw-card .ix-ring { width: 60px; height: 60px; }
  .tw-rank a { grid-template-columns: 26px minmax(0, 1fr) 54px; gap: 4px 10px; padding: 8px 14px; }
  .tw-rank .r { display: none; }
  .tw-rank .b { grid-column: 2 / -1; grid-row: 2; height: 8px; }
  .tw-map .dot .lbl { display: none; }
  .tw-map .dot text { display: none; }           /* 5px tall at phone width; the ranked list below carries the numbers (WCAG 1.4.4) */
}

/* towns.html: rank + version on cards; no-JS sort (radio + label); one list visible at a time */
.tw-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 4px; }
.tw-rk { font: 600 12px/1.3 var(--font-ui); color: var(--ink); background: var(--sec-tint); padding: 1px 6px; border-radius: 3px; }
.tw-v { font: 500 11px/1.3 var(--font-mono); letter-spacing: .06em; color: var(--muted); }
.tw-sort-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.tw-sort-bar > span { font: 500 11px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.tw-sort-bar label { cursor: pointer; padding: 8px 14px; border-radius: var(--r-pill); border: 1.5px solid var(--sec-deep); background: var(--card); color: var(--sec-deep); font: 600 14px/1 var(--font-ui); }
.tw-sort-bar label:hover { background: var(--sec-tint); }
.tw-sort .tw-rank { display: none; }
.tw-sort .tw-l-desc { display: grid; }            /* default order (and the fallback where :has() is unsupported) */
.tw-sort:has(#s-asc:checked) .tw-l-asc, .tw-sort:has(#s-az:checked) .tw-l-az { display: grid; }
.tw-sort:has(#s-asc:checked) .tw-l-desc, .tw-sort:has(#s-az:checked) .tw-l-desc { display: none; }
/* the radios sit inside .tw-sort-bar (role="radiogroup", WCAG 1.3.1), before their labels */
#s-desc:checked ~ label[for="s-desc"], #s-asc:checked ~ label[for="s-asc"], [class*="elementor-widget-ncd-"]:has(> #s-asc:checked) ~ [class*="elementor-widget-ncd-"] label[for="s-asc"], #s-az:checked ~ label[for="s-az"] , [class*="elementor-widget-ncd-"]:has(> #s-az:checked) ~ [class*="elementor-widget-ncd-"] label[for="s-az"]{ background: var(--sec-deep); color: var(--sec-accent); }
#s-desc:focus-visible ~ label[for="s-desc"],
[class*="elementor-widget-ncd-"]:has(> #s-desc:focus-visible) ~ [class*="elementor-widget-ncd-"] label[for="s-desc"], #s-asc:focus-visible ~ label[for="s-asc"], [class*="elementor-widget-ncd-"]:has(> #s-asc:focus-visible) ~ [class*="elementor-widget-ncd-"] label[for="s-asc"], #s-az:focus-visible ~ label[for="s-az"] , [class*="elementor-widget-ncd-"]:has(> #s-az:focus-visible) ~ [class*="elementor-widget-ncd-"] label[for="s-az"]{ outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 6px rgba(17,18,20,.85); }
@media print { .tw-sort .tw-rank { display: grid; } }

/* town.html: compact score badge in the hero (links to #index at the bottom) */
.ix-badge { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; padding: 8px 16px 8px 8px; border-radius: 999px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(166,227,176,.35); color: var(--night-text); text-decoration: none; }
.ix-badge:hover { background: rgba(255,255,255,.12); border-color: var(--sec-accent); }
.ix-badge .ix-ring { width: 46px; height: 46px; }
.ix-badge .ix-ring .ix-track { stroke: rgba(255,255,255,.18); }
.ix-badge .ix-ring .ix-fill { stroke: #A6E3B0; }
.ix-badge b { font: 400 30px/1 var(--sec-display); color: #fff; }
.ix-badge span { display: flex; flex-direction: column; gap: 3px; font: 500 11px/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sec-mist); }
.ix-badge span em { font-style: normal; color: var(--sec-accent); text-transform: none; letter-spacing: .06em; }
/* the full Index card at the bottom of town.html: no overlap with the hero */
.ix-band--end { margin-top: 0; padding-top: var(--block-y); padding-bottom: 12px; }
.ix-band--end .ix-rank { display: inline-flex; gap: 10px; align-items: center; margin: 0 0 6px; }

/* Event "When and where" as a ticket-stub grid of tiles (user, 2026-10-11):
   an icon, a small label and the value in bold; facts not yet listed sit quieter. */
.sp-dl.sp-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; border: 0; }
.sp-fact {
  position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; align-items: start; align-content: start;
  padding: 14px 14px 14px 12px; background: var(--card); border: 1px solid var(--line);
  border-left: 4px solid var(--sec-sig); border-radius: var(--r-card); box-shadow: var(--shadow-1);
}
.sp-fact.is-wide { grid-column: 1 / -1; }
.sp-fact-i { grid-row: 1 / span 2; width: 40px; height: 40px; padding: 8px; border-radius: 10px; background: var(--sec-tint, #F1ECE4);
  fill: none; stroke: var(--sec-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sp-facts dt, .sp-facts dd { border: 0; padding: 0; }
.sp-facts dt { font: 500 11px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sp-facts dd { margin-top: 3px; font: 700 16.5px/1.35 var(--font-ui); color: var(--ink); }
.sp-facts .sample-note { display: block; margin-top: 3px; font: 500 11px/1.3 var(--font-mono); color: var(--muted); }
.sp-fact.is-unk { background: transparent; box-shadow: none; border-left-color: var(--line); }
.sp-facts .unk b { display: none; }
.sp-fact.is-unk dd { font-weight: 500; font-size: 15px; color: var(--muted); }
.sp-fact.is-unk .sp-fact-i { stroke: var(--muted); }
@media (max-width: 760px) {
  .sp-dl.sp-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .sp-fact { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .sp-fact-i { grid-row: auto; width: 34px; height: 34px; padding: 6px; margin-bottom: 8px; }
  .sp-facts dd { font-size: 15.5px; }
}

/* Share (user, 2026-10-11): phones open the native share sheet (JS, see the plugin's
   share.js); without it, a small menu of networks opens from the button. */
.share { position: relative; display: inline-block; }
.share[open] { flex-basis: 100%; }
.share > summary { list-style: none; cursor: pointer; }
.share > summary::-webkit-details-marker { display: none; }
.share-menu {
  margin-top: 8px; min-width: 210px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 6px;   /* in flow: the ticket clips overflow */
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: 0 14px 34px rgba(17,18,20,.22);
}
.share-menu a, .share-menu button {
  display: flex; align-items: center; min-height: 42px; padding: 0 12px; border: 0; background: none; border-radius: var(--r-ctl);
  color: var(--ink); font: 600 15px/1 var(--font-ui); text-decoration: none; cursor: pointer; text-align: left;
}
.share-menu a:hover, .share-menu button:hover { background: var(--sec-tint, #F1ECE4); }

/* Long forms fold away until asked for (user, 2026-10-11: listing correction form) */
.sp-fold > summary { list-style: none; cursor: pointer; display: inline-flex; }
.sp-fold > summary::-webkit-details-marker { display: none; }
.sp-fold > summary::after { content: "+"; margin-left: 10px; font-weight: 700; }
.sp-fold[open] > summary { margin-bottom: 16px; }
.sp-fold[open] > summary::after { content: "\2212"; }

/* Listing hero strip (user, 2026-10-11): the facts and genre chips sit in a band
   under the hero, in the section's colours, so the hero itself stays calm. */
.sp-lstrip { background: var(--sec-deep-2, var(--sec-deep)); border-top: 1px solid rgba(255,255,255,.1); color: var(--night-text); }
.sp-lstrip-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; padding-top: 18px; padding-bottom: 40px; }   /* bottom room: the status note overlaps by 22px */
.sp-lstrip .sp-lfacts { margin: 0; gap: 8px 28px; }
.sp-lstrip .sp-lfacts li { padding-left: 14px; border-left: 3px solid var(--sec-sig); }
.sp-lstrip .sp-ltags { margin: 0; }
.sp-lhero { padding-bottom: 34px; }

/* Good to know = grouped tiles: related fields stay together; not-yet-listed fields grey */
.sp-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sp-group { padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--sec-sig); border-radius: var(--r-card); box-shadow: var(--shadow-1); }
.sp-group h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font: 700 17px/1.2 var(--font-ui); color: var(--ink); }
.sp-group .sp-fact-i { width: 34px; height: 34px; padding: 6px; }
.sp-gdl { margin: 0; display: grid; }
.sp-gdl > div { padding: 8px 0; border-top: 1px solid var(--line); }
.sp-gdl dt { font: 500 11px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sp-gdl dd { margin: 2px 0 0; font: 700 15.5px/1.4 var(--font-ui); color: var(--ink); }
.sp-gdl > .is-unk dd { font-weight: 500; font-size: 14.5px; color: var(--muted); }
.sp-gdl .unk b { display: none; }
.sp-group--tags .sp-gdl > div { border-top: 0; padding: 0; }
.sp-group--tags dd { font-weight: 600; line-height: 1.8; }
@media (max-width: 760px) {
  .sp-groups { grid-template-columns: minmax(0, 1fr); }
  .sp-lstrip-in { gap: 12px; }
  .sp-lstrip .sp-ltags { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .sp-lstrip .sp-ltags li { flex: none; }
}

/* Listing hero art = the art form's CARD icon (#o-<section>, the same object the cards and the event
   ticket show), on the section's colours (user, 2026-10-12: same concept = same picture site-wide;
   it replaces the 2026-10-11 home-page door object, same place and size). All eight ship in the niche;
   the page's section class shows its own (rules after the ticket art below), so one Voxel single
   template serves every art form. It floats like the ticket's object, music spins like a record,
   and hover lifts it as the cards do. The door kit's sprite (.d-sprite) is still printed but unused. */
.d-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sp-lart--icon { max-width: 320px; }
.sp-lart-niche {   /* no frame: the object stands on the hero by itself (user, 2026-10-11) */
  display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1.04;
  filter: drop-shadow(0 22px 30px rgba(0,0,0,.45));
}
.sp-lart-niche > .sp-secobj {
  display: none; width: 92%; height: auto; aspect-ratio: 1;
  animation: sp-float 7s ease-in-out infinite; transition: transform .3s ease;
}
.sec-music .sp-lart-niche > .sp-secobj { width: 80%; animation: sp-spin 14s linear infinite; }
.sp-lart:hover .sp-lart-niche > .sp-secobj { transform: translateY(-4%); }
.motion-toggle:checked ~ * .sp-lart-niche > .sp-secobj { animation: none !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .sp-lart-niche > .sp-secobj { animation: none !important; transform: none !important; transition: none; }
}
@media (max-width: 900px) { .sp-lart--icon { max-width: 220px; } }

/* Live detail pages (wp: inc/singles.php): the on-site map is an OpenStreetMap embed */
.sp-streetmap--live { position: relative; padding: 0; overflow: hidden; }
.sp-streetmap--live iframe { display: block; width: 100%; aspect-ratio: 340 / 240; border: 0; }
.sp-streetmap--live .sp-mapph-tag { position: absolute; left: 8px; bottom: 8px; }

/* 404 "This record skipped" (user, 2026-10-11): the needle hops at the scratch */
.nf-hero { padding-bottom: clamp(40px, 6vw, 80px); }
.nf-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.nf-search { margin-top: 24px; max-width: 640px; }
.nf-more { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 18px; }
.nf-more .link-arrow { color: var(--sec-accent); }
.nf-art { position: relative; width: min(100%, 380px); aspect-ratio: 1; justify-self: center; }
.nf-rec, .nf-arm { position: absolute; inset: 0; width: 100%; height: 100%; }
.nf-rec { filter: drop-shadow(0 22px 34px rgba(0,0,0,.5)); animation: nf-spin 3.2s linear infinite; }
.nf-lbl { font: 800 9px var(--font-ui); letter-spacing: .16em; fill: #1A1406; }
.nf-lbl--big { font-size: 17px; letter-spacing: .06em; }
.nf-arm { transform-origin: 91% 11%; animation: nf-hop 3.2s ease-in-out infinite; }
@keyframes nf-spin { to { rotate: 360deg; } }
@keyframes nf-hop { 0%, 40%, 52%, 100% { transform: none; } 44% { transform: rotate(-6deg); } 48% { transform: rotate(2deg); } }
.nf-forms { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.nf-forms a {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px; text-decoration: none;
  background: var(--sec-deep); color: #fff; font: 600 16px/1.2 var(--font-ui); border-radius: var(--r-card);
  border-bottom: 4px solid var(--sec-sig); transition: transform .15s ease;
}
.nf-forms a:hover { transform: translateY(-3px); text-decoration: underline; text-underline-offset: .18em; }
.nf-forms .sw { width: 14px; height: 14px; border-radius: 3px; background: linear-gradient(135deg, var(--sec-deep-2, var(--sec-deep)) 0 50%, var(--sec-sig) 50%); box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.motion-toggle:checked ~ * .nf-rec, .motion-toggle:checked ~ * .nf-arm { animation: none; }
@media (prefers-reduced-motion: reduce) { .nf-rec, .nf-arm { animation: none; } }
@media (max-width: 900px) { .nf-grid { grid-template-columns: minmax(0, 1fr); } .nf-art { order: -1; width: 220px; } .nf-forms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .nf-forms { grid-template-columns: minmax(0, 1fr); } }

.sp-lactions a[href^="http"]::after { content: "\00a0\2197"; }
.sp-samplebar::before { content: "\26A0"; }   /* icon moved to CSS so the bar's text is one field */
.sp-samplebar:empty { display: none; }
.sp-cta-row a[href^="http"]::after { content: "\00a0\2197"; }
/* listing hero niche + event ticket: all eight objects ship; the page's section shows its own (Voxel single
   templates set the body's section class from the listing's primary art form) */
.sp-ticket-art > .sp-secobj { display: none; }
.sec-music .sp-secobj--music, .sec-theater .sp-secobj--theater, .sec-dance .sp-secobj--dance, .sec-visual .sp-secobj--visual,
.sec-craft .sp-secobj--craft, .sec-literary .sp-secobj--literary, .sec-film .sp-secobj--film, .sec-museums .sp-secobj--museums { display: block; }
.sp-lacts { display: contents; }   /* the hero links as one group (repeater), Share beside them */

/* Search map/list switch (user, 2026-10-11): "Map view" shows a large map instead of the cards */
.sp-viewtoggle { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.sp-viewtoggle .c, .sp-view-t:checked + label .o { display: none; }
.sp-view-t:checked + label .c { display: inline; }
.sp-view-t:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
.sp-main:has(.sp-view-t:checked) .sp-results, .sp-main:has(.sp-view-t:checked) .sp-pager, .sp-main:has(.sp-view-t:checked) .ncd-results-feed { display: none; }
.sp-main:has(.sp-view-t:checked) .sp-mapph, .sp-main:has(.sp-view-t:checked) .ncd-results-map { min-height: 70vh; }
.ix-bar i[style*="--max"] { width: calc(var(--v) * 100% / var(--max)); }   /* live town pages: bar width from the score */

/* Listing fine print (owner 2026-10-12): "How this listing gets checked" + "Suggest a correction" as two
   closed rows below "Make a day of it" (the town page's sp-leaders row; icons from tools/icons.py) */
.sp-fine-wrap { display: grid; gap: 12px; }
.sp-fine-h { font: 700 19px/1.25 var(--font-ui); color: var(--ink); margin: 0; }
.sp-fine-item > summary .ico.sp-fine-ico { background: var(--sec-tint, #EEF3EE); }
.sp-fine-ico svg { width: 34px; height: 34px; }
.sp-fine-ico .i-s { stroke: var(--sec-deep); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sp-fine-ico .i-s:not(.i-p):not(.i-a):not(.i-g) { fill: none; }
.sp-fine-ico .i-p { fill: #FFFDF7; }
.sp-fine-ico .i-a { fill: #C9A557; }
.sp-fine-ico .i-g { fill: var(--sec-sig); }
.sp-fine-item .sp-leaders-body { padding-top: 18px; }
.sp-fine-item .sp-steps { margin-top: 0; }
@media (max-width: 640px) { .sp-fine-h { font-size: 17px; } .sp-fine-item > summary .tog { padding: 8px 12px; } }