/* Cutting Room — Selected Work: filters, list, sticky preview panel */

.work-layout { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 60px; align-items: start; }

.work-list { border-top: 1px solid var(--line); }
.view-more-btn {
  display: none; margin-top: 24px; background: none; border: none; font: inherit;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-dim); cursor: pointer; padding: 12px 0; min-height: 44px;
}
.view-more-btn.visible { display: inline-flex; align-items: center; gap: 8px; }
.view-more-btn::after { content: "→"; transition: transform 0.2s ease; }
.view-more-btn.expanded::after { content: "←"; }
.view-more-btn:hover { color: var(--ink); }
.work-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  width: 100%; background: none; border: none; border-bottom: 1px solid var(--line);
  padding: 20px 0; cursor: pointer; text-align: left; font-family: inherit;
  color: var(--ink-faint); transition: color 0.2s ease;
}
.work-row .w-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.7vw, 30px);
  font-weight: 400; color: var(--ink);
  letter-spacing: -0.02em; line-height: 1.15;
  transition: opacity 0.2s ease; opacity: 0.4;
}
.work-row .w-cat {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint); flex: none; transition: color 0.2s ease;
}
.work-row:hover .w-title, .work-row:focus-visible .w-title, .work-row.active .w-title { opacity: 1; }
.work-row:hover .w-cat, .work-row:focus-visible .w-cat, .work-row.active .w-cat { color: var(--ink-dim); }
.work-row:focus-visible { outline: none; }
.work-row:focus-visible .w-title { text-decoration: underline; text-underline-offset: 6px; }
.work-row.has-video .w-title::after {
  content: "";
  display: inline-block;
  width: 0; height: 0; margin-left: 10px; vertical-align: 0.28em;
  border-style: solid; border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent var(--ink-dim);
  opacity: 0.55;
}

.work-preview { position: sticky; top: 110px; aspect-ratio: 16 / 10; overflow: hidden; background: var(--panel); }
.work-preview.playable { cursor: pointer; }
.work-preview .pv-img {
  position: absolute; inset: 0; opacity: 0;
  background-size: cover; background-position: center;
  transition: opacity 0.35s ease;
}
.work-preview .pv-img.active { opacity: 1; }
.work-preview .pv-img.has-video::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 52px; height: 52px;
  transform: translate(-50%, -50%);
  border-radius: 50%; border: 1px solid rgba(236,233,226,0.55);
  background: rgba(11,11,10,0.28);
}
.work-preview .pv-img.has-video::before {
  content: "";
  position: absolute; top: 50%; left: 50%; z-index: 1;
  width: 0; height: 0;
  transform: translate(-35%, -50%);
  border-style: solid; border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent var(--ink);
  pointer-events: none;
}

.g1 { background: radial-gradient(120% 140% at 20% 10%, #2b2b28 0%, #171715 60%, #0b0b0a 100%); }
.g2 { background: radial-gradient(120% 140% at 80% 20%, #2a2724 0%, #16140f 60%, #0b0b0a 100%); }
.g3 { background: radial-gradient(120% 140% at 30% 80%, #24261f 0%, #14150f 60%, #0b0b0a 100%); }
.g4 { background: radial-gradient(120% 140% at 70% 70%, #28211b 0%, #17130e 60%, #0b0b0a 100%); }
.g5 { background: radial-gradient(120% 140% at 50% 40%, #23231f 0%, #151512 60%, #0b0b0a 100%); }

.filters { display: flex; gap: 22px; margin: 0 0 30px; font-size: 13px; color: var(--ink-faint); flex-wrap: wrap; }
.filters button {
  background: none; border: none; font: inherit; color: inherit; cursor: pointer;
  padding: 8px 0; letter-spacing: 0.06em;
}
.filters button[aria-pressed="true"] { color: var(--ink); border-bottom: 1px solid var(--ink); }
.filters button:hover { color: var(--ink); }
.filters button:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

@media (max-width: 900px) {
  .work-layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .work-preview {
    display: block;
    order: -1;
    position: relative;
    top: auto;
    aspect-ratio: 16 / 9;
    width: 100%;
  }
  .work-row { padding: 16px 0; min-height: 52px; gap: 12px; }
  .work-row .w-title { font-size: 22px; }
  .work-row .w-cat { font-size: 10px; }
  .filters { gap: 8px 18px; margin-bottom: 18px; }
  .filters button { min-height: 40px; padding: 8px 2px; }
}