:root {
  --ink: #302722;
  --muted: #706a60;
  --green: #790d0b;
  --green-dark: #4b0908;
  --mint: #f1ead9;
  --cream: #fbf8f1;
  --gold: #d4af62;
  --line: #e8dfce;
}

body,
body h1,
body h2,
body h3,
body h4,
body p,
body a,
body span,
body strong,
body small,
body em,
body label,
body button,
body input,
body textarea,
body select,
body nav,
body li,
body summary,
body figcaption,
body dt,
body dd,
body blockquote {
  font-family: Tahoma, Arial, sans-serif !important;
}

.topbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 0 24px;
  height: auto;
  min-height: 116px;
  padding-top: 8px;
  padding-bottom: 0;
  background: #790d0b;
  border-bottom: 2px solid #d4af62;
  color: #fff8e8;
}

.topbar > .brand {
  grid-column: 1 / -1;
  grid-row: 1;
}

.topbar nav {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-content: center;
  gap: clamp(12px, 1.55vw, 22px);
  padding: 0 0 8px;
  font-size: 12px;
}

.topbar nav > details > summary {
  color: #fff8e8;
  cursor: pointer;
  list-style: none;
}

.topbar nav > details > summary::-webkit-details-marker {
  display: none;
}

.topbar nav > details > summary::after {
  margin-left: 5px;
  color: #d4af62;
  content: '⌄';
}

.topic-menu-panel {
  z-index: 10;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  width: min(620px, 82vw);
  max-height: min(70vh, 560px);
  overflow-y: auto;
}

.topic-menu-group {
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 8px;
  border: 1px solid #eee5d5;
  border-radius: 7px;
}

.topic-menu-group h2 {
  margin: 3px 8px 5px;
  color: #790d0b;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.topic-menu-group a {
  color: #4b0908;
}

.topic-menu-group a:hover,
.topic-menu-group a:focus-visible {
  background: #f8f1e4;
  color: #790d0b;
}

.topbar nav > a:not(.button) {
  color: #fff8e8;
}

.topbar nav > a:not(.button):hover,
.text-link:hover {
  color: #f1dfb4;
}

.brand strong {
  color: #f4dfaf;
}

.brand small {
  color: #f3e9d9;
}

.brand-mark {
  border: 2px solid #f4dfaf;
  background: #d4af62;
  color: #4b0908;
  font-family: Tahoma, Arial, sans-serif !important;
  box-shadow: inset 0 0 0 3px #d4af62, inset 0 0 0 4px #790d0b;
}

.button-primary {
  background: #d4af62;
  color: #4b0908;
  box-shadow: 0 7px 20px #4b09081f;
}

.button-primary:hover {
  background: #e5c77e;
}

.button-outline {
  color: #790d0b;
  border-color: #d4af62;
}

.page-hero h1,
.content-card h2 {
  color: #790d0b;
}

.page-hero p,
.content-card p {
  color: #625a51;
}

.content-card > a,
.text-link {
  color: #790d0b;
}

.source-citation {
  display: block;
  margin-top: 5px;
  color: #790d0b;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}

.source-gallery-card figcaption .source-citation {
  display: inline;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.record-type,
.eyebrow {
  color: #8d642e;
}

.footer {
  background: #4b0908;
  border-top: 2px solid #d4af62;
}

.brand-footer .brand-mark {
  background: #d4af62;
  box-shadow: inset 0 0 0 3px #d4af62, inset 0 0 0 4px #790d0b;
}

@media (max-width: 1100px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto;
    min-height: 68px;
    padding-top: 8px;
    padding-bottom: 8px;
    background: #790d0b;
  }

  .topbar nav {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
    gap: 8px;
    padding: 0;
  }

  .topbar nav .topic-menu,
  .topbar nav > a:not(.button) {
    display: none;
  }

  .topbar nav .mobile-menu {
    position: relative;
    display: block;
  }

  .mobile-menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 10;
    display: grid;
    gap: 2px;
    width: min(360px, 88vw);
    max-height: min(70vh, 540px);
    overflow-y: auto;
    padding: 8px;
    border: 1px solid #e4e8df;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 12px 28px #20372f1f;
  }

  .topbar nav .mobile-menu .mobile-menu-panel a {
    display: block;
    padding: 11px 12px;
    border-radius: 6px;
    color: #4b0908;
    font-size: 13px;
  }

  .topbar nav .mobile-menu .mobile-menu-panel a:hover {
    background: #f8f1e4;
  }

  .mobile-menu-group {
    border-top: 1px solid #e8dfce;
  }

  .mobile-menu-group > summary {
    padding: 11px 12px;
    color: #4b0908;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    list-style: none;
  }

  .mobile-menu-group > summary::-webkit-details-marker {
    display: none;
  }

  .mobile-menu-group > summary::after {
    float: right;
    color: #8d642e;
    content: '＋';
  }

  .mobile-menu-group[open] > summary::after {
    content: '−';
  }

  .topbar nav .mobile-menu .mobile-menu-group a {
    padding-left: 24px;
  }

  .topic-menu-panel {
    grid-template-columns: 1fr;
    width: min(360px, 88vw);
  }
}

@media (max-width: 700px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto;
    min-height: 68px;
    padding-top: 8px;
    padding-bottom: 8px;
    background: #790d0b;
  }

  .topbar nav {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
    gap: 8px;
    padding: 0;
  }

  .topbar nav .topic-menu,
  .topbar nav > a:not(.button) {
    display: none;
  }

  .topbar nav .mobile-menu summary {
    border-color: #e8d293;
    background: #790d0b;
    color: #f1dfb4;
  }

  .topbar nav > a.button {
    display: inline-flex;
  }

  .topbar .brand strong {
    font-size: 11px;
  }

  .topbar .brand small {
    font-size: 9px;
  }
}