/* Site navigation bar, shared by every page (2026-09-28-1210-site-navigation).
   Words and behaviour come from zweck-website/content/site-navigation.md.
   Colours are the pages' own tokens, with the same values as fallbacks. */

:root{--zn-h:76px}
@media(max-width:760px){:root{--zn-h:64px}}

/* The bar is fixed, so the page starts below it, and a jump to a section
   (/#how, /#waitlist) stops below it too. */
body{padding-top:var(--zn-h)}
section[id]{scroll-margin-top:calc(var(--zn-h) + 8px)}

.zn{position:fixed;top:0;left:0;right:0;z-index:90;height:var(--zn-h);
  background:var(--ink,#15211E);border-bottom:1px solid var(--line,#2C3A35);
  transition:opacity .6s ease,visibility .6s}
/* Homepage: the bar waits for the intro to finish or be skipped. */
html:not(.skip-intro) body.locked .zn{opacity:0;visibility:hidden}

.zn-in{max-width:1200px;height:100%;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;gap:8px}
.zn a{-webkit-tap-highlight-color:transparent}

.zn-home{display:inline-flex;align-items:center;gap:11px;min-height:44px;margin-right:auto;
  color:var(--paper,#FAF8F4);text-decoration:none}
.zn-home svg{display:block;flex:0 0 auto}
/* The site's wordmark style, as the homepage and Updates footers set it:
   serif, body weight, 19px, letter-spacing .18em, "ZWECK" in capitals. */
.zn-home span{font-family:var(--serif,'Fraunces',Georgia,serif);font-weight:300;font-size:19px;
  letter-spacing:.18em;line-height:1}

.zn-links{display:flex;align-items:center;gap:6px}
.zn-links a:not(.zn-join){display:inline-flex;align-items:center;min-height:44px;padding:0 14px;
  font-family:var(--sans,'Inter',sans-serif);font-size:14.5px;font-weight:400;
  color:#C6D2CB;text-decoration:none;transition:color .2s}
.zn-links a:not(.zn-join):hover{color:var(--paper,#FAF8F4)}
.zn-links a[aria-current="page"]{color:var(--paper,#FAF8F4);text-decoration:underline;
  text-decoration-color:var(--clay,#B9705A);text-decoration-thickness:2px;text-underline-offset:9px}

/* The join button: pale and rounded, so it never competes with a page's one clay action. */
.zn-join{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:0 20px;border-radius:999px;background:var(--paper,#FAF8F4);color:var(--ink,#15211E);
  font-family:var(--sans,'Inter',sans-serif);font-size:14.5px;font-weight:500;
  text-decoration:none;white-space:nowrap;transition:background .2s}
.zn-join:hover{background:#E6E2D9}
.zn-links .zn-join{margin-left:10px}

.zn a:focus-visible,.zn button:focus-visible{outline:2px solid var(--clay,#B9705A);outline-offset:2px}

.zn-join-sm,.zn-toggle,.zn-menu{display:none}

/* ============ PHONE ============ */
@media(max-width:760px){
  .zn-in{padding:0 16px 0 24px}
  .zn-links{display:none}
  .zn-join-sm{display:inline-flex;padding:0 16px;font-size:14px}
  .zn.open .zn-join-sm{visibility:hidden}

  .zn-toggle{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
    gap:5px;width:44px;height:44px;margin-left:4px;padding:0;border:none;background:transparent;
    cursor:pointer}
  .zn-toggle span{display:block;width:20px;height:1.5px;background:var(--paper,#FAF8F4);
    transition:transform .25s ease,opacity .2s}
  .zn.open .zn-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .zn.open .zn-toggle span:nth-child(2){opacity:0}
  .zn.open .zn-toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

  /* Full-screen menu under the bar, so the X sits where the menu button was. */
  .zn-menu{position:fixed;inset:0;z-index:-1;padding:calc(var(--zn-h) + 12px) 24px 32px;
    background:var(--ink,#15211E);flex-direction:column;overflow-y:auto}
  .zn-menu:not([hidden]){display:flex}
  .zn-menu ul{list-style:none;margin:0;padding:0}
  .zn-menu li{display:flex;align-items:center;justify-content:space-between;gap:12px;
    border-bottom:1px solid var(--line,#2C3A35)}
  .zn-menu li a{flex:1;display:flex;align-items:center;min-height:64px;
    font-family:var(--serif,'Fraunces',Georgia,serif);font-weight:300;font-size:30px;
    letter-spacing:-.02em;color:var(--paper,#FAF8F4);text-decoration:none}
  .zn-here{font-family:var(--mono,'JetBrains Mono',monospace);font-size:12px;letter-spacing:.06em;
    color:var(--clay,#B9705A);white-space:nowrap}
  .zn-join-full{margin-top:auto;width:100%;min-height:52px;font-size:16px}
}

html.zn-open,html.zn-open body{overflow:hidden}

@media(prefers-reduced-motion:reduce){
  .zn,.zn-toggle span{transition:none}
}

/* ============ FOOTER LINKS (every page) ============ */
.zf-links{display:flex;flex-wrap:wrap;gap:0 22px;margin-top:10px}
.zf-links a{display:inline-flex;align-items:center;min-height:44px;font-size:13px;
  color:var(--dim,#8FA098);text-decoration:underline;text-underline-offset:3px}
.zf-links a:hover{color:var(--paper,#FAF8F4)}
.zf-links a[aria-current="page"]{color:var(--paper,#FAF8F4)}
.zf-links a:focus-visible{outline:2px solid var(--clay,#B9705A);outline-offset:2px}