
/* BMZ — site-wide cohesion layer */
:root{
  --ink:#1d1b18;
  --cream:#f6efe5;
  --paper:#fffaf3;
  --salmon:#e9c8bb;
  --yellow:#f1dc79;
  --muted:#6f685f;
  --line:#d9cfc3;
  --bmz-max:1220px;
}

html{scroll-padding-top:82px}
body{background:var(--cream);color:var(--ink)}
.wrap{max-width:var(--bmz-max);margin-inline:auto;padding-inline:28px}

/* Header: make all generations of the BMZ header look like one system */
.topbar{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(246,239,229,.96);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar .nav{
  min-height:68px;
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:22px;
}
.brand,
.brand a{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
  color:inherit;
  text-decoration:none;
  font-weight:750;
}
.brand > span:last-child,
.brand a > span:last-child{
  white-space:nowrap;
}
.stamp,.brandMark{
  width:43px!important;
  height:43px!important;
  flex:0 0 43px;
  border:2px solid var(--ink)!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  font:11px ui-monospace,monospace!important;
  transform:rotate(-12deg);
  background:transparent!important;
  color:var(--ink)!important;
}
.navlinks,.links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px!important;
  white-space:nowrap;
}
.navlinks a,.links a{
  color:inherit;
  text-decoration:none;
  font-size:13px;
  white-space:nowrap;
  position:relative;
}
.navlinks a[aria-current="page"],
.links a[aria-current="page"]{
  font-weight:800;
}
.navlinks a[aria-current="page"]::after,
.links a[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-6px;
  height:3px;
  border-radius:10px;
  background:var(--yellow);
}
.navcta,.pill{
  justify-self:end;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1.5px solid var(--ink)!important;
  border-radius:999px!important;
  padding:11px 16px!important;
  background:var(--ink)!important;
  color:var(--paper)!important;
  font:700 14px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
  text-decoration:none!important;
  white-space:nowrap;
}

/* Old + new mobile menu implementations, same visual language */
.mobileMenuButton,.mobileNav{display:none}
.mobileMenu{
  border-bottom:1px solid var(--line);
  background:var(--paper);
}
.mobileMenu a,.mobileNavPanel a,.mobilePanel a{
  color:inherit;
  text-decoration:none;
}

/* Site-wide footer */
.siteFooter{
  border-top:1px solid var(--line)!important;
  padding:28px 0 36px!important;
  background:var(--cream)!important;
}
.siteFooter .footer{
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  font-size:13px;
}
.siteFooter .footer > div{
  display:flex;
  gap:15px;
  flex-wrap:wrap;
}
.siteFooter a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* Give subpage intros one shared rhythm without erasing their own designs */
.subHero{border-bottom-color:var(--line)}
body[data-bmz-page="droom"] .subHero,
body[data-bmz-page="over"] .subHero,
body[data-bmz-page="contact"] .subHero{
  padding-top:58px!important;
  padding-bottom:50px!important;
}

/* Prevent isolated content from touching page edges */
body[data-bmz-page="privacy"] main{
  max-width:810px;
  margin:auto;
  padding:72px 28px 88px;
}
body[data-bmz-page="privacy"] h1{
  font:400 clamp(48px,6vw,72px)/.95 Georgia,"Times New Roman",serif;
  letter-spacing:-.035em;
  margin:0 0 26px;
}
body[data-bmz-page="privacy"] h2{
  font:400 30px/1.08 Georgia,"Times New Roman",serif;
}
body[data-bmz-page="privacy"] .box{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:24px;
}

/* Keep button language consistent wherever the generic .button is used */
.button{
  border-radius:999px;
}

@media(max-width:900px){
  .topbar .nav{
    grid-template-columns:minmax(0,1fr) auto;
    min-height:62px;
    gap:10px;
  }
  .navlinks,.links,.navcta,.pill{display:none!important}
  .mobileMenuButton{display:inline-flex!important;justify-self:end}
  .mobileNav{
    display:block!important;
    justify-self:end;
    position:relative;
  }
  .mobileNav summary{
    list-style:none;
    cursor:pointer;
    border:1.5px solid var(--ink);
    border-radius:999px;
    padding:9px 12px;
    font:700 12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    background:var(--paper);
  }
  .mobileNav summary::-webkit-details-marker{display:none}
  .mobileNavPanel,.mobilePanel{
    position:absolute;
    right:0;
    top:44px;
    min-width:220px;
    z-index:160;
    display:grid;
    background:var(--paper);
    border:1px solid var(--ink);
    border-radius:18px 4px 18px 18px;
    padding:9px;
    box-shadow:7px 8px 0 var(--salmon);
  }
  .mobileNavPanel a,.mobilePanel a{
    padding:11px 12px;
    border-bottom:1px solid var(--line);
    font-size:14px;
  }
  .mobileNavPanel a:last-child,.mobilePanel a:last-child{border-bottom:0;font-weight:800}
}
@media(max-width:600px){
  .wrap{padding-inline:20px}
  .brand > span:last-child,.brand a > span:last-child{
    font-size:12px;
    line-height:1.05;
    max-width:138px;
    white-space:normal;
  }
  .stamp,.brandMark{
    width:38px!important;height:38px!important;flex-basis:38px;
    font-size:10px!important;
  }
  body[data-bmz-page="droom"] .subHero,
  body[data-bmz-page="over"] .subHero,
  body[data-bmz-page="contact"] .subHero{
    padding-top:36px!important;
    padding-bottom:38px!important;
  }
  body[data-bmz-page="privacy"] main{padding:48px 20px 72px}
  .siteFooter .footer{flex-direction:column;align-items:flex-start}
}
