/* Single: reading scale. Fonts come from the role variables (typography.php). */

.single .entry-content{--reading-size:19px;font-family:var(--font-body);font-size:19px;font-weight:var(--weight-text);line-height:1.75}
.single .entry-content :is(p,li,blockquote,td,dd,dt,div,span),
.single .interview-body :is(.interview-answer,.interview-intro,.interview-narration){font-family:var(--font-body);font-weight:var(--weight-text);font-size:var(--reading-size);line-height:1.75}
.single .entry-content :is(strong,b){font-weight:600}
.single .entry-content :is(em,i,cite){font-style:italic}
/* Legacy inline font-family keeps following the body font. */
.single .entry-content [style*="font-family"]{font-family:var(--font-body)!important}

/* Interface inside the content (captions, video labels, questions). */
.single .entry-content :is(figcaption,.wp-caption-text,.wp-element-caption,button,.sv-video-poster,.sv-video-play,.sv-video-external-link),
.single .entry-content :is(.sv-video-poster,.sv-video-external-link) *,
.single .interview-body .interview-question,.single .interview-body .interview-question *{font-family:var(--font-ui)!important}
.single .interview-body .interview-question{font-weight:600}

@media(max-width:760px){
 .single .entry-content{--reading-size:18px;font-size:18px;line-height:1.72}
 .single .entry-content :is(p,li,blockquote,td,dd,dt,div,span),
 .single .interview-body :is(.interview-answer,.interview-intro,.interview-narration){line-height:1.72}
}

/* P./R. markers in the UI font, matching each other. */
.single .interview-body .interview-question::before,.single .interview-body .interview-answer::before{font-family:var(--font-ui)}

/* Titles (H1 and content H2/H3) in the heading font; tracking follows that font. */
.single #main .entry-title,.single .entry-content :is(h1,h2,h3,h4,h5,h6),.single .entry-content :is(h1,h2,h3,h4,h5,h6) *{font-family:var(--font-heading)!important}
.single #main .entry-title{font-weight:600;letter-spacing:var(--heading-tracking);line-height:1.12}
.single .entry-content h2{font-size:25px;line-height:1.22;font-weight:600;letter-spacing:var(--heading-tracking);margin:44px 0 16px}
.single .entry-content h3{font-size:21px;line-height:1.28;font-weight:600;letter-spacing:0;margin:36px 0 12px}

/* Desktop: every text in the single one step larger. */
@media(min-width:761px){
 .single #main .entry-title{font-size:52px}
 .single #main .entry-meta{font-size:17px}
 .single #main .entry-content{--reading-size:22px;font-size:22px}
 .single #main .entry-content h2{font-size:36px}
 .single #main .entry-content h3{font-size:28px}
 .single #main .article-tags{font-size:18px}
 .single #main .share-label{font-size:19px}
 .single #main .share-actions a,.single #main .share-actions button{font-size:16px}
 .single #main .related-heading h2{font-size:30px}
 .single #main .related-card h3{font-size:22px}
 .single #main .related-card .meta{font-size:16px}
 .single #main .comment-reply-title{font-size:36px}
 .single #main .comment-form label{font-size:18px}
 .single #main .comment-form input:not([type=checkbox]):not([type=submit]),.single #main .comment-form textarea{font-size:19px}
 .single #main .comment-notes{font-size:17px!important}
 .single #main .comment-content{font-size:20px}
}

/* Legacy HTML puts images inside paragraphs, next to the text. Every image in a
   paragraph gets its own line, so the text always starts below it. */
.single .entry-content p>img,
.single .entry-content p>a:has(>img){display:block;width:fit-content;max-width:100%;margin:32px 0 28px}
.single .entry-content p>a:has(>img)>img{display:block}
.single .entry-content p>img:first-child,.single .entry-content p>a:has(>img):first-child{margin-top:8px}