/* Match the wordmark's fallback width and font metrics to Spectral. A cold
   visit may use the optional font's fallback, then Spectral on the next page. */
@font-face {
  font-family: "Spectral Wordmark Fallback";
  src: local("Times New Roman"), local("Liberation Serif");
  size-adjust: 109.4%;
  ascent-override: 96.8%;
  descent-override: 42.32%;
  line-gap-override: 0%;
}

/* Align line boxes rather than font baselines, and choose the mobile row
   layout explicitly so font loading cannot wrap the navigation. */
.site-header {
  align-items: center;
  flex-wrap: nowrap;
}

.site-header .wordmark {
  font-family: Spectral, "Spectral Wordmark Fallback", Georgia, "Times New Roman", serif;
  flex-shrink: 0;
  white-space: nowrap;
}

.site-header nav {
  flex-shrink: 0;
}

/* The mobile shell has 22px side margins; keep its sticky background inside
   the viewport, including when scrollbars overlay the page. */
@media (max-width: 600px) {
  body > .site-header::before {
    inset-inline: -22px;
  }
}

@media (max-width: 25em) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Preserve the reserved scrollbar space on browsers without gutter support. */
@supports not (scrollbar-gutter: stable) {
  html {
    overflow-y: scroll;
  }
}

/* Native dialog behavior for the existing article subscription design. */
dialog.article-subscribe {
  margin: 0;
  color: var(--foreground);
}

dialog.article-subscribe::backdrop {
  background: #25251c55;
  backdrop-filter: blur(2px);
}

main[tabindex="-1"]:focus {
  outline: none;
}

.writing-intro {
  margin: -8px 0 32px;
  line-height: 1.65;
}

.essay-description {
  color: var(--muted-foreground);
  margin: 7px 0 0;
  font-size: 1rem;
  line-height: 1.55;
}

.article-byline a {
  color: inherit;
  text-underline-offset: 3px;
}