/* Navigation uses the same dark metal, aged gold and ruby as the site frames. */
html { scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }
}
.header-utilities { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; order: 3; }
.header-utilities .header-actions { margin-left: 0; }
@media (min-width: 1001px) {
  .site-header { display: grid; grid-template-columns: minmax(0,1fr) 475px minmax(0,1fr); }
  .site-header .brand { grid-column: 1; grid-row: 1; width: 100%; max-width: 330px; margin: 0; justify-self: start; }
  .site-header .desktop-nav { grid-column: 2; grid-row: 1; width: 475px; justify-self: center; }
  .site-header .header-utilities { grid-column: 3; grid-row: 1; justify-self: end; }
}
.desktop-nav {
  position: relative;
  flex: 0 0 475px;
  height: 44px;
  padding: 3px;
  gap: 2px;
  border: 1px solid #8c7048;
  border-radius: 1px;
  background: linear-gradient(180deg, #25231c 0%, #111513 15%, #080e10 52%, #141511 100%);
  box-shadow: inset 0 0 0 1px #080b0b, inset 0 1px 0 2px #c4a16a22, 0 2px 7px #0009;
}
.desktop-nav::before {
  content: '';
  position: absolute;
  inset: -3px;
  pointer-events: none;
  background:
    linear-gradient(#d2b27b, #d2b27b) left top / 9px 1px no-repeat,
    linear-gradient(#d2b27b, #d2b27b) left top / 1px 9px no-repeat,
    linear-gradient(#d2b27b, #d2b27b) right top / 9px 1px no-repeat,
    linear-gradient(#d2b27b, #d2b27b) right top / 1px 9px no-repeat,
    linear-gradient(#957343, #957343) left bottom / 9px 1px no-repeat,
    linear-gradient(#957343, #957343) left bottom / 1px 9px no-repeat,
    linear-gradient(#957343, #957343) right bottom / 9px 1px no-repeat,
    linear-gradient(#957343, #957343) right bottom / 1px 9px no-repeat;
}
.desktop-nav a {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 1px;
  color: #cbbb9e;
  font-family: 'Cormorant SC', Georgia, serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .025em;
  text-shadow: 0 1px 2px #000;
  transition: color .18s, border-color .18s, background-color .18s, box-shadow .18s;
}
.desktop-nav a + a::before {
  content: '';
  position: absolute;
  left: -3px;
  top: 25%;
  height: 50%;
  width: 1px;
  background: linear-gradient(transparent, #ad875748, transparent);
  pointer-events: none;
}
.desktop-nav a:hover,
.desktop-nav a:focus-visible {
  color: #fff0cf;
  border-color: #9b784d;
  background: linear-gradient(#77613b29, #49372526);
  box-shadow: inset 0 0 8px #c7a46b12;
}
.desktop-nav a.active {
  color: #fff0d4;
  border-color: #ca9265;
  background: linear-gradient(180deg, #a32b2f 0%, #6c111c 35%, #400c13 78%, #66151c 100%);
  box-shadow: inset 0 1px #ffdbac45, inset 0 0 10px #ee5a4936, 0 0 8px #a51d272f;
}
.desktop-nav a.active::after {
  content: '';
  display: block;
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 2px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #f3d197, transparent);
  box-shadow: 0 1px 5px #db7b4366;
  pointer-events: none;
}
.desktop-nav a:focus-visible,
.mobile-drawer a:focus-visible,
.mobile-bottom a:focus-visible,
.mobile-menu-toggle:focus-visible {
  outline: 2px solid #f1cc8a;
  outline-offset: 3px;
}
.mobile-drawer {
  padding: 12px;
  gap: 8px;
  border: 1px solid #96784f;
  border-top: 0;
  border-radius: 0;
  background: linear-gradient(125deg, #191c17, #070e10 60%);
  box-shadow: inset 0 0 0 3px #c59d5b0d, 0 7px 14px #0008;
}
.mobile-drawer a {
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid #786344;
  border-radius: 1px;
  background: linear-gradient(#36342640, #0a1113);
  color: #dac8a8;
  font-family: 'Cormorant SC', Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
}
.mobile-drawer a > .icon { color: #c9a66c; }
.mobile-drawer a:hover { background: linear-gradient(#40331e, #181912); border-color: #c7a16a; color: #fff0cf; }
.mobile-drawer a[aria-current=page],
.mobile-bottom a.active {
  color: #fff0d4;
  border-color: #c59562;
  background: linear-gradient(#90242b, #430e17 80%);
  box-shadow: inset 0 1px #ffdeb63d, inset 0 0 9px #e5483530;
}
.mobile-drawer a[aria-current=page] > .icon { color: #f1ce91; }
.mobile-bottom { border-top-color: #b18e59; background: linear-gradient(#22231b, #080e10 25%); }
.mobile-bottom a { color: #c9ba9f; border-radius: 1px; }
.site-header .mobile-menu-toggle { color: #d7b77c; }
.site-header .mobile-menu-toggle[aria-expanded=true] { border-color: #b88b54; background: #59201f; color: #f9dfad; }
@media (min-width: 1001px) and (max-width: 1200px) {
  .site-header { grid-template-columns: minmax(0,1fr) 445px minmax(0,1fr); }
  .site-header .desktop-nav { width: 445px; }
  .site-header .brand .clan-wordmark { font-size: 23px; }
  .desktop-nav { flex-basis: 445px; }
  .desktop-nav a { padding-inline: 8px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .desktop-nav a { transition: none; }
}