/* Keep the history navigation on the same grid and type scale as Royal's main page. */
.topbar {
  width: min(calc(100% - 32px), 1248px);
  margin: 8px auto 12px;
  min-height: 80px;
  border: 1px solid #dfd8ca;
  border-radius: 12px;
  background: rgba(251, 248, 240, .96);
  box-shadow: 0 8px 24px rgba(0, 8, 48, .07);
}
.topbar-inner { min-height: 78px; padding: 8px 16px; gap: 24px; }
.topbar .brand { gap: 12px; font-weight: 400; }
.topbar .brand-logo { width: 58px; height: 58px; border: 1px solid #e5ddd0; }
.topbar .brand img { width: 100%; height: 100%; padding: 4px; object-fit: contain; }
.topbar .brand strong { font: 700 14px/20px Manrope, sans-serif; }
.topbar .brand small { font: 400 12px/16px Manrope, sans-serif; letter-spacing: .04em; }
.topbar-inner > nav a { font: 500 12px/16px Manrope, sans-serif; }
.topbar .back { font: 600 14px/20px Manrope, sans-serif; }
.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 h1 { font-size: 60px; line-height: 60px; }
.story-heading h2, .plans h2 { font-size: 48px; line-height: 56px; }
.lead, .story-heading > p, .story-note p, .plans > p, .timeline-detail p {
  font-family: Manrope, sans-serif;
  text-wrap: pretty;
}
@media (max-width: 800px) {
  .topbar { width: calc(100% - 16px); min-height: 68px; margin: 8px auto 12px; }
  .topbar-inner { min-height: 62px; padding: 6px 12px; }
  .topbar .brand-logo { width: 48px; height: 48px; }
  .hero h1 { font-size: 36px; line-height: 40px; }
  .story-heading h2, .plans h2 { font-size: 30px; line-height: 36px; }
}