/* Angler — site header.
   Transparent over the hero, one flat vellum bar once you leave it.
   Colors are tokens only. */

/* Bar height is one number, because three things depend on it: the bar itself,
   the anchor clearance below, and the hero's top padding (that one lives in
   css/10-hero.css and is hard-coded — keep them in step by hand).
   84px is AgentPeek's proportion, not a guess: measured at 1440 their pill is 76px
   tall inside an 88px band, so 84 sits on their line for a bar with no top inset. */
:root {
  --nav-h:   84px;
  --nav-pad: 36px;
  /* The pill floats rather than sitting flush, so it needs its own top inset. */
  --nav-top: 12px;
  --nav-w:   1280px;   /* expanded, over the hero */
  --nav-w-in: 768px;   /* collapsed past the fold — AgentPeek's 48rem */
}
@media (max-width: 900px) { :root { --nav-pad: var(--gutter); } }
/* Fixed banner means every #anchor needs clearance: the inset, the bar, 8px of air. */
html { scroll-padding-top: calc(var(--nav-top) + var(--nav-h) + 8px); }

/* Now only a positioning frame. It must not intercept pointer events — it spans the
   viewport but the pill inside it does not, and without this the strip of page either
   side of a collapsed pill would be unclickable. */
.nav {
  position: fixed;
  inset: var(--nav-top) 0 auto 0;
  z-index: 100;
  padding-inline: var(--nav-pad);
  pointer-events: none;
}

/* The pill. Brand hard left, links centred, download hard right — but capped and
   centred rather than full-bleed, because a bar that runs edge to edge has no width
   to give back when it collapses.
   overflow:hidden + isolation:isolate keep the glass layers inside the radius and
   give the backdrop filter its own stacking context to sample. */
.nav__bar {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: var(--nav-w);
  margin-inline: auto;
  pointer-events: auto;
  border-radius: var(--r-pill);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  min-height: var(--nav-h);
  padding-inline: 26px;
  transition: max-width .46s cubic-bezier(.34, 1.28, .42, 1),
              box-shadow .32s var(--ease-house);
}

/* The collapse. Past 80px the pill draws in to 768px and the glass arrives with it.
   An open panel does the same at any scroll offset — otherwise the menu would hang off
   a fully transparent bar. */
.nav.is-stuck .nav__bar {
  max-width: var(--nav-w-in);
  box-shadow: 0 2px 4px rgb(20 30 34 / .10), 0 0 8px rgb(20 30 34 / .05);
}

/* ---------- liquid glass ----------
   Four layers, all transparent over the hero, all fading in together on collapse:
     0 nav__glass  the refraction — the backdrop, displaced through fractal noise
     1 nav__tint   a wash of vellum so page copy passing underneath stays illegible
     2 nav__spec   the specular edge, a light catching the inside of the rim
     4 ::before    the rim itself, a conic sweep masked down to one pixel
   Content sits on 3, between the specular and the rim. */
.nav__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.nav__glass,
.nav__tint,
.nav__spec {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .32s var(--ease-house);
}

/* blur(0px) is not a no-op and is not a mistake: it promotes the element to a
   backdrop-sampling layer WITHOUT softening it, so the SVG filter displaces a sharp
   image. That sharpness is the entire effect — you are meant to see the page behind
   bending, not a frosted panel. An earlier pass here used blur(16px) for contrast and
   the result read as plastic, so the blur is gone and the density is AgentPeek's. */
.nav__glass {
  z-index: 0;
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  filter: url(#nav-glass-warp);
  isolation: isolate;
  transform: translateZ(0);
  will-change: filter;
}
/* AgentPeek's #ffffff40. A wash, not a fill — at this density the refraction still
   carries and the pill still reads as a lens. */
.nav__tint { z-index: 1; background: rgb(255 255 255 / .25); }
/* #ffffffbf, their exact specular: a hard 1px catch on the top-left plus a soft bloom
   all round, which is what sells the pill as a solid piece of glass with thickness. */
.nav__spec {
  z-index: 2;
  box-shadow: inset 1px 1px rgb(255 255 255 / .75),
              inset 0 0 5px rgb(255 255 255 / .75);
}

/* The rim, verbatim from AgentPeek including its blues — a glass edge picks up the
   sky, not the object behind it, which is why theirs is cool against a warm page too.
   The hexes are the one deliberate exception to the no-raw-hex rule in README.md:
   they are a copied optical recipe, not palette, and paraphrasing them into --lake and
   --dawn is exactly what made the earlier attempt stop reading as glass.
   padding + mask-composite:exclude is what turns a full-bleed gradient into a 1px
   border that can hold a gradient — border-image cannot follow a pill radius. */
.nav__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  opacity: 0;
  background:
    conic-gradient(from -75deg,
      #143c7880, #96c8ff1a 5% 40%, #143c7880 50%, #96c8ff1a 60% 95%, #143c7880),
    linear-gradient(180deg, #dcf0ff80, #f0faff80);
  box-shadow: inset 0 0 0 .5px #dcf0ff80;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  transition: opacity .32s var(--ease-house);
}

.nav.is-stuck .nav__bar::before,
.nav.is-stuck .nav__glass,
.nav.is-stuck .nav__tint,
.nav.is-stuck .nav__spec,
.nav:has(.nav__panel.is-open) .nav__bar::before,
.nav:has(.nav__panel.is-open) .nav__glass,
.nav:has(.nav__panel.is-open) .nav__tint,
.nav:has(.nav__panel.is-open) .nav__spec { opacity: 1; }

/* Safari cannot run filter:url() against a backdrop — the pill renders empty. It gets
   a plain saturated blur and a heavier tint to make up the lost density.
   (-webkit-hyphens is the standard Safari-only @supports probe.) */
@supports (-webkit-hyphens: none) {
  .nav__glass {
    filter: none;
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
  }
  /* Their #ffffff80 — heavier here because there is no refraction to carry the
     surface, so the blur and the wash have to do all of it. */
  .nav__tint { background: rgb(255 255 255 / .5); }
}

/* Content rides above the tint and specular, below the rim. */
.nav__brand,
.nav__links,
.nav__right { position: relative; z-index: 3; }

/* ---------- brand ---------- */

/* AgentPeek's brand at 1440: a 40px icon against a 76px bar (0.53) with the wordmark
   at half the icon. Same ratio on an 84px bar puts the icon at 44. Their wordmark is
   20px/600 in a grotesk; ours is Fraunces, which only ships 400 and 600 here, so the
   extra weight they get from a heavier grotesk has to come out of size instead — 23px. */
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  justify-self: start;
  padding: 4px 2px;
  border-radius: var(--r-card);
}
.nav__mark {
  flex: none;
  width: 44px;
  height: 44px;
  filter: drop-shadow(0 1px 3px rgb(14 54 62 / .20));
}
.nav__word {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: -0.015em;
  color: var(--lake);
  transition: color .15s var(--ease-nav);
}
.nav__brand:hover .nav__word { color: var(--lake-dark); }

/* ---------- center links (x.ai hover treatment) ---------- */

.nav__links {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Light in value, heavy in weight — x.ai's treatment. 400 at 68% read fuzzy over the
   plate and muted the hover delta. Size: AgentPeek runs 16px/500 with 32px of clear
   air between link text on a 76px bar, which scales to 17px and 36px of air here
   (17px of padding either side plus the 2px gap).

   The 78% mix is a floor, not a preference. The bar is transparent until the page
   scrolls past 80px, so these composite against whatever the hero is painting behind
   them, and 17px/500 is NOT WCAG large text — the gate is 4.5:1, not 3:1. Growing the
   type does not move the ratio, so the mix is unchanged, but it does move the links
   8px further down the painting; re-measured on composited pixels at the worst
   transparent offset (scroll 80) it is 8.44:1, and 8.94:1 at rest. */
.nav__link {
  padding: 10px 17px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
  transition: color .15s var(--ease-nav);
}
.nav__link:hover,
.nav__link.is-active { color: var(--ink); }

/* ---------- right ---------- */

.nav__right {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
}
/* Their download pill is 44px on a 76px bar (0.58) at 16px text; ours is 48 on 84
   at 17px. min-height rather than padding-block so the 44px touch floor below is a
   no-op instead of a second size. */
.nav__cta {
  gap: 9px;
  min-height: 48px;
  padding: 0 22px;
  font-size: 17px;
}
/* The full Apple mark, sized the way the hero's glass button sizes it (height only,
   width from the 384x512 viewBox) so the two buttons carry an identical glyph. */
.nav__apple {
  height: 17px;
  width: auto;
  margin-top: -2px;
}

/* The only route to navigation on a phone, so the hit area is a full 44×44.
   The visible ring is the ::before, inset to keep the smaller button look. */
.nav__toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  /* No radius on the button itself — hit testing honours it and would shave
     the corners off the 44×44 target. The radius lives on the ring below. */
  color: var(--ink);
}
.nav__toggle::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: var(--r-field);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color .15s var(--ease-nav);
}
.nav__toggle:hover::before { background: var(--parchment); }

/* No hamburger theatrics — the two glyphs simply cross-fade. */
.nav__icon {
  position: absolute;
  transition: opacity .15s var(--ease-nav);
}
.nav__icon--close { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__icon--menu  { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__icon--close { opacity: 1; }

/* ---------- disclosure panel ---------- */

/* Out of flow: in normal flow a closed panel still measured 218px, making the
   fixed header a 284px opaque slab over the top of the page at every touch width. */
.nav__panel {
  position: absolute;
  /* 8px below the pill, and inset to the same gutter the pill sits in — .nav is now a
     full-width frame with padding-inline, so left/right:0 alone would let the panel
     run wider than the bar it hangs off. */
  top: calc(100% + 8px);
  left: var(--nav-pad);
  right: var(--nav-pad);
  max-width: var(--nav-w-in);
  margin-inline: auto;
  border-radius: var(--r-card);
  overflow: hidden;
  /* .nav is pointer-events:none so the page stays clickable either side of the pill;
     the panel has to opt back in. */
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  /* Descends from the bar rather than materialising in place: fading alone gave the
     panel no spatial connection to the toggle that opened it. 8px is enough to read
     as "came from up there" without turning a menu into a drawer. */
  transform: translateY(-8px);
  background: color-mix(in srgb, var(--vellum) 96%, transparent);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  box-shadow: 0 2px 4px rgb(20 30 34 / .10), 0 10px 30px -12px rgb(20 30 34 / .28);
  transition: opacity .24s var(--ease-house), transform .24s var(--ease-house),
              visibility 0s linear .24s;
}
.nav__panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .24s var(--ease-house), transform .24s var(--ease-house),
              visibility 0s linear 0s;
}
.nav__panel > .wrap {
  display: flex;
  flex-direction: column;
  padding-block: 4px 10px;
  /* Line up with the pill's own inner padding, not the page column. */
  max-width: none;
  padding-inline: 26px;
}
.nav__panelLink {
  padding: 14px 2px;
  font-size: 17px;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  border-bottom: 1px solid var(--line-soft);
  transition: color .15s var(--ease-nav);
}
.nav__panelLink:last-child { border-bottom: 0; }
.nav__panelLink:hover,
.nav__panelLink.is-active { color: var(--ink); }

/* ---------- responsive ---------- */

@media (max-width: 859px) {
  .nav__links { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav__bar { grid-template-columns: 1fr auto; }
  .nav__cta { min-height: 44px; }   /* touch target, not a size change */

  /* No refraction and no backdrop sampling on touch. A displacement map over a
     full-width element is the most expensive thing on the page and it costs the most
     on the hardware least able to pay; below this width the pill is nearly the
     viewport anyway, so there is no page either side of it to refract. Flat fill. */
  .nav__glass {
    filter: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    will-change: auto;
  }
  .nav__tint { background: var(--vellum); }
  /* Nothing to draw in from — the pill is already about as wide as the screen. */
  .nav.is-stuck .nav__bar { max-width: var(--nav-w); }
}

@media (min-width: 860px) {
  .nav__panel { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav__bar,
  .nav__bar::before,
  .nav__glass,
  .nav__tint,
  .nav__spec { transition: none; }
}

/* Phones. Brand + pill + a 44px toggle have to clear 320px of viewport minus two
   20px gutters, so the bar keeps the same proportional step down it always had
   (58/72 of the old bar => 68 of the new one) and everything inside steps with it.
   --nav-h drops here, which carries scroll-padding-top with it for free. */
@media (max-width: 430px) {
  :root { --nav-h: 68px; }
  .nav__bar { gap: 10px; }
  .nav__brand { gap: 9px; }
  .nav__mark { width: 34px; height: 34px; }
  .nav__word { font-size: 20px; }
  .nav__cta { min-height: 44px; padding: 0 15px; font-size: 15px; gap: 7px; }
  .nav__apple { height: 15px; }
  .nav__toggle::before { inset: 5px; }   /* 34px ring, 44px hit area */
}

/* 320-360px is the only place the three blocks actually run out of room. Shave the
   pill, not the 44px toggle and not the brand. */
@media (max-width: 360px) {
  .nav__cta { padding: 0 12px; font-size: 14px; gap: 6px; }
  .nav__apple { height: 14px; }
}