/* PDFlyHQ — blog/header.css
   Article header wrapper + dek + byline. Shared by every post (individual
   <link>, not bundled — see typography.css note). Breadcrumb is already
   styled by components/breadcrumb.css (global bundle); H1 by
   base/typography.css — this file only adds the two things unique to a
   post header: the dek and the byline. Scoped under .article-header.

   .tool-app here is the exact same page-shell rule every tool's own
   layout.css redefines (e.g. tools/compress-pdf/layout.css) — full width
   like the homepage's .home container, not an artificially narrow reading
   column. Blog posts don't have a dedicated layout.css, so it lives here.
   Every post's Index.cshtml puts the .tool-app class on its <article> for
   exactly this reason, and to unlock components/faq.css and
   components/related-tools.css, both of which only style elements under a
   .tool-app ancestor. */
.tool-app {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-8) var(--space-4) var(--space-16);
}

.article-header {
  padding-top: var(--space-6);
  text-align: left;
}

.article-header h1 { margin-top: var(--space-4); }

.article-header__dek {
  margin-top: var(--space-3);
  font-size: var(--text-md);
  color: var(--color-text-secondary);
}

.article-header__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}