/* catalog — ported from catalog.html */
.cat-head{padding:clamp(130px,20vh,190px) var(--gutter) clamp(40px,6vh,70px);display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,6vw,100px);align-items:end}
.cat-head .crumbs{margin-bottom:28px}
.cat-title{overflow:hidden}
.cat-title .h-xl{font-size:clamp(52px,8.4vw,150px)}
.cat-head .lead{margin-top:26px}
.cat-banner{position:relative;aspect-ratio:16/11;overflow:hidden;border-radius:0 var(--arch) 0 0;background:var(--ink-2)}
.cat-banner img{position:absolute;inset:0;transform:scale(1.15)}
.cat-count{position:absolute;left:18px;bottom:18px;background:var(--sand);padding:8px 12px}

.cats-nav{display:flex;gap:clamp(18px,3vw,44px);flex-wrap:wrap;padding:0 var(--gutter);border-bottom:1px solid var(--line)}
.cats-nav a{position:relative;padding:20px 0;font-size:clamp(18px,1.7vw,24px);font-weight:300;letter-spacing:-.03em;color:var(--muted);transition:color .5s}
.cats-nav a sup{font-size:10px;letter-spacing:.06em;margin-left:4px;font-weight:500}
.cats-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.cats-nav a:hover{color:var(--ink)}
.cats-nav a.on{color:var(--ink)}
.cats-nav a.on::after{transform:scaleX(1)}

.toolbar{position:sticky;top:0;z-index:20;background:var(--sand);display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px var(--gutter);border-bottom:1px solid var(--line);transition:top .8s var(--ease)}
body:has(.header.solid:not(.hide)) .toolbar{top:73px}
.subs{display:flex;gap:8px;flex-wrap:wrap}
.tools{display:flex;align-items:center;gap:14px;flex:none}
.select{position:relative}
.select select{appearance:none;background:none;border:1px solid var(--line);border-radius:999px;padding:11px 38px 11px 18px;font:500 12px var(--font);letter-spacing:.04em;cursor:pointer;color:var(--ink)}
.select::after{content:"";position:absolute;right:16px;top:50%;width:6px;height:6px;border-right:1.5px solid;border-bottom:1.5px solid;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.density{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.density button{background:none;border:0;padding:10px 12px;cursor:pointer;display:flex;gap:2px;align-items:center;opacity:.35;transition:opacity .4s}
.density button i{display:block;width:4px;height:12px;background:currentColor}
.density button.on{opacity:1}
@media (max-width:760px){.density{display:none}.toolbar{flex-direction:column;align-items:stretch}.tools{justify-content:space-between}}

.results{padding:clamp(40px,6vh,70px) var(--gutter) clamp(100px,16vh,160px);min-height:60vh}
.results-meta{display:flex;justify-content:space-between;margin-bottom:34px;color:var(--muted)}
.empty{display:none;text-align:center;padding:12vh 0}
.empty .h-m{margin-bottom:18px}
.empty .lead{margin:0 auto 34px}

/* Filter drawer */
.drawer-bg{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:110;opacity:0;visibility:hidden}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);background:var(--sand);z-index:111;transform:translateX(100%);display:flex;flex-direction:column}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:28px 32px;border-bottom:1px solid var(--line)}
.drawer-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:10px 32px 30px}
.fgroup{padding:24px 0;border-bottom:1px solid var(--line)}
.fgroup h4{margin-bottom:16px;color:var(--olive)}
.fopts{display:flex;flex-wrap:wrap;gap:8px}
.drawer-foot{display:flex;gap:12px;padding:22px 32px;border-top:1px solid var(--line)}
.drawer-foot .btn{flex:1;justify-content:center;padding:18px}
.close-x{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:none;cursor:pointer;font-size:18px;transition:transform .6s var(--ease)}
.close-x:hover{transform:rotate(90deg)}
.fcount{display:inline-grid;place-items:center;min-width:18px;height:18px;border-radius:9px;background:var(--olive);color:var(--sand);font-size:10px;padding:0 5px}
.fcount:empty{display:none}

.help{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:end;padding:clamp(90px,15vh,160px) var(--gutter)}
.help-actions{display:flex;gap:14px;flex-wrap:wrap;justify-self:end}
@media (max-width:860px){.cat-head,.help{grid-template-columns:1fr}.help-actions{justify-self:start}}