/* Shared menu. Same cream, hairline and type as the rest of the site. */

.nav-toggle,
.nav-close{
  font:inherit;
  color:var(--ink, #33251A);
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}
.nav-toggle{
  justify-self:start;
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
}
.nav-toggle:hover,
.nav-close:hover{color:var(--forest, #5b5d3a)}
.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after{
  display:block;
  width:18px;
  height:1.5px;
  background:currentColor;
  border-radius:1px;
  position:relative;
}
.nav-toggle-icon::before,
.nav-toggle-icon::after{
  content:"";
  position:absolute;
  left:0;
}
.nav-toggle-icon::before{top:-6px}
.nav-toggle-icon::after{top:6px}

.nav-scrim{
  position:fixed;
  inset:0;
  z-index:250;
  background:rgba(46,42,34,.28);
  opacity:0;
  pointer-events:none;
  transition:opacity .32s ease;
}
.nav-scrim.is-open{opacity:1;pointer-events:auto}

.site-menu{
  position:fixed;
  z-index:260;
  top:0;
  left:0;
  height:100%;
  width:min(17.5rem, 86vw);
  padding:1rem 1.35rem 2rem;
  background:var(--paper, #FFFDF9);
  border-right:1px solid var(--hairline, #E2D5C2);
  box-shadow:12px 0 32px rgba(51,37,26,.06);
  transform:translateX(-105%);
  transition:transform .32s ease;
  display:flex;
  flex-direction:column;
  align-items:stretch;
}
.site-menu.is-open{transform:none}
.nav-close{
  align-self:flex-end;
  width:44px;
  height:44px;
  margin:-.15rem -.4rem .15rem;
  font-family:var(--font-body, 'Jost', system-ui, sans-serif);
  font-size:1.35rem;
  font-weight:400;
  line-height:1;
  color:var(--ink-soft, #6B5344);
  border-radius:12px;
}
.site-menu a{
  font-family:var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size:1.5rem;
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.15;
  color:var(--ink, #33251A);
  text-decoration:none;
  padding:.5rem 0;
  border-bottom:1px solid var(--hairline, #E2D5C2);
}
.site-menu a:hover{color:var(--forest, #5b5d3a)}
.nav-toggle:focus-visible,
.nav-close:focus-visible,
.site-menu a:focus-visible{
  outline:2px solid var(--forest, #5b5d3a);
  outline-offset:3px;
}
body.nav-open{overflow:hidden}

header.header.site-bar{
  position:sticky;
  top:0;
  z-index:40;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  justify-content:stretch;
  min-height:4rem;
  padding:.7rem 1rem;
  background:color-mix(in srgb, var(--cream, #F9F1E8) 92%, transparent);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hairline, #E2D5C2);
}
header.header.site-bar > a,
.site-bar-logo{justify-self:center;line-height:0}
.site-bar-end{justify-self:end}
.site-bar-logo img{height:26px;width:auto;display:block}

@media (prefers-reduced-motion: reduce){
  .nav-scrim,
  .site-menu{transition:none}
}