.mobile-menu{--menu-surface:#181a20;--menu-text:#f1ece5;--menu-muted:#b0a9a3;--menu-line:#f1ece521;--menu-accent:#ed9a77;padding:0;border:0;margin:0;width:100%;max-width:none;height:100dvh;max-height:none;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;background:var(--menu-surface);color:var(--menu-text);isolation:isolate}
.mobile-menu::backdrop{background:#101116b3;backdrop-filter:blur(8px)}
.mobile-menu[open]{animation:mobile-menu-reveal .42s cubic-bezier(.22,1,.36,1) both}
.mobile-menu[open].is-closing{animation:mobile-menu-conceal .23s cubic-bezier(.55,0,1,.45) both}
.mobile-menu-shell{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:100%;padding:calc(22px + env(safe-area-inset-top)) 6vw calc(28px + env(safe-area-inset-bottom));background:radial-gradient(ellipse 110% 55% at 115% 110%,#ae58342e,transparent 80%),linear-gradient(145deg,#23252d 0%,#181a20 57%,#1c1b20 100%)}
.mobile-menu-shell::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('/assets/monogram-grain.svg') repeat;opacity:.055;mix-blend-mode:soft-light}
.mobile-menu-header{display:flex;justify-content:space-between;align-items:center;min-height:44px;gap:24px}
.mobile-menu .site-logo{font-size:34px;color:var(--menu-text);flex-shrink:0}
.menu-toggle,.mobile-menu-close{align-items:center;justify-content:flex-end;gap:12px;padding:0;border:0;background:none;color:inherit;font:500 14px/1 var(--body);cursor:pointer;min-height:44px}
.mobile-menu-close{display:flex}
.mobile-menu a:focus-visible,.mobile-menu button:focus-visible{outline:2px solid var(--menu-accent);outline-offset:6px}
.menu-button-icon{position:relative;display:block;flex:none;width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--paper)}
.menu-button-icon::before,.menu-button-icon::after{content:'';position:absolute;left:12px;top:16px;width:16px;height:2px;border-radius:2px;background:currentColor}
.menu-button-icon::after{top:22px}
.mobile-menu-close .menu-button-icon::before{top:19px;transform:rotate(45deg)}
.mobile-menu-close .menu-button-icon::after{top:19px;transform:rotate(-45deg)}
.mobile-menu-close .menu-button-icon{background:#f1ece508;border:1px solid #f1ece52b;color:var(--menu-text)}
.mobile-menu-links{display:flex;flex-direction:column;margin:auto 0;padding:36px 0}
.mobile-menu-links>a{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:64px;padding:13px 0 15px;border-bottom:1px solid var(--menu-line);font:500 clamp(42px,12.8vw,70px)/1.04 var(--display);letter-spacing:-.06em;color:var(--menu-text);text-decoration:none;animation:mobile-menu-link-in .5s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(70ms + var(--link-order)*35ms)}
.mobile-menu-links>a:last-child{border-bottom:0}
.mobile-menu-links>a[aria-current=page] .mobile-menu-link-label{color:var(--menu-accent)}
.mobile-menu-links sup{display:inline-block;margin-left:8px;vertical-align:top;font:500 14px/1.2 var(--body);letter-spacing:0;padding-top:4px;color:var(--menu-muted)}
.mobile-menu-links .mobile-menu-contact{color:var(--menu-accent)}
.mobile-menu-contact-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--accent);color:var(--paper);flex-shrink:0}
.mobile-menu-contact-icon .ui-chevron{width:16px;height:16px}
.mobile-menu-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;padding-top:18px;border-top:1px solid var(--menu-line);font:400 12px/1.5 var(--body);color:var(--menu-muted)}
.mobile-menu-socials{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-basis:100%}
.mobile-menu-socials a{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:500 14px/1.3 var(--body);color:var(--menu-text)}
.mobile-menu-socials .ui-chevron{width:11px;height:11px}
.mobile-menu-socials a:hover{color:var(--menu-accent)}
.mobile-menu-socials a:hover .ui-chevron{transform:translateX(3px)}
html.mobile-nav-open,html.mobile-nav-open body{overflow:hidden!important;overscroll-behavior:none}
@keyframes mobile-menu-reveal{from{clip-path:inset(0 0 100% 0 round 0 0 28px 28px)}to{clip-path:inset(0 round 0)}}
@keyframes mobile-menu-conceal{from{clip-path:inset(0 round 0)}to{clip-path:inset(0 0 100% 0 round 0 0 28px 28px)}}
@keyframes mobile-menu-link-in{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
@media(max-width:800px){.mobile-menu-ready .site-header{grid-template-columns:1fr auto;padding:calc(22px + env(safe-area-inset-top)) 6vw 22px;gap:20px}.mobile-menu-ready .site-header>nav{display:none}.mobile-menu-ready .site-header>.menu-toggle{display:flex;grid-column:2;justify-self:end}.mobile-menu-ready .site-header .site-logo{font-size:34px}}
/* Option 01: a softly translucent, full-width bar only over selected sections. */
@media(max-width:800px){
  .mobile-menu-ready .site-header{isolation:isolate}
  .mobile-menu-ready .site-header::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--paper);border-bottom:1px solid rgba(32,31,36,.1);box-shadow:0 5px 20px rgba(32,31,36,.035);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s}
  .mobile-menu-ready .site-header.is-frosted::before{opacity:1;visibility:visible}
  .mobile-menu-ready .site-header.is-frosted>.site-logo,.mobile-menu-ready .site-header.is-frosted>.menu-toggle{color:var(--ink)}
  .mobile-menu-ready .site-header.is-frosted>.site-logo>span{color:var(--accent)}
  @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .mobile-menu-ready .site-header::before{background:rgba(241,236,229,.88);-webkit-backdrop-filter:blur(18px) saturate(1.08);backdrop-filter:blur(18px) saturate(1.08)}
  }
}
@media(max-width:800px) and (prefers-reduced-motion:reduce){.mobile-menu-ready .site-header::before{transition:none}}
@media(max-height:650px){.mobile-menu-shell{padding-top:calc(16px + env(safe-area-inset-top));padding-bottom:calc(18px + env(safe-area-inset-bottom))}.mobile-menu-links{padding:18px 0}.mobile-menu-links>a{font-size:clamp(32px,7.4vh,48px);padding:9px 0;min-height:50px}.mobile-menu-footer{padding-top:12px}}
@media(prefers-reduced-motion:reduce){.mobile-menu[open],.mobile-menu[open].is-closing,.mobile-menu-links>a{animation:none}}

.mobile-menu[data-glow=on]{--menu-muted:#e0d7d0;--menu-accent:#ffc3a0}
/* Shared menu glow: the selected hero-colored atmosphere. */
.menu-atmosphere{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none;opacity:1;transition:opacity .7s ease}
.menu-atmosphere::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#11121755 0%,#11121738 35%,#11121747 70%,#11121777 100%)}
.glow-field{position:absolute;display:block;will-change:auto;animation-play-state:paused;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
.glow-peach{width:185%;height:110%;left:-45%;top:15%;background:radial-gradient(ellipse at 50% 50%,#f38f609c 0%,#e6aa9859 23%,#e6aa981f 43%,transparent 68%);animation-name:menu-peach-drift;animation-duration:21s;animation-delay:-7s}
.glow-lilac{width:195%;height:110%;left:-58%;top:-40%;background:radial-gradient(ellipse at 50% 50%,#c3c6d59c 0%,#9b96bd59 24%,#9b96bd17 46%,transparent 68%);animation-name:menu-lilac-drift;animation-duration:27s;animation-delay:-11s}
.glow-amber{width:165%;height:105%;left:18%;top:44%;background:radial-gradient(ellipse at 50% 50%,#f38f6078 0%,#dc67482e 34%,transparent 68%);animation-name:menu-amber-drift;animation-duration:24s;animation-delay:-4s}
.mobile-menu[open] .glow-field,.menu-preview[data-glow=on] .glow-field{animation-play-state:running;will-change:transform}
[data-glow=off] .menu-atmosphere{opacity:0}
[data-glow=off] .glow-field,.menu-preview.is-paused .glow-field,.glow-study.is-background .glow-field,.mobile-menu.is-background .glow-field{animation-play-state:paused;will-change:auto}
@keyframes menu-peach-drift{0%{transform:translate(-9%,-9%) scale(.92) rotate(-8deg)}50%{transform:translate(12%,8%) scale(1.12) rotate(4deg)}100%{transform:translate(-2%,22%) scale(1.04) rotate(12deg)}}
@keyframes menu-lilac-drift{0%{transform:translate(-8%,-4%) scale(1.04) rotate(7deg)}50%{transform:translate(16%,20%) scale(.93) rotate(-5deg)}100%{transform:translate(2%,39%) scale(1.13) rotate(-13deg)}}
@keyframes menu-amber-drift{0%{transform:translate(8%,6%) scale(1.07)}50%{transform:translate(-14%,-13%) scale(.94)}100%{transform:translate(-30%,-31%) scale(1.17)}}
@media(prefers-reduced-motion:reduce){.mobile-menu .glow-field{animation:none!important;will-change:auto!important}.menu-atmosphere{transition:none}}
