@font-face{font-family:B;font-weight:400;src:url(/f/bricolage-grotesque-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:B;font-weight:600;src:url(/f/bricolage-grotesque-latin-600-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:B;font-weight:800;src:url(/f/bricolage-grotesque-latin-800-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:C;font-weight:700;src:url(/f/caveat-latin-700-normal.woff2) format("woff2");font-display:swap}
:root{--w:#F6F2EA;--k:#111;--r:#F20A1C;--g:#555}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--w);color:var(--k);font-family:B,system-ui,sans-serif;font-weight:600;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.lock{overflow:hidden}
h1,h2{font-weight:800;letter-spacing:-.035em;line-height:1;margin:0}
h1 span.red,h2 span{color:var(--r)}
button{font:inherit;color:inherit;cursor:pointer}
.wire{position:absolute;left:0;right:0;top:0;height:5px;background:var(--k);transform-origin:left center;z-index:3}
.btn{display:inline-block;border:0;border-radius:60px;padding:.75em 1.5em;font-weight:800;font-size:clamp(18px,1.9vw,26px);text-decoration:none;color:#fff;cursor:pointer;transition:transform .2s}
.btn:hover{transform:translateY(-3px) rotate(-1deg)}
.btn.dark{background:var(--k)}.btn.red{background:var(--r)}

/* a hanging frame */
.fr{position:relative;display:flex;flex-direction:column;align-items:center;background:none;border:0;padding:0;transform-origin:top center;transform:rotate(var(--rot,0deg));flex-shrink:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fr .str{width:2px;height:var(--s,40px);background:var(--k);display:block}
.fr .pic{display:block;width:var(--fw,250px);border:clamp(6px,.7vw,10px) solid var(--k);background:#fff;box-shadow:0 14px 26px rgba(0,0,0,.22);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;transform-origin:top center}
.fr .pic img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.fr .plc{position:absolute;left:50%;top:100%;transform:translate(-50%,6px);background:#fff;border:2px solid var(--k);padding:6px 12px;text-align:left;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:5}
.fr .plc b{display:block;font-size:15px;font-weight:800}.fr .plc em{display:block;font-style:normal;font-size:12px;color:var(--g)}
.fr:hover,.fr:focus-visible{z-index:4;outline:0}
.fr:hover .pic,.fr:focus-visible .pic{transform:perspective(900px) rotateX(-7deg) scale(1.08);box-shadow:0 30px 50px rgba(0,0,0,.32)}
.fr:hover .plc,.fr:focus-visible .plc{opacity:1;transform:translate(-50%,14px)}

/* hero */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden}
.herorow{position:absolute;top:5px;left:3vw;right:3vw;display:flex;justify-content:space-between;align-items:flex-start}
.herorow .fr{--fw:clamp(150px,17.5vw,300px)}
.herotext{position:absolute;left:0;right:0;bottom:7svh;text-align:center;padding:0 20px}
.hero h1{font-size:clamp(40px,7.2vw,112px);min-height:1em}
.caret{display:inline-block;width:.06em;height:.85em;background:var(--r);margin-left:.04em;vertical-align:-.06em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.sub{font-size:clamp(18px,2.4vw,34px);color:#333;margin:.5em 0 .8em}
.logo{position:absolute;left:3vw;bottom:4svh;height:23px;width:auto}
.hero .sub,.hero .btn{opacity:0}

/* long wall */
.long{position:relative}
.longpin{position:relative;height:100svh;overflow:hidden;background:var(--w)}
.track{position:absolute;left:0;top:5px;height:calc(100% - 5px);display:flex;align-items:flex-start;gap:clamp(24px,3vw,56px);padding:0 6vw;will-change:transform;cursor:grab;touch-action:pan-y}
.track.drag{cursor:grabbing}
.col{display:flex;flex-direction:column;align-items:center;flex-shrink:0}
.col .fr{--fw:min(30vw,52svh)}
.col .fr + .fr{margin-top:-2px}
.draghint{position:absolute;right:4vw;bottom:4svh;font-weight:800;font-size:clamp(16px,1.6vw,22px);background:var(--w);padding:6px 10px;z-index:4}
.draghint span{display:inline-block;animation:nudge 1.2s ease-in-out infinite}
@keyframes nudge{50%{transform:translateX(8px)}}

/* phone to wall */
.phonepin{position:relative;height:100svh;overflow:hidden}
.handset{position:absolute;left:8vw;top:50%;transform:translateY(-50%);width:clamp(200px,22vw,300px);aspect-ratio:29/56;border:10px solid var(--k);border-radius:40px;background:#fff;padding:14px;z-index:2}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.grid img{width:100%;aspect-ratio:1;object-fit:cover;display:block;will-change:transform;border:0 solid #fff;box-shadow:0 0 0 rgba(0,0,0,0)}
.grid i{display:block;aspect-ratio:1;background:#eee}
.grid .cell{position:relative}.grid .cell img{position:absolute;inset:0;height:100%;z-index:6}
.target{position:absolute;right:6vw;top:5px;display:flex;flex-direction:column;align-items:center;transform-origin:top center}
.target .str{width:2px;height:7svh;background:var(--k)}
.tframe{width:clamp(280px,40vw,620px);aspect-ratio:16/10;border:12px dashed var(--k);overflow:hidden;background:transparent}
.tframe img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;opacity:0}
.ptext{position:absolute;left:calc(8vw + clamp(200px,22vw,300px) + 5vw);right:6vw;bottom:10svh}
.ptext h2{font-size:clamp(40px,6.4vw,96px)}
.ptext .small{font-size:clamp(18px,2.2vw,32px);color:var(--g);margin:.6em 0 0}
.ptext .b{position:absolute;right:0;bottom:0;text-align:right;opacity:0}

/* words */
.words{position:relative;padding:clamp(60px,9vw,130px) 5vw clamp(60px,8vw,110px)}
.wordshead{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;max-width:1300px;margin:0 auto}
.words h2{font-size:clamp(40px,5.6vw,80px)}
.wordshead a{color:var(--k);font-size:clamp(16px,1.6vw,22px)}
.pins{max-width:1300px;margin:50px auto 0;columns:3;column-gap:44px}
.pins figure{break-inside:avoid;margin:0 0 44px;position:relative;transform:rotate(var(--rot));box-shadow:0 12px 24px rgba(0,0,0,.18);transition:transform .3s}
.pins figure:hover{transform:rotate(0) scale(1.03)}
.card{background:#fff;padding:28px}
.card:before{content:"";position:absolute;left:50%;top:-11px;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:var(--r);box-shadow:0 3px 5px rgba(0,0,0,.3)}
.card blockquote{margin:0;font-weight:800;font-size:clamp(20px,2vw,27px);line-height:1.16}
.card figcaption{color:var(--r);margin-top:12px;font-size:18px}
.card small{display:block;color:#888;font-size:14px;margin-top:2px}
.note{background:var(--bg);padding:20px 22px}
.note blockquote{margin:0;font-family:C,cursive;font-weight:700;font-size:clamp(28px,2.6vw,36px);line-height:1.02}
.note figcaption{color:var(--g);font-size:15px;margin-top:8px}

/* back room */
.back{position:relative;padding:clamp(60px,9vw,120px) 6vw}
.back h2{font-size:clamp(38px,5vw,72px);max-width:1300px;margin:0 auto}
.shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px);max-width:1300px;margin:50px auto 0}
.big{position:relative;text-align:left;min-height:clamp(240px,26vw,400px);border:10px solid var(--k);background:#fff;padding:clamp(20px,2.4vw,32px);transform:rotate(var(--rot));box-shadow:0 14px 26px rgba(0,0,0,.2);transition:transform .3s}
.big b{display:block;font-size:clamp(26px,3.3vw,46px);line-height:1.05;letter-spacing:-.02em}
.big em{display:block;font-style:normal;color:#666;font-size:clamp(17px,1.8vw,26px);margin-top:14px}
button.big:hover{transform:rotate(0) scale(1.03)}
.pill{position:absolute;right:-14px;bottom:-22px;background:var(--r);color:#fff;font-weight:800;font-size:clamp(17px,1.7vw,24px);padding:.6em 1em;border-radius:40px;box-shadow:0 8px 16px rgba(0,0,0,.3)}

/* yours */
.yours{position:relative;padding:5px 5vw clamp(70px,9vw,130px);min-height:90svh}
.formrow{display:flex;align-items:flex-start;justify-content:center;gap:clamp(30px,5vw,70px);flex-wrap:wrap}
.hangwrap{display:flex;flex-direction:column;align-items:center;transform-origin:top center}
.hangwrap .str{width:2px;height:clamp(40px,8svh,90px);background:var(--k)}
.drop{width:min(480px,86vw);min-height:400px;border:12px dashed var(--k);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;cursor:pointer;padding:24px;text-align:center;transition:background .2s,transform .2s}
.drop.over{background:#fff;transform:scale(1.03)}
.drop strong{font-size:clamp(34px,4vw,50px);line-height:1.05;letter-spacing:-.03em}
.drop span{font-size:clamp(18px,1.8vw,24px);color:#777}
.thumbs{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.thumbs img{width:64px;height:64px;object-fit:cover;border:3px solid #fff;box-shadow:0 3px 8px rgba(0,0,0,.25)}
.fields{display:flex;flex-direction:column;gap:14px;width:min(480px,86vw);margin-top:clamp(40px,8svh,90px)}
.fields input{font:inherit;font-size:clamp(18px,1.9vw,26px);border:3px solid var(--k);border-radius:14px;padding:.65em .8em;background:#fff;color:var(--k);width:100%}
.fields input:focus{outline:4px solid rgba(242,10,28,.3)}
.fields input.bad{border-color:var(--r)}
.fields .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.fields .btn{font-size:clamp(20px,2.2vw,30px);margin-top:4px}
.formnote{margin:0;font-size:clamp(17px,1.8vw,24px);color:#333}
.hung{text-align:center;padding-top:0}
.hungrow{display:flex;justify-content:center;align-items:flex-start;gap:3vw}
.hungrow .fr{--fw:clamp(110px,16vw,240px);pointer-events:none}
.mine{display:flex;flex-direction:column;align-items:center;transform-origin:top center}
.mine i{width:2px;height:30px;background:var(--k)}
.mine div{width:clamp(180px,22vw,320px);aspect-ratio:16/10;border:10px solid var(--r);background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;font-size:clamp(18px,2.2vw,30px);padding:10px;line-height:1.1}
.mine small{font-weight:600;color:var(--g);font-size:.6em;margin-top:6px}
.hung h2{font-size:clamp(44px,6.6vw,96px);margin-top:8svh}
.hung p{font-size:clamp(18px,2.4vw,34px);color:#444}

/* foot */
.foot{position:relative;padding:clamp(60px,8vw,110px) 6vw 80px}
.flogo{height:46px;width:auto;display:block}
.foot h2{font-size:clamp(34px,4.6vw,64px);margin-top:24px}
.links{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,36px);margin-top:50px;max-width:1300px}
.links a{display:block;border:8px solid var(--k);background:#fff;padding:20px;min-height:170px;color:var(--k);text-decoration:none;transform:rotate(var(--rot));box-shadow:0 10px 20px rgba(0,0,0,.16);transition:transform .3s}
.links a:hover{transform:rotate(0) scale(1.04)}
.links small{display:block;color:var(--g);font-size:15px}
.links b{display:block;font-size:clamp(17px,1.7vw,24px);margin-top:6px;word-break:break-word}
.links em{display:block;font-style:normal;color:var(--r);font-size:15px;margin-top:6px}

/* viewer */
.viewer,.demo{position:fixed;inset:0;z-index:50;background:var(--w);display:flex;flex-direction:column}
.viewer[hidden],.demo[hidden],.grow[hidden]{display:none}
.vbar{height:64px;flex-shrink:0;background:var(--k);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 clamp(12px,2.4vw,34px);font-size:clamp(14px,1.5vw,20px)}
.vbar button{background:none;border:0;color:#fff;font-weight:600;padding:10px 4px;white-space:nowrap}
.vbar button:last-child{color:#bbb}.vbar button:hover{color:var(--r)}
.vbar b{font-weight:800;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vstage{flex:1;margin:22px clamp(0px,4vw,60px) 0;border:10px solid var(--k);border-bottom:0;background:#fff;position:relative;min-height:0}
.vstage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
.vend{position:absolute;left:clamp(0px,4vw,60px);right:clamp(0px,4vw,60px);bottom:0;background:var(--k);color:#fff;padding:18px clamp(14px,2.4vw,34px);display:flex;align-items:center;justify-content:space-between;gap:16px;transform:translateY(105%);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.vend.on{transform:none}
.vend b{font-weight:800;font-size:clamp(20px,2.8vw,40px)}
.vend span{color:#bbb;font-size:clamp(15px,1.9vw,28px)}
.vend .btn{flex-shrink:0;font-size:clamp(16px,1.7vw,24px)}
.grow{position:fixed;z-index:49;border:10px solid var(--k);background:#fff;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.4)}
.grow img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.demobody{flex:1;display:flex;align-items:center;justify-content:center;gap:clamp(24px,5vw,80px);padding:24px;min-height:0}
.vidframe{height:min(100%,78svh);aspect-ratio:780/1688;border:10px solid var(--k);border-radius:34px;overflow:hidden;background:#000;flex-shrink:0;transform:rotate(-1.5deg);box-shadow:0 20px 40px rgba(0,0,0,.3)}
.vidframe video{width:100%;height:100%;display:block;object-fit:cover}
.demotext{max-width:520px}
.demotext h2{font-size:clamp(34px,4.6vw,64px)}
.demotext p{font-size:clamp(18px,2vw,28px);color:#444;line-height:1.25}

@media (max-width:820px){
  .herorow{flex-direction:column;align-items:center;left:0;right:0}
  .herorow .fr{--fw:min(58vw,30svh);--s:16px!important}
  .herorow .fr:nth-child(n+3){display:none}
  .herotext{bottom:9svh}
  .logo{left:50%;transform:translateX(-50%);bottom:2.5svh}
  .longpin{height:auto;overflow:visible;padding-bottom:40px}
  .track{position:relative;flex-direction:column;align-items:center;gap:0;padding:0;cursor:default;transform:none!important}
  .col .fr{--fw:76vw;--s:26px!important}
  .draghint{display:none}
  .fr .plc{opacity:1;position:static;transform:none;margin-top:6px;white-space:normal;text-align:center;border:0;background:none;padding:0}
  .fr:hover .plc{transform:none}
  .handset{left:50%;top:9svh;transform:translateX(-50%);width:min(40vw,22svh);border-width:7px;border-radius:26px;padding:8px}
  .grid{gap:3px}
  .target{right:auto;left:50%;top:auto;bottom:22svh;transform:translateX(-50%)}
  .target .str{display:none}
  .tframe{width:74vw;border-width:8px}
  .ptext{left:6vw;right:6vw;bottom:5svh;text-align:center}
  .ptext .b{left:0;text-align:center}
  .pins{columns:1}
  .shelf{grid-template-columns:1fr}
  .big{min-height:0;padding-bottom:40px}
  .links{grid-template-columns:1fr 1fr}
  .links a{min-height:130px;padding:14px;border-width:6px}
  .vstage{margin-top:0;border-width:0}
  .vbar{height:54px}
  .vend{flex-direction:column;align-items:stretch;text-align:center;gap:10px}
  .demobody{flex-direction:column;overflow:auto;justify-content:flex-start}
  .vidframe{height:52svh}
  .demotext{text-align:center}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.caret,.draghint span{animation:none}}
[hidden]{display:none!important}
@media (max-width:820px){
  .handset{top:7svh;width:auto;height:30svh;aspect-ratio:29/56}
  .target{top:41svh;bottom:auto}
  .tframe{width:min(78vw,40svh)}
  .ptext{top:70svh;bottom:auto}
  .ptext h2{font-size:clamp(34px,10vw,44px)}
  .ptext .b{top:0;bottom:auto;right:0;left:0}
}
@media (max-width:820px){
  .handset{top:6svh;height:28svh}
  .target{top:38svh}
  .tframe{width:auto;height:24svh;max-width:88vw;border-width:7px}
  .ptext{top:66svh}
}