/* ============================================================
   peak-page.css — a handful of additions on top of the shared
   stylesheet, only needed on individual peak pages (breadcrumbs,
   the related-peaks list, and mapping <h1> onto the same visual
   treatment the old overlay used for its <h2> title).
   ============================================================ */

.overlay-body h1{
  font-family:'Big Shoulders Display', sans-serif;
  text-transform:uppercase;
  font-weight:900;
  font-size: clamp(2.4rem, 7vw, 4.4rem);
  line-height:0.9;
  margin:0 0 18px;
}

.page-top{
  position: static;
}

.sticky-page-header{
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg);
}
.sticky-page-header .overlay-top{
  position: static;
}
.sticky-page-header .breadcrumbs{
  background: var(--bg);
  padding-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  margin-top: 0;
}

.breadcrumbs{
  max-width: 900px;
  margin: 18px auto 0;
  padding: 0 6vw;
  font-family:'JetBrains Mono', monospace;
  font-size:0.76rem;
  letter-spacing:0.04em;
  color: var(--ink-dim);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: 0 6px;
}
.breadcrumbs a{ color: var(--ink-dim); text-decoration:none; }
.breadcrumbs a:hover{ color: var(--amber); }
.breadcrumbs .bc-sep{ opacity:0.5; }
.breadcrumbs [aria-current="page"]{ color: var(--ink); }

.page-hero{
  margin-top: 20px;
}

.related-peaks{
  margin-top: 10px;
}
.related-peaks ul{
  list-style:none;
  margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:10px;
}
.related-peaks li a{
  display:inline-block;
  font-family:'JetBrains Mono', monospace;
  font-size:0.82rem;
  color: var(--ink);
  text-decoration:none;
  border:1px solid var(--border);
  border-radius:6px;
  padding:8px 14px;
}
.related-peaks li a:hover{ border-color: var(--amber); color: var(--amber); }