/* Pack 19: full-screen reveal, split media and staggered navigation. */
:root { --menu-bg: #151515; --menu-secondary: #b3b1a9; --menu-ease: cubic-bezier(.87,0,.13,1); }
html { scroll-padding-top: 112px; }
.site-header { position: sticky; top: 0; z-index: 30; background: var(--paper); }
.header-actions { display: flex; align-items: center; gap: 48px; }
.header-project { font-size: 15px; letter-spacing: -.03em; }
.header-project span { margin-left: 12px; }
.header-project:hover { color: var(--accent); }
.nav-trigger, .nav-close { display: flex; align-items: center; gap: 16px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-size: 15px; cursor: pointer; }
.nav-icon { display: grid; place-items: center; position: relative; width: 48px; height: 48px; border: 1px solid #b4b4ad; border-radius: 50%; }
.nav-icon i { position: absolute; width: 17px; height: 1px; background: currentColor; transition: transform .7s var(--menu-ease); }
.nav-icon i:first-child { transform: translateY(-3px); }
.nav-icon i:last-child { transform: translateY(3px); }
.nav-trigger:hover .nav-icon { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.menu-overlay { width: 100%; max-width: none; height: 100dvh; max-height: none; padding: 0; margin: 0; border: 0; overflow: auto; background: var(--menu-bg); color: var(--paper); clip-path: inset(0 0 100%); transition: clip-path .8s var(--menu-ease); }
.menu-overlay::backdrop { background: transparent; }
.menu-overlay.is-open { clip-path: inset(0); }
.overlay-bar { position: absolute; z-index: 2; top: 0; left: 0; right: 0; min-height: 88px; padding: 0 var(--gutter); display: flex; justify-content: space-between; align-items: center; }
.nav-close .nav-icon { border-color: #595955; }
.nav-close .nav-icon i:first-child { transform: rotate(45deg); }
.nav-close .nav-icon i:last-child { transform: rotate(-45deg); }
.nav-close:hover { color: #ff9579; }
.menu-overlay-content { display: grid; grid-template-columns: 40% 60%; min-height: 100%; transform: translateY(-25%); transition: transform .8s var(--menu-ease); }
.is-open .menu-overlay-content { transform: translateY(0); }
.menu-media-wrapper { position: relative; overflow: hidden; background: #502c20; opacity: 0; transition: opacity .65s .2s; }
.is-open .menu-media-wrapper { opacity: 1; }
.menu-media-wrapper img { position: absolute; width: 100%; height: 100%; object-fit: cover; opacity: .4; }
.menu-media-wrapper::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #15151599, transparent 70%); }
.menu-media-wrapper p { position: relative; z-index: 1; padding: 0 var(--gutter); margin-top: 34vh; font-size: clamp(40px,4.7vw,80px); line-height: 1.02; letter-spacing: -.065em; }
.menu-media-wrapper > span { position: absolute; z-index: 1; left: var(--gutter); bottom: 40px; font-size: 13px; }
.menu-content-wrapper { padding: 124px clamp(32px,5vw,88px) 40px; display: flex; flex-direction: column; justify-content: center; gap: 56px; }
.menu-content-main { display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; gap: 32px; flex: 1; align-content: center; }
.menu-primary { display: flex; flex-direction: column; gap: 8px; }
.menu-link { overflow: hidden; padding: 4px; margin: -4px; }
.menu-link a { display: flex; align-items: baseline; gap: 18px; font-size: clamp(34px,4vw,66px); letter-spacing: -.065em; line-height: 1.18; transform: translateY(-115%); transition: transform .85s var(--menu-ease),color .2s; }
.is-open .menu-link a { transform: translateY(0); transition-delay: .1s,0s; }
.is-open .menu-link:nth-child(2) a { transition-delay: .15s,0s; }
.is-open .menu-link:nth-child(3) a { transition-delay: .2s,0s; }
.is-open .menu-link:nth-child(4) a { transition-delay: .25s,0s; }
.is-open .menu-link:nth-child(5) a { transition-delay: .3s,0s; }
.menu-link small { font-size: 12px; letter-spacing: 0; color: var(--menu-secondary); }
.menu-link a[aria-current=page], .menu-overlay a:hover { color: #ff9579; }
.menu-secondary { display: grid; gap: 14px; padding-bottom: 8px; font-size: 14px; line-height: 1.4; }
.menu-secondary p { font-size: 12px; color: var(--menu-secondary); margin-bottom: 12px; }
.menu-footer { border-top: 1px solid #484844; padding-top: 24px; display: flex; justify-content: space-between; gap: 24px; font-size: 14px; line-height: 1.7; color: var(--menu-secondary); }
.menu-footer > div { display: flex; flex-direction: column; }
.menu-overlay a:focus-visible, .menu-overlay button:focus-visible { outline-color: #ff9579; outline-offset: 3px; }
body > main { transition: transform .8s var(--menu-ease); }
body.menu-open > main { transform: translateY(100svh); }
html.menu-locked { overflow: hidden; scrollbar-gutter: stable; }
.fallback-nav { display: flex; flex-wrap: wrap; gap: 24px; padding-block: 20px; }
@media(max-width:1050px) { .menu-content-main { grid-template-columns: 1fr; gap: 36px; } .menu-secondary { grid-template-columns: 1fr; gap: 9px; } .menu-secondary p { margin-bottom: 0; } .menu-content-wrapper { gap: 36px; padding-top: 112px; } }
@media(max-width:760px) { .header-actions { gap: 24px; } .header-project { display: none; } .overlay-bar { min-height: 76px; } .menu-overlay-content { grid-template-columns: 1fr; } .menu-media-wrapper { display: none; } .menu-content-wrapper { padding: 110px var(--gutter) 32px; gap: 40px; } .menu-link a { font-size: clamp(36px,9vw,56px); } .menu-content-main { align-content: start; gap: 36px; } .menu-secondary { font-size: 14px; } .menu-footer { font-size: 13px; } }
@media(prefers-reduced-motion:reduce) { .menu-overlay,.menu-overlay-content,.menu-link a,.menu-media-wrapper,body > main { transition: none; } body.menu-open > main { transform: none; } }