@font-face{font-family:"GT Canon Mono";src:url("../fonts/GT-Canon-Mono-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
:root{--background:#fff;--type:#000;--type-blend:#fff;--frame:24px;font-family:"GT Canon Mono",ui-monospace,monospace;color:var(--type);background:var(--background);font-size:11px}
/* Under wraps the page goes dark: a near-black grey, pale type. The script
   sets the attribute while collection-state.js says the collection is closed;
   putting it on <html> in the markup as well avoids a white flash on load.
   --type-blend is the type colour less the ground, since the header and footer
   are drawn in difference blend. */
:root[data-wraps]{--background:#161616;--type:#f5f5f5;--type-blend:#dfdfdf}
*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--header-height,70px) + 20px);scroll-padding-bottom:calc(var(--footer-height,100px) + 20px)}
body{margin:0;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{color:inherit;cursor:pointer}
a{color:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:1px solid currentColor;outline-offset:6px}
[hidden]{display:none!important}
.site-head{position:fixed;left:0;right:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px var(--frame);color:#f5f5f5;mix-blend-mode:difference;pointer-events:none}
.site-head{top:0;display:block;background:transparent;color:var(--type-blend)}
.site-head>*{pointer-events:auto}
.background-wordmark{position:fixed;inset:0;z-index:0;display:flex;align-items:center;padding:0 clamp(18px,4.6vw,92px);pointer-events:none}
/* the wordmark is a faint tint of the type: white on dark, black on light */
.background-wordmark img{display:block;width:100%;height:auto;margin-top:-3%;filter:brightness(0) invert(1);opacity:.075}
:root[data-type-tone="dark"] .background-wordmark img{filter:brightness(0)}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:20px}
.head-row>a{text-decoration:none}
h1{font-size:inherit;font-weight:400;position:absolute;left:50%;transform:translateX(-50%);margin:0;text-transform:uppercase;letter-spacing:.04em;text-align:center;max-width:calc(100% - 2 * var(--frame) - 11em)}
.site-head button{padding:10px 0 10px 14px;border:0;background:none}
.site-head button span{margin-left:8px}
/* the way out of a preview that was tapped open: top right, under the header */
.preview-close{position:fixed;z-index:4;top:calc(var(--header-height,70px) + 4px);right:calc(var(--frame) - .35em);padding:.15em .35em;border:0;background:none;color:var(--type-blend);mix-blend-mode:difference;font-size:2.2em;line-height:1}
/* filters: a list that drops from its trigger in the header */
.site-head #filter-label{margin-left:0}
#filters{position:fixed;z-index:5;top:calc(var(--header-height,70px) - 8px);right:var(--frame);padding:6px 0 8px 16px;background:var(--background);color:var(--type)}
#category-filters{display:flex;flex-direction:column;border:0;padding:0;margin:0;min-width:0}
.category-option{position:relative;display:flex;align-items:center;gap:7px;min-height:30px;cursor:pointer;white-space:nowrap}
.category-option input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.checkbox-mark{white-space:pre}
.checkbox-mark::before{content:"[ ]"}
.category-option input:checked+.checkbox-mark::before{content:"[x]"}
.category-option:has(input:focus-visible){outline:1px solid currentColor;outline-offset:3px}
/* footer: the homepage's credits, pinned to the bottom of the window */
.site-foot{position:fixed;left:0;right:0;bottom:0;z-index:3;display:flex;justify-content:space-between;align-items:flex-end;gap:2em;padding:16px var(--frame) max(16px,env(safe-area-inset-bottom));color:var(--type-blend);mix-blend-mode:difference;line-height:1.45;pointer-events:none}
.site-foot>*{pointer-events:auto;margin:0}
.site-foot a{text-decoration:none}
.site-foot a:hover{text-decoration:underline;text-underline-offset:.28em;text-decoration-thickness:1px}
.social{position:absolute;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:.6em;list-style:none;padding:0}
.social a{display:block;padding:.3em}
.site-foot .social a:hover{text-decoration:none;opacity:.6}
.social svg{display:block;width:15px;height:15px;fill:currentColor}
.presented{display:flex;align-items:center;gap:.55em}
.fr-link,.site-foot .fr-link:hover{display:inline-flex;align-items:center;text-decoration:none}
.forerunner{height:1.15em;width:auto;display:block;flex:0 0 auto;overflow:visible;transform:translateY(-.04em)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ma-swap{position:relative;display:inline-block;white-space:nowrap}
.ma-text{transition:opacity .18s ease}
.ma-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:.3em;opacity:0;transition:opacity .18s ease;pointer-events:none;white-space:nowrap}
.ma-letter,.ma-object{height:1.02em;width:auto;display:block;fill:currentColor}
@media (hover:hover) and (pointer:fine){.ma-swap:is(:hover,:focus-within) .ma-text{opacity:0}.ma-swap:is(:hover,:focus-within) .ma-logo{opacity:1}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.preview{position:fixed;inset:0;z-index:1;pointer-events:none;visibility:hidden}
.preview img{display:block;width:100%;height:100%;object-fit:var(--background-fit,contain)}
body.is-previewing .preview{visibility:visible}
/* A 3D preview turns the object in the middle of the page, on the page's own
   background. The thumbnail holds its place until the object has loaded. */
.preview canvas{position:absolute;inset:0;width:100%;height:100%;display:none}
body.is-previewing-3d .preview img{position:absolute;left:50%;top:50%;width:58vmin;height:58vmin;object-fit:contain;transform:translate(-50%,-50%)}
body.is-previewing-3d .preview canvas{display:block}
body.is-object-ready .preview img{visibility:hidden}
body.is-previewing-3d .card:not(.is-active) .card-image{outline-color:color-mix(in srgb,var(--type) 16%,transparent)}
body.is-previewing-3d .card .card-number{color:var(--type);text-shadow:none}
.piece-info{position:fixed;z-index:3;left:var(--frame);top:50%;transform:translateY(-50%);width:260px;max-width:calc(100vw - 2 * var(--frame));color:#fff;mix-blend-mode:difference;pointer-events:none;line-height:1.6}
.piece-info p{margin:0}
.piece-info .piece-number{margin-bottom:18px}
.piece-info h2{font:inherit;text-transform:uppercase;margin:0 0 14px}
/* a word struck out: a bar the width the word was */
.redacted{display:inline-block;height:1em;vertical-align:-.12em;background:currentColor}
/* on the dark page a full-strength bar would be the brightest thing on it */
:root[data-wraps] .redacted{opacity:.3}
.piece-info .piece-credit{margin-top:18px}
main{position:relative;z-index:2;padding-top:var(--header-height,70px);padding-bottom:var(--footer-height,100px)}
#collection{position:relative;margin:0;padding:0;list-style:none;min-height:calc(100svh - var(--header-height,70px) - var(--footer-height,100px))}
.card{position:absolute;transform:translate(-50%,-50%)}
.card button{position:relative;display:block;width:100%;height:100%;border:0;background:none;padding:0;color:var(--type)}
.card-image{display:block;width:100%;height:100%;overflow:hidden;outline:1px solid transparent;outline-offset:-1px}
.card img{display:block;width:100%;height:100%;object-fit:fill;transform:scale(1.190476)}
.card[data-source="figma"] img,.card[data-kind] img{object-fit:contain;transform:none}
.card-number{position:absolute;left:0;top:calc(100% + 6px);font-size:10px;line-height:1;pointer-events:none}
body.is-previewing .card:not(.is-active) .card-image{outline-color:rgba(255,255,255,.14)}
body.is-previewing .card:not(.is-active) img{visibility:hidden}
body.is-previewing .card:not(.is-active) .card-number{opacity:.15;color:#fff}
.card.is-active .card-number{color:#fff;text-shadow:0 1px 4px #000}
.card button:focus-visible{outline-offset:8px}
#loading,.no-script{padding:25vh var(--frame);text-align:center}
#empty-state{position:absolute;left:var(--frame);right:var(--frame);top:calc(var(--header-height,150px) + 15vh);text-align:center;line-height:2}
#clear-filters{background:none;border:0;padding:8px;color:inherit;text-decoration:underline;text-underline-offset:4px}
@media(max-width:860px){.background-wordmark img{margin-top:0}}
@media(max-width:700px){:root{--frame:18px}.site-head{padding-top:max(14px,env(safe-area-inset-top));padding-bottom:12px}#filter-label{display:none}.category-option{min-height:36px;font-size:10px}.card-number{font-size:9px}.card button::after{content:"";position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:max(100%,44px);height:max(100%,44px)}
/* the credits stack in a solid bar, icons at its two ends, as on the homepage */
.site-foot{flex-direction:column;align-items:center;text-align:center;gap:.6em;padding:1em var(--frame) calc(env(safe-area-inset-bottom,0px) + 1em);background:var(--type);color:var(--background);mix-blend-mode:normal;font-size:10px;letter-spacing:.03em;pointer-events:auto}
.social{left:var(--frame);right:var(--frame);bottom:auto;top:50%;transform:translateY(-50%);justify-content:space-between}
.social svg{width:17px;height:17px}}
@media(max-width:700px){:root[data-wraps] .site-foot{background:var(--background);color:var(--type);border-top:1px solid color-mix(in srgb,var(--type) 22%,transparent)}}
@media (max-width:700px) and (hover:none){.ma-text{position:absolute;inset:0;opacity:0}.ma-logo{position:static;display:inline-flex;transform:none;opacity:1}}
@media(max-width:700px){body.is-previewing-3d .piece-info{top:auto;bottom:calc(var(--footer-height,100px) + 14px);transform:none}body.is-previewing-3d .preview img{top:38%}}