/* Reading typography system for article and blog pages.
   Loaded after reading.css so these rules are the final word.
   Marketing, admin, and embedded games are unaffected. */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400..500;1,6..72,400..500&display=swap');

.reading-page {
  --font-reading: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-ui: 'Nunito Sans', system-ui, sans-serif;
  --font-code: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Title and subtitle */
.reading-page :is(.document-hero, .article-hero) h1 {
  font-family: var(--font-reading);
  font-size: clamp(36px, 3.6vw, 52px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.015em;
  font-optical-sizing: auto;
}

.reading-page .document-hero.article-hero .article-hero-tagline,
.reading-page .document-hero:not(.article-hero) > .container > p:first-of-type {
  font-family: var(--font-reading);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.4;
  font-optical-sizing: auto;
}

/* Dates and metadata */
.reading-page .document-hero.article-hero .article-hero-byline,
.reading-page .document-hero:not(.article-hero) > .container > p:last-of-type,
.reading-page .related-article .related-article-meta {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

/* Body copy */
.reading-page .prose {
  font-family: var(--font-reading);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.65;
  font-optical-sizing: auto;
}

@media (min-width: 1024px) {
  .reading-page .prose { font-size: 20px; }
}

.reading-page .prose p { line-height: 1.65; }

.reading-page .prose :is(ul, ol) {
  font-size: 19px;
  line-height: 1.65;
}

.reading-page .prose li { line-height: 1.65; }

.reading-page .prose blockquote {
  font-family: var(--font-reading);
  font-size: 22px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  font-optical-sizing: auto;
}

/* Section headings stay in the interface face */
.reading-page .prose h2 {
  font-family: var(--font-ui);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
}

.reading-page .prose h3 {
  font-family: var(--font-ui);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.4;
}

.reading-page .prose :is(h4, h5, h6) {
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
}

/* Image captions */
.reading-page .prose figcaption {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}

/* Table of contents */
.reading-page .toc summary,
.reading-page .toc .toc-title {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.reading-page .toc nav a,
.reading-page .toc nav a.toc-depth-3,
.reading-page .toc nav a.toc-depth-4,
.reading-page .toc nav a.toc-depth-5,
.reading-page .toc nav a.toc-depth-6 {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

/* Top navigation on reading pages */
.reading-page .site-header nav a {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}

/* Code */
.reading-page .prose :is(pre, .highlight) {
  font-family: var(--font-code);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
}

.reading-page .prose :not(pre) > code {
  font-family: var(--font-code);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}