.site-header {
  --header-height:138px;
  height:var(--header-height);
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:5;
  padding-inline:14px;
  gap:40px
}

.brand {
  display:block;
  flex:none;
  line-height:0
}

.brand img {
  display:block;
  width:182px;
  height:auto
}

.navigation {
  display:flex;
  align-items:center;
  gap:36px;
  font:19px/1.25 var(--serif);
  color:var(--ink)
}

.navigation>a:not(.button) {
  padding:12px 0;
  position:relative
}

.navigation>a:hover {
  color:var(--rust)
}

.navigation .button {
  font:17px/1.2 var(--serif);
  letter-spacing:.15px;
  min-height:46px;
  padding:12px 30px;
  margin-left:5px;
  background:transparent;
  color:var(--ink);
  border:1px solid #d35c40;
  transition:background .2s,color .2s
}

.navigation .button:hover {
  background:var(--rust);
  color:#fff9ed;
  transform:none;
  filter:none
}

.menu-toggle {
  display:none
}

@media(max-width:900px) {
  .site-header {
    --header-height:116px;
    padding-inline:0
  }
  .brand img {
    width:159px
  }
  .menu-toggle {
    display:flex;
    align-items:center;
    gap:12px;
    min-height:44px;
    padding:0;
    border:0;
    background:transparent;
    z-index:7
  }
  .menu-symbol {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    width:44px;
    height:44px;
    border:1px solid #c9c4b9;
    border-radius:50%;
    transition:border-color .2s
  }
  .menu-toggle:hover .menu-symbol {
    border-color:var(--accent)
  }
  .menu-symbol i {
    display:block;
    height:1px;
    width:18px;
    background:var(--ink);
    transition:transform .2s
  }
  .menu-toggle[aria-expanded=true] .menu-symbol i:first-child {
    transform:translateY(3.5px) rotate(45deg)
  }
  .menu-toggle[aria-expanded=true] .menu-symbol i:last-child {
    transform:translateY(-3.5px) rotate(-45deg)
  }
  .navigation {
    display:none;
    position:fixed;
    inset:var(--header-height) 0 0;
    overflow-y:auto;
    padding:24px max(40px,calc((100vw - 650px)/2)) 44px;
    background:#fcfaf5;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    font:36px/1.2 var(--serif)
  }
  .navigation.is-open {
    display:flex
  }
  .navigation>a:not(.button) {
    padding:22px 0;
    border-bottom:1px solid #ddd7cb
  }
.navigation .button {
    margin:32px 0 0;
    align-self:flex-start;
    font:21px var(--serif);
    padding:14px 32px
  }
}

@media(max-width:700px) {
  .site-header {
    --header-height:106px
  }
  .brand img {
    width:140px
  }
  .menu-toggle {
    gap:10px
  }
}

@media(max-width:370px) {
  .site-header {
    gap:18px
  }
  .brand img {
    width:128px
  }
  .menu-toggle {
    gap:8px
  }
}

.navigation {
  gap:8px;
  font-size:17px
}

.navigation>a:not(.button) {
  border:1px solid #d9d4c7;
  border-radius:999px;
  background:#fffdf66b;
  padding:12px 19px;
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s,border-color .2s,color .2s
}

.navigation>a:not(.button):hover,.navigation>a:not(.button):focus-visible {
  border-color:#d35c40;
  background:#f4e8dc;
  color:#913c29
}

.navigation>a[aria-current=page]:not(.button) {
  background:#f2e0d2;
  border-color:#ce7359;
  color:#8e3826
}

.navigation .button {
  margin-left:8px;
  background:var(--rust);
  color:#fff9ed;
  border-color:var(--rust);
  font-size:17px
}

.navigation .button:hover {
  background:#aa3d24;
  border-color:#aa3d24
}

@media(max-width:1100px) and (min-width:901px) {
  .site-header {
    gap:24px
  }
  .navigation {
    font-size:16px;
    gap:6px
  }
  .navigation>a:not(.button) {
    padding-inline:14px
  }
  .navigation .button {
    padding-inline:20px;
    margin-left:4px
  }
}

@media(max-width:900px) {
  .navigation {
    gap:12px;
    font-size:30px
  }
  .navigation>a:not(.button) {
    justify-content:flex-start;
    border:1px solid #d9d4c7;
    border-radius:12px;
    padding:18px 22px;
    background:#fffdf675;
    min-height:72px
  }
  .navigation .button {
    margin:12px 0 0;
    align-self:stretch;
    border-radius:12px;
    min-height:60px;
    justify-content:center;
    font-size:23px
  }
  .navigation>a[aria-current=page]:not(.button) {
    border-left:3px solid var(--rust)
  }
}

@media(min-width:901px) {
  .navigation>a.navigation-home {
    display:none
  }
}

@media(max-width:900px) {
  .navigation {
    font-family:var(--sans);
    font-size:24px;
    line-height:1.3
  }
  .navigation .button {
    font-family:var(--sans);
    font-size:21px
  }
}