/* Shared navigation, ported from the accepted homepage. */
.masthead {
  --badge-size:84px;
  --wordmark-size:21px;
  height: 102px;
  padding:26px var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  position:relative;
  z-index:250;
}

.brand {
  display:flex;
  align-items:center;
  gap:17px;
  flex-shrink:0;
}

.brand>span:not(.brand-badge) {
  display:grid;
  font-family:Bungee,AvenirNextCn,sans-serif;
  font-size:17px;
  line-height:1.18;
  letter-spacing:0;
}

.brand img {
  width:65px;
  height:65px;
  object-fit:contain;
}

.masthead .brand-badge {
  display:block;
  position:relative;
  width:var(--badge-size);
  height:var(--badge-size);
  flex:none;
  pointer-events:none;
}
.masthead .brand-badge img, .masthead .brand-badge canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
/* The homepage's img { display:block } overrides the browser's hidden rule. */
.masthead .brand-badge img[hidden] { display:none; }
.masthead .brand>span:not(.brand-badge) { white-space:nowrap; font-size:var(--wordmark-size); }

.header-note {
  color:var(--muted);
  font-size:16px;
  margin-left:auto;
  margin-right:5vw;
}

.menu-toggle,.menu-close {
  background:none;
  color:var(--cream);
  border:0;
  display:flex;
  align-items:center;
  gap:16px;
  padding:12px 0;
  font-size:16px;
  white-space:nowrap;
}

.menu-lines {
  position: relative;
  display: block;
  width: 28px;
  height: 20px;
}
.menu-lines::before, .menu-lines::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: translateY(-5px);
  transition: transform .35s var(--ease);
}
.menu-lines::after { transform: translateY(5px); }
.menu-toggle:hover .menu-lines::before { transform: translateY(-7px); }
.menu-toggle:hover .menu-lines::after { transform: translateY(7px); }
.menu-toggle[aria-expanded="true"] .menu-lines::before,
.navigation[open] .menu-close .menu-lines::before { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-lines::after,
.navigation[open] .menu-close .menu-lines::after { transform: rotate(-45deg); }
.navigation.is-closing .menu-close .menu-lines::before { transform: translateY(-5px); }
.navigation.is-closing .menu-close .menu-lines::after { transform: translateY(5px); }

.navigation {
  margin:0 0 0 auto;
  height:100dvh;
  max-height:100dvh;
  width:min(650px,100%);
  max-width:100%;
  padding:36px var(--gutter);
  background:var(--ink-2);
  color:var(--cream);
  border:0;
  border-left:1px solid var(--line);
}

.navigation[open] {
  display:flex;
  flex-direction:column;
  animation:menu-in .45s var(--ease) both;
}

.navigation::backdrop {
  animation: menu-backdrop-in .35s ease both;
  background:rgba(0,0,0,.72);
  color:var(--cream);
}

.menu-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  font-size:16px;
}

.navigation[open] nav li {
  animation: menu-item-in .36s var(--ease) both;
  animation-delay: calc(70ms + var(--menu-order, 0) * 28ms);
}
.navigation[open].is-closing { animation: menu-out .24s ease-in both; }
.navigation.is-closing::backdrop { animation: menu-backdrop-out .24s ease-in both; }
.navigation.is-closing nav li { animation: none; }


.navigation nav {
  margin:auto 0;
  padding:40px 0;
}

.navigation ol {
  list-style:none;
  margin:0;
  padding:0;
}

.navigation li {
  border-bottom:1px solid var(--line);
}

.navigation nav a {
  display:flex;
  align-items:center;
  padding:15px 0;
  font-size:20px;
}

.menu-contact {
  display:flex;
  flex-wrap:wrap;
  gap:12px 24px;
  font-size:18px;
  color:var(--muted);
}

body:has(.navigation[open]) {
  overflow:hidden;
}


@keyframes menu-in {
  from {
    opacity:0;
    transform:translateX(100%);
  }
  to {
    opacity:1;
    transform:none;
  }
}

@keyframes menu-out {
  to { opacity: 0; transform: translateX(100%); }
}
@keyframes menu-item-in {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes menu-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes menu-backdrop-out { from { opacity: 1; } to { opacity: 0; } }


@media(max-width:900px) {
  .masthead {
    --badge-size:72px;
    --wordmark-size:18px;
    height: 96px;
    padding-block:20px;
  }
  .header-note {
    display:none;
  }
  .brand img {
    width:56px;
    height:56px;
  }
  .brand>span:not(.brand-badge) {
    font-size:15px;
  }
}

@media(max-width:600px) {
  .masthead {
    --badge-size:60px;
    --wordmark-size:14px;
    height: 86px;
    gap:10px;
  }
  .brand {
    gap:11px;
  }
  .brand img {
    width:47px;
    height:47px;
  }
  .brand>span:not(.brand-badge) {
    font-size:12px;
  }
  .menu-toggle {
    font-size:15px;
    gap:10px;
  }
  .menu-lines {
    width:22px;
  }
}

@media(max-width:360px) {
  .masthead {
    --badge-size:56px;
    --wordmark-size:13.5px;
  }
}

.fallback-navigation {
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  padding:10px var(--gutter) 25px;
  font-size:17px;
}

.fallback-navigation a {
  padding-block:8px;
  text-decoration:underline;
  text-underline-offset:5px;
}

/* Pin chrome to the same metrics when a booking app rescales its root font. */
.masthead, .navigation {
  --gutter: clamp(22px,4vw,76px);
  --line: rgba(244,239,227,.19);
  --muted: #b8b3a7;
  font-family: AvenirNextCn,Arial,sans-serif;
  line-height: 1.5;
}
.masthead a, .navigation a { color: inherit; text-decoration: none; }
.masthead a:hover, .navigation a:hover, .navigation a[aria-current="page"] { color: var(--gold); }
.navigation .ordinal { color: var(--gold); margin-right: 16px; font-size: 14px; }
.masthead button, .navigation button { cursor: pointer; font-family: inherit; line-height: 1.5; }
.masthead :focus-visible, .navigation :focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
html:has(.navigation[open]) { overflow: hidden; }
.navigation { overscroll-behavior: contain; }
@media(max-width:600px) {
  .masthead, .navigation { --gutter: 22px; }
  .navigation .ordinal { font-size: 12px; }
}

/* Host apps already reserve space for the former absolute header. */
.site-shell:not(.site-page) > .masthead { position: absolute; inset: 0 0 auto; }

@media(max-width:600px) {
  .navigation {
    padding:24px;
  }
  .navigation nav a {
    font-size:20px;
  }
  .menu-head {
    font-size:15px;
  }
  .navigation .ordinal {
    font-size:12px;
  }
  .navigation nav {
    padding-block:25px;
  }
}