/* Website take 1: Toy Box. Oat paper, a Swiss-ish editorial frame, and a pen full of toys with real physics. */
@import url("base.css");

/* header */
.top{position:relative;z-index:6;display:flex;align-items:flex-start;gap:28px;padding:22px var(--gut) 0}
.top nav{margin-left:auto;display:flex;gap:26px;font:500 12.5px var(--mono);letter-spacing:.07em;text-transform:uppercase;padding-top:6px}
.top nav a{text-decoration:none;border-bottom:1.5px solid transparent;padding-bottom:3px}
.top nav a:hover{border-color:currentColor}

/* the pen: everything inside it is a physics body (see app.js) */
.box{padding:0 var(--gut)}
.pen{position:relative;height:max(540px,calc(100svh - 150px));border-bottom:3px solid var(--cocoa)}
.pen .aside{position:absolute;right:0;top:clamp(20px,5vh,60px);margin:0;font-size:clamp(24px,2.6vw,42px);line-height:1;color:var(--cobalt);transform:rotate(-3deg)}
.head{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:min(15.2vw,27svh);user-select:none;-webkit-user-select:none}
.head .ln{display:block;white-space:nowrap}
.head .l2{text-align:right;margin-top:-.02em}
.w{display:inline-block;position:relative;will-change:transform;cursor:default}
.w.loose{cursor:grab;touch-action:none;z-index:4}
.w.loose:active{cursor:grabbing}
.w.nudge{animation:nudge .35s var(--spring)}
@keyframes nudge{30%{transform:rotate(-3deg) translateY(-4%)}65%{transform:rotate(2deg)}}
.pen-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:14px 0 0}
.pen-foot .hint{opacity:.65}
.tidy{border:0;background:var(--cocoa);color:var(--oat);border-radius:99px;padding:11px 18px;font:500 12px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;transition:transform .3s var(--spring)}
.tidy:hover{transform:rotate(-3deg) scale(1.05)}

/* toys: positioned by app.js every frame */
.toy{position:absolute;left:0;top:0;z-index:5;pointer-events:none;will-change:transform}
.toy svg *{pointer-events:visiblePainted}
.toy svg{cursor:grab;touch-action:none}
.toy.held svg{cursor:grabbing}
.toy .zzz,.pen>.zzz{z-index:6}
.pen>.zzz{position:absolute;left:0;top:0}

/* the deal: Paddix fronts the rude one */
.butt{display:grid;grid-template-columns:1.25fr .75fr;align-items:center;gap:clamp(20px,4vw,60px);background:var(--cocoa);color:var(--oat);margin-top:clamp(70px,9vw,140px);padding:clamp(60px,8vw,130px) var(--gut);overflow:hidden}
.butt h2{margin:22px 0 0;font-size:clamp(56px,8.6vw,164px)}
.butt .hl{color:var(--acid)}
.once{margin:clamp(26px,3vw,44px) 0 0;font:800 clamp(24px,2.6vw,42px)/1.02 var(--display);font-variation-settings:"opsz" 96;letter-spacing:-.035em;max-width:22ch}
.once span{display:block;color:var(--oat);opacity:.55}
.butt-guy{position:relative;justify-self:center;width:min(100%,460px);cursor:pointer}
.butt-guy .char{transform-origin:50% 92%;transition:transform .4s var(--spring)}
.butt-guy.waggle .char{animation:waggle .44s ease-in-out infinite}
@keyframes waggle{0%,100%{transform:rotate(0) translateX(0)}25%{transform:rotate(-7deg) translateX(-3%)}75%{transform:rotate(7deg) translateX(3%)}}
.butt-guy .zzz{right:8%;top:6%;color:var(--oat);font-size:48px}

/* the junk: a bin of the stuff we don't do */
.junk{padding:clamp(80px,10vw,150px) var(--gut) 0}
.junk-head{position:relative;display:grid;grid-template-columns:1fr auto;align-items:end;gap:10px 30px}
.junk-head .label{grid-column:1/-1}
.junk h2{margin:0;font-size:clamp(52px,7.4vw,136px)}
.junk-head .aside{margin:0 0 .6em;font-size:clamp(20px,2vw,32px);line-height:1.05;color:var(--tangerine);max-width:15ch;text-align:right}
.bin-pen{height:clamp(460px,62vh,700px);margin-top:10px}
.bin{position:absolute;left:50%;bottom:0;width:min(72%,880px);height:46%;transform:translateX(-50%);border:clamp(10px,1.2vw,16px) solid var(--cocoa);border-top:0;border-radius:0 0 28px 28px}
.bin-label{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;opacity:.5}
.tag{position:absolute;left:0;top:0;z-index:4;display:inline-block;white-space:nowrap;padding:.42em .95em .5em;border-radius:99px;font:800 clamp(17px,1.9vw,30px)/1 var(--display);font-variation-settings:"opsz" 96;letter-spacing:-.03em;color:var(--cocoa);background:var(--bg);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;will-change:transform}
.tag.held{cursor:grabbing}
.junk-foot{padding:16px 0 0}

/* merch: everything's sold out */
.merch{padding:clamp(90px,11vw,170px) var(--gut) 0}
.merch-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:10px 30px}
.merch-head .label{grid-column:1/-1}
.merch h1,.merch h2{margin:0;font-size:clamp(60px,9vw,170px)}
.merch-head .aside{margin:0 0 .7em;font-size:clamp(20px,2vw,32px);line-height:1.05;color:var(--cobalt);max-width:16ch;text-align:right}
.shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(30px,3.4vw,54px) clamp(16px,2vw,28px);margin-top:clamp(30px,4vw,56px)}
.item{display:flex;flex-direction:column}
.pic{position:relative;aspect-ratio:4/3.2;border-radius:28px;overflow:visible}
.pic img{display:block;width:100%;height:100%;object-fit:cover;border-radius:28px;filter:saturate(.92)}
.item h3{margin:18px 0 6px;font:800 clamp(24px,2.2vw,34px)/1 var(--display);font-variation-settings:"opsz" 96;letter-spacing:-.04em}
.item .label{gap:4px 14px;opacity:.7}
/* the die-cut sold-out sticker, slapped on a bit wonky */
.sold{position:absolute;right:-10px;top:-14px;z-index:2;display:grid;place-items:center;width:clamp(86px,8.4vw,118px);aspect-ratio:1;border-radius:50%;background:var(--tangerine);color:var(--cocoa);font:800 clamp(17px,1.6vw,23px)/.88 var(--display);font-variation-settings:"opsz" 96;letter-spacing:-.03em;text-align:center;text-transform:uppercase;box-shadow:0 0 0 5px var(--oat),0 8px 14px -4px rgba(51,36,27,.45);transform:rotate(var(--r,12deg));transition:transform .35s var(--spring)}
.item:nth-child(2) .sold{--r:-9deg;background:var(--acid)}
.item:nth-child(3) .sold{--r:7deg;background:var(--bubblegum)}
.item:nth-child(4) .sold{--r:-14deg;background:var(--mint)}
.item:nth-child(5) .sold{--r:10deg;background:var(--lilac)}
.item:nth-child(6) .sold{--r:-6deg;background:var(--acid)}
.item:hover .sold{transform:rotate(calc(var(--r,12deg) * -1)) scale(1.06)}
.item.cheer .sold{animation:cheer .6s var(--spring)}
@keyframes cheer{40%{transform:rotate(0) scale(1.25)}}
.notify{margin-top:16px;min-height:52px}
.notify-btn{border:2px solid var(--cocoa);background:none;border-radius:99px;padding:13px 20px;font:800 17px/1 var(--display);font-variation-settings:"opsz" 96;letter-spacing:-.02em;transition:background .2s,color .2s,transform .3s var(--spring)}
.notify-btn:hover{background:var(--cocoa);color:var(--oat);transform:rotate(-2deg)}
.notify-form{display:flex;flex-wrap:wrap;gap:8px}
.notify-form input{flex:1 1 180px;min-width:0;border:2px solid var(--cocoa);border-radius:99px;padding:12px 18px;background:#fff8ee;color:var(--cocoa);font:500 16px/1 var(--display)}
.notify-form input:focus{outline:none;box-shadow:0 0 0 4px rgba(52,70,255,.3)}
.notify-form button{border:0;background:var(--cocoa);color:var(--oat);border-radius:99px;padding:12px 20px;font:800 17px/1 var(--display);font-variation-settings:"opsz" 96;letter-spacing:-.02em}
.notify-form button:disabled{opacity:.5}
.notify-form .oops{flex-basis:100%;margin:2px 0 0 6px;font:italic 400 19px/1.1 var(--serif);color:var(--tangerine)}
.notify-form.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-6px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
.notify .done{margin:4px 0 0;font:italic 400 clamp(19px,1.6vw,23px)/1.15 var(--serif);color:var(--cobalt)}
.merch-foot{padding-top:clamp(30px,4vw,50px);opacity:.7}

/* go: the sign-off */
.go{padding:clamp(90px,11vw,170px) var(--gut) clamp(50px,6vw,90px);text-align:center;overflow:hidden}
.go .label{justify-content:center}
.go-line{margin:24px 0 0;font-size:clamp(60px,11vw,210px);transition:opacity .25s,transform .25s}
.go-line.swap{opacity:0;transform:translateY(14px)}
.gang{display:flex;justify-content:center;align-items:flex-end;gap:clamp(4px,1.6vw,26px);margin:clamp(30px,4vw,60px) auto 0;max-width:1100px}
.walker{position:relative;flex:0 1 175px;transition:transform 1.6s cubic-bezier(.5,0,.75,0)}
.walker .char{animation:none}
.gang.walking .walker .char{animation:waddle .34s ease-in-out infinite alternate}
@keyframes waddle{from{transform:rotate(-5deg) translateY(0)}to{transform:rotate(5deg) translateY(-6%)}}
.gang.gone .walker{transform:translateX(120vw)}
.gang.back .walker{transition-timing-function:cubic-bezier(.25,1,.5,1)}
.walker.hop .char{animation:hop .55s var(--spring)}
@keyframes hop{35%{transform:translateY(-22%) rotate(-6deg)}}
.walker .zzz{right:0;top:-10%;font-size:28px}
.bye-btn{margin-top:clamp(30px,4vw,50px);border:0;background:var(--tangerine);color:var(--cocoa);border-radius:99px;padding:18px 34px;font:800 clamp(20px,1.8vw,28px)/1 var(--display);font-variation-settings:"opsz" 96;letter-spacing:-.03em;transition:transform .35s var(--spring)}
.bye-btn:hover{transform:rotate(-4deg) scale(1.06)}

/* footer */
.foot{display:flex;align-items:flex-end;gap:40px;padding:50px var(--gut) 36px;border-top:3px solid var(--cocoa);margin:0 var(--gut)}
.foot .logo{font-size:30px}
.foot-row{flex:1;justify-content:space-between;gap:10px 30px;opacity:.75}
.foot-row a{text-decoration-thickness:1.5px;text-underline-offset:3px}

@media (max-width:820px){
  .top{flex-wrap:wrap;row-gap:14px}
  .top .sound{margin-left:auto}
  .top nav{order:3;width:100%;margin-left:0;gap:18px;padding-top:0;font-size:11.5px}
  .pen{height:max(520px,calc(100svh - 170px))}
  .head{font-size:min(17vw,21svh)}
  .pen-foot{align-items:flex-start}
  .pen-foot .label{flex-direction:column}
  .butt{grid-template-columns:1fr}
  .butt-guy{width:min(70%,320px);order:-1}
  .junk-head{grid-template-columns:1fr}
  .junk-head .aside{text-align:left}
  .merch-head{grid-template-columns:1fr}
  .merch-head .aside{text-align:left}
  .shelf{grid-template-columns:1fr 1fr}
  .bin{width:92%;height:40%}
  .foot{flex-direction:column;align-items:flex-start}
  .foot-row{flex-direction:column}
}
@media (max-width:540px){.shelf{grid-template-columns:1fr}}

/* ---------------- about (a section of the scroll) ---------------- */
.about{padding-top:clamp(40px,5vw,80px)}
.top nav a[aria-current]{border-color:currentColor}
.hello{padding:clamp(50px,7vw,110px) var(--gut) 0}
.hello .label span:first-child{font-weight:700}
.hello h2{margin:22px 0 0;font-size:clamp(56px,9.2vw,176px);max-width:12ch}
.photo{position:relative;margin:clamp(70px,8vw,120px) var(--gut) 0}
.photo img{position:relative;z-index:1;display:block;width:100%;height:auto;border-radius:32px;background:#d9cfbf}
.photo figcaption{margin:14px 0 0 8px;font-size:clamp(20px,2vw,30px);color:var(--cobalt)}
/* the shy ones: mostly hidden behind the top edge of a photo, eyes over the parapet */
.peek{position:absolute;z-index:0;top:0;width:clamp(110px,10vw,170px);transform:translateY(-64%);transition:transform .5s var(--spring)}
.peek.ducked{transform:translateY(-4%)}
.pk-top{right:11%}
.story{display:grid;gap:clamp(24px,3vw,40px);padding:clamp(70px,9vw,140px) var(--gut) 0}
.lede{margin:0;font:800 clamp(34px,4.4vw,74px)/.95 var(--display);font-variation-settings:"opsz" 96;letter-spacing:-.045em;max-width:17ch}
.story-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,70px);max-width:1240px}
.story-cols p{margin:0;font-size:clamp(19px,1.55vw,24px);line-height:1.42}
.sign{margin:0;font-size:clamp(24px,2.4vw,38px);line-height:1.1;color:var(--tangerine)}
.yucky{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,90px);align-items:start;margin-top:clamp(90px,11vw,170px);padding:clamp(60px,8vw,120px) var(--gut) clamp(40px,5vw,70px);background:var(--cocoa);color:var(--oat)}
.yucky h3{margin:18px 0 0;font-size:clamp(48px,6.2vw,118px)}
.yucky .hl{color:var(--acid)}
.yucky-text>p:last-child{max-width:36ch;margin:26px 0 0;font-size:clamp(18px,1.5vw,22px);line-height:1.42;opacity:.9}
.tell{display:grid;gap:24px}
.field{display:grid;gap:10px}
.field i{font-style:normal;text-transform:none;letter-spacing:0;opacity:.6}
.tell input[type=text],.tell input[type=email]{width:100%;border:2px solid var(--oat);border-radius:18px;background:transparent;color:var(--oat);padding:15px 18px;font:500 18px/1.2 var(--display)}
.tell input::placeholder{color:rgba(243,235,221,.42)}
.tell input:focus{outline:none;box-shadow:0 0 0 4px rgba(214,245,72,.45)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;border:0}
.chips legend{float:left;width:100%;margin:0 0 12px;padding:0}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.chips span{display:inline-block;padding:.52em .95em .58em;border:2px solid var(--oat);border-radius:99px;font:800 18px/1 var(--display);font-variation-settings:"opsz" 96;letter-spacing:-.02em;transition:background .2s,color .2s,border-color .2s}
.chips input:checked+span{background:var(--bg);border-color:var(--bg);color:var(--cocoa)}
.chips input:focus-visible+span{outline:3px solid var(--acid);outline-offset:3px}
.chips label.picked span{animation:pick .4s var(--spring)}
@keyframes pick{40%{transform:scale(1.12) rotate(-3deg)}}
.send-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.tell button[type=submit],.another{border:0;border-radius:99px;padding:17px 30px;background:var(--acid);color:var(--cocoa);font:800 clamp(19px,1.6vw,23px)/1 var(--display);font-variation-settings:"opsz" 96;letter-spacing:-.03em;transition:transform .35s var(--spring)}
.tell button[type=submit]:hover,.another:hover{transform:rotate(-3deg) scale(1.05)}
.tell button:disabled{opacity:.5}
.tell .oops{margin:0;font:italic 400 21px/1.1 var(--serif);color:var(--bubblegum)}
.tell.shake{animation:shake .4s}
.told .display{margin:0;font-size:clamp(48px,6vw,104px)}
.told .serif{margin:12px 0 26px;font-size:clamp(22px,2vw,32px);color:var(--acid)}
.crew{grid-column:1/-1;display:flex;justify-content:center;align-items:flex-end;gap:clamp(4px,1.6vw,26px);margin-top:clamp(10px,2vw,30px)}
.crew>span{position:relative;flex:0 1 150px;cursor:pointer}
.crew .zzz{right:0;top:-10%;font-size:26px;color:var(--oat)}

/* ---------------- the merch page ---------------- */
.merch-page .merch{padding-top:clamp(50px,7vw,110px)}
.shelf-wrap{position:relative}
.pk-shelf{right:6%;z-index:0}
.shelf{position:relative;z-index:1}
.instead{padding:clamp(90px,11vw,170px) var(--gut) clamp(60px,7vw,110px);text-align:center}
.instead p{margin:0;font-size:clamp(24px,2.4vw,38px);color:var(--tangerine)}
.instead a{display:inline-block;margin-top:10px;font-size:clamp(54px,9vw,170px);text-decoration:none;transition:transform .35s var(--spring)}
.instead a:hover{transform:rotate(-2deg) scale(1.03)}
@media (max-width:820px){
  .story-cols,.yucky{grid-template-columns:1fr}
}