.menu-dialog{padding:32px 4%;background:#151710;width:100vw;max-width:100vw;height:100dvh;min-height:100dvh;max-height:100dvh;overflow:auto;border:0}.menu-dialog::backdrop{background:#111210e6;backdrop-filter:blur(10px)}.menu-dialog .dialog-top{margin:0 0 35px;padding-bottom:24px;border-bottom:1px solid #424636}.menu-dialog .close{border:0;background:var(--accent);color:var(--black);padding:12px 20px;font:12px var(--mono);text-transform:uppercase}.menu-layout{display:grid;grid-template-columns:1.35fr 1fr;gap:8%;align-items:center;min-height:calc(100dvh - 210px)}.menu-dialog nav{margin:0;max-width:none}.menu-dialog nav a{position:relative;display:flex;gap:18px;align-items:center;font:600 clamp(40px,5.65vw,88px)/1.08 var(--display);letter-spacing:-1.5px;padding:14px 0;border-bottom:1px solid #424636;transition:color .3s}.menu-link-label{display:inline-block;transition:transform .4s cubic-bezier(.2,.8,.2,1)}.menu-number{font:11px var(--mono);order:-1;align-self:flex-start;margin-top:9px;letter-spacing:0;color:#8c947d;min-width:20px}.menu-link-arrow{font:38px var(--body);margin-left:auto;color:var(--accent);opacity:0;transform:translate(-14px,8px);transition:transform .4s,opacity .3s}.menu-dialog nav a:hover,.menu-dialog nav a:focus-visible,.menu-dialog nav a.is-previewing{color:var(--accent)}.menu-dialog nav a:is(:hover,:focus-visible,.is-previewing) .menu-link-label{transform:translateX(14px)}.menu-dialog nav a:is(:hover,:focus-visible,.is-previewing) .menu-link-arrow{opacity:1;transform:translate(0,0)}.menu-preview{min-width:0;align-self:center}.menu-preview-frame{position:relative;aspect-ratio:4/5;max-height:55dvh;overflow:hidden;background:#20241b;border:1px solid #454b37}.menu-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}.menu-preview-id{position:absolute;top:20px;left:20px;z-index:2;font:11px var(--mono);color:var(--accent)}.menu-preview-symbol{position:absolute;inset:0;display:grid;place-items:center;font:170px Arial,sans-serif;color:#626e44;transition:opacity .4s,transform .6s}.menu-preview.has-preview .menu-preview-symbol{opacity:0;transform:rotate(50deg) scale(.8)}.menu-preview-caption{margin-top:22px}.menu-preview-title{font-size:25px;letter-spacing:-.8px}.menu-preview-description{font:12px/1.7 var(--mono);color:var(--gray);margin:8px 0 0}.menu-footer{display:flex;justify-content:space-between;border-top:1px solid #424636;padding-top:22px;margin-top:25px;font:11px var(--mono);color:#a4ad91;letter-spacing:.5px}
@media(max-width:1000px){.menu-layout{gap:5%;grid-template-columns:1.4fr 1fr}.menu-dialog nav a{font-size:5.8vw}.menu-link-arrow{font-size:28px}.menu-preview-title{font-size:21px}}
@media(max-width:700px){.menu-dialog{padding:22px 6%}.menu-dialog .dialog-top{margin-bottom:25px;padding-bottom:18px}.menu-layout{display:flex;flex-direction:column-reverse;gap:22px;min-height:0;align-items:stretch}.menu-preview{display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:center;width:100%}.menu-preview-frame{aspect-ratio:1;height:120px}.menu-preview-id{font-size:9px;top:10px;left:10px}.menu-preview-symbol{font-size:65px}.menu-preview-caption{margin:0}.menu-preview-title{font-size:20px}.menu-preview-description{font-size:11px;margin-top:6px}.menu-dialog nav{width:100%}.menu-dialog nav a{font-size:11vw;letter-spacing:-.7px;padding:12px 0;gap:12px}.menu-number{font-size:10px;min-width:15px;margin-top:5px}.menu-link-arrow{font-size:25px}.menu-footer{font-size:9px;margin-top:22px;gap:25px;padding-top:18px}.menu-footer>span:last-child{text-align:right}}

/* Rolling type and diagonal arrow exchange share the image reveal's rhythm. */
.menu-home-slot{display:inline-block;flex-shrink:0}
.scroll-menu-dock{position:fixed;top:calc(22px + env(safe-area-inset-top,0px));right:max(4%,calc((100vw - 1500px)/2));z-index:80;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-95px);transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .25s,visibility 0s .4s}
.scroll-menu-dock.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition-delay:0s}
.scroll-menu-dock .menu-button{width:58px;height:58px;padding:0;gap:0;justify-content:center;font-size:0;background:var(--black);color:var(--accent);border:1px solid #d5ff5250;border-radius:50%;box-shadow:0 6px 24px #0003;transition:background .25s,color .25s,border-color .25s}
.scroll-menu-dock .menu-icon{display:block;width:22px;height:16px;font-size:0;background:linear-gradient(to bottom,currentColor 0 2px,transparent 2px 7px,currentColor 7px 9px,transparent 9px 14px,currentColor 14px 16px)}
.scroll-menu-dock .menu-button:hover{background:var(--accent);color:var(--black);border-color:var(--accent)}
@media(max-width:700px){.scroll-menu-dock{top:calc(16px + env(safe-area-inset-top,0px));right:6%}.scroll-menu-dock .menu-button{width:52px;height:52px}}
.menu-dialog{overflow-x:hidden}
.menu-dialog{isolation:isolate}.menu-dialog>.dialog-top,.menu-layout,.menu-footer{position:relative;z-index:1}.menu-graphic{position:absolute;right:-20%;top:-15%;width:90vw;max-width:1300px;pointer-events:none;z-index:0;opacity:.14}.menu-graphic svg{display:block;width:100%;stroke:#a5ba69;stroke-width:.6;animation:menu-orbit 70s linear infinite}.menu-graphic span{position:absolute;left:25%;bottom:12%;font:11px var(--mono);letter-spacing:3px;color:var(--accent)}.menu-preview-frame{box-shadow:0 25px 80px #0004}.menu-link-label{overflow:hidden;line-height:1.1;padding-block:2px;transition:none}.menu-label-roll{display:block;position:relative;transition:transform .65s cubic-bezier(.22,1,.36,1)}.menu-label-roll>span{display:block;white-space:nowrap}.menu-label-roll>span+span{position:absolute;top:100%;left:0;color:var(--accent)}.menu-dialog nav a:is(:hover,:focus-visible,.is-previewing) .menu-link-label{transform:none}.menu-dialog nav a:is(:hover,:focus-visible,.is-previewing) .menu-label-roll{transform:translateY(-100%)}.menu-link-arrow{position:relative;flex-shrink:0;overflow:hidden;width:1em;height:1em;line-height:1;opacity:.45;transform:none;transition:opacity .35s}.menu-link-arrow>span{position:absolute;inset:0;transition:transform .65s cubic-bezier(.22,1,.36,1)}.menu-link-arrow>span+span{transform:translate(-110%,110%)}.menu-dialog nav a:is(:hover,:focus-visible,.is-previewing) .menu-link-arrow>span:first-child{transform:translate(110%,-110%)}.menu-dialog nav a:is(:hover,:focus-visible,.is-previewing) .menu-link-arrow>span+span{transform:translate(0,0)}
@keyframes menu-orbit{to{transform:rotate(360deg)}}
.menu-graphic{inset:0;width:100%;height:100%;max-width:none;overflow:hidden}.menu-graphic svg{position:absolute;width:90vw;max-width:1300px;right:-20vw;top:-15%}.menu-graphic span{left:auto;right:8%;display:none;bottom:11%}
@media(max-width:700px){.menu-graphic svg{width:150vw;right:-65vw;top:-5%}.menu-graphic span{display:none}}

