/* Mobile navigation — only applies at 850px and below.
   Desktop layout and the desktop nav are deliberately untouched. */

#navToggle{display:none}
#mobileNav{display:none}

@media(max-width:850px){

/* Compact header so more of the page shows above the fold */
header{padding:5px 5vw;align-items:center}
.brand{font-size:.95rem}

/* Hamburger button */
#navToggle{
display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
width:44px;height:44px;margin-right:-8px;padding:0;
background:transparent;border:0;cursor:pointer;font:inherit;
-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#navToggle span{display:block;width:24px;height:2px;background:#f4f1e9;
transition:transform .25s ease,opacity .2s ease,background .2s ease}
header.nav-open #navToggle span{background:#c8a45d}
header.nav-open #navToggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
header.nav-open #navToggle span:nth-child(2){opacity:0}
header.nav-open #navToggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Dims the page behind the open menu and doubles as a tap-to-close area */
header::after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;
background:#000000c4;opacity:0;pointer-events:none;transition:opacity .25s ease}
header.nav-open::after{opacity:1;pointer-events:auto}

/* Drop-down panel */
#mobileNav{display:block;position:absolute;top:100%;left:0;right:0;
background:#070707;border-bottom:1px solid #333;
max-height:0;overflow:hidden;visibility:hidden;
transition:max-height .28s ease,visibility .28s ease}
header.nav-open #mobileNav{max-height:80vh;max-height:80dvh;visibility:visible;
overflow-y:auto;-webkit-overflow-scrolling:touch}
#mobileNav a{display:block;padding:15px 5vw;color:#f4f1e9;
font-size:1rem;font-weight:bold;letter-spacing:.14em;text-transform:uppercase;
border-top:1px solid #1c1c1c;-webkit-tap-highlight-color:transparent}
#mobileNav a:first-child{border-top:0}
#mobileNav a:active{background:#111;color:#c8a45d}
#mobileNav a[aria-current="page"]{color:#c8a45d}
#mobileNav a[aria-current="page"]::before{content:"";display:inline-block;
width:14px;height:2px;background:#c8a45d;vertical-align:middle;margin-right:10px}

/* Keep in-page anchors clear of the fixed header */
section[id]{scroll-margin-top:60px}

/* Reclaim the space the taller header used to take */
.hero{padding-top:70px}
}