/* ---------- site menu (shared by every page) ---------- */
.menu-btn{
  position:fixed;z-index:60;
  top:calc(env(safe-area-inset-top,0px) + 11px);
  right:calc(var(--gutter,24px) - 11px);
  width:46px;height:46px;display:grid;place-items:center;
  background:none;border:0;padding:0;margin:0;cursor:pointer;
  color:var(--menu-ink,#2A2723);
  -webkit-tap-highlight-color:transparent;
  transition:color .6s ease;
}
.menu-btn:focus-visible{outline:1px solid currentColor;outline-offset:2px}
.menu-bars{position:relative;display:block;width:26px;height:10px}
.menu-bars i{
  position:absolute;right:0;height:1.4px;background:currentColor;border-radius:1px;
  transition:transform .65s cubic-bezier(.7,0,.2,1),top .65s cubic-bezier(.7,0,.2,1),width .65s cubic-bezier(.7,0,.2,1);
}
.menu-bars i:nth-child(1){top:0;width:26px}
.menu-bars i:nth-child(2){top:8.6px;width:17px}
.menu-btn:hover .menu-bars i:nth-child(2){width:26px}
html.menu-open .menu-btn{color:#ECE6DA}
html.menu-open .menu-bars i{top:4.3px;width:24px}
html.menu-open .menu-bars i:nth-child(1){transform:rotate(45deg)}
html.menu-open .menu-bars i:nth-child(2){transform:rotate(-45deg)}
html.menu-open{overflow:hidden}

.menu{
  --m-ink:#ECE6DA;--m-soft:#A79F91;--m-faint:#5F584E;--m-gold:#C1A063;--m-rule:rgba(236,230,218,.12);
  position:fixed;inset:0;z-index:55;
  background:#0D0C0B;color:var(--m-ink);
  clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path .85s cubic-bezier(.7,0,.2,1),visibility 0s linear .85s;
  display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top,0px) + 26px) var(--gutter,24px) calc(env(safe-area-inset-bottom,0px) + 26px);
  overflow:auto;
}
.menu.open{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .85s cubic-bezier(.7,0,.2,1),visibility 0s}
.menu::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.menu-top{
  display:flex;align-items:baseline;gap:18px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--m-soft);
}
.menu-top a{color:var(--m-ink);text-decoration:none;font-family:"Cormorant","Cormorant Garamond",serif;font-size:21px;letter-spacing:.01em;text-transform:none}
.menu-top a i{font-weight:300}
.menu-list{
  list-style:none;margin:auto 0;padding:clamp(28px,6vh,64px) 0;
  display:flex;flex-direction:column;gap:clamp(6px,1.4vh,14px);
  counter-reset:m;
}
.menu-list li{border-top:1px solid var(--m-rule)}
.menu-list li:last-child{border-bottom:1px solid var(--m-rule)}
.menu-list a,.menu-list .row{
  display:grid;grid-template-columns:3.2rem auto 1fr auto;align-items:baseline;column-gap:clamp(12px,2.2vw,32px);
  padding:clamp(12px,2.4vh,22px) 0;color:inherit;text-decoration:none;
}
.menu-list .n{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.18em;color:var(--m-gold)}
.menu-list .ko{
  font-family:"Gowun Batang","Nanum Myeongjo",serif;font-weight:400;
  font-size:clamp(2.1rem,6.4vw,4.8rem);line-height:1.05;letter-spacing:-.01em;
  transition:transform .6s cubic-bezier(.2,.7,.2,1),color .4s;
}
.menu-list .en{font-family:"Cormorant","Cormorant Garamond",serif;font-style:italic;font-weight:300;font-size:clamp(1.1rem,2.2vw,1.7rem);color:var(--m-soft)}
.menu-list em{font-style:normal;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.22em;color:var(--m-faint);text-transform:uppercase}
.menu-list a:hover .ko,.menu-list a:focus-visible .ko{transform:translateX(.35em);color:var(--m-gold)}
.menu-list a:focus-visible{outline:none}
.menu-list a[aria-current="page"] .ko::after{content:"";display:inline-block;width:.28em;height:.28em;border-radius:50%;background:var(--m-gold);margin-left:.35em;vertical-align:.5em}
.menu-list .soon .ko{color:var(--m-faint)}
.menu-list .soon .en{color:var(--m-faint)}
.menu-foot{
  display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--m-faint);
}
.menu-foot .au{display:inline-flex;align-items:baseline;gap:6px;color:var(--m-gold)}
.menu-foot .au b{font-weight:400;font-size:10px;opacity:.8}
.menu-foot .au span{font-family:"Cormorant",serif;font-size:22px;letter-spacing:.02em;text-transform:none}

/* stagger in */
.menu .menu-list li,.menu .menu-top,.menu .menu-foot{opacity:0;transform:translateY(26px);transition:opacity .5s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.menu.open .menu-list li,.menu.open .menu-top,.menu.open .menu-foot{opacity:1;transform:none}
.menu.open .menu-top{transition-delay:.25s}
.menu.open .menu-list li:nth-child(1){transition-delay:.32s}
.menu.open .menu-list li:nth-child(2){transition-delay:.39s}
.menu.open .menu-list li:nth-child(3){transition-delay:.46s}
.menu.open .menu-list li:nth-child(4){transition-delay:.53s}
.menu.open .menu-foot{transition-delay:.6s}

@media (max-width:640px){
  .menu-list a,.menu-list .row{grid-template-columns:2.2rem auto 1fr;row-gap:2px}
  .menu-list em{grid-column:2 / -1}
  .menu-list .en{justify-self:start}
}
@media (prefers-reduced-motion:reduce){
  .menu,.menu.open{transition:none}
  .menu .menu-list li,.menu .menu-top,.menu .menu-foot{transition:none;transform:none}
}