/* WordPress-specific additions. These only map WordPress's own markup (editor blocks, images, pagination)
   onto the approved Pylcrow components. They do not alter the approved design. */

.figure__frame--img { padding: 0; }
.figure__frame--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-bar .skip-link { top: calc(32px + var(--s2)); }

/* Page titles used on the Writing index and archives (same type as the About title) */
.page-head { padding-block: var(--s7) var(--s5); }
.page-title { font: 400 clamp(3rem, 8vw, 7.5rem)/.95 var(--font-display); letter-spacing: -.02em; margin: 0; }
.index--page { padding-bottom: var(--s8); }
.empty-note { font: 400 1rem/1.5 var(--font-ui); color: var(--mute); }

/* Pagination */
.pagination { margin-top: var(--s6); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--s3); font: 500 .875rem/1.4 var(--font-ui); }
.pagination a, .pagination span { border-bottom: 1px solid var(--rule); padding-block: var(--s1); }
.pagination a:hover, .pagination .current { border-bottom-color: var(--ink); }

/* Article body: content written in the WordPress editor */
.article-body h3 { font: 400 1.5rem/1.15 var(--font-display); margin-top: var(--s6); margin-bottom: var(--s3); }
.article-body ul, .article-body ol { padding-left: 1.25em; font-size: 1.1875rem; line-height: 1.7; margin-top: var(--s4); }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li + li { margin-top: .5em; }
.article-body > p:first-child, .article-body > h2:first-child { margin-top: 0; }
.article-body hr, .article-body .wp-block-separator { border: 0; border-top: 1px solid var(--rule); width: 100%; margin: var(--s6) 0; }
.article-body figure { margin: var(--s6) 0 0; }
.article-body figure + p { margin-top: var(--s6); }
.article-body img { display: block; max-width: 100%; height: auto; }
.article-body .wp-block-image img { width: 100%; }
.article-body figcaption { font: 400 .8125rem/1.4 var(--font-ui); color: var(--mute); margin-top: var(--s2); }
.article-body .alignwide { grid-column: wide; }
.article-body .alignfull { grid-column: full; }
.article-body .aligncenter { margin-inline: auto; }
.article-body blockquote, .article-body .wp-block-pullquote {
  grid-column: wide; border: 0; border-top: 1px solid var(--ink); padding: var(--s4) 0 0; margin: var(--s6) 0 0;
}
.article-body blockquote p, .article-body .wp-block-pullquote p {
  font: italic 400 1.1875rem/1.7 var(--font-display); /* matches the approved article page exactly */
  letter-spacing: -.01em; text-wrap: balance; max-width: 28ch; margin: 0;
}
.article-body .wp-block-pullquote blockquote { border: 0; padding: 0; margin: 0; }
.article-body blockquote p + p { margin-top: var(--s3); }
.article-body blockquote cite, .article-body .wp-block-pullquote cite, .article-body blockquote footer {
  display: block; margin-top: var(--s3); font: 500 .75rem/1.4 var(--font-ui);
  letter-spacing: .09em; text-transform: uppercase; color: var(--mute); font-style: normal;
}
.article-body blockquote + p, .article-body .wp-block-pullquote + p { margin-top: var(--s6); }
.article-body a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.article-body .wp-block-embed iframe, .article-body iframe { max-width: 100%; }
.next__item--text .next__text { grid-column: 1 / span 8; }
.article-head .meta a:hover { border-bottom: 1px solid var(--ink); }

/* About / generic page: editor content mapped onto the labelled blocks */
.about__text { display: block; }
.about__text > * + * { margin-top: var(--s3); }
.about__text > h2 {
  border-top: 1px solid var(--ink); padding-top: var(--s3);
  font: 600 .75rem/1.4 var(--font-ui); letter-spacing: .12em; text-transform: uppercase;
}
.about__text > * + h2 { margin-top: var(--s6); }
.about__text p { font-size: 1.1875rem; line-height: 1.7; max-width: 38rem; text-wrap: pretty; }
.about__text p a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.about__text ul, .about__text ol { padding-left: 1.25em; font-size: 1.1875rem; line-height: 1.7; max-width: 38rem; }
.about__text ul { list-style: disc; } .about__text ol { list-style: decimal; }
.about__text img { max-width: 100%; height: auto; display: block; }
@media (max-width: 1000px) { .about-head .about__lede:empty { display: none; } }

.about__text .ph-line { display: flex; }
.about__text > .ph-line { margin-top: var(--s3); }

/* Keep the approved vertical rhythm when the optional pull quote is not shown */
.latest + .index { margin-top: var(--s8); }

/* Long unbroken strings, tables and code never push the page wider than the screen */
.article-body, .about__text { overflow-wrap: break-word; }
.article-body table, .about__text table { display: table; width: 100%; border-collapse: collapse; font: 400 1rem/1.5 var(--font-ui); margin-top: var(--s5); }
.article-body th, .article-body td, .about__text th, .about__text td { border-bottom: 1px solid var(--rule); padding: var(--s2) var(--s3) var(--s2) 0; text-align: left; vertical-align: top; }
.article-body pre, .about__text pre { overflow-x: auto; max-width: 100%; font: 400 .9375rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; border: 1px solid var(--rule); padding: var(--s3); margin-top: var(--s5); }
.article-body code, .about__text code { font: .9em ui-monospace, SFMono-Regular, Menlo, monospace; }
.article-body .wp-block-table, .article-body .wp-block-code { margin-top: var(--s5); }
.article-body .wp-block-embed, .article-body .wp-block-video, .article-body video, .article-body iframe { max-width: 100%; }

.article-body > table, .about__text > table { display: block; max-width: 100%; overflow-x: auto; }
.article-body figure.wp-block-table, .about__text figure.wp-block-table { overflow-x: auto; max-width: 100%; }
.article-body figure.wp-block-table table, .about__text figure.wp-block-table table { width: max-content; min-width: 100%; }