/* Bear Park — site footer: sticky reveal.
   The page (wrapped in main.bp-page, z-index 1) scrolls up and away to reveal a
   fixed, full-bleed photograph beneath — garden, boardwalk, tamariki mid-play.
   Over it: the giant wordmark exhale and one quiet meta bar. Nothing else —
   the menu sheet auto-opens at the bottom (site/nav.js), so the footer carries
   no page links. Reveal mechanic only; all styling is ours. */

/* no sideways wiggle from overscan/bleed elements (clip, not hidden — creates no
   scroll container, so pins and drag interactions are unaffected) */
html, body { overflow-x: clip; }

/* the page rides above the footer */
.bp-page { position: relative; z-index: 1; background: #f2eee3; }

/* transparent window at the end of the document — the reveal distance */
.bp-footer-spacer { height: min(78vh, 760px); }

.bp-footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 0;
  height: min(78vh, 760px);
  background: #20271f;
  overflow: hidden;
  color: #f2eee3;
}
.bp-footer__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 62%;
  display: block;
}
/* legibility scrim only — the image itself stays at full strength */
.bp-footer::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(26, 32, 24, 0) 38%, rgba(26, 32, 24, .62) 70%, rgba(26, 32, 24, .9) 100%);
}

/* the wordmark exhale, full width to the gutters */
.bp-footer__giant {
  position: absolute; z-index: 2;
  left: clamp(15px, 2.625vw, 48px); right: clamp(15px, 2.625vw, 48px);
  bottom: clamp(58px, 9vh, 96px);
  opacity: .96;
}
.bp-footer__giant img { width: 100%; height: auto; display: block; }

/* one quiet bar. The pill nav floats centre-bottom, so content sits in the corners */
.bp-footer__bar {
  position: absolute; z-index: 2;
  left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 0 clamp(15px, 2.625vw, 48px) 20px;
  font-family: "Neue Haas Grotesk Display Pro", "Helvetica Neue", sans-serif;
  font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
}
.bp-footer__bar a { color: inherit; text-decoration: none; opacity: .9; transition: opacity .2s; }
.bp-footer__bar a:hover { opacity: 1; }
.bp-footer__copy { opacity: .78; }
.bp-footer__links { display: flex; gap: clamp(14px, 2vw, 26px); }

@media (max-width: 700px) {
  .bp-footer-spacer, .bp-footer { height: min(64vh, 560px); }
  /* the bar wraps to two centred rows down here; the wordmark sits clear above it */
  .bp-footer__giant { bottom: 148px; }
  .bp-footer__bar { padding-bottom: 84px; justify-content: center; flex-wrap: wrap; row-gap: 8px; }
}