/* ==================================================================
   Artists · added 14 October 2026
   Roster spotlight, roster filters and the artist page parts that
   styles.css does not already cover. Loaded after styles.css on
   roster.html and the artist pages. Same palette and type; ember
   stays on the wordmark full stop and the existing accents.
   ================================================================== */

/* ---------- spotlight: one artist at a time, rotating per visit ---------- */
.spot { position: relative; }
.spot-slide[hidden] { display: none; }
.spot-top { padding-top: clamp(2rem, 6vh, 3.5rem); }
.spot .rh-grid { padding-block: clamp(1.5rem, 4vh, 2.5rem) 0; }
.spot-foot { padding-bottom: clamp(2.5rem, 7vh, 4.5rem); }
.listen-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 52rem) { .listen-split { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.spot .rh-photo img { aspect-ratio: 4 / 5; object-fit: cover; }
.spot-kicker { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; align-items: baseline; }
.spot-kicker .new { color: var(--cream); border: 1px solid rgba(247, 243, 238, 0.35); border-radius: 999px; padding: 0.15rem 0.6rem; letter-spacing: 0.16em; }
.spot-nav { display: flex; align-items: center; gap: 0.75rem; margin-top: clamp(2rem, 5vh, 2.75rem); padding-top: 1.5rem; border-top: 1px solid var(--rule-dark); }
.spot-nav[hidden] { display: none; }
.spot-btn { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; background: transparent; color: var(--cream); border: 1px solid rgba(247, 243, 238, 0.35); border-radius: 50%; cursor: pointer; transition: border-color .18s ease, background .18s ease; }
.spot-btn:hover { border-color: var(--cream); background: var(--charcoal-soft); }
.spot-btn svg { width: 1rem; height: 1rem; display: block; }
.spot-dots { display: flex; gap: 0.15rem; }
.spot-dot { width: 1.75rem; height: 2.75rem; display: grid; place-items: center; background: none; border: 0; cursor: pointer; padding: 0; }
.spot-dot::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; border: 1px solid #8C7F72; transition: background .18s ease, border-color .18s ease; }
.spot-dot[aria-current="true"]::before { background: var(--cream); border-color: var(--cream); }
.spot-count { margin-left: auto; }

/* ---------- roster: everyone in one grid, with filters ---------- */
.roster-intro { max-width: 62ch; margin: -1rem 0 2rem; color: var(--ink-60); }
.filters { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 2.25rem; }
.filters[hidden] { display: none; }
.filter-row { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.filter-row .billing { width: 5.5rem; flex: none; }
.chip { font-family: var(--body); font-size: 0.88rem; color: var(--charcoal); background: transparent; border: 1px solid var(--rule); border-radius: 999px; padding: 0.5rem 0.95rem; min-height: 2.5rem; cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease; }
.chip:hover { border-color: var(--charcoal); }
.chip[aria-pressed="true"] { background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); }
@media (max-width: 40rem) { .filter-row .billing { width: 100%; } }

.dev-photo { position: relative; }
.status-tag { position: absolute; left: 0.75rem; bottom: 0.75rem; font-family: var(--billing); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.62rem; line-height: 1; padding: 0.45rem 0.6rem; border-radius: 2px; background: var(--cream); color: var(--charcoal); }
.status-tag.is-rep { background: var(--charcoal); color: var(--cream); }
.dev-card[hidden] { display: none; }
.dev-name a { text-decoration: none; }
.dev-name a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.dev-photo a { display: block; width: 100%; height: 100%; }
.roster-empty { color: var(--ink-60); margin: 0; padding-block: 1rem 2rem; }
.roster-empty[hidden] { display: none; }

/* ---------- artist page: wide photograph, landscape gallery, works ---------- */
.img-band.wide img { height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
.img-band.wide figcaption { padding-inline: var(--gutter); }
.gallery-land { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1rem, 2.5vw, 1.75rem); }
@media (min-width: 40rem) { .gallery-land { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gallery-land .fig img { aspect-ratio: 3 / 2; object-fit: cover; }
.credits td.dim { color: var(--ink-60); }
.listen-list { border-top: 1px solid var(--charcoal); }
.listen-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 1.5rem; align-items: baseline; text-decoration: none; padding-block: 1rem; border-bottom: 1px solid var(--rule); }
.listen-list a:hover .card-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (max-width: 40rem) { .listen-list a { grid-template-columns: minmax(0, 1fr); } }
.related .rel-photo { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; display: block; margin-bottom: 0.6rem; background: var(--cream-dim); }
.related a:hover .card-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (max-width: 40rem) { #everyone .section-head { flex-direction: column; gap: 0.5rem; } }