/* =========================================================
   THREE BIRD BAMS
   Brand palette:  green #cce3a9 · light blue #a7d5dc · navy #213455
   Primary mark:   BB monogram      Secondary mark: three birds
   ========================================================= */

:root{
  --green:#cce3a9;
  --blue:#a7d5dc;
  --navy:#213455;

  --green-deep:#a8c97f;
  --blue-deep:#7fbcc9;
  --blue-pale:#e9f4f6;
  --green-pale:#f3f8ea;

  --cream:#fbf9f4;
  --sand:#f3efe6;
  --line:rgba(33,52,85,.14);
  --ink:#213455;
  --ink-soft:rgba(33,52,85,.74);
  --ink-faint:rgba(33,52,85,.52);

  --maxw:1180px;
  --gut:clamp(1.25rem,5vw,3.5rem);

  --script:'Pinyon Script',cursive;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Montserrat','Helvetica Neue',Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--serif);
  font-size:clamp(1.02rem,.35vw + .95rem,1.16rem);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}
a{color:inherit}

/* ---------- type ---------- */

h1,h2,h3,h4{font-family:var(--serif);font-weight:300;line-height:1.15;margin:0;letter-spacing:.02em}

.script{font-family:var(--script);font-weight:400;line-height:1.1}

.eyebrow{
  font-family:var(--sans);font-size:.66rem;font-weight:500;
  letter-spacing:.32em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 .8rem;
}

.lede{
  font-size:clamp(1.16rem,.6vw + 1.02rem,1.42rem);
  font-weight:300;line-height:1.72;color:var(--ink-soft);
  /* needs to clear the line spacing, or paragraph breaks stop reading as breaks */
  margin:0 0 1.5rem;
}

.diamond{display:flex;align-items:center;justify-content:center;gap:.9rem;margin:1.15rem 0}
.diamond--left{justify-content:flex-start}
.diamond::before,.diamond::after{
  content:"";height:1px;width:min(84px,14vw);
  background:linear-gradient(90deg,transparent,var(--blue-deep));
}
.diamond--left::before{display:none}
.diamond::after{background:linear-gradient(90deg,var(--blue-deep),transparent)}
.diamond i{width:7px;height:7px;transform:rotate(45deg);background:var(--green-deep);display:block}

/* ---------- brand marks ---------- */

.mark{height:auto;width:auto}
.mark--birds{display:block;margin-inline:auto}

/* ---------- layout ---------- */

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.wrap--narrow{max-width:820px}

.section{padding:clamp(1.75rem,3.3vw,2.65rem) 0}
.section--tight{padding:clamp(1.2rem,2.2vw,1.7rem) 0}
.section--sand{background:var(--sand)}
.section--blue{background:var(--blue-pale)}
.section--green{background:var(--green-pale)}
.section--navy{background:var(--navy);color:#fff}
.section--navy .eyebrow{color:rgba(255,255,255,.6)}
.section--navy .lede{color:rgba(255,255,255,.84)}

.center{text-align:center}

/* ---------- buttons ---------- */

.btn{
  display:inline-block;font-family:var(--sans);
  font-size:.68rem;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;text-decoration:none;
  padding:1.05rem 2.3rem;border:1px solid var(--navy);
  background:var(--navy);color:var(--cream);cursor:pointer;
  transition:background .28s ease,color .28s ease,border-color .28s ease;
}
.btn:hover{background:transparent;color:var(--navy)}
.btn--ghost{background:transparent;color:var(--navy)}
.btn--ghost:hover{background:var(--navy);color:var(--cream)}
.btn--light{background:transparent;border-color:rgba(255,255,255,.75);color:#fff}
.btn--light:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn--solid-light{background:#fff;border-color:#fff;color:var(--navy)}
.btn--solid-light:hover{background:transparent;color:#fff}

.btn-row{display:flex;flex-wrap:wrap;gap:.9rem}
.btn-row--center{justify-content:center}

.textlink{
  display:inline-block;font-family:var(--sans);
  font-size:.68rem;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;text-decoration:none;
  border-bottom:1px solid var(--blue-deep);padding-bottom:.4rem;
  transition:border-color .25s ease;
}
.textlink:hover{border-color:var(--navy)}

/* ---------- nav ---------- */

.nav{
  position:sticky;top:0;z-index:60;
  background:var(--cream);border-bottom:1px solid var(--line);
  transition:background .3s ease,border-color .3s ease,color .3s ease;
}
.nav__inner{
  max-width:var(--maxw);margin-inline:auto;padding:0 var(--gut);
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;min-height:88px;
}
.nav__brand{display:flex;align-items:center;gap:.9rem;text-decoration:none;color:inherit}
.nav__brand .mark{height:44px}
.nav__brand-text{
  font-family:var(--serif);font-weight:300;font-size:.8rem;
  letter-spacing:.28em;text-transform:uppercase;line-height:1.5;white-space:nowrap;
}
.nav__links{display:flex;align-items:center;gap:clamp(1.4rem,3vw,2.6rem);list-style:none;margin:0;padding:0}
.nav__links a{
  font-family:var(--sans);font-size:.68rem;letter-spacing:.22em;
  text-transform:uppercase;text-decoration:none;
  padding-bottom:.35rem;border-bottom:1px solid transparent;
  transition:border-color .25s ease;white-space:nowrap;
}
.nav__links a:hover{border-color:currentColor}
.nav__links a[aria-current="page"]{border-color:var(--blue-deep)}

.nav__toggle{display:none;background:none;border:0;padding:.5rem;cursor:pointer;color:inherit}
.nav__toggle span{display:block;width:24px;height:1px;background:currentColor;margin:6px 0;transition:transform .3s ease,opacity .3s ease}
.nav.is-open .nav__toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.is-open .nav__toggle span:nth-child(2){opacity:0}
.nav.is-open .nav__toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* which brand mark shows — navy by default, white when laid over the hero.
   Keep these four rules in this order: they rely on source order + specificity. */
.nav .nav__brand .mark--navy{display:block}
.nav .nav__brand .mark--white{display:none}
.nav--over .nav__brand .mark--navy{display:none}
.nav--over .nav__brand .mark--white{display:block}
.nav--over.is-stuck .nav__brand .mark--navy{display:block}
.nav--over.is-stuck .nav__brand .mark--white{display:none}

/* transparent nav laid over the hero */
.nav--over{position:absolute;top:0;left:0;right:0;background:transparent;border-bottom-color:rgba(255,255,255,.22);color:#fff}
.nav--over.is-stuck{
  position:fixed;background:var(--cream);color:var(--navy);
  border-bottom-color:var(--line);animation:navDrop .4s ease;
}
@keyframes navDrop{from{transform:translateY(-100%)}to{transform:translateY(0)}}

@media (max-width:900px){
  .nav__toggle{display:block}
  .nav__links{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--cream);color:var(--navy);
    border-bottom:1px solid var(--line);padding:0 var(--gut);
    max-height:0;overflow:hidden;
    transition:max-height .35s ease,padding .35s ease;
  }
  .nav.is-open .nav__links{max-height:420px;padding:.5rem var(--gut) 1.6rem}
  .nav__links li{width:100%;border-top:1px solid var(--line)}
  .nav__links li:first-child{border-top:0}
  .nav__links a{display:block;padding:1.05rem 0;border-bottom:0;font-size:.72rem}
}

/* ---------- hero ---------- */

.hero{
  position:relative;min-height:clamp(430px,62vh,600px);
  display:flex;align-items:center;justify-content:center;
  text-align:center;color:#fff;overflow:hidden;
}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(33,52,85,.60) 0%,rgba(33,52,85,.42) 45%,rgba(33,52,85,.74) 100%);
}
.hero__inner{position:relative;z-index:2;padding:6.5rem var(--gut) 3.5rem;max-width:900px}
.hero__inner .mark{height:clamp(64px,9vw,88px);margin:0 auto 1.3rem}
.hero__script{font-family:var(--script);font-size:clamp(2rem,5.4vw,3.3rem);margin:0 0 .35rem}
.hero__title{
  font-size:clamp(2.2rem,6.6vw,4.4rem);
  text-transform:uppercase;letter-spacing:.18em;font-weight:300;margin:0;
}
.hero__tag{
  font-family:var(--sans);font-size:.68rem;letter-spacing:.42em;
  text-transform:uppercase;margin:1.5rem 0 2rem;color:rgba(255,255,255,.9);
}

/* ---------- interior page header ---------- */

.pagehead{
  background:var(--blue-pale);text-align:center;
  padding:clamp(2rem,4vw,3rem) 0 clamp(1.5rem,3vw,2.25rem);
  border-bottom:1px solid var(--line);
}
.pagehead .mark{height:50px;margin:0 auto .8rem}
.pagehead h1{font-size:clamp(2rem,5vw,3.2rem);text-transform:uppercase;letter-spacing:.17em}
.pagehead .script{font-size:clamp(1.9rem,4.5vw,2.9rem);color:var(--blue-deep);display:block;margin-bottom:.1rem}
.pagehead p{max-width:640px;margin:.85rem auto 0;color:var(--ink-soft);font-weight:300}

/* ---------- offerings ---------- */

.offers{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(.8rem,2vw,1.35rem);margin-top:1.6rem;
}
.offer{
  background:#fff;border:1px solid var(--line);
  padding:1.6rem 1.4rem;text-align:center;
  transition:transform .3s ease,box-shadow .3s ease;
}
.offer:hover{transform:translateY(-5px);box-shadow:0 18px 40px -26px rgba(33,52,85,.4)}
.offer__mark{
  display:block;width:7px;height:7px;transform:rotate(45deg);
  background:var(--green-deep);margin:0 auto .85rem;
}
.offer h3{font-family:var(--sans);font-size:.78rem;font-weight:500;text-transform:uppercase;letter-spacing:.2em;margin-bottom:.7rem}
.offer p{margin:0;font-size:.96rem;color:var(--ink-soft);font-weight:300;line-height:1.65}

/* title-only cards — no body copy, so they sit tighter */
.offers--titles .offer{padding:1.6rem 1.2rem;display:flex;flex-direction:column;justify-content:center;min-height:118px}
.offers--titles .offer h3{margin:0;font-size:.74rem;line-height:1.7}

/* ---------- split feature ---------- */

.split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(2rem,6vw,5rem)}
.split--flip .split__media{order:2}
.split__media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.split__body h2{font-size:clamp(1.85rem,3.7vw,2.8rem)}
.split__body .script{font-size:clamp(1.9rem,4vw,2.8rem);color:var(--green-deep);display:block;margin-bottom:.2rem}
@media (max-width:840px){
  .split{grid-template-columns:1fr}
  .split--flip .split__media{order:0}
}

/* ---------- event tiles ---------- */

/* auto-fit (not auto-fill) so two events share the row evenly instead of
   leaving an empty third column; the max-width stops a lone event from
   stretching the full page. */
.event-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:clamp(1.4rem,3vw,2.2rem);
  justify-items:center;
}
.event{width:100%;max-width:520px}

.event{
  display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);color:inherit;
  overflow:hidden;transition:box-shadow .3s ease;
}
.event:hover{box-shadow:0 24px 50px -30px rgba(33,52,85,.45)}
.event__media{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--blue-pale)}
/* object-position keeps tall phone photos from cropping to the middle of the table */
.event__media img{width:100%;height:100%;object-fit:cover;object-position:center 38%;transition:transform .6s ease}
.event:hover .event__media img{transform:scale(1.05)}
.event__flag{
  position:absolute;top:1rem;left:1rem;background:var(--green);color:var(--navy);
  font-family:var(--sans);font-size:.56rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;padding:.5rem .95rem;
}
.event__body{padding:1.5rem 1.6rem 1.7rem;display:flex;flex-direction:column;flex:1}
.event__date{
  font-family:var(--sans);font-size:.62rem;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:.85rem;
}
.event__title{font-size:1.55rem;font-weight:300;line-height:1.25;margin-bottom:.5rem}
.event__meta{font-family:var(--sans);font-size:.72rem;color:var(--ink-soft);margin:0 0 .85rem;line-height:1.75}
.event__meta em{font-style:normal;color:var(--ink-faint);font-size:.94em}
.event__blurb{font-size:.97rem;font-weight:300;color:var(--ink-soft);margin:0 0 1.1rem}
/* eligibility note — e.g. "this one is open play only" */
.event__note{
  font-size:.9rem;font-weight:400;color:var(--navy);
  margin:0 0 1.1rem;padding:.65rem .9rem;
  background:var(--green-pale);border-left:2px solid var(--green-deep);
}
/* one chip per ticket type — each links to its own Calendly page */
.event__tiers-label{
  font-family:var(--sans);font-size:.58rem;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-faint);margin:0 0 .7rem;
}
.event__tiers{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 1.2rem;padding:0;list-style:none}
.event__tiers li{
  font-family:var(--sans);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  background:var(--blue-pale);color:var(--navy);
}
/* min-height keeps these above the 44px touch target minimum on phones —
   they are the most important thing to tap on the site */
.event__tiers li > *{
  display:flex;align-items:center;justify-content:center;
  min-height:44px;padding:.5rem 1rem;text-decoration:none;
}
.event__tiers li > a{transition:background .25s ease,color .25s ease}
.event__tiers li > a:hover{background:var(--navy);color:#fff}
/* a ticket type whose booking link is not live yet */
.event__tiers li.is-pending{background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-faint)}

.event__cta{margin-top:auto;align-self:flex-start;padding:.9rem 1.9rem}
.event__prompt,.event__pending{
  margin:auto 0 0;font-family:var(--sans);font-size:.6rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);
}

.event-empty{border:1px dashed var(--line);padding:3.5rem 2rem;text-align:center;color:var(--ink-faint);font-weight:300}

/* ---------- calendar ---------- */

.cal{background:#fff;border:1px solid var(--line);padding:clamp(1.5rem,3vw,2.3rem)}
.cal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;gap:1rem}
.cal__month{font-family:var(--serif);font-weight:300;font-size:1.22rem;letter-spacing:.16em;text-transform:uppercase}
.cal__nav{display:flex;gap:.4rem}
.cal__nav button{
  width:34px;height:34px;border:1px solid var(--line);background:none;color:var(--navy);
  cursor:pointer;font-size:.85rem;line-height:1;transition:background .25s ease,color .25s ease;
}
.cal__nav button:hover{background:var(--navy);color:#fff}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal__dow{
  font-family:var(--sans);font-size:.54rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);text-align:center;padding:.4rem 0 .7rem;
}
.cal__day{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  font-size:.94rem;font-weight:300;color:var(--ink-soft);border-radius:50%;
}
.cal__day--out{color:transparent}
.cal__day--today{box-shadow:inset 0 0 0 1px var(--blue-deep)}
a.cal__day--event{background:var(--navy);color:#fff;text-decoration:none;transition:background .25s ease,color .25s ease}
a.cal__day--event:hover{background:var(--green-deep);color:var(--navy)}
.cal__key{
  display:flex;align-items:center;gap:.55rem;margin-top:1.3rem;
  font-family:var(--sans);font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);
}
.cal__key i{width:11px;height:11px;border-radius:50%;background:var(--navy);display:block}

.cal-layout{display:grid;grid-template-columns:1.3fr .95fr;gap:clamp(1.6rem,4vw,3.2rem);align-items:start}
@media (max-width:900px){.cal-layout{grid-template-columns:1fr}}

/* ---------- bios ---------- */

.bio{
  display:grid;grid-template-columns:.85fr 1.15fr;
  gap:clamp(1.75rem,4vw,3.25rem);align-items:center;
  padding:clamp(1.6rem,3.2vw,2.4rem) 0;border-top:1px solid var(--line);
}
.bio:first-of-type{border-top:0;padding-top:0}
/* Flipped rows put the photo second, so the column widths swap too — otherwise
   the photo lands in the wider track and that portrait renders bigger. */
.bio--flip{grid-template-columns:1.15fr .85fr}
.bio--flip .bio__media{order:2}
.bio__media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.bio__name{font-family:var(--script);font-size:clamp(2.4rem,5vw,3.5rem);color:var(--navy);margin:0 0 .35rem}
.bio__role{
  font-family:var(--sans);font-size:.6rem;font-weight:500;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ink-faint);margin:0 0 1.1rem;
}
.bio__body p{margin:0 0 .9rem;font-weight:300;color:var(--ink-soft)}
.bio__body p:last-child{margin-bottom:0}
@media (max-width:840px){
  .bio{grid-template-columns:1fr}
  .bio--flip .bio__media{order:0}
}

.portrait-soon{
  aspect-ratio:4/5;background:var(--green-pale);border:1px dashed var(--green-deep);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem;padding:2rem;
}
.portrait-soon .mark{height:74px;opacity:.55}
.portrait-soon span{
  font-family:var(--sans);font-size:.58rem;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-faint);text-align:center;
}

/* ---------- gallery ---------- */

/* A uniform grid rather than masonry: these photos range from 240x320 phone
   shots to 1284x2778, and letting each keep its own height made the page look
   chaotic. Every tile is now the same shape and the photo is cropped to fit. */
.gal{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:clamp(.6rem,1.4vw,1rem);
}
@media (max-width:560px){.gal{grid-template-columns:repeat(2,1fr)}}
.gal__item{
  display:block;border:0;padding:0;margin:0;background:none;cursor:zoom-in;
  position:relative;overflow:hidden;width:100%;aspect-ratio:4/5;
}
.gal__item img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s ease,opacity .4s ease;
}
.gal__item:hover img{transform:scale(1.04);opacity:.93}

.gal-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.6rem,1.4vw,1rem)}
.gal-strip img{width:100%;aspect-ratio:1;object-fit:cover}
@media (max-width:700px){.gal-strip{grid-template-columns:repeat(2,1fr)}}

.lightbox{
  position:fixed;inset:0;z-index:200;background:rgba(33,52,85,.95);
  display:none;align-items:center;justify-content:center;padding:clamp(1rem,5vw,3rem);
}
.lightbox.is-open{display:flex}
.lightbox img{max-width:100%;max-height:86vh;object-fit:contain}
.lightbox button{
  position:absolute;background:none;border:0;color:#fff;cursor:pointer;
  font-size:1.7rem;line-height:1;padding:1rem;opacity:.72;transition:opacity .25s ease;
}
.lightbox button:hover{opacity:1}
.lightbox__close{top:.5rem;right:.8rem;font-size:1.4rem}
.lightbox__prev{left:.3rem;top:50%;transform:translateY(-50%)}
.lightbox__next{right:.3rem;top:50%;transform:translateY(-50%)}

/* ---------- questions ---------- */

.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:1.15rem 2.5rem 1.15rem 0;position:relative;font-size:1.1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:.4rem;top:50%;transform:translateY(-50%);
  font-size:1.3rem;font-weight:300;color:var(--blue-deep);
}
.faq details[open] summary::after{content:"\2013"}
.faq p{margin:0 0 1.2rem;color:var(--ink-soft);font-weight:300;padding-right:2.5rem}

/* ---------- footer ---------- */

.footer{background:var(--navy);color:rgba(255,255,255,.82);padding:clamp(2rem,3.5vw,2.75rem) 0 1.5rem}
.footer a{color:inherit;text-decoration:none}
.footer__top{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.footer .mark--birds{height:54px;margin:0 0 1rem}
.footer__brand-name{
  font-family:var(--serif);font-weight:300;font-size:.82rem;
  letter-spacing:.28em;text-transform:uppercase;
}
.footer__brand p{font-weight:300;font-size:.97rem;margin:.9rem 0 0;color:rgba(255,255,255,.66);max-width:34ch}
.footer h4{
  font-family:var(--sans);font-size:.6rem;font-weight:500;letter-spacing:.26em;
  text-transform:uppercase;color:rgba(255,255,255,.55);margin:0 0 1.2rem;
}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin-bottom:.5rem;font-weight:300}
.footer li a:hover{color:var(--green)}
/* Instagram / Facebook rows — icon then label, both inheriting the link colour */
.footer__social{display:inline-flex;align-items:center;gap:.6rem}
.footer__social svg{width:15px;height:15px;flex:none}
.footer__bottom{
  margin-top:clamp(1.25rem,2.5vw,1.75rem);padding-top:1.1rem;
  border-top:1px solid rgba(255,255,255,.16);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  font-family:var(--sans);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.45);
}
@media (max-width:760px){.footer__top{grid-template-columns:1fr}}

/* ---------- reveal on scroll ---------- */

.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .event:hover,.offer:hover{transform:none}
}