/* brand.css — the Beedy feel on the Suite, same as beedy.ca: header, wordmark, menus, CTA, Fraunces headings in light,
   paper in light, cyan / burnt-orange accents. Loaded LAST on every Suite page. Tokens come from the page (same values). */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700;9..144,800&display=swap');
:root{--bb-acc:#0e6e7e;--bb-acc2:#b8590b;--bb-on:#fff;--bb-hbg:rgba(251,246,234,.92)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bb-acc:#3ad9d9;--bb-acc2:#ffb547;--bb-on:#04161a;--bb-hbg:rgba(6,9,15,.86)}}
:root[data-theme="dark"]{--bb-acc:#3ad9d9;--bb-acc2:#ffb547;--bb-on:#04161a;--bb-hbg:rgba(6,9,15,.86)}

/* ---- header (replaces each page's own) ---- */
.bb{position:sticky;top:0;z-index:40;background:var(--bb-hbg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);padding:0!important;height:auto!important;display:block!important}
.bb-in{display:flex;align-items:center;gap:14px;max-width:1400px;margin:0 auto;padding:0 clamp(12px,2.2vw,28px);height:68px;padding-top:env(safe-area-inset-top,0px)}
.bb-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);flex:none}
.bb-logo{width:40px;height:40px;border-radius:50%}
.bb-word{font:800 1.4rem/1 'Fraunces',Georgia,serif;letter-spacing:-.01em}
.bb-dot{color:var(--bb-acc)}
:root[data-theme="light"] .bb-dot{color:var(--bb-acc2)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .bb-dot{color:var(--bb-acc2)}}
.bb-prod{font:500 .66rem/1.2 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  text-decoration:none;border-left:1px solid var(--line-2);padding:4px 0 4px 12px;max-width:150px;flex:none}
.bb-mods{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;margin-left:6px}
.bb-mods a{color:var(--muted);text-decoration:none;font:600 .88rem 'Inter',system-ui,sans-serif;padding:8px 10px;border-radius:7px;white-space:nowrap;position:relative}
.bb-mods a:hover{color:var(--text)}
.bb-mods a[aria-current="page"]{color:var(--text)}
.bb-mods a[aria-current="page"]::after{content:"";position:absolute;left:10px;right:10px;bottom:2px;height:2px;border-radius:2px;background:var(--bb-acc)}
.bb-sp{flex:1}
.bb-ctx{border-top:1px solid var(--line)}
.bb-ctxin{display:flex;align-items:center;justify-content:flex-end;gap:12px;max-width:1400px;margin:0 auto;padding:0 clamp(12px,2.2vw,28px);min-height:40px;overflow-x:auto;scrollbar-width:none;font-size:.82rem}
.bb-ctxin>*{flex:none}
.bb-ctxin .back{margin-right:auto}
.bb-icon,.bb-mbtn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:4px;height:34px;min-width:34px;padding:0 9px;border-radius:8px;
  border:1px solid var(--line-2);background:transparent;color:var(--text);font:700 .8rem 'JetBrains Mono',ui-monospace,monospace;cursor:pointer;text-decoration:none}
.bb-icon:hover,.bb-mbtn:hover{background:var(--bg-2)}
.bb-caret{font-size:.6rem;opacity:.7}
.bb-menu{position:relative}
.bb-list{display:none;position:absolute;right:0;top:calc(100% + 6px);min-width:200px;margin:0;padding:6px;list-style:none;background:var(--bg-1);
  border:1px solid var(--line-2);border-radius:10px;box-shadow:0 14px 40px rgba(0,0,0,.28);z-index:60}
.bb-menu.open .bb-list{display:block}
.bb-list li{border-radius:7px}
.bb-list a,.bb-lang li{display:flex;align-items:center;gap:10px;padding:8px 10px;color:var(--text);text-decoration:none;font:500 .88rem 'Inter',sans-serif;cursor:pointer;border-radius:7px}
.bb-list a:hover,.bb-lang li:hover,.bb-lang li[aria-selected="true"]{background:var(--bg-2)}
.bb-list a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--bb-acc)}
.bb-k{font:600 .64rem 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--bb-acc);min-width:62px}
.bb-code{font:700 .7rem 'JetBrains Mono',monospace;color:var(--muted);min-width:22px}
.bb-cta{display:inline-flex;align-items:center;height:36px;padding:0 15px;border-radius:8px;font:700 .82rem 'Inter',sans-serif;text-decoration:none;
  background:var(--bb-acc);color:var(--bb-on);white-space:nowrap}
:root[data-theme="light"] .bb-cta{background:var(--bb-acc2);color:#fff}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .bb-cta{background:var(--bb-acc2);color:#fff}}
@media (max-width:1180px){.bb-prod{display:none}}
.bb-mob{display:none}.bb-sep{height:1px;background:var(--line);margin:5px 4px}
@media (max-width:980px){.bb-mods,.bb-cta,.bb-doors{display:none}.bb-mob{display:block}}
@media (max-width:560px){.bb-word{display:none}.bb-in{gap:8px}}

/* ---- typography + surface, like beedy.ca ---- */
:root[data-theme="light"] h1,:root[data-theme="light"] h2,:root[data-theme="light"] .s-title{font-family:'Fraunces',Georgia,serif;font-weight:700;letter-spacing:-.01em}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) h1,:root:not([data-theme="dark"]) h2,:root:not([data-theme="dark"]) .s-title{font-family:'Fraunces',Georgia,serif;font-weight:700;letter-spacing:-.01em}}
:root[data-theme="dark"] h1{font-weight:800;letter-spacing:-.025em}
:root[data-theme="light"] body{background-image:radial-gradient(circle at 18% 28%,rgba(255,255,255,.55) 0,transparent 28%),radial-gradient(circle at 78% 72%,rgba(255,255,255,.4) 0,transparent 35%);background-attachment:fixed}
.bb-kicker{display:inline-flex;align-items:center;gap:10px;font:500 .7rem 'JetBrains Mono',monospace;letter-spacing:.22em;text-transform:uppercase;color:var(--bb-acc);margin-bottom:10px}
.bb-kicker::before{content:"";width:26px;height:1px;background:currentColor}
/* the context strip has room: the page's own mobile squeezes do not apply there */
.bb-ctxin .s-clk{display:inline!important}
.bb-ctxin .s-persona,.bb-ctxin .persona{max-width:240px!important}
html.embed .bb{display:none!important}