/* Category catalogues share the studio's type, colours and navigation. */
.catalogue-page{padding:clamp(36px,6vw,80px) var(--gutter) clamp(64px,8vw,112px)}
.catalogue-heading{max-width:850px}
.catalogue-heading>a.label:hover{color:var(--signal)}
.catalogue-heading h1{font:clamp(40px,8vw,112px)/1 var(--display);text-transform:uppercase;letter-spacing:-.035em;overflow-wrap:anywhere;margin:20px 0}
.catalogue-heading>p{max-width:58ch;color:var(--ink-2);font-size:clamp(17px,1.8vw,21px)}
.catalogue-heading>.go{margin-top:20px}
.catalogue{margin-top:clamp(32px,4vw,56px);border-top:1px solid var(--rule)}
/* One toolbar row: filter chips on the left, search on the right. */
.catalogue-controls{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding-top:24px}
.catalogue-controls[hidden],.catalogue-card[hidden],.catalogue-empty[hidden]{display:none}
.catalogue-filters{display:flex;flex-wrap:wrap;gap:8px}
.catalogue-filters button,.catalogue-empty button{min-height:40px;padding:8px 14px;border:1px solid var(--rule);border-radius:0;background:none;color:var(--ink);font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.catalogue-filters button:hover,.catalogue-empty button:hover{border-color:var(--ink)}
.catalogue-filters button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip-count{color:var(--ink-2)}
.catalogue-filters button[aria-pressed=true] .chip-count{color:var(--rule)}
.catalogue-search{flex:0 1 300px;min-width:0}
.catalogue-search input{width:100%;min-height:40px;border:1px solid var(--rule);border-radius:0;background:var(--paper-2);color:var(--ink);padding:8px 12px;font:400 15px/1.4 var(--sans)}
.catalogue-search input::placeholder{color:var(--ink-2);opacity:1}
.catalogue-search input:hover{border-color:var(--ink-2)}
.catalogue-controls :is(input,button):focus-visible,.catalogue-empty button:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.catalogue-count{padding:20px 0;font:500 12px/1.4 var(--mono);color:var(--ink-2)}
/* Six columns: picture cards take two, or three when the grid also holds text-only rows. */
.catalogue-grid{--cols:6;--span:2;--feature-span:3;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--gap)}
.catalogue-grid:has(.catalogue-copy:first-child){--span:var(--feature-span);row-gap:10px}
.catalogue-card{position:relative;grid-column:span var(--span);min-width:0;border:1px solid var(--rule);background:var(--paper-2);scroll-margin-top:24px;transition:border-color .2s}
.catalogue-card:hover{border-color:var(--ink-2)}
.catalogue-card:target{border-color:var(--signal)}
.catalogue-card article{height:100%;display:flex;flex-direction:column}
.catalogue-image{background:var(--paper);border-bottom:1px solid var(--rule);aspect-ratio:4/3;overflow:hidden}
.catalogue-image img{width:100%;height:100%;object-fit:contain;transition:transform .5s var(--ease)}
.catalogue-card:hover .catalogue-image img{transform:scale(1.03)}
/* The card's link covers the whole card. */
.catalogue-copy>.go::after{content:"";position:absolute;inset:0}
.catalogue-card:hover .go{background-size:100% 2px;border-color:transparent}
.catalogue-copy{flex:1;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(18px,2vw,28px);gap:12px}
.catalogue-meta{width:100%;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:8px}
.catalogue-meta>.code{color:var(--signal)}
.catalogue-copy h2{font:clamp(24px,2.2vw,32px)/1.1 var(--display);text-transform:uppercase;letter-spacing:-.02em;overflow-wrap:anywhere}
.catalogue-pitch{font-size:19px;line-height:1.4}
.catalogue-description{color:var(--ink-2);font-size:16px;line-height:1.6}
.catalogue-copy>.go{margin-top:auto;padding-top:20px;font-size:15px}
.catalogue-empty{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:32px 0;border-top:1px solid var(--rule);color:var(--ink-2)}
/* A card without an image (its copy comes first) is a full-width row; a lone card is a wide feature. */
.catalogue-card:has(.catalogue-copy:first-child),.catalogue-card:only-child{grid-column:1/-1}
@media(min-width:901px){
  .catalogue-card:has(.catalogue-copy:first-child) .catalogue-copy{display:grid;grid-template-columns:72px minmax(0,3fr) minmax(0,6fr) auto;grid-template-areas:"meta label desc go" "meta name desc go";column-gap:var(--gap);row-gap:2px;align-items:center;padding:18px 24px}
  .catalogue-card:has(.catalogue-copy:first-child) .catalogue-meta{grid-area:meta;width:auto;margin:0}
  .catalogue-card:has(.catalogue-copy:first-child) .label{grid-area:label}
  .catalogue-card:has(.catalogue-copy:first-child) h2{grid-area:name;font-size:22px}
  .catalogue-card:has(.catalogue-copy:first-child) .catalogue-description{grid-area:desc}
  .catalogue-card:has(.catalogue-copy:first-child) .go{grid-area:go;margin:0;padding-top:6px}
  .catalogue-card:only-child article{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .catalogue-card:only-child .catalogue-image{display:flex;align-items:center;aspect-ratio:auto;border-bottom:0;border-right:1px solid var(--rule)}
  .catalogue-card:only-child .catalogue-image img{height:auto}
  .catalogue-card:only-child .catalogue-copy{justify-content:center;padding:clamp(28px,4vw,64px)}
  .catalogue-card:only-child h2{font-size:clamp(32px,3.6vw,56px);line-height:.95}
  .catalogue-card:only-child .catalogue-pitch{font-size:clamp(20px,1.8vw,26px);line-height:1.3}
  .catalogue-card:only-child .go{margin-top:12px}
}
@media(min-width:1600px){.catalogue-grid{--cols:12;--span:3;--feature-span:6}}
@media(max-width:1100px){.catalogue-grid{--cols:2;--span:1;--feature-span:1}}
@media(max-width:600px){.catalogue-grid{--cols:1}.catalogue-search{flex-basis:100%;order:-1}.catalogue-meta .status{font-size:11px}}