/* Navigation is a quiet index; the guided route remains an optional second way in. */
html{scroll-padding-top:96px}
.logo{position:relative}
.logo img{transition:opacity .2s ease}
.logo::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--red);-webkit-mask:url('/assets/chopstick-logo.png') center/100% 100% no-repeat;mask:url('/assets/chopstick-logo.png') center/100% 100% no-repeat;opacity:0;transition:opacity .2s ease}
.logo:is(:hover,:focus-visible) img{opacity:0}
.logo:is(:hover,:focus-visible)::after{opacity:1}
.site-header{gap:30px;position:sticky;top:0;height:96px;isolation:isolate}
.site-header::before{content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-1;background:#ffffffed;backdrop-filter:blur(14px);border-bottom:1px solid #eee9e580}
.site-nav{margin-left:auto;gap:28px}
.site-nav a[aria-current=page]{text-decoration:underline;text-underline-offset:7px;text-decoration-color:var(--red)}
.menu-toggle{display:flex;align-items:center;gap:13px;padding:12px 0 12px 5px;font-size:14px}
.menu-toggle i{display:block;width:23px;height:12px;border-top:2px solid;border-bottom:2px solid;transform:skewX(-18deg)}
.site-menu{width:100vw;height:100dvh;max-width:none;max-height:none;inset:0;margin:0;padding:32px 52px 24px;border:0;background:#fff;color:var(--ink);overflow-y:auto}
.site-menu::backdrop{background:#fff}
.site-menu[open]{display:flex;flex-direction:column;animation:menu-enter .35s ease both}
.menu-top{display:flex;align-items:center;justify-content:space-between;gap:24px}
.menu-close{display:flex;align-items:center;gap:18px;font-size:15px;min-height:48px}
.menu-close span{font-size:34px;font-weight:300}
.menu-layout{flex:1;display:grid;grid-template-columns:1.25fr .75fr;gap:7vw;align-items:center;width:100%;max-width:1440px;margin:38px auto}
.menu-destinations>p{font-size:16px;color:var(--muted);margin-bottom:24px}
.menu-destinations nav{display:flex;flex-direction:column}
.menu-destinations nav>a{display:grid;grid-template-columns:1fr auto;gap:8px 22px;padding:23px 0;border-bottom:1px solid var(--line);transition:color .2s}
.menu-destinations nav>a>span{font-size:clamp(44px,5.1vw,82px);letter-spacing:-.055em;line-height:1.08}
.menu-destinations nav>a>i{font-style:normal;font-size:35px;align-self:center;transition:transform .3s}
.menu-destinations nav>a>small{grid-column:1/-1;font-size:16px;line-height:1.5;color:var(--muted)}
.menu-destinations nav>a:is(:hover,:focus-visible){color:var(--red)}
.menu-destinations nav>a:is(:hover,:focus-visible)>i{transform:translate(4px,-4px)}
.menu-destinations nav>a[aria-current=page]>small::after{content:" · You are here";color:var(--red)}
.menu-shortcuts{display:flex;gap:20px;flex-wrap:wrap;margin-top:28px;font-size:14px}
.menu-shortcuts a:hover{color:var(--red)}
.menu-invitation{background:#fff1ec;border-radius:22px;padding:30px;overflow:hidden}
.menu-preview{position:relative;height:205px;margin-bottom:24px}
.menu-scene{position:absolute;inset:0;transition:opacity .3s,transform .45s;opacity:0;transform:translateY(12px)}
.menu-scene-work{perspective:800px}
.menu-scene-work img{width:59%;height:135px;position:absolute;object-fit:cover;box-shadow:0 12px 30px #66352c16;border:5px solid white;border-radius:9px}
.menu-scene-work img:nth-child(1){top:8px;left:0;transform:rotate(-9deg)}
.menu-scene-work img:nth-child(2){top:50px;right:-6px;transform:rotate(8deg)}
.menu-scene-work img:nth-child(3){top:85px;left:5%;transform:rotate(-3deg)}
.menu-scene-systems{display:flex;flex-direction:column;align-items:center;gap:5px}
.menu-scene-systems span{background:#fff;padding:10px 28px;border-radius:9px;min-width:210px;text-align:center;font-size:16px}
.menu-scene-systems i{font-style:normal;color:var(--red)}
.menu-scene-studio{display:flex;align-items:center;justify-content:center;gap:24px}
.menu-scene-studio i{display:block;width:42px;height:180px;background:var(--red);transform:skewX(-22deg);border-radius:2px}
[data-menu-preview=work] .menu-scene-work,[data-menu-preview=systems] .menu-scene-systems,[data-menu-preview=studio] .menu-scene-studio{opacity:1;transform:translateY(0)}
.menu-invitation h2{font-size:clamp(28px,3vw,43px);line-height:1.12;letter-spacing:-.045em}
.menu-invitation p{font-size:16px;line-height:1.6;margin:18px 0 24px;max-width:340px;color:#6f5148}
.menu-tour{background:var(--red);color:white;width:100%;justify-content:space-between}
.menu-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:24px;font-size:14px;color:var(--muted)}
.menu-bottom a{color:var(--ink)}.menu-bottom a span{color:var(--red);margin-left:22px}
html.menu-open{overflow:hidden}.menu-open .tour-launcher{visibility:hidden}
@keyframes menu-enter{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@media(max-width:1050px){.site-header{gap:20px}.site-nav{gap:18px}.menu-layout{gap:45px}.site-menu{padding:28px 32px}.menu-invitation{padding:25px}.menu-shortcuts{gap:14px}}
@media(max-width:760px){
 html{scroll-padding-top:76px}.site-nav{display:none}.site-header{gap:16px;height:76px}.menu-toggle{font-size:13px;gap:9px}.menu-toggle>span{display:none}
 .site-menu{padding:22px 22px 26px}.site-menu .logo{width:132px}.menu-close{min-height:44px}
 .menu-layout{display:block;margin:30px 0}.menu-destinations>p{font-size:14px;margin-bottom:10px}
 .menu-destinations nav>a{padding:18px 0;gap:8px}.menu-destinations nav>a>span{font-size:44px}.menu-destinations nav>a>i{font-size:26px}.menu-destinations nav>a>small{font-size:14px}
 .menu-shortcuts{font-size:14px;gap:16px 20px;margin-top:25px}
 .menu-invitation{margin-top:32px;padding:23px}.menu-preview{display:none}.menu-invitation h2{font-size:30px}.menu-invitation h2 br{display:none}.menu-invitation p{margin:13px 0 18px;font-size:15px}
 .menu-tour{font-size:15px;min-height:49px;padding:13px 20px}
 .menu-bottom{flex-direction:column;font-size:13px;gap:15px;padding-top:20px}
}
@media(prefers-reduced-motion:reduce){.site-menu[open]{animation:none}.menu-scene,.menu-destinations nav>a>i{transition:none}}
