/* Shared by index.html and messages.html (404.html keeps its own inline copy). */

/* Every anchor jump, focus() and scrollIntoView stops below the fixed nav. */
html {
  scroll-padding-top: 72px;
}

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  /* The bar spans the full width but only its links should take taps --
     otherwise the empty middle swallows taps on content underneath. */
  pointer-events: none;
  transition: background-color .3s, box-shadow .3s;
}

.site-nav a {
  pointer-events: auto;
}

/* Once the page scrolls, photos pass under the nav: back it with a near-
   opaque cream so the links stay readable. A plain tint rather than a
   backdrop blur -- the animated background blobs underneath would make
   the browser re-blur it every frame. */
.site-nav.is-scrolled {
  background-color: rgba(250, 245, 239, 0.94);
  box-shadow: 0 1px 0 var(--line);
}

.site-nav-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0.28em;
  font-family: var(--font-serif);
  font-size: 20px;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-decoration: none;
  transition: color .2s;
}

.site-nav-logo:hover {
  color: var(--rose-deep-hover);
}

.site-nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
}

.site-nav-link {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-decoration: none;
  transition: color .2s;
}

.site-nav-link:hover {
  color: var(--rose-deep);
}