/* Weddings by Him and Her - Black Friday 2026 bar (home + pricing).
   Shows only Nov 11 to Nov 30, 2026 (Pacific) via the inline head script, which sets
   html.bf26-live (and html.bf26-lastday on the last day) before first paint, so there is no layout shift.
   Preview any time with ?bf=fri or ?bf=mon. Safe to leave in place after Monday: it hides itself. */

.bf-bar{display:none}
html.bf26-live .bf-bar{display:block}

.bf-bar{
  --bf-wine:#6E2121;
  --bf-wine-deep:#561A1A;
  --bf-paper:#FDFBF8;
  --bf-rose:#F0C9C6;
  position:relative;
  z-index:4;
  background:var(--bf-wine);
  color:var(--bf-paper);
  box-shadow:inset 0 -1px 0 rgba(240,201,198,.28);
  font-family:"Poppins","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.bf-bar *{box-sizing:border-box}
.bf-bar p{margin:0}

/* day variants */
.bf-bar .bf-mon{display:none}
html.bf26-lastday .bf-bar .bf-mon{display:inline}
html.bf26-lastday .bf-bar .bf-fri{display:none}
.bf-bar .bf-short{display:none}

.bf-bar__in{
  display:flex;
  align-items:center;
  gap:clamp(16px,2vw,32px);
  min-height:68px;
  padding:10px clamp(16px,2.4vw,40px) 10px clamp(24px,5vw,100px);
  max-width:1920px;
  margin:0 auto;
}

/* the script word: same hand as the homepage headline, written in on load */
.bf-bar__mark{
  flex:none;
  font-family:"La Belle Aurore",cursive;
  font-size:clamp(28px,2.1vw,36px);
  line-height:1;
  color:var(--bf-rose);
  white-space:nowrap;
  padding:4px 6px 0 0;
}
/* only written in when the tab is visible at load, so a background or headless render never ships it blank */
.bf-bar.is-writing .bf-bar__mark{animation:bf-write 1100ms 250ms cubic-bezier(.22,1,.36,1) both}
@keyframes bf-write{
  from{clip-path:inset(0 100% 0 0);opacity:.4}
  to{clip-path:inset(0 0 0 0);opacity:1}
}

.bf-bar__text{
  flex:1 1 auto;
  min-width:0;
  font-family:"Ovo",Georgia,serif;
  font-size:clamp(16px,1.08vw,19px);
  line-height:1.4;
  text-wrap:pretty;
}
.bf-bar__text b{font-weight:400;color:var(--bf-rose)}

.bf-bar__meta{
  flex:none;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:7px;
}
/* "6 couples only" label */
.bf-bar .bf-cap{
  font-family:"Poppins","Helvetica Neue",Arial,sans-serif;
  font-size:11px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--bf-rose);
  white-space:nowrap;
}
/* live spots-left counter: filled dot = open spot, outlined dot = booked (data: /assets/bf-2026.json) */
.bf-bar .bf-count{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:"Poppins","Helvetica Neue",Arial,sans-serif;
  font-size:12px;
  font-weight:400;
  letter-spacing:.02em;
  line-height:1;
  color:var(--bf-paper);
  white-space:nowrap;
}
.bf-bar .bf-count b{font-weight:600}
.bf-pips{display:inline-flex;gap:4px}
.bf-pips i{display:block;width:7px;height:7px;border-radius:50%;background:var(--bf-rose)}
.bf-pips i.is-taken{background:transparent;box-shadow:inset 0 0 0 1px rgba(240,201,198,.6)}

.bf-bar__cta{
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:12px;
  height:44px;
  padding:0 20px;
  border:1.5px solid var(--bf-paper);
  color:var(--bf-paper);
  text-decoration:none;
  font-size:11px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:background-color .22s cubic-bezier(.22,.61,.36,1),color .22s cubic-bezier(.22,.61,.36,1);
}
.bf-bar__cta svg{width:10px;height:10px;flex:none;transition:transform .22s cubic-bezier(.22,.61,.36,1)}
.bf-bar__cta:hover{background:var(--bf-paper);color:var(--bf-wine)}
.bf-bar__cta:hover svg{transform:translateX(3px)}
.bf-bar__cta:active{background:var(--bf-rose);border-color:var(--bf-rose);color:var(--bf-wine-deep)}

.bf-bar__x{
  flex:none;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  margin-left:-8px;
  padding:0;
  background:none;
  border:0;
  color:var(--bf-paper);
  opacity:.7;
  cursor:pointer;
  transition:opacity .18s ease-out;
}
.bf-bar__x svg{width:14px;height:14px}
.bf-bar__x:hover{opacity:1}

.bf-bar a:focus-visible,.bf-bar button:focus-visible{outline:2px solid var(--bf-rose);outline-offset:3px}

/* laptop: drop the meta label into the sentence's rhythm by hiding the long copy */
@media (max-width:1180px){
  .bf-bar .bf-long{display:none}
  .bf-bar .bf-short{display:inline}
}

/* phone: script, cap and close on one row; the offer and an inline link below */
.bf-bar .bf-cta-m{display:none}
@media (max-width:767px){
  .bf-bar__in{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:"mark x" "text text";
    align-items:center;
    column-gap:8px;
    row-gap:2px;
    padding:6px 4px 14px 20px;
    min-height:0;
  }
  .bf-bar__mark{grid-area:mark;font-size:29px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
  .bf-bar__meta,.bf-bar__cta{display:none}
  .bf-bar .bf-meta-m{display:flex;align-items:center;padding-top:3px}
  .bf-bar .bf-meta-m .bf-cap{display:none}
  .bf-bar .bf-meta-m .bf-count{font-size:11px;gap:7px}
  .bf-bar .bf-meta-m .bf-pips i{width:6px;height:6px}
  .bf-bar__x{grid-area:x;justify-self:end;margin:0}
  .bf-bar__text{grid-area:text;font-size:15px;line-height:1.4;padding-right:16px}
  .bf-bar .bf-cta-m{
    display:inline-flex;align-items:center;gap:7px;
    padding:7px 0;margin:-3px 0;
    color:var(--bf-paper);
    font-family:"Poppins","Helvetica Neue",Arial,sans-serif;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
    text-decoration:underline;text-decoration-color:rgba(240,201,198,.6);text-underline-offset:5px;text-decoration-thickness:1px;
    white-space:nowrap;
  }
  .bf-bar .bf-cta-m svg{width:9px;height:9px}
}
@media (min-width:1024px){.bf-bar .bf-meta-m{display:none}}
/* tablet: the cap tucks under the script so the offer keeps two lines */
@media (min-width:768px) and (max-width:1023px){
  .bf-bar__meta{display:none}
  .bf-bar__mark{display:flex;flex-direction:column;gap:9px;font-size:28px}
  .bf-bar .bf-meta-m{display:flex;align-items:center;padding-left:2px}
  .bf-bar .bf-meta-m .bf-cap{display:none}
  .bf-bar .bf-meta-m .bf-count{font-size:11px;gap:7px}
}

@media (prefers-reduced-motion:reduce){
  .bf-bar.is-writing .bf-bar__mark{animation:none}
  .bf-bar__cta,.bf-bar__cta svg,.bf-bar__x{transition:none}
}