/* Artistes: a white roster, black selection bars and a generous portrait stage.
   js/artists.js drives the row vars (--fill, --wipe, --wipe-origin, --content), the title wipes
   and the stage swap; without JS (or under reduced motion) the page is fully static. */
body[data-page="artists"] { background:var(--white); color:var(--black); }
.artists-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; -webkit-clip-path:inset(50%); clip-path:inset(50%); white-space:nowrap; }

/* ---- Prominent Artiste Booking Hero ---- */
.artists-hero {
  position:relative;
  padding:calc(var(--header-h, 56px) + 32px) var(--edge) clamp(40px, 6vw, 70px);
  border-bottom:1px solid rgba(0,0,0,.12);
  display:grid;
  grid-template-columns:minmax(0, 38fr) minmax(0, 62fr);
  gap:clamp(20px, 4vw, 50px);
  align-items:start;
}
.artists-hero__meta {
  display:flex;
  flex-direction:column;
  gap:16px;
  max-width:44ch;
}
.artists-hero__badge {
  display:inline-block;
  font-size:12px;
  font-weight:700;
  letter-spacing:-.02em;
  text-transform:uppercase;
  color:#d1004f;
}
.artists-hero__summary {
  margin:0;
  font-size:13px;
  line-height:1.45;
  font-weight:500;
  color:rgba(0,0,0,.72);
}
.artists-hero__main {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  text-align:right;
}
.artists-hero__title {
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(34px, 5.2vw, 86px);
  line-height:.86;
  letter-spacing:var(--display-tracking);
  text-transform:uppercase;
  margin:0 0 clamp(16px, 2vw, 24px);
  color:var(--black);
}
.artists-hero__title .serif {
  font-family:var(--font-serif);
  font-weight:400;
  font-style:italic;
  color:var(--pink);
}
.artists-hero__cats {
  margin:0 0 clamp(20px, 2.5vw, 32px);
  font-size:clamp(12px, 1vw, 13px);
  font-weight:700;
  line-height:1.35;
  letter-spacing:-.02em;
  text-transform:uppercase;
  color:rgba(0,0,0,.55);
  max-width:58ch;
}
.artists-hero__actions {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:12px;
}
.artists-hero__actions .btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 20px;
  background:var(--black);
  color:var(--white);
  border:1px solid var(--black);
  font-size:12px;
  font-weight:700;
  line-height:1;
  text-transform:uppercase;
  text-decoration:none;
  transition:background-color .25s var(--ease), color .25s var(--ease);
}
.artists-hero__actions .btn:hover {
  background:var(--pink);
  color:var(--black);
  border-color:var(--pink);
}
.artists-hero__actions .btn--ghost {
  background:transparent;
  color:var(--black);
}
.artists-hero__actions .btn--ghost:hover {
  background:var(--mint);
  color:var(--black);
  border-color:var(--mint);
}

.artists { display:grid; grid-template-columns:43.5% 56.5%; min-height:auto; padding:clamp(36px, 5vw, 60px) var(--edge) clamp(40px, 6vw, 80px); font-size:12px; font-weight:700; line-height:.96; }
.artists :focus-visible { outline:2px solid var(--pink); outline-offset:3px; }
.artists button { color:inherit; }

/* ---- index column ---- */
.artists-index { display:flex; flex-direction:column; min-width:0; padding-top:10px; }
.artists-title { min-height:1.7em; margin:0 0 30px; font-size:clamp(64px,6.667vw,128px); font-weight:800; letter-spacing:-.055em; line-height:.85; text-transform:uppercase; }
.artists-title__line { position:relative; display:grid; width:fit-content; max-width:100%; overflow:hidden; }
.artists-title__word { grid-area:1/1; white-space:nowrap; }
.artists-title__word.is-empty { visibility:hidden; }
.artists-title__word--in { z-index:1; -webkit-clip-path:inset(0 100% 0 0); clip-path:inset(0 100% 0 0); }
.artists-title__wipe { position:absolute; inset:0; z-index:2; background:var(--black); transform:scaleX(0); transform-origin:left center; pointer-events:none; }
.artists-tools { display:flex; align-items:center; gap:8px 18px; flex-wrap:wrap; margin-bottom:10px; }
.artists-tag { background:var(--black); color:var(--white); padding:3px 6px; }
.artists-views button { padding:4px 0; font-size:12px; font-weight:700; text-transform:uppercase; }
.artists-views { display:flex; gap:12px; }
.artists-views button[aria-pressed="false"] { color:#6b6b6b; }
.artists-views button[aria-pressed="true"] .bracket-mark { color:var(--black); }

/* roster rows: --fill = active bar, --wipe = row-cover wipe, --content = text opacity */
.artists-roster { list-style:none; padding:0; margin:0; display:grid; gap:6px; }
.artists-roster > [hidden] { display:none !important; }
.artist-row { --fill:0; --wipe:0; --wipe-origin:right center; --content:1; position:relative; display:flex; width:100%; min-height:24px; justify-content:space-between; align-items:center; gap:10px; padding:2px 2px; text-align:left; font-size:12px; line-height:1.1; font-weight:700; isolation:isolate; }
.artist-row::before, .artist-row::after { content:""; position:absolute; inset:0; background:var(--black); pointer-events:none; }
.artist-row::before { z-index:0; transform:scaleX(var(--fill)); transform-origin:right center; }
.artist-row::after { z-index:2; transform:scaleX(var(--wipe)); transform-origin:var(--wipe-origin); }
.artist-row > * { position:relative; z-index:1; opacity:var(--content); }
.artist-row__name { transform:translateX(calc(var(--fill) * 12px)); transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.artist-row__number { flex-shrink:0; transition:color .2s; }
.artist-row.is-active { color:var(--white); }
.artist-row.is-active .artist-row__number { opacity:calc(var(--content) * (1 - var(--fill))); }
.artist-row:not(.is-active):hover .artist-row__name { transform:translateX(6px); }
.artist-row:not(.is-active):hover .artist-row__number { color:#6b6b6b; }
.artist-row__image { display:none; }
.artists-index__bottom { margin-top:auto; padding-top:80px; }
.artists-enquire { display:flex; align-items:center; gap:8px; width:min(100%,213px); padding:2px 6px; background:var(--black); color:var(--white); transition:background-color .2s, color .2s; }
.artists-enquire__sq { width:6px; height:6px; background:currentColor; flex-shrink:0; }
.artists-enquire:hover { background:var(--pink); color:var(--black); }

/* ---- detail column ---- */
.artists-detail { min-width:0; padding:42px 0 30px 30px; outline:none; }
.artists-stage { position:relative; aspect-ratio:1.49; overflow:hidden; background:var(--white); touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.artists-stage__photo, .artists-frame, .artists-swap { position:absolute; inset:0; overflow:hidden; }
.artists-frame img { display:block; width:100%; height:100%; object-fit:cover; object-position:var(--focus,50% 50%); transform:scale(var(--zoom,1)); transform-origin:var(--focus,50% 50%); -webkit-user-drag:none; }
.artists-stage video { position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; object-position:var(--focus, 50% 50%); opacity:0; transition:opacity .25s; }
.artists-stage.is-playing video { opacity:1; }
.artists-thermal { z-index:2; opacity:0; filter:url(#oms-thermal); pointer-events:none; }
.artists-lens { position:absolute; left:0; top:0; z-index:3; width:clamp(128px,14.2vw,204px); aspect-ratio:1; opacity:0; pointer-events:none; border:1px solid rgba(255,255,255,.64); background:radial-gradient(circle, rgba(0,0,0,.8) 35%, transparent 45%) center/6px 6px; will-change:transform,opacity; }
.artists-lens i { position:absolute; width:7px; height:7px; background:var(--pink); }
.artists-lens i:nth-child(1) { left:-4px; top:-4px; } .artists-lens i:nth-child(2) { right:-4px; top:-4px; }
.artists-lens i:nth-child(3) { left:-4px; bottom:-4px; } .artists-lens i:nth-child(4) { right:-4px; bottom:-4px; }
.artists-stage.is-lens { cursor:none; }
.artists-swap { z-index:4; background:var(--white); pointer-events:none; }
.artists-swap__in { --hue:0deg; --sat:1.25; --con:1.04; filter:hue-rotate(var(--hue)) saturate(var(--sat)) contrast(var(--con)); }
.artists-swap__wash { position:absolute; inset:0; background:var(--pink); mix-blend-mode:color; }
.artists-swap__circle { --r:0%; --hue:165deg; -webkit-clip-path:circle(var(--r) at 50% 50%); clip-path:circle(var(--r) at 50% 50%); filter:hue-rotate(var(--hue)) saturate(1.6) contrast(1.1); }
.artists-swap__ring { --r:0%; position:absolute; inset:0; opacity:0; mix-blend-mode:hard-light; background:radial-gradient(circle at 50% 50%, rgb(63 251 191 / 62%) 0 calc(var(--r) - 7%), rgb(255 0 99 / 78%) calc(var(--r) - 6%) var(--r), transparent calc(var(--r) + 1%)); }
.artists-swap__ring--2 { mix-blend-mode:screen; background:radial-gradient(circle at 52% 48%, transparent 0 calc(var(--r) - 8%), rgb(63 251 191 / 54%) calc(var(--r) - 7%) var(--r), transparent calc(var(--r) + 1%)); }
.artists .artists-play { position:absolute; right:10px; bottom:10px; z-index:5; padding:3px 6px; background:var(--black); color:var(--white); font-size:12px; font-weight:700; text-transform:uppercase; }
.artists .artists-play:hover { background:var(--pink); color:var(--black); }
.artists-play[hidden] { display:none; }
.artists-detail__nav { display:flex; align-items:center; gap:20px; margin:16px 0 26px; }
.artists-detail__nav button { padding:5px 0; font-size:12px; font-weight:700; text-transform:uppercase; }
.artists-detail__pos { margin-left:auto; color:#6b6b6b; }
.artists-detail__square { display:block; width:6px; height:6px; background:var(--black); margin-bottom:16px; }
.artists-detail__name { margin:0 0 14px; font-size:12px; font-weight:700; line-height:1.1; text-transform:uppercase; }
.artists-detail__about { max-width:33em; margin:0; font-size:20px; font-weight:700; letter-spacing:-.035em; line-height:.92; }
.artists-detail__format { margin:22px 0 14px; text-transform:uppercase; }
.artists-detail__cta { display:inline-block; padding:4px 0; text-transform:uppercase; }
.artists-detail__cta:hover { color:#d1004f; }
.artists-detail__note { max-width:44ch; margin:22px 0 0; font-size:12px; line-height:1.25; font-weight:500; color:rgba(0,0,0,.6); }

/* ---- grid view: the roster becomes media tiles, the detail opens from a tile ---- */
.artists[data-view="grid"] { grid-template-columns:1fr; }
.artists[data-view="grid"] .artists-detail { display:none; }
.artists[data-view="grid"] .artists-roster { grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px 10px; }
@media (max-width:1199px) { .artists[data-view="grid"] .artists-roster { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.artists[data-view="grid"] .artist-row { --fill:0 !important; display:grid; grid-template-columns:1fr auto; align-content:start; gap:8px 10px; padding:0; color:var(--black); }
.artists[data-view="grid"] .artist-row::before { display:none; }
.artists[data-view="grid"] .artist-row__name { transform:none; }
.artists[data-view="grid"] .artist-row.is-active .artist-row__number { opacity:1; }
.artists[data-view="grid"] .artist-row__image { position:relative; display:block; grid-column:1/-1; aspect-ratio:4/5; overflow:hidden; background:var(--black); }
.artist-row__image .artists-frame img { filter:grayscale(1); transition:filter .4s, transform .6s cubic-bezier(.2,.7,.2,1); }
.artist-row__image video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .3s; }
.artist-row__image.is-playing video { opacity:1; }
.artist-row:hover .artist-row__image .artists-frame img, .artist-row:focus-visible .artist-row__image .artists-frame img { filter:none; transform:scale(calc(var(--zoom,1) * 1.04)); }
.artist-row.is-active .artist-row__image { outline:2px solid var(--black); outline-offset:3px; }
.artists[data-view="grid"] .artists-index__bottom { padding-top:60px; }

@media (max-width:991px) {
  .artists-hero { grid-template-columns:1fr; padding-top:calc(var(--header-h, 56px) + 20px); gap:24px; }
  .artists-hero__main { align-items:flex-start; text-align:left; }
  .artists-hero__actions { justify-content:flex-start; }
  .artists { grid-template-columns:1fr 1fr; }
  .artists[data-view="grid"] .artists-roster { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
/* phone: list view (title, enquire bar, stage, back/next, copy);
   the roster itself lives in grid view */
@media (max-width:767px) {
  .artists-hero__title { font-size:clamp(32px, 8.8vw, 54px); line-height:.9; }
  .artists-hero__actions { flex-direction:column; align-items:stretch; width:100%; }
  .artists-hero__actions .btn { text-align:center; }
  .artists { display:flex; flex-direction:column; padding-top:40px; }
  .artists-index { display:contents; }
  .artists-title { order:1; min-height:0; margin:0 0 14px; font-size:48px; line-height:.86; }
  .artists-tools { order:2; margin-bottom:12px; }
  .artists-views button { min-height:32px; }
  .artists-roster { order:3; }
  .artists[data-view="list"] .artists-roster { display:none; }
  .artists-index__bottom { order:4; margin:0; padding:0; }
  .artists-enquire { width:100%; min-height:20px; }
  .artists-detail { order:5; padding:20px 0 30px; }
  .artists-stage { aspect-ratio:1; }
  .artists-detail__nav { margin:8px 0 14px; }
  .artists-detail__nav button { min-height:44px; }
  .artists-detail__pos { display:none; }
  .artists-detail__about { font-size:20px; line-height:.95; }
  .artists-lens, .artists-thermal { display:none; }
  .artists[data-view="grid"] .artists-roster { grid-template-columns:1fr; gap:20px; }
  .artists[data-view="grid"] .artist-row { font-size:12px; }
}
@media (hover:none), (pointer:coarse) { .artists-lens, .artists-thermal { display:none; } }
@media (prefers-reduced-motion:reduce) {
  .artists *, .artists *::before, .artists *::after { transition:none !important; }
  .artists-lens, .artists-thermal { display:none; }
}

/* Safari pass: -.055em tracking pushes the last glyph past the masked line box, so the final letter (e.g. the R of KAPOOR) was clipped */
.artists-title__line { padding-right:.08em; }
/* Safari/iOS pass: 44px tap targets on touch */
@media (pointer:coarse) {
  .artists-views button { min-height:44px; }
  .artists-enquire { min-height:44px; }
  .artists .artists-play { min-height:36px; display:inline-flex; align-items:center; }
  .artists-detail__cta { padding:14px 0; }
}

/* Mobile pass: 44px targets without changing the type. */
@media (max-width: 767px) {
  .artists-views { gap: 0; }
  .artists-views button { min-width: 44px; min-height: 44px; padding: 0 8px; align-items: center; }
  .artists-views button:last-child { padding-right: 0; justify-content: flex-end; }
  .artists .artists-play { min-height: 44px; display: inline-flex; align-items: center; padding: 0 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .artists-detail__cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
}