/* The playground's own layer: a shelf of prototypes, each a screenshot of itself.

   Three to a row on the same six-column grid the work page uses, so a card spans two columns and
   every gutter still runs down the middle of a rule. */
.toys{--tile-gap:10px;list-style:none;margin:0;padding:0;display:grid;gap:var(--tile-gap);
  grid-template-columns:
    calc(100% / 3 - var(--tile-gap) / 2)
    calc(100% / 3 - var(--tile-gap))
    calc(100% / 3 - var(--tile-gap) / 2)}
.toys > li{display:flex}

/* The card is a surface the prototype sits on rather than a frame around it: the screenshot keeps
   its own border and its own ground, so a card reads as a thing on a shelf and not as a picture
   cropped to fit a slot. */
.toy{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;padding:18px 18px 22px;
  background:var(--surface-sunk);border:1px solid transparent;border-radius:var(--radius);
  color:inherit;transition:border-color .18s,transform .18s,background-color .18s}
.toy:has(.toy-go:hover),.toy:has(.toy-go:focus-visible){background:var(--surface);border-color:var(--line);transform:translateY(-2px)}

/* The title's link is stretched over the whole card, so the card is still one target even though
   it is no longer one element. The artifact link is lifted back above it — without that it would
   be underneath the stretched one and unclickable, which is the trap this pattern always sets. */
.toy-go{color:inherit;text-decoration:none}
.toy-go::after{content:"";position:absolute;inset:0;border-radius:var(--radius)}
.toy-artifact{position:relative;z-index:1;color:var(--text);opacity:.75;text-decoration:none;transition:color .18s,opacity .18s}
.toy-artifact:hover,.toy-artifact:focus-visible{color:var(--line);opacity:1;text-decoration:underline}
.toy-meta{margin:10px 0 0}

.toy-shot{width:100%;aspect-ratio:16/10;overflow:hidden;margin-bottom:16px;
  background:var(--ground);border:1px solid var(--hairline);border-radius:3px}
.toy-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}

/* Centred, which the rest of the site is not. A card here holds one short line under one short
   title and nothing else, so there is no second column of text for a left edge to line up. */
.toy-title{margin:0;color:var(--ink);text-align:center}
.toy-what{margin:6px 0 0;max-width:34ch;color:var(--text);text-align:center;text-wrap:balance}

/* A placeholder should look like one. */
.toy.is-placeholder{background:transparent;border-style:dashed;border-color:var(--rule)}
.toy.is-placeholder .toy-shot{background:transparent;border-style:dashed;border-color:var(--rule)}
.toy.is-placeholder .toy-title{opacity:.7}

@media(max-width:900px){
  .toys{grid-template-columns:calc(50% - var(--tile-gap) / 2) calc(50% - var(--tile-gap) / 2)}
}
@media(max-width:640px){
  .toys{grid-template-columns:100%}
}

/* Explorations and photographs: a masonry of whatever proportion each piece is, because cropping a
   painting to fit a slot is a different painting. */
.pieces{list-style:none;margin:0;padding:0;columns:4;column-gap:10px}
.pieces.is-photos{columns:3}
.piece{break-inside:avoid;margin:0 0 10px;display:flex;flex-direction:column;gap:6px}
.piece img,.piece video{display:block;width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--hairline);background:var(--surface-sunk)}
.piece-cap{margin:0 0 4px;color:var(--text);opacity:.75}
@media(max-width:900px){.pieces,.pieces.is-photos{columns:2}}
@media(max-width:520px){.pieces{columns:1}.pieces.is-photos{columns:2}}