.cat-mono{font-family:var(--f-mono);font-size:13px;font-weight:400;line-height:1.5;
  letter-spacing:.04em;font-variant-numeric:tabular-nums}

.cat-head__t{max-width:22em}
.cat-head__lead{max-width:52ch;margin-top:24px}

.cat-spread{list-style:none;margin:var(--gap-head) 0 0;padding:0;
  display:flex;flex-wrap:nowrap;align-items:flex-start;gap:var(--gap-block) var(--gap-note)}
.cat-shot{flex:var(--ar) 1 0;min-width:0;margin:0}

.cat-shot__open{display:block;width:100%;aspect-ratio:var(--ar);padding:0;overflow:hidden;
  border-radius:var(--r);background:var(--bg-2);cursor:zoom-in;
  transition:scale var(--press-t,.3s) var(--ease-out)}
.cat-shot__open img{display:block;width:100%;height:100%;object-fit:cover;
  transition:filter .5s var(--ease)}
.cat-shot__open:active{scale:.985;--press-t:60ms}
@media (hover:hover) and (pointer:fine){
  
  .cat-spread:has(.cat-shot__open:hover) .cat-shot__open:not(:hover) img{filter:brightness(.72)}
}

.cat-shot__t{margin:var(--gap-note) 0 0;font-weight:400;font-size:var(--d-s);line-height:1.1;letter-spacing:-.005em}
.cat-shot__n{margin:8px 0 0;color:var(--text-2);text-wrap:balance}

.cat-more{margin:var(--gap-block) 0 0}

@media (max-width:1099px){
  .cat-spread{flex-wrap:wrap}
  .cat-shot--wide{flex-basis:100%}
}

@media (max-width:699px){
  .cat-head__lead{margin-top:16px}
  .cat-shot{flex-basis:100%}
  .cat-shot__t{margin-top:14px}
  .cat-shot__n{margin-top:4px}
}

@media (prefers-reduced-motion:reduce){
  .cat-shot__open,.cat-shot__open img{transition:none}
  .cat-shot__open:active{scale:none}
}