/* Match the main Royal navigation and keep history typography consistent. */
.topbar {
  top: 8px;
  width: min(calc(100% - 32px), 1248px);
  min-height: 80px;
  margin: 8px auto 12px;
  border: 0;
  border-radius: 12px;
  background: rgba(251,248,240,.96);
  box-shadow: 0 4px 16px rgba(0,8,48,.04);
  color: #000830;
}
.topbar-inner { width: 100%; min-height: 80px; padding: 8px 16px; gap: 24px; }
.topbar .brand { gap: 12px; min-width: 0; color: #000830; }
.topbar .brand-logo { width: 58px; height: 58px; border: 0; border-radius: 50%; background: #fff; }
.topbar .brand img { width: 100%; height: 100%; padding: 4px; border-radius: 50%; object-fit: contain; }
.topbar .brand strong { font: 700 14px/20px Manrope,sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.topbar .brand small { color: #5b6071; font: 400 12px/16px Manrope,sans-serif; letter-spacing: .04em; }
.topbar-inner > nav a, .topbar .back, .history-menu nav a { font: 600 14px/20px Manrope,sans-serif; letter-spacing: 0; }
.topbar .back { border: 1px solid #ded8cc; background: #fff; border-radius: 8px; }
.topbar .back:hover { background: #f3eee3; }
.hero h1, .story-heading h2, .plans h2, .archive-heading, .timeline-title {
  font-family: Prata,Georgia,serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  text-wrap: balance;
}
.hero .lead, .story-heading > p, .story-note p, .timeline-detail p, .feature figcaption, .archive-grid figcaption {
  font-family: Manrope,sans-serif;
  font-style: normal;
  text-wrap: pretty;
}
@media (max-width: 800px) {
  .topbar { width: calc(100% - 16px); min-height: 64px; }
  .topbar-inner { min-height: 64px; padding: 6px 12px; gap: 12px; }
  .topbar .brand-logo { width: 48px; height: 48px; }
  .history-menu summary { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .topbar * { scroll-behavior: auto; } }
/* Match the compact mobile brand and unboxed menu control on the main page. */
.topbar .brand small { text-transform: uppercase; }
@media (max-width: 800px) {
  .topbar, .topbar-inner { min-height: 68px; }
  .history-menu summary { border: 0; background: transparent; }
}