/* justin.fm/fun: the list of small projects (rows rendered from fun/projects.js). */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fun-list{list-style:none;border-top:1px solid var(--hair)}
.fun-list li{border-bottom:1px solid var(--hair)}
.fun-list:not(.ready) a{display:block;padding:22px 0;color:var(--ink);font-size:20px;font-weight:600}
.fun-row{display:grid;grid-template-columns:72px 1fr auto;gap:20px;align-items:center;padding:20px 2px 20px 0}
.fun-thumb{
  width:72px;height:72px;border-radius:10px;display:block;object-fit:cover;background:var(--white);
  image-rendering:pixelated;box-shadow:inset 0 0 0 1px var(--hair),0 0 0 1px var(--hair);
}
.fun-meta{display:flex;gap:8px;color:var(--faint)}
.fun-title{margin-top:4px;color:var(--ink);font-size:22px;font-weight:600;letter-spacing:-.025em;line-height:1.15;transition:color .2s}
.fun-blurb{margin-top:3px;color:var(--muted);font-size:15px;line-height:1.5;max-width:52ch}
.fun-arrow{width:13px;height:13px;color:var(--faint);transition:transform .4s var(--out),color .2s}
.fun-row:hover .fun-title{color:var(--dm)}
.fun-row:hover .fun-arrow{transform:translate(3px,-3px);color:var(--ink)}
.fun-row:focus-visible{outline:2px solid var(--dm);outline-offset:4px;border-radius:4px}
@media (max-width:760px){
  .fun-row{grid-template-columns:60px 1fr auto;gap:14px;padding:16px 0}
  .fun-thumb{width:60px;height:60px;border-radius:8px}
  .fun-title{font-size:19px}
  .fun-blurb{font-size:14px}
}