/* Keep the history navigation visually aligned with the Royal main preview. */
.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; letter-spacing: 0; }
.topbar .brand-logo { display: grid; place-items: center; width: 58px; height: 58px; flex: none; border: 0; border-radius: 50%; background: #fff; }
.topbar .brand img { width: 100%; height: 100%; padding: 6px; border-radius: 50%; object-fit: contain; }
.topbar .brand strong { display: block; font: 700 14px/20px Manrope, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.topbar .brand small { display: block; margin-top: 4px; color: #5b6071; font: 400 12px/16px Manrope, sans-serif; letter-spacing: .04em; }
.topbar-inner > nav a, .topbar .back, .history-menu nav a { font-family: Manrope, sans-serif; font-size: 14px; line-height: 20px; font-style: normal; }
.topbar .back { border: 1px solid #ded8cc; background: #fff; }
.hero h1, .story-heading h2, .plans h2, .archive-heading, .timeline-title { font-family: Prata, Georgia, serif !important; font-weight: 400 !important; font-style: normal !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; 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; }
  .topbar .brand img { padding: 4px; }
  .history-menu summary { width: 44px; height: 44px; }
}