/* Main navigation: reuse About/Contact styles */
.Main-nav{position:fixed;top:25px;right:5vw;z-index:3}
@media (min-width:880px){.Main-nav{top:30px}}
.Main-nav-list{display:flex;gap:20px;margin:0;padding:0;list-style:none}
.Main-nav-item{margin:0}
.Main-nav-link{color:inherit;font-size:14px;letter-spacing:1.2px;box-sizing:border-box;min-width:82px;padding:12px 20px;margin:-12px -15px;text-decoration:none;text-transform:uppercase;text-align:center;user-select:none;cursor:default;display:inline-block;border-radius:6px;transition:filter 220ms ease,opacity 220ms ease}
/* blur the text itself on hover/focus */
.Main-nav-link:hover,.Main-nav-link:focus{filter:blur(1.5px);opacity:0.95}

/* Hamburger (mobile) */
.Main-hamburger{display:none;position:fixed;right:5vw;top:25px;z-index:6;width:44px;height:44px;padding:10px;border:0;background:transparent;color:inherit}
.Hamburger-box{display:inline-block;width:24px;height:16px;position:relative}
.Hamburger-inner{display:block;position:relative;width:24px;height:2px;background:currentColor;transition:transform 300ms ease, background 300ms ease}
.Hamburger-inner::before,.Hamburger-inner::after{content:"";position:absolute;left:0;width:24px;height:2px;background:currentColor;transition:transform 300ms ease,opacity 300ms ease,top 300ms ease}
.Hamburger-inner::before{top:-7px}
.Hamburger-inner::after{top:7px}
.Main-hamburger:focus{outline:none}

/* Hamburger active -> X */
.Main-hamburger.active .Hamburger-inner{background:transparent}
.Main-hamburger.active .Hamburger-inner::before{top:0;transform:rotate(45deg)}
.Main-hamburger.active .Hamburger-inner::after{top:0;transform:rotate(-45deg)}

/* Mobile drawer */
.Mobile-drawer{position:fixed;top:0;right:0;height:100vh;width:80vw;max-width:420px;background:#000;color:#fff;z-index:20;transform:translateX(100%);transition:transform 300ms ease;display:flex;flex-direction:column;padding:40px 24px calc(60px + env(safe-area-inset-bottom, 0px))}
.Mobile-drawer--open{transform:translateX(0)}
.Mobile-close{background:transparent;border:0;color:inherit;font-size:36px;line-height:1;padding:0 0 12px;align-self:flex-end}
.Mobile-nav-list{list-style:none;padding:40px 0 0;margin:0;display:flex;flex-direction:column;gap:18px}
.Mobile-nav-link{color:inherit;text-decoration:none;font-size:20px;letter-spacing:1.6px;text-transform:uppercase}
.Mobile-nav-link:active,.Mobile-nav-link:hover{opacity:0.9}

.Mobile-social{margin-top:auto;display:flex;gap:32px;align-items:center;padding-bottom:calc(60px + env(safe-area-inset-bottom, 0px))}
.Mobile-social-link{color:inherit;font-size:30px;text-decoration:none}

/* Prevent body scroll when drawer open */
.no-scroll, .no-scroll body{overflow:hidden}

/* Responsive rules */
@media (max-width:879px){
	.Main-nav{display:none}
	.Main-hamburger{display:block}
	.Logo{left:5vw}
}

/* Overlay behind drawer */
.Mobile-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:15;opacity:0;visibility:hidden;transition:opacity 220ms ease,visibility 220ms}
.Mobile-overlay--visible{opacity:1;visibility:visible}

/* Initial page load fader */
.Initial-fader{position:fixed;inset:0;background:#000;z-index:9999;opacity:1;transition:opacity .5s ease;pointer-events:none}
.Initial-fader.Initial-fader--hidden{opacity:0}

/* Top blurred gradient overlay (desktop only) */
.Top-overlay{position:fixed;top:0;left:0;width:100%;height:150px;z-index:2;pointer-events:none}
.Top-overlay::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 100%);opacity:1}
/* blur the page behind the overlay, mask so blur fades out toward 150px */
.Top-overlay{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);-webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%)}

@media (max-width:879px){
	.Top-overlay{display:none}
}