/* ============================================================
   Play — a scrollable gallery of experimental / past work.
   Loaded after site.css, which owns the design tokens.
   Vertical scroll (the horizontal room is the homepage only).
   Thumbnails are plain and rounded — no frames. This page relaxes
   the "framed = clickable" rule; clickability shows only on hover.
   ============================================================ */

body.play-page{background:var(--wall);overflow-x:hidden}

/* ---------- back link (matches the case-study one) ----------
   absolute, not fixed — it sits at the top of the page and scrolls
   away so it never collides with the sticky filter bar. */
.play-back{position:absolute;left:48px;top:40px;z-index:20;
  font-size:12px;line-height:16px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);text-decoration:none;
  transition:color var(--ease)}
.play-back:hover{color:var(--ink)}
.play-back .arrow{display:inline-block;transition:transform var(--ease)}
.play-back:hover .arrow{transform:translateX(-3px)}

/* ============================================================
   HERO — one full screen, typographic, calm. No image.
   ============================================================ */
.play-hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  justify-content:center;max-width:1360px;margin:0 auto;padding:0 48px}
.play-hero .eyebrow{font-size:12px;line-height:16px;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.play-hero .display{margin-top:20px;color:var(--ink);
  font-size:clamp(56px,9vw,120px);line-height:1;font-weight:700;
  letter-spacing:-.03em;max-width:16ch}
.play-hero .subline{margin-top:24px;color:var(--muted);
  font-size:24px;line-height:34px;font-weight:400;max-width:52ch}

/* ============================================================
   GALLERY — a category filter over one masonry cluster.
   ============================================================ */
.play-gallery{max-width:1360px;margin:0 auto;padding:0 48px 200px}

/* filter bar — sticks to the top of the viewport while the gallery is in
   view. "All" plus one pill per category; the active pill is filled ink. */
.play-filters{position:sticky;top:0;z-index:10;
  display:flex;flex-wrap:wrap;gap:12px;
  padding:24px 0 20px;background:var(--wall)}
.play-pill{font-family:inherit;font-size:16px;line-height:1;font-weight:500;
  padding:11px 22px;border-radius:999px;cursor:pointer;white-space:nowrap;
  border:1px solid rgba(31,37,56,.16);background:transparent;color:var(--slate);
  transition:background var(--ease),color var(--ease),border-color var(--ease)}
.play-pill:hover{border-color:rgba(31,37,56,.42);color:var(--ink)}
.play-pill.active{background:var(--ink);color:var(--wall);border-color:var(--ink)}

/* masonry — columns pack tightly, heights vary with each image's own
   aspect ratio, so the rhythm is loose without being a rigid grid. */
.play-cluster{column-width:440px;column-gap:24px}

.play-item{position:relative;display:block;text-decoration:none;color:inherit;
  break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 24px}
.play-item[hidden]{display:none}   /* author display:block would beat UA [hidden] */

/* the thumbnail itself — rounded media, nothing else. no frame, no border,
   no shadow. */
.play-media{display:block;width:100%;border-radius:16px;overflow:hidden;
  background:var(--paper);transition:transform var(--ease)}
.play-media img,.play-media video{display:block;width:100%;height:auto}

/* persistent pill labels, bottom-left over the thumbnail */
.play-caption{position:absolute;left:14px;bottom:14px;right:14px;
  display:flex;flex-wrap:wrap;gap:8px;pointer-events:none}
.play-caption .pill{font-size:13px;line-height:1;font-weight:500;
  letter-spacing:.01em;color:var(--wall);
  background:rgba(31,37,56,.72);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  padding:8px 12px;border-radius:999px;white-space:nowrap}

/* hover: subtle lift only. clickable items lift a touch more (they go
   somewhere) and grow a lime dot on the title pill as the only click cue. */
.play-item:hover .play-media{transform:translateY(-4px)}
a.play-item{cursor:pointer}
a.play-item:hover .play-media{transform:translateY(-6px)}
a.play-item .play-caption .t{display:inline-flex;align-items:center;gap:0}
a.play-item .play-caption .t::before{content:'';width:0;height:6px;
  border-radius:50%;background:var(--lime);opacity:0;margin-right:0;
  transition:width var(--ease),opacity var(--ease),margin-right var(--ease)}
a.play-item:hover .play-caption .t::before{width:6px;opacity:1;margin-right:7px}

@media (prefers-reduced-motion:reduce){
  .play-item:hover .play-media,
  a.play-item:hover .play-media{transform:none}
}