/* Spectra: site menu (css/menu.css, built by js/menu.js). Uses the :root tokens from css/site.css.
   A calm, near-black overlay: the destinations are a quiet typographic list, on desktop the building mark is drawn in light on the right and answers the cursor.
   Opens with a short opacity fade and a gentle rise of the links; transform and opacity only. */

/* ---------- header: Menu sits left of Book now; on the landing the sound toggle keeps its slot before it ---------- */
.top .snd-slot{order:2}
.top .mn-btn{order:3}
.top .book{order:4}

/* ---------- the button (same cut corner, height and type as .book; glass instead of silver) ---------- */
.mn-btn{position:relative;isolation:isolate;appearance:none;-webkit-appearance:none;border:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:11px;
  min-height:44px;padding:0 16px 0 14px;color:var(--ink);font-family:var(--mono);font-stretch:62%;font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  background:rgba(18,18,22,.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);transition:transform .16s var(--ease),background .25s;-webkit-tap-highlight-color:transparent}
.mn-btn::before{content:"";position:absolute;inset:0;z-index:-1;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.6),rgba(255,255,255,.14) 45%,rgba(255,255,255,.34));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.mn-btn::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--spectrum);transform:scaleX(0);transform-origin:left;transition:transform .18s var(--ease)}
.mn-btn:focus-visible{background:rgba(34,34,42,.62)}@media (hover:hover){.mn-btn:hover{background:rgba(34,34,42,.62)}}
.mn-btn:focus-visible::after{transform:scaleX(1)}@media (hover:hover){.mn-btn:hover::after{transform:scaleX(1)}}
.mn-btn:active{transform:scale(.97)}
.mn-btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px;clip-path:none}
:root{--e-out:cubic-bezier(.16,1,.3,1);--spring:cubic-bezier(.34,1.56,.64,1)}
.mn-ico{position:relative;display:block;width:18px;height:12px;flex:none}
.mn-ico i{position:absolute;left:0;width:18px;height:1.5px;background:currentColor;transition:transform .45s var(--ease),width .25s var(--ease),top .45s var(--ease)}
.mn-ico i:nth-child(1){top:2px}
.mn-ico i:nth-child(2){top:8.5px}
@media (hover:hover){.mn-btn:hover .mn-ico i:nth-child(2){width:11px}}
.mn-close .mn-ico i:nth-child(1){top:5.25px;transform:rotate(45deg)}
.mn-close .mn-ico i:nth-child(2){top:5.25px;transform:rotate(-45deg);width:18px}
.mn-close .mn-ico{transition:transform .5s var(--spring)}
.mn:not(.on) .mn-close .mn-ico{transform:rotate(-90deg);transition:none}
.mn.on .mn-close .mn-ico{animation:mn-spin .55s var(--e-out) .08s backwards}
@media (hover:hover){.mn-close:hover .mn-ico{transform:rotate(90deg)}}
.mn-close:focus-visible .mn-ico{transform:rotate(90deg)}
.mn-close:active{transform:scale(.94)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .mn-btn{background:rgba(24,24,28,.94)} }

/* the Close button inside the overlay is flat: no blur, no cut corner */
.mn-close{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;clip-path:none;border-radius:9px}
.mn-close::before,.mn-close::after{display:none}
@media (hover:hover){.mn-close:hover{background:rgba(255,255,255,.08)}}
.mn-close:focus-visible{background:rgba(255,255,255,.08)}
/* ---------- overlay: near-black, a fade in, a fade out ---------- */
html.mn-lock{overflow:hidden;overscroll-behavior:none}
html.mn-lock.mn-sb{scrollbar-gutter:stable}   /* only when a scrollbar was there to keep (classic scrollbars): reserving one on the landing would shift the header and resize the canvas */
html.mn-lock body{overflow:hidden;overscroll-behavior:none}   /* iOS: the page behind must not scroll or rubber-band while the menu is up */
.mn{position:fixed;inset:0;z-index:70;color:var(--ink);visibility:hidden;opacity:0;
  background:radial-gradient(90vmax 70vmax at 82% -10%,#101014 0%,#07070a 55%,#050506 100%);
  contain:layout style;transition:opacity .2s linear,visibility 0s linear .2s}
.mn.on{visibility:visible;opacity:1;transition:opacity .3s cubic-bezier(.4,0,.2,1),visibility 0s}
.mn:not(.on){pointer-events:none}
.mn-bar{touch-action:none}
.mn-body{touch-action:pan-y pinch-zoom}

/* ---------- top bar: lays out exactly like the header so the Menu button turns into Close in place ---------- */
.mn-bar{position:absolute;z-index:2;inset:0 0 auto 0;display:flex;align-items:flex-start;gap:16px;
  padding:calc(var(--gut)*.7 + var(--sat)) calc(var(--gut) + var(--sar)) 0 calc(var(--gut) + var(--sal))}
.mn-bar .mn-mark{margin-right:auto;min-height:44px}
.mn-bar .mn-close{order:3}
.mn-bar .book{order:4}
.mn-bar .mark .logo{filter:none}
.mn-bar .mark .logo.logo-lockup{height:32px;width:auto}

/* ---------- body: a typographic list ---------- */
.mn-body{position:absolute;inset:0;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:calc(var(--head) + var(--sat) + clamp(8px,3vh,36px)) calc(var(--gut) + var(--sar)) calc(clamp(8px,1.6vh,18px) + var(--sab)) calc(var(--gut) + var(--sal));
  transform:translate3d(0,6px,0);transition:transform .2s cubic-bezier(.4,0,1,1),opacity .2s linear}
.mn.on .mn-body{transform:none}
.mn.on.mn-leave .mn-body{opacity:0;transform:translate3d(0,-10px,0);transition:transform .2s cubic-bezier(.4,0,1,1),opacity .18s linear}
.mn-list{list-style:none;margin:auto 0;padding:0;width:min(860px,100%);flex:none;--tf:clamp(28px,3.1vw,46px)}
.mn-list a{position:relative;isolation:isolate;display:grid;grid-template-columns:var(--tcol,minmax(0,1.7fr)) max-content;align-items:baseline;column-gap:clamp(16px,2.4vw,40px);width:fit-content;max-width:100%;min-height:56px;padding:clamp(10px,1.9vh,20px) 0;
  color:var(--ink);text-decoration:none;-webkit-tap-highlight-color:transparent;transform-origin:20% 50%;transition:opacity .35s var(--ease),transform .5s var(--spring)}
/* the spectrum line, drawn left to right along the foot of the row; a quiet wash for press / tap */
.mn-list a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;z-index:1;background:var(--spectrum);pointer-events:none;
  transform:scaleX(0);transform-origin:right bottom;transition:transform .5s var(--e-out),opacity .25s}
.mn-list a::before{content:"";position:absolute;inset:0 -10px;z-index:-1;border-radius:6px;background:rgba(255,255,255,.07);opacity:0;pointer-events:none;transition:opacity .3s}
.mn-list a:active{transform:scale(.98);transition-duration:.35s,.1s}
.mn-list a:active::before{opacity:1;transition-duration:.08s}
.mn-list a:active::after{transform:scaleX(1) scaleY(1.8);transform-origin:left bottom;transition-duration:.12s,.12s}
.mn-t{position:relative;display:block;width:fit-content;max-width:100%;font-family:var(--serif);font-stretch:112%;font-weight:300;font-size:var(--tf);line-height:1.08;letter-spacing:.01em;text-wrap:balance;
  transition:transform .35s var(--e-out)}
.mn-tm{display:block;overflow:hidden;padding:.08em 0 .14em;margin:-.08em 0 -.14em}
.mn-ti{display:block}
.mn-ar{position:absolute;left:100%;top:50%;width:.62em;height:.62em;margin-left:.4em;color:var(--ink);opacity:0;transform:translate3d(-12px,-50%,0);pointer-events:none;transition:transform .35s var(--ease),opacity .2s}
.mn-ar svg{display:block;width:100%;height:100%;overflow:visible}
.mn-d{display:block;white-space:nowrap;font-family:var(--sans);font-weight:300;font-size:clamp(12.5px,1.12vw,16px);line-height:1.45;letter-spacing:.02em;color:var(--soft);opacity:.74;transition:opacity .3s}
.mn-list a[aria-current] .mn-ti::after{content:"";display:inline-block;width:6px;height:6px;margin-left:.45em;border-radius:50%;background:var(--ink);vertical-align:.18em}
.mn-list a:focus-visible{outline:2px solid var(--ink);outline-offset:6px;border-radius:2px}
/* hover = keyboard focus */
@media (hover:hover){
  .mn-list:has(a:is(:hover,:focus-visible)) a:not(:is(:hover,:focus-visible)){opacity:.5}
  .mn-list a:is(:hover,:focus-visible) .mn-t{transform:translate3d(12px,0,0);transition:transform .6s var(--spring)}
  .mn-list a:is(:hover,:focus-visible) .mn-d{opacity:1}
  .mn-list a:is(:hover,:focus-visible)::after{transform:scaleX(1);transform-origin:left bottom}
  .mn-list a:is(:hover,:focus-visible) .mn-ar{opacity:1;transform:translate3d(0,-50%,0);transition:transform .5s var(--e-out) .06s,opacity .25s .06s}
}
@media (hover:none){
  .mn-list a:focus-visible .mn-t{transform:translate3d(12px,0,0);transition:transform .6s var(--spring)}
  .mn-list a:focus-visible .mn-d{opacity:1}
  .mn-list a:focus-visible::after{transform:scaleX(1);transform-origin:left bottom}
  .mn-ar{display:none}
}

@media (min-width:761px){ .mn-list{--tcol:calc(var(--tf)*9.6)} }
/* the mark (desktop with a fine pointer only; js/menu.js draws it on the canvas, tilts the wrapper, and sets the theme word beneath) */
.mn-art{display:none}
@media (hover:hover) and (pointer:fine) and (min-width:1000px){
  .mn-art{display:block;position:absolute;z-index:1;pointer-events:none;right:calc(var(--gut) + var(--sar));top:52%;transform:translate3d(0,-50%,0);width:clamp(340px,min(34vw,72vh*1.56),640px)}
  @media (min-width:1360px){.mn-art{width:clamp(340px,min(36vw,72vh*1.56),640px)}}
  .mn-art-tilt{width:100%;aspect-ratio:64/41;transform-origin:50% 50%;will-change:transform}
  .mn-cv{display:block;width:100%;height:100%}
  .mn-art-w{position:relative;height:1.6em;margin-top:clamp(14px,2.4vh,28px);font-family:var(--sans);font-weight:400;font-size:13px;letter-spacing:.42em;text-transform:uppercase;color:var(--soft);text-align:center}
  .mn-art-w span{position:absolute;left:0;right:0;top:0;opacity:0;transform:translate3d(0,6px,0);transition:opacity .35s ease,transform .5s var(--e-out)}
  .mn-art-w span.in{opacity:.9;transform:none}
  .mn.on .mn-art{animation:mn-fade 1s ease .25s backwards}
}

/* ---------- open: titles rise out of a mask line (stagger 40ms), then descriptions, then the foot. A one-shot animation, so hover transitions stay instant ---------- */
@keyframes mn-rise{from{transform:translate3d(0,110%,0)}}
@keyframes mn-fade-up{from{opacity:0;transform:translate3d(0,8px,0)}}
@keyframes mn-fade{from{opacity:0}}
@keyframes mn-spin{from{transform:rotate(-90deg)}}
.mn.on .mn-ti{animation:mn-rise .75s var(--e-out) calc(.05s + var(--i)*40ms) backwards}
.mn.on .mn-d{animation:mn-fade-up .6s var(--e-out) calc(.2s + var(--i)*40ms) backwards}
.mn.on .mn-foot{animation:mn-fade .5s ease .6s backwards}

/* ---------- footer strip ---------- */
.mn-foot{flex:none;display:flex;align-items:center;gap:8px 28px;flex-wrap:wrap;margin-top:clamp(8px,2vh,24px);padding-top:clamp(2px,.8vh,10px)}
.mn-more{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 clamp(18px,2.4vw,34px)}
.mn-more a{display:inline-flex;min-width:44px;align-items:center;min-height:44px;font-family:var(--sans);font-weight:400;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);text-decoration:none;transition:color .25s}
.mn-more a:focus-visible{color:var(--ink);outline:1px solid var(--ink);outline-offset:2px}@media (hover:hover){.mn-more a:hover{color:var(--ink)}}
.mn-more a[aria-current]{color:var(--ink)}
.mn-social{list-style:none;margin:0 -11px 0 auto;padding:0;display:flex;gap:0 2px}
.mn-social a{display:grid;place-items:center;width:44px;height:44px;color:var(--ink);opacity:.6;transition:opacity .25s}
.mn-social svg{display:block}
.mn-social a:focus-visible{opacity:1;outline:1px solid var(--ink);outline-offset:-4px}
@media (hover:hover){.mn-social a:hover{opacity:1}}

/* ---------- phone: a clean list ---------- */
@media (max-width:760px){
  .mn-bar,.top{gap:10px}
  .mn-btn{padding:0 12px}
  .mn-btn .mn-lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .mn-btn{min-width:44px}
  .mn-list{margin:0}
  .mn-list a{grid-template-columns:1fr;width:auto;row-gap:4px;align-content:center;padding:13px 0 14px}
  .mn-t{font-size:clamp(26px,7.4vw,32px)}
  .mn-d{font-size:14px;max-width:none;white-space:normal;text-wrap:balance}
}
@media (max-width:380px){
  .top,.mn-bar{gap:6px}
  .top .book,.mn-bar .book{padding:0 11px 0 12px;font-size:14px}
}

/* ---------- reduced motion: a plain, quicker fade, nothing travels ---------- */
@media (prefers-reduced-motion:reduce){
  .mn,.mn.on{transition:opacity .15s linear,visibility 0s .15s!important}
  .mn.on{transition:opacity .15s linear,visibility 0s!important}
  .mn.on .mn-ti,.mn.on .mn-d,.mn.on .mn-foot,.mn.on .mn-close .mn-ico{animation:none}
  .mn-body,.mn.on .mn-body,.mn.on.mn-leave .mn-body{transform:none!important;transition:opacity .15s linear}
  .mn-list a,.mn-list a:active,.mn-t,.mn-ar,.mn-close .mn-ico,.mn:not(.on) .mn-close .mn-ico,.mn-close:hover .mn-ico,.mn-close:active{transform:none!important}
  .mn-list a::after,.mn-list a:active::after{transform:scaleX(1)!important;opacity:0;transition:opacity .2s}
  .mn-list a:is(:hover,:focus-visible)::after,.mn-list a:active::after{opacity:1}
  .mn-ar{transform:translate3d(0,-50%,0)!important;transition:opacity .2s}
  .mn-list a:is(:hover,:focus-visible) .mn-t{transform:none;transition:none}
  .mn-art-w span,.mn-art-w span.in{transform:none}
  .mn.on .mn-art{animation:none}
}
@media (max-width:720px){ .mn-bar .mark .logo.logo-lockup{height:21px} }
@media (max-height:500px) and (orientation:landscape){ .mn-bar .mark .logo.logo-lockup{height:21px} }

/* ---------- Book now: a single shine sweep on hover / focus (same silver button as css/site.css .book; clip-path only) ---------- */
.book .bk-t{position:static}
.book .bk-t::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:rgba(255,255,255,.5);clip-path:polygon(-40% 0,-40% 0,-40% 100%,-40% 100%);opacity:0}
@keyframes bk-shine{
  0%{opacity:0;clip-path:polygon(-35% 0,-10% 0,-22% 100%,-47% 100%)}
  15%{opacity:1}
  80%{opacity:.9}
  100%{opacity:0;clip-path:polygon(105% 0,130% 0,118% 100%,93% 100%)}
}
.book:focus-visible .bk-t::after{animation:bk-shine .7s var(--ease) 1}
@media (hover:hover){.book:hover .bk-t::after{animation:bk-shine .7s var(--ease) 1}}
@media (prefers-reduced-motion:reduce){.book .bk-t::after{display:none}}