/* 3DLUNCHBOX homepage — candidate "drop-redesign" (local only).  /home/?rev=drop-redesign
   Tokens + voices from Art Direction Board 01. Chef = APPROVED MASTER, whole-container transforms only. */
@font-face{font-family:"Archivo";src:url(/art-direction/fonts/archivo-latin-wdth-normal.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Caveat";src:url(/art-direction/fonts/caveat-latin-wght-normal.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"JB";src:url(/art-direction/fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"JB";src:url(/art-direction/fonts/jetbrains-mono-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
:root{--cream:#F8F6EB;--ink:#1D2124;--ink2:#4F5457;--blue:#A6DEF2;--blue2:#6FC3E0;--red:#F24E3F;--red-deep:#C9372A;
 --display:"Archivo","Arial Black",sans-serif;--mono:"JB",ui-monospace,monospace;--hand:"Caveat","Comic Sans MS",cursive;
 --spring:cubic-bezier(.2,1.25,.35,1);--out:cubic-bezier(.2,.8,.2,1);
 --cs:min(64vw,calc((100svh - 70px)*1.0));--cx:calc(100vw - var(--cs)*1.1);--cy:max(70px,calc(100svh - var(--cs)*.985));
 --T:128svh;--O:78svh}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{margin:0;background:var(--cream);color:var(--ink);font:450 17px/1.5 var(--display);font-stretch:100%;overflow-x:clip;
 background-image:radial-gradient(rgba(29,33,36,.035) 1px,transparent 1.2px);background-size:5px 5px}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
.defs{position:absolute;width:0;height:0}
.mono{font-family:var(--mono);font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.hand{font-family:var(--hand);font-weight:700;line-height:.92}
.ink{filter:url(#ink)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:60;background:var(--ink);color:var(--cream);padding:8px 14px}
.skip:focus{left:12px}
:focus-visible{outline:2px dashed var(--ink);outline-offset:6px}

/* Patreon: the official project asset (/assets/patreon-official-symbol.png, black on white), rendered unmodified */
.patw{display:block;position:relative;width:var(--pw,24px);height:var(--pw,24px);flex:none;overflow:hidden;mix-blend-mode:multiply}
.patw img{position:absolute;left:50%;top:50%;width:calc(var(--pw,24px)*2.95);max-width:none;height:auto;transform:translate(-50%,-50%)}
.patw.on-dark{mix-blend-mode:screen}.patw.on-dark img{filter:invert(1)}

/* ============ NAV ============ */
.nav{position:absolute;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;gap:clamp(14px,2.4vw,40px);padding:clamp(12px,1.6vw,22px) clamp(16px,3vw,44px);pointer-events:none}
.nav a,.nav button{pointer-events:auto}
.brand{display:grid;grid-template-columns:auto auto;column-gap:10px;align-items:center}
.brand .ox{width:clamp(34px,3.2vw,46px);height:auto}
.brand .word{font:900 clamp(1.05rem,1.55vw,1.5rem)/1 var(--display);font-stretch:88%}
.brand .tag{grid-column:1/3;font-size:.6rem;line-height:1.35;margin-top:6px}
.links{display:flex;gap:clamp(18px,2.6vw,44px);margin-left:clamp(0px,3vw,60px)}
.links a{font:600 .8rem var(--display);letter-spacing:.06em;text-transform:uppercase;padding:6px 0;position:relative}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:6px;border-bottom:2px solid var(--ink);border-radius:0 0 50% 50%;transform:scaleX(0);transition:transform .3s var(--spring)}
.links a:hover::after,.links a:focus-visible::after{transform:scaleX(1)}
.burger{width:46px;height:46px;border:2px solid var(--ink);background:var(--cream);display:grid;place-content:center;gap:5px;cursor:pointer;padding:0;
 clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.burger i{display:block;width:18px;height:2px;background:var(--ink)}
.sheet{position:fixed;inset:0;z-index:70;background:var(--cream);display:flex;flex-direction:column;justify-content:center;gap:10px;padding:90px 28px}
.sheet a{font:900 3.2rem/1 var(--display);font-stretch:74%;text-transform:uppercase}
.sheet[hidden]{display:none}

/* ---- Login: punched workshop tag (swings from its hole) ---- */
.tagctl{margin-left:auto;position:relative;display:inline-block;transform-origin:14px 50%;transition:transform .45s var(--spring)}
.tagctl .t-base,.tagctl .t-face{--cut:polygon(16px 0,100% 0,100% 100%,16px 100%,0 50%)}
.tagctl .t-base{position:absolute;inset:0;background:var(--ink);clip-path:var(--cut);transform:translate(4px,4px);transition:transform .2s}
.tagctl .t-face{position:relative;display:flex;align-items:center;gap:10px;padding:9px 16px 9px 26px;background:var(--ink);clip-path:var(--cut)}
.tagctl .t-face::before{content:"";position:absolute;inset:2px 2px 2px 3px;background:var(--cream);clip-path:polygon(15px 0,100% 0,100% 100%,15px 100%,0 50%);z-index:0}
.tagctl .t-face>*{position:relative;z-index:1}
.tagctl .hole{position:absolute;left:12px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--cream);box-shadow:inset 0 0 0 2px var(--ink);z-index:2}
.tagctl .patw{--pw:17px}
.tagctl b{font:800 .72rem var(--display);letter-spacing:.08em;text-transform:uppercase;font-stretch:90%}
.tagctl small{font:700 .55rem var(--mono);letter-spacing:.12em;color:var(--ink2);border-left:1.5px solid var(--ink);padding-left:9px}
.tagctl:hover{transform:rotate(-4deg)}
.tagctl:active .t-face{transform:translate(3px,3px)}.tagctl:active .t-base{transform:translate(4px,4px) scale(.98)}

/* ============ CONTROL PLATES (primary actions) ============ */
.controls{display:flex;flex-wrap:wrap;gap:14px 18px;margin-top:clamp(18px,2.6svh,32px);position:relative;z-index:6}
.ctrl{--plate:var(--blue);--txt:var(--ink);--c:10px;position:relative;display:inline-block;min-width:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ctrl .c-base,.ctrl .c-face{clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}
.ctrl .c-base{position:absolute;inset:0;background:var(--ink);transform:translate(6px,6px)}
.ctrl .c-base::after{content:"";position:absolute;right:12px;bottom:3px;width:28px;height:2px;background:repeating-linear-gradient(90deg,var(--cream) 0 3px,transparent 3px 6px);opacity:.55}
.ctrl .c-face{position:relative;display:flex;align-items:center;gap:14px;padding:2px;background:var(--ink);transition:transform .32s var(--spring)}
.ctrl .c-plate{display:flex;align-items:center;gap:14px;width:100%;padding:10px 10px 10px 16px;background:var(--plate);color:var(--txt);
 clip-path:polygon(calc(var(--c) - 1px) 0,100% 0,100% calc(100% - var(--c) + 1px),calc(100% - var(--c) + 1px) 100%,0 100%,0 calc(var(--c) - 1px))}
.ctrl .c-lbl{display:grid;gap:3px;line-height:1}
.ctrl .c-lbl small{font:700 .56rem var(--mono);letter-spacing:.14em;opacity:.78;display:flex;align-items:center;gap:7px}
.ctrl .led{width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor;transition:background .2s}
.ctrl .c-lbl b{font:900 clamp(.98rem,1.25vw,1.12rem) var(--display);font-stretch:82%;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.ctrl .c-mech{position:relative;display:block;width:40px;height:40px;flex:none;background:var(--ink);overflow:hidden;margin-left:6px;
 clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.ctrl .c-mech i{position:absolute;inset:0;display:grid;place-items:center;color:var(--cream);font-style:normal;font-weight:800;font-size:1.05rem;transition:transform .42s var(--out)}
.ctrl .c-mech i+i{transform:translate(var(--mx,0),var(--my,-110%))}
.ctrl--explore .c-mech{--mx:0;--my:-110%}
.ctrl--explore .c-mech i:first-child{transform:translate(0,0)}
.ctrl--join{--plate:var(--red);--txt:var(--cream)}
.ctrl--join .c-mech{--mx:-110%;--my:0;background:var(--cream)}
.ctrl--join .c-mech i{color:var(--ink)}
.ctrl:hover .c-face,.ctrl:focus-visible .c-face{transform:translate(-2px,-2px)}
.ctrl:hover .led,.ctrl:focus-visible .led{background:currentColor}
.ctrl--explore:hover .c-mech i:first-child,.ctrl--explore:focus-visible .c-mech i:first-child{transform:translate(0,110%)}
.ctrl--join:hover .c-mech i:first-child,.ctrl--join:focus-visible .c-mech i:first-child{transform:translate(110%,0)}
.ctrl:hover .c-mech i+i,.ctrl:focus-visible .c-mech i+i{transform:translate(0,0)}
.ctrl:active .c-face,.ctrl.is-down .c-face{transform:translate(6px,6px);transition-duration:.06s}
.ctrl:focus-visible{outline-offset:10px}

/* ============ WORLD / TRACK / STAGE ============ */
.world{position:relative;isolation:isolate}
.track{position:relative;height:calc(100svh + var(--T))}
.stage{position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden;isolation:isolate}
.pin-off .track{height:auto}.pin-off .stage{position:relative}

/* portal = the OX-blue ring + the red Drop world growing inside it (transform-only) */
.portal{position:absolute;z-index:1;width:calc(var(--cs)*1.02);height:calc(var(--cs)*1.02);left:calc(var(--cx) + var(--cs)*.03);top:calc(var(--cy) - var(--cs)*.02);pointer-events:none;will-change:transform}
.portal svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.portal .disc{position:absolute;left:50%;top:50%;width:76.4%;height:76.4%;margin:-38.2% 0 0 -38.2%;border-radius:50%;background:var(--red);transform:scale(0);will-change:transform}
.ox-mark{position:absolute;z-index:1;width:calc(var(--cs)*.62);right:calc(var(--cs)*-.2);bottom:calc(var(--cs)*.02);opacity:.9;pointer-events:none;
 filter:invert(78%) sepia(20%) saturate(640%) hue-rotate(160deg) brightness(104%)}

/* type */
.type{position:absolute;left:clamp(16px,3.6vw,56px);top:clamp(96px,13svh,132px);width:min(52vw,660px)}
h1{margin:0;font:900 clamp(56px,min(11.1vw,16.5svh),160px)/.84 var(--display);font-stretch:72%;text-transform:uppercase;letter-spacing:-.018em}
h1 .l{display:block;position:relative;width:max-content;overflow:hidden;padding:.04em .08em .02em 0;margin-bottom:-.06em}
h1 .l>span{display:block;will-change:transform}
h1 .l1,h1 .l2,h1 .l4{z-index:4}
h1 .l3{z-index:2}
.outline{color:transparent;-webkit-text-stroke:max(2px,.022em) var(--ink)}
.facts{list-style:none;display:flex;flex-wrap:wrap;margin:clamp(18px,2.4svh,28px) 0 0;padding:0;position:relative;z-index:5;row-gap:8px}
.facts li{display:flex;align-items:center;gap:9px;font:600 .62rem/1.25 var(--display);letter-spacing:.05em;text-transform:uppercase;padding:0 clamp(10px,1.1vw,16px);border-left:1.5px solid var(--ink);white-space:nowrap}
.facts li:first-child{padding-left:0;border-left:0}
.facts svg{width:24px;height:24px;flex:none;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.hero-fade{will-change:transform,opacity}

/* Chef (approved master) */
.chef-stage{position:absolute;left:var(--cx);top:var(--cy);width:var(--cs);height:var(--cs)}
.chef-box{position:absolute;z-index:3;inset:0;touch-action:pan-y;will-change:transform;transform-origin:50% 100%}
.chef-canvas{position:absolute;left:0;top:0;width:1254px;height:1254px;transform-origin:0 0}
.chef-canvas img{position:absolute;left:0;top:0;display:block;max-width:none;transform-origin:0 0;user-select:none;-webkit-user-drag:none;pointer-events:none}
.hat-switch{position:absolute;left:0;top:0;width:1254px;height:1254px;margin:0;padding:0;border:0;background:transparent;cursor:pointer;transform-origin:0 0;-webkit-tap-highlight-color:transparent;touch-action:pan-y;outline:none}
.hat-ring{position:absolute;left:0;top:0;width:1254px;height:1254px;pointer-events:none;opacity:0;transform-origin:0 0;overflow:visible}
.hat-ring polygon{fill:none;stroke:var(--ink);stroke-width:7;stroke-dasharray:18 12;stroke-linejoin:round}
.hat-switch:focus-visible+.hat-ring{opacity:1}
.notes{position:absolute;z-index:5;inset:0;pointer-events:none;will-change:transform,opacity}
.notes>*{position:absolute}
.note{color:var(--ink);font-size:calc(var(--cs)*.04);white-space:nowrap}
.arrow,.scrib,.ticks{fill:none;stroke:var(--ink);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.n-press{left:15.5%;top:4.6%;transform:rotate(-12deg);font-size:calc(var(--cs)*.043)}
.a-press{left:24.2%;top:4.2%;width:8.5%;transform:rotate(6deg)}
.s-blue{left:11%;top:14%;width:6%;stroke:var(--blue2);stroke-width:6}
.s-red{left:31.5%;top:21%;width:3.4%;stroke:var(--red);stroke-width:5.5}
.n-clack{left:76.5%;top:79%;transform:rotate(-7deg);font-size:calc(var(--cs)*.033)}
.t-clack{left:76%;top:75%;width:4%}
.stamp-anchor{left:81%;top:9%;width:calc(var(--cs)*.125);aspect-ratio:1}

/* the red floor that rises in FRONT of Chef during the hand-off (smile edge, no stroke) */
.lip{position:absolute;z-index:8;left:-2%;right:-2%;top:0;height:120%;pointer-events:none;transform:translateY(102svh);will-change:transform}
.lip svg{position:absolute;left:0;top:0;width:100%;height:18vw;max-height:240px}
.lip svg path{fill:var(--red)}
.lip i{position:absolute;left:0;right:0;top:calc(min(18vw,240px) - 1px);bottom:0;background:var(--red)}
/* scroll cue sits under the facts, never under Chef */
.scroll-cue{position:absolute;z-index:6;left:clamp(16px,3.6vw,56px);bottom:18px;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.58rem;margin:0;pointer-events:none}
.scroll-cue i{width:1.5px;height:26px;background:linear-gradient(var(--ink) 50%,transparent 0) 0 0/100% 6px}

/* stamp (brand seal) — flies from the hero into the Drop heading */
.stamp{position:fixed;left:0;top:0;z-index:40;width:var(--sw,110px);aspect-ratio:1;display:grid;place-items:center;pointer-events:none;will-change:transform;transform-origin:50% 50%}
.stamp svg{position:absolute;inset:0;width:100%;height:100%}
.stamp img{position:relative;width:38%}
.stamp.static{position:absolute;transform:none}
.stamp.gone{visibility:hidden}

/* ============ DROP WORLD ============ */
.drop{position:relative;z-index:10;margin-top:calc(var(--O)*-1);color:var(--cream);
 background:linear-gradient(to bottom,transparent calc(var(--O) - 3px),var(--red) calc(var(--O) - 3px));padding:0 0 clamp(60px,8vw,120px)}
.pin-off .drop{margin-top:0;background:linear-gradient(to bottom,transparent min(18vw,240px),var(--red) min(18vw,240px));padding-top:min(18vw,240px)}
.drop-head{position:relative;max-width:1440px;margin:0 auto;padding:clamp(24px,4svh,48px) clamp(16px,5vw,80px) 0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:20px}
.drop-kick{grid-column:1/-1;margin:0 0 10px;font-size:.7rem;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.drop-kick span+span::before{content:"";display:inline-block;width:18px;height:1.5px;background:currentColor;vertical-align:middle;margin-right:14px}
.drop-head h2{margin:0;font:900 clamp(56px,8.4vw,150px)/.82 var(--display);font-stretch:70%;text-transform:uppercase;letter-spacing:-.02em;color:var(--cream)}
.drop-head h2 .o{display:inline-block;color:transparent;-webkit-text-stroke:max(2px,.018em) var(--cream);filter:none}
.drop-head h2 .row{display:flex;align-items:flex-end;gap:.18em}
.stamp-spot{display:inline-block;width:.62em;aspect-ratio:1;position:relative;transform:translateY(-.1em)}
.stamp-spot .stamp{position:absolute;inset:0;width:100%;transform:rotate(-10deg)}
.drop-note{position:absolute;right:0;bottom:.3em;margin:0;color:var(--ink);font-size:clamp(24px,2.2vw,34px);transform:rotate(-6deg);text-align:center}
.drop-note svg{display:block;width:70px;margin:6px auto 0;fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round}

/* one editorial grid: heading + objects (the list uses display:contents so every object is placed by the grid) */
.drop-grid{position:relative;max-width:1440px;margin:0 auto;padding:0 clamp(16px,5vw,80px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(10px,1.6vw,26px);align-items:start}
.drop-grid .drop-head{min-width:0;grid-column:1/8;grid-row:1;max-width:none;margin:0;padding:clamp(24px,4svh,48px) 0 0}
.shelf{display:contents;list-style:none}
.shelf .path{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.shelf .path path{fill:none;stroke:var(--cream);stroke-width:2;stroke-dasharray:2 11;stroke-linecap:round;opacity:.7}
.obj{position:relative;z-index:1;will-change:transform}
.obj:nth-of-type(1){grid-column:8/13;grid-row:1/span 2;margin:clamp(24px,4svh,48px) calc(clamp(16px,5vw,80px)*-1 - 1vw) 0 0;--ar:4/5;--r:2deg;z-index:1}
.obj:nth-of-type(2){grid-column:1/5;grid-row:2;margin-top:3vw;--ar:1/1;--r:-3deg}
.obj:nth-of-type(3){grid-column:4/8;grid-row:2/span 2;margin-top:13vw;--ar:4/5;--r:2.5deg;z-index:2}
.obj:nth-of-type(4){grid-column:8/12;grid-row:3;margin-top:4vw;--ar:4/3;--r:-2deg}
.obj:nth-of-type(5){grid-column:1/4;grid-row:3;margin-top:13vw;--ar:1/1;--r:4deg}
.obj:nth-of-type(n+6){grid-column:span 4;margin-top:5vw;--ar:1/1;--r:-2deg}
.obj:nth-of-type(n+6):nth-of-type(even){margin-top:11vw;--r:3deg}
.obj-hit{display:block;width:100%;padding:0;border:0;background:none;text-align:left;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent;transform:rotate(var(--r))}
.obj-plate{display:block;position:relative;aspect-ratio:var(--ar);background:var(--cream);padding:clamp(6px,.7vw,10px);transition:transform .45s var(--spring)}
.obj-plate::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translate(10px,12px);z-index:-1;transition:transform .45s var(--spring)}
.obj-plate::after{content:"";position:absolute;inset:clamp(6px,.7vw,10px);box-shadow:inset 0 0 0 1.5px rgba(29,33,36,.35);pointer-events:none}
.obj-img{display:block;width:100%;height:100%;overflow:hidden;background:#e9e4d6}
.obj-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.22);transform-origin:50% 80%}
.obj-tag{position:absolute;z-index:3;left:clamp(14px,1.4vw,22px);top:calc(clamp(14px,1.4vw,22px)*-1);display:grid;justify-items:center;transform-origin:50% 0;transition:transform .6s var(--spring)}
.obj-tag::before{content:"";width:1.5px;height:18px;background:var(--ink)}
.obj-tag span{display:grid;justify-items:center;gap:1px;background:var(--cream);color:var(--ink);padding:6px 8px 7px;border:1.5px solid var(--ink);clip-path:polygon(0 0,100% 0,100% 82%,50% 100%,0 82%)}
.obj-tag small{font:700 .5rem var(--mono);letter-spacing:.12em}
.obj-tag b{font:900 1.1rem/1 var(--display);font-stretch:80%}
.obj-label{position:relative;display:block;overflow:hidden;margin:14px 0 0 clamp(18px,2vw,34px)}
.obj-label span{display:inline-flex;flex-direction:column;gap:3px;background:var(--cream);color:var(--ink);padding:8px 14px 9px;transform:translateY(-110%);transition:transform .45s var(--out);
 clip-path:polygon(0 0,100% 0,calc(100% - 8px) 50%,100% 100%,0 100%)}
.obj-label b{font:900 clamp(.9rem,1.1vw,1.05rem)/1 var(--display);font-stretch:84%;text-transform:uppercase;letter-spacing:.02em;padding-right:10px}
.obj-label small{font:700 .52rem var(--mono);letter-spacing:.14em;color:var(--ink2)}
@media (hover:hover){
 .obj-hit:hover .obj-plate{transform:translate(-4px,-8px) rotate(calc(var(--r)*-1))}
 .obj-hit:hover .obj-plate::before{transform:translate(16px,20px)}
 .obj-hit:hover .obj-tag{transform:rotate(-16deg)}
 .obj-hit:hover .obj-label span{transform:translateY(0)}
}
.obj-hit:focus-visible .obj-plate{transform:translate(-4px,-8px) rotate(calc(var(--r)*-1))}
.obj-hit:focus-visible .obj-label span,.obj.pinned .obj-label span{transform:translateY(0)}
.obj-hit:focus-visible{outline-offset:14px}
/* CLICK = physical response, a different mechanism per object (no sound) */
.obj.k-press .obj-plate{animation:k-press .5s var(--out)}
.obj.k-wobble .obj-plate{animation:k-wobble .7s var(--out)}
.obj.k-tag .obj-tag{animation:k-tag .9s var(--out)}
.obj.k-nudge .obj-plate{animation:k-nudge .55s var(--out)}
.obj.k-hop .obj-plate{animation:k-hop .6s var(--out)}
@keyframes k-press{0%{transform:translate(0,0)}25%{transform:translate(8px,10px) scale(.985)}60%{transform:translate(-2px,-3px)}100%{transform:translate(0,0)}}
@keyframes k-wobble{0%,100%{transform:rotate(0)}20%{transform:rotate(-3.5deg)}45%{transform:rotate(2.5deg)}70%{transform:rotate(-1deg)}}
@keyframes k-tag{0%{transform:rotate(0)}30%{transform:rotate(-34deg)}60%{transform:rotate(14deg)}80%{transform:rotate(-5deg)}100%{transform:rotate(0)}}
@keyframes k-nudge{0%,100%{transform:translateX(0)}30%{transform:translateX(-12px) rotate(-1deg)}65%{transform:translateX(4px)}}
@keyframes k-hop{0%,100%{transform:translateY(0)}35%{transform:translateY(-16px) scale(1.01,.99)}70%{transform:translateY(2px) scale(.99,1.01)}}
.obj.enter-pre .obj-hit{opacity:0;transform:translate(var(--ex,0),70px) rotate(calc(var(--r) + var(--er,0deg)))}
.obj.enter-in .obj-hit{transition:transform 1s var(--spring),opacity .5s}
.preview-end{margin:clamp(60px,8vw,110px) auto 0;max-width:1440px;padding:0 clamp(16px,5vw,80px);font-size:.6rem;opacity:.8;text-align:center}
.drop-error{max-width:1440px;margin:40px auto 0;padding:0 clamp(16px,5vw,80px)}

/* reduced motion: the designed composition, no scroll animation. The portal edge is shown as a static composition */
.rm-edge{display:none}
.pin-off .rm-edge{display:block;position:absolute;left:0;right:0;top:0;height:calc(min(18vw,240px) + 1px);width:100%;overflow:visible;pointer-events:none}
.rm-edge .band{fill:none;stroke:var(--blue);stroke-width:46}.rm-edge .fill{fill:var(--red)}

/* ============ narrower landscape ============ */
@media (max-width:1279px){
 .controls{gap:12px 14px}
 .ctrl .c-plate{gap:10px;padding:8px 8px 8px 12px}
 .ctrl .c-lbl b{font-size:.9rem}
 .ctrl .c-mech{width:34px;height:34px;margin-left:2px}
 .ctrl .patw{--pw:20px}
 .scroll-cue,.drop-note{display:none}
 .facts{max-width:420px}
 .facts li:nth-child(3){padding-left:0;border-left:0}
 .n-press{left:25%;top:-3.5%}
 .a-press{left:36%;top:-2.2%;width:7%}
 .s-blue{left:19%;top:9%}
}

/* ============ portrait / phone ============ */
@media (max-width:899px),(orientation:portrait) and (max-width:1100px){
 :root{--cs:min(122vw,56svh);--T:112svh;--O:74svh}
 .nav{padding:12px 16px;gap:10px}
 .links,.brand .tag{display:none}
 .tagctl small{display:none}
 .tagctl .t-face{padding:8px 12px 8px 24px}
 .burger{width:42px;height:42px}
 .stage{display:flex;flex-direction:column;padding-top:clamp(76px,11vw,110px)}
 .type{display:contents}
 h1{order:1;font-size:clamp(50px,min(15.5vw,8.4svh),118px);padding:0 clamp(16px,4.5vw,40px);position:relative}
 .chef-stage{position:relative;left:auto;top:auto;order:2;flex:none;margin-top:calc(var(--cs)*-.07);margin-left:calc((100vw - var(--cs))/2 + var(--cs)*.03)}
 .controls{order:3;margin:calc(var(--cs)*-.2) clamp(16px,4.5vw,40px) 0;display:grid;grid-template-columns:1fr;gap:12px}
 .controls .ctrl .c-lbl b{font-size:1.02rem}
 .facts{display:none}
 .ox-mark{display:none}
 .n-clack,.t-clack,.s-red{display:none}
 .n-press{left:max(12%,calc(var(--cs)*.5 - 50vw + 18px));top:15%;font-size:calc(var(--cs)*.056)}
 .a-press{left:max(21%,calc(var(--cs)*.5 - 50vw + 70px));top:22.5%;width:11%;transform:rotate(-8deg)}
 .s-blue{left:12%;top:31%;width:8%}
 .scroll-cue{display:none}
 .drop-head{grid-template-columns:1fr;padding-top:28px}
 .drop-note{display:none}
 .drop-head h2{font-size:clamp(46px,14.6vw,118px)}
 .drop-grid{grid-template-columns:repeat(6,minmax(0,1fr));column-gap:12px}
 .drop-grid .drop-head{grid-column:1/-1;grid-row:auto}
 .obj:nth-of-type(n){grid-column:auto;grid-row:auto;margin:0}
 .obj:nth-of-type(5n+1){grid-column:1/7;margin:36px 0 0 calc(-4.5vw - 16px);width:calc(100% + 6vw);--ar:5/4;--r:-1.5deg}
 .obj:nth-of-type(5n+2){grid-column:1/5;margin-top:34px;--ar:1/1;--r:2.5deg}
 .obj:nth-of-type(5n+3){grid-column:4/7;margin-top:-26vw;margin-right:calc(-4.5vw - 16px);--ar:4/5;--r:-3deg;z-index:2}
 .obj:nth-of-type(5n+4){grid-column:1/4;margin-top:-10vw;--ar:1/1;--r:-2deg}
 .obj:nth-of-type(5n+5){grid-column:3/7;margin-top:-4vw;margin-right:calc(-4.5vw - 16px);--ar:4/3;--r:3deg}
 .obj-label{margin-left:12px}
 .obj-label span{transform:none}
 .obj-tag{transform:none}
 .shelf .path{display:none}
}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{transition:none!important;animation:none!important}
}