/* COLLECTORS: the wall of names. Royal hero, white plaques with the house hard shadow, a colour per body of work */
.cw-hero{background:var(--royal);color:#fff;border-bottom:3px solid var(--fg);padding-block:clamp(2.5rem,6vw,4.5rem)}
html.code .cw-hero{background:var(--night)}
.cw-hgrid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:2rem;align-items:end}
.cw-htxt{display:grid;gap:1rem}
.cw-htxt .kick{color:var(--mint)}
.cw-htxt h2{font-size:clamp(2.2rem,6vw,4.6rem);color:#fff}
.cw-htxt p{max-width:52ch;margin:0;color:var(--sky)}
.cw-htxt .hand{color:var(--mint)}
.cw-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:3px solid #fff;box-shadow:6px 6px 0 var(--ink)}
.cw-stats div{display:grid;gap:.2rem;padding:1rem;border-right:3px solid #fff;border-bottom:3px solid #fff}
.cw-stats div:nth-child(2n){border-right:0}.cw-stats div:nth-child(n+3){border-bottom:0}
.cw-stats b{font:900 clamp(1.8rem,4vw,2.8rem)/1 var(--display);font-stretch:125%;font-variant-numeric:tabular-nums}
.cw-stats span{font:600 .72rem var(--body);text-transform:uppercase;letter-spacing:.12em;color:var(--sky)}
@media(max-width:820px){.cw-hgrid{grid-template-columns:1fr}}

.cw-band{display:grid;gap:1.4rem}
.cw-sub{font:600 .74rem var(--mono);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.cw-bar{display:flex;height:8px;border:2px solid var(--fg);background:var(--card);min-width:0}
.cw-bar i{display:block;min-width:3px}

/* podium: second, first, third */
.cw-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;align-items:end}
.cw-pod{order:var(--o);display:grid;justify-items:start;gap:.35rem;text-align:left;padding:1rem;border:3px solid var(--fg);background:var(--card);color:var(--fg);box-shadow:6px 6px 0 var(--fg);cursor:pointer;font:inherit;position:relative;transition:transform .2s var(--pour),box-shadow .2s;min-width:0}
.cw-pod:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--fg)}
.cw-pod[data-i="0"]{background:var(--mint);color:var(--ink);padding-top:1.6rem}
html.code .cw-pod[data-i="0"]{background:var(--ink);color:var(--mint);border-color:var(--mint)}
.cw-pod .cw-pn{position:absolute;right:.7rem;top:.4rem;font-size:3.2rem;line-height:1;color:var(--royal);opacity:.9}
.cw-pav{width:96px;height:96px;object-fit:cover;border:3px solid var(--fg);background:var(--paper)}
.cw-pod[data-i="0"] .cw-pav{width:128px;height:128px}
.cw-pod b{font:900 1.15rem/1.05 var(--display);font-stretch:125%;text-transform:uppercase;max-width:100%;overflow-wrap:anywhere}
.cw-pod .cw-big{font-size:clamp(2.4rem,5vw,3.6rem);line-height:.9;color:var(--royal)}
html.code .cw-pod .cw-big,html.code .cw-pod .cw-pn{color:var(--mint)}
.cw-pod .cw-bar{width:100%}
@media(max-width:720px){.cw-podium{grid-template-columns:1fr}.cw-pod{order:0;grid-template-columns:auto minmax(0,1fr);column-gap:1rem}.cw-pod>*:not(.cw-pav):not(.cw-pn){grid-column:2}.cw-pod .cw-pav{grid-row:1/span 5}.cw-pav,.cw-pod[data-i="0"] .cw-pav{width:72px;height:72px}.cw-pod .cw-bar{grid-column:1/-1!important}}

/* controls */
.cw-ctl{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;justify-content:space-between}
.cw-ctl .srch{flex:1 1 260px;max-width:420px}
.cw-fams .chip{display:inline-flex;align-items:center;gap:.4rem}
.cw-fams .chip i{width:10px;height:10px;border:1.5px solid var(--fg);display:inline-block}
.cw-fams .chip small{font:600 .7rem var(--mono);opacity:.7}
.cw-count{color:var(--muted);margin:0}

/* the wall */
.cw-wall{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}
.cw-p{min-width:0}
.cw-wall.list .cw-p.on{grid-column:1/-1}
.cw-row{width:100%;display:grid;grid-template-columns:auto 52px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:.8rem;row-gap:.55rem;align-items:center;text-align:left;padding:.7rem .8rem;border:3px solid var(--fg);background:var(--card);color:var(--fg);box-shadow:4px 4px 0 var(--fg);font:inherit;cursor:pointer;transition:transform .15s,box-shadow .15s}
.cw-row:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--fg)}
.cw-p.on .cw-row{background:var(--fg);color:var(--bg);box-shadow:4px 4px 0 var(--royal)}
.cw-p.on .cw-sub{color:inherit;opacity:.75}
.cw-rk{font:800 .8rem var(--mono);min-width:2.2ch;text-align:right;color:var(--muted)}
.cw-p.on .cw-rk{color:inherit}
.cw-av{width:52px;height:52px;object-fit:cover;border:2px solid var(--fg);background:var(--paper)}
.cw-noav{display:grid;place-items:center;background:var(--sky)}
.cw-noav img{width:60%;height:60%}
.cw-who{display:grid;min-width:0}
.cw-who b{font-weight:800;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cw-n{display:grid;justify-items:end;line-height:1}
.cw-n b{font-size:1.9rem}
.cw-n span{font:600 .62rem var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.cw-p.on .cw-n span{color:inherit;opacity:.75}
.cw-row .cw-bar{grid-column:1/-1}
.cw-empty{grid-column:1/-1;font-family:var(--hand);font-size:1.4rem;color:var(--royal);padding:2rem 0}
.cw-more{display:flex;justify-content:center}

/* just the list */
.cw-wall.list{grid-template-columns:1fr;gap:0}
.cw-wall.list .cw-row{box-shadow:none;border-width:0 0 2px;padding:.45rem .3rem;grid-template-columns:3ch 32px minmax(0,1fr) minmax(80px,180px) 5.5rem;grid-template-rows:auto}
.cw-wall.list .cw-row:hover{transform:none;background:var(--paper)}
html.code .cw-wall.list .cw-row:hover{background:var(--night)}
.cw-wall.list .cw-av{width:32px;height:32px;border-width:1.5px}
.cw-wall.list .cw-row .cw-bar{grid-column:4;grid-row:1}
.cw-wall.list .cw-n{grid-column:5;grid-row:1;grid-auto-flow:column;align-items:baseline;gap:.4rem}
.cw-wall.list .cw-n b{font-size:1.2rem}
.cw-wall.list .cw-n span{display:none}
.cw-wall.list .cw-p.on .cw-row{box-shadow:none}
@media(max-width:600px){.cw-wall.list .cw-row{grid-template-columns:3ch 32px minmax(0,1fr) 3.5rem}.cw-wall.list .cw-row .cw-bar{display:none}.cw-wall.list .cw-n{grid-column:4}}

/* the drawer */
.cw-dr{border:3px solid var(--fg);border-top:0;background:var(--card);padding:1rem;display:grid;gap:1rem;box-shadow:4px 4px 0 var(--fg)}
.cw-wall.list .cw-dr{box-shadow:none;border-width:0 0 3px;margin-bottom:.6rem}
.cw-hon{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:center;text-decoration:none;color:inherit;background:var(--mint);color:var(--ink);border:2px solid var(--fg);padding:.6rem;max-width:560px}
html.code .cw-hon{background:var(--ink);color:var(--mint);border-color:var(--mint)}
.cw-hon img{width:150px;aspect-ratio:16/9;object-fit:cover;border:2px solid var(--fg)}
.cw-hon span{display:grid;gap:.2rem;min-width:0}
.cw-hon b{font:900 1.05rem/1.1 var(--display);font-stretch:125%;text-transform:uppercase}
.cw-hon .kick{color:inherit}
.cw-hold{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:.8rem}
.cw-hold li{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:.8rem;align-items:start;border:2px solid var(--fg);padding:.6rem}
.cw-hold li.cur{border-style:dashed;opacity:.85}
.cw-hold li>img,.cw-noimg{width:72px;height:72px;object-fit:cover;border:2px solid var(--fg);display:block}
.cw-hold li>div{display:grid;gap:.3rem;min-width:0}
.cw-hold li b{font-weight:800;line-height:1.2}
.cw-hold .cw-q{font-size:1.8rem;line-height:1;color:var(--royal)}
html.code .cw-hold .cw-q{color:var(--mint)}
.cw-ids{display:flex;flex-wrap:wrap;gap:.25rem}
.cw-ids a,.cw-ids span{font:600 .68rem var(--mono);border:1.5px solid var(--line);padding:.05rem .3rem;text-decoration:none;color:var(--muted)}
.cw-ids a:hover{border-color:var(--royal);color:var(--royal)}
.cw-go{display:flex;flex-wrap:wrap;gap:.8rem;font:700 .76rem var(--body)}
.cw-go a,.cw-links a{color:var(--royal)}
html.code .cw-go a,html.code .cw-links a{color:var(--mint)}
.cw-links{display:flex;flex-wrap:wrap;gap:1.2rem;font:700 .82rem var(--body)}
@media(max-width:520px){.cw-hold{grid-template-columns:1fr}.cw-hon{grid-template-columns:1fr}.cw-hon img{width:100%}.cw-wall{grid-template-columns:1fr}}

.cw-foot{display:grid;grid-template-columns:minmax(0,1.5fr) auto;gap:2rem;align-items:start;border-top:3px solid var(--fg);padding-top:1.6rem;margin-top:1rem}
.cw-foot p{color:var(--muted);max-width:68ch}
.cw-foot .placard{gap:.4rem}
.cw-foot #cwd{margin-top:.6rem}
@media(max-width:760px){.cw-foot{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.cw-pod,.cw-row{transition:none}}

/* the sheet (grid mode) */
.cw-lock{overflow:hidden}
.cw-sheet{position:fixed;inset:0;z-index:95;background:rgba(6,10,22,.6);display:grid;place-items:center;padding:clamp(.5rem,3vw,2rem);animation:cwin .25s var(--pour) both}
@keyframes cwin{from{opacity:0}to{opacity:1}}
.cw-sbox{width:min(1040px,100%);max-height:100%;overflow:auto;background:var(--card);border:3px solid var(--fg);box-shadow:8px 8px 0 var(--royal)}
html.code .cw-sbox{box-shadow:8px 8px 0 var(--mint)}
.cw-shead{position:sticky;top:0;z-index:1;display:grid;grid-template-columns:52px minmax(0,1fr) auto auto;gap:.9rem;align-items:center;padding:.8rem 1rem;background:var(--fg);color:var(--bg)}
.cw-shead .cw-sub,.cw-shead .cw-n span,.cw-shead .kick{color:inherit;opacity:.75}
.cw-shead .cw-who b{font:900 1.2rem/1.05 var(--display);font-stretch:125%;text-transform:uppercase;white-space:normal;overflow-wrap:anywhere}
.cw-x{width:40px;height:40px;border:2px solid var(--bg);background:transparent;color:inherit;font-size:1rem;font-weight:900;cursor:pointer}
.cw-sbox .cw-dr{border:0;box-shadow:none}
@media(max-width:520px){.cw-shead{grid-template-columns:40px minmax(0,1fr) auto}.cw-shead .cw-n{display:none}.cw-shead .cw-av{width:40px;height:40px}}
@media(prefers-reduced-motion:reduce){.cw-sheet{animation:none}}

/* the trail: one collector's wallets and how the pieces moved between them */
.cw-trail{border:2px solid var(--fg);padding:.8rem;display:grid;gap:.6rem;background:var(--paper)}
html.code .cw-trail{background:var(--ink)}
.cw-th{display:grid;gap:.15rem}
.cw-th b{font:900 1.05rem/1.1 var(--display);font-stretch:125%;text-transform:uppercase}
.cw-tsvg{width:100%;max-width:640px;height:auto;justify-self:center;overflow:visible}
.cw-tn circle,.cw-tn rect{fill:var(--card);stroke:var(--fg);stroke-width:3}
.cw-tn.main circle,.cw-tn.main rect{fill:var(--mint)}
.cw-tn.empty circle,.cw-tn.empty rect{fill:var(--paper);stroke-dasharray:4 3}
.cw-tc{font:900 15px var(--display);text-anchor:middle;fill:var(--ink)}
.cw-tl{font:700 11px var(--mono);text-anchor:middle;fill:var(--fg)}
.cw-tk{font:600 9.5px var(--body);text-transform:uppercase;letter-spacing:.1em;text-anchor:middle;fill:var(--muted)}
html.code .cw-tn.main circle,html.code .cw-tn.main rect{fill:var(--mint)}
html.code .cw-tn:not(.main) .cw-tc{fill:var(--mint)}
.cw-tw{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.cw-tw li{display:grid;grid-template-columns:12px minmax(0,auto) minmax(0,1fr);gap:.6rem;align-items:center;font-size:.85rem}
.cw-tw li i,.cw-tkey i{display:inline-block;width:12px;height:4px}
.cw-tw a{color:var(--royal);font:700 .8rem var(--mono)}
html.code .cw-tw a{color:var(--mint)}
.cw-tw .cw-sub{white-space:normal}
.cw-tkey{display:flex;flex-wrap:wrap;gap:.9rem;font:600 .7rem var(--mono);color:var(--muted)}
.cw-tkey i{margin-right:.35rem;vertical-align:middle}
@media(max-width:600px){.cw-tw li{grid-template-columns:12px minmax(0,1fr)}.cw-tw .cw-sub{grid-column:2}}