/* ============================================================
   Shadowbiz — sections3.css  (Selected work index)
   ============================================================ */
.work-index{margin-top:clamp(40px,5vw,60px);border-top:1px solid var(--line)}
.wx-row{display:grid;grid-template-columns:38px 272px minmax(0,1fr) 208px 22px;gap:clamp(16px,2vw,34px);align-items:start;
  padding:26px 6px;border-bottom:1px solid var(--line);transition:background .3s;position:relative}
.wx-row:hover{background:var(--cream-soft)}
.wx-idx{font-family:var(--mono);font-size:13px;color:var(--ink40);padding-top:18px}
.wx-id{display:flex;align-items:center;gap:16px;min-width:0;padding-top:6px}
.wx-logo{width:58px;height:58px;flex:none;border-radius:14px;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line);transition:transform .3s,box-shadow .3s}
.wx-row:hover .wx-logo{transform:translateY(-2px);box-shadow:0 10px 22px -14px rgba(29,58,46,.5)}
.wx-logo img{width:100%;height:100%;object-fit:contain;padding:9px}
.wx-logo.fill img{padding:0;object-fit:cover}
.wx-logo.dark{background:var(--ink)}
.wx-logo.dark img{padding:11px}
.wx-id-text{display:flex;flex-direction:column;gap:5px;min-width:0}
.wx-name{font-weight:700;font-size:clamp(18px,1.7vw,22px);letter-spacing:-.02em;line-height:1.12;text-wrap:balance}
.wx-domain{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--lime-deep)}
.wx-mid{display:flex;flex-direction:column;gap:8px;padding-top:6px}
.wx-type{font-weight:600;font-size:14px;letter-spacing:-.01em;color:var(--ink)}
.wx-blurb{font-size:14px;line-height:1.55;color:var(--ink60)}
.wx-tags{display:flex;flex-wrap:wrap;gap:7px;align-content:start;justify-content:flex-start;padding-top:6px}
.wx-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink60);
  padding:6px 11px;border:1px solid var(--line);border-radius:var(--r-pill);white-space:nowrap;transition:border-color .3s,color .3s}
.wx-row:hover .wx-tag{border-color:var(--ink20);color:var(--ink)}
.wx-arrow{color:var(--ink20);opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s,color .3s;padding-top:20px}
.wx-row:hover .wx-arrow{opacity:1;transform:none;color:var(--lime-deep)}

@media(max-width:1080px){
  .wx-row{grid-template-columns:38px minmax(0,1fr);gap:6px 22px;align-items:start}
  .wx-idx{grid-column:1;grid-row:1;padding-top:8px}
  .wx-id{grid-column:2;grid-row:1;padding-top:0}
  .wx-mid{grid-column:2;grid-row:2}
  .wx-tags{grid-column:2;grid-row:3;justify-content:flex-start;padding-top:10px}
  .wx-arrow{display:none}
}
@media(max-width:560px){
  .wx-row{grid-template-columns:1fr;gap:14px}
  .wx-idx{display:none}
  .wx-id,.wx-mid,.wx-tags{grid-column:1}
}