/* ============================================
   MURAL MAP — HERO
   ============================================ */
.ic-mhero {
  min-height: 520px;
  max-height: 600px;
  display: flex;
  align-items: center;
  padding: 60px 20px;
  color: #fff;
  background: #14123a url('/wp-content/uploads/2026/07/mural-map.jpg') center center / cover no-repeat;
  overflow: hidden;
}

.ic-mhero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(15,12,58,.94) 0%,
    rgba(15,12,58,.82) 34%,
    rgba(15,12,58,.42) 60%,
    rgba(15,12,58,0) 88%
  );
}

.ic-mhero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding-left: 60px;
}

/* ---------- "Follow the" ---------- */
.ic-mhero__script {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1;
  margin-bottom: 2px !important;
}

/* ---------- COLOUR ---------- */
.ic-mhero__big {
  font-family: 'Fredoka', sans-serif !important;
  font-weight: 700;
  font-size: clamp(3.4rem, 8vw, 6.2rem);
  line-height: .9;
  letter-spacing: -1px;
  margin-bottom: 14px !important;
}
.ic-mhero__big em { font-style: normal; }
.ic-mhero__big em:nth-of-type(1) { color: var(--ic-red); }
.ic-mhero__big em:nth-of-type(2) { color: var(--ic-orange); }
.ic-mhero__big em:nth-of-type(3) { color: var(--ic-yellow); }
.ic-mhero__big em:nth-of-type(4) { color: var(--ic-green); }
.ic-mhero__big em:nth-of-type(5) { color: var(--ic-teal); }
.ic-mhero__big em:nth-of-type(6) { color: var(--ic-purple); }

/* ---------- Sub heading ---------- */
.ic-mhero__sub {
  color: #fff !important;
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  letter-spacing: -.5px;
  margin-bottom: 18px !important;
}
.ic-mhero__sub b { font-weight: 800; text-transform: lowercase; }

/* ---------- Intro ---------- */
.ic-mhero__intro {
  font-size: 1rem;
  line-height: 1.7;
  max-width: 470px;
  margin-bottom: 34px !important;
}

/* ---------- Feature row ---------- */
.ic-mhero__feats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 165px));
  gap: 26px;
}
.ic-mhero__feats li { line-height: 1.35; }

.ic-mhero__feats svg {
  width: 26px;
  height: 26px;
  margin-bottom: 10px;
  display: block;
}
.ic-mhero__feats li:nth-child(1) svg { stroke: var(--ic-red); }
.ic-mhero__feats li:nth-child(2) svg { stroke: var(--ic-yellow); }
.ic-mhero__feats li:nth-child(3) svg { stroke: var(--ic-green); }
.ic-mhero__feats li:nth-child(4) svg { stroke: var(--ic-teal); }

.ic-mhero__feats strong {
  display: block;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: .88rem;
  letter-spacing: .8px;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.ic-mhero__feats span {
  display: block;
  font-size: .82rem;
  opacity: .85;
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .ic-mhero__inner { padding-left: 40px; }
  .ic-mhero__feats { grid-template-columns: repeat(4, minmax(0, 140px)); gap: 18px; }
}

@media (max-width: 900px) {
  .ic-mhero__overlay { background: rgba(15,12,58,.78); }
  .ic-mhero__feats { grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 460px; }
  .ic-mhero__intro { max-width: 100%; }
}

@media (max-width: 768px) {
  .ic-mhero {
    min-height: auto;
    max-height: none;
    padding: 60px 20px 50px;
    background-position: 62% center;
  }
  .ic-mhero__inner { padding-left: 0; }
}

@media (max-width: 480px) {
  .ic-mhero__feats { grid-template-columns: 1fr; gap: 16px; }
  .ic-mhero__feats svg { margin-bottom: 6px; }
}

/* ============================================
   MURAL MAP — SECTION + WIDGET
   ============================================ */

.ic-map {
  position: relative;
  background: #fff;
  padding: 118px 20px 90px;
  overflow: hidden;
}

.ic-map .ic-wrap {
  position: relative;
  z-index: 1;
  max-width: 1320px;
}

/* ---------- Paint decor ---------- */
.ic-map__splat-1 {
  --splat-w: 260px; --splat-h: 260px;
  --splat-r: -20deg; --splat-o: .9;
  top: 150px; left: -75px;
}
.ic-map__splat-2 {
  --splat-w: 280px; --splat-h: 280px;
  --splat-r: 28deg; --splat-o: .9;
  top: 120px; right: -85px;
}
.ic-map__splat-3 {
  --splat-w: 240px; --splat-h: 240px;
  --splat-r: -36deg; --splat-o: .85;
  bottom: 40px; left: -90px;
}
.ic-map__splat-4 {
  --splat-w: 220px; --splat-h: 220px;
  --splat-r: 14deg; --splat-o: .85;
  bottom: -40px; right: 4%;
}

.ic-map__title {
  text-transform: none;
  font-size: clamp(1.9rem, 3.8vw, 3rem) !important;
  margin-bottom: 12px !important;
}
.ic-map__title span,
.ic-map__title em { font-style: normal; }
.ic-map__title em:nth-of-type(1) { color: var(--ic-red); }
.ic-map__title em:nth-of-type(2) { color: var(--ic-teal); }
.ic-map__title em:nth-of-type(3) { color: var(--ic-yellow); }
.ic-map__title em:nth-of-type(4) { color: var(--ic-orange); }
.ic-map__title em:nth-of-type(5) { color: var(--ic-green); }
.ic-map__title em:nth-of-type(6) { color: var(--ic-purple); }

.ic-map__intro {
  text-align: center;
  color: #555;
  font-size: 1rem;
  line-height: 1.7;
  max-width: 620px;
  margin: 0 auto 44px !important;
}

/* ---------- Widget shell ---------- */
#mural-map-app {
  --mm-teal: #1b1b6b;        /* navy header */
  --mm-teal-dark: #1b1b6b;   /* border */
  --mm-yellow: #f5c518;
  --mm-red: #e8362d;
  --mm-cream: #f7f4ee;
  --mm-card: #ffffff;
  --mm-ink: #1b1b6b;
  --mm-ink-dim: #666;
  --mm-line: #e6e1d6;

  display: flex;
  height: 640px;
  max-height: 90vh;
  border-radius: 16px;
  overflow: hidden;
  border: 3px solid var(--mm-teal-dark);
  box-shadow: 0 14px 34px rgba(22,64,59,.18);
  font-family: 'Mulish', sans-serif;
  color: var(--mm-ink);
}

#mural-map-app * { box-sizing: border-box; }
#mural-map-app p { margin: 0; }

/* ---------- Sidebar ---------- */
.mm-sidebar {
  width: 340px;
  flex-shrink: 0;
  background: var(--mm-cream);
  display: flex;
  flex-direction: column;
  border-right: 2px solid var(--mm-line);
}

.mm-sidebar-header {
  padding: 20px 20px 16px;
  background: var(--mm-teal);
  color: #fff;
}

.mm-eyebrow {
  font-family: 'Fredoka', sans-serif !important;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mm-yellow);
  font-weight: 600;
  margin: 0 0 2px !important;
}

.mm-title {
  font-family: 'Fredoka', sans-serif !important;
  font-weight: 700;
  font-size: 26px !important;
  line-height: 1.05;
  margin: 0 0 14px !important;
  color: #fff !important;
  text-transform: none;
  letter-spacing: 0;
}

.mm-filters { display: flex; gap: 6px; flex-wrap: wrap; }

.mm-filter-btn {
  font-family: 'Mulish', sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.12);
  color: #fff;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.mm-filter-btn:hover { background: rgba(255,255,255,.25); }
.mm-filter-btn.active[data-filter="all"] { background: #fff; color: var(--mm-teal-dark); border-color: #fff; }
.mm-filter-btn.active[data-filter="temporary"] { background: var(--mm-red); color: #fff; border-color: var(--mm-red); }
.mm-filter-btn.active[data-filter="semi-permanent"] { background: var(--mm-yellow); color: var(--mm-teal-dark); border-color: var(--mm-yellow); }

.mm-list { overflow-y: auto; flex: 1; padding: 10px; }

.mm-group-label {
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--mm-ink-dim);
  padding: 12px 8px 6px;
}

.mm-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px;
  border-radius: 12px;
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
  border: 1.5px solid transparent;
  background: var(--mm-card);
  margin-bottom: 7px;
  box-shadow: 0 1px 2px rgba(22,64,59,.05);
}
.mm-item:hover { box-shadow: 0 3px 8px rgba(22,64,59,.12); }
.mm-item.active { border-color: var(--mm-teal); background: #F3FBFA; }

.mm-badge {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  border: 2px solid #16130F;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
}
.mm-badge.temporary { background: var(--mm-red); }
.mm-badge.semi-permanent { background: var(--mm-yellow); color: #16130F; }

.mm-item-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 2px !important;
  color: var(--mm-ink);
}
.mm-item-addr {
  font-size: 12px;
  color: var(--mm-ink-dim);
  line-height: 1.3;
}
.mm-item-artist {
  font-size: 12px;
  font-weight: 600;
  color: var(--ic-teal);
  margin-top: 3px !important;
}

/* ---------- Map pane ---------- */
.mm-map-wrap { flex: 1; position: relative; }
#mm-map { width: 100%; height: 100%; background: var(--mm-teal); }
#mm-map .leaflet-tile { filter: saturate(1.12); }

.mm-pin { display: block; }

.mm-popup .leaflet-popup-content-wrapper {
  background: var(--mm-card);
  color: var(--mm-ink);
  border-radius: 12px;
  border: 2px solid var(--mm-teal-dark);
  box-shadow: 0 6px 18px rgba(22,64,59,.25);
}
.mm-popup .leaflet-popup-tip { background: var(--mm-card); border: 2px solid var(--mm-teal-dark); }
.mm-popup .leaflet-popup-content { margin: 14px 16px; min-width: 200px; }
.mm-popup a.leaflet-popup-close-button { color: var(--mm-ink-dim) !important; }

.mm-popup-tag {
  display: inline-block;
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  margin-bottom: 8px;
  color: #fff;
  font-weight: 600;
}
.mm-popup-tag.temporary { background: var(--mm-red); }
.mm-popup-tag.semi-permanent { background: var(--mm-yellow); color: var(--mm-teal-dark); }

.mm-popup-name {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 4px !important;
}
.mm-popup-addr {
  font-size: 12.5px;
  color: var(--mm-ink-dim);
  margin: 0 0 12px !important;
  line-height: 1.4;
}
.mm-popup-actions { display: flex; gap: 8px; }

.mm-btn {
  font-family: 'Mulish', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 9px;
  text-align: center;
  flex: 1;
  transition: opacity .15s;
}
.mm-btn:hover { opacity: .88; }
.mm-btn-primary { background: var(--mm-teal); color: #fff; }
.mm-btn-secondary { background: transparent; color: var(--mm-ink); border: 1.5px solid var(--mm-line); }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .ic-map { padding-top: 96px; }
  .ic-map__splat-1 { --splat-w: 180px; --splat-h: 180px; left: -80px; }
  .ic-map__splat-2 { --splat-w: 190px; --splat-h: 190px; right: -90px; }
  .ic-map__splat-3 { --splat-w: 160px; --splat-h: 160px; left: -85px; }
  .ic-map__splat-4 { --splat-w: 150px; --splat-h: 150px; bottom: -30px; }
}

@media (max-width: 860px) {
  .ic-map { padding: 88px 20px 60px; }
}

@media (max-width: 520px) {
  .ic-map { padding-top: 70px; }
  .ic-map__splat-1 { --splat-w: 130px; --splat-h: 130px; --splat-o: .7; top: 110px; left: -72px; }
  .ic-map__splat-2 { --splat-w: 130px; --splat-h: 130px; --splat-o: .7; top: 96px; right: -75px; }
  .ic-map__splat-3 { --splat-w: 120px; --splat-h: 120px; --splat-o: .7; left: -68px; }
  .ic-map__splat-4 { display: none; }
}

@media (max-width: 720px) {
  #mural-map-app {
    flex-direction: column;
    height: 85vh;
    max-height: none;
  }
  .mm-sidebar { width: 100%; height: 42%; border-right: none; border-bottom: 2px solid var(--mm-line); }
  .mm-map-wrap { height: 58%; }
}

@media (prefers-reduced-motion: reduce) {
  .mm-filter-btn, .mm-item, .mm-btn { transition: none; }
}

.mm-item:focus-visible,
.mm-filter-btn:focus-visible,
.mm-btn:focus-visible {
  outline: 2px solid var(--mm-teal-dark);
  outline-offset: 2px;
}

/* keep the map below the site header */
#mural-map-app {
  position: relative;
  z-index: 1;
}

#mural-map-app .leaflet-pane,
#mural-map-app .leaflet-top,
#mural-map-app .leaflet-bottom {
  z-index: 1;
}

#mural-map-app .leaflet-popup-pane { z-index: 2; }

/* ============================================
   SUPPORT LOCAL BANNER
   ============================================ */
.ic-support {
  background: linear-gradient(100deg, #060832 0%, #080061 45%, #0b0732 100%);
  padding: 38px 20px;
  color: #fff;
  overflow: hidden;
}

.ic-support__inner {
  display: flex;
  align-items: center;
  gap: 26px;
  max-width: 1240px;
}

/* ---------- Heart ---------- */
.ic-support__icon {
  flex: 0 0 auto;
  color: var(--ic-yellow);
}
.ic-support__icon svg {
  width: 46px;
  height: 46px;
  display: block;
}

/* ---------- Text ---------- */
.ic-support__text { flex: 1; }

.ic-support__text h2 {
  font-family: 'Caveat', cursive !important;
  font-weight: 700;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem) !important;
  color: #fff !important;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.1;
  margin-bottom: 4px !important;
}

.ic-support__text p {
  font-size: .98rem;
  line-height: 1.5;
  opacity: .9;
}

/* ---------- CTA ---------- */
.ic-support__cta { flex: 0 0 auto; }
.ic-support__cta .ic-btn {
  white-space: nowrap;
  font-size: .85rem;
  letter-spacing: .5px;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .ic-support__inner {
    flex-wrap: wrap;
    gap: 18px;
    text-align: center;
    justify-content: center;
  }
  .ic-support__icon { flex: 1 0 100%; display: flex; justify-content: center; }
  .ic-support__text { flex: 1 0 100%; }
  .ic-support__cta { flex: 1 0 100%; }
}

@media (max-width: 480px) {
  .ic-support { padding: 32px 20px; }
  .ic-support__cta .ic-btn { width: 100%; text-align: center; }
  .ic-support__text p { font-size: .9rem; }
}

/* ============================================
   ARTISTS ON THE MAP — carousel
   Splide core CSS is already loaded for the
   homepage gallery, so this is skin-only.
   ============================================ */
.ic-artmap {
  position: relative;
  background: var(--ic-cream);
  padding: 96px 20px 90px;
  overflow: hidden;
}

.ic-artmap .ic-wrap {
  position: relative;
  z-index: 1;
  max-width: 1320px;
}

/* ---------- Paint decor ---------- */
.ic-artmap__splat-1 {
  --splat-w: 240px; --splat-h: 240px;
  --splat-r: 18deg; --splat-o: .8;
  top: 60px; right: -80px;
}
.ic-artmap__splat-2 {
  --splat-w: 220px; --splat-h: 220px;
  --splat-r: -26deg; --splat-o: .75;
  bottom: -50px; left: -80px;
}

/* ---------- Title ----------
   Fredoka display font + painted purple underline.
   Key word "Artists" uses the brand accent
   colours, letter by letter. */
.ic-artmap__title {
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Fredoka', sans-serif !important;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ic-navy) !important;
  font-size: clamp(2rem, 4.4vw, 3.2rem) !important;
  line-height: 1.05;
  padding-bottom: 16px;
  margin-bottom: 42px !important;
}
.ic-artmap__title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%) rotate(-1deg);
  width: 72%;
  height: 6px;
  border-radius: 6px;
  background: var(--ic-purple);
}

/* ---------- Accent-coloured heading letters ---------- */
.ic-artmap__title em { font-style: normal; }
.ic-artmap__title em:nth-of-type(1) { color: var(--ic-red); }
.ic-artmap__title em:nth-of-type(2) { color: var(--ic-orange); }
.ic-artmap__title em:nth-of-type(3) { color: var(--ic-yellow); }
.ic-artmap__title em:nth-of-type(4) { color: var(--ic-green); }
.ic-artmap__title em:nth-of-type(5) { color: var(--ic-teal); }
.ic-artmap__title em:nth-of-type(6) { color: var(--ic-purple); }
.ic-artmap__title em:nth-of-type(7) { color: var(--ic-red); }

/* ---------- Carousel ---------- */
.ic-artmap__carousel { margin-bottom: 40px; }

.ic-artmap__card {
  height: 100%;                 /* fill the slide so every card lines up */
  border-radius: var(--ic-radius);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  transition: transform .3s ease, box-shadow .3s ease;
}
.ic-artmap__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 34px rgba(0,0,0,.15);
}
.ic-artmap__card img {
  display: block;
  width: 100%;
  height: auto;                 /* natural ratio — no crop, no zoom, no white bands */
}

/* ---------- Splide arrows ---------- */
.ic-artmap .splide__arrow {
  width: 42px;
  height: 42px;
  background: var(--ic-navy);
  opacity: 1;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  transition: background .2s, transform .2s;
}
.ic-artmap .splide__arrow:hover { background: var(--ic-teal); transform: scale(1.06); }
.ic-artmap .splide__arrow:disabled { opacity: .4; }
.ic-artmap .splide__arrow svg { fill: #fff; width: 15px; height: 15px; }
.ic-artmap .splide__arrow--prev { left: -8px; }
.ic-artmap .splide__arrow--next { right: -8px; }

/* ---------- Splide pagination ---------- */
.ic-artmap .splide__pagination { bottom: -30px; gap: 4px; }
.ic-artmap .splide__pagination__page {
  background: #cfc9bd;
  opacity: 1;
  margin: 3px;
  transition: transform .2s, background .2s;
}
.ic-artmap .splide__pagination__page.is-active {
  background: var(--ic-teal);
  transform: scale(1.5);
}

/* ---------- CTA ---------- */
.ic-artmap__cta {
  text-align: center;
  margin-top: 34px;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .ic-artmap { padding: 76px 20px 72px; }
  .ic-artmap__splat-1 { --splat-w: 160px; --splat-h: 160px; right: -70px; }
  .ic-artmap__splat-2 { --splat-w: 150px; --splat-h: 150px; left: -70px; }
}
@media (max-width: 520px) {
  .ic-artmap__title::after { width: 84%; height: 5px; }
  .ic-artmap__cta .ic-btn { width: 100%; }
  .ic-artmap .splide__arrow--prev { left: 0; }
  .ic-artmap .splide__arrow--next { right: 0; }
}

/* ============================================
   LOCATIONS & ARTISTS — key table  (v2)

   Replaces the old ".ic-artkey" block entirely —
   the two versions were previously stacked, so the
   old medallion gradient and 460px min-width were
   still fighting this one.

   • Every map number has its own colour, carried
     through the pin, the left ribbon and the row
     hover from a single --pin-rgb token per group.
   • Rows are ~40% shorter (13px → 7px padding)
     and repeated numbers / addresses are merged
     with rowspan rather than restated per line.
   • The pin is real markup (a <span>), not a
     radial-gradient, so it stays a crisp circle at
     any row height.
   Tokens unchanged: navy / cream, Fredoka + Mulish.
   ============================================ */
.ic-artkey {
  position: relative;
  background: #fff;                 /* matches the .ic-map section it sits with */
  padding: 92px 20px 96px;
  overflow: hidden;

  /* Full-bleed breakout — escapes the theme's narrow content
     container so this section spans the page like .ic-map does.
     Harmless if the section is already full width. */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.ic-artkey .ic-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1320px;                /* was 1080px — now lines up with .ic-map */
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Paint decor ----------
   Uses the global .ic-splat component, same as
   .ic-map__splat-* / .ic-artmap__splat-*. Markup:
   <div class="ic-splat ic-splat--teal ic-artkey__splat-1" aria-hidden="true"></div>
   Pushed further off-canvas than on .ic-map so the
   paint frames the table rather than sitting under it. */
.ic-artkey__splat-1 { --splat-w: 260px; --splat-h: 260px; --splat-r: -18deg; --splat-o: .9;  top: 64px;     left:  -104px; }
.ic-artkey__splat-2 { --splat-w: 280px; --splat-h: 280px; --splat-r:  24deg; --splat-o: .9;  top: 132px;    right: -116px; }
.ic-artkey__splat-3 { --splat-w: 240px; --splat-h: 240px; --splat-r: -30deg; --splat-o: .85; bottom: -56px; left:  -96px; }
.ic-artkey__splat-4 { --splat-w: 250px; --splat-h: 250px; --splat-r:  16deg; --splat-o: .85; bottom: 34px;  right: -108px; }

/* ---------- Title (with painted underline) ---------- */
.ic-artkey__title {
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
  text-transform: none;
  font-size: clamp(1.9rem, 3.8vw, 3rem) !important;
  padding-bottom: 14px;
  margin-bottom: 14px !important;
}
.ic-artkey__title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) rotate(-1deg);
  width: 62%;
  height: 6px;
  border-radius: 6px;
  background: var(--ic-purple);
}
.ic-artkey__title em { font-style: normal; }
.ic-artkey__title em:nth-of-type(1) { color: var(--ic-red); }
.ic-artkey__title em:nth-of-type(2) { color: var(--ic-orange); }
.ic-artkey__title em:nth-of-type(3) { color: var(--ic-yellow); }
.ic-artkey__title em:nth-of-type(4) { color: var(--ic-green); }
.ic-artkey__title em:nth-of-type(5) { color: var(--ic-teal); }
.ic-artkey__title em:nth-of-type(6) { color: var(--ic-purple); }
.ic-artkey__title em:nth-of-type(7) { color: var(--ic-red); }

.ic-artkey__intro {
  text-align: center;
  color: #555;
  font-size: 1rem;
  line-height: 1.7;
  max-width: 620px;
  margin: 0 auto 26px !important;
}

/* ---------- Stats strip ---------- */
.ic-artkey__stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}
.ic-artkey__stats li {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 7px 15px;
  border-radius: 999px;
  background: var(--ic-cream);
  border: 1.5px solid #e6dfd0;
}
.ic-artkey__stats b {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--ic-navy);
}
.ic-artkey__stats span {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #6f6a60;
}

/* ---------- Table shell ---------- */
.ic-artkey__wrap {
  width: 100%;
  max-width: 940px;                 /* table sits narrower than the map above it */
  margin: 0 auto;
  box-sizing: border-box;
  overflow-x: auto;
  border-radius: 18px;
  border: 3px solid var(--ic-navy);
  box-shadow: 0 16px 36px rgba(20, 18, 58, .14);
  background: #fff;
  -webkit-overflow-scrolling: touch;
}

.ic-artkey__table {
  width: 100%;
  min-width: 620px;
  table-layout: auto;
  border-collapse: collapse;
  background: #fff;
  font-family: 'Mulish', sans-serif;
}

.ic-artkey__table thead th {
  background: var(--ic-navy);
  color: #fff;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: left;
  padding: 13px 18px;
  white-space: nowrap;
}
.ic-artkey__table thead th:first-child { text-align: center; width: 78px; }
.ic-artkey__table thead th:nth-child(2) { width: 40%; }   /* Artist location */
.ic-artkey__table thead th:nth-child(3) { width: 92px; }  /* Ref */
.ic-artkey__table thead th:nth-child(4) { width: 34%; }   /* Artist — was the full remainder */

.ic-artkey__table td {
  padding: 7px 18px;               /* was 13px 20px — this is the height reduction */
  border-top: 1px solid #efe9dd;
  font-size: .9rem;
  line-height: 1.35;
  color: #2c2c2c;
  vertical-align: middle;
}

/* ---------- Per-location colour ----------
   One token per group drives the pin, the ribbon
   and the hover tint. Add .is-cN to every <tr>
   belonging to map number N. */
.ic-artkey__table tbody tr { --pin-rgb: 27, 27, 107; --pin-ink: #fff; }
.ic-artkey__table tbody tr.is-c1  { --pin-rgb: 232,  54,  45; }   /* red        */
.ic-artkey__table tbody tr.is-c2  { --pin-rgb: 242, 118,  43; }   /* orange     */
.ic-artkey__table tbody tr.is-c3  { --pin-rgb: 245, 184,  26; --pin-ink: #1b1b6b; } /* amber */
.ic-artkey__table tbody tr.is-c4  { --pin-rgb: 169, 197,  32; --pin-ink: #1b1b6b; } /* lime  */
.ic-artkey__table tbody tr.is-c5  { --pin-rgb:  76, 175,  80; }   /* green      */
.ic-artkey__table tbody tr.is-c6  { --pin-rgb:  22, 163, 115; }   /* emerald    */
.ic-artkey__table tbody tr.is-c7  { --pin-rgb:  23, 162, 184; }   /* teal       */
.ic-artkey__table tbody tr.is-c8  { --pin-rgb:  43, 143, 227; }   /* sky        */
.ic-artkey__table tbody tr.is-c9  { --pin-rgb:  63,  87, 214; }   /* blue       */
.ic-artkey__table tbody tr.is-c10 { --pin-rgb: 123,  79, 208; }   /* violet     */
.ic-artkey__table tbody tr.is-c11 { --pin-rgb: 177,  63, 192; }   /* magenta    */
.ic-artkey__table tbody tr.is-c12 { --pin-rgb: 224,  65, 127; }   /* pink       */

/* heavier rule where a new map-number block begins */
.ic-artkey__table tbody tr.is-group-start > td {
  border-top: 2px solid rgba(27, 27, 107, .22);
}
.ic-artkey__table tbody tr:first-child > td { border-top: 0; }

/* row hover, tinted with that location's own colour */
.ic-artkey__table tbody tr:hover td {
  background: rgba(var(--pin-rgb), .06);
}

/* ---------- Number gutter + pin ---------- */
.ic-artkey__num {
  width: 78px;
  text-align: center;
  vertical-align: middle;
  padding: 8px 6px !important;
  background: rgba(var(--pin-rgb), .08);
  border-left: 5px solid rgb(var(--pin-rgb));
  border-top-color: rgba(var(--pin-rgb), .28) !important;
}
.ic-artkey__table tbody tr:hover .ic-artkey__num {
  background: rgba(var(--pin-rgb), .14);
}

.ic-artkey__pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgb(var(--pin-rgb));
  color: var(--pin-ink);
  border: 2.5px solid var(--ic-navy);
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  box-shadow: 0 3px 8px rgba(20, 18, 58, .22);
}

/* ---------- Location ---------- */
.ic-artkey__where {
  font-weight: 700;
  color: var(--ic-navy);
}
/* the "(front)" / "(side 2, short)" detail — tinted with the
   location's own colour so it reads as a sub-label, not body text */
.ic-artkey__spot {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ic-navy);
  background: rgba(var(--pin-rgb), .15);
  white-space: nowrap;
}

/* ---------- Ref chip ---------- */
.ic-artkey__key {
  display: inline-block;
  font-family: 'Fredoka', sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 6px;
  white-space: nowrap;
  background: var(--ic-cream);
  color: var(--ic-navy);
  border: 1.5px solid #e3dccd;
}

/* ---------- Artist ---------- */
.ic-artkey__artist {
  font-weight: 600;
  color: var(--ic-navy);
}
.ic-artkey__artist small {
  display: block;
  font-size: .74rem;
  font-weight: 500;
  color: #8a8479;
}
.ic-artkey__artist.is-tbc {
  color: #9a948a;
  font-weight: 500;
  font-style: italic;
}

.ic-artkey__note {
  margin: 16px auto 0 !important;
  text-align: center;
  font-size: .82rem;
  color: #7a7469;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .ic-artkey__splat-1 { --splat-w: 180px; --splat-h: 180px; left:  -84px; }
  .ic-artkey__splat-2 { --splat-w: 190px; --splat-h: 190px; right: -92px; }
  .ic-artkey__splat-3 { --splat-w: 165px; --splat-h: 165px; left:  -78px; }
  .ic-artkey__splat-4 { --splat-w: 165px; --splat-h: 165px; right: -84px; }
}
@media (max-width: 768px) {
  .ic-artkey { padding: 74px 20px 78px; }
}
@media (max-width: 520px) {
  .ic-artkey { padding: 60px 16px 68px; }
  .ic-artkey__splat-4 { display: none; }
  .ic-artkey__splat-1 { --splat-w: 140px; --splat-h: 140px; --splat-o: .7; left: -72px; }
  .ic-artkey__splat-2 { --splat-w: 145px; --splat-h: 145px; --splat-o: .7; right: -78px; }
  .ic-artkey__splat-3 { --splat-w: 130px; --splat-h: 130px; --splat-o: .7; left: -68px; }
  .ic-artkey__table { min-width: 540px; }
  .ic-artkey__table thead th { padding: 11px 14px; }
  .ic-artkey__table td { padding: 6px 14px; font-size: .86rem; }
  .ic-artkey__num { width: 62px; padding: 7px 4px !important; }
  .ic-artkey__pin { width: 32px; height: 32px; font-size: .9rem; border-width: 2px; }
  .ic-artkey__spot { display: inline-block; margin: 3px 0 0; }
}