.catalog{background:var(--ink);color:#f4f1e9;overflow-x:clip}
.catalog .site-header{color:var(--ink);grid-template-columns:1fr auto;height:auto;min-height:76px;gap:24px;padding-block:20px}
.catalog nav{font-size:14px}.catalog nav [aria-current]{text-decoration:underline;text-underline-offset:6px}
.catalog-layout{display:grid;grid-template-columns:248px minmax(0,1fr);gap:40px;padding:40px 3vw 60px;max-width:1920px;margin:auto}
.filter-panel{min-width:0;align-self:start;border-top:1px solid #555}
.filter-panel>summary{display:flex;justify-content:space-between;cursor:pointer;padding:18px 0;font:500 16px 'DM Mono',monospace}
.filter-panel[open]>summary span{transform:rotate(45deg)}
.field-label{display:block;font:500 14px 'DM Mono',monospace;margin:12px 0}
.catalog input[type=search]{width:100%;min-width:0;border:1px solid #666;background:#181818;color:white;padding:12px;font-size:16px;border-radius:0}
.filter-hint,.open-note{font:400 14px/1.6 'DM Mono',monospace;color:#bdbdbd;margin:16px 0}
.filter-group{border-bottom:1px solid #444;padding:14px 0}
.filter-group summary{font:500 14px 'DM Mono',monospace;cursor:pointer;padding:6px 0}
.filter-options{padding-top:10px}.filter-option{display:flex;align-items:center;gap:9px;font:400 14px/1.4 'DM Mono',monospace;min-height:38px;cursor:pointer}
.filter-option input{accent-color:var(--pink);width:17px;height:17px;flex-shrink:0}.filter-option small{margin-left:auto;color:#aaa;font-size:12px}.filter-option:has(input:checked){color:var(--pink)}
.accessory-options{max-height:380px;overflow:auto;margin-top:8px;padding-right:6px}.filter-option[hidden]{display:none}
.reset,.pages button{border:1px solid #777;background:transparent;color:inherit;padding:12px;font:500 14px 'DM Mono',monospace;cursor:pointer}.reset{width:100%;margin-top:20px}.reset:hover,.pages button:not(:disabled):hover{background:var(--pink);color:var(--ink)}
.catalog-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}.catalog h1{font-size:clamp(36px,4.5vw,70px);letter-spacing:-.06em;line-height:1;margin:0;scroll-margin-top:120px}.catalog-heading p{font:400 14px 'DM Mono',monospace;margin:0;color:var(--pink)}
#selected-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}#selected-filters:empty{margin:0}#selected-filters button{font:400 14px 'DM Mono',monospace;border:1px solid #666;background:#202020;color:var(--pink);padding:8px 10px;cursor:pointer}
#catalog-message{font:400 16px/1.5 'DM Mono',monospace}#catalog-message:empty{display:none}
.punk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:24px 12px}
.punk-card{display:block;min-width:0}.punk-pixels{display:block;width:100%;aspect-ratio:1;background-color:var(--pink);background-image:url('/assets/fwair-punks-10k-grid-hi.png?pink=ffaacc');background-size:10000% 10000%;image-rendering:pixelated}
.punk-card .punk-number{display:block;font:400 14px 'DM Mono',monospace;padding:9px 0;color:#aaa}.punk-card:hover .punk-number{color:var(--pink)}.punk-card:hover .punk-pixels{outline:2px solid var(--pink);outline-offset:3px}
.pages{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:40px;font:400 14px 'DM Mono',monospace}.pages button:disabled{opacity:.35;cursor:default}
.catalog :focus-visible{outline:2px solid var(--pink);outline-offset:4px}.catalog .site-header :focus-visible{outline-color:var(--ink)}
@media(max-width:900px){.catalog .site-header nav{display:flex;gap:18px}.catalog-layout{grid-template-columns:210px minmax(0,1fr);gap:24px}.punk-grid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}}
@media(max-width:640px){.catalog .site-header{padding:18px 20px;flex-wrap:wrap;display:flex;justify-content:space-between;gap:20px}.catalog .site-header nav{gap:14px;flex-wrap:wrap}.catalog-layout{display:block;padding:24px 20px}.filter-panel{margin-bottom:28px;border-bottom:1px solid #555}.filter-panel form{padding-bottom:20px}.catalog-heading{gap:16px}.punk-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 12px}.pages{gap:12px;flex-wrap:wrap}.pages button{padding:12px 8px}}

.punk-rarity{display:block;color:var(--pink);font:400 12px/1.5 "DM Mono",monospace}.rarity-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}.rarity-toolbar label{font:400 14px "DM Mono",monospace}.rarity-toolbar select{background:#181818;color:white;border:1px solid #666;padding:10px;font:inherit}
