:root {
  --breadcrumb-pad-x: 18px;
  --breadcrumb-pad-top: 20px;
  --mobile-font-tools-height: 52px;
}

.page-topline,
.breadcrumb-bar {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: var(--breadcrumb-pad-top) var(--breadcrumb-pad-x) 0;
  padding-right: calc(var(--breadcrumb-pad-x) + var(--rail-gutter, 0px));
  box-sizing: border-box;
}

.page-topline .breadcrumb,
.breadcrumb-bar .breadcrumb {
  margin: 0;
}

.breadcrumb {
  font-size: 13px;
  color: rgba(44, 44, 44, 0.55);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  text-align: left;
  margin: 0 0 16px;
}

.breadcrumb a {
  color: var(--accent-gold, #b8860b);
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.breadcrumb a:hover {
  color: var(--primary-jade, #1c4a3c);
  transform: translateX(2px);
}

.breadcrumb .sep {
  opacity: 0.45;
  user-select: none;
}

.hub-topline-meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 18px;
}

.hub-topline-meta .page-mark {
  font-size: 12px;
  color: var(--ink-40, rgba(44, 44, 44, 0.4));
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

@media (max-width: 860px) {
  .page-topline,
  .breadcrumb-bar,
  main > .page-topline:first-child {
    padding-top: calc(var(--breadcrumb-pad-top) + var(--mobile-font-tools-height));
    padding-right: calc(var(--breadcrumb-pad-x) + 52px);
  }

  .breadcrumb {
    margin-bottom: 12px;
  }
}

.page-topline + .hero-section,
.page-topline + .event-detail-inner > .hero-section:first-child {
  padding-top: 40px;
}

.page-topline + .hero-section .hero-title,
.event-detail-page .hero-section .hero-title,
.teacher-detail-page .hero-section .hero-title {
  padding-top: 60px;
}

.page-topline + .teachers-inner {
  padding-top: 40px;
}

.page-topline + .teachers-inner > :is(h1, .section-title):first-child {
  padding-top: 60px;
  margin-top: 0;
}

.page-topline + .treasury-hero {
  padding-top: 40px;
}

.page-topline + .treasury-hero .treasury-title {
  padding-top: 60px;
  margin-top: 0;
}

.page-topline + .relic-container {
  padding-top: 40px;
}

.page-topline + .relic-container .relic-title {
  padding-top: 60px;
}

.page-topline + .events-list-inner {
  padding-top: 40px;
}

.page-topline + .events-list-inner .hero h1 {
  padding-top: 60px;
  margin-top: 0;
}

@media (max-width: 860px) {
  .page-topline + .hero-section .hero-title,
  .event-detail-page .hero-section .hero-title,
  .teacher-detail-page .hero-section .hero-title,
  .page-topline + .teachers-inner > :is(h1, .section-title):first-child,
  .page-topline + .treasury-hero .treasury-title,
  .page-topline + .relic-container .relic-title,
  .page-topline + .events-list-inner .hero h1 {
    padding-top: 20px;
  }
}