/* Shared typography for every essay page and its header chrome.
   Link this AFTER the page's inline <style> so these rules win even if a
   new essay is copied from an older template that still has the faint
   15px italic declarations. Do not re-declare these selectors in a page
   style block.

   Sizes: tagline / back link / date / read time = 18px; dek = 20–26px.
   Color: #eaecf2 on #020407 (~17.4:1, well above WCAG AA 4.5:1).
   Italics are off for the header tagline and the dek. */

.nav-official {
  font-family: 'Playfair Display', serif;
  font-style: normal;
  font-size: 18px;
  line-height: 1.35;
  color: var(--d-white, #eaecf2);
}

.article-back {
  font-family: 'Share Tech Mono', monospace;
  font-size: 18px;
  letter-spacing: .08em;
  line-height: 1.45;
  color: var(--d-white, #eaecf2);
  text-transform: uppercase;
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  transition: color .2s;
}
.article-back:hover { color: var(--accent, #01C9FE); }

.article-meta { display: flex; align-items: center; gap: 8px 24px; flex-wrap: wrap; }

.article-author {
  font-family: 'Share Tech Mono', monospace;
  font-size: 18px;
  letter-spacing: .08em;
  line-height: 1.45;
  color: var(--accent, #01C9FE);
  text-transform: uppercase;
}

.article-date,
.article-read {
  font-family: 'Share Tech Mono', monospace;
  font-size: 18px;
  letter-spacing: .04em;
  line-height: 1.45;
  color: var(--d-white, #eaecf2);
}

.article-dek {
  font-family: 'Playfair Display', serif;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.6;
  color: var(--d-white, #eaecf2);
  max-width: 820px;
  margin: -8px 0 32px;
}

@media (max-width: 768px) {
  nav { flex-wrap: wrap; row-gap: 4px; }
  .nav-logo, .nav-official { white-space: nowrap; }
}