/* The post-game catalog is independent of the first-visit swipe interface. */
.work-catalog[hidden]{display:none!important}
@media(max-width:700px){
 html.vf-work-catalog #work{background:var(--ink)}
 html.vf-work-catalog #work .work-stage{position:absolute;top:0;left:0;width:100%;pointer-events:none!important}
 html.vf-work-catalog #work .work-stage>:not(.work-film){visibility:hidden}
 html.vf-work-catalog #work .work-catalog{position:relative;z-index:4;display:flex;flex-direction:column;min-height:var(--work-stage-height);padding:104px var(--vf-gutter) max(24px,env(safe-area-inset-bottom));background:var(--ink);color:var(--vf-cream);font-family:var(--vf-body);opacity:var(--film-copy-alpha,1)}
 .work-catalog-title{margin:0;font:900 clamp(50px,14.8vw,86px)/.9 var(--vf-display);letter-spacing:var(--vf-headline-spacing);text-transform:uppercase}
 .work-catalog-title:focus{outline:none}
 .work-catalog-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:24px 0 18px}
 .work-catalog-filter{display:grid;place-items:center;min-width:0;min-height:36px;padding:7px 5px;border:1px solid transparent;border-radius:999px;background:linear-gradient(var(--ink),var(--ink)) padding-box,linear-gradient(155deg,#f1f2e88c,#4d52477a 45%,#adb5a3a8) border-box;color:var(--vf-cream);font:500 11px/1.4 var(--vf-body);transition:background .2s ease,color .2s ease}
 .work-catalog-filter[aria-pressed=true]{background:var(--vf-acid);border-color:var(--vf-acid);color:var(--ink)}
 .work-catalog-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 10px;margin:0;padding:0;list-style:none}
 .work-catalog-card{min-width:0}
 .work-catalog-card[hidden]{display:none!important}
 .work-catalog-open{position:relative;display:block;width:100%;aspect-ratio:3/4;overflow:hidden;padding:0;border:0;border-radius:8px;background:#20221f;color:var(--vf-cream);text-align:left;isolation:isolate;touch-action:manipulation}
 .work-catalog-image{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
 .work-catalog-open::after{content:'';position:absolute;inset:58% 0 0;background:linear-gradient(transparent,#101110b3);pointer-events:none}
 .work-catalog-learn{position:absolute;z-index:1;left:12px;right:8px;bottom:13px;font:500 11px/1.4 var(--vf-body);letter-spacing:.04em;text-transform:uppercase;text-shadow:0 1px 8px #0008}
 .work-catalog-caption{padding:9px 3px 0}
 .work-catalog-caption h3{margin:0;color:var(--vf-cream);font:600 15px/1.35 var(--vf-body)}
 .work-catalog-caption p{margin:3px 0 0;color:#a8ada2;font:400 11px/1.45 var(--vf-body)}
 .work-catalog-footer{padding-top:30px;margin-top:auto}
 .work-catalog-brief{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:12px 20px;border:1px solid transparent;border-radius:999px;background:linear-gradient(var(--vf-acid),var(--vf-acid)) padding-box,linear-gradient(155deg,#f5ffd3,#97b52a 45%,#e7ffa3) border-box;color:var(--ink);font:500 14px/1.5 var(--vf-body);touch-action:manipulation}
 .work-catalog .work-catalog-down{position:relative;left:auto;bottom:auto;z-index:auto;transform:none;margin:20px auto 0}
 .work-catalog :is(button,a):focus-visible{outline:2px solid var(--vf-acid);outline-offset:4px}
 .work-catalog .work-catalog-filter[aria-pressed=true]:focus-visible,.work-catalog .work-catalog-brief:focus-visible{outline-color:var(--vf-cream)}
}
@media(max-width:360px){.work-catalog-filters{gap:5px}.work-catalog-filter{font-size:10px}.work-catalog-learn{left:9px;font-size:10px}.work-catalog-caption h3{font-size:14px}}
@media(max-width:700px) and (prefers-reduced-motion:reduce){.work-catalog-filter{transition:none}}
