/* ============================================================
   The platform's front page: the shows, and what was made lately in the
   Studio. On temple.css's tokens and planner.css's sizes, like everything else.
   ============================================================ */


/* ---------- made lately in the Studio ---------- */
.lately{margin-top:56px}
.lately-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,232px);gap:14px;overflow-x:auto;padding:12px 2px 10px;scroll-snap-type:x proximity}
.lately-card{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:2px;scroll-snap-align:start;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);overflow:hidden;padding-bottom:10px;transition:border-color .2s}
.lately-card:hover,.lately-card:focus-visible{border-color:var(--line-strong)}
.lately-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lately-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:rgba(0,0,0,.35)}
.lately-card .name{padding:8px 12px 0;font-size:.875rem;font-weight:500;line-height:1.3}
.lately-card .for{padding:0 12px;color:var(--paper-dim);font-size:.75rem}