/* Memepass Pad: a museum of modern art that runs an open call every day. White walls, black type, 4 px rules.
   Colour is a role: yellow = the pass sticker and ON VIEW only, red = vote dots only. Memes bring every other colour. */
@font-face{font-family:Switzer;src:url(/assets/fonts/Switzer-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Switzer;src:url(/assets/fonts/Switzer-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Switzer;src:url(/assets/fonts/Switzer-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Fira Mono";src:url(/assets/fonts/FiraMono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Fira Mono";src:url(/assets/fonts/FiraMono-500.woff2) format("woff2");font-weight:500;font-display:swap}
:root{
  --paper:#ffffff;--ink:#0b0b0b;--ink-60:#5c5c5c;--wall:#f4f4f2;--sticker:#ffd84a;--dot:#e0352b;
  --rule:4px solid var(--ink);--g:24px;--lab:150px;
  --ease:cubic-bezier(.215,.61,.355,1);
  --mono:"Fira Mono",ui-monospace,Menlo,monospace;--sans:Switzer,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.45 var(--sans);font-feature-settings:"ss01";overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
button,select,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
select{cursor:pointer}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:8px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;z-index:99;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.skip:focus{clip-path:none;width:auto;height:auto}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
[hidden]{display:none!important}

/* SUNSET banner (config flag): passes and launches off, claims on */
.sunset{background:var(--ink);color:#fff;padding:10px var(--g);font-size:13px;text-transform:uppercase}
.is-sunset #launch,.is-sunset [data-arm]{display:none}

/* ---------- nav */
.nav{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px var(--g) 0;font-size:18px;position:relative;z-index:5}
.nav-l,.nav-r{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.nav a{text-decoration:none}
.nav a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.nav .u{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px;font-size:18px}
.nav .u:hover{text-decoration-thickness:4px}
.bar{position:fixed;top:0;left:0;right:0;height:56px;background:var(--paper);border-bottom:var(--rule);display:flex;align-items:center;justify-content:space-between;padding:0 var(--g);z-index:30;transform:translateY(-110%);transition:transform .24s var(--ease)}
.bar.on{transform:none}
.bar-wm{font-weight:500;font-size:24px;letter-spacing:-.03em;text-decoration:none}
.bar-st{background:var(--sticker) url(/assets/art/tex-sticker.webp);border:3px solid var(--ink);border-radius:10px;padding:5px 26px;font-weight:700;font-size:16px;transform:rotate(-3deg) translateY(10px);display:flex;gap:14px;align-items:baseline;
  -webkit-mask:radial-gradient(circle 8px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 8px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 8px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 8px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat}
.bar-st:hover{transform:rotate(0) translateY(8px)}
.bar-ca{font-weight:400;font-size:12px}

/* ---------- hero */
.hero{position:relative}
.wm{margin:6px 0 0;padding:0 calc(var(--g) - .04em);font-weight:500;font-size:clamp(88px,19.1vw,330px);line-height:.86;letter-spacing:-.035em;white-space:nowrap;overflow:hidden}
.wm span[data-wm]{display:inline-block}
.wm.long{font-size:clamp(60px,var(--fit,17.4vw),300px)}
.sub{margin:14px 0 0;padding:0 calc(min(460px,34vw) + 60px) 22px var(--g);font-weight:500;font-size:clamp(20px,2.2vw,36px);letter-spacing:-.01em;line-height:1.05;text-transform:uppercase;border-bottom:var(--rule);max-width:none}

/* the PASS sticker (primary action + drop target) */
.pass-wrap{position:absolute;right:calc(var(--g) + 10px);top:clamp(70px,8.6vw,150px);width:min(460px,34vw);z-index:6}
.pass{transform:rotate(-8deg);transform-origin:50% 50%;transition:transform .24s var(--ease),filter .12s linear;filter:drop-shadow(0 0 0 var(--ink))}
.pass-wrap:focus-within .pass{transform:rotate(-3deg) translateY(-6px);filter:drop-shadow(6px 6px 0 var(--ink))}
.pass-face:focus-visible .p1{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
.pass-face{position:relative;background:var(--sticker) url(/assets/art/tex-sticker.webp);border:4px solid var(--ink);border-radius:14px;padding:18px 44px 14px;cursor:pointer;min-height:200px;display:flex;flex-direction:column;
  -webkit-mask:radial-gradient(circle 24px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 24px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 24px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 24px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat}
.p0{margin:0;font-size:13px;text-transform:uppercase}
.p1{display:block;text-align:left;cursor:pointer;font-weight:700;font-size:clamp(26px,2.8vw,40px);letter-spacing:-.02em;line-height:1;margin:14px 0 12px;text-transform:uppercase}
.p-arm{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:14px;margin:-2px 0 10px}
.p-arm input{width:4.6em;border:2px solid var(--ink);background:#fff;padding:3px 6px;font:500 15px var(--mono);text-align:right}
.p-arm select{border:2px solid var(--ink);background:#fff;padding:3px 4px;font:500 14px var(--mono);max-width:12em;min-width:8.5em}
.p2{margin-top:auto;border-top:2px dashed var(--ink);padding-top:9px;font-size:13px;display:flex;gap:6px;align-items:center;flex-wrap:wrap;text-transform:uppercase}
.ca{display:inline-flex;align-items:center;gap:5px;font:inherit;text-decoration:underline;text-underline-offset:3px;min-height:32px}
.cp{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5}
.thumb{position:absolute;right:-14px;top:-52px;margin:0;width:96px;height:96px;background:#fff;border:3px solid var(--ink);transform:rotate(7deg);display:grid;place-items:center;padding:4px}
.thumb img{max-width:100%;max-height:100%;object-fit:contain}
.peel{position:absolute;right:0;top:0;width:0;height:0;background:linear-gradient(225deg,var(--paper) 50%,#d9d9d9 50%);transition:width .12s linear,height .12s linear;z-index:2}
/* states */
.pass-wrap:hover .pass,.pass-wrap.lift .pass{transform:rotate(-3deg) translateY(-6px);filter:drop-shadow(6px 6px 0 var(--ink))}
.pass-wrap.press .pass{transform:rotate(-3deg) translate(3px,3px);filter:none}
.pass-wrap.busy .peel{width:30px;height:30px}
.pass-wrap.busy .p1{font:500 22px var(--mono);letter-spacing:.02em}
.pass-wrap.off .pass-face{background:#e6e6e6;border-color:#8a8a8a;color:#8a8a8a}
.pass-wrap.off .p2{border-color:#8a8a8a}
.pass-wrap.done .p1::after{content:""}
.pass-wrap.tear .pass-face{animation:tear .42s var(--ease)}
@keyframes tear{0%{transform:none}40%{transform:translateY(-4px) rotate(1deg)}100%{transform:none}}
/* page drop frame */
body.dragging::after{content:"";position:fixed;inset:12px;border:4px dashed var(--ink);pointer-events:none;z-index:40}

/* check + tx lines (stacked wall labels) */
.checks{list-style:none;margin:14px 0 0 28px;padding:0;display:grid;gap:6px;max-width:420px}
.checks li{background:#fff;border:2px solid var(--ink);padding:6px 10px;font-size:13px;line-height:1.35;animation:lab .24s var(--ease) both}
.checks li.bad::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--dot);margin-right:8px;vertical-align:1px}
.checks li.big{font-size:14px;font-weight:500}
.checks a{text-underline-offset:3px}
@keyframes lab{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* THE ROOM */
.room{position:relative;height:min(62vh,620px);min-height:380px;overflow:hidden;border-bottom:var(--rule);background:#eceae6}
.plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.room.live .plate{object-fit:fill}
.hang{position:absolute;inset:0}
.work{position:absolute;left:0;top:0;transform-origin:0 0;cursor:pointer;background:transparent;padding:0;border:0}
.work img{width:100%;height:100%;object-fit:contain;max-width:none;filter:drop-shadow(3px 4px 3px rgba(0,0,0,.18))}
.work:focus-visible{outline:3px solid var(--ink)}
.wdots{position:absolute;display:flex;gap:4px;transform:translate(-100%,0);pointer-events:none}
.wdots i{width:11px;height:11px;border-radius:50%;background:var(--dot);display:block}
.wtag{font-size:9px;letter-spacing:.06em;color:var(--ink-60);background:#fff;padding:1px 4px;line-height:1.3;align-self:center}
.wdots i.mine{box-shadow:0 0 0 2px var(--ink)}
.wdots i.drop{animation:dot .12s var(--ease) both}
@keyframes dot{from{transform:scale(1.3)}to{transform:none}}
.hud{position:absolute;left:var(--g);bottom:var(--g);display:flex;list-style:none;margin:0;padding:0;z-index:3}
.hud li{background:#fff;border:2px solid var(--ink);margin-left:-2px;padding:9px 16px 8px;min-width:170px}
.hud li:first-child{margin-left:0}
.hud b{display:block;font-weight:500;font-size:22px;line-height:1.1}
.hud span{display:block;font-size:11px;text-transform:uppercase;margin-top:3px}
.demo{position:absolute;right:var(--g);bottom:var(--g);background:#fff;border:2px solid var(--ink);padding:10px 14px;max-width:300px;font-size:14px;line-height:1.35;z-index:3}
.demo p{margin:0}
.demo .dt{font-weight:500;margin-bottom:4px;text-transform:uppercase}
body[data-demo="0"] .demo{display:none}
.walltip{position:absolute;z-index:4;background:#fff;border:2px solid var(--ink);padding:7px 10px;font-size:12px;line-height:1.4;pointer-events:none;max-width:260px;text-transform:uppercase}
.fly{position:absolute;z-index:7;pointer-events:none;background:#fff;border:3px solid var(--ink);padding:3px}
.fly img{width:100%;height:100%;object-fit:contain}

/* ---------- THE ROWS */
.row{border-bottom:var(--rule)}
.rh{display:grid;grid-template-columns:var(--lab) minmax(0,1fr);align-items:center;width:100%;text-align:left;padding:18px 0 16px var(--g);min-height:128px;overflow:hidden;background:var(--paper);color:var(--ink)}
.rh:hover,.rh:focus-visible{background:var(--ink);color:var(--paper);transition:none}
.rh:focus-visible{outline-offset:-6px;outline-color:var(--sticker)}
.rl{font-weight:500;font-size:22px;line-height:1.05;text-transform:uppercase;align-self:center}
.rt{overflow:clip;display:flex;align-items:center;gap:.28em;white-space:nowrap;font-weight:500;font-size:clamp(44px,7.2vw,124px);line-height:.95;letter-spacing:-.03em;text-transform:uppercase;min-width:0}
.rt>span{flex:none}
.ri{flex:none;height:96px;width:auto;max-width:none;object-fit:contain;background:transparent}
.ri.tk{height:84px}
.ra{font-weight:400;transition:transform .12s var(--ease)}
.rh:hover .ra{transform:translateX(6px)}
.row.open .ra{transform:rotate(90deg)}
.dots3{display:flex;gap:10px;align-items:center;height:96px}
.dots3 i{width:34px;height:34px;border-radius:50%;background:var(--dot);display:block}
.yl{background:linear-gradient(var(--sticker),var(--sticker)) no-repeat 0 0/100% 100%;color:var(--ink);padding:0 .12em;margin-right:.1em}
.yl.pre{background-size:0 100%}
.yl.sweep{transition:background-size .6s cubic-bezier(.215,.61,.355,1)}
.cl-n .dg{display:inline-block}
.cl-n .dg.roll{animation:roll .18s cubic-bezier(.215,.61,.355,1)}
@keyframes roll{from{transform:translateY(-.45em);opacity:0}to{transform:none;opacity:1}}
.rh:hover .yl{color:var(--ink)}
.rt.ol{padding-left:0;font-size:clamp(52px,8.4vw,140px)}
.rt.ol>span{color:transparent;-webkit-text-stroke:2px var(--ink)}
.rh:hover .rt.ol>span{-webkit-text-stroke:2px var(--paper)}
#hall .rh{grid-template-columns:minmax(0,1fr)}
.mqw{flex:0 1 auto!important;min-width:0;overflow:hidden;display:block}
.mq{display:inline-block;white-space:nowrap}
.mq.run{animation:mq var(--mqd,20s) linear infinite alternate}
@keyframes mq{0%,12%{transform:none}88%,100%{transform:translateX(var(--mqx,-50%))}}
.rb{overflow:hidden}
.rb.anim{transition:height .42s var(--ease)}

/* HOW */
.how{list-style:none;margin:0;padding:8px var(--g) 36px calc(var(--g) + var(--lab));display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.how li{border-top:2px solid var(--ink);padding-top:12px}
.how b{font-size:14px}
.how p{margin:6px 0 0;max-width:34ch}

/* TODAY */
.today-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:6px var(--g) 12px calc(var(--g) + var(--lab));font-size:13px;text-transform:uppercase}
.sort{display:flex;border:2px solid var(--ink)}
.sort button{padding:6px 12px;font:500 13px var(--mono);min-height:34px}
.sort button[aria-pressed="true"]{background:var(--ink);color:#fff}
.subs{list-style:none;margin:0;padding:0;cursor:pointer}
.subs .inv{cursor:default}
.sub-row{display:grid;grid-template-columns:var(--lab) minmax(0,1fr) auto auto;align-items:center;gap:0 18px;border-top:2px solid var(--ink);padding:10px var(--g);min-height:78px}
.sub-row .ix{font-size:13px}
.sub-row .t{font-weight:500;font-size:clamp(28px,3.4vw,48px);letter-spacing:-.025em;line-height:1;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:clip;display:flex;align-items:baseline;gap:.4em;cursor:pointer;background:none;text-align:left;min-width:0}
.sub-row .t img{height:52px;width:64px;object-fit:contain;align-self:center;flex:none;filter:drop-shadow(1px 2px 2px rgba(0,0,0,.15))}
.sub-row .t small{font:400 13px var(--mono);letter-spacing:.02em;text-transform:none}
.sub-row .w{font-size:13px;text-align:right;white-space:nowrap}
.sub-row .w .d{display:inline-flex;gap:3px;margin-right:8px;vertical-align:-1px}
.sub-row .w .d i{width:10px;height:10px;border-radius:50%;background:var(--dot);display:block}
.sub-row.new{background:var(--wall)}
.sub-row .inl{grid-column:1/-1;display:none;padding:10px 0 4px}
.sub-row.x .inl{display:block}
.sub-row .inl img{max-height:320px;width:auto}
.vd{width:40px;height:40px;border-radius:50%;border:2px dashed var(--ink);background:#fff;flex:none;display:grid;place-items:center}
.vd:hover{background:var(--wall)}
.vd.on{background:var(--dot);border:2px solid var(--dot)}
.vd.mine{box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--ink)}
.vd[disabled]{cursor:not-allowed;opacity:.35}
.inv{padding:26px var(--g) 34px calc(var(--g) + var(--lab));display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.inv p{margin:0;font-size:22px;font-weight:500;max-width:34ch}
.follow{position:fixed;left:0;top:0;width:320px;pointer-events:none;z-index:25;opacity:0;transition:opacity .12s linear}
.follow.on{opacity:1}
.follow img{width:100%;height:auto;background:#fff;border:3px solid var(--ink);padding:6px}

/* the small sticker action used in rows */
.st{display:inline-block;background:var(--sticker) url(/assets/art/tex-sticker.webp);border:3px solid var(--ink);border-radius:10px;padding:16px 34px;font-weight:700;font-size:22px;letter-spacing:-.02em;text-transform:uppercase;transform:rotate(-3deg);color:var(--ink);text-decoration:none;
  -webkit-mask:radial-gradient(circle 11px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 11px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 11px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 11px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat}
.stw{display:inline-block;transition:filter .12s linear}
.stw:hover{filter:drop-shadow(4px 4px 0 var(--ink))}
.stw:hover .st{transform:rotate(0) translateY(-2px)}
.stw:active .st{transform:rotate(0) translate(3px,3px)}
.stw:active{filter:none}
.st[disabled],.st.dis{background:#e6e6e6;border-color:#8a8a8a;color:#8a8a8a;cursor:not-allowed;transform:rotate(-3deg)}
.st.busy{font:500 16px var(--mono)}
.lnk{min-height:40px;font-weight:500;font-size:22px;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;display:inline-flex;gap:8px;align-items:baseline}
.lnk .ar{display:inline-block;transition:transform .12s var(--ease)}
.lnk:hover .ar{transform:translateX(6px)}
.lnk[disabled]{opacity:.4;cursor:not-allowed}

/* ON VIEW */
.ov{position:relative;min-height:560px;background:#f1f0ec url(/assets/art/hero-room.webp) center 45%/cover;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;align-items:center;padding:56px calc(var(--g) * 3)}
.ov::before{content:"";position:absolute;inset:0;background:url(/assets/art/tex-plaster.webp);mix-blend-mode:multiply;opacity:.5;pointer-events:none}
.ov>*{position:relative}
.ov-work{justify-self:end;max-width:620px;max-height:540px;filter:drop-shadow(4px 6px 5px rgba(0,0,0,.2));cursor:pointer}
.ov-work img{max-height:540px;width:auto;object-fit:contain}
.label{background:#fff;border:2px solid var(--ink);padding:16px 18px;font-size:15px;line-height:1.45}
.label h3{margin:0 0 6px;font-weight:500;font-size:24px;letter-spacing:-.02em;line-height:1.1;text-transform:uppercase}
.label p{margin:0}
.label p a{display:inline-flex;min-height:32px;align-items:center}
.label .mono{font-size:13px}
.label .yl{font:500 12px var(--mono);padding:2px 6px;display:inline-block;margin-bottom:8px}
.label .row2{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;align-items:center}
.ov-empty{grid-column:1/-1;justify-self:center}

/* TOP OF THE DAY salon */
.salon{background:var(--wall);padding:40px var(--g) 36px;display:flex;gap:24px;align-items:flex-start;justify-content:center;flex-wrap:wrap;min-height:360px}
.sw{display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;background:none}
.sw img{width:auto;object-fit:contain;filter:drop-shadow(3px 5px 4px rgba(0,0,0,.18))}
.sw .cap{font-size:12px;text-align:center;text-transform:uppercase}
.sw .d{display:flex;gap:4px;justify-content:center}
.sw .d i{width:11px;height:11px;border-radius:50%;background:var(--dot);display:block}

/* TODAY wall + hall strip */
.twall{position:relative;border-bottom:2px solid var(--ink);min-height:420px;padding-top:52px}
.twl{position:absolute;left:var(--g);top:16px;margin:0;font-size:13px}
.hstrip{display:flex;gap:10px;align-items:center;flex:none}
.hstrip .ri{height:96px;width:auto;max-width:140px}
@media (max-width:1100px){.nav a,.nav .u{min-height:40px;display:inline-flex;align-items:center}}
@media (max-width:760px){.hstrip .ri{height:52px}.twall{padding-top:58px;min-height:560px}.twl{top:18px;right:var(--g)}}

/* CLOAKROOM */
.cloak{position:relative;height:56vh;min-height:380px;overflow:hidden}
.cloak-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.tags{position:absolute;left:7%;right:7%;top:39%;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.tag{background:#fff;border:2px solid var(--ink);padding:10px 12px 9px;min-width:190px;font-size:12px;line-height:1.45;text-transform:uppercase;position:relative}
.tag::before{content:"";position:absolute;left:50%;top:-11px;width:10px;height:10px;border:2px solid var(--ink);border-radius:50%;background:#fff;transform:translateX(-50%)}
.tag b{font-weight:500;font-size:14px;display:block}
.tag .claim{margin-top:8px}
.tag.ready{background:var(--sticker) url(/assets/art/tex-sticker.webp)}
.tag.ready button{font:700 15px var(--sans);text-decoration:underline;text-underline-offset:3px}
.cloak-note{position:relative;max-width:360px;margin:0 auto}
.cloak-foot:empty{display:none}
.cloak-foot{padding:16px var(--g) 22px calc(var(--g) + var(--lab));display:flex;gap:22px;align-items:center;flex-wrap:wrap;font-size:13px;text-transform:uppercase}

/* POOL */
.pool{display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);gap:48px;align-items:center;padding:32px var(--g) 40px}
.pool img{max-width:360px;max-height:420px;width:100%;object-fit:contain;justify-self:center}
.colo .lnk{font-family:var(--sans);letter-spacing:-.01em}
.colo{font-size:14px;line-height:1.7;max-width:640px}
.colo h3{font:500 32px/1.05 var(--sans);letter-spacing:-.02em;margin:0 0 14px;text-transform:uppercase}
.colo dl{display:grid;grid-template-columns:max-content 1fr;gap:2px 22px;margin:0 0 18px}
.colo dt{color:var(--ink-60);text-transform:uppercase}
.colo dd{margin:0}
.colo .coins{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 16px}
.colo .coins button{border:2px solid var(--ink);padding:4px 9px;font:500 13px var(--mono);min-height:34px}
.colo .coins button[aria-pressed="true"]{background:var(--ink);color:#fff}

/* HALL OF FAME */
.depot{width:100%;height:38vh;object-fit:cover;max-width:none}
.hall{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0;border-top:var(--rule)}
.hf{border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:18px;display:flex;flex-direction:column;gap:10px;font-size:13px;text-transform:uppercase;position:relative}
.hf .stack{position:relative;height:170px}
.hf .stack img{position:absolute;left:50%;top:0;height:150px;width:auto;max-width:180px;object-fit:contain;transform:translateX(-50%);transition:transform .24s var(--ease);filter:drop-shadow(2px 3px 3px rgba(0,0,0,.18))}
.hf:hover .stack img:nth-child(2){transform:translateX(-85%) rotate(-6deg)}
.hf:hover .stack img:nth-child(3){transform:translateX(-15%) rotate(6deg)}
.hf b{font:500 22px/1.05 var(--sans);letter-spacing:-.02em}
.hall .inv{grid-column:1/-1}

/* RULES */
.rules{display:grid;grid-template-columns:280px minmax(0,1fr) minmax(0,1fr);gap:36px 48px;padding:30px var(--g) 44px}
.rules img{width:280px;max-height:520px;object-fit:contain;object-position:top}
.rules ol{margin:0;padding:0;list-style:none;counter-reset:r var(--start,0)}
.rules li{counter-increment:r;border-top:2px solid var(--ink);padding:10px 0 14px;display:grid;grid-template-columns:44px 1fr;font-size:17px;line-height:1.45}
.rules li::before{content:counter(r,decimal-leading-zero);font:500 13px var(--mono);padding-top:4px}
.rules .mono{font-size:14px}

/* LAUNCH (exhibition proposal) */
.prop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;border-top:2px solid var(--ink)}
.prop-f{padding:26px var(--g) 34px calc(var(--g) + var(--lab));border-right:2px solid var(--ink);display:grid;gap:14px;align-content:start}
.prop-p{padding:26px var(--g) 34px;background:var(--wall);display:grid;gap:16px;align-content:start;justify-items:start;overflow:hidden}
.lab{margin:0;font-size:13px;color:var(--ink-60)}
.prop label{display:grid;gap:5px}
.prop label>span{font-size:12px}
.prop input:not([type=file]){border:0;border-bottom:3px solid var(--ink);background:transparent;padding:6px 0;font:500 26px var(--sans);letter-spacing:-.01em;border-radius:0;width:100%}
.prop input:focus-visible{outline:none;border-bottom-color:var(--ink);background:var(--wall)}
.prop .file input{position:absolute;width:1px;height:1px;opacity:0}
.prop .file{position:relative;cursor:pointer}
.prop .file .pick{font-weight:500;font-size:22px;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;justify-self:start}
.prop .file:focus-within .pick{outline:3px solid var(--ink);outline-offset:3px}
.fname{font-size:12px;color:var(--ink-60)}
.adv summary{cursor:pointer;font-size:13px;padding:6px 0;list-style:none}
.adv summary::before{content:"+ "}
.adv[open] summary::before{content:"- "}
.adv label{margin-top:10px}
.note{font-size:15px;color:var(--ink-60);margin:4px 0 0;max-width:46ch}
.need{margin:0;font-size:13px;min-height:1.4em}
.pv-wm{font-weight:500;font-size:clamp(40px,5.4vw,92px);line-height:.9;letter-spacing:-.035em;text-transform:uppercase;white-space:nowrap}
.pv-st{display:flex;gap:14px;align-items:center;background:var(--sticker) url(/assets/art/tex-sticker.webp);border:3px solid var(--ink);border-radius:10px;padding:10px 30px;transform:rotate(-3deg);font-size:14px}
.pv-st img{width:72px;height:72px;object-fit:cover;border:2px solid var(--ink);background:#fff}
.pv-line{margin:0;font-size:20px;max-width:30ch}
.pv-fee{margin:0;font-size:13px}

/* CLOSED */
.closed{background:var(--ink);color:var(--paper);min-height:60vh;padding:56px var(--g) 30px;display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.closed-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:40px;align-items:center}
.seal{position:relative;width:220px;height:220px}
.seal img{position:absolute;left:50px;top:50px;width:120px;height:120px}
.ring{width:220px;height:220px;fill:var(--paper);font:500 15px var(--sans);letter-spacing:.14em}
.seal:hover .ring{animation:spin 8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.cl-t{margin:0;font-weight:500;font-size:clamp(80px,15vw,260px);line-height:.86;letter-spacing:-.035em}
.cl-n{margin:16px 0 0;font-size:clamp(26px,4.4vw,64px);line-height:1}
.cl-links{display:flex;flex-wrap:wrap;gap:12px 48px;border-top:1px solid var(--paper);padding-top:22px}
.cl-links a{font-weight:500;font-size:22px;text-decoration:none;min-height:40px;display:inline-flex;align-items:center}
.cl-links a:hover{text-decoration:underline;text-underline-offset:5px}
.cl-last{margin:0;font-size:14px}
.closed :focus-visible{outline-color:#fff}

/* dialogs */
.dlg{border:4px solid var(--ink);padding:28px;max-width:min(560px,92vw);background:#fff;color:var(--ink);border-radius:0}
.dlg::backdrop{background:rgba(11,11,11,.55)}
.dlg h2{font-weight:500;font-size:28px;letter-spacing:-.02em;margin:0 0 14px;text-transform:uppercase}
.dlg-x{position:absolute;right:10px;top:6px;font-size:30px;width:40px;height:40px}
.wp-list{display:grid;gap:8px}
.wp-item{display:flex;gap:12px;align-items:center;border:2px solid var(--ink);padding:10px 14px;font-weight:500;min-height:48px}
.wp-item:hover{background:var(--ink);color:#fff}
.wp-dot{width:24px;height:24px;border-radius:50%;background:var(--dot)}
.wp-get{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;font-size:15px}
.wp-off{margin-top:14px;text-decoration:underline}
.wp-err{color:var(--ink);font-size:14px}
.lb{max-width:min(920px,94vw)}
.lb .lbg{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:24px;align-items:center}
.lb .lbg img{max-height:70vh;width:auto;justify-self:center}
.vote form{display:grid;gap:12px}
.vote label{display:grid;gap:6px;font-size:13px}
.vote input{border:0;border-bottom:3px solid var(--ink);font:500 28px var(--mono);padding:4px 0;width:100%}
.vote .ln{font-size:13px;margin:0}
.vote .row3{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:6px}
.vote .quick{display:flex;gap:6px}
.vote .quick button{border:2px solid var(--ink);padding:4px 10px;font:500 13px var(--mono);min-height:34px}

.toasts{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);display:grid;gap:8px;z-index:60;width:min(520px,92vw)}
.toast{background:#fff;border:2px solid var(--ink);padding:10px 14px;font:400 14px var(--mono)}
.toast.err::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--dot);margin-right:8px}
.toast.ok{background:var(--ink);color:#fff}

@media (max-width:1100px){.sub-row .t{white-space:normal;flex-wrap:wrap;row-gap:4px}.sub-row .t small{flex-basis:100%}}
/* ---------- phone */
@media (max-width:1100px){
  .pass-wrap{width:min(400px,42vw)}
  .rules{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .rules img{grid-column:1/-1;width:220px}
}
@media (max-width:760px){
  :root{--g:16px;--lab:0px}
  body{font-size:17px}
  .nav{font-size:15px;padding-top:12px;align-items:flex-start}
  .nav-l{gap:0 14px}
  .nav a,.nav .u{min-height:40px;display:inline-flex;align-items:center}
  .ca,.p-arm input,.p-arm select{min-height:32px}
  .nav-l a:nth-child(1),.nav-l a:nth-child(5){display:none}
  .nav-r{gap:6px 14px;justify-content:flex-end}
  .nav .u{font-size:15px}
  .wm{font-size:17.8vw;margin-top:10px}
  .sub{font-size:19px;padding:0 var(--g) 14px}
  .pass-wrap{position:relative;right:auto;top:auto;width:auto;margin:22px 22px 18px}
  .pass{transform:rotate(-3deg)}
  .pass-face{padding:16px 34px 12px;min-height:0}
  .thumb{width:64px;height:64px;right:-6px;top:-34px}
  .checks{margin:12px 0 0}
  .room{height:290px;min-height:0;border-top:var(--rule)}
  .hud{left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(3,1fr)}
  .hud li{min-width:0;padding:7px 8px;border-width:2px 0 0 2px;margin:0}
  .hud li:first-child{border-left:0}
  .hud b{font-size:16px}
  .hud span{font-size:9px}
  .demo{left:8px;right:auto;top:8px;bottom:auto;max-width:none;font-size:11px;padding:4px 8px}
  .demo p:last-child{display:none}
  .demo .dt{margin:0}
  .rh{grid-template-columns:1fr;padding:14px var(--g);min-height:0;gap:6px}
  .rl{font-size:13px}
  .rl br{display:none}
  .rt{font-size:13vw;white-space:normal;flex-wrap:wrap;row-gap:4px;max-height:calc(2 * 1em + 8px);overflow:hidden}
  .rt.ol{font-size:14vw}
  .ri{height:52px}.ri.tk{height:46px}.dots3{height:52px}.dots3 i{width:20px;height:20px}
  .how{grid-template-columns:1fr;gap:14px;padding:4px var(--g) 26px}
  .today-bar{padding:4px var(--g) 10px}
  .sub-row{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}
  .sub-row .ix{grid-column:1/-1}
  .sub-row .w{grid-column:1;text-align:left}
  .sub-row .vd{grid-column:2;grid-row:2/4}
  .sub-row .t{font-size:30px}
  .inv{padding:20px var(--g) 26px}
  .inv p{font-size:19px}
  .ov{grid-template-columns:1fr;padding:30px var(--g);gap:22px;min-height:0}
  .ov-work{justify-self:center}
  .ov-work img{max-height:300px}
  .salon{gap:14px;padding:24px var(--g)}
  .cloak{height:auto;min-height:0}
  .cloak-img{position:relative;height:240px}
  .tags{position:relative;left:0;right:0;top:0;padding:14px var(--g);justify-content:flex-start}
  .cloak-note{position:relative;right:auto;bottom:auto;margin:14px var(--g);max-width:none}
  .cloak-foot{padding:12px var(--g) 18px}
  .pool{grid-template-columns:1fr;gap:18px;padding:22px var(--g) 28px}
  .pool img{max-width:220px}
  .depot{height:200px}
  .hall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hf .stack{height:120px}.hf .stack img{height:110px}
  .rules{grid-template-columns:1fr;gap:18px;padding:22px var(--g) 30px}
  .rules img{width:180px}
  .prop{grid-template-columns:1fr}
  .prop-f{padding:20px var(--g) 24px;border-right:0;border-bottom:2px solid var(--ink)}
  .prop-p{padding:20px var(--g) 28px}
  .prop input:not([type=file]){font-size:22px}
  .closed{padding:40px var(--g) 24px;min-height:0}
  .closed-top{grid-template-columns:1fr;gap:20px}
  .seal,.ring{width:150px;height:150px}.seal img{left:35px;top:35px;width:80px;height:80px}
  .cl-links{gap:10px 26px}.cl-links a{font-size:19px}
  .lb .lbg{grid-template-columns:1fr}
  .bar-ca{display:none}
  .bar-st{padding:4px 18px;font-size:14px}
  .follow{display:none}
}
@media (hover:none){.follow{display:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}