/* FURNITURE · ABX Lounge 01, on white */
.lg{position:relative;height:100vh;height:100svh;min-height:600px;background:#ffffff;overflow:hidden}
.lg-cv{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}
.lg-cv:active{cursor:grabbing}
.lg-head{position:absolute;left:16px;right:16px;top:calc(var(--hh,53px) + 14px);display:flex;justify-content:space-between;border-top:1px solid var(--ink);padding-top:10px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;z-index:2;pointer-events:none}
.lg-head b{font-weight:400;display:block}.lg-head span{display:block;margin-left:30px;opacity:.6}
.lg-ctl{position:absolute;right:16px;bottom:20px;z-index:3;display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.lg-ctl button,.lg-r{font:inherit;font-size:11px;letter-spacing:.08em;text-transform:uppercase;height:34px;min-width:34px;padding:0 11px;border-radius:0;border:1px solid rgba(17,17,17,.3);background:#fff;color:var(--ink);cursor:pointer}
.lg-ctl button[data-a="in"],.lg-ctl button[data-a="out"]{padding:0;font-size:17px}
.lg-ctl button:hover{border-color:var(--red);color:var(--red)}
.lg-r{display:flex;align-items:center;gap:6px}
.lg-r input{width:90px;accent-color:var(--red)}
.lg-hint{position:absolute;left:16px;bottom:26px;margin:0;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.55;pointer-events:none;z-index:2}
.lg-tag{position:absolute;left:0;top:0;margin:0;z-index:2;transform:translate(-50%,-140%);pointer-events:none;opacity:0;transition:opacity .3s;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;background:#fff;border:1.5px solid var(--red);color:var(--red);padding:3px 10px;border-radius:999px;white-space:nowrap}
@media (max-width:640px){.lg-r{display:none}.lg-ctl{right:12px;bottom:14px}.lg-hint{left:12px;bottom:22px}}
/* the collection, from above */
.rg{position:relative;height:100vh;height:100svh;min-height:600px;background:#8d8f92;overflow:hidden;transition:background-color 1.4s ease}
.rg.loose{background:#b4553a}
.rg-cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.rg-head{color:#fff;border-top-color:#fff}
.rg-btn{position:absolute;right:16px;bottom:22px;z-index:3;padding:9px 11px;border:1px solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink);font:inherit;font-size:11px;letter-spacing:.06em;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .12s}
.rg-btn em{font-style:normal}.rg-btn b{font-weight:400}.rg-btn:active{transform:scale(.95)}
@media (max-width:640px){.rg-btn{right:12px;bottom:16px}}
/* the maker's wall */
.mk{position:relative;background:#f1f0ec;overflow:hidden}
.mk-head{position:relative;top:auto;left:auto;right:auto;margin:0 16px;padding-top:calc(var(--hh,53px) + 24px);border-top:0}
.mk-head::before{content:"";position:absolute;left:0;right:0;top:calc(var(--hh,53px) + 14px);border-top:1px solid var(--ink)}
.mk-wall{position:relative;width:100%;margin-top:10px;overflow:hidden}
.mk-wall svg{display:block;width:100%;height:auto}
.mk-it{cursor:pointer;outline:none}
.mk-it .mk-in{transition:transform .25s cubic-bezier(.3,1.4,.5,1),opacity .5s ease;transform-box:fill-box;transform-origin:50% 0}
.mk-wall:not(.hung) .mk-in{opacity:0;transform:translateY(-30px)}
.mk-wall.hung .mk-in{transition-delay:var(--d)}
.mk-it:hover .mk-in,.mk-it.on .mk-in,.mk-it:focus-visible .mk-in{transform:scale(1.06) rotate(-1.5deg);transition-delay:0s}
.mk-it.on .mk-in{filter:drop-shadow(0 0 0 #fe4102) drop-shadow(0 0 6px rgba(254,65,2,.55))}
.mk-cap{position:absolute;left:16px;bottom:18px;z-index:3;margin:0;max-width:min(460px,calc(100% - 32px));background:#fff;border-top:2px solid var(--ink);padding:10px 14px 12px;font-size:12.5px;line-height:1.5;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s;pointer-events:none}
.mk-cap.on{opacity:1;transform:none}
.mk-cap b{display:block;font-weight:400;font-size:10.5px;letter-spacing:.1em;color:var(--red)}
.mk-cap span{display:block;font-family:var(--grot);font-weight:700;font-size:15px;text-transform:uppercase;margin:2px 0 4px}
.mk-cap em{font-style:normal}
.mk-hint{position:absolute;right:16px;bottom:22px;margin:0;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.55;pointer-events:none}
@media (max-width:640px){.mk-wall{overflow-x:auto;-webkit-overflow-scrolling:touch}.mk-wall svg{width:230%;height:auto}.mk-hint{display:none}.mk-cap{bottom:12px;left:12px}}
/* stacked: the mark built out of furniture */
.stk{position:relative;height:700vh;height:700svh;background:#fff}
.stk-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.stk-stage{position:absolute;left:50%;top:calc(var(--hh,53px) + 70px);bottom:24px;aspect-ratio:1122/1402;transform:translateX(-50%);max-width:calc(100% - 24px)}
.stk-stage img{position:absolute;margin:0;padding:0;border:0;background:none;max-width:none;display:block;will-change:transform,opacity;pointer-events:none;user-select:none}
.stk-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);margin:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.6;transition:opacity .4s}
@media (max-width:640px){.stk-stage{width:calc(100% - 24px);bottom:auto;top:calc(var(--hh,45px) + 84px)}}
