/* =========================================================================
   THE NAV. ONE COMPONENT, EVERY PAGE.

   This file plus assets/nav.js are the whole nav. Both pages load both, so
   the bar looks the same, sits the same, and condenses on scroll the same.

   It used to be two navs. The homepage carried its styling inline and drove
   the condense from its React component; the notes index had a plain sticky
   bar that never condensed. Making the LINKS match was not enough, because
   the behaviour is what you see. Values below are lifted from the homepage,
   which was the one that behaved correctly.

   Tokens are read with fallbacks, because the homepage export defines a
   smaller token set than assets/site.css does.
   ========================================================================= */

.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;justify-content:center;
  padding:14px var(--gutter,32px);
  pointer-events:none;                 /* the band is not clickable */
}

.nav-in{
  pointer-events:auto;                 /* the bar itself is */
  width:100%;max-width:var(--shell,1320px);height:68px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 12px 0 24px;
  background:rgba(18,17,16,0);
  border:1px solid rgba(237,233,225,0);
  box-shadow:0 0 0 0 rgba(0,0,0,0);
  transition:
    max-width .5s cubic-bezier(.22,1,.36,1),
    background .35s ease,
    box-shadow .35s ease,
    height .35s ease,
    padding .35s ease,
    border-color .35s ease;
}

/* condensed. nav.js adds this once the page has scrolled past the threshold
   the page declares in data-condense-at. */
.nav-in.is-condensed{
  max-width:720px;height:58px;
  padding:0 10px 0 20px;
  background:rgba(18,17,16,0.86);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-color:rgba(237,233,225,0.14);
  box-shadow:0 16px 42px -18px rgba(0,0,0,0.75);
}

.mark{
  font-family:var(--font-mono,'Geist Mono',monospace);
  font-size:var(--t-6,clamp(16px,1.55vw,21px));font-weight:500;
  letter-spacing:-.02em;color:var(--ink,#EDE9E1);white-space:nowrap;
}
.mark i{font-style:italic}

.nav-links{display:flex;align-items:center;gap:2px}
.nav-links a{
  display:inline-flex;align-items:center;height:36px;padding:0 13px;
  font-family:var(--font-mono,'Geist Mono',monospace);
  font-size:var(--t-label,11px);font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--quiet,#8C8579);
  transition:color .2s,background .2s;
}
.nav-links a:hover,
.nav-links a[aria-current]{color:var(--ink,#EDE9E1);background:rgba(237,233,225,0.07)}

/* the rolling label. two stacked copies, the second rides up on hover. */
.vx-roll-in{position:relative;display:inline-flex;overflow:hidden}
.vx-roll-in .vx-a,.vx-roll-in .vx-b{display:inline-flex;transition:transform .55s cubic-bezier(.19,1,.22,1)}
.vx-roll-in .vx-b{position:absolute;inset:0;transform:translateY(110%);color:var(--ink,#EDE9E1)}
.vx-roll:hover .vx-a{transform:translateY(-110%)}
.vx-roll:hover .vx-b{transform:translateY(0)}

.book{
  flex:none;display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 20px;
  background:var(--ink,#EDE9E1);color:var(--bg-a,#121110);
  font-family:var(--font-mono,'Geist Mono',monospace);
  font-size:var(--t-label,11px);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  transition:background .25s,gap .3s cubic-bezier(.22,1,.36,1);
}
.book:hover{background:var(--ink-hi,#FFFFFF);gap:14px}
.book span{font-family:var(--font,'Schibsted Grotesk',sans-serif);font-size:var(--t-7,clamp(13px,1.1vw,16px));line-height:1}

/* below this width the links drop and the button tightens, so the bar still
   fits on one line. */
@media(max-width:720px){
  .nav-links{display:none}
  .book{height:38px;padding:0 14px}
  .nav-in.is-condensed{max-width:none}
}

@media(prefers-reduced-motion:reduce){
  .nav-in,.vx-roll-in .vx-a,.vx-roll-in .vx-b{transition:none}
}