/* Keep one compositing path across open, close and rapid reversals. */
html{scrollbar-gutter:stable}
.header,.header.scrolled,.header.menu-active,.header.scrolled.menu-active{height:86px;backdrop-filter:none;-webkit-backdrop-filter:none;filter:none;transform:none}
.header .nav,.header .nav.open{
 clip-path:none;transform:none;background:#292622;
 transition:opacity .28s ease,visibility 0s linear .28s;
}
.header .nav{opacity:0;visibility:hidden;pointer-events:none}
.header .nav.open{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
.header .nav .menu-heading,.header .nav .menu-group,.header .nav .nav-bottom{
 transform:translateY(8px);transition:opacity .3s ease,transform .4s cubic-bezier(.16,1,.3,1);transition-delay:0s;
}
.header .nav.open .menu-heading,.header .nav.open .menu-group,.header .nav.open .nav-bottom{transform:translateY(0);opacity:1;transition-delay:.06s}
.header>.menu,body:has(.signature-photos) .header>.menu{animation:none;opacity:1;visibility:visible;transform:none;pointer-events:auto}
/* Share the curtain's duration; this animation stays attached across menu states. */
body:has(.hero .opening-message){--intro-curtain-duration:3.5s}
.hero .opening-message{animation-duration:var(--intro-curtain-duration,3.5s)}
body:has(.hero .opening-message) .header>.menu{
 animation:menu-after-intro .18s ease var(--intro-curtain-duration) both!important;
}
@keyframes menu-after-intro{
 from{opacity:0;visibility:hidden;pointer-events:none}
 to{opacity:1;visibility:visible;pointer-events:auto}
}
@media(prefers-reduced-motion:reduce){
 body:has(.hero .opening-message) .header>.menu{animation:none!important;opacity:1;visibility:visible;pointer-events:auto}
 .header .nav,.header .nav .menu-heading,.header .nav .menu-group,.header .nav .nav-bottom{transition:none;transform:none}
}

/* ACORNS: translucent header with a softly feathered lower edge. */
html body .header,html body .header.scrolled{background:transparent;border:0;box-shadow:none}
.header::before{content:"";position:absolute;inset:0 0 -40px;z-index:0;pointer-events:none;background:rgba(255,255,255,.14);backdrop-filter:blur(10px) saturate(105%);-webkit-backdrop-filter:blur(10px) saturate(105%);mask-image:linear-gradient(to bottom,#000 0%,#000 38%,transparent 85%),radial-gradient(ellipse 32% 95% at 12% 0%,#000 28%,transparent 100%),radial-gradient(ellipse 25% 100% at 58% 0%,#000 35%,transparent 100%),radial-gradient(ellipse 22% 85% at 92% 0%,#000 22%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 38%,transparent 85%),radial-gradient(ellipse 32% 95% at 12% 0%,#000 28%,transparent 100%),radial-gradient(ellipse 25% 100% at 58% 0%,#000 35%,transparent 100%),radial-gradient(ellipse 22% 85% at 92% 0%,#000 22%,transparent 100%);opacity:0;transition:opacity .3s ease}
.header.scrolled::before,body:not(:has(.hero)) .header::before{opacity:1}
html body .header.menu-active::before{opacity:0}
@media(prefers-reduced-motion:reduce){.header::before{transition:none}}
/* ACORNS: airy cloud layers, without a glass surface. */
html body .header::before{inset:-18px -3% -50px;background:radial-gradient(ellipse 23% 48% at 4% 30%,rgba(255,255,255,.63),rgba(255,255,255,.22) 52%,transparent 100%),radial-gradient(ellipse 30% 62% at 31% 8%,rgba(255,255,255,.55),rgba(255,255,255,.16) 60%,transparent 100%),radial-gradient(ellipse 20% 47% at 61% 30%,rgba(255,255,255,.5),rgba(255,255,255,.12) 58%,transparent 100%),radial-gradient(ellipse 29% 68% at 91% 3%,rgba(255,255,255,.65),rgba(255,255,255,.18) 62%,transparent 100%);backdrop-filter:none;-webkit-backdrop-filter:none;filter:blur(9px);mask-image:none;-webkit-mask-image:none}