/* ─────────────────────────────────────────────────────────────
   HIGHZAK — the one bar that ties the site together.
   Collection · Studio · Academy on every page. Dark glass, so it reads
   over the black worlds and the light ones alike.
   ───────────────────────────────────────────────────────────── */
.hzn{
  --hzn-ink:#f4f4f7; --hzn-dim:rgba(244,244,247,.62);
  --hzn-glass:rgba(12,12,18,.58); --hzn-line:rgba(255,255,255,.12);
  --hzn-ease:cubic-bezier(.16,1,.3,1);
  position:fixed; z-index:100; top:max(14px, env(safe-area-inset-top));
  left:50%; transform:translate(-50%,0);
  width:min(1120px, calc(100% - 32px));
  display:flex; align-items:center; gap:14px;
  padding:7px 7px 7px 20px; border-radius:999px;
  background:var(--hzn-glass); border:1px solid var(--hzn-line);
  -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 12px 40px -18px rgba(0,0,0,.55);
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--hzn-ink); -webkit-font-smoothing:antialiased;
  transition:transform .45s var(--hzn-ease), background .3s ease, opacity .3s ease;
}
.hzn *{box-sizing:border-box}
.hzn a{color:inherit;text-decoration:none}
.hzn.is-hidden{transform:translate(-50%,calc(-100% - 24px))}
.hzn.is-solid{--hzn-glass:rgba(10,10,15,.8)}

/* a page that owns the top of the screen (the course game) gets the bar in
   the flow instead, above its own sticky header */
.hzn.hzn--static{position:relative;top:auto;left:auto;transform:none;
  margin:14px auto 0;z-index:3}

.hzn-brand{font-weight:900;font-size:.8rem;letter-spacing:.32em;text-transform:uppercase;
  white-space:nowrap;padding-block:8px;margin-inline-end:auto}

.hzn-links{position:relative;display:flex;align-items:center;gap:2px;padding:3px;border-radius:999px;
  background:rgba(255,255,255,.04)}
.hzn-links a{position:relative;z-index:1;display:block;padding:9px 16px;border-radius:999px;
  font-size:.82rem;font-weight:500;letter-spacing:.01em;color:var(--hzn-dim);white-space:nowrap;
  transition:color .25s ease}
.hzn-links a:hover,.hzn-links a[aria-current="page"],.hzn-links a.is-lit{color:var(--hzn-ink)}
.hzn-ind{position:absolute;z-index:0;top:3px;bottom:3px;left:0;width:0;border-radius:999px;
  background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  opacity:0;transition:transform .42s var(--hzn-ease), width .42s var(--hzn-ease), opacity .25s ease}
.hzn-ind.is-on{opacity:1}

.hzn-cta{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;
  background:#f4f4f7;color:#0b0b10 !important;font-size:.8rem;font-weight:600;white-space:nowrap;
  transition:transform .25s var(--hzn-ease), background .25s ease}
.hzn-cta:hover{background:#fff;transform:translateY(-1px)}
.hzn-cta:active{transform:scale(.97)}

.hzn a:focus-visible,.hzn button:focus-visible{outline:2px solid #7fd2ff;outline-offset:3px}

/* ── phones: brand + menu; the links drop into a sheet ── */
.hzn-menu{display:none;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:0;
  background:rgba(255,255,255,.1);color:var(--hzn-ink);font:600 .8rem/1 'Archivo',system-ui,sans-serif;
  cursor:pointer}
.hzn-menu i{display:block;width:14px;height:8px;position:relative}
.hzn-menu i::before,.hzn-menu i::after{content:"";position:absolute;left:0;right:0;height:1.5px;
  background:currentColor;border-radius:2px;transition:transform .3s var(--hzn-ease)}
.hzn-menu i::before{top:0}.hzn-menu i::after{bottom:0}
.hzn.is-open .hzn-menu i::before{transform:translateY(3.25px) rotate(45deg)}
.hzn.is-open .hzn-menu i::after{transform:translateY(-3.25px) rotate(-45deg)}

@media (max-width:760px){
  /* on phones the layout viewport can be a few px wider than the screen;
     vw is the screen, so the bar centres on what the eye sees */
  .hzn{padding:6px 6px 6px 18px;flex-wrap:wrap;border-radius:26px;left:50vw;width:calc(100vw - 32px)}
  .hzn.hzn--static{left:auto;width:calc(100vw - 32px)}
  .hzn-menu{display:inline-flex}
  .hzn-links,.hzn-cta{display:none}
  .hzn.is-open .hzn-links{display:flex;flex-direction:column;align-items:stretch;order:3;width:100%;
    margin:8px 0 4px;background:none;padding:0}
  .hzn.is-open .hzn-links a{padding:14px 12px;font-size:1rem;border-radius:14px}
  .hzn.is-open .hzn-links a[aria-current="page"]{background:rgba(255,255,255,.1)}
  .hzn.is-open .hzn-cta{display:flex;justify-content:center;order:4;width:100%;padding:14px;margin-bottom:4px;font-size:.95rem}
  .hzn-ind{display:none}
}

@media (prefers-reduced-motion:reduce){
  .hzn,.hzn-ind,.hzn-cta,.hzn-menu i::before,.hzn-menu i::after{transition:none}
}