/* Talking Water — sitewide promo bar for the next earth-building workshop.
   Pinned under the nav inside <header>. Markup lives in each page's header,
   directly after the closing </div> of .nav:

     <div class="promo-bar"> … </div>

   TEMPORARY: this whole bar comes down after the October 23–25, 2026 workshop.
   To retire it, delete the .promo-bar block from each page's header and drop
   the <link> to this file. (The scroll-margin rule at the bottom should stay
   only if the header keeps its current height.) */

.promo-bar{background:var(--terra);color:#fff;border-top:1px solid rgba(255,255,255,.16)}
.promo-in{max-width:1440px;margin:0 auto;padding:9px 24px;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.promo-flag{display:inline-flex;align-items:center;gap:8px;font-family:"Urbanist";font-weight:800;text-transform:uppercase;letter-spacing:.1em;font-size:.68rem}
.promo-dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:promoPulse 2.4s ease-out infinite}
@keyframes promoPulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}70%{box-shadow:0 0 0 9px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.promo-txt{font-family:"Urbanist";font-weight:700;font-size:.93rem}
.promo-txt b{font-weight:800}
.promo-go{font-family:"Urbanist";font-weight:800;text-transform:uppercase;letter-spacing:.07em;font-size:.72rem;background:#fff;color:var(--terra-ink);padding:8px 16px;border-radius:999px;white-space:nowrap;transition:.18s}
.promo-go:hover{background:var(--cream)}
.promo-short{display:none}

/* the mobile drawer is a full-screen overlay — get the bar out of its way */
@media(max-width:1100px){header.mnav-open .promo-bar{display:none}}

@media(max-width:760px){
  .promo-in{gap:10px;padding:8px 14px}
  .promo-flag{display:none}
  .promo-long{display:none}
  .promo-short{display:inline}
  .promo-txt{font-size:.84rem}
  .promo-go{font-size:.67rem;padding:7px 13px}
}
@media(prefers-reduced-motion:reduce){.promo-dot{animation:none}}

/* The bar makes the fixed header ~190px tall, so in-page anchors need to
   clear it or they land underneath. Covers every anchor target on the site. */
section[id],#contact{scroll-margin-top:200px}

/* Inner-page heroes were padded 168px to clear a 136px header. The bar adds
   ~54px on top of that, so bump the padding or the h1 hides behind the bar.
   (The homepage hero centres its own panel and needs no adjustment.) */
.phero .inner{padding-top:222px}