/* ==========================================================================
   Shared site header — self-contained.
   Loads its own fonts and scopes every rule and variable under .gh-masthead
   so it can be dropped into any page (including custom island/region pages
   with their own global styles) without collisions in either direction.
   position:relative + z-index keep it above pages' fixed/absolute chrome.
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,800&family=IBM+Plex+Mono:wght@400;500&display=swap");

.gh-masthead {
  --gh-ink: #102b3b;
  --gh-sand: #e8e2d4;
  --gh-reef: #0c7b72;
  --gh-display: "Bricolage Grotesque", system-ui, sans-serif;
  --gh-mono: "IBM Plex Mono", ui-monospace, monospace;

  position: relative;
  z-index: 60;
  margin: 0;
  background: var(--gh-ink);
  color: #fff;
  font-size: 16px;
  line-height: 1.4;
  text-align: left;
}
.gh-masthead-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0.85rem clamp(1rem, 4vw, 2.5rem);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 2rem;
}
.gh-masthead a { color: #dbe7e3; text-decoration: none; }
.gh-masthead a:focus-visible { outline: 3px solid var(--gh-reef); outline-offset: 2px; border-radius: 2px; }

.gh-brand { display: flex; align-items: baseline; gap: 0.6rem; }
.gh-masthead .gh-brand { color: #fff; }
.gh-brand-mark { font-family: var(--gh-mono); letter-spacing: 0.35em; color: var(--gh-sand); font-size: 0.8rem; }
.gh-brand-name { font-family: var(--gh-display); font-weight: 800; font-size: 1.2rem; letter-spacing: normal; text-transform: none; }

.gh-chain ol {
  display: flex; flex-wrap: wrap; gap: 0.1rem 1.4rem;
  margin: 0; padding: 0; list-style: none;
}
.gh-chain li { margin: 0; padding: 0; }
.gh-chain a {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--gh-display); font-weight: 600; font-size: 0.95rem;
  letter-spacing: normal; text-transform: none;
  padding: 0.35rem 0; opacity: 1;
}
.gh-chain-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; opacity: 0.55; flex: none;
}
.gh-chain-dot-ring { background: transparent; border: 2px solid currentColor; }
.gh-masthead .gh-chain a:hover { color: #fff; }
.gh-masthead .gh-chain a[aria-current="page"] { color: #fff; }
.gh-chain a[aria-current="page"] .gh-chain-dot { opacity: 1; background: var(--gh-reef); border-color: var(--gh-reef); }
.gh-chain-all { border-left: 1px solid rgba(255, 255, 255, 0.25); padding-left: 1.75rem; }