/* ─────────────────────────────────────────────────
   Yoga Brand Book — Rose chrome
   Shared layout used by every brand-book page
   ───────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Space+Mono:wght@400;700&display=swap');

:root{
  --bb-bg:#f8e8f0;
  --bb-content:#fff5fa;
  --bb-accent:#e91e8c;
  --bb-accent-deep:#db2777;
  --bb-text:#2d2d2d;
  --bb-text-2:#9d6b8a;
  --bb-text-muted:#555;
  --bb-divider:#f0c8dc;
  --bb-shadow:rgba(233,30,140,0.15);
  --bb-shadow-strong:rgba(233,30,140,0.25);
  --bb-white:#fff;

  --bb-display:'Nunito',sans-serif;
  --bb-mono:'Space Mono',monospace;

  --p-lavender:#c4b5fd;
  --p-pink:#f9a8d4;
  --p-mint:#a7f3d0;
  --p-amber:#fde68a;
  --p-peach:#fed7aa;
  --p-mint-2:#bbf7d0;
  --p-rose:#fecaca;
  --p-sky:#bae6fd;
  --p-yellow:#ffd54f;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background: var(--bb-bg);
  color: var(--bb-text);
  font-family: var(--bb-mono);
  min-height:100vh;
  overflow-x:hidden;
}

/* —— Decorative blobs —— */
.bb-blob{
  position:fixed;width:520px;height:520px;border-radius:50%;
  filter:blur(80px);opacity:0.55;z-index:0;pointer-events:none;
}
.bb-blob.b1{top:-160px;right:-120px;background:var(--p-lavender)}
.bb-blob.b2{top:30%;left:-180px;background:var(--p-mint)}
.bb-blob.b3{bottom:-180px;right:20%;background:var(--p-peach)}

/* —— Page wrap —— */
.bb-page{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:32px 28px 96px}

/* —— Topbar (consistent across all pages) —— */
.bb-topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 32px;
  background:linear-gradient(to right, rgba(255,255,255,0.65), rgba(255,255,255,0.45));
  border-radius:20px;
  box-shadow:0 4px 22px rgba(233,30,140,0.10);
  margin-bottom:0;
  gap:18px;flex-wrap:nowrap;
}
.bb-topbar-row2{
  display:flex;align-items:center;
  padding:10px 32px;
  background:linear-gradient(to right, rgba(255,255,255,0.55), rgba(255,255,255,0.35));
  border-radius:18px;
  margin-top:8px;margin-bottom:32px;
}
.bb-topbar-row2 .bb-nav{flex:1;justify-content:flex-start;flex-wrap:wrap;gap:6px}
  background:rgba(255,255,255,0.6);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.7);
  border-radius:20px;
  box-shadow:0 4px 0 var(--bb-shadow);
  margin-bottom:32px;
}
.bb-brand{display:flex !important;align-items:center !important;gap:14px;text-decoration:none !important;color:inherit;flex-shrink:0;flex-direction:row !important}
.bb-brand:hover, .bb-brand:visited, .bb-brand:active{text-decoration:none !important}
.bb-brand b, .bb-brand span{text-decoration:none}
/* yoga-wide: kill the default link underline on the brand lockup wherever it is an <a> */
a.bb-brand, a.bb-brand:link, a.bb-brand:hover, a.bb-brand:visited, a.bb-brand:active{text-decoration:none !important;color:var(--bb-text) !important}
/* the "brand book · v1.0" sub-line had NO rule → inherited the default blue link colour; style it in the brand mono */
.bb-brand-text span{font-family:'Space Mono',ui-monospace,monospace;font-weight:400;font-size:13px;letter-spacing:0.04em;color:var(--bb-text-2,#9d6b8a);text-decoration:none;margin-left:12px}
.bb-mark{
  width:72px;height:72px;border-radius:50%;
  background:var(--bb-accent);color:white;
  display:grid;place-items:center;flex-shrink:0;
}
.bb-mark svg{width:44px;height:44px}
.bb-brand-text{text-decoration:none}
.bb-brand-text b{font-family:var(--bb-display);font-weight:900;font-size:34px;color:var(--bb-text);text-transform:lowercase;letter-spacing:-0.02em;line-height:1;white-space:nowrap;text-decoration:none}

.bb-nav{display:flex;gap:6px;align-items:center}
.bb-nav a{
  font-family:var(--bb-mono);font-size:13px;font-weight:700;
  padding:11px 17px;border-radius:18px;
  text-decoration:none;color:var(--bb-text);
  transition:all .15s;
}
.bb-nav a:hover{background:rgba(255,255,255,0.7)}
.bb-nav a.active{background:var(--bb-accent);color:white;box-shadow:0 2px 0 var(--bb-shadow-strong)}
.bb-nav a .num{opacity:0.5;margin-right:6px}

.yoga-back{
  display:inline-flex;align-items:center;justify-content:center;
  width:60px;height:60px;
  font-family:var(--bb-display);font-size:44px;font-weight:400;color:var(--bb-text-2);
  text-decoration:none;line-height:1;border-radius:50%;
  transition:all .15s ease;flex-shrink:0;
}
.yoga-back:hover{background:rgba(255,255,255,0.6);color:var(--bb-text);transform:translateX(-3px)}
.bb-topbar > .yoga-back{margin-right:auto;margin-left:8px}
/* zeng3ld home button: works both inside .bb-nav (subpages) and as standalone in topbar */
.yoga-home{
  background:transparent;color:var(--bb-accent);padding:8px 4px;
  font-family:var(--bb-display);font-weight:900;letter-spacing:-0.02em;
  font-size:34px;text-transform:lowercase;border-radius:0;
  text-decoration:none;line-height:1;
  transition:transform .15s ease;flex-shrink:0;
}
.yoga-home:hover{background:transparent;transform:translateX(2px)}
.yoga-home b{color:var(--bb-text);font-weight:900}
.yoga-home .num{display:none}

/* —— Page header —— */
.bb-head{
  padding:0 4px 28px;margin-bottom:36px;
  border-bottom:2px dashed var(--bb-divider);
  display:grid;grid-template-columns:1.4fr 1fr;gap:36px;align-items:end;
}
.bb-head h1{
  margin:0;
  font-family:var(--bb-display);font-weight:900;
  font-size:72px;line-height:0.92;letter-spacing:-0.04em;
  color:var(--bb-text);text-transform:lowercase;
}
.bb-head h1 em{
  font-style:normal;color:var(--bb-accent);
  background:linear-gradient(180deg, transparent 60%, rgba(233,30,140,0.15) 60%);
  padding:0 4px;border-radius:6px;
}
.bb-head p{
  margin:0;font-family:var(--bb-mono);font-size:13px;line-height:1.65;color:var(--bb-text);
  max-width:420px;
}
.bb-head p.muted{color:var(--bb-text-2)}
.bb-head .crumbs{
  font-family:var(--bb-mono);font-size:10px;font-weight:700;letter-spacing:0.16em;
  color:var(--bb-text-2);text-transform:uppercase;margin-bottom:14px;
}
.bb-head .crumbs a{color:var(--bb-text-2);text-decoration:none}
.bb-head .crumbs a:hover{color:var(--bb-accent)}
.bb-head .meta{display:flex;flex-direction:column;gap:14px}
.bb-head .meta-pill{
  align-self:flex-start;
  display:inline-flex;gap:10px;align-items:center;
  font-family:var(--bb-mono);font-size:10px;font-weight:700;
  padding:6px 12px;border-radius:12px;
  background:white;border:1px solid rgba(255,255,255,0.8);
  box-shadow:0 2px 0 var(--bb-shadow);
  text-transform:uppercase;letter-spacing:0.08em;color:var(--bb-text);
}
.bb-head .meta-pill.accent{background:var(--bb-accent);color:white}

/* —— Section labels (matches app section-label style) —— */
.bb-section-label{
  font-family:var(--bb-display);font-weight:900;
  font-size:22px;color:var(--bb-accent);
  margin:48px 4px 18px;
  text-transform:lowercase;letter-spacing:-0.01em;
  display:flex;align-items:center;gap:14px;
}
.bb-section-label::after{
  content:'';flex:1;height:2px;background:var(--bb-divider);border-radius:2px;
}
.bb-section-label .num{
  font-family:var(--bb-mono);font-weight:700;font-size:12px;
  color:var(--bb-text-2);letter-spacing:0.14em;text-transform:uppercase;
}

/* —— Card primitives (mirrors LandingCard / GlassCard from shared.jsx) —— */
.bb-pcard{
  position:relative;
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:0 4px 0 var(--bb-shadow);
  padding:18px;
  overflow:hidden;
}
.bb-pcard::before{
  content:'';position:absolute;inset:0;
  background:rgba(255,255,255,0.4);pointer-events:none;border-radius:inherit;
}
.bb-pcard > *{position:relative;z-index:1}

.bb-glass{
  background:rgba(255,255,255,0.55);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.7);
  border-radius:20px;
  box-shadow:0 4px 0 var(--bb-shadow);
  padding:20px;
}

/* —— Footer —— */
.bb-footer{
  margin-top:64px;padding:18px 22px;
  background:rgba(255,255,255,0.55);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.6);
  border-radius:20px;
  box-shadow:0 4px 0 var(--bb-shadow);
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--bb-mono);font-size:11px;font-weight:700;
  color:var(--bb-text-2);letter-spacing:0.08em;text-transform:uppercase;
}
.bb-footer b{color:var(--bb-text)}
.bb-footer a{color:inherit;text-decoration:none}
.bb-footer a:hover{color:var(--bb-accent)}

/* —— Tag / badge —— */
.bb-tag{
  display:inline-block;
  font-family:var(--bb-mono);font-weight:700;font-size:10px;
  letter-spacing:0.16em;text-transform:uppercase;
  padding:5px 10px;border-radius:11px;
  background:white;color:var(--bb-text);
  border:1px solid rgba(255,255,255,0.8);
}
.bb-tag.accent{background:var(--bb-accent);color:white}

/* —— Responsive —— */
@media (max-width: 760px){
  .bb-page{padding:14px 14px 24px}
  .bb-topbar{padding:12px 14px;gap:10px;border-radius:14px;flex-wrap:wrap}
  .bb-mark{width:46px;height:46px}
  .bb-mark svg{width:28px;height:28px}
  .bb-brand-text b{font-size:22px}
  .yoga-back{width:42px;height:42px;font-size:28px}
  .yoga-home{font-size:24px}
  .bb-topbar-row2{padding:8px 12px;margin-top:6px;margin-bottom:18px}
  .bb-topbar-row2 .bb-nav{gap:4px}
  .bb-nav a{font-size:11px;padding:8px 12px;border-radius:14px}
  .bb-head{grid-template-columns:1fr;gap:14px;padding-bottom:20px;margin-bottom:24px}
  .bb-head h1{font-size:44px}
  .bb-head.hero h1{font-size:48px}
  .tiles{grid-template-columns:1fr;gap:14px}
  .tile{padding:18px;min-height:auto}
  .bb-nav a:not(.active):not(.yoga-home){display:none}
}

/* —— Pretty pink scrollbar —— */
html::-webkit-scrollbar{width:12px;height:12px}
html::-webkit-scrollbar-track{background:transparent}
html::-webkit-scrollbar-thumb{background:rgba(233,30,140,0.3);border:3px solid transparent;border-radius:9px;background-clip:padding-box}
::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(233,30,140,0.25); border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(233,30,140,0.5); background-clip: padding-box; border: 2px solid transparent; }