/**
 * About Natalie page layout, enqueued on `is_page( 'about' )` alone — no rule names a page ID,
 * so the page keeps its layout however the replay onto production re-creates it.
 *
 * The page is a run of floated pictures inside the theme's full 1035px content column. At that
 * width the body text ran to ~140 characters a line, the right-hand picture's float was still
 * live when the left-hand one started (356px tall from the top of the content, so it ended
 * ~25px below the next picture's first line and squeezed one line to a 320px column), and the
 * centred picture finished flush against the Fancy Lady Industries panel below it.
 *
 * This narrows the column to a readable measure, keeps the two floats from fighting over the
 * same corner, and gives the panel the gap the picture owes it. No markup or copy is touched:
 * every rule lands on block classes WordPress already prints, and the pictures keep the sizes
 * set in the editor.
 */

/*
 * One centred measure, shared by the banner, the body and the footer so the h1, the text and
 * the copyright keep the same left edge. The banner and footer sit directly in #content; the
 * body sits inside #primary's 15px padding — #primary is the width of #content with symmetric
 * padding, so centring each in its own box puts all three at the same x.
 */
.inner-banner,
.entry-content,
.site-footer {
	max-width: 880px;
	margin-right: auto;
	margin-left: auto;
}

/* Pictures carry the theme's 7.5px figure margins; the paragraphs need a real gap below one. */
.entry-content .wp-block-image {
	margin-bottom: 30px;
}

/*
 * The left-hand picture clears the right-hand one. Without it the two overlap for ~25px and the
 * paragraph beside them wraps between both floats in a column narrower than a phone.
 */
.entry-content figure.alignright {
	margin-left: 35px;
}

.entry-content figure.alignleft {
	clear: both;
	margin-right: 35px;
}

/* The centred picture is the page's full stop; the panel under it is not part of the same beat. */
.entry-content .wp-block-media-text {
	margin-top: 50px;
}

/* Soften the panel's hard rectangle to sit with the is-style-rounded portrait at the top. */
.entry-content .wp-block-media-text__content p {
	border-radius: 8px;
}

/*
 * Under the float width the two pictures have nowhere to wrap into (the content column is the
 * viewport minus 30px), so they stack full width and centre, like the centred picture already is.
 */
@media (max-width: 767px) {
	.entry-content figure.alignleft,
	.entry-content figure.alignright {
		float: none;
		margin: 0 auto 30px;
	}

	.entry-content figure.alignleft img,
	.entry-content figure.alignright img {
		display: block;
		margin-right: auto;
		margin-left: auto;
	}
}