/* ─────────────────────────────────────────
   SECTION — PAGE HEADER
   The top of every inner page (weekend.html, travel.html…): a clay band
   with the page name set large and centred, and pill links to the
   sections of the page underneath it. The nav sits on top in its cream
   (unscrolled) state.
───────────────────────────────────────── */

.page-header {
  background: var(--inverse);
  color: var(--on-inverse);
}

/* shorter than a full screen */
.page-header.section {
  min-height: 0;
  padding: clamp(140px, 22svh, 220px) 0 clamp(56px, 9svh, 96px);
  justify-content: center;
}

.page-header-texts {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.page-header-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.inverted {
  color: var(--on-inverse-muted);
}

.page-title {
  color: var(--on-inverse);
}



/* ── Section links: chips in cream on clay (components/chip.css) ── */
.page-header-links {
  list-style: none;
  margin: clamp(32px, 5svh, 48px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* the links themselves are chips (components/chip.css, .chip--inverse) */


/* responsive — mobile */
@media (max-width: 640px) {
  .page-header.section {
    padding: 120px 0 48px;
  }

  .page-header-links {
    gap: 6px;
  }

}