/**
 * Reading measure for long-form posts.
 *
 * The article column is ~880px, which runs prose to roughly 95 characters a
 * line. Comfortable reading is 60-75. Prose gets a measure; tables, code,
 * media and anything deliberately wide keep the full column.
 */

.em-post-content > p,
.em-post-content > ul,
.em-post-content > ol,
.em-post-content > dl,
.em-post-content > blockquote,
.em-post-content > h2,
.em-post-content > h3,
.em-post-content > h4,
.em-post-content > h5,
.em-post-content > h6,
.em-post-content > .wp-block-list,
.em-post-content > .wp-block-paragraph,
.em-post-content > .wp-block-quote {
	max-width: 70ch;
}

/* No breakpoint lifts this. max-width never exceeds the container, so on a
   narrow screen the cap is already a no-op -- and a 900px window is a laptop,
   not a phone: that is exactly where an uncapped line runs to 100 characters. */

/* These earn the full column. */
.em-post-content > .wp-block-table,
.em-post-content > figure,
.em-post-content > .em-code-box-wrap,
.em-post-content > .wp-block-image,
.em-post-content > .wp-block-embed,
.em-post-content > .alignwide,
.em-post-content > .alignfull,
.em-post-content > .em-cs-callout {
	max-width: none;
}

/* Headings land clear of the sticky header when jumped to from the contents. */
.em-post-content h2,
.em-post-content h3 {
	scroll-margin-top: 90px;
}

/* A little more air above a heading than below it, so sections group. */
.em-post-content > h2 {
	margin-top: 2.75rem;
}

.em-post-content > h3 {
	margin-top: 2rem;
}

/* The article sits in a grid column declared as 1fr, which is minmax(auto, 1fr):
   the auto minimum lets a wide child -- a long line of code -- push the column
   past its share, so the box escaped the container and took the copy button
   off-screen with it. A zero min-width holds the column to its track. */
.em-single-main,
.em-single-layout > * {
	min-width: 0;
}

/* ---------- tables in tutorials ---------- */

/* The theme gives cells 0.85rem of side padding inside a full border grid,
   which reads tight once a cell holds a command and a sentence. */
.em-post-content table {
	border-collapse: collapse;
}

.em-post-content th,
.em-post-content td {
	padding: 0.8rem 1.1rem;
	vertical-align: top;
}

.em-post-content th {
	text-align: start;
}

.em-post-content .wp-block-table {
	overflow-x: auto;
	margin-block: 1.5rem 2rem;
}