/* Shared navigation for the homepage and Capture. */
:root { --site-header-height: 74px; }

.nav {
  --gutter: 56px;
  --line: #1a1a1a;
  --line-4: #232323;
  --fg: #f5f5f5;
  --fg-muted: #9a9a9a;
  --fg-muted-2: #8a8a8a;
  font-family: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--site-header-height);
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--line);
  background: #050505e6;
  backdrop-filter: blur(12px);
}

.brand { display: flex; align-items: center; gap: 12px; }

.brand__mark {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.brand__name { font-weight: 700; font-size: 17px; letter-spacing: .04em; }

.brand__suffix {
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: .34em;
  color: var(--fg-muted-2);
  margin-top: 2px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-weight: 500;
  font-size: 13.5px;
  color: var(--fg-muted);
}

.nav__links a:not(.btn) { color: var(--fg-muted); transition: color .2s ease; }
.nav__links a:not(.btn):hover,
.nav__links a:not(.btn)[aria-current="page"] { color: var(--fg); }

.nav__toggle { display: none; }

.nav button { margin: 0; padding: 0; font: inherit; background: none; cursor: pointer; }
.nav .btn {
  display: inline-block;
  font-weight: 600;
  font-size: 12.5px;
  color: #050505;
  background: linear-gradient(160deg, #ffffff 0%, #c9cdd4 55%, #eef0f3 100%);
  padding: 10px 20px;
  border-radius: 99px;
  box-shadow: 0 0 18px #ffffff26;
  transition: box-shadow .25s ease, transform .25s ease;
}
.nav .btn:hover { color: #050505; box-shadow: 0 0 42px #ffffff55, inset 0 -1px 2px #00000030; transform: translateY(-1px); }
.nav :focus-visible { outline: 2px solid #ffffff80; outline-offset: 3px; border-radius: 4px; }
@media (max-width: 1040px) { .nav { --gutter: 32px; } }
@media (max-width: 760px) {
  :root { --site-header-height: 77px; }
  .nav { --gutter: 20px; }
  /* The same menu is disclosed by the toggle on both pages. */
  .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 20px;
    background: #050505f2;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    font-size: 15px;
  }
  .nav__links[hidden] { display: none; }
  .nav .nav__links a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .nav__links .btn { margin-top: 14px; text-align: center; }

  .nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line-4);
    border-radius: 10px;
    color: var(--fg);
  }

}
@media (prefers-reduced-motion: reduce) { .nav .btn:hover { transform: none; } }