html {
  scrollbar-gutter: stable;
}

.journal-page-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.journal-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-block-size: 3rem;
  padding-inline: 1rem;
}

.journal-brand {
  min-width: 0;
}

.journal-brand .site-logo {
  width: min(12.5rem, 42vw);
  height: auto;
}

.journal-brand-post .site-logo {
  width: min(6.25rem, 42vw);
}

.journal-nav-links {
  display: flex;
  align-items: center;
  gap: clamp(0.125rem, 2vw, 0.75rem);
  flex-shrink: 0;
  margin-inline-start: auto;
  color: var(--journal-ink);
  font: 600 0.875rem/1.2 var(--journal-sans);
}

.journal-nav-timeline {
  display: flex;
  align-items: center;
}

.journal-nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.25rem;
  white-space: nowrap;
}

.journal-nav-links a:is(:hover, [aria-current]) {
  color: var(--journal-rust);
  text-decoration: underline;
  text-underline-offset: 0.35em;
}

.journal-nav-sort {
  width: 2.75rem;
  color: var(--journal-muted);
}

.journal-nav-links a.journal-nav-sort {
  justify-content: flex-end;
  padding-inline-end: 0.125rem;
}

.journal-nav-timeline a:last-child {
  padding-inline-start: 0;
}

@media (max-width: 360px) {
  .journal-nav-inner {
    gap: 0.25rem;
  }

  .journal-nav-links a {
    padding-inline: 0.375rem;
  }

  .journal-nav-sort {
    width: 2rem;
  }
}