@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500&display=swap');

/* ============================================================
   Shared site banner for the standalone apps (Lab, Trainer,
   Counsel). Self-contained + scoped under .brnav so it never
   collides with an app's own CSS, and visually identical to the
   server-rendered masthead on the content pages.
   Brand tokens are hardcoded (apps don't load the site stylesheet).
   ============================================================ */
.brnav{font-family:'Fraunces',Georgia,serif;position:fixed;top:0;left:0;right:0;z-index:1000;background:#0c0b09;border-bottom:1px solid #2a2418;}
/* reserve space for the fixed banner so app content isn't hidden under it */
body{padding-top:78px;}
.brnav *{box-sizing:border-box;}
.brnav .br-in{max-width:760px;margin:0 auto;padding:24px 28px 18px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;}
.brnav a{text-decoration:none;color:#9d917c;}

.brnav .br-mark{display:inline-flex;align-items:center;gap:12px;color:#c9a96b;font-size:15px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;white-space:nowrap;}
.brnav .br-mark:hover{color:#c9a96b;}
.brnav .br-mark img{width:36px;height:36px;border-radius:7px;display:block;}

.brnav .br-links{display:flex;align-items:center;gap:26px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;}
.brnav .br-links>a:hover{color:#ecca84;}

.brnav .br-grp{position:relative;display:inline-flex;align-items:center;}
.brnav .br-grp>a{display:inline-flex;align-items:center;gap:6px;}
.brnav .br-caret{font-size:9px;color:#a8884e;transition:color .2s;}
.brnav .br-grp:hover .br-caret,.brnav .br-grp:focus-within .br-caret{color:#ecca84;}

.brnav .br-menu{position:absolute;top:calc(100% + 16px);right:0;z-index:60;min-width:300px;background:#15120e;border:1px solid #3b3424;border-radius:5px;padding:10px;display:flex;flex-direction:column;gap:1px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility .18s;box-shadow:0 22px 46px -24px rgba(0,0,0,.85);}
.brnav .br-menu::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px;}
.brnav .br-grp:hover .br-menu,.brnav .br-grp:focus-within .br-menu{opacity:1;visibility:visible;transform:translateY(0);}
.brnav .br-menu a{display:block;padding:10px 12px;border-radius:3px;text-transform:none;letter-spacing:0;}
.brnav .br-menu a:hover{background:rgba(201,169,107,.06);}
.brnav .br-mt{display:block;font-size:15px;color:#e9e0cf;}
.brnav .br-menu a:hover .br-mt{color:#ecca84;}
.brnav .br-md{display:block;font-size:12px;line-height:1.45;color:#9d917c;margin-top:3px;}

.brnav .br-counsel{border:1px solid #a8884e;color:#c9a96b;padding:7px 15px;border-radius:2px;}
.brnav .br-counsel:hover{border-color:#c9a96b;color:#ecca84;}

.br-toggle{position:absolute;width:1px;height:1px;opacity:0;}
.brnav .br-burger{display:none;}
@media (max-width:760px){
  .brnav .br-in{flex-direction:row;flex-wrap:wrap;align-items:center;gap:0;}
  .brnav .br-mark{flex:1 1 auto;}
  .brnav .br-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;padding:12px;margin:-8px;cursor:pointer;}
  .brnav .br-burger span{display:block;height:2px;width:100%;background:#c9a96b;border-radius:2px;transition:transform .3s ease,opacity .2s ease;}
  .br-toggle:checked ~ .br-burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .br-toggle:checked ~ .br-burger span:nth-child(2){opacity:0;}
  .br-toggle:checked ~ .br-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .brnav .br-links{flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;width:100%;max-height:0;overflow:hidden;transition:max-height .38s ease;}
  .br-toggle:checked ~ .br-links{max-height:88vh;overflow-y:auto;margin-top:14px;}
  .brnav .br-links>a,.brnav .br-grp>a{display:block;padding:15px 2px;border-top:1px solid #2a2418;font-size:15px;}
  .brnav .br-grp{display:block;width:100%;}
  .brnav .br-menu{position:static;opacity:1;visibility:visible;transform:none;min-width:0;width:100%;background:none;border:0;box-shadow:none;border-radius:0;padding:0 0 6px 16px;margin:0;}
  .brnav .br-menu::before{display:none;}
  .brnav .br-menu a{padding:12px 2px;}
  .brnav .br-md{display:none;}
  .brnav .br-caret{display:none;}
  .brnav .br-counsel{display:block;border:0;color:#ecca84;padding:16px 2px;}
}