:root {
  --bb-blush: #e9d7d0;
  --bb-beige: #f5efe9;
  --bb-taupe: #8a7563;
  --bb-bronze: #a87350;
  --bb-deep: #2a2320;
  --bb-white: #ffffff;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "niveau-grotesk", "Helvetica Neue", system-ui, sans-serif; color: var(--bb-deep); }

/* HEADER */
.header {
  background: rgba(255,255,255,0.95);
  border-bottom: 1px solid #e7e3df;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  backdrop-filter: blur(8px);
}
.header img { height: 36px; }
.header h1 { font-size: 13px; margin: 0; color: var(--bb-deep); line-height: 1.2; }

.btn {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--bb-bronze);
  background: linear-gradient(145deg, #b17d55, #a87350);
  color: #fff;
  text-decoration: none;
  transition: all .25s ease;
  box-shadow: 0 4px 12px rgba(168,115,80,0.3);
}
.btn:hover { background: linear-gradient(145deg, #a87350, #8a7563); }

/* MAIN */
.main-area { background: var(--bb-beige); min-height: 40vh; }
.container { width: min(1120px, 92vw); margin: 0 auto; padding: 24px 0; }

/* FOOTER */
footer {
  background: var(--bb-white);
  border-top: 1px solid #e7e3df;
  text-align: center;
  padding: 18px 16px;
  color: var(--bb-taupe);
  font-size: 12px;
}
.chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.chip {
  background: transparent;
  color: var(--bb-bronze);
  border: 1.5px solid var(--bb-bronze);
  border-radius: 999px;
  padding: 8px 14px;
  text-decoration: none;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .25s ease, color .25s ease;
}
.chip:hover { background: var(--bb-bronze); color: #fff; }

.social { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }
.social a {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--bb-bronze);
  border: 1.5px solid var(--bb-bronze);
  transition: all .25s ease;
  box-shadow: 0 0 4px rgba(168,115,80,0.3) inset;
}
.social a:hover { background: linear-gradient(145deg,#b17d55,#a87350); color: #fff; transform: scale(1.1); }
.social svg { width: 16px; height: 16px; fill: currentColor; stroke: currentColor; stroke-width: 0.8; }

/* Mobile menu overlay */
#menuOverlay{position: fixed; inset:0; background:rgba(42,35,32,.45); backdrop-filter:blur(4px); display:none; z-index: 60;}
#menuOverlay[aria-hidden="false"]{display:block}
#menuPanel{position:absolute;right:0;top:0;height:100%;width:78%;max-width:320px;
  background:linear-gradient(180deg,var(--bb-beige),var(--bb-white));border-left:1px solid #e7e3df;
  box-shadow:-8px 0 24px rgba(0,0,0,.1);transform:translateX(100%);transition:transform .3s ease;
  display:flex;flex-direction:column;padding:16px 16px 24px;gap:8px}
#menuOverlay[aria-hidden="false"] #menuPanel{transform:translateX(0)}
.menuLink{padding:12px 12px;border-radius:12px;color:var(--bb-deep);text-decoration:none;border:1px solid #eee;display:flex;align-items:center;gap:10px}
.menuLink:hover{background:var(--bb-blush)}
.menuHeader{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.menuDivider{height:1px;background:#e7e3df;margin:8px 0}