/* Cocopunks · Direction B · shared tokens + chrome (copied from index.html) + subpages */
:root{--paper:#ECE8DF;--ink:#111;--red:#FF3B1F;--tape:rgba(235,224,190,.82);--card:#F4F1EA;
--disp:"Anton","CP Disp",Impact,sans-serif;--mono:"Space Mono","CP Sans",ui-monospace,monospace;--cn:"CP Sans",sans-serif;--tagf:"Permanent Marker","CP Brush",cursive;
--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
body{background:var(--paper);color:var(--ink);font:400 14px/1.5 var(--mono)}
body::after{content:"";position:fixed;inset:0;background-image:var(--grain);opacity:.22;pointer-events:none;z-index:50;mix-blend-mode:multiply}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,select,input{font:inherit;color:inherit;background:none;border:0;border-radius:0}
button{cursor:pointer}
.ico{width:20px;height:20px;flex:none}
.wrap{max-width:1380px;margin:0 auto;padding:0 36px}
.cn{font-family:var(--cn)}
/* nav (same as home) */
header{border-bottom:3px solid var(--ink);position:relative;z-index:6;background:var(--paper)}
.nav{display:flex;align-items:center;justify-content:space-between;height:66px}
.logo{font:400 30px/1 var(--disp);letter-spacing:.01em;display:flex;align-items:center;gap:10px}
.logo b{background:var(--ink);color:var(--paper);padding:2px 7px 0;font-weight:400;transform:rotate(-3deg);display:inline-block}
.links{display:flex;gap:6px}
.links a{display:flex;align-items:center;gap:8px;padding:8px 14px;font:700 12px var(--mono);text-transform:uppercase;letter-spacing:.06em;border:2px solid transparent}
.links a:hover{border-color:var(--ink)}
.links a.on{background:var(--ink);color:var(--paper)}
.links a small{font:400 13px var(--cn);letter-spacing:0;opacity:.6}
.tools{display:flex;gap:14px;align-items:center;font:700 12px var(--mono)}

/* i18n: one language visible at a time */
html[lang=en] [data-l=zh],html[lang=zh-CN] [data-l=en]{display:none!important}
.lang{border:2px solid var(--ink);padding:4px 8px;font:700 12px var(--mono);cursor:pointer;color:inherit;background:none}
.lang span{opacity:.4}html[lang=en] .lang .o-en,html[lang=zh-CN] .lang .o-zh{opacity:1}
.srch{display:grid;place-items:center}
html[lang=zh-CN] body{letter-spacing:0}
.burger{display:none}
.ticker{background:var(--ink);color:var(--paper);overflow:hidden;white-space:nowrap;font:400 15px/34px var(--disp);letter-spacing:.06em}
.ticker div{display:inline-block;animation:tick 40s linear infinite}
.ticker i{color:var(--red);font-style:normal;margin:0 18px}
@keyframes tick{to{transform:translateX(-50%)}}
footer{background:var(--ink);color:var(--paper);padding:60px 0 40px;overflow:hidden}
footer .huge{font:400 min(19vw,280px)/.8 var(--disp);color:transparent;-webkit-text-stroke:2px var(--paper);white-space:nowrap;letter-spacing:-.01em}
footer .bar{display:flex;justify-content:space-between;align-items:center;margin-top:40px;font:700 12px var(--mono);text-transform:uppercase}
footer .soc{display:flex;gap:18px}
.btn{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:var(--paper);padding:16px 22px;font:700 13px var(--mono);text-transform:uppercase;box-shadow:5px 5px 0 var(--paper);width:max-content}
.btn.r{box-shadow:5px 5px 0 var(--red)}
section{border-bottom:3px solid var(--ink)}
.sh{display:flex;align-items:flex-end;justify-content:space-between;padding:70px 0 34px;gap:20px}
.sh h2{font:400 120px/.82 var(--disp);letter-spacing:-.01em;text-transform:uppercase}
.sh h2 small{font:400 44px var(--cn);margin-left:16px;vertical-align:top;color:var(--red)}
.sh .ix{font:700 12px var(--mono);text-transform:uppercase;display:flex;gap:10px;align-items:center}
.sh .ix a{border:2px solid currentColor;width:44px;height:44px;display:grid;place-items:center}
.sh.s h2{font-size:84px}.sh.s h2 small{font-size:32px}
/* page head */
.ph{border-bottom:3px solid var(--ink);position:relative;overflow:hidden}
.ph .halftone{position:absolute;inset:0;background-image:radial-gradient(var(--ink) 1.1px,transparent 1.4px);background-size:7px 7px;opacity:.12;-webkit-mask-image:linear-gradient(115deg,transparent 45%,#000 85%);mask-image:linear-gradient(115deg,transparent 45%,#000 85%)}
.ph .wrap{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:30px;padding-top:54px;padding-bottom:34px}
.ph h1{font:400 min(15vw,200px)/.8 var(--disp);letter-spacing:-.02em;text-transform:uppercase}
.ph h1 small{font:400 .3em var(--cn);color:var(--red);margin-left:.25em;vertical-align:top;letter-spacing:0}
.ph .lede{font:700 13px/1.6 var(--mono);text-transform:uppercase;max-width:330px;text-align:right}
.ph .lede p{margin:0}
.ph .count{display:flex;gap:10px;align-items:center;justify-content:flex-end;margin-bottom:10px}
.ph .count b{font:400 64px/.8 var(--disp)}
.crumb{display:flex;align-items:center;gap:10px;font:700 12px var(--mono);text-transform:uppercase}
.sq{border:2px solid var(--ink);width:44px;height:44px;display:grid;place-items:center;flex:none}
.sq.on{background:var(--ink);color:var(--paper)}
.sq.off{opacity:.3;pointer-events:none}
.ph-note{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:12px;font:400 12px var(--mono);opacity:.6}
/* swatches */
.sw{width:22px;height:22px;border-radius:50%;border:2px solid var(--ink);background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.75) 0 12%,transparent 46%),var(--c);flex:none;display:inline-block}
.sw.t1{--c:#ff442a}.sw.t2{--c:#c56b39}.sw.t3{--c:#bbc1ca}.sw.t4{--c:#ebb358}.sw.t5{--c:#ede5dc}.sw.t6{--c:#abe5fd}.sw.t7{--c:#ce73ff}
.sw.t4{background:radial-gradient(circle at 34% 30%,#fff6 0 12%,transparent 46%),conic-gradient(from 200deg,#c98b2c,#ffe39a,#d99a35,#f7cf73,#c98b2c)}
.sw.t5{background:radial-gradient(circle at 34% 30%,#fff 0 12%,transparent 46%),conic-gradient(from 120deg,#e9e1d6,#fff,#d8d0e6,#f4efe7,#e9e1d6)}
.sw.t6{background:radial-gradient(circle at 34% 30%,#fff 0 14%,transparent 40%),conic-gradient(#abe5fd,#e8f9ff,#7fcff5,#d4f3ff,#abe5fd)}
.sw.t7{background:radial-gradient(circle at 34% 30%,#fff8 0 12%,transparent 46%),conic-gradient(from 40deg,#ce73ff,#7d3cff,#ff8ce0,#b05cff,#ce73ff)}
.sw.all{background:var(--paper);display:inline-grid;place-items:center;font:400 14px/1 var(--disp)}
/* tile */
.tile{position:relative;display:block;border:2px solid var(--ink);background:var(--ink)}
.tile img{aspect-ratio:1;width:100%;object-fit:cover}
.tile .id{position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:6px;background:var(--paper);border-top:2px solid var(--ink);border-right:2px solid var(--ink);padding:3px 8px 2px 6px;font:700 11px var(--mono)}
.tile .id i{font-style:normal;color:var(--red)}
.tile .id .sw{width:12px;height:12px;border-width:1.5px}
.tile:hover{outline:3px solid var(--red);outline-offset:-1px;z-index:2}
.tile:hover img{filter:contrast(1.05)}
/* rows (zine index) */
.row{display:grid;align-items:center;border-top:2px solid var(--ink);transition:background .2s}
.row:hover{background:var(--ink);color:var(--paper)}
.no{font:400 92px/.8 var(--disp);-webkit-text-stroke:2px var(--ink);color:transparent}
.row:hover .no{color:var(--red);-webkit-text-stroke:0}
.nm{font:400 54px/.9 var(--disp);text-transform:uppercase}
.nm small{font:400 .55em var(--cn);margin-left:12px;opacity:.75;text-transform:none}
.meta-i{font:700 12px var(--mono);text-transform:uppercase;display:flex;gap:8px;align-items:center}
/* placeholder marker */
.tbd{display:inline-flex;align-items:center;gap:6px;font:400 11px var(--mono);text-transform:none;letter-spacing:0;opacity:.55;vertical-align:middle}
.tbd .ico{width:14px;height:14px}

/* ===== collection ===== */
.fbar{position:sticky;top:0;z-index:8;background:var(--paper);border-bottom:3px solid var(--ink)}
.fbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:76px}
.chips{display:flex;gap:6px;align-items:center}
.chip{width:44px;height:44px;display:grid;place-items:center;border:2px solid transparent;position:relative}
.chip .sw{width:26px;height:26px}
.chip.on{border-color:var(--ink)}
.chip.on::after{content:"";position:absolute;left:8px;right:8px;bottom:-9px;height:4px;background:var(--red)}
.ctl{display:flex;gap:8px;align-items:center}
.dd{position:relative;height:44px;border:2px solid var(--ink);display:flex;align-items:center;gap:6px;padding:0 8px 0 10px}
.dd select{appearance:none;-webkit-appearance:none;font:700 12px var(--mono);text-transform:uppercase;padding-right:20px;margin-right:-20px;cursor:pointer;max-width:150px;position:relative;z-index:1}
.dd .ico.c{width:16px;height:16px}
.find{height:44px;border:2px solid var(--ink);display:flex;align-items:center;gap:6px;padding:0 10px;width:150px}
.find input{width:100%;font:700 13px var(--mono);outline:0}
.find input::placeholder{color:var(--ink);opacity:.4}
.dens{display:flex}
.dens button{width:44px;height:44px;border:2px solid var(--ink);display:grid;place-items:center}
.dens button+button{border-left:0}
.dens button.on{background:var(--ink);color:var(--paper)}
.status{display:flex;justify-content:space-between;align-items:center;padding:20px 0 18px;font:700 12px var(--mono);text-transform:uppercase}
.status .cur{display:flex;gap:10px;align-items:center;font:400 30px/1 var(--disp)}
.status .cur small{font:400 18px var(--cn);color:var(--red)}
.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:14px}
.grid.airy{grid-template-columns:repeat(4,1fr);gap:28px}
.more{display:flex;justify-content:center;padding:54px 0 80px}
.empty{padding:80px 0;text-align:center;font:400 40px var(--disp);display:none}

/* ===== item ===== */
.it-top{display:flex;justify-content:space-between;align-items:center;padding:22px 0;border-bottom:2px solid var(--ink)}
.it{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;padding:44px 0 70px;align-items:start}
.stage{position:relative}
.stage .frame{position:relative;border:3px solid var(--ink);box-shadow:14px 14px 0 var(--ink);overflow:hidden;aspect-ratio:1;background:var(--f,#ddd)}
.stage .frame img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.stage .frame img.cut{object-fit:contain;padding:6% 6% 0;object-position:bottom;filter:drop-shadow(12px -6px 0 rgba(17,17,17,.85))}
.stage.cutv .frame{background:var(--paper);background-image:radial-gradient(var(--ink) 1.1px,transparent 1.4px);background-size:7px 7px}
.stage.zoom .frame img{transform:scale(1.8);transform-origin:50% 30%}
.views{display:flex;gap:8px;margin-top:30px}
.plate{background:var(--card);border:3px solid var(--ink);padding:30px 30px 26px;position:relative}
.plate .tp{position:absolute;width:96px;height:28px;background:var(--tape);top:-15px;left:38px;transform:rotate(-4deg);box-shadow:0 1px 2px rgba(0,0,0,.2)}
.plate .pid{font:400 112px/.8 var(--disp);letter-spacing:-.02em}
.plate .pid i{font-style:normal;color:var(--red)}
.plate h1{font:400 40px/1 var(--disp);text-transform:uppercase;margin-top:18px}
.plate h1 small{font:400 24px var(--cn);margin-left:10px;color:var(--red)}
.plate dl{margin-top:24px;border-top:2px solid var(--ink)}
.plate dl div{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid rgba(17,17,17,.25);font:700 13px var(--mono);text-transform:uppercase}
.plate dl div span small{font:400 14px var(--cn);text-transform:none;opacity:.65;margin-left:8px}
.plate dl a{border-bottom:2px solid var(--red)}
.traits{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.traits div{border:2px solid var(--ink);padding:12px;display:flex;gap:10px;align-items:center;font:700 12px var(--mono);text-transform:uppercase;min-height:62px}
.traits div small{display:block;font:400 13px var(--cn);text-transform:none;opacity:.65}
.traits div.no-t{opacity:.28}
.ladder{display:grid;grid-template-columns:repeat(7,1fr);gap:14px;padding-bottom:70px}
.ladder a{display:block;position:relative}
.ladder a .tile{transition:transform .2s}
.ladder a:hover .tile{transform:translateY(-6px)}
.ladder a.cur .tile{outline:4px solid var(--red);outline-offset:3px}
.ladder .lb{display:flex;align-items:center;gap:8px;margin-top:12px;font:400 22px/1 var(--disp);text-transform:uppercase}
.ladder .lb .n{font:400 30px/.8 var(--disp);-webkit-text-stroke:1.5px var(--ink);color:transparent}
.ladder a.cur .lb .n{color:var(--red);-webkit-text-stroke:0}
.ladder .lb small{font:400 14px var(--cn);opacity:.65}
.rel{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding-bottom:80px}
.rel .card{border:3px solid var(--ink);display:flex;gap:20px;align-items:center;padding:20px;min-height:150px;transition:background .2s}
.rel .card:hover{background:var(--ink);color:var(--paper)}
.rel .card img{width:96px;height:96px;border-radius:50%;object-fit:cover;border:3px solid var(--ink)}
.rel .card .k{font:700 11px var(--mono);text-transform:uppercase;opacity:.6;display:flex;gap:6px;align-items:center}
.rel .card .t{font:400 46px/.9 var(--disp);text-transform:uppercase;margin:6px 0}
.rel .card .t small{font:400 22px var(--cn);margin-left:8px}
.rel .card.dropc{background:var(--red)}
.rel .card.dropc:hover{background:var(--ink)}
.rel .card.dropc .disc{width:96px;height:96px;border-radius:50%;background:var(--ink);background-image:radial-gradient(var(--red) 1.3px,transparent 1.6px);background-size:8px 8px;flex:none;position:relative}
.rel .card.dropc .disc img{position:absolute;inset:-6px;width:108px;height:108px;border:0;border-radius:0;object-fit:contain;filter:none}
.rel .card .go{margin-left:auto}

/* ===== artists ===== */
.crewgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-left:2px solid var(--ink);margin:54px 0 90px}
.ac{border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);border-top:2px solid var(--ink);margin-top:-2px;padding:26px 24px 24px;position:relative;display:flex;flex-direction:column;gap:18px;transition:background .2s}
.ac:hover{background:var(--ink);color:var(--paper)}
.ac .ix{font:400 46px/.8 var(--disp);-webkit-text-stroke:1.5px currentColor;color:transparent}
.ac:hover .ix{color:var(--red);-webkit-text-stroke:0}
.ac .pt{width:72%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:3px solid var(--ink);align-self:center;box-shadow:6px 6px 0 var(--ink);background:#ccc}
.ac:hover .pt{border-color:var(--paper);box-shadow:6px 6px 0 var(--red)}
.ac .pt img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.25)}
.ac:hover .pt img{filter:none}
.ac .an{font:400 44px/.9 var(--disp);text-transform:uppercase}
.ac .am{display:flex;justify-content:space-between;align-items:center}
.ac .am .meta-i{gap:6px}
.ac .head{display:flex;justify-content:space-between;align-items:flex-start}
.join{background:var(--red);border-top:0}
.join .wrap{display:flex;justify-content:space-between;align-items:center;gap:30px;padding-top:56px;padding-bottom:56px}
.join h3{font:400 88px/.85 var(--disp);text-transform:uppercase}
.join h3 small{display:block;font:400 40px/1.1 var(--cn);margin-top:8px}

/* ===== artist profile ===== */
.ap{display:grid;grid-template-columns:1.4fr 1fr;gap:60px;padding:44px 0 70px;align-items:center}
.ap h1{font:400 min(13vw,180px)/.8 var(--disp);text-transform:uppercase;letter-spacing:-.02em}
.ap .facts{display:flex;gap:28px;margin:30px 0 26px;flex-wrap:wrap}
.ap .bio{font:400 16px/1.65 var(--mono);max-width:560px}

.ap .lnk{display:flex;gap:8px;margin-top:30px}
.ap .por{position:relative;justify-self:center;width:min(100%,440px)}
.ap .por .ring{aspect-ratio:1;border-radius:50%;overflow:hidden;border:4px solid var(--ink);box-shadow:16px 16px 0 var(--red)}
.ap .por .ring img{width:100%;height:100%;object-fit:cover}
.ap .por .tp{position:absolute;width:120px;height:32px;background:var(--tape);top:8px;left:50%;transform:translateX(-50%) rotate(-6deg);box-shadow:0 1px 2px rgba(0,0,0,.2)}
.wgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;padding-bottom:80px}
.drow{grid-template-columns:150px 1.3fr 240px 1fr 44px;gap:24px;padding:18px 0}
.drow:last-child{border-bottom:2px solid var(--ink)}
.drow .th{display:flex;gap:6px}
.drow .th img{width:64px;height:64px;object-fit:cover;filter:grayscale(1) contrast(1.25);border:2px solid var(--ink)}
.drow:hover .th img{filter:none;border-color:var(--paper)}
.drow .nm{font-size:50px}
.drow .wh{display:flex;flex-direction:column;gap:8px}
.drow.soon{opacity:.45}
.drow.soon:hover{background:none;color:inherit}
.drow.soon .th span{width:64px;height:64px;border:2px dashed var(--ink);display:grid;place-items:center}
.livei{color:var(--red);width:14px;height:14px}
.list-pad{padding-bottom:90px}

/* ===== drops ===== */
.drop{background:var(--red);overflow:hidden;position:relative}
.drop .in{display:grid;grid-template-columns:1.1fr 1fr;min-height:640px;align-items:stretch}
.drop .txt{padding:70px 0;display:flex;flex-direction:column;justify-content:space-between;gap:30px;position:relative;z-index:2}
.drop .no2{font:700 13px var(--mono);text-transform:uppercase;display:flex;gap:12px;align-items:center}
.drop .no2 b{background:var(--ink);color:var(--red);padding:3px 8px}
.drop h3{font:400 190px/.8 var(--disp);text-transform:uppercase;letter-spacing:-.02em;color:var(--ink)}
.drop h3 small{display:block;font:400 72px/1 var(--cn);margin-top:18px}
.drop .facts{display:flex;gap:30px;font:700 13px var(--mono);text-transform:uppercase;flex-wrap:wrap}
.drop .facts div{display:flex;gap:8px;align-items:center}
.drop .stmt{font:400 16px/1.6 var(--mono);max-width:460px}

.drop .pic{position:relative}
.drop .pic img{position:absolute;bottom:0;right:-10px;width:96%;max-width:none;z-index:2;filter:drop-shadow(14px 0 0 var(--ink))}
.drop .pic .disc{position:absolute;width:78%;aspect-ratio:1;border-radius:50%;background:var(--ink);right:6%;top:12%;background-image:radial-gradient(var(--red) 1.3px,transparent 1.6px);background-size:9px 9px}
.drop .pic::before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--ink) 1.2px,transparent 1.5px);background-size:8px 8px;opacity:.18}
.faces{display:flex;align-items:center}
.faces img{width:52px;height:52px;border-radius:50%;border:2px solid var(--ink);object-fit:cover}
.faces span{margin-left:14px;font:700 13px var(--mono);text-transform:uppercase}
.rooms{background:var(--ink);color:var(--paper)}
.rooms .sh h2{color:var(--paper)}
.rgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:16px;padding-bottom:80px}
.room{border:2px solid var(--paper);display:flex;flex-direction:column;transition:transform .2s}
.room:hover{transform:translateY(-6px)}
.room .rn{display:flex;justify-content:space-between;align-items:center;padding:10px 10px 8px;font:400 34px/.8 var(--disp)}
.room .rn .n{-webkit-text-stroke:1.5px var(--paper);color:transparent}
.room:hover .rn .n{color:var(--red);-webkit-text-stroke:0}
.room img{aspect-ratio:3/4;object-fit:cover;width:100%;border-top:2px solid var(--paper);border-bottom:2px solid var(--paper)}
.room .rl{padding:10px;font:400 22px/1 var(--disp);text-transform:uppercase}
.room .rl small{display:block;font:400 14px/1.4 var(--cn);opacity:.7;margin-top:4px}

/* ===== story ===== */
.frames{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding:54px 0 130px}
.fr{border:3px solid var(--ink);background:var(--card);position:relative}
.fr .art{aspect-ratio:4/5;position:relative;overflow:hidden;border-bottom:3px solid var(--ink);background:var(--paper)}
.fr .art::before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--ink) 1.1px,transparent 1.4px);background-size:7px 7px;opacity:.16}
.fr .art img{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:92%;max-width:none;filter:grayscale(1) contrast(1.35)}
.fr:nth-child(3) .art{background:var(--red)}
.fr:nth-child(3) .art img{filter:drop-shadow(10px 0 0 var(--ink))}
.fr .art .n{position:absolute;left:14px;top:12px;font:400 64px/.8 var(--disp);-webkit-text-stroke:2px var(--ink);color:transparent;z-index:2}
.fr .cap{padding:18px 18px 20px;font:400 34px/.95 var(--disp);text-transform:uppercase}
.fr .cap small{display:block;font:400 20px/1.4 var(--cn);margin-top:6px;color:var(--red);text-transform:none}
.st-tag{position:absolute;z-index:3;font:400 66px/1 var(--tagf);color:var(--red);transform:rotate(-10deg);right:30px;bottom:24px;letter-spacing:-.02em;pointer-events:none}
.st-tag small{display:block;font:400 34px/1 var(--cn);color:var(--ink);transform:rotate(4deg);margin:-2px 0 0 40px}
.fin{grid-template-columns:110px 70px 1fr 1.1fr 130px;gap:26px;padding:18px 0}
.fin:last-child{border-bottom:2px solid var(--ink);margin-bottom:80px}
.fin .orb{width:62px;height:62px;border-width:3px}
.fin .nm{font-size:50px}
.fin .fx{font:700 13px var(--mono);text-transform:uppercase}
.fin .fx small{display:block;font:400 15px var(--cn);text-transform:none;opacity:.7}
.fin img{width:110px;height:110px;object-fit:cover;justify-self:end;filter:grayscale(1) contrast(1.25);border:2px solid var(--ink)}
.fin:hover img{filter:none;border-color:var(--paper)}
.logos{display:grid;grid-template-columns:repeat(6,1fr);gap:0;border-left:2px solid var(--ink);border-top:2px solid var(--ink);margin-bottom:80px}
.logos div{border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);height:120px;display:grid;place-items:center;font:400 26px var(--disp);opacity:.32;letter-spacing:.04em}
.contact{background:var(--red);border-bottom:0}
.contact .wrap{padding-top:70px;padding-bottom:70px;display:flex;justify-content:space-between;align-items:flex-end;gap:30px}
.contact h3{font:400 140px/.8 var(--disp);text-transform:uppercase}
.contact h3 small{display:block;font:400 48px/1.1 var(--cn);margin-top:14px}
.contact .mail{font:400 44px/1 var(--disp);display:flex;gap:16px;align-items:center;border-bottom:4px solid var(--ink);padding-bottom:8px}
.contact .mail .ico{width:34px;height:34px}

/* menu drawer (subpages) */
.drawer{display:none}

@media (max-width:1100px){
 .grid{grid-template-columns:repeat(5,1fr)}.grid.airy{grid-template-columns:repeat(3,1fr)}
 .fbar .wrap{flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
 .crewgrid{grid-template-columns:repeat(3,1fr)}
 .rgrid{grid-template-columns:repeat(4,1fr)}
 .drop h3{font-size:140px}
 .drow{grid-template-columns:110px 1fr 200px 44px}.drow .wh2{display:none}
 .fin{grid-template-columns:90px 60px 1fr 1fr}.fin img{display:none}
 .logos{grid-template-columns:repeat(3,1fr)}
 .wgrid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:640px){
 .wrap{padding:0 18px}
 .links,.lang{display:none}.burger{display:block;cursor:pointer}
 .nav{height:58px}.logo{font-size:24px}
 .drawer{display:block;max-height:0;overflow:hidden;transition:max-height .3s;background:var(--paper)}
 header.open .drawer{max-height:420px;border-top:2px solid var(--ink)}
 .drawer a{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid rgba(17,17,17,.2);font:400 30px/1 var(--disp);text-transform:uppercase}
 .drawer a small{font:400 18px var(--cn);color:var(--red)}
 .drawer a.on{background:var(--ink);color:var(--paper)}
 .drawer .lg{padding:14px 18px}.drawer .lang{display:inline-block}
 footer .bar{flex-direction:column;gap:18px;align-items:flex-start}
 .sh{padding:48px 0 22px;flex-direction:column;align-items:flex-start}
 .sh h2,.sh.s h2{font-size:56px}.sh h2 small,.sh.s h2 small{font-size:24px;margin-left:8px}
 .ph .wrap{flex-direction:column;align-items:flex-start;gap:18px;padding-top:34px;padding-bottom:24px}
 .ph h1{font-size:19vw}
 .ph h1 small{display:block;margin:10px 0 0;font-size:30px}
 .ph .lede{text-align:left;max-width:none}
 .ph .count{justify-content:flex-start}.ph .count b{font-size:48px}
 .ph-note{justify-content:flex-start}
 .no{font-size:50px;-webkit-text-stroke:1.5px var(--ink)}
 .nm{font-size:30px}.nm small{margin-left:6px}
 /* collection */
 .fbar .wrap{gap:10px;padding-top:10px;padding-bottom:10px}
 .chips{width:100%;justify-content:space-between;gap:0}
 .chip{width:38px;height:38px}.chip .sw{width:24px;height:24px}
 .chip.on::after{bottom:-6px;height:3px;left:7px;right:7px}
 .ctl{width:100%;gap:6px;flex-wrap:wrap}
 .dd{height:40px;padding:0 6px 0 8px;flex:1;min-width:0}
 .dd select{max-width:none;width:100%;font-size:11px}
 .dd .lbl{display:none}
 .find{width:auto;flex:1 1 100%;height:40px;order:3}
 .dens button{width:40px;height:40px}
 .status{padding:14px 0}
 .status .cur{font-size:24px}
 .grid{grid-template-columns:repeat(3,1fr);gap:8px}
 .grid.airy{grid-template-columns:repeat(2,1fr);gap:14px}
 .tile .id{font-size:9px;padding:2px 5px 1px 4px;gap:4px;border-width:1.5px}
 .tile .id .sw{width:9px;height:9px;border-width:1px}
 .more{padding:36px 0 60px}
 /* item */
 .it-top{padding:14px 0}
 .it{grid-template-columns:1fr;gap:38px;padding:24px 0 50px}
 .stage .frame{box-shadow:8px 8px 0 var(--ink)}
 .views{margin-top:20px}
 .plate{padding:24px 18px 20px}
 .plate .pid{font-size:84px}
 .plate h1{font-size:32px}.plate h1 small{font-size:20px}
 .traits div{font-size:11px;padding:10px;gap:8px}
 .ladder{grid-template-columns:repeat(4,1fr);gap:10px 8px;padding-bottom:50px}
 .ladder .lb{font-size:15px;gap:5px;margin-top:8px}.ladder .lb .n{font-size:20px}.ladder .lb small{display:none}
 .rel{grid-template-columns:1fr;gap:16px;padding-bottom:56px}
 .rel .card{gap:14px;padding:16px;min-height:0}
 .rel .card img,.rel .card.dropc .disc{width:70px;height:70px}
 .rel .card.dropc .disc img{width:80px;height:80px}
 .rel .card .t{font-size:32px}.rel .card .t small{font-size:16px;display:block;margin:4px 0 0}
 /* artists */
 .crewgrid{grid-template-columns:repeat(2,1fr);margin:30px 0 60px}
 .ac{padding:16px 12px 14px;gap:12px}
 .ac .ix{font-size:30px}
 .ac .pt{width:82%;box-shadow:4px 4px 0 var(--ink)}
 .ac .an{font-size:26px}
 .ac .am{flex-direction:column;align-items:flex-start;gap:6px}
 .ac .meta-i{font-size:11px}
 .join .wrap{flex-direction:column;align-items:flex-start;padding-top:40px;padding-bottom:44px}
 .join h3{font-size:56px}.join h3 small{font-size:26px}
 /* artist */
 .ap{grid-template-columns:1fr;gap:34px;padding:24px 0 50px}
 .ap .por{order:-1;width:72%}
 .ap .por .ring{box-shadow:10px 10px 0 var(--red)}
 .ap h1{font-size:21vw}
 .ap .facts{gap:16px;margin:20px 0 18px}
 .ap .bio{font-size:14px}
 .wgrid{grid-template-columns:repeat(3,1fr);gap:8px;padding-bottom:56px}
 .drow{grid-template-columns:76px 1fr 24px;gap:6px 12px;padding:14px 0}
 .drow .no{grid-row:1/3;grid-column:1}
 .drow .mid{grid-column:2;grid-row:1}
 .drow .wh{grid-column:2;grid-row:2;flex-direction:row;flex-wrap:wrap;gap:4px 14px}.drow .wh .meta-i{font-size:11px}
 .drow>.ico,.drow>span:last-child:empty{grid-column:3;grid-row:1/3}
 .drow .th,.drow .wh2{display:none}
 .drow .nm{font-size:30px}
 /* drops */
 .drop .in{grid-template-columns:1fr;min-height:0}
 .drop .txt{padding:40px 0 0;gap:24px}
 .drop h3{font-size:92px}.drop h3 small{font-size:40px}
 .drop .facts{flex-direction:column;gap:10px}
 .drop .stmt{font-size:14px}
 .drop .pic{height:360px}.drop .pic img{width:88%;right:6%}.drop .pic .disc{width:80%;top:6%;right:10%}
 .rgrid{grid-template-columns:repeat(2,1fr);gap:12px;padding-bottom:56px}
 .rgrid .room:last-child{grid-column:span 2}
 .room img{aspect-ratio:1}
 .rgrid .room:last-child img{aspect-ratio:2/1;object-position:center 30%}
 /* story */
 .frames{grid-template-columns:1fr;gap:22px;padding:30px 0 104px}
 .fr .art{aspect-ratio:1}
 .fr .art img{width:74%}
 .st-tag{font-size:40px;right:24px;bottom:22px}.st-tag small{font-size:22px;margin-left:24px}
 .fin{grid-template-columns:52px 40px 1fr;gap:12px;padding:14px 0}
 .fin .orb{width:38px;height:38px}
 .fin .nm{font-size:30px}
 .fin .fx{grid-column:2 / -1;font-size:11px}
 .fin:last-child{margin-bottom:56px}
 .logos{grid-template-columns:repeat(2,1fr);margin-bottom:56px}.logos div{height:90px;font-size:20px}
 .contact .wrap{flex-direction:column;align-items:flex-start;padding-top:48px;padding-bottom:52px}
 .contact h3{font-size:84px}.contact h3 small{font-size:30px}
 .contact .mail{font-size:26px}.contact .mail .ico{width:24px;height:24px}
}

/* ===== Tomily signature + feature ===== */
.sig{display:block;fill:currentColor;overflow:visible}
.auto{margin-top:26px;border-top:2px solid var(--ink);padding-top:12px;display:flex;align-items:center;gap:14px}
.auto img{width:52px;height:52px;border-radius:50%;border:2px solid var(--ink);object-fit:cover;flex:none}
.auto span{margin-left:auto}
.auto .sig{width:190px;height:68px;margin:-6px 0 -10px}
.auto span{font:700 11px var(--mono);text-transform:uppercase;opacity:.6;padding-bottom:4px}
.ap-sig{width:min(380px,80%);height:auto;aspect-ratio:560/200;color:var(--red);margin:-26px 0 -18px 18%;position:relative}
.st-sig{width:170px;height:61px;margin:10px 0 0 auto;color:var(--red)}
.feat{display:grid;grid-template-columns:1fr 1.15fr;background:var(--ink);color:var(--paper);margin:54px 0 70px;border:3px solid var(--ink);box-shadow:12px 12px 0 var(--red);overflow:hidden}
.feat .fp{position:relative;min-height:560px;display:grid;place-items:center;background-image:radial-gradient(rgba(236,232,223,.22) 1.1px,transparent 1.4px);background-size:8px 8px}
.feat .fp .disc{position:absolute;width:72%;aspect-ratio:1;border-radius:50%;background:var(--red);left:8%;top:12%}
.feat .fp .ring{position:relative;width:70%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:4px solid var(--paper);box-shadow:12px 12px 0 var(--red)}
.feat .fp .ring img{width:100%;height:100%;object-fit:cover}
.feat .ft{padding:56px 52px;display:flex;flex-direction:column;justify-content:center;gap:30px;border-left:3px solid var(--paper)}
.feat .k{font:700 12px var(--mono);text-transform:uppercase;display:flex;gap:8px;align-items:center;opacity:.7}
.feat .fname{position:relative}
.feat .fname b{display:block;font:400 min(14vw,200px)/.8 var(--disp);text-transform:uppercase;letter-spacing:-.02em;font-weight:400}
.feat .fname .sig{position:absolute;width:76%;height:auto;aspect-ratio:560/200;left:22%;bottom:-38%;color:var(--red)}
.feat .facts{display:flex;gap:26px;flex-wrap:wrap;margin-top:24px}
.feat .btn{box-shadow:5px 5px 0 var(--red);background:var(--paper);color:var(--ink)}
@media (max-width:1100px){.feat{grid-template-columns:1fr}.feat .fp{min-height:420px}.feat .ft{border-left:0;border-top:3px solid var(--paper)}}
@media (max-width:640px){
 .auto .sig{width:150px;height:54px}
 .ap-sig{margin:-14px 0 -10px 14%}
 .st-sig{margin:8px 0 0 0;width:140px;height:50px}
 .feat{margin:30px 0 50px;box-shadow:7px 7px 0 var(--red)}
 .feat .fp{min-height:330px}
 .feat .ft{padding:30px 20px 34px;gap:22px}
 .feat .fname b{font-size:23vw}
 .feat .facts{gap:12px;flex-direction:column;margin-top:16px}
}