/* SHABBA family bar and footer, self-contained so any site can drop them in without taking the hub's look.
   Set --fam-c on <html> (the space's colour). Needs Hanken Grotesk and JetBrains Mono loaded. */
.fam-bar{--fi:#ece8df;--fi2:rgba(236,232,223,.76);--fi3:rgba(236,232,223,.54);--fl:rgba(236,232,223,.1);--fe:cubic-bezier(.22,1,.36,1);
  position:fixed;inset:0 0 auto;z-index:60;border-bottom:1px solid transparent;font-family:"Hanken Grotesk",system-ui,sans-serif;color:var(--fi);transition:background-color 350ms var(--fe),border-color 350ms var(--fe)}
.fam-bar.solid{background:rgba(7,7,6,.84);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:var(--fl)}
.fam-bar .in{position:relative;display:flex;align-items:center;gap:20px;height:68px;width:min(1320px,calc(100vw - 64px));margin:0 auto}
.fam-bar a{color:inherit;text-decoration:none}
.fam-bar .home{display:flex;align-items:center}
.fam-bar .wm{display:block;height:16px;width:auto;transition:opacity 350ms var(--fe)}
.fam-bar.hide-wm .wm,.fam-bar.hide-wm .space{opacity:0;pointer-events:none}
.fam-bar .space{transition:opacity 350ms var(--fe)}
.fam-bar .space{margin-left:-6px;font:600 16px/1 "Hanken Grotesk",system-ui,sans-serif;letter-spacing:-.01em;text-transform:none;color:var(--fam-c)}
.fam-bar .space i{display:none}
.fam-bar .local{position:absolute;left:50%;top:50%;bottom:auto;translate:-50% -50%;display:flex;align-items:center;gap:30px;margin:0;padding:0;height:auto;background:none;border:0}
.fam-bar .local a{position:relative;display:block;line-height:1.2;padding:10px 0;font:500 15px "Hanken Grotesk",system-ui,sans-serif;letter-spacing:0;text-transform:none;color:var(--fi2);transition:color 150ms var(--fe)}
.fam-bar .local a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1.5px;border-radius:1px;background:var(--fam-c);transform:scaleX(0);transform-origin:left;transition:transform 250ms var(--fe)}
.fam-bar .local a:hover,.fam-bar .local a.on{color:var(--fi)}
.fam-bar .local a:hover::after,.fam-bar .local a.on::after{transform:scaleX(1)}
.fam-bar .right{margin-left:auto;display:flex;align-items:center;gap:10px}
.fam-bar .cta{display:inline-flex;align-items:center;height:42px;padding:0 18px;border-radius:999px;background:var(--fam-c);color:#0b0b0a;font-size:14px;font-weight:600;transition:transform 150ms var(--fe),filter 150ms var(--fe)}
.fam-bar .cta:hover{transform:translateY(-1px);filter:brightness(1.08)}.fam-bar .cta:active{transform:translateY(1px) scale(.98)}
.fam-spaces{position:relative}
.fam-spaces>button,.fam-sound{display:flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:999px;border:1px solid rgba(236,232,223,.22);background:rgba(7,7,6,.6);color:var(--fi);font:600 14px "Hanken Grotesk",system-ui,sans-serif;cursor:pointer;transition:border-color 150ms var(--fe)}
.fam-spaces>button:hover,.fam-spaces.open>button,.fam-sound:hover,.is-playing .fam-sound{border-color:var(--fi)}
.fam-spaces>button svg{transition:rotate 250ms var(--fe)}.fam-spaces.open>button svg{rotate:180deg}
.fam-spaces ul{position:absolute;right:0;top:calc(100% + 8px);margin:0;padding:8px;list-style:none;min-width:250px;border-radius:16px;background:rgba(16,15,14,.97);border:1px solid var(--fl);box-shadow:0 30px 80px rgba(0,0,0,.6);opacity:0;scale:.97;translate:0 -4px;transform-origin:top right;pointer-events:none;transition:opacity 150ms var(--fe),scale 150ms var(--fe),translate 150ms var(--fe)}
.fam-spaces.open ul{opacity:1;scale:1;translate:0 0;pointer-events:auto;transition-duration:250ms}
.fam-spaces li a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;font-size:15px;font-weight:500;color:var(--fi2);transition:background-color 150ms var(--fe),color 150ms var(--fe)}
.fam-spaces li a:hover{background:rgba(236,232,223,.06);color:var(--fi)}
.fam-spaces li a i{width:8px;height:8px;border-radius:50%;background:var(--sc,var(--fi3))}
.fam-spaces li a span{margin-left:auto;font:500 12px "JetBrains Mono",ui-monospace,monospace;color:var(--fi3)}
.fam-spaces li a[aria-current]{color:var(--fi)}
.fam-spaces li.hub{border-top:1px solid var(--fl);margin-top:6px;padding-top:6px}
.fam-sound .eq{display:flex;align-items:end;gap:3px;height:15px}.fam-sound .eq i{width:3px;height:15px;border-radius:2px;background:currentColor;transform-origin:bottom}
.fam-foot{--fi2:rgba(236,232,223,.76);--fi3:rgba(236,232,223,.54);padding:120px 0 48px;border-top:1px solid rgba(236,232,223,.1);background:linear-gradient(transparent,rgba(0,0,0,.28));color:#ece8df;font-family:"Hanken Grotesk",system-ui,sans-serif}
.fam-foot .in{width:min(1320px,calc(100vw - 64px));margin:0 auto}
.fam-foot .wm-foot{display:block;width:min(100%,640px);height:auto}
.fam-foot .row{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap;margin-top:40px}
.fam-foot nav{display:flex;gap:22px;flex-wrap:wrap;font-size:15px;color:var(--fi2)}
.fam-foot nav a{font:500 15px "Hanken Grotesk",system-ui,sans-serif;letter-spacing:0;text-transform:none;color:inherit;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size 250ms cubic-bezier(.22,1,.36,1),color 150ms}
.fam-foot nav a:hover{background-size:100% 1px;color:#ece8df}
.fam-foot p{margin:0;font:500 13px "JetBrains Mono",ui-monospace,monospace;letter-spacing:0;text-transform:none;color:var(--fi3)}
@media (max-width:1199px){.fam-bar .local{display:none}}
@media (max-width:620px){.fam-bar .in,.fam-foot .in{width:calc(100vw - 32px)}.fam-bar .space,.fam-bar .cta,.fam-sound [data-sound-label],.fam-spaces>button span{display:none}.fam-foot{padding-top:88px}}