/* =====================================================================
   PLAYGROUND INDEX — Patina system (loads after ../css/main.css)
   Same dark style as home / Works / Students. Its signature is a quiet
   PINK accent in place of rust — the "after-hours / fun" room.
   ===================================================================== */

body.theme-play{
  --rust:   #f2589a;   /* accent → pink (was rust) */
  --rust-2: #ff7db3;
}

/* ---------- Thirds — three-column tiles (caption under the thumb) ---------- */
.pcards{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(2rem,3.5vw,3.2rem) clamp(1.1rem,2.2vw,2rem);
  padding:clamp(2.5rem,6vh,5rem) var(--pad) clamp(6rem,14vh,10rem);
}
@media (max-width:1080px){ .pcards{ grid-template-columns:1fr 1fr; } }
.pcard{
  opacity:0; transform:translateY(30px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
}
.pcard.in{ opacity:1; transform:none; }
.pcard.is-hidden{ display:none; }

.pcard__media{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:4/3;                         /* 50/50 tiles */
  border:1px solid var(--line); background:var(--bg-2); border-radius:3px;
}
.pcard__media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.18) brightness(.82);
  transform:scale(1.03);
  transition:filter .6s var(--ease), transform .9s var(--ease);
}
.pcard:hover .pcard__media img{ filter:grayscale(.4) contrast(1.06) brightness(.98); transform:scale(1.07); }
/* CRT scanlines */
.pcard__media::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.24) 2px 3px);
  mix-blend-mode:multiply; opacity:.55;
}
/* pink → verdigris duotone wash on hover */
.pcard__media::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(140deg, rgba(242,88,154,.5), rgba(111,168,145,.26));
  mix-blend-mode:screen; opacity:0; transition:opacity .6s var(--ease);
}
.pcard:hover .pcard__media::after{ opacity:.6; }

.pcard__k{
  position:absolute; top:8px; left:9px; z-index:4;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.1em;
  color:var(--fg); mix-blend-mode:difference;
}
.pcard__play{
  position:absolute; top:8px; right:9px; z-index:4;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--fg); mix-blend-mode:difference; opacity:.9;
}
.pcard__view{
  position:absolute; right:9px; bottom:8px; z-index:4;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--fg); opacity:0; transform:translateY(6px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.pcard:hover .pcard__view{ opacity:1; transform:none; }

.pcard__meta{ padding-top:1.1rem; }
.pcard__title{
  font-size:clamp(1.25rem,1.7vw,1.65rem); font-weight:600; letter-spacing:-.01em;
  line-height:1.1; transition:color .4s var(--ease);
}
.pcard:hover .pcard__title{ color:var(--rust); }
/* sub-heading matches Works / Students: Instrument Serif italic */
.pcard__sub{
  display:block; font-family:var(--serif); font-style:italic;
  color:var(--muted); font-size:clamp(1.05rem,1.4vw,1.25rem); margin-top:.28rem;
}

@media (max-width:760px){
  .pcards{ grid-template-columns:1fr; gap:clamp(2.2rem,8vw,3rem); }
  .pcard__title{ font-size:clamp(1.4rem,6vw,2rem); }
}