/* ==========================================================================
   Site header
   ========================================================================== */

/* Solid by default (so it stays readable without JS). With JS it is transparent
   at the very top, on the same grained paper as the hero, and turns solid with a
   rule as soon as the page scrolls. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--rule);
  background: rgb(245 241 232 / 0.94);
  background: color-mix(in oklab, var(--paper) 94%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
          backdrop-filter: saturate(1.4) blur(14px);
  transition: border-color var(--duration-normal) linear,
              background-color var(--duration-normal) linear;
}

.js .site-header:not(.is-stuck) {
  border-bottom-color: transparent;
  background: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.25rem;
}

/* Wordmark ------------------------------------------------------------------ */

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.wordmark__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  transition: transform var(--duration-normal) var(--ease-out-expo);
}

.wordmark:hover .wordmark__dot { transform: scale(1.9); }

/* Nav ----------------------------------------------------------------------- */

/* On phones only the section links hide; "Get in touch" stays in reach. */
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
}

.site-nav__link { display: none; }

@media (min-width: 52rem) {
  .site-nav__link { display: inline; }
}

.site-nav__link {
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  padding-block: 0.35rem;
  position: relative;
  transition: color var(--duration-fast) linear;
}

.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-normal) var(--ease-out-expo);
}

.site-nav__link:hover,
.site-nav__link[aria-current="true"] { color: var(--ink); }

.site-nav__link:hover::after,
.site-nav__link[aria-current="true"]::after { transform: scaleX(1); }

.site-header .btn {
  padding: 0.6em 1.15em;
  font-size: 0.875rem;
}