/*
==============================================================================
  AVAVA | Radio Station HTML Template
  djs.css — styles of the DJs page (loaded after style.css)
==============================================================================

  TABLE OF CONTENTS

  01. Residents — the shelf of nine residents (the intro lives in style.css)
  02. In the booth — listeners curve, the DJ on air, the set and its tracklist
  03. Sets — "Mixes you can keep": the most played set and the ledger
  04. Guests — the season line and the shelf of visiting DJs
  05. Genres — the word cloud and the selectors per genre
  06. Send a mix — the rules, the four stages, the demo form
  07. Responsive

==============================================================================
*/

:root {
  --dj-ember6: rgba(201, 80, 42, .06);
  --dj-ember8: rgba(201, 80, 42, .08);
  --dj-ember45: rgba(201, 80, 42, .45);
  --dj-ember55: rgba(201, 80, 42, .55);
}

.sec--residents { background: var(--panel); padding-top: 40px; }
.sec--booth { background: var(--paper); }
.sec--sets { background: var(--paper); }
.sec--guests { background: var(--panel); }
.sec--genres { background: var(--card); }
.sec--mix { background: var(--panel); padding-bottom: 60px; }
.dj-head { margin-bottom: clamp(14px, 1.8vw, 24px); }
.dj-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; padding-bottom: 14px; }
.dj-chip, .gs-city { display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .1em; line-height: normal; color: var(--i65); white-space: nowrap; }
.dj-chip { background: transparent; }
.dj-chip .c, .gs-city .c { opacity: .6; }
.dj-chip.is-on { background: var(--shell); color: #fff; }
.dj-chip:hover { background: var(--accent); color: #0C0C0D; }
:root:not([data-theme="dark"]) .dj-chip:hover { background: var(--accent); color: #fff; }

/* ============================================================================
   01. Residents
   ========================================================================= */
.dj-shelf, .gs-shelf { display: flex; gap: clamp(14px, 1.8vw, 30px); overflow-x: auto; padding: 10px 0 12px; scroll-snap-type: x mandatory; }
.dj-card { box-sizing: content-box; flex: 0 0 clamp(240px, 22vw, 300px); scroll-snap-align: start; display: flex; flex-direction: column; gap: 11px; min-width: 0; padding: 12px; border: 1px solid var(--i16); cursor: pointer; transition: transform .18s ease, border-color .18s ease; }
.dj-card:hover { transform: translateY(-6px); border-color: var(--accent); }
.dj-card.is-on { border-color: var(--dj-ember55); background: var(--dj-ember6); }
.dj-fig { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--i10); }
.dj-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dj-mono { position: absolute; inset: 0; display: grid; place-items: center; font: 700 64px / 1 'Bricolage Grotesque', sans-serif; color: var(--i16); }
.dj-badges { position: absolute; left: 11px; right: 11px; top: 11px; display: flex; align-items: center; gap: 9px; }
.dj-no { flex: none; padding: 5px 8px; background: var(--shell); color: #fff; }
.dj-card.is-on .dj-no { background: var(--accent); }
.dj-live, .gs-live { flex: none; display: flex; align-items: center; gap: 7px; padding: 5px 8px; background: var(--accent); color: #fff; }
.dj-live .eq, .gs-live .eq { height: 8px; gap: 1.5px; color: #fff; }
.dj-live .eq > span, .gs-live .eq > span { width: 1.5px; }
.dj-genre { position: absolute; left: 11px; bottom: 11px; max-width: calc(100% - 22px); padding: 5px 8px; background: var(--card); color: var(--i7); }
.dj-nm { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.dj-nm .grot { font-size: clamp(17px, 1.7vw, 23px); line-height: 1.1; letter-spacing: -.03em; color: var(--ink); }
.dj-card.is-on .dj-nm .grot { color: var(--accent); }
.dj-nm .mono { flex: none; margin-left: auto; white-space: nowrap; }
.dj-slot { color: var(--i55); }
.dj-card.is-on .dj-slot { color: var(--accent); }
.dj-air, .gs-soon { display: flex; align-items: center; gap: 9px; }
.dj-air .abar, .gs-soon .abar { flex: 1; background: var(--i14); }
.dj-air .abar > span { background: var(--i35); }
.dj-card.is-on .dj-air .abar > span { background: var(--accent); }
.dj-air .mono, .gs-soon .mono { flex: none; white-space: nowrap; }
.dj-week { display: flex; align-items: center; gap: 4px; }
.dj-week > i { flex: 1; height: 15px; display: grid; place-items: center; background: var(--i10); font-style: normal; }
.dj-week > i .mono { color: var(--i4); }
.dj-week > i.on { background: var(--accent); }
.dj-week > i.on .mono { color: #fff; }
.dj-last { display: flex; align-items: center; gap: 11px; margin-top: auto; padding-top: 9px; border-top: 1px solid var(--i16); min-width: 0; }
.dj-lt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dj-lt .serif { font-size: 14px; line-height: 1.15; color: var(--i78); }
.dj-last .ar-btn { margin-left: auto; }
.dj-foot, .gs-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: clamp(18px, 2.2vw, 28px); padding-top: 14px; border-top: 2px solid var(--ink); }
.gs-foot { border-top-color: var(--accent); margin-top: clamp(14px, 1.6vw, 22px); }
.dj-on { display: flex; align-items: center; gap: 9px; }

/* ============================================================================
   02. In the booth
   ========================================================================= */
.bt-top { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--i18); }
.bt-top h2 { font-weight: 400; }
.bt-eq { height: 16px; gap: 3px; color: var(--accent); }
.bt-curve { display: flex; align-items: flex-end; gap: 2px; height: 16px; }
.bt-curve > span { width: 4px; background: var(--i28); }
.bt-curve > span:nth-child(n+11) { background: var(--accent); }
.bt-grid { display: grid; grid-template-columns: clamp(120px, 13vw, 190px) minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(18px, 2.4vw, 40px); padding: clamp(22px, 2.6vw, 34px) 0 clamp(22px, 2.6vw, 36px); }
.bt-side { display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.bt-portrait { position: relative; flex: 1; width: 100%; min-height: 200px; overflow: hidden; background: var(--i10); }
.bt-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bt-portrait figcaption { position: absolute; left: 11px; top: 11px; padding: 5px 9px; background: var(--accent); color: #fff; }
.bt-stats { display: flex; flex-direction: column; gap: 7px; }
.bt-stats li { display: flex; align-items: baseline; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--i14); }
.bt-stats .v { margin-left: auto; color: var(--i78); white-space: nowrap; }
.bt-stats .v.accent { color: var(--accent); }
.bt-follow { margin-top: auto; align-self: flex-start; color: var(--i5); }
.bt-follow:hover { color: var(--accent); }
.bt-main { display: flex; flex-direction: column; gap: clamp(10px, 1.2vw, 16px); min-width: 0; }
.bt-main h3 { font-size: clamp(26px, 3.2vw, 50px); line-height: .96; letter-spacing: -.042em; color: var(--ink); }
.bt-sub { font-size: clamp(18px, 2vw, 26px); line-height: 1.1; color: var(--i75); }
.bt-now { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--i16); border-bottom: 1px solid var(--i16); }
.bt-nt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.bt-nt .n { font: 600 clamp(15px, 1.6vw, 19px) / 1.25 Archivo, sans-serif; color: var(--ink); }
.sec--booth .pe-skip { padding: 10px 12px; }
.bt-deck { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: auto; }
.bt-wave-wrap { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 7px; }
.bt-wave { display: flex; align-items: flex-end; gap: 2px; height: 30px; }
.bt-wave > span { flex: 1; min-width: 0; background: var(--i22); }
.bt-wave > span.p { background: var(--accent); }
.bt-line { position: relative; display: block; height: 5px; background: var(--i16); }
.bt-line .fill { display: block; height: 5px; width: 30%; background: var(--accent); }
.bt-line .head { position: absolute; top: -3px; bottom: -3px; left: 30%; width: 2px; background: var(--ink); }
.bt-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; }
.bt-parts li { min-width: 0; display: flex; flex-direction: column; gap: 5px; cursor: pointer; }
.bt-parts li:hover { opacity: .8; }
.bt-parts .bar { box-sizing: content-box; display: flex; align-items: center; min-height: 20px; padding: 3px 7px; min-width: 0; background: var(--i12); }
.bt-parts .bar .mono { color: var(--i7); text-wrap: pretty; }
.bt-parts .mono:last-child { color: var(--i45); }
.bt-parts li.is-on .bar { background: var(--accent); }
.bt-parts li.is-on .bar .mono { color: #fff; }
.bt-parts li.is-on .mono:last-child { color: var(--accent); }
.bt-pt { display: flex; align-items: baseline; gap: 12px; }
.bt-list { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-left: clamp(14px, 1.6vw, 24px); border-left: 1px solid var(--i16); }
.bt-list ol { display: flex; flex-direction: column; flex: 1; }
.bt-list li { flex: 1; display: flex; align-items: center; gap: 11px; min-width: 0; padding-bottom: 9px; border-bottom: 1px solid var(--i14); cursor: pointer; }
.bt-list li:hover { border-bottom-color: var(--accent); }
.bt-list .tm { flex: none; color: var(--i45); }
.bt-list .n { font: 400 14px / 1.35 Archivo, sans-serif; color: var(--i82); }
.bt-list li.is-on .tm, .bt-list li.is-on .n { color: var(--accent); }
.bt-all { margin-top: auto; }
.bt-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 15px 0; border-top: 1px solid var(--i18); }
.bt-next { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid var(--i22); color: var(--i7); white-space: nowrap; }
.bt-next.is-on { border-color: var(--dj-ember55); color: var(--accent); }
.bt-next:hover { border-color: var(--accent); color: var(--accent); }
.bt-req { display: flex; align-items: center; gap: 10px; flex: 1 1 260px; min-width: 0; }
.bt-req .rq { padding: 6px 0; font-size: 14px; }
.send--34 { width: 34px; height: 34px; }

/* ============================================================================
   03. Sets
   ========================================================================= */
.ms-lead { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(14px, 1.8vw, 26px); padding: clamp(14px, 1.6vw, 20px); margin-bottom: clamp(14px, 1.6vw, 22px); border: 1px solid var(--dj-ember55); background: var(--dj-ember8); }
.ms-lt { position: relative; flex: none; width: 76px; height: 76px; }
.thumb--76 { width: 76px; height: 76px; }
.thumb--56 { width: 56px; height: 56px; }
.ms-lt .pa-cplay { width: 38px; height: 38px; font-size: 12px; }
.ms-lb { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.ms-lb .grot { font-size: clamp(17px, 1.8vw, 24px); line-height: 1.15; letter-spacing: -.03em; color: var(--ink); }
.ms-lw { flex: 1 1 200px; min-width: 0; display: flex; align-items: flex-end; gap: 2px; height: 44px; }
.ms-lw > span { flex: 1; min-width: 0; background: var(--i28); }
.ms-lw > span.p { background: var(--accent); }
.ms-la { flex: none; display: flex; align-items: center; gap: 12px; }
.ms-la .link-d { color: var(--i6); }
.ms-la .link-d:hover { color: var(--accent); }
.ms-th, .ms-row { display: grid; grid-template-columns: 3px 76px minmax(0, 1.5fr) minmax(0, .9fr) minmax(0, .7fr) 58px 92px 74px; gap: 12px; }
.ms-th { padding-bottom: 9px; border-bottom: 2px solid var(--ink); }
.ms-th button { display: flex; align-items: baseline; gap: 5px; min-width: 0; white-space: nowrap; color: var(--i5); }
.ms-th button.r { justify-content: flex-end; }
.ms-th button.is-on, .ms-th button:hover { color: var(--accent); }
.ms-row { align-items: center; padding: 11px 0; border-bottom: 1px solid var(--i14); cursor: pointer; }
.ms-row:hover { background: var(--hover); }
.ms-stripe { align-self: stretch; }
.ms-row .date { color: var(--i55); white-space: nowrap; }
.ms-t { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ms-tt { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ms-tt .n { font: 600 15px / 1.3 Archivo, sans-serif; color: var(--ink); }
.ms-wave { display: flex; align-items: flex-end; gap: 2px; height: 14px; max-width: 180px; }
.ms-wave > span { flex: 1; min-width: 0; background: var(--i22); }
.ms-row .hst { font-size: 15px; line-height: 1.25; color: var(--i78); }
.ms-row .dur { text-align: right; }
.ms-plays { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ms-plays .abar { flex: 1; background: var(--i14); }
.ms-plays .abar > span { background: var(--i35); }
.ms-plays .mono { flex: none; }
.ms-acts { display: flex; align-items: center; gap: 9px; justify-self: end; }
.ms-acts button:not(.ar-btn):hover { color: var(--accent); }
.ms-more { display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; background: var(--shell); color: #fff; font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .2em; line-height: normal; text-transform: uppercase; }
.ms-more:hover { background: var(--accent); color: #fff; }
.ms-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding-top: clamp(14px, 1.6vw, 22px); }
.ms-sub .ar-csv { padding: 11px 18px; letter-spacing: .16em; }

/* ============================================================================
   04. Guests
   ========================================================================= */
.gs-line { position: relative; margin-bottom: clamp(20px, 2.4vw, 32px); }
.gs-line ol { display: flex; gap: 3px; }
.gs-tl { min-width: 0; overflow: hidden; display: flex; flex-direction: column; gap: 8px; cursor: pointer; flex: 1; }
.gs-tl:nth-child(1), .gs-tl:nth-child(2) { flex: 2; }
.gs-slots { display: flex; align-items: center; gap: 3px; height: 12px; }
.gs-slots > i { flex: 1; min-width: 0; height: 12px; background: var(--i28); }
.gs-tl:last-child .gs-slots > i { background: var(--i10); }
.gs-tl.is-on .gs-slots > i:first-child { background: var(--accent); }
.gs-tl > .mono:first-of-type { color: var(--i6); }
.gs-tl.is-on > .mono:first-of-type { color: var(--accent); }
.gs-needle { position: absolute; left: 9%; top: -5px; height: 22px; width: 2px; background: var(--accent); }
.gs-today { position: absolute; left: 9%; top: -21px; transform: translateX(-50%); padding: 3px 6px; background: var(--accent); color: #fff; }
.gs-shelf { padding: 10px 40px 14px 0; margin-right: -40px; }
.gs-card { box-sizing: content-box; flex: none; width: clamp(230px, 20vw, 290px); scroll-snap-align: start; display: flex; flex-direction: column; gap: 11px; padding: 12px; border: 1px solid var(--i14); cursor: pointer; transition: transform .18s ease, border-color .18s ease; }
.gs-card:hover { transform: translateY(-6px); border-color: var(--accent); }
.gs-card.is-on { border-color: var(--dj-ember55); background: var(--dj-ember6); }
.gs-fig { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; background: var(--i10); }
.gs-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gs-top { position: absolute; left: 11px; right: 11px; top: 11px; display: flex; align-items: center; gap: 9px; }
.gs-date { flex: none; padding: 5px 9px; background: var(--i14); color: var(--ink); }
.gs-card.is-on .gs-date { background: var(--accent); color: #fff; }
.gs-cd { margin-left: auto; color: var(--i6); }
.gs-card.is-on .gs-cd { color: var(--accent); }
.gs-live { position: absolute; left: 11px; bottom: 11px; }
.gs-nm { font-size: clamp(16px, 1.6vw, 22px); line-height: 1.1; letter-spacing: -.03em; color: var(--ink); }
.gs-card.is-on .gs-nm { color: var(--accent); }
.gs-card .serif { font-size: 15px; line-height: 1.15; color: var(--i82); }
.gs-soon .abar > span { background: var(--i4); }
.gs-card.is-on .gs-soon .abar > span { background: var(--accent); }
.gs-foot--card { margin-top: auto; }
.gs-card .gs-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 9px; border-top: 1px solid var(--i14); border-top-width: 1px; }
.gs-st { color: var(--i65); white-space: nowrap; }
.gs-card.is-on .gs-st { color: var(--accent); }
.gs-card button:hover, .gs-card button.is-on { color: var(--accent); }
.gs-cities { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: clamp(16px, 2vw, 26px); padding-top: 14px; border-top: 2px solid var(--i5); }
.gs-city { padding: 8px 11px; border: 1px solid var(--i28); color: var(--i7); }
.gs-city.is-on { border-color: rgba(201, 80, 42, .5); color: var(--accent); }
.gs-city:hover { border-color: var(--accent); color: var(--accent); }

/* ============================================================================
   05. Genres
   ========================================================================= */
.gn-cloud { display: flex; align-items: flex-end; flex-wrap: wrap; gap: clamp(16px, 2vw, 34px); padding-bottom: clamp(20px, 2.4vw, 34px); border-bottom: 2px solid var(--ink); }
.gn-cloud li { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gn-cloud a { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.gn-w { line-height: .95; letter-spacing: -.035em; color: var(--i55); white-space: nowrap; }
.gn-cloud a:hover .gn-w { color: var(--accent); }
.gn-cloud li:nth-child(-n+3) .gn-w { color: var(--accent); }
.gn-cloud li:nth-child(n+4):nth-child(-n+8) .gn-w { color: var(--ink); }
.gn-w--16 { font-size: 16px; } .gn-w--17 { font-size: 17px; } .gn-w--18 { font-size: 18px; } .gn-w--19 { font-size: 19px; }
.gn-w--20 { font-size: 20px; } .gn-w--21 { font-size: 21px; } .gn-w--23 { font-size: 23px; } .gn-w--25 { font-size: 25px; }
.gn-w--27 { font-size: 27px; } .gn-w--30 { font-size: 30px; } .gn-w--33 { font-size: 33px; } .gn-w--38 { font-size: 38px; }
.gn-w--43 { font-size: 43px; } .gn-w--60 { font-size: 60px; }
.gn-bar { width: 130px; height: 2px; background: var(--i10); }
.gn-bar > span { background: var(--i28); }
.gn-cloud li:nth-child(-n+3) .gn-bar > span { background: var(--accent); }
.gn-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(14px, 1.8vw, 28px); padding-top: clamp(18px, 2.2vw, 28px); }
.gn-card { display: flex; flex-direction: column; gap: 11px; min-width: 0; padding: 14px; border: 1px solid var(--i14); cursor: pointer; }
.gn-card:hover { border-color: var(--accent); }
.gn-card.is-on { border-color: var(--dj-ember55); background: var(--dj-ember8); }
.gn-h { display: flex; align-items: baseline; gap: 10px; padding-bottom: 9px; border-bottom: 1px solid var(--i16); }
.gn-g { color: var(--i6); }
.gn-card.is-on .gn-g { color: var(--accent); }
.gn-djs { display: flex; flex-direction: column; gap: 11px; }
.gn-djs li { display: grid; grid-template-columns: 38px minmax(0, 1fr) 46px; gap: 11px; align-items: center; }
.gn-ava { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--i10); color: var(--i7); letter-spacing: 0; }
.gn-dn { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.gn-dn .n { font: 600 14px / 1.2 Archivo, sans-serif; color: var(--ink); }
.gn-sb { height: 2px; background: var(--i10); }
.gn-sb > span { background: var(--i28); }
.gn-card.is-on .gn-sb > span { background: var(--accent); }
.gn-djs .mono { text-align: right; }
.gn-f { display: flex; align-items: center; gap: 11px; margin-top: auto; padding-top: 9px; border-top: 1px solid var(--i16); min-width: 0; }
.gn-fl { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gn-fl .serif { font-size: 14px; line-height: 1.15; color: var(--i78); }
.gn-f .ar-btn { margin-left: auto; }
.gn-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: clamp(16px, 2vw, 26px); padding-top: 14px; border-top: 1px solid var(--i16); }

/* ============================================================================
   06. Send a mix
   ========================================================================= */
.mx-top { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--i16); }
.mx-hl { display: flex; align-items: baseline; flex-wrap: wrap; gap: 20px; padding: clamp(24px, 2.6vw, 36px) 0 clamp(14px, 1.6vw, 20px); }
.mx-hl h2 { font-size: clamp(22px, 2.8vw, 44px); line-height: .98; letter-spacing: -.042em; color: var(--ink); }
.mx-hl .serif { font-size: clamp(18px, 1.9vw, 26px); line-height: 1.1; color: var(--i7); }
.mx-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) minmax(0, .8fr); border-top: 2px solid var(--i5); }
.mx-ask, .mx-form { padding: clamp(18px, 2vw, 28px) clamp(18px, 2vw, 30px) clamp(26px, 3vw, 40px); border-right: 1px solid var(--i16); }
.mx-ask { display: flex; flex-direction: column; gap: 14px; }
.mx-form { display: flex; flex-direction: column; gap: 15px; }
.mx-side { display: flex; flex-direction: column; gap: 13px; padding: clamp(18px, 2vw, 28px) 0 clamp(26px, 3vw, 40px) clamp(18px, 2vw, 30px); }
.mx-took { display: flex; flex-direction: column; gap: 9px; padding-top: 6px; }
.mx-took ul { display: flex; flex-direction: column; gap: 9px; }
.mx-took li { display: flex; align-items: baseline; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--i12); }
.mx-took .n { font: 600 14px / 1.3 Archivo, sans-serif; color: var(--ink); }
.mx-took .n.accent { color: var(--accent); }
.mx-how { display: flex; flex-direction: column; gap: 11px; margin-top: auto; padding-top: 8px; }
.mx-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
.mx-steps .n { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-drop { display: block; }
.mx-dl { display: flex; align-items: center; gap: 13px; padding: 13px; border: 1px dashed var(--i4); cursor: pointer; }
.mx-dl:hover { border-color: var(--accent); }
.mx-up { flex: none; font-size: 14px; color: var(--accent); }
.mx-dt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mx-send { justify-content: space-between; padding: 16px 22px; letter-spacing: .22em; }
.mx-offer li { padding-bottom: 9px; border-bottom: 1px solid var(--i14); }
.mx-slots { display: flex; flex-direction: column; gap: 10px; }
.mx-slots li { display: flex; flex-direction: column; gap: 5px; padding: 11px; border: 1px solid var(--dj-ember45); background: var(--dj-ember6); }
.mx-slots .n { font: 600 14px / 1.2 Archivo, sans-serif; color: var(--accent); }
.mx-quote { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--i16); display: flex; flex-direction: column; gap: 9px; }
.mx-quote blockquote { margin: 0; font-size: clamp(16px, 1.7vw, 21px); line-height: 1.35; color: var(--i82); text-wrap: pretty; }
.mx-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 16px 0; border-top: 1px solid var(--i16); }
.mx-foot .link-d { color: var(--i6); }
.mx-foot .link-d:hover { color: var(--accent); }
.dim84 { color: var(--i84); }

/* ============================================================================
   07. Responsive
   ========================================================================= */
@media (max-width: 1100px) {
  .bt-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bt-list { grid-column: 1 / -1; padding-left: 0; border-left: 0; padding-top: 16px; border-top: 1px solid var(--i16); }
  .mx-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mx-side { grid-column: 1 / -1; padding-left: 0; padding-top: 18px; border-top: 1px solid var(--i16); }
  .mx-form { border-right: 0; }
}

@media (max-width: 900px) {
  .ms-th { display: none; }
  .ms-row { grid-template-columns: 3px 76px minmax(0, 1fr) 74px; grid-template-areas: "s d t a" "s d dj a" "s d g a" "s d p a"; row-gap: 6px; }
  .ms-stripe { grid-area: s; }
  .ms-row .date { grid-area: d; }
  .ms-t { grid-area: t; }
  .ms-row .hst { grid-area: dj; }
  .ms-row .mono--up { grid-area: g; }
  .ms-row .dur { display: none; }
  .ms-plays { grid-area: p; max-width: 240px; }
  .ms-acts { grid-area: a; align-self: center; }
}

@media (max-width: 760px) {
  .sec--residents { padding-top: 24px; }
  .bt-grid { grid-template-columns: minmax(0, 1fr); }
  .bt-portrait { min-height: 220px; }
  .mx-grid { grid-template-columns: minmax(0, 1fr); }
  .mx-ask, .mx-form { border-right: 0; border-bottom: 1px solid var(--i16); }
  .mx-ask, .mx-form, .mx-side { padding-left: 0; padding-right: 0; }
  .dj-card, .gs-card { flex-basis: min(280px, 80vw); width: min(280px, 80vw); }
  .gs-shelf { padding-right: 18px; margin-right: -18px; }
  .gs-line ol { flex-wrap: wrap; gap: 8px; }
  .gs-tl, .gs-tl:nth-child(1), .gs-tl:nth-child(2) { flex: 1 1 calc(50% - 8px); }
  .gs-needle, .gs-today { display: none; }
  .ms-row { grid-template-columns: 3px minmax(0, 1fr) 74px; grid-template-areas: "s t a" "s dj a" "s g a" "s p a" "s d a"; }
  .ms-lead { padding: 14px; }
  .ms-lw { display: none; }
  .ar-totals, .ar-totals ul { flex-wrap: wrap; row-gap: 14px; }
  .ar-totals { width: 100%; }
  .ar-totals .mono { white-space: normal; }
  .gn-w--60 { font-size: 34px; }
  .gn-w--43, .gn-w--38 { font-size: 28px; }
  .bt-req { flex-basis: 100%; }
  .ms-sub .ar-csv { width: 100%; text-align: center; }
}
.dj-card[hidden] { display: none; }

/* the booth, live */
.bt-parts li { cursor: default; }
.bt-parts li:hover { opacity: 1; }
.bt-list li { cursor: default; }
.bt-follow.is-on { color: var(--accent); }
.bt-note { flex-basis: 100%; letter-spacing: .08em; }
.bt-note:empty { display: none; }
.bt-note.is-err, .bt-note.is-ok { color: var(--accent); }
.bt-nt .mono:last-child { letter-spacing: .06em; }

/* mixes, live: the resident picker sits with the genre chips */
.ms-who { padding: 8px 26px 8px 10px; border: 1px solid var(--i22); border-radius: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23C9502A'/%3E%3C/svg%3E") no-repeat right 9px center; color: var(--ink); font: 400 12px / 1.2 'DM Mono', ui-monospace, monospace; letter-spacing: .08em; -webkit-appearance: none; appearance: none; cursor: pointer; }
.ms-who option { background: var(--card); color: var(--ink); }
.ms-more[hidden] { display: none; }
.ms-acts .ms-dl:hover { color: var(--accent); }
.ms-empty { padding: 28px 0; font-size: 15px; line-height: 1.6; color: var(--i6); }
.ms-th button { cursor: pointer; }
/* the sort switch and the play disc of the lead, as on the podcasts page */
.sec--sets .pa-sorts { display: flex; align-items: center; border: 1px solid var(--i22); flex: none; }
.sec--sets .pa-sorts button { padding: 8px 12px; color: var(--i6); text-transform: none; white-space: nowrap; }
.sec--sets .pa-sorts button.is-on { background: var(--i12); color: var(--ink); }
.sec--sets .pa-sorts button:hover { color: var(--accent); }
.ms-lt .pa-cplay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; }
.ms-lt .pa-cplay:hover { background: #E0663D; }
:root:not([data-theme="dark"]) .ms-lt .pa-cplay:hover { background: #141110; }
.gs-card[hidden] { display: none; }
.js-gs-remind.is-on { color: var(--accent); }
.ms-row.is-new .ms-stripe { background: var(--accent); }   /* the newest set: its badge and its stripe, nothing else */
/* a set sounding where its play mark is */
.ms-row.is-playing .ms-tt .n, .dj-card.is-playing .dj-lt .serif { color: var(--accent); }
.js-rec-play.is-on:not(.pa-cplay) { background: var(--accent); border-color: var(--accent); color: #fff; }

/* genres and the mix form, live */
.js-gn-mode { cursor: pointer; }
.sec--genres .pa-sorts { display: flex; align-items: center; border: 1px solid var(--i22); flex: none; }
.sec--genres .pa-sorts button { padding: 8px 12px; color: var(--i6); text-transform: none; white-space: nowrap; }
.sec--genres .pa-sorts button.is-on { background: var(--i12); color: var(--ink); }
.mx-drop.is-over .mx-dl, .mx-drop.is-full .mx-dl { border-color: var(--accent); }
.mx-drop.is-full .mx-up { color: var(--accent); }
.mx-form .field input.is-err { border-bottom-color: var(--accent); }
.mx-note { letter-spacing: .08em; }
.mx-note.is-err, .mx-note.is-ok { color: var(--accent); }