:root{--char: #171009;--soot: #201710;--sesame: #eddcbb;--ember: #ff5a1f;--smoke: #9b8871;--hairline: rgba(237, 220, 187, .14)}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;background:var(--char);font-family:IBM Plex Mono,SFMono-Regular,Consolas,monospace}img{width:100%;height:100%;object-fit:cover}p{font-size:12px;font-weight:500;letter-spacing:.02em;line-height:1}.container{position:relative;width:100%;height:100%;background:url(/c/menu-root-food/hero.jpg) no-repeat 50% 45%;background-size:cover}.container:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#17100973,#17100900 30% 55%,#171009bd);pointer-events:none}.brand{position:fixed;left:0;bottom:0;z-index:1;margin:1.5rem;color:var(--sesame)}.brand-name{font-family:Alfa Slab One,Georgia,serif;font-size:27px;font-weight:400;letter-spacing:.01em;line-height:1.05}.brand-tag{margin-top:.9em;font-size:11.5px;font-weight:400;color:#eddcbbc7}.menu-open{position:fixed;top:0;left:0;z-index:1;color:var(--sesame)}.menu-close{position:fixed;top:0;right:0;z-index:10;color:var(--smoke)}.menu-open,.menu-close{margin:1.5rem;padding:.5em 0;clip-path:polygon(0 0,100% 0,100% 100%,0% 100%);cursor:pointer}.menu-open p,.menu-close p{position:relative}.menu{position:fixed;top:0;right:0;width:20vw;height:100vh;display:flex;z-index:2}.menu-item{position:relative;flex:1;height:100%;display:flex;justify-content:center;background:var(--soot);border-left:1px solid var(--hairline);clip-path:polygon(0 0,100% 0,100% 100%,0% 100%);margin-left:-1px}.menu-item:before{content:"";position:absolute;inset:0;background:linear-gradient(to top,#ff5a1f2b,#ff5a1f00 26%);opacity:.7;transition:opacity .5s;pointer-events:none}.menu-item:hover:before{opacity:1}.menu-item-index{height:100%;padding:1.5rem .5rem 2rem;display:flex;flex-direction:column;justify-content:space-between;align-items:center;color:var(--smoke)}.menu-item-index p:nth-child(1){color:var(--ember)}.menu-item-index p:nth-child(2){position:relative;font-size:11px;transform:rotate(-90deg)}.menu-link{position:absolute;bottom:2.5%;left:55%;transform:translate(-50%,-50%) rotate(-90deg)}.menu-item:nth-child(3) .menu-link{bottom:7.5%}.menu-link p{position:relative;display:flex;font-family:Alfa Slab One,Georgia,Times New Roman,serif;text-transform:uppercase;letter-spacing:0;font-size:158px;font-weight:400;line-height:.9;transition:all .5s}.menu-link p span{position:relative}.menu-item .menu-link-main,.menu-item .menu-link-hover{transition:all .5s}.menu-link-main p{color:var(--sesame)}.menu-item .menu-link-hover{left:150%;color:var(--ember)}.menu-item .menu-link-hover p{text-shadow:0 0 34px rgba(255,90,31,.45)}.menu-item:hover .menu-link-main{left:-100%}.menu-item:hover .menu-link-hover{left:50%}.menu-img{position:absolute;width:75%;height:35%;top:25%;left:50%;transform:translate(-50%,-50%);clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%);transition:.5s all cubic-bezier(.165,.84,.44,1)}.menu-item.menu-opened:hover .menu-img{clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%)}@media(max-width:900px){.menu{flex-direction:column;background:var(--soot)}.menu-item{border-left:none;border-top:1px solid var(--hairline);margin-left:0;margin-top:-1px}.menu-item:before{background:linear-gradient(to top,#ff5a1f1f,#ff5a1f00 30%)}.menu-link{bottom:unset;top:50%;left:50%;transform:translate(-50%,-50%) rotate(0)}.menu-item:nth-child(3) .menu-link{bottom:unset}.menu-link p{font-size:clamp(2.2rem,10vw,4.25rem);letter-spacing:0;white-space:nowrap}.menu-link-hover{display:none}.menu-item:hover .menu-link-main{top:50%;left:50%}.menu-item-index{align-items:center}.menu-item-index p:nth-child(1){padding:0 .5em}.menu-img{display:none}}@media(max-width:768px){.menu-open,.menu-close{margin:1.1rem}.brand{margin:1.1rem;max-width:72vw}.brand-tag{line-height:1.5}.brand-name{font-size:22px}.brand-tag{font-size:10.5px}.menu-item-index{padding:1.35rem .65rem}}