/* ===========================================================
   The Field Production — Work player
   Click-to-play facade. Nothing downloads until the user asks.
   Uses the site's existing variables; the fallbacks keep it
   working if it is dropped somewhere those aren't defined.
   =========================================================== */

.work-player{
  --wp-charcoal: var(--charcoal, #1E2223);
  --wp-parchment: var(--parchment, #F5F1E8);
  --wp-brass: var(--brass, #B08D4F);
  --wp-brass-light: var(--brass-light, #C9A96A);
  --wp-ink: var(--ink, #33322E);
  --wp-muted: var(--muted, #6B6862);
  --wp-line: var(--line, rgba(28,28,26,.14));
  --wp-serif: var(--serif, 'Zilla Slab', Georgia, serif);
  --wp-sans: var(--sans, 'Inter', system-ui, sans-serif);
}

/* ---- selector ---- */
.wp-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.wp-tab{
  font-family:var(--wp-sans);font-size:.84rem;line-height:1.2;
  padding:11px 22px;cursor:pointer;
  border:1px solid var(--wp-line);background:transparent;color:var(--wp-muted);
  transition:border-color .28s ease, background .28s ease, color .28s ease;
}
.wp-tab:hover{border-color:rgba(176,141,79,.6);color:var(--wp-ink)}
.wp-tab[aria-selected="true"]{
  background:var(--wp-brass);border-color:var(--wp-brass);
  color:var(--wp-charcoal);font-weight:500;
}
.wp-tab:focus-visible{outline:2px solid var(--wp-brass);outline-offset:3px}

/* ---- stage ---- */
.wp-stage{
  position:relative;background:var(--wp-charcoal);
  aspect-ratio:16/9;overflow:hidden;
}
.wp-stage img.wp-poster{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.2,.7,.3,1);
}
.wp-stage:hover img.wp-poster{transform:scale(1.03)}
.wp-stage video,
.wp-stage iframe{width:100%;height:100%;display:block;border:0;background:#000}
.wp-veil{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(30,34,35,.05), rgba(30,34,35,.72));
}
.wp-play{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;
  border:0;background:none;cursor:pointer;color:var(--wp-parchment);
}
.wp-play:focus-visible{outline:2px solid var(--wp-brass);outline-offset:-6px}
.wp-disc{
  width:78px;height:78px;border-radius:50%;
  border:1px solid var(--wp-brass);background:rgba(30,34,35,.42);
  display:flex;align-items:center;justify-content:center;
  transition:background .35s ease, transform .35s ease;
}
.wp-stage:hover .wp-disc,
.wp-play:focus-visible .wp-disc{background:var(--wp-brass);transform:scale(1.06)}
.wp-disc svg{width:22px;height:22px;margin-left:4px;fill:var(--wp-brass);transition:fill .35s ease}
.wp-stage:hover .wp-disc svg,
.wp-play:focus-visible .wp-disc svg{fill:var(--wp-charcoal)}
.wp-play-label{
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  text-shadow:0 1px 12px rgba(0,0,0,.6);padding:0 20px;text-align:center;
}

/* ---- caption ---- */
.wp-meta{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:20px;flex-wrap:wrap;
  margin-top:20px;padding-top:20px;border-top:1px solid var(--wp-line);
}
.wp-kind{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--wp-brass)}
.wp-title{font-family:var(--wp-serif);font-size:1.3rem;line-height:1.25;margin-top:4px}
.wp-dur{font-size:.82rem;color:var(--wp-muted);white-space:nowrap}

@media (max-width:700px){
  .wp-tab{padding:10px 16px;font-size:.8rem}
  .wp-disc{width:62px;height:62px}
  .wp-play-label{font-size:.66rem}
}

@media (prefers-reduced-motion: reduce){
  .wp-stage img.wp-poster,
  .wp-disc, .wp-disc svg, .wp-tab{transition:none}
  .wp-stage:hover img.wp-poster{transform:none}
}