/* SHABBA family kit: what every site shares with the hub. Each page sets --c on <html> to its own space colour. */
:root{
  --ground:#070706; --line:rgba(236,232,223,.1);
  --ink:#ece8df; --ink-2:rgba(236,232,223,.76); --ink-3:rgba(236,232,223,.54);
  --vis:#4fd6e8; --arc:#c9f04a; --ref:#ff9a3d; --plg:#ff7a8a; --mus:#ff6a52;
  --display:"Archivo",system-ui,sans-serif; --text:"Hanken Grotesk",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  --wrap:min(1320px,calc(100vw - 64px)); --r:14px; --c:var(--ink);
  --bass:0; --mid:0; --high:0; --lvl:0; --beat:0;
  --duration-quick:150ms; --duration-fast:250ms; --duration-medium:350ms; --duration-slow:400ms;
  --ease-smooth-out:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{background:var(--ground);color:var(--ink);scrollbar-color:#3a352f var(--ground)}
body{margin:0;overflow-x:clip;font:400 17px/1.55 var(--text);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
::selection{background:var(--ink);color:var(--ground)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:8px}
img,video{display:block;max-width:100%}
.wrap{width:var(--wrap);margin:0 auto}
h1,h2,h3{font-family:var(--display);font-stretch:125%;font-weight:800;letter-spacing:-.02em;line-height:.92;margin:0;text-transform:uppercase;text-wrap:balance}
h1 em,h2 em{font-style:normal;color:var(--c)}
p{margin:0}
.lede{font-size:clamp(17px,1.4vw,20px);color:var(--ink-2);max-width:48ch}
.mono{font:500 13px/1.4 var(--mono);color:var(--ink-3)}

.btn{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 24px;border-radius:999px;font:600 15px var(--text);white-space:nowrap;cursor:pointer;border:1px solid transparent;background:transparent;color:var(--ink);transition:transform var(--duration-quick) var(--ease-smooth-out),background-color var(--duration-quick) var(--ease-smooth-out),border-color var(--duration-quick) var(--ease-smooth-out)}
.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(1px) scale(.98)}
.btn-1{background:var(--ink);color:var(--ground)}.btn-1:hover{background:#fff}
.btn-2{border-color:rgba(236,232,223,.3)}.btn-2:hover{border-color:var(--ink)}
.acts{display:flex;gap:10px;flex-wrap:wrap}

/* the family bar: the SHABBA wordmark (one logo on screen at a time), which space you are in, the way to the others, the sound */
.bar{position:fixed;inset:0 0 auto;z-index:40;border-bottom:1px solid transparent;transition:background-color var(--duration-medium) var(--ease-smooth-out),border-color var(--duration-medium) var(--ease-smooth-out)}
.bar.solid{background:rgba(7,7,6,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:var(--line)}
.bar .wrap{position:relative;display:flex;align-items:center;gap:20px;height:68px}
.bar .home{display:flex;align-items:center;gap:14px}
.bar .wm{height:16px;width:auto;transition:opacity var(--duration-medium) var(--ease-smooth-out)}
.bar.hide-wm .wm,.bar.hide-wm .space{opacity:0;pointer-events:none}
.bar .space{transition:opacity var(--duration-medium) var(--ease-smooth-out)}
.bar .space{margin-left:-6px;font:600 16px/1 var(--text);letter-spacing:-.01em;color:var(--c)}
.bar .space i{display:none}
.bar nav.local{position:absolute;left:50%;top:50%;translate:-50% -50%;display:flex;align-items:center;gap:30px}
.bar nav.local a{position:relative;display:block;line-height:1.2;padding:10px 0;font:500 15px var(--text);color:var(--ink-2);transition:color var(--duration-quick) var(--ease-smooth-out)}
.bar nav.local a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1.5px;border-radius:1px;background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform var(--duration-fast) var(--ease-smooth-out)}
.bar nav.local a:hover,.bar nav.local a.on{color:var(--ink)}
.bar nav.local a:hover::after,.bar nav.local a.on::after{transform:scaleX(1)}
.bar .right{margin-left:auto;display:flex;align-items:center;gap:10px}

/* the switcher: every space one click away */
.spaces{position:relative}
.spaces>button{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(--ink);font:600 14px var(--text);cursor:pointer;transition:border-color var(--duration-quick) var(--ease-smooth-out)}
.spaces>button:hover,.spaces.open>button{border-color:var(--ink)}
.spaces>button svg{transition:rotate var(--duration-fast) var(--ease-smooth-out)}.spaces.open>button svg{rotate:180deg}
.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,.96);border:1px solid var(--line);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 var(--duration-quick) var(--ease-smooth-out),scale var(--duration-quick) var(--ease-smooth-out),translate var(--duration-quick) var(--ease-smooth-out)}
.spaces.open ul{opacity:1;scale:1;translate:0 0;pointer-events:auto;transition-duration:var(--duration-fast)}
.spaces li a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;font:500 15px var(--text);color:var(--ink-2);transition:background-color var(--duration-quick) var(--ease-smooth-out),color var(--duration-quick) var(--ease-smooth-out)}
.spaces li a:hover{background:rgba(236,232,223,.06);color:var(--ink)}
.spaces li a i{width:8px;height:8px;border-radius:50%;background:var(--sc,var(--ink-3))}
.spaces li a span{margin-left:auto;font:500 12px var(--mono);color:var(--ink-3)}
.spaces li a[aria-current]{color:var(--ink)}
.spaces li.hub{border-top:1px solid var(--line);margin-top:6px;padding-top:6px}

.sound{display:flex;align-items:center;gap:12px;height:42px;padding:0 16px;border-radius:999px;border:1px solid rgba(236,232,223,.22);background:rgba(7,7,6,.6);color:var(--ink);font:600 14px var(--text);cursor:pointer;transition:border-color var(--duration-quick) var(--ease-smooth-out)}
.sound:hover,.is-playing .sound{border-color:var(--ink)}
.eq{display:flex;align-items:end;gap:3px;height:15px}.eq i{width:3px;height:15px;border-radius:2px;background:currentColor;transform-origin:bottom}

/* the aurora behind every page, in the space's own colour */
.sky{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}

/* sections */
section{position:relative}
.sec{padding:140px 0}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:48px;align-items:end;margin-bottom:56px}
.sec-head h2{font-size:clamp(40px,5vw,80px)}
.sec-head .lede{justify-self:end}

/* footer: the big wordmark comes back, and the whole family */
.close{padding:150px 0 56px;border-top:1px solid var(--line)}
.close .wm-foot{width:min(100%,640px);height:auto;opacity:calc(.85 + var(--bass) * .15)}
.foot{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap;margin-top:52px}
.foot nav{display:flex;gap:22px;flex-wrap:wrap;font-size:15px;color:var(--ink-2)}
.foot nav a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size var(--duration-fast) var(--ease-smooth-out),color var(--duration-quick) var(--ease-smooth-out)}
.foot nav a:hover{background-size:100% 1px;color:var(--ink)}

@media (max-width:1199px){.bar nav.local{display:none}}
@media (max-width:980px){.sec-head{grid-template-columns:1fr}.sec-head .lede{justify-self:start}}
@media (max-width:620px){
  :root{--wrap:calc(100vw - 32px)}
  .sound [data-sound-label],.spaces>button span{display:none}
  .bar .space{display:none}
  .acts .btn{flex:1;justify-content:center}
  .sec{padding:96px 0}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}