/* Compact navigation beside the logo; main destinations stay exposed. */
html { scroll-padding-top: 110px; }
.site-header { background: #fcfaf6; }
.site-header .compact-header-inner {
  width: min(1440px, calc(100% - 48px));
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  min-height: 90px;
  padding-block: 15px;
}
.compact-header-inner .brand-logo { width: 180px; }
.compact-header-inner .brand-caption { font-size: 6.5px; letter-spacing: 1.2px; margin-top: 6px; }
.utility-actions > .utility-refill {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 5px 14px;
  border-radius: 4px;
  background: #842c3b;
  color: #fff;
  font-size: 13px;
}
.utility-refill:hover { background: #692330; }
#main-nav {
  display: grid;
  grid-template-columns: .8fr 1fr 1.65fr 1.05fr 1.1fr 1fr .8fr .6fr;
  gap: 5px;
  align-items: stretch;
  min-width: 0;
}
#main-nav > .primary-nav-link,
#main-nav > .nav-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  height: 100%;
  padding: 7px 8px;
  border: 1px solid #dfd3c6;
  border-radius: 5px;
  background: #f6f0e8;
  color: #46382f;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  transition: background .15s, border-color .15s;
}
#main-nav > .primary-nav-link:hover,
#main-nav > .nav-disclosure > summary:hover { background: #ede1d5; border-color: #b19584; }
#main-nav > .primary-nav-link[aria-current="page"],
#main-nav > .nav-disclosure[open] > summary { background: #842c3b; border-color: #842c3b; color: #fff; }
#main-nav > .nav-disclosure { min-width: 0; }
#main-nav > .nav-disclosure > summary { gap: 7px; }
#main-nav .nav-panel { position: absolute; left: auto; right: 0; top: calc(100% + 10px); width: 310px; padding: 12px; margin: 0; background: #fffdf8; box-shadow: 0 18px 40px #3f202318; }
#main-nav .nav-panel a { min-height: 48px; padding: 13px 15px; font-size: 17px; }
html.large-text { scroll-padding-top: 160px; }
html.large-text #main-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html.large-text #main-nav > .primary-nav-link,
html.large-text #main-nav > .nav-disclosure > summary,
html.large-text #main-nav .nav-panel a { font-size: 18px; }

@media (min-width: 1400px) {
  #main-nav > .primary-nav-link,
  #main-nav > .nav-disclosure > summary { font-size: 15px; }
}

@media (max-width: 980px) {
  html, html.large-text { scroll-padding-top: 24px; }
  .site-header { position: relative; }
  .site-header .compact-header-inner { grid-template-columns: 160px minmax(0, 1fr); gap: 18px; padding-block: 13px; }
  .compact-header-inner .brand-logo { width: 160px; }
  #main-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
}

@media (max-width: 720px) {
  .site-header .compact-header-inner { grid-template-columns: 140px minmax(0, 1fr); gap: 14px; width: calc(100% - 32px); }
  .compact-header-inner .brand-logo { width: 140px; }
  .compact-header-inner .brand-caption { letter-spacing: .7px; font-size: 6px; }
  html.large-text #main-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .site-header .compact-header-inner { grid-template-columns: 1fr; gap: 13px; padding-block: 14px; }
  .compact-header-inner .brand { justify-self: center; }
  .compact-header-inner .brand-logo { width: 180px; }
  .compact-header-inner .brand-caption { font-size: 6.5px; letter-spacing: 1.2px; }
  .utility-actions > .utility-refill { display: none; }
  #main-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  #main-nav > .primary-nav-link,
  #main-nav > .nav-disclosure > summary { font-size: 15px; padding: 8px; }
  #main-nav .nav-panel { width: min(310px, calc(100vw - 32px)); }
}

@media (prefers-reduced-motion: reduce) {
  #main-nav > .primary-nav-link,
  #main-nav > .nav-disclosure > summary { transition: none; }
}