/* Audio collection categories. */
.audio-page-heading{align-items:center}
.audio-sections{gap:28px;padding:0;flex-wrap:wrap}
.audio-sections a{border-bottom:1px solid var(--rule);padding:8px 0}
@media(hover:hover){.audio-sections a:hover{border-color:currentColor}}
.audio-category{scroll-margin-top:32px;padding-bottom:56px}
.audio-category + .audio-category{border-top:1px solid var(--rule);padding-top:28px}
.audio-category > h2{font-size:clamp(1.3rem,2vw,1.75rem);font-weight:400;letter-spacing:-.035em;line-height:1.2;margin-bottom:24px}
.audio-category .audio-catalog{grid-template-columns:repeat(4,minmax(0,1fr));padding-bottom:0}
/* Tablets keep the desktop's column counts (4 posters, 3 wide): three columns left a lone card on its own row in
   the shorter categories (the user, 2026-10-06); only the gaps tighten. */
@media(min-width:701px) and (max-width:1100px){.audio-category .audio-catalog{gap:36px 24px}}
@media(max-width:700px){
  .audio-page-heading{align-items:flex-start;gap:20px}
  .audio-sections{width:auto;gap:24px}
  .audio-category{padding-bottom:40px}
  .audio-category + .audio-category{padding-top:24px}
  .audio-category > h2{margin-bottom:20px}
  .audio-category .audio-catalog{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 18px}
}

/* Project posters and podcast covers. Card images are pre-cropped to these ratios by tools/build-thumbnails.py. */
.film-catalog .project-title,.podcast-catalog .project-title{display:block}
.film-catalog .project-title h3,.podcast-catalog .project-title h3{overflow-wrap:break-word;margin-bottom:6px}
.film-catalog .project-credit,.podcast-catalog .project-credit{font-size:.875rem;line-height:1.5}
.film-catalog .media,.podcast-catalog .media{display:block;position:relative;overflow:hidden;background:transparent;border:0}
.film-catalog .media{aspect-ratio:2/3}
.podcast-catalog .media{aspect-ratio:1}
.film-catalog .media img,.podcast-catalog .media img{display:block;width:100%;height:100%}
.film-catalog .media img{object-fit:cover;object-position:center}
.podcast-catalog .media img{object-fit:contain}

/* Commercial cards link to the original posts and videos. */
.commercial-catalog .project-title{display:block}
.commercial-catalog .project-title h3{overflow-wrap:break-word;margin-bottom:6px}
.commercial-catalog .project-credit{font-size:.875rem;line-height:1.5}
.commercial-catalog .media{display:block;aspect-ratio:16/10;border:0;background:transparent}
.commercial-catalog .media img{display:block;width:100%;height:100%;object-fit:cover}

/* Wide commercial cards and the opening and closing Shorts rows. */
.audio-category .commercial-catalog,.audio-category .shorts-featured{grid-template-columns:repeat(3,minmax(0,1fr))}
.shorts-featured .media{aspect-ratio:16/10}
.shorts-featured .media img{object-fit:cover}
.shorts-remainder,.shorts-final-row{margin-top:44px}
@media(max-width:700px){
  .audio-category .commercial-catalog,.audio-category .shorts-featured{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shorts-remainder,.shorts-final-row{margin-top:36px}
}

/* Content types and credits use the regular text color. */
.audio-category .project-type{margin:8px 0 0;color:var(--ink);font-size:.75rem;line-height:1.4;letter-spacing:.02em}
.audio-category .project .project-credit{margin:2px 0 0;color:var(--ink);font-size:.75rem;line-height:1.4;letter-spacing:.02em}
/* Phones: captions at 13px, and a little tighter grid on the smallest screens. */
@media(max-width:700px){.audio-category .project-type,.audio-category .project .project-credit{font-size:.8125rem}}
@media(max-width:350px){.audio-category .audio-catalog{gap:28px 14px}}