/* The gallery page (gallery.html), on wingstring.css and the themes. */
.gallery{padding:34px 40px 60px;max-width:1500px;margin:0 auto}
.gallery-heading h1{font:normal 44px Georgia,serif;margin:10px 0 8px;letter-spacing:-1px}
.gallery-heading p{margin:0 0 26px;color:var(--muted);max-width:640px;line-height:1.5}
.gallery-tabs{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:22px}
.gallery-tabs button{background:none;color:var(--muted);border:1px solid transparent;border-radius:20px;padding:8px 15px;font-size:12px}
.gallery-tabs button[aria-selected=true]{color:var(--text);border-color:var(--line);background:var(--panel)}
.gallery-by{display:flex;gap:12px;align-items:center;margin:-8px 0 20px;font-family:Georgia,serif;font-size:20px}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.gallery-single{margin-bottom:34px}
.gallery-single .eyebrow{margin-bottom:12px}
.gallery-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.card-picture{display:block;width:100%;padding:0;background:var(--bg);border-bottom:1px solid var(--line)}
.card-picture canvas{position:static;inset:auto;height:auto;display:block;width:100%;aspect-ratio:16/10;cursor:pointer;touch-action:auto;--line:#ffffff24}
.card-body{padding:14px 16px 16px;display:grid;gap:8px}
.card-title{margin:0;font:normal 20px Georgia,serif;overflow-wrap:anywhere}
.card-meta{margin:0;color:var(--muted);font-size:12px}
.card-author{background:none;padding:0;color:var(--mint);font-size:12px}
.card-hidden{color:var(--peach)}
.card-needs{margin:0;font-size:12px;color:var(--peach)}
.card-needs a{color:var(--mint)}
.card-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:4px}
.card-actions .play-button{min-width:0;padding:8px 18px}
.card-like[aria-pressed=true]{color:var(--text);border-color:var(--mint)}
.gallery-empty{color:var(--muted);text-align:center;padding:40px 0}
.gallery-more{display:flex;margin:28px auto 0}
@media(max-width:700px){
  .gallery{padding:22px 16px 40px}
  .gallery-heading h1{font-size:34px}
  .gallery-grid{grid-template-columns:1fr}
}