/* ==========================================================================
   MUSIC: "Where North Carolina plays"  (round 3, reference section)
   Object world: the 45 on the platter, the theatre marquee, the letterboard,
   record sleeves in a crate, the screen-printed gig poster, the setlist,
   the tour poster, the FM dial, the VU meter, the ticket stub.
   Palette from round-1 Direction B (flag-derived; not official state colors).
   Loads after shell.css. Only adds the object world; never restyles
   shared components (cards, .ev, chips, header, footer).
   ========================================================================== */

.sec-music {
  --m-ink: #0B1730;      /* night navy */
  --m-navy: #13284B;     /* statehouse navy */
  --m-red: #B42232;      /* Old North red */
  --m-red-deep: #8E1A26; /* pressed red */
  --m-brass: #D9A441;
  --m-bulb: #F2C14E;     /* marquee bulb */
  --m-cream: #F4EBDA;    /* sleeve cream */
  --m-paper: #FBF7EF;
  --m-slate: #4A5671;
  --m-mist: #C9D0DD;
  --f-poster: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --f-flourish: "DM Serif Display", Georgia, serif;
  /* print textures */
  --m-halftone: radial-gradient(circle, rgba(244,235,218,.07) 1.2px, transparent 1.6px) 0 0 / 7px 7px;
  --m-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- heading flourish: B's serif italic "the / on / to" --------------------- */
.sec-music .block-title em,
.sec-music .hero-title em {
  font-family: var(--f-flourish); font-style: italic; font-weight: 400;
  text-transform: lowercase; color: var(--m-red); letter-spacing: 0;
  font-size: .82em; padding: 0 .08em;
}
.sec-music .block--deep .block-title em,
.sec-music .list-cta .block-title em { color: var(--m-bulb); }
.sec-music .block-title { letter-spacing: .005em; }

/* ==========================================================================
   [1] HERO
   ========================================================================== */
.m-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(ellipse 60% 70% at 78% 8%, rgba(242,193,78,.14), transparent 60%),
    radial-gradient(ellipse 55% 60% at 8% 100%, rgba(180,34,50,.32), transparent 62%),
    var(--m-ink);
  color: var(--m-cream);
  padding: clamp(36px, 5vw, 64px) 0 clamp(44px, 5vw, 68px);
}
.m-hero::before {                        /* halftone + grain over the whole hero */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--m-grain), var(--m-halftone);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, #000);
  mask-image: linear-gradient(180deg, transparent, #000 40%, #000);
}
/* two stage beams that sway slowly */
.m-hero-light { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.m-hero-light i {
  position: absolute; top: -10%; width: 34%; height: 130%;
  background: linear-gradient(180deg, rgba(242,193,78,.16), rgba(242,193,78,0) 75%);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  transform-origin: 50% 0; animation: m-sway 11s ease-in-out infinite alternate;
}
.m-hero-light i:nth-child(1) { left: 48%; transform: rotate(14deg); }
.m-hero-light i:nth-child(2) { left: 70%; transform: rotate(-12deg); animation-delay: -5s;
  background: linear-gradient(180deg, rgba(201,208,221,.12), transparent 70%); }
@keyframes m-sway { from { rotate: -4deg; } to { rotate: 5deg; } }

.m-hero-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 56px); align-items: center;
}
.m-hero .eyebrow { color: var(--m-bulb); }

/* marquee frame with chasing bulbs (pure CSS, stepped) */
.marquee {
  position: relative; display: inline-block; max-width: 100%;
  padding: 26px 34px 26px; margin: 8px 0 22px;
  background: linear-gradient(180deg, rgba(19,40,75,.9), rgba(11,23,48,.92));
  box-shadow: inset 0 0 0 2px rgba(217,164,65,.65), inset 0 0 0 9px rgba(11,23,48,.9), inset 0 0 0 10px rgba(217,164,65,.25), 0 24px 60px rgba(0,0,0,.45);
}
.marquee .bulbs { position: absolute; pointer-events: none; }
.marquee .bulbs.h { left: 8px; right: 8px; height: 14px;
  background: radial-gradient(circle, rgba(242,193,78,.95) 3px, rgba(242,193,78,0) 5px) 0 50% / 20px 14px repeat-x; }
.marquee .bulbs.v { top: 8px; bottom: 8px; width: 14px;
  background: radial-gradient(circle, rgba(242,193,78,.95) 3px, rgba(242,193,78,0) 5px) 50% 0 / 14px 20px repeat-y; }
.marquee .bulbs.top { top: -7px; } .marquee .bulbs.bot { bottom: -7px; }
.marquee .bulbs.lft { left: -7px; } .marquee .bulbs.rgt { right: -7px; }
.marquee .bulbs::after {                 /* lit layer: every third bulb flares, stepping round the frame */
  content: ""; position: absolute; inset: 0;
  filter: drop-shadow(0 0 3px #FFE7A6) drop-shadow(0 0 9px rgba(242,193,78,.85));
}
.marquee .bulbs.h::after { background: radial-gradient(circle, #FFF6DA 3.4px, transparent 4.4px) 0 50% / 60px 14px repeat-x; animation: m-chase-x 1.1s steps(3) infinite; }
.marquee .bulbs.v::after { background: radial-gradient(circle, #FFF6DA 3.4px, transparent 4.4px) 50% 0 / 14px 60px repeat-y; animation: m-chase-y 1.1s steps(3) infinite; }
.marquee .bulbs.bot::after, .marquee .bulbs.lft::after { animation-direction: reverse; }
@keyframes m-chase-x { to { background-position: 60px 50%; } }
@keyframes m-chase-y { to { background-position: 50% 60px; } }

.marquee-now {
  display: block; margin-bottom: 10px;
  font: 500 11.5px/1 var(--font-mono); letter-spacing: .3em; text-transform: uppercase; color: var(--m-bulb);
}
.m-hero .hero-title {
  font: 900 var(--hero-size)/.9 var(--f-poster); text-transform: uppercase; letter-spacing: .005em;
  color: var(--m-cream); margin: 0;
}
.m-hero .hero-title span { display: block; }
.m-hero .hero-title .l2 { color: var(--m-bulb); text-shadow: 4px 4px 0 var(--m-red-deep); }
.m-hero-sub { max-width: 34em; font-size: clamp(16.5px, 1.4vw, 19px); line-height: 1.55; color: var(--m-mist); margin-bottom: 22px; }
.m-hero .search { box-shadow: 0 0 0 1px rgba(0,0,0,.2), 8px 8px 0 var(--m-red-deep), 0 18px 40px rgba(0,0,0,.4); }
.m-hero .search-go { font-family: var(--f-poster); font-weight: 800; font-size: 19px; letter-spacing: .06em; text-transform: uppercase; }
.m-hero .search-alt a { color: var(--m-cream); }

/* the deck: platter, 45, tonearm */
.m-deck { position: relative; width: min(100%, 470px); justify-self: end; aspect-ratio: 1; }
.m-platter {
  position: absolute; inset: 4% 9% 14% 0; border-radius: 50%;
  background: radial-gradient(circle, #2A3656 0 69%, #1A2440 69.5% 71%, #0d1427 71.5%);
  box-shadow: 0 30px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(201,208,221,.12);
}
.m-disc {
  position: absolute; inset: 3%; border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 31%, rgba(255,255,255,.05) 31.4% 31.8%, transparent 32.2%),
    repeating-radial-gradient(circle, #080d1b 0 1.6px, #141d34 2px 2.8px),
    #0a0f1d;
  box-shadow: inset 0 0 0 2px #05080f, inset 0 0 26px rgba(0,0,0,.8);
}
.m-label {
  position: absolute; inset: 30%; border-radius: 50%;
  animation: m-spin 4.5s linear infinite;          /* a calm spin: one turn per 4.5 s */
}
.m-label svg { width: 100%; height: 100%; }
@keyframes m-spin { to { transform: rotate(360deg); } }
.m-sheen {                                /* static light on the grooves: sells the vinyl */
  position: absolute; inset: 3%; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 20deg, transparent 0 8%, rgba(201,208,221,.16) 12%, transparent 18% 50%, rgba(201,208,221,.12) 62%, transparent 68%);
  -webkit-mask-image: radial-gradient(circle, transparent 30%, #000 31%);
  mask-image: radial-gradient(circle, transparent 30%, #000 31%);
}
.m-tonearm {
  position: absolute; right: 2%; top: -2%; width: 31%; height: auto;
  transform-origin: 67% 14%;                         /* the pivot */
  rotate: 15deg;                                     /* resting pose: stylus mid-groove, halfway to the label */
  filter: drop-shadow(6px 10px 8px rgba(0,0,0,.5));
  animation: m-track 4.5s ease-in-out infinite;      /* starts ON the record: every frame is a finished still */
}
/* the arm rides the record: a half-degree drift per turn, like a real slightly-warped 45 */
@keyframes m-track { 0%, 100% { rotate: 15deg; } 50% { rotate: 15.5deg; } }
.m-deck-tag {
  position: absolute; left: 4%; bottom: 2%;
  font: 500 11px/1 var(--font-mono); letter-spacing: .26em; text-transform: uppercase; color: var(--m-mist);
}
.m-deck-tag::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--m-red); margin-right: 8px; box-shadow: 0 0 8px var(--m-red); }

/* ==========================================================================
   [ ] LETTERBOARD TICKER
   ========================================================================== */
.m-board {
  position: relative; display: flex; align-items: stretch; overflow: hidden;
  background: var(--m-cream); border-block: 3px solid var(--m-ink);
  box-shadow: inset 0 6px 14px rgba(11,23,48,.12);
}
.m-board-tag {
  flex: none; display: flex; align-items: center; gap: 10px; z-index: 1;
  background: var(--m-red); color: #fff; padding: 0 20px;
  font: 800 16px/1 var(--f-poster); letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 8px 0 0 var(--m-cream);
}
.m-board-tag::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--m-bulb); box-shadow: 0 0 8px var(--m-bulb); animation: m-blink 1.4s steps(2) infinite; }
@keyframes m-blink { 50% { opacity: .25; } }
.m-board-window { flex: 1; min-width: 0; overflow: hidden; display: flex; }
.m-board-track {
  flex: none; display: flex; list-style: none; padding: 0; margin: 0;
  animation: m-scroll 70s linear infinite;
  /* backlit ribs of the letter board */
  background: repeating-linear-gradient(180deg, transparent 0 11px, rgba(11,23,48,.07) 11px 12px);
}
.m-board-track li { display: flex; align-items: baseline; gap: 10px; padding: 15px 22px 13px; white-space: nowrap; }
.m-board-track li::after { content: "\2605"; color: var(--m-red); font-size: 13px; margin-left: 22px; }
.m-board-track a { font: 800 22px/1 var(--f-poster); text-transform: uppercase; letter-spacing: .05em; color: var(--m-ink); text-decoration: none; }
.m-board-track a:hover { color: var(--m-red); }
.m-board-track span { font: 500 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--m-slate); }
@keyframes m-scroll { to { transform: translateX(-100%); } }

/* ==========================================================================
   [2] CRATE OF SLEEVES (subcategories)
   ========================================================================== */
.m-crate { background: var(--m-paper); }
.m-crate::after {                         /* the crate's front lip under the grid */
  content: ""; display: block; height: 0;
}
.sleeves {
  list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 48px clamp(16px, 2vw, 26px); padding-top: 34px;
}
.sleeve { position: relative; display: block; text-decoration: none; color: var(--ink); }
.sleeve-cover {
  position: relative; z-index: 1; display: block; aspect-ratio: 1; overflow: hidden;
  border: 2px solid var(--m-ink);
  box-shadow: 6px 6px 0 var(--m-ink);
  transition: transform .25s ease, box-shadow .25s ease;
}
.sleeve-cover svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sleeve-cover::after {                     /* ring wear + grain: an old sleeve */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, transparent 0 38%, rgba(255,255,255,.07) 39% 40%, transparent 41%), var(--m-grain);
  mix-blend-mode: multiply;
}
.sleeve-cat {
  position: absolute; left: 10px; top: 9px; z-index: 1;
  font: 500 10px/1 var(--font-mono); letter-spacing: .14em; color: var(--cv-cat, var(--cv-fg)); background: var(--cv-catbg, transparent); padding: 3px 4px; margin: -3px -4px;
}
.sleeve-title {
  position: absolute; left: 12px; right: 10px; bottom: 11px; z-index: 1;
  font: 900 clamp(19px, 1.75vw, 25px)/.92 var(--f-poster); text-transform: uppercase; letter-spacing: .01em;
  color: var(--cv-fg); text-wrap: balance; max-width: var(--title-max, none);
}
.sleeve-disc {                              /* the record, pulled half out of the sleeve */
  position: absolute; z-index: 0; left: 10%; right: 10%; top: -30px; aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle, var(--m-paper) 0 4%, var(--disc-lbl, var(--m-red)) 4.5% 30%, rgba(0,0,0,.25) 30.5% 31%, transparent 31.5%),
    repeating-radial-gradient(circle, #0a0f1d 0 1.5px, #1a2340 2px 2.6px);
  box-shadow: 0 -2px 0 rgba(255,255,255,.06) inset;
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.sleeve:hover .sleeve-disc, .sleeve:focus-visible .sleeve-disc { transform: translateY(-22px) rotate(140deg); }
.sleeve:hover .sleeve-cover, .sleeve:focus-visible .sleeve-cover { transform: translate(-2px, -2px); box-shadow: 9px 9px 0 var(--m-red); }
.sleeve-note {
  display: block; margin-top: 14px; padding-left: 2px;
  font: 500 12px/1.45 var(--font-mono); color: var(--m-slate);
}
.sleeve:hover .sleeve-note { color: var(--m-red); }

/* ==========================================================================
   [3] EVENTS: featured gig poster
   ========================================================================== */
.m-events-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.m-poster {
  position: relative; display: flex; flex-direction: column; overflow: hidden; isolation: isolate;
  aspect-ratio: 3 / 4; padding: 22px 24px; text-decoration: none;
  background: var(--m-navy); color: var(--m-cream);
  border: 2px solid var(--m-ink); box-shadow: 8px 8px 0 var(--m-red);
  transition: transform .25s, box-shadow .25s;
}
.m-poster:hover { transform: translate(-2px, -2px); box-shadow: 11px 11px 0 var(--m-red); }
.m-poster::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--m-grain), var(--m-halftone); }
.m-poster-rings {                          /* screen-printed record grooves, slightly misregistered */
  position: absolute; z-index: -1; right: -38%; top: -26%; width: 125%; aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle, var(--m-bulb) 0 9%, transparent 9.5%),
    repeating-radial-gradient(circle, rgba(180,34,50,.95) 0 9px, transparent 9px 18px);
  -webkit-mask-image: radial-gradient(circle, #000 0 70%, transparent 70.5%);
  mask-image: radial-gradient(circle, #000 0 70%, transparent 70.5%);
}
.m-poster-rings::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; translate: 7px 5px;
  background: repeating-radial-gradient(circle, transparent 0 15px, rgba(242,193,78,.35) 15px 17px);
  mix-blend-mode: screen;
}
.m-poster-top { display: flex; justify-content: space-between; font: 500 11px/1 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; }
.m-poster-kicker { margin-top: auto; font: 500 12px/1 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--m-bulb); }
.m-poster-title {
  margin-top: 8px; font: 900 clamp(40px, 4.6vw, 64px)/.86 var(--f-poster); text-transform: uppercase;
  color: var(--m-cream); text-shadow: 4px 4px 0 var(--m-red-deep); text-wrap: balance;
}
.m-poster-venue { margin-top: 14px; padding-top: 12px; border-top: 3px solid var(--m-cream); font: 800 22px/1.05 var(--f-poster); text-transform: uppercase; letter-spacing: .03em; }
.m-poster-town { font: 700 15px/1.3 var(--font-ui); margin-top: 2px; }
.m-poster-foot { margin-top: 14px; font: 500 11px/1.3 var(--font-mono); letter-spacing: .04em; color: var(--m-ink); background: var(--m-cream); align-self: flex-start; padding: 5px 8px; }

/* ==========================================================================
   [4] PLACES: Music card art (45 + label color by kind + EST sticker)
   ========================================================================== */
.m-art { background: var(--m-ink); }
.m-art::before { content: ""; position: absolute; inset: 0; background: var(--m-halftone); }
.m-art-disc {
  position: absolute; right: -34px; top: 50%; width: 158px; aspect-ratio: 1; translate: 0 -50%; border-radius: 50%;
  background:
    radial-gradient(circle, var(--m-ink) 0 3.5%, var(--lbl) 4% 31%, transparent 31.5%),
    repeating-radial-gradient(circle, #070b16 0 1.4px, #18223e 1.8px 2.5px);
  box-shadow: 0 0 0 1px rgba(201,208,221,.15);
  transition: rotate .6s ease;
}
.card:hover .m-art-disc { rotate: 120deg; }
.m-art-side {
  position: absolute; left: 16px; top: 16px;
  font: 500 10.5px/1 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--m-mist);
}
.m-art-est {
  position: absolute; left: 16px; bottom: 14px; display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%; rotate: -10deg;
  background: var(--m-bulb); color: var(--m-ink); box-shadow: 0 0 0 3px var(--m-ink), 0 0 0 4px var(--m-bulb);
  font: 500 8.5px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; text-align: center; padding-top: 6px;
}
.m-art-est b { display: block; font: 900 19px/1 var(--f-poster); letter-spacing: 0; margin-top: -2px; }

/* compact card monogram (people) */
.m-mono { display: grid; place-items: center; background: var(--m-ink); }
.m-mono::before {
  content: ""; position: absolute; width: 64px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, transparent 0 34%, var(--m-red) 34.5% 100%);
  box-shadow: 0 0 0 5px #0a0f1d, 0 0 0 6px rgba(201,208,221,.2);
}
.m-mono b { position: relative; font: 900 17px/1 var(--f-poster); color: var(--m-cream); letter-spacing: .04em; }

/* ==========================================================================
   [5] PEOPLE: setlist
   ========================================================================== */
.m-people { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.m-setlist {
  position: relative; background: #FFFDF8; color: #121212;
  padding: 34px 30px 26px; rotate: 1.2deg;
  box-shadow: 0 1px 0 #e7dfcf, 0 18px 36px rgba(11,23,48,.18);
}
.m-tape { position: absolute; top: -12px; width: 92px; height: 26px; background: rgba(217,164,65,.55); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.m-tape--l { left: 18px; rotate: -6deg; } .m-tape--r { right: 18px; rotate: 5deg; }
.m-setlist-title { font: 900 30px/1 var(--f-poster); text-transform: uppercase; color: var(--m-red); letter-spacing: .02em; margin-bottom: 14px; }
.m-setlist ol { list-style: none; counter-reset: set; }
.m-setlist li { counter-increment: set; display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px dashed rgba(11,23,48,.18); }
.m-setlist li::before { content: counter(set); font: 800 15px/1 var(--f-poster); color: var(--m-slate); width: 18px; flex: none; }
.m-setlist a { font: 800 21px/1.05 var(--f-poster); text-transform: uppercase; color: #121212; text-decoration: none; letter-spacing: .02em; }
.m-setlist a:hover { color: var(--m-red); text-decoration: underline; }
.m-setlist li span { margin-left: auto; font: 500 11px/1 var(--font-mono); color: #4E4E4E; white-space: nowrap; }
.m-setlist-enc { margin-top: 14px; font: 500 13px/1.4 var(--font-mono); color: #4E4E4E; }
.m-setlist-enc a { font: inherit; text-transform: none; color: var(--m-red); text-decoration: underline; }

/* ==========================================================================
   [6] TOWNS: tour poster (map + stops)
   ========================================================================== */
.m-towns { background: var(--m-ink); overflow: hidden; }
.m-towns::before { content: ""; position: absolute; inset: 0; background: var(--m-halftone); pointer-events: none; }
.m-tour { position: relative; display: grid; gap: clamp(24px, 4vw, 48px); }
.m-map { margin: 0 auto; width: 100%; max-width: 1080px; }
.m-map-land { fill: url(#map-dots); stroke: var(--m-brass); stroke-width: 2.5; stroke-linejoin: round; }
.m-map-shadow { fill: #060D1E; }
.m-map-regions text { font: 500 13px var(--font-mono); letter-spacing: .3em; fill: #8E9AB3; }
.m-route { fill: none; stroke: var(--m-bulb); stroke-width: 2.5; stroke-dasharray: 7 7; stroke-linecap: round; }
.m-map .pin circle { fill: var(--m-red); stroke: var(--m-cream); stroke-width: 2.5; }
.m-map .pin .num { font: 900 15px var(--f-poster); fill: var(--m-cream); text-anchor: middle; }
.m-map .pin .lbl { font: 800 17px var(--f-poster); letter-spacing: .08em; fill: var(--m-cream); paint-order: stroke; stroke: var(--m-ink); stroke-width: 5px; stroke-linejoin: round; }
.m-map svg { width: 100%; height: auto; overflow: visible; }
.m-route { animation: m-route 2.4s linear infinite; }
.m-map svg { overflow: visible; }
@keyframes m-route { to { stroke-dashoffset: -28; } }
.m-stops { list-style: none; counter-reset: stop; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(5, auto); column-gap: clamp(24px, 4vw, 56px); }
.m-stops li { counter-increment: stop; }
.m-stops a {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid rgba(201,208,221,.18); text-decoration: none; color: var(--m-cream);
}
.m-stops a::before {
  content: counter(stop, decimal-leading-zero); grid-row: span 2;
  font: 800 18px/1 var(--f-poster); color: var(--m-bulb);
}
.m-stops b { font: 900 24px/1 var(--f-poster); text-transform: uppercase; letter-spacing: .03em; }
.m-stops span { font-size: 14.5px; line-height: 1.45; color: var(--m-mist); margin-top: 3px; }
.m-stops a:hover b { color: var(--m-bulb); }

/* ==========================================================================
   [7] FOR MUSICIANS: FM dial + tools
   ========================================================================== */
.m-radio {
  position: relative; background: linear-gradient(180deg, #5A3A22, #3E2716); /* walnut cabinet */
  border-radius: 14px; padding: 22px 22px 18px; color: var(--m-cream);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 18px 40px rgba(11,23,48,.25);
  margin-bottom: clamp(28px, 4vw, 44px);
}
.m-radio-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: 14px; }
.m-radio-head h3 { font: 900 26px/1 var(--f-poster); text-transform: uppercase; letter-spacing: .04em; color: var(--m-bulb); }
.m-radio-head p { font-size: 14.5px; color: #F1E4CF; }
.m-dial-hint { display: none; }
.m-dial-window { overflow-x: auto; border-radius: 8px; scrollbar-width: thin; }
.m-dial {
  position: relative; min-width: 760px; height: 150px; border-radius: 8px;
  background: linear-gradient(180deg, #F6E7C1, #EAD39D);       /* backlit dial glass */
  box-shadow: inset 0 0 0 3px #2A1A0E, inset 0 0 28px rgba(160,100,20,.45);
  --pad: 40px;
}
.m-dial-scale { position: absolute; left: var(--pad); right: var(--pad); top: 66px; height: 18px;
  background:
    repeating-linear-gradient(90deg, #2A1A0E 0 1.5px, transparent 1.5px 100%) 0 0 / 2.5% 8px repeat-x,
    repeating-linear-gradient(90deg, #2A1A0E 0 2px, transparent 2px 100%) 0 0 / 25% 16px repeat-x;
  border-top: 2px solid #2A1A0E;
}
.m-dial-scale span { position: absolute; left: calc(var(--f) * 100%); top: 22px; translate: -50% 0; font: 800 17px/1 var(--f-poster); color: #2A1A0E; }
.m-dial-stations { list-style: none; position: absolute; left: var(--pad); right: var(--pad); top: 0; bottom: 0; }
.m-dial-stations li { position: absolute; left: calc(var(--f) * 100%); top: 12px; translate: -50% 0; }
.m-dial-stations li.lo { top: 104px; }
.m-dial-stations li::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 20px; background: var(--m-red); }
.m-dial-stations li.lo::after { top: auto; bottom: 100%; height: 18px; }
.m-dial-stations a {
  display: block; text-align: center; text-decoration: none; color: #2A1A0E; white-space: nowrap;
  font: 500 11px/1.15 var(--font-mono); padding: 3px 6px; border-radius: 4px;
}
.m-dial-stations a b { display: block; font: 900 17px/1 var(--f-poster); color: var(--m-red-deep); letter-spacing: .04em; }
.m-dial-stations a span { display: none; }
.m-dial-stations a:hover, .m-dial-stations a:focus-visible { background: var(--m-ink); color: var(--m-cream); }
.m-dial-stations a:hover b, .m-dial-stations a:focus-visible b { color: var(--m-bulb); }
.m-dial-stations a:hover span, .m-dial-stations a:focus-visible span { display: block; }
.m-needle-track { position: absolute; left: var(--pad); right: var(--pad); top: 8px; bottom: 8px; pointer-events: none; }
.m-needle {
  position: absolute; top: 0; bottom: 0; width: 3px; left: 17.5%; margin-left: -1.5px; background: var(--m-red);
  box-shadow: 0 0 8px rgba(180,34,50,.7); border-radius: 2px;
  animation: m-tune 16s ease-in-out infinite alternate;
}
@keyframes m-tune { 0% { left: 17.5%; } 45% { left: 47.5%; } 100% { left: 87.5%; } }
.m-radio-am { margin-top: 12px; font-size: 14.5px; color: #F1E4CF; }
.m-radio-am a { color: #FFF3D6; }
.m-radio-am .link-arrow { color: var(--m-bulb); margin-left: 4px; text-decoration: underline; text-underline-offset: .18em; }   /* not by colour alone (WCAG 1.4.1) */

.m-tools { align-items: stretch; }
.m-tool {
  display: flex; flex-direction: column; gap: 8px; background: var(--card);
  border: 2px solid var(--m-ink); box-shadow: 6px 6px 0 var(--m-ink); padding: 0 22px 22px;
}
.m-tool-art { height: 108px; margin: 0 -22px 12px; background: var(--m-ink); display: grid; place-items: center; position: relative; overflow: hidden; }
.m-tool-art::before { content: ""; position: absolute; inset: 0; background: var(--m-halftone); }
.m-tool-art svg { height: 88px; width: auto; position: relative; }
.m-mic-glow { animation: m-glow 3s ease-in-out infinite alternate; }
@keyframes m-glow { from { opacity: .08; } to { opacity: .3; } }
.m-tool h3 { font: 900 28px/1 var(--f-poster); text-transform: uppercase; letter-spacing: .02em; color: var(--m-ink); }
.m-tool > p { color: var(--muted); font-size: 15px; }
.m-tool-list { list-style: none; margin: 6px 0 10px; border-top: 1px solid var(--line); }
.m-tool-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.m-tool-list a { font-weight: 600; color: var(--ink); text-decoration: none; }
.m-tool-list a:hover { color: var(--m-red); text-decoration: underline; }
.m-tool-list span { font: 500 11.5px/1 var(--font-mono); color: var(--muted); white-space: nowrap; }
.m-tool .link-arrow { margin-top: auto; }

/* VU meter */
.m-vu { position: relative; width: 150px; height: 84px; background: linear-gradient(180deg, #F6E7C1, #E9CF92); border-radius: 6px; box-shadow: inset 0 0 0 3px #2A1A0E; overflow: hidden; }
.m-vu-scale { position: absolute; left: 50%; bottom: -74px; width: 160px; aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
  background:
    conic-gradient(from 25deg, var(--m-red) 0 28deg, transparent 28deg 332deg, transparent 0),
    repeating-conic-gradient(from -52deg, #2A1A0E 0 1deg, transparent 1deg 8deg);
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 0 80%, #000 81% 92%, transparent 93%);
  mask-image: radial-gradient(circle closest-side, transparent 0 80%, #000 81% 92%, transparent 93%); }
.m-vu-needle { position: absolute; left: 50%; bottom: 6px; width: 2px; height: 72px; margin-left: -1px; background: #1a1a1a; transform-origin: 50% 100%; rotate: -38deg; animation: m-vu 1.6s cubic-bezier(.3,.1,.3,1) infinite alternate; }
@keyframes m-vu { 0% { rotate: -38deg; } 30% { rotate: 6deg; } 55% { rotate: -14deg; } 80% { rotate: 22deg; } 100% { rotate: 2deg; } }
.m-vu-label { position: absolute; left: 14px; bottom: 10px; font: 800 12px/1 var(--f-poster); color: #2A1A0E; letter-spacing: .1em; }

/* metronome */
.m-metro { position: relative; width: 74px; height: 92px; clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, #8E1A26, #5E1119); }
.m-metro::before { content: ""; position: absolute; left: 50%; top: 8px; width: 16px; height: 62px; translate: -50% 0; background: var(--m-cream); border-radius: 2px; opacity: .9; }
.m-metro-arm { position: absolute; left: 50%; bottom: 14px; width: 3px; height: 70px; margin-left: -1.5px; background: var(--m-ink); transform-origin: 50% 100%; animation: m-tick 1.2s ease-in-out infinite alternate; }
.m-metro-arm::after { content: ""; position: absolute; left: -5px; top: 14px; width: 13px; height: 10px; background: var(--m-bulb); border-radius: 2px; }
@keyframes m-tick { from { rotate: -26deg; } to { rotate: 26deg; } }

/* ==========================================================================
   [8] HERITAGE: 78 in a paper sleeve + tracklist
   ========================================================================== */
.m-heritage { background: var(--m-cream); }
.m-heritage-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.m-78 { position: relative; aspect-ratio: 1.3; max-width: 560px; width: 100%; }
.m-78-disc {
  position: absolute; right: 0; top: 50%; translate: 0 -50%; width: 70%; aspect-ratio: 1; border-radius: 50%;
  background:
    conic-gradient(from 30deg, transparent 0 10%, rgba(255,255,255,.08) 14%, transparent 20% 55%, rgba(255,255,255,.06) 62%, transparent 68%),
    repeating-radial-gradient(circle, #111 0 1.2px, #262626 1.6px 2.3px);
  box-shadow: 0 16px 30px rgba(0,0,0,.3);
  display: grid; place-items: center;
}
.m-78-label {
  width: 38%; aspect-ratio: 1; border-radius: 50%; background: var(--m-brass); color: var(--m-ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  font: 500 8.5px/1.2 var(--font-mono); letter-spacing: .16em; text-transform: uppercase;
  box-shadow: inset 0 0 0 4px #C08A2E;
}
.m-78-label b { font: 900 21px/1 var(--f-poster); letter-spacing: .02em; margin: 2px 0; }
.m-78-sleeve {
  position: absolute; left: 0; top: 50%; translate: 0 -50%; width: 57%; aspect-ratio: 1; overflow: hidden;
  background: linear-gradient(135deg, #EAD8B2, #D6BC8A); border-radius: 3px;
  box-shadow: 0 18px 36px rgba(11,23,48,.25), inset 0 0 0 1px rgba(0,0,0,.06);
}
.m-78-sleeve::before { content: ""; position: absolute; inset: 0; background: var(--m-grain); z-index: 1; pointer-events: none; }
.m-78-ridge { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 34%; }
.m-78-hole {                               /* die-cut center: shows the record's grooves inside */
  position: absolute; left: 50%; top: 42%; width: 36%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: repeating-radial-gradient(circle at -60% 50%, #111 0 1.2px, #262626 1.6px 2.3px);
  box-shadow: inset 0 4px 8px rgba(0,0,0,.45), 0 0 0 8px rgba(255,255,255,.22);
}
.m-78-print {
  position: absolute; left: 0; right: 0; top: 14px; text-align: center; z-index: 2;
  font: 800 13px/1 var(--f-poster); letter-spacing: .18em; text-transform: uppercase; color: #6B4A1E;
}
.m-heritage-lede { font-size: clamp(17px, 1.5vw, 19.5px); line-height: 1.6; margin: 16px 0 22px; max-width: 40em; }
.m-tracklist { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.m-tracklist caption { text-align: left; font: 500 12px/1 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--m-red); padding-bottom: 10px; }
.m-tracklist th { text-align: left; font: 500 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 8px 10px 8px 0; border-bottom: 2px solid var(--m-ink); }
.m-tracklist td { padding: 11px 10px 11px 0; border-bottom: 1px solid #D8CDB6; vertical-align: baseline; }
.m-tracklist td:first-child { font: 800 17px/1 var(--f-poster); color: var(--m-red); width: 46px; }
.m-tracklist td:nth-child(2) { font: 900 22px/1 var(--f-poster); color: var(--m-ink); width: 72px; }
.m-tracklist a { color: var(--ink); font-weight: 600; }
.m-heritage .sample-note { margin-top: 12px; }

/* ==========================================================================
   [9] LIST-YOUR-PLACE: ticket stub
   ========================================================================== */
.m-cta { background: var(--m-red); position: relative; overflow: hidden; }
.m-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(11,23,48,.12) 1.4px, transparent 1.8px) 0 0 / 8px 8px; pointer-events: none; }
.m-cta .wrap { position: relative; }
.m-cta .eyebrow { color: var(--m-cream); }
.m-cta .block-title { color: #fff; }
.m-cta .block-intro { color: #FFF4EA; }
.m-cta-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.m-ticket { display: flex; rotate: -4deg; max-width: 440px; justify-self: center; filter: drop-shadow(10px 12px 0 rgba(11,23,48,.55)); }
.m-ticket-main, .m-ticket-stub { background: var(--m-cream); color: var(--m-ink); }
.m-ticket-main {
  flex: 1; padding: 20px 24px; display: flex; flex-direction: column; gap: 4px;
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 14px, #000 14.5px);
  mask: radial-gradient(circle at 0 50%, transparent 14px, #000 14.5px);
  border-right: 2px dashed rgba(11,23,48,.45);
}
.m-ticket-top { font: 500 10.5px/1 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--m-red); }
.m-ticket-admit { font: 900 52px/.9 var(--f-poster); text-transform: uppercase; margin-top: 6px; }
.m-ticket-what { font: 800 22px/1 var(--f-poster); text-transform: uppercase; color: var(--m-red); letter-spacing: .04em; }
.m-ticket-row { display: flex; gap: 20px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(11,23,48,.25); font: 500 10px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.m-ticket-row b { display: block; font: 900 22px/1 var(--f-poster); margin-top: 4px; }
.m-ticket-stub { width: 70px; display: grid; place-items: center;
  -webkit-mask: radial-gradient(circle at 100% 50%, transparent 14px, #000 14.5px);
  mask: radial-gradient(circle at 100% 50%, transparent 14px, #000 14.5px); }
.m-ticket-stub span { writing-mode: vertical-rl; font: 800 16px/1 var(--f-poster); letter-spacing: .18em; color: var(--m-ink); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .sleeves { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .m-people { grid-template-columns: minmax(0, 1fr); }
  .m-setlist { max-width: 520px; }
}
@media (max-width: 900px) {
  .m-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .m-deck { justify-self: center; width: min(100%, 380px); order: -1; margin-bottom: -8px; }
  .m-events-grid { grid-template-columns: minmax(0, 1fr); }
  .m-poster { aspect-ratio: auto; min-height: 420px; max-width: 520px; }
  .m-heritage-grid { grid-template-columns: minmax(0, 1fr); }
  .m-78 { max-width: 380px; }
  .m-cta-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .sleeves { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 16px; }
  .sleeve-title { font-size: 19px; }
  .marquee { display: block; padding: 22px 20px 20px; }
  .m-deck { width: min(64%, 250px); margin-bottom: -18px; }
  .m-deck-tag { display: none; }
  .m-board-track a { font-size: 19px; }
  .m-board-tag { font-size: 13px; padding: 0 12px; }
  .m-stops b { font-size: 21px; }
  .m-stops { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-template-rows: none; }
  .m-map .pin circle { r: 24px; }
  .m-map .pin .num { font-size: 26px; translate: 0 5px; }
  .m-map .pin .lbl, .m-map-regions { display: none; }
  .m-route { stroke-width: 5; stroke-dasharray: 12 12; }
  .m-map-land { stroke-width: 5; }
  .m-dial-hint { display: inline; }
  .m-setlist { padding: 30px 20px 22px; rotate: .6deg; }
  .m-setlist a { font-size: 19px; }
  .m-ticket { rotate: -2deg; }
  .m-ticket-admit { font-size: 42px; }
  .m-tool { box-shadow: 4px 4px 0 var(--m-ink); }
}

/* reduced motion: show the resting state of every object */
@media (prefers-reduced-motion: reduce) {
  .marquee .bulbs::after { animation: none; background-size: 20px 14px; }
  .marquee .bulbs.v::after { background-size: 14px 20px; }
  .m-board-track { animation: none; }
  .m-board-track[aria-hidden="true"] { display: none; }
  .m-needle { animation: none; left: 17.5%; }
  .m-vu-needle { animation: none; rotate: -8deg; }
  .m-metro-arm { animation: none; rotate: -18deg; }
}

/* hover pause chip on the turntable: lower left, clear of the tonearm */
.m-deck .motion-chip { top: auto; right: auto; bottom: 10%; left: 4%; }

/* hero search: the WHERE field always shows the whole "Town or region" placeholder
   (>= 190px column); on mid widths the button drops to its own row so neither field is squeezed */
@media (min-width: 1201px) { .m-hero .search { grid-template-columns: minmax(0, 1.6fr) minmax(170px, 1fr) auto; } }
@media (min-width: 761px) and (max-width: 1200px) {
  .m-hero .search { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .m-hero .search-go { grid-column: 1 / -1; min-height: 52px; }
}