/* Reading surfaces use the same publication system, without marketing motion. */
.reader-page :is(h1,h2,h3,h4,p,a,span,time,summary,button) { letter-spacing: 0; }
.article { width: min(100%, 720px); padding: 60px 0 100px; }
.article-head { padding-bottom: 28px; }
.article h1 { font: 450 52px/1.05 var(--font-display); margin-bottom: 22px; }
.article .dek { font: 400 20px/1.5 var(--font-ui); color: var(--ink-muted); }
.article-body { font-size: 21px; line-height: 1.65; }
.article-body h1, .article-body h2 { font: 500 30px/1.2 var(--font-display); margin-top: 38px; }
.article-body h3 { font: 500 25px/1.25 var(--font-display); }
.article-body a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.article-body a:hover { color: var(--live); }
.article .article-time, .article .byline, .article .provenance { font-family: var(--font-ui); }
.article .hero-figure { margin-top: 32px; margin-bottom: 36px; }
.article .hero-figure img { border-radius: 0; }
.article :is(.x-post,.quote-card) { border-radius: 6px; box-shadow: none; }
.empty { min-height: 65vh; }
.empty h1 { font-size: 58px; }
.empty p { font: 15px/1.7 var(--font-ui); }
@media (max-width: 700px) {
  .article { padding: 32px 0 64px; }
  .article h1 { font-size: 36px; }
  .article .dek { font-size: 17px; }
  .article-body { font-size: 19px; }
  .article-body h1, .article-body h2 { font-size: 27px; }
  .article-body h3 { font-size: 23px; }
  .empty h1 { font-size: 42px; }
}