body.asset-site{margin:0;min-height:100vh;background:#000;color:#fff;font:400 16px/1.45 "Mona Sans",system-ui,sans-serif}
.asset-main,.asset-main *,.asset-search,.asset-search *{box-sizing:border-box}
.asset-main{max-width:1760px;margin:auto;padding:clamp(18px,2.2vw,38px)}
form.asset-search{display:flex;align-items:center;gap:12px;width:100%;max-width:810px;margin:0 auto 24px;background:#000;border:1px solid #535353;border-radius:40px;padding:7px 8px 7px 19px;color:#fff;font:500 16px/1.35 "Mona Sans",system-ui,sans-serif}
form.asset-search:focus-within{border-color:#caff36}
form.asset-search select{appearance:none;cursor:pointer;border:0;border-radius:0;border-right:1px solid #666;background:#000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='white' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 8px center;color:#fff;font:inherit;font-weight:650;width:calc(var(--select-ch) + 16px);max-width:44%;height:32px;padding:0 27px 0 0}
form.asset-search select option{background:#111;color:#fff}
form.asset-search input[type=search]{flex:1;min-width:0;width:0;color:#fff;background:transparent;border:0;border-radius:0;padding:7px 2px;font:inherit;box-shadow:none}
form.asset-search input::placeholder{color:#bbb}
form.asset-search button{display:grid;place-items:center;background:#caff36;border:0;color:#000;width:38px;height:38px;flex:none;border-radius:50%;padding:0;cursor:pointer}
form.asset-search button svg{width:20px;fill:none;stroke:currentColor;stroke-width:2}
.asset-main a{color:inherit;text-decoration:none}
.asset-heading{display:flex;align-items:baseline;gap:1rem;margin:30px 0 16px}
.asset-heading h1{font-size:clamp(32px,4vw,58px);font-weight:650;letter-spacing:-.055em;line-height:1.08;margin:0}
.asset-heading span,.caption span{color:#bcbcbc;font-size:13px}
.asset-filters,.asset-paging{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.asset-filters a,.asset-paging a{border:1px solid #555;border-radius:36px;padding:7px 14px;font-size:14px}
.asset-filters a[aria-current],.asset-filters a:hover,.asset-paging a:hover{background:#caff36;color:#000;border-color:#caff36}
.sample-control{display:flex;align-items:center;gap:12px;margin:16px 0;font-size:14px}
.sample-control input:not([type=checkbox]){background:#121212;border:1px solid #555;color:white;padding:9px 14px;border-radius:8px;max-width:68%;width:320px}
.sample-control input[type=checkbox]{accent-color:#caff36}
.asset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:19px 14px}
.asset-grid article{min-width:0;display:flex;flex-direction:column;background:#121212;border-radius:12px;overflow:hidden}
.asset-grid .artwork,.asset-grid .type-sample{position:relative;display:grid;place-items:center;aspect-ratio:1.45;background:#202020;overflow:hidden}
.asset-grid .artwork img{height:100%;width:100%;position:absolute;inset:0;object-fit:contain;z-index:1;background:#202020}
.asset-grid .artwork[data-tile]:not([data-tile=""]) img{object-fit:cover}
.asset-grid .art-fallback{padding:1em;font-weight:600}
.asset-grid .type-sample{padding:12px;text-align:center;font-size:clamp(24px,3vw,48px);line-height:1.15;background:#fff;color:#000;overflow-wrap:anywhere}
.asset-grid .caption{display:flex;flex-direction:column;gap:4px;padding:12px 14px}
.asset-grid .caption:hover strong{text-decoration:underline}
.asset-grid audio{width:calc(100% - 16px);margin:22px 8px 5px}
.asset-grid .artwork.repeated{background-position:center;background-size:33.333%;background-repeat:repeat}
.asset-grid .artwork.repeated>*{visibility:hidden}
.asset-main>p a{text-decoration:underline}
@media(max-width:600px){.asset-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 8px}.asset-main{padding:16px 12px}.asset-heading{margin:22px 0 12px}.asset-grid .caption{padding:9px;font-size:14px}form.asset-search{gap:7px;padding-left:12px}.asset-filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}.asset-filters a{white-space:nowrap}}

.asset-grid article:is([data-format="Flyers"],[data-format="Posters"],[data-format="CVs & résumés"]) .artwork{aspect-ratio:3/4}
.asset-grid article:is([data-format="Business cards"],[data-format="Presentations"],[data-format="Stock video"]) .artwork{aspect-ratio:16/9}
.asset-grid .artwork.loading::after{content:"";position:absolute;top:10px;right:10px;width:12px;height:12px;border:2px solid #777;border-top-color:#caff36;border-radius:50%;z-index:2;animation:asset-loading 1s linear infinite}
@keyframes asset-loading{to{transform:rotate(1turn)}}
@media(prefers-reduced-motion:reduce){.asset-grid .artwork.loading::after{animation:none}}
