/* DJ Lineup Wall v4 */

/* ---------- Section + tokens ---------- */
.djw{--pad:clamp(20px,3.2vw,64px);--bg:#f3f4f5;--ink:#0a0a0a;--muted:#62666b;--line:rgba(10,10,10,.16);--chip:#fff;--card:#d9dcdf;
  background:var(--bg);color:var(--ink);font-family:inherit;position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(40px,5vw,72px) 0 28px;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.djw--dark{--bg:#0d0d0e;--ink:#f1ede6;--muted:#9d978e;--line:rgba(241,237,230,.18);--chip:transparent;--card:#1c1c1f}
.djw *{box-sizing:border-box}

/* ---------- Heading ---------- */
.djw__top{padding:0 var(--pad);margin-bottom:28px}
.djw .djw__title{font-family:inherit;font-size:clamp(44px,5.4vw,88px);line-height:.88;letter-spacing:-.05em;font-weight:900;margin:0;color:var(--ink);text-transform:none}
.djw .djw__subtitle{margin:14px 0 0;font-size:16px;line-height:1.45;color:var(--muted)}

/* ---------- Filters (one row, scrolls sideways if needed) ---------- */
.djw__filters{display:flex;gap:8px;padding:2px var(--pad);margin:0 0 24px;overflow-x:auto;scrollbar-width:none}
.djw__filters::-webkit-scrollbar{display:none}
.djw .djw__filter{flex:0 0 auto;appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line);border-radius:0;background:var(--chip);color:var(--ink);padding:11px 16px;margin:0;
  font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.1em;line-height:1.1;cursor:pointer;box-shadow:none;
  transition:background .2s ease,color .2s ease,border-color .2s ease}
.djw .djw__filter small{font-size:12px;font-weight:600;letter-spacing:0;opacity:.6}
.djw .djw__filter:hover{border-color:var(--ink);background:var(--chip);color:var(--ink)}
.djw .djw__filter.is-active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.djw .djw__filter.is-active small{opacity:.75}
.djw .djw__filter:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ---------- Wall ---------- */
.djw__viewport{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;user-select:none;-webkit-user-select:none;cursor:grab}
.djw__viewport::-webkit-scrollbar{display:none}
.djw__viewport.is-dragging,.djw__viewport.is-dragging .djw__card{cursor:grabbing}
.djw__viewport:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.djw__track{display:flex;gap:6px;width:max-content;padding:4px var(--pad)}

.djw__card{position:relative;flex:0 0 auto;width:clamp(168px,11vw,212px);height:min(62vh,520px);min-height:380px;
  overflow:hidden;background:var(--card);cursor:pointer;outline:none;transition:width .45s cubic-bezier(.2,.75,.2,1)}
.djw__card:hover,.djw__card:focus-visible{width:clamp(210px,13.5vw,262px)}
.djw__card:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.djw__card.is-filtered-out{display:none}

.djw__portrait{position:absolute;inset:0}
.djw__portrait img{width:100%;height:100%;display:block;object-fit:cover;object-position:var(--fx,50%) var(--fy,0%);
  pointer-events:none;-webkit-user-drag:none;transition:transform .7s cubic-bezier(.2,.75,.2,1),filter .5s ease}
.djw--mono .djw__portrait img{filter:grayscale(1) contrast(1.06)}
.djw__card:hover .djw__portrait img,.djw__card:focus-visible .djw__portrait img{transform:scale(1.04);filter:none}

.djw__initials{position:absolute;inset:0;display:grid;place-items:center;font-size:46px;font-weight:900;letter-spacing:-.04em;
  color:rgba(255,255,255,.5);background:linear-gradient(160deg,#3b3b40,#141416)}

/* Name is always readable; hover adds the "View profile" cue */
.djw__caption{position:absolute;left:0;right:0;bottom:0;padding:64px 16px 16px;color:#fff;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.84) 0%,rgba(0,0,0,.5) 50%,rgba(0,0,0,0) 100%)}
.djw__name{display:block;font-size:clamp(17px,1.25vw,22px);line-height:1.05;font-weight:800;letter-spacing:-.02em;color:#fff;overflow-wrap:anywhere}
.djw__role{display:block;margin-top:6px;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.djw__cue{display:block;max-height:0;margin-top:0;opacity:0;overflow:hidden;font-size:12px;font-weight:600;color:#fff;
  text-decoration:underline;text-underline-offset:3px;transition:max-height .35s ease,opacity .35s ease,margin-top .35s ease}
.djw__card:hover .djw__cue,.djw__card:focus-visible .djw__cue{max-height:20px;opacity:1;margin-top:12px}

/* ---------- Footer line ---------- */
.djw__bottom{display:flex;align-items:center;gap:16px;padding:0 var(--pad);margin-top:18px;font-size:12px;color:var(--muted)}
.djw__scrollline{height:1px;width:min(220px,25vw);background:var(--line);position:relative;display:block}
.djw__scrollline b{position:absolute;left:0;top:-1px;width:24%;height:3px;background:var(--ink);display:block;transition:left .15s linear}
.djw__empty{padding:0 var(--pad);color:var(--muted)}

@media (min-width:601px) and (max-width:900px){
  .djw__card,.djw__card:hover,.djw__card:focus-visible{width:38vw;height:58vh;min-height:380px}
}
@media (max-width:600px){
  .djw{--pad:16px}
  .djw__top{margin-bottom:20px}
  .djw .djw__subtitle{font-size:14px}
  .djw__filters{margin-bottom:18px}
  .djw .djw__filter{padding:10px 14px}
  .djw__track{gap:4px}
  .djw__card,.djw__card:hover,.djw__card:focus-visible{width:64vw;height:56vh;min-height:340px;max-height:470px}
  .djw__name{font-size:20px}
  .djw__hint{margin-left:auto}
  .djw__scrollline{width:22vw}
}

/* ---------- Popup (moved under <body> by the script) ---------- */
html.djw-modal-open,html.djw-modal-open body{overflow:hidden}
.djw__modal{--m-bg:#f3f4f5;--m-ink:#0a0a0a;--m-muted:#62666b;--m-line:rgba(10,10,10,.16);--m-btn:#0a0a0a;--m-btn-ink:#fff;--m-close:rgba(255,255,255,.88);--m-close-ink:#0a0a0a;
  position:fixed;inset:0;z-index:2147483000;display:none;font-family:inherit}
.djw__modal--dark{--m-bg:#141416;--m-ink:#f1ede6;--m-muted:#9d978e;--m-line:rgba(241,237,230,.2);--m-btn:#f1ede6;--m-btn-ink:#0d0d0e;--m-close:rgba(20,20,22,.8);--m-close-ink:#f1ede6}
.djw__modal *{box-sizing:border-box}
.djw__modal.is-open{display:flex;align-items:center;justify-content:center;padding:4vh 4vw;animation:djw-fade .25s ease}
.djw__modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.djw__modal-panel{position:relative;display:grid;grid-template-columns:auto minmax(320px,480px);
  max-width:92vw;max-height:88vh;background:var(--m-bg);color:var(--m-ink);box-shadow:0 30px 90px rgba(0,0,0,.4);overflow:hidden}
.djw__modal-panel.is-compact{grid-template-columns:auto minmax(300px,410px)}
.djw__modal.is-open .djw__modal-panel{animation:djw-rise .35s cubic-bezier(.2,.75,.2,1)}
@keyframes djw-fade{from{opacity:0}to{opacity:1}}
@keyframes djw-rise{from{transform:translateY(18px)}to{transform:none}}

.djw__modal-image{position:relative;height:min(88vh,640px);aspect-ratio:4/5;background:#d9dcdf;overflow:hidden}
.djw__modal-panel.is-compact .djw__modal-image{height:min(84vh,540px)}
.djw__modal-image img{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 0%}
.djw__modal-image .djw__initials{display:none;font-size:72px}
.djw__modal-image.is-empty img{display:none}
.djw__modal-image.is-empty .djw__initials{display:grid}

.djw__modal-copy{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:clamp(28px,4vw,52px);overflow-y:auto;max-height:min(88vh,640px)}
.djw__modal-role{margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--m-muted)}
.djw__modal .djw__modal-name{font-family:inherit;font-size:clamp(38px,4.4vw,64px);line-height:.92;letter-spacing:-.045em;font-weight:900;margin:0;color:var(--m-ink);text-transform:none;overflow-wrap:anywhere}
.djw__modal-meta{margin-top:14px;font-size:15px;line-height:1.4;color:var(--m-muted)}
.djw__socials{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.djw__modal .djw__socials a{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--m-line);border-radius:50%;
  color:var(--m-ink);text-decoration:none;transition:background .2s ease,color .2s ease,border-color .2s ease}
.djw__modal .djw__socials a:hover{background:var(--m-ink);color:var(--m-bg);border-color:var(--m-ink)}
.djw__modal svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.djw__modal svg .djw-fill{fill:currentColor}
.djw__modal-bio{margin:24px 0 0;max-width:60ch;font-size:15px;line-height:1.65;color:var(--m-ink);opacity:.86;white-space:pre-line}

.djw__actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-top:32px}
.djw__modal .djw__book{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 30px;
  background:var(--m-btn);color:var(--m-btn-ink);border:1px solid var(--m-btn);text-decoration:none;
  font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;transition:background .2s ease,color .2s ease}
.djw__modal .djw__book:hover{background:transparent;color:var(--m-ink)}
.djw__modal-nav{display:flex;align-items:center;gap:6px;margin-left:auto}
.djw__modal-nav[hidden]{display:none}
.djw__counter{min-width:56px;text-align:center;font-size:12px;color:var(--m-muted);font-variant-numeric:tabular-nums}
.djw__modal .djw__navbtn,.djw__modal .djw__close{appearance:none;-webkit-appearance:none;display:grid;place-items:center;padding:0;margin:0;cursor:pointer;border-radius:50%;box-shadow:none}
.djw__modal .djw__navbtn{width:42px;height:42px;border:1px solid var(--m-line);background:transparent;color:var(--m-ink);transition:background .2s ease,color .2s ease}
.djw__modal .djw__navbtn:hover{background:var(--m-ink);color:var(--m-bg)}
.djw__modal .djw__close{position:absolute;top:12px;right:12px;z-index:2;width:40px;height:40px;border:0;background:var(--m-close);color:var(--m-close-ink)}
.djw__modal a:focus-visible,.djw__modal button:focus-visible{outline:2px solid var(--m-ink);outline-offset:3px}

@media (max-width:760px){
  .djw__modal-panel,.djw__modal-panel.is-compact{grid-template-columns:1fr;width:92vw;max-height:90vh;overflow-y:auto}
  .djw__modal-image,.djw__modal-panel.is-compact .djw__modal-image{height:auto;width:100%;aspect-ratio:1/1.05}
  .djw__modal-copy{max-height:none;overflow:visible;padding:24px 22px 26px}
  .djw__modal .djw__modal-name{font-size:40px}
  .djw__actions{margin-top:26px;gap:12px}
  .djw__modal .djw__book{flex:1 1 100%}
  .djw__modal-nav{margin:0 auto}
  .djw__modal .djw__close{background:rgba(255,255,255,.88);color:#0a0a0a}
}

@media (prefers-reduced-motion:reduce){
  .djw *,.djw__modal,.djw__modal *{transition:none!important;animation:none!important}
}